Feature: 11055 Support of several node groups in clusters created by OSM

	- Added control plane support in managed post
	- When aws vim account is selected paylaod will get differed
	- Added details page in clusters to view node and ksu for
	  specified cluster
	- Fixed Bug 2402 - Unable to create Ns Config template from Ui
	  bug by chnaging api

Change-Id: I4eb327fd86b0c4a706b05a8ed10524e4d2c5bc95
Signed-off-by: SANDHYA.JS <sandhya.j@tataelxsi.co.in>
diff --git a/src/app/k8s/k8s-action/K8sActionComponent.html b/src/app/k8s/k8s-action/K8sActionComponent.html
index f545606..57f4480 100644
--- a/src/app/k8s/k8s-action/K8sActionComponent.html
+++ b/src/app/k8s/k8s-action/K8sActionComponent.html
@@ -16,38 +16,44 @@
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
 <div class="btn-group list action" role="group">
-  <button *ngIf="getK8sType === 'repo' || !isCluster && !isKSU && !isProfile" type="button" class="btn btn-primary"
-    (click)="infoK8s(getK8sType)" placement="top" container="body" ngbTooltip="{{'INFO' | translate}}">
+  <button *ngIf="(isCluster || !isCluster) && !isKSU && !isNode && !isProfile && getK8sType !== 'repo'" type="button"
+    class="btn btn-primary" (click)="nodeK8s()" placement="top" container="body"
+    ngbTooltip="{{'PAGE.K8S.DETAILS' | translate}}" [disabled]="value.state !== 'READY' || !isCluster  ">
+    <i class="fa fa-server" title="details"></i>
+  </button>
+  <button *ngIf="!isProfile" type="button" class="btn btn-primary" (click)="infoK8s(getK8sType)" placement="top"
+    container="body" ngbTooltip="{{'INFO' | translate}}">
     <i class="fas fa-info icons list" title="info"></i>
   </button>
-  <button *ngIf="isCluster && !isKSU && !isProfile " type="button" class="btn btn-primary" (click)="infoK8s(getK8sType)"
-    placement="top" container="body" ngbTooltip="{{'INFO' | translate}}">
-    <i class="fas fa-info icons list" title="info"></i>
-  </button>
-  <button *ngIf="(isCluster  || isProfile || isKSU)" type="button" class="btn btn-primary" (click)="deleteK8s(false)"
-    placement="top" container="body" ngbTooltip="{{'DELETE' | translate}}">
+  <button *ngIf="(isCluster  || isProfile || isKSU || isNode)" type="button" class="btn btn-primary"
+    (click)="deleteK8s()" placement="top" container="body" ngbTooltip="{{'DELETE' | translate}}"
+    [disabled]="value.state !== 'READY' && value.state !== 'ERROR'">
     <i class="far fa-trash-alt icons" title="delete"></i>
   </button>
   <button *ngIf="getK8sType === 'repo'" type="button" class="btn btn-primary" (click)="deleteK8s(false)" placement="top"
     container="body" ngbTooltip="{{'DELETE' | translate}}">
     <i class="far fa-trash-alt icons" title="delete"></i>
   </button>
-  <button *ngIf="!isCluster && !isKSU && !isProfile && getK8sType !== 'repo' " type="button" class="btn btn-primary" (click)="deleteK8s(false)" placement="top"
-    container="body" ngbTooltip="{{'DEREGISTER' | translate}}">
+  <button *ngIf="!isCluster && !isKSU && !isProfile && !isNode && getK8sType !== 'repo' " type="button"
+    class="btn btn-primary" (click)="deleteK8s()" placement="top" container="body"
+    [disabled]="value.state !== 'READY' && value.state !== 'ERROR' && value.state !== 'ENABLED' && value.state !== 'DEGRADED'"
+    ngbTooltip="{{'DEREGISTER' | translate}}">
     <i class="fas fa-window-close icons" title="deregister"></i>
   </button>
   <button *ngIf="isProfile" type="button" class="btn btn-primary" placement="top" container="body"
