fix: display HTTP error info (#328)

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

@@ -1,7 +1,7 @@
 <nz-collapse nzAccordion class="box {{headerConfig.class}}" [class.custom-color]="customStyle && customStylePanel"
     [ngStyle]="customStyle">
     <nz-collapse-panel #panel [nzHeader]="boxHeader" [nzActive]="display" [ngStyle]="customStylePanel"
-        [nzExpandedIcon]="expandedIcon" [nzShowArrow]="headerConfig.openable">
+        [nzExpandedIcon]="expandedIcon" [nzShowArrow]="headerConfig.openable" [nzExtra]="extraTpl">
         <ng-content select="[app-box-content]"></ng-content>
     </nz-collapse-panel>
     <ng-template #expandedIcon let-active>
@@ -13,4 +13,9 @@
             <ng-content select="[app-box-header]"></ng-content>
         </div>
     </ng-template>
+    <ng-template #extraTpl>
+        <div class="header" [ngStyle]="customStyleHeader">
+            <ng-content select="[app-box-header-extra]"></ng-content>
+        </div>
+    </ng-template>
 </nz-collapse>

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

@@ -61,5 +61,6 @@ $color-warning: #fd7e14
         .ant-collapse-content
             border-color: $color-warning
 
-.box .header
-    display: inline-block
+.header
+    display: inline-block
+

ui/dashboard/projects/utask-lib/src/lib/@components/error-message/error-message.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges } from '@angular/core';
 import get from 'lodash-es/get';
 import isString from 'lodash-es/isString';
 
@@ -7,20 +8,29 @@ import isString from 'lodash-es/isString';
     template: `
         <nz-alert nzType="error" [nzMessage]="text"></nz-alert>
     `,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ErrorMessageComponent implements OnChanges {
-    @Input() data: any;
+    @Input() data: HttpErrorResponse | string;
     text = '';
 
-    constructor() { }
+    constructor(
+        private _cd: ChangeDetectorRef
+    ) { }
 
     ngOnChanges() {
+        this.text = 'An error just occured, please retry';
+        if (!this.data) {
+            this._cd.markForCheck();
+            return;
+        }
         if (isString(this.data)) {
             this.text = this.data;
-        } else if (this.data?.message != "") {
+        } else if (this.data.error && this.data.error.error) {
+            this.text = this.data.error.error;
+        } else if (this.data.message) {
             this.text = this.data.message;
-        } else {
-            this.text = get(this.data, 'error.error', (get(this.data, 'error', 'An error just occured, please retry')));
         }
+        this._cd.markForCheck();
     }
 }

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

@@ -1,12 +1,12 @@
 import {
     Component,
     ViewChild,
-    AfterViewInit,
     OnChanges,
     Input,
     Output,
     EventEmitter,
-    ChangeDetectorRef
+    ChangeDetectorRef,
+    ChangeDetectionStrategy
 } from '@angular/core';
 import keys from 'lodash-es/keys';
 import Resolution from '../../@models/resolution.model';
