From 2d9249a025014a892d071b699986d56c9d9fd22e Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Wed, 26 Jan 2022 11:06:26 +0200
Subject: [PATCH 01/11] Add left margin

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../__snapshots__/index.test.js.snap          |   5 +
 .../__snapshots__/serviceGraph.test.js.snap   |   5 +
 .../Monitor/ServicesView/serviceGraph.tsx     | 104 ++++++++++--------
 .../jaeger-ui/src/reducers/metrics.mock.js    |  10 ++
 packages/jaeger-ui/src/reducers/metrics.tsx   |   5 +-
 packages/jaeger-ui/src/types/metrics.tsx      |   1 +
 6 files changed, 85 insertions(+), 45 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
index 0430e24544..fc0601f893 100644
--- 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
@@ -127,6 +127,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
         metricsData={
           Array [
             Object {
+              "max": 189.86,
               "metricPoints": Array [
                 Object {
                   "x": 1631271823806,
@@ -141,6 +142,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
               "serviceName": "cartservice",
             },
             Object {
+              "max": 189.86,
               "metricPoints": Array [
                 Object {
                   "x": 1631271823806,
@@ -155,6 +157,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
               "serviceName": "cartservice",
             },
             Object {
+              "max": 189.86,
               "metricPoints": Array [
                 Object {
                   "x": 1631271823806,
@@ -187,6 +190,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
         marginClassName="error-rate-margins"
         metricsData={
           Object {
+            "max": 1,
             "metricPoints": Array [
               Object {
                 "x": 1631274747520,
@@ -222,6 +226,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
         marginClassName="request-margins"
         metricsData={
           Object {
+            "max": 0.05,
             "metricPoints": Array [
               Object {
                 "x": 1631271823806,
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
index 567b2a6932..cd12d7c821 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
@@ -76,6 +76,7 @@ exports[`<ServiceGraph> Base graph should be displayed  1`] = `
     margin={
       Object {
         "bottom": 25,
+        "left": 40,
       }
     }
     onMouseLeave={[Function]}
@@ -190,6 +191,7 @@ exports[`<ServiceGraph> Base graph with custom color should be displayed 1`] = `
     margin={
       Object {
         "bottom": 25,
+        "left": 40,
       }
     }
     onMouseLeave={[Function]}
@@ -304,6 +306,7 @@ exports[`<ServiceGraph> Base graph with horizontal lines should be displayed 1`]
     margin={
       Object {
         "bottom": 25,
+        "left": 40,
       }
     }
     onMouseLeave={[Function]}
@@ -422,6 +425,7 @@ exports[`<ServiceGraph> Base graph with legends should be displayed 1`] = `
     margin={
       Object {
         "bottom": 25,
+        "left": 40,
       }
     }
     onMouseLeave={[Function]}
@@ -557,6 +561,7 @@ exports[`<ServiceGraph> Crosshair map test 1`] = `
     margin={
       Object {
         "bottom": 25,
+        "left": 40,
       }
     }
     onMouseLeave={[Function]}
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
index 0e6d03ba1a..8a7cb1a97e 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
@@ -150,52 +150,68 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
     const noDataComponent = this.generatePlaceholder('No Data');
     const apiErrorComponent = this.generatePlaceholder('Couldn’t fetch data');
 
-    const Plot = (
-      <XYPlot
-        margin={{ bottom: 25 }}
-        onMouseLeave={() => this.setState({ crosshairValues: [] })}
-        width={width}
-        height={this.height - 74}
-        yDomain={yDomain}
-      >
-        {showHorizontalLines ? <HorizontalGridLines /> : null}
-        <XAxis tickFormat={tickFormat} tickTotal={Math.floor(width / 60)} />
-        <YAxis />
-        {this.renderLines()}
-        <Crosshair values={this.state.crosshairValues}>
-          <div style={{ width: 140 }}>
-            {this.state.crosshairValues[0] &&
-              `${new Date(this.state.crosshairValues[0].x).toLocaleDateString()} ${new Date(
-                this.state.crosshairValues[0].x
-              ).toLocaleTimeString()}`}
-            {this.state.crosshairValues.reverse().map((d: TCrossHairValues) =>
-              showLegend ? (
-                <div key={d.label}>
-                  P{d.label * 100}: {d.y}
-                </div>
-              ) : (
-                <div key={d.label}>{d.y}</div>
-              )
-            )}
-          </div>
-        </Crosshair>
-        {showLegend ? (
-          <DiscreteColorLegend
-            className="legend-label"
-            orientation="horizontal"
-            items={this.getData()
-              .map((d: ServiceMetricsObject, idx: number) => ({
-                color: this.colors[idx],
-                title: `${d.quantile * 100}th`,
-              }))
-              .reverse()}
-          />
-        ) : null}
-      </XYPlot>
-    );
+    const Plot = () => {
+      let maxValue = 0;
+
+      if (metricsData && Array.isArray(metricsData)) {
+        const allMaxMetrics = metricsData.map(x => x.max);
+        maxValue = Math.max(...allMaxMetrics);
+      } else if (metricsData) {
+        maxValue = metricsData.max;
+      }
+
+      const pixelPerNumber = 6;
+      const minNumberNumbersToDisplay = 3;
+      const additionalPixelWidth =
+        (Math.round(maxValue).toString(10).length - minNumberNumbersToDisplay) * pixelPerNumber;
+
+      return (
+        <XYPlot
+          margin={{ bottom: 25, left: 40 + (additionalPixelWidth < 0 ? 0 : additionalPixelWidth) }}
+          onMouseLeave={() => this.setState({ crosshairValues: [] })}
+          width={width}
+          height={this.height - 74}
+          yDomain={yDomain}
+        >
+          {showHorizontalLines ? <HorizontalGridLines /> : null}
+          <XAxis tickFormat={tickFormat} tickTotal={Math.floor(width / 60)} />
+          <YAxis />
+          {this.renderLines()}
+          <Crosshair values={this.state.crosshairValues}>
+            <div style={{ width: 140 }}>
+              {this.state.crosshairValues[0] &&
+                `${new Date(this.state.crosshairValues[0].x).toLocaleDateString()} ${new Date(
+                  this.state.crosshairValues[0].x
+                ).toLocaleTimeString()}`}
+              {this.state.crosshairValues.reverse().map((d: TCrossHairValues) =>
+                showLegend ? (
+                  <div key={d.label}>
+                    P{d.label * 100}: {d.y}
+                  </div>
+                ) : (
+                  <div key={d.label}>{d.y}</div>
+                )
+              )}
+            </div>
+          </Crosshair>
+          {showLegend ? (
+            <DiscreteColorLegend
+              className="legend-label"
+              orientation="horizontal"
+              items={this.getData()
+                .map((d: ServiceMetricsObject, idx: number) => ({
+                  color: this.colors[idx],
+                  title: `${d.quantile * 100}th`,
+                }))
+                .reverse()}
+            />
+          ) : null}
+        </XYPlot>
+      );
+    };
 
     if (!loading) {
-      GraphComponent = metricsData === null ? noDataComponent : Plot;
+      GraphComponent = metricsData === null ? noDataComponent : Plot();
     }
 
     if (error) {
diff --git a/packages/jaeger-ui/src/reducers/metrics.mock.js b/packages/jaeger-ui/src/reducers/metrics.mock.js
index 478fbf14fd..7d1db07e78 100644
--- a/packages/jaeger-ui/src/reducers/metrics.mock.js
+++ b/packages/jaeger-ui/src/reducers/metrics.mock.js
@@ -729,6 +729,7 @@ const originInitialState = {
 
 const serviceMetrics = {
   service_call_rate: {
+    max: 0.05,
     metricPoints: [
       {
         x: 1631271823806,
@@ -743,6 +744,7 @@ const serviceMetrics = {
     serviceName: 'cartservice',
   },
   service_error_rate: {
+    max: 1,
     metricPoints: [
       {
         x: 1631274747520,
@@ -758,6 +760,7 @@ const serviceMetrics = {
   },
   service_latencies: [
     {
+      max: 189.86,
       metricPoints: [
         {
           x: 1631271823806,
@@ -772,6 +775,7 @@ const serviceMetrics = {
       serviceName: 'cartservice',
     },
     {
+      max: 189.86,
       metricPoints: [
         {
           x: 1631271823806,
@@ -786,6 +790,7 @@ const serviceMetrics = {
       serviceName: 'cartservice',
     },
     {
+      max: 189.86,
       metricPoints: [
         {
           x: 1631271823806,
@@ -803,6 +808,7 @@ const serviceMetrics = {
 };
 const serviceMetricsWithNulls = {
   service_call_rate: {
+    max: 0.05,
     metricPoints: [
       {
         x: 1631271823806,
@@ -817,6 +823,7 @@ const serviceMetricsWithNulls = {
     serviceName: 'cartservice',
   },
   service_error_rate: {
+    max: 1,
     metricPoints: [
       {
         x: 1631274747520,
@@ -832,6 +839,7 @@ const serviceMetricsWithNulls = {
   },
   service_latencies: [
     {
+      max: 0,
       metricPoints: [
         {
           x: 1631271823806,
@@ -846,6 +854,7 @@ const serviceMetricsWithNulls = {
       serviceName: 'cartservice',
     },
     {
+      max: 189.86,
       metricPoints: [
         {
           x: 1631271823806,
@@ -860,6 +869,7 @@ const serviceMetricsWithNulls = {
       serviceName: 'cartservice',
     },
     {
+      max: 189.86,
       metricPoints: [
         {
           x: 1631271823806,
diff --git a/packages/jaeger-ui/src/reducers/metrics.tsx b/packages/jaeger-ui/src/reducers/metrics.tsx
index a49c2d9963..7542f0661a 100644
--- a/packages/jaeger-ui/src/reducers/metrics.tsx
+++ b/packages/jaeger-ui/src/reducers/metrics.tsx
@@ -82,17 +82,19 @@ function fetchServiceMetricsDone(
       if (promiseResult.status === 'fulfilled') {
         const metrics = promiseResult.value;
         if (metrics.metrics[0]) {
+          let max = 0;
           const metric: ServiceMetricsObject = {
             serviceName: metrics.metrics[0].labels[0].value,
             quantile: metrics.quantile,
+            max: 0,
             metricPoints: metrics.metrics[0].metricPoints.map((p: MetricPointObject) => {
               let y;
               try {
                 y = parseFloat(p.gaugeValue.doubleValue.toFixed(2));
+                max = y > max ? y : max;
               } catch (e) {
                 y = null;
               }
-
               return {
                 x: new Date(p.timestamp).getTime(),
                 y,
@@ -100,6 +102,7 @@ function fetchServiceMetricsDone(
             }),
           };
 
+          metric.max = max;
           if (metrics.name === 'service_latencies') {
             if (serviceMetrics[metrics.name] === null) {
               serviceMetrics[metrics.name] = [];
diff --git a/packages/jaeger-ui/src/types/metrics.tsx b/packages/jaeger-ui/src/types/metrics.tsx
index 85aee967be..bd4a6f8490 100644
--- a/packages/jaeger-ui/src/types/metrics.tsx
+++ b/packages/jaeger-ui/src/types/metrics.tsx
@@ -97,6 +97,7 @@ export type ServiceOpsMetrics = {
 export type ServiceMetricsObject = {
   serviceName: string;
   quantile: number;
+  max: number;
   metricPoints: Points[];
 };
 

From 018279f8ac760030c6ffde3ec56a05371865acfc Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Wed, 26 Jan 2022 11:06:26 +0200
Subject: [PATCH 02/11] Add left margin

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../__snapshots__/index.test.js.snap          |   5 +
 .../__snapshots__/serviceGraph.test.js.snap   |   5 +
 .../Monitor/ServicesView/serviceGraph.tsx     | 104 ++++++++++--------
 .../jaeger-ui/src/reducers/metrics.mock.js    |  10 ++
 packages/jaeger-ui/src/reducers/metrics.tsx   |   5 +-
 packages/jaeger-ui/src/types/metrics.tsx      |   1 +
 6 files changed, 85 insertions(+), 45 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
index 0430e24544..fc0601f893 100644
--- 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
@@ -127,6 +127,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
         metricsData={
           Array [
             Object {
+              "max": 189.86,
               "metricPoints": Array [
                 Object {
                   "x": 1631271823806,
@@ -141,6 +142,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
               "serviceName": "cartservice",
             },
             Object {
+              "max": 189.86,
               "metricPoints": Array [
                 Object {
                   "x": 1631271823806,
@@ -155,6 +157,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
               "serviceName": "cartservice",
             },
             Object {
+              "max": 189.86,
               "metricPoints": Array [
                 Object {
                   "x": 1631271823806,
@@ -187,6 +190,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
         marginClassName="error-rate-margins"
         metricsData={
           Object {
+            "max": 1,
             "metricPoints": Array [
               Object {
                 "x": 1631274747520,
@@ -222,6 +226,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
         marginClassName="request-margins"
         metricsData={
           Object {
+            "max": 0.05,
             "metricPoints": Array [
               Object {
                 "x": 1631271823806,
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
index 567b2a6932..cd12d7c821 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
@@ -76,6 +76,7 @@ exports[`<ServiceGraph> Base graph should be displayed  1`] = `
     margin={
       Object {
         "bottom": 25,
+        "left": 40,
       }
     }
     onMouseLeave={[Function]}
@@ -190,6 +191,7 @@ exports[`<ServiceGraph> Base graph with custom color should be displayed 1`] = `
     margin={
       Object {
         "bottom": 25,
+        "left": 40,
       }
     }
     onMouseLeave={[Function]}
@@ -304,6 +306,7 @@ exports[`<ServiceGraph> Base graph with horizontal lines should be displayed 1`]
     margin={
       Object {
         "bottom": 25,
+        "left": 40,
       }
     }
     onMouseLeave={[Function]}
@@ -422,6 +425,7 @@ exports[`<ServiceGraph> Base graph with legends should be displayed 1`] = `
     margin={
       Object {
         "bottom": 25,
+        "left": 40,
       }
     }
     onMouseLeave={[Function]}
@@ -557,6 +561,7 @@ exports[`<ServiceGraph> Crosshair map test 1`] = `
     margin={
       Object {
         "bottom": 25,
+        "left": 40,
       }
     }
     onMouseLeave={[Function]}
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
index 0e6d03ba1a..8a7cb1a97e 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
@@ -150,52 +150,68 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
     const noDataComponent = this.generatePlaceholder('No Data');
     const apiErrorComponent = this.generatePlaceholder('Couldn’t fetch data');
 
-    const Plot = (
-      <XYPlot
-        margin={{ bottom: 25 }}
-        onMouseLeave={() => this.setState({ crosshairValues: [] })}
-        width={width}
-        height={this.height - 74}
-        yDomain={yDomain}
-      >
-        {showHorizontalLines ? <HorizontalGridLines /> : null}
-        <XAxis tickFormat={tickFormat} tickTotal={Math.floor(width / 60)} />
-        <YAxis />
-        {this.renderLines()}
-        <Crosshair values={this.state.crosshairValues}>
-          <div style={{ width: 140 }}>
-            {this.state.crosshairValues[0] &&
-              `${new Date(this.state.crosshairValues[0].x).toLocaleDateString()} ${new Date(
-                this.state.crosshairValues[0].x
-              ).toLocaleTimeString()}`}
-            {this.state.crosshairValues.reverse().map((d: TCrossHairValues) =>
-              showLegend ? (
-                <div key={d.label}>
-                  P{d.label * 100}: {d.y}
-                </div>
-              ) : (
-                <div key={d.label}>{d.y}</div>
-              )
-            )}
-          </div>
-        </Crosshair>
-        {showLegend ? (
-          <DiscreteColorLegend
-            className="legend-label"
-            orientation="horizontal"
-            items={this.getData()
-              .map((d: ServiceMetricsObject, idx: number) => ({
-                color: this.colors[idx],
-                title: `${d.quantile * 100}th`,
-              }))
-              .reverse()}
-          />
-        ) : null}
-      </XYPlot>
-    );
+    const Plot = () => {
+      let maxValue = 0;
+
+      if (metricsData && Array.isArray(metricsData)) {
+        const allMaxMetrics = metricsData.map(x => x.max);
+        maxValue = Math.max(...allMaxMetrics);
+      } else if (metricsData) {
+        maxValue = metricsData.max;
+      }
+
+      const pixelPerNumber = 6;
+      const minNumberNumbersToDisplay = 3;
+      const additionalPixelWidth =
+        (Math.round(maxValue).toString(10).length - minNumberNumbersToDisplay) * pixelPerNumber;
+
+      return (
+        <XYPlot
+          margin={{ bottom: 25, left: 40 + (additionalPixelWidth < 0 ? 0 : additionalPixelWidth) }}
+          onMouseLeave={() => this.setState({ crosshairValues: [] })}
+          width={width}
+          height={this.height - 74}
+          yDomain={yDomain}
+        >
+          {showHorizontalLines ? <HorizontalGridLines /> : null}
+          <XAxis tickFormat={tickFormat} tickTotal={Math.floor(width / 60)} />
+          <YAxis />
+          {this.renderLines()}
+          <Crosshair values={this.state.crosshairValues}>
+            <div style={{ width: 140 }}>
+              {this.state.crosshairValues[0] &&
+                `${new Date(this.state.crosshairValues[0].x).toLocaleDateString()} ${new Date(
+                  this.state.crosshairValues[0].x
+                ).toLocaleTimeString()}`}
+              {this.state.crosshairValues.reverse().map((d: TCrossHairValues) =>
+                showLegend ? (
+                  <div key={d.label}>
+                    P{d.label * 100}: {d.y}
+                  </div>
+                ) : (
+                  <div key={d.label}>{d.y}</div>
+                )
+              )}
+            </div>
+          </Crosshair>
+          {showLegend ? (
+            <DiscreteColorLegend
+              className="legend-label"
+              orientation="horizontal"
+              items={this.getData()
+                .map((d: ServiceMetricsObject, idx: number) => ({
+                  color: this.colors[idx],
+                  title: `${d.quantile * 100}th`,
+                }))
+                .reverse()}
+            />
+          ) : null}
+        </XYPlot>
+      );
+    };
 
     if (!loading) {
-      GraphComponent = metricsData === null ? noDataComponent : Plot;
+      GraphComponent = metricsData === null ? noDataComponent : Plot();
     }
 
     if (error) {
diff --git a/packages/jaeger-ui/src/reducers/metrics.mock.js b/packages/jaeger-ui/src/reducers/metrics.mock.js
index 478fbf14fd..7d1db07e78 100644
--- a/packages/jaeger-ui/src/reducers/metrics.mock.js
+++ b/packages/jaeger-ui/src/reducers/metrics.mock.js
@@ -729,6 +729,7 @@ const originInitialState = {
 
 const serviceMetrics = {
   service_call_rate: {
+    max: 0.05,
     metricPoints: [
       {
         x: 1631271823806,
@@ -743,6 +744,7 @@ const serviceMetrics = {
     serviceName: 'cartservice',
   },
   service_error_rate: {
+    max: 1,
     metricPoints: [
       {
         x: 1631274747520,
@@ -758,6 +760,7 @@ const serviceMetrics = {
   },
   service_latencies: [
     {
+      max: 189.86,
       metricPoints: [
         {
           x: 1631271823806,
@@ -772,6 +775,7 @@ const serviceMetrics = {
       serviceName: 'cartservice',
     },
     {
+      max: 189.86,
       metricPoints: [
         {
           x: 1631271823806,
@@ -786,6 +790,7 @@ const serviceMetrics = {
       serviceName: 'cartservice',
     },
     {
+      max: 189.86,
       metricPoints: [
         {
           x: 1631271823806,
@@ -803,6 +808,7 @@ const serviceMetrics = {
 };
 const serviceMetricsWithNulls = {
   service_call_rate: {
+    max: 0.05,
     metricPoints: [
       {
         x: 1631271823806,
@@ -817,6 +823,7 @@ const serviceMetricsWithNulls = {
     serviceName: 'cartservice',
   },
   service_error_rate: {
+    max: 1,
     metricPoints: [
       {
         x: 1631274747520,
@@ -832,6 +839,7 @@ const serviceMetricsWithNulls = {
   },
   service_latencies: [
     {
+      max: 0,
       metricPoints: [
         {
           x: 1631271823806,
@@ -846,6 +854,7 @@ const serviceMetricsWithNulls = {
       serviceName: 'cartservice',
     },
     {
+      max: 189.86,
       metricPoints: [
         {
           x: 1631271823806,
@@ -860,6 +869,7 @@ const serviceMetricsWithNulls = {
       serviceName: 'cartservice',
     },
     {
+      max: 189.86,
       metricPoints: [
         {
           x: 1631271823806,
diff --git a/packages/jaeger-ui/src/reducers/metrics.tsx b/packages/jaeger-ui/src/reducers/metrics.tsx
index a49c2d9963..7542f0661a 100644
--- a/packages/jaeger-ui/src/reducers/metrics.tsx
+++ b/packages/jaeger-ui/src/reducers/metrics.tsx
@@ -82,17 +82,19 @@ function fetchServiceMetricsDone(
       if (promiseResult.status === 'fulfilled') {
         const metrics = promiseResult.value;
         if (metrics.metrics[0]) {
+          let max = 0;
           const metric: ServiceMetricsObject = {
             serviceName: metrics.metrics[0].labels[0].value,
             quantile: metrics.quantile,
+            max: 0,
             metricPoints: metrics.metrics[0].metricPoints.map((p: MetricPointObject) => {
               let y;
               try {
                 y = parseFloat(p.gaugeValue.doubleValue.toFixed(2));
+                max = y > max ? y : max;
               } catch (e) {
                 y = null;
               }
-
               return {
                 x: new Date(p.timestamp).getTime(),
                 y,
@@ -100,6 +102,7 @@ function fetchServiceMetricsDone(
             }),
           };
 
+          metric.max = max;
           if (metrics.name === 'service_latencies') {
             if (serviceMetrics[metrics.name] === null) {
               serviceMetrics[metrics.name] = [];
diff --git a/packages/jaeger-ui/src/types/metrics.tsx b/packages/jaeger-ui/src/types/metrics.tsx
index 85aee967be..bd4a6f8490 100644
--- a/packages/jaeger-ui/src/types/metrics.tsx
+++ b/packages/jaeger-ui/src/types/metrics.tsx
@@ -97,6 +97,7 @@ export type ServiceOpsMetrics = {
 export type ServiceMetricsObject = {
   serviceName: string;
   quantile: number;
+  max: number;
   metricPoints: Points[];
 };
 

From d217082246328b0d6a9372ff226a3fd16b49d2f0 Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Tue, 8 Feb 2022 14:53:35 +0200
Subject: [PATCH 03/11] Temp

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../src/components/Monitor/ServicesView/serviceGraph.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
index 8a7cb1a97e..5ecb75886a 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
@@ -161,7 +161,7 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
       }
 
       const pixelPerNumber = 6;
-      const minNumberNumbersToDisplay = 3;
+      const minNumberNumbersToDisplay = 2;
       const additionalPixelWidth =
         (Math.round(maxValue).toString(10).length - minNumberNumbersToDisplay) * pixelPerNumber;
 

From b190999f6b7ba4e236e5d7fced8ca4d8dbe7fb59 Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Tue, 15 Feb 2022 17:15:51 +0200
Subject: [PATCH 04/11] Use timeConversion

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../__snapshots__/serviceGraph.test.js.snap       | 15 ++++++++++-----
 .../Monitor/ServicesView/serviceGraph.tsx         |  6 +++---
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
index cd12d7c821..1c66b23d2d 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
@@ -76,7 +76,7 @@ exports[`<ServiceGraph> Base graph should be displayed  1`] = `
     margin={
       Object {
         "bottom": 25,
-        "left": 40,
+        "left": 50,
       }
     }
     onMouseLeave={[Function]}
@@ -93,6 +93,7 @@ exports[`<ServiceGraph> Base graph should be displayed  1`] = `
       attr="y"
       attrAxis="x"
       orientation="left"
+      tickFormat={[Function]}
     />
     <AreaSeries
       className=""
@@ -191,7 +192,7 @@ exports[`<ServiceGraph> Base graph with custom color should be displayed 1`] = `
     margin={
       Object {
         "bottom": 25,
-        "left": 40,
+        "left": 50,
       }
     }
     onMouseLeave={[Function]}
@@ -208,6 +209,7 @@ exports[`<ServiceGraph> Base graph with custom color should be displayed 1`] = `
       attr="y"
       attrAxis="x"
       orientation="left"
+      tickFormat={[Function]}
     />
     <AreaSeries
       className=""
@@ -306,7 +308,7 @@ exports[`<ServiceGraph> Base graph with horizontal lines should be displayed 1`]
     margin={
       Object {
         "bottom": 25,
-        "left": 40,
+        "left": 50,
       }
     }
     onMouseLeave={[Function]}
@@ -327,6 +329,7 @@ exports[`<ServiceGraph> Base graph with horizontal lines should be displayed 1`]
       attr="y"
       attrAxis="x"
       orientation="left"
+      tickFormat={[Function]}
     />
     <AreaSeries
       className=""
@@ -425,7 +428,7 @@ exports[`<ServiceGraph> Base graph with legends should be displayed 1`] = `
     margin={
       Object {
         "bottom": 25,
-        "left": 40,
+        "left": 50,
       }
     }
     onMouseLeave={[Function]}
@@ -442,6 +445,7 @@ exports[`<ServiceGraph> Base graph with legends should be displayed 1`] = `
       attr="y"
       attrAxis="x"
       orientation="left"
+      tickFormat={[Function]}
     />
     <AreaSeries
       className=""
@@ -561,7 +565,7 @@ exports[`<ServiceGraph> Crosshair map test 1`] = `
     margin={
       Object {
         "bottom": 25,
-        "left": 40,
+        "left": 50,
       }
     }
     onMouseLeave={[Function]}
@@ -578,6 +582,7 @@ exports[`<ServiceGraph> Crosshair map test 1`] = `
       attr="y"
       attrAxis="x"
       orientation="left"
+      tickFormat={[Function]}
     />
     <AreaSeries
       className=""
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
index 5ecb75886a..95bb3e41f5 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
@@ -26,7 +26,7 @@ import {
 } from 'react-vis';
 import LoadingIndicator from '../../common/LoadingIndicator';
 import { ServiceMetricsObject, Points } from '../../../types/metrics';
-
+import { timeConversion } from '../../../utils/date';
 import './serviceGraph.css';
 import { ApiError } from '../../../types/api-error';
 
@@ -167,7 +167,7 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
 
       return (
         <XYPlot
-          margin={{ bottom: 25, left: 40 + (additionalPixelWidth < 0 ? 0 : additionalPixelWidth) }}
+          margin={{ bottom: 25, left: 50 }}
           onMouseLeave={() => this.setState({ crosshairValues: [] })}
           width={width}
           height={this.height - 74}
@@ -175,7 +175,7 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
         >
           {showHorizontalLines ? <HorizontalGridLines /> : null}
           <XAxis tickFormat={tickFormat} tickTotal={Math.floor(width / 60)} />
-          <YAxis />
+          <YAxis tickFormat={(timeInMS: number) => timeConversion(timeInMS * 1000)} />
           {this.renderLines()}
           <Crosshair values={this.state.crosshairValues}>
             <div style={{ width: 140 }}>

From df82afdc45960567c64e62d977cf5c433b670541 Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Thu, 17 Feb 2022 18:57:03 +0200
Subject: [PATCH 05/11] Refactor timeConvention and use max vaule for timeunit
 in the title

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../__snapshots__/index.test.js.snap          |   1 +
 .../__snapshots__/serviceGraph.test.js.snap   |   5 -
 .../components/Monitor/ServicesView/index.tsx |  29 ++++-
 .../Monitor/ServicesView/serviceGraph.tsx     | 105 ++++++++----------
 packages/jaeger-ui/src/utils/date.test.js     |  32 ++++++
 packages/jaeger-ui/src/utils/date.tsx         |  57 ++++++----
 6 files changed, 142 insertions(+), 87 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
index fc0601f893..76d996a45b 100644
--- 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
@@ -177,6 +177,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
         showHorizontalLines={true}
         showLegend={true}
         width={300}
+        yAxisTickFormat={[Function]}
       />
     </Col>
     <Col
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
index 1c66b23d2d..1ac33cc9ce 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
@@ -93,7 +93,6 @@ exports[`<ServiceGraph> Base graph should be displayed  1`] = `
       attr="y"
       attrAxis="x"
       orientation="left"
-      tickFormat={[Function]}
     />
     <AreaSeries
       className=""
@@ -209,7 +208,6 @@ exports[`<ServiceGraph> Base graph with custom color should be displayed 1`] = `
       attr="y"
       attrAxis="x"
       orientation="left"
-      tickFormat={[Function]}
     />
     <AreaSeries
       className=""
@@ -329,7 +327,6 @@ exports[`<ServiceGraph> Base graph with horizontal lines should be displayed 1`]
       attr="y"
       attrAxis="x"
       orientation="left"
-      tickFormat={[Function]}
     />
     <AreaSeries
       className=""
@@ -445,7 +442,6 @@ exports[`<ServiceGraph> Base graph with legends should be displayed 1`] = `
       attr="y"
       attrAxis="x"
       orientation="left"
-      tickFormat={[Function]}
     />
     <AreaSeries
       className=""
@@ -582,7 +578,6 @@ exports[`<ServiceGraph> Crosshair map test 1`] = `
       attr="y"
       attrAxis="x"
       orientation="left"
-      tickFormat={[Function]}
     />
     <AreaSeries
       className=""
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index b8f21d0cf6..28fe8c5279 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -30,8 +30,14 @@ 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,
+  ServiceMetricsObject,
+  ServiceOpsMetrics,
+} from '../../../types/metrics';
 import prefixUrl from '../../../utils/prefix-url';
+import { timeConversion, getSuitableShortTermTimeUnit } from '../../../utils/date';
 
 import './index.css';
 
@@ -86,6 +92,19 @@ export const getLoopbackInterval = (interval: number) => {
   return timeFrameObj.label.toLowerCase();
 };
 
+const getTimeUnitByMetricsData = (serviceLatencies: ServiceMetricsObject | ServiceMetricsObject[] | null) => {
+  let maxValue = 0;
+
+  if (serviceLatencies && Array.isArray(serviceLatencies)) {
+    const allMaxMetrics = serviceLatencies.map(x => x.max);
+    maxValue = Math.max(...allMaxMetrics);
+  } else if (serviceLatencies) {
+    maxValue = serviceLatencies.max;
+  }
+
+  return getSuitableShortTermTimeUnit(maxValue * 1000);
+}
+
 // export for tests
 export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, StateType> {
   graphDivWrapper: React.RefObject<HTMLInputElement>;
@@ -169,8 +188,11 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
     return selectedService || store.get('lastAtmSearchService') || services[0];
   }
 
+
+
   render() {
     const { services, metrics, selectedTimeFrame, servicesLoading } = this.props;
+    const serviceLatencies = metrics.serviceMetrics ? metrics.serviceMetrics.service_latencies : null;
 
     if (servicesLoading) {
       return <LoadingIndicator vcentered centered />;
@@ -245,12 +267,13 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
                 metrics.serviceError.service_latencies_95
               }
               loading={metrics.loading}
-              name="Latency, ms"
+              name={`Latency, ${getTimeUnitByMetricsData(serviceLatencies)}`}
               width={this.state.graphWidth}
-              metricsData={metrics.serviceMetrics ? metrics.serviceMetrics.service_latencies : null}
+              metricsData={serviceLatencies}
               showLegend
               marginClassName="latency-margins"
               showHorizontalLines
+              yAxisTickFormat={(timeInMS: number) => timeConversion(timeInMS * 1000)}
             />
           </Col>
           <Col span={8}>
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
index 95bb3e41f5..ad65a56288 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
@@ -26,7 +26,6 @@ import {
 } from 'react-vis';
 import LoadingIndicator from '../../common/LoadingIndicator';
 import { ServiceMetricsObject, Points } from '../../../types/metrics';
-import { timeConversion } from '../../../utils/date';
 import './serviceGraph.css';
 import { ApiError } from '../../../types/api-error';
 
@@ -41,6 +40,7 @@ type TProps = {
   yDomain?: number[];
   color?: string;
   marginClassName?: string;
+  yAxisTickFormat?: (v: number) => string;
 };
 
 type TCrossHairValues = {
@@ -145,70 +145,55 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
       marginClassName,
       name,
       error,
+      yAxisTickFormat,
     } = this.props;
     let GraphComponent = this.generatePlaceholder(<LoadingIndicator centered />);
     const noDataComponent = this.generatePlaceholder('No Data');
     const apiErrorComponent = this.generatePlaceholder('Couldn’t fetch data');
 
-    const Plot = () => {
-      let maxValue = 0;
-
-      if (metricsData && Array.isArray(metricsData)) {
-        const allMaxMetrics = metricsData.map(x => x.max);
-        maxValue = Math.max(...allMaxMetrics);
-      } else if (metricsData) {
-        maxValue = metricsData.max;
-      }
-
-      const pixelPerNumber = 6;
-      const minNumberNumbersToDisplay = 2;
-      const additionalPixelWidth =
-        (Math.round(maxValue).toString(10).length - minNumberNumbersToDisplay) * pixelPerNumber;
-
-      return (
-        <XYPlot
-          margin={{ bottom: 25, left: 50 }}
-          onMouseLeave={() => this.setState({ crosshairValues: [] })}
-          width={width}
-          height={this.height - 74}
-          yDomain={yDomain}
-        >
-          {showHorizontalLines ? <HorizontalGridLines /> : null}
-          <XAxis tickFormat={tickFormat} tickTotal={Math.floor(width / 60)} />
-          <YAxis tickFormat={(timeInMS: number) => timeConversion(timeInMS * 1000)} />
-          {this.renderLines()}
-          <Crosshair values={this.state.crosshairValues}>
-            <div style={{ width: 140 }}>
-              {this.state.crosshairValues[0] &&
-                `${new Date(this.state.crosshairValues[0].x).toLocaleDateString()} ${new Date(
-                  this.state.crosshairValues[0].x
-                ).toLocaleTimeString()}`}
-              {this.state.crosshairValues.reverse().map((d: TCrossHairValues) =>
-                showLegend ? (
-                  <div key={d.label}>
-                    P{d.label * 100}: {d.y}
-                  </div>
-                ) : (
-                  <div key={d.label}>{d.y}</div>
-                )
-              )}
-            </div>
-          </Crosshair>
-          {showLegend ? (
-            <DiscreteColorLegend
-              className="legend-label"
-              orientation="horizontal"
-              items={this.getData()
-                .map((d: ServiceMetricsObject, idx: number) => ({
-                  color: this.colors[idx],
-                  title: `${d.quantile * 100}th`,
-                }))
-                .reverse()}
-            />
-          ) : null}
-        </XYPlot>
-      );
-    };
+    const Plot = () => (
+      <XYPlot
+        margin={{ bottom: 25, left: 50 }}
+        onMouseLeave={() => this.setState({ crosshairValues: [] })}
+        width={width}
+        height={this.height - 74}
+        yDomain={yDomain}
+      >
+        {showHorizontalLines ? <HorizontalGridLines /> : null}
+        <XAxis tickFormat={tickFormat} tickTotal={Math.floor(width / 60)} />
+        <YAxis tickFormat={yAxisTickFormat} />
+        {this.renderLines()}
+        <Crosshair values={this.state.crosshairValues}>
+          <div style={{ width: 140 }}>
+            {this.state.crosshairValues[0] &&
+              `${new Date(this.state.crosshairValues[0].x).toLocaleDateString()} ${new Date(
+                this.state.crosshairValues[0].x
+              ).toLocaleTimeString()}`}
+            {this.state.crosshairValues.reverse().map((d: TCrossHairValues) =>
+              showLegend ? (
+                <div key={d.label}>
+                  P{d.label * 100}: {d.y}
+                </div>
+              ) : (
+                <div key={d.label}>{d.y}</div>
+              )
+            )}
+          </div>
+        </Crosshair>
+        {showLegend ? (
+          <DiscreteColorLegend
+            className="legend-label"
+            orientation="horizontal"
+            items={this.getData()
+              .map((d: ServiceMetricsObject, idx: number) => ({
+                color: this.colors[idx],
+                title: `${d.quantile * 100}th`,
+              }))
+              .reverse()}
+          />
+        ) : null}
+      </XYPlot>
+    );
 
     if (!loading) {
       GraphComponent = metricsData === null ? noDataComponent : Plot();
diff --git a/packages/jaeger-ui/src/utils/date.test.js b/packages/jaeger-ui/src/utils/date.test.js
index 778f1b5dfb..3339ef8b47 100644
--- a/packages/jaeger-ui/src/utils/date.test.js
+++ b/packages/jaeger-ui/src/utils/date.test.js
@@ -15,6 +15,7 @@
 import {
   formatDuration,
   timeConversion,
+  getSuitableShortTermTimeUnit,
   ONE_MILLISECOND,
   ONE_SECOND,
   ONE_MINUTE,
@@ -94,3 +95,34 @@ describe('timeConversion', () => {
     expect(timeConversion(input)).toBe('2Days');
   });
 });
+
+describe('getSuitableShortTermTimeUnit', () => {
+  it('time unit should be empty', () => {
+    const input = undefined;
+    expect(getSuitableShortTermTimeUnit(input)).toBe('');
+  });
+  it('time unit should be nanoseconds', () => {
+    const input = 999;
+    expect(getSuitableShortTermTimeUnit(input)).toBe('μs');
+  });
+  it('time unit should be milliseconds ', () => {
+    const input = 5000;
+    expect(getSuitableShortTermTimeUnit(input)).toBe('ms');
+  });
+  it('time unit should be seconds', () => {
+    const input = 5000000;
+    expect(getSuitableShortTermTimeUnit(input)).toBe('Sec');
+  });
+  it('time unit should be mintues', () => {
+    const input = 120000000;
+    expect(getSuitableShortTermTimeUnit(input)).toBe('Min');
+  });
+  it('time unit should be hours', () => {
+    const input = 7200000000;
+    expect(getSuitableShortTermTimeUnit(input)).toBe('Hrs');
+  });
+  it('time unit should be days', () => {
+    const input = 172800000000;
+    expect(getSuitableShortTermTimeUnit(input)).toBe('Days');
+  });
+});
diff --git a/packages/jaeger-ui/src/utils/date.tsx b/packages/jaeger-ui/src/utils/date.tsx
index 16f6626652..885de718bb 100644
--- a/packages/jaeger-ui/src/utils/date.tsx
+++ b/packages/jaeger-ui/src/utils/date.tsx
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import moment from 'moment';
+import moment, { unitOfTime } from 'moment';
 import _dropWhile from 'lodash/dropWhile';
 import _round from 'lodash/round';
 
@@ -40,6 +40,14 @@ const UNIT_STEPS: { unit: string; microseconds: number; ofPrevious: number }[] =
   { unit: 'μs', microseconds: 1, ofPrevious: 1000 },
 ];
 
+const timeUnitToShortTermMapper = {
+  milliseconds: 'ms',
+  seconds: 'Sec',
+  minutes: 'Min',
+  hours: 'Hrs',
+  days: 'Days',
+};
+
 /**
  * @param {number} timestamp
  * @param {number} initialTimestamp
@@ -145,25 +153,36 @@ export function formatRelativeDate(value: any, fullMonthName: boolean = false) {
   return m.format(`${monthFormat} D`);
 }
 
+const getSuitableTimeUnit = (microseconds: number): string => {
+  const duration = moment.duration(microseconds / 1000, 'ms');
+
+  return Object.keys(timeUnitToShortTermMapper)
+    .reverse()
+    .find(timeUnit => {
+      const durationInTimeUnit = duration.as(timeUnit as unitOfTime.Base);
+
+      return durationInTimeUnit >= 1;
+    })!;
+};
+
+export function getSuitableShortTermTimeUnit(microseconds: number) {
+  if (!microseconds) return '';
+  if (microseconds < 1000) {
+    return `μs`;
+  }
+
+  const timeUnit = getSuitableTimeUnit(microseconds);
+
+  return (timeUnitToShortTermMapper as any)[timeUnit];
+}
 export function timeConversion(microseconds: number) {
-  const milliseconds: number = parseInt((microseconds / 1000).toFixed(2), 10);
-  const seconds: number = parseInt((milliseconds / 1000).toFixed(2), 10);
-  const minutes: number = parseInt((milliseconds / (1000 * 60)).toFixed(2), 10);
-  const hours: number = parseInt((milliseconds / (1000 * 60 * 60)).toFixed(2), 10);
-  const days: number = parseInt((milliseconds / (1000 * 60 * 60 * 24)).toFixed(2), 10);
-  let timeText;
   if (microseconds < 1000) {
-    timeText = `${microseconds}μs`;
-  } else if (milliseconds < 1000) {
-    timeText = `${milliseconds}ms`;
-  } else if (seconds < 60) {
-    timeText = `${seconds}Sec`;
-  } else if (minutes < 60) {
-    timeText = `${minutes}Min`;
-  } else if (hours < 24) {
-    timeText = `${hours}Hrs`;
-  } else {
-    timeText = `${days}Days`;
+    return `${microseconds}μs`;
   }
-  return timeText;
+
+  const timeUnit = getSuitableTimeUnit(microseconds);
+
+  return `${moment
+    .duration(microseconds / 1000, 'ms')
+    .as(timeUnit as unitOfTime.Base)}${getSuitableShortTermTimeUnit(microseconds)}`;
 }

From 37365de311eb770dd6e03937d9775bf73dc7e57b Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Thu, 17 Feb 2022 19:19:11 +0200
Subject: [PATCH 06/11] Semicolon

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../jaeger-ui/src/components/Monitor/ServicesView/index.tsx   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index 28fe8c5279..cddbbbc67c 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -103,7 +103,7 @@ const getTimeUnitByMetricsData = (serviceLatencies: ServiceMetricsObject | Servi
   }
 
   return getSuitableShortTermTimeUnit(maxValue * 1000);
-}
+};
 
 // export for tests
 export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, StateType> {
@@ -188,8 +188,6 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
     return selectedService || store.get('lastAtmSearchService') || services[0];
   }
 
-
-
   render() {
     const { services, metrics, selectedTimeFrame, servicesLoading } = this.props;
     const serviceLatencies = metrics.serviceMetrics ? metrics.serviceMetrics.service_latencies : null;

From 69c677760347d68bed3db83d03be4e78af8dda5f Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Sun, 20 Feb 2022 12:42:17 +0200
Subject: [PATCH 07/11] Remove timeunit from y axis

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../__snapshots__/serviceGraph.test.js.snap   |  5 --
 .../components/Monitor/ServicesView/index.tsx | 11 +--
 .../Monitor/ServicesView/serviceGraph.tsx     |  4 +-
 packages/jaeger-ui/src/utils/date.test.js     | 78 +++++++++++++++----
 packages/jaeger-ui/src/utils/date.tsx         | 22 ++++--
 5 files changed, 85 insertions(+), 35 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
index 1ac33cc9ce..567b2a6932 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
@@ -76,7 +76,6 @@ exports[`<ServiceGraph> Base graph should be displayed  1`] = `
     margin={
       Object {
         "bottom": 25,
-        "left": 50,
       }
     }
     onMouseLeave={[Function]}
@@ -191,7 +190,6 @@ exports[`<ServiceGraph> Base graph with custom color should be displayed 1`] = `
     margin={
       Object {
         "bottom": 25,
-        "left": 50,
       }
     }
     onMouseLeave={[Function]}
@@ -306,7 +304,6 @@ exports[`<ServiceGraph> Base graph with horizontal lines should be displayed 1`]
     margin={
       Object {
         "bottom": 25,
-        "left": 50,
       }
     }
     onMouseLeave={[Function]}
@@ -425,7 +422,6 @@ exports[`<ServiceGraph> Base graph with legends should be displayed 1`] = `
     margin={
       Object {
         "bottom": 25,
-        "left": 50,
       }
     }
     onMouseLeave={[Function]}
@@ -561,7 +557,6 @@ exports[`<ServiceGraph> Crosshair map test 1`] = `
     margin={
       Object {
         "bottom": 25,
-        "left": 50,
       }
     }
     onMouseLeave={[Function]}
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index 6f3c88246b..ec0c86b162 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -37,7 +37,7 @@ import {
   ServiceOpsMetrics,
 } from '../../../types/metrics';
 import prefixUrl from '../../../utils/prefix-url';
-import { timeConversion, getSuitableShortTermTimeUnit } from '../../../utils/date';
+import { convertToTimeUnit, convertTimeUnitToShortTerm, getSuitableTimeUnit } from '../../../utils/date';
 
 import './index.css';
 
@@ -92,7 +92,7 @@ export const getLoopbackInterval = (interval: number) => {
   return timeFrameObj.label.toLowerCase();
 };
 
-const getTimeUnitByMetricsData = (serviceLatencies: ServiceMetricsObject | ServiceMetricsObject[] | null) => {
+const calcDisplayTimeUnit = (serviceLatencies: ServiceMetricsObject | ServiceMetricsObject[] | null) => {
   let maxValue = 0;
 
   if (serviceLatencies && Array.isArray(serviceLatencies)) {
@@ -102,7 +102,7 @@ const getTimeUnitByMetricsData = (serviceLatencies: ServiceMetricsObject | Servi
     maxValue = serviceLatencies.max;
   }
 
-  return getSuitableShortTermTimeUnit(maxValue * 1000);
+  return getSuitableTimeUnit(maxValue * 1000);
 };
 
 // export for tests
@@ -191,6 +191,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
   render() {
     const { services, metrics, selectedTimeFrame, servicesLoading } = this.props;
     const serviceLatencies = metrics.serviceMetrics ? metrics.serviceMetrics.service_latencies : null;
+    const displayTimeUnit = calcDisplayTimeUnit(serviceLatencies);
 
     if (servicesLoading) {
       return <LoadingIndicator vcentered centered />;
@@ -265,13 +266,13 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
                 metrics.serviceError.service_latencies_95
               }
               loading={metrics.loading}
-              name={`Latency, ${getTimeUnitByMetricsData(serviceLatencies)}`}
+              name={`Latency, ${convertTimeUnitToShortTerm(displayTimeUnit)}`}
               width={this.state.graphWidth}
               metricsData={serviceLatencies}
               showLegend
               marginClassName="latency-margins"
               showHorizontalLines
-              yAxisTickFormat={(timeInMS: number) => timeConversion(timeInMS * 1000)}
+              yAxisTickFormat={(timeInMS: number) => convertToTimeUnit(timeInMS * 1000, displayTimeUnit)}
             />
           </Col>
           <Col span={8}>
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
index ad65a56288..9f1d69c5bf 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
@@ -40,7 +40,7 @@ type TProps = {
   yDomain?: number[];
   color?: string;
   marginClassName?: string;
-  yAxisTickFormat?: (v: number) => string;
+  yAxisTickFormat?: (v: number) => number;
 };
 
 type TCrossHairValues = {
@@ -153,7 +153,7 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
 
     const Plot = () => (
       <XYPlot
-        margin={{ bottom: 25, left: 50 }}
+        margin={{ bottom: 25 }}
         onMouseLeave={() => this.setState({ crosshairValues: [] })}
         width={width}
         height={this.height - 74}
diff --git a/packages/jaeger-ui/src/utils/date.test.js b/packages/jaeger-ui/src/utils/date.test.js
index 3339ef8b47..53e1052692 100644
--- a/packages/jaeger-ui/src/utils/date.test.js
+++ b/packages/jaeger-ui/src/utils/date.test.js
@@ -15,7 +15,9 @@
 import {
   formatDuration,
   timeConversion,
-  getSuitableShortTermTimeUnit,
+  getSuitableTimeUnit,
+  convertTimeUnitToShortTerm,
+  convertToTimeUnit,
   ONE_MILLISECOND,
   ONE_SECOND,
   ONE_MINUTE,
@@ -82,7 +84,7 @@ describe('timeConversion', () => {
     const input = 5000000;
     expect(timeConversion(input)).toBe('5Sec');
   });
-  it('displays time in mintues', () => {
+  it('displays time in minutes', () => {
     const input = 120000000;
     expect(timeConversion(input)).toBe('2Min');
   });
@@ -96,33 +98,79 @@ describe('timeConversion', () => {
   });
 });
 
-describe('getSuitableShortTermTimeUnit', () => {
-  it('time unit should be empty', () => {
-    const input = undefined;
-    expect(getSuitableShortTermTimeUnit(input)).toBe('');
-  });
-  it('time unit should be nanoseconds', () => {
+describe('getSuitableTimeUnit', () => {
+  it('time unit should be microseconds', () => {
     const input = 999;
-    expect(getSuitableShortTermTimeUnit(input)).toBe('μs');
+    expect(getSuitableTimeUnit(input)).toBe('microseconds');
   });
   it('time unit should be milliseconds ', () => {
     const input = 5000;
-    expect(getSuitableShortTermTimeUnit(input)).toBe('ms');
+    expect(getSuitableTimeUnit(input)).toBe('milliseconds');
   });
   it('time unit should be seconds', () => {
     const input = 5000000;
-    expect(getSuitableShortTermTimeUnit(input)).toBe('Sec');
+    expect(getSuitableTimeUnit(input)).toBe('seconds');
   });
-  it('time unit should be mintues', () => {
+  it('time unit should be minutes', () => {
     const input = 120000000;
-    expect(getSuitableShortTermTimeUnit(input)).toBe('Min');
+    expect(getSuitableTimeUnit(input)).toBe('minutes');
   });
   it('time unit should be hours', () => {
     const input = 7200000000;
-    expect(getSuitableShortTermTimeUnit(input)).toBe('Hrs');
+    expect(getSuitableTimeUnit(input)).toBe('hours');
   });
   it('time unit should be days', () => {
     const input = 172800000000;
-    expect(getSuitableShortTermTimeUnit(input)).toBe('Days');
+    expect(getSuitableTimeUnit(input)).toBe('days');
+  });
+});
+
+describe('convertTimeUnitToShortTerm', () => {
+  it('convert milliseconds', () => {
+    const input = 'milliseconds';
+    expect(convertTimeUnitToShortTerm(input)).toBe('ms');
+  });
+  it('convert seconds', () => {
+    const input = 'seconds';
+    expect(convertTimeUnitToShortTerm(input)).toBe('Sec');
+  });
+  it('convert minutes', () => {
+    const input = 'minutes';
+    expect(convertTimeUnitToShortTerm(input)).toBe('Min');
+  });
+  it('convert hours', () => {
+    const input = 'hours';
+    expect(convertTimeUnitToShortTerm(input)).toBe('Hrs');
+  });
+  it('convert days', () => {
+    const input = 'days';
+    expect(convertTimeUnitToShortTerm(input)).toBe('Days');
+  });
+});
+
+describe('convertToTimeUnit', () => {
+  it('convert duration to microseconds', () => {
+    const input = 999;
+    expect(convertToTimeUnit(input, 'microseconds')).toBe(999);
+  });
+  it('convert duration to milliseconds', () => {
+    const input = 5000;
+    expect(convertToTimeUnit(input, 'milliseconds')).toBe(5);
+  });
+  it('convert duration to seconds', () => {
+    const input = 5000000;
+    expect(convertToTimeUnit(input, 'seconds')).toBe(5);
+  });
+  it('convert duration to minutes', () => {
+    const input = 120000000;
+    expect(convertToTimeUnit(input, 'minutes')).toBe(2);
+  });
+  it('convert duration to hours', () => {
+    const input = 7200000000;
+    expect(convertToTimeUnit(input, 'hours')).toBe(2);
+  });
+  it('convert duration to days', () => {
+    const input = 172800000000;
+    expect(convertToTimeUnit(input, 'days')).toBe(2);
   });
 });
diff --git a/packages/jaeger-ui/src/utils/date.tsx b/packages/jaeger-ui/src/utils/date.tsx
index 885de718bb..6b3e4aa925 100644
--- a/packages/jaeger-ui/src/utils/date.tsx
+++ b/packages/jaeger-ui/src/utils/date.tsx
@@ -153,7 +153,11 @@ export function formatRelativeDate(value: any, fullMonthName: boolean = false) {
   return m.format(`${monthFormat} D`);
 }
 
-const getSuitableTimeUnit = (microseconds: number): string => {
+export const getSuitableTimeUnit = (microseconds: number): string => {
+  if (microseconds < 1000) {
+    return 'microseconds';
+  }
+
   const duration = moment.duration(microseconds / 1000, 'ms');
 
   return Object.keys(timeUnitToShortTermMapper)
@@ -165,16 +169,18 @@ const getSuitableTimeUnit = (microseconds: number): string => {
     })!;
 };
 
-export function getSuitableShortTermTimeUnit(microseconds: number) {
-  if (!microseconds) return '';
+export function convertTimeUnitToShortTerm(timeUnit: string) {
+  return (timeUnitToShortTermMapper as any)[timeUnit];
+}
+
+export function convertToTimeUnit(microseconds: number, targetTimeUnit: string) {
   if (microseconds < 1000) {
-    return `μs`;
+    return microseconds;
   }
 
-  const timeUnit = getSuitableTimeUnit(microseconds);
-
-  return (timeUnitToShortTermMapper as any)[timeUnit];
+  return moment.duration(microseconds / 1000, 'ms').as(targetTimeUnit as unitOfTime.Base);
 }
+
 export function timeConversion(microseconds: number) {
   if (microseconds < 1000) {
     return `${microseconds}μs`;
@@ -184,5 +190,5 @@ export function timeConversion(microseconds: number) {
 
   return `${moment
     .duration(microseconds / 1000, 'ms')
-    .as(timeUnit as unitOfTime.Base)}${getSuitableShortTermTimeUnit(microseconds)}`;
+    .as(timeUnit as unitOfTime.Base)}${convertTimeUnitToShortTerm(timeUnit)}`;
 }

From 812145dbd6ba71ea96533b269466a681089f0205 Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Thu, 24 Feb 2022 19:00:49 +0200
Subject: [PATCH 08/11] Non existent timeunit

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 packages/jaeger-ui/src/utils/date.test.js | 4 ++++
 packages/jaeger-ui/src/utils/date.tsx     | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/jaeger-ui/src/utils/date.test.js b/packages/jaeger-ui/src/utils/date.test.js
index 53e1052692..dd25727e76 100644
--- a/packages/jaeger-ui/src/utils/date.test.js
+++ b/packages/jaeger-ui/src/utils/date.test.js
@@ -126,6 +126,10 @@ describe('getSuitableTimeUnit', () => {
 });
 
 describe('convertTimeUnitToShortTerm', () => {
+  it('convert non-existent timeUnit ', () => {
+    const input = 'aaa';
+    expect(convertTimeUnitToShortTerm(input)).toBe('');
+  });
   it('convert milliseconds', () => {
     const input = 'milliseconds';
     expect(convertTimeUnitToShortTerm(input)).toBe('ms');
diff --git a/packages/jaeger-ui/src/utils/date.tsx b/packages/jaeger-ui/src/utils/date.tsx
index 6b3e4aa925..c960653ad5 100644
--- a/packages/jaeger-ui/src/utils/date.tsx
+++ b/packages/jaeger-ui/src/utils/date.tsx
@@ -170,7 +170,11 @@ export const getSuitableTimeUnit = (microseconds: number): string => {
 };
 
 export function convertTimeUnitToShortTerm(timeUnit: string) {
-  return (timeUnitToShortTermMapper as any)[timeUnit];
+  const shortTimeUnit = (timeUnitToShortTermMapper as any)[timeUnit];
+
+  if (shortTimeUnit) return shortTimeUnit;
+
+  return '';
 }
 
 export function convertToTimeUnit(microseconds: number, targetTimeUnit: string) {

From 86df0d8578046bc44f116134578b249bbb8253ae Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Sun, 27 Feb 2022 17:33:40 +0200
Subject: [PATCH 09/11] Same short term

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../Monitor/ServicesView/serviceGraph.tsx        |  4 ++--
 packages/jaeger-ui/src/utils/date.test.js        | 16 ++++++++--------
 packages/jaeger-ui/src/utils/date.tsx            |  8 ++++----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
index 07dc9e0f1d..b2e1dfa4e9 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
@@ -153,7 +153,7 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
     const noDataComponent = this.generatePlaceholder('No Data');
     const apiErrorComponent = this.generatePlaceholder('Couldn’t fetch data');
 
-    const Plot = () => (
+    const Plot = (
       <XYPlot
         margin={{ bottom: 25 }}
         onMouseLeave={() => this.setState({ crosshairValues: [] })}
@@ -199,7 +199,7 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
     );
 
     if (!loading) {
-      GraphComponent = metricsData === null ? noDataComponent : Plot();
+      GraphComponent = metricsData === null ? noDataComponent : Plot;
     }
 
     if (error) {
diff --git a/packages/jaeger-ui/src/utils/date.test.js b/packages/jaeger-ui/src/utils/date.test.js
index dd25727e76..4f740574aa 100644
--- a/packages/jaeger-ui/src/utils/date.test.js
+++ b/packages/jaeger-ui/src/utils/date.test.js
@@ -82,19 +82,19 @@ describe('timeConversion', () => {
   });
   it('displays time in seconds', () => {
     const input = 5000000;
-    expect(timeConversion(input)).toBe('5Sec');
+    expect(timeConversion(input)).toBe('5s');
   });
   it('displays time in minutes', () => {
     const input = 120000000;
-    expect(timeConversion(input)).toBe('2Min');
+    expect(timeConversion(input)).toBe('2m');
   });
   it('displays time in hours', () => {
     const input = 7200000000;
-    expect(timeConversion(input)).toBe('2Hrs');
+    expect(timeConversion(input)).toBe('2h');
   });
   it('displays time in days', () => {
     const input = 172800000000;
-    expect(timeConversion(input)).toBe('2Days');
+    expect(timeConversion(input)).toBe('2d');
   });
 });
 
@@ -136,19 +136,19 @@ describe('convertTimeUnitToShortTerm', () => {
   });
   it('convert seconds', () => {
     const input = 'seconds';
-    expect(convertTimeUnitToShortTerm(input)).toBe('Sec');
+    expect(convertTimeUnitToShortTerm(input)).toBe('s');
   });
   it('convert minutes', () => {
     const input = 'minutes';
-    expect(convertTimeUnitToShortTerm(input)).toBe('Min');
+    expect(convertTimeUnitToShortTerm(input)).toBe('m');
   });
   it('convert hours', () => {
     const input = 'hours';
-    expect(convertTimeUnitToShortTerm(input)).toBe('Hrs');
+    expect(convertTimeUnitToShortTerm(input)).toBe('h');
   });
   it('convert days', () => {
     const input = 'days';
-    expect(convertTimeUnitToShortTerm(input)).toBe('Days');
+    expect(convertTimeUnitToShortTerm(input)).toBe('d');
   });
 });
 
diff --git a/packages/jaeger-ui/src/utils/date.tsx b/packages/jaeger-ui/src/utils/date.tsx
index c960653ad5..ec8eabbbde 100644
--- a/packages/jaeger-ui/src/utils/date.tsx
+++ b/packages/jaeger-ui/src/utils/date.tsx
@@ -42,10 +42,10 @@ const UNIT_STEPS: { unit: string; microseconds: number; ofPrevious: number }[] =
 
 const timeUnitToShortTermMapper = {
   milliseconds: 'ms',
-  seconds: 'Sec',
-  minutes: 'Min',
-  hours: 'Hrs',
-  days: 'Days',
+  seconds: 's',
+  minutes: 'm',
+  hours: 'h',
+  days: 'd',
 };
 
 /**

From 8fc6c44ba2234c2cdeae9ad2f1de3b4e72b92f93 Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Sun, 27 Feb 2022 17:47:36 +0200
Subject: [PATCH 10/11] Brackets

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../Monitor/ServicesView/__snapshots__/index.test.js.snap   | 6 +++---
 .../jaeger-ui/src/components/Monitor/ServicesView/index.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 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
index f43d3dc1e4..cd242a4e43 100644
--- 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
@@ -173,7 +173,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
             },
           ]
         }
-        name="Latency, ms"
+        name="Latency (ms)"
         showHorizontalLines={true}
         showLegend={true}
         width={300}
@@ -212,7 +212,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
             "serviceName": "cartservice",
           }
         }
-        name="Error rate, %"
+        name="Error rate (%)"
         width={300}
         xDomain={
           Array [
@@ -254,7 +254,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
             "serviceName": "cartservice",
           }
         }
-        name="Request rate, req/s"
+        name="Request rate (req/s)"
         showHorizontalLines={true}
         width={300}
         xDomain={
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index dcc9cce7f9..6f656f2277 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -270,7 +270,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
                 metrics.serviceError.service_latencies_95
               }
               loading={metrics.loading}
-              name={`Latency, ${convertTimeUnitToShortTerm(displayTimeUnit)}`}
+              name={`Latency (${convertTimeUnitToShortTerm(displayTimeUnit)})`}
               width={this.state.graphWidth}
               metricsData={serviceLatencies}
               showLegend
@@ -285,7 +285,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               key="errRate"
               error={metrics.serviceError.service_error_rate}
               loading={metrics.loading}
-              name="Error rate, %"
+              name="Error rate (%)"
               width={this.state.graphWidth}
               metricsData={metrics.serviceMetrics ? metrics.serviceMetrics.service_error_rate : null}
               marginClassName="error-rate-margins"
@@ -299,7 +299,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               key="requests"
               loading={metrics.loading}
               error={metrics.serviceError.service_call_rate}
-              name="Request rate, req/s"
+              name="Request rate (req/s)"
               width={this.state.graphWidth}
               metricsData={metrics.serviceMetrics ? metrics.serviceMetrics.service_call_rate : null}
               showHorizontalLines

From 6b34e4758c44b9c0f1ac43137856ea8bf1b03455 Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Mon, 28 Feb 2022 15:54:34 +0200
Subject: [PATCH 11/11] Some tests

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../Monitor/ServicesView/index.test.js        | 31 +++++++++++-
 .../components/Monitor/ServicesView/index.tsx |  6 ++-
 .../jaeger-ui/src/reducers/metrics.mock.js    | 50 +++++++++++++++++++
 3 files changed, 85 insertions(+), 2 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
index 3434f6d1ba..47112c7315 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
@@ -19,11 +19,17 @@ import {
   mapStateToProps,
   mapDispatchToProps,
   getLoopbackInterval,
+  yAxisTickFormat,
 } from '.';
 import LoadingIndicator from '../../common/LoadingIndicator';
 import MonitorATMEmptyState from '../EmptyState';
 import ServiceGraph from './serviceGraph';
-import { originInitialState, serviceMetrics, serviceOpsMetrics } from '../../../reducers/metrics.mock';
+import {
+  originInitialState,
+  serviceMetrics,
+  serviceOpsMetrics,
+  serviceMetricsWithOneServiceLatency,
+} from '../../../reducers/metrics.mock';
 
 const state = {
   services: {},
@@ -85,6 +91,21 @@ describe('<MonitorATMServicesView>', () => {
     expect(wrapper.find(LoadingIndicator).length).toBe(0);
   });
 
+  it('render one service latency', () => {
+    wrapper.setProps({
+      services: ['s1'],
+      selectedService: undefined,
+      metrics: {
+        ...originInitialState,
+        serviceMetricsWithOneServiceLatency,
+        serviceOpsMetrics,
+        loading: false,
+        isATMActivated: true,
+      },
+    });
+    expect(wrapper.length).toBe(1);
+  });
+
   it('Render ATM not configured page', () => {
     wrapper.setProps({
       services: [],
@@ -310,3 +331,11 @@ describe('getLoopbackInterval()', () => {
     expect(getLoopbackInterval(48 * 3600000)).toBe('last 2 days');
   });
 });
+
+describe('yAxisTickFormat', () => {
+  it('value is 2 second', () => {
+    const timeInMs = 1000;
+    const displayTimeUnit = 'seconds';
+    expect(yAxisTickFormat(timeInMs, displayTimeUnit)).toBe(1);
+  });
+});
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index 6f656f2277..5436b83aea 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -105,6 +105,10 @@ const calcDisplayTimeUnit = (serviceLatencies: ServiceMetricsObject | ServiceMet
   return getSuitableTimeUnit(maxValue * 1000);
 };
 
+// export for tests
+export const yAxisTickFormat = (timeInMS: number, displayTimeUnit: string) =>
+  convertToTimeUnit(timeInMS * 1000, displayTimeUnit);
+
 // export for tests
 export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, StateType> {
   graphDivWrapper: React.RefObject<HTMLInputElement>;
@@ -276,7 +280,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               showLegend
               marginClassName="latency-margins"
               showHorizontalLines
-              yAxisTickFormat={(timeInMS: number) => convertToTimeUnit(timeInMS * 1000, displayTimeUnit)}
+              yAxisTickFormat={timeInMs => yAxisTickFormat(timeInMs, displayTimeUnit)}
               xDomain={this.graphXDomain}
             />
           </Col>
diff --git a/packages/jaeger-ui/src/reducers/metrics.mock.js b/packages/jaeger-ui/src/reducers/metrics.mock.js
index 7d1db07e78..c1f8316c19 100644
--- a/packages/jaeger-ui/src/reducers/metrics.mock.js
+++ b/packages/jaeger-ui/src/reducers/metrics.mock.js
@@ -806,6 +806,55 @@ const serviceMetrics = {
     },
   ],
 };
+
+const serviceMetricsWithOneServiceLatency = {
+  service_call_rate: {
+    max: 0.05,
+    metricPoints: [
+      {
+        x: 1631271823806,
+        y: 0.05,
+      },
+      {
+        x: 1631271883806,
+        y: 0.05,
+      },
+    ],
+    quantile: 0.95,
+    serviceName: 'cartservice',
+  },
+  service_error_rate: {
+    max: 1,
+    metricPoints: [
+      {
+        x: 1631274747520,
+        y: 1,
+      },
+      {
+        x: 1631274807520,
+        y: 1,
+      },
+    ],
+    quantile: 0.95,
+    serviceName: 'cartservice',
+  },
+  service_latencies: {
+    max: 189.86,
+    metricPoints: [
+      {
+        x: 1631271823806,
+        y: 189.86,
+      },
+      {
+        x: 1631271883806,
+        y: 189.86,
+      },
+    ],
+    quantile: 0.5,
+    serviceName: 'cartservice',
+  },
+};
+
 const serviceMetricsWithNulls = {
   service_call_rate: {
     max: 0.05,
@@ -1278,6 +1327,7 @@ export {
   emptyResponse,
   originInitialState,
   serviceMetrics,
+  serviceMetricsWithOneServiceLatency,
   serviceOpsMetrics,
   serviceLatencies50withNull,
   serviceMetricsWithNulls,