System monitor live polling

front/DAL/systemInfo.ts

@@ -1,11 +1,18 @@
 
 import $ from "jquery"
-import { SystemInfoDescription, SystemInfo as ModelSystemInfo } from "../../src/models/systemInfo";
+import { SystemInfoDescription, SystemInfo as ModelSystemInfo, HostnameLiveSystemInfoDescription } from "../../src/models/systemInfo";
 import { HostnameServiceDescription } from "../../src/models/service";
 
+export interface TimedLiveSystemInfo {
+    time: Date;
+    data: HostnameLiveSystemInfoDescription;
+}
+
 export namespace DAL {
     export class SystemInfo {
         private static lastCachedData: SystemInfoDescription|null = null;
+        private static liveData: TimedLiveSystemInfo[] = [];
+        private static liveHandler: ReturnType<typeof setTimeout>|boolean = false;
 
         private static getData(): Promise<void> {
             return new Promise(ok => {
@@ -32,6 +39,38 @@ export namespace DAL {
             return Object.keys(this.lastCachedData?.systemInfo ?? {});
         }
 
+        private static pushLiveData(data: HostnameLiveSystemInfoDescription): TimedLiveSystemInfo {
+            let result: TimedLiveSystemInfo = { data: data, time: new Date() };
+            this.liveData.push(result);
+            return result;
+        }
+
+        private static pollNow(): Promise<TimedLiveSystemInfo> {
+            return new Promise(ok => {
+                $.get("/api/sysinfo/live", response => {
+                    ok(this.pushLiveData(response.liveSystemInfo));
+                });
+            });
+        }
+
+        private static async pollTick(): Promise<TimedLiveSystemInfo> {
+            let result = await this.pollNow();
+            this.liveHandler = setTimeout(this.pollTick.bind(this), 10000);
+            return result;
+        }
+
+        public static async startLivePolling(): Promise<TimedLiveSystemInfo> {
+            if (this.liveHandler !== false)
+                return this.liveData[this.liveData.length-1]!;
+            this.liveHandler = true;
+            await this.getDataWithCache();
+            return await this.pollTick();
+        }
+
+        public static async getLive(): Promise<TimedLiveSystemInfo> {
+            return await this.startLivePolling();
+        }
+
         public static async getServices(): Promise<HostnameServiceDescription> {
             return new Promise(ok => {
                 $.get("/api/services/list", response => {

front/index.ts

@@ -3,6 +3,8 @@ import $ from "jquery";
 import "bootstrap";
 import "bootstrap-select";
 
+import {DAL} from './DAL/systemInfo';
+
 import DataTable from 'datatables.net-react';
 import DT from 'datatables.net-bs4';
 import 'datatables.net-columncontrol-bs4';
@@ -13,5 +15,6 @@ import templateManager from "./templates/templateManager";
 templateManager.setLoading(true);
 $(async () => {
     await templateManager.showDefaultPage();
+    await DAL.SystemInfo.startLivePolling();
 });
 

front/templates/systemMonitor.ts

@@ -1,4 +1,6 @@
+import {DAL} from "../DAL/systemInfo";
 import {Page} from "./page";
+import {SystemMonitorComponent} from "./systemMonitorComponent";
 
 class SystemMonitorPage extends Page {
     private loaded: boolean = false;
@@ -10,6 +12,8 @@ class SystemMonitorPage extends Page {
     protected async load(): Promise<void> {
         if (this.loaded)
             return;
+        await DAL.SystemInfo.getLive();
+        SystemMonitorComponent.renderMultiple(document.getElementById("page-systemMonitor")!);
         this.loaded = true;
     }
 }

front/templates/systemMonitorComponent.tsx

@@ -0,0 +1,35 @@
+import React, { Component } from "react";
+import * as ReactDom from "react-dom/client";
+import menu from "./menu";
+
+interface SystemMonitorComponentState {
+}
+
+interface SystemMonitorComponentProps {
+}
+
+export class SystemMonitorComponent extends Component<SystemMonitorComponentProps, SystemMonitorComponentState> {
+    public constructor(props: SystemMonitorComponentProps) {
+        super(props);
+
+        this.state = {
+        };
+        menu.addFilterEventListener(() => {
+            this.refreshFilter();
+        });
+    }
+
+    private refreshFilter() {
+    }
+
+    public render(): React.JSX.Element {
+        return (<>
+            test
+            </>);
+    }
+
+    public static async renderMultiple(container: HTMLElement) {
+        ReactDom.createRoot(container).render(<SystemMonitorComponent />);
+    }
+}
+