Merge #71951

71951: [CRDB-10435] ui: fix zoomed in metrics charts disappear after switching between metrics dashboards r=Santamaura a=Santamaura

This PR fixes the issue where a zoomed in metrics chart or custom date range causes the graphs to disappear after switching tabs. This was a rendering issue caused by the way lifecycle is managed; when a tab is switched the component un-mounts and the uplot graphs are destroyed. On switching back, when the component updates there is a check to see if data exists and also if data is the same as previous data in order to not cause a graph update or re-render every time there is a component update. If the conditions are met then there is an early exit. The issue is when there is a zoomed in metrics chart or custom date range, it is a fixed time window. Thus when the component is updating for these cases it will always exit early, even if no uplot exists which results in a blank area because the previous data will always match the current data. To resolve this, a check is paired with the same data check to make sure that a uplot already exists which allows the previously mentioned issue to not occur.

Release note: None

Result of changes

https://user-images.githubusercontent.com/17861665/138747957-9f2651ee-68d5-41b0-a173-d25287db758f.mp4

:


Co-authored-by: Santamaura <[email protected]>

pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/index.tsx

@@ -445,9 +445,8 @@ export class LineGraph extends React.Component<LineGraphProps, {}> {
 
   componentDidUpdate(prevProps: Readonly<LineGraphProps>) {
     if (
-      !this.props.data ||
-      !this.props.data.results ||
-      prevProps.data === this.props.data
+      !this.props.data?.results ||
+      (prevProps.data === this.props.data && this.u !== undefined)
     ) {
       return;
     }