mirror of
https://github.com/vitodeploy/vito.git
synced 2025-07-08 01:12:34 +00:00
add data retention to the metrics
This commit is contained in:
Saeed Vaziry
@ -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
|
||||
Reference in New Issue
Block a user