MQTT: User must know if broker is connected or not (#1349)

Fixes #1016 Co-authored-by: Pierre-Gilles Leymarie <pierregilles.leymarie@gmail.com>
GladysAssistant · Nov 25, 2021 · a5c95dc · a5c95dc
1 parent b6ab1c0
commit a5c95dc
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 41 deletions.
diff --git a/front/src/config/i18n/fr.json b/front/src/config/i18n/fr.json
@@ -819,7 +819,7 @@
         "passwordPlaceholder": "Entrez le mot de passe du broker MQTT",
         "saveLabel": "Sauvegarder la configuration",
         "error": "Une erreur s'est produite lors de l'enregistrement de la configuration.",
-        "connecting": "Configuration enregistrée. Maintenant, connectez-vous à votre broker MQTT...",
+        "connecting": "Configuration enregistrée. Connexion au broker MQTT en cours...",
         "connected": "Connecté au broker MQTT avec succès !",
         "connectionError": "Erreur lors de la connexion, veuillez vérifier votre configuration.",
         "disconnected": "Déconnecté du broker MQTT."

diff --git a/front/src/routes/integration/all/mqtt/setup-page/SetupTab.jsx b/front/src/routes/integration/all/mqtt/setup-page/SetupTab.jsx
@@ -16,6 +16,49 @@ class SetupTab extends Component {
   };
 
   render(props) {
+    let alertMessage = null;
+
+    const { connectMqttStatus, mqttConnected, mqttConnectionError } = props;
+    switch (connectMqttStatus) {
+      case RequestStatus.Error:
+        // Error while updating setup
+        alertMessage = (
+          <p class="alert alert-danger">
+            <Text id="integration.mqtt.setup.error" />
+          </p>
+        );
+        break;
+      case RequestStatus.Success:
+        // Updating setup with success = connecting...
+        alertMessage = (
+          <p class="alert alert-info">
+            <Text id="integration.mqtt.setup.connecting" />
+          </p>
+        );
+        break;
+      default:
+        if (mqttConnectionError === 'DISCONNECTED') {
+          alertMessage = (
+            <p class="alert alert-info">
+              <Text id="integration.mqtt.setup.disconnected" />
+            </p>
+          );
+        } else if (mqttConnectionError || mqttConnected === false) {
+          alertMessage = (
+            <p class="alert alert-danger">
+              <Text id="integration.mqtt.setup.connectionError" />
+            </p>
+          );
+        } else if (mqttConnected) {
+          // Well connected
+          alertMessage = (
+            <p class="alert alert-success">
+              <Text id="integration.mqtt.setup.connected" />
+            </p>
+          );
+        }
+    }
+
     return (
       <div class="card">
         <div class="card-header">
@@ -34,32 +77,7 @@ class SetupTab extends Component {
               <p>
                 <MarkupText id="integration.mqtt.setup.mqttDescription" />
               </p>
-              {props.connectMqttStatus === RequestStatus.Error && (
-                <p class="alert alert-danger">
-                  <Text id="integration.mqtt.setup.error" />
-                </p>
-              )}
-              {props.connectMqttStatus === RequestStatus.Success && !props.mqttConnected && (
-                <p class="alert alert-info">
-                  <Text id="integration.mqtt.setup.connecting" />
-                </p>
-              )}
-              {props.mqttConnected && (
-                <p class="alert alert-success">
-                  <Text id="integration.mqtt.setup.connected" />
-                </p>
-              )}
-              {props.mqttConnectionError && props.mqttConnectionError !== 'DISCONNECTED' && (
-                <p class="alert alert-danger">
-                  <Text id="integration.mqtt.setup.connectionError" />
-                </p>
-              )}
-
-              {props.mqttConnectionError === 'DISCONNECTED' && (
-                <p class="alert alert-info">
-                  <Text id="integration.mqtt.setup.disconnected" />
-                </p>
-              )}
+              {alertMessage}
 
               <div class="form-group">
                 <label for="embeddedBroker" class="form-label">

diff --git a/front/src/routes/integration/all/mqtt/setup-page/actions.js b/front/src/routes/integration/all/mqtt/setup-page/actions.js
@@ -4,6 +4,18 @@ import { RequestStatus } from '../../../../../utils/consts';
 const createActions = store => {
   const integrationActions = createActionsIntegration(store);
   const actions = {
+    async loadStatus(state) {
+      let mqttStatus = {
+        connected: false
+      };
+      try {
+        mqttStatus = await state.httpClient.get('/api/v1/service/mqtt/status');
+      } finally {
+        store.setState({
+          mqttConnected: mqttStatus.connected
+        });
+      }
+    },
     async loadProps(state) {
       let configuration = {};
       try {
@@ -44,8 +56,6 @@ const createActions = store => {
         store.setState({
           connectMqttStatus: RequestStatus.Success
         });
-
-        setTimeout(() => store.setState({ connectMqttStatus: undefined }), 3000);
       } catch (e) {
         store.setState({
           connectMqttStatus: RequestStatus.Error,
@@ -57,16 +67,9 @@ const createActions = store => {
       // display 3 seconds a message "MQTT connected"
       store.setState({
         mqttConnected: true,
+        connectMqttStatus: undefined,
         mqttConnectionError: undefined
       });
-      setTimeout(
-        () =>
-          store.setState({
-            mqttConnected: false,
-            connectMqttStatus: undefined
-          }),
-        3000
-      );
     },
     displayMqttError(state, error) {
       store.setState({

diff --git a/front/src/routes/integration/all/mqtt/setup-page/index.js b/front/src/routes/integration/all/mqtt/setup-page/index.js
@@ -13,12 +13,20 @@ class MqttNodePage extends Component {
   componentWillMount() {
     this.props.getIntegrationByName('mqtt');
     this.props.loadProps();
-    this.props.session.dispatcher.addListener(WEBSOCKET_MESSAGE_TYPES.MQTT.CONNECTED, () =>
-      this.props.displayConnectedMessage()
+    this.props.loadStatus();
+    this.props.session.dispatcher.addListener(
+      WEBSOCKET_MESSAGE_TYPES.MQTT.CONNECTED,
+      this.props.displayConnectedMessage
     );
-    this.props.session.dispatcher.addListener(WEBSOCKET_MESSAGE_TYPES.MQTT.ERROR, payload =>
-      this.props.displayMqttError(payload)
+    this.props.session.dispatcher.addListener(WEBSOCKET_MESSAGE_TYPES.MQTT.ERROR, this.props.displayMqttError);
+  }
+
+  componentWillUnmount() {
+    this.props.session.dispatcher.removeListener(
+      WEBSOCKET_MESSAGE_TYPES.MQTT.CONNECTED,
+      this.props.displayConnectedMessage
     );
+    this.props.session.dispatcher.removeListener(WEBSOCKET_MESSAGE_TYPES.MQTT.ERROR, this.props.displayMqttError);
   }
 
   render(props, {}) {