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/CarUpdates/Status/index.jsx

@@ -10,7 +10,6 @@ import {
   TableHead,
   TablePagination,
   TableRow,
-  Typography,
 } from "@material-ui/core";
 
 import {
@@ -38,7 +37,7 @@ const MainForm = () => {
     startMonitor,
     stopMonitor,
   } = useUpdatesContext();
-  const { setMessage } = useStatusContext();
+  const { setMessage, setTitle } = useStatusContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -54,6 +53,13 @@ const MainForm = () => {
     // eslint-disable-next-line
   }, [token]);
 
+  useEffect(() => {
+    if (!packages || packages.length === 0) return;
+    setTitle(`Package ${packages[0].package_name} ${packages[0].version}`);
+
+    // eslint-disable-next-line
+  }, [packages]);
+
   useEffect(() => {
     try {
       stopMonitor();
@@ -104,11 +110,6 @@ const MainForm = () => {
 
   return (
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
-      <Typography component="h1" variant="h5">
-        {packages &&
-          packages.length > 0 &&
-          `${packages[0].package_name} ${packages[0].version}`}
-      </Typography>
       <TableContainer>
         <Table>
           <TableHead>
@@ -150,7 +151,7 @@ const MainForm = () => {
           <TableFooter>
             <TableRow>
               <TablePagination
-                rowsPerPageOptions={[5, 10, 25]}
+                rowsPerPageOptions={[5, 10, 25, 100]}
                 colSpan={5}
                 count={totalCarUpdates}
                 rowsPerPage={pageSize}