diff --git a/application/src/main/data/json/system/widget_bundles/alarm_widgets.json b/application/src/main/data/json/system/widget_bundles/alarm_widgets.json index e7a97b36f8..16a155cebb 100644 --- a/application/src/main/data/json/system/widget_bundles/alarm_widgets.json +++ b/application/src/main/data/json/system/widget_bundles/alarm_widgets.json @@ -23,7 +23,7 @@ "dataKeySettingsSchema": "", "settingsDirective": "tb-alarms-table-widget-settings", "dataKeySettingsDirective": "tb-alarms-table-key-settings", - "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSelection\":true,\"enableSearch\":true,\"displayDetails\":true,\"allowAcknowledgment\":true,\"allowClear\":true,\"allowAssign\":true,\"displayComments\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"-createdTime\",\"enableSelectColumnDisplay\":true,\"enableStickyAction\":false,\"enableFilter\":true},\"title\":\"Alarms table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"alarmSource\":{\"type\":\"function\",\"dataKeys\":[{\"name\":\"createdTime\",\"type\":\"alarm\",\"label\":\"Created time\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.021092237451093787},{\"name\":\"originator\",\"type\":\"alarm\",\"label\":\"Originator\",\"color\":\"#4caf50\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.2780007688856758},{\"name\":\"type\",\"type\":\"alarm\",\"label\":\"Type\",\"color\":\"#f44336\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.7323586880398418},{\"name\":\"severity\",\"type\":\"alarm\",\"label\":\"Severity\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":false,\"useCellContentFunction\":false},\"_hash\":0.09927019860088193},{\"name\":\"status\",\"type\":\"alarm\",\"label\":\"Status\",\"color\":\"#607d8b\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6588418951443418},{\"name\":\"assignee\",\"type\":\"alarm\",\"label\":\"Assignee\",\"color\":\"#9c27b0\",\"settings\":{},\"_hash\":0.5008441077416634}],\"entityAliasId\":null,\"name\":\"alarms\"},\"alarmSearchStatus\":\"ANY\",\"alarmsPollingInterval\":5,\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{},\"alarmStatusList\":[],\"alarmSeverityList\":[],\"alarmTypeList\":[],\"searchPropagatedAlarms\":false}" + "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSelection\":true,\"enableSearch\":true,\"displayDetails\":true,\"allowAcknowledgment\":true,\"allowClear\":true,\"allowAssign\":true,\"displayActivity\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"-createdTime\",\"enableSelectColumnDisplay\":true,\"enableStickyAction\":false,\"enableFilter\":true},\"title\":\"Alarms table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"alarmSource\":{\"type\":\"function\",\"dataKeys\":[{\"name\":\"createdTime\",\"type\":\"alarm\",\"label\":\"Created time\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.021092237451093787},{\"name\":\"originator\",\"type\":\"alarm\",\"label\":\"Originator\",\"color\":\"#4caf50\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.2780007688856758},{\"name\":\"type\",\"type\":\"alarm\",\"label\":\"Type\",\"color\":\"#f44336\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.7323586880398418},{\"name\":\"severity\",\"type\":\"alarm\",\"label\":\"Severity\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":false,\"useCellContentFunction\":false},\"_hash\":0.09927019860088193},{\"name\":\"status\",\"type\":\"alarm\",\"label\":\"Status\",\"color\":\"#607d8b\",\"settings\":{\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6588418951443418},{\"name\":\"assignee\",\"type\":\"alarm\",\"label\":\"Assignee\",\"color\":\"#9c27b0\",\"settings\":{},\"_hash\":0.5008441077416634}],\"entityAliasId\":null,\"name\":\"alarms\"},\"alarmSearchStatus\":\"ANY\",\"alarmsPollingInterval\":5,\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{},\"alarmStatusList\":[],\"alarmSeverityList\":[],\"alarmTypeList\":[],\"searchPropagatedAlarms\":false}" } } ] 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 f6ba02e7a0..f01c550444 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 @@ -25,8 +25,7 @@ + (optionSelected)="selected($event)"> account_circle alarm.unassigned 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 a10848cc70..5472d60495 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 @@ -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{ @@ -37,7 +37,6 @@ .tb-assignee-autocomplete { &.tb-assignee-autocomplete.mat-mdc-autocomplete-panel { position: relative; - left: -8px; margin-top: 8px; box-shadow: none !important; } @@ -58,17 +57,16 @@ align-items: center; margin-right: 8px; border-radius: 50%; - background-color: #5cb445; width: 28px; 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; @@ -79,8 +77,8 @@ } } .mdc-list-item__primary-text { + width: 100%; display: flex; - justify-content: start; align-items: center; line-height: normal; } 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 bd50beef31..bca84bc8a3 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 @@ -65,6 +65,8 @@ export class AlarmAssigneePanelComponent implements OnInit, AfterViewInit, OnDe assigneeId?: string; + reassigned: boolean = false; + selectUserFormGroup: FormGroup; @ViewChild('userInput', {static: true}) userInput: ElementRef; @@ -130,12 +132,18 @@ export class AlarmAssigneePanelComponent implements OnInit, AfterViewInit, OnDe assign(user: User): void { this.alarmService.assignAlarm(this.alarmId, user.id.id, {ignoreLoading: true}).subscribe( - () => this.overlayRef.dispose()); + () => { + this.reassigned = true; + this.overlayRef.dispose() + }); } unassign(): void { this.alarmService.unassignAlarm(this.alarmId, {ignoreLoading: true}).subscribe( - () => this.overlayRef.dispose()); + () => { + this.reassigned = true; + this.overlayRef.dispose() + }); } fetchUsers(searchText?: string): Observable> { diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html index 52066ff3ac..dd4c8ee1d9 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.html @@ -16,28 +16,15 @@ --> -
- - - {{ getUserInitials(alarm.assignee) }} - - - {{ getUserDisplayName(alarm.assignee) }} - + + alarm.assignee + + + {{ getUserInitials(alarm.assignee) }} - - account_circle - alarm.unassigned - - -
+ account_circle + arrow_drop_down + diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.scss b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.scss index 935ac2f32d..82f10650cf 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.scss +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.scss @@ -14,36 +14,29 @@ * limitations under the License. */ -:host { - .tb-assignee { - cursor: pointer; - max-width: 273px; - - .assigned-container { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; +.user-avatar { + display: inline-flex; + justify-content: center; + align-items: center; + border-radius: 50%; + width: 28px; + height: 28px; + min-width: 28px; + min-height: 28px; + color: white; + font-size: 13px; + font-weight: 700; + margin-left: 12px; + margin-right: 20px; +} - .user-avatar { - display: inline-flex; - justify-content: center; - align-items: center; - border-radius: 50%; - width: 28px; - height: 28px; - min-width: 28px; - min-height: 28px; - color: white; - font-size: 13px; - font-weight: 700; - } - } - .material-icons.unassigned-icon { - width: 28px; - height: 28px; - font-size: 28px; - color: rgba(0, 0, 0, 0.38); - overflow: visible; - } - } +.unassigned-icon { + width: 28px; + height: 28px; + font-size: 28px; + color: rgba(0, 0, 0, 0.38); + overflow: visible; + margin-left: 12px; + margin-right: 20px; + padding: 0; } diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.ts index 5d7f29d55b..1fb1d3f689 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.ts +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-assignee.component.ts @@ -14,17 +14,17 @@ /// limitations under the License. /// -import { - Component, EventEmitter, Injector, Input, Output, StaticProvider, ViewContainerRef -} from '@angular/core'; +import { Component, EventEmitter, Injector, Input, Output, StaticProvider, ViewContainerRef } from '@angular/core'; import { UtilsService } from '@core/services/utils.service'; import { AlarmAssignee, AlarmInfo } from '@shared/models/alarm.models'; import { - ALARM_ASSIGNEE_PANEL_DATA, AlarmAssigneePanelComponent, + ALARM_ASSIGNEE_PANEL_DATA, + AlarmAssigneePanelComponent, AlarmAssigneePanelData } from '@home/components/alarm/alarm-assignee-panel.component'; import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; import { ComponentPortal } from '@angular/cdk/portal'; +import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'tb-alarm-assignee', @@ -35,12 +35,26 @@ export class AlarmAssigneeComponent { @Input() alarm: AlarmInfo; + @Input() + allowAssign: boolean; + @Output() alarmReassigned = new EventEmitter(); constructor(private utilsService: UtilsService, private overlay: Overlay, - private viewContainerRef: ViewContainerRef) { + private viewContainerRef: ViewContainerRef, + private translateService: TranslateService) { + } + + getAssignee() { + if (this.alarm) { + if (this.alarm.assignee) { + return this.getUserDisplayName(this.alarm.assignee); + } else { + return this.translateService.instant('alarm.unassigned'); + } + } } getUserDisplayName(entity: AlarmAssignee) { @@ -103,39 +117,41 @@ export class AlarmAssigneeComponent { if ($event) { $event.stopPropagation(); } - const target = $event.target || $event.srcElement || $event.currentTarget; - const config = new OverlayConfig(); - config.backdropClass = 'cdk-overlay-transparent-backdrop'; - config.hasBackdrop = true; - const connectedPosition: ConnectedPosition = { - originX: 'end', - originY: 'bottom', - overlayX: 'end', - overlayY: 'top' - }; - config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement) - .withPositions([connectedPosition]); - config.minWidth = '260px'; - const overlayRef = this.overlay.create(config); - overlayRef.backdropClick().subscribe(() => { - overlayRef.dispose(); - }); - const providers: StaticProvider[] = [ - { - provide: ALARM_ASSIGNEE_PANEL_DATA, - useValue: { - alarmId: alarm.id.id, - assigneeId: alarm.assigneeId?.id - } as AlarmAssigneePanelData - }, - { - provide: OverlayRef, - useValue: overlayRef - } - ]; - const injector = Injector.create({parent: this.viewContainerRef.injector, providers}); - overlayRef.attach(new ComponentPortal(AlarmAssigneePanelComponent, - this.viewContainerRef, injector)).onDestroy(() => this.alarmReassigned.emit(true)); + if (this.allowAssign) { + const target = $event.currentTarget; + const config = new OverlayConfig(); + config.backdropClass = 'cdk-overlay-transparent-backdrop'; + config.hasBackdrop = true; + const connectedPosition: ConnectedPosition = { + originX: 'center', + originY: 'bottom', + overlayX: 'center', + overlayY: 'top' + }; + config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement) + .withPositions([connectedPosition]); + config.width = (target as HTMLElement).offsetWidth; + const overlayRef = this.overlay.create(config); + overlayRef.backdropClick().subscribe(() => { + overlayRef.dispose(); + }); + const providers: StaticProvider[] = [ + { + provide: ALARM_ASSIGNEE_PANEL_DATA, + useValue: { + alarmId: alarm.id.id, + assigneeId: alarm.assigneeId?.id + } as AlarmAssigneePanelData + }, + { + provide: OverlayRef, + useValue: overlayRef + } + ]; + const injector = Injector.create({parent: this.viewContainerRef.injector, providers}); + overlayRef.attach(new ComponentPortal(AlarmAssigneePanelComponent, + this.viewContainerRef, injector)).onDestroy(() => this.alarmReassigned.emit(true)); + } } } diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html index 94f8f47eb1..d7e3366a35 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html @@ -17,11 +17,8 @@ -->
-

{{ 'alarm.comments' | translate }}

- @@ -29,16 +26,8 @@
- +
-
- -
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.ts index 026ebae8c0..0aa568bdd0 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.ts @@ -25,7 +25,6 @@ import { AlarmInfo } from '@shared/models/alarm.models'; export interface AlarmCommentDialogData { alarmId?: string; alarm?: AlarmInfo; - commentsHeaderEnabled: boolean; } @Component({ @@ -37,14 +36,11 @@ export class AlarmCommentDialogComponent extends DialogComponent, protected router: Router, @Inject(MAT_DIALOG_DATA) public data: AlarmCommentDialogData, public dialogRef: MatDialogRef) { super(store, router, dialogRef); - this.commentsHeaderEnabled = this.data.commentsHeaderEnabled this.alarmId = this.data.alarmId; } diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html index 91b4871d86..ac2bb73d05 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html @@ -17,129 +17,147 @@ -->
-
- - {{ 'alarm-comment.comments' | translate }} - -
- - +
+
+ + alarm-activity.activity + +
+ + + +
-
- +
+ -
-
- - {{ displayDataElement.commentText }} - - - {{ displayDataElement.createdDateAgo }} - -
- -
-
- {{ getUserInitials(displayDataElement.displayName) }} -
-
-
- {{ displayDataElement.displayName }} - - edited {{ displayDataElement.editedDateAgo }} - - - {{ displayDataElement.createdDateAgo }} - -
- {{ displayDataElement.commentText }} -
-
- - -
+
+
+
+ + {{ displayDataElement.commentText }} + + + {{ displayDataElement.createdDateAgo }} +
- -
-
+
+
{{ getUserInitials(displayDataElement.displayName) }}
- - -
- - +
+
+ {{ displayDataElement.displayName }} + + {{ displayDataElement.createdDateAgo }} + + + Edited +
- + {{ displayDataElement.commentText }} +
+
+ + +
+ +
+
+ {{ getUserInitials(displayDataElement.displayName) }} +
+ + +
+ + +
+ +
+ - +
-
-
- {{ getUserInitials(userDisplayName) }} -
- +
+
+
+ {{ getUserInitials(userDisplayName) }} +
+ - - + + +
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.scss b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.scss index 3cd97767a2..c7b0d65353 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.scss +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.scss @@ -13,69 +13,182 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@use '@angular/material' as mat; +@import '../theme.scss'; + +$primary-color: rgba(mat.get-color-from-palette($tb-primary, 50), 0.4); +$border: 1px solid mat.get-color-from-palette($tb-primary); + :host { .tb-alarm-comments { - padding: 16px 24px 24px 24px; - background-color: #fafafa; + background-color: $primary-color; max-width: 600px; + width: 100%; - &-header { - background-color: #fafafa; + .comment-input { position: sticky; - top: -25px; z-index: 1; - margin-bottom: 10px; - &-title { - color: rgba(0, 0, 0, 0.76); - letter-spacing: 0.25px; - font-weight: 500; + .inner-wrap { + border: $border; + padding: 0 24px; + background-color: $primary-color; } - .mat-icon { - color: rgba(0, 0, 0, 0.38); + &.oldest-first { + bottom: -24px; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.04); + + .inner-wrap { + border-radius: 0 0 8px 8px; + } + + &.activity-only { + bottom: -1px; + + .inner-wrap { + border: none + } + } + } + + &.newest-first { + top: 24px; + box-shadow: 0 8px 10px rgba(23, 33, 90, 0.08); + + .inner-wrap { + border-top: none; + } + + &.activity-only { + top: 48px; + box-shadow: 0 8px 10px rgba(23, 33, 90, 0.08); + + .inner-wrap { + border: none; + } + } + } + } + + .header { + z-index: 1; + position: sticky; + top: -24px; + background-color: white; + + &.activity-only { + top: 0; + } + + &-container { + padding: 0 24px; + background-color: $primary-color; + border: $border; + border-bottom: none; + border-radius: 8px 8px 0px 0px; + + &.activity-only { + border: none; + } + + &.asc { + border-bottom: $border; + box-shadow: 0px 4px 10px rgba(23, 33, 90, 0.08); + + &.activity-only { + border: none; + } + } + + .header-title { + color: rgba(0, 0, 0, 0.76); + letter-spacing: 0.25px; + font-weight: 500; + } + + .mat-icon { + color: rgba(0, 0, 0, 0.38); + } + } + } + + .comments-container { + border: $border; + border-top: none; + border-radius: 0px 0px 8px 8px; + + &.activity-only { + border: none; + } + + &.asc { + border-bottom: none; + border-radius: unset; + } + } + + .user-comment { + padding: 4px; + border-radius: 8px; + &:hover { + background-color: $primary-color; } } - &-user-avatar { + .user-avatar { width: 28px; min-width: 28px; height: 28px; min-height: 28px; border-radius: 50%; font-weight: 700; - color: #FFFFFF; + color: white; font-size: 13px; } - &-user-name { + .user-name { font-size: 16px; color: rgba(0, 0, 0, 0.76); font-weight: 500; letter-spacing: 0.25px; } - &-time { + .time { font-size: 14px; font-weight: 400; color: rgba(0, 0, 0, 0.38); - letter-spacing: 0.2px + letter-spacing: 0.2px; + border-radius: 16px; + padding: 0 3px; + &:hover { + background: rgba(0, 0, 0, 0.04); + } } - &-system-text { - color: rgba(0, 0, 0, 0.38); + .system-comment { + margin-left: 38px; + @media #{$mat-xs} { + margin-left: 0; + } + } + + .system-text { font-weight: 500; + font-size: 14px; letter-spacing: 0.25px; + color: rgba(0, 0, 0, 0.38); } - &-text { + .text { white-space: pre-line; word-break: break-word; - color: rgba(0, 0, 0, 0.54); + font-size: 16px; letter-spacing: 0.15px; + color: rgba(0, 0, 0, 0.54); } - &-action-buttons { + .action-buttons { visibility: hidden; .mat-icon { color: rgba(0, 0, 0, 0.38); diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts index 6e32979a14..5ba3c39a81 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts @@ -30,13 +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: string, createdDateAgo?: string, edit?: boolean, isEdited?: boolean, + editedTime?: string; editedDateAgo?: string, showActions?: boolean, commentText?: string, @@ -54,7 +58,7 @@ export class AlarmCommentComponent implements OnInit { alarmId: string; @Input() - commentsHeaderEnabled: boolean = true; + alarmActivityOnly: boolean = false; authUser: AuthUser; @@ -85,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); @@ -110,7 +116,8 @@ export class AlarmCommentComponent implements OnInit { this.alarmComments = pagedData.data; this.displayData.length = 0; for (let alarmComment of pagedData.data) { - let displayDataElement: AlarmCommentsDisplayData = {}; + let 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; @@ -119,7 +126,8 @@ export class AlarmCommentComponent implements OnInit { displayDataElement.displayName = this.getUserDisplayName(alarmComment); displayDataElement.edit = false; displayDataElement.isEdited = alarmComment.comment.edited; - displayDataElement.editedDateAgo = this.dateAgoPipe.transform(alarmComment.comment.editedOn).toLowerCase(); + 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; displayDataElement.avatarBgColor = this.utilsService.stringToHslColor(displayDataElement.displayName, @@ -137,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) { @@ -194,7 +207,7 @@ export class AlarmCommentComponent implements OnInit { const alarmCommentInfo: AlarmComment = this.getAlarmCommentById(commentId); const commentText: string = alarmCommentInfo.comment.text; this.dialogService.confirm( - this.translate.instant('alarm-comment.delete-alarm-comment'), + this.translate.instant('alarm-activity.delete-alarm-comment'), commentText, this.translate.instant('action.cancel'), this.translate.instant('action.delete')).subscribe( @@ -211,15 +224,17 @@ export class AlarmCommentComponent implements OnInit { } getSortDirectionIcon() { - return this.alarmCommentSortOrder.direction === Direction.DESC ? 'arrow_downward' : 'arrow_upward' + return this.alarmCommentSortOrder.direction === Direction.DESC ? 'mdi:sort-descending' : 'mdi:sort-ascending' } - isDirectionAscending() { - return this.alarmCommentSortOrder.direction === Direction.ASC; + getSortDirectionTooltipText() { + let text = this.alarmCommentSortOrder.direction === Direction.DESC ? 'alarm-activity.newest-first' : + 'alarm-activity.oldest-first'; + return this.translate.instant(text); } - isDirectionDescending() { - return this.alarmCommentSortOrder.direction === Direction.DESC; + isDirectionAscending() { + return this.alarmCommentSortOrder.direction === Direction.ASC; } onCommentMouseEnter(commentId: string, displayDataIndex: number): void { @@ -292,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; + } + } diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html index e2af9dcf24..85bdf96ea3 100644 --- a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html @@ -28,90 +28,64 @@
-
-
+
+
alarm.originator - alarm.created-time - + alarm.severity +
- - alarm.type - + + alarm.start-time + - - alarm.severity - + + alarm.duration +
+ + alarm.type + + alarm.status - -
- + - - alarm.advanced-info + + alarm.show-more -
- - alarm.start-time - - - - alarm.end-time - - - -
-
- - alarm.ack-time - - - - alarm.clear-time - - - -
+ label="{{ 'alarm.additional-info' | translate }}">
+ +
-