From 998e72374f742e64565ef15897e55ab1610e1891 Mon Sep 17 00:00:00 2001 From: Srikanth Chekuri Date: Wed, 10 Aug 2022 21:04:12 +0530 Subject: [PATCH] fix: escape and encode operations regex for overview details (#1499) * fix: interval should be 1d=24h (#1482) (#1483) * fix: escape and encode operations regex for overview details Co-authored-by: Ankit Nayan Co-authored-by: zedongh <248348907@qq.com> --- .../container/MetricsApplication/Tabs/Overview.tsx | 13 +++++++++---- frontend/src/lib/getMinMax.ts | 4 ++-- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx index 2dbf2d33fd..7197887be1 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx @@ -7,7 +7,8 @@ import convertToNanoSecondsToSecond from 'lib/convertToNanoSecondsToSecond'; import { colors } from 'lib/getRandomColor'; import history from 'lib/history'; import { convertRawQueriesToTraceSelectedTags } from 'lib/resourceAttributes'; -import React, { useRef } from 'react'; +import { escapeRegExp } from 'lodash-es'; +import React, { useMemo, useRef } from 'react'; import { useSelector } from 'react-redux'; import { useParams } from 'react-router-dom'; import { AppState } from 'store/reducers'; @@ -29,7 +30,11 @@ function Application({ getWidget }: DashboardProps): JSX.Element { resourceAttributeQueries, topLevelOperations, } = useSelector((state) => state.metrics); - const operationsRegex = topLevelOperations.join('|'); + const operationsRegex = useMemo(() => { + return encodeURIComponent( + topLevelOperations.map((e) => escapeRegExp(e)).join('|'), + ); + }, [topLevelOperations]); const selectedTraceTags: string = JSON.stringify( convertRawQueriesToTraceSelectedTags(resourceAttributeQueries, 'array') || [], @@ -195,7 +200,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element { }} widget={getWidget([ { - query: `sum(rate(signoz_latency_count{service_name="${servicename}", operation=~"${operationsRegex}"${resourceAttributePromQLQuery}}[5m]))`, + query: `sum(rate(signoz_latency_count{service_name="${servicename}", operation=~\`${operationsRegex}\`${resourceAttributePromQLQuery}}[5m]))`, legend: 'Operations', }, ])} @@ -229,7 +234,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element { }} widget={getWidget([ { - query: `max(sum(rate(signoz_calls_total{service_name="${servicename}", operation=~"${operationsRegex}", status_code="STATUS_CODE_ERROR"${resourceAttributePromQLQuery}}[5m]) OR rate(signoz_calls_total{service_name="${servicename}", operation=~"${operationsRegex}", http_status_code=~"5.."${resourceAttributePromQLQuery}}[5m]))*100/sum(rate(signoz_calls_total{service_name="${servicename}", operation=~"${operationsRegex}"${resourceAttributePromQLQuery}}[5m]))) < 1000 OR vector(0)`, + query: `max(sum(rate(signoz_calls_total{service_name="${servicename}", operation=~\`${operationsRegex}\`, status_code="STATUS_CODE_ERROR"${resourceAttributePromQLQuery}}[5m]) OR rate(signoz_calls_total{service_name="${servicename}", operation=~\`${operationsRegex}\`, http_status_code=~"5.."${resourceAttributePromQLQuery}}[5m]))*100/sum(rate(signoz_calls_total{service_name="${servicename}", operation=~\`${operationsRegex}\`${resourceAttributePromQLQuery}}[5m]))) < 1000 OR vector(0)`, legend: 'Error Percentage', }, ])} diff --git a/frontend/src/lib/getMinMax.ts b/frontend/src/lib/getMinMax.ts index ae830cc06a..a597314799 100644 --- a/frontend/src/lib/getMinMax.ts +++ b/frontend/src/lib/getMinMax.ts @@ -30,11 +30,11 @@ const GetMinMax = ( minTime = minTimeAgo; } else if (interval === '1day') { // one day = 24*60(min) - const minTimeAgo = getMinAgo({ minutes: 26 * 60 }).getTime(); + const minTimeAgo = getMinAgo({ minutes: 24 * 60 }).getTime(); minTime = minTimeAgo; } else if (interval === '1week') { // one week = one day * 7 - const minTimeAgo = getMinAgo({ minutes: 26 * 60 * 7 }).getTime(); + const minTimeAgo = getMinAgo({ minutes: 24 * 60 * 7 }).getTime(); minTime = minTimeAgo; } else if (['4hr', '6hr'].includes(interval)) { const h = parseInt(interval.replace('hr', ''), 10);