Add exoprt of alarm activity in CSV format

ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.scss

@@ -17,7 +17,7 @@
 :host {
   width: 100%;
   overflow: auto;
-  background: #fff;
+  background: white;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
   border-radius: 4px;
 }
@@ -27,7 +27,7 @@
     padding: 8px;
     height: 340px;
     font-size: 14px;
-    background-color: #fff;
+    background-color: white;
   }
 
   .mat-form-field-appearance-outline .mdc-notched-outline__trailing{
@@ -61,12 +61,12 @@
         height: 28px;
         min-width: 28px;
         min-height: 28px;
-        color: #fff;
+        color: white;
         font-size: 13px;
         font-weight: 700
       }
       .user-display-name {
-        max-width: 180px;
+        max-width: 80%;
         overflow: hidden;
         span {
           overflow: hidden;
@@ -77,8 +77,8 @@
         }
       }
       .mdc-list-item__primary-text {
+        width: 100%;
         display: flex;
-        justify-content: start;
         align-items: center;
         line-height: normal;
       }

ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html

@@ -24,6 +24,13 @@
         alarm-activity.activity
       </span>
       <div style="margin-left: auto">
+        <button mat-icon-button
+                type="button"
+                (click)="exportAlarmActivity()"
+                matTooltip="{{ 'alarm-activity.export' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon class="material-icons" svgIcon="mdi:file-export"></mat-icon>
+        </button>
         <button mat-icon-button
                 type="button"
                 (click)="changeSortDirection()"
@@ -53,7 +60,7 @@
             {{ displayDataElement.commentText }}
           </span>
           <span class="time" style="padding: 3px"
-                matTooltip="{{ displayDataElement.createdTime | date:'yyyy-MM-dd HH:mm:ss' }}"
+                [matTooltip]="displayDataElement.createdTime"
                 matTooltipPosition="right">
             {{ displayDataElement.createdDateAgo }}
           </span>
@@ -72,12 +79,12 @@
               <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
                 <span class="user-name">{{ displayDataElement.displayName }}</span>
                 <span class="time"
-                      matTooltip="{{ displayDataElement.createdTime | date:'yyyy-MM-dd HH:mm:ss' }}"
+                      [matTooltip]="displayDataElement.createdTime"
                       matTooltipPosition="right">
                   {{ displayDataElement.createdDateAgo }}
                 </span>
                 <span class="time" *ngIf="displayDataElement.isEdited"
-                      matTooltip="{{ displayDataElement.editedDateAgo }} {{ displayDataElement.editedTime | date:'yyyy-MM-dd HH:mm:ss' }}"
+                      matTooltip="{{ displayDataElement.editedDateAgo }} {{ displayDataElement.editedTime }}"
                       matTooltipPosition="right">
                   Edited
                 </span>

ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts

@@ -30,15 +30,17 @@ import { map } from 'rxjs/operators';
 import { AlarmComment, AlarmCommentInfo, AlarmCommentType } from '@shared/models/alarm.models';
 import { UtilsService } from '@core/services/utils.service';
 import { EntityType } from '@shared/models/entity-type.models';
