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

Merge branch 'master' into bugfix/delete-chrono-user

pull/3073/head
Alex Paxton 2018-03-28 10:09:06 -07:00 committed by GitHub
parent 4eec3485ce 24031e45dd
commit 04fcb72643
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 166 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -20,6 +20,7 @@
1. [#3006](https://github.com/influxdata/chronograf/pull/3006): Fix Kapacitor Rules task enabled checkboxes to only toggle exactly as clicked
1. [#3048](https://github.com/influxdata/chronograf/pull/3048): Prevent Multi-Select Dropdown in InfluxDB Admin Users and Roles tabs from losing selection state
1. [#3073](https://github.com/influxdata/chronograf/pull/3073): Fix Delete button in All Users admin page
1. [#3068](https://github.com/influxdata/chronograf/pull/3068): Fix intermittent missing fill from graphs
## v1.4.2.3 [2018-03-08]

63
server/swagger.json
View File

@ -3988,6 +3988,48 @@
}
}
},
"tableOptions": {
"description":
"visualization options for a cell with table type",
"type": "object",
"properties": {
"timeFormat": {
"description":
"timeFormat describes the display format for time values according to moment.js date formatting",
"type": "string"
},
"verticalTimeAxis": {
"description":
"verticalTimeAxis describes the orientation of the table by indicating whether the time axis will be displayed vertically",
"type": "boolean"
},
"sortBy": {
"description":
"sortBy contains the name of the series that is used for sorting the table",
"type": "object",
"$ref": "#/definitions/RenamableField"
},
"wrapping": {
"description":
"wrapping describes the text wrapping style to be used in table cells",
"type": "string",
"enum": ["truncate", "wrap", "single-line"]
},
"fieldNames": {
"description":
"fieldNames represent the fields retrieved by the query with customization options",
"type": "array",
"items": {
"$ref": "#/definitions/RenamableField"
}
},
"fixFirstColumn": {
"description":
"fixFirstColumn indicates whether this field should be visible on the table",
"type": "boolean"
}
}
},
"links": {
"type": "object",
"properties": {
@ -4129,6 +4171,27 @@
}
}
},
"RenamableField": {
"description":
"renamableField describes a field that can be renamed and made visible or invisible",
"type": "object",
"properties": {
"internalName": {
"description": "internalName is the calculated name of a field",
"type": "string"
},
"displayName": {
"description":
"displayName is the name that a field is renamed to by the user",
"type": "string"
},
"visible": {
"description":
"visible indicates whether this field should be visible on the table",
"type": "boolean"
}
}
},
"Routes": {
"type": "object",
"properties": {

15
ui/src/shared/components/FeatureFlag.tsx Normal file
View File

@ -0,0 +1,15 @@
import {SFC} from 'react'
interface Props {
children?: any
}
const FeatureFlag: SFC<Props> = props => {
if (process.env.NODE_ENV === 'development') {
return props.children
}
return null
}
export default FeatureFlag

1
ui/src/shared/components/LineGraph.js
View File

@ -76,6 +76,7 @@ class LineGraph extends Component {
rightGap: 0,
yRangePad: 10,
labelsKMB: true,
fillGraph: true,
underlayCallback,
axisLabelWidth: 60,
drawAxesAtZero: true,

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

@ -17,6 +17,7 @@ import {
FIX_FIRST_COLUMN_DEFAULT,
VERTICAL_TIME_AXIS_DEFAULT,
calculateTimeColumnWidth,
calculateLabelsColumnWidth,
} from 'src/shared/constants/tableGraph'
const DEFAULT_SORT = ASCENDING
@ -64,6 +65,7 @@ class TableGraph extends Component {
sortedTimeVals: [],
labels: [],
timeColumnWidth: calculateTimeColumnWidth(props.tableOptions.timeFormat),
labelsColumnWidth: calculateLabelsColumnWidth(props.data.labels),
hoveredColumnIndex: NULL_ARRAY_INDEX,
hoveredRowIndex: NULL_ARRAY_INDEX,
sortField: 'time',
@ -92,6 +94,7 @@ class TableGraph extends Component {
this.setState({
timeColumnWidth: calculateTimeColumnWidth(timeFormat),
})
this.multiGridRef.forceUpdateGrids()
}
if (setDataLabels) {
@ -119,6 +122,10 @@ class TableGraph extends Component {
fieldNames
)
const processedLabels = verticalTimeAxis
? processedData[0]
: processedData.map(row => row[0])
this.setState({
data,
labels,
@ -126,6 +133,10 @@ class TableGraph extends Component {
sortedTimeVals,
sortField: sortFieldName,
sortDirection: direction,
labelsColumnWidth: calculateLabelsColumnWidth(
processedLabels,
fieldNames
),
})
}
@ -216,15 +227,28 @@ class TableGraph extends Component {
calculateColumnWidth = columnSizerWidth => column => {
const {index} = column
const {tableOptions: {verticalTimeAxis}} = this.props
const {timeColumnWidth, labels} = this.state
const {timeColumnWidth, labelsColumnWidth, processedData} = this.state
const columnCount = _.get(processedData, ['0', 'length'], 0)
const processedLabels = verticalTimeAxis
? processedData[0]
: processedData.map(row => row[0])
if (labels.length > 0) {
return verticalTimeAxis && labels[index] === 'time'
? timeColumnWidth
: columnSizerWidth
const specialColumnWidth = verticalTimeAxis
? timeColumnWidth
: labelsColumnWidth
let adjustedColumnSizerWidth = columnSizerWidth
if (columnSizerWidth !== specialColumnWidth) {
const difference = columnSizerWidth - specialColumnWidth
const increment = difference / (columnCount - 1)
adjustedColumnSizerWidth = columnSizerWidth + increment
}
return columnSizerWidth
return processedLabels[index] === 'time'
? specialColumnWidth
: adjustedColumnSizerWidth
}
cellRenderer = ({columnIndex, rowIndex, key, parent, style}) => {
@ -319,20 +343,34 @@ class TableGraph extends Component {
)
}
getMultiGridRef = (r, registerChild) => {
this.multiGridRef = r
return registerChild(r)
}
render() {
const {
hoveredColumnIndex,
hoveredRowIndex,
timeColumnWidth,
labelsColumnWidth,
sortField,
sortDirection,
processedData,
} = this.state
const {hoverTime, tableOptions, colors} = this.props
const {
hoverTime,
tableOptions,
tableOptions: {verticalTimeAxis},
colors,
} = this.props
const {fixFirstColumn = FIX_FIRST_COLUMN_DEFAULT} = tableOptions
const columnCount = _.get(processedData, ['0', 'length'], 0)
const rowCount = columnCount === 0 ? 0 : processedData.length
const COLUMN_MIN_WIDTH = 98
const COLUMN_MIN_WIDTH = verticalTimeAxis
? labelsColumnWidth
: timeColumnWidth
const COLUMN_MAX_WIDTH = 1000
const ROW_HEIGHT = 30
@ -353,12 +391,13 @@ class TableGraph extends Component {
columnMaxWidth={COLUMN_MAX_WIDTH}
columnMinWidth={COLUMN_MIN_WIDTH}
width={tableWidth}
timeColumnWidth={timeColumnWidth}
>
{({getColumnWidth, registerChild}) => (
{({columnWidth, registerChild}) => (
<MultiGrid
ref={registerChild}
ref={r => this.getMultiGridRef(r, registerChild)}
columnCount={columnCount}
columnWidth={this.calculateColumnWidth(getColumnWidth())}
columnWidth={this.calculateColumnWidth(columnWidth)}
rowCount={rowCount}
rowHeight={ROW_HEIGHT}
height={tableHeight}
@ -377,6 +416,7 @@ class TableGraph extends Component {
hoverTime={hoverTime}
colors={colors}
tableOptions={tableOptions}
timeColumnWidth={timeColumnWidth}
classNameBottomRightGrid="table-graph--scroll-window"
/>
)}

32
ui/src/shared/constants/tableGraph.js
View File

@ -57,3 +57,35 @@ export const calculateTimeColumnWidth = timeFormat => {
return width + CELL_HORIZONTAL_PADDING
}
export const calculateLabelsColumnWidth = (labels, fieldNames) => {
if (!labels) {
return
}
if (fieldNames.length === 1) {
const longestLabel = labels.reduce((a, b) => (a.length > b.length ? a : b))
const {width} = calculateSize(longestLabel, {
font: '"RobotoMono", monospace',
fontSize: '13px',
fontWeight: 'bold',
})
return width + CELL_HORIZONTAL_PADDING
}
const longestFieldName = fieldNames
.map(fieldName => {
return fieldName.displayName
? fieldName.displayName
: fieldName.internalName
})
.reduce((a, b) => (a.length > b.length ? a : b))
const {width} = calculateSize(longestFieldName, {
font: '"RobotoMono", monospace',
fontSize: '13px',
fontWeight: 'bold',
})
return width + CELL_HORIZONTAL_PADDING
}

3
ui/webpack/dev.config.js
View File

@ -145,6 +145,9 @@ module.exports = {
],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
}),
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require('../build/vendor.dll.json'),