diff --git a/ui/src/logs/actions/index.ts b/ui/src/logs/actions/index.ts index 22ec40b34e..c07c542a84 100644 --- a/ui/src/logs/actions/index.ts +++ b/ui/src/logs/actions/index.ts @@ -46,7 +46,7 @@ const defaultTableData: TableData = { 'timestamp', 'facility', 'procid', - 'application', + 'appname', 'host', 'message', ], @@ -412,17 +412,7 @@ export const executeTableBackwardQueryAsync = () => async ( try { dispatch(incrementQueryCount()) - const queryTimeRange = { - upper: timeRange.upper, - lower: timeRange.lower, - seconds: timeRange.seconds, - } - const query = buildLogQuery( - queryTimeRange, - queryConfig, - filters, - searchTerm - ) + const query = buildBackwardLogQuery(time, queryConfig, filters, searchTerm) const response = await executeQueryAsync( proxyLink, namespace, diff --git a/ui/src/logs/containers/LogsPage.tsx b/ui/src/logs/containers/LogsPage.tsx index 91b7282841..b32475b830 100644 --- a/ui/src/logs/containers/LogsPage.tsx +++ b/ui/src/logs/containers/LogsPage.tsx @@ -39,7 +39,7 @@ import OverlayTechnology from 'src/reusable_ui/components/overlays/OverlayTechno import {SeverityFormatOptions, SECONDS_TO_MS} from 'src/logs/constants' import {Source, Namespace} from 'src/types' -import {HistogramData, HistogramColor} from 'src/types/histogram' +import {HistogramData, HistogramColor, BarGroup} from 'src/types/histogram' import { Filter, SeverityLevelColor, @@ -326,6 +326,7 @@ class LogsPage extends Component { height={height} colorScale={colorForSeverity} colors={histogramColors} + onBarClick={this.handleBarClick} /> )} @@ -396,6 +397,19 @@ class LogsPage extends Component { this.props.executeQueriesAsync() } + private handleBarClick = (group: BarGroup): void => { + const {data} = group + + if (!data.length) { + return + } + + const unixTimestamp = data[0].time + const timeOption = moment(unixTimestamp).toISOString() + + this.handleSetTimeMarker({timeOption}) + } + private handleSetTimeBounds = async () => { const {seconds, windowOption, timeOption} = this.props.timeRange let lower = `now() - ${windowOption}` diff --git a/ui/test/logs/reducers/logs.test.ts b/ui/test/logs/reducers/logs.test.ts index 9496613205..5c51b4f5f0 100644 --- a/ui/test/logs/reducers/logs.test.ts +++ b/ui/test/logs/reducers/logs.test.ts @@ -1,17 +1,57 @@ import reducer, {defaultState} from 'src/logs/reducers' -import {setTimeWindow} from 'src/logs/actions' +import {setTimeWindow, setTimeMarker, setTimeBounds} from 'src/logs/actions' describe('Logs.Reducers', () => { it('can set a time window', () => { - const expected = { - timeOption: 'now', - windowOption: '1h', - upper: null, - lower: 'now() - 1h', - seconds: 3600, + const actionPayload = { + windowOption: '10m', + seconds: 600, } - const actual = reducer(defaultState, setTimeWindow(expected)) - expect(actual.timeWindow).toBe(expected) + const expected = { + timeOption: 'now', + windowOption: '10m', + upper: null, + lower: 'now() - 1m', + seconds: 600, + } + + const actual = reducer(defaultState, setTimeWindow(actionPayload)) + expect(actual.timeRange).toEqual(expected) + }) + + it('can set a time marker', () => { + const actionPayload = { + timeOption: '2018-07-10T22:22:21.769Z', + } + + const expected = { + timeOption: '2018-07-10T22:22:21.769Z', + windowOption: '1m', + upper: null, + lower: 'now() - 1m', + seconds: 60, + } + + const actual = reducer(defaultState, setTimeMarker(actionPayload)) + expect(actual.timeRange).toEqual(expected) + }) + + it('can set the time bounds', () => { + const payload = { + upper: '2018-07-10T22:20:21.769Z', + lower: '2018-07-10T22:22:21.769Z', + } + + const expected = { + timeOption: 'now', + windowOption: '1m', + upper: '2018-07-10T22:20:21.769Z', + lower: '2018-07-10T22:22:21.769Z', + seconds: 60, + } + + const actual = reducer(defaultState, setTimeBounds(payload)) + expect(actual.timeRange).toEqual(expected) }) })