diff --git a/ui/src/flux/components/FluxOverlay.tsx b/ui/src/flux/components/FluxOverlay.tsx index 1cb7f3d70..51b0ef0b5 100644 --- a/ui/src/flux/components/FluxOverlay.tsx +++ b/ui/src/flux/components/FluxOverlay.tsx @@ -18,7 +18,7 @@ interface Props { mode: string source?: Source service?: Service - onDismiss?: () => void + onDismiss: () => void notify: (message: Notification) => void createService: CreateServiceAsync updateService: UpdateServiceAsync diff --git a/ui/src/flux/containers/CheckServices.tsx b/ui/src/flux/containers/CheckServices.tsx index 3fffb546b..e00d6c7a3 100644 --- a/ui/src/flux/containers/CheckServices.tsx +++ b/ui/src/flux/containers/CheckServices.tsx @@ -27,7 +27,22 @@ interface Props { links: Links } -export class CheckServices extends PureComponent { +interface State { + showOverlay: boolean +} + +export class CheckServices extends PureComponent< + Props & WithRouterProps, + State +> { + constructor(props: Props & WithRouterProps) { + super(props) + + this.state = { + showOverlay: false, + } + } + public async componentDidMount() { const source = this.props.sources.find( s => s.id === this.props.params.sourceID @@ -38,6 +53,10 @@ export class CheckServices extends PureComponent { } await this.props.fetchServicesAsync(source) + + if (!this.props.services.length) { + this.setState({showOverlay: true}) + } } public render() { @@ -69,14 +88,22 @@ export class CheckServices extends PureComponent { } private get renderOverlay(): JSX.Element { - const {services} = this.props + const {showOverlay} = this.state return ( - - + + ) } + + private handleDismissOverlay = (): void => { + this.setState({showOverlay: false}) + } } const mdtp = {