commit 4a7a542839c9ed7b6b6118c9faae0bc5d274494f
author SANDHYA.JS <sandhya.j@tataelxsi.co.in> Sat May 15 15:35:22 2021 +0530
committer rbara <barath.r@tataelxsi.co.in> Fri Jul 23 13:57:07 2021 +0200
tree abb0e95639df3153c78c1919a47da881cc2c3b2b
parent 2e02e7d676dc5a87e2d68437f30b6e41037ea7a4

Feature-5950: Management of quotas in VIM Account

 * Showing the pie/doughnut chart for the Openstack VIM resources
 * Available in dashboard, VIM Account section and NSInstantiate section.

Change-Id: I64bec0b724accc7ea733f509ec5aef7c0d09662e
Signed-off-by: SANDHYA.JS <sandhya.j@tataelxsi.co.in>

src/app/packages/instantiate-ns/InstantiateNsComponent.html

diff --git a/src/app/packages/instantiate-ns/InstantiateNsComponent.html b/src/app/packages/instantiate-ns/InstantiateNsComponent.html
index dabd469..2bbd837 100644
--- a/src/app/packages/instantiate-ns/InstantiateNsComponent.html
+++ b/src/app/packages/instantiate-ns/InstantiateNsComponent.html
@@ -57,13 +57,30 @@
         <div class="form-group row">
             <label class="col-sm-4 col-form-label"
                 for="vimAccountId">{{'PAGE.INSTANCEINSTANTIATE.VIMACCOUNT' | translate}}*</label>
-            <div class="col-sm-8">
-                <ng-select [items]="vimAccountSelect" bindLabel="name" bindValue="_id"
+            <div class="col-sm-6">
+                <ng-select  (change)="getSelectedVIMDetails($event)" [items]="vimAccountSelect" bindLabel="name" bindValue="_id"
                     placeholder="{{'SELECT' | translate}} {{'PAGE.INSTANCEINSTANTIATE.VIMACCOUNT' | translate}}"
                     formControlName="vimAccountId" [(ngModel)]="vimAccountId" id="vimAccountId"
                     [ngClass]="{ 'is-invalid': submitted && f.vimAccountId.errors }" required>
                 </ng-select>
             </div>
+            <div class="col-sm-2" *ngIf="selectedVIMDetails !== null && selectedVIMDetails !== undefined" >
+                <ng-template #graphTitle>
+                    <span class="text-primary"><strong>{{'PAGE.VIMDETAILS.VIMRESOURCES' | translate}}</strong></span>
+                    <button class="button-xs close" type="button" (click)="chart.close()">
+                        <i class="fas fa-times-circle text-danger"></i>
+                    </button>
+                </ng-template>
+                <ng-template #graphContent>
+                    <app-resources-overview *ngIf="selectedVIMDetails !== null && selectedVIMDetails !== undefined"
+                    [resourcesData]="selectedVIMDetails"></app-resources-overview>
+                </ng-template>
+                <button type="button" class="btn btn-primary" placement="left" container="body"
+                    [ngbPopover]="graphContent" triggers="manual" #chart="ngbPopover"
+                    (click)="chart.open()" [autoClose]="'outside'" [popoverTitle]="graphTitle" popoverClass="resources-chart-popover">
+                    <i class="fas fa-chart-pie"></i>
+                </button>
+            </div>
         </div>
         <div class="form-group row">
             <label class="col-sm-4 col-form-label"

src/app/packages/instantiate-ns/InstantiateNsComponent.ts

diff --git a/src/app/packages/instantiate-ns/InstantiateNsComponent.ts b/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
index 74569f1..1043f9a 100644
--- a/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
+++ b/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
@@ -75,6 +75,9 @@
   /** Give the message for the loading @public */
   public message: string = 'PLEASEWAIT';
 
+  /** Contains Selected VIM Details @public */
+  public selectedVIMDetails: VimAccountDetails = null;
+
   /** Element ref for fileInputConfig @public */
   @ViewChild('fileInputConfig', { static: true }) public fileInputConfig: ElementRef;
 
@@ -284,4 +287,11 @@
     this.fileInputConfigLabel.nativeElement.innerText = files[0].name;
     this.fileInputConfig.nativeElement.value = null;
   }
+
+  /** Get Selected VIM details @public */
+  public getSelectedVIMDetails(vimDetails: VimAccountDetails): void {
+    if (!isNullOrUndefined(vimDetails.resources)) {
+      this.selectedVIMDetails = vimDetails;
+    }
+  }
 }