direct-online/vito
2
0
Fork 0
mirror of https://github.com/vitodeploy/vito.git synced 2025-07-07 08:52:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Monitoring & Service Management (#163)

Browse Source 
Monitoring & Service Management
This commit is contained in:
Saeed Vaziry
2024-04-13 11:47:56 +02:00
committed by GitHub
parent 87ec0af697
commit 052e28d2e3
95 changed files with 2423 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
resources/views/metrics/index.blade.php Normal file
View File

@ -0,0 +1,68 @@
<x-server-layout :server="$server">
<x-slot name="pageTitle">{{ $server->name }} - Metrics</x-slot>
@include("metrics.partials.filter")
@php
$cpuSets = [
"name" => "CPU Load",
"data" => $data["metrics"]->pluck("load")->toArray(),
"color" => "#ff9900",
];
$memorySets = [
"name" => "Memory Usage",
"data" => $data["metrics"]->pluck("memory_used")->toArray(),
"color" => "#3366cc",
];
$diskSets = [
"name" => "Disk Usage",
"data" => $data["metrics"]->pluck("disk_used")->toArray(),
"color" => "#109618",
];
@endphp
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
<x-chart
id="cpu-load"
type="area"
title="CPU Load"
:sets="[$cpuSets]"
:categories="$data['metrics']->pluck('date')->toArray()"
color="#ff9900"
class="h-[200px] !p-0"
/>
<x-chart
id="memory-usage"
type="area"
title="Memory"
:sets="[$memorySets]"
:categories="$data['metrics']->pluck('date')->toArray()"
color="#3366cc"
class="h-[200px] !p-0"
/>
<x-chart
id="disk-usage"
type="area"
title="Disk"
:sets="[$diskSets]"
:categories="$data['metrics']->pluck('date')->toArray()"
color="#109618"
class="h-[200px] !p-0"
/>
</div>
<div class="mt-10">
<x-chart
id="resource-usage"
type="line"
title="Resource Usage"
:sets="[$cpuSets, $memorySets, $diskSets]"
:categories="$data['metrics']->pluck('date')->toArray()"
color="#109618"
:toolbar="true"
class="h-[400px] !px-0 !pt-0"
/>
</div>
</x-server-layout>

76
resources/views/metrics/partials/filter.blade.php Normal file
View File

@ -0,0 +1,76 @@
<div class="flex items-center" x-data="{ period: '{{ request()->query("period") ?? "10m" }}' }">
<x-dropdown align="left" class="ml-2">
<x-slot name="trigger">
<div data-tooltip="Change Period">
<div
class="flex w-full items-center rounded-md border border-gray-300 bg-white p-2.5 pr-10 text-sm capitalize text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
>
<div x-text="period"></div>
</div>
<button type="button" class="absolute inset-y-0 right-0 flex items-center pr-2">
<x-heroicon name="o-chevron-down" class="h-4 w-4 text-gray-400" />
</button>
</div>
</x-slot>
<x-slot name="content">
<x-dropdown-link :href="route('servers.metrics', ['server' => $server, 'period' => '10m'])">
10 Minutes
</x-dropdown-link>
<x-dropdown-link :href="route('servers.metrics', ['server' => $server, 'period' => '30m'])">
30 Minutes
</x-dropdown-link>
<x-dropdown-link :href="route('servers.metrics', ['server' => $server, 'period' => '1h'])">
1 Hour
</x-dropdown-link>
<x-dropdown-link :href="route('servers.metrics', ['server' => $server, 'period' => '12h'])">
12 Hours
</x-dropdown-link>
<x-dropdown-link :href="route('servers.metrics', ['server' => $server, 'period' => '1d'])">
1 Day
</x-dropdown-link>
<x-dropdown-link :href="route('servers.metrics', ['server' => $server, 'period' => '7d'])">
7 Days
</x-dropdown-link>
<x-dropdown-link x-on:click="period = 'custom'" class="cursor-pointer">Custom</x-dropdown-link>
</x-slot>
</x-dropdown>
<form
x-show="period === 'custom'"
class="flex items-center"
action="{{ route("servers.metrics", ["server" => $server, "period" => "custom"]) }}"
>
<input type="hidden" name="period" value="custom" />
<div date-rangepicker datepicker-format="yyyy-mm-dd" class="ml-2 flex items-center">
<div class="relative">
<div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
<x-heroicon name="o-calendar" class="h-4 w-4 text-gray-500 dark:text-gray-400" />
</div>
<input
name="from"
type="text"
class="block w-full rounded-md border border-gray-300 bg-white p-2.5 ps-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
placeholder="{{ __("From Date") }}"
value="{{ request()->query("from") }}"
autocomplete="off"
/>
</div>
<span class="mx-2 text-gray-500">to</span>
<div class="relative">
<div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
<x-heroicon name="o-calendar" class="h-4 w-4 text-gray-500 dark:text-gray-400" />
</div>
<input
name="to"
type="text"
class="block w-full rounded-md border border-gray-300 bg-white p-2.5 ps-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
placeholder="{{ __("To Date") }}"
value="{{ request()->query("to") }}"
autocomplete="off"
/>
<x-input-error class="absolute left-0 top-10 ml-1 mt-1" :messages="$errors->get('to')" />
</div>
</div>
<x-primary-button class="ml-2 h-[42px]">{{ __("Filter") }}</x-primary-button>
</form>
</div>