Merge pull request #129 from nmaas-platform/128-additional-bulk-domain-views-improvements

Update views

src/app/appmarket/bulkDeployment/appDeployment/appupload/appupload.component.html

 <div style="width: 80%; margin: auto; margin-top: 4rem;">
-    <div style="margin-bottom: 5rem">
+    <div style="margin-bottom: 3rem">
         <div class="flex justify-content-between">
             <h2>{{'BULK.APP.UPLOAD' | translate}} {{deployService.getSelectedApp()}}</h2>
             <div>
@@ -7,17 +7,17 @@
                      [src]="(appImagesService.getAppLogoUrl(deployService.getSelectedAppId()) | secure) || 'assets/images/app-logo-example.png'"/>
             </div>
         </div>
-        <p>{{'BULK.APP.INFO' | translate}}</p>
+        <p>{{'BULK.APP.UPLOAD_INFO' | translate}}</p>
     </div>
 
     <p-fileUpload name="file[]" customUpload="true" (uploadHandler)="myUploader($event)" accept=".csv"
-                  multiple="false"></p-fileUpload>
+                  multiple="false" uploadLabel="{{'BULK.BUTTON' | translate}}"></p-fileUpload>
 
-    <div style="margin-top: 2rem; display: flex; justify-content: center; flex-direction: column">
-        <div style="margin-top: 2rem; margin-bottom: 1rem">
+    <div style="margin-top: 1.5rem; display: flex; justify-content: center; flex-direction: column">
+        <div style="margin-top: 1.5rem; margin-bottom: 1rem">
             <p>{{'BULK.APP.UPLOAD_TEXT' | translate}}</p>
         </div>
-        <textarea pInputTextarea [(ngModel)]="csvText" rows="10" cols="127"></textarea>
+        <textarea pInputTextarea [(ngModel)]="csvText" rows="10" cols="127" (keyup)="changeDetector = true"></textarea>
     </div>
 
     <div *ngIf="errorMessage !== ''" style="margin-top: 1rem; display: flex; justify-content: start; color: indianred">
@@ -26,7 +26,7 @@
 
     <div style="margin-top: 2rem; display: flex; justify-content: center;">
         <button class="btn btn-primary" (click)="uploadText(); this.errorMessage=''"
-                [disabled]="csvText === ''"> {{'BULK.UPLOAD_BUTTON' | translate}}</button>
+                [disabled]="csvText === '' || !changeDetector"> {{'BULK.UPLOAD_BUTTON' | translate}}</button>
     </div>
 
     <div *ngIf="showProgressBar" style="margin-top: 20px;">

src/app/appmarket/bulkDeployment/appDeployment/appupload/appupload.component.ts

