From b0bad697a4a053a4195ffccf67128a7924d361aa Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Tue, 30 Aug 2022 19:10:30 -0400
Subject: [PATCH] feat(striker-ui): add striker config page WIP

---
 .../StrikerConfig/ComplexOperationsPanel.tsx  | 17 ++++++++
 .../StrikerConfig/SimpleOperationsPanel.tsx   | 39 +++++++++++++++++++
 striker-ui/components/StrikerConfig/index.tsx |  4 ++
 striker-ui/pages/config/index.tsx             | 25 ++++++++++++
 4 files changed, 85 insertions(+)
 create mode 100644 striker-ui/components/StrikerConfig/ComplexOperationsPanel.tsx
 create mode 100644 striker-ui/components/StrikerConfig/SimpleOperationsPanel.tsx
 create mode 100644 striker-ui/components/StrikerConfig/index.tsx
 create mode 100644 striker-ui/pages/config/index.tsx

diff --git a/striker-ui/components/StrikerConfig/ComplexOperationsPanel.tsx b/striker-ui/components/StrikerConfig/ComplexOperationsPanel.tsx
new file mode 100644
index 00000000..417ba9e9
--- /dev/null
+++ b/striker-ui/components/StrikerConfig/ComplexOperationsPanel.tsx
@@ -0,0 +1,17 @@
+import { FC } from 'react';
+
+import FlexBox from '../FlexBox';
+import { ExpandablePanel, Panel } from '../Panels';
+import { BodyText } from '../Text';
+
+const ComplexOperationsPanel: FC = () => (
+  <Panel>
+    <ExpandablePanel header={<BodyText>Configure striker peers</BodyText>}>
+      <FlexBox>
+        <BodyText>Inbound connections</BodyText>
+      </FlexBox>
+    </ExpandablePanel>
+  </Panel>
+);
+
+export default ComplexOperationsPanel;
diff --git a/striker-ui/components/StrikerConfig/SimpleOperationsPanel.tsx b/striker-ui/components/StrikerConfig/SimpleOperationsPanel.tsx
new file mode 100644
index 00000000..0601c329
--- /dev/null
+++ b/striker-ui/components/StrikerConfig/SimpleOperationsPanel.tsx
@@ -0,0 +1,39 @@
+import { Grid } from '@mui/material';
+import { FC } from 'react';
+import ContainedButton, { ContainedButtonProps } from '../ContainedButton';
+import { Panel, PanelHeader } from '../Panels';
+import { HeaderText } from '../Text';
+
+type SimpleOperationsPanelProps = {
+  strikerHostName: string;
+};
+
+const StretchedButton: FC<ContainedButtonProps> = (props) => (
+  <ContainedButton {...props} sx={{ width: '100%' }} />
+);
+
+const SimpleOperationsPanel: FC<SimpleOperationsPanelProps> = ({
+  strikerHostName,
+}) => (
+  <Panel>
+    <PanelHeader>
+      <HeaderText text={strikerHostName} />
+    </PanelHeader>
+    <Grid columns={{ xs: 1, sm: 2 }} container spacing="1em">
+      <Grid item sm={2} xs={1}>
+        <StretchedButton>Update system</StretchedButton>
+      </Grid>
+      <Grid item sm={2} xs={1}>
+        <StretchedButton>Enable &quot;Install target&quot;</StretchedButton>
+      </Grid>
+      <Grid item xs={1}>
+        <StretchedButton>Reboot</StretchedButton>
+      </Grid>
+      <Grid item xs={1}>
+        <StretchedButton>Shutdown</StretchedButton>
+      </Grid>
+    </Grid>
+  </Panel>
+);
+
+export default SimpleOperationsPanel;
diff --git a/striker-ui/components/StrikerConfig/index.tsx b/striker-ui/components/StrikerConfig/index.tsx
new file mode 100644
index 00000000..d2330f25
--- /dev/null
+++ b/striker-ui/components/StrikerConfig/index.tsx
@@ -0,0 +1,4 @@
+import ComplexOperationsPanel from './ComplexOperationsPanel';
+import SimpleOperationsPanel from './SimpleOperationsPanel';
+
+export { ComplexOperationsPanel, SimpleOperationsPanel };
diff --git a/striker-ui/pages/config/index.tsx b/striker-ui/pages/config/index.tsx
new file mode 100644
index 00000000..8844b63c
--- /dev/null
+++ b/striker-ui/pages/config/index.tsx
@@ -0,0 +1,25 @@
+import { Box, Grid } from '@mui/material';
+import { FC } from 'react';
+
+import Header from '../../components/Header';
+
+import {
+  ComplexOperationsPanel,
+  SimpleOperationsPanel,
+} from '../../components/StrikerConfig';
+
+const Config: FC = () => (
+  <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+    <Header />
+    <Grid container columns={{ xs: 1, md: 3, lg: 4 }}>
+      <Grid item xs={1}>
+        <SimpleOperationsPanel strikerHostName="STRIKER NAME" />
+      </Grid>
+      <Grid item md={2} xs={1}>
+        <ComplexOperationsPanel />
+      </Grid>
+    </Grid>
+  </Box>
+);
+
+export default Config;