Feature request?

[RobertByrnes]

Hi Folks, I opened this rather than PR at this stage to gauge interest. I forked this excellent tile due to a need at work to create a dashboard for our uptime monitoring, with about 50+ urls/ips monitored. I have edited the tile.blade.php to include a little apline.js to handle monitors being grouped by status. Dynamic filter applied to display downed monitors at the top of the list.

If there is any of this you like then please let know what you'd be interested in by way of a PR.

main differences / additions:

    public function monitorsByStatus(): array
    {
        $monitors = collect($this->tile->getData('monitors'));
        $monitorTypes = config('dashboard.tiles.uptimerobot.monitor_types');

        if (!empty(config('dashboard.tiles.uptimerobot.monitors'))) {
            $monitors = $monitors->filter(function ($item, $key) {
                return in_array($item['id'], config('dashboard.tiles.uptimerobot.monitors'));
            });
        }

        foreach ($monitors as $monitor) {
            $monitor['badge'] = $this->badges[$monitor['status']];
            $monitor['status'] = $this->statuses[$monitor['status']];
            $monitor['monitor_type'] = $monitorTypes[$monitor['type']];
            $this->monitors[$monitor['status']][] = $monitor;
        }

        return $this->monitors;
    }


        <div style="height:70vh;"
             x-data="{monitors: uptime_monitors}">
            <template x-for="monitor_states in monitors">
                <div x-show="(monitor_states.length > 0)"
                     class="grid grid-cols-7 card-scrollbar">
                    <template x-for="monitor in monitor_states"
                              x-init="console.log((monitor_states.length > 0))">
                        <div class="uptime-card">
                            <div class="text-xs grid grid-cols-2"
                                 x-init="$store.monitors.addBadgeClasses($el, monitor.badge)">
                                <div class="pl-2 col-span-1"
                                     x-text="monitor.status"
                                ></div>
                                <div class="text-gray-900 text-xs text-right pr-1"
                                     x-text="Number(monitor.all_time_uptime_ratio).toFixed(2) + '% up'">
                                </div>
                            </div>
                            <div class="bg-neutral-100 text-xs grid grid-cols-4">
                                <div class="text-gray-900 bg-neutral-100 text-left pl-2 text-truncate col-span-3"
                                     x-text="monitor.friendly_name">
                                </div>
                                <div class="text-gray-900 bg-neutral-100 text-right pr-2 text-truncate col-span-1"
                                     x-text="monitor.monitor_type">
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </template>
        </div>

Best wishes

[vinevax]

Hi, I really like the idea with grouping the tiles by status, and I'm sure others would like it too. A PR would definitely be appreciated.