-    (click)="editProfile(getK8sType)" ngbTooltip="{{'PAGE.K8S.EDITPROFILE' | translate}}">
+    (click)="editProfile(getK8sType)" [disabled]="value.state !== 'READY'"
+    ngbTooltip="{{'PAGE.K8S.EDITPROFILE' | translate}}">
     <i class="fa fa-edit icons"></i>
   </button>
-   <button *ngIf="(isCluster  || isProfile || isKSU || !isCluster && getK8sType !== 'repo')" type="button" class="btn btn-primary" (click)="deleteK8s(true)"
-    placement="top" container="body" [disabled]="!isCluster && !isProfile && !isKSU" ngbTooltip="{{'FORCEDELETE' | translate}}">
+  <button *ngIf="(isCluster  || isProfile || isKSU || !isCluster && getK8sType !== 'repo')" type="button"
+    class="btn btn-primary" (click)="deleteK8s(true)" placement="top" container="body"
+    [disabled]="!isCluster && !isProfile && !isKSU" ngbTooltip="{{'FORCEDELETE' | translate}}">
     <i class="fas fa-trash-alt icons text-danger" title="delete"></i>
   </button>
-  <div *ngIf="isCluster || !isCluster && !isKSU && !isProfile && getK8sType !== 'repo' " class="btn-group" placement="bottom-right" ngbDropdown
-    display="dynamic" container="body">
-    <button type="button" class="btn btn-primary" [disabled]="!isCluster || state != 'CREATED'" ngbDropdownToggle placement="top"
-      container="body" ngbTooltip="{{'Attach Profile' | translate}}">
+  <div *ngIf="(isCluster || !isCluster) && !isKSU && !isNode && !isProfile && getK8sType !== 'repo'" class="btn-group"
+    placement="bottom-right" ngbDropdown display="dynamic" container="body">
+    <button type="button" class="btn btn-primary" [disabled]="value.state !== 'READY' || !isCluster" ngbDropdownToggle
+      placement="top" container="body" ngbTooltip="{{'Attach Profile' | translate}}">
       <i class="fas fa-link"></i>
     </button>
     <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
@@ -70,19 +76,20 @@
       </button>
     </div>
   </div>
-  <div *ngIf="((isCluster || !isCluster)&& !isKSU && !isProfile && getK8sType !== 'repo'  )" class="btn-group" ngbDropdown display="dynamic" container="body">
-    <button type="button" [disabled]="!isCluster || state != 'CREATED'" class="btn btn-primary dropdown-toggle action-button"
-      ngbDropdownToggle>
+  <div *ngIf="(isCluster || !isCluster) && !isKSU && !isNode && !isProfile && getK8sType !== 'repo'" class="btn-group"
+    ngbDropdown display="dynamic" container="body">
+    <button type="button" [disabled]="(value.state !== 'READY' || !isCluster)"
+      class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
       {{'ACTION' | translate}}
     </button>
     <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
       <button *ngIf="isCluster" type="button" class="btn btn-primary dropdown-item" placement="left"
-        (click)="editCluster('update')" container="body" ngbTooltip="{{'PAGE.K8S.UPDATECLUSTER' | translate}}">
-        <i class="fa fa-edit icons"></i> {{'PAGE.K8S.UPDATECLUSTER' | translate}}
+        (click)="editCluster('upgrade')" container="body" ngbTooltip="{{'Version Upgrade' | translate}}">
+        <i class="fa fa-arrow-up"></i> {{'PAGE.K8S.VERSIONUPGRADE' | translate}}
       </button>
       <button *ngIf="isCluster" type="button" class="btn btn-primary dropdown-item" placement="left"
-        (click)="editCluster('upgrade')" container="body" ngbTooltip="{{'PAGE.K8S.UPGRADECLUSTER' | translate}}">
-        <i class="fa fa-arrow-up"></i> {{'PAGE.K8S.UPGRADECLUSTER' | translate}}
+        (click)="editCluster('update')" container="body" ngbTooltip="{{'Update Cluster' | translate}}">
+        <i class="fas fa-arrows-alt-h"></i> {{'PAGE.K8S.UPDATECLUSTER' | translate}}
       </button>
       <button *ngIf="isCluster" type="button" class="btn btn-primary dropdown-item" placement="left"
         (click)="getCredentials()" container="body" ngbTooltip="{{'PAGE.K8S.GETCREDENTIALS' | translate}}">
