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

WIP adding controls into TableOptions

feature/graph-table-CEO
Iris Scholten 2018-02-27 17:07:27 -08:00
parent b2819b6197
commit da43736602
1 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
ui/src/dashboards/components/TableOptions.js
View File

@ -93,6 +93,14 @@ class TableOptions extends Component {
handleUpdateSingleStatColors(singleStatColors) handleUpdateSingleStatColors(singleStatColors)
} }
handleChooseSortBy = value => {}
handleTimeFormatChange = format => {}
handleToggleTimeAxis = axis => {}
handleToggleTextWrapping = wrapType => {}
handleUpdateColorValue = (threshold, value) => { handleUpdateColorValue = (threshold, value) => {
const {handleUpdateSingleStatColors} = this.props const {handleUpdateSingleStatColors} = this.props
@ -135,6 +143,8 @@ class TableOptions extends Component {
const sortedColors = _.sortBy(singleStatColors, color => color.value) const sortedColors = _.sortBy(singleStatColors, color => color.value)
const sortByOptions = ['hey', 'yo', 'what'].map(op => ({text: op}))
return ( return (
<FancyScrollbar <FancyScrollbar
className="display-options--cell y-axis-controls" className="display-options--cell y-axis-controls"
@ -148,8 +158,7 @@ class TableOptions extends Component {
className="form-control input-sm" className="form-control input-sm"
placeholder="mm/dd/yyyy HH:mm:ss.ss" placeholder="mm/dd/yyyy HH:mm:ss.ss"
defaultValue="mm/dd/yyyy HH:mm:ss.ss" defaultValue="mm/dd/yyyy HH:mm:ss.ss"
// TODO: handle change onChange={this.handleTimeFormatChange}
// onChange={this.handleUpdatePrefix}
/> />
<div className="form-group col-xs-6"> <div className="form-group col-xs-6">
<label>Time Axis</label> <label>Time Axis</label>
@ -158,7 +167,7 @@ class TableOptions extends Component {
className={`${singleStatType === SINGLE_STAT_BG className={`${singleStatType === SINGLE_STAT_BG
? 'active' ? 'active'
: ''}`} : ''}`}
// onClick={this.handleToggleSingleStatType(SINGLE_STAT_BG)} onClick={this.handleToggleTimeAxis}
> >
Vertical Vertical
</li> </li>
@ -166,19 +175,31 @@ class TableOptions extends Component {
className={`${singleStatType === SINGLE_STAT_TEXT className={`${singleStatType === SINGLE_STAT_TEXT
? 'active' ? 'active'
: ''}`} : ''}`}
// onClick={this.handleToggleSingleStatType(SINGLE_STAT_TEXT)} onClick={this.handleToggleTimeAxis}
> >
Horizontal Horizontal
</li> </li>
</ul> </ul>
</div>
<div className="form-group col-xs-6">
<label>Sort By</label>
<Dropdown
items={sortByOptions}
selected="hey"
buttonColor="btn-primary"
buttonSize="btn-xs"
className="dropdown-stretch"
onChoose={this.handleChooseSortBy}
/>
</div>
<div className="single-stat-controls">
<label>Text Wrapping</label> <label>Text Wrapping</label>
<ul className="nav nav-tablist nav-tablist-sm"> <ul className="nav nav-tablist nav-tablist-sm">
<li <li
className={`${singleStatType === SINGLE_STAT_BG className={`${singleStatType === SINGLE_STAT_BG
? 'active' ? 'active'
: ''}`} : ''}`}
// onClick={this.handleToggleSingleStatType(SINGLE_STAT_BG)} onClick={this.handleToggleTextWrapping}
> >
Truncate Truncate
</li> </li>
@ -186,7 +207,7 @@ class TableOptions extends Component {
className={`${singleStatType === SINGLE_STAT_TEXT className={`${singleStatType === SINGLE_STAT_TEXT
? 'active' ? 'active'
: ''}`} : ''}`}
// onClick={this.handleToggleSingleStatType(SINGLE_STAT_TEXT)} onClick={this.handleToggleTextWrapping}
> >
Wrap Wrap
</li> </li>
@ -194,21 +215,13 @@ class TableOptions extends Component {
className={`${singleStatType === SINGLE_STAT_BG className={`${singleStatType === SINGLE_STAT_BG
? 'active' ? 'active'
: ''}`} : ''}`}
// onClick={this.handleToggleSingleStatType(SINGLE_STAT_BG)} onClick={this.handleToggleTextWrapping}
> >
Single Line Single Line
</li> </li>
</ul> </ul>
</div> </div>
<label>Sort By</label> <label>Customize Columns</label>
<Dropdown
items={['hey', 'yo', 'what']}
selected="hey"
buttonColor="btn-primary"
buttonSize="btn-xs"
className="dropdown-stretch"
/>
<label>Thresholds</label> <label>Thresholds</label>
<button <button
className="btn btn-sm btn-primary gauge-controls--add-threshold" className="btn btn-sm btn-primary gauge-controls--add-threshold"
@ -239,8 +252,7 @@ class TableOptions extends Component {
onDeleteThreshold={this.handleDeleteThreshold} onDeleteThreshold={this.handleDeleteThreshold}
/> />
)} )}
<div className="form-group col-xs">
<div className="form-group col-xs-6">
<label>Threshold Coloring</label> <label>Threshold Coloring</label>
<ul className="nav nav-tablist nav-tablist-sm"> <ul className="nav nav-tablist nav-tablist-sm">
<li <li