UI: fixed alarm tables and alarm details breaking if deleted user was assigned or left comments

ui-ngx/src/app/core/services/utils.service.ts

@@ -31,6 +31,7 @@ import {
   hashCode,
   isDefined,
   isDefinedAndNotNull,
+  isNotEmptyStr,
   isString,
   isUndefined,
   objToBase64,
@@ -41,7 +42,13 @@ import { TranslateService } from '@ngx-translate/core';
 import { customTranslationsPrefix, i18nPrefix } from '@app/shared/models/constants';
 import { DataKey, Datasource, DatasourceType, KeyInfo } from '@shared/models/widget.models';
 import { DataKeyType } from '@app/shared/models/telemetry/telemetry.models';
-import { alarmFields, alarmSeverityTranslations, alarmStatusTranslations } from '@shared/models/alarm.models';
+import {
+  AlarmAssignee,
+  AlarmCommentInfo,
+  alarmFields,
+  alarmSeverityTranslations,
+  alarmStatusTranslations
+} from '@shared/models/alarm.models';
 import { materialColors } from '@app/shared/models/material.models';
 import { WidgetInfo } from '@home/models/widget-component.models';
 import jsonSchemaDefaults from 'json-schema-defaults';
@@ -374,6 +381,39 @@ export class UtilsService {
     });
   }
 
+  public getUserDisplayName(alarmAssignee: AlarmAssignee |  AlarmCommentInfo) {
+    let displayName = '';
+    if (isNotEmptyStr(alarmAssignee.firstName) || isNotEmptyStr(alarmAssignee.lastName)) {
+      if (alarmAssignee.firstName) {
+        displayName += alarmAssignee.firstName;
+      }
+      if (alarmAssignee.lastName) {
+        if (displayName.length > 0) {
+          displayName += ' ';
+        }
+        displayName += alarmAssignee.lastName;
+      }
+    } else {
+      displayName = alarmAssignee.email;
+    }
+    return displayName;
+  }
+
+  getUserInitials(alarmAssignee: AlarmAssignee): string {
+    let initials = '';
+    if (isNotEmptyStr(alarmAssignee.firstName) || isNotEmptyStr(alarmAssignee.lastName)) {
+      if (alarmAssignee.firstName) {
+        initials += alarmAssignee.firstName.charAt(0);
+      }
+      if (alarmAssignee.lastName) {
+        initials += alarmAssignee.lastName.charAt(0);
+      }
+    } else {
+      initials += alarmAssignee.email.charAt(0);
+    }
+    return initials.toUpperCase();
+  }
+
   public stringToHslColor(str: string, saturationPercentage: number, lightnessPercentage: number): string {
     if (str && str.length) {
       const hue = hashCode(str) % 360;

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

@@ -110,9 +110,7 @@ export class AlarmAssigneePanelComponent implements  OnInit, AfterViewInit, OnDe
     this.filteredUsers = this.selectUserFormGroup.get('user').valueChanges
       .pipe(
         debounceTime(150),
-        map(value => {
+        map(value => value ? (typeof value === 'string' ? value : '') : ''),
-          return value ? (typeof value === 'string' ? value : '') : ''
-        }),
         distinctUntilChanged(),
         switchMap(name => this.fetchUsers(name)),
         share(),
@@ -123,7 +121,7 @@ export class AlarmAssigneePanelComponent implements  OnInit, AfterViewInit, OnDe
   ngAfterViewInit() {
     setTimeout(() => {
       this.userInput.nativeElement.focus();
-    }, 0)
+    }, 0);
   }
 
   ngOnDestroy() {
@@ -149,7 +147,7 @@ export class AlarmAssigneePanelComponent implements  OnInit, AfterViewInit, OnDe
     this.alarmService.assignAlarm(this.alarmId, user.id.id, {ignoreLoading: true}).subscribe(
       () => {
         this.reassigned = true;
-        this.overlayRef.dispose()
+        this.overlayRef.dispose();
       });
   }
 
@@ -157,7 +155,7 @@ export class AlarmAssigneePanelComponent implements  OnInit, AfterViewInit, OnDe
     this.alarmService.unassignAlarm(this.alarmId, {ignoreLoading: true}).subscribe(
       () => {
         this.reassigned = true;
-        this.overlayRef.dispose()
+        this.overlayRef.dispose();
       });
   }
 
@@ -170,9 +168,7 @@ export class AlarmAssigneePanelComponent implements  OnInit, AfterViewInit, OnDe
     return this.userService.getUsersForAssign(this.alarmId, pageLink, {ignoreLoading: true})
       .pipe(
       catchError(() => of(emptyPageData<UserEmailInfo>())),
-      map(pageData => {
+      map(pageData => pageData.data)
-        return pageData.data;
-      })
     );
   }
 
