Added invalidate cache button (through a generic APIButton widget)

_frontend/src/components/Widgets.jsx

@@ -1,3 +1,4 @@
+import { APIButton } from './widgets/ApiStatus.jsx'
 import { DiskUsage } from './widgets/DiskUsage.jsx'
 import { MessageWidget } from './widgets/MessageWidget.jsx'
 import { PieChartWidget } from './widgets/PieChartWidget.jsx'
@@ -8,6 +9,7 @@ const WidgetTypes = {
     message: MessageWidget,
     'script-status': ScriptStatus,
     'disk-usage': DiskUsage,
+    'api-button': APIButton,
 }
 
 export const Widget = ({ type, value }) => {

_frontend/src/components/charts/PieChart.jsx

@@ -1,7 +1,11 @@
-import { useEffect, useRef } from 'preact/hooks'
+import { useEffect, useRef, useState } from 'preact/hooks'
 import { hashCode } from '../../util.jsx'
 
+let pieChartPiecesSeed = 934635493
+
 export const PieChart = ({ parts, labels, total }) => {
+    const [seed] = useState(() => pieChartPiecesSeed++)
+
     parts = parts || [1]
     labels = labels || parts
 
@@ -47,8 +51,8 @@ export const PieChart = ({ parts, labels, total }) => {
             g.stroke()
 
             let acc = 0
-            for (const [angle, label] of anglesAndLabel) {
+            anglesAndLabel.forEach(([angle, label], i) => {
-                g.fillStyle = `hsl(${((hashCode(label) % 0xff) * 360) / 0xff}, 80%, 65%)`
+                g.fillStyle = `hsl(${((hashCode(`${i} ${seed}`) % 0xff) * 360) / 0xff}, 80%, 65%)`
                 g.beginPath()
                 g.moveTo(0, 0)
                 g.arc(0, 0, width * 0.5 * 0.8, acc - 0.5 * Math.PI, acc + angle - 0.5 * Math.PI)
@@ -69,9 +73,9 @@ export const PieChart = ({ parts, labels, total }) => {
                 )
 
                 acc += angle
+            })
         }
-        }
+    }, [canvasRef, parts, labels])
-    }, [canvasRef, parts])
 
     return <canvas ref={canvasRef}></canvas>
 }

_frontend/src/components/widgets/ApiStatus.jsx

@@ -0,0 +1,32 @@
+import { ToastMessage, useToasts } from '../Toasts.jsx'
+
+export const APIButton = ({ title, url }) => {
+    const [showToast] = useToasts()
+
+    const fetchAPI = async () => {
+        try {
+            const res = await fetch(url)
+            const status = await res.text()
+
+            if (!res.ok) {
+                showToast(<ToastMessage icon="error">{status}</ToastMessage>)
+                return
+            }
+
+            showToast(<ToastMessage icon="info">Eseguito "{title}"</ToastMessage>)
+        } catch (e) {
+            showToast(<ToastMessage icon="error">Errore "{e}"</ToastMessage>)
+        }
+    }
+
+    return (
+        <>
+            <div class="title">{title}</div>
+            <div class="content">
+                <div>
+                    <button onClick={() => fetchAPI()}>Chiama</button>
+                </div>
+            </div>
+        </>
+    )
+}

_frontend/src/pages/Dashboard.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'preact/hooks'
-import { Widget } from '../components/Widget.jsx'
+import { Widget } from '../components/Widgets.jsx'
 
 export const Dashboard = () => {
     const [widgets, setWidgets] = useState([])

_frontend/styles/main.scss

@@ -221,7 +221,7 @@ main {
 
             flex-grow: 1;
 
-            padding: 1rem 1rem 0 1rem;
+            padding: 1rem;
         }
     }
 }

monitor/service.go

@@ -52,6 +52,11 @@ func (s *Service) LoadScripts() error {
 	return nil
 }
 
+func (s *Service) InvalidateCache() {
+	log.Printf("Invalidating monitor cache")
+	s.scriptOutputCache = map[string]cacheEntry{}
+}
+
 func (s *Service) GetOutput(command string) (string, error) {
 	// check if output is present in cache
 	if entry, found := s.scriptOutputCache[command]; found {

routes/monitor.go

@@ -21,4 +21,9 @@ func (r *Router) ApiMonitor(api fiber.Router) {
 
 		return fmt.Errorf("no script, device or entity provided")
 	})
+
+	api.Get("/invalidate-cache", func(c *fiber.Ctx) error {
+		r.Monitor.InvalidateCache()
+		return c.JSON("ok")
+	})
 }