UI: Refactoring for backward compatibility

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

@@ -35,7 +35,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTimestamp">
         {{ 'widgets.table.display-timestamp' | translate }}
       </mat-slide-toggle>
-      <tb-date-format-select fxFlex [dateFormatList]="dateFormatList" formControlName="dateFormat"></tb-date-format-select>
+      <tb-date-format-select fxFlex excludeLastUpdateAgo formControlName="dateFormat"></tb-date-format-select>
     </div>
 
     <mat-slide-toggle class="mat-slide"  formControlName="enableStickyAction">

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.ts

@@ -19,7 +19,6 @@ import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.m
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { customDateFormat, simpleDateFormat } from '@shared/models/widget-settings.models';
 
 @Component({
   selector: 'tb-timeseries-table-widget-settings',
@@ -30,10 +29,6 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
 
   timeseriesTableWidgetSettingsForm: UntypedFormGroup;
 
-  dateFormatList = ['yyyy-MM-dd HH:mm:ss', 'yyyy-MM-dd HH:mm:ss.SSS', 'MMM dd yyyy HH:mm', 'dd MMM yyyy HH:mm', 'yyyy MMM dd HH:mm',
-    'MM/dd/yyyy HH:mm', 'dd/MM/yyyy HH:mm', 'yyyy/MM/dd HH:mm:ss']
-    .map(f => simpleDateFormat(f)).concat([customDateFormat('EEE, MMMM dd, yyyy')]);
-
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
     super(store);

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/date-format-select.component.ts

@@ -29,6 +29,7 @@ import { deepClone } from '@core/utils';
 import {
   DateFormatSettingsPanelComponent
 } from '@home/components/widget/lib/settings/common/date-format-settings-panel.component';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-date-format-select',
@@ -50,17 +51,11 @@ export class DateFormatSelectComponent implements OnInit, ControlValueAccessor {
   @Input()
   disabled: boolean;
 
-  private dateFormatValue = dateFormats;
-  get dateFormatList(): DateFormatSettings[] {
-    return this.dateFormatValue;
-  }
-
   @Input()
-  set dateFormatList(value) {
-    if (value && value.length) {
-      this.dateFormatValue = value;
-    }
-  }
+  @coerceBoolean()
+  excludeLastUpdateAgo = false;
+
+  dateFormatList: DateFormatSettings[];
 
   dateFormatsCompare = compareDateFormats;
 
@@ -79,6 +74,8 @@ export class DateFormatSelectComponent implements OnInit, ControlValueAccessor {
               private viewContainerRef: ViewContainerRef) {}
 
   ngOnInit(): void {
+    this.dateFormatList = this.excludeLastUpdateAgo ?
+      dateFormats.filter(format => !format.lastUpdateAgo) : dateFormats;
     this.dateFormatFormControl = new UntypedFormControl();
     this.dateFormatFormControl.valueChanges.subscribe((value: DateFormatSettings) => {
       this.updateModel(value);

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

@@ -322,7 +322,12 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
     this.hideEmptyLines = isDefined(this.settings.hideEmptyLines) ? this.settings.hideEmptyLines : false;
     this.useEntityLabel = isDefined(this.widgetConfig.settings.useEntityLabel) ? this.widgetConfig.settings.useEntityLabel : false;
     this.showTimestamp = this.settings.showTimestamp !== false;
-    this.dateFormatFilter = isDefined(this.settings.dateFormat?.format) ? this.settings.dateFormat?.format : 'yyyy-MM-dd HH:mm:ss';
+    // For backward compatibility
+    if (isDefined(this.settings?.showMilliseconds) && this.settings?.showMilliseconds) {
+      this.dateFormatFilter = 'yyyy-MM-dd HH:mm:ss.SSS';
+    } else {
+      this.dateFormatFilter = isDefined(this.settings.dateFormat?.format) ? this.settings.dateFormat?.format : 'yyyy-MM-dd HH:mm:ss';
+    }
 
     this.rowStylesInfo = getRowStyleInfo(this.settings, 'rowData, ctx');
 

ui-ngx/src/app/shared/models/widget-settings.models.ts

@@ -255,7 +255,7 @@ export const customDateFormat = (format: string): DateFormatSettings => ({
 });
 
 export const dateFormats = ['MMM dd yyyy HH:mm', 'dd MMM yyyy HH:mm', 'yyyy MMM dd HH:mm',
-  'MM/dd/yyyy HH:mm', 'dd/MM/yyyy HH:mm', 'yyyy/MM/dd HH:mm:ss']
+  'MM/dd/yyyy HH:mm', 'dd/MM/yyyy HH:mm', 'yyyy/MM/dd HH:mm:ss', 'yyyy-MM-dd HH:mm:ss', 'yyyy-MM-dd HH:mm:ss.SSS']
   .map(f => simpleDateFormat(f)).concat([lastUpdateAgoDateFormat(), customDateFormat('EEE, MMMM dd, yyyy')]);
 
 export const compareDateFormats = (df1: DateFormatSettings, df2: DateFormatSettings): boolean => {