From bd6a332eab4a181e43d89245b3317c6db8988200 Mon Sep 17 00:00:00 2001 From: Sergii Leonenko Date: Wed, 7 Jul 2021 20:33:01 +0300 Subject: [PATCH] TT#128153 Refactor configuration injection AC: * align config approach with AUI application * apply the standard way of injecting configuration through boot files. * removed some files which are already part of RTC CDK and not used in CSC anymore Note: you have to move your personal "src/config.js" to "src/config/app.js" manually in your working folder. Change-Id: If5a615f0691631e4410e6780a025fed54133147b --- .gitignore | 2 +- bin/config-create.js | 4 +- debian/rules | 2 +- env/run_csc_ui | 4 +- quasar.conf.js | 8 +-- src/api/rtcsession.js | 48 ------------- src/api/subscriber.js | 6 +- src/boot/appConfig.js | 6 ++ src/boot/config.js | 14 ---- src/boot/rtc-engine.js | 12 +++- src/boot/vue-resource.js | 2 +- src/components/CscRetrievePasswordDialog.vue | 5 +- .../app.template.js} | 0 .../app.template.root.js} | 0 src/helpers/cdk-lib.js | 68 ------------------- src/pages/Proxy.vue | 4 +- src/plugins/call.js | 21 +----- src/plugins/rtc-engine.js | 33 +++++---- 18 files changed, 55 insertions(+), 184 deletions(-) delete mode 100644 src/api/rtcsession.js create mode 100644 src/boot/appConfig.js delete mode 100644 src/boot/config.js rename src/{config.template.js => config/app.template.js} (100%) rename src/{config.template.root.js => config/app.template.root.js} (100%) delete mode 100644 src/helpers/cdk-lib.js diff --git a/.gitignore b/.gitignore index 9c01e7ee..a17fec89 100644 --- a/.gitignore +++ b/.gitignore @@ -33,7 +33,7 @@ yarn-error.log* *.njsproj *.sln -/src/config.js +/src/config/app.js /junit.xml /test/jest/coverage diff --git a/bin/config-create.js b/bin/config-create.js index 6fe55d15..5b8fa0a6 100644 --- a/bin/config-create.js +++ b/bin/config-create.js @@ -2,8 +2,8 @@ const path = require('path') const fs = require('fs') -const filePathTemplate = path.resolve(__dirname + '/../src/config.template.root.js') -const filePathConfig = path.resolve(__dirname + '/../src/config.js') +const filePathTemplate = path.resolve(__dirname + '/../src/config/app.template.root.js') +const filePathConfig = path.resolve(__dirname + '/../src/config/app.js') const template = fs.readFileSync(filePathTemplate, 'utf8') const rendered = template.split('{{host}}').join(process.argv[2]) fs.writeFileSync(filePathConfig, rendered) diff --git a/debian/rules b/debian/rules index 46615c45..d095225a 100755 --- a/debian/rules +++ b/debian/rules @@ -11,6 +11,6 @@ YARN_BIN := $(shell which yarnpkg || echo yarn) override_dh_auto_install: $(YARN_BIN) install - cp src/config.template.js src/config.js + cp src/config/app.template.js src/config/app.js $(YARN_BIN) run build mv dist/spa csc diff --git a/env/run_csc_ui b/env/run_csc_ui index dbd4f2af..4852a701 100755 --- a/env/run_csc_ui +++ b/env/run_csc_ui @@ -13,8 +13,8 @@ if [ -z "${ngcp_address}" ] ; then fi echo "Found NGCP address '${ngcp_address}', processing further..." -app_config="src/config.js" -default_app_config="src/config.template.js" +app_config="src/config/app.js" +default_app_config="src/config/app.template.js" if [ ! -f "${app_config}" ]; then if [ ! -f "${default_app_config}" ]; then echo "ERROR: missing default quasar config '${default_app_config}'. Aborting." diff --git a/quasar.conf.js b/quasar.conf.js index c77a2fc8..abe0bfa2 100644 --- a/quasar.conf.js +++ b/quasar.conf.js @@ -19,9 +19,6 @@ module.exports = function (ctx) { } return { - // https://quasar.dev/quasar-cli/supporting-ts - supportTS: false, - // https://quasar.dev/quasar-cli/prefetch-feature // preFetch: true, @@ -29,7 +26,7 @@ module.exports = function (ctx) { // --> boot files are part of "main.js" // https://quasar.dev/quasar-cli/boot-files boot: [ - 'config', + 'appConfig', 'rtc-engine', 'filters', 'vuelidate', @@ -64,6 +61,9 @@ module.exports = function (ctx) { 'material-icons' // optional, you are not bound to it ], + // https://quasar.dev/quasar-cli/supporting-ts + supportTS: false, + // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build build: { vueRouterMode: 'hash', // available values: 'hash', 'history' diff --git a/src/api/rtcsession.js b/src/api/rtcsession.js deleted file mode 100644 index d5d2a706..00000000 --- a/src/api/rtcsession.js +++ /dev/null @@ -1,48 +0,0 @@ - -import config from '../config' -import Vue from 'vue' -import { getJsonBody } from './utils' - -export function create () { - return new Promise((resolve, reject) => { - Vue.http.post('api/rtcsessions/').then((res) => { - resolve(res) - }).catch((err) => { - reject(err) - }) - }) -} - -export function getByUrl (url) { - return new Promise((resolve, reject) => { - Vue.http.get(url).then((res) => { - resolve(getJsonBody(res.body)) - }).catch((err) => { - reject(err) - }) - }) -} - -export function createSession () { - return new Promise((resolve, reject) => { - Promise.resolve().then(() => { - return create() - }).then((res) => { - return getByUrl(config.baseHttpUrl + res.headers.get('Location')) - }).then((res) => { - resolve(res) - }).catch((err) => { - reject(err) - }) - }) -} - -export function createSessionToken () { - return new Promise((resolve, reject) => { - createSession().then((res) => { - resolve(res.rtc_browser_token) - }).catch((err) => { - reject(err) - }) - }) -} diff --git a/src/api/subscriber.js b/src/api/subscriber.js index f1a8f00c..f98ab803 100644 --- a/src/api/subscriber.js +++ b/src/api/subscriber.js @@ -551,11 +551,11 @@ export async function changeSIPPassword (subscriber, newPassword) { }) } -export async function resetPassword (userName) { +export async function resetPassword ({ username, domain = '' }) { const payLoad = { - domain: Vue.$config.baseHttpUrl.replace(/(^\w+:|^)\/\//, ''), + domain, type: 'subscriber', - username: userName + username } return await Vue.http.post('api/passwordreset/', payLoad) } diff --git a/src/boot/appConfig.js b/src/boot/appConfig.js new file mode 100644 index 00000000..655c2230 --- /dev/null +++ b/src/boot/appConfig.js @@ -0,0 +1,6 @@ +import appConfig from '../config/app' + +export default async ({ Vue, store, router, app }) => { + Vue.prototype.$appConfig = appConfig + app.$appConfig = appConfig +} diff --git a/src/boot/config.js b/src/boot/config.js deleted file mode 100644 index 35990200..00000000 --- a/src/boot/config.js +++ /dev/null @@ -1,14 +0,0 @@ - -import Vue from 'vue' -import config from 'src/config' - -Vue.use({ - install (Vue, options) { - Vue.$config = config - Vue.prototype.$config = config - } -}) - -export default ({ app }) => { - app.config = config -} diff --git a/src/boot/rtc-engine.js b/src/boot/rtc-engine.js index aa5b7fed..5e1675ff 100644 --- a/src/boot/rtc-engine.js +++ b/src/boot/rtc-engine.js @@ -1,10 +1,17 @@ import Vue from 'vue' -import RtcEnginePlugin from 'src/plugins/rtc-engine' +import getRtcEnginePlugin from 'src/plugins/rtc-engine' import CallPlugin from 'src/plugins/call' import ConferencePlugin from 'src/plugins/conference' import { errorVisibilityTimeout } from 'src/store/call' -export default ({ Vue, store }) => { +export default ({ Vue, store, app }) => { + const rtcPluginConfig = { + cdkScriptUrl: app.$appConfig.baseHttpUrl + '/rtc/files/dist/cdk-prod.js', + webSocketUrl: app.$appConfig.baseWsUrl + '/rtc/api', + ngcpApiBaseUrl: app.$appConfig.baseHttpUrl + // ngcpApiJwt: ... // Note: this value will be set in userInit action, with value from "getJwt" function + } + const RtcEnginePlugin = getRtcEnginePlugin(rtcPluginConfig) Vue.use(RtcEnginePlugin) Vue.use(CallPlugin) Vue.use(ConferencePlugin) @@ -15,7 +22,6 @@ export default ({ Vue, store }) => { } function rtcEngine (store) { - Vue.$rtcEngine.setNgcpApiBaseUrl(Vue.$config.baseHttpUrl) Vue.$rtcEngine.onSipNetworkConnected(() => { store.commit('call/enableCall') }).onSipNetworkDisconnected(() => { diff --git a/src/boot/vue-resource.js b/src/boot/vue-resource.js index 66754533..fd57af14 100644 --- a/src/boot/vue-resource.js +++ b/src/boot/vue-resource.js @@ -7,7 +7,7 @@ import { export default ({ Vue, app }) => { Vue.use(VueResource) - Vue.http.options.root = app.config.baseHttpUrl + Vue.http.options.root = app.$appConfig.baseHttpUrl Vue.http.interceptors.push(function (request, next) { if (hasJwt()) { request.headers.set('Authorization', 'Bearer ' + getJwt()) diff --git a/src/components/CscRetrievePasswordDialog.vue b/src/components/CscRetrievePasswordDialog.vue index 8e42c158..f2d5f1c6 100644 --- a/src/components/CscRetrievePasswordDialog.vue +++ b/src/components/CscRetrievePasswordDialog.vue @@ -93,7 +93,10 @@ export default { this.$v.$touch() if (!this.$v.$invalid) { try { - const res = await this.resetPassword(this.username) + const res = await this.resetPassword({ + username: this.username, + domain: this.$appConfig.baseHttpUrl.replace(/(^\w+:|^)\/\//, '') + }) this.$q.notify({ position: 'top', color: 'positive', diff --git a/src/config.template.js b/src/config/app.template.js similarity index 100% rename from src/config.template.js rename to src/config/app.template.js diff --git a/src/config.template.root.js b/src/config/app.template.root.js similarity index 100% rename from src/config.template.root.js rename to src/config/app.template.root.js diff --git a/src/helpers/cdk-lib.js b/src/helpers/cdk-lib.js deleted file mode 100644 index e928b3f0..00000000 --- a/src/helpers/cdk-lib.js +++ /dev/null @@ -1,68 +0,0 @@ - -const cdk = {} -import config from '../config' -import loadScript from 'load-script' - -const scriptId = 'cdk' -const scriptUrl = config.baseHttpUrl + '/rtc/files/dist/cdk-prod.js' -const webSocketUrl = config.baseWsUrl + '/rtc/api' - -export function loadCdkLib () { - return new Promise((resolve, reject) => { - if (!document.getElementById(scriptId)) { - loadScript(scriptUrl, { - attrs: { - id: scriptId - } - }, function (err, script) { - if (err) { - reject(err) - } else { - resolve(script) - } - }) - } else { - resolve() - } - }) -} - -export function connectCdkClient (session) { - return new Promise((resolve, reject) => { - const client = new cdk.Client({ - url: webSocketUrl, - userSession: session - }) - client.onConnect(() => { - resolve(client) - }) - client.onDisconnect(() => { - reject(new Error(client.disconnectReason)) - }) - }) -} - -export function connectCdkNetworkByClient (client, session, networkTag) { - return new Promise((resolve, reject) => { - const network = client.getNetworkByTag(networkTag) - network.onConnect(() => { - resolve(network) - }) - network.onDisconnect(() => { - reject(new Error(network.disconnectReason)) - }) - }) -} - -export async function connectCdkNetwork (session, networkTag) { - const client = await connectCdkClient(session) - return connectCdkNetworkByClient(client, session, networkTag) -} - -export function connectDefaultCdkNetwork (session) { - return connectCdkNetwork(session, 'sip') -} - -export function getChromeExtensionUrl () { - return cdk.getChromeExtensionURL() -} diff --git a/src/pages/Proxy.vue b/src/pages/Proxy.vue index e2160514..21fb7f72 100644 --- a/src/pages/Proxy.vue +++ b/src/pages/Proxy.vue @@ -41,8 +41,8 @@ export default { }, finalSrc () { let url = null - if (_.isString(this.$config.baseHttpUrl) && _.trim(this.$config.baseHttpUrl) !== '') { - url = new URL(this.$config.baseHttpUrl) + if (_.isString(this.$appConfig.baseHttpUrl) && _.trim(this.$appConfig.baseHttpUrl) !== '') { + url = new URL(this.$appConfig.baseHttpUrl) } else { url = new URL(location.origin) } diff --git a/src/plugins/call.js b/src/plugins/call.js index 42df18c9..96af73f5 100644 --- a/src/plugins/call.js +++ b/src/plugins/call.js @@ -1,11 +1,4 @@ import EventEmitter from 'events' -import { - loadCdkLib, - connectCdkNetwork -} from '../helpers/cdk-lib' -import { - createSessionToken -} from '../api/rtcsession' export const LocalMedia = { audioOnly: 'audioOnly', @@ -87,18 +80,6 @@ export class RtcEngineCall { return this.currentCall !== null } - loadLibrary () { - return loadCdkLib() - } - - createSession () { - return createSessionToken() - } - - connectNetwork (session) { - return connectCdkNetwork(session, this.networkTag) - } - createLocalMedia (localMedia) { return new Promise((resolve, reject) => { // eslint-disable-next-line no-undef @@ -151,7 +132,7 @@ export class RtcEngineCall { } else if (this.network !== null) { throw new CallAlreadyExists() } else { - throw new NetworkNotConnected(this.networkTag) + throw new NetworkNotConnected(this.networkTag) // TODO: "this.networkTag" is not defined. We should get this variable from somewhere } } diff --git a/src/plugins/rtc-engine.js b/src/plugins/rtc-engine.js index 551b43e1..7e86cc06 100644 --- a/src/plugins/rtc-engine.js +++ b/src/plugins/rtc-engine.js @@ -1,16 +1,20 @@ -import config from '../config' import loadScript from 'load-script' import EventEmitter from 'events' const scriptId = 'cdk' -const scriptUrl = config.baseHttpUrl + '/rtc/files/dist/cdk-prod.js' -const webSocketUrl = config.baseWsUrl + '/rtc/api' let rtcEnginePlugin = null export class RtcEnginePlugin { - constructor () { + constructor ({ + cdkScriptUrl = null, + webSocketUrl = null, + ngcpApiBaseUrl = null, + ngcpApiJwt = null + }) { + this.cdkScriptUrl = cdkScriptUrl + this.webSocketUrl = webSocketUrl this.script = null /** * @@ -18,8 +22,8 @@ export class RtcEnginePlugin { */ this.client = null this.sessionToken = null - this.ngcpApiJwt = null - this.ngcpApiBaseUrl = null + this.ngcpApiJwt = ngcpApiJwt + this.ngcpApiBaseUrl = ngcpApiBaseUrl this.events = new EventEmitter() } @@ -55,7 +59,7 @@ export class RtcEnginePlugin { loadLibrary () { return new Promise((resolve, reject) => { if (this.script === null) { - loadScript(scriptUrl, { + loadScript(this.cdkScriptUrl, { attrs: { id: scriptId } @@ -102,7 +106,7 @@ export class RtcEnginePlugin { if (this.client === null) { // eslint-disable-next-line no-undef this.client = new cdk.Client({ - url: webSocketUrl, + url: this.webSocketUrl, userSession: this.sessionToken }) this.client.onConnect(() => { @@ -168,17 +172,18 @@ export class RtcEnginePlugin { return this.client.getNetworkByTag('conference') } - static getInstance () { + static getInstance (rtcConfig = {}) { if (rtcEnginePlugin === null) { - rtcEnginePlugin = new RtcEnginePlugin() + rtcEnginePlugin = new RtcEnginePlugin(rtcConfig) } return rtcEnginePlugin } } -export default { - install (Vue) { - Vue.$rtcEngine = RtcEnginePlugin.getInstance() - Vue.$rtcEngine.setNgcpApiJwt(localStorage.getItem('jwt')) // TODO: probably should be replaced with "getJwt" function +export default function getVuePlugin (rtcConfig) { + return { + install (Vue) { + Vue.$rtcEngine = RtcEnginePlugin.getInstance(rtcConfig) + } } }