Merge pull request #86 from Sanketika-Obsrv/alerts-metrics-fix

#OBS-I275: fix: alerts metric fix
Sanketika-Obsrv · Nov 8, 2024 · b8f3608 · b8f3608
2 parents 77ecab3 + 68bb387
commit b8f3608
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 18 deletions.
diff --git a/web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx b/web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx
@@ -18,10 +18,12 @@ const QueryBuilder = (props: any) => {
         if (!_.isEmpty(existingState)) {
             const operatorType = _.get(existingState, "operator")
             const thresholdValue = _.get(existingState, "threshold")
+            const metricId = _.get(existingState, "id") || ""
+
             if (_.includes(["within_range", "outside_range"], operatorType)) {
-                return { ..._.omit(existingState, ["threshold"]), threshold_from: _.get(thresholdValue, 0), threshold_to: _.get(thresholdValue, 1) }
+                return { ..._.omit(existingState, ["threshold"]), threshold_from: _.get(thresholdValue, 0), threshold_to: _.get(thresholdValue, 1), metric: metricId }
             }
-            return { ..._.omit(existingState, ["threshold_from", "threshold_to"]), threshold: _.get(thresholdValue, 0) }
+            return { ..._.omit(existingState, ["threshold_from", "threshold_to"]), threshold: _.get(thresholdValue, 0), metric: metricId }
         }
         return {}
     });
@@ -68,18 +70,18 @@ const QueryBuilder = (props: any) => {
         if (selectedSubComponent) {
             const filteredMetrics = _.filter(supportedMetrics, (supportedMetric) => supportedMetric.subComponent == selectedSubComponent);
             return _.map(filteredMetrics, (supportedMetric) => {
-                const { alias, metric } = supportedMetric;
+                const { alias, id } = supportedMetric;
                 return {
                     label: alias,
-                    value: metric
+                    value: id
                 };
             });
         }
         return _.map(supportedMetrics, (supportedMetric) => {
-            const { alias, metric } = supportedMetric;
+            const { alias, id } = supportedMetric;
             return {
                 label: alias,
-                value: metric
+                value: id
             };
         });
     };
@@ -264,7 +266,7 @@ const QueryBuilder = (props: any) => {
                 </Grid>
                 {runQuery && (
                     <Grid item xs={12}>
-                        <RunQuery random={Math.random()} handleClose={updateRunQuery} queryBuilderContext={value} />
+                        <RunQuery random={Math.random()} handleClose={updateRunQuery} queryBuilderContext={value} component={_.get(components, _.get(value, 'category'))} />
                     </Grid>
                 )}
             </>

diff --git a/web-console-v2/src/pages/alertManager/components/RunQuery.tsx b/web-console-v2/src/pages/alertManager/components/RunQuery.tsx
@@ -10,8 +10,9 @@ import { useEffect, useState } from "react";
 import Loader from "components/Loader";
 
 const RunQuery = (props: any) => {
-    const { handleClose, queryBuilderContext } = props;
+    const { handleClose, queryBuilderContext, component } = props;
     const { metric, threshold, threshold_from, threshold_to, operator } = queryBuilderContext
+    const metricValue = _.filter(component, field => _.get(field, "id") == metric)
     const [metadata, setMetadata] = useState<Record<string, any> | null>(null);
     const [loading, setLoading] = useState(false)
 
@@ -139,7 +140,7 @@ const RunQuery = (props: any) => {
                 headers: {},
                 body: {},
                 params: {
-                    query: metric,
+                    query: _.get(metricValue, [0, "metric"]) || metric,
                     step: '5m',
                     start: dayjs().unix(),
                     end: dayjs().subtract(1, 'day').unix()

diff --git a/web-console-v2/src/pages/alertManager/services/utils.tsx b/web-console-v2/src/pages/alertManager/services/utils.tsx
@@ -8,6 +8,7 @@ import { LocalizationProvider, DateTimePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { searchAlert } from 'services/alerts';
 import { fetchChannels } from 'services/notificationChannels';
+import { getMetricsGroupedByComponents } from './queryBuilder';
 
 export const validateForm = (config: Record<string, any>) => {
     if (!config) return false;
@@ -196,10 +197,10 @@ const DatePicker = (props: any) => {
         <DateTimePicker
             label={label}
             value={date}
-            onChange={(newValue:any) => {
+            onChange={(newValue: any) => {
                 setDate(newValue, alertId);
             }}
-            renderInput={(params:any) => <TextField {...params} />}
+            renderInput={(params: any) => <TextField {...params} />}
         />
     );
 };
@@ -240,7 +241,7 @@ export const asyncValidation = () => {
 export const getStatusComponent = (props: any) => {
     return () => {
         const { statusData, setSilenceStatus, fetchDataHandler, toggleFilter, removeFilter } = props;
-        return _.map(statusData, (value:any, status:any) => (
+        return _.map(statusData, (value: any, status: any) => (
             <Chip
                 key={status}
                 size="small"
@@ -326,7 +327,7 @@ export const getStatusColor = (value: string) => {
     return _.get(valueToColorMapping, value?.toLowerCase()) || 'success';
 };
 
-export const transformRulePayload = (formData: Record<string, any>) => {
+export const transformRulePayload = async (formData: Record<string, any>) => {
     const {
         name,
         description,
@@ -340,7 +341,10 @@ export const transformRulePayload = (formData: Record<string, any>) => {
         context,
         severity
     } = formData;
-    const { threshold, threshold_from, threshold_to, operator } = queryBuilderContext
+    const { threshold, threshold_from, threshold_to, operator, metric } = queryBuilderContext
+    const components = await getMetricsGroupedByComponents();
+    const selectedComponent = _.get(components, category)
+    const metricValue = _.filter(selectedComponent, field => _.get(field, "id") == metric)
     const updatedThreshold = !_.includes(["within_range", "outside_range"], operator) ? [threshold] : [threshold_from, threshold_to]
     const rulePayload = {
         name,
@@ -356,7 +360,7 @@ export const transformRulePayload = (formData: Record<string, any>) => {
             type: category
         },
         metadata: {
-            queryBuilderContext: { ...queryBuilderContext, threshold: updatedThreshold }
+            queryBuilderContext: { ...queryBuilderContext, threshold: updatedThreshold, metric: _.get(metricValue, [0, "metric"]), id: metric }
         },
         context: {
             ...context

diff --git a/web-console-v2/src/pages/alertManager/views/AddRule.tsx b/web-console-v2/src/pages/alertManager/views/AddRule.tsx
@@ -63,7 +63,7 @@ const AddAlertrules = () => {
     }, []);
 
     const addAlertRule: any = async () => {
-        const rulePayload = transformRulePayload({ ...formData, context: { alertType: 'CUSTOM' } });
+        const rulePayload = await transformRulePayload({ ...formData, context: { alertType: 'CUSTOM' } });
         return addAlert(rulePayload);
     };
 

diff --git a/web-console-v2/src/pages/alertManager/views/EditRule.tsx b/web-console-v2/src/pages/alertManager/views/EditRule.tsx
@@ -79,8 +79,8 @@ const EditRule = () => {
         }
     ], [ruleMetadata]);
 
-    const editAlertRule = () => {
-        const rulePayload = transformRulePayload({ ...formData, context: { alertType: alertType } });
+    const editAlertRule = async () => {
+        const rulePayload = await transformRulePayload({ ...formData, context: { alertType: alertType } });
         return editAlert({ id: id, data: rulePayload });
     };