diff --git a/plugins/services/src/js/containers/services/ServicesTable.js b/plugins/services/src/js/containers/services/ServicesTable.js index 6a2565c446..edd4f46fcc 100644 --- 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 - . + + . } >