blob: 2d6f232ad303928831d71eeb2a98c7b02794dcac (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<form #generalForm="ngForm" novalidate style="display: flex; margin: 1em;">
<div class="left">
<div class="import-wrapper" style="display: flex" *ngIf="store.generalflow === 'import' && !importCompleted">
<div class="field" style="width:70%">
<div class="field-label required" style="display: flex;">
<span>Select existing VFCMT</span>
</div>
<ng-select name="vfcmt" [items]="vfcmts" required [virtualScroll]="true" placeholder="Select VFCMT" [(ngModel)]="selectedVfcmt"
class="vfcmt-list" (change)="vfcmtChange($event)">
</ng-select>
</div>
<div class="field" style="width:30%">
<div class="field-label required" style="display: flex;">
<span>Select version</span>
</div>
<select name="version" required data-tests-id="vfcmtVersion" [(ngModel)]="selectedVersion" [style.background]="versions.length == 0 ? '#ebebe4' : 'white'"
(ngModelChange)="versionChange($event)" [disabled]="versions.length == 0" style="width: 100%; height: 30px;">
<option [ngValue]="null" disabled>Select version</option>
<option *ngFor="let item of versions" [value]="item.version">{{item.version}}</option>
</select>
</div>
</div>
<div class="field">
<div class="field-label required">Name</div>
<input type="text" name="name" ngModel required [(ngModel)]="newVfcmt.name" class="field-text" [disabled]="this.store.isEditMode || disableName"
data-tests-id="nameMc" />
</div>
<div class="field">
<div class="field-label required">Description</div>
<textarea required name="description" ngModel [(ngModel)]="newVfcmt.description" style="resize: none;" cols="30" rows="10"
class="field-text" data-tests-id="descMc" [disabled]="this.store.isEditMode || disableDescription"></textarea>
</div>
<div class="field" *ngIf="store.generalflow === 'new'">
<div class="field-label required" style="display: flex;">
<span>Template</span>
<span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14"></span>
</div>
<select name="template" [disabled]="this.store.isEditMode" required [(ngModel)]="newVfcmt.template" (ngModelChange)="onChangeTemplate($event)"
data-tests-id="templateDdl" class="field-text" [style.background]="this.store.isEditMode ? '#ebebe4' : 'white'">
<option [ngValue]="null" disabled>Select template</option>
<option *ngFor="let template of templates" [value]="template.uuid" data-tests-id="templateOptions">{{template.name}}</option>
</select>
</div>
<div class="field" *ngIf="store.generalflow === 'import' || store.generalflow === 'edit'">
<div class="field-label required" style="display: flex;">
<span>Flow type</span>
<span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14"></span>
</div>
<select name="flowType" [disabled]="this.store.isEditMode || disableFlowType" required [(ngModel)]="newVfcmt.flowType" data-tests-id="flowTypeDdl"
class="field-text" [style.background]="this.store.isEditMode || disableFlowType ? '#ebebe4' : 'white'">
<option [ngValue]="null" disabled>Select Flow Type</option>
<option *ngFor="let flowType of flowTypes" [value]="flowType" data-tests-id="flowTypeOptions">{{flowType}}</option>
</select>
</div>
<div class="field">
<div class="field-label required" style="display: flex;">
<span>Attached to</span>
<span style="padding-left: 5px;" [innerHTML]="'help-circle' | feather:14"></span>
</div>
<select name="serviceAttached" [disabled]="this.store.isEditMode || disableVnfiList" required [(ngModel)]="newVfcmt.vfni"
data-tests-id="vfniDdl" (ngModelChange)="onChangeVfni($event)" class="field-text" [style.background]="this.store.isEditMode || disableVnfiList ? '#ebebe4' : 'white'">
<option [ngValue]="null" disabled>Select VNFi</option>
<option *ngFor="let vfi of vfniList" [value]="vfi.resourceInstanceName">{{vfi.resourceInstanceName}}</option>
</select>
</div>
</div>
<div class="right">
<div style="padding: 0.5em 0; padding-top: 1em; color: #5a5a5a;">
Flow diagram
</div>
<div>
<app-diagram [list]="list"></app-diagram>
</div>
</div>
</form>
|
