Add artifact status notification message

- Added column Message in consumer's artifacts view with shorten errorReason
- Added full errorReason to artifacts's statuses view

Signed-off-by: Michal Banka <michal.banka@nokia.com>
Issue-ID: SDC-3401
Change-Id: I6d29ad67838010fc2896bb97fa72af07e912ebb2

5 files changed, 68 insertions, 16 deletions

diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.html b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.html
index 574f2d1bb4..e3ccaa0bee 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.html
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.html
@@ -11,8 +11,9 @@
     <ngx-datatable-row-detail [rowHeight]="'auto'">
       <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
           <div *ngFor="let status of row.statuses">
-            <span class = "status" [attr.data-tests-id]="generateDataTestID('statusTimeStamp_',componentName, row.name, status.status)">{{ status.timeStamp | date:'short':'UTC'}}</span>
-            <span class = "status" [attr.data-tests-id]="generateDataTestID('statusValue_',componentName, row.name, status.status)">{{ status.status }}</span>
+            <span class = "status timestamp" [attr.data-tests-id]="generateDataTestID('statusTimeStamp_',componentName, row.name, status.status)">{{ status.timeStamp | date:'short':'UTC'}}</span>
+            <span class = "status value" [attr.data-tests-id]="generateDataTestID('statusValue_',componentName, row.name, status.status)">{{ status.status }}</span>
+            <span class = "status message" [attr.data-tests-id]="generateDataTestID('statusMessageValue_',componentName, row.name, status.errorReason)">{{ status.errorReason }}</span>
           </div>
       </ng-template>
     </ngx-datatable-row-detail>
@@ -58,5 +59,10 @@
         <div class = "distributionRowValue ellipsisCell" [attr.data-tests-id]="generateDataTestID('status_',componentName, row.name)" sdc-tooltip [tooltip-placement]="3" [tooltip-text]="getLatestArtifact(row.name).status">{{ getLatestArtifact(row.name).status }}</div>
       </ng-template>
     </ngx-datatable-column>
+    <ngx-datatable-column [resizeable]="false" [width]="280" name="Message">
+      <ng-template ngx-datatable-cell-template let-row="row">
+        <div class = "distributionRowValue ellipsisCell" [attr.data-tests-id]="generateDataTestID('message_',componentName, row.name)" sdc-tooltip [tooltip-placement]="3" [tooltip-text]="getLatestArtifact(row.name).errorReason">{{ getLatestArtifact(row.name).errorReason }}</div>
+      </ng-template>
+    </ngx-datatable-column>
   </ngx-datatable>
 </div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.less b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.less
index 81b8805792..76bed8db8e 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.less
@@ -20,10 +20,22 @@
 }
 
 .status {
-    padding-right: 30px;
+    display: inline-block;
     color: #5a5a5a;
     font-family: OpenSans-Regular, sans-serif;
     font-size: 12px;
+    vertical-align: text-top;
+}
+
+.timestamp {
+    width: 10%;
+}
+.value {
+    width: 15%;
+}
+
+.message {
+    white-space: pre-wrap;
 }
 
 .distributionIDBlock {
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.spec.ts
index 72b930b6b8..ee9c799d3f 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.spec.ts
@@ -1,7 +1,6 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture } from '@angular/core/testing';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
-import { SdcUiServices } from 'onap-ui-angular';
 import { ConfigureFn, configureTests } from '../../../../../../../jest/test-config.helper';
 import { DistributionService } from '../../distribution.service';
 import { DistributionComponentArtifactTableComponent } from './distribution-component-artifact-table.component';
