From 9307ed9e6e9c6c185615522548cb7973959dfb89 Mon Sep 17 00:00:00 2001 From: Mandy-Tang Date: Fri, 31 May 2024 19:55:22 +0800 Subject: [PATCH 1/5] ADM-955: [frontend] feat: use loading flag to represent api loading status --- .../Common/DateRangeViewer/index.tsx | 25 +++------- frontend/src/context/stepper/StepperSlice.tsx | 22 ++++++--- frontend/src/hooks/useGenerateReportEffect.ts | 49 ++++++++++++++----- frontend/src/hooks/useGetBoardInfo.ts | 16 ++++-- .../src/hooks/useGetMetricsStepsEffect.ts | 16 +++++- .../src/hooks/useGetPipelineToolInfoEffect.ts | 12 ++++- 6 files changed, 94 insertions(+), 46 deletions(-) diff --git a/frontend/src/components/Common/DateRangeViewer/index.tsx b/frontend/src/components/Common/DateRangeViewer/index.tsx index cd2c7c6d3..7f6216ebb 100644 --- a/frontend/src/components/Common/DateRangeViewer/index.tsx +++ b/frontend/src/components/Common/DateRangeViewer/index.tsx @@ -88,30 +88,17 @@ const DateRangeViewer = ({ function getDateRangeStatus(startDate: string) { let errorInfo: IMetricsPageFailedDateRange | IReportPageFailedDateRange; - const dateRangeStatus: { isLoading: boolean; isFailed: boolean } = { isLoading: false, isFailed: false }; + if (isMetricsPage) { errorInfo = metricsPageFailedTimeRangeInfos[startDate] || {}; - if ( - errorInfo.isBoardInfoError === undefined || - errorInfo.isPipelineInfoError === undefined || - errorInfo.isPipelineStepError === undefined - ) { - dateRangeStatus.isLoading = true; - } } else { errorInfo = reportPageFailedTimeRangeInfos[startDate] || {}; - if ( - errorInfo.isBoardMetricsError === undefined || - errorInfo.isGainPollingUrlError === undefined || - errorInfo.isPipelineMetricsError === undefined || - errorInfo.isPollingError === undefined || - errorInfo.isSourceControlMetricsError === undefined - ) { - dateRangeStatus.isLoading = true; - } } - dateRangeStatus.isFailed = Object.values(errorInfo).some((value) => value); - return dateRangeStatus; + + return { + isLoading: Object.values(errorInfo).some(({ isLoading }) => isLoading), + isFailed: Object.values(errorInfo).some(({ isLoadedWithError }) => isLoadedWithError), + }; } function getTotalDateRangeStatus() { diff --git a/frontend/src/context/stepper/StepperSlice.tsx b/frontend/src/context/stepper/StepperSlice.tsx index 5553f171c..0adbfefd3 100644 --- a/frontend/src/context/stepper/StepperSlice.tsx +++ b/frontend/src/context/stepper/StepperSlice.tsx @@ -2,18 +2,24 @@ import { STEP_NUMBER } from '@src/constants/commons'; import { createSlice } from '@reduxjs/toolkit'; import type { RootState } from '@src/store'; +interface LoadStatus { + isLoading: boolean; + isLoaded: boolean; + isLoadedWithError: boolean; +} + export interface IMetricsPageFailedDateRange { - isBoardInfoError?: boolean; - isPipelineInfoError?: boolean; - isPipelineStepError?: boolean; + boardInfo?: LoadStatus; + pipelineInfo?: LoadStatus; + pipelineStep?: LoadStatus; } export interface IReportPageFailedDateRange { - isGainPollingUrlError?: boolean; - isPollingError?: boolean; - isBoardMetricsError?: boolean; - isPipelineMetricsError?: boolean; - isSourceControlMetricsError?: boolean; + gainPollingUrl?: LoadStatus; + polling?: LoadStatus; + boardMetrics?: LoadStatus; + pipelineMetrics?: LoadStatus; + sourceControlMetrics?: LoadStatus; } export interface IPageFailedDateRangePayload { diff --git a/frontend/src/hooks/useGenerateReportEffect.ts b/frontend/src/hooks/useGenerateReportEffect.ts index 493ab027e..a49b2e13b 100644 --- a/frontend/src/hooks/useGenerateReportEffect.ts +++ b/frontend/src/hooks/useGenerateReportEffect.ts @@ -205,14 +205,19 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { }; const resetReportPageFailedTimeRangeInfos = (dateRangeList: DateRangeList) => { + const loadingStatus = { + isLoading: true, + isLoaded: false, + isLoadedWithError: false, + }; const payload = dateRangeList.map(({ startDate }) => ({ startDate: formatDateToTimestampString(startDate!), errors: { - isGainPollingUrlError: undefined, - isPollingError: undefined, - isBoardMetricsError: undefined, - isPipelineMetricsError: undefined, - isSourceControlMetricsError: undefined, + gainPollingUrl: { ...loadingStatus }, + polling: { ...loadingStatus }, + boardMetrics: { ...loadingStatus }, + pipelineMetrics: { ...loadingStatus }, + sourceControlMetrics: { ...loadingStatus }, }, })); dispatch(updateReportPageFailedTimeRangeInfos(payload)); @@ -249,11 +254,27 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { updateReportPageFailedTimeRangeInfosPayload.push({ startDate: formatDateToTimestampString(currentRes.id), errors: { - isPollingError: isRejected, - isBoardMetricsError: !isRejected && !!currentRes.value.response.reportMetricsError.boardMetricsError, - isSourceControlMetricsError: - !isRejected && !!currentRes.value.response.reportMetricsError.sourceControlMetricsError, - isPipelineMetricsError: !isRejected && !!currentRes.value.response.reportMetricsError.pipelineMetricsError, + polling: { + isLoading: false, + isLoaded: true, + isLoadedWithError: isRejected, + }, + boardMetrics: { + isLoading: false, + isLoaded: true, + isLoadedWithError: !isRejected && !!currentRes.value.response.reportMetricsError.boardMetricsError, + }, + pipelineMetrics: { + isLoading: false, + isLoaded: true, + isLoadedWithError: !isRejected && !!currentRes.value.response.reportMetricsError.pipelineMetricsError, + }, + sourceControlMetrics: { + isLoading: false, + isLoaded: true, + isLoadedWithError: + !isRejected && !!currentRes.value.response.reportMetricsError.sourceControlMetricsError, + }, }, }); } @@ -266,7 +287,13 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { res.forEach((currentRes, index) => { updateReportPageFailedTimeRangeInfosPayload.push({ startDate: formatDateToTimestampString(reportInfos[index].id), - errors: { isGainPollingUrlError: currentRes.status === REJECTED }, + errors: { + gainPollingUrl: { + isLoading: false, + isLoaded: true, + isLoadedWithError: currentRes.status === REJECTED, + }, + }, }); }); dispatch(updateReportPageFailedTimeRangeInfos(updateReportPageFailedTimeRangeInfosPayload)); diff --git a/frontend/src/hooks/useGetBoardInfo.ts b/frontend/src/hooks/useGetBoardInfo.ts index b71532640..5071a4af3 100644 --- a/frontend/src/hooks/useGetBoardInfo.ts +++ b/frontend/src/hooks/useGetBoardInfo.ts @@ -125,7 +125,11 @@ export const useGetBoardInfoEffect = (): useGetBoardInfoInterface => { dateRangeCopy.map((dateRange) => ({ startDate: formatDateToTimestampString(dateRange.startDate!), errors: { - isBoardInfoError: undefined, + boardInfo: { + isLoading: true, + isLoaded: false, + isLoadedWithError: false, + }, }, })), ), @@ -154,9 +158,13 @@ export const useGetBoardInfoEffect = (): useGetBoardInfoInterface => { dateRangeCopy.map((dateRange) => ({ startDate: formatDateToTimestampString(dateRange.startDate!), errors: { - isBoardInfoError: localFailedTimeRangeList.includes( - formatDateToTimestampString(dateRange.startDate!), - ), + boardInfo: { + isLoading: false, + isLoaded: true, + isLoadedWithError: localFailedTimeRangeList.includes( + formatDateToTimestampString(dateRange.startDate!), + ), + }, }, })), ), diff --git a/frontend/src/hooks/useGetMetricsStepsEffect.ts b/frontend/src/hooks/useGetMetricsStepsEffect.ts index 4c5c61cc1..42e8a280c 100644 --- a/frontend/src/hooks/useGetMetricsStepsEffect.ts +++ b/frontend/src/hooks/useGetMetricsStepsEffect.ts @@ -48,7 +48,13 @@ export const useGetMetricsStepsEffect = (): useGetMetricsStepsEffectInterface => params.map((param) => { return { startDate: param.startTime, - errors: { isPipelineStepError: undefined }, + errors: { + pipelineStep: { + isLoading: true, + isLoaded: false, + isLoadedWithError: false, + }, + }, }; }), ), @@ -67,7 +73,13 @@ export const useGetMetricsStepsEffect = (): useGetMetricsStepsEffectInterface => params.map((param, index) => { return { startDate: param.startTime, - errors: { isPipelineStepError: allStepsRes[index].status === REJECTED }, + errors: { + pipelineStep: { + isLoading: false, + isLoaded: true, + isLoadedWithError: allStepsRes[index].status === REJECTED, + }, + }, }; }), ), diff --git a/frontend/src/hooks/useGetPipelineToolInfoEffect.ts b/frontend/src/hooks/useGetPipelineToolInfoEffect.ts index 0156a201b..c389ac8e0 100644 --- a/frontend/src/hooks/useGetPipelineToolInfoEffect.ts +++ b/frontend/src/hooks/useGetPipelineToolInfoEffect.ts @@ -48,7 +48,11 @@ export const useGetPipelineToolInfoEffect = (): IUseVerifyPipeLineToolStateInter dateRangeList.map((dateRange) => ({ startDate: formatDateToTimestampString(dateRange.startDate!), errors: { - isPipelineInfoError: undefined, + pipelineInfo: { + isLoading: true, + isLoaded: false, + isLoadedWithError: false, + }, }, })), ), @@ -66,7 +70,11 @@ export const useGetPipelineToolInfoEffect = (): IUseVerifyPipeLineToolStateInter dateRangeList.map((dateRange) => ({ startDate: formatDateToTimestampString(dateRange.startDate!), errors: { - isPipelineInfoError: response.code !== HttpStatusCode.Ok, + pipelineInfo: { + isLoading: false, + isLoaded: true, + isLoadedWithError: response.code !== HttpStatusCode.Ok, + }, }, })), ), From d17b4077732306f13e00a34fd830cb6e4041b734 Mon Sep 17 00:00:00 2001 From: Mandy-Tang Date: Fri, 31 May 2024 22:44:10 +0800 Subject: [PATCH 2/5] ADM-955: [frontend] feat: handle when report API is failed --- .../Common/DateRangeViewer/index.tsx | 2 +- frontend/src/context/stepper/StepperSlice.tsx | 18 +++++++-------- frontend/src/hooks/useGenerateReportEffect.ts | 23 +++++++++++++++++-- 3 files changed, 31 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/Common/DateRangeViewer/index.tsx b/frontend/src/components/Common/DateRangeViewer/index.tsx index 7f6216ebb..d83ccef17 100644 --- a/frontend/src/components/Common/DateRangeViewer/index.tsx +++ b/frontend/src/components/Common/DateRangeViewer/index.tsx @@ -97,7 +97,7 @@ const DateRangeViewer = ({ return { isLoading: Object.values(errorInfo).some(({ isLoading }) => isLoading), - isFailed: Object.values(errorInfo).some(({ isLoadedWithError }) => isLoadedWithError), + isFailed: Object.values(errorInfo).some(({ isLoaded, isLoadedWithError }) => isLoaded && isLoadedWithError), }; } diff --git a/frontend/src/context/stepper/StepperSlice.tsx b/frontend/src/context/stepper/StepperSlice.tsx index 0adbfefd3..01320681c 100644 --- a/frontend/src/context/stepper/StepperSlice.tsx +++ b/frontend/src/context/stepper/StepperSlice.tsx @@ -2,24 +2,24 @@ import { STEP_NUMBER } from '@src/constants/commons'; import { createSlice } from '@reduxjs/toolkit'; import type { RootState } from '@src/store'; -interface LoadStatus { +interface LoadingStatus { isLoading: boolean; isLoaded: boolean; isLoadedWithError: boolean; } export interface IMetricsPageFailedDateRange { - boardInfo?: LoadStatus; - pipelineInfo?: LoadStatus; - pipelineStep?: LoadStatus; + boardInfo?: LoadingStatus; + pipelineInfo?: LoadingStatus; + pipelineStep?: LoadingStatus; } export interface IReportPageFailedDateRange { - gainPollingUrl?: LoadStatus; - polling?: LoadStatus; - boardMetrics?: LoadStatus; - pipelineMetrics?: LoadStatus; - sourceControlMetrics?: LoadStatus; + gainPollingUrl?: LoadingStatus; + polling?: LoadingStatus; + boardMetrics?: LoadingStatus; + pipelineMetrics?: LoadingStatus; + sourceControlMetrics?: LoadingStatus; } export interface IPageFailedDateRangePayload { diff --git a/frontend/src/hooks/useGenerateReportEffect.ts b/frontend/src/hooks/useGenerateReportEffect.ts index a49b2e13b..8462fc641 100644 --- a/frontend/src/hooks/useGenerateReportEffect.ts +++ b/frontend/src/hooks/useGenerateReportEffect.ts @@ -125,6 +125,7 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { const { pollingInfos, pollingInterval } = assemblePollingParams(res); + resetPollingLoadingStatusBeforePolling(pollingInfos.map((item) => item.id)); await pollingReport({ pollingInfos, interval: pollingInterval }); }; @@ -206,14 +207,14 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { const resetReportPageFailedTimeRangeInfos = (dateRangeList: DateRangeList) => { const loadingStatus = { - isLoading: true, + isLoading: false, isLoaded: false, isLoadedWithError: false, }; const payload = dateRangeList.map(({ startDate }) => ({ startDate: formatDateToTimestampString(startDate!), errors: { - gainPollingUrl: { ...loadingStatus }, + gainPollingUrl: { isLoading: false, isLoaded: false, isLoadedWithError: false }, polling: { ...loadingStatus }, boardMetrics: { ...loadingStatus }, pipelineMetrics: { ...loadingStatus }, @@ -223,6 +224,24 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { dispatch(updateReportPageFailedTimeRangeInfos(payload)); }; + function resetPollingLoadingStatusBeforePolling(dates: string[]) { + const loadingStatus = { + isLoading: true, + isLoaded: false, + isLoadedWithError: false, + }; + const payload = dates.map((date) => ({ + startDate: formatDateToTimestampString(date), + errors: { + polling: { ...loadingStatus }, + boardMetrics: { ...loadingStatus }, + pipelineMetrics: { ...loadingStatus }, + sourceControlMetrics: { ...loadingStatus }, + }, + })); + dispatch(updateReportPageFailedTimeRangeInfos(payload)); + } + const updateErrorAfterFetchReport = ( res: PromiseSettledResult[], metricTypes: MetricTypes[], From e1caa5665e4db62e4b10d3142bff942bacab5afc Mon Sep 17 00:00:00 2001 From: Mandy-Tang Date: Mon, 3 Jun 2024 09:58:26 +0800 Subject: [PATCH 3/5] ADM-955: [frontend] feat: fix test --- .../DateRangeViewer/DateRangeViewer.test.tsx | 113 +++++++++++------- 1 file changed, 70 insertions(+), 43 deletions(-) diff --git a/frontend/__tests__/components/Common/DateRangeViewer/DateRangeViewer.test.tsx b/frontend/__tests__/components/Common/DateRangeViewer/DateRangeViewer.test.tsx index 4b401164a..0d17adec3 100644 --- a/frontend/__tests__/components/Common/DateRangeViewer/DateRangeViewer.test.tsx +++ b/frontend/__tests__/components/Common/DateRangeViewer/DateRangeViewer.test.tsx @@ -13,6 +13,19 @@ import { Provider } from 'react-redux'; import React from 'react'; const changeDateRange = jest.fn(); +const loadedSuccess = { isLoading: false, isLoaded: true, isLoadedWithError: false }; +const allMetricsPageDataLoadedSuccess = { + boardInfo: loadedSuccess, + pipelineInfo: loadedSuccess, + pipelineStep: loadedSuccess, +}; +const allReportPageDataLoadedSuccess = { + gainPollingUrl: loadedSuccess, + polling: loadedSuccess, + boardMetrics: loadedSuccess, + pipelineMetrics: loadedSuccess, + sourceControlMetrics: loadedSuccess, +}; describe('DateRangeViewer', () => { let store = setupStore(); @@ -77,15 +90,27 @@ describe('DateRangeViewer', () => { const failedTimeRangeList = [ { startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'), - errors: { isBoardInfoError: true, isPipelineInfoError: false, isPipelineStepError: false }, + errors: { + boardInfo: { isLoading: false, isLoaded: true, isLoadedWithError: true }, + pipelineInfo: loadedSuccess, + pipelineStep: loadedSuccess, + }, }, { startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'), - errors: { isBoardInfoError: false, isPipelineInfoError: false, isPipelineStepError: false }, + errors: { + boardInfo: loadedSuccess, + pipelineInfo: loadedSuccess, + pipelineStep: loadedSuccess, + }, }, { startDate: formatDateToTimestampString('2024-04-01T00:00:00.000+08:00'), - errors: { isBoardInfoError: false, isPipelineInfoError: false, isPipelineStepError: false }, + errors: { + boardInfo: loadedSuccess, + pipelineInfo: loadedSuccess, + pipelineStep: loadedSuccess, + }, }, ]; store.dispatch(updateMetricsPageFailedTimeRangeInfos(failedTimeRangeList)); @@ -100,15 +125,27 @@ describe('DateRangeViewer', () => { const failedTimeRangeList = [ { startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'), - errors: { isBoardInfoError: undefined, isPipelineInfoError: false, isPipelineStepError: false }, + errors: { + boardInfo: { isLoading: true, isLoaded: false, isLoadedWithError: false }, + pipelineInfo: loadedSuccess, + pipelineStep: loadedSuccess, + }, }, { startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'), - errors: { isBoardInfoError: false, isPipelineInfoError: false, isPipelineStepError: false }, + errors: { + boardInfo: loadedSuccess, + pipelineInfo: loadedSuccess, + pipelineStep: loadedSuccess, + }, }, { startDate: formatDateToTimestampString('2024-04-01T00:00:00.000+08:00'), - errors: { isBoardInfoError: false, isPipelineInfoError: false, isPipelineStepError: false }, + errors: { + boardInfo: loadedSuccess, + pipelineInfo: loadedSuccess, + pipelineStep: loadedSuccess, + }, }, ]; store.dispatch(updateMetricsPageFailedTimeRangeInfos(failedTimeRangeList)); @@ -124,15 +161,15 @@ describe('DateRangeViewer', () => { const failedTimeRangeList = [ { startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'), - errors: { isBoardInfoError: false, isPipelineInfoError: false, isPipelineStepError: false }, + errors: allMetricsPageDataLoadedSuccess, }, { startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'), - errors: { isBoardInfoError: false, isPipelineInfoError: false, isPipelineStepError: false }, + errors: allMetricsPageDataLoadedSuccess, }, { startDate: formatDateToTimestampString('2024-04-01T00:00:00.000+08:00'), - errors: { isBoardInfoError: false, isPipelineInfoError: false, isPipelineStepError: false }, + errors: allMetricsPageDataLoadedSuccess, }, ]; store.dispatch(updateMetricsPageFailedTimeRangeInfos(failedTimeRangeList)); @@ -179,11 +216,11 @@ describe('DateRangeViewer', () => { const failedTimeRangeList = [ { startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'), - errors: { isGainPollingUrlError: false }, + errors: allReportPageDataLoadedSuccess, }, { startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'), - errors: { isPollingError: false }, + errors: allReportPageDataLoadedSuccess, }, ]; @@ -215,62 +252,52 @@ describe('DateRangeViewer', () => { { startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'), errors: { - isBoardMetricsError: true, - isGainPollingUrlError: false, - isPipelineMetricsError: false, - isPollingError: false, - isSourceControlMetricsError: false, + gainPollingUrl: loadedSuccess, + polling: loadedSuccess, + boardMetrics: { isLoading: false, isLoaded: true, isLoadedWithError: true }, + pipelineMetrics: loadedSuccess, + sourceControlMetrics: loadedSuccess, }, }, { startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'), errors: { - isBoardMetricsError: false, - isGainPollingUrlError: true, - isPipelineMetricsError: false, - isPollingError: false, - isSourceControlMetricsError: false, + gainPollingUrl: { isLoading: false, isLoaded: true, isLoadedWithError: true }, }, }, { startDate: formatDateToTimestampString('2024-04-01T00:00:00.000+08:00'), errors: { - isBoardMetricsError: false, - isGainPollingUrlError: false, - isPipelineMetricsError: true, - isPollingError: false, - isSourceControlMetricsError: false, + gainPollingUrl: loadedSuccess, + polling: loadedSuccess, + boardMetrics: loadedSuccess, + pipelineMetrics: { isLoading: false, isLoaded: true, isLoadedWithError: true }, + sourceControlMetrics: loadedSuccess, }, }, { startDate: formatDateToTimestampString('2023-02-01T00:00:00.000+08:00'), errors: { - isBoardMetricsError: false, - isGainPollingUrlError: false, - isPipelineMetricsError: false, - isPollingError: true, - isSourceControlMetricsError: false, + gainPollingUrl: loadedSuccess, + polling: { isLoading: false, isLoaded: true, isLoadedWithError: true }, + boardMetrics: { isLoading: false, isLoaded: true, isLoadedWithError: true }, + pipelineMetrics: { isLoading: false, isLoaded: true, isLoadedWithError: true }, + sourceControlMetrics: { isLoading: false, isLoaded: true, isLoadedWithError: true }, }, }, { startDate: formatDateToTimestampString('2023-03-19T00:00:00.000+08:00'), errors: { - isBoardMetricsError: false, - isGainPollingUrlError: false, - isPipelineMetricsError: false, - isPollingError: false, - isSourceControlMetricsError: true, + gainPollingUrl: loadedSuccess, + polling: loadedSuccess, + boardMetrics: loadedSuccess, + pipelineMetrics: loadedSuccess, + sourceControlMetrics: { isLoading: false, isLoaded: true, isLoadedWithError: true }, }, }, { startDate: formatDateToTimestampString('2023-04-01T00:00:00.000+08:00'), - errors: { - isBoardMetricsError: false, - isGainPollingUrlError: false, - isPipelineMetricsError: false, - isPollingError: false, - isSourceControlMetricsError: false, - }, + errors: allReportPageDataLoadedSuccess, }, ]; store.dispatch(updateReportPageFailedTimeRangeInfos(failedTimeRangeList)); From 51872c4ce12fe76e2116d4f51c2ac5f10e8e4ed6 Mon Sep 17 00:00:00 2001 From: Mandy-Tang Date: Mon, 3 Jun 2024 11:00:43 +0800 Subject: [PATCH 4/5] ADM-955: [frontend] feat: refactor errors to loading status --- .../DateRangeViewer/DateRangeViewer.test.tsx | 48 +++++++-------- .../__tests__/context/stepperSlice.test.ts | 16 ++--- .../Common/DateRangeViewer/index.tsx | 14 ++--- frontend/src/context/stepper/StepperSlice.tsx | 60 +++++++++---------- frontend/src/hooks/useGenerateReportEffect.ts | 38 ++++++------ frontend/src/hooks/useGetBoardInfo.ts | 10 ++-- .../src/hooks/useGetMetricsStepsEffect.ts | 10 ++-- .../src/hooks/useGetPipelineToolInfoEffect.ts | 10 ++-- 8 files changed, 103 insertions(+), 103 deletions(-) diff --git a/frontend/__tests__/components/Common/DateRangeViewer/DateRangeViewer.test.tsx b/frontend/__tests__/components/Common/DateRangeViewer/DateRangeViewer.test.tsx index 0d17adec3..10ed03165 100644 --- a/frontend/__tests__/components/Common/DateRangeViewer/DateRangeViewer.test.tsx +++ b/frontend/__tests__/components/Common/DateRangeViewer/DateRangeViewer.test.tsx @@ -1,7 +1,7 @@ import { nextStep, - updateMetricsPageFailedTimeRangeInfos, - updateReportPageFailedTimeRangeInfos, + updateMetricsPageLoadingStatus, + updateReportPageLoadingStatus, } from '@src/context/stepper/StepperSlice'; import { formatDateToTimestampString, sortDateRanges } from '@src/utils/util'; import DateRangeViewer from '@src/components/Common/DateRangeViewer'; @@ -90,7 +90,7 @@ describe('DateRangeViewer', () => { const failedTimeRangeList = [ { startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'), - errors: { + loadingStatus: { boardInfo: { isLoading: false, isLoaded: true, isLoadedWithError: true }, pipelineInfo: loadedSuccess, pipelineStep: loadedSuccess, @@ -98,7 +98,7 @@ describe('DateRangeViewer', () => { }, { startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'), - errors: { + loadingStatus: { boardInfo: loadedSuccess, pipelineInfo: loadedSuccess, pipelineStep: loadedSuccess, @@ -106,14 +106,14 @@ describe('DateRangeViewer', () => { }, { startDate: formatDateToTimestampString('2024-04-01T00:00:00.000+08:00'), - errors: { + loadingStatus: { boardInfo: loadedSuccess, pipelineInfo: loadedSuccess, pipelineStep: loadedSuccess, }, }, ]; - store.dispatch(updateMetricsPageFailedTimeRangeInfos(failedTimeRangeList)); + store.dispatch(updateMetricsPageLoadingStatus(failedTimeRangeList)); const { getByLabelText } = setup(mockDateRanges); expect(screen.getByTestId('PriorityHighIcon')).toBeInTheDocument(); @@ -125,7 +125,7 @@ describe('DateRangeViewer', () => { const failedTimeRangeList = [ { startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'), - errors: { + loadingStatus: { boardInfo: { isLoading: true, isLoaded: false, isLoadedWithError: false }, pipelineInfo: loadedSuccess, pipelineStep: loadedSuccess, @@ -133,7 +133,7 @@ describe('DateRangeViewer', () => { }, { startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'), - errors: { + loadingStatus: { boardInfo: loadedSuccess, pipelineInfo: loadedSuccess, pipelineStep: loadedSuccess, @@ -141,14 +141,14 @@ describe('DateRangeViewer', () => { }, { startDate: formatDateToTimestampString('2024-04-01T00:00:00.000+08:00'), - errors: { + loadingStatus: { boardInfo: loadedSuccess, pipelineInfo: loadedSuccess, pipelineStep: loadedSuccess, }, }, ]; - store.dispatch(updateMetricsPageFailedTimeRangeInfos(failedTimeRangeList)); + store.dispatch(updateMetricsPageLoadingStatus(failedTimeRangeList)); const { getByLabelText } = setup(mockDateRanges); expect(screen.getByLabelText('loading icon in date')).toBeInTheDocument(); @@ -161,18 +161,18 @@ describe('DateRangeViewer', () => { const failedTimeRangeList = [ { startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'), - errors: allMetricsPageDataLoadedSuccess, + loadingStatus: allMetricsPageDataLoadedSuccess, }, { startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'), - errors: allMetricsPageDataLoadedSuccess, + loadingStatus: allMetricsPageDataLoadedSuccess, }, { startDate: formatDateToTimestampString('2024-04-01T00:00:00.000+08:00'), - errors: allMetricsPageDataLoadedSuccess, + loadingStatus: allMetricsPageDataLoadedSuccess, }, ]; - store.dispatch(updateMetricsPageFailedTimeRangeInfos(failedTimeRangeList)); + store.dispatch(updateMetricsPageLoadingStatus(failedTimeRangeList)); const { getByLabelText } = setup(mockDateRanges); expect(screen.getByTestId('CheckIcon')).toBeInTheDocument(); @@ -216,15 +216,15 @@ describe('DateRangeViewer', () => { const failedTimeRangeList = [ { startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'), - errors: allReportPageDataLoadedSuccess, + loadingStatus: allReportPageDataLoadedSuccess, }, { startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'), - errors: allReportPageDataLoadedSuccess, + loadingStatus: allReportPageDataLoadedSuccess, }, ]; - store.dispatch(updateReportPageFailedTimeRangeInfos(failedTimeRangeList)); + store.dispatch(updateReportPageLoadingStatus(failedTimeRangeList)); const { getByLabelText } = setup(mockDateRanges); await userEvent.click(getByLabelText('expandMore')); @@ -251,7 +251,7 @@ describe('DateRangeViewer', () => { const failedTimeRangeList = [ { startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'), - errors: { + loadingStatus: { gainPollingUrl: loadedSuccess, polling: loadedSuccess, boardMetrics: { isLoading: false, isLoaded: true, isLoadedWithError: true }, @@ -261,13 +261,13 @@ describe('DateRangeViewer', () => { }, { startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'), - errors: { + loadingStatus: { gainPollingUrl: { isLoading: false, isLoaded: true, isLoadedWithError: true }, }, }, { startDate: formatDateToTimestampString('2024-04-01T00:00:00.000+08:00'), - errors: { + loadingStatus: { gainPollingUrl: loadedSuccess, polling: loadedSuccess, boardMetrics: loadedSuccess, @@ -277,7 +277,7 @@ describe('DateRangeViewer', () => { }, { startDate: formatDateToTimestampString('2023-02-01T00:00:00.000+08:00'), - errors: { + loadingStatus: { gainPollingUrl: loadedSuccess, polling: { isLoading: false, isLoaded: true, isLoadedWithError: true }, boardMetrics: { isLoading: false, isLoaded: true, isLoadedWithError: true }, @@ -287,7 +287,7 @@ describe('DateRangeViewer', () => { }, { startDate: formatDateToTimestampString('2023-03-19T00:00:00.000+08:00'), - errors: { + loadingStatus: { gainPollingUrl: loadedSuccess, polling: loadedSuccess, boardMetrics: loadedSuccess, @@ -297,10 +297,10 @@ describe('DateRangeViewer', () => { }, { startDate: formatDateToTimestampString('2023-04-01T00:00:00.000+08:00'), - errors: allReportPageDataLoadedSuccess, + loadingStatus: allReportPageDataLoadedSuccess, }, ]; - store.dispatch(updateReportPageFailedTimeRangeInfos(failedTimeRangeList)); + store.dispatch(updateReportPageLoadingStatus(failedTimeRangeList)); const { getByLabelText } = setup(dateRangeList); expect(screen.getByTestId('PriorityHighIcon')).toBeInTheDocument(); diff --git a/frontend/__tests__/context/stepperSlice.test.ts b/frontend/__tests__/context/stepperSlice.test.ts index 9f0bec180..87be03999 100644 --- a/frontend/__tests__/context/stepperSlice.test.ts +++ b/frontend/__tests__/context/stepperSlice.test.ts @@ -21,8 +21,8 @@ describe('stepper reducer', () => { stepNumber: 0, timeStamp: 0, shouldMetricsLoaded: true, - metricsPageFailedTimeRangeInfos: {}, - reportPageFailedTimeRangeInfos: {}, + metricsPageTimeRangeLoadingStatus: {}, + reportPageTimeRangeLoadingStatus: {}, }, nextStep(), ); @@ -36,8 +36,8 @@ describe('stepper reducer', () => { stepNumber: 0, timeStamp: 0, shouldMetricsLoaded: true, - metricsPageFailedTimeRangeInfos: {}, - reportPageFailedTimeRangeInfos: {}, + metricsPageTimeRangeLoadingStatus: {}, + reportPageTimeRangeLoadingStatus: {}, }, backStep(), ); @@ -51,8 +51,8 @@ describe('stepper reducer', () => { stepNumber: 2, timeStamp: 0, shouldMetricsLoaded: true, - metricsPageFailedTimeRangeInfos: {}, - reportPageFailedTimeRangeInfos: {}, + metricsPageTimeRangeLoadingStatus: {}, + reportPageTimeRangeLoadingStatus: {}, }, backStep(), ); @@ -67,8 +67,8 @@ describe('stepper reducer', () => { stepNumber: 2, timeStamp: 0, shouldMetricsLoaded: true, - metricsPageFailedTimeRangeInfos: {}, - reportPageFailedTimeRangeInfos: {}, + metricsPageTimeRangeLoadingStatus: {}, + reportPageTimeRangeLoadingStatus: {}, }, updateTimeStamp(mockTime), ); diff --git a/frontend/src/components/Common/DateRangeViewer/index.tsx b/frontend/src/components/Common/DateRangeViewer/index.tsx index d83ccef17..f0726aa1c 100644 --- a/frontend/src/components/Common/DateRangeViewer/index.tsx +++ b/frontend/src/components/Common/DateRangeViewer/index.tsx @@ -11,8 +11,8 @@ import { StyledExpandMoreIcon, } from './style'; import { - IMetricsPageFailedDateRange, - IReportPageFailedDateRange, + IMetricsPageLoadingStatus, + IReportPageLoadingStatus, selectMetricsPageFailedTimeRangeInfos, selectReportPageFailedTimeRangeInfos, selectStepNumber, @@ -42,8 +42,8 @@ const DateRangeViewer = ({ }: Props) => { const [showMoreDateRange, setShowMoreDateRange] = useState(false); const DateRangeExpandRef = useRef(null); - const metricsPageFailedTimeRangeInfos = useAppSelector(selectMetricsPageFailedTimeRangeInfos); - const reportPageFailedTimeRangeInfos = useAppSelector(selectReportPageFailedTimeRangeInfos); + const metricsPageTimeRangeLoadingStatus = useAppSelector(selectMetricsPageFailedTimeRangeInfos); + const reportPageTimeRangeLoadingStatus = useAppSelector(selectReportPageFailedTimeRangeInfos); const stepNumber = useAppSelector(selectStepNumber); const currentDateRange: DateRange = selectedDateRange || dateRangeList[0]; const isMetricsPage = stepNumber === STEP_NUMBER.METRICS_PAGE; @@ -87,12 +87,12 @@ const DateRangeViewer = ({ }, [handleClickOutside]); function getDateRangeStatus(startDate: string) { - let errorInfo: IMetricsPageFailedDateRange | IReportPageFailedDateRange; + let errorInfo: IMetricsPageLoadingStatus | IReportPageLoadingStatus; if (isMetricsPage) { - errorInfo = metricsPageFailedTimeRangeInfos[startDate] || {}; + errorInfo = metricsPageTimeRangeLoadingStatus[startDate] || {}; } else { - errorInfo = reportPageFailedTimeRangeInfos[startDate] || {}; + errorInfo = reportPageTimeRangeLoadingStatus[startDate] || {}; } return { diff --git a/frontend/src/context/stepper/StepperSlice.tsx b/frontend/src/context/stepper/StepperSlice.tsx index 01320681c..9c96f1c12 100644 --- a/frontend/src/context/stepper/StepperSlice.tsx +++ b/frontend/src/context/stepper/StepperSlice.tsx @@ -8,13 +8,13 @@ interface LoadingStatus { isLoadedWithError: boolean; } -export interface IMetricsPageFailedDateRange { +export interface IMetricsPageLoadingStatus { boardInfo?: LoadingStatus; pipelineInfo?: LoadingStatus; pipelineStep?: LoadingStatus; } -export interface IReportPageFailedDateRange { +export interface IReportPageLoadingStatus { gainPollingUrl?: LoadingStatus; polling?: LoadingStatus; boardMetrics?: LoadingStatus; @@ -22,25 +22,25 @@ export interface IReportPageFailedDateRange { sourceControlMetrics?: LoadingStatus; } -export interface IPageFailedDateRangePayload { +export interface IPageLoadingStatusPayload { startDate: string; - errors: T; + loadingStatus: T; } export interface StepState { stepNumber: number; timeStamp: number; shouldMetricsLoaded: boolean; - metricsPageFailedTimeRangeInfos: Record; - reportPageFailedTimeRangeInfos: Record; + metricsPageTimeRangeLoadingStatus: Record; + reportPageTimeRangeLoadingStatus: Record; } const initialState: StepState = { stepNumber: STEP_NUMBER.CONFIG_PAGE, timeStamp: 0, shouldMetricsLoaded: true, - metricsPageFailedTimeRangeInfos: {}, - reportPageFailedTimeRangeInfos: {}, + metricsPageTimeRangeLoadingStatus: {}, + reportPageTimeRangeLoadingStatus: {}, }; export const stepperSlice = createSlice({ @@ -53,10 +53,10 @@ export const stepperSlice = createSlice({ }, nextStep: (state) => { if (state.shouldMetricsLoaded && state.stepNumber === STEP_NUMBER.CONFIG_PAGE) { - state.metricsPageFailedTimeRangeInfos = {}; + state.metricsPageTimeRangeLoadingStatus = {}; } if (state.stepNumber === STEP_NUMBER.METRICS_PAGE) { - state.reportPageFailedTimeRangeInfos = {}; + state.reportPageTimeRangeLoadingStatus = {}; } state.shouldMetricsLoaded = true; state.stepNumber += 1; @@ -71,30 +71,30 @@ export const stepperSlice = createSlice({ updateTimeStamp: (state, action) => { state.timeStamp = action.payload; }, - updateMetricsPageFailedTimeRangeInfos: (state, action) => { - const errorInfoList: IPageFailedDateRangePayload[] = action.payload; + updateMetricsPageLoadingStatus: (state, action) => { + const loadingStatusList: IPageLoadingStatusPayload[] = action.payload; - errorInfoList.forEach((singleTimeRangeInfo) => updateInfo(singleTimeRangeInfo)); + loadingStatusList.forEach((singleTimeRangeInfo) => updateInfo(singleTimeRangeInfo)); - function updateInfo(errorInfo: IPageFailedDateRangePayload) { - const { startDate, errors } = errorInfo; - state.metricsPageFailedTimeRangeInfos[startDate] = { - ...state.metricsPageFailedTimeRangeInfos[startDate], - ...errors, + function updateInfo(loadingInfo: IPageLoadingStatusPayload) { + const { startDate, loadingStatus } = loadingInfo; + state.metricsPageTimeRangeLoadingStatus[startDate] = { + ...state.metricsPageTimeRangeLoadingStatus[startDate], + ...loadingStatus, }; } }, - updateReportPageFailedTimeRangeInfos: (state, action) => { - const errorInfoList: IPageFailedDateRangePayload[] = action.payload; + updateReportPageLoadingStatus: (state, action) => { + const loadingStatusList: IPageLoadingStatusPayload[] = action.payload; - errorInfoList.forEach((singleTimeRangeInfo) => updateInfo(singleTimeRangeInfo)); + loadingStatusList.forEach((singleTimeRangeInfo) => updateInfo(singleTimeRangeInfo)); - function updateInfo(errorInfo: IPageFailedDateRangePayload) { - const { startDate, errors } = errorInfo; - state.reportPageFailedTimeRangeInfos[startDate] = { - ...state.reportPageFailedTimeRangeInfos[startDate], - ...errors, + function updateInfo(loadingInfo: IPageLoadingStatusPayload) { + const { startDate, loadingStatus } = loadingInfo; + state.reportPageTimeRangeLoadingStatus[startDate] = { + ...state.reportPageTimeRangeLoadingStatus[startDate], + ...loadingStatus, }; } }, @@ -107,16 +107,16 @@ export const { backStep, updateShouldMetricsLoaded, updateTimeStamp, - updateMetricsPageFailedTimeRangeInfos, - updateReportPageFailedTimeRangeInfos, + updateMetricsPageLoadingStatus, + updateReportPageLoadingStatus, } = stepperSlice.actions; export const selectStepNumber = (state: RootState) => state.stepper.stepNumber; export const selectTimeStamp = (state: RootState) => state.stepper.timeStamp; export const shouldMetricsLoaded = (state: RootState) => state.stepper.shouldMetricsLoaded; export const selectMetricsPageFailedTimeRangeInfos = (state: RootState) => - state.stepper.metricsPageFailedTimeRangeInfos; + state.stepper.metricsPageTimeRangeLoadingStatus; -export const selectReportPageFailedTimeRangeInfos = (state: RootState) => state.stepper.reportPageFailedTimeRangeInfos; +export const selectReportPageFailedTimeRangeInfos = (state: RootState) => state.stepper.reportPageTimeRangeLoadingStatus; export default stepperSlice.reducer; diff --git a/frontend/src/hooks/useGenerateReportEffect.ts b/frontend/src/hooks/useGenerateReportEffect.ts index 8462fc641..7b4d741ea 100644 --- a/frontend/src/hooks/useGenerateReportEffect.ts +++ b/frontend/src/hooks/useGenerateReportEffect.ts @@ -1,7 +1,7 @@ import { - IPageFailedDateRangePayload, - IReportPageFailedDateRange, - updateReportPageFailedTimeRangeInfos, + IPageLoadingStatusPayload, + IReportPageLoadingStatus, + updateReportPageLoadingStatus, } from '@src/context/stepper/StepperSlice'; import { ReportCallbackResponse, ReportResponseDTO } from '@src/clients/report/dto/response'; import { exportValidityTimeMapper } from '@src/hooks/reportMapper/exportValidityTime'; @@ -106,7 +106,7 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { nextHasPollingStarted = true; setHasPollingStarted(nextHasPollingStarted); - resetReportPageFailedTimeRangeInfos(dateRangeList); + resetReportPageLoadingStatus(dateRangeList); const res: PromiseSettledResult[] = await Promise.allSettled( dateRangeList.map(({ startDate, endDate }) => @@ -168,7 +168,7 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { const pollingResponsesWithId = assemblePollingResWithId(pollingResponses, pollingInfos); setReportInfos((preReportInfos) => getReportInfosAfterPolling(preReportInfos, pollingResponsesWithId)); - updateReportPageFailedTimeRangeInfosAfterPolling(pollingResponsesWithId); + updateReportPageLoadingStatusAfterPolling(pollingResponsesWithId); const nextPollingInfos = getNextPollingInfos(pollingResponsesWithId, pollingInfos); if (nextPollingInfos.length === 0) { @@ -205,7 +205,7 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { }); }; - const resetReportPageFailedTimeRangeInfos = (dateRangeList: DateRangeList) => { + const resetReportPageLoadingStatus = (dateRangeList: DateRangeList) => { const loadingStatus = { isLoading: false, isLoaded: false, @@ -213,7 +213,7 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { }; const payload = dateRangeList.map(({ startDate }) => ({ startDate: formatDateToTimestampString(startDate!), - errors: { + loadingStatus: { gainPollingUrl: { isLoading: false, isLoaded: false, isLoadedWithError: false }, polling: { ...loadingStatus }, boardMetrics: { ...loadingStatus }, @@ -221,7 +221,7 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { sourceControlMetrics: { ...loadingStatus }, }, })); - dispatch(updateReportPageFailedTimeRangeInfos(payload)); + dispatch(updateReportPageLoadingStatus(payload)); }; function resetPollingLoadingStatusBeforePolling(dates: string[]) { @@ -232,21 +232,21 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { }; const payload = dates.map((date) => ({ startDate: formatDateToTimestampString(date), - errors: { + loadingStatus: { polling: { ...loadingStatus }, boardMetrics: { ...loadingStatus }, pipelineMetrics: { ...loadingStatus }, sourceControlMetrics: { ...loadingStatus }, }, })); - dispatch(updateReportPageFailedTimeRangeInfos(payload)); + dispatch(updateReportPageLoadingStatus(payload)); } const updateErrorAfterFetchReport = ( res: PromiseSettledResult[], metricTypes: MetricTypes[], ) => { - updateReportPageFailedTimeRangeInfosAfterReport(res); + updateReportPageLoadingStatusAfterReport(res); if (res.filter(({ status }) => status === REJECTED).length === 0) return; @@ -263,16 +263,16 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { }); }; - function updateReportPageFailedTimeRangeInfosAfterPolling( + function updateReportPageLoadingStatusAfterPolling( pollingResponsesWithId: PromiseSettledResultWithId[], ) { - const updateReportPageFailedTimeRangeInfosPayload: IPageFailedDateRangePayload[] = []; + const updateReportPageFailedTimeRangeInfosPayload: IPageLoadingStatusPayload[] = []; pollingResponsesWithId.forEach((currentRes) => { const isRejected = currentRes.status === REJECTED; if (isRejected || currentRes.value.response.allMetricsCompleted) { updateReportPageFailedTimeRangeInfosPayload.push({ startDate: formatDateToTimestampString(currentRes.id), - errors: { + loadingStatus: { polling: { isLoading: false, isLoaded: true, @@ -298,15 +298,15 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { }); } }); - dispatch(updateReportPageFailedTimeRangeInfos(updateReportPageFailedTimeRangeInfosPayload)); + dispatch(updateReportPageLoadingStatus(updateReportPageFailedTimeRangeInfosPayload)); } - function updateReportPageFailedTimeRangeInfosAfterReport(res: PromiseSettledResult[]) { - const updateReportPageFailedTimeRangeInfosPayload: IPageFailedDateRangePayload[] = []; + function updateReportPageLoadingStatusAfterReport(res: PromiseSettledResult[]) { + const updateReportPageFailedTimeRangeInfosPayload: IPageLoadingStatusPayload[] = []; res.forEach((currentRes, index) => { updateReportPageFailedTimeRangeInfosPayload.push({ startDate: formatDateToTimestampString(reportInfos[index].id), - errors: { + loadingStatus: { gainPollingUrl: { isLoading: false, isLoaded: true, @@ -315,7 +315,7 @@ export const useGenerateReportEffect = (): IUseGenerateReportEffect => { }, }); }); - dispatch(updateReportPageFailedTimeRangeInfos(updateReportPageFailedTimeRangeInfosPayload)); + dispatch(updateReportPageLoadingStatus(updateReportPageFailedTimeRangeInfosPayload)); } const assemblePollingParams = (res: PromiseSettledResult[]) => { diff --git a/frontend/src/hooks/useGetBoardInfo.ts b/frontend/src/hooks/useGetBoardInfo.ts index 5071a4af3..ab630caee 100644 --- a/frontend/src/hooks/useGetBoardInfo.ts +++ b/frontend/src/hooks/useGetBoardInfo.ts @@ -1,5 +1,5 @@ import { AxiosRequestErrorCode, BOARD_CONFIG_INFO_ERROR, BOARD_CONFIG_INFO_TITLE } from '@src/constants/resources'; -import { updateMetricsPageFailedTimeRangeInfos } from '@src/context/stepper/StepperSlice'; +import { updateMetricsPageLoadingStatus } from '@src/context/stepper/StepperSlice'; import { boardInfoClient } from '@src/clients/board/BoardInfoClient'; import { BoardInfoConfigDTO } from '@src/clients/board/dto/request'; import { MetricsDataFailStatus } from '@src/constants/commons'; @@ -121,10 +121,10 @@ export const useGetBoardInfoEffect = (): useGetBoardInfoInterface => { }); dispatch( - updateMetricsPageFailedTimeRangeInfos( + updateMetricsPageLoadingStatus( dateRangeCopy.map((dateRange) => ({ startDate: formatDateToTimestampString(dateRange.startDate!), - errors: { + loadingStatus: { boardInfo: { isLoading: true, isLoaded: false, @@ -154,10 +154,10 @@ export const useGetBoardInfoEffect = (): useGetBoardInfoInterface => { .finally(() => { setIsLoading(false); dispatch( - updateMetricsPageFailedTimeRangeInfos( + updateMetricsPageLoadingStatus( dateRangeCopy.map((dateRange) => ({ startDate: formatDateToTimestampString(dateRange.startDate!), - errors: { + loadingStatus: { boardInfo: { isLoading: false, isLoaded: true, diff --git a/frontend/src/hooks/useGetMetricsStepsEffect.ts b/frontend/src/hooks/useGetMetricsStepsEffect.ts index 42e8a280c..bc7ad8fed 100644 --- a/frontend/src/hooks/useGetMetricsStepsEffect.ts +++ b/frontend/src/hooks/useGetMetricsStepsEffect.ts @@ -1,6 +1,6 @@ -import { updateMetricsPageFailedTimeRangeInfos } from '@src/context/stepper/StepperSlice'; import { updateShouldRetryPipelineConfig } from '@src/context/Metrics/metricsSlice'; import { IStepsParams, IStepsRes, metricsClient } from '@src/clients/MetricsClient'; +import { updateMetricsPageLoadingStatus } from '@src/context/stepper/StepperSlice'; import { MetricsDataFailStatus, DURATION } from '@src/constants/commons'; import { FULFILLED, MESSAGE, REJECTED } from '@src/constants/resources'; import { useAppDispatch } from '@src/hooks/useAppDispatch'; @@ -44,11 +44,11 @@ export const useGetMetricsStepsEffect = (): useGetMetricsStepsEffectInterface => setIsLoading(true); dispatch( - updateMetricsPageFailedTimeRangeInfos( + updateMetricsPageLoadingStatus( params.map((param) => { return { startDate: param.startTime, - errors: { + loadingStatus: { pipelineStep: { isLoading: true, isLoaded: false, @@ -69,11 +69,11 @@ export const useGetMetricsStepsEffect = (): useGetMetricsStepsEffectInterface => const hasFulfilled = allStepsRes.some((stepInfo) => stepInfo.status === FULFILLED); dispatch( - updateMetricsPageFailedTimeRangeInfos( + updateMetricsPageLoadingStatus( params.map((param, index) => { return { startDate: param.startTime, - errors: { + loadingStatus: { pipelineStep: { isLoading: false, isLoaded: true, diff --git a/frontend/src/hooks/useGetPipelineToolInfoEffect.ts b/frontend/src/hooks/useGetPipelineToolInfoEffect.ts index c389ac8e0..ebf18674b 100644 --- a/frontend/src/hooks/useGetPipelineToolInfoEffect.ts +++ b/frontend/src/hooks/useGetPipelineToolInfoEffect.ts @@ -4,9 +4,9 @@ import { selectPipelineTool, selectDateRange, } from '@src/context/config/configSlice'; -import { shouldMetricsLoaded, updateMetricsPageFailedTimeRangeInfos } from '@src/context/stepper/StepperSlice'; import { pipelineToolClient, IGetPipelineToolInfoResult } from '@src/clients/pipeline/PipelineToolClient'; import { selectShouldGetPipelineConfig, updatePipelineSettings } from '@src/context/Metrics/metricsSlice'; +import { shouldMetricsLoaded, updateMetricsPageLoadingStatus } from '@src/context/stepper/StepperSlice'; import { clearMetricsPipelineFormMeta } from '@src/context/meta/metaSlice'; import { useEffect, useState, useRef, useCallback } from 'react'; import { formatDateToTimestampString } from '@src/utils/util'; @@ -44,10 +44,10 @@ export const useGetPipelineToolInfoEffect = (): IUseVerifyPipeLineToolStateInter }; setIsLoading(true); dispatch( - updateMetricsPageFailedTimeRangeInfos( + updateMetricsPageLoadingStatus( dateRangeList.map((dateRange) => ({ startDate: formatDateToTimestampString(dateRange.startDate!), - errors: { + loadingStatus: { pipelineInfo: { isLoading: true, isLoaded: false, @@ -66,10 +66,10 @@ export const useGetPipelineToolInfoEffect = (): IUseVerifyPipeLineToolStateInter dispatch(updatePipelineSettings({ ...response.data, isProjectCreated })); } dispatch( - updateMetricsPageFailedTimeRangeInfos( + updateMetricsPageLoadingStatus( dateRangeList.map((dateRange) => ({ startDate: formatDateToTimestampString(dateRange.startDate!), - errors: { + loadingStatus: { pipelineInfo: { isLoading: false, isLoaded: true, From 1176e81def7b57c5edd1863c54c992005ec67a27 Mon Sep 17 00:00:00 2001 From: Mandy-Tang Date: Mon, 3 Jun 2024 11:14:32 +0800 Subject: [PATCH 5/5] ADM-955: [frontend] feat: fix lint --- frontend/src/context/stepper/StepperSlice.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/context/stepper/StepperSlice.tsx b/frontend/src/context/stepper/StepperSlice.tsx index 9c96f1c12..b7eb905a3 100644 --- a/frontend/src/context/stepper/StepperSlice.tsx +++ b/frontend/src/context/stepper/StepperSlice.tsx @@ -117,6 +117,7 @@ export const shouldMetricsLoaded = (state: RootState) => state.stepper.shouldMet export const selectMetricsPageFailedTimeRangeInfos = (state: RootState) => state.stepper.metricsPageTimeRangeLoadingStatus; -export const selectReportPageFailedTimeRangeInfos = (state: RootState) => state.stepper.reportPageTimeRangeLoadingStatus; +export const selectReportPageFailedTimeRangeInfos = (state: RootState) => + state.stepper.reportPageTimeRangeLoadingStatus; export default stepperSlice.reducer;