X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=src%2Fapp%2Fpackages%2Finstantiate-ns%2FInstantiateNsComponent.html;h=2bbd8372a84ea445f903fdd9a7c742689cf8fe6e;hb=refs%2Fchanges%2F06%2F10806%2F6;hp=dabd46957f5e3be242dd948f954d827697c4dcbc;hpb=2e02e7d676dc5a87e2d68437f30b6e41037ea7a4;p=osm%2FNG-UI.git

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 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
         <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"