+import { DatePipe } from '@angular/common';
+import { ImportExportService } from '@home/components/import-export/import-export.service';
 
 interface AlarmCommentsDisplayData {
   commentId?: string,
   displayName?: string,
-  createdTime: number,
+  createdTime: string,
   createdDateAgo?: string,
   edit?: boolean,
   isEdited?: boolean,
-  editedTime?: number;
+  editedTime?: string;
   editedDateAgo?: string,
   showActions?: boolean,
   commentText?: string,
@@ -87,7 +89,9 @@ export class AlarmCommentComponent implements OnInit {
               public fb: FormBuilder,
               private dialogService: DialogService,
               public dateAgoPipe: DateAgoPipe,
-              private utilsService: UtilsService) {
+              private utilsService: UtilsService,
+              private datePipe: DatePipe,
+              private importExportService: ImportExportService) {
 
     this.authUser = getCurrentAuthUser(store);
 
@@ -113,7 +117,7 @@ export class AlarmCommentComponent implements OnInit {
         this.displayData.length = 0;
         for (let alarmComment of pagedData.data) {
           let displayDataElement = {} as AlarmCommentsDisplayData;
-          displayDataElement.createdTime = alarmComment.createdTime;
+          displayDataElement.createdTime = this.datePipe.transform(alarmComment.createdTime, 'yyyy-MM-dd HH:mm:ss');
           displayDataElement.createdDateAgo = this.dateAgoPipe.transform(alarmComment.createdTime);
           displayDataElement.commentText = alarmComment.comment.text;
           displayDataElement.isSystemComment = alarmComment.type === AlarmCommentType.SYSTEM;
@@ -122,7 +126,7 @@ export class AlarmCommentComponent implements OnInit {
             displayDataElement.displayName = this.getUserDisplayName(alarmComment);
             displayDataElement.edit = false;
             displayDataElement.isEdited = alarmComment.comment.edited;
-            displayDataElement.editedTime = alarmComment.comment.editedOn;
+            displayDataElement.editedTime = this.datePipe.transform(alarmComment.comment.editedOn, 'yyyy-MM-dd HH:mm:ss');
             displayDataElement.editedDateAgo = this.dateAgoPipe.transform(alarmComment.comment.editedOn) + '\n';
             displayDataElement.showActions = false;
             displayDataElement.isSystemComment = false;
@@ -141,6 +145,11 @@ export class AlarmCommentComponent implements OnInit {
     this.loadAlarmComments();
   }
 
+  exportAlarmActivity() {
+    let fileName = this.translate.instant('alarm.alarm') + '_' + this.translate.instant('alarm-activity.activity');
+    this.importExportService.exportCsv(this.getDataForExport(), fileName.toLowerCase());
+  }
+
   saveComment(): void {
     const commentInputValue: string = this.getAlarmCommentFormControl().value;
     if (commentInputValue) {
@@ -298,4 +307,19 @@ export class AlarmCommentComponent implements OnInit {
     return this.displayData.find(commentDisplayData => commentDisplayData.commentId === commentId);
   }
 
+  private getDataForExport() {
+    let dataToExport = [];
+    for (let row of this.displayData) {
+      let exportRow = {
+        [this.translate.instant('alarm-activity.author')]: row.isSystemComment ?
+          this.translate.instant('alarm-activity.system') : row.displayName,
+        [this.translate.instant('alarm-activity.created-date')]: row.createdTime,
+        [this.translate.instant('alarm-activity.edited-date')]: row.editedTime,
+        [this.translate.instant('alarm-activity.text')]: row.commentText
+      }
+      dataToExport.push(exportRow)
+    }
+    return dataToExport;
+  }
+
 }

ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.scss

@@ -13,13 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@use '@angular/material' as mat;
-@import '../theme.scss';
 
 :host ::ng-deep {
-  .mat-mdc-text-field-wrapper.mdc-text-field {
-    background-color: rgba(mat.get-color-from-palette($tb-primary, 50), 0.4);
-  }
   .assignee-field {
     .mat-form-field-label-wrapper {
       overflow: visible;

ui-ngx/src/app/modules/home/components/import-export/import-export.models.ts

@@ -150,6 +150,11 @@ export const ZIP_TYPE: FileType = {
   extension: 'zip'
 };
 
+export const CSV_TYPE: FileType = {
+  mimeType: 'attachament/csv',
+  extension: 'csv'
+};
+
 export function convertCSVToJson(csvdata: string, config: CsvToJsonConfig,
                                  onError: (messageId: string, params?: any) => void): CsvToJsonResult | number {
   config = config || {};

ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts

@@ -47,6 +47,7 @@ import { ItemBufferService, WidgetItem } from '@core/services/item-buffer.servic
 import {
   BulkImportRequest,
   BulkImportResult,
+  CSV_TYPE,
   FileType,
   ImportWidgetResult,
   JSON_TYPE,
@@ -597,6 +598,35 @@ export class ImportExportService {
     );
   }
 
+  private processCSVCell(cellData: any): any {
+    if (isString(cellData)) {
+      let result = cellData.replace(/"/g, '""');
+      if (result.search(/([",\n])/g) >= 0) {
+        result = `"${result}"`;
+      }
+      return result;
+    }
+    return cellData;
+  }
+
+  public exportCsv(data: {[key: string]: any}[], filename: string) {
+    let colsHead: string;
+    let colsData: string;
+    if (data && data.length) {
+      colsHead = Object.keys(data[0]).map(key => [this.processCSVCell(key)]).join(';');
+      colsData = data.map(obj => [
+        Object.keys(obj).map(col => [
+          this.processCSVCell(obj[col])
+        ]).join(';')
+      ]).join('\n');
+    } else {
+      colsHead = '';
+      colsData = '';
+    }
+    const csvData = `${colsHead}\n${colsData}`;
+    this.downloadFile(csvData, filename, CSV_TYPE);
+  }
+
   public exportText(data: string | Array<string>, filename: string) {
     let content = data;
     if (Array.isArray(data)) {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -513,7 +513,12 @@
         "oldest-first": "Oldest first",
         "newest-first": "Newest first",
         "activity": "Activity",
-        "export":  "Export to CSV"
+        "export":  "Export to CSV",
+        "author": "Author",
+        "created-date": "Created date",
+        "edited-date": "Edited date",
+        "text": "Text",
+        "system": "System"
     },
     "alias": {
         "add": "Add alias",