fix: escape and encode operations regex for overview details (#1502)

* fix: escape and encode operations regex for overview details
* chore: use back tick with escaping
This commit is contained in:
Srikanth Chekuri 2022-08-11 11:41:32 +05:30 committed by GitHub
parent aecf3ef93e
commit 6e899175a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -7,7 +7,8 @@ import convertToNanoSecondsToSecond from 'lib/convertToNanoSecondsToSecond';
import { colors } from 'lib/getRandomColor'; import { colors } from 'lib/getRandomColor';
import history from 'lib/history'; import history from 'lib/history';
import { convertRawQueriesToTraceSelectedTags } from 'lib/resourceAttributes'; 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 { useSelector } from 'react-redux';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { AppState } from 'store/reducers'; import { AppState } from 'store/reducers';
@ -29,7 +30,11 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
resourceAttributeQueries, resourceAttributeQueries,
topLevelOperations, topLevelOperations,
} = useSelector<AppState, MetricReducer>((state) => state.metrics); } = useSelector<AppState, MetricReducer>((state) => state.metrics);
const operationsRegex = topLevelOperations.join('|'); const operationsRegex = useMemo(() => {
return encodeURIComponent(
topLevelOperations.map((e) => escapeRegExp(e)).join('|'),
);
}, [topLevelOperations]);
const selectedTraceTags: string = JSON.stringify( const selectedTraceTags: string = JSON.stringify(
convertRawQueriesToTraceSelectedTags(resourceAttributeQueries, 'array') || [], convertRawQueriesToTraceSelectedTags(resourceAttributeQueries, 'array') || [],
@ -195,7 +200,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
}} }}
widget={getWidget([ 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', legend: 'Operations',
}, },
])} ])}
@ -229,7 +234,7 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
}} }}
widget={getWidget([ 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', legend: 'Error Percentage',
}, },
])} ])}