2.6.7: displaying entity/venue/subscriber wth buttons to go to provisioning directly within device details

2025-10-29 17:32:20 +00:00 · 2022-03-15 18:17:55 +00:00
parent e6bb26ce12
commit 54186575e0
3 changed files with 102 additions and 45 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "ucentral-client",
-  "version": "2.6.6",
+  "version": "2.6.7",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "ucentral-client",
-      "version": "2.6.6",
+      "version": "2.6.7",
      "dependencies": {
        "@coreui/coreui": "^3.4.0",
        "@coreui/icons": "^2.0.1",
@@ -2945,6 +2945,18 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/ansi-html": {
      "version": "0.0.7",
      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -3944,9 +3956,9 @@
      }
    },
    "node_modules/cliui/node_modules/ansi-regex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
      "dev": true,
      "engines": {
        "node": ">=6"
@@ -6741,9 +6753,9 @@
      "dev": true
    },
    "node_modules/follow-redirects": {
-      "version": "1.14.7",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
-      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
      "funding": [
        {
          "type": "individual",
@@ -13320,10 +13332,12 @@
      }
    },
    "node_modules/type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=10"
      },
@@ -13582,9 +13596,9 @@
      }
    },
    "node_modules/url-parse": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.4.tgz",
-      "integrity": "sha512-ITeAByWWoqutFClc/lRZnFplgXgEZr3WJ6XngMM/N9DMIm4K8zXPCZ1Jdu0rERwO84w1WC5wkle2ubwTA4NTBg==",
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
      "dev": true,
      "dependencies": {
        "querystringify": "^2.1.1",
@@ -14816,9 +14830,9 @@
      }
    },
    "node_modules/yargs/node_modules/ansi-regex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
      "dev": true,
      "engines": {
        "node": ">=6"
@@ -17012,6 +17026,14 @@
      "dev": true,
      "requires": {
        "type-fest": "^0.21.3"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.21.3",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+          "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+          "dev": true
+        }
      }
    },
    "ansi-html": {
@@ -17792,9 +17814,9 @@
      },
      "dependencies": {
        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+          "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
          "dev": true
        },
        "emoji-regex": {
@@ -19936,9 +19958,9 @@
      "dev": true
    },
    "follow-redirects": {
-      "version": "1.14.7",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
-      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
    },
    "for-in": {
      "version": "1.0.2",
@@ -24862,10 +24884,12 @@
      }
    },
    "type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-      "dev": true
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "type-is": {
      "version": "1.6.18",
@@ -25080,9 +25104,9 @@
      }
    },
    "url-parse": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.4.tgz",
-      "integrity": "sha512-ITeAByWWoqutFClc/lRZnFplgXgEZr3WJ6XngMM/N9DMIm4K8zXPCZ1Jdu0rERwO84w1WC5wkle2ubwTA4NTBg==",
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
      "dev": true,
      "requires": {
        "querystringify": "^2.1.1",
@@ -26001,9 +26025,9 @@
      },
      "dependencies": {
        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+          "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
          "dev": true
        },
        "emoji-regex": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "ucentral-client",
-  "version": "2.6.6",
+  "version": "2.6.7",
  "dependencies": {
    "@coreui/coreui": "^3.4.0",
    "@coreui/icons": "^2.0.1",
--- a/src/pages/DevicePage/Details.js
+++ b/src/pages/DevicePage/Details.js
@@ -15,14 +15,17 @@ import {
 import CIcon from '@coreui/icons-react';
 import { cilSync } from '@coreui/icons';
 import { prettyDate } from 'utils/helper';
-import { CopyToClipboardButton, HideTextButton } from 'ucentral-libs';
+import { CopyToClipboardButton, HideTextButton, useAuth } from 'ucentral-libs';
 import { getCountryFromLocale } from 'utils/countries';
 import ReactCountryFlag from 'react-country-flag';
+import axiosInstance from 'utils/axiosInstance';

 import styles from './index.module.scss';

 const DeviceDetails = ({ t, loading, getData, status, deviceConfig, lastStats }) => {
  const [showPassword, setShowPassword] = useState(false);
+  const [subName, setSubName] = useState('');
+  const { currentToken, endpoints } = useAuth();

  const toggleShowPassword = () => {
    setShowPassword(!showPassword);
@@ -34,21 +37,51 @@ const DeviceDetails = ({ t, loading, getData, status, deviceConfig, lastStats })
    return showPassword ? password : '******';
  };

-  const displayExtra = (key, value, extraData) => {
-    if (!extraData || !extraData[key]) return value;
+  const getSubData = async (subId) => {
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };

-    if (!localStorage.getItem('owprov-ui') || key === 'owner') return extraData[key].name;
+    axiosInstance
+      .get(`${endpoints.owsec}/api/v1/subuser/${subId}`, options)
+      .then((response) => setSubName(response.data.name ?? ''))
+      .catch(() => setSubName(''));
+  };
+
+  const getSubscriber = () => {
+    if (!deviceConfig?.subscriber || deviceConfig.subscriber === '') return '';
+    getSubData(deviceConfig.subscriber);

    return (
      <CLink
        className="c-subheader-nav-link align-self-center"
        aria-current="page"
-        href={`${localStorage.getItem('owprov-ui')}/#/${key === 'entity' ? 'entity' : 'venue'}/${
-          extraData[key].id
-        }`}
+        href={`${localStorage.getItem('owprov-ui')}/#/subscriber/${deviceConfig.subscriber}`}
        target="_blank"
      >
-        {extraData[key].name}
+        {subName !== '' ? subName : deviceConfig.subscriber}
+      </CLink>
+    );
+  };
+
+  const displayExtra = (key, value, extraData) => {
+    if (!extraData || !extraData[key]) return value;
+
+    if (!localStorage.getItem('owprov-ui')) return extraData[key].name;
+
+    return (
+      <CLink
+        className="c-subheader-nav-link align-self-center"
+        aria-current="page"
+        href={`${localStorage.getItem('owprov-ui')}/#/${
+          key === 'entity' ? 'entity' : 'venue'
+        }/${value}`}
+        target="_blank"
+      >
+        {!extraData || !extraData[key] ? value : extraData[key].name}
      </CLink>
    );
  };
@@ -104,7 +137,7 @@ const DeviceDetails = ({ t, loading, getData, status, deviceConfig, lastStats })
                <CLabel>{t('inventory.subscriber')}:</CLabel>
              </CCol>
              <CCol lg="2" xl="3" xxl="3">
-                {deviceConfig?.subscriber}
+                {getSubscriber()}
              </CCol>
              <CCol lg="2" xl="1" xxl="1">
                <CLabel>MAC:</CLabel>
@@ -122,7 +155,7 @@ const DeviceDetails = ({ t, loading, getData, status, deviceConfig, lastStats })
                <CLabel>{t('entity.entity')}:</CLabel>
              </CCol>
              <CCol lg="2" xl="3" xxl="3">
-                {deviceConfig?.venue?.substring(0, 3) === 'ent'
+                {deviceConfig?.entity !== ''
                  ? displayExtra(
                      'entity',
                      deviceConfig?.venue?.slice(4),
@@ -146,7 +179,7 @@ const DeviceDetails = ({ t, loading, getData, status, deviceConfig, lastStats })
                <CLabel>{t('inventory.venue')}:</CLabel>
              </CCol>
              <CCol lg="2" xl="3" xxl="3">
-                {deviceConfig?.venue?.substring(0, 3) === 'ven'
+                {deviceConfig?.venue !== ''
                  ? displayExtra('venue', deviceConfig?.venue?.slice(4), deviceConfig?.extendedInfo)
                  : ''}
              </CCol>