MON-1440+1927+1928+1932 [Bug Fixes & Reference Comparison] (#24)

Author: lironhamra

cypress/e2e/analysis_screen_advanced.cy.ts

@@ -10,9 +10,7 @@ describe("Analysis screen drilldown", () => {
       })
       .then(() => {
         cy.visit("/analysis");
-
-        // toggle comparison mode
-        cy.contains("span", "Compare data with previous period").click({
+        cy.contains("span", "Compare with previous period").click({
           force: true,
         });
         // cy.get('input[value="11/05/2022 - 11/08/2022"]')

frontend/src/components/AlertsDrawer/components/AlertsDrawerHeader.tsx

@@ -141,7 +141,7 @@ export const AlertsDrawerHeader = ({
       monitor?.additional_kwargs?.res_conf ? monitor?.additional_kwargs?.res_conf[0] : 'N/A',
       monitor?.data_filters ? `${monitor?.data_filters.filters[0].column}` : 'N/A',
       monitor?.frequency ? processFrequency(dayjs.duration(FrequencyMap[monitor.frequency], 'seconds')) : 'N/A',
-      monitor?.aggregation_window ? processFrequency(dayjs.duration(monitor.aggregation_window, 'seconds')) : 'N/A'
+      monitor?.aggregation_window ?? 'N/A'
     ],
     [
       condition.operator,

frontend/src/components/AnalysisHeader/components/AnalysisHeaderOptions.tsx

@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
 import { ModelManagmentSchema, useGetModelAutoFrequencyApiV1ModelsModelIdAutoFrequencyGet } from 'api/generated';
 import { AnalysisContext, frequencyData } from 'helpers/context/AnalysisProvider';
 
-import { MenuItem, SelectChangeEvent } from '@mui/material';
+import { Box, MenuItem, SelectChangeEvent } from '@mui/material';
 
 import { DateRange } from 'components/DateRange';
 import { CustomStyledSelect } from 'components/CustomStyledSelect';
@@ -17,12 +17,20 @@ interface AnalysisHeaderOptions {
   model: ModelManagmentSchema;
 }
 
-const MAX_WINDOWS_COUNT = 31
+const MAX_WINDOWS_COUNT = 31;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => {
-  const { compareWithPreviousPeriod, setCompareWithPreviousPeriod, period, setPeriod, frequency, setFrequency } =
-    useContext(AnalysisContext);
+  const {
+    compareWithPreviousPeriod,
+    setCompareWithPreviousPeriod,
+    period,
+    setPeriod,
+    frequency,
+    setFrequency
+    // compareByReference,
+    // setCompareByReference
+  } = useContext(AnalysisContext);
 
   const [minDate, setMinDate] = useState<Date | null>(
     model.start_time && frequency ? dayjs.unix(model.start_time).toDate() : null
@@ -33,10 +41,10 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => {
 
   useEffect(() => {
     if (frequency) {
-      model.start_time && setMinDate(dayjs.unix(model.start_time).toDate())
-      model.latest_time && setMaxDate(dayjs.unix(model.latest_time + frequencyValues.DAY).toDate())
+      model.start_time && setMinDate(dayjs.unix(model.start_time).toDate());
+      model.latest_time && setMaxDate(dayjs.unix(model.latest_time + frequencyValues.DAY).toDate());
     }
-  }, [model, frequency])
+  }, [model, frequency]);
 
   const { data: defaultFrequency } = useGetModelAutoFrequencyApiV1ModelsModelIdAutoFrequencyGet(model.id, undefined, {
     query: {
@@ -48,8 +56,8 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => {
     if (startTime && endTime) {
       if (dayjs(startTime).isSame(dayjs(endTime))) {
         startTime.setDate(startTime.getDate() - 1);
-        startTime.setHours(0,0,0,0);
-        endTime.setHours(23,59,59,999);
+        startTime.setHours(0, 0, 0, 0);
+        endTime.setHours(23, 59, 59, 999);
       }
       setPeriod([startTime, endTime]);
     }
@@ -65,7 +73,9 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => {
       windows_count = 31;
     }
     if (period) {
-      let start_date = dayjs(period[1]).subtract(value * windows_count, 'second').toDate();
+      let start_date = dayjs(period[1])
+        .subtract(value * windows_count, 'second')
+        .toDate();
       if (model.start_time) {
         const model_start_date = dayjs.unix(model.start_time).toDate();
         if (model_start_date > start_date) {
@@ -79,11 +89,17 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => {
   const handleDateChange = (startTime: Date | undefined, endTime: Date | undefined) => {
     // limit selection to only 30 windows
     if (frequency && dayjs(startTime).isSame(dayjs(endTime))) {
-      const newMin = dayjs(startTime).subtract(frequency * MAX_WINDOWS_COUNT, 'second').toDate();
-      const newMax = dayjs(startTime).add(frequency * MAX_WINDOWS_COUNT, 'second').toDate();
-      
+      const newMin = dayjs(startTime)
+        .subtract(frequency * MAX_WINDOWS_COUNT, 'second')
+        .toDate();
+
+      const newMax = dayjs(startTime)
+        .add(frequency * MAX_WINDOWS_COUNT, 'second')
+        .toDate();
+
       if (model.start_time) {
         const modelStart = dayjs.unix(model.start_time).toDate();
+
         if (modelStart > newMin) {
           setMinDate(modelStart);
         } else {
@@ -92,6 +108,7 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => {
       }
       if (model.latest_time) {
         const modelEnd = dayjs.unix(model.latest_time + frequencyValues.DAY).toDate();
+
         if (modelEnd < newMax) {
           setMaxDate(modelEnd);
         } else {
@@ -132,14 +149,20 @@ export const AnalysisHeaderOptions = ({ model }: AnalysisHeaderOptions) => {
           </CustomStyledSelect>
         </>
       )}
-
       <StyledDivider orientation="vertical" flexItem sx={{ marginRight: '29px' }} />
-
-      <SwitchButton
-        checked={compareWithPreviousPeriod}
-        setChecked={setCompareWithPreviousPeriod}
-        label="Compare data with previous period"
-      />
+      <Box display="flex" flexDirection="column" gap="8px">
+        <SwitchButton
+          checked={compareWithPreviousPeriod}
+          setChecked={setCompareWithPreviousPeriod}
+          label="Compare with previous period"
+        />
+        {/* <SwitchButton
+          checked={compareByReference}
+          setChecked={setCompareByReference}
+          label="Compare by reference"
+          sx={{ marginRight: 'auto' }}
+            /> */}
+      </Box>
     </>
   );
 };

frontend/src/components/AnalysisItem/AnalysisItem.tsx

@@ -10,6 +10,7 @@ import { AnalysisItemProps } from './AnalysisItem.types';
 import { CheckFilterTypes, FilteredValues } from 'helpers/utils/checkUtil';
 import { events, reportEvent } from 'helpers/services/mixPanel';
 import { manipulateAnalysisItem } from './helpers/manipulateAnalysisItem';
+import { getReference } from './helpers/getReference';
 
 import { AnalysisChartItemWithFilters } from './components/AnalysisChartItemWithFilters';
 import { AnalysisChartItem } from './components/AnalysisChartItem';
@@ -28,7 +29,8 @@ const AnalysisItem = ({
   frequency,
   activeFilters,
   height,
-  graphHeight
+  graphHeight,
+  compareByReference
 }: AnalysisItemProps) => {
   const { observedContainerRef, isVisible } = useElementOnScreen();
   const { mutateAsync: runCheck, chartData } = useRunCheckLookback('line');
@@ -44,6 +46,7 @@ const AnalysisItem = ({
   const [filteredValues, setFilteredValues] = useState<FilteredValues>({} as FilteredValues);
   const [isMostWorstActive, setIsMostWorstActive] = useState(false);
   const [runLookBack, setRunLookBack] = useState(false);
+  const [alertRules, setAlertRules] = useState([]);
 
   const checkConf = useMemo(() => checkInfo && checkInfo.check_conf, [checkInfo?.check_conf]);
   const additionalKwargs = useMemo(() => {
@@ -77,6 +80,10 @@ const AnalysisItem = ({
     }
   }, [check.id, refetch]);
 
+  useEffect(() => {
+    getReference({ check, compareByReference, additionalKwargs, setAlertRules });
+  }, [compareByReference]);
+
   useEffect(() => {
     manipulateAnalysisItem({
       isVisible,
@@ -113,7 +120,8 @@ const AnalysisItem = ({
     initialData,
     checksWithCustomProps,
     isVisible,
-    runLookBack
+    runLookBack,
+    compareByReference
   ]);
 
   const diagramLineProps = {
@@ -124,7 +132,8 @@ const AnalysisItem = ({
     timeFreq: frequency,
     previousPeriodLabels: perviousPeriodLabels,
     analysis: true,
-    height: { lg: graphHeight - 104, xl: graphHeight }
+    height: { lg: graphHeight - 104, xl: graphHeight },
+    alert_rules: alertRules
   };
 
   const chartItemProps = {

frontend/src/components/AnalysisItem/AnalysisItem.types.ts

@@ -43,6 +43,7 @@ export interface AnalysisItemProps {
   ) => void;
   height: number;
   graphHeight: number;
+  compareByReference?: boolean;
 }
 
 export interface RunCheckBody {

frontend/src/components/AnalysisItem/helpers/getReference.ts

@@ -0,0 +1,28 @@
+import { CheckSchema, getCheckReferenceApiV1ChecksCheckIdRunReferencePost } from 'api/generated';
+
+export interface GetReferenceProps {
+  check: CheckSchema;
+  compareByReference?: boolean;
+  additionalKwargs: any;
+  setAlertRules: (alertRules: any) => void;
+}
+
+export const getReference = (props: GetReferenceProps) => {
+  const { check, compareByReference, additionalKwargs, setAlertRules } = props;
+
+  if (compareByReference) {
+    const getReferenceData = async () => {
+      const response = await getCheckReferenceApiV1ChecksCheckIdRunReferencePost(check.id, {
+        additional_kwargs: additionalKwargs
+      });
+
+      if (response && (response as any[])[0]) {
+        setAlertRules(response);
+      }
+    };
+
+    getReferenceData();
+  } else {
+    setAlertRules([]);
+  }
+};

frontend/src/components/Dashboard/DataIngestion/DataIngestion.tsx

@@ -72,6 +72,7 @@ export const DataIngestion = ({ modelId }: DataIngestionProps) => {
   }, []);
 
   useEffect(() => setStorageItem(storageKeys.dataIngestionTimeFilter, JSON.stringify(currentTime)), [currentTime]);
+
   return (
     <StyledContainer>
       <StyledHeader>
@@ -107,12 +108,7 @@ export const DataIngestion = ({ modelId }: DataIngestionProps) => {
         </StyledLoaderBox>
       ) : (
         <DiagramTutorialTooltip>
-          <DiagramLine
-            data={graphData}
-            minTimeUnit={minTimeUnit}
-            timeFreq={timeValue}
-            height={{ lg: 259, xl: 362 }}
-          ></DiagramLine>
+          <DiagramLine data={graphData} minTimeUnit={minTimeUnit} timeFreq={timeValue} height={{ lg: 259, xl: 362 }} />
         </DiagramTutorialTooltip>
       )}
     </StyledContainer>

frontend/src/components/Layout/Sidebar/components/SidebarMenuItem/SidebarMenuItem.tsx

@@ -26,6 +26,7 @@ function SidebarMenuItemComponent({ info, onOpenSubMenu }: SidebarMenuItemProps)
   const { ActiveIcon, Icon, IconHover, link } = info;
   const active = location?.pathname.startsWith(link);
   const activeHover = hover && !active;
+  const LinkWithParams = `${link}${window.location.search ?? ''}`;
 
   const toggleSubMenu = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
@@ -195,7 +196,7 @@ function SidebarMenuItemComponent({ info, onOpenSubMenu }: SidebarMenuItemProps)
       ) : (
         <StyledLinkWrapper
           onClick={e => goToLink(e, link)}
-          to={link}
+          to={LinkWithParams}
           active={active}
           onMouseLeave={onMouseLeave}
           onMouseOver={onMouseOver}

frontend/src/components/WorkspaceSettings/Billing/Billing.tsx

@@ -8,14 +8,23 @@ import FirstBilling from './FirstBilling/FirstBilling';
 
 import { Subscriptions } from './billing.types';
 
+import { resError } from 'helpers/types/resError';
+
 const Billing = () => {
   const [subscriptions, setSubscriptions] = useState<Subscriptions[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
   const getSubscription = async () => {
     const response = (await getSubscriptionsApiV1BillingSubscriptionGet()) as Subscriptions[];
-    response && setSubscriptions([...response]);
-    setIsLoading(false);
+
+    if (response) {
+      if ((response as unknown as resError).error_message) {
+        setIsLoading(false);
+      } else {
+        setSubscriptions([...response]);
+        setIsLoading(false);
+      }
+    }
   };
 
   useEffect(() => {

frontend/src/components/WorkspaceSettings/Billing/BillingHistory/BillingHistory.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 
-import logger from 'helpers/services/logger';
 import { ChargeSchema, listAllChargesApiV1BillingChargesGet } from 'api/generated';
 
 import BillingTransaction from './BillingTransaction';
@@ -12,20 +11,24 @@ import { Col16Gap } from 'components/base/Container/Container.styles';
 
 import { constants } from '../billing.constants';
 
+import { resError } from 'helpers/types/resError';
+
 const BillingHistory = () => {
   const [loading, setLoading] = useState(true);
   const [transactions, setTransactions] = useState<ChargeSchema[]>([]);
 
   const tableHeaders = ['models', 'plan', 'status', 'created'];
 
   const getBillingHistory = async () => {
-    try {
-      const response = await listAllChargesApiV1BillingChargesGet();
+    const response = await listAllChargesApiV1BillingChargesGet();
 
-      response && setTransactions([...response]);
-      setLoading(false);
-    } catch (err) {
-      logger.error(err);
+    if (response) {
+      if (response[0]) {
+        setTransactions([...response]);
+        setLoading(false);
+      } else if ((response as unknown as resError).error_message) {
+        setLoading(false);
+      }
     }
   };