@@ -17,6 +17,7 @@ export class AppuploadComponent implements OnInit {
         '"Domain 2","instance-2","4.0.0","Param3","Param4"\n';
 
     public errorMessage = '';
+    public changeDetector = false;
 
     constructor(public readonly deployService: AppdeploymentService,
                 private router: Router,

src/app/appmarket/bulkDeployment/bulk-view/bulk-view.component.html

 <div class="col-sm-12 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-10">
     <div *ngIf="bulk && bulkType === 'DOMAIN' ">
-        <h3>{{'BULK.DOMAIN.HEADER' | translate}}</h3>
+        <h3>{{'BULK.DOMAIN.HEADER_VIEW' | translate}}</h3>
         <div class="" style="padding-bottom: 5rem; margin-top: 3rem">
             <label for="id" class="col-sm-2 control-label text-right mt-2">{{ 'BULK.LIST.ID' | translate }}</label>
             <div class="col-sm-10">
@@ -50,14 +50,18 @@
                     <tr>
                         <th>{{'BULK.LIST.STATE' | translate}}</th>
                         <th>{{'BULK.LIST.CREATED' | translate}}</th>
-                        <th>{{'BULK.LIST.DETAILS' | translate}}</th>
+                        <th>{{'BULK.LIST.DOMAIN_ID' | translate}}</th>
+                        <th>{{'BULK.LIST.DOMAIN_NAME' | translate}}</th>
+                        <th>{{'BULK.LIST.DOMAIN_CODENAME' | translate}}</th>
                         <th style="width: 5%" scope="col"></th>
                     </tr>
                     <ng-template ngFor let-response [ngForOf]="bulk.entries" let-i="index">
                         <tr *ngIf="response.type === 'DOMAIN'" class="table-row">
                             <td>{{'BULK.STATE.' + response.state | translate}}</td>
                             <td>{{response.created}}</td>
-                            <td>{{getDetails(response)}}</td>
+                            <td>{{getDomainId(response)}}</td>
+                            <td>{{getDomainName(response)}}</td>
+                            <td>{{getDomainCodeName(response)}}</td>
                             <td style="width: 5%" class="text-right">
                     <span class="dropdown">
             <a style="display: inline-block" class="dropdown-toggle " aria-expanded="false" aria-haspopup="true"
@@ -97,14 +101,18 @@
                     <tr>
                         <th>{{'BULK.LIST.STATE' | translate}}</th>
                         <th>{{'BULK.LIST.CREATED' | translate}}</th>
-                        <th>{{'BULK.LIST.DETAILS' | translate}}</th>
+                        <th>{{'BULK.LIST.USER_ID' | translate}}</th>
+                        <th>{{'BULK.LIST.USER_NAME' | translate}}</th>
+                        <th>{{'BULK.LIST.EMAIL' | translate}}</th>
                         <th style="width: 5%" scope="col"></th>
                     </tr>
-                    <ng-template ngFor let-replay [ngForOf]="bulk.entries" let-i="index">
-                        <tr *ngIf="replay.type === 'USER'" class="table-row">
-                            <td>{{'BULK.STATE.' + replay.state | translate}}</td>
-                            <td>{{replay.created}}</td>
-                            <td>{{getDetails(replay)}}</td>
+                    <ng-template ngFor let-response [ngForOf]="bulk.entries" let-i="index">
+                        <tr *ngIf="response.type === 'USER'" class="table-row">
+                            <td>{{'BULK.STATE.' + response.state | translate}}</td>
+                            <td>{{response.created}}</td>
+                            <td>{{getUserId(response)}}</td>
+                            <td>{{getUsername(response)}}</td>
+                            <td>{{getEmail(response)}}</td>
                             <td style="width: 5%" class="text-right">
                     <span class="dropdown">
             <a style="display: inline-block" class="dropdown-toggle " aria-expanded="false" aria-haspopup="true"
@@ -112,11 +120,11 @@
               <em class="fas fa-cog icon-black icon-bigger"></em>
             </a>
             <ul class="dropdown-menu pull-right-drop">
-                <li *ngIf="replay.type === 'DOMAIN'">
-                <a [routerLink]="['/admin/domains/view/', replay?.details['domainId']]">{{ 'BULK.LIST.MOVE_DOMAIN' | translate }}</a>
+                <li *ngIf="response.type === 'DOMAIN'">
+                <a [routerLink]="['/admin/domains/view/', response?.details['domainId']]">{{ 'BULK.LIST.MOVE_DOMAIN' | translate }}</a>
               </li>
-                 <li *ngIf="replay.type === 'USER'">
-                <a [routerLink]="['/admin/users/view', replay?.details['userId']]">{{ 'BULK.LIST.MOVE_USER' | translate }}</a>
+                 <li *ngIf="response.type === 'USER'">
+                <a [routerLink]="['/admin/users/view', response?.details['userId']]">{{ 'BULK.LIST.MOVE_USER' | translate }}</a>
               </li>
             </ul>
           </span>

src/app/appmarket/bulkDeployment/bulk-view/bulk-view.component.ts

@@ -51,16 +51,6 @@ export class BulkViewComponent implements OnInit, OnDestroy {
         });
     }
 
