Monitor Tab: Cannot choose another timeframe (#898)

jaegertracing · Mar 1, 2022 · 161a661 · 161a661
1 parent 6e06ce0
commit 161a661
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 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
@@ -150,6 +150,15 @@ describe('<MonitorATMServicesView>', () => {
     expect(wrapper.state().graphWidth).toBe(76);
   });
 
+  it('should update state after choosing a new timeframe', () => {
+    const firstGraphXDomain = wrapper.state().graphXDomain;
+    wrapper.setProps({
+      selectedTimeFrame: 3600000 * 2,
+    });
+
+    expect(wrapper.state().graphXDomain).not.toBe(firstGraphXDomain);
+  });
+
   it('search test', () => {
     mockFetchServices.mockResolvedValue(['cartservice']);
     wrapper.setProps({

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -45,6 +45,7 @@ type StateType = {
   graphWidth: number;
   serviceOpsMetrics: ServiceOpsMetrics[] | undefined;
   searchOps: string;
+  graphXDomain: number[];
 };
 
 type TReduxProps = {
@@ -105,21 +106,18 @@ const convertServiceErrorRateToPercentages = (serviceErrorRate: null | ServiceMe
 // export for tests
 export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, StateType> {
   graphDivWrapper: React.RefObject<HTMLInputElement>;
-  graphXDomain: number[];
   serviceSelectorValue: string = '';
   endTime: number = Date.now();
   state = {
     graphWidth: 300,
     serviceOpsMetrics: undefined,
     searchOps: '',
+    graphXDomain: [],
   };
 
   constructor(props: TProps) {
     super(props);
     this.graphDivWrapper = React.createRef();
-
-    const currentTime = Date.now();
-    this.graphXDomain = [currentTime - props.selectedTimeFrame, currentTime];
   }
 
   componentDidMount() {
@@ -130,22 +128,34 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
     }
     window.addEventListener('resize', this.updateDimensions.bind(this));
     this.updateDimensions.apply(this);
+    this.calcGraphXDomain();
   }
 
-  componentDidUpdate(nextProps: TProps) {
+  componentDidUpdate(prevProps: TProps) {
     const { selectedService, selectedTimeFrame, services } = this.props;
 
-    if (nextProps.selectedService !== selectedService || nextProps.selectedTimeFrame !== selectedTimeFrame) {
+    if (prevProps.selectedService !== selectedService || prevProps.selectedTimeFrame !== selectedTimeFrame) {
       this.fetchMetrics();
-    } else if (!_isEqual(nextProps.services, services)) {
+    } else if (!_isEqual(prevProps.services, services)) {
       this.fetchMetrics();
     }
+
+    if (prevProps.selectedTimeFrame !== this.props.selectedTimeFrame) {
+      this.calcGraphXDomain();
+    }
   }
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.updateDimensions.bind(this));
   }
 
+  calcGraphXDomain() {
+    const currentTime = Date.now();
+    this.setState({
+      graphXDomain: [currentTime - this.props.selectedTimeFrame, currentTime],
+    });
+  }
+
   updateDimensions() {
     if (this.graphDivWrapper.current) {
       this.setState({
@@ -272,7 +282,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               showLegend
               marginClassName="latency-margins"
               showHorizontalLines
-              xDomain={this.graphXDomain}
+              xDomain={this.state.graphXDomain}
             />
           </Col>
           <Col span={8}>
@@ -286,7 +296,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               marginClassName="error-rate-margins"
               color="#CD513A"
               yDomain={[0, 100]}
-              xDomain={this.graphXDomain}
+              xDomain={this.state.graphXDomain}
             />
           </Col>
           <Col span={8}>
@@ -300,7 +310,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
               showHorizontalLines
               color="#4795BA"
               marginClassName="request-margins"
-              xDomain={this.graphXDomain}
+              xDomain={this.state.graphXDomain}
             />
           </Col>
         </Row>