From f40e588e7dc1acd916c6a39ae5f734d3c7c12204 Mon Sep 17 00:00:00 2001
From: headlessdev <damian.bergemann@outlook.com>
Date: Sun, 20 Apr 2025 23:39:54 +0200
Subject: [PATCH] sample Docker Compose configuration for Glances

---
 app/dashboard/servers/Servers.tsx | 82 ++++++++++++++++++++++++-------
 1 file changed, 63 insertions(+), 19 deletions(-)

diff --git a/app/dashboard/servers/Servers.tsx b/app/dashboard/servers/Servers.tsx
index 5d66b81..2cc8887 100644
--- a/app/dashboard/servers/Servers.tsx
+++ b/app/dashboard/servers/Servers.tsx
@@ -621,15 +621,37 @@ export default function Dashboard() {
                               <Label htmlFor="monitoringCheckbox">Enable monitoring</Label>
                             </div>
                             {monitoring && (
-                              <div className="grid w-full items-center gap-1.5">
-                                <Label htmlFor="monitoringURL">Monitoring URL</Label>
-                                <Input
-                                  id="monitoringURL"
-                                  type="text"
-                                  placeholder={`http://${ip}:61208`}
-                                  onChange={(e) => setMonitoringURL(e.target.value)}
-                                />
-                              </div>
+                              <>
+                                <div className="grid w-full items-center gap-1.5">
+                                  <Label htmlFor="monitoringURL">Monitoring URL</Label>
+                                  <Input
+                                    id="monitoringURL"
+                                    type="text"
+                                    placeholder={`http://${ip}:61208`}
+                                    onChange={(e) => setMonitoringURL(e.target.value)}
+                                  />
+                                </div>
+                                <div className="mt-4 p-4 border rounded-lg bg-muted">
+                                  <h4 className="text-sm font-semibold mb-2">Required Server Setup</h4>
+                                  <p className="text-sm text-muted-foreground mb-3">
+                                    To enable monitoring, you need to install Glances on your server. Here's an example Docker Compose configuration:
+                                  </p>
+                                  <pre className="bg-background p-4 rounded-md text-sm">
+                                    <code>{`services:
+  glances:
+    image: nicolargo/glances:latest
+    container_name: glances
+    restart: unless-stopped
+    ports:
+      - "61208:61208"
+    pid: "host"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+    environment:
+      - GLANCES_OPT=-w --disable-webui`}</code>
+                                  </pre>
+                                </div>
+                              </>
                             )}
                           </div>
                         </TabsContent>
@@ -1076,16 +1098,38 @@ export default function Dashboard() {
                                                 <Label htmlFor="editMonitoringCheckbox">Enable monitoring</Label>
                                               </div>
                                               {editMonitoring && (
-                                                <div className="grid w-full items-center gap-1.5">
-                                                  <Label htmlFor="editMonitoringURL">Monitoring URL</Label>
-                                                  <Input
-                                                    id="editMonitoringURL"
-                                                    type="text"
-                                                    placeholder={`http://${editIp}:61208`}
-                                                    value={editMonitoringURL}
-                                                    onChange={(e) => setEditMonitoringURL(e.target.value)}
-                                                  />
-                                                </div>
+                                                <>
+                                                  <div className="grid w-full items-center gap-1.5">
+                                                    <Label htmlFor="editMonitoringURL">Monitoring URL</Label>
+                                                    <Input
+                                                      id="editMonitoringURL"
+                                                      type="text"
+                                                      placeholder={`http://${editIp}:61208`}
+                                                      value={editMonitoringURL}
+                                                      onChange={(e) => setEditMonitoringURL(e.target.value)}
+                                                    />
+                                                  </div>
+                                                  <div className="mt-4 p-4 border rounded-lg bg-muted">
+                                                    <h4 className="text-sm font-semibold mb-2">Required Server Setup</h4>
+                                                    <p className="text-sm text-muted-foreground mb-3">
+                                                      To enable monitoring, you need to install Glances on your server. Here's an example Docker Compose configuration:
+                                                    </p>
+                                                    <pre className="bg-background p-4 rounded-md text-sm">
+                                                      <code>{`services:
+  glances:
+    image: nicolargo/glances:latest
+    container_name: glances
+    restart: unless-stopped
+    ports:
+      - "61208:61208"
+    pid: "host"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+    environment:
+      - GLANCES_OPT=-w --disable-webui`}</code>
+                                                    </pre>
+                                                  </div>
+                                                </>
                                               )}
                                             </div>
                                           </TabsContent>