projects / osm / NG-UI.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Bug 1383 Error when consulting NS instance's topology
[osm/NG-UI.git] / src / app / packages / ns-packages / vnf-composer / VNFComposerComponent.html
diff --git a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html
index 2aa8f12..a947069 100644 (file)
--- a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html
+++ b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html
@@ -21,9 +21,12 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
     <div class="sidebar-header">
       <span class="topology_title" *ngIf="showRightSideInfo === 'vnfdInfo'">{{'PAGE.TOPOLOGY.VNFD' | translate}}</span>
       <span class="topology_title" *ngIf="showRightSideInfo === 'vduInfo'">{{'PAGE.TOPOLOGY.VDU' | translate}}</span>
-      <span class="topology_title" *ngIf="showRightSideInfo === 'intvlInfo'">{{'PAGE.TOPOLOGY.VIRTUALLINK' | translate}}</span>
-      <span class="topology_title" *ngIf="showRightSideInfo === 'cpInfo'">{{'PAGE.TOPOLOGY.CONNECTIONPOINT' | translate}}</span>
-      <span class="topology_title" *ngIf="showRightSideInfo === 'intcpInfo'">{{'PAGE.TOPOLOGY.INTCONNECTIONPOINT' | translate}}</span>
+      <span class="topology_title" *ngIf="showRightSideInfo === 'intvlInfo'">{{'PAGE.TOPOLOGY.VIRTUALLINK' |
+        translate}}</span>
+      <span class="topology_title" *ngIf="showRightSideInfo === 'cpInfo'">{{'PAGE.TOPOLOGY.CONNECTIONPOINT' |
+        translate}}</span>
+      <span class="topology_title" *ngIf="showRightSideInfo === 'intcpInfo'">{{'PAGE.TOPOLOGY.INTCONNECTIONPOINT' |
+        translate}}</span>
       <button (click)="toggleSidebar()" class="close" type="button">
         <i class="fas fa-times-circle text-danger" aria-hidden="true"></i>
       </button>
@@ -34,41 +37,42 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
           <div class="col-12 p-0">
             <form>
               <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'SHORTNAME' | translate }}" name="shortName"
-                    [(ngModel)]="vnfdInfo.shortName">
+                <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
+                    [(ngModel)]="vnfdInfo.id">
+                </div>
+              </div>
+              <div class="form-group row">
+                <label class="col-sm-4 col-form-label">{{ 'PRODUCTNAME' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" placeholder="{{ 'PRODUCTNAME' | translate }}"
+                    name="product-name" [(ngModel)]="vnfdInfo['product-name']">
                 </div>
               </div>
               <div class="form-group row">
                 <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}" name="description"
-                    [(ngModel)]="vnfdInfo.description">
+                <div class="col-sm-8 p-0">
+                  <textarea rows="5" cols="50" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
+                    name="description" [(ngModel)]="vnfdInfo.description"></textarea>
                 </div>
               </div>
               <div class="form-group row">
                 <label class="col-sm-4 col-form-label">{{ 'VERSION' | translate }}</label>
-                <div class="col-sm-8">
+                <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"
                     [(ngModel)]="vnfdInfo.version">
                 </div>
               </div>
               <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
-                    [(ngModel)]="vnfdInfo.id">
+                <label class="col-sm-4 col-form-label">{{ 'PROVIDER' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" placeholder="{{ 'PROVIDER' | translate }}" name="provider"
+                    [(ngModel)]="vnfdInfo.provider">
                 </div>
               </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
-                    [(ngModel)]="vnfdInfo.name">
-                </div>
-              </div>
-              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveVNFD()" placement="top" ngbTooltip="Save">
+              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveVNFD()" placement="top"
+                ngbTooltip="Save">
                 <i class="fas fa-save"></i> {{'SAVE' | translate}}
               </button>
             </form>
@@ -79,116 +83,74 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
         <div class="row">
           <div class="col-12 p-0">
             <form>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'COUNT' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'COUNT' | translate }}" name="count"
-                    [(ngModel)]="vduInfo.count">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}" name="description"
-                    [(ngModel)]="vduInfo.description">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'IMAGE' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'IMAGE' | translate }}" name="image"
-                    [(ngModel)]="vduInfo.image">
-                </div>
-              </div>
               <div class="form-group row">
                 <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
