mirror of
https://github.com/vitodeploy/vito.git
synced 2025-07-02 22:46:16 +00:00
add data retention to the metrics
This commit is contained in:
Saeed Vaziry
@ -6,6 +6,7 @@
|
||||
"sets",
|
||||
"categories",
|
||||
"toolbar" => false,
|
||||
"formatter" => null,
|
||||
])
|
||||
<x-simple-card {{ $attributes }}>
|
||||
<div class="relative">
|
||||
@ -87,9 +88,9 @@
|
||||
yaxis: {
|
||||
show: false,
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
return parseInt(value);
|
||||
}
|
||||
@if ($formatter)
|
||||
formatter: {{ $formatter }},
|
||||
@endif
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,68 +1,106 @@
|
||||
<x-server-layout :server="$server">
|
||||
<x-slot name="pageTitle">{{ $server->name }} - Metrics</x-slot>
|
||||
|
||||
@include("metrics.partials.filter")
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
@include("metrics.partials.filter")
|
||||
@include("metrics.partials.data-retention")
|
||||
</div>
|
||||
@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
|
||||
|
||||
@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"
|
||||
/>
|
||||
|
||||
<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"
|
||||
formatter="function (value) { return (value / 1000).toFixed(2) + ` MB`; }"
|
||||
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()"
|
||||
formatter="function (value) { return value + ` MB`; }"
|
||||
color="#109618"
|
||||
class="h-[200px] !p-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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 class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<x-simple-card class="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
<span class="text-center lg:text-left">Total Memory</span>
|
||||
<div class="text-center text-xl font-bold text-gray-600 dark:text-gray-400 lg:text-right">
|
||||
{{ $lastMetric->memory_total }} MB
|
||||
</div>
|
||||
</x-simple-card>
|
||||
<x-simple-card class="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
<span class="text-center lg:text-left">Used Memory</span>
|
||||
<div class="text-center text-xl font-bold text-gray-600 dark:text-gray-400 lg:text-right">
|
||||
{{ $lastMetric->memory_used }} MB
|
||||
</div>
|
||||
</x-simple-card>
|
||||
<x-simple-card class="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
<span class="text-center lg:text-left">Free Memory</span>
|
||||
<div class="text-center text-xl font-bold text-gray-600 dark:text-gray-400 lg:text-right">
|
||||
{{ $lastMetric->memory_free }} MB
|
||||
</div>
|
||||
</x-simple-card>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<x-simple-card class="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
<span class="text-center lg:text-left">Total Space</span>
|
||||
<div class="text-center text-xl font-bold text-gray-600 dark:text-gray-400 lg:text-right">
|
||||
{{ $lastMetric->disk_total }} MB
|
||||
</div>
|
||||
</x-simple-card>
|
||||
<x-simple-card class="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
<span class="text-center lg:text-left">Used Space</span>
|
||||
<div class="text-center text-xl font-bold text-gray-600 dark:text-gray-400 lg:text-right">
|
||||
{{ $lastMetric->disk_used }} MB
|
||||
</div>
|
||||
</x-simple-card>
|
||||
<x-simple-card class="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
<span class="text-center lg:text-left">Free Space</span>
|
||||
<div class="text-center text-xl font-bold text-gray-600 dark:text-gray-400 lg:text-right">
|
||||
{{ $lastMetric->disk_free }} MB
|
||||
</div>
|
||||
</x-simple-card>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
@stack("modals")
|
||||
</x-server-layout>
|
||||
|
||||
44
resources/views/metrics/partials/data-retention.blade.php
Normal file
44
resources/views/metrics/partials/data-retention.blade.php
Normal file
@ -0,0 +1,44 @@
|
||||
<x-secondary-button
|
||||
class="ml-2 hidden h-[42px] items-center lg:flex"
|
||||
x-on:click="$dispatch('open-modal', 'metric-settings')"
|
||||
>
|
||||
<x-heroicon name="o-trash" class="mr-1 h-5 w-5" />
|
||||
Data Retention
|
||||
</x-secondary-button>
|
||||
@push("modals")
|
||||
<x-modal name="metric-settings">
|
||||
<form
|
||||
id="metric-settings-form"
|
||||
hx-post="{{ route("servers.metrics.settings", ["server" => $server]) }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-select="#metric-settings-form"
|
||||
class="p-6"
|
||||
>
|
||||
@csrf
|
||||
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Data Retention</h2>
|
||||
|
||||
<div class="mt-6">
|
||||
<x-input-label for="data_retention" value="Delete metrics older than" />
|
||||
<x-select-input id="data_retention" name="data_retention" class="mt-1 w-full">
|
||||
@foreach (config("core.metrics_data_retention") as $item)
|
||||
<option value="{{ $item }}">{{ $item }} Days</option>
|
||||
@endforeach
|
||||
</x-select-input>
|
||||
@error("data_retention")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end">
|
||||
<x-secondary-button type="button" x-on:click="$dispatch('close')">
|
||||
{{ __("Cancel") }}
|
||||
</x-secondary-button>
|
||||
|
||||
<x-primary-button id="btn-metric-settings" hx-disable class="ml-3">
|
||||
{{ __("Save") }}
|
||||
</x-primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-modal>
|
||||
@endpush
|
||||
@ -13,20 +13,7 @@ class="@if($server->webserver() && $server->database()) grid-cols-3 @else grid-c
|
||||
@if ($server->webserver())
|
||||
<div class="border-r border-gray-200 p-5 dark:border-gray-900">
|
||||
<div class="flex items-center justify-center md:justify-start">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="h-8 w-8 text-primary-500"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
|
||||
/>
|
||||
</svg>
|
||||
<x-heroicon name="o-globe-alt" class="h-8 w-8 text-primary-500" />
|
||||
<div class="ml-2 hidden md:block">{{ __("Sites") }}</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center text-3xl font-bold text-gray-600 dark:text-gray-400 md:text-left">
|
||||
@ -38,20 +25,7 @@ class="h-8 w-8 text-primary-500"
|
||||
@if ($server->database())
|
||||
<div class="border-r border-gray-200 p-5 dark:border-gray-900">
|
||||
<div class="flex items-center justify-center md:justify-start">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="h-8 w-8 text-primary-500"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"
|
||||
/>
|
||||
</svg>
|
||||
<x-heroicon name="o-circle-stack" class="h-8 w-8 text-primary-500" />
|
||||
<div class="ml-2 hidden md:block">
|
||||
{{ __("Databases") }}
|
||||
</div>
|
||||
@ -64,20 +38,7 @@ class="h-8 w-8 text-primary-500"
|
||||
|
||||
<div class="p-5">
|
||||
<div class="flex items-center justify-center md:justify-start">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="h-8 w-8 text-primary-500"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<x-heroicon name="o-clock" class="h-8 w-8 text-primary-500" />
|
||||
<div class="ml-2 hidden md:block">{{ __("Cron Jobs") }}</div>
|
||||
</div>
|
||||
<div class="mt-3 text-center text-3xl font-bold text-gray-600 dark:text-gray-400 md:text-left">
|
||||
|
||||
@ -5,29 +5,31 @@
|
||||
<x-slot name="aside"></x-slot>
|
||||
</x-card-header>
|
||||
|
||||
<div class="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
@foreach (config("core.service_handlers") as $key => $addOn)
|
||||
@if (! $server->services()->where("name", $key)->exists())
|
||||
<div
|
||||
class="relative flex h-auto flex-col items-center justify-between space-y-3 rounded-b-md rounded-t-md border border-gray-200 bg-white text-center dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<div class="space-y-3 p-5">
|
||||
<div class="flex items-center justify-center">
|
||||
<img src="{{ asset("static/images/" . $key . ".svg") }}" class="h-20 w-20" alt="" />
|
||||
</div>
|
||||
<div class="flex flex-grow flex-col items-center justify-center">
|
||||
<div class="flex items-center justify-center text-center text-lg">
|
||||
{{ $key }}
|
||||
<x-live id="live-available-services">
|
||||
<div class="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
@foreach (config("core.service_handlers") as $key => $addOn)
|
||||
@if (! $server->services()->where("name", $key)->exists())
|
||||
<div
|
||||
class="relative flex h-auto flex-col items-center justify-between space-y-3 rounded-b-md rounded-t-md border border-gray-200 bg-white text-center dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<div class="space-y-3 p-5">
|
||||
<div class="flex items-center justify-center">
|
||||
<img src="{{ asset("static/images/" . $key . ".svg") }}" class="h-20 w-20" alt="" />
|
||||
</div>
|
||||
<div class="flex flex-grow flex-col items-center justify-center">
|
||||
<div class="flex items-center justify-center text-center text-lg">
|
||||
{{ $key }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex w-full items-center justify-between rounded-b-md border-t border-t-gray-200 bg-gray-50 p-2 dark:border-t-gray-600 dark:bg-gray-700"
|
||||
>
|
||||
@include("services.partials.installers." . $key)
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex w-full items-center justify-between rounded-b-md border-t border-t-gray-200 bg-gray-50 p-2 dark:border-t-gray-600 dark:bg-gray-700"
|
||||
>
|
||||
@include("services.partials.installers." . $key)
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</x-live>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user