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

Commit fc6bdb5

Browse files
oodamienoodamien
committed
App Properties: add message if more than 50 props
Resolves #879
1 parent 2698737 commit fc6bdb5

File tree

4 files changed

+79
-31
lines changed

4 files changed

+79
-31
lines changed

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

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -58,40 +58,53 @@
5858
<strong>Version</strong>: {{ detailedAppRegistration.version }}
5959
</div>
6060
</div>
61-
<div *ngIf="detailedAppRegistration?.options && detailedAppRegistration?.options.length > 0">
62-
<table id="table-properties" class="table table-hover" *ngIf="detailedAppRegistration?.options">
63-
<thead>
64-
<tr>
65-
<th>
66-
<app-sort id="sort-name" [indeterminate]="true" (change)="applySort($event)" [value]="'name'"
67-
[sort]="sort">
68-
Property
69-
</app-sort>
70-
</th>
71-
<th>Description</th>
72-
</tr>
73-
</thead>
74-
<tbody>
75-
<tr *ngFor="let property of detailedAppRegistration.options | orderby:sort.sort:sort.order">
76-
<td>
77-
<strong>{{ property.name }}</strong>
78-
<div *ngIf="property.isDeprecated">
79-
<span class="label label-warning">Deprecation level: {{ property.deprecation.level }}</span>
80-
</div>
81-
</td>
82-
<td>
83-
<p>{{ property.description ? property.description : '(No Description Available)' }}</p>
84-
<p class="type-block"><code>{{ property.type }}</code> <span
85-
*ngIf="property.defaultValue">(Default value: <code>{{ property.defaultValue }}</code>)</span></p>
86-
</td>
87-
</tr>
88-
</tbody>
89-
</table>
61+
62+
<div *ngIf="tooManyProperties && !showProperties" class="dataflow-alert dataflow-alert-info">
63+
<p style="padding-bottom: 5px;">
64+
There are <strong>more than 50 properties</strong> to display, the UI can be slow.<br>Do you want to
65+
<strong>display all the properties</strong> ?
66+
</p>
67+
<button class="btn btn-primary" (click)="showProperties = true">Show all the properties</button>
68+
</div>
69+
<div *ngIf="showProperties">
70+
71+
<div *ngIf="detailedAppRegistration?.options && detailedAppRegistration?.options.length > 0">
72+
<table id="table-properties" class="table table-hover" *ngIf="detailedAppRegistration?.options">
73+
<thead>
74+
<tr>
75+
<th>
76+
<app-sort id="sort-name" [indeterminate]="true" (change)="applySort($event)" [value]="'name'"
77+
[sort]="sort">
78+
Property
79+
</app-sort>
80+
</th>
81+
<th>Description</th>
82+
</tr>
83+
</thead>
84+
<tbody>
85+
<tr *ngFor="let property of detailedAppRegistration.options | orderby:sort.sort:sort.order">
86+
<td>
87+
<strong>{{ property.name }}</strong>
88+
<div *ngIf="property.isDeprecated">
89+
<span class="label label-warning">Deprecation level: {{ property.deprecation.level }}</span>
90+
</div>
91+
</td>
92+
<td>
93+
<p>{{ property.description ? property.description : '(No Description Available)' }}</p>
94+
<p class="type-block"><code>{{ property.type }}</code> <span
95+
*ngIf="property.defaultValue">(Default value: <code>{{ property.defaultValue }}</code>)</span></p>
96+
</td>
97+
</tr>
98+
</tbody>
99+
</table>
100+
</div>
90101
</div>
102+
91103
<div *ngIf="!(detailedAppRegistration?.options && detailedAppRegistration?.options.length > 0)"
92104
class="dataflow-alert">
93105
No properties available.
94106
</div>
107+
95108
</div>
96109
</div>
97110
</app-page>

‎ui/src/app/apps/app-details/app-details.component.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,16 @@ export class AppDetailsComponent implements OnInit, OnDestroy {
7070
order: ''
7171
};
7272

73+
/**
74+
* Display the properties
75+
*/
76+
showProperties = true;
77+
78+
/**
79+
* State too Many properties
80+
*/
81+
tooManyProperties = false;
82+
7383
/**
7484
* Constructor
7585
*
@@ -142,6 +152,8 @@ export class AppDetailsComponent implements OnInit, OnDestroy {
142152
const busy = this.appsService.getAppInfo(this.application.type, this.application.name, version)
143153
.pipe(takeUntil(this.ngUnsubscribe$))
144154
.subscribe((detailed: DetailedAppRegistration) => {
155+
this.tooManyProperties = (detailed.options.length > 50);
156+
this.showProperties = !this.tooManyProperties;
145157
this.detailedAppRegistration = detailed;
146158
},
147159
error => {

‎ui/src/app/shared/flo/properties/properties-dialog.component.html

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,29 @@ <h4 class="modal-title pull-left">{{ title }}</h4>
55
</button>
66
</div>
77
<form name="app-properties" (submit)="handleOk()" class="modal-body app-properties">
8-
<properties-group *ngIf="propertiesGroupModel" [propertiesGroupModel]="propertiesGroupModel"
9-
[form]="propertiesFormGroup" [ngBusy]="busy"></properties-group>
8+
<div *ngIf="propertiesGroupModel && !propertiesGroupModel.isLoading">
9+
10+
<div *ngIf="propertiesGroupModel.getControlsModels().length > 50 && !showProperties"
11+
class="dataflow-alert dataflow-alert-info" style="display: block">
12+
<p style="padding-bottom: 5px;">
13+
There are <strong>more than 50 properties</strong> to display, the UI can be slow.<br>Do you want to
14+
<strong>display all the properties</strong> ?
15+
</p>
16+
<button class="btn btn-primary" (click)="showProperties = true">Show all the properties</button>
17+
</div>
18+
19+
<div *ngIf="propertiesGroupModel.getControlsModels().length < 50 || showProperties">
20+
21+
<properties-group *ngIf="propertiesGroupModel" [propertiesGroupModel]="propertiesGroupModel"
22+
[form]="propertiesFormGroup" [ngBusy]="busy"></properties-group>
23+
</div>
24+
</div>
25+
26+
<div *ngIf="!propertiesGroupModel || propertiesGroupModel.isLoading"
27+
style="padding-bottom: 20px;padding-left:10px;padding-top: 10px;">
28+
<app-loader></app-loader>
29+
</div>
30+
1031
<div class="modal-footer">
1132
<button type="button" class="btn btn-default" (click)="handleCancel()">Close</button>
1233
<button type="submit" class="btn btn-primary" [disabled]="okDisabled">OK</button>

‎ui/src/app/shared/flo/properties/properties-dialog.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ export class PropertiesDialogComponent implements OnInit {
2828

2929
busy: Subscription;
3030

31+
showProperties = false;
32+
3133
constructor(private bsModalRef: BsModalRef
3234
) {
3335
this.propertiesFormGroup = new FormGroup({});

0 commit comments

Comments
 (0)