Skip to content

Commit c356c5b

Browse files
simonmartinezsimonmartinez
authored
Sma fix UI lib modalfooter (#275)
* fix(utasklib): [nzModalFooter] -> *nzModalFooter Signed-off-by: Simon Martinez <[email protected]> * dashboard(fix): perf task view * fix(ui/dashboard): modal step state * fix(dashboard): hidden templates in task page * fix(ui) dependencies
1 parent 99140eb commit c356c5b

File tree

16 files changed

+2565
-1096
lines changed

16 files changed

+2565
-1096
lines changed

‎ui/dashboard/package-lock.json

+2,309-918
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/dashboard/package.json

+16-16
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@
1313
},
1414
"private": true,
1515
"dependencies": {
16-
"@angular/animations": "11.0.0",
17-
"@angular/cdk": "11.0.0",
18-
"@angular/common": "11.0.0",
19-
"@angular/compiler": "11.0.0",
20-
"@angular/core": "11.0.0",
21-
"@angular/forms": "11.0.0",
22-
"@angular/localize": "11.0.0",
23-
"@angular/platform-browser": "11.0.0",
24-
"@angular/platform-browser-dynamic": "11.0.0",
25-
"@angular/router": "11.0.0",
16+
"@angular/animations": "11.2.14",
17+
"@angular/cdk": "11.2.13",
18+
"@angular/common": "11.2.14",
19+
"@angular/compiler": "11.2.14",
20+
"@angular/core": "11.2.14",
21+
"@angular/forms": "11.2.14",
22+
"@angular/localize": "11.2.14",
23+
"@angular/platform-browser": "11.2.14",
24+
"@angular/platform-browser-dynamic": "11.2.14",
25+
"@angular/router": "11.2.14",
2626
"@sentry/browser": "5.27.4",
2727
"@swimlane/ngx-charts": "16.0.0",
2828
"@types/lodash-es": "4.17.3",
@@ -34,7 +34,7 @@
3434
"lodash-es": "4.17.15",
3535
"moment": "2.29.1",
3636
"monaco-editor": "0.21.2",
37-
"ng-zorro-antd": "10.1.2",
37+
"ng-zorro-antd": "11.4.1",
3838
"rxjs": "6.6.3",
3939
"tslib": "2.0.3",
4040
"zone.js": "0.11.3"
@@ -43,9 +43,9 @@
4343
"@angular-builders/custom-webpack": "11.0.0",
4444
"@angular-devkit/build-angular": "0.1100.1",
4545
"@angular-devkit/build-ng-packagr": "0.1002.0",
46-
"@angular/cli": "11.2.8",
47-
"@angular/compiler-cli": "11.0.0",
48-
"@angular/language-service": "11.0.0",
46+
"@angular/cli": "11.2.13",
47+
"@angular/compiler-cli": "11.2.14",
48+
"@angular/language-service": "11.2.14",
4949
"@types/jasmine": "3.6.1",
5050
"@types/jasminewd2": "2.0.8",
5151
"@types/node": "14.14.7",
@@ -57,11 +57,11 @@
5757
"karma-coverage-istanbul-reporter": "3.0.3",
5858
"karma-jasmine": "4.0.1",
5959
"karma-jasmine-html-reporter": "1.5.4",
60-
"ng-packagr": "11.0.2",
60+
"ng-packagr": "11.2.4",
6161
"protractor": "7.0.0",
6262
"ts-node": "9.0.0",
6363
"tslint": "6.1.2",
64-
"typescript": "4.0.5",
64+
"typescript": "4.1.5",
6565
"webpack-bundle-analyzer": "4.1.0"
6666
}
6767
}

