From 7348b1eafc1a75139b8434267876d86026104a8f Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Wed, 23 Feb 2022 01:56:11 +0200
Subject: [PATCH] Monitor Tab - The x-axis timeframe should be according to the
 selected timeframe (#886)

* Time frame

Signed-off-by: nofar9792 <nofar.cohen@logz.io>

* Fix shifting graph

Signed-off-by: nofar9792 <nofar.cohen@logz.io>

* Remove comment

Signed-off-by: nofar9792 <nofar.cohen@logz.io>

* Calc domain in ctor

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../__snapshots__/index.test.js.snap          | 22 +++++++++++++++++--
 .../Monitor/ServicesView/index.test.js        |  4 ++++
 .../components/Monitor/ServicesView/index.tsx |  7 ++++++
 .../Monitor/ServicesView/serviceGraph.tsx     |  3 +++
 4 files changed, 34 insertions(+), 2 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..93ffb71867 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
@@ -55,7 +55,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
         " metrics in selected timeframe.
          
         <a
-          href="/search?end=1487076708000000&limit=20&lookback=1h&maxDuration&minDuration&service=s1&start=1487073108000000"
+          href="/search?end=1466424490000000&limit=20&lookback=1h&maxDuration&minDuration&service=s1&start=1466420890000000"
           target="blank"
         >
           View all traces
@@ -174,6 +174,12 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
         showHorizontalLines={true}
         showLegend={true}
         width={300}
+        xDomain={
+          Array [
+            1466420890000,
+            1466424490000,
+          ]
+        }
       />
     </Col>
     <Col
@@ -203,6 +209,12 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
         }
         name="Error rate, %"
         width={300}
+        xDomain={
+          Array [
+            1466420890000,
+            1466424490000,
+          ]
+        }
         yDomain={
           Array [
             0,
@@ -239,6 +251,12 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
         name="Request rate, req/s"
         showHorizontalLines={true}
         width={300}
+        xDomain={
+          Array [
+            1466420890000,
+            1466424490000,
+          ]
+        }
       />
     </Col>
   </Row>
@@ -335,7 +353,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
             },
           ]
         }
-        endTime={1487076708000}
+        endTime={1466424490000}
         error={
           Object {
             "opsCalls": null,
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 0be788968f..3434f6d1ba 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
@@ -40,6 +40,9 @@ describe('<MonitorATMServicesView>', () => {
   const mockFetchServices = jest.fn();
   const mockFetchAllServiceMetrics = jest.fn();
   const mockFetchAggregatedServiceMetrics = jest.fn();
+  beforeAll(() => {
+    Date.now = jest.fn(() => 1466424490000);
+  });
 
   beforeEach(() => {
     wrapper = shallow(
@@ -54,6 +57,7 @@ describe('<MonitorATMServicesView>', () => {
 
   afterEach(() => {
     wrapper = null;
+
     jest.clearAllMocks();
   });
 
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index 3b9ccb1309..ee87b2b86c 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -89,6 +89,7 @@ export const getLoopbackInterval = (interval: number) => {
 // export for tests
 export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, StateType> {
   graphDivWrapper: React.RefObject<HTMLInputElement>;
+  graphXDomain: number[];
   serviceSelectorValue: string = '';
   endTime: number = Date.now();
   state = {
@@ -100,6 +101,9 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
   constructor(props: TProps) {
     super(props);
     this.graphDivWrapper = React.createRef();
+
+    const currentTime = Date.now();
+    this.graphXDomain = [currentTime - props.selectedTimeFrame, currentTime];
   }
 
   componentDidMount() {
@@ -251,6 +255,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               showLegend
               marginClassName="latency-margins"
               showHorizontalLines
+              xDomain={this.graphXDomain}
             />
           </Col>
           <Col span={8}>
@@ -264,6 +269,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               marginClassName="error-rate-margins"
               color="#CD513A"
               yDomain={[0, 100]}
+              xDomain={this.graphXDomain}
             />
           </Col>
           <Col span={8}>
@@ -277,6 +283,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               showHorizontalLines
               color="#4795BA"
               marginClassName="request-margins"
+              xDomain={this.graphXDomain}
             />
           </Col>
         </Row>
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
index 57bc63e14e..1328a0450e 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
@@ -41,6 +41,7 @@ type TProps = {
   yDomain?: number[];
   color?: string;
   marginClassName?: string;
+  xDomain: number[];
 };
 
 type TCrossHairValues = {
@@ -145,6 +146,7 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
       marginClassName,
       name,
       error,
+      xDomain,
     } = this.props;
     let GraphComponent = this.generatePlaceholder(<LoadingIndicator centered />);
     const noDataComponent = this.generatePlaceholder('No Data');
@@ -156,6 +158,7 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
         onMouseLeave={() => this.setState({ crosshairValues: [] })}
         width={width}
         height={this.height - 74}
+        xDomain={xDomain}
         yDomain={yDomain}
       >
         {showHorizontalLines ? <HorizontalGridLines /> : null}