From b260464b8871af191003f819abd2b697f37b915e Mon Sep 17 00:00:00 2001 From: JeraldJF Date: Fri, 8 Nov 2024 18:49:59 +0530 Subject: [PATCH] #OBS-I275: fix: alerts metric fix --- .../alertManager/components/QueryBuilder.tsx | 16 +++++++++------- .../pages/alertManager/components/RunQuery.tsx | 5 +++-- .../src/pages/alertManager/services/utils.tsx | 16 ++++++++++------ .../src/pages/alertManager/views/AddRule.tsx | 2 +- .../src/pages/alertManager/views/EditRule.tsx | 4 ++-- 5 files changed, 25 insertions(+), 18 deletions(-) diff --git a/web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx b/web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx index 31fa2cb7..92746b52 100644 --- 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) => { {runQuery && ( - + )} diff --git a/web-console-v2/src/pages/alertManager/components/RunQuery.tsx b/web-console-v2/src/pages/alertManager/components/RunQuery.tsx index f0009cf4..a89438dd 100644 --- 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 | 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 index b04bc8b2..c2cb0bd9 100644 --- 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) => { if (!config) return false; @@ -196,10 +197,10 @@ const DatePicker = (props: any) => { { + onChange={(newValue: any) => { setDate(newValue, alertId); }} - renderInput={(params:any) => } + renderInput={(params: any) => } /> ); }; @@ -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) => ( { return _.get(valueToColorMapping, value?.toLowerCase()) || 'success'; }; -export const transformRulePayload = (formData: Record) => { +export const transformRulePayload = async (formData: Record) => { const { name, description, @@ -340,7 +341,10 @@ export const transformRulePayload = (formData: Record) => { 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) => { 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 index d1fde029..d611ca79 100644 --- 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 index 68b4bcb7..92b1e4bf 100644 --- 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 }); };