Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>
pull/3030/head
Iris Scholten 2018-03-21 10:55:14 -07:00
parent 63108fe12f bc581a3469
commit 4e46c2d36e
4 changed files with 102 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/dashboards/components/GraphOptionsTimeFormat.tsx
View File

@ -71,7 +71,7 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
items={FORMAT_OPTIONS} items={FORMAT_OPTIONS}
selected={showCustom ? TIME_FORMAT_CUSTOM : format} selected={showCustom ? TIME_FORMAT_CUSTOM : format}
buttonColor="btn-default" buttonColor="btn-default"
buttonSize="btn-xs" buttonSize="btn-sm"
className="dropdown-stretch" className="dropdown-stretch"
onChoose={this.handleChooseFormat} onChoose={this.handleChooseFormat}
/> />

48
ui/src/shared/components/TableGraph.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import _ from 'lodash' import _ from 'lodash'
import classnames from 'classnames' import classnames from 'classnames'
import {MultiGrid} from 'react-virtualized' import {MultiGrid, ColumnSizer} from 'react-virtualized'
import moment from 'moment' import moment from 'moment'
import {timeSeriesToTableGraph} from 'src/utils/timeSeriesToDygraph' import {timeSeriesToTableGraph} from 'src/utils/timeSeriesToDygraph'
@ -193,8 +193,6 @@ class TableGraph extends Component {
const {tableOptions, colors} = this.props const {tableOptions, colors} = this.props
const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true) const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
const data = verticalTimeAxis ? this.state.data : this.state.unzippedData 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 timeFormat = _.get(tableOptions, 'timeFormat', TIME_FORMAT_DEFAULT)
const fieldNames = _.get(tableOptions, 'fieldNames', [TIME_FIELD_DEFAULT]) const fieldNames = _.get(tableOptions, 'fieldNames', [TIME_FIELD_DEFAULT])
const fixFirstColumn = _.get( const fixFirstColumn = _.get(
@ -215,14 +213,13 @@ class TableGraph extends Component {
const isFieldName = verticalTimeAxis ? rowIndex === 0 : columnIndex === 0 const isFieldName = verticalTimeAxis ? rowIndex === 0 : columnIndex === 0
const isFixedCorner = 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 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 let cellStyle = style
@ -243,9 +240,8 @@ class TableGraph extends Component {
'table-graph-cell__fixed-row': isFixedRow, 'table-graph-cell__fixed-row': isFixedRow,
'table-graph-cell__fixed-column': isFixedColumn, 'table-graph-cell__fixed-column': isFixedColumn,
'table-graph-cell__fixed-corner': isFixedCorner, 'table-graph-cell__fixed-corner': isFixedCorner,
'table-graph-cell__last-row': isLastRow, 'table-graph-cell__highlight-row': isHighlightedRow,
'table-graph-cell__last-column': isLastColumn, 'table-graph-cell__highlight-column': isHighlightedColumn,
'table-graph-cell__highlight': isHighlighted,
'table-graph-cell__numerical': dataIsNumerical, 'table-graph-cell__numerical': dataIsNumerical,
'table-graph-cell__isFieldName': isFieldName, 'table-graph-cell__isFieldName': isFieldName,
}) })
@ -256,6 +252,10 @@ class TableGraph extends Component {
const fieldName = const fieldName =
foundField && (foundField.displayName || foundField.internalName) foundField && (foundField.displayName || foundField.internalName)
const cellContents = isTimeData
? `${moment(cellData).format(timeFormat)}`
: fieldName || `${cellData}`
return ( return (
<div <div
key={key} key={key}
@ -263,10 +263,9 @@ class TableGraph extends Component {
className={cellClass} className={cellClass}
onClick={isFieldName ? this.handleClickFieldName(cellData) : null} onClick={isFieldName ? this.handleClickFieldName(cellData) : null}
onMouseOver={this.handleHover(columnIndex, rowIndex)} onMouseOver={this.handleHover(columnIndex, rowIndex)}
title={cellContents}
> >
{isTimeData {cellContents}
? `${moment(cellData).format(timeFormat)}`
: fieldName || `${cellData}`}
</div> </div>
) )
} }
@ -287,7 +286,8 @@ class TableGraph extends Component {
const columnCount = _.get(data, ['0', 'length'], 0) const columnCount = _.get(data, ['0', 'length'], 0)
const rowCount = data.length const rowCount = data.length
const COLUMN_WIDTH = 300 const COLUMN_MIN_WIDTH = 98
const COLUMN_MAX_WIDTH = 500
const ROW_HEIGHT = 30 const ROW_HEIGHT = 30
const tableWidth = _.get(this, ['gridContainer', 'clientWidth'], 0) const tableWidth = _.get(this, ['gridContainer', 'clientWidth'], 0)
const tableHeight = _.get(this, ['gridContainer', 'clientHeight'], 0) const tableHeight = _.get(this, ['gridContainer', 'clientHeight'], 0)
@ -309,9 +309,17 @@ class TableGraph extends Component {
onMouseOut={this.handleMouseOut} onMouseOut={this.handleMouseOut}
> >
{!_.isEmpty(data) && {!_.isEmpty(data) &&
<MultiGrid <ColumnSizer
columnCount={columnCount} columnCount={columnCount}
columnWidth={COLUMN_WIDTH} columnMaxWidth={COLUMN_MAX_WIDTH}
columnMinWidth={COLUMN_MIN_WIDTH}
width={tableWidth}
>
{({getColumnWidth, registerChild}) =>
<MultiGrid
ref={registerChild}
columnCount={columnCount}
columnWidth={getColumnWidth}
rowCount={rowCount} rowCount={rowCount}
rowHeight={ROW_HEIGHT} rowHeight={ROW_HEIGHT}
height={tableHeight} height={tableHeight}
@ -336,7 +344,9 @@ class TableGraph extends Component {
hoveredRowIndex={hoveredRowIndex} hoveredRowIndex={hoveredRowIndex}
hoverTime={hoverTime} hoverTime={hoverTime}
colors={colors} colors={colors}
classNameBottomRightGrid="table-graph--scroll-window"
/>} />}
</ColumnSizer>}
</div> </div>
) )
} }

