mgr/dashboard: KV-table transforms dates through pipe

The key value table that is mostly used for showing details of objects,
will now transform any date with 'cdDatePipe'.

Through this the start and end date of an alert will be shown in local
time instead of UTC time.

Fixes: https://tracker.ceph.com/issues/39296
Signed-off-by: Stephan Müller <smueller@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
index ee7a10c67cc21f37c41c3d7c70482561ea4274dd..35d0a87125d9d1c38dbfd2cb6501c3c75a1820b3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
@@ -8,6 +8,7 @@ import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { ComponentsModule } from '../../components/components.module';
 import { CellTemplate } from '../../enum/cell-template.enum';
 import { CdTableColumn } from '../../models/cd-table-column';
+import { CdDatePipe } from '../../pipes/cd-date.pipe';
 import { TableComponent } from '../table/table.component';
 import { TableKeyValueComponent } from './table-key-value.component';
 
@@ -181,6 +182,34 @@ describe('TableKeyValueComponent', () => {
       component.renderObjects = true;
       expect(component._convertValue(v({ sth: 'something' }))).toEqual(v({ sth: 'something' }));
     });
+
+    describe('automatically pipe utc dates through cdDate', () => {
+      let datePipe: CdDatePipe;
+
+      beforeEach(() => {
+        datePipe = TestBed.get(CdDatePipe);
+        spyOn(datePipe, 'transform').and.callThrough();
+      });
+
+      const expectTimeConversion = (date: string) => {
+        component.data = {
+          3: 'some time',
+          someKey: date
+        };
+        component.ngOnInit();
+        expect(component.tableData.length).toBe(2);
+        expect(datePipe.transform).toHaveBeenCalledWith(date);
+        expect(component.tableData[1].key).not.toBe(date);
+      };
+
+      it('converts some date', () => {
+        expectTimeConversion('2019-04-15 12:26:52.305285');
+      });
+
+      it('converts utc date', () => {
+        expectTimeConversion('2019-04-16T12:35:46.646300974Z');
+      });
+    });
   });
 
   describe('render objects', () => {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
index aab90c9545e7c3f38b97b536f986f0bf35939ed1..9e1e9bd38b05edea1b8648ae0af9e0986990f1e0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
@@ -12,6 +12,7 @@ import * as _ from 'lodash';
 
 import { CellTemplate } from '../../enum/cell-template.enum';
 import { CdTableColumn } from '../../models/cd-table-column';
+import { CdDatePipe } from '../../pipes/cd-date.pipe';
 import { TableComponent } from '../table/table.component';
 
 class Item {
@@ -61,7 +62,7 @@ export class TableKeyValueComponent implements OnInit, OnChanges {
   @Output()
   fetchData = new EventEmitter();
 
-  constructor() {}
+  constructor(private datePipe: CdDatePipe) {}
 
   ngOnInit() {
     this.columns = [
@@ -188,6 +189,21 @@ export class TableKeyValueComponent implements OnInit, OnChanges {
     } else if (isEmpty && !this.hideEmpty && v.value !== '') {
       v.value = '';
     }
+    if (!isEmpty && _.isString(v.value)) {
+      v.value = this.convertString(v.value);
+    }
     return v;
   }
+
+  private convertString(s: string) {
+    const date = this.isDate(s) && this.datePipe.transform(s);
+    return date || s;
+  }
+
+  private isDate(s) {
+    const sep = '[ -:.TZ]';
+    const n = '\\d{2}' + sep;
+    //                            year     -    m - d - h : m : s . someRest  Z (if UTC)
+    return s.match(new RegExp('^\\d{4}' + sep + n + n + n + n + n + '\\d*' + 'Z?$'));
+  }
 }