From 741297eb12cfb20ff294ccc6a8bdf050249b7a47 Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Sun, 30 Jan 2022 13:11:39 +0200
Subject: [PATCH 1/4] Time frame

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../__snapshots__/index.test.js.snap          |  3 ++
 .../__snapshots__/serviceGraph.test.js.snap   | 30 +++++++++++++++++++
 .../components/Monitor/ServicesView/index.tsx |  3 ++
 .../Monitor/ServicesView/serviceGraph.test.js | 10 ++++++-
 .../Monitor/ServicesView/serviceGraph.tsx     |  5 ++++
 5 files changed, 50 insertions(+), 1 deletion(-)

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..6b84827784 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
@@ -171,6 +171,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
           ]
         }
         name="Latency, ms"
+        selectedTimeFrame={3600000}
         showHorizontalLines={true}
         showLegend={true}
         width={300}
@@ -202,6 +203,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
           }
         }
         name="Error rate, %"
+        selectedTimeFrame={3600000}
         width={300}
         yDomain={
           Array [
@@ -237,6 +239,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
           }
         }
         name="Request rate, req/s"
+        selectedTimeFrame={3600000}
         showHorizontalLines={true}
         width={300}
       />
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..e84a35c1d0 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
@@ -80,6 +80,12 @@ exports[`<ServiceGraph> Base graph should be displayed  1`] = `
     }
     onMouseLeave={[Function]}
     width={300}
+    xDomain={
+      Array [
+        1466420890000,
+        1466424490000,
+      ]
+    }
   >
     <XAxis
       attr="x"
@@ -194,6 +200,12 @@ exports[`<ServiceGraph> Base graph with custom color should be displayed 1`] = `
     }
     onMouseLeave={[Function]}
     width={300}
+    xDomain={
+      Array [
+        1466420890000,
+        1466424490000,
+      ]
+    }
   >
     <XAxis
       attr="x"
@@ -308,6 +320,12 @@ exports[`<ServiceGraph> Base graph with horizontal lines should be displayed 1`]
     }
     onMouseLeave={[Function]}
     width={300}
+    xDomain={
+      Array [
+        1466420890000,
+        1466424490000,
+      ]
+    }
   >
     <HorizontalGridLines
       attr="y"
@@ -426,6 +444,12 @@ exports[`<ServiceGraph> Base graph with legends should be displayed 1`] = `
     }
     onMouseLeave={[Function]}
     width={300}
+    xDomain={
+      Array [
+        1466420890000,
+        1466424490000,
+      ]
+    }
   >
     <XAxis
       attr="x"
@@ -561,6 +585,12 @@ exports[`<ServiceGraph> Crosshair map test 1`] = `
     }
     onMouseLeave={[Function]}
     width={300}
+    xDomain={
+      Array [
+        1466420890000,
+        1466424490000,
+      ]
+    }
   >
     <XAxis
       attr="x"
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index b8f21d0cf6..2830f47188 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -251,6 +251,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               showLegend
               marginClassName="latency-margins"
               showHorizontalLines
+              selectedTimeFrame={selectedTimeFrame}
             />
           </Col>
           <Col span={8}>
@@ -264,6 +265,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               marginClassName="error-rate-margins"
               color="#CD513A"
               yDomain={[0, 100]}
+              selectedTimeFrame={selectedTimeFrame}
             />
           </Col>
           <Col span={8}>
@@ -277,6 +279,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               showHorizontalLines
               color="#4795BA"
               marginClassName="request-margins"
+              selectedTimeFrame={selectedTimeFrame}
             />
           </Col>
         </Row>
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js
index 25bcc51807..12e888d87d 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js
@@ -25,11 +25,19 @@ const props = {
   loading: true,
   marginClassName: '',
   crosshairValues: [],
+  selectedTimeFrame: 3600000,
 };
 
 describe('<ServiceGraph>', () => {
   let wrapper;
-
+  let dateSpy;
+  beforeAll(() => {
+    const mockDate = new Date(1466424490000);
+    dateSpy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);
+  });
+  afterAll(() => {
+    dateSpy.mockRestore();
+  });
   beforeEach(() => {
     wrapper = shallow(<ServiceGraph {...props} />);
   });
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
index 0e6d03ba1a..a722f64458 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;
+  selectedTimeFrame: number;
 };
 
 type TCrossHairValues = {
@@ -145,10 +146,13 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
       marginClassName,
       name,
       error,
+      selectedTimeFrame,
     } = this.props;
     let GraphComponent = this.generatePlaceholder(<LoadingIndicator centered />);
     const noDataComponent = this.generatePlaceholder('No Data');
     const apiErrorComponent = this.generatePlaceholder('Couldn’t fetch data');
