🔧 Wired up jobStatistics call

src/client/actions/fileops.actions.tsx

@@ -32,6 +32,7 @@ import {
   VOLUMES_FETCHED,
   LIBRARY_SERVICE_HEALTH,
   LS_SET_QUEUE_STATUS,
+  LS_IMPORT_JOB_STATISTICS_FETCHED,
 } from "../constants/action-types";
 import { success } from "react-notification-system-redux";
 
@@ -88,11 +89,9 @@ export const fetchComicBookMetadata = () => async (dispatch) => {
   //   }),
   // );
   const sessionId = localStorage.getItem("sessionId");
-  // dispatch({
-  //   type: LS_IMPORT,
-  //   meta: { remote: true },
-  //   data: { sessionId },
-  // });
+  dispatch({
+    type: LS_IMPORT,
+  });
 
   await axios.request({
     url: `${LIBRARY_SERVICE_BASE_URI}/newImport`,
@@ -102,11 +101,16 @@ export const fetchComicBookMetadata = () => async (dispatch) => {
 };
 
 export const getImportJobResultStatistics = () => async (dispatch) => {
-  await axios.request({
+  const result = await axios.request({
     url: `${JOB_QUEUE_SERVICE_BASE_URI}/getJobResultStatistics`,
     method: "GET",
   });
+  dispatch({
+    type: LS_IMPORT_JOB_STATISTICS_FETCHED,
+    data: result.data,
+  });
 };
+
 export const setQueueControl =
   (queueAction: string, queueStatus: string) => async (dispatch) => {
     dispatch({

src/client/components/Import.tsx

@@ -1,16 +1,14 @@
-import React, { ReactElement, useCallback, useContext, useState } from "react";
+import React, { ReactElement, useCallback, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import {
   fetchComicBookMetadata,
+  getImportJobResultStatistics,
   setQueueControl,
 } from "../actions/fileops.actions";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
+import { format } from "date-fns";
 import Loader from "react-loader-spinner";
-import { isUndefined } from "lodash";
-import {
-  LS_IMPORT_CALL_IN_PROGRESS,
-  LS_SET_QUEUE_STATUS,
-} from "../constants/action-types";
+import { isEmpty, isNil, isUndefined } from "lodash";
 
 interface IProps {
   matches?: unknown;
@@ -48,6 +46,10 @@ export const Import = (props: IProps): ReactElement => {
     (state: RootState) => state.fileOps.LSQueueImportStatus,
   );
 
+  const allImportJobResults = useSelector(
+    (state: RootState) => state.fileOps.importJobStatistics,
+  );
+
   const initiateImport = useCallback(() => {
     if (typeof props.path !== "undefined") {
       dispatch(fetchComicBookMetadata(props.path));
@@ -61,6 +63,10 @@ export const Import = (props: IProps): ReactElement => {
     [],
   );
 
+  useEffect(() => {
+    dispatch(getImportJobResultStatistics());
+  }, []);
+
   const renderQueueControls = (status: string): ReactElement | null => {
     switch (status) {
       case "running":
@@ -93,7 +99,7 @@ export const Import = (props: IProps): ReactElement => {
         return null;
     }
   };
-
+  console.log(...allImportJobResults);
   return (
     <div className="container">
       <section className="section is-small">
@@ -114,7 +120,6 @@ export const Import = (props: IProps): ReactElement => {
               This process could take a while, if you have a lot of comics, or
               are importing over a network connection.
             </p>
-            {JSON.stringify(libraryQueueImportStatus)}
           </div>
         </article>
         <p className="buttons">
@@ -133,43 +138,51 @@ export const Import = (props: IProps): ReactElement => {
             <span>Start Import</span>
           </button>
         </p>
-        <table className="table">
-          <thead>
-            <tr>
-              <th>Completed Jobs</th>
-              <th>Failed Jobs</th>
-              <th>Queue Controls</th>
-            </tr>
-          </thead>
-
-          <tbody>
-            <tr>
-              <th>
-                {successfulImportJobCount > 0 && (
-                  <div className="box has-background-success-light has-text-centered">
-                    <span className="is-size-2 has-text-weight-bold">
-                      {successfulImportJobCount}
-                    </span>
-                  </div>
-                )}
-              </th>
-              <td>
-                {failedImportJobCount > 0 && (
-                  <div className="box has-background-danger has-text-centered">
-                    <span className="is-size-2 has-text-weight-bold">
-                      {failedImportJobCount}
-                    </span>
-                  </div>
-                )}
-              </td>
-
-              <td>{renderQueueControls(libraryQueueImportStatus)}</td>
-            </tr>
-          </tbody>
-        </table>
         {libraryQueueImportStatus !== "drained" &&
           !isUndefined(libraryQueueImportStatus) && (
             <>
+              <table className="table">
+                <thead>
+                  <tr>
+                    <th>Completed Jobs</th>
+                    <th>Failed Jobs</th>
+                    <th>Queue Controls</th>
+                    <th>Queue Status</th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                  <tr>
+                    <th>
+                      {successfulImportJobCount > 0 && (
+                        <div className="box has-background-success-light has-text-centered">
+                          <span className="is-size-2 has-text-weight-bold">
+                            {successfulImportJobCount}
+                          </span>
+                        </div>
+                      )}
+                    </th>
+                    <td>
+                      {failedImportJobCount > 0 && (
+                        <div className="box has-background-danger has-text-centered">
+                          <span className="is-size-2 has-text-weight-bold">
+                            {failedImportJobCount}
+                          </span>
+                        </div>
+                      )}
+                    </td>
+
+                    <td>{renderQueueControls(libraryQueueImportStatus)}</td>
+                    <td>
+                      {libraryQueueImportStatus !== undefined ? (
+                        <span className="tag is-warning">
+                          {libraryQueueImportStatus}
+                        </span>
+                      ) : null}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
               Imported{" "}
               <span className="has-text-weight-bold">{lastQueueJob}</span>
             </>
@@ -182,19 +195,38 @@ export const Import = (props: IProps): ReactElement => {
           <thead>
             <tr>
               <th>Time Started</th>
+              <th>Session Id</th>
               <th>Imported</th>
               <th>Failed</th>
-              <th>Actions</th>
             </tr>
           </thead>
 
           <tbody>
-            <tr>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-            </tr>
+            {allImportJobResults.map((jobResult, id) => {
+              return (
+                <tr key={id}>
+                  <td>
+                    {format(
+                      new Date(jobResult.statuses[0].earliestTimestamp),
+                      "EEEE, hh:mma, do LLLL Y",
+                    )}
+                  </td>
+                  <td>
+                    <span className="tag is-warning">{jobResult._id}</span>
+                  </td>
+                  <td>
+                    <span className="tag is-success">
+                      {jobResult.statuses[1].count}
+                    </span>
+                  </td>
+                  <td>
+                    <span className="tag is-danger">
+                      {jobResult.statuses[0].count}
+                    </span>
+                  </td>
+                </tr>
+              );
+            })}
           </tbody>
         </table>
       </section>

src/client/constants/action-types.ts

@@ -133,7 +133,8 @@ export const LS_IMPORT_QUEUE_DRAINED = "LS_IMPORT_QUEUE_DRAINED";
 export const LS_SET_QUEUE_STATUS = "LS_SET_QUEUE_STATUS";
 export const RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION =
   "RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION";
-export const IMPORT_JOB_RESULTS_RETRIEVED = "IMPORT_JOB_RESULTS_RETRIEVED";
+export const LS_IMPORT_JOB_STATISTICS_FETCHED =
+  "LS_IMPORT_JOB_STATISTICS_FETCHED";
 
 // Settings
 export const SETTINGS_CALL_IN_PROGRESS = "SETTINGS_CALL_IN_PROGRESS";

src/client/reducers/fileops.reducer.ts

@@ -33,7 +33,7 @@ import {
   LS_IMPORT_QUEUE_DRAINED,
   LS_SET_QUEUE_STATUS,
   RESTORE_JOB_COUNTS_AFTER_SESSION_RESTORATION,
-  IMPORT_JOB_RESULTS_RETRIEVED,
+  LS_IMPORT_JOB_STATISTICS_FETCHED,
 } from "../constants/action-types";
 import { removeLeadingPeriod } from "../shared/utils/formatting.utils";
 import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
@@ -197,13 +197,19 @@ function fileOpsReducer(state = initialState, action) {
     }
 
     case LS_SET_QUEUE_STATUS: {
-      console.log(action);
       return {
         ...state,
         LSQueueImportStatus: action.data.queueStatus,
       };
     }
 
+    case LS_IMPORT_JOB_STATISTICS_FETCHED: {
+      return {
+        ...state,
+        importJobStatistics: action.data,
+      };
+    }
+
     case COMICBOOK_EXTRACTION_SUCCESS: {
       const comicBookPages: string[] = [];
       map(action.result.files, (page) => {
@@ -232,11 +238,7 @@ function fileOpsReducer(state = initialState, action) {
           };
       }
     }
-    case IMPORT_JOB_RESULTS_RETRIEVED: {
-      return {
-        ...state,
-      };
-    }
+
     case LS_COMIC_ADDED: {
       return {
         ...state,