Use OnPush strategy for navigation component

Signed-off-by: GuessWhoSamFoo <foos@vmware.com>

web/src/app/modules/shared/components/presentation/datagrid/datagrid.component.ts

@@ -35,6 +35,8 @@ export class DatagridComponent implements OnChanges {
   lastUpdated: Date;
   filters: TableFilters;
 
+  private previousView: SimpleChanges;
+
   identifyRow = trackByIndex;
   identifyColumn = trackByIdentity;
   loading: boolean;
@@ -43,15 +45,22 @@ export class DatagridComponent implements OnChanges {
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.view) {
-      this.title = this.viewService.viewTitleAsText(this.view);
-
-      const current = changes.view.currentValue;
-      this.columns = current.config.columns.map(column => column.name);
-      this.rows = current.config.rows;
-      this.placeholder = current.config.emptyContent;
-      this.lastUpdated = new Date();
-      this.loading = current.config.loading;
-      this.filters = current.config.filters;
+      if (
+        JSON.stringify(this.previousView) !==
+        JSON.stringify(changes.view.currentValue)
+      ) {
+        this.title = this.viewService.viewTitleAsText(this.view);
+
+        const current = changes.view.currentValue;
+        this.columns = current.config.columns.map(column => column.name);
+        this.rows = current.config.rows;
+        this.placeholder = current.config.emptyContent;
+        this.lastUpdated = new Date();
+        this.loading = current.config.loading;
+        this.filters = current.config.filters;
+
+        this.previousView = changes.view.currentValue;
+      }
     }
   }
 }

web/src/app/modules/shared/components/presentation/label-selector/label-selector.component.ts

@@ -12,6 +12,7 @@ import { LabelSelectorView, View } from 'src/app/modules/shared/models/content';
 })
 export class LabelSelectorComponent implements OnChanges {
   private v: LabelSelectorView;
+  private previousView: SimpleChanges;
 
   @Input() set view(v: View) {
     this.v = v as LabelSelectorView;
@@ -26,9 +27,16 @@ export class LabelSelectorComponent implements OnChanges {
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.view.currentValue) {
-      const view = changes.view.currentValue as LabelSelectorView;
-      this.key = view.config.key;
-      this.value = view.config.value;
+      if (
+        JSON.stringify(this.previousView) !==
+        JSON.stringify(changes.view.currentValue)
+      ) {
+        const view = changes.view.currentValue as LabelSelectorView;
+        this.key = view.config.key;
+        this.value = view.config.value;
+
+        this.previousView = changes.view.currentValue;
+      }
     }
   }
 }

web/src/app/modules/shared/components/presentation/labels/labels.component.ts

@@ -14,6 +14,7 @@ import { ViewService } from '../../../services/view/view.service';
 })
 export class LabelsComponent implements OnChanges {
   private v: LabelsView;
+  private previousView: SimpleChanges;
 
   @Input() set view(v: View) {
     this.v = v as LabelsView;
@@ -31,10 +32,17 @@ export class LabelsComponent implements OnChanges {
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.view.currentValue) {
-      const view = changes.view.currentValue as LabelsView;
+      if (
+        JSON.stringify(this.previousView) !==
+        JSON.stringify(changes.view.currentValue)
+      ) {
+        const view = changes.view.currentValue as LabelsView;
 
-      this.title = this.viewService.viewTitleAsText(view);
-      this.labels = view.config.labels;
+        this.title = this.viewService.viewTitleAsText(view);
+        this.labels = view.config.labels;
+
+        this.previousView = changes.view.currentValue;
+      }
     }
   }
 }

web/src/app/modules/sugarloaf/components/smart/container/container.component.html

@@ -21,6 +21,9 @@
     </header>
     <div class="content-container" [ngStyle]="style">
         <div class="navigation">
+            <div class="namespace-switcher">
+                <app-namespace></app-namespace>
+            </div>
             <app-navigation></app-navigation>
         </div>
         <div class="content-area">

web/src/app/modules/sugarloaf/components/smart/navigation/navigation.component.html

-<div class="namespace-switcher">
-    <app-namespace></app-namespace>
-</div>
-
 <clr-tree>
   <clr-tree-node
           *ngFor="let section of navigation.sections; trackBy: identifyNavigationItem"

web/src/app/modules/sugarloaf/components/smart/navigation/navigation.component.ts

 // Copyright (c) 2019 the Octant contributors. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 //
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { Navigation, NavigationChild } from '../../../models/navigation';
 import { IconService } from '../../../../shared/services/icon/icon.service';
@@ -16,6 +22,7 @@ const emptyNavigation: Navigation = {
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
   styleUrls: ['./navigation.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavigationComponent implements OnInit, OnDestroy {
   behavior = new BehaviorSubject<Navigation>(emptyNavigation);
@@ -26,12 +33,18 @@ export class NavigationComponent implements OnInit, OnDestroy {
 
   constructor(
     private iconService: IconService,
-    private navigationService: NavigationService
+    private navigationService: NavigationService,
+    private cd: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
     this.navigationSubscription = this.navigationService.current.subscribe(
-      navigation => (this.navigation = navigation)
+      navigation => {
+        if (this.navigation !== navigation) {
+          this.navigation = navigation;
+          this.cd.markForCheck();
+        }
+      }
     );
   }