Display the list of OTA updates in the frontend

central_frontend/src/api/OTAApi.ts

@@ -1,5 +1,11 @@
 import { APIClient } from "./ApiClient";
 
+export interface OTAUpdate {
+  platform: string;
+  version: string;
+  file_size: number;
+}
+
 export class OTAAPI {
   /**
    * Get the list of supported OTA platforms
@@ -30,4 +36,16 @@ export class OTAAPI {
       formData: fd,
     });
   }
+
+  /**
+   * Get the list of OTA updates
+   */
+  static async ListOTAUpdates(): Promise<OTAUpdate[]> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: "/ota",
+      })
+    ).data;
+  }
 }

central_frontend/src/routes/OTARoute.tsx

@@ -1,10 +1,21 @@
-import { IconButton, Tooltip } from "@mui/material";
+import {
+  IconButton,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Tooltip,
+} from "@mui/material";
 import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
 import FileUploadIcon from "@mui/icons-material/FileUpload";
 import { UploadUpdateDialog } from "../dialogs/UploadUpdateDialog";
 import React from "react";
-import { OTAAPI } from "../api/OTAApi";
+import { OTAAPI, OTAUpdate } from "../api/OTAApi";
 import { AsyncWidget } from "../widgets/AsyncWidget";
+import { filesize } from "filesize";
 
 export function OTARoute(): React.ReactElement {
   const [list, setList] = React.useState<string[] | undefined>();
@@ -24,10 +35,23 @@ export function OTARoute(): React.ReactElement {
 }
 
 function _OTARoute(p: { platforms: Array<string> }): React.ReactElement {
+  const key = React.useRef(1);
   const [showUploadDialog, setShowUploadDialog] = React.useState(false);
 
+  const [list, setList] = React.useState<undefined | OTAUpdate[]>();
+
+  const load = async () => {
+    const list = await OTAAPI.ListOTAUpdates();
+    list.sort((a, b) =>
+      `${a.platform}#${a.version}`.localeCompare(`${b.platform}#${b.version}`)
+    );
+    list.reverse();
+    setList(list);
+  };
+
   const reload = async () => {
-    /*todo*/
+    key.current += 1;
+    setList(undefined);
   };
 
   return (
@@ -53,6 +77,38 @@ function _OTARoute(p: { platforms: Array<string> }): React.ReactElement {
           }}
         />
       )}
+      <AsyncWidget
+        loadKey={key.current}
+        ready={!!list}
+        errMsg="Failed to load the list of OTA updates!"
+        load={load}
+        build={() => <_OTAList list={list!} />}
+      />
     </SolarEnergyRouteContainer>
   );
 }
+
+function _OTAList(p: { list: OTAUpdate[] }): React.ReactElement {
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell align="center">Platform</TableCell>
+            <TableCell align="center">Version</TableCell>
+            <TableCell align="center">File size</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {p.list.map((row, num) => (
+            <TableRow hover key={num}>
+              <TableCell align="center">{row.platform}</TableCell>
+              <TableCell align="center">{row.version}</TableCell>
+              <TableCell align="center">{filesize(row.file_size)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}