fix(ui): fix alert unit change

frontend/app/components/Dashboard/components/Alerts/AlertForm/Condition.tsx

@@ -26,6 +26,7 @@ interface ICondition {
   writeQuery: (data: any) => void;
   writeQueryOption: (e: any, data: any) => void;
   unit: any;
+  changeUnit: (value: string) => void;
 }
 
 function Condition({
@@ -36,6 +37,7 @@ function Condition({
   writeQueryOption,
   writeQuery,
   unit,
+  changeUnit,
 }: ICondition) {
   return (
     <div>
@@ -48,7 +50,7 @@ function Condition({
             options={changeOptions}
             name="change"
             defaultValue={instance.change}
-            onChange={({ value }) => writeOption(null, { name: 'change', value })}
+            onChange={({ value }) => changeUnit(value)}
             id="change-dropdown"
           />
         </div>

frontend/app/components/Dashboard/components/Alerts/AlertListItem.tsx

@@ -8,6 +8,7 @@ import { DateTime } from 'luxon';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import cn from 'classnames';
 import Alert from 'Types/alert';
+import { observer } from 'mobx-react-lite'
 
 const getThreshold = (threshold: number) => {
   if (threshold === 15) return '15 Minutes';
@@ -165,4 +166,4 @@ function AlertListItem(props: Props) {
   );
 }
 
-export default withRouter(AlertListItem);
+export default withRouter(observer(AlertListItem));

frontend/app/components/Dashboard/components/Alerts/NewAlert.tsx

@@ -167,6 +167,10 @@ const NewAlert = (props: IProps) => {
     edit({ query: { ...query, [name]: value } });
   };
 
+  const changeUnit = (value: string) => {
+    alertsStore.changeUnit(value)
+  }
+
   const writeQuery = ({ target: { value, name } }: React.ChangeEvent<HTMLInputElement>) => {
     const { query } = instance;
     edit({ query: { ...query, [name]: value } });
@@ -243,6 +247,7 @@ const NewAlert = (props: IProps) => {
                 instance={instance}
                 triggerOptions={triggerOptions}
                 writeQueryOption={writeQueryOption}
+                changeUnit={changeUnit}
                 writeQuery={writeQuery}
                 unit={unit}
               />

frontend/app/mstore/alertsStore.ts

@@ -1,14 +1,14 @@
-import { makeAutoObservable } from 'mobx'
-import Alert, { IAlert } from 'Types/alert'
-import { alertsService } from 'App/services'
+import { makeAutoObservable, action } from 'mobx';
+import Alert, { IAlert } from 'Types/alert';
+import { alertsService } from 'App/services';
 
 export default class AlertsStore {
   alerts: Alert[] = [];
-  triggerOptions: { label: string, value: string | number, unit?: string }[] = [];
+  triggerOptions: { label: string; value: string | number; unit?: string }[] = [];
   alertsSearch = '';
-    // @ts-ignore
+  // @ts-ignore
   instance: Alert = new Alert({}, false);
-  loading = false
+  loading = false;
   page: number = 1;
 
   constructor() {
@@ -18,71 +18,75 @@ export default class AlertsStore {
   changeSearch = (value: string) => {
     this.alertsSearch = value;
     this.page = 1;
-  }
+  };
 
   // TODO: remove it
   updateKey(key: string, value: any) {
     // @ts-ignore
-    this[key] = value
+    this[key] = value;
   }
 
   fetchList = async () => {
-    this.loading = true
+    this.loading = true;
     try {
       const list = await alertsService.fetchList();
-      this.alerts = list.map(alert => new Alert(alert, true));
+      this.alerts = list.map((alert) => new Alert(alert, true));
     } catch (e) {
-      console.error(e)
+      console.error(e);
     } finally {
-      this.loading = false
+      this.loading = false;
     }
-  }
+  };
 
   save = async (inst: Alert) => {
-    this.loading = true
+    this.loading = true;
     try {
-      await alertsService.save(inst ? inst : this.instance)
-      this.instance.isExists = true
+      await alertsService.save(inst ? inst : this.instance);
+      this.instance.isExists = true;
     } catch (e) {
-      console.error(e)
+      console.error(e);
     } finally {
-      this.loading = false
+      this.loading = false;
     }
-  }
+  };
 
   remove = async (id: string) => {
-    this.loading = true
+    this.loading = true;
     try {
-      await alertsService.remove(id)
+      await alertsService.remove(id);
     } catch (e) {
-      console.error(e)
+      console.error(e);
     } finally {
-      this.loading = false
+      this.loading = false;
     }
-  }
+  };
 
   fetchTriggerOptions = async () => {
-    this.loading = true
+    this.loading = true;
     try {
       const options = await alertsService.fetchTriggerOptions();
-      this.triggerOptions = options.map(({ name, value }) => ({ label: name, value }))
+      this.triggerOptions = options.map(({ name, value }) => ({ label: name, value }));
     } catch (e) {
-      console.error(e)
+      console.error(e);
     } finally {
-      this.loading = false
+      this.loading = false;
     }
-  }
+  };
 
   init = (inst: Partial<IAlert> | Alert) => {
-    this.instance = inst instanceof Alert ? inst : new Alert(inst, false)
-  }
+    this.instance = inst instanceof Alert ? inst : new Alert(inst, false);
+  };
 
   edit = (diff: Partial<Alert>) => {
-    const key = Object.keys(diff)[0]
-    const oldInst = this.instance
+    const key = Object.keys(diff)[0];
+    const oldInst = this.instance;
     // @ts-ignore
-    oldInst[key] = diff[key]
+    oldInst[key] = diff[key];
 
-    this.instance = oldInst
-  }
+    this.instance = oldInst;
+  };
+
+  changeUnit = ({ value }: { value: string }) => {
+    this.instance.change = value;
+  };
 }