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; +};