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-ksu/ksu-add/KSUAddComponent.html b/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.html
index e75cc7e..40154b1 100644
--- a/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.html
+++ b/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.html
@@ -17,7 +17,7 @@
 -->
 <form [formGroup]="KsuForm" (ngSubmit)="KSUAddSubmit();">
     <div class="modal-header">
-        <h4 *ngIf="profileType === 'add'" class="modal-title" id="modal-basic-title">{{'PAGE.K8S.ADDKSU' | translate}}</h4>
+        <h4 *ngIf="profileType === 'add'|| profileType === 'card-add'" class="modal-title" id="modal-basic-title">{{'PAGE.K8S.ADDKSU' | translate}}</h4>
         <h4 *ngIf="profileType === 'edit'"class="modal-title" id="modal-basic-title">{{'PAGE.K8S.EDITKSU' | translate}}</h4>
         <h4 *ngIf="profileType === 'move'"class="modal-title" id="modal-basic-title">{{'PAGE.K8S.MOVE' | translate}}</h4>
         <h4 *ngIf="profileType === 'clone'"class="modal-title" id="modal-basic-title">{{'PAGE.K8S.CLONE' | translate}}</h4>
@@ -99,7 +99,7 @@
                                     <div class="fileupload-text mt-1 mb-1">{{'FILEUPLOADLABEL' | translate}}</div>
                                     <div class="custom-file">
                                         <input type="file" #fileInputConfig class="fileupload custom-file-input"
-                                            (change)="configFile($event.target.files)" id="customConfigFile">
+                                            (change)="configFile($event.target.files)" id="customConfigFile" [ngClass]="{ 'is-invalid': submitted && transformation.errors }">
                                     </div>
                                 </div>
                                 <div class="col-sm-1">
@@ -117,7 +117,7 @@
     </div>
     <div class="modal-footer">
         <button type="button" class="btn btn-danger" (click)="activeModal.close()">{{'CANCEL' | translate}}</button>
-        <button *ngIf="profileType === 'add'" type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
+        <button *ngIf="profileType === 'add' || profileType === 'card-add'" type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
         <button *ngIf="profileType === 'edit'" type="submit" class="btn btn-primary">{{'Edit' | translate}}</button>
         <button *ngIf="profileType === 'move'" type="submit" class="btn btn-primary">{{'Move' | translate}}</button>
         <button *ngIf="profileType === 'clone'" type="submit" class="btn btn-primary">{{'Clone' | translate}}</button>
diff --git a/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.ts b/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.ts
index 26f86f1..db13e4a 100644
--- a/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.ts
+++ b/src/app/k8s/k8s-ksu/ksu-add/KSUAddComponent.ts
@@ -167,6 +167,8 @@
         } else if (this.profileType === 'edit') {
             this.isKsu = true;
             this.getksuDetails();
+        } else if (this.profileType === 'card-add') {
+            this.isKsu = true;
         } else {
             this.isKsu = true;
         }
@@ -272,7 +274,7 @@
                     profile_type: this.KsuForm.value.profile_type
                 }
             };
-        } else if (this.profileType === 'edit' || this.profileType === 'add') {
+        } else if (this.profileType === 'edit' || this.profileType === 'add' || this.profileType === 'card-add') {
             this.addEditKSU();
         }
         this.submitted = true;
