From: Jérôme Benoit <jerome.benoit@sap.com>
Date: Wed, 14 Feb 2024 16:52:58 +0000 (+0100)
Subject: refactor(ui): refine configuration file type and make it conditional
X-Git-Tag: v1.2.37~55
X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=217db0589a326b179780002c076e9ec7fca59d8c;p=e-mobility-charging-stations-simulator.git

refactor(ui): refine configuration file type and make it conditional

reference: #980

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

diff --git a/ui/web/.gitignore b/ui/web/.gitignore
index 8e66ec81..546c9397 100644
--- a/ui/web/.gitignore
+++ b/ui/web/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/assets/config.ts
 
 # 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 1035fe9a..ffbc5f0b 100644
--- a/ui/web/README.md
+++ b/ui/web/README.md
@@ -4,13 +4,19 @@ The Web UI code and configuration is in the repository directory [ui/web](./../.
 
 ## Project setup
 
+### Dependencies
+
 ```shell
 corepack enable
 corepack prepare pnpm@latest --activate
 pnpm install
 ```
 
-The simulator UI server must be enabled, use WebSocket and disable authentication. The simulator main configuration file should have a `uiServer` section like this:
+### Configuration
+
+#### Simulator UI Server Configuration
+
+The simulator UI server must be enabled, use WebSocket transport type and have authentication disabled. The simulator main configuration file should have a `uiServer` section like this:
 
 ```json
   "uiServer": {
@@ -27,18 +33,28 @@ The simulator UI server must be enabled, use WebSocket and disable authenticatio
 
 See [here](./../../README.md#charging-stations-simulator-configuration) for more details.
 
+#### Web UI configuration
+
+Copy the configuration template [assets/config-template.ts](assets/config-template.ts) to `assets/config.ts`.
+
 ### Run
 
-#### Compiles and run for production
+#### Compiles for production
 
 ```shell
-pnpm start
+pnpm build
 ```
 
-#### Compiles and run for development
+#### Compiles and preview locally for production
+
+```shell
+pnpm preview
+```
+
+#### Compiles and run for production
 
 ```shell
-pnpm serve
+pnpm start
 ```
 
 #### Try it out
@@ -50,14 +66,22 @@ For both options above you can then follow the link displayed in the terminal at
 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.
 
-### Compiles and minifies for production
+### Development
+
+#### Compiles and run for development
 
 ```shell
-pnpm build
+pnpm dev
+```
+
+#### Formats files
+
+```shell
+pnpm format
 ```
 
-### Lints files
+#### Lints and fixes files
 
 ```shell
-pnpm lint
+pnpm lint:fix
 ```
diff --git a/ui/web/src/assets/config-template.ts b/ui/web/src/assets/config-template.ts
new file mode 100644
index 00000000..b5807ce4
--- /dev/null
+++ b/ui/web/src/assets/config-template.ts
@@ -0,0 +1,18 @@
+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/config.ts b/ui/web/src/assets/config.ts
deleted file mode 100644
index 28b3f158..00000000
--- a/ui/web/src/assets/config.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ConfigurationData } from '@/types'
-
-const configuration: ConfigurationData = {
-  uiServer: {
-    host: 'localhost',
-    port: 8080,
-    protocol: 'ui0.0.1'
-  }
-}
-
-export default configuration
diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts
index d056f631..9848fac0 100644
--- a/ui/web/src/composables/UIClient.ts
+++ b/ui/web/src/composables/UIClient.ts
@@ -1,10 +1,13 @@
 import {
+  ApplicationProtocol,
   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 = {
@@ -111,8 +114,8 @@ export class UIClient {
 
   private openWS(): void {
     this.ws = new WebSocket(
-      `ws://${configuration.uiServer.host}:${configuration.uiServer.port}`,
-      configuration.uiServer.protocol
+      `${configuration.uiServer.secure === true ? ApplicationProtocol.WSS : ApplicationProtocol.WS}://${configuration.uiServer.host}:${configuration.uiServer.port}`,
+      `${configuration.uiServer.protocol}${configuration.uiServer.version}`
     )
     this.ws.onmessage = this.responseHandler.bind(this)
     this.ws.onerror = errorEvent => {
diff --git a/ui/web/src/types/ConfigurationType.ts b/ui/web/src/types/ConfigurationType.ts
index cfdbf34a..93cfe86e 100644
--- a/ui/web/src/types/ConfigurationType.ts
+++ b/ui/web/src/types/ConfigurationType.ts
@@ -1,3 +1,5 @@
+import type { AuthenticationType, Protocol, ProtocolVersion } from './UIProtocol'
+
 export type ConfigurationData = {
   uiServer: UIServerConfigurationSection
 }
@@ -5,7 +7,13 @@ export type ConfigurationData = {
 type UIServerConfigurationSection = {
   host: string
   port: number
-  protocol: string
-  username?: string
-  password?: string
+  secure?: boolean
+  protocol: Protocol
+  version: ProtocolVersion
+  authentication?: {
+    enabled: boolean
+    type: AuthenticationType
+    username?: string
+    password?: string
+  }
 }
diff --git a/ui/web/src/types/UIProtocol.ts b/ui/web/src/types/UIProtocol.ts
index 07eb5212..1f8d1e6f 100644
--- a/ui/web/src/types/UIProtocol.ts
+++ b/ui/web/src/types/UIProtocol.ts
@@ -5,14 +5,18 @@ export enum Protocol {
 }
 
 export enum ApplicationProtocol {
-  HTTP = 'http',
-  WS = 'ws'
+  WS = 'ws',
+  WSS = 'wss'
 }
 
 export enum ProtocolVersion {
   '0.0.1' = '0.0.1'
 }
 
+export enum AuthenticationType {
+  BASIC_AUTH = 'basic-auth'
+}
+
 export type ProtocolRequest = [string, ProcedureName, RequestPayload]
 export type ProtocolResponse = [string, ResponsePayload]
 
diff --git a/ui/web/src/types/index.ts b/ui/web/src/types/index.ts
index 1f1f0556..85709be3 100644
--- a/ui/web/src/types/index.ts
+++ b/ui/web/src/types/index.ts
@@ -5,8 +5,12 @@ export type {
 } from './ChargingStationType'
 export type { ConfigurationData } from './ConfigurationType'
 export {
+  ApplicationProtocol,
+  AuthenticationType,
   ProcedureName,
+  Protocol,
   type ProtocolResponse,
+  ProtocolVersion,
   type RequestPayload,
   type ResponsePayload,
   ResponseStatus