Skip to content
This repository was archived by the owner on May 14, 2025. It is now read-only.

Commit 2578a82

Browse files
oodamienBoykoAlex
oodamien
authored and
BoykoAlex
committed
Update Stream Create modal UI
Resolves #772
1 parent 6a88707 commit 2578a82

File tree

4 files changed

+304
-163
lines changed

4 files changed

+304
-163
lines changed

‎ui/src/app/streams/stream-create/create-dialog/create-dialog.component.html

Lines changed: 85 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,93 @@
1-
<div class="modal-header">
2-
<h4 class="modal-title pull-left">Create Stream</h4>
3-
<button type="button" class="close pull-right" aria-label="Close" (click)="handleCancel()">
4-
<span aria-hidden="true">&times;</span>
5-
</button>
6-
</div>
7-
<form name="form-creation" (submit)="handleOk()" class="modal-body" [formGroup]="form" [ngBusy]="busy">
8-
<div *ngIf="errors && errors.length > 0" class="dialog-validation">
9-
<div *ngFor="let error of errors">
10-
<label class="glyphicon glyphicon-exclamation-sign dialog-error-sign">{{ error }}</label>
11-
</div>
1+
<div *ngIf="!progressData">
2+
<div class="modal-header">
3+
<h4 class="modal-title pull-left">Create Stream</h4>
4+
<button type="button" class="close pull-right" aria-label="Close" (click)="cancel()">
5+
<span aria-hidden="true">&times;</span>
6+
</button>
127
</div>
13-
<div *ngIf="!(errors && errors.length) && warnings && warnings.length > 0" class="dialog-validation">
14-
<div *ngFor="let warning of warnings">
15-
<label class="glyphicon glyphicon-warning-sign dialog-warning-sign"></label>
16-
<label>{{ warning }}</label>
8+
9+
<form name="form-creation" (submit)="submit()" class="form-horizontal" [formGroup]="form">
10+
<div class="modal-body" *ngIf="!progressData">
11+
<div *ngIf="errors && errors.length > 0" class="alert alert-error">
12+
<div *ngFor="let error of errors">• {{ error }}</div>
13+
</div>
14+
<p>This action will create the following <strong>stream(s)</strong>:</p>
15+
<div *ngFor="let def of streamDefsToCreate()" class="row-stream">
16+
<div class="form-group">
17+
<label class="control-label col-sm-4">Definition</label>
18+
<div class="col-sm-18">
19+
<div class="control-empty">
20+
<app-stream-dsl>{{ def.def }}</app-stream-dsl>
21+
</div>
22+
</div>
23+
</div>
24+
<div class="form-group" [class.has-error]="getControl(def.index.toString()).invalid || hasDuplicateName(def)">
25+
<label [for]="def.index.toString()" class="control-label col-sm-4 control-label-sm">
26+
Name <em class="required">*</em>
27+
</label>
28+
<div class="col-sm-16">
29+
<input [disabled]="isStreamCreationInProgress()" class="form-control input-sm" [id]="def.index.toString()"
30+
[name]="def.index.toString()" [formControlName]="def.index.toString()"
31+
type="text" placeholder="<Stream Name>" [ngModel]="def.name"
32+
(ngModelChange)="changeStreamName(def.index, $event)"/>
33+
<span *ngIf="getControl(def.index.toString()).errors && getControl(def.index.toString()).errors.required"
34+
class="help-block validation-block">
35+
Stream name is required!
36+
</span>
37+
<span
38+
*ngIf="getControl(def.index.toString()).errors && getControl(def.index.toString()).errors.uniqueResource"
39+
class="help-block validation-block">
40+
Stream name is already taken!
41+
</span>
42+
<span *ngIf="getControl(def.index.toString()).errors && getControl(def.index.toString()).errors.pattern"
43+
class="help-block validation-block">
44+
Invalid stream name!
45+
</span>
46+
<span *ngIf="hasDuplicateName(def)" class="help-block validation-block">
47+
Duplicate stream name on the form
48+
</span>
49+
</div>
50+
</div>
51+
</div>
52+
<div class="row row-stream-deploy">
53+
<div class="col-sm-offset-4 col-sm-18">
54+
<label class="checkbox-inline">
55+
<input [disabled]="isStreamCreationInProgress()" type="checkbox" [(ngModel)]="deploy"
56+
[ngModelOptions]="{standalone: true}"/>
57+
Deploy stream(s)
58+
</label>
59+
</div>
60+
</div>
61+
</div>
62+
<div class="modal-footer">
63+
<button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
64+
<button type="submit" class="btn btn-default" [disabled]="!canSubmit()">
65+
<span *ngIf="streamDefsToCreate().length === 1">
66+
<span *ngIf="deploy">Create and deploy the stream</span>
67+
<span *ngIf="!deploy">Create the stream</span>
68+
</span>
69+
<span *ngIf="streamDefsToCreate().length > 1">
70+
<span *ngIf="deploy">Create and deploy the {{ streamDefsToCreate().length }} streams</span>
71+
<span *ngIf="!deploy">Create the {{ streamDefsToCreate().length }} streams</span>
72+
</span>
73+
</button>
1774
</div>
75+
</form>
76+
</div>
77+
78+
<div *ngIf="progressData">
79+
<div class="modal-header">
80+
<h4 class="modal-title pull-left">Creating...</h4>
81+
<button type="button" class="close pull-right" aria-label="Close" (click)="cancel()">
82+
<span aria-hidden="true">&times;</span>
83+
</button>
1884
</div>
19-
<p>This action will create stream(s):</p>
20-
<tbody>
21-
<tr *ngFor="let def of streamDefsToCreate()" [ngClass]="{'has-warning': invalidStreamRow(def)}">
22-
<td class="stream-name-form-control-cell">
23-
<input [disabled]="isStreamCreationInProgress()" class="form-control" [id]="def.index.toString()"
24-
[name]="def.index.toString()" [formControlName]="def.index.toString()"
25-
type="text" placeholder="<Stream Name>" [ngModel]="def.name"
26-
(ngModelChange)="changeStreamName(def.index, $event)"/>
27-
<p>
28-
<span *ngIf="getControl(def.index.toString()).errors && getControl(def.index.toString()).errors.required"
29-
class="help-block validation-block">Stream name is required!</span>
30-
<span *ngIf="getControl(def.index.toString()).errors && getControl(def.index.toString()).errors.uniqueResource"
31-
class="help-block validation-block">Stream name is already taken!</span>
32-
<span *ngIf="getControl(def.index.toString()).errors && getControl(def.index.toString()).errors.pattern"
33-
class="help-block validation-block">Invalid stream name!</span>
34-
<span *ngIf="hasDuplicateName(def)"
35-
class="help-block validation-block">Duplicate stream name on the form</span>
36-
</p>
37-
</td>
38-
<td class="stream-definition-label-cell">
39-
<label class="control-label">{{ def.def }}</label>
40-
</td>
41-
</tr>
42-
</tbody>
43-
<label class="dialog-control">
44-
<input [disabled]="isStreamCreationInProgress()" type="checkbox" [(ngModel)]="deploy"
45-
[ngModelOptions]="{standalone: true}"/>Deploy stream(s)
46-
</label>
47-
<div *ngIf="progressData">
48-
<hr/>
49-
<div>Creating Streams...</div>
85+
<div class="modal-body" *ngIf="progressData">
86+
<div><strong>Creating Streams...</strong></div>
5087
<progressbar animate="true" [value]="progressData.percent" type="success"><b>{{ progressData.percent }}%</b>
5188
</progressbar>
5289
</div>
5390
<div class="modal-footer">
54-
<button type="button" class="btn btn-default" (click)="handleCancel()">Close</button>
55-
<button type="submit" class="btn btn-default" [disabled]="!canSubmit()">OK</button>
91+
<button type="button" class="btn btn-default" (click)="cancel()">Close</button>
5692
</div>
57-
</form>
93+
</div>

0 commit comments

Comments
 (0)