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

Introduce log viewer options overlay

pull/3815/head
Alex P 2018-06-19 16:31:19 -07:00 committed by Iris Scholten
parent d8f707747c
commit 7f32e0a800
3 changed files with 66 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/src/logs/components/LogViewerHeader.tsx
View File

@ -25,6 +25,7 @@ interface Props {
onChooseNamespace: (namespace: Namespace) => void
onChooseTimerange: (timeRange: TimeRange) => void
onChangeLiveUpdatingStatus: () => void
onShowOptionsOverlay: () => void
}
class LogViewerHeader extends PureComponent<Props> {

38
ui/src/logs/components/OptionsOverlay.tsx Normal file
View File

@ -0,0 +1,38 @@
import React, {Component} from 'react'
import Container from 'src/shared/components/overlay/OverlayContainer'
import Heading from 'src/shared/components/overlay/OverlayHeading'
import Body from 'src/shared/components/overlay/OverlayBody'
interface Props {
onDismissOverlay: () => void
}
interface State {
isImportable: boolean
}
class OptionsOverlay extends Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = {
isImportable: false,
}
}
public render() {
const {onDismissOverlay} = this.props
return (
<Container maxWidth={600}>
<Heading title="Configure Log Viewer" onDismiss={onDismissOverlay} />
<Body>
<p>Swoggle</p>
</Body>
</Container>
)
}
}
export default OptionsOverlay

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

@ -16,15 +16,22 @@ import {
changeFilter,
fetchMoreAsync,
} from 'src/logs/actions'
import {
showOverlay as showOverlayAction,
ShowOverlay,
} from 'src/shared/actions/overlayTechnology'
import {getSourcesAsync} from 'src/shared/actions/sources'
import LogViewerHeader from 'src/logs/components/LogViewerHeader'
import HistogramChart from 'src/shared/components/HistogramChart'
import LogsGraphContainer from 'src/logs/components/LogsGraphContainer'
import OptionsOverlay from 'src/logs/components/OptionsOverlay'
import Graph from 'src/logs/components/LogsGraph'
import SearchBar from 'src/logs/components/LogsSearchBar'
import FilterBar from 'src/logs/components/LogsFilterBar'
import LogsTable from 'src/logs/components/LogsTable'
import {getDeep} from 'src/utils/wrappers'
import {colorForSeverity} from 'src/logs/utils/colors'
import {OverlayContext} from 'src/shared/components/OverlayTechnology'
import {Source, Namespace, TimeRange} from 'src/types'
import {Filter} from 'src/types/logs'
@ -55,6 +62,7 @@ interface Props {
searchTerm: string
filters: Filter[]
queryCount: number
showOverlay: ShowOverlay
}
interface State {
@ -219,6 +227,7 @@ class LogsPage extends PureComponent<Props, State> {
currentNamespaces={currentNamespaces}
currentNamespace={currentNamespace}
onChangeLiveUpdatingStatus={this.handleChangeLiveUpdatingStatus}
onShowOptionsOverlay={this.handleShowOptionsOverlay}
/>
)
}
@ -282,6 +291,23 @@ class LogsPage extends PureComponent<Props, State> {
this.props.executeQueriesAsync()
this.setState({liveUpdating: true})
}
private handleShowOptionsOverlay = (): void => {
const {showOverlay} = this.props
const options = {
dismissOnClickOutside: false,
dismissOnEscape: false,
}
showOverlay(
<OverlayContext.Consumer>
{({onDismissOverlay}) => (
<OptionsOverlay onDismissOverlay={onDismissOverlay} />
)}
</OverlayContext.Consumer>,
options
)
}
}
const mapStateToProps = ({
@ -313,6 +339,7 @@ const mapStateToProps = ({
const mapDispatchToProps = {
getSource: getSourceAndPopulateNamespacesAsync,
getSources: getSourcesAsync,
showOverlay: showOverlayAction,
setTimeRangeAsync,
setNamespaceAsync,
executeQueriesAsync,