Do not truncate time fields in raw view

ui/src/shared/components/RawFluxDataGrid.tsx

@@ -0,0 +1,116 @@
+import React, {PureComponent, CSSProperties} from 'react'
+import _ from 'lodash'
+import {Grid} from 'react-virtualized'
+
+const ROW_HEIGHT = 27
+const MIN_COLUMN_WIDTH = 150
+const TIME_COLUMN_WIDTH = 300
+
+interface Props {
+  data: string[][]
+  maxColumnCount: number
+  width: number
+  height: number
+  scrollLeft: number
+  scrollTop: number
+}
+
+interface State {
+  headerRows: number[]
+}
+
+export default class extends PureComponent<Props, State> {
+  public static getDerivedStateFromProps(nextProps: Props): Partial<State> {
+    const headerRows = _.reduce(
+      nextProps.data,
+      (acc, row, index) => {
+        if (row[0] === '#datatype') {
+          acc.push(index)
+        }
+
+        return acc
+      },
+      []
+    )
+
+    return {headerRows}
+  }
+  constructor(props: Props) {
+    super(props)
+
+    this.state = {headerRows: []}
+  }
+
+  public render() {
+    const {maxColumnCount, width, height, scrollTop, scrollLeft} = this.props
+
+    return (
+      <Grid
+        width={width}
+        height={height}
+        cellRenderer={this.renderCell}
+        columnCount={maxColumnCount}
+        rowCount={this.rowCount}
+        rowHeight={ROW_HEIGHT}
+        columnWidth={this.columnWidth}
+        scrollLeft={scrollLeft}
+        scrollTop={scrollTop}
+        style={this.gridStyle}
+      />
+    )
+  }
+
+  private get rowCount(): number {
+    return this.props.data.length
+  }
+
+  private columnWidth = ({index}): number => {
+    const {maxColumnCount, width} = this.props
+
+    const isDateTimeColumn = _.find(this.state.headerRows, i => {
+      return (this.getCellData(i, index) || '').includes('dateTime')
+    })
+
+    if (!isDateTimeColumn) {
+      return Math.max(MIN_COLUMN_WIDTH, width / maxColumnCount)
+    }
+
+    return TIME_COLUMN_WIDTH
+  }
+
+  private get gridStyle(): CSSProperties {
+    const width = this.calculateWidth()
+    const height = ROW_HEIGHT * this.rowCount
+
+    return {width, height}
+  }
+
+  private renderCell = ({columnIndex, key, rowIndex, style}) => {
+    const datum = this.getCellData(rowIndex, columnIndex)
+
+    return (
+      <div
+        key={key}
+        style={style}
+        className="raw-flux-data-table--cell"
+        title={datum}
+      >
+        <div className="raw-flux-data-table--cell-bg">{datum}</div>
+      </div>
+    )
+  }
+
+  private calculateWidth(): number {
+    const {maxColumnCount} = this.props
+    return _.reduce(
+      _.range(0, maxColumnCount),
+      (acc, index) => acc + this.columnWidth({index}),
+      0
+    )
+  }
+
+  private getCellData(row, column) {
+    const {data} = this.props
+    return data[row][column]
+  }
+}

ui/src/shared/components/RawFluxDataTable.tsx

@@ -1,7 +1,7 @@
 // Libraries
-import React, {PureComponent, MouseEvent, CSSProperties} from 'react'
-import {Grid} from 'react-virtualized'
+import React, {PureComponent, MouseEvent} from 'react'
 import memoizeOne from 'memoize-one'
+import RawFluxDataGrid from 'src/shared/components/RawFluxDataGrid'
 
 // Components
 import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
@@ -20,8 +20,6 @@ interface State {
   scrollTop: number
 }
 
-const ROW_HEIGHT = 30
-const MIN_COLUMN_WIDTH = 100
 const PADDING = 10
 
 class RawFluxDataTable extends PureComponent<Props, State> {
@@ -50,58 +48,19 @@ class RawFluxDataTable extends PureComponent<Props, State> {
           scrollLeft={scrollLeft}
           setScrollTop={this.onScrollbarsScroll}
         >
-          {this.renderGrid(
-            tableWidth,
-            tableHeight,
-            data,
-            maxColumnCount,
-            scrollLeft,
-            scrollTop
-          )}
+          <RawFluxDataGrid
+            scrollTop={scrollTop}
+            scrollLeft={scrollLeft}
+            width={tableWidth}
+            height={tableHeight}
+            maxColumnCount={maxColumnCount}
+            data={data}
+          />
         </FancyScrollbar>
       </div>
     )
   }
 
-  private renderGrid(
-    width: number,
-    height: number,
-    data: string[][],
-    maxColumnCount: number,
-    scrollLeft: number,
-    scrollTop: number
-  ): JSX.Element {
-    const rowCount = data.length
-    const columnWidth = Math.max(MIN_COLUMN_WIDTH, width / maxColumnCount)
-    const style = this.gridStyle(columnWidth, maxColumnCount, rowCount)
-
-    return (
-      <Grid
-        width={width}
-        height={height}
-        cellRenderer={this.renderCell(data)}
-        columnCount={maxColumnCount}
-        rowCount={rowCount}
-        rowHeight={ROW_HEIGHT}
-        columnWidth={columnWidth}
-        scrollLeft={scrollLeft}
-        scrollTop={scrollTop}
-        style={style}
-      />
-    )
-  }
-
-  private gridStyle(
-    columnWidth: number,
-    maxColumnCount: number,
-    rowCount: number
-  ): CSSProperties {
-    const width = columnWidth * maxColumnCount
-    const height = ROW_HEIGHT * rowCount
-
-    return {width, height}
-  }
-
   private onScrollbarsScroll = (e: MouseEvent<HTMLElement>) => {
     e.preventDefault()
     e.stopPropagation()
@@ -110,26 +69,6 @@ class RawFluxDataTable extends PureComponent<Props, State> {
 
     this.setState({scrollLeft, scrollTop})
   }
-
-  private renderCell = (data: string[][]) => ({
-    columnIndex,
-    key,
-    rowIndex,
-    style,
-  }) => {
-    const datum = data[rowIndex][columnIndex]
-
-    return (
-      <div
-        key={key}
-        style={style}
-        className="raw-flux-data-table--cell"
-        title={datum}
-      >
-        <div className="raw-flux-data-table--cell-bg">{datum}</div>
-      </div>
-    )
-  }
 }
 
 export default RawFluxDataTable

ui/src/shared/utils/rawFluxDataTable.ts

@@ -2,7 +2,7 @@ import Papa from 'papaparse'
 
 import {parseChunks} from 'src/shared/parsing/flux/response'
 
-interface ParseFilesResult {
+export interface ParseFilesResult {
   data: string[][]
   maxColumnCount: number
 }