Wire up error alerts for redriveBatch and exportErrors

src/components/ErrorAlerts.jsx

@@ -38,9 +38,15 @@ import {
   dismissImageContextError,
   selectStatsErrors,
   dismissStatsError,
-  selectExportErrors,
+  selectExportDataErrors,
   dismissExportError,
 } from '../features/images/imagesSlice';
+import {
+  selectExportImageErrorsErrors,
+  dismissExportErrorsError,
+  selectRedriveBatchErrors,
+  dismissRedriveBatchError
+} from '../features/upload/uploadSlice';
 import getErrorContent from '../content/Errors';
 import { selectManageUserErrors, dismissManageUsersError } from '../features/projects/usersSlice';
 
@@ -58,7 +64,9 @@ const ErrorAlerts = () => {
   const imagesErrors = useSelector(selectImagesErrors);
   const imageContextErrors = useSelector(selectImageContextErrors);
   const statsErrors = useSelector(selectStatsErrors);
-  const exportErrors = useSelector(selectExportErrors);
+  const exportDataErrors = useSelector(selectExportDataErrors);
+  const exportImageErrorsErrors = useSelector(selectExportImageErrorsErrors);
+  const redriveBatchErrors = useSelector(selectRedriveBatchErrors);
   const manageUserErrors = useSelector(selectManageUserErrors);
   const createProjectErrors = useSelector(selectCreateProjectsErrors);
 
@@ -73,7 +81,9 @@ const ErrorAlerts = () => {
     enrichErrors(imagesErrors, 'Image Error', 'images'),
     enrichErrors(imageContextErrors, 'Image Error', 'imageContext'),
     enrichErrors(statsErrors, 'Error Getting Stats', 'stats'),
-    enrichErrors(exportErrors, 'Error Exporting Data', 'data'),
+    enrichErrors(exportDataErrors, 'Error Exporting Data', 'data'),
+    enrichErrors(exportImageErrorsErrors, 'Error downloading errors CSV', 'uploadImageErrors'),
+    enrichErrors(redriveBatchErrors, 'Error retrying failed images in batch', 'redriveBatch'),
     enrichErrors(manageUserErrors, 'Manage user error', 'manageUsers'),
     enrichErrors(createProjectErrors, 'Error Creating Project', 'createProject'),
   ];
@@ -134,6 +144,8 @@ const dismissErrorActions = {
   'imageContext': (i) => dismissImageContextError(i),
   'stats': (i) => dismissStatsError(i),
   'data': (i) => dismissExportError(i),
+  'uploadImageErrors': (i) => dismissExportErrorsError(i),
+  'redriveBatch': (i) => dismissRedriveBatchError(i),
   'manageUsers': (i) => dismissManageUsersError(i),
 };
 

src/features/images/imagesSlice.js

@@ -514,7 +514,7 @@ export const selectStatsLoading = state => state.images.loadingStates.stats;
 export const selectStatsErrors = state => state.images.loadingStates.stats.errors;
 export const selectExport = state => state.images.export;
 export const selectExportLoading = state => state.images.loadingStates.export;
-export const selectExportErrors = state => state.images.loadingStates.export.errors;
+export const selectExportDataErrors = state => state.images.loadingStates.export.errors;
 export const selectDeleteImagesAlertOpen = state => state.images.deleteImagesAlertOpen;
 
 // TODO: find a different place for this?

src/features/upload/BulkUploadTable.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchBatches, stopBatch, exportErrors, getErrorsExportStatus, filterBatches, selectStopBatchLoading, selectRedriveBatchLoading, redriveBatch } from './uploadSlice';
+import { fetchBatches, stopBatch, exportErrors, getErrorsExportStatus, filterBatches, selectStopBatchLoading, selectRedriveBatchLoading, redriveBatch, selectBatchStatesLoading } from './uploadSlice';
 import { selectBatchStates, selectBatchPageInfo, selectErrorsExport, selectErrorsExportLoading, selectBatchFilter } from './uploadSlice';
 import { styled, keyframes } from '@stitches/react';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
@@ -9,6 +9,7 @@ import Button from '../../components/Button';
 import IconButton from '../../components/IconButton.jsx';
 import { ChevronLeftIcon, ChevronRightIcon, Cross2Icon, ExclamationTriangleIcon, ReloadIcon } from '@radix-ui/react-icons';
 import { Tooltip, TooltipContent, TooltipArrow, TooltipTrigger } from '../../components/Tooltip.jsx';
