From: Jérôme Benoit <jerome.benoit@sap.com>
Date: Wed, 14 Feb 2024 20:37:25 +0000 (+0100)
Subject: refactor(ui): use JSON format as runtime configuration
X-Git-Tag: v1.2.37~50
X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=9d76f5ec92a3f5865ef2cefd5a253cab3aa2e5fe;p=e-mobility-charging-stations-simulator.git

refactor(ui): use JSON format as runtime configuration

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 16d73816..48e5cfb9 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -112,9 +112,7 @@ jobs:
         if: ${{ matrix.os == 'ubuntu-latest' && matrix.node == '20.x' }}
         run: pnpm lint
       - name: pnpm build
-        run: |
-          pnpm build:prepare
-          pnpm build
+        run: pnpm build
       - name: pnpm test
         run: pnpm test
       - name: pnpm coverage
diff --git a/docker/Dockerfile b/docker/Dockerfile
index 24881891..0ffd4bf2 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -25,7 +25,6 @@ RUN set -ex \
   && pnpm set progress=false \
   && pnpm config set depth 0 \
   && pnpm install --ignore-scripts --frozen-lockfile \
-  && pnpm build:prepare \
   && pnpm build
 
 FROM node:lts-alpine
diff --git a/ui/web/.gitignore b/ui/web/.gitignore
index 73475000..447b9ddd 100644
--- a/ui/web/.gitignore
+++ b/ui/web/.gitignore
@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-/src/assets/config.ts
+/public/config.json
 
 # Created by git for backups. To disable backups in git:
 # $ git config --global mergetool.keepBackup false
