Update proto to include dynamic information

frontend/src/pages/Index.tsx

@@ -2,7 +2,7 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { fas } from "fontawesome.macro";
 import React, { useEffect, useState } from "react";
-import { Computer, ComputerType, State } from "../proto";
+import { Computer, ComputerType, State, StateItem } from "../proto";
 import { TokenContext } from "../tokenStorage";
 
 export const Index: React.FC = () => {
@@ -37,14 +37,14 @@ export const Index: React.FC = () => {
 
 export default Index;
 
-const Groups: React.FC<{ computers: Array<Computer> }> = ({ computers }) => {
-    const groupMap = new Map<string, Array<Computer>>();
+const Groups: React.FC<{ computers: Array<StateItem> }> = ({ computers }) => {
+    const groupMap = new Map<string, Array<StateItem>>();
 
     for (const computer of computers) {
-        if (!groupMap.has(computer.group)) {
-            groupMap.set(computer.group, []);
+        if (!groupMap.has(computer.static.group)) {
+            groupMap.set(computer.static.group, []);
         }
-        groupMap.get(computer.group)!.push(computer);
+        groupMap.get(computer.static.group)!.push(computer);
     }
 
     return <div>
@@ -61,15 +61,15 @@ const Groups: React.FC<{ computers: Array<Computer> }> = ({ computers }) => {
 }
 
 
-const CardList: React.FC<{ computers: Array<Computer> }> = ({ computers }) => {
+const CardList: React.FC<{ computers: Array<StateItem> }> = ({ computers }) => {
     return <>
         {computers.map(
-            (computer) => <ComputerCard key={computer.uuid} computer={computer} />
+            (computer) => <ComputerCard key={computer.static.uuid} computer={computer} />
         )}
     </>
 }
 
-const ComputerCard: React.FC<{ computer: Computer }> = ({ computer }) => {
+const ComputerCard: React.FC<{ computer: StateItem }> = ({ computer }) => {
 
     const typeIcon: Map<ComputerType, IconProp> = new Map([
         ["computer", fas`desktop`],
@@ -82,21 +82,33 @@ const ComputerCard: React.FC<{ computer: Computer }> = ({ computer }) => {
             <div>
                 <p>
                     <span className="inline-block align-middle">
-                        <FontAwesomeIcon icon={typeIcon.get(computer.type) || fas`question`} />
+                        <FontAwesomeIcon icon={typeIcon.get(computer.static.type) || fas`question`} />
                     </span>
-                    <span className={`heading mx-2 text-lg ${computer.label ? "" : "font-extralight"}`}>
-                        {computer.label || "(no label)"}
+                    <span className={`heading mx-2 text-lg ${computer.static.label ? "" : "font-extralight"}`}>
+                        {computer.static.label || "(no label)"}
                     </span>
-                    {computer.is_advanced && <span className="badge ~yellow @low">advanced</span>}
+                    {computer.static.is_advanced && <span className="badge ~yellow @low">advanced</span>}
                 </p>
                 <p className="support">
-                    {computer.uuid}
+                    {computer.static.uuid}
                 </p>
             </div>
             <div>
-                Offline
-                <span className="icon m-1 text-red-900"><FontAwesomeIcon icon={fas`ban`} /></span>
+                {
+                    computer.dynamic.is_online
+                        ? <>
+                            Online
+                            <span className="icon m-1 text-green-600"><FontAwesomeIcon icon={fas`circle`} /></span>
+                        </>
+                        : <>
+                            Offline
+                            <span className="icon m-1 text-red-900"><FontAwesomeIcon icon={fas`ban`} /></span>
+                        </>
+                }
             </div>
         </div>
-    </div>
+        <pre className="pre overflow-x-scroll">
+            {JSON.stringify(computer, null, 2)}
+        </pre>
+    </div >
 }

frontend/src/proto.ts

@@ -11,6 +11,15 @@ export type Computer = {
     group: string,
 }
 
+export type DynamicComputerState = {
+    is_online: boolean,
+}
+
+export type StateItem = {
+    static: Computer,
+    dynamic: DynamicComputerState,
+}
+
 export type State = {
-    computers: Array<Computer>
+    computers: Array<StateItem>
 }