<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>
- <button (click)="toggleSidebar()" class="close" type="button">
+ <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-vnfd" type="button">
<i class="fas fa-times-circle text-danger" aria-hidden="true"></i>
</button>
</div>
<div class="sidebar-body">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="showRightSideInfo === 'vnfdInfo'">
<div class="row">
- <div class="col-12 p-0">
+ <div class="col-12">
<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">
+ <div class="form-group row mb-3">
+ <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">
+ <div class="form-group row mb-3">
+ <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 mb-3">
<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">
+ <div class="form-group row mb-3">
<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">
- </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 class="form-group row mb-3">
+ <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>
- <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>
<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>
<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>
</ng-sidebar-container>
<div class="container-fluid text-dark">
<div class="row bg-white vnf-composer-form">
- <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0 px-0">
+ <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 ps-0 px-0">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2">
<fieldset class="p-2">
</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" />
<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" />
<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" />
<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>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="row">
- <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pl-0">
+ <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ps-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"
</button>
</div>
</div>
- <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-right pr-0 badgegroup">
+ <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-end pe-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>