+    const currentTime = new Date().getTime();
+    const xDomain = [currentTime - selectedTimeFrame, currentTime];
 
     const Plot = (
       <XYPlot
@@ -156,6 +160,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}

From f739027f83223e02166cf7e91aacc0c82a6bca77 Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Mon, 14 Feb 2022 14:33:04 +0200
Subject: [PATCH 2/4] Fix shifting graph

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../__snapshots__/index.test.js.snap          | 25 ++++++++++++----
 .../__snapshots__/serviceGraph.test.js.snap   | 30 -------------------
 .../Monitor/ServicesView/index.test.js        |  5 ++++
 .../components/Monitor/ServicesView/index.tsx |  8 +++--
 .../Monitor/ServicesView/serviceGraph.test.js | 10 +------
 .../Monitor/ServicesView/serviceGraph.tsx     |  6 ++--
 6 files changed, 33 insertions(+), 51 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 6b84827784..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
@@ -171,10 +171,15 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
           ]
         }
         name="Latency, ms"
-        selectedTimeFrame={3600000}
         showHorizontalLines={true}
         showLegend={true}
         width={300}
+        xDomain={
+          Array [
+            1466420890000,
+            1466424490000,
+          ]
+        }
       />
     </Col>
     <Col
@@ -203,8 +208,13 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
           }
         }
         name="Error rate, %"
-        selectedTimeFrame={3600000}
         width={300}
+        xDomain={
+          Array [
+            1466420890000,
+            1466424490000,
+          ]
+        }
         yDomain={
           Array [
             0,
@@ -239,9 +249,14 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
           }
         }
         name="Request rate, req/s"
-        selectedTimeFrame={3600000}
         showHorizontalLines={true}
         width={300}
+        xDomain={
+          Array [
+            1466420890000,
+            1466424490000,
+          ]
+        }
       />
     </Col>
   </Row>
@@ -338,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/__snapshots__/serviceGraph.test.js.snap b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/serviceGraph.test.js.snap
index e84a35c1d0..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
@@ -80,12 +80,6 @@ exports[`<ServiceGraph> Base graph should be displayed  1`] = `
     }
     onMouseLeave={[Function]}
     width={300}
-    xDomain={
-      Array [
-        1466420890000,
-        1466424490000,
-      ]
-    }
   >
     <XAxis
       attr="x"
@@ -200,12 +194,6 @@ exports[`<ServiceGraph> Base graph with custom color should be displayed 1`] = `
     }
     onMouseLeave={[Function]}
     width={300}
-    xDomain={
-      Array [
-        1466420890000,
-        1466424490000,
-      ]
-    }
   >
     <XAxis
       attr="x"
@@ -320,12 +308,6 @@ exports[`<ServiceGraph> Base graph with horizontal lines should be displayed 1`]
     }
     onMouseLeave={[Function]}
     width={300}
-    xDomain={
-      Array [
-        1466420890000,
-        1466424490000,
-      ]
-    }
   >
     <HorizontalGridLines
       attr="y"
@@ -444,12 +426,6 @@ exports[`<ServiceGraph> Base graph with legends should be displayed 1`] = `
     }
     onMouseLeave={[Function]}
     width={300}
-    xDomain={
-      Array [
-        1466420890000,
-        1466424490000,
-      ]
-    }
   >
     <XAxis
       attr="x"
@@ -585,12 +561,6 @@ exports[`<ServiceGraph> Crosshair map test 1`] = `
     }
     onMouseLeave={[Function]}
     width={300}
