Zigbee2mqtt: add IEEE address and link to open Z2M

front/src/config/i18n/de.json

@@ -984,6 +984,8 @@
         "mqtt": "MQTT",
         "status": "Status",
         "connectionUrl": "URL der Zigbee2mqtt-Schnittstelle: <a href=\"{{url}}\" target=\"_blank\">{{url}}</a>",
+        "z2mFrontendUrlLabel": "URL der Zigbee2mqtt-Schnittstelle",
+        "z2mFrontendUrlPlaceholder": "http://192.168.1.x:8080",
         "reset": {
           "title": "Integration zurücksetzen",
           "description": "Verwenden Sie diese Option, wenn Sie mit Zigbee2mqtt von vorne beginnen möchten. Dies kann nützlich sein, wenn Ihre Konfiguration beschädigt ist oder wenn Sie Ihren Zigbee-Koordinator wechseln möchten.",
@@ -1012,6 +1014,8 @@
       "nameLabel": "Gerätename",
       "namePlaceholder": "Gib den Namen deines Geräts ein",
       "roomLabel": "Zimmer",
+      "ieeeAddressLabel": "IEEE-Adresse",
+      "openInZ2mButton": "In Zigbee2mqtt öffnen",
       "topicLabel": "Topic",
       "topicPlaceholder": "%topic% Zigbee2MQTT-MQTT-Wert",
       "featuresLabel": "Funktionen",

front/src/config/i18n/en.json

@@ -879,6 +879,8 @@
         "mqtt": "MQTT",
         "status": "Status",
         "connectionUrl": "Zigbee2mqtt Interface URL: <a href=\"{{url}}\" target=\"_blank\">{{url}}</a>",
+        "z2mFrontendUrlLabel": "Zigbee2mqtt Interface URL",
+        "z2mFrontendUrlPlaceholder": "http://192.168.1.x:8080",
         "reset": {
           "title": "Reset Integration",
           "description": "Use this option if you want to start from scratch with Zigbee2mqtt. This can be useful if your configuration is corrupted or if you want to change your Zigbee coordinator.",
@@ -907,6 +909,8 @@
       "nameLabel": "Device Name",
       "namePlaceholder": "Enter the name of your device",
       "roomLabel": "Room",
+      "ieeeAddressLabel": "IEEE Address",
+      "openInZ2mButton": "Open in Zigbee2mqtt",
       "topicLabel": "Topic",
       "topicPlaceholder": "%topic% Zigbee2mqtt MQTT value",
       "featuresLabel": "Features",

front/src/config/i18n/fr.json

@@ -1117,6 +1117,8 @@
         "mqtt": "MQTT",
         "status": "Statut",
         "connectionUrl": "URL de l'interface Zigbee2mqtt : <a href=\"{{url}}\" target=\"_blank\">{{url}}</a>",
+        "z2mFrontendUrlLabel": "URL de l'interface Zigbee2mqtt",
+        "z2mFrontendUrlPlaceholder": "http://192.168.1.x:8080",
         "reset": {
           "title": "Réinitialiser l'intégration",
           "description": "Utilisez cette option si vous souhaitez repartir de zéro avec Zigbee2mqtt. Cela peut être utile si votre configuration est corrompue ou si vous souhaitez changer de coordinateur Zigbee.",
@@ -1145,6 +1147,8 @@
       "nameLabel": "Nom",
       "namePlaceholder": "Donner un nom à l'appareil",
       "roomLabel": "Pièce",
+      "ieeeAddressLabel": "Adresse IEEE",
+      "openInZ2mButton": "Ouvrir dans Zigbee2mqtt",
       "topicLabel": "Sujet MQTT",
       "topicPlaceholder": "%topic% zigbee2mqtt MQTT value",
       "featuresLabel": "Fonctionnalités",

front/src/routes/integration/all/zigbee2mqtt/device-page/Zigbee2mqttBox.jsx

@@ -9,6 +9,7 @@ import style from './style.css';
 import { DEVICE_FEATURE_CATEGORIES } from '../../../../../../../server/utils/constants';
 import DeviceFeatures from '../../../../../components/device/view/DeviceFeatures';
 import BatteryLevelFeature from '../../../../../components/device/view/BatteryLevelFeature';
+import logoZigbee2mqtt from '../../../../../assets/integrations/logos/logo_zigbee2mqtt.png';
 
 class Zigbee2mqttBox extends Component {
   updateName = e => {
@@ -164,6 +165,26 @@ class Zigbee2mqttBox extends Component {
                   </select>
                 </div>
 
+                {props.device.ieee_address && (
+                  <div class="form-group">
+                    <label class="form-label">
+                      <Text id="integration.zigbee2mqtt.ieeeAddressLabel" />
+                    </label>
+                    <input type="text" class="form-control" value={props.device.ieee_address} disabled />
+                    {props.z2mUrl && (
+                      <a
+                        href={`${props.z2mUrl}/#/device/0/${props.device.ieee_address}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class={`${style.z2mDeviceLink} mt-2 text-muted`}
+                      >
+                        <img src={logoZigbee2mqtt} alt="Zigbee2mqtt" class={style.z2mDeviceLinkLogo} />
+                        <Text id="integration.zigbee2mqtt.openInZ2mButton" />
+                      </a>
+                    )}
+                  </div>
+                )}
+
                 <div class="form-group">
                   <label class="form-label">
                     <Text id="integration.zigbee2mqtt.featuresLabel" />

front/src/routes/integration/all/zigbee2mqtt/device-page/actions.js

@@ -4,11 +4,28 @@ import uuid from 'uuid';
 import debounce from 'debounce';
 import createActionsIntegration from '../../../../../actions/integration';
 import createActionsHouse from '../../../../../actions/house';
+import config from '../../../../../config';
 
 function createActions(store) {
   const integrationActions = createActionsIntegration(store);
   const houseActions = createActionsHouse(store);
   const actions = {
+    async getZ2mUrl(state) {
+      try {
+        const configuration = await state.httpClient.get('/api/v1/service/zigbee2mqtt/setup');
+        if (configuration.Z2M_MQTT_MODE === 'local') {
+          if (configuration.z2mTcpPort && state.session.gatewayClient === undefined) {
+            const url = new URL(config.localApiUrl);
+            const z2mUrl = `${url.protocol}//${url.hostname}:${configuration.z2mTcpPort}`;
+            store.setState({ z2mUrl });
+          }
+        } else if (configuration.Z2M_MQTT_MODE === 'external' && configuration.Z2M_FRONTEND_URL) {
+          store.setState({ z2mUrl: configuration.Z2M_FRONTEND_URL });
+        }
+      } catch (e) {
+        // z2mUrl stays undefined, link won't be shown
+      }
+    },
     async getZigbee2mqttDevices(state, take, skip) {
       store.setState({
         getZigbee2mqttStatus: RequestStatus.Getting
@@ -23,12 +40,26 @@ function createActions(store) {
           options.search = state.zigbee2mqttSearch;
         }
 
-        const zigbee2mqttsReceived = await state.httpClient.get('/api/v1/service/zigbee2mqtt/device', options);
+        const [zigbee2mqttsReceived, discoveredDevices] = await Promise.all([
+          state.httpClient.get('/api/v1/service/zigbee2mqtt/device', options),
+          state.httpClient.get('/api/v1/service/zigbee2mqtt/discovered', { filter_existing: false })
+        ]);
+
+        const discoveredMap = {};
+        discoveredDevices.forEach(d => {
+          discoveredMap[d.external_id] = d;
+        });
+
         zigbee2mqttsReceived.forEach(device => {
           const model = device.params.find(p => p.name === 'model');
           if (model) {
             device.model = model.value;
           }
+
+          const discovered = discoveredMap[device.external_id];
+          if (discovered && discovered.ieee_address) {
+            device.ieee_address = discovered.ieee_address;
+          }
         });
 
         let zigbee2mqttDevices;

front/src/routes/integration/all/zigbee2mqtt/device-page/index.js

@@ -9,6 +9,7 @@ class Zigbee2mqttIntegration extends Component {
     this.props.getZigbee2mqttDevices(100, 0);
     this.props.getHouses();
     this.props.getIntegrationByName('zigbee2mqtt');
+    this.props.getZ2mUrl();
   }
 
   render(props, {}) {
@@ -21,6 +22,6 @@ class Zigbee2mqttIntegration extends Component {
 }
 
 export default connect(
-  'user,zigbee2mqttDevices,houses,getZigbee2mqttStatus,zigbee2mqttSearch,getZigbee2mqttOrderDir',
+  'user,zigbee2mqttDevices,houses,getZigbee2mqttStatus,zigbee2mqttSearch,getZigbee2mqttOrderDir,z2mUrl',
   actions
 )(Zigbee2mqttIntegration);

front/src/routes/integration/all/zigbee2mqtt/device-page/style.css

@@ -20,3 +20,16 @@
 .z2mActionButtons > a button {
   width: 100%;
 }
+
+.z2mDeviceLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+}
+
+.z2mDeviceLinkLogo {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}

front/src/routes/integration/all/zigbee2mqtt/discover-page/DiscoveredBox.jsx

@@ -5,6 +5,8 @@ import cx from 'classnames';
 import { RequestStatus } from '../../../../../utils/consts';
 import DeviceFeatures from '../../../../../components/device/view/DeviceFeatures';
 import { DEVICE_FEATURE_CATEGORIES } from '../../../../../../../server/utils/constants';
+import logoZigbee2mqtt from '../../../../../assets/integrations/logos/logo_zigbee2mqtt.png';
+import style from './style.css';
 
 const GITHUB_BASE_URL = 'https://github.com/GladysAssistant/Gladys/issues/new';
 
@@ -42,8 +44,8 @@ class DiscoveredBox extends Component {
     });
   };
 
-  render({ device = {}, deviceIndex, houses = [] }, { loading, saveError }) {
-    const { features = [] } = device;
+  render({ device = {}, deviceIndex, houses = [], z2mUrl }, { loading, saveError }) {
+    const { features = [], ieee_address = null } = device;
     const enableSaveButton = !device.created_at;
     const enableUpdateButton = device.updatable;
     const supportedDevice = features.findIndex(f => f.category !== DEVICE_FEATURE_CATEGORIES.BATTERY) >= 0;
@@ -129,6 +131,26 @@ class DiscoveredBox extends Component {
                       </Localizer>
                     </div>
 
+                    {ieee_address && (
+                      <div class="form-group">
+                        <label class="form-label">
+                          <Text id="integration.zigbee2mqtt.ieeeAddressLabel" />
+                        </label>
+                        <input type="text" class="form-control" value={ieee_address} disabled />
+                        {z2mUrl && (
+                          <a
+                            href={`${z2mUrl}/#/device/0/${ieee_address}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class={`${style.z2mDeviceLink} mt-2 text-muted`}
+                          >
+                            <img src={logoZigbee2mqtt} alt="Zigbee2mqtt" class={style.z2mDeviceLinkLogo} />
+                            <Text id="integration.zigbee2mqtt.openInZ2mButton" />
+                          </a>
+                        )}
+                      </div>
+                    )}
+
                     <div class="form-group">
                       <label class="form-label">
                         <Text id="integration.zigbee2mqtt.featuresLabel" />

front/src/routes/integration/all/zigbee2mqtt/discover-page/actions.js

@@ -1,11 +1,28 @@
 import update from 'immutability-helper';
 import createActionsIntegration from '../../../../../actions/integration';
 import createActionsHouse from '../../../../../actions/house';
+import config from '../../../../../config';
 
 function createActions(store) {
   const integrationActions = createActionsIntegration(store);
   const houseActions = createActionsHouse(store);
   const actions = {
+    async getZ2mUrl(state) {
+      try {
+        const configuration = await state.httpClient.get('/api/v1/service/zigbee2mqtt/setup');
+        if (configuration.Z2M_MQTT_MODE === 'local') {
+          if (configuration.z2mTcpPort && state.session.gatewayClient === undefined) {
+            const url = new URL(config.localApiUrl);
+            const z2mUrl = `${url.protocol}//${url.hostname}:${configuration.z2mTcpPort}`;
+            store.setState({ z2mUrl });
+          }
+        } else if (configuration.Z2M_MQTT_MODE === 'external' && configuration.Z2M_FRONTEND_URL) {
+          store.setState({ z2mUrl: configuration.Z2M_FRONTEND_URL });
+        }
+      } catch (e) {
+        // z2mUrl stays undefined, link won't be shown
+      }
+    },
     async getDiscoveredDevices(state) {
       store.setState({
         discoverZigbee2mqtt: true,

front/src/routes/integration/all/zigbee2mqtt/discover-page/index.js

@@ -23,6 +23,7 @@ class Zigbee2mqttIntegration extends Component {
     this.props.getHouses();
     this.props.getIntegrationByName('zigbee2mqtt');
     this.props.getDiscoveredDevices();
+    this.props.getZ2mUrl();
   }
 
   componentWillUnmount() {
@@ -47,7 +48,7 @@ class Zigbee2mqttIntegration extends Component {
 
 export default withIntlAsProp(
   connect(
-    'user,session,houses,zigbee2mqttDevices,discoverZigbee2mqtt,discoverZigbee2mqttError,permitJoin,gladysConnected,zigbee2mqttConnected,usbConfigured,z2mEnabled,filterExisting',
+    'user,session,houses,zigbee2mqttDevices,discoverZigbee2mqtt,discoverZigbee2mqttError,permitJoin,gladysConnected,zigbee2mqttConnected,usbConfigured,z2mEnabled,filterExisting,z2mUrl',
     actions
   )(Zigbee2mqttIntegration)
 );

front/src/routes/integration/all/zigbee2mqtt/discover-page/style.css

@@ -5,3 +5,16 @@
 .zigbee2mqttListBody {
   min-height: 200px
 }
+
+.z2mDeviceLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+}
+
+.z2mDeviceLinkLogo {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}

front/src/routes/integration/all/zigbee2mqtt/setup-page/index.js

@@ -15,7 +15,8 @@ const VARIABLE_MAP = {
   Z2M_MQTT_MODE: 'mqttMode',
   Z2M_MQTT_URL: 'mqttUrl',
   GLADYS_MQTT_USERNAME: 'mqttUsername',
-  GLADYS_MQTT_PASSWORD: 'mqttPassword'
+  GLADYS_MQTT_PASSWORD: 'mqttPassword',
+  Z2M_FRONTEND_URL: 'z2mFrontendUrl'
 };
 
 class Zigbee2mqttSetupPage extends Component {

front/src/routes/integration/all/zigbee2mqtt/setup-page/remote/SetupRemoteOptions.jsx

@@ -13,6 +13,10 @@ class SetupRemoteOptions extends Component {
     this.setState({ mqttUrl: e.target.value });
   };
 
+  updateZ2mFrontendUrl = e => {
+    this.setState({ z2mFrontendUrl: e.target.value });
+  };
+
   updateMqttUsername = e => {
     this.setState({ mqttUsername: e.target.value });
   };
@@ -22,12 +26,13 @@ class SetupRemoteOptions extends Component {
   };
 
   saveConfiguration = () => {
-    const { mqttMode, mqttUrl, mqttUsername, mqttPassword } = this.state;
+    const { mqttMode, mqttUrl, mqttUsername, mqttPassword, z2mFrontendUrl } = this.state;
     this.props.saveConfiguration({
       mqttMode,
       mqttUrl,
       mqttUsername,
-      mqttPassword
+      mqttPassword,
+      z2mFrontendUrl
     });
   };
 
@@ -43,18 +48,19 @@ class SetupRemoteOptions extends Component {
     super(props);
 
     const { configuration } = props;
-    const { mqttUrl, mqttPassword, mqttUsername } = configuration;
+    const { mqttUrl, mqttPassword, mqttUsername, z2mFrontendUrl } = configuration;
 
     this.state = {
       mqttMode: MQTT_MODE.EXTERNAL,
       mqttUrl,
       mqttPassword,
       mqttUsername,
+      z2mFrontendUrl,
       showPassword: false
     };
   }
 
-  render({ disabled }, { mqttMode, mqttUrl, mqttUsername, mqttPassword, showPassword }) {
+  render({ disabled }, { mqttMode, mqttUrl, mqttUsername, mqttPassword, z2mFrontendUrl, showPassword }) {
     return (
       <div>
         <p>
@@ -63,6 +69,22 @@ class SetupRemoteOptions extends Component {
         <div class="form-group">
           {mqttMode === MQTT_MODE.EXTERNAL && (
             <form>
+              <div class="form-group">
+                <label for="z2mFrontendUrl" class="form-label">
+                  <Text id="integration.zigbee2mqtt.setup.z2mFrontendUrlLabel" />
+                </label>
+                <Localizer>
+                  <input
+                    id="z2mFrontendUrl"
+                    name="z2mFrontendUrl"
+                    placeholder={<Text id="integration.zigbee2mqtt.setup.z2mFrontendUrlPlaceholder" />}
+                    value={z2mFrontendUrl}
+                    class="form-control"
+                    onInput={this.updateZ2mFrontendUrl}
+                  />
+                </Localizer>
+              </div>
+
               <div class="form-group">
                 <label for="mqttUrl" class="form-label">
                   <Text id={`integration.mqtt.setup.urlLabel`} />

server/services/zigbee2mqtt/lib/constants.js

@@ -14,6 +14,7 @@ const CONFIGURATION = {
   GLADYS_MQTT_PASSWORD_KEY: 'GLADYS_MQTT_PASSWORD',
   DOCKER_MQTT_VERSION: 'DOCKER_MQTT_VERSION', // Variable to identify last version of MQTT docker file is installed
   DOCKER_Z2M_VERSION: 'DOCKER_Z2M_VERSION', // Variable to identify last version of Z2M docker file is installed
+  Z2M_FRONTEND_URL: 'Z2M_FRONTEND_URL',
 };
 
 const MQTT_MODE = {
@@ -29,6 +30,7 @@ const SETUP_VARIABLES = [
   CONFIGURATION.GLADYS_MQTT_USERNAME_KEY,
   CONFIGURATION.GLADYS_MQTT_PASSWORD_KEY,
   CONFIGURATION.Z2M_MQTT_MODE,
+  CONFIGURATION.Z2M_FRONTEND_URL,
 ];
 
 const DEFAULT = {