@@ -91,7 +98,8 @@
     </div>
   </div>
   <div *ngIf="isKSU" class="btn-group" ngbDropdown display="dynamic" container="body">
-    <button type="button" class="btn btn-primary dropdown-toggle action-button" [disabled]="state != 'CREATED'" ngbDropdownToggle>
+    <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle
+      [disabled]="value.state !== 'READY'">
       {{'ACTION' | translate}}
     </button>
     <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
@@ -109,4 +117,20 @@
       </button>
     </div>
   </div>
+  <div *ngIf="isNode" class="btn-group" ngbDropdown display="dynamic" container="body">
+    <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle
+      [disabled]="value.state !== 'READY'">
+      {{'ACTION' | translate}}
+    </button>
+    <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
+      <button type="button" class="btn btn-primary dropdown-item" placement="left" (click)="scaling('k8s-scale')"
+        container="body" ngbTooltip="{{'PAGE.K8S.K8SSCALING' | translate}}">
+        <i class="fas fa-arrows-alt-v"></i> {{'PAGE.K8S.K8SSCALING' | translate}}
+      </button>
+      <button type="button" class="btn btn-primary dropdown-item" placement="left" (click)="scaling('edit-node')"
+        container="body" ngbTooltip="{{'EDIT' | translate}}">
+        <i class="fa fa-arrow-up"></i> {{'EDIT' | translate}}
+      </button>
+    </div>
+  </div>
   <app-loader [waitingMessage]="message" *ngIf="isLoadingDownloadResult"></app-loader>
\ No newline at end of file
diff --git a/src/app/k8s/k8s-action/K8sActionComponent.ts b/src/app/k8s/k8s-action/K8sActionComponent.ts
index 919dda1..0728381 100644
--- a/src/app/k8s/k8s-action/K8sActionComponent.ts
+++ b/src/app/k8s/k8s-action/K8sActionComponent.ts
@@ -20,6 +20,7 @@
  */
 import { HttpHeaders } from '@angular/common/http';
 import { ChangeDetectorRef, Component, Injector } from '@angular/core';
+import { Router } from '@angular/router';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
 import { NotifierService } from 'angular-notifier';
@@ -31,6 +32,7 @@
 import { K8sInfraConfigAddComponent } from 'K8sInfraConfigAddComponent';
 import { INFRACONFIGPAYLOAD, K8SCLUSTERDATADISPLAY, K8SPayload, K8SREPODATADISPLAY } from 'K8sModel';
 import { KSUAddComponent } from 'KSUAddComponent';
+import { NodeAddComponent } from 'NodeAddComponent';
 import { RestService } from 'RestService';
 import { isNullOrUndefined, SharedService } from 'SharedService';
 import { ShowInfoComponent } from 'ShowInfoComponent';
@@ -72,6 +74,9 @@
   /** Check cluster or not @public */
   public isCluster = false;
 
+  /** Check node group or not @public */
+  public isNode = false;
+
   /** Check the loading results for loader status @public */
   public isLoadingDownloadResult: boolean = false;
 
@@ -82,7 +87,10 @@
   private sharedService: SharedService;
 
   /** Contains instance ID @private */
-  private instanceID: string;
+  private k8sID: string;
+
+  /** Contains instance name @private */
+  private k8sName: string;
 
   /** Utilizes rest service for any CRUD operations @private */
   private restService: RestService;
@@ -100,6 +108,9 @@
   /** Controls the header form @private */
   private headers: HttpHeaders;
 
