feat: #206 display usage graphs for nodes

app/Http/Controllers/NodeController.php

@@ -8,6 +8,7 @@
 use App\Models\Node;
 use App\Models\NodeTaskGroupType;
 use App\Models\Service;
+use App\Services\Metrics;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
 use Inertia\Inertia;
@@ -21,9 +22,23 @@ public function index()
     {
         $nodes = Node::all();
 
+        $query = <<<'QUERY'
+        union(
+            alias(round(rate(ptah_node_cpu_user + ptah_node_cpu_system) / rate(ptah_node_cpu_total) * 100), "cpu_usage"),
+            alias(round(ptah_node_memory_used_bytes / ptah_node_memory_total_bytes * 100), "memory_usage"),
+            alias(round(ptah_node_disk_used_bytes{path="/"} / ptah_node_disk_total_bytes{path="/"} * 100), "disk_usage"),
+            round({__name__=~"ptah_node_load_avg_(1|5|15)m"}, 0.01),
+        )
+        QUERY;
+
+        $nodeIds = $nodes->pluck('id')->toArray();
+
+        $metrics = Metrics::getMetrics($query, $nodeIds);
+
         return Inertia::render('Nodes/Index', [
             'nodes' => $nodes,
             'nodesLimitReached' => auth()->user()->currentTeam->quotas()->nodes->quotaReached(),
+            'metrics' => $metrics,
         ]);
     }
 
@@ -58,10 +73,33 @@ public function store(StoreNodeRequest $request)
         return to_route('nodes.show', ['node' => $node->id]);
     }
 
+    public function show(Node $node)
+    {
+        $query = <<<'QUERY'
+        union(
+            alias(round(rate(ptah_node_cpu_user + ptah_node_cpu_system) / rate(ptah_node_cpu_total) * 100), "cpu_usage"),
+            alias(round(ptah_node_memory_used_bytes / ptah_node_memory_total_bytes * 100), "memory_usage"),
+            alias(round(ptah_node_swap_used_bytes / ptah_node_swap_total_bytes * 100), "swap_usage"),
+            alias(round(ptah_node_disk_used_bytes{path="/"} / ptah_node_disk_total_bytes{path="/"} * 100), "disk_usage"),
+            alias(round(rate(ptah_node_network_rx_bytes / 1024)), "network_rx_bytes"),
+            alias(round(rate(ptah_node_network_tx_bytes / 1024)), "network_tx_bytes"),
+            alias(round(increase(ptah_caddy_http_requests_count)), "http_requests_count"),
+            alias(sum(increase(ptah_caddy_http_requests_duration_bucket)) by (le), "http_requests_duration"),
+        )
+        QUERY;
+
+        $metrics = Metrics::getMetricsRange($query, [$node->id]);
+
+        return Inertia::render('Nodes/Show', [
+            'node' => $node,
+            'metrics' => $metrics,
+        ]);
+    }
+
     /**
      * Display the specified resource.
      */
-    public function show(Node $node)
+    public function settings(Node $node)
     {
         $initTaskGroup = $node->actualTaskGroup(NodeTaskGroupType::InitSwarm);
         if ($initTaskGroup?->is_completed) {
@@ -89,7 +127,7 @@ public function show(Node $node)
             $registryTaskGroup = null;
         }
 
-        return Inertia::render('Nodes/Show', [
+        return Inertia::render('Nodes/Settings', [
             'node' => $node,
             'isLastNode' => $node->team->nodes->count() === 1,
             'initTaskGroup' => $initTaskGroup ?: $joinTaskGroup,

package.json

@@ -27,10 +27,12 @@
         "vue": "^3.3.13"
     },
     "dependencies": {
+        "apexcharts": "^3.54.0",
         "dayjs": "^1.11.11",
         "handlebars": "^4.7.8",
         "lodash.set": "^4.3.2",
-        "swrv": "^1.0.4"
+        "swrv": "^1.0.4",
+        "vue3-apexcharts": "^1.6.0"
     },
     "lint-staged": {
         "*.{js,vue,css,md,json}": "prettier --write",

resources/js/Components/Card.vue

@@ -1,5 +1,18 @@
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+    title: {
+        type: String,
+        default: "",
+    },
+});
+</script>
+
 <template>
     <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
+        <h2 class="text-lg font-bold mb-4">{{ title }}</h2>
+
         <slot></slot>
     </div>
 </template>