@@ -15,9 +15,10 @@ import { NzGraphComponent, NzGraphData, NzGraphLayoutConfig, NzGraphZoomDirectiv
 @Component({
     selector: 'lib-utask-steps-viewer',
     templateUrl: './steps-viewer.html',
-    styleUrls: ['./steps-viewer.sass']
+    styleUrls: ['./steps-viewer.sass'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class StepsViewerComponent implements AfterViewInit, OnChanges {
+export class StepsViewerComponent implements OnChanges {
     // Inputs & Outputs
     @Input() resolution: Resolution;
     @Output() public select: EventEmitter<any> = new EventEmitter();
@@ -37,13 +38,9 @@ export class StepsViewerComponent implements AfterViewInit, OnChanges {
     };
     zoom = 0.5;
 
-    constructor(private _cd: ChangeDetectorRef,) {
-
-    }
-
-    ngAfterViewInit() {
-
-    }
+    constructor(
+        private _cd: ChangeDetectorRef
+    ) { }
 
     ngOnChanges() {
         this.clear();

ui/dashboard/projects/utask-lib/src/lib/@components/steps-viewer/steps-viewer.html

@@ -1,27 +1,22 @@
-<div oncontextmenu="return false;">
-    <button type="button" nz-button nzType="primary" nzSize="large" (click)="fit()"><i nz-icon
-            nzType="aim"></i></button>
+<button type="button" nz-button nzType="primary" nzSize="large" (click)="fit()"><i nz-icon nzType="aim"></i></button>
 
-    <nz-graph nz-graph-zoom [nzGraphData]="graphData" [nzAutoSize]="true" [nzRankDirection]="rankDirection"
-        (nzGraphInitialized)="graphInitialized($event)" [nzGraphLayoutConfig]="layoutConfig">
-        <ng-container *nzGraphNode="let node">
-            <foreignObject x="0" y="0" [attr.width]="node.width" height="50">
-                <xhtml:div class="graph-node leaf-node {{node.attr.class}}" (click)="selectNode(node.attr.step)">
-                    <lib-utask-step-node [key]="node.name" [step]="node.attr.step"></lib-utask-step-node>
-                </xhtml:div>
-            </foreignObject>
-        </ng-container>
-
-        <ng-container *nzGraphEdge="let edge">
-            <svg:g class="edge {{edge.classes}}">
-                <path [attr.marker-end]="edge.markerEnd"></path>
-                <text text-anchor="middle" dy="10" class="nz-graph-edge-text">
-                    <textPath startOffset="50%" [attr.href]="'#'+edge.v+'--'+edge.w">
-                        {{edge.label}}
-                    </textPath>
-                </text>
-            </svg:g>
-        </ng-container>
-    </nz-graph>
-
-</div>
+<nz-graph nz-graph-zoom [nzGraphData]="graphData" [nzAutoSize]="true" [nzRankDirection]="rankDirection"
+    (nzGraphInitialized)="graphInitialized($event)" [nzGraphLayoutConfig]="layoutConfig">
+    <ng-container *nzGraphNode="let node">
+        <foreignObject x="0" y="0" [attr.width]="node.width" height="50">
+            <xhtml:div class="graph-node leaf-node {{node.attr.class}}" (click)="selectNode(node.attr.step)">
+                <lib-utask-step-node [key]="node.name" [step]="node.attr.step"></lib-utask-step-node>
+            </xhtml:div>
+        </foreignObject>
+    </ng-container>
+    <ng-container *nzGraphEdge="let edge">
+        <svg:g class="edge {{edge.classes}}">
+            <path [attr.marker-end]="edge.markerEnd"></path>
+            <text text-anchor="middle" dy="10" class="nz-graph-edge-text">
+                <textPath startOffset="50%" [attr.href]="'#'+edge.v+'--'+edge.w">
+                    {{edge.label}}
+                </textPath>
+            </text>
+        </svg:g>
+    </ng-container>
+</nz-graph>

ui/dashboard/projects/utask-lib/src/lib/@components/steps-viewer/steps-viewer.sass

@@ -4,13 +4,11 @@
     height: 100%
     position: relative
 
-div
-    height: 100%
-
 nz-graph
     width: 100%
     height: 100%
     display: block
+    background-color: inherit
 
 .graph-node
     cursor: pointer

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

@@ -16,44 +16,28 @@
     </ng-template>
 </nz-select>
 
-
-<div class="list">
-    <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>
+<nz-list nzSize="small" class="list">
+    <nz-list-item *ngFor="let stepName of filteredStepNames" [ngStyle]="lineStyle(stepName)">
+        {{stepName}}
+        <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>
+    </nz-list-item>
+</nz-list>

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

@@ -10,7 +10,7 @@
     overflow-y: auto
     margin-top: 10px
     flex: 1
-    tr:hover td
+    nz-list-item:hover
       color: #333
     lib-utask-box
       [app-box-header]

ui/dashboard/projects/utask-lib/src/lib/@routes/task/task.html

@@ -62,15 +62,15 @@
     <lib-utask-box [header]="{openable: true, init: display.request, class: 'primary'}">
         <div app-box-header>
             Request - {{task.id}}
-            <nz-button-group nzSize="small">
-                <button type="button" nz-button title="View as code"
-                    (click)="previewTask(); $event.stopPropagation();"><i nz-icon nzType="file-text"></i></button>
-                <button type="button" nz-button title="Edit the task"
-                    (click)="editRequest(task); $event.stopPropagation();"><i nz-icon nzType="edit"></i></button>
-                <button type="button" nz-button title="Delete the task"
-                    (click)="deleteTask(task.id); $event.stopPropagation();"><i nz-icon nzType="delete"></i></button>
-            </nz-button-group>
         </div>
+        <nz-button-group nzSize="small" app-box-header-extra>
+            <button type="button" nz-button title="View as code" (click)="previewTask(); $event.stopPropagation();"><i
+                    nz-icon nzType="file-text"></i></button>
+            <button type="button" nz-button title="Edit the task"
+                (click)="editRequest(task); $event.stopPropagation();"><i nz-icon nzType="edit"></i></button>
+            <button type="button" nz-button title="Delete the task"
+                (click)="deleteTask(task.id); $event.stopPropagation();"><i nz-icon nzType="delete"></i></button>
+        </nz-button-group>
         <div app-box-content>
             <nz-descriptions *ngIf="task.input" nzBordered [nzSize]="'small'" [nzColumn]="1">
                 <nz-descriptions-item nzTitle="Template">
@@ -117,6 +117,8 @@
                     ===
                     'ERROR' ? ' (retrying)' : ''}}</small>
                 <span *ngIf="loaders.execution || loaders.refreshTask">&nbsp;<i nz-icon nzType="loading"></i></span>
+            </div>
+            <div app-box-header-extra>
                 <nz-button-group nzSize="small">
                     <button type="button" nz-button title="Run" (click)="runResolution(resolution)"><i nz-icon
                             nzType="caret-right"></i></button>

ui/dashboard/projects/utask-lib/src/public-api.ts

@@ -5,17 +5,25 @@
 export * from './lib/@components/input-tags/input-tags.component';
 export * from './lib/@components/error-message/error-message.component';
 export * from './lib/@components/loader/loader.component';
-export * from './lib/@modals/modal-api-yaml/modal-api-yaml.component';
-export * from './lib/@modals/modal-api-yaml-edit/modal-api-yaml-edit.component';
 export * from './lib/@components/chart-task-states/chart-task-states.component';
 export * from './lib/@components/template-details/template-details.component';
 export * from './lib/@components/stepslist/stepslist.component';
 export * from './lib/@components/editor/editor.component';
 export * from './lib/@components/tasks-list/tasks-list.component';
 export * from './lib/@components/step-node/step-node.component';
 export * from './lib/@components/steps-viewer/steps-viewer.component';
+export * from './lib/@components/inputs-form/inputs-form.component';
+export * from './lib/@components/input-editor/input-editor.component';
+export * from './lib/@components/task-status/task-status.component';
+export * from './lib/@components/box/box.component';
+
 export * from './lib/@pipes/fromNow.pipe';
 
+export * from './lib/@modals/modal-api-yaml/modal-api-yaml.component';
+export * from './lib/@modals/modal-edit-resolution-step-state/modal-edit-resolution-step-state.component';
+export * from './lib/@modals/modal-api-yaml-edit/modal-api-yaml-edit.component';
+export * from './lib/@modals/modal-content-with-error/modal-content-with-error.component';
+
 export * from './lib/@services/api.service';
 export * from './lib/@services/request.service';
 export * from './lib/@services/resolution.service';
@@ -31,5 +39,9 @@ export * from './lib/@models/meta.model';
 export * from './lib/@models/template.model';
 export * from './lib/@models/function.model';
 
+export * from './lib/@directives/autofocus.directive';
+export * from './lib/@directives/fullheight.directive';
+export * from './lib/@directives/ns-auto-height-table.directive';
+
 export { UTaskLibModule, UTaskLibOptionsFactory } from './lib/utask-lib.module';
 export { UTaskLibRoutingModule } from './lib/utask-lib.routing.module';