perf: avoid service table re-renders if data unchanged

dcos · Apr 9, 2019 · 21fcdbf · 21fcdbf
1 parent 05c67c3
commit 21fcdbf
Showing 1 changed file with 71 additions and 1 deletion.
diff --git a/plugins/services/src/js/containers/services/ServicesTable.js b/plugins/services/src/js/containers/services/ServicesTable.js
@@ -12,7 +12,9 @@ import {
 
 import Loader from "#SRC/js/components/Loader";
 import MetadataStore from "#SRC/js/stores/MetadataStore";
+import { findNestedPropertyInObject } from "#SRC/js/utils/Util";
 import { isSDKService } from "../../utils/ServiceUtil";
+import ServiceTableUtil from "../../utils/ServiceTableUtil";
 
 import { ServiceActionItem } from "../../constants/ServiceActionItem";
 import ServiceActionLabels from "../../constants/ServiceActionLabels";
@@ -49,6 +51,7 @@ import {
 } from "../../columns/ServicesTableDiskColumn";
 import { gpuRenderer, gpuSorter } from "../../columns/ServicesTableGPUColumn";
 import { actionsRendererFactory } from "../../columns/ServicesTableActionsColumn";
+import { getStatusIconProps } from "../../utils/ServiceStatusIconUtil";
 
 const DELETE = ServiceActionItem.DELETE;
 const EDIT = ServiceActionItem.EDIT;
@@ -66,6 +69,62 @@ const METHODS_TO_BIND = [
   "handleSortClick"
 ];
 
+const isServiceDataNew = (prevData, nextData) => {
+  const serviceDataCompareArr = nextData.map((nextServiceData, i) => {
+    if (!nextServiceData || !prevData[i]) {
+      return false;
+    }
+
+    const sameStatus =
+      getStatusIconProps(prevData[i]).serviceStatus.key ===
+      getStatusIconProps(nextServiceData).serviceStatus.key;
+    const sameVersion =
+      findNestedPropertyInObject(
+        ServiceTableUtil.getFormattedVersion(nextServiceData),
+        "displayVersion"
+      ) ===
+      findNestedPropertyInObject(
+        ServiceTableUtil.getFormattedVersion(prevData[i]),
+        "displayVersion"
+      );
+    const sameReg =
+      nextServiceData.getRegions().length ===
+      [...new Set(nextServiceData.getRegions(), prevData[i].getRegions())]
+        .length;
+    const sameInstances =
+      nextServiceData.getInstancesCount() === prevData[i].getInstancesCount() ||
+      nextServiceData.getRunningInstancesCount() ===
+        prevData[i].getRunningInstancesCount();
+    const sameCPU =
+      nextServiceData.getResources()["cpus"] ===
+      prevData[i].getResources()["cpus"];
+    const sameMem =
+      nextServiceData.getResources()["mem"] ===
+      prevData[i].getResources()["mem"];
+    const sameDisk =
+      nextServiceData.getResources()["disk"] ===
+      prevData[i].getResources()["disk"];
+    const sameGPU =
+      nextServiceData.getResources()["gpus"] ===
+      prevData[i].getResources()["gpus"];
+
+    const isChanged = [
+      sameStatus,
+      sameVersion,
+      sameReg,
+      sameInstances,
+      sameCPU,
+      sameMem,
+      sameDisk,
+      sameGPU
+    ].some(hasChange => hasChange === false);
+
+    return isChanged;
+  });
+
+  return serviceDataCompareArr.some(isChanged => isChanged === true);
+};
+
 class ServicesTable extends React.Component {
   constructor() {
     super(...arguments);
@@ -86,6 +145,16 @@ class ServicesTable extends React.Component {
     });
   }
 
+  shouldComponentUpdate(nextProps) {
+    const sameServiceCount =
+      nextProps.services.length === this.props.services.length;
+
+    return (
+      !sameServiceCount ||
+      isServiceDataNew(this.props.services, nextProps.services)
+    );
+  }
+
   componentWillReceiveProps(nextProps) {
     this.setState(
       this.updateData(
@@ -408,7 +477,8 @@ class ServicesTable extends React.Component {
                             target="_blank"
                           >
                             Read more
-                          </a>.
+                          </a>
+                          .
                         </Trans>
                       }
                     >