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 8e66ec8157b83337751230061d844fc9ecb21ba4..546c93975d4f53ef36bff9ad08d12ea69167eb0c 100644 (file)
--- 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 1035fe9ae821929077269f2605c24fd4634a61eb..ffbc5f0b76bce3b0b5c857e7fa051dc31287f064 100644 (file)
--- 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 (file)
index 0000000..b5807ce
--- /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 (file)
index 28b3f15..0000000
--- 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 d056f6314e68fc71011ef1e5e2d66704f393c9b1..9848fac0b03fd136c5fea25a9ed84fa42d282702 100644 (file)
--- 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 cfdbf34a319dcc4b55a87067985dee66af44d561..93cfe86ef56fde162a89a78c065b2f5d00e44c2c 100644 (file)
--- 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 07eb52125599520cf59e8e81b4675d39bca85383..1f8d1e6fe7ba432fa02516cb4da851757297a47f 100644 (file)
--- 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 1f1f0556747d1d784ff578a0114039e73d3dbf58..85709be3c002048a8e27ec685be6d7fc0ae32af1 100644 (file)
--- 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