Thing details: Make link in Thing status description clickable (#2996)

Resolve #2994 Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
openhab · Jan 9, 2025 · d16fe3a · d16fe3a
1 parent a9954c3
commit d16fe3a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/bundles/org.openhab.ui/web/src/components/thing/thing-status-mixin.js b/bundles/org.openhab.ui/web/src/components/thing/thing-status-mixin.js
@@ -1,5 +1,9 @@
 import ThingStatusLabels from '@/assets/i18n/thing-status/en'
 
+// Applies to Thing statusInfo.description containing a pattern of
+// http(s)://[YOUROPENHAB]:[YOURPORT]/path
+const linkRegex = /^(?<pretext>.*)http[^:]*:\/\/[^/]?YOUROPENHAB[^/]?:[^/]?YOURPORT[^/]?\/(?<path>\S+)(?<posttext>.*)$/
+
 export default {
   methods: {
     thingStatusBadgeColor (statusInfo) {
@@ -12,6 +16,19 @@ export default {
     thingStatusBadgeText (statusInfo) {
       if (statusInfo.statusDetail !== 'NONE') return ThingStatusLabels[statusInfo.statusDetail]
       return statusInfo.status
+    },
+    thingStatusDescription (statusInfo) {
+      const description = statusInfo.description
+      if (statusInfo.statusDetail === 'CONFIGURATION_PENDING' && description) {
+        const result = linkRegex.exec(description)
+        if (result) {
+          const { pretext, path, posttext } = result.groups
+          if (!path) return description
+          const root = location.protocol + '//' + location.host
+          return `${pretext}<a href="${root}/${path}" target="_blank" class="link color-blue external">${root}/${path}</a>${posttext}`
+        }
+      }
+      return description
     }
   }
 }
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/thing-details.vue
@@ -35,9 +35,7 @@
             <div>
               <strong>{{ (thing.statusInfo.statusDetail !== 'NONE') ? thing.statusInfo.statusDetail : '&nbsp;' }}</strong>
               <br>
-              <div v-if="thing.statusInfo.description">
-                {{ thing.statusInfo.description }}
-              </div>
+              <div v-if="thingStatusDescription(thing.statusInfo)" v-html="thingStatusDescription(thing.statusInfo)" />
             </div>
           </f7-col>
         </f7-block>