Docker node red integration

front/src/components/app.jsx

@@ -144,6 +144,9 @@ import MELCloudEditPage from '../routes/integration/all/melcloud/edit-page';
 import MELCloudSetupPage from '../routes/integration/all/melcloud/setup-page';
 import MELCloudDiscoverPage from '../routes/integration/all/melcloud/discover-page';
 
+// NodeRed integration
+import NodeRedPage from '../routes/integration/all/node-red/setup-page';
+
 const defaultState = getDefaultState();
 const store = createStore(defaultState);
 
@@ -249,6 +252,9 @@ const AppRouter = connect(
         <Zigbee2mqttSettingsPage path="/dashboard/integration/device/zigbee2mqtt/settings" />
         <Zigbee2mqttSetupPage path="/dashboard/integration/device/zigbee2mqtt/setup" />
         <Zigbee2mqttEditPage path="/dashboard/integration/device/zigbee2mqtt/edit/:deviceSelector" />
+
+        <NodeRedPage path="/dashboard/integration/device/node-red" />
+
         <XiaomiPage path="/dashboard/integration/device/xiaomi" />
         <EditXiaomiPage path="/dashboard/integration/device/xiaomi/edit/:deviceSelector" />
         <TasmotaPage path="/dashboard/integration/device/tasmota" />

front/src/config/i18n/en.json

@@ -607,6 +607,42 @@
       "saveError": "There was an error saving the device.",
       "documentation": "Zigbee2mqtt documentation"
     },
+    "nodeRed": {
+      "title": "Node-RED",
+      "description": "Control your devices with Node-RED.",
+      "setupTab": "Setup",
+      "documentation": "Node-RED documentation",
+
+      "status": {
+        "notInstalled": "Node-RED server failed to install.",
+        "notRunning": "Node-RED server failed to start.",
+        "running": "Node-RED successfully started.",
+        "notEnabled": "Node-RED is not activated.",
+        "nonDockerEnv": "Gladys is not running on Docker, you cannot install a Node-RED server from here.",
+        "invalidDockerNetwork": "Gladys is under custom installation, to install server from here, Gladys container should be configured with \"host\" network mode."
+      },
+      "setup": {
+        "title": "Node-RED configuration",
+        "description": "This service uses docker container. Enable Node-RED for deploying this container.\nLearn more on the node-red documentation page",
+        "descriptionBackup": "For the moment, Node-RED is not backup into Gladys Plus.\nIf you want a backup for Node-RED, please follow this <a href=\"https://community.gladysassistant.com/t/mini-tuto-backup-par-email-des-flows-node-red/8402\" target=\"_blank\" rel=\"noopener noreferrer\">docs</a>",
+        "error": "An error occured while starting  Node-RED.",
+        "enableLabel": "Node-RED activation",
+        "enableNodeRed": "Enable",
+        "disableNodeRed": "Disable",
+        "confirmDisableLabel": "Are you sur you to disable Node-RED ?",
+        "confirmDisableCancelButton": "Cancel",
+        "activationNodeRed": "Activating...",
+        "serviceStatus": "Node-RED Service Status",
+        "containersStatus": "Containers related to Node-RED",
+        "status": "Status",
+        "node-red": "Node-RED",
+        "gladys": "Gladys",
+        "usernameLabel": "Username",
+        "passwordLabel": "Password",
+        "urlLabel": "Node-RED interface url: <a href=\"{{nodeRedUrl}}\" target=\"_blank\">{{nodeRedUrl}}</a> (Not accessible from Gladys Plus)"
+      }
+    },
+
     "googleHome": {
       "title": "Google Home",
       "description": "Control your Gladys device with your voice in Google Home",

front/src/config/i18n/fr.json

@@ -733,6 +733,41 @@
       "saveError": "Une erreur s'est produite lors de la sauvegarde.",
       "documentation": "Documentation Zigbee2mqtt"
     },
