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

Commit 6929bfd

Browse files
ghillertghillert
committed
Merge pull request #533 from cppwfs/UI-214
* cppwfs-UI-214: Polishing and standardizing refresh-button alignments Adds refresh buttons to task executions and runtime apps pages.
2 parents 0603c3f + 6f51bec commit 6929bfd

File tree

6 files changed

+121
-109
lines changed

6 files changed

+121
-109
lines changed

‎ui/src/app/apps/apps.component.html

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,38 @@ <h1 [ngBusy]="busy">Apps</h1>
33
This section lists all the available applications and provides the control to register/unregister them (if applicable).
44
</p>
55

6-
<button id="registerApplicationButton" type="button" (click)="registerApps()"
7-
class="btn btn-default" [appRoles]="['ROLE_CREATE']"
8-
><span class="glyphicon glyphicon-plus"></span>
9-
<span class="hidden-xs">Register Application(s)</span>
10-
</button>
6+
<div class="row">
7+
<div class="col-md-18">
8+
<button id="registerApplicationButton" type="button" (click)="registerApps()"
9+
class="btn btn-default" [appRoles]="['ROLE_CREATE']"
10+
><span class="glyphicon glyphicon-plus"></span>
11+
<span class="hidden-xs">Register Applicati18on(s)</span>
12+
</button>
1113

12-
<app-tri-state-button *ngIf="appRegistrations?.items" class="toggle-all" [appRoles]="['ROLE_CREATE']"
13-
[items]="appRegistrations.getItemsAsObservable()"
14-
(eventHandler)="unregisterMultipleApps(appRegistrations.items)"
15-
noneSelectedLabel="No app selected to unregister"
16-
oneSelectedLabel="Unregister {selectedCount} selected app"
17-
manySelectedLabel="Unregister {selectedCount} selected apps"
18-
allSelectedLabel="Unregister all {selectedCount} selected apps"
19-
></app-tri-state-button>
14+
<app-tri-state-button *ngIf="appRegistrations?.items" class="toggle-all" [appRoles]="['ROLE_CREATE']"
15+
[items]="appRegistrations.getItemsAsObservable()"
16+
(eventHandler)="unregisterMultipleApps(appRegistrations.items)"
17+
noneSelectedLabel="No app selected to unregister"
18+
oneSelectedLabel="Unregister {selectedCount} selected app"
19+
manySelectedLabel="Unregister {selectedCount} selected apps"
20+
allSelectedLabel="Unregister all {selectedCount} selected apps"
21+
></app-tri-state-button>
2022

21-
<button id="bulkImportAppsButton" type="button" (click)="bulkImportApps()" [appRoles]="['ROLE_CREATE']"
22-
class="btn btn-default"
23-
><span class="glyphicon glyphicon-import"></span>
24-
<span class="hidden-xs">Bulk Import Applications</span>
25-
</button>
26-
<label *ngIf="appRegistrations" class="control">
27-
<input type="text" class="input" placeholder="Filter items" [(ngModel)]="appRegistrations.filter" >
28-
</label>
29-
<button id="refreshAppRegistrationsButton" type="button" (click)="loadAppRegistrations(true)"
30-
class="btn btn-default"
31-
><span class="glyphicon glyphicon-refresh"></span></button>
23+
<button id="bulkImportAppsButton" type="button" (click)="bulkImportApps()" [appRoles]="['ROLE_CREATE']"
24+
class="btn btn-default"
25+
><span class="glyphicon glyphicon-import"></span>
26+
<span class="hidden-xs">Bulk Import Applications</span>
27+
</button>
28+
</div>
29+
<div class="col-md-6 text-right">
30+
<label *ngIf="appRegistrations" class="control">
31+
<input type="text" class="input" placeholder="Filter items" [(ngModel)]="appRegistrations.filter" >
32+
</label>
33+
<button id="refreshAppRegistrationsButton" type="button" (click)="loadAppRegistrations(true)"
34+
class="btn btn-default"
35+
><span class="glyphicon glyphicon-refresh"></span></button>
36+
</div>
37+
</div>
3238

3339
<table *ngIf="appRegistrations?.items && appRegistrations.items.length > 0" class="table table-hover">
3440
<thead>

‎ui/src/app/runtime/runtime-apps.component.html

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
<h1 class="no-user-selection">Runtime applications</h1>
2-
<p> This section shows the list of all running apps.</p>
2+
<p>
3+
This section shows the list of all running apps.
4+
</p>
5+
6+
<div class="row">
7+
<div class="col-md-24 text-right">
8+
<button id="refreshTaskExecutionsButton" type="button" (click)="getPage($event)"
9+
class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span></button>
10+
</div>
11+
</div>
12+
313
<div *ngIf="runtimeApps?.items.length == 0">No applications are running.</div>
414
<table *ngIf="runtimeApps?.items.length > 0" class="table table-hover">
515
<thead>

‎ui/src/app/streams/stream-definitions/stream-definitions.component.html

