From 7f32e0a800a1bd5f68f3426fdf2a89bed2b61b65 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 19 Jun 2018 16:31:19 -0700 Subject: [PATCH] Introduce log viewer options overlay --- ui/src/logs/components/LogViewerHeader.tsx | 1 + ui/src/logs/components/OptionsOverlay.tsx | 38 ++++++++++++++++++++++ ui/src/logs/containers/LogsPage.tsx | 27 +++++++++++++++ 3 files changed, 66 insertions(+) create mode 100644 ui/src/logs/components/OptionsOverlay.tsx diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx index 2d8dff2f0..b22610f45 100644 --- a/ui/src/logs/components/LogViewerHeader.tsx +++ b/ui/src/logs/components/LogViewerHeader.tsx @@ -25,6 +25,7 @@ interface Props { onChooseNamespace: (namespace: Namespace) => void onChooseTimerange: (timeRange: TimeRange) => void onChangeLiveUpdatingStatus: () => void + onShowOptionsOverlay: () => void } class LogViewerHeader extends PureComponent { diff --git a/ui/src/logs/components/OptionsOverlay.tsx b/ui/src/logs/components/OptionsOverlay.tsx new file mode 100644 index 000000000..5ae112417 --- /dev/null +++ b/ui/src/logs/components/OptionsOverlay.tsx @@ -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 { + constructor(props: Props) { + super(props) + + this.state = { + isImportable: false, + } + } + + public render() { + const {onDismissOverlay} = this.props + + return ( + + + +

Swoggle

+ + + ) + } +} + +export default OptionsOverlay diff --git a/ui/src/logs/containers/LogsPage.tsx b/ui/src/logs/containers/LogsPage.tsx index c1b9570a9..cb046e9f1 100644 --- a/ui/src/logs/containers/LogsPage.tsx +++ b/ui/src/logs/containers/LogsPage.tsx @@ -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 { currentNamespaces={currentNamespaces} currentNamespace={currentNamespace} onChangeLiveUpdatingStatus={this.handleChangeLiveUpdatingStatus} + onShowOptionsOverlay={this.handleShowOptionsOverlay} /> ) } @@ -282,6 +291,23 @@ class LogsPage extends PureComponent { this.props.executeQueriesAsync() this.setState({liveUpdating: true}) } + + private handleShowOptionsOverlay = (): void => { + const {showOverlay} = this.props + const options = { + dismissOnClickOutside: false, + dismissOnEscape: false, + } + + showOverlay( + + {({onDismissOverlay}) => ( + + )} + , + options + ) + } } const mapStateToProps = ({ @@ -313,6 +339,7 @@ const mapStateToProps = ({ const mapDispatchToProps = { getSource: getSourceAndPopulateNamespacesAsync, getSources: getSourcesAsync, + showOverlay: showOverlayAction, setTimeRangeAsync, setNamespaceAsync, executeQueriesAsync,