diff --git a/front/src/components/app.jsx b/front/src/components/app.jsx index f6d2b0d807..e921dfff8c 100644 --- a/front/src/components/app.jsx +++ b/front/src/components/app.jsx @@ -103,6 +103,7 @@ import LANManagerSettingsPage from '../routes/integration/all/lan-manager/settin import MqttDevicePage from '../routes/integration/all/mqtt/device-page'; import MqttDeviceSetupPage from '../routes/integration/all/mqtt/device-page/setup'; import MqttSetupPage from '../routes/integration/all/mqtt/setup-page'; +import MqttDebugPage from '../routes/integration/all/mqtt/debug-page/Debug'; // Zigbee2mqtt import Zigbee2mqttPage from '../routes/integration/all/zigbee2mqtt/device-page'; @@ -262,6 +263,7 @@ const AppRouter = connect( + diff --git a/front/src/config/i18n/de.json b/front/src/config/i18n/de.json index e2859716b1..5b086815e5 100644 --- a/front/src/config/i18n/de.json +++ b/front/src/config/i18n/de.json @@ -1191,6 +1191,7 @@ "title": "MQTT", "description": "Verbinde dich mit einem lokalen oder entfernten MQTT-Server.", "deviceTab": "Meine Geräte", + "debugTab": "Debug MQTT", "setupTab": "Einrichtung", "documentation": "MQTT-Dokumentation", "apiDocumentation": "MQTT-API-Dokumentation ", @@ -1235,7 +1236,13 @@ "mqttTopicToPublishExampleDescription": "Gladys hört auf dieses Topic. Wenn du einen Wert in diesem Thema veröffentlichst, wird er diesem Gerät zugeordnet. (siehe Dokumentation)", "mqttTopicToListenExampleLabel": "MQTT-Hörensthema", "mqttTopicToListenExampleDescription": "Gladys veröffentlicht in diesem Topic, wenn das Gerät in Gladys gesteuert wird. Du musst diesem Topic zuhören. (siehe Dokumentation)", + "mqttCustomTopic": "Benutzerdefiniertes MQTT-Thema", + "mqttCustomTopicDescription": "Gladys bietet eine Standard-MQTT-API an, ermöglicht Ihnen jedoch die Verwendung benutzerdefinierter Themen, wenn Sie ein Gerät verwenden, das nativ auf einem bestimmten Thema veröffentlicht.", + "mqttCustomTopicPlaceholder": "Geben Sie das MQTT-Thema ein", "copyMqttTopic": "MQTT-Thema kopieren", + "mqttCustomObjectPath": "MQTT JSON Nachricht", + "mqttCustomObjectPathDescription": "Wenn Ihr verbundenes Objekt MQTT-Nachrichten in Form eines JSON sendet, können Sie hier den Pfad der Eigenschaft angeben, der von Gladys verwendet werden soll. Beispiel: Eigenschaft1.Eigenschaft2.Eigenschaft3. Lassen Sie es leer, wenn das Format kein JSON ist.", + "mqttCustomObjectPathPlaceholder": "Pfad im JSON folgen", "copied": "Kopiert!", "copyFailed": "Kopieren fehlgeschlagen", "deleteLabel": "Funktion löschen" @@ -1264,6 +1271,15 @@ "connectionError": "Die Verbindung ist fehlgeschlagen. Bitte überprüfe deine Konfiguration.", "networkError": "Gladys kann nicht erreicht werden. Ist deine Gladys-Instanz verbunden und erreichbar?", "disconnected": "Vom MQTT-Broker getrennt." + }, + "debug": { + "title": "Debug MQTT", + "description": "Dieses Register ermöglicht es Ihnen, in Echtzeit die MQTT-Nachrichten zu sehen, die auf Ihrer Gladys-Instanz eingehen, und erleichtert so das Debuggen. Nach 2 Minuten auf diesem Register wird der Debug-Modus automatisch deaktiviert. Sie können ihn mit der Aktualisierungsschaltfläche oben rechts wieder aktivieren.", + "activateDebugMode": "Aktivieren", + "debugModeActivated": "Debug-Modus aktiviert", + "date": "Zeit", + "topic": "Thema", + "message": "Nachrichteninhalt" } }, "broadlink": { diff --git a/front/src/config/i18n/en.json b/front/src/config/i18n/en.json index 0d0a328c01..291a8cb79a 100644 --- a/front/src/config/i18n/en.json +++ b/front/src/config/i18n/en.json @@ -1191,6 +1191,7 @@ "title": "MQTT", "description": "Connect to a local or remote MQTT server", "deviceTab": "Devices", + "debugTab": "MQTT Debug", "setupTab": "Setup", "documentation": "MQTT documentation", "apiDocumentation": "MQTT API documentation ", @@ -1235,7 +1236,13 @@ "mqttTopicToPublishExampleDescription": "Gladys is listening to this topic. If you publish a value in this topic, it'll be associated with this device. (see doc)", "mqttTopicToListenExampleLabel": "MQTT Topic to listen", "mqttTopicToListenExampleDescription": "Gladys will publish in this topic if the device is controlled in Gladys. You need to listen to this topic. (see doc)", + "mqttCustomTopic": "Custom MQTT Topic", + "mqttCustomTopicDescription": "Gladys offers a default MQTT API but allows you to use custom topics if you are using a device that publishes on a particular topic natively.", + "mqttCustomTopicPlaceholder": "Enter MQTT topic", "copyMqttTopic": "Copy MQTT Topic", + "mqttCustomObjectPath": "MQTT JSON Message", + "mqttCustomObjectPathDescription": "If your connected object sends MQTT messages in the form of a JSON, Gladys allows you to specify here the path of the property to be used by Gladys. Example: property1.property2.property3. Leave blank if the format is not JSON.", + "mqttCustomObjectPathPlaceholder": "Path to follow in the JSON", "copied": "Copied!", "copyFailed": "Fail to copy", "deleteLabel": "Delete feature" @@ -1264,6 +1271,15 @@ "connectionError": "Error while connecting, please check your configuration.", "networkError": "Unable to contact Gladys, is your Gladys instance connected and accessible?", "disconnected": "Disconnected from MQTT broker." + }, + "debug": { + "title": "Debug MQTT", + "description": "This tab allows you to see in real-time the MQTT messages arriving on your Gladys instance, enabling you to debug easily. After 2 minutes on this tab, debug mode will automatically deactivate. You can reactivate it with the refresh button at the top right.", + "activateDebugMode": "Activate", + "debugModeActivated": "Debug mode activated", + "date": "Time", + "topic": "Topic", + "message": "Message Content" } }, "broadlink": { diff --git a/front/src/config/i18n/fr.json b/front/src/config/i18n/fr.json index 41d73e083d..bc6948fb30 100644 --- a/front/src/config/i18n/fr.json +++ b/front/src/config/i18n/fr.json @@ -1319,6 +1319,7 @@ "title": "MQTT", "description": "Connexion à un serveur MQTT, en local ou en distant.", "deviceTab": "Appareils", + "debugTab": "Debug MQTT", "setupTab": "Configuration", "documentation": "Documentation MQTT", "apiDocumentation": "Documentation MQTT API", @@ -1363,7 +1364,13 @@ "mqttTopicToPublishExampleDescription": "Gladys écoute ce topic. Si vous publiez une valeur dedans, Gladys l'associera à cette fonctionnalité. ( voir doc )", "mqttTopicToListenExampleLabel": "Topic MQTT à écouter", "mqttTopicToListenExampleDescription": "Gladys publiera un message dans ce topic si cet appareil est contrôlé depuis Gladys. Vous devez écouter ce topic. ( voir doc )", + "mqttCustomTopic": "Topic MQTT personnalisé", + "mqttCustomTopicDescription": "Gladys propose une API MQTT par défaut, mais vous permet d'utiliser des topics personnalisés si vous utilisez un appareil qui publie nativement sur un topic particulier.", + "mqttCustomTopicPlaceholder": "Entrez un topic MQTT", "copyMqttTopic": "Copier le topic MQTT", + "mqttCustomObjectPath": "Message MQTT JSON", + "mqttCustomObjectPathDescription": "Si votre objet connecté envoie des messages MQTT sous forme d'un JSON, Gladys vous permet de spécifier ici le chemin de la propriété à utiliser par Gladys. Exemple: property1.property2.property3. Laissez vide si le format n'est pas du JSON.", + "mqttCustomObjectPathPlaceholder": "Chemin à suivre dans le JSON", "copied": "Copié !", "copyFailed": "Erreur lors de la copie", "deleteLabel": "Supprimer la fonctionnalité" @@ -1392,6 +1399,15 @@ "connectionError": "Erreur lors de la connexion, veuillez vérifier votre configuration.", "networkError": "Impossible de contacter Gladys, est-ce que votre instance Gladys est bien connectée et accessible ?", "disconnected": "Déconnecté du broker MQTT." + }, + "debug": { + "title": "Debug MQTT", + "description": "Cet onglet vous permet de voir en temps réel les messages MQTT qui arrivent sur votre instance Gladys, ce qui vous permet de débugger simplement. Au bout de 2 minutes sur cet onglet, le mode débug se désactivera automatiquement. Vous pouvez le réactiver avec le bouton rafraichir en haut à droite.", + "activateDebugMode": "Activer", + "debugModeActivated": "Mode debug activé", + "date": "Heure", + "topic": "Topic", + "message": "Contenu du message" } }, "broadlink": { diff --git a/front/src/routes/integration/all/mqtt/MqttPage.js b/front/src/routes/integration/all/mqtt/MqttPage.js index dfc91f2395..48bbb88eac 100644 --- a/front/src/routes/integration/all/mqtt/MqttPage.js +++ b/front/src/routes/integration/all/mqtt/MqttPage.js @@ -25,6 +25,17 @@ const MqttPage = ({ children, user }) => ( + + + + + + + { + try { + await this.props.httpClient.post('/api/v1/service/mqtt/debug_mode', { + debug_mode: true + }); + this.setState({ + debugModeActivated: true + }); + clearTimeout(this.disableDebugModeTimeout); + this.disableDebugModeTimeout = setTimeout(() => { + this.setState({ + debugModeActivated: false + }); + }, 120 * 1000); + } catch (e) { + console.error(e); + } + }; + + displayNewMqttMessage = payload => { + const now = dayjs() + .locale(this.props.user.language) + .format('HH:mm:ss'); + const message = { ...payload, date: now }; + const newMessages = update(this.state.messages, { + $unshift: [message] + }); + this.setState({ messages: newMessages }); + }; + + componentWillMount() { + this.setDebugMode(); + this.props.session.dispatcher.addListener( + WEBSOCKET_MESSAGE_TYPES.MQTT.DEBUG_NEW_MQTT_MESSAGE, + this.displayNewMqttMessage + ); + } + + componentWillUnmount() { + this.props.session.dispatcher.removeListener( + WEBSOCKET_MESSAGE_TYPES.MQTT.DEBUG_NEW_MQTT_MESSAGE, + this.displayNewMqttMessage + ); + } + + render(props, { messages, debugModeActivated }) { + return ( + +
+
+