diff --git a/ui/web/README.md b/ui/web/README.md
index 1f5fdd33..f2c21d13 100644
--- a/ui/web/README.md
+++ b/ui/web/README.md
@@ -35,7 +35,7 @@ See [here](./../../README.md#charging-stations-simulator-configuration) for more
 
 #### Web UI configuration
 
-Copy the configuration template [src/assets/config-template.ts](src/assets/config-template.ts) to `src/assets/config.ts`.
+Copy the configuration template [src/assets/config-template.json](src/assets/config-template.json) to `public/config.json`.
 
 ### Run
 
@@ -61,7 +61,7 @@ pnpm start
 
 For both options above you can then follow the link displayed in the terminal at the end of compilation. The Web UI looks like the following
 
-![webui](./assets/webui.png)
+![webui](./src/assets/webui.png)
 
 1. With the top 2 buttons you can now stop and afterwards start the simulator and inspect the server console for the number of charging stations, e.g. with the default configuration: `Charging stations simulator ... started with 10 charging station(s)`
 2. Each charging station is a row in the table below, try "Stop Charging Station" and refresh with the large blue button and see the status Started turns from Yes into No.
diff --git a/ui/web/package.json b/ui/web/package.json
index 80d418fb..3d9d373c 100644
--- a/ui/web/package.json
+++ b/ui/web/package.json
@@ -22,7 +22,6 @@
     "start": "pnpm build && node start.js",
     "dev": "vite",
     "preview": "vite preview",
-    "build:prepare": "node build-prepare.js",
     "build": "vite build",
     "clean:dist": "npx rimraf dist",
     "clean:node_modules": "npx rimraf node_modules",
diff --git a/ui/web/src/assets/config-template.json b/ui/web/src/assets/config-template.json
new file mode 100644
index 00000000..1997f9d1
--- /dev/null
+++ b/ui/web/src/assets/config-template.json
@@ -0,0 +1,14 @@
+{
+  "uiServer": {
+    "host": "localhost",
+    "port": 8080,
+    "protocol": "ui",
+    "version": "0.0.1",
+    "authentication": {
+      "enabled": false,
+      "type": "basic-auth",
+      "username": "admin",
+      "password": "admin"
+    }
+  }
+}
diff --git a/ui/web/src/assets/config-template.ts b/ui/web/src/assets/config-template.ts
deleted file mode 100644
index b5807ce4..00000000
--- a/ui/web/src/assets/config-template.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { AuthenticationType, type ConfigurationData, Protocol, ProtocolVersion } from '@/types'
-
-const configuration: ConfigurationData = {
-  uiServer: {
-    host: 'localhost',
-    port: 8080,
-    protocol: Protocol.UI,
-    version: ProtocolVersion['0.0.1'],
-    authentication: {
-      enabled: false,
-      type: AuthenticationType.BASIC_AUTH,
-      username: 'admin',
-      password: 'admin'
-    }
-  }
-}
-
-export default configuration
diff --git a/ui/web/src/assets/logo.png b/ui/web/src/assets/logo.png
deleted file mode 100644
index f3d2503f..00000000
Binary files a/ui/web/src/assets/logo.png and /dev/null differ
diff --git a/ui/web/assets/webui.png b/ui/web/src/assets/webui.png
similarity index 100%
rename from ui/web/assets/webui.png
rename to ui/web/src/assets/webui.png
diff --git a/ui/web/src/components/charging-stations/CSConnector.vue b/ui/web/src/components/charging-stations/CSConnector.vue
index 29bb0718..08852683 100644
--- a/ui/web/src/components/charging-stations/CSConnector.vue
+++ b/ui/web/src/components/charging-stations/CSConnector.vue
@@ -23,12 +23,12 @@
 </template>
 
 <script setup lang="ts">
-// import { reactive } from 'vue'
-import Button from '../buttons/Button.vue'
-// import IdTagInputModal from './IdTagInputModal.vue'
+import { getCurrentInstance } from 'vue'
+// import { reactive } from 'vue';
+// import IdTagInputModal from '@/components/charging-stations/IdTagInputModal.vue'
+import Button from '@/components/buttons/Button.vue'
 import type { ConnectorStatus } from '@/types'
-import { UIClient } from '@/composables/UIClient'
-// import { compose } from '@/composables/Utils'
+// import { compose } from '@/composables'
 
 const props = defineProps<{
   hashId: string
@@ -62,28 +62,30 @@ const props = defineProps<{
 //   state.isIdTagModalVisible = false
 // }
 
+const UIClient = getCurrentInstance()?.appContext.config.globalProperties.$UIClient
+
 function startChargingStation(): void {
-  UIClient.getInstance().startChargingStation(props.hashId)
+  UIClient.startChargingStation(props.hashId)
 }
 function stopChargingStation(): void {
-  UIClient.getInstance().stopChargingStation(props.hashId)
+  UIClient.stopChargingStation(props.hashId)
 }
 function openConnection(): void {
-  UIClient.getInstance().openConnection(props.hashId)
+  UIClient.openConnection(props.hashId)
 }
 function closeConnection(): void {
-  UIClient.getInstance().closeConnection(props.hashId)
+  UIClient.closeConnection(props.hashId)
 }
 function startTransaction(): void {
-  UIClient.getInstance().startTransaction(props.hashId, props.connectorId, props.idTag)
+  UIClient.startTransaction(props.hashId, props.connectorId, props.idTag)
 }
 function stopTransaction(): void {
-  UIClient.getInstance().stopTransaction(props.hashId, props.transactionId)
+  UIClient.stopTransaction(props.hashId, props.transactionId)
 }
 function startAutomaticTransactionGenerator(): void {
-  UIClient.getInstance().startAutomaticTransactionGenerator(props.hashId, props.connectorId)
+  UIClient.startAutomaticTransactionGenerator(props.hashId, props.connectorId)
 }
 function stopAutomaticTransactionGenerator(): void {
-  UIClient.getInstance().stopAutomaticTransactionGenerator(props.hashId, props.connectorId)
+  UIClient.stopAutomaticTransactionGenerator(props.hashId, props.connectorId)
 }
 </script>
diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index befdbb4b..d077ca6e 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -21,7 +21,7 @@
 
 <script setup lang="ts">
 // import { reactive } from 'vue'
-import CSConnector from './CSConnector.vue'
+import CSConnector from '@/components/charging-stations/CSConnector.vue'
 import type { ChargingStationData, ChargingStationInfo, ConnectorStatus } from '@/types'
 
 const props = defineProps<{
diff --git a/ui/web/src/components/charging-stations/CSTable.vue b/ui/web/src/components/charging-stations/CSTable.vue
index c80c190b..30f469d9 100644
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import CSData from './CSData.vue'
+import CSData from '@/components/charging-stations/CSData.vue'
 import type { ChargingStationData } from '@/types'
 
 const props = defineProps<{
diff --git a/ui/web/src/components/charging-stations/IdTagInputModal.vue b/ui/web/src/components/charging-stations/IdTagInputModal.vue
index 1839a43c..ab965a7b 100644
--- a/ui/web/src/components/charging-stations/IdTagInputModal.vue
+++ b/ui/web/src/components/charging-stations/IdTagInputModal.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import Button from '../buttons/Button.vue'
+import Button from '@/components/buttons/Button.vue'
 import Modal from '@/components/Modal.vue'
 
 const props = defineProps<{
diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts
index 9848fac0..0251512d 100644
--- a/ui/web/src/composables/UIClient.ts
+++ b/ui/web/src/composables/UIClient.ts
@@ -1,14 +1,12 @@
 import {
   ApplicationProtocol,
+  type ConfigurationData,
   ProcedureName,
   type ProtocolResponse,
   type RequestPayload,
   type ResponsePayload,
   ResponseStatus
 } from '@/types'
-// @ts-expect-error: configuration file can be non existent
-// eslint-disable-next-line import/no-unresolved
-import configuration from '@/assets/config'
 
 type ResponseHandler = {
   procedureName: ProcedureName
@@ -22,14 +20,14 @@ export class UIClient {
   private ws!: WebSocket
   private responseHandlers: Map<string, ResponseHandler>
 
-  private constructor() {
+  private constructor(private configuration: ConfigurationData) {
     this.openWS()
     this.responseHandlers = new Map<string, ResponseHandler>()
   }
 
-  public static getInstance() {
+  public static getInstance(configuration: ConfigurationData) {
     if (UIClient.instance === null) {
-      UIClient.instance = new UIClient()
+      UIClient.instance = new UIClient(configuration)
     }
     return UIClient.instance
   }
@@ -114,8 +112,8 @@ export class UIClient {
 
   private openWS(): void {
     this.ws = new WebSocket(
-      `${configuration.uiServer.secure === true ? ApplicationProtocol.WSS : ApplicationProtocol.WS}://${configuration.uiServer.host}:${configuration.uiServer.port}`,
-      `${configuration.uiServer.protocol}${configuration.uiServer.version}`
+      `${this.configuration.uiServer.secure === true ? ApplicationProtocol.WSS : ApplicationProtocol.WS}://${this.configuration.uiServer.host}:${this.configuration.uiServer.port}`,
+      `${this.configuration.uiServer.protocol}${this.configuration.uiServer.version}`
     )
     this.ws.onmessage = this.responseHandler.bind(this)
     this.ws.onerror = errorEvent => {
@@ -140,7 +138,7 @@ export class UIClient {
         const sendTimeout = setTimeout(() => {
           this.responseHandlers.delete(uuid)
           return reject(new Error(`Send request '${procedureName}' message timeout`))
-        }, 60 * 1000)
+        }, 60000)
         try {
           this.ws.send(msg)
           this.responseHandlers.set(uuid, { procedureName, resolve, reject })
diff --git a/ui/web/src/composables/Utils.ts b/ui/web/src/composables/Utils.ts
index 2f9c1ac5..54d926ad 100644
--- a/ui/web/src/composables/Utils.ts
+++ b/ui/web/src/composables/Utils.ts
@@ -1,3 +1,3 @@
-// export const compose = <T>(...fns: ((arg: T) => T)[]): ((x: T) => T) => {
-//   return (x: T) => fns.reduceRight((y, fn) => fn(y), x)
-// }
+export const compose = <T>(...fns: ((arg: T) => T)[]): ((x: T) => T) => {
+  return (x: T) => fns.reduceRight((y, fn) => fn(y), x)
+}
diff --git a/ui/web/src/composables/index.ts b/ui/web/src/composables/index.ts
new file mode 100644
index 00000000..c5bd756f
--- /dev/null
+++ b/ui/web/src/composables/index.ts
@@ -0,0 +1,2 @@
+export { UIClient } from './UIClient'
+export { compose } from './Utils'
diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index 3e79677c..1b4d7ac6 100644
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -1,5 +1,13 @@
 import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
+import router from '@/router'
+import { UIClient } from '@/composables'
+import App from '@/App.vue'
 
-createApp(App).use(router).mount('#app')
+const app = createApp(App)
+
+fetch('/config.json')
+  .then(response => response.json())
+  .then(config => {
+    app.config.globalProperties.$UIClient = UIClient.getInstance(config)
+    app.use(router).mount('#app')
+  })
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index f500591a..be7aefbe 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -17,17 +17,16 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue'
+import { getCurrentInstance, onMounted, reactive } from 'vue'
 import CSTable from '@/components/charging-stations/CSTable.vue'
 import type { ChargingStationData } from '@/types'
 import Container from '@/components/Container.vue'
 import ReloadButton from '@/components/buttons/ReloadButton.vue'
-import { UIClient } from '@/composables/UIClient'
 
-const UIClientInstance = UIClient.getInstance()
+const UIClient = getCurrentInstance()?.appContext.config.globalProperties.$UIClient
 
 onMounted(() => {
-  UIClientInstance.registerWSonOpenListener(load)
+  UIClient.registerWSonOpenListener(load)
 })
 
 type State = {
@@ -45,17 +44,17 @@ const state: State = reactive({
 async function load(): Promise<void> {
   if (state.isLoading === true) return
   state.isLoading = true
-  const listChargingStationsPayload = await UIClientInstance.listChargingStations()
+  const listChargingStationsPayload = await UIClient.listChargingStations()
   state.chargingStations =
     listChargingStationsPayload.chargingStations as unknown as ChargingStationData[]
   state.isLoading = false
 }
 
 function startSimulator(): void {
-  UIClientInstance.startSimulator()
+  UIClient.startSimulator()
 }
 function stopSimulator(): void {
-  UIClientInstance.stopSimulator()
+  UIClient.stopSimulator()
 }
 </script>