diff --git a/striker-ui/package-lock.json b/striker-ui/package-lock.json
index eefa8f99..7825c8a4 100644
--- a/striker-ui/package-lock.json
+++ b/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",
diff --git a/striker-ui/package.json b/striker-ui/package.json
index 85123436..cf1958db 100644
--- a/striker-ui/package.json
+++ b/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",
diff --git a/striker-ui/pages/init/index.tsx b/striker-ui/pages/init/index.tsx
new file mode 100644
index 00000000..76e0aa02
--- /dev/null
+++ b/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 (
+
+
+
+
+ {isLoading ? (
+
+ ) : (
+ networkInterfaceUUID}
+ hideFooter
+ rows={networkInterfaces}
+ sx={{
+ color: TEXT,
+ height: '50vh',
+
+ [`& .${muiIconButtonClasses.root}`]: {
+ color: TEXT,
+ },
+
+ [`& .${muiTablePaginationClasses.root}`]: {
+ color: TEXT,
+ },
+ }}
+ />
+ )}
+
+ );
+};
+
+const Init: FC = () => (
+
+
+
+);
+
+export default Init;
diff --git a/striker-ui/types/APINetworkInterface.d.ts b/striker-ui/types/APINetworkInterface.d.ts
new file mode 100644
index 00000000..7cdfac98
--- /dev/null
+++ b/striker-ui/types/APINetworkInterface.d.ts
@@ -0,0 +1,8 @@
+type NetworkInterfaceOverviewMetadata = {
+ networkInterfaceUUID: string;
+ networkInterfaceMACAddress: string;
+ networkInterfaceName: string;
+ networkInterfaceState: string;
+ networkInterfaceSpeed: number;
+ networkInterfaceOrder: number;
+};