dce-reactkit 3.2.2-beta.2 → 3.2.2-beta.21

package/src/components/LogReviewer.tsx

@@ -21,7 +21,7 @@ import {
 // Import shared helpers
 import visitServerEndpoint from '../helpers/visitServerEndpoint';
 import getTimeInfoInET from '../helpers/getTimeInfoInET';
-import { showFatalError } from './AppWrapper';
+import { alert, showFatalError } from './AppWrapper';
 
 // Import shared constants
 import LOG_REVIEW_ROUTE_PATH_PREFIX from '../constants/LOG_REVIEW_ROUTE_PATH_PREFIX';
@@ -34,6 +34,7 @@ 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 shared components
 import SimpleDateChooser from './SimpleDateChooser';
@@ -206,6 +207,11 @@ const style = `
     border: 0.05rem solid black;
     border-radius: 0.5rem;
     overflow: hidden;
+    padding: 0.7rem;
+
+    /* Solid background */
+    background-color: white;
+    color: black;
 
     /* Place contents in flex column */
     flex-direction: column;
@@ -232,6 +238,27 @@ const style = `
     /* Vertical scroll */
     overflow-y: auto;
   }
+
+  .LogReviewer-header-close-button {
+    border: 0 !important;
+    background-color: transparent !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    padding-right: 1em !important;
+    margin: 0 !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;
+  }
 `;
 
 /*------------------------------------------------------------------------*/
@@ -254,7 +281,7 @@ const genHumanReadableName = (machineReadableName: string) => {
       // Uppercase! Add a space before
       humanReadableName += ' ';
     }
-    humanReadableName += chars;
+    humanReadableName += char;
   });
 
   // Trim and return
@@ -437,9 +464,25 @@ const reducer = (state: State, action: Action): State => {
       };
     }
     case ActionType.UpdateTagFilterState: {
+      const { tagFilterState } = action;
+
+      // Select all if every tag is deselected
+      const numTagsSelected = (
+        Object.values(tagFilterState)
+          .filter((isSelected) => {
+            return isSelected;
+          })
+          .length
+      );
+      if (numTagsSelected === 0) {
+        Object.keys(tagFilterState).forEach((tag) => {
+          tagFilterState[tag] = true;
+        });
+      }
+
       return {
         ...state,
-        tagFilterState: action.tagFilterState,
+        tagFilterState,
       };
     }
     case ActionType.UpdateActionErrorFilterState: {
@@ -477,6 +520,34 @@ const LogReviewer: React.FC<Props> = (props) => {
     onClose,
   } = props;
 
+  // Add built-in LogMetadata
+  // > Add "uncategorized" subcontext to each context
+  Object.keys(LogMetadata.Context ?? {}).forEach((context) => {
+    if (
+      LogMetadata.Context
+      // Context has children already
+      && typeof LogMetadata.Context[context] !== 'string'
+    ) {
+      (LogMetadata.Context as any)[context][LogBuiltInMetadata.Context.Uncategorized] = (
+        LogBuiltInMetadata.Context.Uncategorized
+      );
+    }
+  })
+  // > Add built-in contexts
+  LogMetadata.Context = (LogMetadata.Context ?? {});
+  Object.keys(LogBuiltInMetadata.Context).forEach((context) => {
+    if (LogMetadata.Context) {
+      LogMetadata.Context[context] = context;
+    }
+  });
+  // > Add built-in targets
+  LogMetadata.Target = (LogMetadata.Target ?? {});
+  Object.keys(LogBuiltInMetadata.Target).forEach((target) => {
+    if (LogMetadata.Target) {
+      LogMetadata.Target[target] = target;
+    }
+  });
+
   /* -------------- State ------------- */
 
   // Create initial date filter state
@@ -550,6 +621,10 @@ const LogReviewer: React.FC<Props> = (props) => {
   Object.values(LogAction).forEach((action) => {
     initActionErrorFilterState.action[action] = true;
   });
+  // Add built-in targets
+  Object.values(LogBuiltInMetadata.Target).forEach((target) => {
+    initActionErrorFilterState.target[target] = true;
+  });
 
   // Initial state
   const initialState: State = {
@@ -600,18 +675,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;
@@ -641,6 +721,7 @@ const LogReviewer: React.FC<Props> = (props) => {
 
     // Check which year/month combos we need to load
     const toLoad = listMonthsToLoad(newDateFilterState);
+    console.log('Filter update:', newDateFilterState, toLoad, logMap);
 
     // If nothing to load, finished
     if (toLoad.length === 0) {
@@ -727,16 +808,16 @@ const LogReviewer: React.FC<Props> = (props) => {
 
     // Filter toggle
     const filterToggles = (
-      <div className="LogReviewer-filter-toggles d-flex align-items-center justify-content-center">
+      <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} me-2`}
+            className={`btn btn-${FilterDrawer.Date === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
             aria-label="toggle date filter drawer"
             onClick={() => {
               dispatch({
@@ -755,7 +836,7 @@ const LogReviewer: React.FC<Props> = (props) => {
           <button
             type="button"
             id="LogReviewer-toggle-context-filter-drawer"
-            className={`btn btn-${FilterDrawer.Context === expandedFilterDrawer} me-2`}
+            className={`btn btn-${FilterDrawer.Context === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
             aria-label="toggle context filter drawer"
             onClick={() => {
               dispatch({
@@ -771,29 +852,32 @@ const LogReviewer: React.FC<Props> = (props) => {
             Context
           </button>
           {/* Tag */}
-          <button
-            type="button"
-            id="LogReviewer-toggle-tag-filter-drawer"
-            className={`btn btn-${FilterDrawer.Tag === expandedFilterDrawer} me-2`}
-            aria-label="toggle tag filter drawer"
-            onClick={() => {
-              dispatch({
-                type: ActionType.ToggleFilterDrawer,
-                filterDrawer: FilterDrawer.Tag,
-              });
-            }}
-          >
-            <FontAwesomeIcon
-              icon={faTag}
-              className="me-2"
-            />
-            Tag
-          </button>
+          {/* Skip if no tags are used */}
+          {(LogMetadata.Tag && Object.keys(LogMetadata.Tag).length > 0) && (
+            <button
+              type="button"
+              id="LogReviewer-toggle-tag-filter-drawer"
+              className={`btn btn-${FilterDrawer.Tag === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
+              aria-label="toggle tag filter drawer"
+              onClick={() => {
+                dispatch({
+                  type: ActionType.ToggleFilterDrawer,
+                  filterDrawer: FilterDrawer.Tag,
+                });
+              }}
+            >
+              <FontAwesomeIcon
+                icon={faTag}
+                className="me-2"
+              />
+              Tag
+            </button>
+          )}
           {/* Action */}
           <button
             type="button"
             id="LogReviewer-toggle-action-filter-drawer"
-            className={`btn btn-${FilterDrawer.Action === expandedFilterDrawer} me-2`}
+            className={`btn btn-${FilterDrawer.Action === expandedFilterDrawer ? 'warning' : 'light'} me-2`}
             aria-label="toggle action and error filter drawer"
             onClick={() => {
               dispatch({
@@ -812,7 +896,7 @@ const LogReviewer: React.FC<Props> = (props) => {
           <button
             type="button"
             id="LogReviewer-toggle-advanced-filter-drawer"
-            className={`btn btn-${FilterDrawer.Advanced === expandedFilterDrawer}`}
+            className={`btn btn-${FilterDrawer.Advanced === expandedFilterDrawer ? 'warning' : 'light'}`}
             aria-label="toggle advanced filter drawer"
             onClick={() => {
               dispatch({
@@ -843,14 +927,11 @@ const LogReviewer: React.FC<Props> = (props) => {
               year={dateFilterState.startDate.year}
               month={dateFilterState.startDate.month}
               day={dateFilterState.startDate.day}
+              chooseFromPast
+              numMonthsToShow={12}
               onChange={(month, day, year) => {
-                dispatch({
-                  type: ActionType.UpdateDateFilterState,
-                  dateFilterState: {
-                    ...dateFilterState,
-                    startDate: { month, day, year },
-                  },
-                });
+                dateFilterState.startDate = { month, day, year };
+                handleDateRangeUpdated(dateFilterState);
               }}
             />
             {' '}
@@ -862,14 +943,28 @@ 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>
@@ -899,7 +994,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                   })
                   .map((subcontext) => {
                     return {
-                      id: `${context}-${subcontext}`,
+                      id: subcontext,
                       name: genHumanReadableName(subcontext),
                       isGroup: false,
                       checked: !!value[subcontext],
@@ -908,7 +1003,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               );
               const item: PickableItem = {
                 id: context,
-                name: context,
+                name: genHumanReadableName(context),
                 isGroup: true,
                 children,
               };
@@ -922,6 +1017,8 @@ const LogReviewer: React.FC<Props> = (props) => {
             title="Context"
             items={pickableItems}
             onChanged={(updatedItems) => {
+              console.log('Items before:', pickableItems);
+              console.log('Updated Items:', updatedItems);
               // Update our state
               updatedItems.forEach((pickableItem) => {
                 if (pickableItem.isGroup) {
@@ -1023,7 +1120,10 @@ const LogReviewer: React.FC<Props> = (props) => {
               ) && (
                 <TabBox title="Action Log Details">
                   {/* Action */}
-                  <ButtonInputGroup label="Action">
+                  <ButtonInputGroup
+                    label="Action"
+                    className="mb-2"
+                  >
                     {
                       Object.keys(LogAction)
                         .map((action, i) => {
@@ -1048,6 +1148,13 @@ const LogReviewer: React.FC<Props> = (props) => {
                   </ButtonInputGroup>
                   {/* Target */}
                   <ButtonInputGroup label="Target">
+                    {/* Nothing here */}
+                    {(Object.keys(LogMetadata.Target ?? {}).length === 0) && (
+                      <div>
+                        This app does not have any targets yet.
+                      </div>
+                    )}
+                    {/* List of targets */}
                     {
                       Object.keys(LogMetadata.Target ?? {})
                         .map((target, i) => {
@@ -1394,53 +1501,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"
+                      placeholder="e.g. /api/ttm/courses/12345"
+                      value={advancedFilterState.routePath}
+                      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>
           </>
         );
@@ -1463,9 +1575,10 @@ const LogReviewer: React.FC<Props> = (props) => {
     // > Perform filters
     const logs: Log[] = [];
     Object.keys(logMap).forEach((year) => {
-      Object.keys(logMap).forEach((month) => {
+      Object.keys(logMap[year]).forEach((month) => {
         logMap[year][month].forEach((log) => {
           /* ----------- Date Filter ---------- */
+          console.log('Log:', log);
           
           // Before start date
           if (
@@ -1483,6 +1596,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               && (log.day < dateFilterState.startDate.day)
             )
           ) {
+            console.log('RULED OUT: START');
             return;
           }
 
@@ -1502,6 +1616,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               && (log.day > dateFilterState.endDate.day)
             )
           ) {
+            console.log('RULED OUT: END');
             return;
           }
 
@@ -1519,13 +1634,16 @@ const LogReviewer: React.FC<Props> = (props) => {
                 })
             )
           ) {
+            console.log('RULED OUT: CONTEXT');
             return;
           }
 
           // 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]
@@ -1535,6 +1653,7 @@ const LogReviewer: React.FC<Props> = (props) => {
             // Subcontext is not selected
             && !(contextFilterState as any)[log.context][log.subcontext]
           ) {
+            console.log('RULED OUT: SUBCONTEXT');
             return;
           }
 
@@ -1542,15 +1661,11 @@ 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];
-              })
-            )
+            log.tags.every((tag) => {
+              return !tagFilterState[tag];
+            })
           ) {
+            console.log('RULED OUT: TAGS');
             return;
           }
 
@@ -1563,6 +1678,7 @@ const LogReviewer: React.FC<Props> = (props) => {
             // Log type doesn't match
             && actionErrorFilterState.type !== log.type
           ) {
+            console.log('RULED OUT: TYPE');
             return;
           }
 
@@ -1579,6 +1695,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                 actionErrorFilterState.errorMessage.trim().toLowerCase(),
               )
             ) {
+              console.log('RULED OUT: ERROR MESSAGE');
               return;
             }
 
@@ -1593,6 +1710,7 @@ const LogReviewer: React.FC<Props> = (props) => {
                 actionErrorFilterState.errorCode.trim().toUpperCase(),
               )
             ) {
+              console.log('RULED OUT: ERROR CODE');
               return;
             }
           }
@@ -1606,6 +1724,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               // Target isn't selected
               && !actionErrorFilterState.target[log.target]
             ) {
+              console.log('RULED OUT: TARGET');
               return;
             }
 
@@ -1616,6 +1735,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               // Action isn't selected
               && !actionErrorFilterState.action[log.action]
             ) {
+              console.log('RULED OUT: ACTION');
               return;
             }
           }
@@ -1631,6 +1751,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               advancedFilterState.userFirstName.toLowerCase().trim(),
             )
           ) {
+            console.log('RULED OUT: FIRST');
             return;
           }
 
@@ -1643,6 +1764,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               advancedFilterState.userLastName.toLowerCase().trim(),
             )
           ) {
+            console.log('RULED OUT: LAST');
             return;
           }
 
@@ -1655,6 +1777,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               advancedFilterState.userEmail.toLowerCase().trim(),
             )
           ) {
+            console.log('RULED OUT: EMAIL');
             return;
           }
 
@@ -1667,6 +1790,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               advancedFilterState.userId.trim(),
             )
           ) {
+            console.log('RULED OUT: USER ID');
             return;
           }
 
@@ -1677,6 +1801,7 @@ const LogReviewer: React.FC<Props> = (props) => {
             // Learners aren't included
             && !advancedFilterState.includeLearners
           ) {
+            console.log('RULED OUT: LEARNER');
             return;
           }
 
@@ -1687,6 +1812,7 @@ const LogReviewer: React.FC<Props> = (props) => {
             // TTMs aren't included
             && !advancedFilterState.includeTTMs
           ) {
+            console.log('RULED OUT: TTM');
             return;
           }
 
@@ -1697,6 +1823,7 @@ const LogReviewer: React.FC<Props> = (props) => {
             // Admins aren't included
             && !advancedFilterState.includeAdmins
           ) {
+            console.log('RULED OUT: ADMIN');
             return;
           }
 
@@ -1709,6 +1836,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               advancedFilterState.courseId.trim(),
             )
           ) {
+            console.log('RULED OUT: COURSE ID');
             return;
           }
 
@@ -1721,6 +1849,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               advancedFilterState.courseName.trim(),
             )
           ) {
+            console.log('RULED OUT: COURSE NAME');
             return;
           }
 
@@ -1733,6 +1862,7 @@ const LogReviewer: React.FC<Props> = (props) => {
             // Mobile filter doesn't match
             && (advancedFilterState.isMobile === log.device.isMobile)
           ) {
+            console.log('RULED OUT: MOBILE');
             return;
           }
 
@@ -1745,6 +1875,7 @@ const LogReviewer: React.FC<Props> = (props) => {
             // Source filter doesn't match
             && (advancedFilterState.source !== log.source)
           ) {
+            console.log('RULED OUT: SOURCE');
             return;
           }
 
@@ -1757,6 +1888,7 @@ const LogReviewer: React.FC<Props> = (props) => {
             // Route path doesn't match
             && !(log.routePath.includes(advancedFilterState.routePath.trim()))
           ) {
+            console.log('RULED OUT: PATH');
             return;
           }
 
@@ -1769,6 +1901,7 @@ const LogReviewer: React.FC<Props> = (props) => {
             // Route template doesn't match
             && !(log.routeTemplate.includes(advancedFilterState.routeTemplate.trim()))
           ) {
+            console.log('RULED OUT: TEMPLATE');
             return;
           }
 
@@ -1974,19 +2107,40 @@ const LogReviewer: React.FC<Props> = (props) => {
 
     // Create intelliTable
     const dataTable = (
-      <IntelliTable
-        title="Matching Logs"
-        id="logs"
-        data={logs}
-        columns={columns}
-      />
+      logs.length === 0
+        ? (
+          <>
+            <h3 className="m-0">
+              Matching Logs:
+            </h3>
+            <div className="alert alert-warning text-center">
+              <h4 className="m-1">
+                No Logs to Show
+              </h4>
+              <div>
+                Either your filters are too strict or no matching logs have been
+                created yet.
+              </div>
+            </div>
+          </>
+        )
+        : (
+          <IntelliTable
+            title="Matching Logs:"
+            id="logs"
+            data={logs}
+            columns={columns}
+          />
+        )
     );
 
     // Main body
     body = (
       <>
         {filters}
-        {dataTable}
+        <div className="mt-2">
+          {dataTable}
+        </div>
       </>
     );
   }
@@ -2001,26 +2155,22 @@ const LogReviewer: React.FC<Props> = (props) => {
       <div className="LogReviewer-inner-container">
         <div className="LogReviewer-header">
           <div className="LogReviewer-header-title">
-            <h1 className="m-0">
+            <h3 className="text-center m-0">
               Log Review Dashboard
-            </h1>
+            </h3>
+          </div>
+          <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>
-          <button
-            type="button"
-            className="LogReviewer-header-close-button btn btn-lg"
-            aria-label="close log reviewer panel"
-            onClick={onClose}
-            style={{
-              border: 0,
-              backgroundColor: 'transparent',
-              padding: 0,
-              margin: 0,
-            }}
-          >
-            <FontAwesomeIcon
-              icon={faTimes}
-            />
-          </button>
         </div>
         <div className="LogReviewer-contents">
           {body}