diff --git a/ui-ngx/src/app/core/http/user.service.ts b/ui-ngx/src/app/core/http/user.service.ts index 0a7d2054e4..9a6b70ce29 100644 --- a/ui-ngx/src/app/core/http/user.service.ts +++ b/ui-ngx/src/app/core/http/user.service.ts @@ -16,7 +16,7 @@ import { Injectable } from '@angular/core'; import { defaultHttpOptionsFromConfig, RequestConfig } from './http-utils'; -import { User } from '@shared/models/user.model'; +import { User, UserEmailInfo } from '@shared/models/user.model'; import { Observable } from 'rxjs'; import { HttpClient, HttpParams } from '@angular/common/http'; import { PageLink } from '@shared/models/page/page-link'; @@ -84,4 +84,8 @@ export class UserService { return this.http.post(url, null, defaultHttpOptionsFromConfig(config)); } + public findUsersByQuery(pageLink: PageLink, config?: RequestConfig) : Observable> { + return this.http.get>(`/api/users/info${pageLink.toQuery()}`, defaultHttpOptionsFromConfig(config)); + } + } diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html index 262a45e435..2213be1835 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html @@ -36,9 +36,10 @@ -
- - +
+ +
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.scss b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.scss index 462df2e0d2..c76aedbb18 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.scss +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.scss @@ -76,19 +76,22 @@ background-color: #5cb445; width: 28px; height: 28px; + min-width: 28px; + min-height: 28px; color: white; font-size: 13px; font-weight: 700 } - .user-email { - color: rgba(0, 0, 0, 0.76); - overflow: hidden; - text-overflow: ellipsis; - max-width: 185px - } - .user-name { - color: rgba(0, 0, 0, 0.38); - font-size: 13px; + .user-display-name { + max-width: 180px; + span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + span + span { + color: rgba(0, 0, 0, 0.38); + } } .mat-option-text { display: flex; diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.ts index 910a6f57c0..32d6c2a1da 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.ts +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.ts @@ -34,7 +34,7 @@ import { switchMap, takeUntil, } from 'rxjs/operators'; -import { User } from '@shared/models/user.model'; +import { User, UserEmailInfo } from '@shared/models/user.model'; import { TranslateService } from '@ngx-translate/core'; import { UserService } from '@core/http/user.service'; import { PageLink } from '@shared/models/page/page-link'; @@ -69,7 +69,7 @@ export class AlarmAssigneePanelComponent implements OnInit, AfterViewInit, OnDe @ViewChild('userInput', {static: true}) userInput: ElementRef; - filteredUsers: Observable>; + filteredUsers: Observable>; searchText = ''; @@ -138,15 +138,15 @@ export class AlarmAssigneePanelComponent implements OnInit, AfterViewInit, OnDe () => this.overlayRef.dispose()); } - fetchUsers(searchText?: string): Observable> { + fetchUsers(searchText?: string): Observable> { this.searchText = searchText; const pageLink = new PageLink(50, 0, searchText, { property: 'email', direction: Direction.ASC }); - return this.userService.getUsers(pageLink, {ignoreLoading: true}) + return this.userService.findUsersByQuery(pageLink, {ignoreLoading: true}) .pipe( - catchError(() => of(emptyPageData())), + catchError(() => of(emptyPageData())), map(pageData => { return pageData.data; }) diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.ts index 2e97ce7405..d609bef616 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.ts @@ -88,9 +88,6 @@ export class AlarmDetailsDialogComponent extends DialogComponent 0) || - (entity.assigneeLastName && entity.assigneeLastName.length > 0)) { - if (entity.assigneeFirstName) { - displayName += entity.assigneeFirstName; + 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.assigneeLastName) { + if (entity.assignee.lastName) { if (displayName.length > 0) { displayName += ' '; } - displayName += entity.assigneeLastName; + displayName += entity.assignee.lastName; } } else { - displayName = entity.assigneeEmail; + displayName = entity.assignee.email; } return displayName; } getUserInitials(entity: AlarmInfo): string { let initials = ''; - if (entity.assigneeFirstName && entity.assigneeFirstName.length || - entity.assigneeLastName && entity.assigneeLastName.length) { - if (entity.assigneeFirstName) { - initials += entity.assigneeFirstName.charAt(0); + 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.assigneeLastName) { - initials += entity.assigneeLastName.charAt(0); + if (entity.assignee.lastName) { + initials += entity.assignee.lastName.charAt(0); } } else { - initials += entity.assigneeEmail.charAt(0); + initials += entity.assignee.email.charAt(0); } return initials.toUpperCase(); } diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts index f29dae1926..645841f188 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts @@ -116,7 +116,7 @@ export class AlarmTableConfig extends EntityTableConfig color: alarmSeverityColors.get(entity.severity) }))); this.columns.push( - new EntityTableColumn('assigneeEmail', 'alarm.assignee', '200px', + new EntityTableColumn('assignee', 'alarm.assignee', '200px', (entity) => { return this.getAssigneeTemplate(entity) }, @@ -190,7 +190,7 @@ export class AlarmTableConfig extends EntityTableConfig ${this.getUserInitials(entity)} - ${this.getUserDisplayName(entity)} + ${this.getUserDisplayName(entity)} ` : `account_circle @@ -201,35 +201,35 @@ export class AlarmTableConfig extends EntityTableConfig getUserDisplayName(entity: AlarmInfo) { let displayName = ''; - if ((entity.assigneeFirstName && entity.assigneeFirstName.length > 0) || - (entity.assigneeLastName && entity.assigneeLastName.length > 0)) { - if (entity.assigneeFirstName) { - displayName += entity.assigneeFirstName; + 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.assigneeLastName) { + if (entity.assignee.lastName) { if (displayName.length > 0) { displayName += ' '; } - displayName += entity.assigneeLastName; + displayName += entity.assignee.lastName; } } else { - displayName = entity.assigneeEmail; + displayName = entity.assignee.email; } return displayName; } getUserInitials(entity: AlarmInfo): string { let initials = ''; - if (entity.assigneeFirstName && entity.assigneeFirstName.length || - entity.assigneeLastName && entity.assigneeLastName.length) { - if (entity.assigneeFirstName) { - initials += entity.assigneeFirstName.charAt(0); + 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.assigneeLastName) { - initials += entity.assigneeLastName.charAt(0); + if (entity.assignee.lastName) { + initials += entity.assignee.lastName.charAt(0); } } else { - initials += entity.assigneeEmail.charAt(0); + initials += entity.assignee.email.charAt(0); } return initials.toUpperCase(); } diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.scss b/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.scss index b6dcfdecea..a7a408b419 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.scss +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-table.component.scss @@ -22,6 +22,10 @@ justify-content: flex-start; align-items: center; .assigned-container { + max-width: 180px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; .user-avatar { display: inline-flex; justify-content: center; @@ -30,6 +34,8 @@ border-radius: 50%; width: 28px; height: 28px; + min-width: 28px; + min-height: 28px; color: white; font-size: 13px; font-weight: 700; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html index def95c93f9..694a96047e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html @@ -84,20 +84,23 @@ - + {{ getUserInitials(alarm) }} - {{ getUserDisplayName(alarm) }} + {{ getUserDisplayName(alarm) }} account_circle alarm.unassigned -