Adding Tenant Properties to DebugView

package-lock.json

@@ -15,6 +15,7 @@
         "@rushstack/eslint-patch": "^1.6.1",
         "@vue/eslint-config-typescript": "^12.0.0",
         "d3": "^7.8.5",
+        "http-errors": "^2.0.0",
         "jwt-decode": "^4.0.0",
         "vue": "^3.3.4",
         "vue-cookies": "^1.8.3",
@@ -2415,6 +2416,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/deprecation": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
@@ -3424,6 +3433,21 @@
         "he": "bin/he"
       }
     },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/human-signals": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
@@ -4731,6 +4755,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -4786,6 +4815,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/string.prototype.trim": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
@@ -4941,6 +4978,14 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",

package.json

@@ -18,6 +18,7 @@
     "@rushstack/eslint-patch": "^1.6.1",
     "@vue/eslint-config-typescript": "^12.0.0",
     "d3": "^7.8.5",
+    "http-errors": "^2.0.0",
     "jwt-decode": "^4.0.0",
     "vue": "^3.3.4",
     "vue-cookies": "^1.8.3",

src/@types/HydraCollection.ts

@@ -0,0 +1,9 @@
+export interface HydraCollection {
+  "hydra:totalItems": number;
+  "hydra:member": Array<VCFGProperty>;
+}
+
+export interface VCFGProperty {
+  "vcfg:name": string;
+  "vcfg:value": string;
+}

src/@types/TenantProperty.ts

@@ -0,0 +1,4 @@
+export interface TenantProperty {
+  name: string;
+  value: string;
+}

src/helpers/index.ts

@@ -1,7 +1,10 @@
 import type { ChannelAutomationAPI } from "../@types/ChannelAutomationAPI";
+import type { TenantProperty } from "../@types/TenantProperty";
+import type { HydraCollection } from "../@types/HydraCollection";
 import { jwtDecode } from "jwt-decode";
 import type { VueCookies } from "vue-cookies";
 import { inject } from "vue";
+import axios from "axios";
 
 export const COOKIE_PREFIX = "__Host-VRNTOTCT";
 
@@ -25,37 +28,49 @@ export function getChannnelAutomationAPI():
       }
     }
   }
+  console.error(
+    `getChannelAutomationAPI no valid cookie found.  Please check that a cookie with ${COOKIE_PREFIX} prefix exists.`,
+  );
   return undefined;
 }
 
