<span class="topology_title" *ngIf="isShowVLDetails">{{'PAGE.TOPOLOGY.VIRTUALLINK' | translate}}</span>
<span class="topology_title" *ngIf="isShowVNFDetails">{{'PAGE.TOPOLOGY.VNF' | translate}}</span>
<span class="topology_title" *ngIf="isShowCPDetails">{{'PAGE.TOPOLOGY.CONNECTIONPOINT' | translate}}</span>
- <button (click)="toggleSidebar()" class="close" type="button">
+ <button (click)="toggleSidebar()" class="close-nsd" 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="isShowNSDDetails">
<div class="row">
- <div class="col-12 p-0">
+ <div class="col-12">
<form autocomplete="off">
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>
+ <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="{{ 'SHORTNAME' | translate }}" name="shortName"
- [(ngModel)]="vnfdPackageDetails.shortName">
+ <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
+ [(ngModel)]="nsPackageDetails.id">
</div>
</div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'VENDOR' | translate }}</label>
+ <div class="form-group row mb-3">
+ <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
<div class="col-sm-8 p-0">
- <input type="text" class="form-control" placeholder="{{ 'VENDOR' | translate }}" name="vendor"
- [(ngModel)]="vnfdPackageDetails.vendor">
+ <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
+ [(ngModel)]="nsPackageDetails.name">
</div>
</div>
- <div class="form-group row">
+ <div class="form-group row mb-3">
<label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
<div class="col-sm-8 p-0">
- <textarea type="text" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
- name="description" [(ngModel)]="vnfdPackageDetails.description"></textarea>
+ <textarea rows="5" cols="50" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
+ name="description" [(ngModel)]="nsPackageDetails.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 p-0">
<input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"
- [(ngModel)]="vnfdPackageDetails.version">
+ [(ngModel)]="nsPackageDetails.version">
</div>
</div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
+ <div class="form-group row mb-3">
+ <label class="col-sm-4 col-form-label">{{ 'DESIGNER' | translate }}</label>
<div class="col-sm-8 p-0">
- <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
- [(ngModel)]="vnfdPackageDetails.id">
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
- <div class="col-sm-8 p-0">
- <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
- [(ngModel)]="vnfdPackageDetails.name">
+ <input type="text" class="form-control" placeholder="{{ 'DESIGNER' | translate }}" name="designer"
+ [(ngModel)]="nsPackageDetails.designer">
</div>
</div>
<button type="button" class="btn btn-primary" (click)="saveNSD()" placement="top"
<div class="col-12 p-0">
<form autocomplete="off">
<div class="form-group row">
- <label class="col-sm-4 p-0 col-form-label">{{ 'NAME' | translate }}</label>
+ <label class="col-sm-4 p-0 col-form-label">{{ 'ID' | translate }}</label>
<div class="col-sm-8 p-0">
- <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
- [(ngModel)]="vlDetails.name">
+ <input type="text" readonly class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
+ [(ngModel)]="virtualLinkDesc.id">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 p-0 col-form-label">{{'PAGE.NSPACKAGE.NSCOMPOSE.MGMTNETWORK' | translate}}</label>
<div class="col-sm-8 p-0">
- <select class="form-control custom-select" name="mgmt-network" [(ngModel)]="vlDetails['mgmt-network']">
+ <select class="form-control custom-select" name="mgmt-network" [(ngModel)]="virtualLinkDesc['mgmt-network']">
<option [value]="true">True</option>
<option [value]="false">False</option>
</select>
</div>
</div>
- <div class="form-group row">
- <label class="col-sm-4 p-0 col-form-label">{{'PAGE.NSPACKAGE.NSCOMPOSE.VIMNETWORKNAME' | translate}}</label>
- <div class="col-sm-8 p-0">
- <input type="text" class="form-control" placeholder="Vim network name" name="vim-network-name"
- [(ngModel)]="vlDetails['vim-network-name']">
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 p-0 col-form-label">{{'TYPE' | translate}}</label>
- <div class="col-sm-8 p-0">
- <input type="text" class="form-control" placeholder="Type" name="type" [(ngModel)]="vlDetails.type">
- </div>
- </div>
- <div class="form-group row">
- <label class="col-sm-4 p-0 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)]="vlDetails.id">
- </div>
- </div>
<button type="button" class="btn btn-primary" placement="top" ngbTooltip="Save"
- (click)="saveVL(vlDetails.id)">
+ (click)="saveVL(virtualLinkDesc.id)">
<i class="fas fa-save"></i> {{'SAVE' | translate}}
</button>
</form>
<table class="table table-bordered text-dark custom-table">
<tbody>
<tr>
- <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.MEMBER-VNF-INDEX' | translate}}</td>
- <td>{{ vnfData['member-vnf-index'] }}</td>
+ <th scope="row">id</th>
+ <td>{{ vnfData.id }}</td>
</tr>
<tr>
- <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.VNFD-ID-REF' | translate}}</td>
- <td>{{ vnfData['vnfd-id-ref'] }}</td>
+ <th scope="row">vnfd-id</th>
+ <td>{{ vnfData['vnfd-id'] }}</td>
</tr>
</tbody>
</table>
<table class="table table-bordered text-dark custom-table">
<tbody>
<tr>
- <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.VLD-ID' | translate}}</td>
- <td>{{ vlDetails['name'] }}</td>
+ <th scope="row">id</th>
+ <td>{{ vnfData.id }}</td>
+ </tr>
+ <tr>
+ <th scope="row">vnfd-id</th>
+ <td>{{ vnfData['vnfd-id'] }}</td>
</tr>
<tr>
- <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.VNFD-CP-REF' | translate}}</td>
- <td>{{ cpData['vnfd-connection-point-ref'] }}</td>
+ <th scope="row">constituent-base-element-id</th>
+ <td>{{ cpData['constituent-base-element-id'] }}</td>
</tr>
<tr>
- <td>{{'MEMBERINDEX' | translate}}</td>
- <td>{{ cpData['member-vnf-index-ref'] }}</td>
+ <th scope="row">constituent-cpd-id</th>
+ <td>{{ cpData['constituent-cpd-id'] }}</td>
</tr>
<tr>
- <td>{{'PAGE.NSPACKAGE.NSCOMPOSE.VNFD-ID-REF' | translate}}</td>
- <td>{{ cpData['vnfd-id-ref'] }}</td>
+ <th scope="row">virtual-link-profile-id</th>
+ <td>{{ virtualLinkProfileID }}</td>
</tr>
</tbody>
</table>
</ng-sidebar-container>
<div class="container-fluid text-dark">
<div class="row bg-white ns-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">
<ul class="list-group list-group-flush dragable">
<li class="list-group-item" draggable="true" (dragstart)="drag($event)" id="vl">
<img src="assets/images/VL.svg" class="ns-svg" draggable="false"/>
- <span class="span-overflow-text font-weight-bold">{{'PAGE.TOPOLOGY.VL' | translate}}</span>
+ <span class="span-overflow-text fw-bold">{{'PAGE.TOPOLOGY.VL' | translate}}</span>
<span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
</li>
</ul>
<ul class="list-group list-group-flush dragable scroll-box">
<li id="list['id']" class="list-group-item" draggable="true" (dragstart)="drag($event)"
[attr.data-id]="list['id']" *ngFor="let list of vnfList" placement="top"
- container="body" ngbTooltip="{{ list['short-name'] }}">
+ container="body" ngbTooltip="{{ list['product-name'] }}">
<img src="assets/images/VNFD.svg" class="ns-svg" draggable="false"/>
- <span class="span-overflow-text font-weight-bold">{{ list['short-name'] }}</span>
+ <span class="span-overflow-text fw-bold">{{ list['product-name'] }}</span>
<span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
</li>
</ul>
</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}}">
</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/VNFD.svg" class="ns-svg" draggable="false"/>
<br>{{'PAGE.TOPOLOGY.VNF' | translate}}</span>
projects / osm / NG-UI.git / blobdiff