refactor: add Decorator component

4 years ago · 231c6dfdda
parent 844e201c0b
commit 231c6dfdda
6 changed files with 62 additions and 151 deletions
--- a/striker-ui/components/Anvils/AnvilList.tsx
+++ b/striker-ui/components/Anvils/AnvilList.tsx
@ -1,17 +1,11 @@
 import { useContext, useEffect } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { ClassNameMap } from '@material-ui/styles';
 import { List, Box, Divider, ListItem } from '@material-ui/core';
-import {
-  BLUE,
-  PURPLE_OFF,
-  RED_ON,
-  HOVER,
-  DIVIDER,
-} from '../../lib/consts/DEFAULT_THEME';
+import { HOVER, DIVIDER } from '../../lib/consts/DEFAULT_THEME';
 import Anvil from './Anvil';
 import { AnvilContext } from '../AnvilContext';
 import sortAnvils from './sortAnvils';
+import Decorator, { Colours } from '../Decorator';

 const useStyles = makeStyles((theme) => ({
  root: {
@ -35,34 +29,18 @@ const useStyles = makeStyles((theme) => ({
  anvil: {
    paddingLeft: 0,
  },
-  decorator: {
-    width: '20px',
-    height: '100%',
-    borderRadius: 2,
-  },
-  optimal: {
-    backgroundColor: BLUE,
-  },
-  notReady: {
-    backgroundColor: PURPLE_OFF,
-  },
-  degraded: {
-    backgroundColor: RED_ON,
-  },
 }));

-const selectDecorator = (
-  state: string,
-): keyof ClassNameMap<'optimal' | 'notReady' | 'degraded'> => {
+const selectDecorator = (state: string): Colours => {
  switch (state) {
    case 'optimal':
-      return 'optimal';
+      return 'ok';
    case 'not_ready':
-      return 'notReady';
+      return 'warning';
    case 'degraded':
-      return 'degraded';
+      return 'error';
    default:
-      return 'optimal';
+      return 'off';
  }
 };

@ -88,11 +66,7 @@ const AnvilList = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
            >
              <Box display="flex" flexDirection="row" width="100%">
                <Box p={1}>
-                  <div
-                    className={`${classes.decorator} ${
-                      classes[selectDecorator(anvil.anvil_state)]
-                    }`}
-                  />
+                  <Decorator colour={selectDecorator(anvil.anvil_state)} />
                </Box>
                <Box p={1} flexGrow={1} className={classes.anvil}>
                  <Anvil anvil={anvil} />
--- a/striker-ui/components/Decorator.tsx
+++ b/striker-ui/components/Decorator.tsx
@ -0,0 +1,31 @@
+import { makeStyles } from '@material-ui/core/styles';
+import { BLUE, GREY, PURPLE_OFF, RED_ON } from '../lib/consts/DEFAULT_THEME';
+
+export type Colours = 'ok' | 'off' | 'error' | 'warning';
+
+const useStyles = makeStyles(() => ({
+  decorator: {
+    width: '20px',
+    height: '100%',
+    borderRadius: 2,
+  },
+  ok: {
+    backgroundColor: BLUE,
+  },
+  warning: {
+    backgroundColor: PURPLE_OFF,
+  },
+  error: {
+    backgroundColor: RED_ON,
+  },
+  off: {
+    backgroundColor: GREY,
+  },
+}));
+
+const Decorator = ({ colour }: { colour: Colours }): JSX.Element => {
+  const classes = useStyles();
+  return <div className={`${classes.decorator} ${classes[colour]}`} />;
+};
+
+export default Decorator;
--- a/striker-ui/components/Network/Network.tsx
+++ b/striker-ui/components/Network/Network.tsx
@ -1,13 +1,13 @@
 import { useContext } from 'react';
 import { Box, Divider } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import { ClassNameMap } from '@material-ui/styles';
 import { Panel } from '../Panels';
 import { HeaderText, BodyText } from '../Text';
 import PeriodicFetch from '../../lib/fetchers/periodicFetch';
-import { BLUE, PURPLE_OFF, DIVIDER } from '../../lib/consts/DEFAULT_THEME';
+import { DIVIDER } from '../../lib/consts/DEFAULT_THEME';
 import processNetworkData from './processNetwork';
 import { AnvilContext } from '../AnvilContext';
+import Decorator, { Colours } from '../Decorator';

 const useStyles = makeStyles((theme) => ({
  container: {
@ -29,29 +29,16 @@ const useStyles = makeStyles((theme) => ({
  divider: {
    background: DIVIDER,
  },
-  decorator: {
-    width: '20px',
-    height: '100%',
-    borderRadius: 2,
-  },
-  optimal: {
-    backgroundColor: BLUE,
-  },
-  degraded: {
-    backgroundColor: PURPLE_OFF,
-  },
 }));

-const selectDecorator = (
-  state: string,
-): keyof ClassNameMap<'optimal' | 'degraded'> => {
+const selectDecorator = (state: string): Colours => {
  switch (state) {
    case 'optimal':
-      return 'optimal';
+      return 'ok';
    case 'degraded':
-      return 'degraded';
+      return 'warning';
    default:
-      return 'degraded';
+      return 'warning';
  }
 };

@ -80,11 +67,7 @@ const Network = (): JSX.Element => {
                  className={classes.root}
                >
                  <Box p={1} className={classes.noPaddingLeft}>
-                    <div
-                      className={`${classes.decorator} ${
-                        classes[selectDecorator(bond.bond_state)]
-                      }`}
-                    />
+                    <Decorator colour={selectDecorator(bond.bond_state)} />
                  </Box>
                  <Box p={1} flexGrow={1} className={classes.noPaddingLeft}>
                    <BodyText text={bond.bond_name} />
--- a/striker-ui/components/Nodes/AnvilNode.tsx
+++ b/striker-ui/components/Nodes/AnvilNode.tsx
@ -1,12 +1,10 @@
 import { Box, Switch } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import { ClassNameMap } from '@material-ui/styles';
-
 import { InnerPanel, PanelHeader } from '../Panels';
 import { ProgressBar } from '../Bars';
 import { BodyText } from '../Text';
-import { BLUE, RED_ON, TEXT, PURPLE_OFF } from '../../lib/consts/DEFAULT_THEME';
 import nodeState from '../../lib/consts/NODES';
+import Decorator, { Colours } from '../Decorator';

 const useStyles = makeStyles((theme) => ({
  root: {
@ -34,41 +32,22 @@ const useStyles = makeStyles((theme) => ({
  label: {
    paddingTop: '5px',
  },
-  decorator: {
-    width: '20px',
-    height: '100%',
-    borderRadius: 2,
-  },
  decoratorBox: {
    paddingRight: '5px',
  },
-  ready: {
-    backgroundColor: BLUE,
-  },
-  onAccessible: {
-    backgroundColor: PURPLE_OFF,
-  },
-  off: {
-    backgroundColor: TEXT,
-  },
-  unknown: {
-    backgroundColor: RED_ON,
-  },
 }));

-const selectDecorator = (
-  state: string,
-): keyof ClassNameMap<'unknown' | 'off' | 'onAccessible' | 'ready'> => {
+const selectDecorator = (state: string): Colours => {
  switch (state) {
    case 'ready':
-      return 'ready';
+      return 'ok';
    case 'off':
      return 'off';
    case 'accessible':
    case 'on':
-      return 'onAccessible';
+      return 'warning';
    default:
-      return 'unknown';
+      return 'error';
  }
 };

@ -91,11 +70,7 @@ const AnvilNode = ({
                      <BodyText text={node.node_name} />
                    </Box>
                    <Box className={classes.decoratorBox}>
-                      <div
-                        className={`${classes.decorator} ${
-                          classes[selectDecorator(node.state)]
-                        }`}
-                      />
+                      <Decorator colour={selectDecorator(node.state)} />
                    </Box>
                    <Box>
                      <BodyText
--- a/striker-ui/components/Servers.tsx
+++ b/striker-ui/components/Servers.tsx
@ -1,20 +1,13 @@
 import { useContext } from 'react';
 import { List, ListItem, Divider, Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import { ClassNameMap } from '@material-ui/styles';
 import { Panel } from './Panels';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 import { HeaderText, BodyText } from './Text';
-import {
-  BLUE,
-  GREY,
-  HOVER,
-  DIVIDER,
-  PURPLE_OFF,
-  RED_ON,
-} from '../lib/consts/DEFAULT_THEME';
+import { HOVER, DIVIDER } from '../lib/consts/DEFAULT_THEME';
 import { AnvilContext } from './AnvilContext';
 import serverState from '../lib/consts/SERVERS';
+import Decorator, { Colours } from './Decorator';

 const useStyles = makeStyles((theme) => ({
  root: {
@ -37,35 +30,16 @@ const useStyles = makeStyles((theme) => ({
  noPaddingLeft: {
    paddingLeft: 0,
  },
-  decorator: {
-    width: '20px',
-    height: '100%',
-    borderRadius: 2,
-  },
-  running: {
-    backgroundColor: BLUE,
-  },
-  shut_off: {
-    backgroundColor: GREY,
-  },
-  crashed: {
-    backgroundColor: RED_ON,
-  },
-  warning: {
-    backgroundColor: PURPLE_OFF,
-  },
 }));

-const selectDecorator = (
-  state: string,
-): keyof ClassNameMap<'running' | 'shut_off' | 'crashed' | 'warning'> => {
+const selectDecorator = (state: string): Colours => {
  switch (state) {
    case 'running':
-      return 'running';
+      return 'ok';
    case 'shut_off':
-      return 'shut_off';
+      return 'off';
    case 'crashed':
-      return 'crashed';
+      return 'error';
    default:
      return 'warning';
  }
@ -95,10 +69,8 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
                  >
                    <Box display="flex" flexDirection="row" width="100%">
                      <Box p={1} className={classes.noPaddingLeft}>
-                        <div
-                          className={`${classes.decorator} ${
-                            classes[selectDecorator(server.server_state)]
-                          }`}
+                        <Decorator
+                          colour={selectDecorator(server.server_state)}
                        />
                      </Box>
                      <Box p={1} flexGrow={1} className={classes.noPaddingLeft}>
--- a/striker-ui/components/SharedStorage/SharedStorageNode.tsx
+++ b/striker-ui/components/SharedStorage/SharedStorageNode.tsx
@ -1,18 +1,9 @@
 import { Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import { ClassNameMap } from '@material-ui/styles';
-
 import * as prettyBytes from 'pretty-bytes';
-
 import { AllocationBar } from '../Bars';
 import { BodyText } from '../Text';
-import { BLUE, RED_ON } from '../../lib/consts/DEFAULT_THEME';
-
-const selectDecorator = (
-  state: boolean,
-): keyof ClassNameMap<'mounted' | 'notMounted'> => {
-  return state ? 'mounted' : 'notMounted';
-};
+import Decorator from '../Decorator';

 const useStyles = makeStyles(() => ({
  fs: {
@ -24,20 +15,9 @@ const useStyles = makeStyles(() => ({
    paddingLeft: '10px',
    paddingRight: '10px',
  },
-  decorator: {
-    width: '20px',
-    height: '100%',
-    borderRadius: 2,
-  },
  decoratorBox: {
    paddingRight: '5px',
  },
-  mounted: {
-    backgroundColor: BLUE,
-  },
-  notMounted: {
-    backgroundColor: RED_ON,
-  },
 }));

 const SharedStorageNode = ({
@ -53,11 +33,7 @@ const SharedStorageNode = ({
          <BodyText text={node.nodeInfo?.node_name || 'Not Available'} />
        </Box>
        <Box className={classes.decoratorBox}>
-          <div
-            className={`${classes.decorator} ${
-              classes[selectDecorator(node.is_mounted)]
-            }`}
-          />
+          <Decorator colour={node.is_mounted ? 'ok' : 'error'} />
        </Box>
        <Box>
          <BodyText text={node.is_mounted ? 'Mounted' : 'Not Mounted'} />