From 1d41bc6b533ef7361954f472811263c24cd6f64b Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Fri, 9 Feb 2024 20:42:02 +0100
Subject: [PATCH] feat(ui): display supervision url in charging stations list
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

closes #967

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---
 src/charging-station/ChargingStation.ts       | 12 ++---
 src/types/ChargingStationWorker.ts            |  1 +
 src/utils/MessageChannelUtils.ts              |  1 +
 ui/web/src/App.vue                            | 12 ++---
 ui/web/src/components/Container.vue           |  5 +-
 .../charging-stations/CSConnector.vue         |  8 +--
 .../components/charging-stations/CSData.vue   | 26 +++++----
 .../charging-stations/CSInfoModal.vue         |  1 -
 .../components/charging-stations/CSTable.vue  | 53 +++++++------------
 ui/web/src/composables/Utils.ts               |  5 --
 ui/web/src/types/ChargingStationType.ts       |  1 +
 ui/web/src/views/ChargingStationsView.vue     |  4 +-
 ui/web/tests/unit/CSTable.spec.ts             |  1 +
 13 files changed, 57 insertions(+), 73 deletions(-)

diff --git a/src/charging-station/ChargingStation.ts b/src/charging-station/ChargingStation.ts
index a0867719..8bbf7848 100644
--- a/src/charging-station/ChargingStation.ts
+++ b/src/charging-station/ChargingStation.ts
@@ -260,7 +260,7 @@ export class ChargingStation extends EventEmitter {
     return this.connectors.size === 0 && this.evses.size > 0
   }
 
