Details views can now be sensitive on the project/business group sele…

…ction change. Change-Id: Id64b6787c5a196b858043fd98d860758561a1041 Reviewed-on: https://bellevue-ci.eng.vmware.com:8080/41095 Closures-Verified: jenkins <[email protected]> Upgrade-Verified: jenkins <[email protected]> Bellevue-Verified: jenkins <[email protected]> PG-Verified: jenkins <[email protected]> CS-Verified: jenkins <[email protected]> Reviewed-by: Iveta Ilieva <[email protected]>
pnedunuri · Aug 9, 2018 · 207bbca · 207bbca
1 parent cec1ebd
commit 207bbca
Show file tree

Hide file tree

Showing 19 changed files with 396 additions and 425 deletions.
diff --git a/ui/ng-app/src/app/components/base/base-details.component.ts b/ui/ng-app/src/app/components/base/base-details.component.ts
@@ -15,57 +15,79 @@ import { Subscription } from "rxjs/Subscription";
 import { TabbedViewComponent } from "./tabbed-view-component";
 import { DocumentService } from '../../utils/document.service';
 import { ErrorService } from "../../utils/error.service";
+import { ProjectService } from "../../utils/project.service";
 import { Utils } from "../../utils/utils";
 
 /**
  * Base view for a single entity details.
  */
