From 97c1cb16d4c9e6bc93280e6fbc6d3c594802a0f6 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Tue, 27 Feb 2018 14:21:46 -0800 Subject: [PATCH 01/21] Add react-virtualized to dependencies --- ui/package.json | 1 + ui/yarn.lock | 47 ++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/ui/package.json b/ui/package.json index 778647e70d..f8c46d609c 100644 --- a/ui/package.json +++ b/ui/package.json @@ -126,6 +126,7 @@ "react-router-redux": "^4.0.8", "react-sparklines": "^1.4.2", "react-tooltip": "^3.2.1", + "react-virtualized": "^9.18.5", "redux": "^3.3.1", "redux-auth-wrapper": "^1.0.0", "redux-thunk": "^1.0.3", diff --git a/ui/yarn.lock b/ui/yarn.lock index 942a897e3e..9dc1f6cd37 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1017,6 +1017,13 @@ babel-runtime@^6.18.0, babel-runtime@^6.22.0: core-js "^2.4.0" regenerator-runtime "^0.10.0" +babel-runtime@^6.26.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" + dependencies: + core-js "^2.4.0" + regenerator-runtime "^0.11.0" + babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.3.0, babel-template@^6.8.0: version "6.16.0" resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca" @@ -2102,6 +2109,10 @@ dom-css@^2.0.0: prefix-style "2.0.1" to-camel-case "1.0.0" +"dom-helpers@^2.4.0 || ^3.0.0": + version "3.3.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6" + dom-serialize@^2.2.0: version "2.2.1" resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b" @@ -2715,6 +2726,18 @@ fbjs@^0.8.1, fbjs@^0.8.4: setimmediate "^1.0.5" ua-parser-js "^0.7.9" +fbjs@^0.8.16: + version "0.8.16" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" + dependencies: + core-js "^1.0.0" + isomorphic-fetch "^2.1.1" + loose-envify "^1.0.0" + object-assign "^4.1.0" + promise "^7.1.1" + setimmediate "^1.0.5" + ua-parser-js "^0.7.9" + fbjs@^0.8.9: version "0.8.12" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" @@ -4156,7 +4179,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -loose-envify@^1.0.0, loose-envify@^1.3.1: +loose-envify@^1.0.0, loose-envify@^1.3.0, loose-envify@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: @@ -5384,6 +5407,14 @@ prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8: fbjs "^0.8.9" loose-envify "^1.3.1" +prop-types@^15.6.0: + version "15.6.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" + dependencies: + fbjs "^0.8.16" + loose-envify "^1.3.1" + object-assign "^4.1.1" + proxy-addr@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.2.tgz#b4cc5f22610d9535824c123aef9d3cf73c40ba37" @@ -5596,6 +5627,16 @@ react-tooltip@^3.2.1: dependencies: classnames "^2.2.0" +react-virtualized@^9.18.5: + version "9.18.5" + resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.18.5.tgz#42dd390ebaa7ea809bfcaf775d39872641679b89" + dependencies: + babel-runtime "^6.26.0" + classnames "^2.2.3" + dom-helpers "^2.4.0 || ^3.0.0" + loose-envify "^1.3.0" + prop-types "^15.6.0" + react@^15.0.2: version "15.4.1" resolved "https://registry.yarnpkg.com/react/-/react-15.4.1.tgz#498e918602677a3983cd0fd206dfe700389a0dd6" @@ -5750,6 +5791,10 @@ regenerator-runtime@^0.10.0: version "0.10.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb" +regenerator-runtime@^0.11.0: + version "0.11.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" + regenerator-transform@0.9.8: version "0.9.8" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.8.tgz#0f88bb2bc03932ddb7b6b7312e68078f01026d6c" From 068c14cb6260c1724719a0b7a26dc7b8a4fc5dce Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Tue, 27 Feb 2018 16:12:33 -0800 Subject: [PATCH 02/21] add visualization option for table --- ui/src/dashboards/graphics/graph.js | 38 +++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/ui/src/dashboards/graphics/graph.js b/ui/src/dashboards/graphics/graph.js index 6fb9a6cc19..2ce7ade6fc 100644 --- a/ui/src/dashboards/graphics/graph.js +++ b/ui/src/dashboards/graphics/graph.js @@ -459,4 +459,42 @@ export const GRAPH_TYPES = [ ), }, + { + type: 'table', + menuOption: 'Table', + graphic: ( +
+ + + + + + + + + + + + + + + + + + + + +
+ ), + }, ] From bf74d707197fb79cdcdf04398cd436f2e1137f93 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Tue, 27 Feb 2018 16:13:00 -0800 Subject: [PATCH 03/21] mend --- ui/src/dashboards/components/DisplayOptions.js | 3 +++ ui/src/shared/components/RefreshingGraph.js | 15 +++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/ui/src/dashboards/components/DisplayOptions.js b/ui/src/dashboards/components/DisplayOptions.js index adf54b1f0a..acdd039831 100644 --- a/ui/src/dashboards/components/DisplayOptions.js +++ b/ui/src/dashboards/components/DisplayOptions.js @@ -5,6 +5,7 @@ import GraphTypeSelector from 'src/dashboards/components/GraphTypeSelector' import GaugeOptions from 'src/dashboards/components/GaugeOptions' import SingleStatOptions from 'src/dashboards/components/SingleStatOptions' import AxesOptions from 'src/dashboards/components/AxesOptions' +import TableOptions from 'src/dashboards/components/TableOptions' import {buildDefaultYLabel} from 'shared/presenters' @@ -41,6 +42,8 @@ class DisplayOptions extends Component { return case 'single-stat': return + case 'table': + return default: return ( + ) + } + const displayOptions = { stepPlot: type === 'line-stepplot', stackedGraph: type === 'line-stacked', From 1ddda5afbe4f0d7535cf0281c26e019c6294a1c4 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Tue, 27 Feb 2018 16:21:44 -0800 Subject: [PATCH 04/21] WIP add TableOptions for cell editor overlay options --- ui/src/dashboards/components/TableOptions.js | 314 +++++++++++++++++++ 1 file changed, 314 insertions(+) create mode 100644 ui/src/dashboards/components/TableOptions.js diff --git a/ui/src/dashboards/components/TableOptions.js b/ui/src/dashboards/components/TableOptions.js new file mode 100644 index 0000000000..0a3fcc25d8 --- /dev/null +++ b/ui/src/dashboards/components/TableOptions.js @@ -0,0 +1,314 @@ +import React, {Component, PropTypes} from 'react' +import {connect} from 'react-redux' +import {bindActionCreators} from 'redux' + +import _ from 'lodash' +import uuid from 'node-uuid' + +import FancyScrollbar from 'shared/components/FancyScrollbar' +import Threshold from 'src/dashboards/components/Threshold' +import ColorDropdown from 'shared/components/ColorDropdown' +import Dropdown from 'shared/components/Dropdown' + +import { + GAUGE_COLORS, + DEFAULT_VALUE_MIN, + DEFAULT_VALUE_MAX, + MAX_THRESHOLDS, + SINGLE_STAT_BASE, + SINGLE_STAT_TEXT, + SINGLE_STAT_BG, +} from 'src/dashboards/constants/gaugeColors' + +import { + updateSingleStatType, + updateSingleStatColors, + updateAxes, +} from 'src/dashboards/actions/cellEditorOverlay' + +const formatColor = color => { + const {hex, name} = color + return {hex, name} +} + +class TableOptions extends Component { + handleToggleSingleStatType = newType => () => { + const {handleUpdateSingleStatType} = this.props + + handleUpdateSingleStatType(newType) + } + + handleAddThreshold = () => { + const { + singleStatColors, + singleStatType, + handleUpdateSingleStatColors, + } = this.props + + const randomColor = _.random(0, GAUGE_COLORS.length - 1) + + const maxValue = DEFAULT_VALUE_MIN + const minValue = DEFAULT_VALUE_MAX + + let randomValue = _.round(_.random(minValue, maxValue, true), 2) + + if (singleStatColors.length > 0) { + const colorsValues = _.mapValues(singleStatColors, 'value') + do { + randomValue = _.round(_.random(minValue, maxValue, true), 2) + } while (_.includes(colorsValues, randomValue)) + } + + const newThreshold = { + type: singleStatType, + id: uuid.v4(), + value: randomValue, + hex: GAUGE_COLORS[randomColor].hex, + name: GAUGE_COLORS[randomColor].name, + } + + handleUpdateSingleStatColors([...singleStatColors, newThreshold]) + } + + handleDeleteThreshold = threshold => () => { + const {handleUpdateSingleStatColors} = this.props + + const singleStatColors = this.props.singleStatColors.filter( + color => color.id !== threshold.id + ) + + handleUpdateSingleStatColors(singleStatColors) + } + + handleChooseColor = threshold => chosenColor => { + const {handleUpdateSingleStatColors} = this.props + + const singleStatColors = this.props.singleStatColors.map( + color => + color.id === threshold.id + ? {...color, hex: chosenColor.hex, name: chosenColor.name} + : color + ) + + handleUpdateSingleStatColors(singleStatColors) + } + + handleUpdateColorValue = (threshold, value) => { + const {handleUpdateSingleStatColors} = this.props + + const singleStatColors = this.props.singleStatColors.map( + color => (color.id === threshold.id ? {...color, value} : color) + ) + + handleUpdateSingleStatColors(singleStatColors) + } + + handleValidateColorValue = (threshold, targetValue) => { + const {singleStatColors} = this.props + const sortedColors = _.sortBy(singleStatColors, color => color.value) + + return !sortedColors.some(color => color.value === targetValue) + } + + handleUpdatePrefix = e => { + const {handleUpdateAxes, axes} = this.props + const newAxes = {...axes, y: {...axes.y, prefix: e.target.value}} + + handleUpdateAxes(newAxes) + } + + handleUpdateSuffix = e => { + const {handleUpdateAxes, axes} = this.props + const newAxes = {...axes, y: {...axes.y, suffix: e.target.value}} + + handleUpdateAxes(newAxes) + } + + render() { + const { + singleStatColors, + singleStatType, + // axes: {y: {prefix, suffix}}, + } = this.props + + const disableAddThreshold = singleStatColors.length > MAX_THRESHOLDS + + const sortedColors = _.sortBy(singleStatColors, color => color.value) + + return ( + +
+
Table Controls
+
+ + +
+ +
    +
  • + Vertical +
    • +
  • + Horizontal +
    • +
+ + +
    +
  • + Truncate +
    • +
  • + Wrap +
    • +
  • + Single Line +
    • +
+
+ + + + + + {sortedColors.map( + color => + color.id === SINGLE_STAT_BASE + ?
+
Base Color
+ +
+ : + )} + +
+ +
    +
  • + Background +
    • +
  • + Text +
    • +
+
+
+
+ + ) + } +} + +const {arrayOf, func, number, shape, string} = PropTypes + +TableOptions.defaultProps = { + colors: [], +} + +TableOptions.propTypes = { + singleStatType: string.isRequired, + singleStatColors: arrayOf( + shape({ + type: string.isRequired, + hex: string.isRequired, + id: string.isRequired, + name: string.isRequired, + value: number.isRequired, + }).isRequired + ), + handleUpdateSingleStatType: func.isRequired, + handleUpdateSingleStatColors: func.isRequired, + handleUpdateAxes: func.isRequired, + axes: shape({}).isRequired, +} + +const mapStateToProps = ({ + cellEditorOverlay: {singleStatType, singleStatColors, cell: {axes}}, +}) => ({ + singleStatType, + singleStatColors, + axes, +}) + +const mapDispatchToProps = dispatch => ({ + handleUpdateSingleStatType: bindActionCreators( + updateSingleStatType, + dispatch + ), + handleUpdateSingleStatColors: bindActionCreators( + updateSingleStatColors, + dispatch + ), + handleUpdateAxes: bindActionCreators(updateAxes, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(TableOptions) From 6bf7132101cd6c56922f2117e5afb54fdb2ff08d Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Tue, 27 Feb 2018 17:07:27 -0800 Subject: [PATCH 05/21] WIP adding controls into TableOptions --- ui/src/dashboards/components/TableOptions.js | 50 ++++++++++++-------- 1 file changed, 31 insertions(+), 19 deletions(-) diff --git a/ui/src/dashboards/components/TableOptions.js b/ui/src/dashboards/components/TableOptions.js index 0a3fcc25d8..9abb259756 100644 --- a/ui/src/dashboards/components/TableOptions.js +++ b/ui/src/dashboards/components/TableOptions.js @@ -93,6 +93,14 @@ class TableOptions extends Component { handleUpdateSingleStatColors(singleStatColors) } + handleChooseSortBy = value => {} + + handleTimeFormatChange = format => {} + + handleToggleTimeAxis = axis => {} + + handleToggleTextWrapping = wrapType => {} + handleUpdateColorValue = (threshold, value) => { const {handleUpdateSingleStatColors} = this.props @@ -135,6 +143,8 @@ class TableOptions extends Component { const sortedColors = _.sortBy(singleStatColors, color => color.value) + const sortByOptions = ['hey', 'yo', 'what'].map(op => ({text: op})) + return (
@@ -158,7 +167,7 @@ class TableOptions extends Component { className={`${singleStatType === SINGLE_STAT_BG ? 'active' : ''}`} - // onClick={this.handleToggleSingleStatType(SINGLE_STAT_BG)} + onClick={this.handleToggleTimeAxis} > Vertical @@ -166,19 +175,31 @@ class TableOptions extends Component { className={`${singleStatType === SINGLE_STAT_TEXT ? 'active' : ''}`} - // onClick={this.handleToggleSingleStatType(SINGLE_STAT_TEXT)} + onClick={this.handleToggleTimeAxis} > Horizontal - +
+
+ + +
+
  • Truncate
    • @@ -186,7 +207,7 @@ class TableOptions extends Component { className={`${singleStatType === SINGLE_STAT_TEXT ? 'active' : ''}`} - // onClick={this.handleToggleSingleStatType(SINGLE_STAT_TEXT)} + onClick={this.handleToggleTextWrapping} > Wrap @@ -194,21 +215,13 @@ class TableOptions extends Component { className={`${singleStatType === SINGLE_STAT_BG ? 'active' : ''}`} - // onClick={this.handleToggleSingleStatType(SINGLE_STAT_BG)} + onClick={this.handleToggleTextWrapping} > Single Line
- - - + + {sortedColors.map( + color => + color.id === SINGLE_STAT_BASE + ?
+
Base Color
+ +
+ : + )} + + ) +} +const {arrayOf, bool, func, shape, string, number} = PropTypes + +GraphOptionsThresholds.propTypes = { + handleAddThreshold: func.isRequired, + disableAddThreshold: bool, + sortedColors: arrayOf( + shape({ + hex: string.isRequired, + id: string.isRequired, + name: string.isRequired, + type: string.isRequired, + value: number.isRequired, + }).isRequired + ).isRequired, + formatColor: func.isRequired, + handleChooseColor: func.isRequired, + handleValidateColorValue: func.isRequired, + handleUpdateColorValue: func.isRequired, + handleDeleteThreshold: func.isRequired, +} + +export default GraphOptionsThresholds diff --git a/ui/src/dashboards/components/TableOptions.js b/ui/src/dashboards/components/TableOptions.js index 9abb259756..de21067bac 100644 --- a/ui/src/dashboards/components/TableOptions.js +++ b/ui/src/dashboards/components/TableOptions.js @@ -6,16 +6,17 @@ import _ from 'lodash' import uuid from 'node-uuid' import FancyScrollbar from 'shared/components/FancyScrollbar' -import Threshold from 'src/dashboards/components/Threshold' -import ColorDropdown from 'shared/components/ColorDropdown' import Dropdown from 'shared/components/Dropdown' +import GraphOptionsThresholds from 'src/dashboards/components/GraphOptionsThresholds' +import GraphOptionsThresholdColoring from 'src/dashboards/components/GraphOptionsThresholdColoring' +import GraphOptionsTextWrapping from 'src/dashboards/components/GraphOptionsTextWrapping' +import GraphOptionsCustomizeColumns from 'src/dashboards/components/GraphOptionsCustomizeColumns' import { GAUGE_COLORS, DEFAULT_VALUE_MIN, DEFAULT_VALUE_MAX, MAX_THRESHOLDS, - SINGLE_STAT_BASE, SINGLE_STAT_TEXT, SINGLE_STAT_BG, } from 'src/dashboards/constants/gaugeColors' @@ -101,6 +102,8 @@ class TableOptions extends Component { handleToggleTextWrapping = wrapType => {} + handleColumnRename = newName => {} + handleUpdateColorValue = (threshold, value) => { const {handleUpdateSingleStatColors} = this.props @@ -143,7 +146,11 @@ class TableOptions extends Component { const sortedColors = _.sortBy(singleStatColors, color => color.value) - const sortByOptions = ['hey', 'yo', 'what'].map(op => ({text: op})) + const columns = ['hey', 'yo', 'what'].map(col => ({ + text: col, + name: col, + newName: '', + })) return ( -
- -
    -
  • - Truncate -
    • -
  • - Wrap -
    • -
  • - Single Line -
    • -
-
- - - - {sortedColors.map( - color => - color.id === SINGLE_STAT_BASE - ?
-
Base Color
- -
- : - )} -
- -
    -
  • - Background -
    • -
  • - Text -
    • -
-
+ + + + From 0c4438d281768c82e82729617f56e0aa576981d0 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Wed, 28 Feb 2018 15:39:56 -0800 Subject: [PATCH 10/21] create TableGraph component and use it in RefreshingGraphs Co-authored-by: "Deniz Kusefoglu" --- ui/src/shared/components/RefreshingGraph.js | 15 +- ui/src/shared/components/TableGraph.js | 1188 +++++++++++++++++++ 2 files changed, 1190 insertions(+), 13 deletions(-) create mode 100644 ui/src/shared/components/TableGraph.js diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js index a73572c0c5..184cc7c94e 100644 --- a/ui/src/shared/components/RefreshingGraph.js +++ b/ui/src/shared/components/RefreshingGraph.js @@ -6,6 +6,7 @@ import AutoRefresh from 'shared/components/AutoRefresh' import LineGraph from 'shared/components/LineGraph' import SingleStat from 'shared/components/SingleStat' import GaugeChart from 'shared/components/GaugeChart' +import TableGraph from 'shared/components/TableGraph' const RefreshingLineGraph = AutoRefresh(LineGraph) const RefreshingSingleStat = AutoRefresh(SingleStat) @@ -80,19 +81,7 @@ const RefreshingGraph = ({ } if (type === 'table') { - return ( - - ) + return } const displayOptions = { diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js new file mode 100644 index 0000000000..1219b73cc3 --- /dev/null +++ b/ui/src/shared/components/TableGraph.js @@ -0,0 +1,1188 @@ +import React, {PropTypes, Component} from 'react' +import {Grid} from 'react-virtualized' +// import uuid from 'node-uuid' + +import {DASHBOARD_LAYOUT_ROW_HEIGHT} from 'shared/constants' + +class TableGraph extends Component { + constructor(props) { + super(props) + + this.state = { + data: this.props.data || [ + [ + 1, + 2, + 3, + 4, + 5, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 2, + 3, + 4, + 5, + 6, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 1, + 2, + 3, + 4, + 5, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 2, + 3, + 4, + 5, + 6, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 1, + 2, + 3, + 4, + 5, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 2, + 3, + 4, + 5, + 6, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 1, + 2, + 3, + 4, + 5, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 2, + 3, + 4, + 5, + 6, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 1, + 2, + 3, + 4, + 5, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 2, + 3, + 4, + 5, + 6, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 1, + 2, + 3, + 4, + 5, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 2, + 3, + 4, + 5, + 6, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 1, + 2, + 3, + 4, + 5, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 2, + 3, + 4, + 5, + 6, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 1, + 2, + 3, + 4, + 5, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 2, + 3, + 4, + 5, + 6, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 1, + 2, + 3, + 4, + 5, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 2, + 3, + 4, + 5, + 6, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 1, + 2, + 3, + 4, + 5, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 2, + 3, + 4, + 5, + 6, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 1, + 2, + 3, + 4, + 5, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 2, + 3, + 4, + 5, + 6, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 1, + 2, + 3, + 4, + 5, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 2, + 3, + 4, + 5, + 6, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 1, + 2, + 3, + 4, + 5, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 2, + 3, + 4, + 5, + 6, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 1, + 2, + 3, + 4, + 5, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + [ + 2, + 3, + 4, + 5, + 6, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + 1, + 2, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 0, + ], + ], + } + } + + cellRenderer = ({columnIndex, key, rowIndex, style}) => { + const {data} = this.state + return ( +
+ {data[columnIndex][rowIndex]} +
+ ) + } + render() { + const {data} = this.state + const {cellHeight} = this.props + const columnCount = data[0].length + const rowCount = data.length + const COLUMN_WIDTH = 50 + const ROW_HEIGHT = 50 + const tableWidth = this.gridContainer ? this.gridContainer.clientWidth : 400 + const tableHeight = cellHeight * DASHBOARD_LAYOUT_ROW_HEIGHT - 64 + + return ( +
(this.gridContainer = gridContainer)} + > + +
+ ) + } +} + +export default TableGraph From 5f0001336c25f279173ff42800896209a9988cf2 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Wed, 28 Feb 2018 17:50:38 -0800 Subject: [PATCH 11/21] WIP adding react-virtualized grid component to TableGraph --- ui/src/shared/components/RefreshingGraph.js | 18 +- ui/src/shared/components/TableGraph.js | 1177 +------------------ 2 files changed, 43 insertions(+), 1152 deletions(-) diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js index 184cc7c94e..588efdb7d4 100644 --- a/ui/src/shared/components/RefreshingGraph.js +++ b/ui/src/shared/components/RefreshingGraph.js @@ -11,6 +11,7 @@ import TableGraph from 'shared/components/TableGraph' const RefreshingLineGraph = AutoRefresh(LineGraph) const RefreshingSingleStat = AutoRefresh(SingleStat) const RefreshingGaugeChart = AutoRefresh(GaugeChart) +const RefreshingTableGraph = AutoRefresh(TableGraph) const RefreshingGraph = ({ axes, @@ -81,7 +82,22 @@ const RefreshingGraph = ({ } if (type === 'table') { - return + return ( + + ) } const displayOptions = { diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index 1219b73cc3..fe9c9694b0 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -1,1165 +1,38 @@ import React, {PropTypes, Component} from 'react' import {Grid} from 'react-virtualized' +import _ from 'lodash' // import uuid from 'node-uuid' import {DASHBOARD_LAYOUT_ROW_HEIGHT} from 'shared/constants' +import timeSeriesToDygraph from 'src/utils/timeSeriesToDygraph' class TableGraph extends Component { constructor(props) { super(props) + } - this.state = { - data: this.props.data || [ - [ - 1, - 2, - 3, - 4, - 5, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 2, - 3, - 4, - 5, - 6, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 1, - 2, - 3, - 4, - 5, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 2, - 3, - 4, - 5, - 6, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 1, - 2, - 3, - 4, - 5, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 2, - 3, - 4, - 5, - 6, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 1, - 2, - 3, - 4, - 5, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 2, - 3, - 4, - 5, - 6, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 1, - 2, - 3, - 4, - 5, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 2, - 3, - 4, - 5, - 6, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 1, - 2, - 3, - 4, - 5, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 2, - 3, - 4, - 5, - 6, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 1, - 2, - 3, - 4, - 5, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 2, - 3, - 4, - 5, - 6, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 1, - 2, - 3, - 4, - 5, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 2, - 3, - 4, - 5, - 6, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 1, - 2, - 3, - 4, - 5, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 2, - 3, - 4, - 5, - 6, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 1, - 2, - 3, - 4, - 5, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 2, - 3, - 4, - 5, - 6, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 1, - 2, - 3, - 4, - 5, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 2, - 3, - 4, - 5, - 6, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 1, - 2, - 3, - 4, - 5, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 2, - 3, - 4, - 5, - 6, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 1, - 2, - 3, - 4, - 5, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 2, - 3, - 4, - 5, - 6, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 1, - 2, - 3, - 4, - 5, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - [ - 2, - 3, - 4, - 5, - 6, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 0, - ], - ], - } + componentWillUpdate(nextProps) { + // TODO: determine if in dataExplorer + this._timeSeries = timeSeriesToDygraph(nextProps.data, false) } cellRenderer = ({columnIndex, key, rowIndex, style}) => { - const {data} = this.state + const data = _.get(this._timeSeries, 'timeSeries', [[]]) + console.log(data[0][0].toString()) return (
- {data[columnIndex][rowIndex]} + {data[columnIndex][rowIndex] + ? data[columnIndex][rowIndex].toString() + : ''}
) } render() { - const {data} = this.state + const data = _.get(this._timeSeries, 'timeSeries', [[]]) + const columns = _.get(this._timeSeries, 'labels', []) + const {cellHeight} = this.props - const columnCount = data[0].length + const columnCount = _.get(data, ['0', 'length'], 0) const rowCount = data.length const COLUMN_WIDTH = 50 const ROW_HEIGHT = 50 @@ -1171,15 +44,17 @@ class TableGraph extends Component { className="graph-container" ref={gridContainer => (this.gridContainer = gridContainer)} > - + {data.length > 1 + ? + : null} ) } From 1a60d1857fad5f828c823dc415d62d7efac21f4d Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Thu, 1 Mar 2018 12:57:45 -0800 Subject: [PATCH 12/21] change Grid to MultiGrid in TableGraph and added a function to trasform data into an accepted format Co-authored-by: "Deniz Kusefoglu" --- ui/src/shared/components/TableGraph.js | 38 +++++++++++++++++--------- ui/src/utils/timeSeriesToDygraph.js | 8 ++++++ 2 files changed, 33 insertions(+), 13 deletions(-) diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index fe9c9694b0..a01b5511cf 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -1,40 +1,43 @@ import React, {PropTypes, Component} from 'react' -import {Grid} from 'react-virtualized' import _ from 'lodash' // import uuid from 'node-uuid' import {DASHBOARD_LAYOUT_ROW_HEIGHT} from 'shared/constants' -import timeSeriesToDygraph from 'src/utils/timeSeriesToDygraph' +import {timeSeriesToTable} from 'src/utils/timeSeriesToDygraph' +import {MultiGrid} from 'react-virtualized/dist/commonjs/MultiGrid' class TableGraph extends Component { constructor(props) { super(props) } + componentWillMount() { + this._labels = [] + this._data = [[]] + } + componentWillUpdate(nextProps) { // TODO: determine if in dataExplorer - this._timeSeries = timeSeriesToDygraph(nextProps.data, false) + const {labels, data} = timeSeriesToTable(nextProps.data) + this._labels = labels + this._data = data } cellRenderer = ({columnIndex, key, rowIndex, style}) => { - const data = _.get(this._timeSeries, 'timeSeries', [[]]) - console.log(data[0][0].toString()) + const data = this._data return (
- {data[columnIndex][rowIndex] - ? data[columnIndex][rowIndex].toString() - : ''} + {data[rowIndex][columnIndex]}
) } - render() { - const data = _.get(this._timeSeries, 'timeSeries', [[]]) - const columns = _.get(this._timeSeries, 'labels', []) + render() { + const data = this._data const {cellHeight} = this.props const columnCount = _.get(data, ['0', 'length'], 0) const rowCount = data.length - const COLUMN_WIDTH = 50 + const COLUMN_WIDTH = 300 const ROW_HEIGHT = 50 const tableWidth = this.gridContainer ? this.gridContainer.clientWidth : 400 const tableHeight = cellHeight * DASHBOARD_LAYOUT_ROW_HEIGHT - 64 @@ -45,7 +48,9 @@ class TableGraph extends Component { ref={gridContainer => (this.gridContainer = gridContainer)} > {data.length > 1 - ? { + const {labels, timeSeries} = timeSeriesToDygraph(data, false) + const tableData = timeSeries.length + ? timeSeries.map(row => row.map(cell => (cell ? cell.toString() : 'null'))) + : [[]] + return {labels, data: [labels, ...tableData]} +} From b2bfa3639783ac96cca829a708de98a89d5725b6 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Thu, 1 Mar 2018 13:41:47 -0800 Subject: [PATCH 13/21] add react-virtualized dependency --- ui/yarn.lock | 101 +-------------------------------------------------- 1 file changed, 1 insertion(+), 100 deletions(-) diff --git a/ui/yarn.lock b/ui/yarn.lock index a7f32eba6f..4351096fee 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1141,57 +1141,12 @@ babel-register@^6.26.0: source-map-support "^0.4.15" babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0: - version "6.26.0" - resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" - dependencies: - core-js "^2.4.0" -<<<<<<< HEAD - regenerator-runtime "^0.10.0" - -babel-runtime@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" dependencies: core-js "^2.4.0" regenerator-runtime "^0.11.0" -babel-template@^6.14.0, babel-template@^6.15.0, babel-template@^6.16.0, babel-template@^6.3.0, babel-template@^6.8.0: - version "6.16.0" - resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca" - dependencies: - babel-runtime "^6.9.0" - babel-traverse "^6.16.0" - babel-types "^6.16.0" - babylon "^6.11.0" - lodash "^4.2.0" - -babel-template@^6.22.0: - version "6.22.0" - resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.22.0.tgz#403d110905a4626b317a2a1fcb8f3b73204b2edb" - dependencies: - babel-runtime "^6.22.0" - babel-traverse "^6.22.0" - babel-types "^6.22.0" - babylon "^6.11.0" - lodash "^4.2.0" - -babel-traverse@^6.0.20, babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-traverse@^6.21.0: - version "6.21.0" - resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.21.0.tgz#69c6365804f1a4f69eb1213f85b00a818b8c21ad" - dependencies: - babel-code-frame "^6.20.0" - babel-messages "^6.8.0" - babel-runtime "^6.20.0" - babel-types "^6.21.0" - babylon "^6.11.0" - debug "^2.2.0" - globals "^9.0.0" - invariant "^2.2.0" - lodash "^4.2.0" -======= - regenerator-runtime "^0.11.0" ->>>>>>> master - babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0, babel-template@^6.3.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02" @@ -2572,22 +2527,10 @@ dom-css@^2.0.0: prefix-style "2.0.1" to-camel-case "1.0.0" -<<<<<<< HEAD "dom-helpers@^2.4.0 || ^3.0.0": version "3.3.1" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6" -dom-serialize@^2.2.0: - version "2.2.1" - resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b" - dependencies: - custom-event "~1.0.0" - ent "~2.2.0" - extend "^3.0.0" - void-elements "^2.0.0" - -======= ->>>>>>> master dom-serializer@0, dom-serializer@~0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82" @@ -3339,27 +3282,9 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" -<<<<<<< HEAD -fbjs@^0.8.16: - version "0.8.16" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" - dependencies: - core-js "^1.0.0" - isomorphic-fetch "^2.1.1" - loose-envify "^1.0.0" - object-assign "^4.1.0" - promise "^7.1.1" - setimmediate "^1.0.5" - ua-parser-js "^0.7.9" - -fbjs@^0.8.9: - version "0.8.12" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" -======= fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.9: version "0.8.16" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" ->>>>>>> master dependencies: core-js "^1.0.0" isomorphic-fetch "^2.1.1" @@ -5471,11 +5396,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -<<<<<<< HEAD -loose-envify@^1.0.0, loose-envify@^1.3.0, loose-envify@^1.3.1: -======= -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1: ->>>>>>> master +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.0, loose-envify@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: @@ -6957,23 +6878,9 @@ prop-types@15.x, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, pr loose-envify "^1.3.1" object-assign "^4.1.1" -<<<<<<< HEAD -prop-types@^15.6.0: - version "15.6.1" - resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" - dependencies: - fbjs "^0.8.16" - loose-envify "^1.3.1" - object-assign "^4.1.1" - -proxy-addr@~1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.2.tgz#b4cc5f22610d9535824c123aef9d3cf73c40ba37" -======= proxy-addr@~2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec" ->>>>>>> master dependencies: forwarded "~0.1.2" ipaddr.js "1.5.2" @@ -7409,15 +7316,9 @@ regenerator-runtime@^0.11.0: version "0.11.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" -<<<<<<< HEAD -regenerator-transform@0.9.8: - version "0.9.8" - resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.8.tgz#0f88bb2bc03932ddb7b6b7312e68078f01026d6c" -======= regenerator-transform@^0.10.0: version "0.10.1" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd" ->>>>>>> master dependencies: babel-runtime "^6.18.0" babel-types "^6.19.0" From cbc4d9bcc6eb8ded471bd1a76c75c2969da752d3 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Thu, 1 Mar 2018 13:50:12 -0800 Subject: [PATCH 14/21] use uuid instead of node-uuid --- ui/src/dashboards/components/GraphOptionsCustomizeColumns.js | 2 +- ui/src/dashboards/components/TableOptions.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/dashboards/components/GraphOptionsCustomizeColumns.js b/ui/src/dashboards/components/GraphOptionsCustomizeColumns.js index ccfce7ef07..d7542278c8 100644 --- a/ui/src/dashboards/components/GraphOptionsCustomizeColumns.js +++ b/ui/src/dashboards/components/GraphOptionsCustomizeColumns.js @@ -1,7 +1,7 @@ import React, {PropTypes} from 'react' import GraphOptionsCustomizableColumn from 'src/dashboards/components/GraphOptionsCustomizableColumn' -import uuid from 'node-uuid' +import uuid from 'uuid' const GraphOptionsCustomizeColumns = ({columns, onColumnRename}) => { return ( diff --git a/ui/src/dashboards/components/TableOptions.js b/ui/src/dashboards/components/TableOptions.js index 42f5da8740..637ada4c85 100644 --- a/ui/src/dashboards/components/TableOptions.js +++ b/ui/src/dashboards/components/TableOptions.js @@ -3,7 +3,7 @@ import {connect} from 'react-redux' import {bindActionCreators} from 'redux' import _ from 'lodash' -import uuid from 'node-uuid' +import uuid from 'uuid' import FancyScrollbar from 'shared/components/FancyScrollbar' import GraphOptionsThresholds from 'src/dashboards/components/GraphOptionsThresholds' From ea36042e3559400d6347fba1e4ebba09b41ea482 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Thu, 1 Mar 2018 16:03:25 -0800 Subject: [PATCH 15/21] change TableGraph to get height from the wrapping div instead of passed in cellheight and remove extra stuff from TableOptions Co-authored-by: "Deniz Kusefoglu" --- ui/src/dashboards/components/TableOptions.js | 92 ++------------------ ui/src/shared/components/TableGraph.js | 7 +- 2 files changed, 8 insertions(+), 91 deletions(-) diff --git a/ui/src/dashboards/components/TableOptions.js b/ui/src/dashboards/components/TableOptions.js index 637ada4c85..fea555e684 100644 --- a/ui/src/dashboards/components/TableOptions.js +++ b/ui/src/dashboards/components/TableOptions.js @@ -35,66 +35,13 @@ const formatColor = color => { class TableOptions extends Component { state = {TimeAxis: 'VERTICAL', TimeFormat: 'mm/dd/yyyy HH:mm:ss.ss'} - handleToggleSingleStatType = newType => () => { - const {handleUpdateSingleStatType} = this.props + handleToggleSingleStatType = () => {} - handleUpdateSingleStatType(newType) - } + handleAddThreshold = () => {} - handleAddThreshold = () => { - const { - singleStatColors, - singleStatType, - handleUpdateSingleStatColors, - } = this.props + handleDeleteThreshold = () => {} - const randomColor = _.random(0, GAUGE_COLORS.length - 1) - - const maxValue = DEFAULT_VALUE_MIN - const minValue = DEFAULT_VALUE_MAX - - let randomValue = _.round(_.random(minValue, maxValue, true), 2) - - if (singleStatColors.length > 0) { - const colorsValues = _.mapValues(singleStatColors, 'value') - do { - randomValue = _.round(_.random(minValue, maxValue, true), 2) - } while (_.includes(colorsValues, randomValue)) - } - - const newThreshold = { - type: singleStatType, - id: uuid.v4(), - value: randomValue, - hex: GAUGE_COLORS[randomColor].hex, - name: GAUGE_COLORS[randomColor].name, - } - - handleUpdateSingleStatColors([...singleStatColors, newThreshold]) - } - - handleDeleteThreshold = threshold => () => { - const {handleUpdateSingleStatColors} = this.props - - const singleStatColors = this.props.singleStatColors.filter( - color => color.id !== threshold.id - ) - - handleUpdateSingleStatColors(singleStatColors) - } - - handleChooseColor = threshold => chosenColor => { - const {handleUpdateSingleStatColors} = this.props - - const singleStatColors = this.props.singleStatColors.map( - color => - color.id === threshold.id - ? {...color, hex: chosenColor.hex, name: chosenColor.name} - : color - ) - - handleUpdateSingleStatColors(singleStatColors) - } + handleChooseColor = () => {} handleChooseSortBy = () => {} @@ -106,36 +53,9 @@ class TableOptions extends Component { handleColumnRename = () => {} - handleUpdateColorValue = (threshold, value) => { - const {handleUpdateSingleStatColors} = this.props + handleUpdateColorValue = () => {} - const singleStatColors = this.props.singleStatColors.map( - color => (color.id === threshold.id ? {...color, value} : color) - ) - - handleUpdateSingleStatColors(singleStatColors) - } - - handleValidateColorValue = (threshold, targetValue) => { - const {singleStatColors} = this.props - const sortedColors = _.sortBy(singleStatColors, color => color.value) - - return !sortedColors.some(color => color.value === targetValue) - } - - handleUpdatePrefix = e => { - const {handleUpdateAxes, axes} = this.props - const newAxes = {...axes, y: {...axes.y, prefix: e.target.value}} - - handleUpdateAxes(newAxes) - } - - handleUpdateSuffix = e => { - const {handleUpdateAxes, axes} = this.props - const newAxes = {...axes, y: {...axes.y, suffix: e.target.value}} - - handleUpdateAxes(newAxes) - } + handleValidateColorValue = () => {} render() { const { diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index a01b5511cf..5ff2ae14a5 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -1,7 +1,5 @@ import React, {PropTypes, Component} from 'react' import _ from 'lodash' -// import uuid from 'node-uuid' - import {DASHBOARD_LAYOUT_ROW_HEIGHT} from 'shared/constants' import {timeSeriesToTable} from 'src/utils/timeSeriesToDygraph' import {MultiGrid} from 'react-virtualized/dist/commonjs/MultiGrid' @@ -34,13 +32,12 @@ class TableGraph extends Component { render() { const data = this._data - const {cellHeight} = this.props const columnCount = _.get(data, ['0', 'length'], 0) const rowCount = data.length const COLUMN_WIDTH = 300 const ROW_HEIGHT = 50 - const tableWidth = this.gridContainer ? this.gridContainer.clientWidth : 400 - const tableHeight = cellHeight * DASHBOARD_LAYOUT_ROW_HEIGHT - 64 + const tableWidth = this.gridContainer ? this.gridContainer.clientWidth : 0 + const tableHeight = this.gridContainer ? this.gridContainer.clientHeight : 0 return (
Date: Thu, 1 Mar 2018 16:19:46 -0800 Subject: [PATCH 16/21] add higherorder functions to ones that require it in TableOptions Co-authored-by "Deniz Kusefoglu" --- ui/src/dashboards/components/TableOptions.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ui/src/dashboards/components/TableOptions.js b/ui/src/dashboards/components/TableOptions.js index fea555e684..987b798761 100644 --- a/ui/src/dashboards/components/TableOptions.js +++ b/ui/src/dashboards/components/TableOptions.js @@ -35,13 +35,14 @@ const formatColor = color => { class TableOptions extends Component { state = {TimeAxis: 'VERTICAL', TimeFormat: 'mm/dd/yyyy HH:mm:ss.ss'} + handleToggleSingleStatType = () => {} handleAddThreshold = () => {} - handleDeleteThreshold = () => {} + handleDeleteThreshold = () => () => {} - handleChooseColor = () => {} + handleChooseColor = () => () => {} handleChooseSortBy = () => {} From c40caf053bdc1a59a8512d735d64c686bda179a6 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Thu, 1 Mar 2018 16:24:01 -0800 Subject: [PATCH 17/21] turn off TableGraph feature flag --- ui/src/dashboards/graphics/graph.js | 76 ++++++++++++++--------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/ui/src/dashboards/graphics/graph.js b/ui/src/dashboards/graphics/graph.js index 2ce7ade6fc..11705fa34f 100644 --- a/ui/src/dashboards/graphics/graph.js +++ b/ui/src/dashboards/graphics/graph.js @@ -459,42 +459,42 @@ export const GRAPH_TYPES = [
), }, - { - type: 'table', - menuOption: 'Table', - graphic: ( -
- - - - - - - - - - - - - - - - - - - - -
- ), - }, + // { + // type: 'table', + // menuOption: 'Table', + // graphic: ( + //
+ // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + // + //
+ // ), + // }, ] From a1e3aea4a000adf09048e62cda9da97bbd98b5ee Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Thu, 1 Mar 2018 16:26:38 -0800 Subject: [PATCH 18/21] fix linter errors --- ui/src/dashboards/components/TableOptions.js | 8 ++++---- ui/src/shared/components/TableGraph.js | 1 - 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/ui/src/dashboards/components/TableOptions.js b/ui/src/dashboards/components/TableOptions.js index 987b798761..6fb991a9b6 100644 --- a/ui/src/dashboards/components/TableOptions.js +++ b/ui/src/dashboards/components/TableOptions.js @@ -3,7 +3,7 @@ import {connect} from 'react-redux' import {bindActionCreators} from 'redux' import _ from 'lodash' -import uuid from 'uuid' +// import uuid from 'uuid' import FancyScrollbar from 'shared/components/FancyScrollbar' import GraphOptionsThresholds from 'src/dashboards/components/GraphOptionsThresholds' @@ -16,9 +16,9 @@ import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy' import GraphOptionsTimeAxis from 'src/dashboards/components/GraphOptionsTimeAxis' import { - GAUGE_COLORS, - DEFAULT_VALUE_MIN, - DEFAULT_VALUE_MAX, + // GAUGE_COLORS, + // DEFAULT_VALUE_MIN, + // DEFAULT_VALUE_MAX, MAX_THRESHOLDS, } from 'src/dashboards/constants/gaugeColors' diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index 5ff2ae14a5..86500a36ff 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -1,6 +1,5 @@ import React, {PropTypes, Component} from 'react' import _ from 'lodash' -import {DASHBOARD_LAYOUT_ROW_HEIGHT} from 'shared/constants' import {timeSeriesToTable} from 'src/utils/timeSeriesToDygraph' import {MultiGrid} from 'react-virtualized/dist/commonjs/MultiGrid' From 8e007cc8dbfa6f50fcf0ca160710f8fb7716c755 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Fri, 2 Mar 2018 09:54:37 -0800 Subject: [PATCH 19/21] Respond to PR review --- .../components/GraphOptionsTextWrapping.js | 1 + .../GraphOptionsThresholdColoring.js | 1 + .../components/GraphOptionsThresholds.js | 1 + ui/src/dashboards/components/TableOptions.js | 19 +- ui/src/dashboards/graphics/graph.js | 939 +++++++++--------- ui/src/shared/components/TableGraph.js | 27 +- 6 files changed, 497 insertions(+), 491 deletions(-) diff --git a/ui/src/dashboards/components/GraphOptionsTextWrapping.js b/ui/src/dashboards/components/GraphOptionsTextWrapping.js index be71e46062..7d8ed98434 100644 --- a/ui/src/dashboards/components/GraphOptionsTextWrapping.js +++ b/ui/src/dashboards/components/GraphOptionsTextWrapping.js @@ -5,6 +5,7 @@ import { SINGLE_STAT_TEXT, } from 'src/dashboards/constants/gaugeColors' +// TODO: Needs major refactoring to make thresholds a much more general component to be shared between single stat, gauge, and table. const GraphOptionsTextWrapping = ({singleStatType, onToggleTextWrapping}) => { return (
diff --git a/ui/src/dashboards/components/GraphOptionsThresholdColoring.js b/ui/src/dashboards/components/GraphOptionsThresholdColoring.js index 251d6b5cea..010803c855 100644 --- a/ui/src/dashboards/components/GraphOptionsThresholdColoring.js +++ b/ui/src/dashboards/components/GraphOptionsThresholdColoring.js @@ -5,6 +5,7 @@ import { SINGLE_STAT_TEXT, } from 'src/dashboards/constants/gaugeColors' +// TODO: Needs major refactoring to make thresholds a much more general component to be shared between single stat, gauge, and table. const GraphOptionsThresholdColoring = ({ onToggleSingleStatType, singleStatType, diff --git a/ui/src/dashboards/components/GraphOptionsThresholds.js b/ui/src/dashboards/components/GraphOptionsThresholds.js index 4960e8e08c..8ca99ee2ad 100644 --- a/ui/src/dashboards/components/GraphOptionsThresholds.js +++ b/ui/src/dashboards/components/GraphOptionsThresholds.js @@ -7,6 +7,7 @@ import { SINGLE_STAT_BASE, } from 'src/dashboards/constants/gaugeColors' +// TODO: Needs major refactoring to make thresholds a much more general component to be shared between single stat, gauge, and table. const GraphOptionsThresholds = ({ onAddThreshold, disableAddThreshold, diff --git a/ui/src/dashboards/components/TableOptions.js b/ui/src/dashboards/components/TableOptions.js index 6fb991a9b6..28967c164f 100644 --- a/ui/src/dashboards/components/TableOptions.js +++ b/ui/src/dashboards/components/TableOptions.js @@ -3,24 +3,17 @@ import {connect} from 'react-redux' import {bindActionCreators} from 'redux' import _ from 'lodash' -// import uuid from 'uuid' import FancyScrollbar from 'shared/components/FancyScrollbar' -import GraphOptionsThresholds from 'src/dashboards/components/GraphOptionsThresholds' -import GraphOptionsThresholdColoring from 'src/dashboards/components/GraphOptionsThresholdColoring' +import GraphOptionsTimeFormat from 'src/dashboards/components/GraphOptionsTimeFormat' +import GraphOptionsTimeAxis from 'src/dashboards/components/GraphOptionsTimeAxis' +import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy' import GraphOptionsTextWrapping from 'src/dashboards/components/GraphOptionsTextWrapping' import GraphOptionsCustomizeColumns from 'src/dashboards/components/GraphOptionsCustomizeColumns' +import GraphOptionsThresholds from 'src/dashboards/components/GraphOptionsThresholds' +import GraphOptionsThresholdColoring from 'src/dashboards/components/GraphOptionsThresholdColoring' -import GraphOptionsTimeFormat from 'src/dashboards/components/GraphOptionsTimeFormat' -import GraphOptionsSortBy from 'src/dashboards/components/GraphOptionsSortBy' -import GraphOptionsTimeAxis from 'src/dashboards/components/GraphOptionsTimeAxis' - -import { - // GAUGE_COLORS, - // DEFAULT_VALUE_MIN, - // DEFAULT_VALUE_MAX, - MAX_THRESHOLDS, -} from 'src/dashboards/constants/gaugeColors' +import {MAX_THRESHOLDS} from 'src/dashboards/constants/gaugeColors' import { updateSingleStatType, diff --git a/ui/src/dashboards/graphics/graph.js b/ui/src/dashboards/graphics/graph.js index 11705fa34f..b5ea223e58 100644 --- a/ui/src/dashboards/graphics/graph.js +++ b/ui/src/dashboards/graphics/graph.js @@ -1,500 +1,511 @@ import React from 'react' +const GRAPH_SVGS = { + line: ( +
+ + + + + + + + +
+ ), + 'line-stacked': ( +
+ + + + + + + + +
+ ), + 'line-stepplot': ( +
+ + + + + + + + +
+ ), + 'single-stat': ( +
+ + + + + + + + +
+ ), + 'line-plus-single-stat': ( +
+ + + + + + + + + + + + +
+ ), + bar: ( +
+ + + + + + + + + + + + +
+ ), + gauge: ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ ), + table: ( +
+ + + + + + + + + + + + + + + + + + + + +
+ ), +} + export const GRAPH_TYPES = [ { type: 'line', menuOption: 'Line Graph', - graphic: ( -
- - - - - - - - -
- ), + graphic: GRAPH_SVGS.line, }, { type: 'line-stacked', menuOption: 'Stacked Graph', - graphic: ( -
- - - - - - - - -
- ), + graphic: GRAPH_SVGS['line-stacked'], }, { type: 'line-stepplot', menuOption: 'Step-Plot Graph', - graphic: ( -
- - - - - - - - -
- ), + graphic: GRAPH_SVGS['line-stepplot'], }, { type: 'single-stat', menuOption: 'Single Stat', - graphic: ( -
- - - - - - - - -
- ), + graphic: GRAPH_SVGS['single-stat'], }, { type: 'line-plus-single-stat', menuOption: 'Line Graph + Single Stat', - graphic: ( -
- - - - - - - - - - - - -
- ), + graphic: GRAPH_SVGS['line-plus-single-stat'], }, { type: 'bar', menuOption: 'Bar Graph', - graphic: ( -
- - - - - - - - - - - - -
- ), + graphic: GRAPH_SVGS.bar, }, { type: 'gauge', menuOption: 'Gauge', - graphic: ( -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- ), + graphic: GRAPH_SVGS.gauge, }, // { // type: 'table', // menuOption: 'Table', - // graphic: ( - //
- // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - //
- // ), + // graphic: GRAPH_SVGS.table, // }, ] diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index 86500a36ff..c845ffd61d 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -1,7 +1,7 @@ import React, {PropTypes, Component} from 'react' import _ from 'lodash' import {timeSeriesToTable} from 'src/utils/timeSeriesToDygraph' -import {MultiGrid} from 'react-virtualized/dist/commonjs/MultiGrid' +import {MultiGrid} from 'react-virtualized' class TableGraph extends Component { constructor(props) { @@ -43,19 +43,18 @@ class TableGraph extends Component { className="graph-container" ref={gridContainer => (this.gridContainer = gridContainer)} > - {data.length > 1 - ? - : null} + {data.length > 1 && + }
) } From 997ae996e2f47dd69aab91a7d94763cb6579c9ee Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Fri, 2 Mar 2018 10:02:44 -0800 Subject: [PATCH 20/21] Respond to PR review --- ui/src/shared/components/TableGraph.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index c845ffd61d..09ae35afd3 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -4,10 +4,6 @@ import {timeSeriesToTable} from 'src/utils/timeSeriesToDygraph' import {MultiGrid} from 'react-virtualized' class TableGraph extends Component { - constructor(props) { - super(props) - } - componentWillMount() { this._labels = [] this._data = [[]] From 475de32cd94045d12b243cd7d07e7c54ed211adb Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Fri, 2 Mar 2018 11:25:46 -0800 Subject: [PATCH 21/21] Add comment indicating location of feature flag --- ui/src/dashboards/graphics/graph.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/dashboards/graphics/graph.js b/ui/src/dashboards/graphics/graph.js index b5ea223e58..5c2821cbef 100644 --- a/ui/src/dashboards/graphics/graph.js +++ b/ui/src/dashboards/graphics/graph.js @@ -503,6 +503,7 @@ export const GRAPH_TYPES = [ menuOption: 'Gauge', graphic: GRAPH_SVGS.gauge, }, + // FEATURE FLAG for Table-Graph // { // type: 'table', // menuOption: 'Table',