@@ -191,42 +187,11 @@ export class AlarmAssigneePanelComponent implements  OnInit, AfterViewInit, OnDe
     }, 0);
   }
 
-  getUserDisplayName(entity: User) {
+  getUserInitials(entity: UserEmailInfo): string {
-    let displayName = '';
+    return this.utilsService.getUserInitials(entity);
-    if ((entity.firstName && entity.firstName.length > 0) ||
-      (entity.lastName && entity.lastName.length > 0)) {
-      if (entity.firstName) {
-        displayName += entity.firstName;
-      }
-      if (entity.lastName) {
-        if (displayName.length > 0) {
-          displayName += ' ';
-        }
-        displayName += entity.lastName;
-      }
-    } else {
-      displayName = entity.email;
-    }
-    return displayName;
   }
 
-  getUserInitials(entity: User): string {
+  getFullName(entity: UserEmailInfo): string {
-    let initials = '';
-    if (entity.firstName && entity.firstName.length ||
-      entity.lastName && entity.lastName.length) {
-      if (entity.firstName) {
-        initials += entity.firstName.charAt(0);
-      }
-      if (entity.lastName) {
-        initials += entity.lastName.charAt(0);
-      }
-    } else {
-      initials += entity.email.charAt(0);
-    }
-    return initials.toUpperCase();
-  }
-
-  getFullName(entity: User): string {
     let fullName = '';
     if ((entity.firstName && entity.firstName.length > 0) ||
       (entity.lastName && entity.lastName.length > 0)) {
@@ -243,8 +208,8 @@ export class AlarmAssigneePanelComponent implements  OnInit, AfterViewInit, OnDe
     return fullName;
   }
 
-  getAvatarBgColor(entity: User) {
+  getAvatarBgColor(entity: UserEmailInfo) {
-    return this.utilsService.stringToHslColor(this.getUserDisplayName(entity), 40, 60);
+    return this.utilsService.stringToHslColor(this.utilsService.getUserDisplayName(entity), 40, 60);
   }
 
 }

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

@@ -165,39 +165,8 @@ export class AlarmAssigneeSelectPanelComponent implements  OnInit, AfterViewInit
     }, 0);
   }
 
-  getUserDisplayName(entity: UserEmailInfo) {
-    let displayName = '';
-    if ((entity.firstName && entity.firstName.length > 0) ||
-      (entity.lastName && entity.lastName.length > 0)) {
-      if (entity.firstName) {
-        displayName += entity.firstName;
-      }
-      if (entity.lastName) {
-        if (displayName.length > 0) {
-          displayName += ' ';
-        }
-        displayName += entity.lastName;
-      }
-    } else {
-      displayName = entity.email;
-    }
-    return displayName;
-  }
-
   getUserInitials(entity: UserEmailInfo): string {
-    let initials = '';
+    return this.utilsService.getUserInitials(entity);
-    if (entity.firstName && entity.firstName.length ||
-      entity.lastName && entity.lastName.length) {
-      if (entity.firstName) {
-        initials += entity.firstName.charAt(0);
-      }
-      if (entity.lastName) {
-        initials += entity.lastName.charAt(0);
-      }
-    } else {
-      initials += entity.email.charAt(0);
-    }
-    return initials.toUpperCase();
   }
 
   getFullName(entity: UserEmailInfo): string {
@@ -218,7 +187,7 @@ export class AlarmAssigneeSelectPanelComponent implements  OnInit, AfterViewInit
   }
 
   getAvatarBgColor(entity: UserEmailInfo) {
-    return this.utilsService.stringToHslColor(this.getUserDisplayName(entity), 40, 60);
+    return this.utilsService.stringToHslColor(this.utilsService.getUserDisplayName(entity), 40, 60);
   }
 
 }

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

@@ -20,10 +20,12 @@
                 subscriptSizing="dynamic">
   <mat-label translate>alarm.assignee</mat-label>
   <input matInput readonly [value]="getAssignee()">
-  <span *ngIf="alarm?.assigneeId" matPrefix class="user-avatar"
+  <span *ngIf="userAssigned; else unassigned" matPrefix class="user-avatar"
-        [style.backgroundColor]="getAvatarBgColor(alarm.assignee)">
+        [style.background-color]="getAvatarBgColor(alarm.assignee)">
     {{ getUserInitials(alarm.assignee) }}
   </span>