-export class BaseDetailsComponent extends TabbedViewComponent
-                                  implements OnInit, OnDestroy {
-  id;
-  entity;
-  protected projectLink: string;
-
-  private routeParamsSubscription: Subscription = null;
-  private routeParentParamsSubscription: Subscription = null;
-
+export class BaseDetailsComponent extends TabbedViewComponent implements OnInit, OnDestroy {
+    id;
+    entity;
+    private projectLink: string;
+
+    private routeParamsSubscription: Subscription = null;
+    private routeParentParamsSubscription: Subscription = null;
+
+    /*
+     * @param {ProjectService} projectService - if this service is specified, the view will be
+     * sensitive to changes of the currently selected project/business group
+     */
     constructor(protected link: string, protected route: ActivatedRoute,
                 protected router: Router, protected service: DocumentService,
+                protected projectService: ProjectService,
                 protected errorService: ErrorService) {
-      super(route, router);
-  }
 
-  protected entityInitialized() {
-    // add logic when entity details are loaded.
-  }
+        super(route, router);
+
+        if (projectService) {
+            Utils.subscribeForProjectChange(projectService, (changedProjectLink) => {
+                if (this.projectLink && this.projectLink !== changedProjectLink) {
+                    // project selection changed
+                    this.projectLink = changedProjectLink;
+                    this.onProjectChange();
+                } else if (!this.projectLink) {
+                    this.projectLink = changedProjectLink;
+                }
+            });
+        }
+    }
 
-  protected routeParamsReceived(params) {
-    // do something with the route params.
-  }
+    protected entityInitialized() {
+        // add logic when entity details are loaded.
+    }
+
+    protected routeParamsReceived(params) {
+        // do something with the route params.
+    }
 
-  ngOnInit() {
-    super.ngOnInit();
+    protected onProjectChange() {
+        // do something special when project is changed
+    }
 
-    this.routeParamsSubscription = this.route.params.subscribe(params => {
-       this.id = params['id'];
+    ngOnInit() {
+        super.ngOnInit();
 
-       if (!this.id) {
-           // no need to retrieve data
-           this.routeParamsReceived(params);
-           return;
-       }
+        this.routeParamsSubscription = this.route.params.subscribe(params => {
+            this.id = params['id'];
 
-       this.service.getById(this.link, this.id, this.projectLink).then(service => {
-           this.entity = service;
-           this.entityInitialized();
+            if (!this.id) {
+                // no need to retrieve data
+                this.routeParamsReceived(params);
+                return;
+            }
 
-       }).catch(error => {
-           console.error('Failed loading entity ', error);
+            this.service.getById(this.link, this.id).then(service => {
+                this.entity = service;
+                this.entityInitialized();
 
-           if (this.errorService) {
-               this.errorService.error(Utils.getErrorMessage(error)._generic);
-           }
-       });
+            }).catch(error => {
+                console.error('Failed loading entity ', error);
+
+                if (this.errorService) {
+                    this.errorService.error(Utils.getErrorMessage(error)._generic);
+                }
+           });
 
        this.routeParamsReceived(params);
     });
@@ -79,7 +101,7 @@ export class BaseDetailsComponent extends TabbedViewComponent
             return;
         }
 
-        this.service.getById(this.link, this.id, this.projectLink).then(service => {
+        this.service.getById(this.link, this.id).then(service => {
             this.entity = service;
             this.entityInitialized();
 
@@ -93,10 +115,10 @@ export class BaseDetailsComponent extends TabbedViewComponent
     });
   }
 
-  ngOnDestroy() {
-    super.ngOnDestroy();
+    ngOnDestroy() {
+        super.ngOnDestroy();
 
-    this.routeParamsSubscription.unsubscribe();
-    this.routeParentParamsSubscription.unsubscribe();
-  }
+        this.routeParamsSubscription.unsubscribe();
+        this.routeParentParamsSubscription.unsubscribe();
+    }
 }
diff --git a/ui/ng-app/src/app/kubernetes/deployments/details/deployment-details.component.ts b/ui/ng-app/src/app/kubernetes/deployments/details/deployment-details.component.ts
@@ -14,6 +14,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { BaseDetailsComponent } from '../../../components/base/base-details.component';
 import { DocumentService } from '../../../utils/document.service';
 import { ErrorService } from "../../../utils/error.service";
+import { ProjectService } from "../../../utils/project.service";
 import { Links } from '../../../utils/links';
 
 @Component({
@@ -28,8 +29,13 @@ import { Links } from '../../../utils/links';
 export class DeploymentDetailsComponent extends BaseDetailsComponent {
 
   constructor(route: ActivatedRoute, router: Router, service: DocumentService,
-              errorService: ErrorService) {
-    super(Links.DEPLOYMENTS, route, router, service, errorService);
+              projectService: ProjectService, errorService: ErrorService) {
+
+      super(Links.DEPLOYMENTS, route, router, service, projectService, errorService);
+  }
+
+  protected onProjectChange() {
+      this.router.navigate(['../'], {relativeTo: this.route});
   }
 
   get deploymentSpecification() {

diff --git a/ui/ng-app/src/app/kubernetes/pods/details/pod-details.component.ts b/ui/ng-app/src/app/kubernetes/pods/details/pod-details.component.ts
@@ -13,10 +13,11 @@ import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BaseDetailsComponent } from '../../../components/base/base-details.component';
 import { DocumentService } from '../../../utils/document.service';
-import { ErrorService } from "../../../utils/error.service";
+import { ErrorService } from '../../../utils/error.service';
+import { ProjectService } from '../../../utils/project.service';
 import { Links } from '../../../utils/links';
 
-import * as I18n from "i18next";
+import * as I18n from 'i18next';
 
 @Component({
     selector: 'pod-details',
@@ -29,12 +30,13 @@ import * as I18n from "i18next";
 export class PodDetailsComponent extends BaseDetailsComponent {
     logs: any;
     loadingLogs = true;
+
     private logsTimeout;
 
+    constructor(route: ActivatedRoute, router: Router, documentService: DocumentService,
+                projectService: ProjectService, errorService: ErrorService) {
 
-    constructor(route: ActivatedRoute, router: Router, service: DocumentService,
-                errorService: ErrorService) {
-        super(Links.PODS, route, router, service, errorService);
+        super(Links.PODS, route, router, documentService, projectService, errorService);
     }
 
     protected entityInitialized() {
@@ -49,6 +51,10 @@ export class PodDetailsComponent extends BaseDetailsComponent {
         }, 500);
     }
 
+    protected onProjectChange() {
+        this.router.navigate(['../'], {relativeTo: this.route});
+    }
+
     ngOnDestroy() {
         clearInterval(this.logsTimeout);
     }

diff --git a/ui/ng-app/src/app/kubernetes/services/details/service-details.component.ts b/ui/ng-app/src/app/kubernetes/services/details/service-details.component.ts
@@ -13,90 +13,101 @@ import { Component, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BaseDetailsComponent } from '../../../components/base/base-details.component';
 import { DocumentService } from '../../../utils/document.service';
-import { ErrorService } from "../../../utils/error.service";
+import { ErrorService } from '../../../utils/error.service';
+import { ProjectService } from '../../../utils/project.service';
 import { Links } from '../../../utils/links';
 
 let getPortLinkDisplayText = function(hostIp, portObj) {
-  let linkDisplayName = '';
+    let linkDisplayName = '';
 
-  // Used backend's com.vmware.vcac.container.domain.PortBinding.toString() to format the
-  // ports string
-  if (hostIp) {
-    linkDisplayName += hostIp;
-  }
+      // Used backend's com.vmware.vcac.container.domain.PortBinding.toString() to format the
+      // ports string
+      if (hostIp) {
+            linkDisplayName += hostIp;
+      }
 
-  if (portObj.nodePort) {
-    if (linkDisplayName.length > 0) {
-      linkDisplayName += ':';
+    if (portObj.nodePort) {
+        if (linkDisplayName.length > 0) {
+            linkDisplayName += ':';
+        }
+        linkDisplayName += portObj.nodePort;
     }
-    linkDisplayName += portObj.nodePort;
-  }
 
-  if (linkDisplayName.length > 0) {
-    linkDisplayName += ':';
-  }
-  linkDisplayName += portObj.port;
+    if (linkDisplayName.length > 0) {
+        linkDisplayName += ':';
+    }
+    linkDisplayName += portObj.port;
 
-  if (portObj.protocol) {
-    linkDisplayName += '/' + portObj.protocol;
-  }
+    if (portObj.protocol) {
+        linkDisplayName += '/' + portObj.protocol;
+    }
 
-  return linkDisplayName;
+    return linkDisplayName;
 };
 
 let getPortLinks = function(hostIp, ports) {
-  var portLinks = [];
+    var portLinks = [];
 
-  if (ports) {
-    for (let i = 0; i < ports.length; i++) {
-      let portObj = ports[i];
+    if (ports) {
+        for (let i = 0; i < ports.length; i++) {
+        let portObj = ports[i];
 
-      let linkDisplayName = getPortLinkDisplayText(hostIp, portObj);
+        let linkDisplayName = getPortLinkDisplayText(hostIp, portObj);
 
-      let linkAddress = hostIp ? ('http://' + hostIp + ':' + portObj.nodePort) : null;
+        let linkAddress = hostIp ? ('http://' + hostIp + ':' + portObj.nodePort) : null;
 
-      portLinks[i] = {
-        link: linkAddress,
-        name: linkDisplayName
-      };
+        portLinks[i] = {
+            link: linkAddress,
+            name: linkDisplayName
+        };
+        }
     }
-  }
 
-  return portLinks;
+    return portLinks;
 };
 
 @Component({
-  selector: 'service-details',
-  templateUrl: './service-details.component.html',
-  styleUrls: ['./service-details.component.scss'],
-  encapsulation: ViewEncapsulation.None
+    selector: 'service-details',
+    templateUrl: './service-details.component.html',
+    styleUrls: ['./service-details.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
+/**
+ * Kubernetes service details view.
+ */
 export class ServiceDetailsComponent extends BaseDetailsComponent {
-  portLinks: Array<any>;
-
-  constructor(route: ActivatedRoute, router: Router, service: DocumentService,
-              errorService: ErrorService) {
-    super(Links.SERVICES, route, router, service, errorService);
-  }
-
-  entityInitialized() {
-    this.calculatePortLinks();
-  }
-
-  calculatePortLinks() {
-    let result = [];
-    if (this.entity && this.entity.service && this.entity.service.spec) {
-      let ports = this.entity.service.spec.ports;
-      let externalIPs = this.entity.service.spec.externalIPs;
-
-      if (externalIPs && externalIPs.length > 0) {
-        externalIPs.forEach(externalIP => {
-          result = result.concat(getPortLinks(externalIP, ports));
-        });
-      } else {
-        result = getPortLinks(null, ports);
-      }
+    portLinks: Array<any>;
+
+    constructor(route: ActivatedRoute, router: Router, documentService: DocumentService,
+              projectService: ProjectService, errorService: ErrorService) {
+
+        super(Links.SERVICES, route, router, documentService, projectService, errorService);
+    }
+
+    entityInitialized() {
+        this.calculatePortLinks();
+    }
+
+    protected onProjectChange() {
+        this.router.navigate(['../'], {relativeTo: this.route});
+    }
+
+    calculatePortLinks() {
+        let result = [];
+
+        if (this.entity && this.entity.service && this.entity.service.spec) {
+            let ports = this.entity.service.spec.ports;
+            let externalIPs = this.entity.service.spec.externalIPs;
+
+            if (externalIPs && externalIPs.length > 0) {
+                externalIPs.forEach(externalIP => {
+                    result = result.concat(getPortLinks(externalIP, ports));
+                });
+            } else {
+                result = getPortLinks(null, ports);
+            }
+        }
+
+        this.portLinks = result;
     }
-    this.portLinks = result;
-  }
 }
diff --git a/ui/ng-app/src/app/utils/document.service.ts b/ui/ng-app/src/app/utils/document.service.ts
@@ -155,8 +155,7 @@ export class DocumentService {
       let params = new URLSearchParams();
       params.set('expand', 'true');
 
-      return this.ajax.get(documentSelfLink, params, undefined,
-          this.buildProjectHeader(projectLink));
+      return this.ajax.get(documentSelfLink, params, undefined, this.buildProjectHeader(projectLink));
     }
 
     return this.ajax.get(documentSelfLink, undefined, undefined,