feat(ui/tables): use dateTypes annotation for column formatting (#11459)

ui/src/shared/components/tables/TableCell.tsx

@@ -19,6 +19,7 @@ import {CellRendererProps} from 'src/shared/components/tables/TableGraphTable'
 interface Props extends CellRendererProps {
   sortOptions: SortOptions
   data: string
+  dataType: string
   properties: TableView
   hoveredRowIndex: number
   hoveredColumnIndex: number
@@ -189,10 +190,10 @@ class TableCell extends PureComponent<Props> {
   }
 
   private get contents(): string {
-    const {properties, data} = this.props
+    const {properties, data, dataType} = this.props
     const {timeFormat, decimalPlaces} = properties
 
-    if (this.isTimeData) {
+    if (dataType.includes('dateTime')) {
       return moment(data).format(timeFormat)
     }
 

ui/src/shared/components/tables/TableGraph.tsx

@@ -45,13 +45,15 @@ class TableGraph extends PureComponent<Props, State> {
       <TableGraphTransform
         data={table.data}
         properties={properties}
+        dataTypes={table.dataTypes}
         sortOptions={this.sortOptions}
       >
         {transformedDataBundle => (
           <TableGraphTable
-            transformedDataBundle={transformedDataBundle}
-            onSort={this.handleSetSort}
             properties={properties}
+            dataTypes={table.dataTypes}
+            onSort={this.handleSetSort}
+            transformedDataBundle={transformedDataBundle}
           />
         )}
       </TableGraphTransform>

ui/src/shared/components/tables/TableGraphTable.tsx

@@ -40,6 +40,7 @@ export interface CellRendererProps {
 }
 
 interface OwnProps {
+  dataTypes: {[x: string]: string}
   transformedDataBundle: TransformTableDataReturnType
   properties: TableView
   onSort: (fieldName: string) => void
@@ -315,6 +316,21 @@ class TableGraphTable extends PureComponent<Props, State> {
     return transformedData[rowIndex][columnIndex]
   }
 
+  private dataType = (rowIndex, columnIndex): string => {
+    const {
+      transformedDataBundle: {transformedData},
+      dataTypes,
+    } = this.props
+
+    if (rowIndex === 0) {
+      return 'n/a'
+    }
+
+    const columnName = transformedData[0][columnIndex]
+
+    return _.get(dataTypes, columnName, 'n/a')
+  }
+
   private cellRenderer = (cellProps: CellRendererProps) => {
     const {rowIndex, columnIndex} = cellProps
     const {
@@ -333,6 +349,7 @@ class TableGraphTable extends PureComponent<Props, State> {
         onHover={this.handleHover}
         isTimeVisible={this.isTimeVisible}
         data={this.getCellData(rowIndex, columnIndex)}
+        dataType={this.dataType(rowIndex, columnIndex)}
         hoveredRowIndex={hoverIndex}
         properties={properties}
         resolvedFieldOptions={resolvedFieldOptions}

ui/src/shared/components/tables/TableGraphTransform.tsx

@@ -12,6 +12,7 @@ import {TransformTableDataReturnType} from 'src/dashboards/utils/tableGraph'
 
 interface Props {
   data: string[][]
+  dataTypes: {[x: string]: string}
   properties: TableView
   sortOptions: SortOptions
   children: (transformedDataBundle: TransformTableDataReturnType) => JSX.Element
@@ -39,17 +40,22 @@ class TableGraphTransform extends PureComponent<Props> {
   )
 
   public render() {
-    const {properties, data, sortOptions} = this.props
+    const {properties, data, dataTypes, sortOptions} = this.props
     const {tableOptions, timeFormat, decimalPlaces, fieldOptions} = properties
+    const fo = fieldOptions.map(opts => ({
+      ...opts,
+      dataType: dataTypes[opts.internalName],
+    }))
 
     const transformedDataBundle = this.memoizedTableTransform(
       data,
       sortOptions,
-      fieldOptions,
+      fo,
       tableOptions,
       timeFormat,
       decimalPlaces
     )
+
     return this.props.children(transformedDataBundle)
   }
 }