Merge pull request #13 from Seneca-CDOT/server-controls

Add server controls in the server component

striker-ui/components/Servers.tsx

@@ -1,16 +1,40 @@
-import { useContext } from 'react';
+import { useState, useContext } from 'react';
-import { List, ListItem, Divider, Box } from '@material-ui/core';
+import {
+  List,
+  ListItem,
+  Divider,
+  Box,
+  IconButton,
+  Button,
+  Checkbox,
+  Menu,
+  MenuItem,
+  Typography,
+} from '@material-ui/core';
+import EditIcon from '@material-ui/icons/Edit';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import CheckIcon from '@material-ui/icons/Check';
 import { makeStyles } from '@material-ui/core/styles';
 import { Panel } from './Panels';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 import { HeaderText, BodyText } from './Text';
-import { HOVER, DIVIDER } from '../lib/consts/DEFAULT_THEME';
+import {
+  HOVER,
+  DIVIDER,
+  TEXT,
+  BLUE,
+  RED,
+  GREY,
+  BLACK,
+} from '../lib/consts/DEFAULT_THEME';
 import { AnvilContext } from './AnvilContext';
 import serverState from '../lib/consts/SERVERS';
 import Decorator, { Colours } from './Decorator';
 import Spinner from './Spinner';
 import hostsSanitizer from '../lib/sanitizers/hostsSanitizer';
 