@@ -14,22 +13,30 @@ describe('DistributionComponentArtifactTableComponent', () => {
       {
         name: 'Artifact1',
         statuses: [
-          {timeStamp: '7/25/2019 12:48AM', status: 'DEPLOY_OK'},
-          {timeStamp: '7/25/2019 12:48AM', status: 'DOWNLOAD_OK'},
-          {timeStamp: '7/25/2019 12:48AM', status: 'NOTIFIED'}
+          {timeStamp: '7/25/2019 12:48AM', status: 'DEPLOY_OK', errorReason: 'Sample message 1'},
+          {timeStamp: '7/25/2019 12:48AM', status: 'DOWNLOAD_OK', errorReason: 'Sample message 2'},
+          {timeStamp: '7/25/2019 12:48AM', status: 'NOTIFIED', errorReason: 'Sample message 3'}
         ],
         url: 'URL1',
       },
       {
         name: 'Artifact2',
         statuses: [
-          {timeStamp: '7/26/2019 12:48AM', status: 'STATUS_TO_DISPLAY'},
+          {timeStamp: '7/26/2019 12:48AM', status: 'STATUS_TO_DISPLAY', errorReason: 'null'},
           {timeStamp: '7/25/2019 12:48AM', status: 'DOWNLOAD_OK'},
           {timeStamp: '7/25/2019 12:48AM', status: 'NOTIFIED'}
         ],
         url: 'URL2',
       },
       {
+        name: 'Artifact3',
+        statuses: [
+          {timeStamp: '12/12/2020 13:30AM', status: 'DEPLOY_OK', errorReason: null},
+          {timeStamp: '12/11/2020 13:20AM', status: 'DOWNLOAD_OK', errorReason: 'Sample error reason'}
+        ],
+        url: 'URL3',
+      },
+      {
         name: 'ArtifactWithNoStatuses',
         url: 'URL2',
       }
@@ -58,16 +65,23 @@ describe('DistributionComponentArtifactTableComponent', () => {
 
   });
 
-  it('Get Latest Artifact (status and timeStamp) - So the Component Table will display the last time stamp of the notification', async () => {
+  it('Get Latest Artifact (status, timeStamp, errorReason) - So the Component Table will display the last time stamp of the notification', async () => {
     await fixture.componentInstance.ngOnInit();
-    expect(fixture.componentInstance.getLatestArtifact('Artifact2')).toEqual({status: 'STATUS_TO_DISPLAY', timeStamp: '7/26/2019 12:48AM'});
+    expect(fixture.componentInstance.getLatestArtifact('Artifact2')).toEqual({timeStamp: '7/26/2019 12:48AM', status: 'STATUS_TO_DISPLAY', errorReason: ''});
     expect(fixture.componentInstance.getLatestArtifact('ArtifactWithNoStatuses')).toEqual(null);
   });
 
+  it('Get Latest Artifact (status, timeStamp, errorReason) - So the Component Table will display correct Message', async () => {
+    await fixture.componentInstance.ngOnInit();
+    expect(fixture.componentInstance.getLatestArtifact('Artifact1').errorReason).toEqual('Sample message 1');
+    expect(fixture.componentInstance.getLatestArtifact('Artifact2').errorReason).toEqual('');
+    expect(fixture.componentInstance.getLatestArtifact('Artifact3').errorReason).toEqual('');
+  });
+
   it('Once the Distribution Component Artifact Table Component is created - artifacts will keep the relevant artifacts for a specific distributionID and Component Name', async () => {
     await fixture.componentInstance.ngOnInit();
     // tslint:disable:no-string-literal
-    expect(fixture.componentInstance.artifacts.length).toBe(3);
+    expect(fixture.componentInstance.artifacts.length).toBe(4);
     expect(fixture.componentInstance.artifacts[0].name).toBe('Artifact1');
     expect(fixture.componentInstance.artifacts[0].url).toBe('URL1');
     expect(fixture.componentInstance.artifacts[0].statuses.length).toBe(3);
@@ -79,12 +93,13 @@ describe('DistributionComponentArtifactTableComponent', () => {
       'specific distributionID and Component Name filtered by Status', async () => {
     fixture.componentInstance.statusFilter = 'DOWNLOAD_OK';
     await fixture.componentInstance.ngOnInit();
-    expect(fixture.componentInstance.artifacts.length).toBe(3);
+    expect(fixture.componentInstance.artifacts.length).toBe(4);
     expect(fixture.componentInstance.artifacts[0].name).toBe('Artifact1');
     expect(fixture.componentInstance.artifacts[0].url).toBe('URL1');
 
     expect(fixture.componentInstance.artifacts[0].statuses.length).toBe(1);
-    expect(fixture.componentInstance.artifacts[0].statuses[0]).toEqual({status: 'DOWNLOAD_OK', timeStamp: '7/25/2019 12:48AM'});
+    expect(fixture.componentInstance.artifacts[0].statuses[0]).toEqual({status: 'DOWNLOAD_OK', timeStamp: '7/25/2019 12:48AM', errorReason: 'Sample message 2'});
 
   });
+
 });
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.ts b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.ts
index af9aef5c64..866c14e56f 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.ts
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-artifact-table/distribution-component-artifact-table.component.ts
@@ -23,7 +23,8 @@ export class DistributionComponentArtifactTableComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.artifacts = this.distributionService.getArtifactstByDistributionIDAndComponentsName(this.rowDistributionID, this.componentName);
+        const artifacts = this.distributionService.getArtifactstByDistributionIDAndComponentsName(this.rowDistributionID, this.componentName);
+        this.artifacts = this.prepareArtifacts(artifacts);
         if (this.statusFilter) {
             this.artifacts.forEach(
             (artifact) => {
@@ -41,6 +42,21 @@ export class DistributionComponentArtifactTableComponent implements OnInit {
         }
     }
 
+    private prepareArtifacts(artifacts: any[]) {
+        if (artifacts) {
+            artifacts.forEach((artifact) => {
+                if (artifact && artifact['statuses']) {
+                    artifact['statuses'].forEach((status) => {
+                        if (!status.errorReason || status.errorReason === 'null') {
+                            status.errorReason = ''
+                        }
+                    })
+                }
+            });
+        }
+        return artifacts
+    }
+
     private copyToClipboard(urlToCopy: any) {
 
         const inputForCopyToClipboard = document.getElementById('inputForCopyToClipboard') as HTMLInputElement;
diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.service.ts b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.service.ts
index ed6791c5c1..5cfe8f5e60 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.service.ts
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.service.ts
@@ -101,7 +101,8 @@ export class DistributionService {
                                 const artifactObj = {
                                     url: artifact.artifactUrl,
                                     name: artifact.artifactName,
-                                    statuses: artifact.statuses
+                                    statuses: artifact.statuses,
+                                    errorReason: artifact.errorReason
                                 };
                                 artifacts.push(artifactObj);
                             });
@@ -161,6 +162,7 @@ export class DistributionService {
                 url: distributionStatus['url'],
                 time: distributionStatus['timestamp'],
                 status: distributionStatus['status'],
+                errorReason: distributionStatus['errorReason']
             };
 
 
@@ -190,7 +192,8 @@ export class DistributionService {
                 // Case where there is a url -> should add its status
                 component.artifacts[artifactPosition].statuses.push({
                     timeStamp: detailedArtifactStatus.time,
-                    status: detailedArtifactStatus.status
+                    status: detailedArtifactStatus.status,
+                    errorReason: detailedArtifactStatus.errorReason
                 });
             } else {
                 // Should update the Component -> status from MSO