5
ui/src/shared/components/ThresholdsList.js
View File

@ -123,8 +123,9 @@ class ThresholdsList extends Component {
const {thresholdsListColors, showListHeading} = this.props const {thresholdsListColors, showListHeading} = this.props
const disableAddThreshold = thresholdsListColors.length > MAX_THRESHOLDS const disableAddThreshold = thresholdsListColors.length > MAX_THRESHOLDS
const thresholdsListClass = `thresholds-list${showListHeading && const thresholdsListClass = `thresholds-list${showListHeading
' graph-options-group'}` ? ' graph-options-group'
: ''}`
return ( return (
<div className={thresholdsListClass}> <div className={thresholdsListClass}>

64
ui/src/style/components/table-graph.scss
View File

@ -20,18 +20,20 @@
font-size: 13px; font-size: 13px;
color: $g12-forge; color: $g12-forge;
border: 1px solid $g5-pepper; border: 1px solid $g5-pepper;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// Blue Highlight // Highlight
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
top: -1px; top: 0;
left: -1px; left: 0;
width: calc(100% + 2px); width: 100%;
height: calc(100% + 2px); height: 100%;
z-index: 5; z-index: 5;
border: 2px solid $c-pool; background-color: rgba(255,255,255,0.2);
border-radius: 3px;
visibility: hidden; visibility: hidden;
box-sizing: border-box; box-sizing: border-box;
} }
@ -57,15 +59,13 @@
color: $g18-cloud; color: $g18-cloud;
background-color: $g5-pepper; background-color: $g5-pepper;
} }
&__last-row { &__highlight-row:after,
border-bottom: 0; &__highlight-column:after {
visibility: visible;
} }
&__last-column { &__highlight-row.table-graph-cell__highlight-column {
border-right: 0; border-color: $g20-white;
} &:after {visibility: hidden;}
&__highlight {
background-color: $g6-smoke;
color: $g16-pearl;
} }
&__isFieldName:hover { &__isFieldName:hover {
cursor: pointer; cursor: pointer;
@ -79,15 +79,6 @@
} }
&__isSortedDown { &__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 { .ReactVirtualized__Grid {
@ -95,25 +86,36 @@
outline: none; outline: none;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0; width: 0px;
height: 0px;
}
&.table-graph--scroll-window {
&::-webkit-scrollbar {
width: 10px;
height: 10px;
&-button { &-button {
background-color: #f00; background-color: $g5-pepper;
} }
&-track { &-track {
background-color: #f00; background-color: $g5-pepper;
} }
&-track-piece { &-track-piece {
background-color: #f00; background-color: $g5-pepper;
border: 2px solid $g5-pepper;
border-radius: 5px;
} }
&-thumb { &-thumb {
background-color: #fff; background-color: $g11-sidewalk;
border: 2px solid $g5-pepper;
border-radius: 5px;
} }
&-corner { &-corner {
background-color: #f00; background-color: $g5-pepper;
} }
} }
&::-webkit-resizer { &::-webkit-resizer {
background-color: #f00; background-color: $g5-pepper;
}
} }
} }