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
ovh · May 27, 2021 · c356c5b · c356c5b
1 parent 99140eb
commit c356c5b
Show file tree

Hide file tree

Showing 16 changed files with 2,565 additions and 1,096 deletions.
diff --git a/ui/dashboard/package-lock.json b/ui/dashboard/package-lock.json
diff --git a/ui/dashboard/package.json b/ui/dashboard/package.json
@@ -13,16 +13,16 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "11.0.0",
-        "@angular/cdk": "11.0.0",
-        "@angular/common": "11.0.0",
-        "@angular/compiler": "11.0.0",
-        "@angular/core": "11.0.0",
-        "@angular/forms": "11.0.0",
-        "@angular/localize": "11.0.0",
-        "@angular/platform-browser": "11.0.0",
-        "@angular/platform-browser-dynamic": "11.0.0",
-        "@angular/router": "11.0.0",
+        "@angular/animations": "11.2.14",
+        "@angular/cdk": "11.2.13",
+        "@angular/common": "11.2.14",
+        "@angular/compiler": "11.2.14",
+        "@angular/core": "11.2.14",
+        "@angular/forms": "11.2.14",
+        "@angular/localize": "11.2.14",
+        "@angular/platform-browser": "11.2.14",
+        "@angular/platform-browser-dynamic": "11.2.14",
+        "@angular/router": "11.2.14",
         "@sentry/browser": "5.27.4",
         "@swimlane/ngx-charts": "16.0.0",
         "@types/lodash-es": "4.17.3",
@@ -34,7 +34,7 @@
         "lodash-es": "4.17.15",
         "moment": "2.29.1",
         "monaco-editor": "0.21.2",
-        "ng-zorro-antd": "10.1.2",
+        "ng-zorro-antd": "11.4.1",
         "rxjs": "6.6.3",
         "tslib": "2.0.3",
         "zone.js": "0.11.3"
@@ -43,9 +43,9 @@
         "@angular-builders/custom-webpack": "11.0.0",
         "@angular-devkit/build-angular": "0.1100.1",
         "@angular-devkit/build-ng-packagr": "0.1002.0",
-        "@angular/cli": "11.2.8",
-        "@angular/compiler-cli": "11.0.0",
-        "@angular/language-service": "11.0.0",
+        "@angular/cli": "11.2.13",
+        "@angular/compiler-cli": "11.2.14",
+        "@angular/language-service": "11.2.14",
         "@types/jasmine": "3.6.1",
         "@types/jasminewd2": "2.0.8",
         "@types/node": "14.14.7",
@@ -57,11 +57,11 @@
         "karma-coverage-istanbul-reporter": "3.0.3",
         "karma-jasmine": "4.0.1",
         "karma-jasmine-html-reporter": "1.5.4",
-        "ng-packagr": "11.0.2",
+        "ng-packagr": "11.2.4",
         "protractor": "7.0.0",
         "ts-node": "9.0.0",
         "tslint": "6.1.2",
-        "typescript": "4.0.5",
+        "typescript": "4.1.5",
         "webpack-bundle-analyzer": "4.1.0"
     }
 }
