UI: Added show timezone Abbr in timewindow component

ui-ngx/src/app/shared/components/time/timewindow.component.html

@@ -34,7 +34,7 @@
         (click)="openEditMode()"
         matTooltip="{{ 'timewindow.edit' | translate }}"
         [matTooltipPosition]="tooltipPosition">
-    {{innerValue?.displayValue}}
+    {{innerValue?.displayValue}} <span [fxShow]="innerValue?.displayTimezoneAbbr !== ''">| <span class="timezone-abbr">{{innerValue.displayTimezoneAbbr}}</span></span>
   </span>
   <button *ngIf="direction === 'right'" [disabled]="timewindowDisabled" mat-icon-button class="tb-mat-32"
           type="button"

ui-ngx/src/app/shared/components/time/timewindow.component.scss

@@ -27,5 +27,9 @@
       pointer-events: all;
       cursor: pointer;
     }
+
+    .timezone-abbr {
+      font-weight: 500;
+    }
   }
 }

ui-ngx/src/app/shared/components/time/timewindow.component.ts

@@ -31,6 +31,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { MillisecondsToTimeStringPipe } from '@shared/pipe/milliseconds-to-time-string.pipe';
 import {
   cloneSelectedTimewindow,
+  getTimezoneInfo,
   HistoryWindowType,
   initModelFromDefaultTimewindow,
   QuickTimeIntervalTranslationMap,
@@ -51,7 +52,7 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { WINDOW } from '@core/services/window.service';
 import { TimeService } from '@core/services/time.service';
 import { TooltipPosition } from '@angular/material/tooltip';
-import { deepClone } from '@core/utils';
+import { deepClone, isDefinedAndNotNull } from '@core/utils';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 // @dynamic
@@ -306,6 +307,12 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
         this.innerValue.displayValue += this.translate.instant('timewindow.period', {startTime: startString, endTime: endString});
       }
     }
+    if (isDefinedAndNotNull(this.innerValue.timezone) && this.innerValue.timezone !== '') {
+      this.innerValue.displayValue += ' ';
+      this.innerValue.displayTimezoneAbbr = getTimezoneInfo(this.innerValue.timezone).abbr;
+    } else {
+      this.innerValue.displayTimezoneAbbr = '';
+    }
   }
 
   hideLabel() {

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

@@ -92,6 +92,7 @@ export interface Aggregation {
 
 export interface Timewindow {
   displayValue?: string;
+  displayTimezoneAbbr?: string;
   hideInterval?: boolean;
   hideAggregation?: boolean;
   hideAggInterval?: boolean;
@@ -731,6 +732,7 @@ export interface TimezoneInfo {
   name: string;
   offset: string;
   nOffset: number;
+  abbr: string;
 }
 
 let timezones: TimezoneInfo[] = null;
@@ -744,7 +746,8 @@ export function getTimezones(): TimezoneInfo[] {
         id: zoneName,
         name: zoneName.replace(/_/g, ' '),
         offset: `UTC${tz.format('Z')}`,
-        nOffset: tz.utcOffset()
+        nOffset: tz.utcOffset(),
+        abbr: tz.zoneAbbr()
       };
     });
   }