verint.com/ca_vue_apps
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding Tenant Properties to DebugView

Browse Source
This commit is contained in:
Peter Morton 2023-12-21 14:38:34 -06:00
parent c3d5aef5e0
commit 3f6f583a94
7 changed files with 139 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

9
src/@types/HydraCollection.ts Normal file
View File

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

4
src/@types/TenantProperty.ts Normal file
View File

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

51
src/helpers/index.ts
View File

@ -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(
`${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
const data = await response.json();
// check for error response
if (!response.ok) {
// get error message from body or default to response statusText
// const error = (data && data.message) || response.statusText;
return Promise.reject(response.statusText);
return await axios
.get(
`${channelAutomationAPI.host}/tenant-properties-service/${channelAutomationAPI.tenant}/properties?fields=name,value,lastModifiedDate,lastModifiedBy?q=${key}`,
{ headers },
)
.then((response: { data: HydraCollection }) => {
const totalItems = response.data["hydra:totalItems"];
console.debug("tps result has hydra:totalItems [" + totalItems + "]");
if (totalItems > 0) {
const tenantProperties = response.data["hydra:member"].map(
function (member: { "vcfg:name": string; "vcfg:value": string }) {
return {
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();
}

42
src/views/DebugView.vue
View File

@ -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>

29
src/views/TelephonyContext.vue
View File

@ -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;
}