Blame - src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html - osm/NG-UI

kumaran.m

3b4814a

2020-05-01 19:48:54 +0530

[diff] [blame^]

<!--

Licensed under the Apache License, Version 2.0 (the 'License');

5

you may not use this file except in compliance with the License.

6

You may obtain a copy of the License at

7

8

http://www.apache.org/licenses/LICENSE-2.0

9

10

Unless required by applicable law or agreed to in writing, software

11

distributed under the License is distributed on an "AS IS" BASIS,

12

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

13

See the License for the specific language governing permissions and

14

limitations under the License.

15

16

Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)

17

-->

18

<ng-sidebar-container class="vnf-topology-sidebar-container">

19

20

<ng-sidebar [(opened)]="sideBarOpened" position="left">

21

22

<span class="topology_title" *ngIf="showRightSideInfo === 'vnfdInfo'">{{'PAGE.TOPOLOGY.VNFD' | translate}}</span>

23

<span class="topology_title" *ngIf="showRightSideInfo === 'vduInfo'">{{'PAGE.TOPOLOGY.VDU' | translate}}</span>

24

<span class="topology_title" *ngIf="showRightSideInfo === 'intvlInfo'">{{'PAGE.TOPOLOGY.VIRTUALLINK' | translate}}</span>

25

<span class="topology_title" *ngIf="showRightSideInfo === 'cpInfo'">{{'PAGE.TOPOLOGY.CONNECTIONPOINT' | translate}}</span>

26

<span class="topology_title" *ngIf="showRightSideInfo === 'intcpInfo'">{{'PAGE.TOPOLOGY.INTCONNECTIONPOINT' | translate}}</span>

</button>

</div>

<form>

<label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>

38

39

<input type="text" class="form-control" placeholder="{{ 'SHORTNAME' | translate }}" name="shortName"

40

[(ngModel)]="vnfdInfo.shortName">

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>

45

46

<input type="text" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}" name="description"

47

[(ngModel)]="vnfdInfo.description">

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'VERSION' | translate }}</label>

52

53

<input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"

54

[(ngModel)]="vnfdInfo.version">

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>

59

60

<input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"

61

[(ngModel)]="vnfdInfo.id">

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>

66

67

<input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"

68

[(ngModel)]="vnfdInfo.name">

</div>

</div>

<i class="fas fa-save"></i> {{'SAVE' | translate}}

</button>

</form>

</div>

</div>

</div>

<form>

<label class="col-sm-4 col-form-label">{{ 'COUNT' | translate }}</label>

84

85

<input type="text" class="form-control" placeholder="{{ 'COUNT' | translate }}" name="count"

86

[(ngModel)]="vduInfo.count">

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>

91

92

<input type="text" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}" name="description"

93

[(ngModel)]="vduInfo.description">

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'IMAGE' | translate }}</label>

98

99

<input type="text" class="form-control" placeholder="{{ 'IMAGE' | translate }}" name="image"

100

[(ngModel)]="vduInfo.image">

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>

105

106

<input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"

107

[(ngModel)]="vduInfo.id">

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>

112

113

<input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"

114

[(ngModel)]="vduInfo.name">

115

</div>

116

</div>

117

<button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveVDU(vduInfo.id)" placement="top"

118

ngbTooltip="Save">

119

<i class="fas fa-save"></i> {{'SAVE' | translate}}

</button>

</form>

</div>

</div>

</div>

<form>

<label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>

131

132

<input type="text" class="form-control" placeholder="{{ 'SHORTNAME' | translate }}" name="shortName"

133

[(ngModel)]="intvlInfo.shortName">

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>

138

139

<input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"

140

[(ngModel)]="intvlInfo.name">

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'TYPE' | translate }}</label>

145

146

<input type="text" class="form-control" placeholder="{{ 'TYPE' | translate }}" name="type"

147

[(ngModel)]="intvlInfo.type">

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'IPPROFILEREF' | translate }}</label>

152

153

<input type="text" class="form-control" placeholder="{{ 'IP Profile Ref' | translate }}"

154

name="ipProfileRef" [(ngModel)]="intvlInfo.ipProfileRef">

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>

159

160

<input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"

161

[(ngModel)]="intvlInfo.id">

162

</div>

163

</div>

164

<button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveIntVL(intvlInfo.id)" placement="top"

165

ngbTooltip="Save">

166

<i class="fas fa-save"></i> {{'SAVE' | translate}}

</button>

</form>

</div>

</div>

</div>

<form>

<label class="col-sm-4 col-form-label">{{ 'TYPE' | translate }}</label>

178

179

<input type="text" class="form-control" placeholder="{{ 'TYPE' | translate }}" name="type"

180

[(ngModel)]="cpInfo.type">

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>

185

186

<input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"

187

[(ngModel)]="cpInfo.name">

188

</div>

189

</div>

190

<button type="button" class="btn btn-primary btn-sm pull-right" (click)="saveCP(cpInfo.name)" placement="top"

191

ngbTooltip="Save">

192

<i class="fas fa-save"></i> {{'SAVE' | translate}}

</button>

</form>

</div>

</div>

</div>

<form>

<label class="col-sm-4 col-form-label">{{ 'SHORTNAME' | translate }}</label>

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'TYPE' | translate }}</label>

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>

</div>

</div>

<label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</ng-sidebar>

</button>

</div>

</ng-sidebar-container>

</legend>

 <span class="span-overflow-text font-weight-bold">{{'PAGE.TOPOLOGY.VDU' | translate}}</span>

</li>

 <span class="span-overflow-text font-weight-bold">{{'PAGE.TOPOLOGY.CP' | translate}}</span>

</li>

 <span class="span-overflow-text font-weight-bold">{{'PAGE.TOPOLOGY.INTVL' | translate}}</span>

</li>

</ul>

</fieldset>

</div>

</div>

</div>

<button type="button" class="btn btn-primary topology-btn" (click)="onFreeze()"

274

[class.pinned]="classApplied" placement="top" container="body" ngbTooltip="{{(classApplied ? 'UNFREEZE' : 'FREEZE') | translate}}">

275

276

</button>

277

<button type="button" class="btn btn-primary topology-btn" (click)="onEdit()" placement="top"

278

container="body" ngbTooltip="{{'EDIT' | translate}}">

279

280

</button>

281

<button type="button" class="btn btn-primary topology-btn" (click)="showInfo()" placement="top"

282

container="body" ngbTooltip="{{'PAGE.TOPOLOGY.HELP' | translate}}">

</button>

</div>

</div>

<br>{{'PAGE.TOPOLOGY.VDU' | translate}}</span>

291

292

293

<br>{{'PAGE.TOPOLOGY.CP' | translate}}</span>

294

295

296

<br>{{'PAGE.TOPOLOGY.INTVL' | translate}}</span>

297

298

299

<br>{{'PAGE.TOPOLOGY.INTCP' | translate}}</span>

</div>

</div>

id="graphContainer" #graphContainer>

</svg>

</div>

</div>

</div>

</div>

</div>

<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>