-                <div class="col-sm-8">
+                <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
                     [(ngModel)]="vduInfo.id">
                 </div>
               </div>
               <div class="form-group row">
                 <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
-                <div class="col-sm-8">
+                <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
                     [(ngModel)]="vduInfo.name">
                 </div>
               </div>
-              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveVDU(vduInfo.id)" placement="top"
-                ngbTooltip="Save">
+              <div class="form-group row">
+                <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <textarea rows="5" cols="50" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
+                    name="description" [(ngModel)]="vduInfo.description"></textarea>
+                </div>
+              </div>
+              <div class="form-group row">
+                <label class="col-sm-4 col-form-label">{{ 'IMAGE' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" placeholder="{{ 'IMAGE' | translate }}" name="sw-image-desc"
+                    [(ngModel)]="vduInfo['sw-image-desc']">
+                </div>
+              </div>
+              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveVDU(vduInfo.id)"
+                placement="top" ngbTooltip="Save">
                 <i class="fas fa-save"></i> {{'SAVE' | translate}}
               </button>
             </form>
           </div>
         </div>
       </div>
-      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="showRightSideInfo === 'intvlInfo'">
+      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="showRightSideInfo === 'cpInfo'">
         <div class="row">
           <div class="col-12 p-0">
             <form>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'SHORTNAME' | translate }}" name="shortName"
-                    [(ngModel)]="intvlInfo.shortName">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
-                    [(ngModel)]="intvlInfo.name">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'TYPE' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'TYPE' | translate }}" name="type"
-                    [(ngModel)]="intvlInfo.type">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'IPPROFILEREF' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'IP Profile Ref' | translate }}"
-                    name="ipProfileRef" [(ngModel)]="intvlInfo.ipProfileRef">
-                </div>
-              </div>
               <div class="form-group row">
                 <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
-                <div class="col-sm-8">
+                <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
-                    [(ngModel)]="intvlInfo.id">
+                    [(ngModel)]="cpInfo.id">
                 </div>
               </div>
-              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveIntVL(intvlInfo.id)" placement="top"
-                ngbTooltip="Save">
+              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveCP(cpInfo.id)"
+                placement="top" ngbTooltip="Save">
                 <i class="fas fa-save"></i> {{'SAVE' | translate}}
               </button>
             </form>
           </div>
         </div>
       </div>
-      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="showRightSideInfo === 'cpInfo'">
+      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="showRightSideInfo === 'intvlInfo'">
         <div class="row">
           <div class="col-12 p-0">
             <form>
               <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'TYPE' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'TYPE' | translate }}" name="type"
-                    [(ngModel)]="cpInfo.type">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
-                    [(ngModel)]="cpInfo.name">
+                <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
+                    [(ngModel)]="intvlInfo.id">
                 </div>
               </div>
-              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveCP(cpInfo.name)" placement="top"
-                ngbTooltip="Save">
+              <button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveIntVL(intvlInfo.id)"
+                placement="top" ngbTooltip="Save">
                 <i class="fas fa-save"></i> {{'SAVE' | translate}}
               </button>
             </form>
@@ -199,28 +161,10 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
         <div class="row">
           <div class="col-12 p-0">
             <form>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" name="shortName" [(ngModel)]="intcpInfo.shortName" disabled>
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'TYPE' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" name="type" [(ngModel)]="intcpInfo.type" disabled>
-                </div>
-              </div>
               <div class="form-group row">
                 <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" name="id" [(ngModel)]="intcpInfo.id" disabled>
