feat(labels): added labels to output, cleaned up ui

.github/workflows/build.yml

@@ -0,0 +1,22 @@
+name: build our image
+
+on:
+  push:
+    branches: master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout code
+        uses: actions/checkout@v2
+      - name: install buildx
+        id: buildx
+        uses: crazy-max/ghaction-docker-buildx@v1
+        with:
+          version: latest
+      - name: build the image
+    run: |
+      docker buildx build \
+        --tag pixeldrew/hero-masq:latest \
+        --platform linux/amd64,linux/arm/v7,linux/arm64 .

.nvmrc

@@ -0,0 +1 @@
+14

components/DHCPRangeForm.js

@@ -5,8 +5,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import CardActions from "@material-ui/core/CardActions";
-import Button from "@material-ui/core/Button";
+
 import MenuItem from "@material-ui/core/MenuItem";
 
 import gql from "graphql-tag";
@@ -17,6 +16,8 @@ import useForm from "../hooks/useForm";
 
 import IPMaskedInput from "./IPMaskedInput";
 import { IP_REGEX, LEASE_EXPIRATIONS } from "../lib/constants";
+import SaveIcon from "@material-ui/icons/Save";
+import IconButton from "@material-ui/core/IconButton";
 
 const useStyles = makeStyles((theme) => ({
   card: {
@@ -92,77 +93,71 @@ export function DHCPRangeForm({ submitForm }) {
   if (error) return <p>error</p>;
 
   return (
-    <Card className={classes.card}>
-      <form
-        className={classes.container}
-        noValidate
-        autoComplete="off"
-        onSubmit={handleSubmit}
+    <form
+      className={classes.container}
+      noValidate
+      autoComplete="off"
+      onSubmit={handleSubmit}
+    >
+      <TextField
+        id="lease-expiry"
+        select
+        label="Lease Expiry"
+        className={classes.textField}
+        value={values.leaseExpiry}
+        onChange={handleChange("leaseExpiry")}
+        variant="outlined"
+        SelectProps={{
+          MenuProps: {
+            className: classes.menu,
+          },
+        }}
+        margin="normal"
+      >
+        {LEASE_EXPIRATIONS.map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            {option.label}
+          </MenuItem>
+        ))}
+      </TextField>
+      <TextField
+        id="startIp"
+        label="Start Ip"
+        error={hasError("startIp")}
+        className={classes.textField}
+        value={values.startIp}
+        onChange={handleChange}
+        margin="normal"
+        variant="outlined"
+        InputProps={{
+          inputComponent: IPMaskedInput,
+        }}
+      />
+
+      <TextField
+        id="endIp"
+        label="End Ip"
+        error={hasError("endIp")}
+        className={classes.textField}
+        value={values.endIp}
+        onChange={handleChange}
+        margin="normal"
+        variant="outlined"
+        InputProps={{
+          inputComponent: IPMaskedInput,
+        }}
+      />
+
+      <IconButton
+        type="submit"
+        variant="outlined"
+        aria-label="save"
+        size="small"
+        className={classes.button}
       >
-        <CardContent>
-          <TextField
-            id="startIp"
-            label="Start Ip"
-            error={hasError("startIp")}
-            className={classes.textField}
-            value={values.startIp}
-            onChange={handleChange}
-            margin="normal"
-            variant="outlined"
-            InputProps={{
-              inputComponent: IPMaskedInput,
-            }}
-          />
-
-          <TextField
-            id="endIp"
-            label="End Ip"
-            error={hasError("endIp")}
-            className={classes.textField}
-            value={values.endIp}
-            onChange={handleChange}
-            margin="normal"
-            variant="outlined"
-            InputProps={{
-              inputComponent: IPMaskedInput,
-            }}
-          />
-
-          <TextField
-            id="lease-expiry"
-            select
-            label="Lease Expiry"
-            className={classes.textField}
-            value={values.leaseExpiry}
-            onChange={handleChange("leaseExpiry")}
-            variant="outlined"
-            SelectProps={{
-              MenuProps: {
-                className: classes.menu,
-              },
-            }}
-            margin="normal"
-          >
-            {LEASE_EXPIRATIONS.map((option) => (
-              <MenuItem key={option.value} value={option.value}>
-                {option.label}
-              </MenuItem>
-            ))}
-          </TextField>
-        </CardContent>
-        <CardActions>
-          <Button
-            color="primary"
-            className={classes.button}
-            type="submit"
-            variant="outlined"
-            disabled={disable}
-          >
-            Save
-          </Button>
-        </CardActions>
-      </form>
-    </Card>
+        <SaveIcon />
+      </IconButton>
+    </form>
   );
 }
 

components/DeleteDialog.js

@@ -7,6 +7,8 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
+import DeleteIcon from "@material-ui/icons/Delete";
+import IconButton from "@material-ui/core/IconButton";
 
 import useModal from "../hooks/useModal";
 
@@ -15,9 +17,9 @@ export function DeleteDialog({ okHandler }) {
 
   return (
     <>
-      <Button variant="outlined" color="secondary" onClick={onClickOpen}>
-        Delete
-      </Button>
+      <IconButton variant="outlined" size="small" onClick={onClickOpen}>
+        <DeleteIcon />
+      </IconButton>
       <Dialog
         open={modalOpen}
         onClose={onClickClose}

components/DomainNameForm.js

@@ -3,16 +3,16 @@ import PropTypes from "prop-types";
 
 import { makeStyles } from "@material-ui/core/styles";
 import TextField from "@material-ui/core/TextField";
-import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
-import CardActions from "@material-ui/core/CardActions";
 import CardContent from "@material-ui/core/CardContent";
 
 import { object, string } from "yup";
 import gql from "graphql-tag";
 import { useQuery, useMutation } from "@apollo/react-hooks";
 
 import useForm from "../hooks/useForm";
+import SaveIcon from "@material-ui/icons/Save";
+import IconButton from "@material-ui/core/IconButton";
 
 const useStyles = makeStyles((theme) => ({
   button: {
@@ -71,38 +71,36 @@ export function DomainNameForm({ submitForm }) {
   if (error) return <p>Error</p>;
 
   return (
-    <Card>
-      <form
-        className={classes.container}
-        noValidate
-        autoComplete="off"
-        onSubmit={handleSubmit}
-      >
-        <CardContent>
-          <TextField
-            id="name"
-            label="Domain Name"
-            className={classes.textField}
-            value={values.name}
-            onChange={handleChange}
-            error={hasError("name")}
-            margin="normal"
-            variant="outlined"
-          />
-        </CardContent>
-        <CardActions>
-          <Button
-            color="primary"
-            variant="outlined"
-            className={classes.button}
-            type="submit"
-            disabled={disable}
-          >
-            Save
-          </Button>
-        </CardActions>
-      </form>
-    </Card>
+    <form
+      className={classes.container}
+      noValidate
+      autoComplete="off"
+      onSubmit={handleSubmit}
+    >
+      <TextField
+        id="name"
+        label="Domain Name"
+        className={classes.textField}
+        value={values.name}
+        onChange={handleChange}
+        error={hasError("name")}
+        margin="normal"
+        variant="outlined"
+        InputProps={{
+          endAdornment: (
+            <IconButton
+              type="submit"
+              variant="outlined"
+              aria-label="save"
+              className={classes.button}
+              size="small"
+            >
+              <SaveIcon />
+            </IconButton>
+          ),
+        }}
+      />
+    </form>
   );
 }
 

components/LeaseList.js

@@ -1,14 +1,10 @@
-import React from "react";
+import React, { useLayoutEffect, useRef } from "react";
 import PropTypes from "prop-types";
 
 import { formatDistance } from "date-fns";
 
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
+import { DataGrid } from "@material-ui/data-grid";
 
 const useStyles = makeStyles((theme) => ({
   table: {
@@ -17,33 +13,46 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export function LeaseList({ leases }) {
-  const classes = useStyles();
+  const columns = [
+    { field: "ip", headerName: "IP", width: 120 },
+    { field: "host", headerName: "Host Name", flex: 1 },
+    { field: "mac", headerName: "Mac Address", flex: 0.7 },
+    { field: "client", headerName: "Client Label", flex: 0.3 },
+    { field: "timestamp", headerName: "Time Stamp", flex: 0.5 },
+  ];
+
+  const rows = leases.map(({ ip, host, mac, client, timestamp }, i) => ({
+    id: i,
+    ip,
+    host,
+    mac,
+    client,
+    timestamp:
+      timestamp === "0"
+        ? "Infinite"
+        : formatDistance(new Date(timestamp * 1000), Date.now()),
+  }));
+
+  const gridWrapperRef = useRef(null);
+  useLayoutEffect(() => {
+    const gridDiv = gridWrapperRef.current;
+    if (gridDiv) {
+      const gridEl = gridDiv.querySelector("div");
+      gridEl.style.height = "";
+    }
+  });
 
   return (
-    <Table className={classes.table}>
-      <TableHead>
-        <TableRow>
-          <TableCell>IP Address</TableCell>
-          <TableCell>Host Name</TableCell>
-          <TableCell>MAC Address</TableCell>
-          <TableCell>Client ID</TableCell>
-          <TableCell>Expires</TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {leases.map((lease, i) => (
-          <TableRow key={`ip-${i}`}>
-            <TableCell>{lease.ip}</TableCell>
-            <TableCell>{lease.host}</TableCell>
-            <TableCell>{lease.mac}</TableCell>
-            <TableCell>{lease.client}</TableCell>
-            <TableCell>
-              {formatDistance(new Date(lease.timestamp * 1000), Date.now())}
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
+    <div ref={gridWrapperRef}>
+      <DataGrid
+        autoHeight={true}
+        rows={rows}
+        columns={columns}
+        density="compact"
+        pageSize={20}
+        disableSelectionOnClick={true}
+      />
+    </div>
   );
 }