From 11b2beb8f2cd72ede2805122f7ef62f1ad4bed80 Mon Sep 17 00:00:00 2001 From: Nathaniel Rindlaub Date: Fri, 22 Dec 2023 13:37:01 -0800 Subject: [PATCH] Wire up error alerts for redriveBatch and exportErrors --- src/components/ErrorAlerts.jsx | 18 +++++++++++++++--- src/features/images/imagesSlice.js | 2 +- src/features/upload/BulkUploadTable.jsx | 12 ++++++++++-- src/features/upload/uploadSlice.js | 16 ++++++++++++---- 4 files changed, 38 insertions(+), 10 deletions(-) diff --git a/src/components/ErrorAlerts.jsx b/src/components/ErrorAlerts.jsx index 8f256f51..66e99688 100644 --- a/src/components/ErrorAlerts.jsx +++ b/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), }; diff --git a/src/features/images/imagesSlice.js b/src/features/images/imagesSlice.js index d738a9cc..77cb1f9b 100644 --- a/src/features/images/imagesSlice.js +++ b/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? diff --git a/src/features/upload/BulkUploadTable.jsx b/src/features/upload/BulkUploadTable.jsx index 9f451c54..56929fed 100644 --- a/src/features/upload/BulkUploadTable.jsx +++ b/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 ( -
+
+ {batchStatesLoading.isLoading && + + + + } @@ -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))} > diff --git a/src/features/upload/uploadSlice.js b/src/features/upload/uploadSlice.js index 8fb03718..f66bd62f 100644 --- a/src/features/upload/uploadSlice.js +++ b/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;