-                </div>
-              </div>
-              <div class="form-group row">
-                <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
-                <div class="col-sm-8">
-                  <input type="text" class="form-control" name="name" [(ngModel)]="intcpInfo.name" disabled>
+                <div class="col-sm-8 p-0">
+                  <input type="text" class="form-control" name="id" [(ngModel)]="intcpInfo.name" disabled>
                 </div>
               </div>
             </form>
@@ -247,17 +191,17 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
             </legend>
             <ul class="list-group list-group-flush dragable">
               <li class="list-group-item" draggable="true" (dragstart)="drag($event)" id="vdu">
-                <img src="assets/images/VDU.svg" class="vnf-svg" draggable="false"/>
+                <img src="assets/images/VDU.svg" class="vnf-svg" draggable="false" />
                 &nbsp;<span class="span-overflow-text font-weight-bold">{{'PAGE.TOPOLOGY.VDU' | translate}}</span>
                 <span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
               </li>
               <li class="list-group-item" draggable="true" (dragstart)="drag($event)" id="cp">
-                <img src="assets/images/CP-VNF.svg" class="vnf-svg" draggable="false"/>
+                <img src="assets/images/CP-VNF.svg" class="vnf-svg" draggable="false" />
                 &nbsp;<span class="span-overflow-text font-weight-bold">{{'PAGE.TOPOLOGY.CP' | translate}}</span>
                 <span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
               </li>
               <li class="list-group-item" draggable="true" (dragstart)="drag($event)" id="intvl">
-                <img src="assets/images/INTVL.svg" class="vnf-svg" draggable="false"/>
+                <img src="assets/images/INTVL.svg" class="vnf-svg" draggable="false" />
                 &nbsp;<span class="span-overflow-text font-weight-bold">{{'PAGE.TOPOLOGY.INTVL' | translate}}</span>
                 <span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
               </li>
@@ -271,7 +215,8 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
         <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pl-0">
           <div class="btn-group list" role="group" aria-label="Basic example">
             <button type="button" class="btn btn-primary topology-btn" (click)="onFreeze()"
-              [class.pinned]="classApplied" placement="top" container="body" ngbTooltip="{{(classApplied ? 'UNFREEZE' : 'FREEZE') | translate}}">
+              [class.pinned]="classApplied" placement="top" container="body"
+              ngbTooltip="{{(classApplied ? 'UNFREEZE' : 'FREEZE') | translate}}">
               <i class="fas fa-thumbtack"></i>
             </button>
             <button type="button" class="btn btn-primary topology-btn" (click)="onEdit()" placement="top"
@@ -286,16 +231,16 @@ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.i
         </div>
         <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-right pr-0 badgegroup">
           <span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
-            <img src="assets/images/VDU.svg" class="vnf-svg" draggable="false"/>
+            <img src="assets/images/VDU.svg" class="vnf-svg" draggable="false" />
             <br>{{'PAGE.TOPOLOGY.VDU' | translate}}</span>
           <span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
-            <img src="assets/images/CP-VNF.svg" class="vnf-svg" draggable="false"/>
+            <img src="assets/images/CP-VNF.svg" class="vnf-svg" draggable="false" />
             <br>{{'PAGE.TOPOLOGY.CP' | translate}}</span>
           <span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
-            <img src="assets/images/INTVL.svg" class="vnf-svg" draggable="false"/>
+            <img src="assets/images/INTVL.svg" class="vnf-svg" draggable="false" />
             <br>{{'PAGE.TOPOLOGY.INTVL' | translate}}</span>
           <span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
-            <img src="assets/images/INTCP.svg" class="vnf-svg" draggable="false"/>
+            <img src="assets/images/INTCP.svg" class="vnf-svg" draggable="false" />
             <br>{{'PAGE.TOPOLOGY.INTCP' | translate}}</span>
         </div>
       </div>