Lines changed: 53 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,59 @@
1-
<div class="row">
1+
<ng-template [ngBusy]="{busy: busy, wrapperClass: 'ng-busy ng-busy-no-margin', minDuration: 2000}"></ng-template>
2+
<div class="row" style="margin-bottom: 5px;">
23
<div class="col-md-24">
3-
<div class="col-md-24 table-filter">
4-
<table class="col-lg-24 tab-content-header" [ngBusy]="busy">
5-
<tr>
6-
<td class="col-xs-12">
7-
<button type="button" (click)="expandPage()"
8-
class="btn btn-default" id="expandAll">
9-
<span class="glyphicon glyphicon-collapse-down"></span>
10-
<span class="hidden-xs">Expand All</span>
11-
</button>
12-
<button type="button" (click)="collapsePage()"
13-
class="btn btn-default" id="collapseAll">
14-
<span class="glyphicon glyphicon-expand"></span>
15-
<span class="hidden-xs">Collapse All</span>
16-
</button>
17-
</td>
18-
<td>
19-
<label *ngIf="streamDefinitions" class="control">Filter Stream Definitions
20-
<input type="text" class="input" placeholder="Filter definitions" [(ngModel)]="streamDefinitions.filter">
21-
</label>
22-
<button *ngIf="streamDefinitions" type="button" (click)="loadStreamDefinitions()"
23-
class="btn btn-default">
24-
<span class="glyphicon glyphicon-refresh"></span></button>
25-
</td>
26-
</tr>
27-
<tr>
28-
<td colspan="2" class="col-xs-12 col-actions" height="45px">
29-
<app-tri-state-button *ngIf="streamDefinitions?.items" class="toggle-all" [appRoles]="['ROLE_CREATE']"
30-
[items]="streamDefinitions.getItemsAsObservable()"
31-
(eventHandler)="deployMultipleStreamDefinitions(streamDefinitions.items)"
32-
noneSelectedLabel="No stream selected to deploy"
33-
oneSelectedLabel="Deploy {selectedCount} selected stream"
34-
manySelectedLabel="Deploy {selectedCount} selected streams"
35-
allSelectedLabel="Deploy all {selectedCount} selected streams"
36-
icon="play"
37-
[filter]="filterDeployable"
38-
></app-tri-state-button>
39-
40-
<app-tri-state-button *ngIf="streamDefinitions?.items" class="toggle-all" [appRoles]="['ROLE_CREATE']"
41-
[items]="streamDefinitions.getItemsAsObservable()"
42-
(eventHandler)="undeployMultipleStreamDefinitions(streamDefinitions.items)"
43-
noneSelectedLabel="No stream selected to undeploy"
44-
oneSelectedLabel="Undeploy {selectedCount} selected stream"
45-
manySelectedLabel="Undeploy {selectedCount} selected streams"
46-
allSelectedLabel="Undeploy all {selectedCount} selected streams"
47-
icon="stop"
48-
[filter]="filterUndeployable"
49-
></app-tri-state-button>
50-
51-
<app-tri-state-button *ngIf="streamDefinitions?.items" class="toggle-all" [appRoles]="['ROLE_CREATE']"
52-
[items]="streamDefinitions.getItemsAsObservable()"
53-
(eventHandler)="destroyMultipleStreams(streamDefinitions.items)"
54-
noneSelectedLabel="No stream selected to destroy"
55-
oneSelectedLabel="Destroy {selectedCount} selected stream"
56-
manySelectedLabel="Destroy {selectedCount} selected streams"
57-
allSelectedLabel="Destroy all {selectedCount} selected streams"
58-
icon="remove"
59-
></app-tri-state-button>
4+
<button type="button" (click)="expandPage()"
5+
class="btn btn-default" id="expandAll">
6+
<span class="glyphicon glyphicon-collapse-down"></span>
7+
<span class="hidden-xs">Expand All</span>
8+
</button>
9+
<button type="button" (click)="collapsePage()"
10+
class="btn btn-default" id="collapseAll">
11+
<span class="glyphicon glyphicon-expand"></span>
12+
<span class="hidden-xs">Collapse All</span>
13+
</button>
14+
</div>
15+
</div>
16+
<div class="row">
17+
<div class="col-md-19">
18+
<app-tri-state-button *ngIf="streamDefinitions?.items" class="toggle-all" [appRoles]="['ROLE_CREATE']"
19+
[items]="streamDefinitions.getItemsAsObservable()"
20+
(eventHandler)="deployMultipleStreamDefinitions(streamDefinitions.items)"
21+
noneSelectedLabel="No stream selected to deploy"
22+
oneSelectedLabel="Deploy {selectedCount} selected stream"
23+
manySelectedLabel="Deploy {selectedCount} selected streams"
24+
allSelectedLabel="Deploy all {selectedCount} selected streams"
25+
icon="play"
26+
[filter]="filterDeployable"
27+
></app-tri-state-button>
6028

