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

Make log time formats consistent (#4447) 

* Fix inconsistent log time formats
* Remove unused query results logic
pull/4454/head
Delmer 2018-09-13 18:28:29 -04:00 committed by GitHub
parent 01f480b730
commit 702400c995
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ui/src/logs/components/HistogramResults.tsx Normal file
View File

@ -0,0 +1,36 @@
import React, {PureComponent} from 'react'
import {SearchStatus} from 'src/types/logs'
interface Props {
count: number
queryCount: number
searchStatus: SearchStatus
}
class HistogramResults extends PureComponent<Props> {
public render() {
return (
<label className="logs-viewer--results-text">
{this.isPending ? this.pendingContents : this.completedContents}
</label>
)
}
private get isPending(): boolean {
return this.props.searchStatus !== SearchStatus.Loaded
}
private get pendingContents(): JSX.Element {
return <>Updating Histogram...</>
}
private get completedContents(): JSX.Element {
return (
<>
Displaying <strong> {this.props.count} Events</strong> in Histogram
</>
)
}
}
export default HistogramResults

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

@ -46,6 +46,7 @@ import {
RowHeightHandler,
SearchStatus,
Filter,
TimeFormatOption,
} from 'src/types/logs'
import {INITIAL_LIMIT} from 'src/logs/actions'
@ -541,6 +542,11 @@ class LogsTable extends Component<Props, State> {
const highlightRow = rowIndex === this.state.currentRow
if (column === 'timestamp') {
const formattedTime = moment(
formattedValue as string,
TimeFormatOption.SLASH_YMD_TIME
).format(TimeFormatOption.DEFAULT)
return (
<div
className={classnames('logs-viewer--cell', {
@ -555,12 +561,12 @@ class LogsTable extends Component<Props, State> {
<div
data-tag-key={column}
data-tag-value={value}
onClick={this.handleTimestampClick(`${formattedValue}`)}
onClick={this.handleTimestampClick(`${formattedTime}`)}
data-index={rowIndex}
onMouseOver={this.handleMouseOver}
className="logs-viewer--clickable"
>
{formattedValue}
{formattedTime}
</div>
</div>
)
@ -656,7 +662,7 @@ class LogsTable extends Component<Props, State> {
private handleTimestampClick = (time: string) => () => {
const {onChooseCustomTime} = this.props
const formattedTime = moment(time, 'YYYY/MM/DD HH:mm:ss').toISOString()
const formattedTime = moment(time, TimeFormatOption.DEFAULT).toISOString()
onChooseCustomTime(formattedTime)
}

99
ui/src/logs/components/QueryResults.tsx
View File

@ -1,99 +0,0 @@
import React, {PureComponent} from 'react'
import moment from 'moment'
import {SearchStatus} from 'src/types/logs'
const QUERY_RESULTS_TIME_FORMAT = 'MMM D, YYYY @HH:mm:ss'
interface Props {
count: number
queryCount: number
isInsideHistogram?: boolean
searchStatus: SearchStatus
upper?: number | undefined
lower?: number | undefined
}
class QueryResults extends PureComponent<Props> {
public static defaultProps: Partial<Props> = {
isInsideHistogram: false,
}
public render() {
return (
<label className="logs-viewer--results-text">
{this.isPending ? this.pendingContents : this.completedContents}
</label>
)
}
private get isPending(): boolean {
return this.props.searchStatus !== SearchStatus.Loaded
}
private get pendingContents(): JSX.Element {
if (this.props.isInsideHistogram) {
return <>Updating Histogram...</>
}
return (
<>
Querying back to
<br />
{this.formattedUpperTime}...
</>
)
}
private get completedContents(): JSX.Element {
if (this.props.isInsideHistogram) {
return (
<>
Displaying <strong> {this.props.count} Events</strong> in Histogram
</>
)
}
return (
<>
{this.eventContents}
{this.rangeContents}
</>
)
}
private get eventContents(): JSX.Element {
return (
<>
Query returned <strong>{this.props.count} Events</strong> <br />
</>
)
}
private get rangeContents(): JSX.Element {
if (this.props.upper === undefined || this.props.lower === undefined) {
return null
}
return (
<>
<span>
Newest: <strong>{this.formattedUpperTime}</strong>
</span>
<br />
<span>
Oldest: <strong>{this.formattedLowerTime}</strong>
</span>
</>
)
}
private get formattedLowerTime(): string {
return moment(this.props.lower).format(QUERY_RESULTS_TIME_FORMAT)
}
private get formattedUpperTime(): string {
return moment(this.props.upper).format(QUERY_RESULTS_TIME_FORMAT)
}
}
export default QueryResults

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

@ -11,7 +11,7 @@ import {fetchChunk} from 'src/logs/utils/fetchChunk'
import {notify as notifyAction} from 'src/shared/actions/notifications'
import {Greys} from 'src/reusable_ui/types'
import QueryResults from 'src/logs/components/QueryResults'
import HistogramResults from 'src/logs/components/HistogramResults'
import {
NOW,
@ -81,6 +81,7 @@ import {
TimeBounds,
SearchStatus,
FetchLoop,
TimeFormatOption,
} from 'src/types/logs'
import {
applyChangesToTableData,
@ -692,9 +693,7 @@ class LogsPage extends Component<Props, State> {
height={textSize}
fill={Greys.Sidewalk}
>
{moment(timeOption).format(
'YYYY-MM-DD | HH:mm:ss.SSS'
)}
{moment(timeOption).format(TimeFormatOption.DEFAULT)}
</text>
</svg>
</>
@ -751,10 +750,9 @@ class LogsPage extends Component<Props, State> {
return (
<div className="logs-viewer--graph-controls">
<QueryResults
<HistogramResults
count={this.histogramTotal}
queryCount={queryCount}
isInsideHistogram={true}
searchStatus={searchStatus}
/>
<TimeWindowDropdown

5
ui/src/types/logs.ts
View File

@ -10,6 +10,11 @@ import {FieldOption} from 'src/types/dashboards'
import {TimeSeriesValue} from 'src/types/series'
import {TimeRange} from 'src/types/logs'
export enum TimeFormatOption {
DEFAULT = 'YYYY-MM-DD HH:mm:ss',
SLASH_YMD_TIME = 'YYYY/MM/DD HH:mm:ss',
}
export enum SearchStatus {
None = 'None',
Loading = 'Loading',