frontend: Improve visibility of 'User error' messages (#1960)

Add new 'details' buttons to make error messages more visible. Note that these messages are not very frequent Changes are needed in three pages: 1. Manage Data Jobs grid 2. Data Job Executions tab grid 3. Details page - timeline (on both manage and explore sections) In manage page grid and executions grid, 'details' buttons will appear when the execution status is 'User Error', 'Platform Error' or 'Skipped'. When displaying in details page timeline, I show the entire error message without using signpost. Testing done: verified locally ![image](https://user-images.githubusercontent.com/127503989/234296967-d776f764-3aa3-420d-9d66-6b9ee1ca6886.png) ![image](https://user-images.githubusercontent.com/127503989/234296997-033995e9-db01-4a8c-b100-b29e49ef46ba.png) ![image](https://user-images.githubusercontent.com/127503989/234297037-88b69bd6-ed7c-4df7-a303-e8fd2e2db3fb.png)
vmware · Apr 27, 2023 · 61fe07f · 61fe07f
1 parent 8a96105
commit 61fe07f
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 23 deletions.
diff --git a/...-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.html b/...-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.html
@@ -839,6 +839,7 @@ <h5>
                     <lib-executions-timeline
                         *ngIf="!loadingExecutions"
                         [jobExecutions]="jobExecutions"
+                        [showErrorMessage]="true"
                         [next]="
                             (jobState?.deployments | extractJobStatus) ===
                             'Enabled'

diff --git a/...-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.scss b/...-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.scss
@@ -108,6 +108,10 @@ hr {
 
         margin-bottom: 1rem;
 
+        .form-section-readonly {
+            word-break: break-word;
+        }
+
         .data-pipelines-job__section--border-none {
             border: none;
         }

diff --git a/...a-job/pages/executions/data-job-execution-status/data-job-execution-status.component.html b/...a-job/pages/executions/data-job-execution-status/data-job-execution-status.component.html
@@ -17,10 +17,7 @@
             isJobMessageDifferentFromStatus()
         "
     >
-        <clr-signpost-content
-            [clrPosition]="'right-middle'"
-            *clrIfOpen="clrOpen"
-        >
+        <clr-signpost-content [clrPosition]="'right-bottom'" *clrIfOpen>
             {{ jobMessage }}
             <vdk-copy-to-clipboard-button
                 [tooltip]="'Copy to clipboard'"
@@ -29,10 +26,19 @@
             ></vdk-copy-to-clipboard-button>
         </clr-signpost-content>
     </div>
-    <span
-        class="job-execution-status__text"
-        data-cy="data-pipelines-job-executions-status-filters"
-        clrSignpostTrigger
-        >{{ executionStatusProperties.text }}
-    </span>
+    <div class="job-execution-status__container">
+        <span
+            class="job-execution-status__text"
+            data-cy="data-pipelines-job-executions-status-filters"
+            clrSignpostTrigger
+            >{{ executionStatusProperties.text }}
+        </span>
+        <button
+            *ngIf="showErrorMessage && isJobStatusSuitableForMessageTooltip() && isJobMessageDifferentFromStatus()"
+            class="btn btn-link btn-icon btn-sm job-execution-status__btn"
+            clrSignpostTrigger
+        >
+            details
+        </button>
+    </div>
 </clr-signpost>
diff --git a/...a-job/pages/executions/data-job-execution-status/data-job-execution-status.component.scss b/...a-job/pages/executions/data-job-execution-status/data-job-execution-status.component.scss
@@ -3,8 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-.job-execution-status__text {
-    margin-left: 0.25rem;
+.job-execution-status__container {
+    display: flex;
+    align-items: baseline;
+    flex-direction: column;
+
+    .job-execution-status__text {
+        margin-left: 0.25rem;
+    }
+
+    .job-execution-status__btn {
+        padding: 0;
+        margin-left: 5px;
+        text-transform: lowercase;
+        font-size: 12px;
+        outline-color: transparent;
+    }
 }
 
 :host {

diff --git a/...ata-job/pages/executions/data-job-execution-status/data-job-execution-status.component.ts b/...ata-job/pages/executions/data-job-execution-status/data-job-execution-status.component.ts
@@ -20,14 +20,6 @@ type StatusPropertiesMapping = {
     styleUrls: ['./data-job-execution-status.component.scss']
 })
 export class DataJobExecutionStatusComponent {
-    @HostListener('mouseenter') onMouseEnter(): void {
-        this.clrOpen = true;
-    }
-
-    @HostListener('mouseleave') onMouseLeave(): void {
-        this.clrOpen = false;
-    }
-
     @Input() jobStatus: DataJobExecutionStatus;
     @Input() jobMessage = '';
     @Input() showErrorMessage = false;

diff --git a/.../src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.html b/.../src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.html
@@ -384,6 +384,7 @@
                     <lib-data-job-execution-status
                         *ngIf="getJobStatus(job)"
                         [jobStatus]="getJobStatus(job)"
+                        [showErrorMessage]="true"
                     ></lib-data-job-execution-status>
                 </clr-dg-cell>
 

diff --git a/...data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.spec.ts b/...data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.spec.ts
@@ -119,6 +119,7 @@ describe('DataJobsApiService', () => {
 						id
                         status
                         logsUrl
+                        message
                       }
                     }
                   }

diff --git a/...tend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.ts b/...tend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.ts
@@ -111,6 +111,7 @@ export class DataJobsApiService extends TaurusBaseApiService<DataJobsApiService>
 						id
                         status
                         logsUrl
+                        message
                       }
                     }
                   }

diff --git a/...ipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.html b/...ipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.html
@@ -11,7 +11,7 @@
             let execution of jobExecutions
                 | slice
                     : (jobExecutions.length > 5 ? jobExecutions.length - 5 : 0);
-            trackBy: trackByFn
+            trackBy: trackByFn; index as i
         "
         class="clr-timeline-step"
         [attr.data-cy]="execution.id"
@@ -86,6 +86,36 @@
 
             <div class="clr-timeline-step-description">
                 <div class="clr-timeline__element--display-block">
+                    <span
+                        *ngIf="showErrorMessage && isJobStatusSuitableForMessageTooltip(execution) && isJobMessageDifferentFromStatus(execution)"
+                    >
+                        <span *ngIf=" showExecutionFullMessage[i]"
+                            >{{ execution.message }}
+                            <button
+                                class="btn btn-link btn-sm btn-show-more"
+                                (click)=" showExecutionFullMessage[i] = false"
+                            >
+                                show less
+                            </button>
+                        </span>
+
+                        <span *ngIf="!showExecutionFullMessage[i]"
+                            >{{ execution.message | words :
+                            messageWordsBeforeTruncate }}
+                            <button
+                                *ngIf="
+                                            execution.message?.split(' ')
+                                                .length >
+                                            messageWordsBeforeTruncate
+                                        "
+                                class="btn btn-link btn-sm btn-show-more"
+                                (click)=" showExecutionFullMessage[i] = true"
+                            >
+                                show more
+                            </button>
+                        </span>
+                        <br />
+                    </span>
                     <span>Duration: </span>
                     <span
                         class="clr-timeline__duration-tag"

diff --git a/...ipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.scss b/...ipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.scss
@@ -39,6 +39,16 @@
 
     .clr-timeline__element--display-block {
         display: block;
+        width: 200px;
+
+        span {
+            word-break: break-word;
+
+            .btn-show-more {
+                padding: 0;
+                margin: 0;
+            }
+        }
     }
 
     .clr-timeline__duration-tag {

diff --git a/...-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.ts b/...-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ChangeDetectionStrategy, Component, Inject, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, OnInit } from '@angular/core';
 
 import {
     DATA_PIPELINES_CONFIGS,
@@ -20,20 +20,27 @@ import {
     styleUrls: ['./executions-timeline.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ExecutionsTimelineComponent {
+export class ExecutionsTimelineComponent implements OnInit {
     static manualRunKnownUser = 'This job is triggered manually by user';
     static manualRunNoUser = 'This job is triggered manually, but there is no info about the user';
 
     @Input() jobExecutions: DataJobExecutions = [];
     @Input() next: Date = null;
+    @Input() showErrorMessage = false;
+    showExecutionFullMessage: boolean[];
 
+    messageWordsBeforeTruncate = 50;
     dataJobExecutionStatus = DataJobExecutionStatus;
 
     constructor(
         @Inject(DATA_PIPELINES_CONFIGS)
         public dataPipelinesModuleConfig: DataPipelinesConfig
     ) {}
 
+    ngOnInit(): void {
+        this.showExecutionFullMessage = new Array(this.jobExecutions.length).fill(false);
+    }
+
     /**
      * ** NgFor elements tracking function.
      */
@@ -55,4 +62,17 @@ export class ExecutionsTimelineComponent {
 
         return `${ExecutionsTimelineComponent.manualRunKnownUser} ${user}`;
     }
+
+    isJobStatusSuitableForMessageTooltip(execution: DataJobExecution): boolean {
+        return (
+            execution.status === DataJobExecutionStatus.PLATFORM_ERROR ||
+            execution.status === DataJobExecutionStatus.USER_ERROR ||
+            execution.status === DataJobExecutionStatus.SKIPPED
+        );
+    }
+
+    isJobMessageDifferentFromStatus(execution: DataJobExecution): boolean {
+        const message = execution.message?.toLowerCase();
+        return message !== 'user error' && message !== 'platform error' && message !== 'skipped' && message !== '';
+    }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -119,6 +119,7 @@ describe('DataJobsApiService', () => { @@
     						id
                             status
                             logsUrl
+                            message
                           }
                         }
                       }
@@ Expand Down @@