diff --git a/ui/dashboard/projects/utask-lib/package.json b/ui/dashboard/projects/utask-lib/package.json
@@ -3,7 +3,7 @@
     "version": "0.0.0",
     "peerDependencies": {
         "monaco-editor": "^0.21.2",
-        "ng-zorro-antd": "^10.1.2",
+        "ng-zorro-antd": "^11.0.0",
         "@angular/common": "^11.0.0",
         "@angular/core": "^11.0.0",
         "@angular/animations": "^11.0.0",

diff --git a/ui/dashboard/projects/utask-lib/src/lib/@components/steps-viewer/steps-viewer.component.ts b/ui/dashboard/projects/utask-lib/src/lib/@components/steps-viewer/steps-viewer.component.ts
@@ -18,6 +18,7 @@ import difference from 'lodash-es/difference';
 import Resolution from '../../@models/resolution.model';
 import Step from '../../@models/step.model';
 import { StepNodeComponent } from '../step-node/step-node.component';
+import isEqual from 'lodash-es/isEqual';
 
 interface Edge {
     v: string;
@@ -119,7 +120,7 @@ export class StepsViewerComponent implements AfterViewInit, OnChanges {
             this.item.g.setGraph({
                 nodesep: 70,
                 ranksep: 50,
-                rankdir: "TB",
+                rankdir: 'TB',
                 marginx: 20,
                 marginy: 20
             });
@@ -157,7 +158,7 @@ export class StepsViewerComponent implements AfterViewInit, OnChanges {
                     return selection.transition().duration(500);
                 };
                 this.draw(false);
-            } else {
+            } else if (!isEqual(diff.resolution.previousValue, diff.resolution.currentValue)) {
                 this.draw(true);
             }
         }
@@ -244,8 +245,8 @@ export class StepsViewerComponent implements AfterViewInit, OnChanges {
     }
 
     createNodeComponent(key: string, step: Step): ComponentRef<StepNodeComponent> {
-        let nodeComponentFactory = this.componentFactoryResolver.resolveComponentFactory(StepNodeComponent);
-        let componentRef = nodeComponentFactory.create(this.svg.parentInjector);
+        const nodeComponentFactory = this.componentFactoryResolver.resolveComponentFactory(StepNodeComponent);
+        const componentRef = nodeComponentFactory.create(this.svg.parentInjector);
         componentRef.instance.step = step;
         componentRef.instance.key = key;
         componentRef.instance.click.subscribe(v => this.selectStep(v));

diff --git a/ui/dashboard/projects/utask-lib/src/lib/@components/stepslist/stepslist.component.ts b/ui/dashboard/projects/utask-lib/src/lib/@components/stepslist/stepslist.component.ts
@@ -72,17 +72,21 @@ export class StepsListComponent implements OnChanges {
         }
     }
 
-    previewStepDetails(step: any) {
+    preview(title: string, item: any) {
         this._modal.create({
-            nzTitle: `Step - ${step.name}`,
+            nzTitle: title,
             nzContent: ModalApiYamlComponent,
             nzWidth: '80%',
             nzComponentParams: {
                 apiCall: () => {
                     return new Promise((resolve) => {
-                        JSToYaml.spacingStart = ' '.repeat(0);
-                        JSToYaml.spacing = ' '.repeat(4);
-                        resolve(JSToYaml.stringify(step).value);
+                        if (typeof (item) === 'string') {
+                            resolve(item);
+                        } else {
+                            JSToYaml.spacingStart = ' '.repeat(0);
+                            JSToYaml.spacing = ' '.repeat(4);
+                            resolve(JSToYaml.stringify(item).value);
+                        }
                     });
                 }
             }
@@ -115,9 +119,7 @@ export class StepsListComponent implements OnChanges {
                 apiCall: () => this._api.resolution.getStep(this.resolution.id, step.name).toPromise().then((d: any) => {
                     JSToYaml.spacingStart = ' '.repeat(0);
                     JSToYaml.spacing = ' '.repeat(4);
-                    return JSToYaml.stringify(
-                        omit(d, ['state', 'children_steps', 'children_steps_map', 'output', 'metadatas', 'tags', 'children', 'error', 'try_count', 'last_time', 'item'])
-                    ).value
+                    return JSToYaml.stringify(d).value;
                 }).catch(err => {
                     throw err;
                 }),
@@ -181,4 +183,12 @@ export class StepsListComponent implements OnChanges {
             return null;
         }));
     }
+
+    lineStyle(stepName: string) {
+        const state = this.states[this.resolution.steps[stepName].state];
+        return {
+            color: state?.fontColor ?? this.defaultState.fontColor,
+            'background-color': state?.color ?? this.defaultState.color
+        }
+    }
 }
diff --git a/ui/dashboard/projects/utask-lib/src/lib/@components/stepslist/stepslist.html b/ui/dashboard/projects/utask-lib/src/lib/@components/stepslist/stepslist.html
@@ -1,7 +1,10 @@
 <nz-select nzMode="tags" nzPlaceHolder="Filter steps" [(ngModel)]="filter.tags" (ngModelChange)="filterSteps()"
     [nzCustomTemplate]="multipleTemplate">
-    <nz-option *ngFor="let item of presentStates" [nzLabel]="item" [nzValue]="item">
-    </nz-option>
+    <ng-container *ngFor="let item of presentStates">
+        <nz-option [nzLabel]="item" [nzValue]="item">
+        </nz-option>
+    </ng-container>
+
     <ng-template #multipleTemplate let-item>
         <span *ngIf="item.nzValue.startsWith('State:')">
             <i nz-icon [nzType]="getIcon(item.nzValue.split(':')[1])"></i>
@@ -12,47 +15,45 @@
         </span>
     </ng-template>
 </nz-select>
+
+
 <div class="list">
-    <lib-utask-box *ngFor="let stepName of filteredStepNames"
-        [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)}">
-        <div app-box-header>{{resolution.steps[stepName].state}} - {{stepName}}
-            <nz-button-group nzSize="small">
-                <button type="button" nz-button [nzGhost]="true" title="View as code"
-                    (click)="previewStepDetails(resolution.steps[stepName]); $event.stopPropagation();"
-                    nzTooltipTitle="View as code" nz-tooltip><i nz-icon nzType="file-text"></i></button>
-                <button type="button" nz-button [nzGhost]="true" [disabled]="resolution.state != 'PAUSED'"
-                    (click)="updateStepState(resolution.steps[stepName]); $event.stopPropagation();"
-                    nzTooltipTitle="Edit step state" nz-tooltip><i nz-icon nzType="edit"></i></button>
-                <button type="button" nz-button [nzGhost]="true" [disabled]="resolution.state != 'PAUSED'"
-                    nzTooltipTitle="Edit step" nz-tooltip
-                    (click)="updateStep(resolution.steps[stepName]); $event.stopPropagation();"><i nz-icon
-                        nzType="form"></i></button>
-            </nz-button-group>
-        </div>
-        <div app-box-content>
-            <div *ngIf="resolution.steps[stepName].output">
-                Output:
-                <lib-utask-editor [ngModel]="JSON.stringify(resolution.steps[stepName].output, null, 4)"
-                    ngDefaultControl [ngModelOptions]="{standalone: true}" [config]="editorConfigPayload">
-                </lib-utask-editor>
-            </div>
-            <div *ngIf="resolution.steps[stepName].children">
-                Children:
-                <lib-utask-editor [ngModel]="JSON.stringify(resolution.steps[stepName].children, null, 4)"
-                    ngDefaultControl [ngModelOptions]="{standalone: true}" [config]="editorConfigChildren">
-                </lib-utask-editor>
-            </div>
-            <div *ngIf="resolution.steps[stepName].error">
-                <span *ngIf="resolution.steps[stepName].state !== 'DONE'">Error:</span>
-                <span *ngIf="resolution.steps[stepName].state === 'DONE'">Message:</span>
-                <lib-utask-editor [ngModel]="JSON.stringify(resolution.steps[stepName].error, null, 4)" ngDefaultControl
-                    [ngModelOptions]="{standalone: true}" [config]="editorConfigError">
-                </lib-utask-editor>
-            </div>
-            <div
-                *ngIf="resolution.steps[stepName].last_run && resolution.steps[stepName].last_run != '0001-01-01T00:00:00Z'">
-                Last run: <strong>{{resolution.steps[stepName].last_run | utaskFromNow}}</strong>
-            </div>
-        </div>
-    </lib-utask-box>
+    <nz-table nzTemplateMode nzSize="small">
+        <tbody>
+            <ng-container *ngFor="let stepName of filteredStepNames">
+                <tr
+                    [ngStyle]="lineStyle(stepName)">
+                    <td>{{stepName}}</td>
+                    <td style="text-align: right;padding-right: 8px;">
+                        <nz-button-group nzSize="small" nzType="default">
+                            <button type="button" nzType="default" nz-button [nzGhost]="true" title="View error"
+                                *ngIf="resolution.steps[stepName].error"
+                                (click)="preview('Step '+ resolution.steps[stepName].name, resolution.steps[stepName].error); $event.stopPropagation();"
+                                nzTooltipTitle="View error" nz-tooltip><i nz-icon nzType="warning"
+                                    nzTheme="outline"></i></button>
+
+                            <button type="button" nzType="default" nz-button [nzGhost]="true" title="View children"
+                                *ngIf="resolution.steps[stepName].children"
+                                (click)="preview('Children '+ resolution.steps[stepName].name, resolution.steps[stepName].children); $event.stopPropagation();"
+                                nzTooltipTitle="View children" nz-tooltip><i nz-icon nzType="partition"
+                                    nzTheme="outline"></i></button>
+
+                            <button type="button" nzType="default" nz-button [nzGhost]="true" title="View as code"
+                                (click)="preview('Step '+ resolution.steps[stepName].name, resolution.steps[stepName]); $event.stopPropagation();"
+                                nzTooltipTitle="View as code" nz-tooltip><i nz-icon nzType="file-text"></i></button>
+
+                            <button type="button" nzType="default" nz-button [nzGhost]="true"
+                                *ngIf="resolution.state == 'PAUSED'"
+                                (click)="updateStepState(resolution.steps[stepName]); $event.stopPropagation();"
+                                nzTooltipTitle="Edit step state" nz-tooltip><i nz-icon nzType="edit"></i></button>
+                            <button type="button" nzType="default" nz-button [nzGhost]="true"
+                                *ngIf="resolution.state == 'PAUSED'" nzTooltipTitle="Edit step" nz-tooltip
+                                (click)="updateStep(resolution.steps[stepName]); $event.stopPropagation();"><i nz-icon
+                                    nzType="form"></i></button>
+                        </nz-button-group>
+                    </td>
+                </tr>
+            </ng-container>
+        </tbody>
+    </nz-table>
 </div>
diff --git a/ui/dashboard/projects/utask-lib/src/lib/@components/stepslist/stepslist.sass b/ui/dashboard/projects/utask-lib/src/lib/@components/stepslist/stepslist.sass
@@ -4,15 +4,15 @@
 
   nz-select
     width: 100%
-    margin-top: 15px
+    margin-top: 10px
 
   .list
     overflow-y: auto
+    margin-top: 10px
     flex: 1
-
+    tr:hover td
+      color: #333
     lib-utask-box
       [app-box-header]
         nz-button-group
           float: right
-
-
diff --git a/ui/dashboard/projects/utask-lib/src/lib/@components/tasks-list/tasks-list.component.ts b/ui/dashboard/projects/utask-lib/src/lib/@components/tasks-list/tasks-list.component.ts
@@ -122,6 +122,7 @@ export class TasksListComponent implements OnInit, OnDestroy, OnChanges, AfterVi
     scroll = new Subject<void>();
     scrollSub: Subscription;
     registrerScroll = new Subject<ParamsListTasks>();
+    objectKeys = Object.keys;
 
     titleWidth: string;
 

diff --git a/ui/dashboard/projects/utask-lib/src/lib/@components/tasks-list/tasks-list.html b/ui/dashboard/projects/utask-lib/src/lib/@components/tasks-list/tasks-list.html
@@ -47,9 +47,11 @@
                     (nzCheckedChange)="clickCheckTask(item.id, $event)">
                 </td>
                 <td>
-                    <a [routerLink]="options.routingTaskPath+item.id" title="{{item.title}}">{{item.title}}</a>
+                    <a [routerLink]="options.routingTaskPath+item.id" [title]="item.title">{{item.title}}</a>
                     <br />
                     <small>{{item.id}}</small>
+                    <i class="tags" nz-icon nzType="tags" nzTheme="outline" [nzTooltipTitle]="tooltip" nz-tooltip
+                        *ngIf="item.tags"></i>
                 </td>
                 <td>
                     <lib-utask-task-status [task]="item"></lib-utask-task-status>
@@ -91,6 +93,16 @@
                         </ul>
                     </nz-dropdown-menu>
                 </td>
+                <ng-template #tooltip>
+                    <ng-container *ngIf="item.tags">
+                        Tags
+                        <ul>
+                            <ng-container *ngFor="let key of objectKeys(item.tags)">
+                                <li>{{key}}:{{item.tags[key]}}</li>
+                            </ng-container>
+                        </ul>
+                    </ng-container>
+                </ng-template>
             </tr>
             <tr *ngIf="index === tasks.length-1 && hasMore">
                 <td [nzAlign]="'center'" [attr.colspan]="options?.disableBulk ? 6 : 7">

diff --git a/ui/dashboard/projects/utask-lib/src/lib/@components/tasks-list/tasks-list.sass b/ui/dashboard/projects/utask-lib/src/lib/@components/tasks-list/tasks-list.sass
@@ -104,3 +104,6 @@ $body-color: $color-dark
   margin-bottom: 16px
   span
     margin-left: 8px
+
+.tags
+  margin-left: 8px
diff --git a/...ib/src/lib/@modals/modal-edit-resolution-step-state/modal-edit-resolution-step-state.html b/...ib/src/lib/@modals/modal-edit-resolution-step-state/modal-edit-resolution-step-state.html
@@ -11,10 +11,10 @@
     <lib-utask-error-message [data]="errors.submit" *ngIf="errors.submit && !loaders.submit"></lib-utask-error-message>
 </form>
 
-<ng-template [nzModalFooter]>
+<div *nzModalFooter>
     <form nz-form [formGroup]="modalForm" (submit)="submit()">
         <button type="button" nz-button nzType="warning" (click)="modal.triggerCancel()">Close</button>
         <button type="submit" nz-button nzType="primary"
             [disabled]="loaders.submit || errors.submit || modalForm.invalid || loaders.submit">Save</button>
     </form>
-</ng-template>
+</div>