From cbd5624fb2efef51cee3434bedc1d699bdc4ae0d Mon Sep 17 00:00:00 2001
From: baldo <baldo@toppoint.de>
Date: Mon, 30 May 2022 13:54:57 +0200
Subject: [PATCH] Nicer display of node list

---
 frontend/src/stores/nodes.ts          | 14 ++++-
 frontend/src/utils/Api.ts             | 36 +++++++++++-
 frontend/src/utils/Numbers.ts         | 25 +++++++++
 frontend/src/views/AdminNodesView.vue | 79 +++++++++++++++++++++++++--
 server/types/shared.ts                |  2 -
 5 files changed, 144 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/utils/Numbers.ts

diff --git a/frontend/src/stores/nodes.ts b/frontend/src/stores/nodes.ts
index f559cdf..03ebd63 100644
--- a/frontend/src/stores/nodes.ts
+++ b/frontend/src/stores/nodes.ts
@@ -1,9 +1,10 @@
 import {defineStore} from "pinia";
-import {isEnhancedNodes, type EnhancedNode} from "@/types";
+import {isEnhancedNode, type EnhancedNode} from "@/types";
 import {internalApi} from "@/utils/Api";
 
 interface NodesStoreState {
     nodes: EnhancedNode[];
+    totalNodes: number;
 }
 
 export const useNodesStore = defineStore({
@@ -11,19 +12,26 @@ export const useNodesStore = defineStore({
     state(): NodesStoreState {
         return {
             nodes: [],
+            totalNodes: 0,
         };
     },
     getters: {
         getNodes(state: NodesStoreState): EnhancedNode[] {
             return state.nodes;
         },
+
+        getTotalNodes(state: NodesStoreState): number {
+            return state.totalNodes;
+        }
     },
     actions: {
         async refresh(): Promise<void> {
-            this.nodes = await internalApi.get<EnhancedNode[]>(
+            const result = await internalApi.getPagedList<EnhancedNode>(
                 "nodes",
-                isEnhancedNodes
+                isEnhancedNode
             );
+            this.nodes = result.entries;
+            this.totalNodes = result.total;
         },
     },
 });
diff --git a/frontend/src/utils/Api.ts b/frontend/src/utils/Api.ts
index 94596b8..a7308ea 100644
--- a/frontend/src/utils/Api.ts
+++ b/frontend/src/utils/Api.ts
@@ -1,4 +1,17 @@
 import type {TypeGuard} from "@/types/shared";
+import {toIsArray} from "@/types/shared";
+import type {Headers} from "request";
+import {parseInteger} from "@/utils/Numbers";
+
+interface PagedListResult<T> {
+    entries: T[];
+    total: number;
+}
+
+interface Response<T> {
+    result: T;
+    headers: Headers;
+}
 
 class Api {
     private baseURL: string = import.meta.env.BASE_URL;
@@ -14,7 +27,7 @@ class Api {
         return this.baseURL + this.apiPrefix + path;
     }
 
-    async get<T>(path: string, isT: TypeGuard<T>): Promise<T> {
+    private async doGet<T>(path: string, isT: TypeGuard<T>): Promise<Response<T>> {
         const url = this.toURL(path);
         const result = await fetch(url);
         const json = await result.json();
@@ -24,7 +37,26 @@ class Api {
             throw new Error(`API get result has wrong type. ${url} => ${json}`);
         }
 
-        return json;
+        return {
+            result: json,
+            headers: result.headers,
+        };
+    }
+
+    async get<T>(path: string, isT: TypeGuard<T>): Promise<T> {
+        const response = await this.doGet(path, isT);
+        return response.result;
+    }
+
+    async getPagedList<T>(path: string, isT: TypeGuard<T>): Promise<PagedListResult<T>> {
+        const response = await this.doGet(path, toIsArray(isT));
+        const totalStr = response.headers.get("x-total-count");
+        const total = parseInteger(totalStr, 10);
+
+        return {
+            entries: response.result,
+            total,
+        }
     }
 }
 
diff --git a/frontend/src/utils/Numbers.ts b/frontend/src/utils/Numbers.ts
new file mode 100644
index 0000000..3727305
--- /dev/null
+++ b/frontend/src/utils/Numbers.ts
@@ -0,0 +1,25 @@
+// TODO: Write tests!
+export function parseInteger(arg: any, radix: number): number {
+    if (Number.isInteger(arg)) {
+        return arg;
+    }
+    switch (typeof arg) {
+        case "number":
+            throw new Error(`Not an integer: ${arg}`);
+        case "string":
+            if (radix < 2 || radix > 36 || isNaN(radix)) {
+                throw new Error(`Radix out of range: ${radix}`);
+            }
+            const str = (arg as string).trim();
+            const num = parseInt(str, radix);
+            if (isNaN(num)) {
+                throw new Error(`Not a valid number (radix: ${radix}): ${str}`);
+            }
+            if (num.toString(radix).toLowerCase() !== str.toLowerCase()) {
+                throw new Error(`Parsed integer does not match given string (radix: {radix}): ${str}`);
+            }
+            return num;
+        default:
+            throw new Error(`Cannot parse number (radix: ${radix}): ${arg}`);
+    }
+}
diff --git a/frontend/src/views/AdminNodesView.vue b/frontend/src/views/AdminNodesView.vue
index 58a5e4b..fe0f7bc 100644
--- a/frontend/src/views/AdminNodesView.vue
+++ b/frontend/src/views/AdminNodesView.vue
@@ -33,12 +33,20 @@ function setRedactField(node: EnhancedNode, field: NodeRedactField, value: boole
     redactFieldsMap[field] = value;
 }
 
+function hasOnlineState(node: EnhancedNode): boolean {
+    return node.onlineState !== undefined;
+}
+
 refresh();
 </script>
 
 <template>
     <main>
         <h2>Knoten</h2>
+
+        <div>
+            <span>Gesamt: {{nodes.getTotalNodes}}</span>
+        </div>
         <table>
             <thead>
                 <tr>
@@ -57,7 +65,9 @@ refresh();
             </thead>
 
             <tbody>
-                <tr v-for="node in nodes.getNodes">
+                <tr
+                    v-for="node in nodes.getNodes"
+                    :class="[hasOnlineState ? node.onlineState.toLowerCase() : 'online-state-unknown']">
                     <td>{{node.hostname}}</td>
                     <td v-if="shallRedactField(node, 'nickname')">
                         <span
@@ -102,12 +112,51 @@ refresh();
                         </span>
                     </td>
                     <td>{{node.mac}}</td>
-                    <td>{{node.key}}</td><!-- TODO: Icon if set -->
+                    <td class="icon">
+                        <i
+                            v-if="node.key"
+                            class="fa fa-lock"
+                            aria-hidden="true"
+                            title="Hat VPN-Schlüssel" />
+                        <i
+                            v-if="!node.key"
+                            class="fa fa-times not-available"
+                            aria-hidden="true"
+                            title="Hat keinen VPN-Schlüssel" />
+                    </td>
                     <td>{{node.site}}</td>
                     <td>{{node.domain}}</td>
-                    <td>{{node.coords}}</td><!-- TODO: Icon with link if set -->
-                    <td>{{node.onlineState}}</td>
-                    <td>{{node.monitoring}}</td><!-- TODO: Icon regarding state -->
+                    <td class="icon">
+                        <i
+                            v-if="node.coords"
+                            class="fa fa-map-marker"
+                            aria-hidden="true"
+                            title="Hat Koordinaten" />
+                        <i
+                            v-if="!node.coords"
+                            class="fa fa-times not-available"
+                            aria-hidden="true"
+                            title="Hat keinen Koordinaten" />
+                    </td>
+                    <td v-if="node.onlineState !== undefined">{{node.onlineState.toLowerCase()}}</td>
+                    <td v-if="node.onlineState === undefined">unbekannt</td>
+                    <td class="icon">
+                        <i
+                            v-if="node.monitoring && node.monitoringConfirmed"
+                            class="fa fa-heartbeat"
+                            aria-hidden="true"
+                            title="Monitoring aktiv" />
+                        <i
+                            v-if="node.monitoring && !node.monitoringConfirmed"
+                            class="fa fa-envelope"
+                            aria-hidden="true"
+                            title="Monitoring nicht bestätigt" />
+                        <i
+                            v-if="!node.monitoring"
+                            class="fa fa-times not-available"
+                            aria-hidden="true"
+                            title="Monitoring deaktiviert" />
+                    </td>
                 </tr>
             </tbody>
         </table>
@@ -127,6 +176,22 @@ table {
         border-top: 1px solid $gray-light;
     }
 
+    .online {
+        color: $variant-color-success;
+    }
+
+    .offline {
+        color: $variant-color-danger;
+    }
+
+    .online-state-unknown {
+        color: $variant-color-warning;
+    }
+
+    .icon {
+        text-align: center;
+    }
+
     .redacted, .redactable {
         cursor: pointer;
     }
@@ -134,5 +199,9 @@ table {
     .redacted {
         filter: blur(0.2em);
     }
+
+    .not-available {
+        color: $gray-dark
+    }
 }
 </style>
diff --git a/server/types/shared.ts b/server/types/shared.ts
index ffa4134..5ed7eca 100644
--- a/server/types/shared.ts
+++ b/server/types/shared.ts
@@ -326,5 +326,3 @@ export function isEnhancedNode(arg: unknown): arg is EnhancedNode {
         (node.onlineState === undefined || isOnlineState(node.onlineState))
     );
 }
-
-export const isEnhancedNodes = toIsArray(isEnhancedNode);