-  <mat-icon *ngIf="!alarm?.assigneeId" matPrefix class="unassigned-icon">account_circle</mat-icon>
+  <ng-template #unassigned>
+    <mat-icon matPrefix class="material-icons unassigned-icon">{{ alarm?.assigneeId ? 'no_accounts' : 'account_circle' }}</mat-icon>
+  </ng-template>
   <mat-icon matSuffix>arrow_drop_down</mat-icon>
 </mat-form-field>

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

@@ -25,6 +25,7 @@ import {
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { TranslateService } from '@ngx-translate/core';
+import { isNotEmptyStr } from '@core/utils';
 
 @Component({
   selector: 'tb-alarm-assignee',
@@ -41,6 +42,8 @@ export class AlarmAssigneeComponent {
   @Output()
   alarmReassigned = new EventEmitter<boolean>();
 
+  userAssigned: boolean;
+
   constructor(private utilsService: UtilsService,
               private overlay: Overlay,
               private viewContainerRef: ViewContainerRef,
@@ -49,68 +52,22 @@ export class AlarmAssigneeComponent {
 
   getAssignee() {
     if (this.alarm) {
-      if (this.alarm.assignee) {
+      this.userAssigned = this.alarm.assigneeId && ((isNotEmptyStr(this.alarm.assignee?.firstName) ||
-        return this.getUserDisplayName(this.alarm.assignee);
+        isNotEmptyStr(this.alarm.assignee?.lastName)) || isNotEmptyStr(this.alarm.assignee?.email));
+      if (this.userAssigned) {
+        return this.utilsService.getUserDisplayName(this.alarm.assignee);
       } else {
-        return this.translateService.instant('alarm.unassigned');
+        return this.translateService.instant(this.alarm.assigneeId ? 'alarm.user-deleted' : 'alarm.unassigned');
       }
     }
   }
 
-  getUserDisplayName(entity: AlarmAssignee) {
+  getUserInitials(alarmAssignee: AlarmAssignee): string {
-    let displayName = '';
+    return this.utilsService.getUserInitials(alarmAssignee);
-    if ((entity.firstName && entity.firstName.length > 0) ||
-      (entity.lastName && entity.lastName.length > 0)) {
-      if (entity.firstName) {
-        displayName += entity.firstName;
-      }
-      if (entity.lastName) {
-        if (displayName.length > 0) {
-          displayName += ' ';
-        }
-        displayName += entity.lastName;
-      }
-    } else {
-      displayName = entity.email;
-    }
-    return displayName;
-  }
-
-  getUserInitials(entity: AlarmAssignee): string {
-    let initials = '';
-    if (entity.firstName && entity.firstName.length ||
-      entity.lastName && entity.lastName.length) {
-      if (entity.firstName) {
-        initials += entity.firstName.charAt(0);
-      }
-      if (entity.lastName) {
-        initials += entity.lastName.charAt(0);
-      }
-    } else {
-      initials += entity.email.charAt(0);
-    }
-    return initials.toUpperCase();
-  }
-
-  getFullName(entity: AlarmAssignee): string {
-    let fullName = '';
-    if ((entity.firstName && entity.firstName.length > 0) ||
-      (entity.lastName && entity.lastName.length > 0)) {
-      if (entity.firstName) {
-        fullName += entity.firstName;
-      }
-      if (entity.lastName) {
-        if (fullName.length > 0) {
-          fullName += ' ';
-        }
-        fullName += entity.lastName;
-      }
-    }
-    return fullName;
   }
 
   getAvatarBgColor(entity: AlarmAssignee) {
-    return this.utilsService.stringToHslColor(this.getUserDisplayName(entity), 40, 60);
+    return this.utilsService.stringToHslColor(this.utilsService.getUserDisplayName(entity), 40, 60);
   }
 
   openAlarmAssigneePanel($event: Event, alarm: AlarmInfo) {

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

@@ -69,10 +69,14 @@
                *ngIf="!displayDataElement.edit; else commentEditing"
                (mouseenter)="onCommentMouseEnter(displayDataElement.commentId, i)"
                (mouseleave)="onCommentMouseLeave(i)">
-            <div class="user-avatar" fxLayout="row" fxLayoutAlign="center center" fxFlexAlign="start" fxHide.xs
+            <div *ngIf="displayDataElement.userExists; else userDeleted" class="user-avatar"
+                 fxLayout="row" fxLayoutAlign="center center" fxFlexAlign="start" fxHide.xs
                  [style.background-color]="displayDataElement.avatarBgColor">
               {{ getUserInitials(displayDataElement.displayName) }}
             </div>
+            <ng-template #userDeleted>
+              <mat-icon matPrefix class="mat-icon tb-mat-30" fxHide.xs>no_accounts</mat-icon>
+            </ng-template>
             <div fxFlex fxLayout="column" fxLayoutGap="5px">
               <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
                 <span class="user-name">{{ displayDataElement.displayName }}</span>

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

@@ -86,7 +86,7 @@ $border: 1px solid mat.get-color-from-palette($tb-primary);
         background-color: $primary-color;
         border: $border;
         border-bottom: none;
-        border-radius: 8px 8px 0px 0px;
+        border-radius: 8px 8px 0 0;
 
         &.activity-only {
           border: none;
@@ -94,7 +94,7 @@ $border: 1px solid mat.get-color-from-palette($tb-primary);
 
         &.asc {
           border-bottom: $border;
-          box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08);
+          box-shadow: 0 4px 10px rgba(23, 33, 90, 0.08);
 
           &.activity-only {
             border: none;
@@ -116,7 +116,7 @@ $border: 1px solid mat.get-color-from-palette($tb-primary);
     .comments-container {
       border: $border;
       border-top: none;
-      border-radius: 0px 0px 8px 8px;
+      border-radius: 0 0 8px 8px;
 
       &.activity-only {
         border: none;
@@ -134,6 +134,11 @@ $border: 1px solid mat.get-color-from-palette($tb-primary);
       &:hover {
         background-color: $primary-color;
       }
+
+      .mat-icon {
+        align-self: start;
+        color: rgba(0, 0, 0, 0.38);
+      }
     }
 
     .user-avatar {

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

@@ -21,31 +21,33 @@ import { TranslateService } from '@ngx-translate/core';
 import { AlarmCommentService } from '@core/http/alarm-comment.service';
 import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
 import { DialogService } from '@core/services/dialog.service';
-import { AuthUser, User } from '@shared/models/user.model';
+import { AuthUser } from '@shared/models/user.model';
 import { getCurrentAuthUser, selectUserDetails } from '@core/auth/auth.selectors';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
 import { MAX_SAFE_PAGE_SIZE, PageLink } from '@shared/models/page/page-link';
 import { DateAgoPipe } from '@shared/pipe/date-ago.pipe';
 import { map } from 'rxjs/operators';
-import { AlarmComment, AlarmCommentInfo, AlarmCommentType } from '@shared/models/alarm.models';
+import { AlarmComment, 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 '@shared/import-export/import-export.service';
+import { isNotEmptyStr } from '@core/utils';
 
 interface AlarmCommentsDisplayData {
-  commentId?: string,
+  commentId?: string;
-  displayName?: string,
+  displayName?: string;
-  createdTime: string,
+  createdTime: string;
-  createdDateAgo?: string,
+  createdDateAgo?: string;
-  edit?: boolean,
+  edit?: boolean;
-  isEdited?: boolean,
+  isEdited?: boolean;
   editedTime?: string;
-  editedDateAgo?: string,
+  editedDateAgo?: string;
-  showActions?: boolean,
+  showActions?: boolean;
-  commentText?: string,
+  commentText?: string;
-  isSystemComment?: boolean,
+  isSystemComment?: boolean;
-  avatarBgColor?: string
+  avatarBgColor?: string;
+  userExists?: boolean;
 }
 
 @Component({
@@ -58,7 +60,7 @@ export class AlarmCommentComponent implements OnInit {
   alarmId: string;
 
   @Input()
-  alarmActivityOnly: boolean = false;
+  alarmActivityOnly = false;
 
   authUser: AuthUser;
 
@@ -73,11 +75,11 @@ export class AlarmCommentComponent implements OnInit {
     direction: Direction.DESC
   };
 
-  editMode: boolean = false;
+  editMode = false;
 
   userDisplayName$ = this.store.pipe(
     select(selectUserDetails),
-    map((user) => this.getUserDisplayName(user))
+    map((user) => this.utilsService.getUserDisplayName(user))
   );
 
   currentUserDisplayName: string;
@@ -115,15 +117,18 @@ export class AlarmCommentComponent implements OnInit {
       (pagedData) => {
         this.alarmComments = pagedData.data;
         this.displayData.length = 0;
-        for (let alarmComment of pagedData.data) {
+        for (const alarmComment of pagedData.data) {
-          let displayDataElement = {} as AlarmCommentsDisplayData;
+          const displayDataElement = {} as AlarmCommentsDisplayData;
           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;
           if (alarmComment.type === AlarmCommentType.OTHER) {
             displayDataElement.commentId = alarmComment.id.id;
-            displayDataElement.displayName = this.getUserDisplayName(alarmComment);
+            displayDataElement.userExists = isNotEmptyStr(alarmComment.firstName) || isNotEmptyStr(alarmComment.lastName) ||
+              isNotEmptyStr(alarmComment.email);
+            displayDataElement.displayName = displayDataElement.userExists ? this.utilsService.getUserDisplayName(alarmComment) :
+              this.translate.instant('alarm.user-deleted');
             displayDataElement.edit = false;
             displayDataElement.isEdited = alarmComment.comment.edited;
             displayDataElement.editedTime = this.datePipe.transform(alarmComment.comment.editedOn, 'yyyy-MM-dd HH:mm:ss');
@@ -136,17 +141,17 @@ export class AlarmCommentComponent implements OnInit {
           this.displayData.push(displayDataElement);
         }
       }
-    )
+    );
   }
 
   changeSortDirection() {
-    let currentDirection = this.alarmCommentSortOrder.direction;
+    const currentDirection = this.alarmCommentSortOrder.direction;
     this.alarmCommentSortOrder.direction = currentDirection === Direction.DESC ? Direction.ASC : Direction.DESC;
     this.loadAlarmComments();
   }
 
   exportAlarmActivity() {
-    let fileName = this.translate.instant('alarm.alarm') + '_' + this.translate.instant('alarm-activity.activity');
+    const fileName = this.translate.instant('alarm.alarm') + '_' + this.translate.instant('alarm-activity.activity');
     this.importExportService.exportCsv(this.getDataForExport(), fileName.toLowerCase());
   }
 
@@ -162,7 +167,7 @@ export class AlarmCommentComponent implements OnInit {
         comment: {
           text: commentInputValue
         }
-      }
+      };
       this.doSave(comment);
       this.clearCommentInput();
     }
@@ -185,7 +190,7 @@ export class AlarmCommentComponent implements OnInit {
       () => {
         this.loadAlarmComments();
       }
-    )
+    );
   }
 
   editComment(commentId: string): void {
@@ -217,18 +222,18 @@ export class AlarmCommentComponent implements OnInit {
             .subscribe(() => {
                 this.loadAlarmComments();
               }
-          )
+            );
         }
       }
-    )
+    );
   }
 
   getSortDirectionIcon() {
-    return this.alarmCommentSortOrder.direction === Direction.DESC ? 'mdi:sort-descending' : 'mdi:sort-ascending'
+    return this.alarmCommentSortOrder.direction === Direction.DESC ? 'mdi:sort-descending' : 'mdi:sort-ascending';
   }
 
   getSortDirectionTooltipText() {
-    let text = this.alarmCommentSortOrder.direction === Direction.DESC ? 'alarm-activity.newest-first' :
+    const text = this.alarmCommentSortOrder.direction === Direction.DESC ? 'alarm-activity.newest-first' :
       'alarm-activity.oldest-first';
     return this.translate.instant(text);
   }
@@ -264,25 +269,6 @@ export class AlarmCommentComponent implements OnInit {
     return this.utilsService.stringToHslColor(userDisplayName, 40, 60);
   }
 
-  private getUserDisplayName(alarmCommentInfo: AlarmCommentInfo | User): string {
-    let name = '';
-    if ((alarmCommentInfo.firstName && alarmCommentInfo.firstName.length > 0) ||
-      (alarmCommentInfo.lastName && alarmCommentInfo.lastName.length > 0)) {
-      if (alarmCommentInfo.firstName) {
-        name += alarmCommentInfo.firstName;
-      }
-      if (alarmCommentInfo.lastName) {
-        if (name.length > 0) {
-          name += ' ';
-        }
-        name += alarmCommentInfo.lastName;
-      }
-    } else {
-      name = alarmCommentInfo.email;
-    }
-    return name;
-  }
-
   getAlarmCommentFormControl(): AbstractControl {
     return this.alarmCommentFormGroup.get('alarmComment');
   }
@@ -308,16 +294,16 @@ export class AlarmCommentComponent implements OnInit {
   }
 
   private getDataForExport() {
-    let dataToExport = [];
+    const dataToExport = [];
-    for (let row of this.displayData) {
+    for (const row of this.displayData) {
-      let exportRow = {
+      const 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)
+      dataToExport.push(exportRow);
     }
     return dataToExport;
   }

ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts

@@ -31,13 +31,13 @@ import { forkJoin, Observable } from 'rxjs';
 import { PageData } from '@shared/models/page/page-data';
 import { EntityId } from '@shared/models/id/entity-id';
 import {
+  AlarmAssignee,
   AlarmInfo,
   AlarmQueryV2,
   AlarmSearchStatus,
   alarmSeverityColors,
   alarmSeverityTranslations,
   AlarmsMode,
-  AlarmStatus,
   alarmStatusTranslations
 } from '@app/shared/models/alarm.models';
 import { AlarmService } from '@app/core/http/alarm.service';
@@ -60,7 +60,7 @@ import {
   AlarmAssigneePanelData
 } from '@home/components/alarm/alarm-assignee-panel.component';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { getEntityDetailsPageURL, isDefinedAndNotNull } from '@core/utils';
+import { getEntityDetailsPageURL, isDefinedAndNotNull, isNotEmptyStr } from '@core/utils';
 import { UtilsService } from '@core/services/utils.service';
 import { AlarmFilterConfig } from '@shared/models/query/query.models';
 import { EntityService } from '@core/http/entity.service';
@@ -129,22 +129,15 @@ export class AlarmTableConfig extends EntityTableConfig<AlarmInfo, TimePageLink>
         })));
     this.columns.push(
       new EntityTableColumn<AlarmInfo>('assignee', 'alarm.assignee', '240px',
-        (entity) => {
+        (entity) => this.getAssigneeTemplate(entity), () => ({}), false, () => ({}), () => undefined, false,
-          return this.getAssigneeTemplate(entity)
-        },
-        () => ({}),
-        false,
-        () => ({}),
-        (entity) => undefined,
-        false,
         {
           icon: 'keyboard_arrow_down',
           type: CellActionDescriptorType.DEFAULT,
-          isEnabled: (entity) => true,
+          isEnabled: () => true,
           name: this.translate.instant('alarm.assign'),
           onAction: ($event, entity) => this.openAlarmAssigneePanel($event, entity)
         })
-    )
+    );
     this.columns.push(
       new EntityTableColumn<AlarmInfo>('status', 'alarm.status', '25%',
         (entity) => this.translate.instant(alarmStatusTranslations.get(entity.status))));
@@ -177,7 +170,7 @@ export class AlarmTableConfig extends EntityTableConfig<AlarmInfo, TimePageLink>
         isEnabled: true,
         onAction: ($event, entities) => this.deleteAlarms($event, entities)
       }
-    )
+    );
   }
 
   fetchAlarms(pageLink: TimePageLink): Observable<PageData<AlarmInfo>> {
@@ -216,61 +209,32 @@ export class AlarmTableConfig extends EntityTableConfig<AlarmInfo, TimePageLink>
   }
 
   getAssigneeTemplate(entity: AlarmInfo): string {
-    return `
+    const hasAssigneeId = isDefinedAndNotNull(entity.assigneeId);
-      <span class="assignee-cell">
+    let templateContent: string;
-      ${isDefinedAndNotNull(entity.assigneeId) ?
+
-        `<span class="assigned-container">
+    if (hasAssigneeId && ((isNotEmptyStr(entity.assignee?.firstName) || isNotEmptyStr(entity.assignee?.lastName)) ||
-          <span class="user-avatar" style="background-color: ${this.getAvatarBgColor(entity)}">
+      isNotEmptyStr(entity.assignee?.email))) {
-            ${this.getUserInitials(entity)}
+      templateContent = `
+        <span class="assigned-container">
+         <span class="user-avatar" style="background-color: ${this.getAvatarBgColor(entity.assignee)}">
+           ${this.utilsService.getUserInitials(entity.assignee)}
          </span>
-          <span class="user-display-name">${this.getUserDisplayName(entity)}</span>
+         <span class="user-display-name">${this.utilsService.getUserDisplayName(entity.assignee)}</span>
-        </span>`
+        </span>`;
-        :
-        `<span class="unassigned-container">
-          <mat-icon class="material-icons unassigned-icon">account_circle</mat-icon>
-          <span>${this.translate.instant('alarm.unassigned')}</span>
-        </span>`
-      }
-      </span>`
-  }
-
-  getUserDisplayName(entity: AlarmInfo) {
-    let displayName = '';
-    if ((entity.assignee.firstName && entity.assignee.firstName.length > 0) ||
-      (entity.assignee.lastName && entity.assignee.lastName.length > 0)) {
-      if (entity.assignee.firstName) {
-        displayName += entity.assignee.firstName;
-      }
-      if (entity.assignee.lastName) {
-        if (displayName.length > 0) {
-          displayName += ' ';
-        }
-        displayName += entity.assignee.lastName;
-      }
     } else {
-      displayName = entity.assignee.email;
+      templateContent = `
+        <span class="unassigned-container">
+         <mat-icon class="material-icons unassigned-icon">
+           ${hasAssigneeId ? 'no_accounts' : 'account_circle'}
+         </mat-icon>
+         <span>${this.translate.instant(hasAssigneeId ? 'alarm.user-deleted' : 'alarm.unassigned')}</span>
+        </span>`;
     }
-    return displayName;
+    return `<span class="assignee-cell">${templateContent}</span>`;
   }
 
-  getUserInitials(entity: AlarmInfo): string {
+  getAvatarBgColor(alarmAssignee: AlarmAssignee) {
-    let initials = '';
+    return this.utilsService.stringToHslColor(this.utilsService.getUserDisplayName(alarmAssignee), 40, 60);
-    if (entity.assignee.firstName && entity.assignee.firstName.length ||
-      entity.assignee.lastName && entity.assignee.lastName.length) {
-      if (entity.assignee.firstName) {
-        initials += entity.assignee.firstName.charAt(0);
-      }
-      if (entity.assignee.lastName) {
-        initials += entity.assignee.lastName.charAt(0);
-      }
-    } else {
-      initials += entity.assignee.email.charAt(0);
-    }
-    return initials.toUpperCase();
-  }
-
-  getAvatarBgColor(entity: AlarmInfo) {
-    return this.utilsService.stringToHslColor(this.getUserDisplayName(entity), 40, 60);
   }
 
   openAlarmAssigneePanel($event: Event, entity: AlarmInfo) {
@@ -312,7 +276,7 @@ export class AlarmTableConfig extends EntityTableConfig<AlarmInfo, TimePageLink>
       this.viewContainerRef, injector));
     componentRef.onDestroy(() => {
       if (componentRef.instance.reassigned) {
-        this.updateData()
+        this.updateData();
       }
     });
   }

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

@@ -88,24 +88,24 @@
             <span [innerHTML]="cellContent(alarm, column, row)"></span>
             <ng-container *ngIf="column.entityKey.key === 'assignee'">
               <span class="assignee-cell" fxLayout="row" fxLayoutAlign="start center">
-                <span *ngIf="alarm.assigneeId" class="assigned-container">
+                <span *ngIf="alarm.assigneeId && checkAssigneeHasName(alarm.assignee); else unassigned"
-                  <span class="user-avatar" [style.backgroundColor]="getAvatarBgColor(alarm)">
+                      class="assigned-container">
-                    {{ getUserInitials(alarm) }}
+                  <span class="user-avatar" [style.backgroundColor]="getAvatarBgColor(alarm.assignee)">
+                    {{ getUserInitials(alarm.assignee) }}
                   </span>
-                  <span [matTooltip]="getUserDisplayName(alarm)"
+                  <span [matTooltip]="getUserDisplayName(alarm.assignee)" matTooltipPosition="above">
-                        matTooltipPosition="above">
+                    {{ getUserDisplayName(alarm.assignee) }}
-                    {{ getUserDisplayName(alarm) }}
                   </span>
                 </span>
-                <span *ngIf="!alarm.assigneeId" class="unassigned-container">
+                <ng-template #unassigned>
-                  <mat-icon class="material-icons unassigned-icon">account_circle</mat-icon>
+                  <span class="unassigned-container">
-                  <span matTooltip="{{ 'alarm.unassigned' | translate }}"
+                    <mat-icon class="material-icons unassigned-icon">{{ alarm.assigneeId ? 'no_accounts' : 'account_circle' }}</mat-icon>
-                        matTooltipPosition="above"
+                    <span matTooltip="{{ (alarm.assigneeId ? 'alarm.user-deleted' : 'alarm.unassigned') | translate }}"
-                        style="vertical-align: middle"
+                          matTooltipPosition="above" style="vertical-align: middle">
-                        translate>
+                      {{ (alarm.assigneeId ? 'alarm.user-deleted' : 'alarm.unassigned') | translate }}
-                    alarm.unassigned
                     </span>
                   </span>
+                </ng-template>
                 <button *ngIf="allowAssign"
                         mat-icon-button [disabled]="isLoading$ | async"
                         matTooltip="{{ 'alarm.assign' | translate }}"

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

@@ -37,7 +37,16 @@ import { DataKey, WidgetActionDescriptor, WidgetConfig } from '@shared/models/wi
 import { IWidgetSubscription } from '@core/api/widget-api.models';
 import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
-import { deepClone, hashCode, isDefined, isDefinedAndNotNull, isNumber, isObject, isUndefined } from '@core/utils';
+import {
+  deepClone,
+  hashCode,
+  isDefined,
+  isDefinedAndNotNull,
+  isNotEmptyStr,
+  isNumber,
+  isObject,
+  isUndefined
+} from '@core/utils';
 import cssjs from '@core/css/css';
 import { sortItems } from '@shared/models/page/page-link';
 import { Direction } from '@shared/models/page/sort-order';
@@ -83,7 +92,14 @@ import {
   DisplayColumnsPanelComponent,
   DisplayColumnsPanelData
 } from '@home/components/widget/lib/display-columns-panel.component';
-import { AlarmDataInfo, alarmFields, AlarmInfo, alarmSeverityColors, AlarmStatus } from '@shared/models/alarm.models';
+import {
+  AlarmAssignee,
+  AlarmDataInfo,
+  alarmFields,
+  AlarmInfo,
+  alarmSeverityColors,
+  AlarmStatus
+} from '@shared/models/alarm.models';
 import { DatePipe } from '@angular/common';
 import {
   AlarmDetailsDialogComponent,
@@ -1097,43 +1113,21 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     this.rowStyleCache.length = 0;
   }
 
-  getUserDisplayName(entity: AlarmInfo) {
+  checkAssigneeHasName(alarmAssignee: AlarmAssignee): boolean {
-    let displayName = '';
+    return (isNotEmptyStr(alarmAssignee?.firstName) || isNotEmptyStr(alarmAssignee?.lastName)) ||
-    if ((entity.assignee.firstName && entity.assignee.firstName.length > 0) ||
+      isNotEmptyStr(alarmAssignee?.email);
-      (entity.assignee.lastName && entity.assignee.lastName.length > 0)) {
-      if (entity.assignee.firstName) {
-        displayName += entity.assignee.firstName;
-      }
-      if (entity.assignee.lastName) {
-        if (displayName.length > 0) {
-          displayName += ' ';
-        }
-        displayName += entity.assignee.lastName;
-      }
-    } else {
-      displayName = entity.assignee.email;
-    }
-    return displayName;
   }
 
-  getUserInitials(entity: AlarmInfo): string {
+  getUserDisplayName(alarmAssignee: AlarmAssignee) {
-    let initials = '';
+    return this.utils.getUserDisplayName(alarmAssignee);
-    if (entity.assignee.firstName && entity.assignee.firstName.length ||
-      entity.assignee.lastName && entity.assignee.lastName.length) {
-      if (entity.assignee.firstName) {
-        initials += entity.assignee.firstName.charAt(0);
-      }
-      if (entity.assignee.lastName) {
-        initials += entity.assignee.lastName.charAt(0);
-      }
-    } else {
-      initials += entity.assignee.email.charAt(0);
-    }
-    return initials.toUpperCase();
   }
 
-  getAvatarBgColor(entity: AlarmInfo) {
+  getUserInitials(alarmAssignee: AlarmAssignee): string {
-    return this.utils.stringToHslColor(this.getUserDisplayName(entity), 40, 60);
+    return this.utils.getUserInitials(alarmAssignee);
+  }
+
+  getAvatarBgColor(alarmAssignee: AlarmAssignee) {
+    return this.utils.stringToHslColor(this.getUserDisplayName(alarmAssignee), 40, 60);
   }
 
   openAlarmAssigneePanel($event: Event, entity: AlarmInfo) {

ui-ngx/src/app/shared/models/alarm.models.ts

@@ -127,7 +127,7 @@ export interface AlarmComment extends BaseData<AlarmCommentId> {
     text: string;
     edited?: boolean;
     editedOn?: number;
-  }
+  };
 }
 
 export interface AlarmCommentInfo extends AlarmComment {
@@ -173,9 +173,9 @@ export const simulatedAlarm: AlarmInfo = {
   originatorName: 'Simulated',
   originatorLabel: 'Simulated',
   assignee: {
-    firstName: "",
+    firstName: '',
-    lastName: "",
+    lastName: '',
-    email: "test@example.com",
+    email: 'test@example.com',
   },
   originator: {
     entityType: EntityType.DEVICE,

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

@@ -594,6 +594,7 @@
         "assignee-last-name": "Assignee last name",
         "assignee-email": "Assignee email",
         "unassigned": "Unassigned",
+        "user-deleted": "User deleted",
         "assignee-not-set": "All",
         "status": "Status",
         "alarm-details": "Alarm details",

ui-ngx/src/styles.scss

@@ -912,6 +912,9 @@ mat-icon {
     &.tb-mat-28 {
       @include tb-mat-icon-size(28);
     }
+    &.tb-mat-30 {
+      @include tb-mat-icon-size(30);
+    }
     &.tb-mat-32 {
       @include tb-mat-icon-size(32);
     }