Monitoring & Service Management (#163)

Monitoring & Service Management
2025-07-02 14:36:17 +00:00 · 2024-04-13 11:47:56 +02:00
parent 87ec0af697
commit 052e28d2e3
95 changed files with 2423 additions and 341 deletions
--- a/resources/js/app.js
+++ b/resources/js/app.js
@ -1,9 +1,13 @@
 import 'flowbite';
+import 'flowbite/dist/datepicker.js';

 import Alpine from 'alpinejs';
 window.Alpine = Alpine;
 Alpine.start();

+import ApexCharts from 'apexcharts';
+window.ApexCharts = ApexCharts;
+
 import htmx from "htmx.org";
 window.htmx = htmx;
 window.htmx.defineExtension('disable-element', {
--- a/resources/views/components/chart.blade.php
+++ b/resources/views/components/chart.blade.php
@ -0,0 +1,103 @@
+@props([
+    "id",
+    "type",
+    "title",
+    "color",
+    "sets",
+    "categories",
+    "toolbar" => false,
+])
+<x-simple-card {{ $attributes }}>
+    <div class="relative">
+        <div class="absolute left-4 top-4">{{ $title }}</div>
+    </div>
+    <div id="{{ $id }}" class="pt-4"></div>
+    <script>
+        window.addEventListener('load', function () {
+            let options = {
+                series: [
+                    @foreach ($sets as $set)
+                        {
+                            name: '{{ $set["name"] }}',
+                            data: @json($set["data"]),
+                            color: '{{ $set["color"] }}'
+                        },
+                    @endforeach
+                ],
+                chart: {
+                    height: '100%',
+                    maxWidth: '100%',
+                    type: '{{ $type }}',
+                    fontFamily: 'Inter, sans-serif',
+                    dropShadow: {
+                        enabled: false
+                    },
+                    toolbar: {
+                        show: @js($toolbar)
+                    }
+                },
+                tooltip: {
+                    enabled: true,
+                    x: {
+                        show: true
+                    }
+                },
+                legend: {
+                    show: true
+                },
+                @if ($type == 'area')
+                fill: {
+                    type: 'gradient',
+                    gradient: {
+                        opacityFrom: 0.55,
+                        opacityTo: 0,
+                        shade: '{{ $color }}',
+                        gradientToColors: ['{{ $color }}']
+                    }
+                },
+                @endif
+                dataLabels: {
+                    enabled: false
+                },
+                stroke: {
+                    width: 2,
+                    curve: 'smooth'
+                },
+                grid: {
+                    show: false,
+                    strokeDashArray: 4,
+                    padding: {
+                        left: 2,
+                        right: 2,
+                        top: 0
+                    }
+                },
+                xaxis: {
+                    categories: @json($categories),
+                    labels: {
+                        show: false
+                    },
+                    axisBorder: {
+                        show: false
+                    },
+                    axisTicks: {
+                        show: false
+                    }
+                },
+                yaxis: {
+                    show: false,
+                    labels: {
+                        formatter: function (value) {
+                            return parseInt(value);
+                        }
+                    }
+                }
+            };
+
+            if (document.getElementById('{{ $id }}') && typeof ApexCharts !== 'undefined') {
+                const chart = new ApexCharts(document.getElementById('{{ $id }}'), options);
+                chart.render();
+            }
+        });
+    </script>
+</x-simple-card>
--- a/resources/views/components/heroicons/o-calendar.blade.php
+++ b/resources/views/components/heroicons/o-calendar.blade.php
@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    {{ $attributes }}
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+    />
+</svg>
--- a/resources/views/components/heroicons/o-chart-bar.blade.php
+++ b/resources/views/components/heroicons/o-chart-bar.blade.php
@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    {{ $attributes }}
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
+    />
+</svg>
--- a/resources/views/layouts/sidebar.blade.php
+++ b/resources/views/layouts/sidebar.blade.php
@ -37,7 +37,7 @@ class="fixed left-0 top-0 z-40 h-screen w-64 -translate-x-full border-r border-g
                    </li>
                @endif

-                @if ($server->database())
+                @if ($server->database()?->status == \App\Enums\ServiceStatus::READY)
                    <li>
                        <x-sidebar-link
                            :href="route('servers.databases', ['server' => $server])"
@ -52,19 +52,17 @@ class="fixed left-0 top-0 z-40 h-screen w-64 -translate-x-full border-r border-g
                    </li>
                @endif

-                @if ($server->php())
-                    <li>
-                        <x-sidebar-link
-                            :href="route('servers.php', ['server' => $server])"
-                            :active="request()->routeIs('servers.php')"
-                        >
-                            <x-heroicon name="o-code-bracket" class="h-6 w-6" />
-                            <span class="ml-2">
-                                {{ __("PHP") }}
-                            </span>
-                        </x-sidebar-link>
-                    </li>
-                @endif
+                <li>
+                    <x-sidebar-link
+                        :href="route('servers.php', ['server' => $server])"
+                        :active="request()->routeIs('servers.php')"
+                    >
+                        <x-heroicon name="o-code-bracket" class="h-6 w-6" />
+                        <span class="ml-2">
+                            {{ __("PHP") }}
+                        </span>
+                    </x-sidebar-link>
+                </li>

                @if ($server->firewall())
                    <li>
@ -116,6 +114,20 @@ class="fixed left-0 top-0 z-40 h-screen w-64 -translate-x-full border-r border-g
                    </x-sidebar-link>
                </li>

+                @if ($server->monitoring())
+                    <li>
+                        <x-sidebar-link
+                            :href="route('servers.metrics', ['server' => $server])"
+                            :active="request()->routeIs('servers.metrics')"
+                        >
+                            <x-heroicon name="o-chart-bar" class="h-6 w-6" />
+                            <span class="ml-2">
+                                {{ __("Metrics") }}
+                            </span>
+                        </x-sidebar-link>
+                    </li>
+                @endif
+
                <li>
                    <x-sidebar-link
                        :href="route('servers.console', ['server' => $server])"
--- a/resources/views/layouts/site.blade.php
+++ b/resources/views/layouts/site.blade.php
@ -28,7 +28,7 @@ class="mr-1"
                </x-tab-item>
            @endif

-            @if ($site->hasFeature(SiteFeature::QUEUES))
+            @if ($site->hasFeature(SiteFeature::QUEUES) && $site->server->processManager()?->status == \App\Enums\ServiceStatus::READY)
                <x-tab-item
                    class="mr-1"
                    :href="route('servers.sites.queues', ['server' => $site->server, 'site' => $site])"
--- a/resources/views/metrics/index.blade.php
+++ b/resources/views/metrics/index.blade.php
@ -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>
--- a/resources/views/metrics/partials/filter.blade.php
+++ b/resources/views/metrics/partials/filter.blade.php
@ -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>
--- a/resources/views/servers/partials/create-server.blade.php
+++ b/resources/views/servers/partials/create-server.blade.php
@ -239,6 +239,7 @@ class="mt-1 block w-full"
                <div x-show="['{{ ServerType::REGULAR }}'].includes(type)">
                    <x-input-label for="php" value="PHP" />
                    <x-select-input id="php" name="php" class="mt-1 w-full">
+                        <option value="none" @if('none' == old('php', '8.2')) selected @endif>none</option>
                        @foreach (config("core.php_versions") as $p)
                            <option value="{{ $p }}" @if($p == old('php', '8.2')) selected @endif>
                                {{ $p }}
--- a/resources/views/services/index.blade.php
+++ b/resources/views/services/index.blade.php
@ -3,5 +3,7 @@

    @include("services.partials.services-list")

-    {{-- @include("services.partials.add-ons") --}}
+    @include("services.partials.available-services")
+
+    @stack("modals")
 </x-server-layout>
--- a/resources/views/services/partials/actions/mariadb.blade.php
+++ b/resources/views/services/partials/actions/mariadb.blade.php
@ -1 +1,6 @@
-@include("services.partials.unit-actions")
+@include("services.partials.unit-actions.restart")
+@include("services.partials.unit-actions.start")
+@include("services.partials.unit-actions.stop")
+@include("services.partials.unit-actions.enable")
+@include("services.partials.unit-actions.disable")
+@include("services.partials.unit-actions.uninstall")
--- a/resources/views/services/partials/actions/mysql.blade.php
+++ b/resources/views/services/partials/actions/mysql.blade.php
@ -1 +1,6 @@
-@include("services.partials.unit-actions")
+@include("services.partials.unit-actions.restart")
+@include("services.partials.unit-actions.start")
+@include("services.partials.unit-actions.stop")
+@include("services.partials.unit-actions.enable")
+@include("services.partials.unit-actions.disable")
+@include("services.partials.unit-actions.uninstall")
--- a/resources/views/services/partials/actions/nginx.blade.php
+++ b/resources/views/services/partials/actions/nginx.blade.php
@ -1 +1,6 @@
-@include("services.partials.unit-actions")
+@include("services.partials.unit-actions.restart")
+@include("services.partials.unit-actions.start")
+@include("services.partials.unit-actions.stop")
+@include("services.partials.unit-actions.enable")
+@include("services.partials.unit-actions.disable")
+@include("services.partials.unit-actions.uninstall")
--- a/resources/views/services/partials/actions/php.blade.php
+++ b/resources/views/services/partials/actions/php.blade.php
@ -1 +1,6 @@
-@include("services.partials.unit-actions")
+@include("services.partials.unit-actions.restart")
+@include("services.partials.unit-actions.start")
+@include("services.partials.unit-actions.stop")
+@include("services.partials.unit-actions.enable")
+@include("services.partials.unit-actions.disable")
+@include("services.partials.unit-actions.uninstall")
--- a/resources/views/services/partials/actions/postgresql.blade.php
+++ b/resources/views/services/partials/actions/postgresql.blade.php
@ -1 +1,6 @@
-@include("services.partials.unit-actions")
+@include("services.partials.unit-actions.restart")
+@include("services.partials.unit-actions.start")
+@include("services.partials.unit-actions.stop")
+@include("services.partials.unit-actions.enable")
+@include("services.partials.unit-actions.disable")
+@include("services.partials.unit-actions.uninstall")
--- a/resources/views/services/partials/actions/redis.blade.php
+++ b/resources/views/services/partials/actions/redis.blade.php
@ -1 +1,6 @@
-@include("services.partials.unit-actions")
+@include("services.partials.unit-actions.restart")
+@include("services.partials.unit-actions.start")
+@include("services.partials.unit-actions.stop")
+@include("services.partials.unit-actions.enable")
+@include("services.partials.unit-actions.disable")
+@include("services.partials.unit-actions.uninstall")
--- a/resources/views/services/partials/actions/supervisor.blade.php
+++ b/resources/views/services/partials/actions/supervisor.blade.php
@ -1 +1,6 @@
-@include("services.partials.unit-actions")
+@include("services.partials.unit-actions.restart")
+@include("services.partials.unit-actions.start")
+@include("services.partials.unit-actions.stop")
+@include("services.partials.unit-actions.enable")
+@include("services.partials.unit-actions.disable")
+@include("services.partials.unit-actions.uninstall")
--- a/resources/views/services/partials/actions/ufw.blade.php
+++ b/resources/views/services/partials/actions/ufw.blade.php
@ -1 +1,5 @@
-@include("services.partials.unit-actions")
+@include("services.partials.unit-actions.restart")
+@include("services.partials.unit-actions.start")
+@include("services.partials.unit-actions.stop")
+@include("services.partials.unit-actions.enable")
+@include("services.partials.unit-actions.disable")
--- a/resources/views/services/partials/actions/vito-agent.blade.php
+++ b/resources/views/services/partials/actions/vito-agent.blade.php
@ -0,0 +1,6 @@
+@include("services.partials.unit-actions.restart")
+@include("services.partials.unit-actions.start")
+@include("services.partials.unit-actions.stop")
+@include("services.partials.unit-actions.enable")
+@include("services.partials.unit-actions.disable")
+@include("services.partials.unit-actions.uninstall")
--- a/resources/views/services/partials/add-ons.blade.php
+++ b/resources/views/services/partials/add-ons.blade.php
@ -1,33 +0,0 @@
-<div>
-    <x-card-header>
-        <x-slot name="title">Supported Services</x-slot>
-        <x-slot name="description">Here you can find the supported services to install</x-slot>
-        <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.add_on_services") as $addOn)
-            <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/" . $addOn . ".svg") }}" class="h-20 w-20" alt="" />
-                    </div>
-                    <div class="flex flex-grow flex-col items-start justify-center">
-                        <div class="flex items-center">
-                            <div class="flex items-center text-lg">
-                                {{ $addOn }}
-                            </div>
-                        </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.add-on-installers." . $addOn)
-                </div>
-            </div>
-        @endforeach
-    </div>
-</div>
--- a/resources/views/services/partials/available-services.blade.php
+++ b/resources/views/services/partials/available-services.blade.php
@ -0,0 +1,33 @@
+<div>
+    <x-card-header>
+        <x-slot name="title">Supported Services</x-slot>
+        <x-slot name="description">Here you can find the supported services to install</x-slot>
+        <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 }}
+                            </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>
+            @endif
+        @endforeach
+    </div>
+</div>
--- a/resources/views/services/partials/installers/mariadb.blade.php
+++ b/resources/views/services/partials/installers/mariadb.blade.php
@ -0,0 +1,48 @@
+<x-secondary-button class="!w-full" x-on:click="$dispatch('open-modal', 'install-mariadb')">Install</x-secondary-button>
+@push("modals")
+    <x-modal name="install-mariadb">
+        <form
+            id="install-mariadb-form"
+            hx-post="{{ route("servers.services.install", ["server" => $server]) }}"
+            hx-swap="outerHTML"
+            hx-select="#install-mariadb-form"
+            class="p-6"
+        >
+            @csrf
+            <input type="hidden" name="name" value="mariadb" />
+            <input type="hidden" name="type" value="database" />
+
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                {{ __("Install mariadb") }}
+            </h2>
+
+            <div class="mt-6">
+                <x-input-label for="version" value="Version" />
+                <x-select-input id="version" name="version" class="mt-1 w-full">
+                    @foreach (collect(config("core.databases_name"))->filter(fn ($value) => $value == "mariadb") as $db => $value)
+                        <option value="{{ config("core.databases_version")[$db] }}">
+                            {{ config("core.databases_name")[$db] }} {{ config("core.databases_version")[$db] }}
+                        </option>
+                    @endforeach
+                </x-select-input>
+                @error("version")
+                    <x-input-error class="mt-2" :messages="$message" />
+                @enderror
+
+                @error("type")
+                    <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-install-mariadb" hx-disable class="ml-3">
+                    {{ __("Install") }}
+                </x-primary-button>
+            </div>
+        </form>
+    </x-modal>
+@endpush
--- a/resources/views/services/partials/installers/mysql.blade.php
+++ b/resources/views/services/partials/installers/mysql.blade.php
@ -0,0 +1,48 @@
+<x-secondary-button class="!w-full" x-on:click="$dispatch('open-modal', 'install-mysql')">Install</x-secondary-button>
+@push("modals")
+    <x-modal name="install-mysql">
+        <form
+            id="install-mysql-form"
+            hx-post="{{ route("servers.services.install", ["server" => $server]) }}"
+            hx-swap="outerHTML"
+            hx-select="#install-mysql-form"
+            class="p-6"
+        >
+            @csrf
+            <input type="hidden" name="name" value="mysql" />
+            <input type="hidden" name="type" value="database" />
+
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                {{ __("Install Mysql") }}
+            </h2>
+
+            <div class="mt-6">
+                <x-input-label for="version" value="Version" />
+                <x-select-input id="version" name="version" class="mt-1 w-full">
+                    @foreach (collect(config("core.databases_name"))->filter(fn ($value) => $value == "mysql") as $db => $value)
+                        <option value="{{ config("core.databases_version")[$db] }}">
+                            {{ config("core.databases_name")[$db] }} {{ config("core.databases_version")[$db] }}
+                        </option>
+                    @endforeach
+                </x-select-input>
+                @error("version")
+                    <x-input-error class="mt-2" :messages="$message" />
+                @enderror
+
+                @error("type")
+                    <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-install-mysql" hx-disable class="ml-3">
+                    {{ __("Install") }}
+                </x-primary-button>
+            </div>
+        </form>
+    </x-modal>
+@endpush
--- a/resources/views/services/partials/installers/nginx.blade.php
+++ b/resources/views/services/partials/installers/nginx.blade.php
@ -0,0 +1,13 @@
+<form
+    id="install-nginx"
+    class="w-full"
+    hx-post="{{ route("servers.services.install", ["server" => $server]) }}"
+    hx-swap="outerHTML"
+    hx-select="#install-nginx"
+>
+    @csrf
+    <input type="hidden" name="name" value="nginx" />
+    <input type="hidden" name="type" value="webserver" />
+    <input type="hidden" name="version" value="latest" />
+    <x-secondary-button class="!w-full" hx-disable>Install</x-secondary-button>
+</form>
--- a/resources/views/services/partials/installers/php.blade.php
+++ b/resources/views/services/partials/installers/php.blade.php
@ -0,0 +1,43 @@
+<x-secondary-button class="!w-full" x-on:click="$dispatch('open-modal', 'install-php')">Install</x-secondary-button>
+@push("modals")
+    <x-modal name="install-php">
+        <form
+            id="install-php-form"
+            hx-post="{{ route("servers.services.install", ["server" => $server]) }}"
+            hx-swap="outerHTML"
+            hx-select="#install-php-form"
+            class="p-6"
+        >
+            @csrf
+            <input type="hidden" name="type" value="php" />
+
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                {{ __("Install PHP") }}
+            </h2>
+
+            <div class="mt-6">
+                <x-input-label for="version" value="Version" />
+                <x-select-input id="version" name="version" class="mt-1 w-full">
+                    @foreach (config("core.php_versions") as $p)
+                        <option value="{{ $p }}">
+                            {{ $p }}
+                        </option>
+                    @endforeach
+                </x-select-input>
+                @error("version")
+                    <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-install-php" hx-disable class="ml-3">
+                    {{ __("Install") }}
+                </x-primary-button>
+            </div>
+        </form>
+    </x-modal>
+@endpush
--- a/resources/views/services/partials/installers/postgresql.blade.php
+++ b/resources/views/services/partials/installers/postgresql.blade.php
@ -0,0 +1,50 @@
+<x-secondary-button class="!w-full" x-on:click="$dispatch('open-modal', 'install-postgresql')">
+    Install
+</x-secondary-button>
+@push("modals")
+    <x-modal name="install-postgresql">
+        <form
+            id="install-postgresql-form"
+            hx-post="{{ route("servers.services.install", ["server" => $server]) }}"
+            hx-swap="outerHTML"
+            hx-select="#install-postgresql-form"
+            class="p-6"
+        >
+            @csrf
+            <input type="hidden" name="name" value="postgresql" />
+            <input type="hidden" name="type" value="database" />
+
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                {{ __("Install postgresql") }}
+            </h2>
+
+            <div class="mt-6">
+                <x-input-label for="version" value="Version" />
+                <x-select-input id="version" name="version" class="mt-1 w-full">
+                    @foreach (collect(config("core.databases_name"))->filter(fn ($value) => $value == "postgresql") as $db => $value)
+                        <option value="{{ config("core.databases_version")[$db] }}">
+                            {{ config("core.databases_name")[$db] }} {{ config("core.databases_version")[$db] }}
+                        </option>
+                    @endforeach
+                </x-select-input>
+                @error("version")
+                    <x-input-error class="mt-2" :messages="$message" />
+                @enderror
+
+                @error("type")
+                    <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-install-postgresql" hx-disable class="ml-3">
+                    {{ __("Install") }}
+                </x-primary-button>
+            </div>
+        </form>
+    </x-modal>
+@endpush
--- a/resources/views/services/partials/installers/redis.blade.php
+++ b/resources/views/services/partials/installers/redis.blade.php
@ -0,0 +1,13 @@
+<form
+    id="install-redis"
+    class="w-full"
+    hx-post="{{ route("servers.services.install", ["server" => $server]) }}"
+    hx-swap="outerHTML"
+    hx-select="#install-redis"
+>
+    @csrf
+    <input type="hidden" name="name" value="redis" />
+    <input type="hidden" name="type" value="memory_database" />
+    <input type="hidden" name="version" value="latest" />
+    <x-secondary-button class="!w-full" hx-disable>Install</x-secondary-button>
+</form>
--- a/resources/views/services/partials/installers/supervisor.blade.php
+++ b/resources/views/services/partials/installers/supervisor.blade.php
@ -0,0 +1,13 @@
+<form
+    id="install-supervisor"
+    class="w-full"
+    hx-post="{{ route("servers.services.install", ["server" => $server]) }}"
+    hx-swap="outerHTML"
+    hx-select="#install-supervisor"
+>
+    @csrf
+    <input type="hidden" name="name" value="supervisor" />
+    <input type="hidden" name="type" value="process_manager" />
+    <input type="hidden" name="version" value="latest" />
+    <x-secondary-button class="!w-full" hx-disable>Install</x-secondary-button>
+</form>
--- a/resources/views/services/partials/installers/ufw.blade.php
+++ b/resources/views/services/partials/installers/ufw.blade.php
@ -0,0 +1,13 @@
+<form
+    id="install-ufw"
+    class="w-full"
+    hx-post="{{ route("servers.services.install", ["server" => $server]) }}"
+    hx-swap="outerHTML"
+    hx-select="#install-ufw"
+>
+    @csrf
+    <input type="hidden" name="name" value="ufw" />
+    <input type="hidden" name="type" value="firewall" />
+    <input type="hidden" name="version" value="latest" />
+    <x-secondary-button class="!w-full" hx-disable>Install</x-secondary-button>
+</form>
--- a/resources/views/services/partials/installers/vito-agent.blade.php
+++ b/resources/views/services/partials/installers/vito-agent.blade.php
@ -0,0 +1,39 @@
+<x-secondary-button class="!w-full" x-on:click="$dispatch('open-modal', 'install-vito-agent')">
+    Install
+</x-secondary-button>
+@push("modals")
+    <x-modal name="install-vito-agent">
+        <form
+            id="install-vito-agent-form"
+            hx-post="{{ route("servers.services.install", ["server" => $server]) }}"
+            hx-swap="outerHTML"
+            hx-select="#install-vito-agent-form"
+            class="p-6"
+        >
+            @csrf
+            <input type="hidden" name="name" value="vito-agent" />
+            <input type="hidden" name="type" value="monitoring" />
+            <input type="hidden" name="version" value="latest" />
+
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                {{ __("Install Vito Agent") }}
+            </h2>
+
+            <div class="mt-6">
+                <x-alert-warning>
+                    Vito Agent is only works if you are running your Vito instance on a cloud not local!
+                </x-alert-warning>
+            </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-vito-agent" hx-disable class="ml-3">
+                    {{ __("Install") }}
+                </x-primary-button>
+            </div>
+        </form>
+    </x-modal>
+@endpush
--- a/resources/views/services/partials/services-list.blade.php
+++ b/resources/views/services/partials/services-list.blade.php
@ -15,10 +15,10 @@ class="relative flex h-auto flex-col items-center justify-between space-y-3 roun
                        @include("services.partials.status", ["status" => $service->status])
                    </div>
                    <div class="space-y-3 p-5">
-                        <div class="flex items-center justify-center">
+                        <div class="mt-5 flex items-center justify-center">
                            <img
                                src="{{ asset("static/images/" . $service->name . ".svg") }}"
-                                class="h-20 w-20"
+                                class="h-[70px] w-[70px]"
                                alt=""
                            />
                        </div>
--- a/resources/views/services/partials/status.blade.php
+++ b/resources/views/services/partials/status.blade.php
@ -11,7 +11,7 @@
@endif

@if ($status == \App\Enums\ServiceStatus::UNINSTALLING)
-    <x-status status="danger">{{ $status }}</x-status>
+    <x-status status="warning">{{ $status }}</x-status>
@endif

@if ($status == \App\Enums\ServiceStatus::FAILED)
--- a/resources/views/services/partials/unit-actions.blade.php
+++ b/resources/views/services/partials/unit-actions.blade.php
@ -1,42 +0,0 @@
-<x-icon-button
-    data-tooltip="Restart Service"
-    class="cursor-pointer"
-    href="{{ route('servers.services.restart', ['server' => $server, 'service' => $service]) }}"
->
-    <x-heroicon name="o-arrow-path" class="h-5 w-5" />
-</x-icon-button>
-
-<x-icon-button
-    :disabled="$service->status != \App\Enums\ServiceStatus::STOPPED"
-    data-tooltip="Start Service"
-    class="cursor-pointer"
-    href="{{ route('servers.services.start', ['server' => $server, 'service' => $service]) }}"
->
-    <x-heroicon name="o-play" class="h-5 w-5 text-green-400" />
-</x-icon-button>
-
-<x-icon-button
-    data-tooltip="Stop Service"
-    :disabled="$service->status != \App\Enums\ServiceStatus::READY"
-    class="cursor-pointer"
-    href="{{ route('servers.services.stop', ['server' => $server, 'service' => $service]) }}"
->
-    <x-heroicon name="o-stop" class="h-5 w-5 text-red-400" />
-</x-icon-button>
-
-<x-icon-button
-    :disabled="$service->status != \App\Enums\ServiceStatus::DISABLED"
-    data-tooltip="Enable Service"
-    class="cursor-pointer"
-    href="{{ route('servers.services.enable', ['server' => $server, 'service' => $service]) }}"
->
-    <x-heroicon name="o-check" class="h-5 w-5" />
-</x-icon-button>
-
-<x-icon-button
-    data-tooltip="Disable Service"
-    class="cursor-pointer"
-    href="{{ route('servers.services.disable', ['server' => $server, 'service' => $service]) }}"
->
-    <x-heroicon name="o-no-symbol" class="h-5 w-5" />
-</x-icon-button>
--- a/resources/views/services/partials/unit-actions/disable.blade.php
+++ b/resources/views/services/partials/unit-actions/disable.blade.php
@ -0,0 +1,7 @@
+<x-icon-button
+    data-tooltip="Disable Service"
+    class="cursor-pointer"
+    href="{{ route('servers.services.disable', ['server' => $server, 'service' => $service]) }}"
+>
+    <x-heroicon name="o-no-symbol" class="h-5 w-5" />
+</x-icon-button>
--- a/resources/views/services/partials/unit-actions/enable.blade.php
+++ b/resources/views/services/partials/unit-actions/enable.blade.php
@ -0,0 +1,8 @@
+<x-icon-button
+    :disabled="$service->status != \App\Enums\ServiceStatus::DISABLED"
+    data-tooltip="Enable Service"
+    class="cursor-pointer"
+    href="{{ route('servers.services.enable', ['server' => $server, 'service' => $service]) }}"
+>
+    <x-heroicon name="o-check" class="h-5 w-5" />
+</x-icon-button>
--- a/resources/views/services/partials/unit-actions/restart.blade.php
+++ b/resources/views/services/partials/unit-actions/restart.blade.php
@ -0,0 +1,7 @@
+<x-icon-button
+    data-tooltip="Restart Service"
+    class="cursor-pointer"
+    href="{{ route('servers.services.restart', ['server' => $server, 'service' => $service]) }}"
+>
+    <x-heroicon name="o-arrow-path" class="h-5 w-5" />
+</x-icon-button>
--- a/resources/views/services/partials/unit-actions/start.blade.php
+++ b/resources/views/services/partials/unit-actions/start.blade.php
@ -0,0 +1,8 @@
+<x-icon-button
+    :disabled="$service->status != \App\Enums\ServiceStatus::STOPPED"
+    data-tooltip="Start Service"
+    class="cursor-pointer"
+    href="{{ route('servers.services.start', ['server' => $server, 'service' => $service]) }}"
+>
+    <x-heroicon name="o-play" class="h-5 w-5 text-green-400" />
+</x-icon-button>
--- a/resources/views/services/partials/unit-actions/stop.blade.php
+++ b/resources/views/services/partials/unit-actions/stop.blade.php
@ -0,0 +1,8 @@
+<x-icon-button
+    data-tooltip="Stop Service"
+    :disabled="$service->status != \App\Enums\ServiceStatus::READY"
+    class="cursor-pointer"
+    href="{{ route('servers.services.stop', ['server' => $server, 'service' => $service]) }}"
+>
+    <x-heroicon name="o-stop" class="h-5 w-5 text-red-400" />
+</x-icon-button>
--- a/resources/views/services/partials/unit-actions/uninstall.blade.php
+++ b/resources/views/services/partials/unit-actions/uninstall.blade.php
@ -0,0 +1,33 @@
+<x-icon-button
+    data-tooltip="Uninstall Service"
+    class="cursor-pointer"
+    x-on:click="$dispatch('open-modal', 'uninstall-{{ $service->id }}')"
+>
+    <x-heroicon name="o-trash" class="h-5 w-5" />
+</x-icon-button>
+@push("modals")
+    <x-modal name="uninstall-{{ $service->id }}">
+        <form
+            id="uninstall-{{ $service->id }}-form"
+            hx-post="{{ route("servers.services.uninstall", ["server" => $server, "service" => $service]) }}"
+            hx-target="#uninstall-{{ $service->id }}-form"
+            hx-select="#uninstall-{{ $service->id }}-form"
+            hx-swap="outerHTML"
+            class="p-6"
+        >
+            @csrf
+            @method("delete")
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Confirm</h2>
+            <p>Are you sure that you want to uninstall this service?</p>
+
+            @error("service")
+                <x-input-error class="mt-2" :messages="$message" />
+            @enderror
+
+            <div class="mt-6 flex justify-end">
+                <x-secondary-button type="button" x-on:click="$dispatch('close')">Cancel</x-secondary-button>
+                <x-danger-button class="ml-3" hx-disable>Confirm</x-danger-button>
+            </div>
+        </form>
+    </x-modal>
+@endpush