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

@@ -33,7 +33,7 @@ yarn-error.log*
 *.njsproj
 *.sln
 
-/src/config.js
+/src/config/app.js
 
 /junit.xml
 /test/jest/coverage

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)

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

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."

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'

src/api/rtcsession.js

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

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)
 }

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
+}

src/boot/config.js

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

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(() => {

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())

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',

src/helpers/cdk-lib.js

@@ -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()
-}

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)
             }

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

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)
+        }
     }
 }