diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.test.js b/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.test.js
index 1811b8dd42..42deffa0fb 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.test.js
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.test.js
@@ -22,6 +22,7 @@ import {
 } from '.';
 import LoadingIndicator from '../../common/LoadingIndicator';
 import MonitoringATMEmptyState from '../EmptyState';
+import ServiceGraph from './serviceGraph';
 import { originInitialState, serviceMetrics, serviceOpsMetrics } from '../../../reducers/metrics.mock';
 
 const state = {
@@ -103,7 +104,7 @@ describe('<MonitoringATMServicesView>', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('ComponentWillUnmount remove listnere', () => {
+  it('ComponentWillUnmount remove listener', () => {
     const remover = jest.spyOn(global, 'removeEventListener').mockImplementation(() => {});
     wrapper.unmount();
     expect(remover).toHaveBeenCalled();
@@ -140,6 +141,76 @@ describe('<MonitoringATMServicesView>', () => {
     wrapper.find('Search').simulate('change', { target: { value: '' } });
     expect(wrapper.state().serviceOpsMetrics.length).toBe(1);
   });
+
+  it('Error in serviceLatencies ', () => {
+    wrapper.setProps({
+      services: ['s1', 's2'],
+      selectedService: 's1',
+      metrics: {
+        ...originInitialState,
+        serviceMetrics,
+        serviceOpsMetrics,
+        loading: false,
+        isATMActivated: true,
+        serviceError: {
+          ...originInitialState.serviceError,
+          service_latencies_50: new Error('some API error'),
+        },
+      },
+    });
+    expect(
+      wrapper
+        .find(ServiceGraph)
+        .first()
+        .prop('error')
+    ).toBeNull();
+
+    wrapper.setProps({
+      services: ['s1', 's2'],
+      selectedService: 's1',
+      metrics: {
+        ...originInitialState,
+        serviceMetrics,
+        serviceOpsMetrics,
+        loading: false,
+        isATMActivated: true,
+        serviceError: {
+          ...originInitialState.serviceError,
+          service_latencies_50: new Error('some API error'),
+          service_latencies_75: new Error('some API error'),
+        },
+      },
+    });
+    expect(
+      wrapper
+        .find(ServiceGraph)
+        .first()
+        .prop('error')
+    ).toBeNull();
+
+    wrapper.setProps({
+      services: ['s1', 's2'],
+      selectedService: 's1',
+      metrics: {
+        ...originInitialState,
+        serviceMetrics,
+        serviceOpsMetrics,
+        loading: false,
+        isATMActivated: true,
+        serviceError: {
+          service_latencies_50: new Error('some API error'),
+          service_latencies_75: new Error('some API error'),
+          service_latencies_95: new Error('some API error'),
+        },
+      },
+    });
+    expect(
+      wrapper
+        .find(ServiceGraph)
+        .first()
+        .prop('error')
+    ).not.toBeNull();
+  });
 });
 
 describe('mapStateToProps()', () => {
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap
index 037863d655..6bb30d9f10 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/__snapshots__/index.test.js.snap
@@ -729,12 +729,7 @@ exports[`<OperationTableDetails> render some values in the table 1`] = `
                       onClick={[Function]}
                     >
                       <div
-                        style={
-                          Object {
-                            "display": "flex",
-                            "flexDirection": "row",
-                          }
-                        }
+                        className="column-container"
                       >
                         <div
                           className="ops-container"
@@ -813,12 +808,7 @@ exports[`<OperationTableDetails> render some values in the table 1`] = `
                       onClick={[Function]}
                     >
                       <div
-                        style={
-                          Object {
-                            "display": "flex",
-                            "flexDirection": "row",
-                          }
-                        }
+                        className="column-container"
                       >
                         <div
                           className="ops-container"
@@ -897,12 +887,7 @@ exports[`<OperationTableDetails> render some values in the table 1`] = `
                       onClick={[Function]}
                     >
                       <div
-                        style={
-                          Object {
-                            "display": "flex",
-                            "flexDirection": "row",
-                          }
-                        }
+                        className="column-container"
                       >
                         <div
                           className="ops-container"
@@ -981,7 +966,7 @@ exports[`<OperationTableDetails> render some values in the table 1`] = `
                       onClick={[Function]}
                     >
                       <div
-                        className="impact-container"
+                        className="column-container"
                       >
                         <div
                           className="ant-progress ant-progress-line ant-progress-status-success ant-progress-default impact"
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.css b/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.css
index 574f19d95d..9aca30105f 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.css
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.css
@@ -71,7 +71,7 @@ td.header-item {
   margin-left: 12px;
 }
 
-.impact-container {
+.column-container {
   display: flex;
 }
 
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.test.js b/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.test.js
index 2a5101bbb4..a2a45dd353 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.test.js
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.test.js
@@ -24,7 +24,6 @@ const props = {
   endTime: 1632133918915,
   lookback: 3600 * 1000,
   serviceName: 'serviceName',
-  // state
   hoveredRowKey: [],
 };
 
@@ -226,4 +225,53 @@ describe('<OperationTableDetails>', () => {
         .text()
     ).toBe('/Accounts');
   });
+
+  it('Graph avg label test', () => {
+    const data = [
+      {
+        dataPoints: {
+          avg: {
+            service_operation_call_rate: 11,
+            service_operation_error_rate: 22,
+            service_operation_latencies: 99,
+          },
+          service_operation_call_rate: [],
+          service_operation_error_rate: [],
+          service_operation_latencies: [],
+        },
+        errRates: 1,
+        impact: 2,
+        key: 1,
+        latency: 3,
+        name: '/Accounts',
+        requests: 4,
+      },
+    ];
+
+    wrapper.setProps({ ...props, data, loading: false });
+
+    // Latency
+    expect(
+      wrapper
+        .find('div.table-graph-avg')
+        .at(0)
+        .text()
+    ).toBe('');
+
+    // Request rate
+    expect(
+      wrapper
+        .find('div.table-graph-avg')
+        .at(1)
+        .text()
+    ).toBe('');
+
+    // Error rate
+    expect(
+      wrapper
+        .find('div.table-graph-avg')
+        .at(2)
+        .text()
+    ).toBe('');
+  });
 });
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.tsx b/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.tsx
index 0b7e979a1b..3dd80a092d 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/operationDetailsTable/index.tsx
@@ -65,16 +65,14 @@ export class OperationTableDetails extends React.PureComponent<TProps, TState> {
         key: 'latency',
         sorter: (a: ServiceOpsMetrics, b: ServiceOpsMetrics) => a.latency - b.latency,
         render: (value: ServiceOpsMetrics['latency'], row: ServiceOpsMetrics) => (
-          <div style={{ display: 'flex', flexDirection: 'row' }}>
+          <div className="column-container">
             <REDGraph
               dataPoints={row.dataPoints.service_operation_latencies}
               color="#869ADD"
               error={error.opsLatencies}
             />
             <div className="table-graph-avg">
-              {typeof value === 'number' && row.dataPoints.service_operation_latencies.length > 0
-                ? `${value} ms`
-                : ''}
+              {row.dataPoints.service_operation_latencies.length > 0 ? `${value} ms` : ''}
             </div>
           </div>
         ),
@@ -86,16 +84,14 @@ export class OperationTableDetails extends React.PureComponent<TProps, TState> {
         key: 'requests',
         sorter: (a: ServiceOpsMetrics, b: ServiceOpsMetrics) => a.requests - b.requests,
         render: (value: ServiceOpsMetrics['requests'], row: ServiceOpsMetrics) => (
-          <div style={{ display: 'flex', flexDirection: 'row' }}>
+          <div className="column-container">
             <REDGraph
               dataPoints={row.dataPoints.service_operation_call_rate}
               color="#4795BA"
               error={error.opsCalls}
             />
             <div className="table-graph-avg">
-              {typeof value === 'number' && row.dataPoints.service_operation_call_rate.length > 0
-                ? `${value} req/s`
-                : ''}
+              {row.dataPoints.service_operation_call_rate.length > 0 ? `${value} req/s` : ''}
             </div>
           </div>
         ),
@@ -107,7 +103,7 @@ export class OperationTableDetails extends React.PureComponent<TProps, TState> {
         key: 'errRates',
         sorter: (a: ServiceOpsMetrics, b: ServiceOpsMetrics) => a.errRates - b.errRates,
         render: (value: ServiceOpsMetrics['errRates'], row: ServiceOpsMetrics) => (
-          <div style={{ display: 'flex', flexDirection: 'row' }}>
+          <div className="column-container">
             <REDGraph
               dataPoints={row.dataPoints.service_operation_error_rate}
               color="#CD513A"
@@ -115,9 +111,7 @@ export class OperationTableDetails extends React.PureComponent<TProps, TState> {
               error={error.opsErrors}
             />
             <div className="table-graph-avg">
-              {typeof value === 'number' && row.dataPoints.service_operation_error_rate.length > 0
-                ? `${value}%`
-                : ''}
+              {row.dataPoints.service_operation_error_rate.length > 0 ? `${value}%` : ''}
             </div>
           </div>
         ),
@@ -163,7 +157,7 @@ export class OperationTableDetails extends React.PureComponent<TProps, TState> {
 
           return {
             children: (
-              <div className="impact-container">
+              <div className="column-container">
                 <Progress
                   className="impact"
                   percent={value * 100}
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/serviceGraph.test.js b/packages/jaeger-ui/src/components/Monitoring/ServicesView/serviceGraph.test.js
index 8f501cd618..25bcc51807 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/serviceGraph.test.js
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/serviceGraph.test.js
@@ -24,7 +24,6 @@ const props = {
   metricsData: null,
   loading: true,
   marginClassName: '',
-  // state
   crosshairValues: [],
 };
 
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitoring/ServicesView/serviceGraph.tsx
index 0ef5bce71e..f0f0066ee7 100644
--- a/packages/jaeger-ui/src/components/Monitoring/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitoring/ServicesView/serviceGraph.tsx
@@ -68,6 +68,9 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
 
   getData(): ServiceMetricsObject[] {
     const { metricsData } = this.props;
+
+    // TS required to check, but we do it in render function
+    /* istanbul ignore next */
     if (metricsData === null) {
       return [];
     }
@@ -88,18 +91,14 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
             key={i++}
             data={line.metricPoints ? line.metricPoints : []}
             getNull={(d: Points) => d.y !== null}
-            onNearestX={
-              idx === 0
-                ? (_datapoint: Points, { index }: { index: number }) => {
-                    this.setState({
-                      crosshairValues: this.getData().map((d: ServiceMetricsObject) => ({
-                        ...d.metricPoints[index],
-                        label: d.quantile,
-                      })),
-                    });
-                  }
-                : null
-            }
+            onNearestX={(_datapoint: Points, { index }: { index: number }) => {
+              this.setState({
+                crosshairValues: this.getData().map((d: ServiceMetricsObject) => ({
+                  ...d.metricPoints[index],
+                  label: d.quantile,
+                })),
+              });
+            }}
             opacity={0.1}
             color={[color || this.colors[idx]]}
           />
diff --git a/packages/jaeger-ui/src/reducers/metrics.test.js b/packages/jaeger-ui/src/reducers/metrics.test.js
index 139bd8ee6b..177f4bfa81 100644
--- a/packages/jaeger-ui/src/reducers/metrics.test.js
+++ b/packages/jaeger-ui/src/reducers/metrics.test.js
@@ -39,6 +39,17 @@ describe('reducers/fetchAllServiceMetrics', () => {
   beforeEach(verifyInitialState);
   afterEach(verifyInitialState);
 
+  it('Pending state ', () => {
+    const state = metricReducer(initialState, {
+      type: `${fetchAllServiceMetrics}_PENDING`,
+    });
+
+    expect(state).toEqual({
+      ...initialState,
+      loading: true,
+    });
+  });
+
   it('payload is undefined', () => {
     const state = metricReducer(initialState, {
       type: `${fetchAllServiceMetrics}_FULFILLED`,
@@ -235,6 +246,17 @@ describe('reducers/fetchAggregatedServiceMetrics', () => {
   beforeEach(verifyInitialState);
   afterEach(verifyInitialState);
 
+  it('Pending state ', () => {
+    const state = metricReducer(initialState, {
+      type: `${fetchAggregatedServiceMetrics}_PENDING`,
+    });
+
+    expect(state).toEqual({
+      ...initialState,
+      operationMetricsLoading: true,
+    });
+  });
+
   it('payload is undefined', () => {
     const state = metricReducer(initialState, {
       type: `${fetchAggregatedServiceMetrics}_FULFILLED`,