feat(striker-ui): add /init page

striker-ui/package-lock.json

@@ -18,6 +18,7 @@
         "@mui/icons-material": "^5.2.4",
         "@mui/material": "^5.2.4",
         "@mui/styles": "^5.2.3",
+        "@mui/x-data-grid": "^5.12.3",
         "@novnc/novnc": "^1.2.0",
         "axios": "^0.24.0",
         "format-data-size": "file:../../format-data-size",
@@ -1312,6 +1313,31 @@
         "react": "^17.0.0"
       }
     },
+    "node_modules/@mui/x-data-grid": {
+      "version": "5.12.3",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.12.3.tgz",
+      "integrity": "sha512-57A2MkRR/uUNC/dECFV0YDJvi1Q+gQgmgw1OHmZ1uSnKh29PcHpswkdapO0LueLpxAy8tfH+fTtnnPDmYgJeUg==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/utils": "^5.4.1",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1",
+        "reselect": "^4.1.6"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.4.1",
+        "@mui/system": "^5.4.1",
+        "react": "^17.0.2 || ^18.0.0",
+        "react-dom": "^17.0.2 || ^18.0.0"
+      }
+    },
     "node_modules/@next/env": {
       "version": "12.1.0",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.0.tgz",
@@ -5346,6 +5372,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/reselect": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz",
+      "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ=="
+    },
     "node_modules/resolve": {
       "version": "1.22.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
@@ -7135,6 +7166,18 @@
         "react-is": "^17.0.2"
       }
     },
+    "@mui/x-data-grid": {
+      "version": "5.12.3",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.12.3.tgz",
+      "integrity": "sha512-57A2MkRR/uUNC/dECFV0YDJvi1Q+gQgmgw1OHmZ1uSnKh29PcHpswkdapO0LueLpxAy8tfH+fTtnnPDmYgJeUg==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/utils": "^5.4.1",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1",
+        "reselect": "^4.1.6"
+      }
+    },
     "@next/env": {
       "version": "12.1.0",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.0.tgz",
@@ -10153,6 +10196,11 @@
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true
     },
+    "reselect": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz",
+      "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ=="
+    },
     "resolve": {
       "version": "1.22.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",

striker-ui/package.json

@@ -23,6 +23,7 @@
     "@mui/icons-material": "^5.2.4",
     "@mui/material": "^5.2.4",
     "@mui/styles": "^5.2.3",
+    "@mui/x-data-grid": "^5.12.3",
     "@novnc/novnc": "^1.2.0",
     "axios": "^0.24.0",
     "format-data-size": "file:../../format-data-size",

striker-ui/pages/init/index.tsx

@@ -0,0 +1,79 @@
+import { FC } from 'react';
+import {
+  Box as MUIBox,
+  iconButtonClasses as muiIconButtonClasses,
+  tablePaginationClasses as muiTablePaginationClasses,
+} from '@mui/material';
+import { DataGrid as MUIDataGrid } from '@mui/x-data-grid';
+
+import API_BASE_URL from '../../lib/consts/API_BASE_URL';
+import { TEXT } from '../../lib/consts/DEFAULT_THEME';
+
+import { Panel, PanelHeader } from '../../components/Panels';
+import periodicFetch from '../../lib/fetchers/periodicFetch';
+import Spinner from '../../components/Spinner';
+import { HeaderText } from '../../components/Text';
+
+const NetworkInterfaceList: FC = () => {
+  const { data: networkInterfaces = [], isLoading } = periodicFetch<
+    NetworkInterfaceOverviewMetadata[]
+  >(`${API_BASE_URL}/network-interface`, {
+    refreshInterval: 2000,
+  });
+
+  return (
+    <Panel>
+      <PanelHeader>
+        <HeaderText text="Network Interfaces" />
+      </PanelHeader>
+      {isLoading ? (
+        <Spinner />
+      ) : (
+        <MUIDataGrid
+          columns={[
+            { field: 'networkInterfaceMACAddress', flex: 1, headerName: 'MAC' },
+            { field: 'networkInterfaceName', flex: 1, headerName: 'Name' },
+            { field: 'networkInterfaceState', flex: 1, headerName: 'State' },
+            {
+              field: 'networkInterfaceSpeed',
+              flex: 1,
+              headerName: 'Speed',
+              type: 'number',
+            },
+            {
+              field: 'networkInterfaceOrder',
+              flex: 1,
+              headerName: 'Order',
+              type: 'number',
+            },
+          ]}
+          disableColumnMenu
+          disableSelectionOnClick
+          getRowId={({ networkInterfaceUUID }) => networkInterfaceUUID}
+          hideFooter
+          rows={networkInterfaces}
+          sx={{
+            color: TEXT,
+            height: '50vh',
+
+            [`& .${muiIconButtonClasses.root}`]: {
+              color: TEXT,
+            },
+
+            [`& .${muiTablePaginationClasses.root}`]: {
+              color: TEXT,
+            },
+          }}
+        />
+      )}
+    </Panel>
+  );
+};
+
+const Init: FC = () => (
+  <MUIBox>
+    <NetworkInterfaceList />
+  </MUIBox>
+);
+
+export default Init;

striker-ui/types/APINetworkInterface.d.ts

@@ -0,0 +1,8 @@
+type NetworkInterfaceOverviewMetadata = {
+  networkInterfaceUUID: string;
+  networkInterfaceMACAddress: string;
+  networkInterfaceName: string;
+  networkInterfaceState: string;
+  networkInterfaceSpeed: number;
+  networkInterfaceOrder: number;
+};