+import putJSON from '../lib/fetchers/putJSON';
+
 const useStyles = makeStyles((theme) => ({
   root: {
     width: '100%',
@@ -43,6 +67,43 @@ const useStyles = makeStyles((theme) => ({
   hostBox: {
     paddingTop: 0,
   },
+  checkbox: {
+    paddingTop: '.8em',
+  },
+  menuItem: {
+    backgroundColor: TEXT,
+    paddingRight: '3em',
+    '&:hover': {
+      backgroundColor: TEXT,
+    },
+  },
+  editButton: {
+    borderRadius: 8,
+    backgroundColor: GREY,
+    '&:hover': {
+      backgroundColor: TEXT,
+    },
+  },
+  editButtonBox: {
+    paddingTop: '.3em',
+  },
+  dropdown: {
+    paddingTop: '.8em',
+    paddingBottom: '.8em',
+  },
+  power: {
+    color: BLACK,
+  },
+  on: {
+    color: BLUE,
+  },
+  off: {
+    color: RED,
+  },
+  all: {
+    paddingTop: '.5em',
+    paddingLeft: '.3em',
+  },
 }));
 
 const selectDecorator = (state: string): Colours => {
@@ -58,7 +119,15 @@ const selectDecorator = (state: string): Colours => {
   }
 };
 
+type ButtonLabels = 'on' | 'off';
+
+const buttonLabels: ButtonLabels[] = ['on', 'off'];
+
 const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [showCheckbox, setShowCheckbox] = useState<boolean>(false);
+  const [allSelected, setAllSelected] = useState<boolean>(false);
+  const [selected, setSelected] = useState<string[]>([]);
   const { uuid } = useContext(AnvilContext);
   const classes = useStyles();
 
@@ -66,15 +135,113 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
     `${process.env.NEXT_PUBLIC_API_URL}/get_servers?anvil_uuid=${uuid}`,
   );
 
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handlePower = (label: ButtonLabels) => {
+    setAnchorEl(null);
+    if (selected.length) {
+      putJSON('/set_power', {
+        server_uuid_list: selected,
+        is_on: label === 'on',
+      });
+    }
+  };
+
+  const handleChange = (server_uuid: string): void => {
+    const index = selected.indexOf(server_uuid);
+
+    if (index === -1) selected.push(server_uuid);
+    else selected.splice(index, 1);
+
+    setSelected([...selected]);
+  };
+
   const anvilIndex = anvil.findIndex((a) => a.anvil_uuid === uuid);
 
   const filteredHosts = hostsSanitizer(anvil[anvilIndex]?.hosts);
 
   return (
     <Panel>
-      <div className={classes.headerPadding}>
+      <Box className={classes.headerPadding} display="flex">
-        <HeaderText text="Servers" />
+        <Box flexGrow={1}>
-      </div>
+          <HeaderText text="Servers" />
+        </Box>
+        <Box className={classes.editButtonBox}>
+          <IconButton
+            className={classes.editButton}
+            style={{ color: BLACK }}
+            onClick={() => setShowCheckbox(!showCheckbox)}
+          >
+            {showCheckbox ? <CheckIcon /> : <EditIcon />}
+          </IconButton>
+        </Box>
+      </Box>
+      {showCheckbox && (
+        <>
+          <Box className={classes.headerPadding} display="flex">
+            <Box flexGrow={1} className={classes.dropdown}>
+              <Button
+                variant="contained"
+                startIcon={<MoreVertIcon />}
+                onClick={handleClick}
+                style={{ textTransform: 'none' }}
+              >
+                <Typography className={classes.power} variant="subtitle1">
+                  Power
+                </Typography>
+              </Button>
+              <Menu
+                anchorEl={anchorEl}
+                keepMounted
+                open={Boolean(anchorEl)}
+                onClose={() => setAnchorEl(null)}
+              >
+                {buttonLabels.map((label: ButtonLabels) => {
+                  return (
+                    <MenuItem
+                      onClick={() => handlePower(label)}
+                      className={classes.menuItem}
+                      key={label}
+                    >
+                      <Typography
+                        className={classes[label]}
+                        variant="subtitle1"
+                      >
+                        {label.replace(/^[a-z]/, (c) => c.toUpperCase())}
+                      </Typography>
+                    </MenuItem>
+                  );
+                })}
+              </Menu>
+            </Box>
+          </Box>
+          <Box display="flex">
+            <Box>
+              <Checkbox
+                style={{ color: TEXT }}
+                color="secondary"
+                checked={allSelected}
+                onChange={() => {
+                  if (!allSelected)
+                    setSelected(
+                      data.servers.map(
+                        (server: AnvilServer) => server.server_uuid,
+                      ),
+                    );
+                  else setSelected([]);
+
+                  setAllSelected(!allSelected);
+                }}
+              />
+            </Box>
+            <Box className={classes.all}>
+              <BodyText text="All" />
+            </Box>
+          </Box>
+        </>
+      )}
       {!isLoading ? (
         <Box className={classes.root}>
           <List component="nav">
@@ -88,6 +255,20 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
                       key={server.server_uuid}
                     >
                       <Box display="flex" flexDirection="row" width="100%">
+                        {showCheckbox && (
+                          <Box className={classes.checkbox}>
+                            <Checkbox
+                              style={{ color: TEXT }}
+                              color="secondary"
+                              checked={
+                                selected.find(
+                                  (s) => s === server.server_uuid,
+                                ) !== undefined
+                              }
+                              onChange={() => handleChange(server.server_uuid)}
+                            />
+                          </Box>
+                        )}
                         <Box p={1}>
                           <Decorator
                             colour={selectDecorator(server.server_state)}

striker-ui/lib/consts/DEFAULT_THEME.ts

@@ -12,5 +12,6 @@ export const UNSELECTED = '#666';
 export const DIVIDER = '#888';
 export const SELECTED_ANVIL = '#00ff00';
 export const DISABLED = '#AAA';
+export const BLACK = '#343434';
 
 export const BORDER_RADIUS = '3px';

striker-ui/package-lock.json

@@ -447,6 +447,14 @@
         "react-transition-group": "^4.4.0"
       }
     },
+    "@material-ui/icons": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
+      "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.11.4",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
@@ -2347,7 +2355,8 @@
         },
         "hosted-git-info": {
           "version": "2.8.8",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
+          "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
           "dev": true
         },
         "locate-path": {
@@ -4748,22 +4757,22 @@
       }
     },
     "react": {
-      "version": "17.0.1",
+      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
       }
     },
     "react-dom": {
-      "version": "17.0.1",
+      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "scheduler": "^0.20.1"
+        "scheduler": "^0.20.2"
       }
     },
     "react-is": {
@@ -4999,9 +5008,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "scheduler": {
-      "version": "0.20.1",
+      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -5393,9 +5402,9 @@
       }
     },
     "swr": {
-      "version": "0.4.2",
+      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/swr/-/swr-0.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-0.5.6.tgz",
-      "integrity": "sha512-SKGxcAfyijj/lE5ja5zVMDqJNudASH3WZPRUakDVOePTM18FnsXgugndjl9BSRwj+jokFCulMDe7F2pQL+VhEw==",
+      "integrity": "sha512-Bmx3L4geMZjYT5S2Z6EE6/5Cx6v1Ka0LhqZKq8d6WL2eu9y6gHWz3dUzfIK/ymZVHVfwT/EweFXiYGgfifei3w==",
       "requires": {
         "dequal": "2.0.2"
       }

striker-ui/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
     "@material-ui/styles": "^4.11.4",
     "next": "^10.2.3",
     "pretty-bytes": "^5.6.0",