[Platform][#7107] Changing node filter for universe metrics does not …

…update the graphs

Summary:
1) On universe -> Metrics tab, when changing the node filter from 'All' to a specific nodes, then back. Sometimes the graph will not re-plot even though the data is different. There was a condition added to prevent re-plotting of graph for time on componentDidUpdate lifecycle method , but need to check values as well when node changed . So deep comparing on the x-axis and y-axis data arrays.
2) While testing also found that - when node select it was not showing as selected in dropdown, currentSelectedNode state was not updated when node dropdown changed .

Test Plan:
- Run UI
- Go to Metrics navigation link at left side or universe -> Metrics tab
- Try changing Universe and selecting node .
- Checked manually by debugging in google developers tool for re-plotting graph

Reviewers: mjoshi, andrew

Reviewed By: andrew

Subscribers: sshevchenko, ui, yugaware

Differential Revision: https://phabricator.dev.yugabyte.com/D10629

managed/ui/src/components/metrics/GraphPanelHeader/GraphPanelHeader.js

@@ -227,7 +227,7 @@ class GraphPanelHeader extends Component {
   nodeItemChanged = (event) => {
     const newParams = this.state;
     newParams.nodeName = event.target.value;
-    this.setState({ nodeName: event.target.value });
+    this.setState({ nodeName: event.target.value, currentSelectedNode:event.target.value });
     this.updateUrlQueryParams(newParams);
   };
 

managed/ui/src/components/metrics/MetricsPanel/MetricsPanel.js

@@ -12,6 +12,7 @@ import {
 } from '../../../utils/ObjectUtils';
 import './MetricsPanel.scss';
 import { METRIC_FONT } from '../MetricsConfig';
+import _ from 'lodash';
 
 const Plotly = require('plotly.js/lib/core');
 
@@ -124,15 +125,14 @@ export default class MetricsPanel extends Component {
         width: this.props.width || this.getGraphWidth(this.props.containerWidth)
       });
     } else {
-      // All graph lines have the same x-axis, so get the first
-      // and compare unix time interval
-      const prevTime = prevProps.metric.data[0]?.x;
-      const currTime = this.props.metric.data[0]?.x;
+      // Comparing deep comparison of x-axis and y-axis arrays
+      // to avoid re-plotting graph if equal
+      const prevData = prevProps.metric.data;
+      const currData = this.props.metric.data;
       if (
-        prevTime &&
-        currTime &&
-        (prevTime[0] !== currTime[0] ||
-          prevTime[prevTime.length - 1] !== currTime[currTime.length - 1])
+        prevData &&
+        currData &&
+        !_.isEqual(prevData, currData)
       ) {
         // Re-plot graph
         this.plotGraph();