perf(services): avoid rerenders for progress bars

Closes DCOS-51377
dcos · Apr 9, 2019 · a03443f · a03443f
1 parent 0ed91c3
commit a03443f
Showing 1 changed file with 34 additions and 29 deletions.
diff --git a/plugins/services/src/js/components/ServiceStatusProgressBar.tsx b/plugins/services/src/js/components/ServiceStatusProgressBar.tsx
@@ -14,6 +14,36 @@ interface ServiceStatusProgressBarProps {
   service: Service | ServiceTree | Pod;
 }
 
+const ServiceProgressBar = React.memo(
+  ({
+    instancesCount,
+    runningInstances
+  }: {
+    instancesCount: number;
+    runningInstances: number;
+  }) => (
+    <Tooltip
+      interactive={true}
+      content={
+        <div className="tooltip-line-item">
+          <Plural
+            render="span"
+            value={runningInstances}
+            one={`# instance running out of ${instancesCount}`}
+            other={`# instances running out of ${instancesCount}`}
+          />
+        </div>
+      }
+    >
+      <ProgressBar
+        className="status-bar--large staged"
+        data={ProgressBar.getDataFromValue(runningInstances, "success")}
+        total={instancesCount}
+      />
+    </Tooltip>
+  )
+);
+
 class ServiceStatusProgressBar extends React.Component<
   ServiceStatusProgressBarProps
 > {
@@ -25,23 +55,6 @@ class ServiceStatusProgressBar extends React.Component<
     ]).isRequired
   };
 
-  getTooltipContent() {
-    const { service } = this.props;
-    const runningInstances = service.getRunningInstancesCount();
-    const instancesTotal = service.getInstancesCount();
-
-    return (
-      <div className="tooltip-line-item">
-        <Plural
-          render="span"
-          value={runningInstances}
-          one={`# instance running out of ${instancesTotal}`}
-          other={`# instances running out of ${instancesTotal}`}
-        />
-      </div>
-    );
-  }
-
   render() {
     const { service } = this.props;
     const instancesCount = service.getInstancesCount();
@@ -52,18 +65,10 @@ class ServiceStatusProgressBar extends React.Component<
     }
 
     return (
-      <Tooltip interactive={true} content={this.getTooltipContent()}>
-        <ProgressBar
-          className="status-bar--large staged"
-          data={[
-            {
-              className: "success",
-              value: runningInstances
-            }
-          ]}
-          total={instancesCount}
-        />
-      </Tooltip>
+      <ServiceProgressBar
+        instancesCount={instancesCount}
+        runningInstances={runningInstances}
+      />
     );
   }
 }