+    "nodeRed": {
+      "title": "Node-RED",
+      "description": "Contrôlez vos appareils via Node-RED.",
+      "setupTab": "Configuration",
+      "documentation": "Documentation Node-RED",
+      "status": {
+        "notInstalled": "Le serveur Node-RED n'a pas pu être installé.",
+        "notRunning": "Le serveur Node-RED n'a pas démarré.",
+        "running": "Node-RED démarré avec succès.",
+        "notEnabled": "Node-RED n'est pas activé.",
+        "nonDockerEnv": "Gladys ne s'exécute actuellement pas dans Docker, il est impossible d'activer Node-RED depuis Gladys.",
+        "invalidDockerNetwork": "Gladys est basée sur une installation personalisée, pour installer Node-RED depuis cette page, le conteneur Docker de Gladys doit être démarré avec l'option \"network=host\"."
+      },
+      "setup": {
+        "title": "Configuration du service Node-RED",
+        "description": "Ce service utilise un container Docker. Activez Node-RED pour déployer ce container.\nPour en savoir plus, rendez-vous sur la page de documentation Node-RED.",
+        "descriptionBackup": "Pour le moment, Node-RED n'est pas sauvegardé dans Gladys Plus.\nSi vous souhaitez une sauvegarde pour Node-RED, veuillez suivre cette <a href=\"https://community.gladysassistant.com/t/mini-tuto-backup-par-email-des-flows-node-red/8402\" target=\"_blank\" rel=\"noopener noreferrer\">documentation</a>",
+        "error": "Une erreur s'est produite au démarrage du service Node-RED.",
+        "enableLabel": "Activation du service Node-RED",
+        "enableNodeRed": "Activer",
+        "disableNodeRed": "Désactiver",
+        "confirmDisableLabel": "Etes-vous sûr de vouloir désactiver Node-RED ?",
+        "confirmDisableCancelButton": "Annuler",
+        "activationNodeRed": "Activation...",
+        "serviceStatus": "Etat du service Node-RED",
+        "containersStatus": "Conteneurs liés à Node-RED",
+        "status": "Status",
+        "node-red": "Node-RED",
+        "gladys": "Gladys",
+        "usernameLabel": "Nom d'utilisateur",
+        "passwordLabel": "Mot de passe",
+        "urlLabel": "Url de l'interface Node-RED : <a href=\"{{nodeRedUrl}}\" target=\"_blank\">{{nodeRedUrl}}</a> (Pas accessible depuis Gladys Plus)"
+      }
+    },
+
     "googleHome": {
       "title": "Google Home",
       "description": "Contrôlez vos appareils Gladys à la voix dans Google Home",

front/src/config/integrations/devices.json

@@ -68,5 +68,10 @@
     "key": "melcloud",
     "link": "melcloud",
     "img": "/assets/integrations/cover/melcloud.jpg"
+  },
+  {
+    "key": "nodeRed",
+    "link": "node-red",
+    "img": "/assets/integrations/cover/node-red.jpg"
   }
 ]

front/src/routes/integration/all/node-red/NodeRedPage.js

@@ -0,0 +1,50 @@
+import { Text } from 'preact-i18n';
+import { Link } from 'preact-router/match';
+import DeviceConfigurationLink from '../../../../components/documentation/DeviceConfigurationLink';
+
+const NodeRedPage = ({ children, user }) => (
+  <div class="page">
+    <div class="page-main">
+      <div class="my-3 my-md-5">
+        <div class="container">
+          <div class="row">
+            <div class="col-lg-3">
+              <h3 class="page-title mb-5">
+                <Text id="integration.nodeRed.title" />
+              </h3>
+              <div>
+                <div class="list-group list-group-transparent mb-0">
+                  <Link
+                    href="/dashboard/integration/device/node-red"
+                    activeClassName="active"
+                    class="list-group-item list-group-item-action d-flex align-items-center"
+                  >
+                    <span class="icon mr-3">
+                      <i class="fe fe-sliders" />
+                    </span>
+                    <Text id="integration.nodeRed.setupTab" />
+                  </Link>
+
+                  <DeviceConfigurationLink
+                    user={user}
+                    documentKey="node-red"
+                    linkClass="list-group-item list-group-item-action d-flex align-items-center"
+                  >
+                    <span class="icon mr-3">
+                      <i class="fe fe-book-open" />
+                    </span>
+                    <Text id="integration.nodeRed.documentation" />
+                  </DeviceConfigurationLink>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-lg-9">{children}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default NodeRedPage;

front/src/routes/integration/all/node-red/setup-page/CheckStatus.js

@@ -0,0 +1,51 @@
+import { Component } from 'preact';
+import { Text } from 'preact-i18n';
+import { RequestStatus } from '../../../../../utils/consts';
+import style from './style.css';
+import classNames from 'classnames/bind';
+
+let cx = classNames.bind(style);
+
+class CheckStatus extends Component {
+  render({ nodeRedEnabled, nodeRedExist, nodeRedRunning, dockerBased, networkModeValid, nodeRedStatus }, {}) {
+    let textLabel = null;
+    if (nodeRedStatus === RequestStatus.Getting) {
+      textLabel = 'integration.nodeRed.setup.activationNodeRed';
+    } else if (!dockerBased) {
+      textLabel = 'integration.nodeRed.status.nonDockerEnv';
+    } else if (!networkModeValid) {
+      textLabel = 'integration.nodeRed.status.invalidDockerNetwork';
+    } else if (nodeRedEnabled) {
+      if (!nodeRedExist) {
+        textLabel = 'integration.nodeRed.status.notInstalled';
+      } else if (!nodeRedRunning) {
+        textLabel = 'integration.nodeRed.status.notRunning';
+      } else {
+        textLabel = 'integration.nodeRed.status.running';
+      }
+    } else {
+      textLabel = 'integration.nodeRed.status.notEnabled';
+    }
+
+    return (
+      <div>
+        <div
+          class={cx('d-flex', 'flex-row', 'flex-wrap', 'justify-content-between', 'mr-0', 'ml-0', 'alert', {
+            'alert-success': nodeRedEnabled && nodeRedExist && nodeRedRunning,
+            'alert-warning': nodeRedEnabled && nodeRedExist && !nodeRedRunning,
+            'alert-danger': (nodeRedEnabled && !nodeRedExist) || !dockerBased || !networkModeValid,
+            'alert-info': !nodeRedEnabled
+          })}
+        >
+          <div class={cx(style.textAlignMiddleContainer)}>
+            <span class={cx(style.textAlignMiddle)}>
+              <Text id={textLabel} />
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default CheckStatus;