Merge branch 'master' into feature/table-hide-series

Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>
2018-03-21 10:55:14 -07:00 · 2018-03-21 10:55:14 -07:00 · 4e46c2d36e
parent 63108fe12f bc581a3469
commit 4e46c2d36e
4 changed files with 102 additions and 89 deletions
--- a/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
+++ b/ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
@ -71,7 +71,7 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
          items={FORMAT_OPTIONS}
          selected={showCustom ? TIME_FORMAT_CUSTOM : format}
          buttonColor="btn-default"
-          buttonSize="btn-xs"
+          buttonSize="btn-sm"
          className="dropdown-stretch"
          onChoose={this.handleChooseFormat}
        />
--- a/ui/src/shared/components/TableGraph.js
+++ b/ui/src/shared/components/TableGraph.js
@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import _ from 'lodash'
 import classnames from 'classnames'

-import {MultiGrid} from 'react-virtualized'
+import {MultiGrid, ColumnSizer} from 'react-virtualized'
 import moment from 'moment'

 import {timeSeriesToTableGraph} from 'src/utils/timeSeriesToDygraph'
@ -193,8 +193,6 @@ class TableGraph extends Component {
    const {tableOptions, colors} = this.props
    const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
    const data = verticalTimeAxis ? this.state.data : this.state.unzippedData
-    const columnCount = _.get(data, ['0', 'length'], 0)
-    const rowCount = data.length
    const timeFormat = _.get(tableOptions, 'timeFormat', TIME_FORMAT_DEFAULT)
    const fieldNames = _.get(tableOptions, 'fieldNames', [TIME_FIELD_DEFAULT])
    const fixFirstColumn = _.get(
@ -215,14 +213,13 @@ class TableGraph extends Component {
    const isFieldName = verticalTimeAxis ? rowIndex === 0 : columnIndex === 0

    const isFixedCorner = rowIndex === 0 && columnIndex === 0
-    const isLastRow = rowIndex === rowCount - 1
-    const isLastColumn = columnIndex === columnCount - 1
-    const isHighlighted =
-      rowIndex === parent.props.scrollToRow ||
-      columnIndex === parent.props.scrollToColumn ||
-      (rowIndex === hoveredRowIndex && hoveredRowIndex !== 0) ||
-      (columnIndex === hoveredColumnIndex && hoveredColumnIndex !== 0)
    const dataIsNumerical = _.isNumber(data[rowIndex][columnIndex])
+    const isHighlightedRow =
+      rowIndex === parent.props.scrollToRow ||
+      (rowIndex === hoveredRowIndex && hoveredRowIndex !== 0)
+    const isHighlightedColumn =
+      columnIndex === parent.props.scrollToColumn ||
+      (columnIndex === hoveredColumnIndex && hoveredColumnIndex !== 0)

    let cellStyle = style

@ -243,9 +240,8 @@ class TableGraph extends Component {
      'table-graph-cell__fixed-row': isFixedRow,
      'table-graph-cell__fixed-column': isFixedColumn,
      'table-graph-cell__fixed-corner': isFixedCorner,
-      'table-graph-cell__last-row': isLastRow,
-      'table-graph-cell__last-column': isLastColumn,
-      'table-graph-cell__highlight': isHighlighted,
+      'table-graph-cell__highlight-row': isHighlightedRow,
+      'table-graph-cell__highlight-column': isHighlightedColumn,
      'table-graph-cell__numerical': dataIsNumerical,
      'table-graph-cell__isFieldName': isFieldName,
    })
@ -256,6 +252,10 @@ class TableGraph extends Component {
    const fieldName =
      foundField && (foundField.displayName || foundField.internalName)

+    const cellContents = isTimeData
+      ? `${moment(cellData).format(timeFormat)}`
+      : fieldName || `${cellData}`
+
    return (
      <div
        key={key}
@ -263,10 +263,9 @@ class TableGraph extends Component {
        className={cellClass}
        onClick={isFieldName ? this.handleClickFieldName(cellData) : null}
        onMouseOver={this.handleHover(columnIndex, rowIndex)}
+        title={cellContents}
      >
-        {isTimeData
-          ? `${moment(cellData).format(timeFormat)}`
-          : fieldName || `${cellData}`}
+        {cellContents}
      </div>
    )
  }
@ -287,7 +286,8 @@ class TableGraph extends Component {

    const columnCount = _.get(data, ['0', 'length'], 0)
    const rowCount = data.length
-    const COLUMN_WIDTH = 300
+    const COLUMN_MIN_WIDTH = 98
+    const COLUMN_MAX_WIDTH = 500
    const ROW_HEIGHT = 30
    const tableWidth = _.get(this, ['gridContainer', 'clientWidth'], 0)
    const tableHeight = _.get(this, ['gridContainer', 'clientHeight'], 0)
@ -309,34 +309,44 @@ class TableGraph extends Component {
        onMouseOut={this.handleMouseOut}
      >
        {!_.isEmpty(data) &&
-          <MultiGrid
+          <ColumnSizer
            columnCount={columnCount}
-            columnWidth={COLUMN_WIDTH}
-            rowCount={rowCount}
-            rowHeight={ROW_HEIGHT}
-            height={tableHeight}
+            columnMaxWidth={COLUMN_MAX_WIDTH}
+            columnMinWidth={COLUMN_MIN_WIDTH}
            width={tableWidth}
-            fixedColumnCount={fixedColumnCount}
-            fixedRowCount={1}
-            enableFixedColumnScroll={true}
-            enableFixedRowScroll={true}
-            timeFormat={
-              tableOptions ? tableOptions.timeFormat : TIME_FORMAT_DEFAULT
-            }
-            fieldNames={
-              tableOptions ? tableOptions.fieldNames : [TIME_FIELD_DEFAULT]
-            }
-            scrollToRow={scrollToRow}
-            scrollToColumn={scrollToColumn}
-            verticalTimeAxis={verticalTimeAxis}
-            sortField={sortField}
-            sortDirection={sortDirection}
-            cellRenderer={this.cellRenderer}
-            hoveredColumnIndex={hoveredColumnIndex}
-            hoveredRowIndex={hoveredRowIndex}
-            hoverTime={hoverTime}
-            colors={colors}
-          />}
+          >
+            {({getColumnWidth, registerChild}) =>
+              <MultiGrid
+                ref={registerChild}
+                columnCount={columnCount}
+                columnWidth={getColumnWidth}
+                rowCount={rowCount}
+                rowHeight={ROW_HEIGHT}
+                height={tableHeight}
+                width={tableWidth}
+                fixedColumnCount={fixedColumnCount}
+                fixedRowCount={1}
+                enableFixedColumnScroll={true}
+                enableFixedRowScroll={true}
+                timeFormat={
+                  tableOptions ? tableOptions.timeFormat : TIME_FORMAT_DEFAULT
+                }
+                fieldNames={
+                  tableOptions ? tableOptions.fieldNames : [TIME_FIELD_DEFAULT]
+                }
+                scrollToRow={scrollToRow}
+                scrollToColumn={scrollToColumn}
+                verticalTimeAxis={verticalTimeAxis}
+                sortField={sortField}
+                sortDirection={sortDirection}
+                cellRenderer={this.cellRenderer}
+                hoveredColumnIndex={hoveredColumnIndex}
+                hoveredRowIndex={hoveredRowIndex}
+                hoverTime={hoverTime}
+                colors={colors}
+                classNameBottomRightGrid="table-graph--scroll-window"
+              />}
+          </ColumnSizer>}
      </div>
    )
  }
--- a/ui/src/shared/components/ThresholdsList.js
+++ b/ui/src/shared/components/ThresholdsList.js
@ -123,8 +123,9 @@ class ThresholdsList extends Component {
    const {thresholdsListColors, showListHeading} = this.props
    const disableAddThreshold = thresholdsListColors.length > MAX_THRESHOLDS

-    const thresholdsListClass = `thresholds-list${showListHeading &&
-      ' graph-options-group'}`
+    const thresholdsListClass = `thresholds-list${showListHeading
+      ? ' graph-options-group'
+      : ''}`

    return (
      <div className={thresholdsListClass}>
--- a/ui/src/style/components/table-graph.scss
+++ b/ui/src/style/components/table-graph.scss
@ -20,18 +20,20 @@
  font-size: 13px;
  color: $g12-forge;
  border: 1px solid $g5-pepper;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;

-  // Blue Highlight
+  // Highlight
  &:after {
    content: '';
    position: absolute;
-    top: -1px;
-    left: -1px;
-    width: calc(100% + 2px);
-    height: calc(100% + 2px);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
    z-index: 5;
-    border: 2px solid $c-pool;
-    border-radius: 3px;
+    background-color: rgba(255,255,255,0.2);
    visibility: hidden;
    box-sizing: border-box;
  }
@ -57,15 +59,13 @@
    color: $g18-cloud;
    background-color: $g5-pepper;
  }
-  &__last-row {
-    border-bottom: 0;
+  &__highlight-row:after,
+  &__highlight-column:after {
+    visibility: visible;
  }
-  &__last-column {
-    border-right: 0;
-  }
-  &__highlight {
-    background-color: $g6-smoke;
-    color: $g16-pearl;
+  &__highlight-row.table-graph-cell__highlight-column {
+    border-color: $g20-white;
+    &:after {visibility: hidden;}
  }
  &__isFieldName:hover {
    cursor: pointer;
@ -79,15 +79,6 @@
  }
  &__isSortedDown {
  }
-  &__highlight:not(.table-graph-cell__fixed-row):not(.table-graph-cell__fixed-column):not(.table-graph-cell__fixed-corner) {
-    color: $g14-chromium;
-    background-color: $g6-smoke;
-  }
-  &:hover:not(.table-graph-cell__fixed-row):not(.table-graph-cell__fixed-column):not(.table-graph-cell__fixed-corner) {
-    color: $g20-white;
-    background-color: $g0-obsidian;
-    &:after {visibility: visible;}
-  }
 }

 .ReactVirtualized__Grid {
@ -95,25 +86,36 @@
    outline: none;
  }
  &::-webkit-scrollbar {
-    width: 0;
-
-    &-button {
-      background-color: #f00;
-    }
-    &-track {
-      background-color: #f00;
-    }
-    &-track-piece {
-      background-color: #f00;
-    }
-    &-thumb {
-      background-color: #fff;
-    }
-    &-corner {
-      background-color: #f00;
-    }
+    width: 0px;
+    height: 0px;
  }
-  &::-webkit-resizer {
-    background-color: #f00;
+  &.table-graph--scroll-window {
+    &::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+
+      &-button {
+        background-color: $g5-pepper;
+      }
+      &-track {
+        background-color: $g5-pepper;
+      }
+      &-track-piece {
+        background-color: $g5-pepper;
+        border: 2px solid $g5-pepper;
+        border-radius: 5px;
+      }
+      &-thumb {
+        background-color: $g11-sidewalk;
+        border: 2px solid $g5-pepper;
+        border-radius: 5px;
+      }
+      &-corner {
+        background-color: $g5-pepper;
+      }
+    }
+    &::-webkit-resizer {
+      background-color: $g5-pepper;
+    }
  }
 }