vinevax / laravel-dashboard-uptime-robot-tile

A tile for Spatie's Laravel Dashboard package that displays the status of your Uptime Robot monitors.

A tile to display Uptime Robot monitors

This tile can be used on the Laravel Dashboard.

Original view...

Alternative view for many monitors...

Installation

You can install the package via composer:

composer require vinevax/laravel-dashboard-uptime-robot-tile

⚠️ Important if you want to use the alternative view

In order to use the alternative view, you need to update the included Alpine.js script from version 2 to 3. To do this, remove the old script in your dashboard.php config file and add the following script https://unpkg.com/[email protected]/dist/cdn.min.js

Usage

In the dashboard config file, you must add this configuration in the tiles key.

// in config/dashboard.php

return [
    // ...
    'tiles' => [
        /* Monitors should be an array with ids of your monitors you want to display */
        'uptimerobot' => [
            'key' => env('UPTIMEROBOT_KEY'),
            'blade' => 'multiple', // Or `multiple` for alternative tile
            'monitors' => [],
            'monitor_types' => [
                1 => 'URL',
                2 => 'Keyword',
                3 => 'Ping',
                4 => 'Port',
                5 => 'Heartbeat'
            ],
            'uptime' => 1 // Set to 0 if fetching from Uptime Robot API lags
        ]   
    ]   
];

In app/Console/Kernel.php you should schedule the VineVax\UptimeRobotTile\Commands\FetchUptimeRobotDataCommand to run every x minutes.

    // in app/console/Kernel.php
  
        protected function schedule(Schedule $schedule)
        {
            $schedule->command(\VineVax\UptimeRobotTile\Commands\FetchUptimeRobotDataCommand::class)->everyFiveMinutes();
        }

In your dashboard view you use the livewire:uptime-robot-tile component.

<x-dashboard>
    <livewire:uptime-robot-tile position="b1" />
</x-dashboard>

Customizing the view

If you want to customize the view used to render this tile, run this command:

php artisan vendor:publish --provider="VineVax\UptimeRobotTile\UptimeRobotTileServiceProvider" --tag="dashboard-uptime-robot-tile-views"

Please note that if you have published the view and then wish to switch between 'original' and 'multiple' options for the blade file in dashboard.php you will need to remove tile.blade.php from /resources/views/vendor/dashboard-uptime-robot-tile and then run the publish command again.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Credits

• VineVax
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

laravel-dashboard-uptime-robot-tile's Issues

Support v2 of dashboard

Hi,

we've released v2 our dashboard. The only change are the updated requirements: we now require Laravel v8 and Livewire v2.

Could you please tag a new release of your tile?

In most cases these are the things you need to do:

• update the requirement in the composer.json of your tile to spatie/laravel-dashboard": "^2.0
• tag a new release. Personally, I would opt for a major release, so you can still do bug fixes on the v1 of your tile.

Thanks!

Feature request?

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