+import { SimpleSpinner, SpinnerOverlay } from '../../components/Spinner';
 
 
 const Table = styled('table', {
@@ -91,6 +92,7 @@ const Error = styled('span', {
 const BulkUploadTable = ({ percentUploaded }) => {
   const { hasNext, hasPrevious } = useSelector(selectBatchPageInfo);
   const batchStates = useSelector(selectBatchStates);
+  const batchStatesLoading = useSelector(selectBatchStatesLoading);
   const errorsExport = useSelector(selectErrorsExport);
   const errorsExportLoading = useSelector(selectErrorsExportLoading);
   const stopBatchLoading = useSelector(selectStopBatchLoading);
@@ -148,7 +150,12 @@ const BulkUploadTable = ({ percentUploaded }) => {
   }, [errorsExportReady, errorsExport, dispatch]);
 
   return (
-    <div>
+    <div style={{ position: 'relative' }}>
+      {batchStatesLoading.isLoading &&
+        <SpinnerOverlay>
+          <SimpleSpinner/>
+        </SpinnerOverlay>
+      }
       <CurrentCompletedToggle />
       <Table>
         <thead>
@@ -225,6 +232,7 @@ const BulkUploadTable = ({ percentUploaded }) => {
                         variant='ghost'
                         state={isRedrivingImages && 'loading'}
                         size='large'
+                        css={{ color: '$errorText' }}
                         disabled={!(status['processing-complete'] && status['has-failed-images'])}
                         onClick={() => dispatch(redriveBatch(_id))}
                       >

src/features/upload/uploadSlice.js

@@ -121,7 +121,7 @@ export const uploadSlice = createSlice({
     fetchBatchesSuccess: (state, { payload }) => {
       const { batches, pageInfo } = payload.batches.batches;
       const ls = {
-        isLoading: true,
+        isLoading: false,
         operation: null,
         errors: null,
       }
@@ -213,7 +213,6 @@ export const uploadSlice = createSlice({
       };
     },
 
-    // TODO: don't forget to wire up redriveBatch errors
     redriveBatchFailure: (state, { payload }) => {
       const ls = {
         isLoading: false,
@@ -226,6 +225,11 @@ export const uploadSlice = createSlice({
       };
     },
 
+    dismissRedriveBatchError: (state, { payload }) => {
+      const index = payload;
+      state.loadingStates.redriveBatch.errors.splice(index, 1);
+    },
+
     // export image errors 
 
     exportErrorsStart: (state, { payload }) => {
@@ -270,7 +274,6 @@ export const uploadSlice = createSlice({
       }
     },
 
-    // TODO: remember to wire up exportErrors errors
     dismissExportErrorsError: (state, { payload }) => {
       const index = payload;
       state.loadingStates.errorsExport.errors.splice(index, 1);
@@ -308,6 +311,7 @@ export const {
   redriveBatchStart,
   redriveBatchSuccess,
   redriveBatchFailure,
+  dismissRedriveBatchError,
   exportErrorsStart,
   exportErrorsSuccess,
   exportErrorsUpdate,
@@ -480,6 +484,7 @@ export const fetchBatches = (page = 'current') => async (dispatch, getState) =>
     const currentUser = await Auth.currentAuthenticatedUser();
     const token = currentUser.getSignInUserSession().getIdToken().getJwtToken();
     if (token) {
+      dispatch(fetchBatchesStart());
       const projects = getState().projects.projects;
       const selectedProj = projects.find((proj) => proj.selected);
       const pageInfo = getState().uploads.pageInfo;
@@ -604,10 +609,13 @@ export const selectBatchStates = state => state.uploads.batchStates;
 export const selectBatchFilter = state => state.uploads.filter;
 export const selectBatchPageInfo = state => state.uploads.pageInfo;
 export const selectUploadsLoading = state => state.uploads.loadingStates.upload;
+export const selectBatchStatesLoading = state => state.uploads.loadingStates.batchStates;
 export const selectErrorsExport = state => state.uploads.errorsExport;
 export const selectErrorsExportLoading = state => state.uploads.loadingStates.errorsExport;
-export const selectErrorsExportErrors = state => state.uploads.loadingStates.errorsExport.errors;
+export const selectExportImageErrorsErrors = state => state.uploads.loadingStates.errorsExport.errors;
 export const selectStopBatchLoading = state => state.uploads.loadingStates.stopBatch;
 export const selectRedriveBatchLoading = state => state.uploads.loadingStates.redriveBatch;
+export const selectRedriveBatchErrors = state => state.uploads.loadingStates.redriveBatch.errors;
+
 
 export default uploadSlice.reducer;