dce-reactkit 3.2.2-beta.8 → 3.2.3

package/src/components/LogReviewer.tsx

@@ -21,7 +21,8 @@ import {
 // Import shared helpers
 import visitServerEndpoint from '../helpers/visitServerEndpoint';
 import getTimeInfoInET from '../helpers/getTimeInfoInET';
-import { showFatalError } from './AppWrapper';
+import { alert, showFatalError } from './AppWrapper';
+import getHumanReadableDate from '../helpers/getHumanReadableDate';
 
 // Import shared constants
 import LOG_REVIEW_ROUTE_PATH_PREFIX from '../constants/LOG_REVIEW_ROUTE_PATH_PREFIX';
@@ -34,6 +35,9 @@ import LogType from '../types/LogType';
 import LogAction from '../types/LogAction';
 import ParamType from '../types/ParamType';
 import IntelliTableColumn from '../types/IntelliTableColumn';
+import LogBuiltInMetadata from '../types/LogBuiltInMetadata';
+import LogMetadataContextMap from '../types/LogMetadataContextMap';
+import LogMetadataTargetMap from '../types/LogMetadataTargetMap';
 
 // Import shared components
 import SimpleDateChooser from './SimpleDateChooser';
@@ -121,7 +125,7 @@ type ContextFilterState = {
 
 // Tag filter state
 type TagFilterState = {
-  [k: string]: boolean
+  [k: string]: boolean // tag => true if in the list of tags to show
 };
 
 // Action filter state (only relevant for action logs)
@@ -243,14 +247,214 @@ const style = `
     background-color: transparent !important;
     padding-top: 0 !important;
     padding-bottom: 0 !important;
+    padding-right: 1em !important;
     margin: 0 !important;
-    color: #333 !important;
+    color: #444 !important;
+
+    right: 0 !important;
+    position: absolute !important;
   }
   .LogReviewer-header-close-button:hover {
+    border: 0 !important;
+    background-color: transparent !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    margin: 0 !important;
     color: #000 !important;
   }
 `;
 
+/*------------------------------------------------------------------------*/
+/*                                Constants                               */
+/*------------------------------------------------------------------------*/
+
+const columns: IntelliTableColumn[] = [
+  {
+    title: 'First Name',
+    param: 'userFirstName',
+    type: ParamType.String,
+  },
+  {
+    title: 'Last Name',
+    param: 'userLastName',
+    type: ParamType.String,
+  },
+  {
+    title: 'Email',
+    param: 'userEmail',
+    type: ParamType.String,
+  },
+  {
+    title: 'Canvas Id',
+    param: 'userId',
+    type: ParamType.Int,
+  },
+  {
+    title: 'Student?',
+    param: 'isLearner',
+    type: ParamType.Boolean,
+  },
+  {
+    title: 'Teaching Staff?',
+    param: 'isTTM',
+    type: ParamType.Boolean,
+    startsHidden: true,
+  },
+  {
+    title: 'Admin?',
+    param: 'isAdmin',
+    type: ParamType.Boolean,
+    startsHidden: true,
+  },
+  {
+    title: 'Course Canvas Id',
+    param: 'courseId',
+    type: ParamType.Int,
+    startsHidden: true,
+  },
+  {
+    title: 'Course Name',
+    param: 'courseName',
+    type: ParamType.String,
+  },
+  {
+    title: 'Browser Name',
+    param: 'browser.name',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Browser Version',
+    param: 'browser.version',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'OS',
+    param: 'device.os',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Mobile?',
+    param: 'device.isMobile',
+    type: ParamType.Boolean,
+    startsHidden: true,
+  },
+  {
+    title: 'Year',
+    param: 'year',
+    type: ParamType.Int,
+  },
+  {
+    title: 'Month',
+    param: 'month',
+    type: ParamType.Int,
+  },
+  {
+    title: 'Day',
+    param: 'day',
+    type: ParamType.Int,
+  },
+  {
+    title: 'Hour',
+    param: 'hour',
+    type: ParamType.Int,
+  },
+  {
+    title: 'Minute',
+    param: 'minute',
+    type: ParamType.Int,
+    startsHidden: true,
+  },
+  {
+    title: 'Timestamp',
+    param: 'timestamp',
+    type: ParamType.Int,
+    startsHidden: true,
+  },
+  {
+    title: 'Context',
+    param: 'context',
+    type: ParamType.String,
+  },
+  {
+    title: 'Subcontext',
+    param: 'subcontext',
+    type: ParamType.String,
+  },
+  {
+    title: 'Tags',
+    param: 'tags',
+    type: ParamType.JSON,
+    startsHidden: true,
+  },
+  {
+    title: 'Log Level',
+    param: 'level',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Metadata',
+    param: 'metadata',
+    type: ParamType.JSON,
+    startsHidden: true,
+  },
+  {
+    title: 'Source',
+    param: 'source',
+    type: ParamType.String,
+  },
+  {
+    title: 'Server Route Path',
+    param: 'routePath',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Server Route Template',
+    param: 'routeTemplate',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Type',
+    param: 'type',
+    type: ParamType.String,
+  },
+  {
+    title: 'Error Message',
+    param: 'errorMessage',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Error Code',
+    param: 'errorCode',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Error Stack',
+    param: 'errorStack',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Action Target',
+    param: 'target',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+  {
+    title: 'Action Type',
+    param: 'action',
+    type: ParamType.String,
+    startsHidden: true,
+  },
+];
+
 /*------------------------------------------------------------------------*/
 /*                            Static Functions                            */
 /*------------------------------------------------------------------------*/
@@ -494,6 +698,36 @@ const LogReviewer: React.FC<Props> = (props) => {
     onClose,
   } = props;
 
+  // Create complete map of contexts
+  const contextMap: LogMetadataContextMap = {};
+  [
+    (LogMetadata.Context ?? {}),
+    LogBuiltInMetadata.Context,
+  ].forEach((partialContextMap) => {
+    Object.keys(partialContextMap).forEach((context) => {
+      // Add context
+      contextMap[context] = partialContextMap[context];
+
+      // If context has children, add an "uncategorized" subcontext
+      if (typeof contextMap[context] !== 'string') {
+        (contextMap[context] as any)[LogBuiltInMetadata.Context.Uncategorized] = (
+          LogBuiltInMetadata.Context.Uncategorized
+        );
+      }
+    });
+  });
+
+  // Create complete map of targets
+  const targetMap: LogMetadataTargetMap = {};
+  [
+    (LogMetadata.Target ?? {}),
+    LogBuiltInMetadata.Target,
+  ].forEach((partialTargetMap) => {
+    Object.keys(partialTargetMap).forEach((target) => {
+      targetMap[target] = partialTargetMap[target];
+    });
+  });
+
   /* -------------- State ------------- */
 
   // Create initial date filter state
@@ -515,25 +749,30 @@ const LogReviewer: React.FC<Props> = (props) => {
 
   // Create initial context filter state
   const initContextFilterState: ContextFilterState = {};
-  Object.keys(LogMetadata.Context ?? {}).forEach((context) => {
-    const contextValue = (LogMetadata.Context ?? {})[context];
+  Object.keys(contextMap).forEach((context) => {
+    const contextValue = contextMap[context];
     if (typeof contextValue === 'string') {
-      // Case: no subcontexts
+      // Case: no subcontexts, init as checked
       initContextFilterState[contextValue] = true;
     } else {
       // Case: subcontexts exist
-      initContextFilterState[contextValue._] = {};
-      Object.values((LogMetadata.Context ?? {})[context]).forEach((subcontext) => {
-        const subcontextValue = contextValue[subcontext];
-        (initContextFilterState[contextValue._] as { [k: string]: boolean })[subcontextValue] = true;
+      initContextFilterState[context] = {};
+      Object.values(contextMap[context]).forEach((subcontext) => {
+        // Skip self ("_")
+        if (subcontext === '_') {
+          return;
+        }
+
+        // Initialize as checked
+        (initContextFilterState[context] as any)[subcontext] = true;
       });
     }
   });
 
   // Create initial tag filter state
   const initTagFilterState: TagFilterState = {};
-  Object.values(LogMetadata.Tag ?? {}).forEach((tagValue) => {
-    initTagFilterState[tagValue] = true;
+  Object.keys(LogMetadata.Tag ?? {}).forEach((tag) => {
+    initTagFilterState[tag] = false;
   });
 
   // Create advanced filter state
@@ -561,7 +800,7 @@ const LogReviewer: React.FC<Props> = (props) => {
     target: {},
     action: {},
   };
-  Object.values(LogMetadata.Target ?? {}).forEach((target) => {
+  Object.values(targetMap).forEach((target) => {
     initActionErrorFilterState.target[target] = true;
   });
   Object.values(LogAction).forEach((action) => {
@@ -617,18 +856,23 @@ const LogReviewer: React.FC<Props> = (props) => {
     let month = newDateFilterState.startDate.month;
     while (
       // Earlier year
-      (year <= newDateFilterState.endDate.year)
+      (year < newDateFilterState.endDate.year)
       // Current year but included month
       || (
         year === newDateFilterState.endDate.year
         && month <= newDateFilterState.endDate.month
       )
     ) {
-      // Add to list
-      toLoad.push({
-        year,
-        month,
-      });
+      // Add to list if not already loaded
+      if (
+        !logMap[year]
+        || !logMap[year][month]
+      ) {
+        toLoad.push({
+          year,
+          month,
+        });
+      }
       
       // Increment
       month += 1;
@@ -744,16 +988,16 @@ const LogReviewer: React.FC<Props> = (props) => {
 
     // Filter toggle
     const filterToggles = (
-      <div className="LogReviewer-filter-toggles mb-2">
+      <div className="LogReviewer-filter-toggles">
         <h3 className="m-0">
           Filters:
         </h3>
-        <div className="LogReviewer-filter-toggle-buttons">
+        <div className="LogReviewer-filter-toggle-buttons alert alert-secondary p-2 m-0">
           {/* Date */}
           <button
             type="button"
             id="LogReviewer-toggle-date-filter-drawer"
-            className={`btn btn-${FilterDrawer.Date === expandedFilterDrawer ? 'warning' : 'secondary'} me-2`}
+            className={`btn btn-${FilterDrawer.Date === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
             aria-label="toggle date filter drawer"
             onClick={() => {
               dispatch({
@@ -772,7 +1016,7 @@ const LogReviewer: React.FC<Props> = (props) => {
           <button
             type="button"
             id="LogReviewer-toggle-context-filter-drawer"
-            className={`btn btn-${FilterDrawer.Context === expandedFilterDrawer ? 'warning' : 'secondary'} me-2`}
+            className={`btn btn-${FilterDrawer.Context === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
             aria-label="toggle context filter drawer"
             onClick={() => {
               dispatch({
@@ -793,7 +1037,7 @@ const LogReviewer: React.FC<Props> = (props) => {
             <button
               type="button"
               id="LogReviewer-toggle-tag-filter-drawer"
-              className={`btn btn-${FilterDrawer.Tag === expandedFilterDrawer ? 'warning' : 'secondary'} me-2`}
+              className={`btn btn-${FilterDrawer.Tag === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
               aria-label="toggle tag filter drawer"
               onClick={() => {
                 dispatch({
@@ -813,7 +1057,7 @@ const LogReviewer: React.FC<Props> = (props) => {
           <button
             type="button"
             id="LogReviewer-toggle-action-filter-drawer"
-            className={`btn btn-${FilterDrawer.Action === expandedFilterDrawer ? 'warning' : 'secondary'} me-2`}
+            className={`btn btn-${FilterDrawer.Action === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
             aria-label="toggle action and error filter drawer"
             onClick={() => {
               dispatch({
@@ -832,7 +1076,7 @@ const LogReviewer: React.FC<Props> = (props) => {
           <button
             type="button"
             id="LogReviewer-toggle-advanced-filter-drawer"
-            className={`btn btn-${FilterDrawer.Advanced === expandedFilterDrawer ? 'warning' : 'secondary'}`}
+            className={`btn btn-${FilterDrawer.Advanced === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
             aria-label="toggle advanced filter drawer"
             onClick={() => {
               dispatch({
@@ -847,6 +1091,29 @@ const LogReviewer: React.FC<Props> = (props) => {
             />
             Advanced
           </button>
+          {/* Reset */}
+          <button
+            type="button"
+            id="LogReviewer-reset-filters-button"
+            className="btn btn-light"
+            aria-label="reset filters"
+            onClick={() => {
+              dispatch({
+                type: ActionType.ResetFilters,
+                initActionErrorFilterState,
+                initAdvancedFilterState,
+                initContextFilterState,
+                initDateFilterState,
+                initTagFilterState,
+              });
+            }}
+          >
+            <FontAwesomeIcon
+              icon={faTimes}
+            />
+            {' '}
+            Reset
+          </button>
         </div>
       </div>
     );
@@ -863,14 +1130,11 @@ const LogReviewer: React.FC<Props> = (props) => {
               year={dateFilterState.startDate.year}
               month={dateFilterState.startDate.month}
               day={dateFilterState.startDate.day}
+              chooseFromPast
+              numMonthsToShow={36}
               onChange={(month, day, year) => {
-                dispatch({
-                  type: ActionType.UpdateDateFilterState,
-                  dateFilterState: {
-                    ...dateFilterState,
-                    startDate: { month, day, year },
-                  },
-                });
+                dateFilterState.startDate = { month, day, year };
+                handleDateRangeUpdated(dateFilterState);
               }}
             />
             {' '}
@@ -882,59 +1146,92 @@ const LogReviewer: React.FC<Props> = (props) => {
               year={dateFilterState.endDate.year}
               month={dateFilterState.endDate.month}
               day={dateFilterState.endDate.day}
+              chooseFromPast
+              numMonthsToShow={12}
               onChange={(month, day, year) => {
-                dispatch({
-                  type: ActionType.UpdateDateFilterState,
-                  dateFilterState: {
-                    ...dateFilterState,
-                    endDate: { month, day, year },
-                  },
-                });
+                if (
+                  year < dateFilterState.startDate.year
+                  || (
+                    year === dateFilterState.startDate.year
+                    && month < dateFilterState.startDate.month
+                  )
+                  || (
+                    year === dateFilterState.startDate.year
+                    && month === dateFilterState.startDate.month
+                    && day < dateFilterState.startDate.day
+                  )
+                ) {
+                  return alert(
+                    'Invalid Start Date',
+                    'The start date cannot be before the end date.',
+                  );
+                }
+                dateFilterState.endDate = { month, day, year };
+                handleDateRangeUpdated(dateFilterState);
               }}
             />
           </TabBox>
         );
       } else if (expandedFilterDrawer === FilterDrawer.Context) {
         // Create item picker items
-        const pickableItems: PickableItem[] = (
-          Object.keys(LogMetadata.Context ?? {})
-            .map((context) => {
-              const value = (LogMetadata.Context ?? {})[context];
-              if (typeof value === 'string') {
-                // No subcategories
-                const item: PickableItem = {
-                  id: context,
-                  name: genHumanReadableName(context),
-                  isGroup: false,
-                  checked: !!contextFilterState[context],
-                };
-                return item;
-              }
-
-              // Has subcategories
-              const children: PickableItem[] = (
-                Object.keys(value)
-                  .filter((subcontext) => {
-                    return subcontext !== '_'
-                  })
-                  .map((subcontext) => {
-                    return {
-                      id: `${context}-${subcontext}`,
-                      name: genHumanReadableName(subcontext),
-                      isGroup: false,
-                      checked: !!value[subcontext],
-                    };
-                  })
-              );
+        const builtInPickableItem: PickableItem = {
+          id: 'built-in-contexts',
+          name: 'Auto-logged',
+          isGroup: true,
+          children: [],
+        };
+        const pickableItems: PickableItem[] = [];
+        Object.keys(contextMap)
+          .forEach((context) => {
+            const value = contextMap[context];
+            if (typeof value === 'string') {
+              // No subcategories
               const item: PickableItem = {
                 id: context,
-                name: context,
-                isGroup: true,
-                children,
+                name: genHumanReadableName(context),
+                isGroup: false,
+                checked: !!contextFilterState[context],
               };
-              return item;
-            })
-        );
+
+              // Add built-in items to its own folder
+              const isBuiltIn = context in LogBuiltInMetadata.Context;
+              if (isBuiltIn) {
+                // Add to built-in pickable item
+                builtInPickableItem.children.push(item);
+              } else {
+                // Add to pickable items list
+                pickableItems.push(item);
+              }
+              return;
+            }
+
+            // Has subcategories
+            const children: PickableItem[] = (
+              Object.keys(value)
+                // Remove parent name
+                .filter((subcontext) => {
+                  return subcontext !== '_';
+                })
+                // Create child pickable items
+                .map((subcontext) => {
+                  return {
+                    id: subcontext,
+                    name: genHumanReadableName(subcontext),
+                    isGroup: false,
+                    checked: (contextFilterState[context] as any)[subcontext],
+                  };
+                })
+            );
+            const item: PickableItem = {
+              id: context,
+              name: genHumanReadableName(context),
+              isGroup: true,
+              children,
+            };
+            pickableItems.push(item);
+          });
+        // Add built-in contexts to end ofl ist
+        pickableItems.push(builtInPickableItem);
 
         // Create filter UI
         filterDrawer = (
@@ -946,11 +1243,29 @@ const LogReviewer: React.FC<Props> = (props) => {
               updatedItems.forEach((pickableItem) => {
                 if (pickableItem.isGroup) {
                   // Has subcontexts
-                  pickableItem.children.forEach((subcontextItem) => {
-                    (contextFilterState as any)[pickableItem.id][subcontextItem.id] = (
-                      (subcontextItem as any).checked
-                    );
-                  });
+
+                  if (pickableItem.id === 'built-in-contexts') {
+                    // Built-in
+
+                    // Treat as if these were top-level contexts
+                    pickableItem.children.forEach((subcontextItem) => {
+                      contextFilterState[subcontextItem.id] = (
+                        'checked' in subcontextItem
+                        && subcontextItem.checked
+                      );
+                    });
+                  } else {
+                    // Not built-in
+                    pickableItem.children.forEach((subcontextItem) => {
+                      if (!subcontextItem.isGroup) {
+                        (
+                          contextFilterState[pickableItem.id] as { [k: string]: boolean }
+                        )[subcontextItem.id] = (
+                          subcontextItem.checked
+                        );
+                      }
+                    });
+                  }
                 } else {
                   // No subcontexts
                   (contextFilterState as any)[pickableItem.id] = (
@@ -969,23 +1284,35 @@ const LogReviewer: React.FC<Props> = (props) => {
         // Create filter UI
         filterDrawer = (
           <TabBox title="Tags">
-            {
-              Object.keys(tagFilterState)
-                .map((tag, i) => {
-                  const description = genHumanReadableName(tag);
-                  return (
-                    <CheckboxButton
-                      id={`LogReviewer-tag-${tag}-checkbox`}
-                      text={description}
-                      ariaLabel={`include logs tagged with "${description}" in results`}
-                      noMarginOnRight={i === Object.keys(tagFilterState).length - 1}
-                      onChanged={(checked) => {
-                        tagFilterState[tag] = checked;
-                      }}
-                    />
-                  );
-                })
-            }
+            <div>
+              If any tags are selected, logs must contain at least one
+              (but not necessarily all) of the
+              selected tags.
+            </div>
+            <div className="d-flex gap-1 flex-wrap">
+              {
+                Object.keys(LogMetadata.Tag ?? {})
+                  .map((tag) => {
+                    const description = genHumanReadableName(tag);
+                    return (
+                      <CheckboxButton
+                        key={tag}
+                        id={`LogReviewer-tag-${tag}-checkbox`}
+                        text={description}
+                        ariaLabel={`require that logs be tagged with "${description}" or any other selected tag`}
+                        checked={tagFilterState[tag]}
+                        onChanged={(checked) => {
+                          tagFilterState[tag] = checked;
+                          dispatch({
+                            type: ActionType.UpdateTagFilterState,
+                            tagFilterState,
+                          });
+                        }}
+                      />
+                    );
+                  })
+              }
+            </div>
           </TabBox>
         );
       } else if (expandedFilterDrawer === FilterDrawer.Action) {
@@ -1047,58 +1374,60 @@ const LogReviewer: React.FC<Props> = (props) => {
                     label="Action"
                     className="mb-2"
                   >
-                    {
-                      Object.keys(LogAction)
-                        .map((action, i) => {
-                          const description = genHumanReadableName(action);
-                          return (
-                            <CheckboxButton
-                              id={`LogReviewer-action-${action}-checkbox`}
-                              text={description}
-                              ariaLabel={`include logs with action type "${description}" in results`}
-                              noMarginOnRight={i === Object.keys(LogAction).length - 1}
-                              onChanged={(checked) => {
-                                actionErrorFilterState.action[action] = checked;
-                                dispatch({
-                                  type: ActionType.UpdateActionErrorFilterState,
-                                  actionErrorFilterState,
-                                });
-                              }}
-                            />
-                          );
-                        })
-                    }
+                    <div className="d-flex gap-1 flex-wrap">
+                      {
+                        Object.keys(LogAction)
+                          .map((action) => {
+                            const description = genHumanReadableName(action);
+                            return (
+                              <CheckboxButton
+                                key={action}
+                                id={`LogReviewer-action-${action}-checkbox`}
+                                text={description}
+                                ariaLabel={`include logs with action type "${description}" in results`}
+                                noMarginOnRight
+                                checked={actionErrorFilterState.action[action]}
+                                onChanged={(checked) => {
+                                  actionErrorFilterState.action[action] = checked;
+                                  dispatch({
+                                    type: ActionType.UpdateActionErrorFilterState,
+                                    actionErrorFilterState,
+                                  });
+                                }}
+                              />
+                            );
+                          })
+                      }
+                    </div>
                   </ButtonInputGroup>
                   {/* Target */}
                   <ButtonInputGroup label="Target">
-                    {/* Nothing here */}
-                    {(Object.keys(LogMetadata.Target ?? {})) && (
-                      <div>
-                        This app does not have any targets yet.
-                      </div>
-                    )}
                     {/* List of targets */}
-                    {
-                      Object.keys(LogMetadata.Target ?? {})
-                        .map((target, i) => {
-                          const description = genHumanReadableName(target);
-                          return (
-                            <CheckboxButton
-                              id={`LogReviewer-target-${target}-checkbox`}
-                              text={description}
-                              ariaLabel={`include logs with target "${description}" in results`}
-                              onChanged={(checked) => {
-                                actionErrorFilterState.target[target] = checked;
-                                dispatch({
-                                  type: ActionType.UpdateActionErrorFilterState,
-                                  actionErrorFilterState,
-                                });
-                              }}
-                              noMarginOnRight={i === Object.keys(LogMetadata.Target ?? {}).length - 1}
-                            />
-                          );
-                        })
-                    }
+                    <div className="d-flex gap-1 flex-wrap">
+                      {
+                        Object.keys(targetMap)
+                          .map((target) => {
+                            const description = genHumanReadableName(target);
+                            return (
+                              <CheckboxButton
+                                key={target}
+                                id={`LogReviewer-target-${target}-checkbox`}
+                                text={description}
+                                ariaLabel={`include logs with target "${description}" in results`}
+                                checked={actionErrorFilterState.target[target]}
+                                noMarginOnRight
+                                onChanged={(checked) => {
+                                  actionErrorFilterState.target[target] = checked;
+                                  dispatch({
+                                    type: ActionType.UpdateActionErrorFilterState,
+                                    actionErrorFilterState,
+                                  });
+                                }}
+                              />
+                            );
+                          })
+                      }
+                    </div>
                   </ButtonInputGroup>
                 </TabBox>
               )
@@ -1120,6 +1449,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                       className="form-control"
                       aria-label="query for error message"
                       value={actionErrorFilterState.errorMessage}
+                      placeholder="e.g. undefined is not a function"
                       onChange={(e) => {
                         actionErrorFilterState.errorMessage = e.target.value;
                         dispatch({
@@ -1138,7 +1468,8 @@ const LogReviewer: React.FC<Props> = (props) => {
                       type="text"
                       className="form-control"
                       aria-label="query for error code"
-                      value={actionErrorFilterState.errorMessage}
+                      value={actionErrorFilterState.errorCode}
+                      placeholder="e.g. GC22"
                       onChange={(e) => {
                         actionErrorFilterState.errorCode = (
                           (e.target.value)
@@ -1162,7 +1493,7 @@ const LogReviewer: React.FC<Props> = (props) => {
         filterDrawer = (
           <>
             {/* User Info */}
-            <TabBox title="User Info">
+            <TabBox title="User">
               {/* First Name */}
               <div className="input-group mb-2">
                 <span className="input-group-text">
@@ -1173,6 +1504,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   className="form-control"
                   aria-label="query for user first name"
                   value={advancedFilterState.userFirstName}
+                  placeholder="e.g. Divardo"
                   onChange={(e) => {
                     advancedFilterState.userFirstName = e.target.value;
                     dispatch({
@@ -1192,6 +1524,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   className="form-control"
                   aria-label="query for user last name"
                   value={advancedFilterState.userLastName}
+                  placeholder="e.g. Calicci"
                   onChange={(e) => {
                     advancedFilterState.userLastName = e.target.value;
                     dispatch({
@@ -1211,6 +1544,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   className="form-control"
                   aria-label="query for user email"
                   value={advancedFilterState.userEmail}
+                  placeholder="e.g. calicci@fas.harvard.edu"
                   onChange={(e) => {
                     advancedFilterState.userEmail = (
                       (e.target.value)
@@ -1233,6 +1567,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   className="form-control"
                   aria-label="query for user canvas id"
                   value={advancedFilterState.userId}
+                  placeholder="e.g. 104985"
                   onChange={(e) => {
                     const { value } = e.target;
                     // Only update if value contains only numbers  
@@ -1291,7 +1626,7 @@ const LogReviewer: React.FC<Props> = (props) => {
             </TabBox>
 
             {/* Course Info */}
-            <TabBox title="Course Info">
+            <TabBox title="Course">
               {/* Name */}
               <div className="input-group mb-2">
                 <span className="input-group-text">
@@ -1302,6 +1637,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   className="form-control"
                   aria-label="query for course name"
                   value={advancedFilterState.courseName}
+                  placeholder="e.g. GLC 200"
                   onChange={(e) => {
                     advancedFilterState.courseName = e.target.value;
                     dispatch({
@@ -1321,6 +1657,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   className="form-control"
                   aria-label="query for course canvas id"
                   value={advancedFilterState.courseId}
+                  placeholder="e.g. 15948"
                   onChange={(e) => {
                     const { value } = e.target;
                     // Only update if value contains only numbers  
@@ -1340,7 +1677,7 @@ const LogReviewer: React.FC<Props> = (props) => {
             </TabBox>
 
             {/* Device Info */}
-            <TabBox title="Device Info">
+            <TabBox title="Device">
               <ButtonInputGroup label="Device Type">
                 <RadioButton
                   text="All Devices"
@@ -1424,53 +1761,58 @@ const LogReviewer: React.FC<Props> = (props) => {
                 />
               </ButtonInputGroup>
 
-              {/* Route path */}
-              <div className="input-group mb-2">
-                <span className="input-group-text">
-                  Server Route Path
-                </span>
-                <input
-                  type="text"
-                  className="form-control"
-                  aria-label="query for server route path"
-                  placeholder="e.g. /api/ttm/courses/12345"
-                  value={advancedFilterState.routePath}
-                  onChange={(e) => {
-                    advancedFilterState.courseName = (
-                      (e.target.value)
-                        .trim()
-                    );
-                    dispatch({
-                      type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
-                    });
-                  }}
-                />
-              </div>
+              {/* Server filters */}
+              {advancedFilterState.source !== LogSource.Client && (
+                <div className="mt-2">
+                  {/* Route path */}
+                  <div className="input-group mb-2">
+                    <span className="input-group-text">
+                      Server Route Path
+                    </span>
+                    <input
+                      type="text"
+                      className="form-control"
+                      aria-label="query for server route path"
+                      value={advancedFilterState.routePath}
+                      placeholder="e.g. /api/ttm/courses/12345"
+                      onChange={(e) => {
+                        advancedFilterState.courseName = (
+                          (e.target.value)
+                            .trim()
+                        );
+                        dispatch({
+                          type: ActionType.UpdateAdvancedFilterState,
+                          advancedFilterState,
+                        });
+                      }}
+                    />
+                  </div>
 
-              {/* Route template */}
-              <div className="input-group mb-2">
-                <span className="input-group-text">
-                  Server Route Template
-                </span>
-                <input
-                  type="text"
-                  className="form-control"
-                  aria-label="query for server route template"
-                  value={advancedFilterState.routeTemplate}
-                  placeholder="e.g. /api/ttm/courses/:courseId"
-                  onChange={(e) => {
-                    advancedFilterState.courseName = (
-                      (e.target.value)
-                        .trim()
-                    );
-                    dispatch({
-                      type: ActionType.UpdateAdvancedFilterState,
-                      advancedFilterState,
-                    });
-                  }}
-                />
-              </div>
+                  {/* Route template */}
+                  <div className="input-group mb-2">
+                    <span className="input-group-text">
+                      Server Route Template
+                    </span>
+                    <input
+                      type="text"
+                      className="form-control"
+                      aria-label="query for server route template"
+                      value={advancedFilterState.routeTemplate}
+                      placeholder="e.g. /api/ttm/courses/:courseId"
+                      onChange={(e) => {
+                        advancedFilterState.courseName = (
+                          (e.target.value)
+                            .trim()
+                        );
+                        dispatch({
+                          type: ActionType.UpdateAdvancedFilterState,
+                          advancedFilterState,
+                        });
+                      }}
+                    />
+                  </div>
+                </div>
+              )}
             </TabBox>
           </>
         );
@@ -1482,7 +1824,7 @@ const LogReviewer: React.FC<Props> = (props) => {
       <>
         {filterToggles}
         {filterDrawer && (
-          <Drawer>
+          <Drawer customBackgroundColor="#eee">
             {filterDrawer}
           </Drawer>
         )}
@@ -1543,7 +1885,10 @@ const LogReviewer: React.FC<Props> = (props) => {
             contextFilterState[log.context] === false
             // None of the subcontexts are selected
             || (
-              Object.values(contextFilterState[log.context] ?? {})
+              // Has subcontexts
+              typeof contextFilterState[log.context] !== 'boolean'
+              // None of the subcontexts are selected
+              && Object.values(contextFilterState[log.context] ?? {})
                 .every((isSelected) => {
                   return !isSelected;
                 })
@@ -1554,8 +1899,10 @@ const LogReviewer: React.FC<Props> = (props) => {
 
           // Subcontext doesn't match
           if (
+            // Log context is not "uncategorized" (no point in further filters)
+            log.context !== LogBuiltInMetadata.Context.Uncategorized
             // Log has a subcontext
-            log.subcontext
+            && log.subcontext
             // Context has subcontexts
             && (
               contextFilterState[log.context]
@@ -1572,14 +1919,16 @@ const LogReviewer: React.FC<Props> = (props) => {
 
           // No tags match
           if (
-            // Log has at least one tag
-            log.tags.length > 0
-            // No tags match
-            && (
-              log.tags.every((tag) => {
-                return !tagFilterState[tag];
+            // At least one tag is required
+            Object.values(tagFilterState)
+              .filter((isSelected) => {
+                return isSelected;
               })
-            )
+              .length > 0
+            // No tags match
+            && log.tags.every((tag) => {
+              return !tagFilterState[tag];
+            })
           ) {
             return;
           }
@@ -1761,7 +2110,7 @@ const LogReviewer: React.FC<Props> = (props) => {
             // Device info exists
             && log.device
             // Mobile filter doesn't match
-            && (advancedFilterState.isMobile === log.device.isMobile)
+            && (advancedFilterState.isMobile !== log.device.isMobile)
           ) {
             return;
           }
@@ -1814,199 +2163,11 @@ const LogReviewer: React.FC<Props> = (props) => {
     /*                  Data                  */
     /*----------------------------------------*/
 
-    // Create data table
-    const columns: IntelliTableColumn[] = [
-      {
-        title: 'First Name',
-        param: 'userFirstName',
-        type: ParamType.String,
-      },
-      {
-        title: 'Last Name',
-        param: 'userLastName',
-        type: ParamType.String,
-      },
-      {
-        title: 'Email',
-        param: 'userEmail',
-        type: ParamType.String,
-      },
-      {
-        title: 'Canvas Id',
-        param: 'userId',
-        type: ParamType.Int,
-      },
-      {
-        title: 'Student',
-        param: 'isLearner',
-        type: ParamType.Boolean,
-      },
-      {
-        title: 'Teaching Staff',
-        param: 'isTTM',
-        type: ParamType.Boolean,
-        startsHidden: true,
-      },
-      {
-        title: 'Admin',
-        param: 'isAdmin',
-        type: ParamType.Boolean,
-        startsHidden: true,
-      },
-      {
-        title: 'Course Canvas Id',
-        param: 'courseId',
-        type: ParamType.Int,
-        startsHidden: true,
-      },
-      {
-        title: 'Course Name',
-        param: 'courseName',
-        type: ParamType.String,
-      },
-      {
-        title: 'Browser Name',
-        param: 'browser.name',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Browser Version',
-        param: 'browser.version',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'OS',
-        param: 'device.os',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Mobile',
-        param: 'device.isMobile',
-        type: ParamType.Boolean,
-        startsHidden: true,
-      },
-      {
-        title: 'Year',
-        param: 'year',
-        type: ParamType.Int,
-      },
-      {
-        title: 'Month',
-        param: 'month',
-        type: ParamType.Int,
-      },
-      {
-        title: 'Day',
-        param: 'day',
-        type: ParamType.Int,
-      },
-      {
-        title: 'Hour',
-        param: 'hour',
-        type: ParamType.Int,
-      },
-      {
-        title: 'Minute',
-        param: 'minute',
-        type: ParamType.Int,
-        startsHidden: true,
-      },
-      {
-        title: 'Timestamp',
-        param: 'timestamp',
-        type: ParamType.Int,
-        startsHidden: true,
-      },
-      {
-        title: 'Context',
-        param: 'context',
-        type: ParamType.String,
-      },
-      {
-        title: 'Subcontext',
-        param: 'subcontext',
-        type: ParamType.String,
-      },
-      {
-        title: 'Tags',
-        param: 'tags',
-        type: ParamType.JSON,
-        startsHidden: true,
-      },
-      {
-        title: 'Log Level',
-        param: 'level',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Metadata',
-        param: 'metadata',
-        type: ParamType.JSON,
-        startsHidden: true,
-      },
-      {
-        title: 'Source',
-        param: 'source',
-        type: ParamType.String,
-      },
-      {
-        title: 'Server Route Path',
-        param: 'routePath',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Server Route Template',
-        param: 'routeTemplate',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Type',
-        param: 'type',
-        type: ParamType.String,
-      },
-      {
-        title: 'Error Message',
-        param: 'errorMessage',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Error Code',
-        param: 'errorCode',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Error Stack',
-        param: 'errorStack',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Action Target',
-        param: 'target',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-      {
-        title: 'Action Type',
-        param: 'action',
-        type: ParamType.String,
-        startsHidden: true,
-      },
-    ];
-
-    // Create intelliTable
-    const dataTable = (
+    // Nothing to show notice
+    const noLogsNotice = (
       logs.length === 0
         ? (
-          <div className="alert alert-warning">
+          <div className="alert alert-warning text-center mt-2">
             <h4 className="m-1">
               No Logs to Show
             </h4>
@@ -2016,21 +2177,28 @@ const LogReviewer: React.FC<Props> = (props) => {
             </div>
           </div>
         )
-        : (
-          <IntelliTable
-            title="Matching Logs"
-            id="logs"
-            data={logs}
-            columns={columns}
-          />
-        )
+        : undefined
+    );
+
+    // Create intelliTable
+    const dataTable = (
+      <IntelliTable
+        title="Matching Logs:"
+        csvName={`Logs from ${getHumanReadableDate()}`}
+        id="logs"
+        data={logs}
+        columns={columns}
+      />
     );
 
     // Main body
     body = (
       <>
         {filters}
-        {dataTable}
+        <div className="mt-2">
+          {dataTable}
+          {noLogsNotice}
+        </div>
       </>
     );
   }
@@ -2045,20 +2213,22 @@ const LogReviewer: React.FC<Props> = (props) => {
       <div className="LogReviewer-inner-container">
         <div className="LogReviewer-header">
           <div className="LogReviewer-header-title">
-            <h3 className="m-0">
+            <h3 className="text-center m-0">
               Log Review Dashboard
             </h3>
           </div>
-          <button
-            type="button"
-            className="LogReviewer-header-close-button btn btn-dark btn-lg"
-            aria-label="close log reviewer panel"
-            onClick={onClose}
-          >
-            <FontAwesomeIcon
-              icon={faTimes}
-            />
-          </button>
+          <div style={{ width: 0 }}>
+            <button
+              type="button"
+              className="LogReviewer-header-close-button btn btn-dark btn-lg pe-0"
+              aria-label="close log reviewer panel"
+              onClick={onClose}
+            >
+              <FontAwesomeIcon
+                icon={faTimes}
+              />
+            </button>
+          </div>
         </div>
         <div className="LogReviewer-contents">
           {body}