Merge single-stat hotfix (#1866)
Tim Raymond
commit
899f8d3e1d
|
|
@ -1,9 +1,12 @@
|
|||
## v1.3.7.0 [unreleased]
|
||||
### Bug Fixes
|
||||
1. [#1845](https://github.com/influxdata/chronograf/pull/1845): Fix no-scroll bar appearing in the Data Explorer table
|
||||
1. [#1866](https://github.com/influxdata/chronograf/pull/1866): Fix missing cell type (and consequently single-stat)
|
||||
|
||||
### Features
|
||||
|
||||
### UI Improvements
|
||||
1. [#1846](https://github.com/influxdata/chronograf/pull/1846): Increase screen real estate of Query Maker in the Cell Editor Overlay
|
||||
|
||||
## v1.3.6.0 [2017-08-08]
|
||||
### Bug Fixes
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ We really like to receive feature requests, as it helps us prioritize our work.
|
|||
|
||||
Contributing to the source code
|
||||
-------------------------------
|
||||
Chronograf is built using Go for its API backend and serving the front-end assets. The front-end visualization is built with React and uses NPM for package management. The assumption is that all your Go development are done in `$GOPATH/src`. `GOPATH` can be any directory under which Chronograf and all its dependencies will be cloned. For full details on the project structure, follow along below.
|
||||
Chronograf is built using Go for its API backend and serving the front-end assets. The front-end visualization is built with React and uses Yarn for package management. The assumption is that all your Go development are done in `$GOPATH/src`. `GOPATH` can be any directory under which Chronograf and all its dependencies will be cloned. For full details on the project structure, follow along below.
|
||||
|
||||
Submitting a pull request
|
||||
-------------------------
|
||||
|
|
@ -43,9 +43,9 @@ Signing the CLA
|
|||
If you are going to be contributing back to Chronograf please take a second to sign our CLA, which can be found
|
||||
[on our website](https://influxdata.com/community/cla/).
|
||||
|
||||
Installing NPM
|
||||
Installing Yarn
|
||||
--------------
|
||||
You'll need to install NPM to manage the JavaScript modules that the front-end uses. This varies depending on what platform you're developing on, but you should be able to find an installer on [the NPM downloads page](https://nodejs.org/en/download/).
|
||||
You'll need to install Yarn to manage the JavaScript modules that the front-end uses. This varies depending on what platform you're developing on, but you should be able to find an installer on [the Yarn installation page](https://yarnpkg.com/en/docs/install).
|
||||
|
||||
Installing Go
|
||||
-------------
|
||||
|
|
@ -105,7 +105,7 @@ Retaining the directory structure `$GOPATH/src/github.com/influxdata` is necessa
|
|||
|
||||
Build and Test
|
||||
--------------
|
||||
Make sure you have `go` and `npm` installed and the project structure as shown above. We provide a `Makefile` to get up and running quickly, so all you'll need to do is run the following:
|
||||
Make sure you have `go` and `yarn` installed and the project structure as shown above. We provide a `Makefile` to get up and running quickly, so all you'll need to do is run the following:
|
||||
|
||||
```bash
|
||||
cd $GOPATH/src/github.com/influxdata/chronograf
|
||||
|
|
|
|||
8
Makefile
8
Makefile
|
|
@ -60,11 +60,11 @@ canned/bin_gen.go: canned/*.json
|
|||
go generate -x ./canned
|
||||
|
||||
.jssrc: $(UISOURCES)
|
||||
cd ui && npm run build
|
||||
cd ui && yarn run build
|
||||
@touch .jssrc
|
||||
|
||||
.dev-jssrc: $(UISOURCES)
|
||||
cd ui && npm run build:dev
|
||||
cd ui && yarn run build:dev
|
||||
@touch .dev-jssrc
|
||||
|
||||
dep: .jsdep .godep
|
||||
|
|
@ -98,7 +98,7 @@ gotestrace:
|
|||
go test -race `go list ./... | grep -v /vendor/`
|
||||
|
||||
jstest:
|
||||
cd ui && npm test
|
||||
cd ui && yarn test
|
||||
|
||||
run: ${BINARY}
|
||||
./chronograf
|
||||
|
|
@ -108,7 +108,7 @@ run-dev: chronogiraffe
|
|||
|
||||
clean:
|
||||
if [ -f ${BINARY} ] ; then rm ${BINARY} ; fi
|
||||
cd ui && npm run clean
|
||||
cd ui && yarn run clean
|
||||
cd ui && rm -rf node_modules
|
||||
rm -f dist/dist_gen.go canned/bin_gen.go server/swagger_gen.go
|
||||
@rm -f .godep .jsdep .jssrc .dev-jssrc .bindata
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ func newCellResponses(dID chronograf.DashboardID, dcells []chronograf.DashboardC
|
|||
newCell.H = cell.H
|
||||
newCell.Name = cell.Name
|
||||
newCell.ID = cell.ID
|
||||
newCell.Type = cell.Type
|
||||
|
||||
for _, lbl := range labels {
|
||||
if axis, found := cell.Axes[lbl]; !found {
|
||||
|
|
|
|||
|
|
@ -105,6 +105,7 @@ func Test_Service_DashboardCells(t *testing.T) {
|
|||
W: 4,
|
||||
H: 4,
|
||||
Name: "CPU",
|
||||
Type: "bar",
|
||||
Queries: []chronograf.DashboardQuery{},
|
||||
Axes: map[string]chronograf.Axis{},
|
||||
},
|
||||
|
|
@ -117,6 +118,7 @@ func Test_Service_DashboardCells(t *testing.T) {
|
|||
W: 4,
|
||||
H: 4,
|
||||
Name: "CPU",
|
||||
Type: "bar",
|
||||
Queries: []chronograf.DashboardQuery{},
|
||||
Axes: map[string]chronograf.Axis{
|
||||
"x": chronograf.Axis{
|
||||
|
|
|
|||
|
|
@ -33,4 +33,4 @@ yarn upgrade packageName
|
|||
```
|
||||
|
||||
## Testing
|
||||
Tests can be run via command line with `npm test`, from within the `/ui` directory. For more detailed reporting, use `npm test -- --reporters=verbose`.
|
||||
Tests can be run via command line with `yarn test`, from within the `/ui` directory. For more detailed reporting, use `yarn test -- --reporters=verbose`.
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ module.exports = function(config) {
|
|||
'spec/index.js': ['webpack', 'sourcemap'],
|
||||
},
|
||||
// For more detailed reporting on tests, you can add 'verbose' and/or 'progress'.
|
||||
// This can also be done via the command line with `npm test -- --reporters=verbose`.
|
||||
// This can also be done via the command line with `yarn test -- --reporters=verbose`.
|
||||
reporters: ['dots'],
|
||||
webpack: {
|
||||
devtool: 'inline-source-map',
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@
|
|||
"url": "github:influxdata/chronograf"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm run clean && env NODE_ENV=production node_modules/webpack/bin/webpack.js -p --config ./webpack/prodConfig.js",
|
||||
"build": "yarn run clean && env NODE_ENV=production node_modules/webpack/bin/webpack.js -p --config ./webpack/prodConfig.js",
|
||||
"build:dev": "node_modules/webpack/bin/webpack.js --config ./webpack/devConfig.js",
|
||||
"start": "node_modules/webpack/bin/webpack.js -w --config ./webpack/devConfig.js",
|
||||
"lint": "node_modules/eslint/bin/eslint.js src/",
|
||||
"test": "karma start",
|
||||
"test:lint": "npm run lint; npm run test",
|
||||
"test:dev": "nodemon --exec npm run test:lint",
|
||||
"test:lint": "yarn run lint; yarn run test",
|
||||
"test:dev": "nodemon --exec yarn run test:lint",
|
||||
"clean": "rm -rf build",
|
||||
"storybook": "node ./storybook",
|
||||
"prettier": "prettier --single-quote --trailing-comma es5 --bracket-spacing false --semi false --write \"{src,spec}/**/*.js\"; eslint src --fix"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import {Table, Column, Cell} from 'fixed-data-table'
|
|||
|
||||
const {arrayOf, bool, func, number, oneOfType, shape, string} = PropTypes
|
||||
|
||||
const defaultTableHeight = 1000
|
||||
const emptySeries = {columns: [], values: []}
|
||||
|
||||
const CustomCell = React.createClass({
|
||||
|
|
@ -64,7 +63,7 @@ const ChronoTable = React.createClass({
|
|||
|
||||
getDefaultProps() {
|
||||
return {
|
||||
height: defaultTableHeight,
|
||||
height: 500,
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -139,11 +138,11 @@ const ChronoTable = React.createClass({
|
|||
const maximumTabsCount = 11
|
||||
// adjust height to proper value by subtracting the heights of the UI around it
|
||||
// tab height, graph-container vertical padding, graph-heading height, multitable-header height
|
||||
const stylePixelOffset = 136
|
||||
const rowHeight = 34
|
||||
const defaultColumnWidth = 200
|
||||
const headerHeight = 30
|
||||
const minWidth = 70
|
||||
const rowHeight = 34
|
||||
const headerHeight = 30
|
||||
const stylePixelOffset = 125
|
||||
const defaultColumnWidth = 200
|
||||
const styleAdjustedHeight = height - stylePixelOffset
|
||||
const width =
|
||||
columns && columns.length > 1 ? defaultColumnWidth : containerWidth
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ const VisView = ({
|
|||
heightPixels,
|
||||
editQueryStatus,
|
||||
activeQueryIndex,
|
||||
resizerBottomHeight,
|
||||
}) => {
|
||||
const activeQuery = queries[activeQueryIndex]
|
||||
const defaultQuery = queries[0]
|
||||
|
|
@ -30,7 +31,7 @@ const VisView = ({
|
|||
return (
|
||||
<Table
|
||||
query={query}
|
||||
height={heightPixels}
|
||||
height={resizerBottomHeight}
|
||||
editQueryStatus={editQueryStatus}
|
||||
/>
|
||||
)
|
||||
|
|
@ -44,6 +45,7 @@ const VisView = ({
|
|||
templates={templates}
|
||||
cellHeight={heightPixels}
|
||||
autoRefresh={autoRefresh}
|
||||
editQueryStatus={editQueryStatus}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
@ -60,6 +62,7 @@ VisView.propTypes = {
|
|||
heightPixels: number,
|
||||
editQueryStatus: func.isRequired,
|
||||
activeQueryIndex: number,
|
||||
resizerBottomHeight: number,
|
||||
}
|
||||
|
||||
export default VisView
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ const Visualization = React.createClass({
|
|||
bounds: arrayOf(string),
|
||||
}),
|
||||
}),
|
||||
resizerBottomHeight: number,
|
||||
},
|
||||
|
||||
contextTypes: {
|
||||
|
|
@ -95,6 +96,7 @@ const Visualization = React.createClass({
|
|||
editQueryStatus,
|
||||
activeQueryIndex,
|
||||
isInDataExplorer,
|
||||
resizerBottomHeight,
|
||||
} = this.props
|
||||
const {source: {links: {proxy}}} = this.context
|
||||
const {view} = this.state
|
||||
|
|
@ -134,6 +136,7 @@ const Visualization = React.createClass({
|
|||
editQueryStatus={editQueryStatus}
|
||||
activeQueryIndex={activeQueryIndex}
|
||||
isInDataExplorer={isInDataExplorer}
|
||||
resizerBottomHeight={resizerBottomHeight}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,14 +8,15 @@ const RefreshingLineGraph = AutoRefresh(LineGraph)
|
|||
const RefreshingSingleStat = AutoRefresh(SingleStat)
|
||||
|
||||
const RefreshingGraph = ({
|
||||
timeRange,
|
||||
autoRefresh,
|
||||
templates,
|
||||
synchronizer,
|
||||
axes,
|
||||
type,
|
||||
queries,
|
||||
templates,
|
||||
timeRange,
|
||||
cellHeight,
|
||||
axes,
|
||||
autoRefresh,
|
||||
synchronizer,
|
||||
editQueryStatus,
|
||||
}) => {
|
||||
if (type === 'single-stat') {
|
||||
return (
|
||||
|
|
@ -43,6 +44,7 @@ const RefreshingGraph = ({
|
|||
isBarGraph={type === 'bar'}
|
||||
displayOptions={displayOptions}
|
||||
synchronizer={synchronizer}
|
||||
editQueryStatus={editQueryStatus}
|
||||
axes={axes}
|
||||
/>
|
||||
)
|
||||
|
|
@ -58,9 +60,10 @@ RefreshingGraph.propTypes = {
|
|||
templates: arrayOf(shape()),
|
||||
synchronizer: func,
|
||||
type: string.isRequired,
|
||||
queries: arrayOf(shape()).isRequired,
|
||||
cellHeight: number,
|
||||
axes: shape(),
|
||||
queries: arrayOf(shape()).isRequired,
|
||||
editQueryStatus: func,
|
||||
}
|
||||
|
||||
export default RefreshingGraph
|
||||
|
|
|
|||
|
|
@ -31,6 +31,12 @@ class ResizeContainer extends Component {
|
|||
initialBottomHeight: defaultInitialBottomHeight,
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({
|
||||
bottomHeightPixels: this.bottom.getBoundingClientRect().height,
|
||||
})
|
||||
}
|
||||
|
||||
handleStartDrag() {
|
||||
this.setState({isDragging: true})
|
||||
}
|
||||
|
|
@ -51,7 +57,7 @@ class ResizeContainer extends Component {
|
|||
const {minTopHeight, minBottomHeight} = this.props
|
||||
const oneHundred = 100
|
||||
const containerHeight = parseInt(
|
||||
getComputedStyle(this.refs.resizeContainer).height,
|
||||
getComputedStyle(this.resizeContainer).height,
|
||||
10
|
||||
)
|
||||
// verticalOffset moves the resize handle as many pixels as the page-heading is taking up.
|
||||
|
|
@ -85,11 +91,12 @@ class ResizeContainer extends Component {
|
|||
this.setState({
|
||||
topHeight: `${newTopPanelPercent}%`,
|
||||
bottomHeight: `${newBottomPanelPercent}%`,
|
||||
bottomHeightPixels,
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {topHeight, bottomHeight, isDragging} = this.state
|
||||
const {bottomHeightPixels, topHeight, bottomHeight, isDragging} = this.state
|
||||
const {containerClass, children} = this.props
|
||||
|
||||
if (React.Children.count(children) > maximumNumChildren) {
|
||||
|
|
@ -107,10 +114,12 @@ class ResizeContainer extends Component {
|
|||
onMouseLeave={this.handleMouseLeave}
|
||||
onMouseUp={this.handleStopDrag}
|
||||
onMouseMove={this.handleDrag}
|
||||
ref="resizeContainer"
|
||||
ref={r => (this.resizeContainer = r)}
|
||||
>
|
||||
<div className="resize--top" style={{height: topHeight}}>
|
||||
{React.cloneElement(children[0])}
|
||||
{React.cloneElement(children[0], {
|
||||
resizerBottomHeight: bottomHeightPixels,
|
||||
})}
|
||||
</div>
|
||||
<ResizeHandle
|
||||
isDragging={isDragging}
|
||||
|
|
@ -120,8 +129,11 @@ class ResizeContainer extends Component {
|
|||
<div
|
||||
className="resize--bottom"
|
||||
style={{height: bottomHeight, top: topHeight}}
|
||||
ref={r => (this.bottom = r)}
|
||||
>
|
||||
{React.cloneElement(children[1])}
|
||||
{React.cloneElement(children[1], {
|
||||
resizerBottomHeight: bottomHeightPixels,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -4,11 +4,9 @@
|
|||
*/
|
||||
.display-options {
|
||||
height: 100%;
|
||||
margin: 0 60px;
|
||||
display: flex;
|
||||
background-color: $g2-kevlar;
|
||||
padding: 0 8px 8px 8px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding: 0 18px 8px 18px;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
------------------------------------------------------
|
||||
*/
|
||||
|
||||
$overlay-controls-height: 50px;
|
||||
$overlay-controls-height: 60px;
|
||||
$overlay-controls-bg: $g2-kevlar;
|
||||
$overlay-z: 100;
|
||||
|
||||
|
|
@ -33,17 +33,16 @@ $overlay-z: 100;
|
|||
}
|
||||
|
||||
.overlay-controls {
|
||||
padding: 0 16px;
|
||||
padding: 0 18px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 0 0 $overlay-controls-height;
|
||||
width: calc(100% - #{($page-wrapper-padding * 2)});
|
||||
left: $page-wrapper-padding;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
border: 0;
|
||||
background-color: $g2-kevlar;
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
.overlay-controls--right {
|
||||
display: flex;
|
||||
|
|
@ -74,7 +73,9 @@ $overlay-z: 100;
|
|||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
padding: 16px 0;
|
||||
}
|
||||
.overlay-technology--editor .query-maker--empty {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.overlay-controls .confirm-buttons {
|
||||
margin-left: 32px;
|
||||
|
|
@ -86,8 +87,8 @@ $overlay-z: 100;
|
|||
}
|
||||
.overlay-technology .query-maker {
|
||||
flex: 1 0 0;
|
||||
padding: 0 8px;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
padding: 0 18px;
|
||||
margin: 0;
|
||||
background-color: $g2-kevlar;
|
||||
}
|
||||
.overlay-technology .query-maker--tabs {
|
||||
|
|
|
|||
Loading…
Reference in New Issue