CEC-244 Remote car commands, search, sortable tables (#42)

* Add sortable table header

* Send bulk commands page
Update table page sizes
All tables are sortable

* Update site layout
Add search to update packages

* Reenable Datadog

* remove dev stuff

src/components/UpdatePackages/List/index.jsx

@@ -6,13 +6,11 @@ import {
   TableCell,
   TableContainer,
   TableFooter,
-  TableHead,
   TablePagination,
   TableRow,
+  Toolbar,
   Tooltip,
-  Typography,
 } from "@material-ui/core";
-import EditIcon from "@material-ui/icons/Edit";
 import SendIcon from "@material-ui/icons/Send";
 import VisibilityIcon from "@material-ui/icons/Visibility";
 import useStyles from "../../useStyles";
@@ -21,13 +19,42 @@ import {
   useUpdatesContext,
 } from "../../Contexts/UpdatesContext";
 import { useUserContext } from "../../Contexts/UserContext";
-import { tsLocalDateTimeString } from "../../../utils/dates";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { LocalDateTimeString } from "../../../utils/dates";
 import { Roles, hasRole } from "../../../utils/roles";
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import SearchField from "../../Controls/SearchField";
+
+const tableColumns = [
+  {
+    id: "id",
+    label: "ID",
+  },
+  {
+    id: "package_name",
+    label: "Name",
+  },
+  {
+    id: "version",
+    label: "Version",
+  },
+  {
+    id: "created_at",
+    label: "Created",
+  },
+  {
+    id: "",
+    label: "Actions",
+  },
+];
 
 const UpdatePackagesList = () => {
   const classes = useStyles();
   const [pageSize, setPageSize] = useState(25);
   const [pageIndex, setPageIndex] = useState(0);
+  const [orderBy, setOrderBy] = useState("id");
+  const [order, setOrder] = useState("desc");
+  const [search, setSearch] = useState("");
   const { getPackages, packages, totalPackages } = useUpdatesContext();
   const {
     token: {
@@ -35,11 +62,25 @@ const UpdatePackagesList = () => {
     },
     groups,
   } = useUserContext();
+  const { setTitle } = useStatusContext();
 
   useEffect(() => {
-    getPackages({ limit: pageSize, offset: pageSize * pageIndex }, token);
+    setTitle("Deploy Packages");
     // eslint-disable-next-line
-  }, [pageIndex, pageSize, token]);
+  }, []);
+
+  useEffect(() => {
+    getPackages(
+      {
+        limit: pageSize,
+        offset: pageSize * pageIndex,
+        order: `${orderBy} ${order}`,
+        search,
+      },
+      token
+    );
+    // eslint-disable-next-line
+  }, [pageIndex, pageSize, token, orderBy, order, search]);
 
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
@@ -50,6 +91,23 @@ const UpdatePackagesList = () => {
     setPageIndex(0);
   };
 
+  const handleSort = (event, property) => {
+    if (property === orderBy) {
+      if (order === "asc") {
+        setOrder("desc");
+      } else {
+        setOrder("asc");
+      }
+    } else {
+      setOrderBy(property);
+      setOrder("asc");
+    }
+  };
+
+  const handleSearch = (search) => {
+    setSearch(search);
+  };
+
   const Actions = (row) => {
     let actions = [];
     if (hasRole([Roles.CREATE, Roles.READ], groups)) {
@@ -65,13 +123,6 @@ const UpdatePackagesList = () => {
     }
     if (hasRole([Roles.CREATE], groups)) {
       actions = actions.concat([
-        {
-          tip: `Edit "${row.package_name} ${row.version}"`,
-          link: `/update/${row.id}`,
-          icon: (
-            <EditIcon aria-label={`Edit ${row.package_name} ${row.version}`} />
-          ),
-        },
         {
           tip: `Deploy "${row.package_name} ${row.version}"`,
           link: `/carupdate-deploy/${row.id}`,
@@ -97,20 +148,18 @@ const UpdatePackagesList = () => {
 
   return (
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
-      <Typography component="h1" variant="h5">
-        Update Packages
-      </Typography>
+      <Toolbar className={classes.tableToolbar}>
+        <SearchField classes={classes} onSearch={handleSearch} />
+      </Toolbar>
       <TableContainer>
         <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell align="center">ID</TableCell>
-              <TableCell align="center">Name</TableCell>
-              <TableCell align="center">Version</TableCell>
-              <TableCell align="center">Created</TableCell>
-              <TableCell align="right">Actions</TableCell>
-            </TableRow>
-          </TableHead>
+          <TableHeaderSortable
+            classes={classes}
+            orderBy={orderBy}
+            order={order}
+            columnData={tableColumns}
+            onSortRequest={handleSort}
+          />
           <TableBody>
             {packages.map((row) => (
               <TableRow key={row.id}>
@@ -118,16 +167,16 @@ const UpdatePackagesList = () => {
                 <TableCell align="center">{row.package_name}</TableCell>
                 <TableCell align="center">{row.version}</TableCell>
                 <TableCell align="center">
-                  {tsLocalDateTimeString(row.timestamp)}
+                  {LocalDateTimeString(row.created)}
                 </TableCell>
-                <TableCell align="right">{Actions(row)}</TableCell>
+                <TableCell align="center">{Actions(row)}</TableCell>
               </TableRow>
             ))}
           </TableBody>
           <TableFooter>
             <TableRow>
               <TablePagination
-                rowsPerPageOptions={[5, 10, 25]}
+                rowsPerPageOptions={[5, 10, 25, 100]}
                 colSpan={5}
                 count={totalPackages}
                 rowsPerPage={pageSize}