+  /** Holds teh instance of AuthService class of type AuthService @private */
+  private router: Router;
+
   constructor(injector: Injector) {
     this.injector = injector;
     this.modalService = this.injector.get(NgbModal);
@@ -108,6 +119,7 @@
     this.translateService = this.injector.get(TranslateService);
     this.restService = this.injector.get(RestService);
     this.cd = this.injector.get(ChangeDetectorRef);
+    this.router = this.injector.get(Router);
   }
 
   /**
@@ -118,7 +130,8 @@
       Accept: 'application/zip, application/json',
       'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
     });
-    this.instanceID = this.value.identifier;
+    this.k8sID = this.value.identifier;
+    this.k8sName = this.value.name;
     this.getK8sType = this.value.pageType;
     this.state = this.value.state;
     if ((this.value.createdbyosm) === 'true') {
@@ -137,6 +150,12 @@
     } else {
       this.isProfile = false;
     }
+
+    if (this.value.pageType === 'node') {
+      this.isNode = true;
+    } else {
+      this.isNode = false;
+    }
   }
 
   /** Delete User Account @public */
@@ -155,6 +174,13 @@
     });
   }
 
+  /** Details page @public */
+  public nodeK8s(): void {
+    this.router.navigate(['/k8s/details/' + this.k8sID]).catch((): void => {
+      // Catch Navigation Error
+    });
+  }
+
   /** Shows information using modalservice @public */
   public infoK8s(pageType: string): void {
     let pageName: string = '';
@@ -162,18 +188,26 @@
     if (pageType === 'repo') {
       pageName = 'k8s-repo';
       title = 'PAGE.K8S.K8SREPODETAILS';
+    } else if (pageType === 'node') {
+      pageName = 'k8s-node';
+      title = 'Node Details';
+    } else if (pageType === 'k8-ksu') {
+      pageName = 'k8s-ksu';
+      title = 'KSU Details';
     } else {
       pageName = 'k8s-cluster';
       title = 'PAGE.K8S.K8SCLUSTERDETAILS';
     }
     // eslint-disable-next-line security/detect-non-literal-fs-filename
     this.modalService.open(ShowInfoComponent, { backdrop: 'static' }).componentInstance.params = {
-      id: this.instanceID,
+      id: this.k8sID,
       page: pageName,
       titleName: title,
       createdbyosm: this.value.createdbyosm,
       bootstrap: this.value.bootstrap,
-      key: this.value.key
+      key: this.value.key,
+      cluster_mode: this.value.cluster_mode,
+      cluster_id: this.value.cluster_id
     };
   }
   /** Edit profile @public */
@@ -208,6 +242,22 @@
     });
   }
 
+  /** Handle Scaling @public */
+  public scaling(editType: string): void {
+    // eslint-disable-next-line security/detect-non-literal-fs-filename
+    const modalRef: NgbModalRef = this.modalService.open(NodeAddComponent, { backdrop: 'static' });
+    modalRef.componentInstance.profileID = this.value.identifier;
+    modalRef.componentInstance.clusterId = this.value.cluster_id;
+    modalRef.componentInstance.profileType = editType;
+    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
+      if (result) {
+        this.sharedService.callData();
+      }
+    }).catch((): void => {
+      // Catch Navigation Error
+    });
+  }
+
 
   /** Edit profile under cluster @public */
   public editClusterProfile(editType: string): void {
@@ -261,10 +311,10 @@
       headers: this.headers,
       responseType: 'blob'
     };
-    this.restService.getResource(environment.K8SCREATECLUSTER_URL + '/' + this.instanceID + '/get_creds')
+    this.restService.getResource(environment.K8SCREATECLUSTER_URL + '/' + this.k8sID + '/get_creds')
       .subscribe((res: { op_id: string }) => {
         if (!isNullOrUndefined(res.op_id)) {
-          this.restService.getResource(environment.K8SCREATECLUSTER_URL + '/' + this.instanceID + '/get_creds_file' + '/' + res.op_id, httpOptions)
+          this.restService.getResource(environment.K8SCREATECLUSTER_URL + '/' + this.k8sID + '/get_creds_file' + '/' + res.op_id, httpOptions)
             .subscribe((response: Blob) => {
               this.isLoadingDownloadResult = true;
               if (!isNullOrUndefined(response)) {