feat: sentinel + charts

app/Actions/Server/StartSentinel.php

@@ -12,10 +12,13 @@ class StartSentinel
     public function handle(Server $server, $version = 'latest', bool $restart = false)
     {
         if ($restart) {
-            instant_remote_process(['docker rm -f coolify-sentinel'], $server, false);
+            StopSentinel::run($server);
         }
+        $metrics_history = $server->settings->metrics_history_days;
+        $refresh_rate = $server->settings->metrics_refresh_rate_seconds;
+        $token = $server->settings->metrics_token;
         instant_remote_process([
-            "docker run --rm --pull always -d -e \"SCHEDULER=true\" -e \"METRICS_HISTORY=10\" -e \"REFRESH_RATE=5\" --name coolify-sentinel -v /var/run/docker.sock:/var/run/docker.sock -v /data/coolify/metrics:/app/metrics -v /data/coolify/logs:/app/logs --pid host --health-cmd \"curl --fail http://127.0.0.1:8888/api/health || exit 1\" --health-interval 10s --health-retries 3 ghcr.io/coollabsio/sentinel:$version",
+            "docker run --rm --pull always -d -e \"TOKEN={$token}\" -e \"SCHEDULER=true\" -e \"METRICS_HISTORY={$metrics_history}\" -e \"REFRESH_RATE={$refresh_rate}\" --name coolify-sentinel -v /var/run/docker.sock:/var/run/docker.sock -v /data/coolify/metrics:/app/metrics -v /data/coolify/logs:/app/logs --pid host --health-cmd \"curl --fail http://127.0.0.1:8888/api/health || exit 1\" --health-interval 10s --health-retries 3 ghcr.io/coollabsio/sentinel:$version",
             'chown -R 9999:root /data/coolify/metrics /data/coolify/logs',
             'chmod -R 700 /data/coolify/metrics /data/coolify/logs',
         ], $server, false);

app/Actions/Server/StopSentinel.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Actions\Server;
+
+use App\Models\Server;
+use Lorisleiva\Actions\Concerns\AsAction;
+
+class StopSentinel
+{
+    use AsAction;
+
+    public function handle(Server $server)
+    {
+        instant_remote_process(['docker rm -f coolify-sentinel'], $server, false);
+    }
+}

app/Console/Kernel.php

@@ -61,7 +61,7 @@ private function pull_images($schedule)
     {
         $servers = $this->all_servers->where('settings.is_usable', true)->where('settings.is_reachable', true)->where('ip', '!=', '1.2.3.4');
         foreach ($servers as $server) {
-            if ($server->is_metrics_enabled) {
+            if ($server->isMetricsEnabled()) {
                 $schedule->job(new PullSentinelImageJob($server))->everyFiveMinutes()->onOneServer();
             }
             $schedule->job(new PullHelperImageJob($server))->everyFiveMinutes()->onOneServer();

app/Jobs/PullSentinelImageJob.php

@@ -36,10 +36,7 @@ public function handle(): void
     {
         try {
             $version = get_latest_sentinel_version();
-            if (isDev()) {
+            if (!$version) {
-                $version = '0.0.5';
-            }
-            if (! $version) {
                 ray('Failed to get latest Sentinel version');
 
                 return;
@@ -54,7 +51,7 @@ public function handle(): void
             }
             ray('Sentinel image is up to date');
         } catch (\Throwable $e) {
-            send_internal_notification('PullSentinelImageJob failed with: '.$e->getMessage());
+            send_internal_notification('PullSentinelImageJob failed with: ' . $e->getMessage());
             ray($e->getMessage());
             throw $e;
         }

app/Jobs/ServerStatusJob.php

@@ -48,7 +48,7 @@ public function handle()
             if ($this->server->isFunctional()) {
                 $this->cleanup(notify: false);
                 $this->remove_unnecessary_coolify_yaml();
-                if ($this->server->is_metrics_enabled) {
+                if ($this->server->isMetricsEnabled()) {
                     $this->server->checkSentinel();
                 }
             }

app/Livewire/Boarding/Index.php

@@ -12,7 +12,7 @@
 
 class Index extends Component
 {
-    protected $listeners = ['serverInstalled' => 'validateServer'];
+    protected $listeners = ['refreshBoardingIndex' => 'validateServer'];
 
     public string $currentState = 'welcome';
 

app/Livewire/Charts/Server.php

@@ -1,38 +0,0 @@
-<?php
-
-namespace App\Livewire\Charts;
-
-use App\Models\Server as ModelsServer;
-use Livewire\Component;
-
-class Server extends Component
-{
-    public ModelsServer $server;
-
-    public $chartId = 'server';
-
-    public $data;
-
-    public $categories;
-
-    public function render()
-    {
-        return view('livewire.charts.server');
-    }
-
-    public function mount()
-    {
-        $this->loadData();
-    }
-
-    public function loadData()
-    {
-        $metrics = $this->server->getMetrics();
-        $metrics = collect($metrics)->map(function ($metric) {
-            return [$metric[0], $metric[1]];
-        });
-        $this->dispatch("refreshChartData-{$this->chartId}", [
-            'seriesData' => $metrics,
-        ]);
-    }
-}

app/Livewire/Charts/ServerCpu.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Livewire\Charts;
+
+use App\Models\Server as ModelsServer;
+use Livewire\Component;
+
+class ServerCpu extends Component
+{
+    public ModelsServer $server;
+
+    public $chartId = 'server-cpu';
+
+    public $data;
+
+    public $categories;
+
+    public $interval = 5;
+
+    public function render()
+    {
+        return view('livewire.charts.server-cpu');
+    }
+
+    public function mount()
+    {
+        $this->loadData();
+    }
+
+    public function loadData()
+    {
+        try {
+            $metrics = $this->server->getCpuMetrics($this->interval);
+            $metrics = collect($metrics)->map(function ($metric) {
+                return [$metric[0], $metric[1]];
+            });
+            $this->dispatch("refreshChartData-{$this->chartId}", [
+                'seriesData' => $metrics,
+            ]);
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
+    }
+    public function setInterval()
+    {
+        $this->loadData();
+    }
+}

app/Livewire/Charts/ServerMemory.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Livewire\Charts;
+
+use App\Models\Server;
+use Livewire\Component;
+
+class ServerMemory extends Component
+{
+    public Server $server;
+
+    public $chartId = 'server-memory';
+
+    public $data;
+
+    public $categories;
+    public $interval = 5;
+
+    public function render()
+    {
+        return view('livewire.charts.server-memory');
+    }
+    public function mount()
+    {
+        $this->loadData();
+    }
+
+    public function loadData()
+    {
+        try {
+            $metrics = $this->server->getMemoryMetrics($this->interval);
+            $metrics = collect($metrics)->map(function ($metric) {
+                return [$metric[0], $metric[1]];
+            });
+            $this->dispatch("refreshChartData-{$this->chartId}", [
+                'seriesData' => $metrics,
+            ]);
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
+    }
+    public function setInterval() {
+        $this->loadData();
+    }
+}

app/Livewire/Project/Shared/Logs.php

@@ -64,7 +64,7 @@ public function loadMetrics()
         return;
         $server = data_get($this->resource, 'destination.server');
         if ($server->isFunctional()) {
-            $this->cpu = $server->getMetrics();
+            $this->cpu = $server->getCpuMetrics();
         }
     }
 

app/Livewire/Server/ConfigureCloudflareTunnels.php

@@ -21,7 +21,7 @@ public function alreadyConfigured()
             $server->settings->is_cloudflare_tunnel = true;
             $server->settings->save();
             $this->dispatch('success', 'Cloudflare Tunnels configured successfully.');
-            $this->dispatch('serverInstalled');
+            $this->dispatch('refreshServerShow');
         } catch (\Throwable $e) {
             return handleError($e, $this);
         }
@@ -37,7 +37,7 @@ public function submit()
             $server->save();
             $server->settings->save();
             $this->dispatch('success', 'Cloudflare Tunnels configured successfully.');
-            $this->dispatch('serverInstalled');
+            $this->dispatch('refreshServerShow');
         } catch (\Throwable $e) {
             return handleError($e, $this);
         }

app/Livewire/Server/Form.php

@@ -2,6 +2,9 @@
 
 namespace App\Livewire\Server;
 
+use App\Actions\Server\StartSentinel;
+use App\Actions\Server\StopSentinel;
+use App\Jobs\PullSentinelImageJob;
 use App\Models\Server;
 use Livewire\Component;
 
@@ -36,6 +39,10 @@ class Form extends Component
         'server.settings.is_build_server' => 'required|boolean',
         'server.settings.concurrent_builds' => 'required|integer|min:1',
         'server.settings.dynamic_timeout' => 'required|integer|min:1',
+        'server.settings.is_metrics_enabled' => 'required|boolean',
+        'server.settings.metrics_token' => 'required',
+        'server.settings.metrics_refresh_rate_seconds' => 'required|integer|min:1',
+        'server.settings.metrics_history_days' => 'required|integer|min:1',
         'wildcard_domain' => 'nullable|url',
     ];
 
@@ -52,6 +59,10 @@ class Form extends Component
         'server.settings.is_build_server' => 'Build Server',
         'server.settings.concurrent_builds' => 'Concurrent Builds',
         'server.settings.dynamic_timeout' => 'Dynamic Timeout',
+        'server.settings.is_metrics_enabled' => 'Metrics',
+        'server.settings.metrics_token' => 'Metrics Token',
+        'server.settings.metrics_refresh_rate_seconds' => 'Metrics Interval',
+        'server.settings.metrics_history_days' => 'Metrics History',
 
     ];
 
@@ -69,7 +80,7 @@ public function serverInstalled()
 
     public function updatedServerSettingsIsBuildServer()
     {
-        $this->dispatch('serverInstalled');
+        $this->dispatch('refreshServerShow');
         $this->dispatch('serverRefresh');
         $this->dispatch('proxyStatusUpdated');
     }
@@ -80,7 +91,24 @@ public function instantSave()
             refresh_server_connection($this->server->privateKey);
             $this->validateServer(false);
             $this->server->settings->save();
+            $this->server->save();
             $this->dispatch('success', 'Server updated.');
+            $this->dispatch('refreshServerShow');
+            if ($this->server->isMetricsEnabled()) {
+                PullSentinelImageJob::dispatchSync($this->server);
+                $this->dispatch('reloadWindow');
+            } else {
+                StopSentinel::dispatch($this->server);
+            }
+        } catch (\Throwable $e) {
+            return handleError($e, $this);
+        }
+    }
+    public function restartSentinel() {
+        try {
+            $version = get_latest_sentinel_version();
+            StartSentinel::run($this->server, $version, true);
+            $this->dispatch('success', 'Sentinel restarted.');
         } catch (\Throwable $e) {
             return handleError($e, $this);
         }

app/Livewire/Server/Show.php

@@ -14,7 +14,7 @@ class Show extends Component
 
     public $parameters = [];
 
-    protected $listeners = ['serverInstalled' => '$refresh'];
+    protected $listeners = ['refreshServerShow' => '$refresh'];
 
     public function mount()
     {

app/Livewire/Server/ValidateAndInstall.php

@@ -143,7 +143,8 @@ public function validateDockerVersion()
         } else {
             $this->docker_version = $this->server->validateDockerEngineVersion();
             if ($this->docker_version) {
-                $this->dispatch('serverInstalled');
+                $this->dispatch('refreshServerShow');
+                $this->dispatch('refreshBoardingIndex');
                 $this->dispatch('success', 'Server validated.');
             } else {
                 $this->error = 'Docker Engine version is not 22+. Please install Docker manually before continuing: <a target="_blank" class="underline" href="https://docs.docker.com/engine/install/#server">documentation</a>.';

app/Models/Server.php

@@ -131,7 +131,7 @@ public function addInitialNetwork()
 
     public function setupDefault404Redirect()
     {
-        $dynamic_conf_path = $this->proxyPath().'/dynamic';
+        $dynamic_conf_path = $this->proxyPath() . '/dynamic';
         $proxy_type = $this->proxyType();
         $redirect_url = $this->proxy->redirect_url;
         if ($proxy_type === 'TRAEFIK_V2') {
@@ -145,8 +145,8 @@ public function setupDefault404Redirect()
 respond 404
 }';
                 $conf =
-                    "# This file is automatically generated by Coolify.\n".
+                    "# This file is automatically generated by Coolify.\n" .
-                    "# Do not edit it manually (only if you know what are you doing).\n\n".
+                    "# Do not edit it manually (only if you know what are you doing).\n\n" .
                     $conf;
                 $base64 = base64_encode($conf);
                 instant_remote_process([
@@ -205,8 +205,8 @@ public function setupDefault404Redirect()
             ];
             $conf = Yaml::dump($dynamic_conf, 12, 2);
             $conf =
-                "# This file is automatically generated by Coolify.\n".
+                "# This file is automatically generated by Coolify.\n" .
-                "# Do not edit it manually (only if you know what are you doing).\n\n".
+                "# Do not edit it manually (only if you know what are you doing).\n\n" .
                 $conf;
 
             $base64 = base64_encode($conf);
@@ -215,8 +215,8 @@ public function setupDefault404Redirect()
     redir $redirect_url
 }";
             $conf =
-                "# This file is automatically generated by Coolify.\n".
+                "# This file is automatically generated by Coolify.\n" .
-                "# Do not edit it manually (only if you know what are you doing).\n\n".
+                "# Do not edit it manually (only if you know what are you doing).\n\n" .
                 $conf;
             $base64 = base64_encode($conf);
         }
@@ -237,7 +237,7 @@ public function setupDefault404Redirect()
     public function setupDynamicProxyConfiguration()
     {
         $settings = InstanceSettings::get();
-        $dynamic_config_path = $this->proxyPath().'/dynamic';
+        $dynamic_config_path = $this->proxyPath() . '/dynamic';
         if ($this->proxyType() === 'TRAEFIK_V2') {
             $file = "$dynamic_config_path/coolify.yaml";
             if (empty($settings->fqdn) || (isCloud() && $this->id !== 0)) {
@@ -330,8 +330,8 @@ public function setupDynamicProxyConfiguration()
                 }
                 $yaml = Yaml::dump($traefik_dynamic_conf, 12, 2);
                 $yaml =
-                    "# This file is automatically generated by Coolify.\n".
+                    "# This file is automatically generated by Coolify.\n" .
-                    "# Do not edit it manually (only if you know what are you doing).\n\n".
+                    "# Do not edit it manually (only if you know what are you doing).\n\n" .
                     $yaml;
 
                 $base64 = base64_encode($yaml);
@@ -389,9 +389,9 @@ public function proxyPath()
         if ($proxyType === ProxyTypes::TRAEFIK_V2->value) {
             $proxy_path = $proxy_path;
         } elseif ($proxyType === ProxyTypes::CADDY->value) {
-            $proxy_path = $proxy_path.'/caddy';
+            $proxy_path = $proxy_path . '/caddy';
         } elseif ($proxyType === ProxyTypes::NGINX->value) {
-            $proxy_path = $proxy_path.'/nginx';
+            $proxy_path = $proxy_path . '/nginx';
         }
 
         return $proxy_path;
@@ -462,10 +462,14 @@ public function forceDisableServer()
         Storage::disk('ssh-mux')->delete($this->muxFilename());
     }
 
+    public function isMetricsEnabled()
+    {
+        return $this->settings->is_metrics_enabled;
+    }
     public function checkSentinel()
     {
         ray("Checking sentinel on server: {$this->name}");
-        if ($this->is_metrics_enabled) {
+        if ($this->isMetricsEnabled()) {
             $sentinel_found = instant_remote_process(['docker inspect coolify-sentinel'], $this, false);
             $sentinel_found = json_decode($sentinel_found, true);
             $status = data_get($sentinel_found, '0.State.Status', 'exited');
@@ -478,11 +482,19 @@ public function checkSentinel()
         }
     }
 
-    public function getMetrics()
+    public function getCpuMetrics(int $mins = 5)
     {
-        if ($this->is_metrics_enabled) {
+        if ($this->isMetricsEnabled()) {
-            $from = now()->subMinutes(5)->toIso8601ZuluString();
+            $from = now()->subMinutes($mins)->toIso8601ZuluString();
-            $cpu = instant_remote_process(["docker exec coolify-sentinel sh -c 'curl http://localhost:8888/api/cpu/history?from=$from'"], $this, false);
+            $cpu = instant_remote_process(["docker exec coolify-sentinel sh -c 'curl -H \"Authorization: Bearer {$this->settings->metrics_token}\" http://localhost:8888/api/cpu/history?from=$from'"], $this, false);
+            if (str($cpu)->contains('error')) {
+                $error = json_decode($cpu, true);
+                $error = data_get($error, 'error', 'Something is not okay, are you okay?');
+                if ($error == 'Unauthorized') {
+                    $error = 'Unauthorized, please check your metrics token or restart Sentinel to set a new token.';
+                }
+                throw new \Exception($error);
+            }
             $cpu = str($cpu)->explode("\n")->skip(1)->all();
             $parsedCollection = collect($cpu)->flatMap(function ($item) {
                 return collect(explode("\n", trim($item)))->map(function ($line) {
@@ -495,6 +507,31 @@ public function getMetrics()
             return $parsedCollection;
         }
     }
+    public function getMemoryMetrics(int $mins = 5)
+    {
+        if ($this->isMetricsEnabled()) {
+            $from = now()->subMinutes($mins)->toIso8601ZuluString();
+            $memory = instant_remote_process(["docker exec coolify-sentinel sh -c 'curl -H \"Authorization: Bearer {$this->settings->metrics_token}\" http://localhost:8888/api/memory/history?from=$from'"], $this, false);
+            if (str($memory)->contains('error')) {
+                $error = json_decode($memory, true);
+                $error = data_get($error, 'error', 'Something is not okay, are you okay?');
+                if ($error == 'Unauthorized') {
+                    $error = 'Unauthorized, please check your metrics token or restart Sentinel to set a new token.';
+                }
+                throw new \Exception($error);
+            }
+            $memory = str($memory)->explode("\n")->skip(1)->all();
+            $parsedCollection = collect($memory)->flatMap(function ($item) {
+                return collect(explode("\n", trim($item)))->map(function ($line) {
+                    [$time, $used, $free, $usedPercent] = explode(',', trim($line));
+
+                    return [(int) $time, (float) $usedPercent];
+                });
+            })->toArray();
+
+            return $parsedCollection;
+        }
+    }
 
     public function isServerReady(int $tries = 3)
     {
@@ -609,7 +646,7 @@ public function getContainers(): Collection
                 $containers = instant_remote_process(["docker service inspect $(docker service ls -q) --format '{{json .}}'"], $this, false);
             } else {
                 $containers = instant_remote_process(['docker container ls -q'], $this, false);
-                if (! $containers) {
+                if (!$containers) {
                     return collect([]);
                 }
                 $containers = instant_remote_process(["docker container inspect $(docker container ls -q) --format '{{json .}}'"], $this, false);
@@ -629,7 +666,7 @@ public function loadUnmanagedContainers(): Collection
             $containers = format_docker_command_output_to_json($containers);
             $containers = $containers->map(function ($container) {
                 $labels = data_get($container, 'Labels');
-                if (! str($labels)->contains('coolify.managed')) {
+                if (!str($labels)->contains('coolify.managed')) {
                     return $container;
                 }
 
@@ -701,7 +738,7 @@ public function dockerComposeBasedPreviewDeployments()
         return $this->previews()->filter(function ($preview) {
             $applicationId = data_get($preview, 'application_id');
             $application = Application::find($applicationId);
-            if (! $application) {
+            if (!$application) {
                 return false;
             }
 
@@ -785,9 +822,9 @@ public function isProxyShouldRun()
 
     public function isFunctional()
     {
-        $isFunctional = $this->settings->is_reachable && $this->settings->is_usable && ! $this->settings->force_disabled;
+        $isFunctional = $this->settings->is_reachable && $this->settings->is_usable && !$this->settings->force_disabled;
         ['private_key_filename' => $private_key_filename, 'mux_filename' => $mux_filename] = server_ssh_configuration($this);
-        if (! $isFunctional) {
+        if (!$isFunctional) {
             Storage::disk('ssh-keys')->delete($private_key_filename);
             Storage::disk('ssh-mux')->delete($mux_filename);
         }
@@ -846,7 +883,7 @@ public function validateConnection()
         config()->set('coolify.mux_enabled', false);
 
         $server = Server::find($this->id);
-        if (! $server) {
+        if (!$server) {
             return ['uptime' => false, 'error' => 'Server not found.'];
         }
         if ($server->skipServer()) {

bootstrap/helpers/shared.php

@@ -157,10 +157,12 @@ function get_route_parameters(): array
 
 function get_latest_sentinel_version(): string
 {
+    if (isDev()) {
+        return '0.0.8';
+    }
     try {
         $response = Http::get('https://cdn.coollabs.io/coolify/versions.json');
         $versions = $response->json();
-
         return data_get($versions, 'coolify.sentinel.version');
     } catch (\Throwable $e) {
         //throw $e;
@@ -2282,3 +2284,8 @@ function isAnyDeploymentInprogress()
     echo "No deployments in progress.\n";
     exit(0);
 }
+
+function generateSentinelToken() {
+    $token = Str::random(64);
+    return $token;
+}

database/migrations/2024_06_18_105947_disable_server_metrics_by_default.php

@@ -1,31 +0,0 @@
-<?php
-
-use App\Models\Server;
-use Illuminate\Database\Migrations\Migration;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Support\Facades\Schema;
-
-return new class extends Migration
-{
-    /**
-     * Run the migrations.
-     */
-    public function up(): void
-    {
-        Schema::table('servers', function (Blueprint $table) {
-            $table->boolean('is_metrics_enabled')->default(false)->change();
-        });
-        Server::where('is_metrics_enabled', true)->update(['is_metrics_enabled' => false]);
-    }
-
-    /**
-     * Reverse the migrations.
-     */
-    public function down(): void
-    {
-        Schema::table('servers', function (Blueprint $table) {
-            $table->boolean('is_metrics_enabled')->default(true)->change();
-        });
-        Server::where('is_metrics_enabled', false)->update(['is_metrics_enabled' => true]);
-    }
-};

database/migrations/2024_06_18_105948_move_server_metrics.php

@@ -0,0 +1,41 @@
+<?php
+
+use App\Models\Server;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('servers', function (Blueprint $table) {
+            $table->dropColumn('is_metrics_enabled');
+        });
+        Schema::table('server_settings', function (Blueprint $table) {
+            $table->boolean('is_metrics_enabled')->default(false);
+            $table->integer('metrics_refresh_rate_seconds')->default(5);
+            $table->integer('metrics_history_days')->default(30);
+            $table->string('metrics_token')->default(generateSentinelToken());
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('servers', function (Blueprint $table) {
+            $table->boolean('is_metrics_enabled')->default(true);
+        });
+        Schema::table('server_settings', function (Blueprint $table) {
+            $table->dropColumn('is_metrics_enabled');
+            $table->dropColumn('metrics_refresh_rate_seconds');
+            $table->dropColumn('metrics_history_days');
+            $table->dropColumn('metrics_token');
+        });
+    }
+};

resources/views/components/apex-charts.blade.php

@@ -1,78 +0,0 @@
-<div wire:ignore id="{!! $chartId !!}"></div>
-
-<script>
-    const options = {
-        chart: {
-            height: '150px',
-            id: '{!! $chartId !!}',
-            type: 'area',
-            stroke: {
-                curve: 'straight',
-            },
-            toolbar: {
-                show: false,
-                tools: {
-                    download: true,
-                    selection: false,
-                    zoom: false,
-                    zoomin: false,
-                    zoomout: false,
-                    pan: false,
-                    reset: false
-                },
-            },
-            animations: {
-                enabled: false,
-            },
-
-
-        },
-
-        grid: {
-            show: true,
-            borderColor: '',
-        },
-        colors: ['red'],
-        xaxis: {
-            type: 'datetime',
-            labels: {
-                show: true,
-                style: {
-                    colors: '#ffffff',
-                }
-            }
-        },
-        yaxis: {
-            show: true,
-            labels: {
-                show: false,
-            }
-        },
-        series: [{
-            name: '{!! $seriesName !!}',
-            data: '{!! $seriesData !!}'
-        }],
-        noData: {
-            text: 'Loading...'
-        },
-        tooltip: {
-            enabled: false
-        },
-        legend: {
-            show: false
-        }
-    }
-    const chart = new ApexCharts(document.getElementById(`{!! $chartId !!}`), options);
-    chart.render();
-    document.addEventListener('livewire:init', () => {
-        Livewire.on('refreshChartData-{!! $chartId !!}', (chartData) => {
-            chart.updateOptions({
-                series: [{
-                    data: chartData[0].seriesData,
-                }],
-
-            });
-
-        });
-    });
-</script>

resources/views/livewire/charts/server-cpu.blade.php

@@ -0,0 +1,127 @@
+<div wire:poll.5000ms='loadData'>
+    <h3>CPU</h3>
+    <x-forms.select label="Interval" wire:change="setInterval" id="interval">
+        <option value="5">5 minutes</option>
+        <option value="10">10 minutes</option>
+        <option value="30">30 minutes</option>
+        <option value="60">1 hour</option>
+        <option value="720">12 hours</option>
+        <option value="10080">1 week</option>
+        <option value="43200">30 days</option>
+    </x-forms.select>
+    <div wire:ignore id="{!! $chartId !!}"></div>
+
+    <script>
+        checkTheme();
+        const optionsServerCpu = {
+            chart: {
+                height: '150px',
+                id: '{!! $chartId !!}',
+                type: 'area',
+                stroke: {
+                    curve: 'straight',
+                },
+
+                toolbar: {
+                    show: false,
+                    tools: {
+                        download: true,
+                        selection: false,
+                        zoom: false,
+                        zoomin: false,
+                        zoomout: false,
+                        pan: false,
+                        reset: false
+                    },
+                },
+                animations: {
+                    enabled: false,
+                },
+            },
+            fill: {
+                type: 'gradient',
+            },
+            dataLabels: {
+                enabled: false,
+                offsetY: -10,
+                style: {
+                    colors: ['#FCD452'],
+                },
+                background: {
+                    enabled: false,
+                }
+            },
+            grid: {
+                show: true,
+                borderColor: '',
+            },
+            colors: [baseColor],
+            xaxis: {
+                type: 'datetime',
+                labels: {
+                    show: true,
+                    style: {
+                        colors: textColor,
+                    }
+                }
+            },
+            yaxis: {
+                show: true,
+                labels: {
+                    show: true,
+                    style: {
+                        colors: textColor,
+                    }
+                }
+            },
+            series: [{
+                data: '{!! $data !!}'
+            }],
+            noData: {
+                text: 'Loading...',
+                style: {
+                    color: textColor,
+                }
+            },
+            tooltip: {
+                enabled: false,
+            },
+            legend: {
+                show: false
+            }
+        }
+        const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}`), optionsServerCpu);
+        serverCpuChart.render();
+        document.addEventListener('livewire:init', () => {
+            Livewire.on('refreshChartData-{!! $chartId !!}', (chartData) => {
+                checkTheme();
+                serverCpuChart.updateOptions({
+                    series: [{
+                        data: chartData[0].seriesData,
+                    }],
+                    colors: [baseColor],
+                    xaxis: {
+                        labels: {
+                            style: {
+                                colors: textColor,
+                            }
+                        }
+                    },
+                    yaxis: {
+                        labels: {
+                            style: {
+                                colors: textColor,
+                            }
+                        }
+                    },
+                    noData: {
+                        style: {
+                            color: textColor,
+                        }
+                    }
+                });
+            });
+        });
+    </script>
+
+</div>

resources/views/livewire/charts/server-memory.blade.php

@@ -0,0 +1,128 @@
+<div wire:poll.5000ms='loadData'>
+    <h3>Memory</h3>
+    <x-forms.select label="Interval" wire:change="setInterval" id="interval">
+        <option value="5">5 minutes</option>
+        <option value="10">10 minutes</option>
+        <option value="30">30 minutes</option>
+        <option value="60">1 hour</option>
+        <option value="720">12 hours</option>
+        <option value="10080">1 week</option>
+        <option value="43200">30 days</option>
+    </x-forms.select>
+    <div wire:ignore id="{!! $chartId !!}"></div>
+
+    <script>
+        checkTheme();
+        const optionsServerMemory = {
+            chart: {
+                height: '150px',
+                id: '{!! $chartId !!}',
+                type: 'area',
+                stroke: {
+                    curve: 'straight',
+                },
+
+                toolbar: {
+                    show: false,
+                    tools: {
+                        download: true,
+                        selection: false,
+                        zoom: false,
+                        zoomin: false,
+                        zoomout: false,
+                        pan: false,
+                        reset: false
+                    },
+                },
+                animations: {
+                    enabled: false,
+                },
+            },
+            fill: {
+                type: 'gradient',
+            },
+            dataLabels: {
+                enabled: false,
+                offsetY: -10,
+                style: {
+                    colors: ['#FCD452'],
+                },
+                background: {
+                    enabled: false,
+                }
+            },
+            grid: {
+                show: true,
+                borderColor: '',
+            },
+            colors: [baseColor],
+            xaxis: {
+                type: 'datetime',
+                labels: {
+                    show: true,
+                    style: {
+                        colors: textColor,
+                    }
+                }
+            },
+            yaxis: {
+                show: true,
+                labels: {
+                    show: true,
+                    style: {
+                        colors: textColor,
+                    }
+                }
+            },
+            series: [{
+                data: '{!! $data !!}'
+            }],
+            noData: {
+                text: 'Loading...',
+                style: {
+                    color: textColor,
+                }
+            },
+            tooltip: {
+                enabled: false,
+            },
+            legend: {
+                show: false
+            }
+        }
+        const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}`), optionsServerMemory);
+        serverMemoryChart.render();
+        document.addEventListener('livewire:init', () => {
+            Livewire.on('refreshChartData-{!! $chartId !!}', (chartData) => {
+                checkTheme();
+                serverMemoryChart.updateOptions({
+                    series: [{
+                        data: chartData[0].seriesData,
+                    }],
+                    colors: [baseColor],
+                    xaxis: {
+                        labels: {
+                            style: {
+                                colors: textColor,
+                            }
+                        }
+                    },
+                    yaxis: {
+                        labels: {
+                            style: {
+                                colors: textColor,
+                            }
+                        }
+                    },
+                    noData: {
+                        style: {
+                            color: textColor,
+                        }
+                    }
+                });
+            });
+        });
+
+    </script>
+
+</div>

resources/views/livewire/charts/server.blade.php

@@ -1,4 +0,0 @@
-<div wire:poll.5000ms='loadData'>
-    <h1>CPU Usage</h1>
-    <x-apex-charts :chart-id="$chartId" :series-data="$data" :categories="$categories" series-name="Total distance this year"/>
-</div>

resources/views/livewire/server/form.blade.php

@@ -144,6 +144,26 @@ class="w-full mt-8 mb-4 font-bold box-without-bg bg-coollabs hover:bg-coollabs-1
                 <x-forms.input id="server.settings.dynamic_timeout" label="Deployment timeout (seconds)" required
                     helper="You can define the maximum duration for a deployment to run before timing it out." />
             </div>
+            <div class="flex items-center gap-2">
+                <h3 class="py-4">Metrics</h3>
+                @if ($server->isMetricsEnabled())
+                    <x-forms.button wire:click='restartSentinel'>Restart Collector</x-forms.button>
+                @endif
+            </div>
+            <div class="w-64">
+                <x-forms.checkbox instantSave id="server.settings.is_metrics_enabled" label="Enable metrics" />
+            </div>
+            <div class="pt-4">
+                <div class="flex flex-wrap gap-2 sm:flex-nowrap">
+                    <x-forms.input type="password" id="server.settings.metrics_token" label="Metrics token" required
+                        helper="Token for collector (Sentinel)." />
+                    <x-forms.input id="server.settings.metrics_refresh_rate_seconds" label="Metrics rate (seconds)"
+                        required
+                        helper="The interval for gathering metrics. Lower means more disk space will be used." />
+                    <x-forms.input id="server.settings.metrics_history_days" label="Metrics history (days)" required
+                        helper="How many days should the metrics data should be reserved." />
+                </div>
+            </div>
         @endif
     </form>
 </div>

resources/views/livewire/server/show.blade.php

@@ -5,9 +5,26 @@
     <x-server.navbar :server="$server" :parameters="$parameters" />
     <livewire:server.form :server="$server" />
     <livewire:server.delete :server="$server" />
-    @if (isDev())
+    @if ($server->isFunctional() && $server->isMetricsEnabled())
         <div class="pt-10">
-            <livewire:charts.server :server="$server" />
+            <script>
+                let theme = localStorage.theme
+                let baseColor = '#FCD452'
+                let textColor = '#ffffff'
+
+                function checkTheme() {
+                    theme = localStorage.theme
+                    if (theme == 'dark') {
+                        baseColor = '#FCD452'
+                        textColor = '#ffffff'
+                    } else {
+                        baseColor = 'black'
+                        textColor = '#000000'
+                    }
+                }
+            </script>
+            <livewire:charts.server-cpu :server="$server" />
+            <livewire:charts.server-memory :server="$server" />
         </div>
     @endif
 </div>