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

Merge branch 'master' into condense-logs-further

pull/3920/head
Alex Paxton 2018-07-13 16:28:30 -07:00 committed by GitHub
parent 17e1f322c2 48b5b30bef
commit a2ce708c26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 329 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/logs/actions/index.ts
View File

@ -39,11 +39,11 @@ const defaultTableData: TableData = {
'time',
'severity',
'timestamp',
'message',
'facility',
'procid',
'appname',
'host',
'message',
],
values: [],
}

35
ui/src/logs/components/LogsTable.tsx
View File

@ -74,13 +74,7 @@ interface State {
}
const calculateScrollTop = scrollToRow => {
return _.reduce(
_.range(0, scrollToRow),
acc => {
return acc + ROW_HEIGHT
},
0
)
return scrollToRow * ROW_HEIGHT
}
class LogsTable extends Component<Props, State> {
@ -107,7 +101,7 @@ class LogsTable extends Component<Props, State> {
scrollTop = 0
}
if (scrollToRow) {
if (_.isNumber(scrollToRow)) {
scrollTop = calculateScrollTop(scrollToRow)
}
@ -164,7 +158,7 @@ class LogsTable extends Component<Props, State> {
visibleColumnsCount,
}
this.loadMoreAboveRows = _.throttle(this.loadMoreAboveRows, 5000)
this.loadMoreAboveRows = _.throttle(this.loadMoreAboveRows, 50)
}
public componentDidUpdate() {
@ -291,7 +285,7 @@ class LogsTable extends Component<Props, State> {
},
}
if (scrollToRow) {
if (_.isNumber(scrollToRow)) {
result.scrollToRow = scrollToRow
}
@ -352,7 +346,15 @@ class LogsTable extends Component<Props, State> {
}
const data = getValuesFromData(this.props.tableInfiniteData.forward)
const firstTime = getDeep(data, '0.0', new Date().getTime() / 1000)
const backwardData = getValuesFromData(
this.props.tableInfiniteData.backward
)
const firstTime = getDeep(
data,
'0.0',
getDeep(backwardData, '0.0', new Date().getTime())
)
const {firstQueryTime} = this.state
if (firstQueryTime && firstQueryTime > firstTime) {
return
@ -370,11 +372,12 @@ class LogsTable extends Component<Props, State> {
}
const data = getValuesFromData(this.props.tableInfiniteData.backward)
const forwardData = getValuesFromData(this.props.tableInfiniteData.forward)
const lastTime = getDeep(
data,
`${data.length - 1}.0`,
new Date().getTime() / 1000
getDeep(forwardData, `${forwardData.length - 1}.0`, new Date().getTime())
)
// Guard against fetching on scrolling back up then down
@ -445,13 +448,7 @@ class LogsTable extends Component<Props, State> {
private calculateTotalHeight = (): number => {
const data = getValuesFromData(this.props.data)
return _.reduce(
data,
(acc, __) => {
return acc + ROW_HEIGHT
},
0
)
return data.length * ROW_HEIGHT
}
private headerRenderer = ({key, style, columnIndex}) => {

2
ui/src/logs/components/expandable_message/ExpandableMessage.scss
View File

@ -44,4 +44,4 @@
color: $g19-ghost;
border-radius: $radius;
cursor: text;
}
}

16
ui/src/logs/components/expandable_message/ExpandableMessage.tsx
View File

@ -24,13 +24,11 @@ export class ExpandableMessage extends Component<Props, State> {
const trimmedValue = formattedValue.trimLeft()
return (
<ClickOutside onClickOutside={this.collapse}>
<>
<div onClick={this.expand} className="expandable--message">
<div className="expandable--text">{trimmedValue}</div>
<div className={this.isExpanded}>{trimmedValue}</div>
</div>
</>
<ClickOutside onClickOutside={this.handleClickOutside}>
<div onClick={this.handleClick} className="expandable--message">
<div className="expandable--text">{trimmedValue}</div>
<div className={this.isExpanded}>{trimmedValue}</div>
</div>
</ClickOutside>
)
}
@ -44,13 +42,13 @@ export class ExpandableMessage extends Component<Props, State> {
}
}
private expand = () => {
private handleClick = () => {
this.setState({
expanded: true,
})
}
private collapse = () => {
private handleClickOutside = () => {
this.setState({
expanded: false,
})

6
ui/src/logs/containers/LogsPage.tsx
View File

@ -214,6 +214,10 @@ class LogsPage extends Component<Props, State> {
}
private get tableScrollToRow() {
if (this.liveUpdatingStatus === LiveUpdating.Play) {
return 0
}
if (this.loadingNewer && this.props.newRowsAdded) {
this.loadingNewer = false
return this.props.newRowsAdded || 0
@ -285,7 +289,7 @@ class LogsPage extends Component<Props, State> {
}
private get isSpecificTimeRange(): boolean {
return !!getDeep(this.props, 'timeRange.upper', false)
return !!getDeep(this.props, 'tableTime.custom', false)
}
private startUpdating = () => {

2
ui/src/logs/reducers/index.ts
View File

@ -21,11 +21,11 @@ const defaultTableData: TableData = {
'time',
'severity',
'timestamp',
'message',
'facility',
'procid',
'appname',
'host',
'message',
],
values: [],
}

39
ui/src/shared/components/HistogramChart.tsx
View File

@ -26,6 +26,14 @@ const PADDING_TOP = 0.2
const DIGIT_WIDTH = 7
const PERIOD_DIGIT_WIDTH = 4
interface RenderPropArgs {
xScale: ScaleTime<number, number>
yScale: ScaleLinear<number, number>
adjustedWidth: number
adjustedHeight: number
margins: Margins
}
interface Props {
data: HistogramData
width: number
@ -34,6 +42,7 @@ interface Props {
colorScale: ColorScale
onBarClick?: (time: string) => void
sortBarGroups: SortFn
children?: (args: RenderPropArgs) => JSX.Element
}
interface State {
@ -56,6 +65,7 @@ class HistogramChart extends PureComponent<Props, State> {
colors,
onBarClick,
sortBarGroups,
children,
} = this.props
const {margins} = this
@ -76,8 +86,16 @@ class HistogramChart extends PureComponent<Props, State> {
const {hoverData} = this.state
const {xScale, yScale, adjustedWidth, adjustedHeight, bodyTransform} = this
const renderPropArgs = {
xScale,
yScale,
adjustedWidth,
adjustedHeight,
margins,
}
return (
<>
<div className="histogram-chart">
<svg width={width} height={height} className="histogram-chart">
<defs>
<clipPath id="histogram-chart--bars-clip">
@ -113,14 +131,17 @@ class HistogramChart extends PureComponent<Props, State> {
/>
</g>
</svg>
{hoverData && (
<HistogramChartTooltip
data={hoverData}
colorScale={colorScale}
colors={colors}
/>
)}
</>
<div className="histogram-chart--overlays">
{!!children && children(renderPropArgs)}
{hoverData && (
<HistogramChartTooltip
data={hoverData}
colorScale={colorScale}
colors={colors}
/>
)}
</div>
</div>
)
}

7
ui/src/style/components/histogram-chart.scss
View File

@ -1,5 +1,6 @@
.histogram-chart {
user-select: none;
position: relative;
}
.histogram-chart-bars--bar {
@ -64,3 +65,9 @@
.histogram-chart-tooltip--column:first-child {
margin-right: 12px;
}
.histogram-chart--overlays {
position: absolute;
top: 0;
left: 0;
}

10
ui/src/tempVars/components/KeysTemplateBuilder.tsx
View File

@ -196,7 +196,15 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
nextValues[0].selected = true
}
onUpdateTemplate({...template, values: nextValues})
onUpdateTemplate({
...template,
query: {
...template.query,
db: selectedDatabase,
measurement: selectedMeasurement,
},
values: nextValues,
})
} catch (error) {
this.setState({keysStatus: RemoteDataState.Error})
console.error(error)

11
ui/src/tempVars/components/TagValuesTemplateBuilder.tsx
View File

@ -236,7 +236,16 @@ class KeysTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
nextValues[0].selected = true
}
onUpdateTemplate({...template, values: nextValues})
onUpdateTemplate({
...template,
values: nextValues,
query: {
...template.query,
db: selectedDatabase,
measurement: selectedMeasurement,
tagKey: selectedTagKey,
},
})
} catch (error) {
this.setState({tagValuesStatus: RemoteDataState.Error})
console.error(error)

477
ui/test/shared/components/__snapshots__/HistogramChart.test.tsx.snap
View File

@ -177,247 +177,254 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is
sortBarGroups={[Function]}
width={600}
>
<svg
<div
className="histogram-chart"
height={400}
width={600}
>
<defs>
<clipPath
id="histogram-chart--bars-clip"
>
<rect
height={375}
width={575}
x="0"
y="0"
/>
</clipPath>
</defs>
<g
className="histogram-chart--axes"
<svg
className="histogram-chart"
height={400}
width={600}
>
<HistogramChartAxes
height={400}
margins={
Object {
"bottom": 20,
"left": 25,
"right": 0,
"top": 5,
<defs>
<clipPath
id="histogram-chart--bars-clip"
>
<rect
height={375}
width={575}
x="0"
y="0"
/>
</clipPath>
</defs>
<g
className="histogram-chart--axes"
>
<HistogramChartAxes
height={400}
margins={
Object {
"bottom": 20,
"left": 25,
"right": 0,
"top": 5,
}
}
}
width={600}
xScale={[Function]}
yScale={[Function]}
>
<line
className="y-tick"
key="0-25-625-380"
x1={25}
x2={625}
y1={380}
y2={380}
/>
<line
className="y-tick"
key="0.5-25-625-301.875"
x1={25}
x2={625}
y1={301.875}
y2={301.875}
/>
<line
className="y-tick"
key="1-25-625-223.75"
x1={25}
x2={625}
y1={223.75}
y2={223.75}
/>
<line
className="y-tick"
key="1.5-25-625-145.625"
x1={25}
x2={625}
y1={145.625}
y2={145.625}
/>
<line
className="y-tick"
key="2-25-625-67.5"
x1={25}
x2={625}
y1={67.5}
y2={67.5}
/>
<text
className="y-label"
key="0-25-625-380"
x={18}
y={380}
width={600}
xScale={[Function]}
yScale={[Function]}
>
0
</text>
<text
className="y-label"
key="0.5-25-625-301.875"
x={18}
y={301.875}
>
0.5
</text>
<text
className="y-label"
key="1-25-625-223.75"
x={18}
y={223.75}
>
1
</text>
<text
className="y-label"
key="1.5-25-625-145.625"
x={18}
y={145.625}
>
1.5
</text>
<text
className="y-label"
key="2-25-625-67.5"
x={18}
y={67.5}
>
2
</text>
<text
className="x-label"
key=".001-287.5-388"
x={287.5}
y={388}
>
.001
</text>
<text
className="x-label"
key=".002-575-388"
x={575}
y={388}
>
.002
</text>
</HistogramChartAxes>
</g>
<g
className="histogram-chart--bars"
clipPath="url(#histogram-chart--bars-clip)"
transform="translate(25, 5)"
>
<HistogramChartBars
colorScale={[Function]}
colors={Array []}
data={
Array [
Object {
"group": "a",
"key": "0",
"time": 0,
"value": 0,
},
Object {
"group": "a",
"key": "1",
"time": 1,
"value": 1,
},
Object {
"group": "b",
"key": "2",
"time": 2,
"value": 2,
},
]
}
height={375}
onHover={[Function]}
sortBarGroups={[Function]}
width={575}
xScale={[Function]}
yScale={[Function]}
>
<g
className="histogram-chart-bars--bars"
data-key="1-1-193.5"
key="1-1-193.5"
onClick={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<defs>
<clipPath
id="histogram-chart-bars--clip-1-1-193.5"
>
<rect
height={159.25}
rx={3}
ry={3}
width={188}
x={193.5}
y={218.75}
/>
</clipPath>
</defs>
<rect
className="histogram-chart-bars--bar"
clipPath="url(#histogram-chart-bars--clip-1-1-193.5)"
data-group="a"
data-key="1"
fill="#0000ff"
height={156.25}
key="1"
width={188}
x={193.5}
y={218.75}
<line
className="y-tick"
key="0-25-625-380"
x1={25}
x2={625}
y1={380}
y2={380}
/>
</g>
<g
className="histogram-chart-bars--bars"
data-key="2-2-481"
key="2-2-481"
onClick={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<defs>
<clipPath
id="histogram-chart-bars--clip-2-2-481"
>
<rect
height={315.5}
rx={3}
ry={3}
width={188}
x={481}
y={62.5}
/>
</clipPath>
</defs>
<rect
className="histogram-chart-bars--bar"
clipPath="url(#histogram-chart-bars--clip-2-2-481)"
data-group="b"
data-key="2"
fill="#0000ff"
height={312.5}
key="2"
width={188}
x={481}
y={62.5}
<line
className="y-tick"
key="0.5-25-625-301.875"
x1={25}
x2={625}
y1={301.875}
y2={301.875}
/>
</g>
</HistogramChartBars>
</g>
</svg>
<line
className="y-tick"
key="1-25-625-223.75"
x1={25}
x2={625}
y1={223.75}
y2={223.75}
/>
<line
className="y-tick"
key="1.5-25-625-145.625"
x1={25}
x2={625}
y1={145.625}
y2={145.625}
/>
<line
className="y-tick"
key="2-25-625-67.5"
x1={25}
x2={625}
y1={67.5}
y2={67.5}
/>
<text
className="y-label"
key="0-25-625-380"
x={18}
y={380}
>
0
</text>
<text
className="y-label"
key="0.5-25-625-301.875"
x={18}
y={301.875}
>
0.5
</text>
<text
className="y-label"
key="1-25-625-223.75"
x={18}
y={223.75}
>
1
</text>
<text
className="y-label"
key="1.5-25-625-145.625"
x={18}
y={145.625}
>
1.5
</text>
<text
className="y-label"
key="2-25-625-67.5"
x={18}
y={67.5}
>
2
</text>
<text
className="x-label"
key=".001-287.5-388"
x={287.5}
y={388}
>
.001
</text>
<text
className="x-label"
key=".002-575-388"
x={575}
y={388}
>
.002
</text>
</HistogramChartAxes>
</g>
<g
className="histogram-chart--bars"
clipPath="url(#histogram-chart--bars-clip)"
transform="translate(25, 5)"
>
<HistogramChartBars
colorScale={[Function]}
colors={Array []}
data={
Array [
Object {
"group": "a",
"key": "0",
"time": 0,
"value": 0,
},
Object {
"group": "a",
"key": "1",
"time": 1,
"value": 1,
},
Object {
"group": "b",
"key": "2",
"time": 2,
"value": 2,
},
]
}
height={375}
onHover={[Function]}
sortBarGroups={[Function]}
width={575}
xScale={[Function]}
yScale={[Function]}
>
<g
className="histogram-chart-bars--bars"
data-key="1-1-193.5"
key="1-1-193.5"
onClick={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<defs>
<clipPath
id="histogram-chart-bars--clip-1-1-193.5"
>
<rect
height={159.25}
rx={3}
ry={3}
width={188}
x={193.5}
y={218.75}
/>
</clipPath>
</defs>
<rect
className="histogram-chart-bars--bar"
clipPath="url(#histogram-chart-bars--clip-1-1-193.5)"
data-group="a"
data-key="1"
fill="#0000ff"
height={156.25}
key="1"
width={188}
x={193.5}
y={218.75}
/>
</g>
<g
className="histogram-chart-bars--bars"
data-key="2-2-481"
key="2-2-481"
onClick={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<defs>
<clipPath
id="histogram-chart-bars--clip-2-2-481"
>
<rect
height={315.5}
rx={3}
ry={3}
width={188}
x={481}
y={62.5}
/>
</clipPath>
</defs>
<rect
className="histogram-chart-bars--bar"
clipPath="url(#histogram-chart-bars--clip-2-2-481)"
data-group="b"
data-key="2"
fill="#0000ff"
height={312.5}
key="2"
width={188}
x={481}
y={62.5}
/>
</g>
</HistogramChartBars>
</g>
</svg>
<div
className="histogram-chart--overlays"
/>
</div>
</HistogramChart>
`;