+ +

+
+ +
+
+
+ {debugModeActivated && ( +
+ +
+ )} +

+ +

+
+
+ + + + + + + + + + {messages.map(message => ( + + + + + + ))} + +
+ + + + + +
{message.date}{message.topic} + 
{message.message}
+
+
+
+ + ); + } +} + +export default connect('user,session,httpClient', {})(MqttNodePage); diff --git a/front/src/routes/integration/all/mqtt/device-page/setup/Feature.jsx b/front/src/routes/integration/all/mqtt/device-page/setup/Feature.jsx index 54bd458f34..0c607c2193 100644 --- a/front/src/routes/integration/all/mqtt/device-page/setup/Feature.jsx +++ b/front/src/routes/integration/all/mqtt/device-page/setup/Feature.jsx @@ -5,6 +5,7 @@ import { DEVICE_FEATURE_CATEGORIES } from '../../../../../../../../server/utils/constants'; import { DeviceFeatureCategoriesIcon, RequestStatus } from '../../../../../../utils/consts'; +import { getDeviceParam } from '../../../../../../utils/device'; import get from 'get-value'; const MqttFeatureBox = ({ children, feature, featureIndex, ...props }) => { @@ -168,6 +169,46 @@ const MqttFeatureBox = ({ children, feature, featureIndex, ...props }) => { +
+ +

+ + + +

+ + } + /> + +
+ +
+ +

+ + + +

+ + } + /> + +
+ {feature.read_only === false && (