Jonatan/mon 1894 monitor form bugs (#14)

Author: JKL98ISR

Dockerfile

@@ -44,8 +44,8 @@ COPY backend/requirements.txt ./
 # TODO: not secure, use docker build-kit instead
 ARG DEEPCHECKS_CI_TOKEN
 
-RUN pip install -U pip \
-    && pip install -q -r requirements.txt --compile --no-cache-dir
+RUN pip install -U pip==22.0.4 setuptools==58.3.0 && \
+    pip install -q -r requirements.txt --compile --no-cache-dir
     # && apk del .build-deps
 
 RUN pip install pyinstrument

backend/makefile

@@ -136,7 +136,7 @@ requirements: $(ENV)
 
 dev-requirements: $(ENV)
 	@echo "####  installing development dependencies, it could take some time, please wait! ####"
-	@$(PIP) install -U pip
+	@$(PIP) install -U pip==22.0.4 setuptools==58.3.0
 	@$(PIP) install -q -e ./client
 	@$(PIP) install -q -r ./dev-requirements.txt
 
@@ -172,7 +172,7 @@ test: requirements dev-requirements
 test-win:
 	@test -d $(WIN_ENV) || python -m venv $(WIN_ENV)
 	@$(WIN_ENV)\Scripts\activate.bat
-	@$(PIP_WIN) install -U pip
+	@$(PIP_WIN) install -U pip==22.0.4 setuptools==58.3.0
 	@$(PIP_WIN) install -q -r ./requirements.txt -r ./dev-requirements.txt
 	python -m pytest $(WIN_TESTDIR)
 

frontend/src/components/Dashboard/MonitorDrawer/MonitorDrawer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { ChartData } from 'chart.js';
 
 import {
@@ -49,10 +49,11 @@ export const MonitorDrawer = ({
   const [graphFrequency, setGraphFrequency] = useState<SelectValues>(monitor?.frequency || '');
   const [reset, setReset] = useState(false);
 
-  const timeFreq =
-    (graphFrequency && +graphFrequency) || monitor
-      ? FrequencyMap[monitor?.frequency as Frequency]
-      : frequencyValues.DAY;
+  const timeFreq = useMemo(() => {
+    if (graphFrequency) return +graphFrequency;
+    if (monitor) return FrequencyMap[monitor?.frequency as Frequency];
+    return frequencyValues.DAY;
+  }, [graphFrequency])
 
   const handleGraphLookBack = useCallback(
     async (checkId: SelectValues, data: MonitorOptions) => {

frontend/src/components/Dashboard/MonitorDrawer/components/MonitorForm/MonitorForm.tsx

@@ -14,7 +14,7 @@ import useModels from 'helpers/hooks/useModels';
 import { TextField, Stack, MenuItem, OutlinedInput, Typography } from '@mui/material';
 
 import { MarkedSelect } from 'components/MarkedSelect';
-import { ControlledMarkedSelect } from 'components/MarkedSelect/ControlledMarkedSelect';
+import { ControlledMarkedSelect, ControlledMarkedSelectDisabledCallback } from 'components/MarkedSelect/ControlledMarkedSelect';
 import { SelectCheck as Check } from 'components/SelectCheck';
 import { SelectColumn as Column } from 'components/SelectColumn';
 import { TooltipInputWrapper } from 'components/TooltipInputWrapper';
@@ -226,6 +226,20 @@ export const MonitorForm = ({
     setColumn('');
   };
 
+  const isDisabledLookback = useCallback((lookbackSelect: { label: string; value: number }) => {
+    if (frequency === undefined) return false;
+    if (lookbackSelect.value < frequency ) return true;
+    if (lookbackSelect.value > +frequency * 31 ) return true;
+    return false;
+  }, [frequency]);
+
+  useEffect(() => {
+    const filteredLookbacks = lookbackTimeWindow.filter(val => !isDisabledLookback(val)).map(val => val.value);
+    if (lookBack && !filteredLookbacks.includes(+lookBack)) {
+      setLookBack(filteredLookbacks.at(-1));
+    }
+  }, [frequency])
+
   useEffect(() => {
     if (isDrawerOpen) {
       if (currentModel && lookBack && frequency && aggregationWindow) {
@@ -379,6 +393,7 @@ export const MonitorForm = ({
             value={lookBack}
             setValue={setLookBack}
             clearValue={clearLookBack}
+            DisabledCallback={isDisabledLookback as ControlledMarkedSelectDisabledCallback}
             required
             error={error && !lookBack}
             fullWidth

frontend/src/components/MarkedSelect/ControlledMarkedSelect.tsx

@@ -5,12 +5,15 @@ import { SelectChangeEvent, MenuItem, SelectProps } from '@mui/material';
 import { MarkedSelect } from 'components/MarkedSelect';
 
 export type ControlledMarkedSelectSelectValues = string | number | undefined;
+export type ControlledMarkedSelectSelectValueType = (ControlledMarkedSelectSelectValues | { label: string; value: number })
+export type ControlledMarkedSelectDisabledCallback = (value: ControlledMarkedSelectSelectValueType) => boolean;
 
 interface ControlledMarkedSelectProps extends SelectProps {
-  values: (ControlledMarkedSelectSelectValues | { label: string; value: number })[];
+  values: ControlledMarkedSelectSelectValueType[];
   value: ControlledMarkedSelectSelectValues;
   setValue: Dispatch<SetStateAction<ControlledMarkedSelectSelectValues>>;
   clearValue?: () => void;
+  DisabledCallback?: ControlledMarkedSelectDisabledCallback;
 }
 
 export const ControlledMarkedSelectComponent = ({
@@ -19,6 +22,7 @@ export const ControlledMarkedSelectComponent = ({
   value,
   setValue,
   clearValue,
+  DisabledCallback,
   ...props
 }: ControlledMarkedSelectProps) => {
   const handleValueChange = (event: SelectChangeEvent<unknown>) => setValue(event.target.value as string | number);
@@ -29,7 +33,7 @@ export const ControlledMarkedSelectComponent = ({
         const isObj = typeof value === 'object';
 
         return (
-          <MenuItem key={`${value}${index}`} value={isObj ? value.value : value}>
+          <MenuItem key={`${value}${index}`} value={isObj ? value.value : value} disabled={DisabledCallback !== undefined ? DisabledCallback(value) : false}>
             {isObj ? value.label : value}
           </MenuItem>
         );

makefile

@@ -127,7 +127,7 @@ $(ENV):
 	@echo "#### Creating Python Vertual Enviroment [ $(ENV) ] ####"
 	@test -d $(ENV) || $(ext_py) -m venv $(ENV)
 	@$(PIP) install -e backend/
-	@$(PIP) install -U pip
+	@$(PIP) install -U pip==22.0.4 setuptools==58.3.0
 
 
 requirements: $(ENV)
@@ -173,7 +173,7 @@ test:
 test-win:
 	@test -d $(WIN_ENV) || python -m venv $(WIN_ENV)
 	@$(WIN_ENV)\Scripts\activate.bat
-	@$(PIP_WIN) install -U pip
+	@$(PIP_WIN) install -U pip==22.0.4 setuptools==58.3.0
 	@$(PIP_WIN) install -q -r ./requirements.txt -r ./dev-requirements.txt
 	python -m pytest $(WIN_TESTDIR)