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>
diff --git a/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.html b/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.html
index 52c9200..515066e 100644
--- a/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.html
+++ b/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.html
@@ -31,6 +31,21 @@
             </li>
         </ul>
     </ng-template>
+    <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 [resourcesData]="value"></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"
+        [disabled]="value.resources === null">
+        <i class="fas fa-chart-pie"></i>
+    </button>
     <button type="button" class="btn btn-primary" (click)="vimInfo()" placement="top" container="body"
         ngbTooltip="{{'INFO' | translate}}">
         <i class="fas fa-info icons"></i>
diff --git a/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.ts b/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.ts
index 57f1f64..ffa0340 100644
--- a/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.ts
+++ b/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.ts
@@ -24,8 +24,9 @@
 import { MODALCLOSERESPONSEDATA } from 'CommonModel';
 import { DeleteComponent } from 'DeleteComponent';
 import { NSInstanceDetails } from 'NSInstanceModel';
+import { ResourcesOverviewComponent } from 'ResourcesOverviewComponent';
 import { SharedService } from 'SharedService';
-import { VIMData } from 'VimAccountModel';
+import { VimAccountDetails, VIMData } from 'VimAccountModel';
 
 /**
  * Creating component
@@ -101,4 +102,10 @@
             }
         });
     }
+
+    /** Show VIM Resources Data @public */
+    public showVIMResources(vimDetails: VimAccountDetails): void {
+        const modalRef: NgbModalRef = this.modalService.open(ResourcesOverviewComponent, {backdrop: 'static'});
+        modalRef.componentInstance.resourcesData = vimDetails;
+    }
 }