Monitor Tab - Error rate value should be 0-100 value and not 0-1 (#895)

* Fix Signed-off-by: nofar9792 <nofar.cohen@logz.io> * Convert to 100 Signed-off-by: nofar9792 <nofar.cohen@logz.io> * Without comments Signed-off-by: nofar9792 <nofar.cohen@logz.io> Co-authored-by: Yuri Shkuro <yurishkuro@users.noreply.github.com>
jaegertracing · Feb 28, 2022 · 6e06ce0 · 6e06ce0
1 parent 77cdfbd
commit 6e06ce0
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/index.test.js.snap
@@ -196,11 +196,11 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
             "metricPoints": Array [
               Object {
                 "x": 1631274747520,
-                "y": 1,
+                "y": 100,
               },
               Object {
                 "x": 1631274807520,
-                "y": 1,
+                "y": 100,
               },
             ],
             "quantile": 0.95,

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -30,7 +30,13 @@ import OperationTableDetails from './operationDetailsTable';
 import LoadingIndicator from '../../common/LoadingIndicator';
 import MonitorATMEmptyState from '../EmptyState';
 import { ReduxState } from '../../../types';
-import { MetricsAPIQueryParams, MetricsReduxState, ServiceOpsMetrics } from '../../../types/metrics';
+import {
+  MetricsAPIQueryParams,
+  MetricsReduxState,
+  Points,
+  ServiceMetricsObject,
+  ServiceOpsMetrics,
+} from '../../../types/metrics';
 import prefixUrl from '../../../utils/prefix-url';
 
 import './index.css';
@@ -86,6 +92,16 @@ export const getLoopbackInterval = (interval: number) => {
   return timeFrameObj.label.toLowerCase();
 };
 
+const convertServiceErrorRateToPercentages = (serviceErrorRate: null | ServiceMetricsObject) => {
+  if (!serviceErrorRate) return null;
+
+  const wew = serviceErrorRate.metricPoints.map((metricPoint: Points) => {
+    return { ...metricPoint, y: metricPoint.y! * 100 };
+  });
+
+  return { ...serviceErrorRate, metricPoints: wew };
+};
+
 // export for tests
 export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, StateType> {
   graphDivWrapper: React.RefObject<HTMLInputElement>;
@@ -175,6 +191,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
 
   render() {
     const { services, metrics, selectedTimeFrame, servicesLoading } = this.props;
+    const serviceErrorRate = metrics.serviceMetrics ? metrics.serviceMetrics.service_error_rate : null;
 
     if (servicesLoading) {
       return <LoadingIndicator vcentered centered />;
@@ -265,7 +282,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               loading={metrics.loading}
               name="Error rate, %"
               width={this.state.graphWidth}
-              metricsData={metrics.serviceMetrics ? metrics.serviceMetrics.service_error_rate : null}
+              metricsData={convertServiceErrorRateToPercentages(serviceErrorRate)}
               marginClassName="error-rate-margins"
               color="#CD513A"
               yDomain={[0, 100]}

diff --git a/...rc/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap b/...rc/components/Monitor/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap
@@ -957,7 +957,7 @@ exports[`<OperationTableDetails> render greater than 0.1 requests value in the t
                         <div
                           className="table-graph-avg"
                         >
-                          1%
+                          100%
                         </div>
                       </div>
                     </td>
@@ -1647,7 +1647,7 @@ exports[`<OperationTableDetails> render number with more than 2 decimal places v
                         <div
                           className="table-graph-avg"
                         >
-                          1%
+                          100%
                         </div>
                       </div>
                     </td>
@@ -2337,7 +2337,7 @@ exports[`<OperationTableDetails> render some values in the table 1`] = `
                         <div
                           className="table-graph-avg"
                         >
-                          1%
+                          100%
                         </div>
                       </div>
                     </td>

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/operationDetailsTable/index.tsx
@@ -126,7 +126,7 @@ export class OperationTableDetails extends React.PureComponent<TProps, TState> {
             />
             <div className="table-graph-avg">
               {typeof value === 'number' && row.dataPoints.service_operation_error_rate.length > 0
-                ? `${value}%`
+                ? `${value * 100}%`
                 : ''}
             </div>
           </div>