61-
</td>
29+
<app-tri-state-button *ngIf="streamDefinitions?.items" class="toggle-all" [appRoles]="['ROLE_CREATE']"
30+
[items]="streamDefinitions.getItemsAsObservable()"
31+
(eventHandler)="undeployMultipleStreamDefinitions(streamDefinitions.items)"
32+
noneSelectedLabel="No stream selected to undeploy"
33+
oneSelectedLabel="Undeploy {selectedCount} selected stream"
34+
manySelectedLabel="Undeploy {selectedCount} selected streams"
35+
allSelectedLabel="Undeploy all {selectedCount} selected streams"
36+
icon="stop"
37+
[filter]="filterUndeployable"
38+
></app-tri-state-button>
6239

63-
</tr>
64-
</table>
65-
</div>
40+
<app-tri-state-button *ngIf="streamDefinitions?.items" class="toggle-all" [appRoles]="['ROLE_CREATE']"
41+
[items]="streamDefinitions.getItemsAsObservable()"
42+
(eventHandler)="destroyMultipleStreams(streamDefinitions.items)"
43+
noneSelectedLabel="No stream selected to destroy"
44+
oneSelectedLabel="Destroy {selectedCount} selected stream"
45+
manySelectedLabel="Destroy {selectedCount} selected streams"
46+
allSelectedLabel="Destroy all {selectedCount} selected streams"
47+
icon="remove"
48+
></app-tri-state-button>
49+
</div>
50+
<div class="col-md-5 text-right" style="padding-left: 0;">
51+
<label *ngIf="streamDefinitions" class="control">
52+
<input type="text" class="input" placeholder="Filter definitions" [(ngModel)]="streamDefinitions.filter">
53+
</label>
54+
<button *ngIf="streamDefinitions" type="button" (click)="loadStreamDefinitions()"
55+
class="btn btn-default">
56+
<span class="glyphicon glyphicon-refresh"></span></button>
6657
</div>
6758
</div>
6859
<div *ngIf="!streamDefinitions">No streams available.</div>

‎ui/src/app/tasks/task-definitions/task-definitions.component.html

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,20 @@
1+
2+
<ng-template [ngBusy]="{busy: busy, wrapperClass: 'ng-busy ng-busy-no-margin', minDuration: 2000}"></ng-template>
13
<div class="row">
2-
<div class="col-md-24">
3-
<div class="col-md-24 table-filter">
4-
<table class="col-lg-24 tab-content-header" [ngBusy]="busy">
5-
<tr>
6-
<td class="col-xs-12">
7-
<button type="button" [appRoles]="['ROLE_CREATE']" (click)="bulkDefineTasks()"
8-
class="btn btn-default">
9-
<span class="glyphicon glyphicon-import"></span>
10-
<span class="hidden-xs">Bulk Define Tasks</span>
11-
</button>
12-
</td>
13-
<td>
14-
<label *ngIf="taskDefinitions" class="control">Filter Task Definitions
15-
<input type="text" class="input" placeholder="Filter definitions" [(ngModel)]="taskDefinitions.filter">
16-
</label>
17-
<button *ngIf="taskDefinitions" type="button" (click)="loadTaskDefinitions()"
18-
class="btn btn-default">
19-
<span class="glyphicon glyphicon-refresh"></span></button>
20-
</td>
21-
</tr>
22-
</table>
23-
</div>
4+
<div class="col-md-19">
5+
<button type="button" [appRoles]="['ROLE_CREATE']" (click)="bulkDefineTasks()"
6+
class="btn btn-default">
7+
<span class="glyphicon glyphicon-import"></span>
8+
<span class="hidden-xs">Bulk Define Tasks</span>
9+
</button>
10+
</div>
11+
<div class="col-md-5 text-right" style="padding-left: 0;">
12+
<label *ngIf="taskDefinitions" class="control">
13+
<input type="text" class="input" placeholder="Filter definitions" [(ngModel)]="taskDefinitions.filter">
14+
</label>
15+
<button *ngIf="taskDefinitions" type="button" (click)="loadTaskDefinitions()"
16+
class="btn btn-default">
17+
<span class="glyphicon glyphicon-refresh"></span></button>
2418
</div>
2519
</div>
2620
<div *ngIf="!taskDefinitions">No tasks available.</div>

‎ui/src/app/tasks/task-executions/task-executions.component.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@ <h1 [ngBusy]="busy">Task Executions</h1>
33
This section lists all the available task executions.
44
</p>
55

6+
<div class="row">
7+
<div class="col-md-24 text-right">
8+
<button id="refreshTaskExecutionsButton" type="button" (click)="loadTaskExecutions()"
9+
class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span></button>
10+
</div>
11+
</div>
612
<div *ngIf="!taskExecutions">No task executions available.</div>
713
<table *ngIf="taskExecutions?.items" class="table table-hover">
814
<thead>

‎ui/src/styles.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,11 @@ body {
9494
margin-top: -20px;
9595
}
9696

97+
.ng-busy-no-margin {
98+
position: absolute;
99+
margin-top: 30px;
100+
}
101+
97102
.dataflow-main-container {
98103
background-color: #ffffff;
99104
padding-bottom: 2em;

0 commit comments

Comments
 (0)