From 29cd0d2c2f32e0fbb70aadeb3e6c98f89b683644 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 8 Jul 2022 15:39:02 -0400
Subject: [PATCH] fix(striker-ui): change NIC table render

---
 striker-ui/components/Text/index.tsx |  3 +-
 striker-ui/pages/init/index.tsx      | 44 +++++++++++++++++++++-------
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/striker-ui/components/Text/index.tsx b/striker-ui/components/Text/index.tsx
index 0d4c9499..33d3415c 100644
--- a/striker-ui/components/Text/index.tsx
+++ b/striker-ui/components/Text/index.tsx
@@ -1,5 +1,6 @@
-import BodyText from './BodyText';
+import BodyText, { BodyTextProps } from './BodyText';
 import HeaderText from './HeaderText';
 import Monospace from './Monospace';
 
+export type { BodyTextProps };
 export { BodyText, HeaderText, Monospace };
diff --git a/striker-ui/pages/init/index.tsx b/striker-ui/pages/init/index.tsx
index f0752673..4274b6d4 100644
--- a/striker-ui/pages/init/index.tsx
+++ b/striker-ui/pages/init/index.tsx
@@ -15,7 +15,8 @@ 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';
+import { BodyText, BodyTextProps, HeaderText } from '../../components/Text';
+import Decorator from '../../components/Decorator';
 
 const MOCK_NICS: NetworkInterfaceOverviewMetadata[] = [
   {
@@ -52,33 +53,56 @@ const MOCK_NICS: NetworkInterfaceOverviewMetadata[] = [
   },
 ];
 
+const DataGridCellText: FC<BodyTextProps> = ({
+  ...dataGridCellTextRestProps
+}) => (
+  <BodyText
+    {...{
+      variant: 'body2',
+      ...dataGridCellTextRestProps,
+    }}
+  />
+);
+
 const NETWORK_INTERFACE_COLUMNS: MUIDataGridProps['columns'] = [
-  {
-    field: 'networkInterfaceMACAddress',
-    flex: 1,
-    headerName: 'MAC',
-  },
   {
     field: 'networkInterfaceName',
     flex: 1,
     headerName: 'Name',
+    renderCell: ({ row: { networkInterfaceState } = {}, value }) => (
+      <MUIBox
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          '& > :not(:first-child)': { marginLeft: '.5em' },
+        }}
+      >
+        <Decorator
+          colour={networkInterfaceState === 'up' ? 'ok' : 'warning'}
+          sx={{ height: 'auto' }}
+        />
+        <DataGridCellText text={value} />
+      </MUIBox>
+    ),
   },
   {
-    field: 'networkInterfaceState',
+    field: 'networkInterfaceMACAddress',
     flex: 1,
-    headerName: 'State',
+    headerName: 'MAC',
+    renderCell: ({ value }) => <DataGridCellText monospaced text={value} />,
   },
   {
     field: 'networkInterfaceSpeed',
     flex: 1,
     headerName: 'Speed',
-    type: 'number',
+    renderCell: ({ value }) => (
+      <DataGridCellText text={`${parseFloat(value).toLocaleString()} Mbps`} />
+    ),
   },
   {
     field: 'networkInterfaceOrder',
     flex: 1,
     headerName: 'Order',
-    type: 'number',
   },
 ];