Merge pull request #8145 from rusikv/alarmCommentsUI

[3.5] UI: alarm comments/assign amendments

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

@@ -129,12 +129,12 @@ export class AlarmAssigneePanelComponent implements  OnInit, AfterViewInit, OnDe
   }
 
   assign(user: User): void {
-    this.alarmService.assignAlarm(this.alarmId, user.id.id).subscribe(
+    this.alarmService.assignAlarm(this.alarmId, user.id.id, {ignoreLoading: true}).subscribe(
       () => this.overlayRef.dispose());
   }
 
   unassign(): void {
-    this.alarmService.unassignAlarm(this.alarmId).subscribe(
+    this.alarmService.unassignAlarm(this.alarmId, {ignoreLoading: true}).subscribe(
       () => this.overlayRef.dispose());
   }
 

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

@@ -33,23 +33,12 @@
                       [commentsHeaderEnabled]="commentsHeaderEnabled">
     </tb-alarm-comment>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <button mat-button color="primary"
+  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end">
+    <button mat-raised-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="close()" cdkFocusInitial>
       {{ 'action.close' | translate }}
     </button>
-    <span fxFlex></span>
-    <button mat-raised-button color="primary"
-            type="button"
-            (click)="changeSortDirection()">
-      {{ 'alarm-comment.sort-direction' | translate}}
-    </button>
-    <button mat-raised-button color="primary"
-            type="button"
-            (click)="refresh()">
-      {{ 'alarm-comment.refresh' | translate}}
-    </button>
   </div>
 </div>

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

@@ -14,14 +14,13 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, ViewChild } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { AlarmInfo } from '@shared/models/alarm.models';
-import { AlarmCommentComponent } from '@home/components/alarm/alarm-comment.component';
 
 export interface AlarmCommentDialogData {
   alarmId?: string;
@@ -37,9 +36,8 @@ export interface AlarmCommentDialogData {
 export class AlarmCommentDialogComponent extends DialogComponent<AlarmCommentDialogComponent, void> {
 
   alarmId: string;
-  commentsHeaderEnabled: boolean = false;
 
-  @ViewChild('alarmCommentComponent', { static: true }) alarmCommentComponent: AlarmCommentComponent;
+  commentsHeaderEnabled: boolean = false;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
@@ -50,14 +48,6 @@ export class AlarmCommentDialogComponent extends DialogComponent<AlarmCommentDia
     this.alarmId = this.data.alarmId;
   }
 
-  changeSortDirection() {
-    this.alarmCommentComponent.changeSortDirection();
-  }
-
-  refresh() {
-    this.alarmCommentComponent.loadAlarmComments();
-  }
-
   close(): void {
     this.dialogRef.close();
   }

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

@@ -16,10 +16,12 @@
 
 -->
 
-<div fxFlexFill [formGroup]="alarmCommentFormGroup" class="tb-alarm-comments" fxLayout="column">
-  <div *ngIf="commentsHeaderEnabled" class="tb-alarm-comments-header" fxLayout="row" fxLayoutAlign="space-between baseline">
-    <span class="tb-alarm-comments-header-title">{{ 'alarm-comment.comments' | translate }}</span>
-    <div>
+<div [formGroup]="alarmCommentFormGroup" class="tb-alarm-comments" fxLayout="column">
+  <div class="tb-alarm-comments-header" fxLayout="row" fxLayoutAlign="space-between baseline">
+    <span *ngIf="commentsHeaderEnabled" class="tb-alarm-comments-header-title">
+      {{ 'alarm-comment.comments' | translate }}
+    </span>
+    <div style="margin-left: auto">
       <button mat-icon-button
               type="button"
               (click)="changeSortDirection()"

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

@@ -105,7 +105,7 @@ export class AlarmCommentComponent implements OnInit {
 
   loadAlarmComments(): void {
     this.alarmCommentService.getAlarmComments(this.alarmId, new PageLink(MAX_SAFE_PAGE_SIZE, 0, null,
-      this.alarmCommentSortOrder)).subscribe(
+      this.alarmCommentSortOrder), {ignoreLoading: true}).subscribe(
       (pagedData) => {
         this.alarmComments = pagedData.data;
         this.displayData.length = 0;
@@ -168,7 +168,7 @@ export class AlarmCommentComponent implements OnInit {
   }
 
   private doSave(comment: AlarmComment): void {
-    this.alarmCommentService.saveAlarmComment(this.alarmId, comment).subscribe(
+    this.alarmCommentService.saveAlarmComment(this.alarmId, comment, {ignoreLoading: true}).subscribe(
       () => {
         this.loadAlarmComments();
       }
@@ -200,10 +200,10 @@ export class AlarmCommentComponent implements OnInit {
       this.translate.instant('action.delete')).subscribe(
       (result) => {
         if (result) {
-          this.alarmCommentService.deleteAlarmComments(this.alarmId, commentId).subscribe(
-            () => {
-              this.loadAlarmComments();
-            }
+          this.alarmCommentService.deleteAlarmComments(this.alarmId, commentId, {ignoreLoading: true})
+            .subscribe(() => {
+                this.loadAlarmComments();
+              }
           )
         }
       }

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

@@ -108,7 +108,7 @@ export class AlarmDetailsDialogComponent extends DialogComponent<AlarmDetailsDia
   }
 
   loadAlarm() {
-    this.alarmService.getAlarmInfo(this.alarmId).subscribe(
+    this.alarmService.getAlarmInfo(this.alarmId, {ignoreLoading: true}).subscribe(
       alarm => this.loadAlarmSubject.next(alarm)
     );
   }

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html

@@ -92,7 +92,9 @@
                   </span>
                   <span [matTooltip]="getUserDisplayName(alarm)"
                         matTooltipPosition="above"
-                        style="text-overflow: ellipsis">{{ getUserDisplayName(alarm) }}</span>
+                        style="text-overflow: ellipsis">
+                    {{ getUserDisplayName(alarm) }}
+                  </span>
                 </span>
                 <span *ngIf="!alarm.assigneeId" class="unassigned-container" fxLayout="row" fxLayoutAlign="start center">
                   <mat-icon class="material-icons unassigned-icon">account_circle</mat-icon>

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts

@@ -143,11 +143,11 @@ interface AlarmsTableWidgetSettings extends TableWidgetSettings {
   enableSelection: boolean;
   enableStatusFilter?: boolean;
   enableFilter: boolean;
+  displayComments: boolean;
   displayDetails: boolean;
   allowAcknowledgment: boolean;
   allowClear: boolean;
   allowAssign: boolean;
-  displayComments: boolean;
 }
 
 interface AlarmWidgetActionDescriptor extends TableCellButtonActionDescriptor {
@@ -197,11 +197,11 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
 
   private alarmsTitlePattern: string;
 
+  private displayComments = false;
   private displayDetails = true;
   public allowAcknowledgment = true;
   private allowClear = true;
   public allowAssign = true;
-  private displayComments = false;
 
   private defaultPageSize = 10;
   private defaultSortOrder = '-' + alarmFields.createdTime.value;
@@ -335,10 +335,10 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   private initializeConfig() {
     this.ctx.widgetActions = [this.searchAction, this.alarmFilterAction, this.columnDisplayAction];
 
+    this.displayComments = isDefined(this.settings.displayComments) ? this.settings.displayComments : false;
     this.displayDetails = isDefined(this.settings.displayDetails) ? this.settings.displayDetails : true;
     this.allowAcknowledgment = isDefined(this.settings.allowAcknowledgment) ? this.settings.allowAcknowledgment : true;
     this.allowClear = isDefined(this.settings.allowClear) ? this.settings.allowClear : true;
-    this.displayComments = isDefined(this.settings.displayComments) ? this.settings.displayComments : false;
     this.allowAssign = isDefined(this.settings.allowAssign) ? this.settings.allowAssign : true;
 
     if (this.settings.alarmsTitle && this.settings.alarmsTitle.length) {
@@ -464,6 +464,16 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     this.sortOrderProperty = sortColumn ? sortColumn.def : null;
 
     const actionCellDescriptors: AlarmWidgetActionDescriptor[] = [];
+    if (this.displayComments) {
+      actionCellDescriptors.push(
+        {
+          displayName: this.translate.instant('alarm-comment.comments'),
+          icon: 'comment',
+          comments: true
+        } as AlarmWidgetActionDescriptor
+      );
+    }
+
     if (this.displayDetails) {
       actionCellDescriptors.push(
         {
@@ -494,16 +504,6 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
       );
     }
 
-    if (this.displayComments) {
-      actionCellDescriptors.push(
-        {
-          displayName: this.translate.instant('alarm-comment.comments'),
-          icon: 'comment',
-          comments: true
-        } as AlarmWidgetActionDescriptor
-      );
-    }
-
     this.setCellButtonAction = !!(actionCellDescriptors.length + this.ctx.actionsApi.getActionDescriptors('actionCellButton').length);
 
     if (this.setCellButtonAction) {

ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html

@@ -58,6 +58,9 @@
       </mat-select>
     </mat-form-field>
     <section fxLayout="column" fxLayoutGap="8px">
+      <mat-slide-toggle formControlName="displayComments">
+        {{ 'widgets.table.display-alarm-comments' | translate }}
+      </mat-slide-toggle>
       <mat-slide-toggle fxFlex formControlName="displayDetails">
         {{ 'widgets.table.display-alarm-details' | translate }}
       </mat-slide-toggle>
@@ -70,9 +73,6 @@
       <mat-slide-toggle formControlName="allowAssign">
         {{ 'widgets.table.allow-alarms-assign' | translate }}
       </mat-slide-toggle>
-      <mat-slide-toggle formControlName="displayComments">
-        {{ 'widgets.table.display-alarm-comments' | translate }}
-      </mat-slide-toggle>
       <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
         <mat-slide-toggle fxFlex formControlName="displayPagination">
           {{ 'widgets.table.display-pagination' | translate }}