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/k8scluster/K8sClusterComponent.html b/src/app/k8s/k8scluster/K8sClusterComponent.html
index 3c01f4f..c523022 100644
--- a/src/app/k8s/k8scluster/K8sClusterComponent.html
+++ b/src/app/k8s/k8scluster/K8sClusterComponent.html
@@ -31,15 +31,15 @@
 </div>
 <div class="mt-2 mb-2 list-utilites-actions">
   <div class="col-auto me-auto">
-    <nav class="custom-items-config">
+    <nav class="custom-items-config mt-2 mb-2">
       <span><i class="fas fa-cloud-upload-alt text-info"></i>{{clusterModeFirstStep}}</span>
       <span><i class="fas fa-clipboard-check text-info"></i>{{clusterModeSecondStep}}</span>
       <span><i class="fas fa-clock text-success"></i>{{operationalStateFirstStep}}</span>
-      <span><i class="fas fa-spinner text-warning"></i>{{operationalStateSecondStep}}</span>
-      <span><i class="fas fa-spinner text-danger"></i>{{operationalStateThirdStep}}</span>
-      <span><i class="fas fa-times-circle text-danger"></i>{{operationalStateFourthStep}}</span>
-      <span><i class="fas fa-times-circle text-warning"></i>{{operationalStateFifthStep}}</span>
-      <span><i class="fas fa-ban text-danger"></i>{{operationalStateSixthStep}}</span>
+      <span><i class="fas fa-check-circle text-success"></i>{{operationalStateFifthStep}}</span>
+      <span><i class="fas fa-spinner text-warning"></i>{{operationalStateThirdStep}}</span>
+      <span><i class="fas fa-arrow-circle-down text-warning"></i>{{operationalStateSixthStep}}</span>
+      <span><i class="fas fa-times-circle text-danger"></i>{{operationalStateSecondStep}}</span>
+      <span><i class="fas fa-ban text-danger"></i>{{operationalStateFourthStep}}</span>
     </nav>
   </div>
   <page-per-row class="me-2" (pagePerRow)="onChange($event)"></page-per-row>
diff --git a/src/app/k8s/k8scluster/K8sClusterComponent.ts b/src/app/k8s/k8scluster/K8sClusterComponent.ts
index c79493e..c50831c 100644
--- a/src/app/k8s/k8scluster/K8sClusterComponent.ts
+++ b/src/app/k8s/k8scluster/K8sClusterComponent.ts
@@ -76,7 +76,7 @@
   /** operational State in deletion data @public */
   public operationalStateThirdStep: string = CONFIGCONSTANT.k8OperationalStateThirdStep;
 
-  /** operational State failed deletion data @public */
+  /** operational State failed creation data @public */
   public operationalStateFourthStep: string = CONFIGCONSTANT.k8OperationalStateFourthStep;
 
   /** operational State failed creation data @public */
@@ -165,7 +165,7 @@
         }
       },
       state: {
-        title: this.translateService.instant('GITSTATE'), width: '15%', type: 'html',
+        title: this.translateService.instant('STATE'), width: '15%', type: 'html',
         filter: {
           type: 'list',
           config: {
@@ -176,7 +176,7 @@
               { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep },
               { value: this.operationalStateFourthStep, title: this.operationalStateFourthStep },
               { value: this.operationalStateFifthStep, title: this.operationalStateFifthStep },
-              { value: this.operationalStateSixthStep, title: this.operationalStateFifthStep }
+              { value: this.operationalStateSixthStep, title: this.operationalStateSixthStep }
             ]
           }
         },
@@ -187,30 +187,27 @@
                          </span>`;
           } else if (row.state === this.operationalStateSecondStep) {
             return `<span class="icon-label" title="${row.state}">
-                         <i class="fas fa-spinner text-warning"></i>
-                         </span>`;
-          } else if (row.state === this.operationalStateThirdStep) {
-            return `<span class="icon-label" title="${row.state}">
-                         <i class="fas fa-spinner text-danger"></i>
+                         <i class="fas fa-times-circle text-danger"></i>
                          </span>`;
           } else if (row.state === this.operationalStateFourthStep) {
             return `<span class="icon-label" title="${row.state}">
-                         <i class="fas fa-times-circle text-danger"></i>
+                         <i class="fas fa-ban text-danger"></i>
                          </span>`;
           } else if (row.state === this.operationalStateFifthStep) {
             return `<span class="icon-label" title="${row.state}">
-                         <i class="fas fa-times-circle text-warning"></i>
+                         <i class="fas fa-check-circle text-success"></i>
                          </span>`;
           } else if (row.state === this.operationalStateSixthStep) {
             return `<span class="icon-label" title="${row.state}">
-                         <i class="fas fa-ban text-danger"></i>
+                         <i class="fas fa-arrow-circle-down text-warning"></i>
                          </span>`;
           } else {
-            return `<span>${row.state}</span>`;
+            return `<span class="icon-label" title="${row.state}">
+                         <i class="fas fa-spinner text-warning"></i>
+                         </span>`;
           }
         }
       },
-      created: { title: this.translateService.instant('CREATED'), width: '15%' },
       Actions: {
         name: 'Action', width: '5%', filter: false, sort: false, title: this.translateService.instant('ACTIONS'), type: 'custom',
         valuePrepareFunction: (cell: K8SCLUSTERDATADISPLAY, row: K8SCLUSTERDATADISPLAY): K8SCLUSTERDATADISPLAY => row,
@@ -248,8 +245,10 @@
 
     if (type === 'Register') {
       modalRef.componentInstance.profileType = 'Register';
-    } else {
+    } else if (type === 'Manage') {
       modalRef.componentInstance.profileType = 'Manage';
+    } else {
+      modalRef.componentInstance.profileType = 'Control';
     }
     modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
       if (result) {
@@ -271,9 +270,8 @@
   public generateK8sclusterData(k8sClusterdata: K8SCLUSTERDATA): K8SCLUSTERDATADISPLAY {
     return {
       name: k8sClusterdata.name,
-      state: !isNullOrUndefined(k8sClusterdata.state) ? k8sClusterdata.state : 'N/A',
+      state: !isNullOrUndefined(k8sClusterdata.resourceState) ? k8sClusterdata.resourceState : 'N/A',
       identifier: k8sClusterdata._id,
-      operationalState: !isNullOrUndefined(k8sClusterdata._admin.operationalState) ? k8sClusterdata._admin.operationalState : 'N/A',
       version: k8sClusterdata.k8s_version,
       created: this.sharedService.convertEpochTime(Number(k8sClusterdata._admin.created)),
       modified: this.sharedService.convertEpochTime(Number(k8sClusterdata._admin.modified)),
@@ -281,7 +279,7 @@
       createdbyosm: !isNullOrUndefined(k8sClusterdata.created) ? (k8sClusterdata.created) : 'false',
       bootstrap: !isNullOrUndefined(k8sClusterdata.bootstrap) ? (k8sClusterdata.bootstrap) : false,
       key: (k8sClusterdata.key === 'registered') ? true : false,
-      clusterMode: (k8sClusterdata.created === 'true') ? 'MANAGED' : 'REGISTERED'
+      clusterMode: (k8sClusterdata.created === 'true') ? 'managed' : 'registered'
     };
   }