Monitor Tab - The x-axis timeframe should be according to the selecte…

…d timeframe (#886) * Time frame Signed-off-by: nofar9792 <[email protected]> * Fix shifting graph Signed-off-by: nofar9792 <[email protected]> * Remove comment Signed-off-by: nofar9792 <[email protected]> * Calc domain in ctor Signed-off-by: nofar9792 <[email protected]>
jaegertracing · Feb 22, 2022 · 7348b1e · 7348b1e
1 parent 676a90b
commit 7348b1e
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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}