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

WIP implement new overlay pattern 

WIP because I need to test this, and there is probably a better way to
handle state
pull/10616/head
Alex P 2018-06-25 19:27:16 -07:00
parent 874e0a2e10
commit 4d83374806
1 changed files with 10 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
ui/src/flux/containers/CheckServices.tsx
View File

@ -4,7 +4,7 @@ import {WithRouterProps} from 'react-router'
import {FluxPage} from 'src/flux' import {FluxPage} from 'src/flux'
import FluxOverlay from 'src/flux/components/FluxOverlay' import FluxOverlay from 'src/flux/components/FluxOverlay'
import {OverlayContext} from 'src/shared/components/OverlayTechnology' import OverlayTechnology from 'src/shared/components/OverlayTechnology'
import {Source, Service, Notification} from 'src/types' import {Source, Service, Notification} from 'src/types'
import {Links} from 'src/types/flux' import {Links} from 'src/types/flux'
import {notify as notifyAction} from 'src/shared/actions/notifications' import {notify as notifyAction} from 'src/shared/actions/notifications'
@ -12,19 +12,15 @@ import {
updateScript as updateScriptAction, updateScript as updateScriptAction,
UpdateScript, UpdateScript,
} from 'src/flux/actions' } from 'src/flux/actions'
import * as a from 'src/shared/actions/overlayTechnology' import * as actions from 'src/shared/actions/services'
import * as b from 'src/shared/actions/services'
export const NotificationContext = React.createContext() export const NotificationContext = React.createContext()
const actions = {...a, ...b}
interface Props { interface Props {
sources: Source[] sources: Source[]
services: Service[] services: Service[]
children: ReactChildren children: ReactChildren
showOverlay: a.ShowOverlayActionCreator fetchServicesAsync: actions.FetchServicesAsync
fetchServicesAsync: b.FetchServicesAsync
notify: (message: Notification) => void notify: (message: Notification) => void
updateScript: UpdateScript updateScript: UpdateScript
script: string script: string
@ -42,10 +38,6 @@ export class CheckServices extends PureComponent<Props & WithRouterProps> {
} }
await this.props.fetchServicesAsync(source) await this.props.fetchServicesAsync(source)
if (!this.props.services.length) {
this.overlay()
}
} }
public render() { public render() {
@ -65,6 +57,7 @@ export class CheckServices extends PureComponent<Props & WithRouterProps> {
notify={notify} notify={notify}
updateScript={updateScript} updateScript={updateScript}
/> />
{this.renderOverlay}
</NotificationContext.Provider> </NotificationContext.Provider>
) )
} }
@ -75,31 +68,19 @@ export class CheckServices extends PureComponent<Props & WithRouterProps> {
return sources.find(s => s.id === params.sourceID) return sources.find(s => s.id === params.sourceID)
} }
private overlay() { private get renderOverlay(): JSX.Element {
const {showOverlay, services} = this.props const {services} = this.props
if (services.length) { return (
return <OverlayTechnology visible={!services.length}>
} <FluxOverlay mode="new" source={this.source} />
</OverlayTechnology>
showOverlay(
<OverlayContext.Consumer>
{({onDismissOverlay}) => (
<FluxOverlay
mode="new"
source={this.source}
onDismiss={onDismissOverlay}
/>
)}
</OverlayContext.Consumer>,
{}
) )
} }
} }
const mdtp = { const mdtp = {
fetchServicesAsync: actions.fetchServicesAsync, fetchServicesAsync: actions.fetchServicesAsync,
showOverlay: actions.showOverlay,
updateScript: updateScriptAction, updateScript: updateScriptAction,
notify: notifyAction, notify: notifyAction,
} }