-export function getTenantProperty(key?: string): string | undefined {
+export async function getTenantProperty(
+  key?: string,
+): Promise<Array<TenantProperty> | undefined> {
   const channelAutomationAPI = getChannnelAutomationAPI();
   if (!channelAutomationAPI) {
-    return undefined;
+    throw new Error("no channel automation api details");
   }
   const headers = {
     Authorization: `OIDC_id_token ${channelAutomationAPI.authentication}`,
     "Content-Type": "application/json",
   };
 
-  fetch(
+  return await axios
-    `${channelAutomationAPI.host}/tenant-properties-service/${channelAutomationAPI.tenant}/properties?fields=name,value,lastModifiedDate,lastModifiedBy?q=${key}`,
+    .get(
-    { headers },
+      `${channelAutomationAPI.host}/tenant-properties-service/${channelAutomationAPI.tenant}/properties?fields=name,value,lastModifiedDate,lastModifiedBy?q=${key}`,
-  )
+      { headers },
-    .then(async (response) => {
+    )
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    .then((response: { data: HydraCollection }) => {
-      const data = await response.json();
+      const totalItems = response.data["hydra:totalItems"];
-
+      console.debug("tps result has hydra:totalItems [" + totalItems + "]");
-      // check for error response
+      if (totalItems > 0) {
-      if (!response.ok) {
+        const tenantProperties = response.data["hydra:member"].map(
-        // get error message from body or default to response statusText
+          function (member: { "vcfg:name": string; "vcfg:value": string }) {
-        // const error = (data && data.message) || response.statusText;
+            return {
-        return Promise.reject(response.statusText);
+              name: member["vcfg:name"],
+              value: member["vcfg:value"],
+            } as TenantProperty;
+          },
+        );
+        return tenantProperties;
       }
-
-      console.debug(data);
     })
     .catch((error) => {
-      console.error("There was an error!", error);
+      console.error("getTenantProperty: channelAutomationAPI.fetch");
+      console.error(error);
+      throw error;
     });
+  // console.error('getTenantProperty: rejecting');
+  // return Promise.reject();
 }

src/views/DebugView.vue

@@ -5,19 +5,40 @@ import type { JSONWebToken } from "../@types/JSONWebToken";
 import type { ChannelAutomationAPI } from "../@types/ChannelAutomationAPI";
 import { DataTable } from "@jobinsjp/vue3-datatable";
 import "@jobinsjp/vue3-datatable/dist/style.css";
+
+import ErrorMessage from "../components/ErrorMessage.vue";
+
 import {
   COOKIE_PREFIX,
   getChannnelAutomationAPI,
   getTenantProperty,
 } from "../helpers";
 import { jwtDecode } from "jwt-decode";
+import { TenantProperty } from "../@types/TenantProperty";
+
+const errorMessage = ref("");
 
 const $cookies = inject<VueCookies>("$cookies");
 const data = ref([{ name: "", value: "" }]);
-const tps = ref();
+const tps = ref([] as Array<TenantProperty> | undefined);
 const channelAutomationAPI = ref({} as ChannelAutomationAPI | undefined);
 const jwtDecoded = ref({} as JSONWebToken);
 
+if ($cookies) {
+  const key = "__Host-VRNTOTCT404fdb6f";
+  $cookies.set(
+    key,
+    "eyJhbGciOiJSUzI1NiIsImtpZCI6IjM4MThlZDMxMmVkOGRhNTVkZWZkM2EzZmI0OGY1NjQzMWFjMWMwMmEzZjZkMmFkMjVjNDA5ZmEwOTA1NDU3ZTkiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOlsiZGVmYXVsdCJdLCJhenAiOiJkZWZhdWx0IiwiY29tLnZlcmludC5pc0V4dGVybmFsbHlBdXRoZW50aWNhdGVkIjpmYWxzZSwiY29tLnZlcmludC5sb2dpblJlc3VsdCI6MSwiY29udGVudF9lbnRpdGxlbWVudHMiOlsiUmVnaXN0ZXJlZFVzZXJDb250ZW50Il0sImNvbnRleHRfZW50aXRsZW1lbnRzIjpbIkNvbnRleHRVcGRhdGVyQVBJQWNjZXNzIl0sImVtX2FwaV9hY2Nlc3MiOlsic2VjdXJlbXNnX21lc3NhZ2Vfc2VhcmNoIiwiZW1haWxfb3V0Z29pbmdfZm9yd2FyZCIsImR5bmFtaWNlbnRpdHlfY3JlYXRlIiwiZHluYW1pY2VudGl0eV91cGRhdGUiLCJhY2Nlc3NfYXR0YWNobWVudF91cGxvYWQiLCJhY2Nlc3NfYXR0YWNobWVudF9kb3dubG9hZCIsImVtYWlsbWFpbGJveF9zZWFyY2giLCJlbWFpbF9vdXRnb2luZ19yZXBseSIsImFjY2Vzc19jYXNlX2NyZWF0ZSIsIkNhc2VBdHRhY2htZW50VmlldyIsImVudGl0eV9maWVsZF9hdWRpdF9yZWFkIiwiYWNjZXNzX2FnZW50X3VwZGF0ZSIsIkNhc2VBdHRhY2htZW50VXBsb2FkIiwiY3VzdG9tZXJfcmVhZCIsImVtYWlsbWFpbGJveF9jb25maWd1cmUiLCJ3aWFzX3JlYWQiLCJhY2Nlc3NfdWRnX3JlYWQiLCJhY2Nlc3NfY3VzdG9tZXJfY3JlYXRlIiwic2VjdXJlbXNnX2NvbnZlcnNhdGlvbl9jcmVhdGUiLCJzZWN1cmVtc2dfbWVzc2FnZV9jcmVhdGUiLCJzZWN1cmVtc2dfY29udmVyc2F0aW9uX3JlYWQiLCJzZWN1cmVtc2dfY29udmVyc2F0aW9uX3VwZGF0ZSIsInNlY3VyZW1zZ19tZXNzYWdlX2RlbGV0ZSIsImFjY2Vzc19jdXN0b21lcl9kZWxldGUiLCJhY2Nlc3NfYWdlbnRfY3JlYXRlIiwiYWNjZXNzX2FnZW50X3JlYWQiLCJhY2Nlc3NfdGVuYW50X3Byb3BlcnRpZXNfdXBkYXQiLCJhY2Nlc3NfdGVuYW50X3Byb3BlcnRpZXNfYmF0Y2giLCJhY2Nlc3NfYXR0YWNobWVudF9kZWxldGUiLCJlbWFpbF9vdXRnb2luZ19jcmVhdGUiLCJwcmVmZXJlbmNlc19kZXNrdG9wbG9jYWxlIiwiY2FzZV91cGRhdGUiLCJwcmVmZXJlbmNlc19jb250ZW50bG9jYWxlIl0sImV4cCI6MTcwMzIxMTg3MCwiaWF0IjoxNzAzMTc1ODcwLCJpc3MiOiJodHRwczovL2VtMjAudmVyaW50LmxpdmU6NDQzL29pZGMtdG9rZW4tc2VydmljZS9kZWZhdWx0IiwicmVhbG0iOiIvZGVmYXVsdCIsInN1YiI6ImFwaWNsaWVudCJ9.E7i3kL2kzZzYvpe-sxUxdBxALUe2hFzrf66DuSqubAj45ATwRIC7iKA6S-q0qd7opz6PCV4jw169u-V1VUsS4H31Oi7tSkBXETWAyLlw0BTctoPiKegb18QAobzAwGhdPF7zggeM2W6pvqsMbO1XrpfAop52gqF0Ww1ZePFLP9RI9OzS0sTWkjnDrGGDExSrJ_tYRs4jUgOsH5H-QNvg58QJ8KxFJzloUVhCHZR2LU1uckAvq19kxPt_iBUwxNoB-6C68qjHpzO_q9-EcnoPYaGj6igMp5u8qIoemuoWMPLN1R8o6bJ6glDmdSB4PB42irQHi_qMoFp0Lu_FamujnQ",
+    "1d",
+    "/",
+    undefined,
+    true,
+    "Strict",
+  );
+
+  const value = $cookies.get(key) as string;
+  console.log(`Cookie with value [${value}]`);
+}
 onMounted(() => {
   if ($cookies) {
     data.value = $cookies?.keys().map(function (value) {
@@ -32,18 +53,33 @@ onMounted(() => {
     });
 
     channelAutomationAPI.value = getChannnelAutomationAPI();
-    tps.value = getTenantProperty();
+    getTenantProperty()
+      .then((result) => {
+        tps.value = result;
+        console.log(tps.value);
+      })
+      .catch((error: Error) => {
+        errorMessage.value = error.message;
+        console.log(error.message);
+      });
   }
 });
 </script>
 <template>
   <h1>Channel Automation Vua Applications - Debugging</h1>
-  <h2>Cookie information</h2>
 
+  <h2>Cookie information</h2>
   <DataTable :rows="data"></DataTable>
 
   <h3>JWT Decoded</h3>
   <pre>{{ JSON.stringify(jwtDecoded, null, 2) }}</pre>
+
   <h3>API Connection from JWT Token</h3>
   <pre>{{ channelAutomationAPI }}</pre>
+
+  <h2>Tenant Properties</h2>
+  <DataTable :rows="tps"></DataTable>
+
+  <h3>Errors</h3>
+  <ErrorMessage v-if="errorMessage" :message="errorMessage" />
 </template>

src/views/TelephonyContext.vue

@@ -1,30 +1,11 @@
 <script lang="ts" setup>
-import { ref, onMounted, inject } from "vue";
+import { ref, onMounted } from "vue";
 import { getTenantProperty } from "../helpers/index";
 import VerticalLabelValue from "../components/VerticalLabelValue.vue";
 import ErrorMessage from "../components/ErrorMessage.vue";
 import IntegrationCard from "../components/IntegrationCard.vue";
 import DaVinciView from "./DaVinciView.vue";
 
-import type { VueCookies } from "vue-cookies";
-
-const $cookies = inject<VueCookies>("$cookies");
-if ($cookies) {
-  const key = "__Host-VRNTOTCT404fdb6f";
-  $cookies.set(
-    key,
-    "eyJhbGciOiJSUzI1NiIsImtpZCI6IjM4MThlZDMxMmVkOGRhNTVkZWZkM2EzZmI0OGY1NjQzMWFjMWMwMmEzZjZkMmFkMjVjNDA5ZmEwOTA1NDU3ZTkiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOlsiZGVmYXVsdCJdLCJhenAiOiJkZWZhdWx0IiwiY29tLnZlcmludC5pc0V4dGVybmFsbHlBdXRoZW50aWNhdGVkIjpmYWxzZSwiY29tLnZlcmludC5sb2dpblJlc3VsdCI6MSwiY29udGVudF9lbnRpdGxlbWVudHMiOlsiUmVnaXN0ZXJlZFVzZXJDb250ZW50Il0sImNvbnRleHRfZW50aXRsZW1lbnRzIjpbIkNvbnRleHRVcGRhdGVyQVBJQWNjZXNzIl0sImVtX2FwaV9hY2Nlc3MiOlsic2VjdXJlbXNnX21lc3NhZ2Vfc2VhcmNoIiwiZW1haWxfb3V0Z29pbmdfZm9yd2FyZCIsImR5bmFtaWNlbnRpdHlfY3JlYXRlIiwiZHluYW1pY2VudGl0eV91cGRhdGUiLCJhY2Nlc3NfYXR0YWNobWVudF91cGxvYWQiLCJhY2Nlc3NfYXR0YWNobWVudF9kb3dubG9hZCIsImVtYWlsbWFpbGJveF9zZWFyY2giLCJlbWFpbF9vdXRnb2luZ19yZXBseSIsImFjY2Vzc19jYXNlX2NyZWF0ZSIsIkNhc2VBdHRhY2htZW50VmlldyIsImVudGl0eV9maWVsZF9hdWRpdF9yZWFkIiwiYWNjZXNzX2FnZW50X3VwZGF0ZSIsIkNhc2VBdHRhY2htZW50VXBsb2FkIiwiY3VzdG9tZXJfcmVhZCIsImVtYWlsbWFpbGJveF9jb25maWd1cmUiLCJ3aWFzX3JlYWQiLCJhY2Nlc3NfdWRnX3JlYWQiLCJhY2Nlc3NfY3VzdG9tZXJfY3JlYXRlIiwic2VjdXJlbXNnX2NvbnZlcnNhdGlvbl9jcmVhdGUiLCJzZWN1cmVtc2dfbWVzc2FnZV9jcmVhdGUiLCJzZWN1cmVtc2dfY29udmVyc2F0aW9uX3JlYWQiLCJzZWN1cmVtc2dfY29udmVyc2F0aW9uX3VwZGF0ZSIsInNlY3VyZW1zZ19tZXNzYWdlX2RlbGV0ZSIsImFjY2Vzc19jdXN0b21lcl9kZWxldGUiLCJhY2Nlc3NfYWdlbnRfY3JlYXRlIiwiYWNjZXNzX2FnZW50X3JlYWQiLCJhY2Nlc3NfdGVuYW50X3Byb3BlcnRpZXNfdXBkYXQiLCJhY2Nlc3NfdGVuYW50X3Byb3BlcnRpZXNfYmF0Y2giLCJhY2Nlc3NfYXR0YWNobWVudF9kZWxldGUiLCJlbWFpbF9vdXRnb2luZ19jcmVhdGUiLCJwcmVmZXJlbmNlc19kZXNrdG9wbG9jYWxlIiwiY2FzZV91cGRhdGUiLCJwcmVmZXJlbmNlc19jb250ZW50bG9jYWxlIl0sImV4cCI6MTcwMzE1NjkzNywiaWF0IjoxNzAzMTIwOTM3LCJpc3MiOiJodHRwczovL2VtMjAudmVyaW50LmxpdmU6NDQzL29pZGMtdG9rZW4tc2VydmljZS9kZWZhdWx0IiwicmVhbG0iOiIvZGVmYXVsdCIsInN1YiI6ImFwaWNsaWVudCJ9.WQdvTn6sLKbEakxdWaXRiIXD-RAca1ts-dW3sF1WoXLCuzBVm-Zq7yfCjZ2OhT4qQzECSlRHco1oaHf8j-Mo21qnvexQnXhYO98A0FRsvB0vAefD5WWUlkynGDkfgvKuG69e_5L-QJpetdH_pvIgNg5Mr_wrNiMLPs6XLyi4x8u1ZRpVgseSJyrCnOFzAT54D3sJUi_SrZTDtCKQv2N91uCY0l5mu3CPosDqgIU1qBux_ZCWeyUab0vI-Zu6QLaduMaCsYBweZY8r52RGEP1MXBFY_p3apGmp7WRumVy9_Q0KYVw6PpIyqyLRbD0zU0C_NdujALojg9-kB1Yq19ZlA",
-    "1d",
-    "/",
-    undefined,
-    true,
-    "Strict",
-  );
-
-  const value = $cookies.get(key) as string;
-  console.log(`Cookie with value [${value}]`);
-}
-
 const props = defineProps({
   channel: { type: String, default: "" },
   type: { type: String, default: "" },
@@ -58,7 +39,13 @@ onMounted(() => {
 function setValueFromTPS(reference: { value: string }, param: string) {
   if (param.startsWith("tps:")) {
     const tpsProperty = param.substring(4, param.length);
-    reference.value = getTenantProperty(tpsProperty) as string;
+    getTenantProperty(tpsProperty)
+      .then((tenantProperties) => {
+        if (tenantProperties) reference.value = tenantProperties[0].value;
+      })
+      .catch((error: Error) => {
+        errorMessage.value = error.message;
+      });
   } else {
     reference.value = param;
   }