-    public getDetails(entry: BulkResponse) {
-        if (entry.type === 'USER') {
-            return `Username: ${entry.details['userName']} email: ${entry.details['email']} userId: ${entry.details['userId']}`
-        } else if (entry.type === 'DOMAIN') {
-            return `DomainId: ${entry.details['domainId']} name: ${entry.details['domainName']}`
-        } else if (entry.type === 'APPLICATION') {
-            return `AppInstanceId: ${entry.details['appInstanceId']} name: ${entry.details['appInstanceName']} domain: ${entry.details['domainCodename']}`
-        }
-    }
-
     public getAppInstanceId(entry: BulkResponse) {
         return entry?.details['appInstanceId']
     }
@@ -73,6 +63,26 @@ export class BulkViewComponent implements OnInit, OnDestroy {
         return entry?.details['domainCodename'] || entry?.details['domainName']
     }
 
+    public getUsername(entry: BulkResponse) {
+        return entry?.details['userName']
+    }
+
+    public getEmail(entry: BulkResponse) {
+        return entry?.details['email']
+    }
+
+    public getUserId(entry: BulkResponse) {
+        return entry?.details['userId']
+    }
+
+    public getDomainId(entry: BulkResponse) {
+        return entry?.details['domainId']
+    }
+
+    public getDomainName(entry: BulkResponse) {
+        return entry?.details['domainName']
+    }
+
     public update() {
         this.refresh = timer(0, 20000).pipe(map(() => {
             this.deployService.getBulkDeployment(this.bulk.id).subscribe(bulk => {

src/app/appmarket/bulkDeployment/domainDeployment/domainupload/domainupload.component.html

 <div style="width: 80%; margin: auto; margin-top: 4rem;">
-    <div style="margin-bottom: 5rem">
+    <div style="margin-bottom: 2rem">
         <h2>{{'BULK.DOMAIN.NAVIGATION' | translate}}</h2>
-        <p>{{'BULK.DOMAIN.INFO' | translate}}</p>
+        <p class="mt-4">{{'BULK.DOMAIN.UPLOAD' | translate}}</p>
     </div>
     <p-fileUpload name="file[]" customUpload="true" (uploadHandler)="myUploader($event)" accept=".csv"
-                  multiple="false"></p-fileUpload>
+                  multiple="false" uploadLabel="{{'BULK.BUTTON' | translate}}"></p-fileUpload>
 
-    <div style="margin-top: 2rem; display: flex; justify-content: center; flex-direction: column">
-        <div style="margin-top: 2rem; margin-bottom: 1rem">
-            <p>{{'BULK.DOMAIN.INFO' | translate}}</p>
+    <div style="margin-top: 1.5rem; display: flex; justify-content: center; flex-direction: column">
+        <div style="margin-top: 1.5rem; margin-bottom: 1rem">
+            <p>{{'BULK.APP.UPLOAD_TEXT' | translate}}</p>
         </div>
-        <textarea pInputTextarea [(ngModel)]="csvText" rows="10" cols="127"></textarea>
+        <textarea pInputTextarea [(ngModel)]="csvText" rows="10" cols="127" (keyup)="changeDetector = true"></textarea>
     </div>
 
     <div *ngIf="errorMessage !== ''" style="margin-top: 1rem; display: flex; justify-content: start; color: indianred">
@@ -18,7 +18,7 @@
     </div>
 
     <div  style="margin-top: 2rem; display: flex; justify-content: center;" >
-        <button class="btn btn-primary" (click)="uploadText(); this.errorMessage=''" [disabled]="csvText === ''"> {{'BULK.UPLOAD_BUTTON' | translate}}</button>
+        <button class="btn btn-primary" (click)="uploadText(); this.errorMessage=''" [disabled]="csvText === '' || !changeDetector"> {{'BULK.UPLOAD_BUTTON' | translate}}</button>
     </div>
 
     <div *ngIf="showProgressBar" style="margin-top: 20px;">

src/app/appmarket/bulkDeployment/domainDeployment/domainupload/domainupload.component.ts

@@ -18,6 +18,7 @@ export class DomainuploadComponent implements OnInit {
       '"ExampleDomain2","TestUser2","","Lab1","email2@domain.com"\n';
 
   public errorMessage = '';
+  public changeDetector = false;
 
   constructor(private readonly deployService: AppdeploymentService,
               private router: Router,