feat: init metrics

app/Livewire/Project/Shared/Logs.php

@@ -27,7 +27,7 @@ class Logs extends Component
     public $query;
     public $status;
     public $serviceSubType;
-
+    public $cpu;
     public function loadContainers($server_id)
     {
         try {
@@ -49,6 +49,14 @@ public function loadContainers($server_id)
             return handleError($e, $this);
         }
     }
+    public function loadMetrics()
+    {
+        return;
+        $server = data_get($this->resource, 'destination.server');
+        if ($server->isFunctional()) {
+            $this->cpu = $server->getMetrics();
+        }
+    }
     public function mount()
     {
         try {
@@ -95,6 +103,7 @@ public function mount()
                 }
             }
             $this->containers = $this->containers->sort();
+            $this->loadMetrics();
         } catch (\Exception $e) {
             return handleError($e, $this);
         }

app/Models/Server.php

@@ -480,6 +480,23 @@ public function checkSentinel()
             }
         }
     }
+    public function getMetrics()
+    {
+        if ($this->is_metrics_enabled) {
+            $cpu = instant_remote_process(["cat /data/coolify/metrics/cpu.csv | grep 'Overall' | tail -200 | awk -F, '{print $1\",\" \$NF}'"], $this, false);
+            $cpu = str($cpu)->replace("%", "");
+            ray($cpu);
+            $parsedCollection = collect($cpu)->flatMap(function ($item) {
+                return collect(explode("\n", trim($item)))->map(function ($line) {
+                    list($time, $value) = explode(',', trim($line));
+                    // convert $time from nanoseconds to milliseconds for apexcharts
+                    $time = (int) $time / 1000000;
+                    return [(int) $time, (float) $value];
+                });
+            })->toArray();
+            return $parsedCollection;
+        }
+    }
     public function isServerReady(int $tries = 3)
     {
         if ($this->skipServer()) {

resources/views/livewire/project/shared/logs.blade.php

@@ -54,4 +54,74 @@
             @endforelse
         </div>
     @endif
+    {{-- <section x-data="apex_app" class="container p-5 mx-auto my-20 bg-white drop-shadow-xl rounded-xl">
+        <div class="w-full" x-ref="chart"></div>
+    </section>
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+    <script>
+        document.addEventListener("alpine:init", () => {
+            Alpine.data("apex_app", () => ({
+                data: @js($cpu),
+                init() {
+                    let chart = new ApexCharts(this.$refs.chart, this.options);
+                    chart.render();
+                    this.$watch("data", () => {
+                        chart.updateOptions(this.options);
+                    });
+                },
+
+                get options() {
+                    return {
+                        colors: [function({
+                            value,
+                            seriesIndex,
+                            w
+                        }) {
+                            if (value < 55) {
+                                return '#7E36AF'
+                            } else {
+                                return '#D9534F'
+                            }
+                        }, function({
+                            value,
+                            seriesIndex,
+                            w
+                        }) {
+                            if (value < 111) {
+                                return '#7E36AF'
+                            } else {
+                                return '#D9534F'
+                            }
+                        }],
+                        xaxis: {
+                            type: 'datetime'
+                        },
+                        dataLabels: {
+                            enabled: false
+                        },
+                        series: [{
+                            name: "Series name",
+                            data: this.data
+                        }],
+                        tooltip: {
+                            enabled: true
+                        },
+                        chart: {
+                            height: 500,
+                            width: "100%",
+                            type: "area",
+                            toolbar: {
+                                show: true
+                            },
+                            animations: {
+                                initialAnimation: {
+                                    enabled: false
+                                }
+                            }
+                        },
+                    };
+                }
+            }));
+        });
+    </script> --}}
 </div>