-  private get wsConnectionUrl (): URL {
+  public get wsConnectionUrl (): URL {
     return new URL(
       `${
         this.stationInfo?.supervisionUrlOcppConfiguration === true &&
@@ -801,14 +801,12 @@ export class ChargingStation extends EventEmitter {
 
     if (this.isWebSocketConnectionOpened()) {
       logger.warn(
-        `${this.logPrefix()} OCPP connection to URL ${this.wsConnectionUrl.toString()} is already opened`
+        `${this.logPrefix()} OCPP connection to URL ${this.wsConnectionUrl.href} is already opened`
       )
       return
     }
 
-    logger.info(
-      `${this.logPrefix()} Open OCPP connection to URL ${this.wsConnectionUrl.toString()}`
-    )
+    logger.info(`${this.logPrefix()} Open OCPP connection to URL ${this.wsConnectionUrl.href}`)
 
     this.wsConnection = new WebSocket(
       this.wsConnectionUrl,
@@ -1802,7 +1800,7 @@ export class ChargingStation extends EventEmitter {
   private async onOpen (): Promise<void> {
     if (this.isWebSocketConnectionOpened()) {
       logger.info(
-        `${this.logPrefix()} Connection to OCPP server through ${this.wsConnectionUrl.toString()} succeeded`
+        `${this.logPrefix()} Connection to OCPP server through ${this.wsConnectionUrl.href} succeeded`
       )
       let registrationRetryCount = 0
       if (!this.isRegistered()) {
@@ -1856,7 +1854,7 @@ export class ChargingStation extends EventEmitter {
       this.emit(ChargingStationEvents.updated)
     } else {
       logger.warn(
-        `${this.logPrefix()} Connection to OCPP server through ${this.wsConnectionUrl.toString()} failed`
+        `${this.logPrefix()} Connection to OCPP server through ${this.wsConnectionUrl.href} failed`
       )
     }
   }
diff --git a/src/types/ChargingStationWorker.ts b/src/types/ChargingStationWorker.ts
index df4a789c..d0cdf900 100644
--- a/src/types/ChargingStationWorker.ts
+++ b/src/types/ChargingStationWorker.ts
@@ -31,6 +31,7 @@ export interface ChargingStationData extends WorkerData {
   connectors: ConnectorStatus[]
   evses: EvseStatusWorkerType[]
   ocppConfiguration: ChargingStationOcppConfiguration
+  supervisionUrl: string
   wsState?:
   | typeof WebSocket.CONNECTING
   | typeof WebSocket.OPEN
diff --git a/src/utils/MessageChannelUtils.ts b/src/utils/MessageChannelUtils.ts
index 212ed5f2..a3b267ee 100644
--- a/src/utils/MessageChannelUtils.ts
+++ b/src/utils/MessageChannelUtils.ts
@@ -68,6 +68,7 @@ export const buildChargingStationDataPayload = (
     evses: buildEvsesStatus(chargingStation, OutputFormat.worker),
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     ocppConfiguration: chargingStation.ocppConfiguration!,
+    supervisionUrl: chargingStation.wsConnectionUrl.href,
     wsState: chargingStation.wsConnection?.readyState,
     bootNotificationResponse: chargingStation.bootNotificationResponse,
     ...(chargingStation.automaticTransactionGenerator != null && {
diff --git a/ui/web/src/App.vue b/ui/web/src/App.vue
index d6df1a21..87c7aa45 100644
--- a/ui/web/src/App.vue
+++ b/ui/web/src/App.vue
@@ -4,8 +4,8 @@
 
 <style>
 #app {
-  height: 100%;
-  width: 100%;
+  height: fit-content;
+  width: fit-content;
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -13,10 +13,10 @@
 }
 
 body {
-  margin: 0;
-  padding: 0;
-  height: 100vh;
-  width: 100vw;
+  height: fit-content;
+  width: fit-content;
+  margin: 0.05%;
+  padding: 0.05%;
   background-color: rgb(233, 227, 227);
 }
 </style>
diff --git a/ui/web/src/components/Container.vue b/ui/web/src/components/Container.vue
index c9683bbe..451a7659 100644
--- a/ui/web/src/components/Container.vue
+++ b/ui/web/src/components/Container.vue
@@ -6,9 +6,6 @@
 
 <style>
 .container {
-  display: flex;
-  box-sizing: border-box;
-  max-height: 100%;
-  max-width: 100%;
+  flex: auto;
 }
 </style>
diff --git a/ui/web/src/components/charging-stations/CSConnector.vue b/ui/web/src/components/charging-stations/CSConnector.vue
index d828ae86..29bb0718 100644
--- a/ui/web/src/components/charging-stations/CSConnector.vue
+++ b/ui/web/src/components/charging-stations/CSConnector.vue
@@ -1,5 +1,5 @@
 <template>
-  <td class="cs-table__action-col">
+  <td class="cs-table__column">
     <Button @click="startChargingStation()">Start Charging Station</Button>
     <Button @click="stopChargingStation()">Stop Charging Station</Button>
     <Button @click="openConnection()">Open Connection</Button>
@@ -17,9 +17,9 @@
     <Button @click="startAutomaticTransactionGenerator()">Start ATG</Button>
     <Button @click="stopAutomaticTransactionGenerator()">Stop ATG</Button>
   </td>
-  <td class="cs-table__connector-col">{{ connectorId }}</td>
-  <td class="cs-table__status-col">{{ connector.status }}</td>
-  <td class="cs-table__transaction-col">{{ connector.transactionStarted ? 'Yes' : 'No' }}</td>
+  <td class="cs-table__column">{{ connectorId }}</td>
+  <td class="cs-table__column">{{ connector.status ?? 'Ø' }}</td>
+  <td class="cs-table__column">{{ connector.transactionStarted === true ? 'Yes' : 'No' }}</td>
 </template>
 
 <script setup lang="ts">
diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index 1b740f75..befdbb4b 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -7,14 +7,15 @@
       :transaction-id="connector.transactionId"
       :id-tag="props.idTag"
     />
-    <td class="cs-table__name-col">{{ getId() }}</td>
-    <td class="cs-table__started-col">{{ getStarted() }}</td>
-    <td class="cs-table__wsState-col">{{ getWsState() }}</td>
-    <td class="cs-table__registration-status-col">{{ getRegistrationStatus() }}</td>
-    <td class="cs-table__template-col">{{ getInfo().templateName }}</td>
-    <td class="cs-table__vendor-col">{{ getVendor() }}</td>
-    <td class="cs-table__model-col">{{ getModel() }}</td>
-    <td class="cs-table__firmware-col">{{ getFirmwareVersion() }}</td>
+    <td class="cs-table__column">{{ getId() }}</td>
+    <td class="cs-table__column">{{ getStarted() }}</td>
+    <td class="cs-table__column">{{ getSupervisionUrl() }}</td>
+    <td class="cs-table__column">{{ getWsState() }}</td>
+    <td class="cs-table__column">{{ getRegistrationStatus() }}</td>
+    <td class="cs-table__column">{{ getInfo().templateName }}</td>
+    <td class="cs-table__column">{{ getVendor() }}</td>
+    <td class="cs-table__column">{{ getModel() }}</td>
+    <td class="cs-table__column">{{ getFirmwareVersion() }}</td>
   </tr>
 </template>
 
@@ -22,7 +23,6 @@
 // import { reactive } from 'vue'
 import CSConnector from './CSConnector.vue'
 import type { ChargingStationData, ChargingStationInfo, ConnectorStatus } from '@/types'
-import { ifUndefined } from '@/composables/Utils'
 
 const props = defineProps<{
   chargingStation: ChargingStationData
@@ -60,7 +60,7 @@ function getHashId(): string {
   return getInfo().hashId
 }
 function getId(): string {
-  return ifUndefined<string>(getInfo().chargingStationId, 'Ø')
+  return getInfo().chargingStationId ?? 'Ø'
 }
 function getModel(): string {
   return getInfo().chargePointModel
@@ -69,11 +69,15 @@ function getVendor(): string {
   return getInfo().chargePointVendor
 }
 function getFirmwareVersion(): string {
-  return ifUndefined<string>(getInfo().firmwareVersion, 'Ø')
+  return getInfo().firmwareVersion ?? 'Ø'
 }
 function getStarted(): string {
   return props.chargingStation.started === true ? 'Yes' : 'No'
 }
+function getSupervisionUrl(): string {
+  const supervisionUrl = new URL(props.chargingStation.supervisionUrl)
+  return `${supervisionUrl.protocol}//${supervisionUrl.host.split('.').join('.\u200b')}`
+}
 function getWsState(): string {
   switch (props.chargingStation?.wsState) {
     case WebSocket.CONNECTING:
diff --git a/ui/web/src/components/charging-stations/CSInfoModal.vue b/ui/web/src/components/charging-stations/CSInfoModal.vue
index 8afb2de1..05b4b6bd 100644
--- a/ui/web/src/components/charging-stations/CSInfoModal.vue
+++ b/ui/web/src/components/charging-stations/CSInfoModal.vue
@@ -17,6 +17,5 @@ const props = defineProps<{
 <style>
 .card-info {
   background-color: white;
-  padding: 0.2%;
 }
 </style>
diff --git a/ui/web/src/components/charging-stations/CSTable.vue b/ui/web/src/components/charging-stations/CSTable.vue
index 11dfb5bb..6fcf7468 100644
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -5,18 +5,19 @@
     </caption>
     <thead id="cs-table__head">
       <tr class="cs-table__row">
-        <th scope="col" class="cs-table__action-col">Action</th>
-        <th scope="col" class="cs-table__connector-col">Connector</th>
-        <th scope="col" class="cs-table__status-col">Status</th>
-        <th scope="col" class="cs-table__transaction-col">Transaction</th>
-        <th scope="col" class="cs-table__name-col">Name</th>
-        <th scope="col" class="cs-table__started-col">Started</th>
-        <th scope="col" class="cs-table__wsState-col">WebSocket State</th>
-        <th scope="col" class="cs-table__registration-status-col">Registration Status</th>
-        <th scope="col" class="cs-table__template-col">Template</th>
-        <th scope="col" class="cs-table__vendor-col">Vendor</th>
-        <th scope="col" class="cs-table__model-col">Model</th>
-        <th scope="col" class="cs-table__firmware-col">Firmware Version</th>
+        <th scope="col" class="cs-table__column">Action</th>
+        <th scope="col" class="cs-table__column">Connector</th>
+        <th scope="col" class="cs-table__column">Status</th>
+        <th scope="col" class="cs-table__column">Transaction</th>
+        <th scope="col" class="cs-table__column">Name</th>
+        <th scope="col" class="cs-table__column">Started</th>
+        <th scope="col" class="cs-table__column">Supervision Url</th>
+        <th scope="col" class="cs-table__column">WebSocket State</th>
+        <th scope="col" class="cs-table__column">Registration Status</th>
+        <th scope="col" class="cs-table__column">Template</th>
+        <th scope="col" class="cs-table__column">Vendor</th>
+        <th scope="col" class="cs-table__column">Model</th>
+        <th scope="col" class="cs-table__column">Firmware Version</th>
       </tr>
     </thead>
     <tbody id="cs-table__body">
@@ -42,11 +43,10 @@ const props = defineProps<{
 
 <style>
 #cs-table {
-  height: 100%;
+  height: fit-content;
   width: 100%;
   background-color: white;
   display: flex;
-  flex-grow: 1;
   flex-direction: column;
   overflow: auto hidden;
   border-collapse: collapse;
@@ -57,16 +57,16 @@ const props = defineProps<{
 #cs-table__body {
   height: fit-content;
   width: 100%;
-  min-width: 100%;
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
 
 #cs-table__body {
   overflow: visible overlay;
-  flex-grow: 1;
 }
 
 .cs-table__row {
+  height: fit-content;
   width: 100%;
   display: flex;
   justify-content: center;
@@ -81,22 +81,9 @@ const props = defineProps<{
   background-color: rgb(223, 217, 217);
 }
 
-.cs-table__action-col,
-.cs-table__connector-col,
-.cs-table__status-col,
-.cs-table__transaction-col,
-.cs-table__name-col,
-.cs-table__started-col,
-.cs-table__wsState-col,
-.cs-table__registration-status-col,
-.cs-table__template-col,
-.cs-table__model-col,
-.cs-table__vendor-col,
-.cs-table__firmware-col {
-  height: 0.1%;
-  width: 20%;
-  padding-top: 0.2%;
-  padding-bottom: 0.2%;
+.cs-table__column {
+  height: fit-content;
+  width: calc(100% / 13);
   text-align: center;
 }
 </style>
diff --git a/ui/web/src/composables/Utils.ts b/ui/web/src/composables/Utils.ts
index a9eb33b3..2f9c1ac5 100644
--- a/ui/web/src/composables/Utils.ts
+++ b/ui/web/src/composables/Utils.ts
@@ -1,8 +1,3 @@
-export const ifUndefined = <T>(value: T | undefined, isValue: T): T => {
-  if (value === undefined) return isValue
-  return value as T
-}
-
 // 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/types/ChargingStationType.ts b/ui/web/src/types/ChargingStationType.ts
index 7e8457a9..276e9dd9 100644
--- a/ui/web/src/types/ChargingStationType.ts
+++ b/ui/web/src/types/ChargingStationType.ts
@@ -6,6 +6,7 @@ export type ChargingStationData = {
   connectors: ConnectorStatus[]
   evses: EvseStatus[]
   ocppConfiguration: ChargingStationOcppConfiguration
+  supervisionUrl: string
   wsState?:
     | typeof WebSocket.CONNECTING
     | typeof WebSocket.OPEN
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 4e4772ec..f500591a 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -61,9 +61,8 @@ function stopSimulator(): void {
 
 <style>
 #charging-stations {
-  height: 100%;
+  height: fit-content;
   width: 100%;
-  padding: 0.5%;
   background-color: rgb(233, 227, 227);
   display: flex;
   flex-direction: column;
@@ -96,5 +95,6 @@ function stopSimulator(): void {
 
 #idtag-field {
   flex: auto;
+  text-align: center;
 }
 </style>
diff --git a/ui/web/tests/unit/CSTable.spec.ts b/ui/web/tests/unit/CSTable.spec.ts
index d2738748..a756a6e5 100644
--- a/ui/web/tests/unit/CSTable.spec.ts
+++ b/ui/web/tests/unit/CSTable.spec.ts
@@ -14,6 +14,7 @@ test('renders CS table columns name', () => {
   expect(wrapper.text()).to.include('Transaction')
   expect(wrapper.text()).to.include('Name')
   expect(wrapper.text()).to.include('Started')
+  expect(wrapper.text()).to.include('Supervision Url')
   expect(wrapper.text()).to.include('WebSocket State')
   expect(wrapper.text()).to.include('Registration Status')
   expect(wrapper.text()).to.include('Template')
-- 
2.34.1