-    xDomain={
-      Array [
-        1466420890000,
-        1466424490000,
-      ]
-    }
   >
     <XAxis
       attr="x"
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..1866bc9180 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,8 @@ describe('<MonitorATMServicesView>', () => {
 
   afterEach(() => {
     wrapper = null;
+    // dateSpy.mockRestore();
+
     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 2830f47188..0e466f4a61 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -171,6 +171,8 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
 
   render() {
     const { services, metrics, selectedTimeFrame, servicesLoading } = this.props;
+    const currentTime = Date.now();
+    const xDomain = [currentTime - selectedTimeFrame, currentTime];
 
     if (servicesLoading) {
       return <LoadingIndicator vcentered centered />;
@@ -251,7 +253,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               showLegend
               marginClassName="latency-margins"
               showHorizontalLines
-              selectedTimeFrame={selectedTimeFrame}
+              xDomain={xDomain}
             />
           </Col>
           <Col span={8}>
@@ -265,7 +267,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               marginClassName="error-rate-margins"
               color="#CD513A"
               yDomain={[0, 100]}
-              selectedTimeFrame={selectedTimeFrame}
+              xDomain={xDomain}
             />
           </Col>
           <Col span={8}>
@@ -279,7 +281,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               showHorizontalLines
               color="#4795BA"
               marginClassName="request-margins"
-              selectedTimeFrame={selectedTimeFrame}
+              xDomain={xDomain}
             />
           </Col>
         </Row>
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js
index 12e888d87d..25bcc51807 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.test.js
@@ -25,19 +25,11 @@ const props = {
   loading: true,
   marginClassName: '',
   crosshairValues: [],
-  selectedTimeFrame: 3600000,
 };
 
 describe('<ServiceGraph>', () => {
   let wrapper;
-  let dateSpy;
-  beforeAll(() => {
-    const mockDate = new Date(1466424490000);
-    dateSpy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);
-  });
-  afterAll(() => {
-    dateSpy.mockRestore();
-  });
+
   beforeEach(() => {
     wrapper = shallow(<ServiceGraph {...props} />);
   });
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
index a722f64458..08c4ab01ed 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/serviceGraph.tsx
@@ -41,7 +41,7 @@ type TProps = {
   yDomain?: number[];
   color?: string;
   marginClassName?: string;
-  selectedTimeFrame: number;
+  xDomain: number[];
 };
 
 type TCrossHairValues = {
@@ -146,13 +146,11 @@ export class ServiceGraphImpl extends React.PureComponent<TProps> {
       marginClassName,
       name,
       error,
-      selectedTimeFrame,
+      xDomain,
     } = this.props;
     let GraphComponent = this.generatePlaceholder(<LoadingIndicator centered />);
     const noDataComponent = this.generatePlaceholder('No Data');
     const apiErrorComponent = this.generatePlaceholder('Couldn’t fetch data');
-    const currentTime = new Date().getTime();
-    const xDomain = [currentTime - selectedTimeFrame, currentTime];
 
     const Plot = (
       <XYPlot

From 77048764a0a518a17ec3d5ff050ab4e1778c4239 Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Tue, 15 Feb 2022 17:31:23 +0200
Subject: [PATCH 3/4] Remove comment

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../jaeger-ui/src/components/Monitor/ServicesView/index.test.js  | 1 -
 1 file changed, 1 deletion(-)

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 1866bc9180..3434f6d1ba 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
@@ -57,7 +57,6 @@ describe('<MonitorATMServicesView>', () => {
 
   afterEach(() => {
     wrapper = null;
-    // dateSpy.mockRestore();
 
     jest.clearAllMocks();
   });

From 4f54f1d770e4287ef6cd07411290f74628e7c53e Mon Sep 17 00:00:00 2001
From: nofar9792 <nofar.cohen@logz.io>
Date: Sun, 20 Feb 2022 18:24:31 +0200
Subject: [PATCH 4/4] Calc domain in ctor

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
---
 .../src/components/Monitor/ServicesView/index.tsx    | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index 9c0410a604..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() {
@@ -171,8 +175,6 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
 
   render() {
     const { services, metrics, selectedTimeFrame, servicesLoading } = this.props;
-    const currentTime = Date.now();
-    const xDomain = [currentTime - selectedTimeFrame, currentTime];
 
     if (servicesLoading) {
       return <LoadingIndicator vcentered centered />;
@@ -253,7 +255,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               showLegend
               marginClassName="latency-margins"
               showHorizontalLines
-              xDomain={xDomain}
+              xDomain={this.graphXDomain}
             />
           </Col>
           <Col span={8}>
@@ -267,7 +269,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               marginClassName="error-rate-margins"
               color="#CD513A"
               yDomain={[0, 100]}
-              xDomain={xDomain}
+              xDomain={this.graphXDomain}
             />
           </Col>
           <Col span={8}>
@@ -281,7 +283,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               showHorizontalLines
               color="#4795BA"
               marginClassName="request-margins"
-              xDomain={xDomain}
+              xDomain={this.graphXDomain}
             />
           </Col>
         </Row>