From 0a2c2086c867d627a826e0eac11f76b33b86b628 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 27 Aug 2019 16:54:35 +0100 Subject: Include a done screen --- .../webui/src/js/components/CompleteSetup.jsx | 29 ++++++++++++++++++++-- synapse_topology/webui/src/js/components/Done.jsx | 27 ++++++++++++++++++++ synapse_topology/webui/src/js/components/UI.jsx | 4 +++ .../webui/src/js/containers/CompleteSetup.js | 2 ++ synapse_topology/webui/src/js/containers/Done.js | 16 ++++++++++++ .../webui/src/js/reducers/base-config-reducer.js | 6 +++++ .../webui/src/js/reducers/ui-constants.js | 2 ++ 7 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 synapse_topology/webui/src/js/components/Done.jsx create mode 100644 synapse_topology/webui/src/js/containers/Done.js diff --git a/synapse_topology/webui/src/js/components/CompleteSetup.jsx b/synapse_topology/webui/src/js/components/CompleteSetup.jsx index 33512e902b..a3c805b103 100644 --- a/synapse_topology/webui/src/js/components/CompleteSetup.jsx +++ b/synapse_topology/webui/src/js/components/CompleteSetup.jsx @@ -2,19 +2,30 @@ import React, { useState } from 'react'; import Accordion from 'react-bootstrap/Accordion'; import Card from 'react-bootstrap/Card'; +import useAccordionToggle from 'react-bootstrap/useAccordionToggle'; import ReverseProxySampleConfig from '../containers/ReverseProxySampleConfig' import DelegationSampleConfig from '../containers/DelegationSampleConfig'; import AccordionToggle from '../containers/AccordionToggle'; +import InlineError from '../components/InlineError'; import { TLS_TYPES, DELEGATION_TYPES } from '../actions/constants'; import { COMPLETE_UI } from '../reducers/ui-constants'; +import { nextUI } from '../reducers/setup-ui-reducer'; export default ({ tlsType, delegationType, + synapseStartFailed, + configDir, onClick, }) => { + const toggle = useAccordionToggle(nextUI(COMPLETE_UI)); + + const decoratedOnClick = () => { + toggle(); + onClick(); + } const [revProxyDownloaded, setRevProxyDownloaded] = useState(false); const [delegationDownloaded, setDelegationDownloaded] = useState(false); @@ -35,9 +46,23 @@ export default ({ >Next + const finishedBody = -

You done

- + + + +
+

+ In future use + synctl to start and stop synapse. Use the following to start synapse again: + +

+ + 
+            
+                synctl start {configDir}
+            
+
const show = []; diff --git a/synapse_topology/webui/src/js/components/Done.jsx b/synapse_topology/webui/src/js/components/Done.jsx new file mode 100644 index 0000000000..9a56174719 --- /dev/null +++ b/synapse_topology/webui/src/js/components/Done.jsx @@ -0,0 +1,27 @@ +import React, { useState } from 'react'; + +import Accordion from 'react-bootstrap/Accordion'; +import Card from 'react-bootstrap/Card'; +import AccordionToggle from '../containers/AccordionToggle'; +import { DONE_UI } from '../reducers/ui-constants'; + +export default ({ configDir }) => { + + + return + + Done + + + +

+ Synapse is running! +

+

+ There are many settings to play with in the yaml files in {configDir}. +

+ + + ; + +} \ No newline at end of file diff --git a/synapse_topology/webui/src/js/components/UI.jsx b/synapse_topology/webui/src/js/components/UI.jsx index ea74d68373..2decaf382b 100644 --- a/synapse_topology/webui/src/js/components/UI.jsx +++ b/synapse_topology/webui/src/js/components/UI.jsx @@ -19,6 +19,7 @@ import { DATABASE_UI, COMPLETE_UI, SETUP_ORDER, + DONE_UI, } from '../reducers/ui-constants'; import Error from './Error'; @@ -37,6 +38,7 @@ import Database from '../containers/Database'; import ConfigSelector from './ConfigSelector'; import CompleteSetup from '../containers/CompleteSetup'; import ContentWrapper from '../containers/ContentWrapper'; +import Done from '../containers/Done'; const blockMapping = uiBlock => { @@ -66,6 +68,8 @@ const blockMapping = uiBlock => { return case COMPLETE_UI: return + case DONE_UI: + return default: return

how did i get here?

diff --git a/synapse_topology/webui/src/js/containers/CompleteSetup.js b/synapse_topology/webui/src/js/containers/CompleteSetup.js index 483522dd93..aec5ef23d1 100644 --- a/synapse_topology/webui/src/js/containers/CompleteSetup.js +++ b/synapse_topology/webui/src/js/containers/CompleteSetup.js @@ -5,7 +5,9 @@ import { writeConfig } from '../actions'; const mapStateToProps = (state) => ({ tlsType: state.baseConfig.tls, + synapseStartFailed: state.baseConfig.synapseStartFailed, delegationType: state.baseConfig.delegationType, + configDir: state.baseConfig.configDir, }); diff --git a/synapse_topology/webui/src/js/containers/Done.js b/synapse_topology/webui/src/js/containers/Done.js new file mode 100644 index 0000000000..a4ad62569d --- /dev/null +++ b/synapse_topology/webui/src/js/containers/Done.js @@ -0,0 +1,16 @@ +import { connect } from 'react-redux'; + +import Done from '../components/Done'; + + +const mapStateToProps = (state, ownProps) => ({ + configDir: state.baseConfig.configDir, +}); + +const mapDispathToProps = (dispatch) => ({ +}); + +export default connect( + mapStateToProps, + mapDispathToProps, +)(Done); \ No newline at end of file diff --git a/synapse_topology/webui/src/js/reducers/base-config-reducer.js b/synapse_topology/webui/src/js/reducers/base-config-reducer.js index 4ed635f25c..6dbd8c1a40 100644 --- a/synapse_topology/webui/src/js/reducers/base-config-reducer.js +++ b/synapse_topology/webui/src/js/reducers/base-config-reducer.js @@ -19,6 +19,7 @@ import { SET_DATABASE, SET_CONFIG_DIR, BASE_CONFIG_CHECKED, + SYNAPSE_START, } from "../actions/types"; export default (state, action) => { @@ -133,6 +134,11 @@ export default (state, action) => { ...state, configDir: action.configDir, } + case SYNAPSE_START: + return { + ...state, + synapseStartedFailed: true, + } default: return state; diff --git a/synapse_topology/webui/src/js/reducers/ui-constants.js b/synapse_topology/webui/src/js/reducers/ui-constants.js index e366f879ff..51ea55a82b 100644 --- a/synapse_topology/webui/src/js/reducers/ui-constants.js +++ b/synapse_topology/webui/src/js/reducers/ui-constants.js @@ -9,6 +9,7 @@ export const REVERSE_PROXY_TEMPLATE_UI = "reverse_proxy_tamplate_ui"; export const DELEGATION_TEMPLATE_UI = "delegation_tamplate_ui"; export const DATABASE_UI = "database_ui"; export const COMPLETE_UI = "complete_ui"; +export const DONE_UI = "done_ui"; // Setup order export const SETUP_ORDER = [ @@ -20,6 +21,7 @@ export const SETUP_ORDER = [ PORT_SELECTION_UI, DATABASE_UI, COMPLETE_UI, + DONE_UI, ]; -- cgit 1.4.1