‎ui/dashboard/projects/utask-lib/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.0.0",
44
"peerDependencies": {
55
"monaco-editor": "^0.21.2",
6-
"ng-zorro-antd": "^10.1.2",
6+
"ng-zorro-antd": "^11.0.0",
77
"@angular/common": "^11.0.0",
88
"@angular/core": "^11.0.0",
99
"@angular/animations": "^11.0.0",

‎ui/dashboard/projects/utask-lib/src/lib/@components/steps-viewer/steps-viewer.component.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import difference from 'lodash-es/difference';
1818
import Resolution from '../../@models/resolution.model';
1919
import Step from '../../@models/step.model';
2020
import { StepNodeComponent } from '../step-node/step-node.component';
21+
import isEqual from 'lodash-es/isEqual';
2122

2223
interface Edge {
2324
v: string;
@@ -119,7 +120,7 @@ export class StepsViewerComponent implements AfterViewInit, OnChanges {
119120
this.item.g.setGraph({
120121
nodesep: 70,
121122
ranksep: 50,
122-
rankdir: "TB",
123+
rankdir: 'TB',
123124
marginx: 20,
124125
marginy: 20
125126
});
@@ -157,7 +158,7 @@ export class StepsViewerComponent implements AfterViewInit, OnChanges {
157158
return selection.transition().duration(500);
158159
};
159160
this.draw(false);
160-
} else {
161+
} else if (!isEqual(diff.resolution.previousValue, diff.resolution.currentValue)) {
161162
this.draw(true);
162163
}
163164
}
@@ -244,8 +245,8 @@ export class StepsViewerComponent implements AfterViewInit, OnChanges {
244245
}
245246

246247
createNodeComponent(key: string, step: Step): ComponentRef<StepNodeComponent> {
247-
let nodeComponentFactory = this.componentFactoryResolver.resolveComponentFactory(StepNodeComponent);
248-
let componentRef = nodeComponentFactory.create(this.svg.parentInjector);
248+
const nodeComponentFactory = this.componentFactoryResolver.resolveComponentFactory(StepNodeComponent);
249+
const componentRef = nodeComponentFactory.create(this.svg.parentInjector);
249250
componentRef.instance.step = step;
250251
componentRef.instance.key = key;
251252
componentRef.instance.click.subscribe(v => this.selectStep(v));

‎ui/dashboard/projects/utask-lib/src/lib/@components/stepslist/stepslist.component.ts

+18-8
Original file line numberDiff line numberDiff line change
@@ -72,17 +72,21 @@ export class StepsListComponent implements OnChanges {
7272
}
7373
}
7474

75-
previewStepDetails(step: any) {
75+
preview(title: string, item: any) {
7676
this._modal.create({
77-
nzTitle: `Step - ${step.name}`,
77+
nzTitle: title,
7878
nzContent: ModalApiYamlComponent,
7979
nzWidth: '80%',
8080
nzComponentParams: {
8181
apiCall: () => {
8282
return new Promise((resolve) => {
83-
JSToYaml.spacingStart = ' '.repeat(0);
84-
JSToYaml.spacing = ' '.repeat(4);
85-
resolve(JSToYaml.stringify(step).value);
83+
if (typeof (item) === 'string') {
84+
resolve(item);
85+
} else {
86+
JSToYaml.spacingStart = ' '.repeat(0);
87+
JSToYaml.spacing = ' '.repeat(4);
88+
resolve(JSToYaml.stringify(item).value);
89+
}
8690
});
8791
}
8892
}
@@ -115,9 +119,7 @@ export class StepsListComponent implements OnChanges {
115119
apiCall: () => this._api.resolution.getStep(this.resolution.id, step.name).toPromise().then((d: any) => {
116120
JSToYaml.spacingStart = ' '.repeat(0);
117121
JSToYaml.spacing = ' '.repeat(4);
118-
return JSToYaml.stringify(
119-
omit(d, ['state', 'children_steps', 'children_steps_map', 'output', 'metadatas', 'tags', 'children', 'error', 'try_count', 'last_time', 'item'])
120-
).value
122+
return JSToYaml.stringify(d).value;
121123
}).catch(err => {
122124
throw err;
123125
}),
@@ -181,4 +183,12 @@ export class StepsListComponent implements OnChanges {
181183
return null;
182184
}));
183185
}
186+
187+
lineStyle(stepName: string) {
188+
const state = this.states[this.resolution.steps[stepName].state];
189+
return {
190+
color: state?.fontColor ?? this.defaultState.fontColor,
191+
'background-color': state?.color ?? this.defaultState.color
192+
}
193+
}
184194
}

‎ui/dashboard/projects/utask-lib/src/lib/@components/stepslist/stepslist.html

+45-44
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<nz-select nzMode="tags" nzPlaceHolder="Filter steps" [(ngModel)]="filter.tags" (ngModelChange)="filterSteps()"
22
[nzCustomTemplate]="multipleTemplate">
3-
<nz-option *ngFor="let item of presentStates" [nzLabel]="item" [nzValue]="item">
4-
</nz-option>
3+
<ng-container *ngFor="let item of presentStates">
4+
<nz-option [nzLabel]="item" [nzValue]="item">
5+
</nz-option>
6+
</ng-container>
7+
58
<ng-template #multipleTemplate let-item>
69
<span *ngIf="item.nzValue.startsWith('State:')">
710
<i nz-icon [nzType]="getIcon(item.nzValue.split(':')[1])"></i>
@@ -12,47 +15,45 @@
1215
</span>
1316
</ng-template>
1417
</nz-select>
18+
19+
1520
<div class="list">
16-
<lib-utask-box *ngFor="let stepName of filteredStepNames"
17-
[header]="{openable: resolution.steps[stepName].state !== 'TODO', init: false, class: 'primary', color: (states[resolution.steps[stepName].state] ? states[resolution.steps[stepName].state].color : defaultState.color), fontColor: (states[resolution.steps[stepName].state] ? states[resolution.steps[stepName].state].fontColor : defaultState.fontColor)}">
18-
<div app-box-header>{{resolution.steps[stepName].state}} - {{stepName}}
19-
<nz-button-group nzSize="small">
20-
<button type="button" nz-button [nzGhost]="true" title="View as code"
21-
(click)="previewStepDetails(resolution.steps[stepName]); $event.stopPropagation();"
22-
nzTooltipTitle="View as code" nz-tooltip><i nz-icon nzType="file-text"></i></button>
23-
<button type="button" nz-button [nzGhost]="true" [disabled]="resolution.state != 'PAUSED'"
24-
(click)="updateStepState(resolution.steps[stepName]); $event.stopPropagation();"
25-
nzTooltipTitle="Edit step state" nz-tooltip><i nz-icon nzType="edit"></i></button>
26-
<button type="button" nz-button [nzGhost]="true" [disabled]="resolution.state != 'PAUSED'"
27-
nzTooltipTitle="Edit step" nz-tooltip
28-
(click)="updateStep(resolution.steps[stepName]); $event.stopPropagation();"><i nz-icon
29-
nzType="form"></i></button>
30-
</nz-button-group>
31-
</div>
32-
<div app-box-content>
33-
<div *ngIf="resolution.steps[stepName].output">
34-
Output:
35-
<lib-utask-editor [ngModel]="JSON.stringify(resolution.steps[stepName].output, null, 4)"
36-
ngDefaultControl [ngModelOptions]="{standalone: true}" [config]="editorConfigPayload">
37-
</lib-utask-editor>
38-
</div>
39-
<div *ngIf="resolution.steps[stepName].children">
40-
Children:
41-
<lib-utask-editor [ngModel]="JSON.stringify(resolution.steps[stepName].children, null, 4)"
42-
ngDefaultControl [ngModelOptions]="{standalone: true}" [config]="editorConfigChildren">
43-
</lib-utask-editor>
44-
</div>
45-
<div *ngIf="resolution.steps[stepName].error">
46-
<span *ngIf="resolution.steps[stepName].state !== 'DONE'">Error:</span>
47-
<span *ngIf="resolution.steps[stepName].state === 'DONE'">Message:</span>
48-
<lib-utask-editor [ngModel]="JSON.stringify(resolution.steps[stepName].error, null, 4)" ngDefaultControl
49-
[ngModelOptions]="{standalone: true}" [config]="editorConfigError">
50-
</lib-utask-editor>
51-
</div>
52-
<div
53-
*ngIf="resolution.steps[stepName].last_run && resolution.steps[stepName].last_run != '0001-01-01T00:00:00Z'">
54-
Last run: <strong>{{resolution.steps[stepName].last_run | utaskFromNow}}</strong>
55-
</div>
56-
</div>
57-
</lib-utask-box>
21+
<nz-table nzTemplateMode nzSize="small">
22+
<tbody>
23+
<ng-container *ngFor="let stepName of filteredStepNames">
24+
<tr
25+
[ngStyle]="lineStyle(stepName)">
26+
<td>{{stepName}}</td>
27+
<td style="text-align: right;padding-right: 8px;">
28+
<nz-button-group nzSize="small" nzType="default">
29+
<button type="button" nzType="default" nz-button [nzGhost]="true" title="View error"
30+
*ngIf="resolution.steps[stepName].error"
31+
(click)="preview('Step '+ resolution.steps[stepName].name, resolution.steps[stepName].error); $event.stopPropagation();"
32+
nzTooltipTitle="View error" nz-tooltip><i nz-icon nzType="warning"
33+
nzTheme="outline"></i></button>
34+
35+
<button type="button" nzType="default" nz-button [nzGhost]="true" title="View children"
36+
*ngIf="resolution.steps[stepName].children"
37+
(click)="preview('Children '+ resolution.steps[stepName].name, resolution.steps[stepName].children); $event.stopPropagation();"
38+
nzTooltipTitle="View children" nz-tooltip><i nz-icon nzType="partition"
39+
nzTheme="outline"></i></button>
40+
41+
<button type="button" nzType="default" nz-button [nzGhost]="true" title="View as code"
42+
(click)="preview('Step '+ resolution.steps[stepName].name, resolution.steps[stepName]); $event.stopPropagation();"
43+
nzTooltipTitle="View as code" nz-tooltip><i nz-icon nzType="file-text"></i></button>
44+
45+
<button type="button" nzType="default" nz-button [nzGhost]="true"
46+
*ngIf="resolution.state == 'PAUSED'"
47+
(click)="updateStepState(resolution.steps[stepName]); $event.stopPropagation();"
48+
nzTooltipTitle="Edit step state" nz-tooltip><i nz-icon nzType="edit"></i></button>
49+
<button type="button" nzType="default" nz-button [nzGhost]="true"
50+
*ngIf="resolution.state == 'PAUSED'" nzTooltipTitle="Edit step" nz-tooltip
51+
(click)="updateStep(resolution.steps[stepName]); $event.stopPropagation();"><i nz-icon
52+
nzType="form"></i></button>
53+
</nz-button-group>
54+
</td>
55+
</tr>
56+
</ng-container>
57+
</tbody>
58+
</nz-table>
5859
</div>

‎ui/dashboard/projects/utask-lib/src/lib/@components/stepslist/stepslist.sass

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44

55
nz-select
66
width: 100%
7-
margin-top: 15px
7+
margin-top: 10px
88

99
.list
1010
overflow-y: auto
11+
margin-top: 10px
1112
flex: 1
12-
13+
tr:hover td
14+
color: #333
1315
lib-utask-box
1416
[app-box-header]
1517
nz-button-group
1618
float: right
17-
18-

‎ui/dashboard/projects/utask-lib/src/lib/@components/tasks-list/tasks-list.component.ts

+1
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ export class TasksListComponent implements OnInit, OnDestroy, OnChanges, AfterVi
122122
scroll = new Subject<void>();
123123
scrollSub: Subscription;
124124
registrerScroll = new Subject<ParamsListTasks>();
125+
objectKeys = Object.keys;
125126

126127
titleWidth: string;
127128

‎ui/dashboard/projects/utask-lib/src/lib/@components/tasks-list/tasks-list.html

+13-1
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,11 @@
4747
(nzCheckedChange)="clickCheckTask(item.id, $event)">
4848
</td>
4949
<td>
50-
<a [routerLink]="options.routingTaskPath+item.id" title="{{item.title}}">{{item.title}}</a>
50+
<a [routerLink]="options.routingTaskPath+item.id" [title]="item.title">{{item.title}}</a>
5151
<br />
5252
<small>{{item.id}}</small>
53+
<i class="tags" nz-icon nzType="tags" nzTheme="outline" [nzTooltipTitle]="tooltip" nz-tooltip
54+
*ngIf="item.tags"></i>
5355
</td>
5456
<td>
5557
<lib-utask-task-status [task]="item"></lib-utask-task-status>
@@ -91,6 +93,16 @@
9193
</ul>
9294
</nz-dropdown-menu>
9395
</td>
96+
<ng-template #tooltip>
97+
<ng-container *ngIf="item.tags">
98+
Tags
99+
<ul>
100+
<ng-container *ngFor="let key of objectKeys(item.tags)">
101+
<li>{{key}}:{{item.tags[key]}}</li>
102+
</ng-container>
103+
</ul>
104+
</ng-container>
105+
</ng-template>
94106
</tr>
95107
<tr *ngIf="index === tasks.length-1 && hasMore">
96108
<td [nzAlign]="'center'" [attr.colspan]="options?.disableBulk ? 6 : 7">

‎ui/dashboard/projects/utask-lib/src/lib/@components/tasks-list/tasks-list.sass

+3
Original file line numberDiff line numberDiff line change
@@ -104,3 +104,6 @@ $body-color: $color-dark
104104
margin-bottom: 16px
105105
span
106106
margin-left: 8px
107+
108+
.tags
109+
margin-left: 8px

‎ui/dashboard/projects/utask-lib/src/lib/@modals/modal-edit-resolution-step-state/modal-edit-resolution-step-state.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
<lib-utask-error-message [data]="errors.submit" *ngIf="errors.submit && !loaders.submit"></lib-utask-error-message>
1212
</form>
1313

14-
<ng-template [nzModalFooter]>
14+
<div *nzModalFooter>
1515
<form nz-form [formGroup]="modalForm" (submit)="submit()">
1616
<button type="button" nz-button nzType="warning" (click)="modal.triggerCancel()">Close</button>
1717
<button type="submit" nz-button nzType="primary"
1818
[disabled]="loaders.submit || errors.submit || modalForm.invalid || loaders.submit">Save</button>
1919
</form>
20-
</ng-template>
20+
</div>

0 commit comments

Comments
 (0)