@@ -290,22 +292,24 @@
     /** Add/Edit KSU @public */
     public addEditKSU(): void {
         this.okaArray = this.KsuForm.get('oka') as FormArray;
-        const transValue = this.okaArray.at(0).get('transformation').value;
-        const validJSON: boolean = this.sharedService.checkJson(transValue);
-        if (validJSON) {
-            for (let i = 0; i < this.okaArray.length; i++) {
-                const formGroup = this.okaArray.at(i) as FormGroup;
-                formGroup.patchValue({
-                    transformation: JSON.parse(transValue)
-                });
-            }
-        } else {
-            const getConfigJson: string = jsyaml.load(transValue, { json: true });
-            for (let i = 0; i < this.okaArray.length; i++) {
-                const formGroup = this.okaArray.at(i) as FormGroup;
-                formGroup.patchValue({
-                    transformation: JSON.parse(getConfigJson)
-                });
+        const transValue = this.okaArray?.at(0)?.get('transformation').value;
+        if (!isNullOrUndefined(transValue)) {
+            const validJSON: boolean = this.sharedService.checkJson(transValue);
+            if (validJSON) {
+                for (let i = 0; i < this.okaArray.length; i++) {
+                    const formGroup = this.okaArray.at(i) as FormGroup;
+                    formGroup.patchValue({
+                        transformation: JSON.parse(transValue)
+                    });
+                }
+            } else {
+                const getConfigJson: string = jsyaml.load(transValue, { json: true });
+                for (let i = 0; i < this.okaArray.length; i++) {
+                    const formGroup = this.okaArray.at(i) as FormGroup;
+                    formGroup.patchValue({
+                        transformation: JSON.parse(getConfigJson)
+                    });
+                }
             }
         }
         if (this.profileType === 'edit') {
@@ -450,14 +454,27 @@
     /** Get profile details @public */
     public getprofileDetails(event: string, name?: string): void {
         this.profileData = [];
-        if (event === 'infra_config_profiles') {
-            this.profileUrl = environment.K8SINFRACONFIGPROFILE_URL;
-        } else if (event === 'infra_controller_profiles') {
-            this.profileUrl = environment.K8SINFRACONTROLLERPROFILE_URL;
-        } else if (event === 'app_profiles') {
-            this.profileUrl = environment.K8SAPPPROFILE_URL;
-        } else if (event === 'resource_profiles') {
-            this.profileUrl = environment.K8SRESOURCEPROFILE_URL;
+        if (this.profileType === 'card-add') {
+            if (event === 'infra_config_profiles') {
+                this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + event;
+            } else if (event === 'infra_controller_profiles') {
+                this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + event;
+            } else if (event === 'app_profiles') {
+                this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + event;
+            } else if (event === 'resource_profiles') {
+                this.profileUrl = environment.K8SCREATECLUSTER_URL + '/' + this.profileID + '/' + event;
+            }
+        }
+        else {
+            if (event === 'infra_config_profiles') {
+                this.profileUrl = environment.K8SINFRACONFIGPROFILE_URL;
+            } else if (event === 'infra_controller_profiles') {
+                this.profileUrl = environment.K8SINFRACONTROLLERPROFILE_URL;
+            } else if (event === 'app_profiles') {
+                this.profileUrl = environment.K8SAPPPROFILE_URL;
+            } else if (event === 'resource_profiles') {
+                this.profileUrl = environment.K8SRESOURCEPROFILE_URL;
+            }
         }
         this.restService.getResource(this.profileUrl)
             .subscribe((profileData: []): void => {
diff --git a/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.html b/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.html
index de83ac5..493bfbe 100644
--- a/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.html
+++ b/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.html
@@ -19,7 +19,7 @@
   <div class="d-flex align-items-center header-style">{{'PAGE.K8S.KSU' | translate}}</div>
   <span class="button">
     <button class="btn btn-primary me-2" type="button" placement="top" container="body"
-      ngbTooltip="{{'Create Profile' | translate}}" (click)="addKSU()">
+      ngbTooltip="{{'PAGE.K8S.ADDKSU' | translate}}" (click)="addKSU()">
       <i class="fas fa-plus-circle" aria-hidden="true"></i>&nbsp; {{'PAGE.K8S.ADDKSU' | translate}}
     </button>
   </span>
@@ -28,10 +28,9 @@
   <div class="col-auto me-auto">
     <nav class="custom-items-config">
       <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-times-circle text-danger"></i>{{operationalStateSecondStep}}</span>
+      <span><i class="fas fa-spinner text-warning"></i>{{operationalStateThirdStep}}</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/k8s-ksu/ksu-details/KSUComponent.ts b/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.ts
index 85a19d8..9339d9d 100644
--- a/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.ts
+++ b/src/app/k8s/k8s-ksu/ksu-details/KSUComponent.ts
@@ -69,9 +69,6 @@
     /** operational State failed deletion data @public */
     public operationalStateFourthStep: string = CONFIGCONSTANT.k8OperationalStateFourthStep;
 
-    /** operational State failed creation data @public */
-    public operationalStateFifthStep: string = CONFIGCONSTANT.k8OperationalStateFifthStep;
-
     /** Check the loading results @public */
     public isLoadingResults: boolean = true;
 
@@ -121,7 +118,7 @@
             name: { title: this.translateService.instant('NAME'), width: '20%', sortDirection: 'asc' },
             identifier: { title: this.translateService.instant('IDENTIFIER'), width: '15%' },
             state: {
-                title: this.translateService.instant('GITSTATE'), width: '15%', type: 'html',
+                title: this.translateService.instant('STATE'), width: '15%', type: 'html',
                 filter: {
                     type: 'list',
                     config: {
@@ -130,34 +127,27 @@
                             { value: this.operationalStateFirstStep, title: this.operationalStateFirstStep },
                             { value: this.operationalStateSecondStep, title: this.operationalStateSecondStep },
                             { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep },
-                            { value: this.operationalStateThirdStep, title: this.operationalStateFourthStep },
-                            { value: this.operationalStateThirdStep, title: this.operationalStateFifthStep }
+                            { value: this.operationalStateThirdStep, title: this.operationalStateFourthStep }
                         ]
                     }
                 },
                 valuePrepareFunction: (cell: INFRACONFIGPAYLOAD, row: INFRACONFIGPAYLOAD): string => {
                     if (row.state === this.operationalStateFirstStep) {
                         return `<span class="icon-label" title="${row.state}">
-                                 <i class="fas fa-clock text-success"></i>
-                                 </span>`;
+                                     <i class="fas fa-clock text-success"></i>
+                                     </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>
-                                 </span>`;
+                                     <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>
-                                 </span>`;
-                    } else if (row.state === this.operationalStateFifthStep) {
-                        return `<span class="icon-label" title="${row.state}">
-                                 <i class="fas fa-times-circle text-warning"></i>
-                                 </span>`;
+                                     <i class="fas fa-ban text-danger"></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>`;
                     }
                 }
             },
@@ -223,7 +213,7 @@
             modified: this.sharedService.convertEpochTime(Number(ksudata._admin.modified)),
             description: ksudata.description,
             pageType: 'k8-ksu',
-            state: ksudata.state
+            state: ksudata.resourceState
         };
     }