From 2807b551bad1224a6c2a1ee1f021a80c5845b0db Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Thu, 7 Jul 2022 01:12:22 +0200
Subject: [PATCH] Added invalidate cache button (through a generic APIButton
 widget)

---
 .../components/{Widget.jsx => Widgets.jsx}    |  2 ++
 _frontend/src/components/charts/PieChart.jsx  | 14 +++++---
 .../src/components/widgets/ApiStatus.jsx      | 32 +++++++++++++++++++
 _frontend/src/pages/Dashboard.jsx             |  2 +-
 _frontend/styles/main.scss                    |  2 +-
 monitor/service.go                            |  5 +++
 routes/monitor.go                             |  5 +++
 7 files changed, 55 insertions(+), 7 deletions(-)
 rename _frontend/src/components/{Widget.jsx => Widgets.jsx} (87%)
 create mode 100644 _frontend/src/components/widgets/ApiStatus.jsx

diff --git a/_frontend/src/components/Widget.jsx b/_frontend/src/components/Widgets.jsx
similarity index 87%
rename from _frontend/src/components/Widget.jsx
rename to _frontend/src/components/Widgets.jsx
index 1df9f8f..5b0a5f9 100644
--- a/_frontend/src/components/Widget.jsx
+++ b/_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 }) => {
diff --git a/_frontend/src/components/charts/PieChart.jsx b/_frontend/src/components/charts/PieChart.jsx
index 5b2d4d9..c4f9073 100644
--- a/_frontend/src/components/charts/PieChart.jsx
+++ b/_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) {
-                g.fillStyle = `hsl(${((hashCode(label) % 0xff) * 360) / 0xff}, 80%, 65%)`
+            anglesAndLabel.forEach(([angle, label], i) => {
+                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])
+    }, [canvasRef, parts, labels])
 
     return <canvas ref={canvasRef}></canvas>
 }
diff --git a/_frontend/src/components/widgets/ApiStatus.jsx b/_frontend/src/components/widgets/ApiStatus.jsx
new file mode 100644
index 0000000..d7b502a
--- /dev/null
+++ b/_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>
+        </>
+    )
+}
diff --git a/_frontend/src/pages/Dashboard.jsx b/_frontend/src/pages/Dashboard.jsx
index 8cac08f..a5a1581 100644
--- a/_frontend/src/pages/Dashboard.jsx
+++ b/_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([])
diff --git a/_frontend/styles/main.scss b/_frontend/styles/main.scss
index 4043935..86748f7 100644
--- a/_frontend/styles/main.scss
+++ b/_frontend/styles/main.scss
@@ -221,7 +221,7 @@ main {
 
             flex-grow: 1;
 
-            padding: 1rem 1rem 0 1rem;
+            padding: 1rem;
         }
     }
 }
diff --git a/monitor/service.go b/monitor/service.go
index 8a2c85d..4b62a02 100644
--- a/monitor/service.go
+++ b/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 {
diff --git a/routes/monitor.go b/routes/monitor.go
index f97314b..e4376c1 100644
--- a/routes/monitor.go
+++ b/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")
+	})
 }