Adm-938 [frontend]: Add a mark to the failed time range in report pag…

…e (#1442)

* ADM-938 refactor: rename

* ADM-938 feat: add report error infos to redux

* ADM-938 feat: rename and add logic for report errors

* ADM-938 test: add test for date viewer

* ADM-938 test: fix test

* ADM-938 fix: fix eslint

* ADM-938 style: optimize style

* ADM-938 rename: rename test

* ADM-938 rename: rename test

* ADM-938 refactor: refactor

* ADM-938 refactor: rename

frontend/__tests__/components/Common/DateRangeViewer/DateRangeViewer.test.tsx

@@ -1,7 +1,11 @@
-import { nextStep, updateMetricsPageFailedTimeRangeInfos } from '@src/context/stepper/StepperSlice';
+import {
+  nextStep,
+  updateMetricsPageFailedTimeRangeInfos,
+  updateReportPageFailedTimeRangeInfos,
+} from '@src/context/stepper/StepperSlice';
 import DateRangeViewer from '@src/components/Common/DateRangeViewer';
+import { DateRangeList } from '@src/context/config/configSlice';
 import { formatDateToTimestampString } from '@src/utils/util';
-import { DateRange } from '@src/context/config/configSlice';
 import { setupStore } from '@test/utils/setupStoreUtil';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -10,7 +14,7 @@ import React from 'react';
 
 describe('DateRangeViewer', () => {
   let store = setupStore();
-  const setup = (dateRanges: DateRange) => {
+  const setup = (dateRanges: DateRangeList) => {
     return render(
       <Provider store={store}>
         <DateRangeViewer dateRangeList={dateRanges} />
@@ -62,51 +66,103 @@ describe('DateRangeViewer', () => {
     expect(getByText(/2024\/03\/21/)).toBeInTheDocument();
   });
 
-  it('should show priority high icon when click expand button and step number is 1', async () => {
-    const failedTimeRangeList = [
-      {
-        startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'),
-        errors: { boardInfoError: true },
-      },
-      {
-        startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'),
-        errors: { pipelineStepError: true },
-      },
-      {
-        startDate: formatDateToTimestampString('2024-04-01T00:00:00.000+08:00'),
-        errors: { pipelineInfoError: true },
-      },
-    ];
-    store.dispatch(nextStep());
-    store.dispatch(updateMetricsPageFailedTimeRangeInfos(failedTimeRangeList));
-    const { getByLabelText } = setup(mockDateRanges);
-    expect(screen.getByTestId('PriorityHighIcon')).toBeInTheDocument();
+  describe('DateRangeViewer in metrics page', () => {
+    beforeEach(() => {
+      store.dispatch(nextStep());
+    });
+    it('should show priority high icon given click expand button and there are some error infos', async () => {
+      const failedTimeRangeList = [
+        {
+          startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'),
+          errors: { isBoardInfoError: true },
+        },
+        {
+          startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'),
+          errors: { isPipelineStepError: true },
+        },
+        {
+          startDate: formatDateToTimestampString('2024-04-01T00:00:00.000+08:00'),
+          errors: { isPipelineInfoError: true },
+        },
+      ];
+      store.dispatch(updateMetricsPageFailedTimeRangeInfos(failedTimeRangeList));
+      const { getByLabelText } = setup(mockDateRanges);
+      expect(screen.getByTestId('PriorityHighIcon')).toBeInTheDocument();
 
-    await userEvent.click(getByLabelText('expandMore'));
-    expect(screen.getAllByTestId('PriorityHighIcon')).toHaveLength(4);
+      await userEvent.click(getByLabelText('expandMore'));
+      expect(screen.getAllByTestId('PriorityHighIcon')).toHaveLength(4);
+    });
+
+    it('should not show priority high icon given click expand button and there is no error info', async () => {
+      const failedTimeRangeList = [
+        {
+          startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'),
+          errors: { isBoardInfoError: false },
+        },
+        {
+          startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'),
+          errors: { isPipelineStepError: false },
+        },
+        {
+          startDate: formatDateToTimestampString('2024-04-01T00:00:00.000+08:00'),
+          errors: { isPipelineInfoError: false },
+        },
+      ];
+      store.dispatch(updateMetricsPageFailedTimeRangeInfos(failedTimeRangeList));
+      const { getByLabelText } = setup(mockDateRanges);
+
+      await userEvent.click(getByLabelText('expandMore'));
+
+      expect(screen.queryByTestId('PriorityHighIcon')).not.toBeInTheDocument();
+    });
   });
 
-  it('should not show priority high icon when click expand button and step number is 0', async () => {
-    const failedTimeRangeList = [
-      {
-        startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'),
-        errors: { boardInfoError: false },
-      },
-      {
-        startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'),
-        errors: { pipelineStepError: false },
-      },
-      {
-        startDate: formatDateToTimestampString('2024-04-01T00:00:00.000+08:00'),
-        errors: { pipelineInfoError: false },
-      },
-    ];
-    store.dispatch(nextStep());
-    store.dispatch(updateMetricsPageFailedTimeRangeInfos(failedTimeRangeList));
-    const { getByLabelText } = setup(mockDateRanges);
+  describe('DateRangeViewer in report page', () => {
+    beforeEach(() => {
+      store.dispatch(nextStep());
+      store.dispatch(nextStep());
+    });
+    it('should not show priority high icon in report page given click expand button and there is no error info', async () => {
+      const failedTimeRangeList = [
+        {
+          startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'),
+          errors: { isGainPollingUrlError: false },
+        },
+        {
+          startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'),
+          errors: { isPollingError: false },
+        },
+      ];
 
-    await userEvent.click(getByLabelText('expandMore'));
+      store.dispatch(updateReportPageFailedTimeRangeInfos(failedTimeRangeList));
+      const { getByLabelText } = setup(mockDateRanges);
+
+      await userEvent.click(getByLabelText('expandMore'));
+
+      expect(screen.queryByTestId('PriorityHighIcon')).not.toBeInTheDocument();
+    });
+
+    it('should show priority high icon in report page given click expand button and there are some error infos', async () => {
+      const failedTimeRangeList = [
+        {
+          startDate: formatDateToTimestampString('2024-02-01T00:00:00.000+08:00'),
+          errors: { isGainPollingUrlError: true },
+        },
+        {
+          startDate: formatDateToTimestampString('2024-03-19T00:00:00.000+08:00'),
+          errors: { isPollingError: true },
+        },
+        {
+          startDate: formatDateToTimestampString('2024-04-01T00:00:00.000+08:00'),
+          errors: { isPollingError: false },
+        },
+      ];
+      store.dispatch(updateReportPageFailedTimeRangeInfos(failedTimeRangeList));
+      const { getByLabelText } = setup(mockDateRanges);
+      expect(screen.getByTestId('PriorityHighIcon')).toBeInTheDocument();
 
-    expect(screen.queryByTestId('PriorityHighIcon')).not.toBeInTheDocument();
+      await userEvent.click(getByLabelText('expandMore'));
+      expect(screen.getAllByTestId('PriorityHighIcon')).toHaveLength(3);
+    });
   });
 });

frontend/__tests__/containers/ReportStep/ReportStep.test.tsx

@@ -16,7 +16,7 @@ import {
   SHOW_MORE,
 } from '../../fixtures';
 import {
-  DateRange,
+  DateRangeList,
   updateDateRange,
   updateJiraVerifyResponse,
   updateMetrics,
@@ -133,7 +133,7 @@ describe('Report Step', () => {
     ];
   };
   const handleSaveMock = jest.fn();
-  const setup = (params: string[], dateRange: DateRange = [fullValueDateRange]) => {
+  const setup = (params: string[], dateRange: DateRangeList = [fullValueDateRange]) => {
     dateRange && store.dispatch(updateDateRange(dateRange));
     store.dispatch(
       updateJiraVerifyResponse({

frontend/__tests__/context/stepperSlice.test.ts

@@ -22,6 +22,7 @@ describe('stepper reducer', () => {
         timeStamp: 0,
         shouldMetricsLoaded: true,
         metricsPageFailedTimeRangeInfos: {},
+        reportPageFailedTimeRangeInfos: {},
       },
       nextStep(),
     );
@@ -36,6 +37,7 @@ describe('stepper reducer', () => {
         timeStamp: 0,
         shouldMetricsLoaded: true,
         metricsPageFailedTimeRangeInfos: {},
+        reportPageFailedTimeRangeInfos: {},
       },
       backStep(),
     );
@@ -50,6 +52,7 @@ describe('stepper reducer', () => {
         timeStamp: 0,
         shouldMetricsLoaded: true,
         metricsPageFailedTimeRangeInfos: {},
+        reportPageFailedTimeRangeInfos: {},
       },
       backStep(),
     );
@@ -65,6 +68,7 @@ describe('stepper reducer', () => {
         timeStamp: 0,
         shouldMetricsLoaded: true,
         metricsPageFailedTimeRangeInfos: {},
+        reportPageFailedTimeRangeInfos: {},
       },
       updateTimeStamp(mockTime),
     );

frontend/src/clients/board/dto/request.ts

@@ -1,4 +1,4 @@
-import { DateRange } from '@src/context/config/configSlice';
+import { DateRangeList } from '@src/context/config/configSlice';
 
 export interface BoardRequestDTO {
   token: string;
@@ -20,6 +20,6 @@ export interface BoardInfoRequestDTO {
 }
 
 export interface BoardInfoConfigDTO extends BoardRequestDTO {
-  dateRanges: DateRange | null;
+  dateRanges: DateRangeList | null;
   projectKey: string;
 }

frontend/src/components/Common/DateRangeViewer/index.tsx

@@ -10,33 +10,38 @@ import {
   StyledExpandContainer,
   StyledExpandMoreIcon,
 } from './style';
-import { selectMetricsPageFailedTimeRangeInfos, selectStepNumber } from '@src/context/stepper/StepperSlice';
+import {
+  selectMetricsPageFailedTimeRangeInfos,
+  selectReportPageFailedTimeRangeInfos,
+  selectStepNumber,
+} from '@src/context/stepper/StepperSlice';
 import React, { useRef, useState, forwardRef, useEffect, useCallback } from 'react';
+import { DateRange, DateRangeList } from '@src/context/config/configSlice';
 import { formatDate, formatDateToTimestampString } from '@src/utils/util';
 import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
-import { DateRange } from '@src/context/config/configSlice';
 import { useAppSelector } from '@src/hooks';
 import { theme } from '@src/theme';
 
 type Props = {
-  dateRangeList: DateRange;
-  selectedDateRange?: Record<string, string | null | boolean | undefined>;
-  changeDateRange?: (dateRange: Record<string, string | null | boolean | undefined>) => void;
+  dateRangeList: DateRangeList;
+  selectedDateRange?: DateRange;
+  changeDateRange?: (dateRange: DateRange) => void;
   disabledAll?: boolean;
 };
 
 const DateRangeViewer = ({ dateRangeList, changeDateRange, selectedDateRange, disabledAll = true }: Props) => {
   const [showMoreDateRange, setShowMoreDateRange] = useState(false);
   const DateRangeExpandRef = useRef<HTMLDivElement>(null);
   const metricsPageFailedTimeRangeInfos = useAppSelector(selectMetricsPageFailedTimeRangeInfos);
+  const reportPageFailedTimeRangeInfos = useAppSelector(selectReportPageFailedTimeRangeInfos);
   const stepNumber = useAppSelector(selectStepNumber);
-  const backgroundColor = stepNumber === 1 ? theme.palette.secondary.dark : theme.palette.common.white;
-  const currentDateRangeHasFailed =
-    stepNumber === 1
-      ? Object.values(metricsPageFailedTimeRangeInfos).some(
-          (errorInfo) => errorInfo.pipelineInfoError || errorInfo.boardInfoError || errorInfo.pipelineStepError,
-        )
-      : false;
+  const currentDateRange: DateRange = selectedDateRange || dateRangeList[0];
+  const isMetricsPage = stepNumber === 1;
+
+  const backgroundColor = isMetricsPage ? theme.palette.secondary.dark : theme.palette.common.white;
+  const currentDateRangeHasFailed = getCurrentDateRangeHasFailed(
+    formatDateToTimestampString(currentDateRange.startDate!),
+  );
 
   const handleClickOutside = useCallback((event: MouseEvent) => {
     if (DateRangeExpandRef.current && !DateRangeExpandRef.current?.contains(event.target as Node)) {
@@ -56,17 +61,22 @@ const DateRangeViewer = ({ dateRangeList, changeDateRange, selectedDateRange, di
     };
   }, [handleClickOutside]);
 
+  function getCurrentDateRangeHasFailed(startDate: string) {
+    if (isMetricsPage) {
+      const errorInfo = metricsPageFailedTimeRangeInfos[startDate];
+      return !!(errorInfo?.isPipelineInfoError || errorInfo?.isBoardInfoError || errorInfo?.isPipelineStepError);
+    } else {
+      const errorInfo = reportPageFailedTimeRangeInfos[startDate];
+      return !!(errorInfo?.isPollingError || errorInfo?.isGainPollingUrlError);
+    }
+  }
+
   const DateRangeExpand = forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>) => {
     return (
       <DateRangeExpandContainer ref={ref} backgroundColor={backgroundColor}>
         {dateRangeList.map((dateRange) => {
           const disabled = dateRange.disabled || disabledAll;
-          const currentFailedInfo = metricsPageFailedTimeRangeInfos[formatDateToTimestampString(dateRange.startDate!)];
-          const hasMetricsError = currentFailedInfo
-            ? currentFailedInfo.pipelineInfoError ||
-              currentFailedInfo.boardInfoError ||
-              currentFailedInfo.pipelineStepError
-            : false;
+          const hasError = getCurrentDateRangeHasFailed(formatDateToTimestampString(dateRange.startDate!));
           return (
             <SingleDateRange
               disabled={disabled}
@@ -75,7 +85,7 @@ const DateRangeViewer = ({ dateRangeList, changeDateRange, selectedDateRange, di
               key={dateRange.startDate!}
             >
               <DateRangeFailedIconContainer>
-                {hasMetricsError && stepNumber === 1 && <PriorityHighIcon color='error' />}
+                {hasError && <PriorityHighIcon color='error' />}
               </DateRangeFailedIconContainer>
               {formatDate(dateRange.startDate as string)}
               <StyledArrowForward />
@@ -91,13 +101,15 @@ const DateRangeViewer = ({ dateRangeList, changeDateRange, selectedDateRange, di
     <StyledDateRangeViewerContainer
       color={disabledAll ? theme.palette.text.disabled : theme.palette.text.primary}
       backgroundColor={backgroundColor}
-      aria-label='date-range'
+      aria-label='date range'
     >
       <DateRangeContainer>
-        {currentDateRangeHasFailed && <PriorityHighIcon color='error' />}
-        {formatDate((selectedDateRange || dateRangeList[0]).startDate as string)}
+        <DateRangeFailedIconContainer>
+          {currentDateRangeHasFailed && <PriorityHighIcon color='error' />}
+        </DateRangeFailedIconContainer>
+        {formatDate(currentDateRange.startDate!)}
         <StyledArrowForward />
-        {formatDate((selectedDateRange || dateRangeList[0]).endDate as string)}
+        {formatDate(currentDateRange.endDate!)}
         <StyledCalendarToday />
       </DateRangeContainer>
       <StyledDivider orientation='vertical' />

frontend/src/containers/ConfigStep/DateRangePicker/validation.ts

@@ -1,12 +1,12 @@
 import dayjsSameOrBeforePlugin from 'dayjs/plugin/isSameOrBefore';
+import { DateRangeList } from '@src/context/config/configSlice';
 import dayjsSameOrAfterPlugin from 'dayjs/plugin/isSameOrAfter';
-import { DateRange } from '@src/context/config/configSlice';
 import dayjs, { Dayjs } from 'dayjs';
 
 dayjs.extend(dayjsSameOrBeforePlugin);
 dayjs.extend(dayjsSameOrAfterPlugin);
 
-export const calculateLastAvailableDate = (date: Dayjs, coveredRange: DateRange) => {
+export const calculateLastAvailableDate = (date: Dayjs, coveredRange: DateRangeList) => {
   let lastAvailableDate = dayjs(new Date()).startOf('date');
   let minimumDiffDays = lastAvailableDate.diff(date, 'days');
 
@@ -24,7 +24,7 @@ export const calculateLastAvailableDate = (date: Dayjs, coveredRange: DateRange)
   return lastAvailableDate;
 };
 
-export const isDateDisabled = (coveredRange: DateRange, date: Dayjs) =>
+export const isDateDisabled = (coveredRange: DateRangeList, date: Dayjs) =>
   coveredRange.some(
     ({ startDate, endDate }) => date.isSameOrAfter(startDate, 'date') && date.isSameOrBefore(endDate, 'date'),
   );