From b71f13ec003a11d132eb61bd69c43076e32064c6 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 29 May 2026 12:36:12 +0800
Subject: [PATCH 1/3] include licensed endpoint details

---
 .../configuration/PlatformLicense.vue         | 59 ++++++++++++++++++-
 1 file changed, 57 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/src/components/configuration/PlatformLicense.vue b/src/Frontend/src/components/configuration/PlatformLicense.vue
index bdfbf09424..b5155ce9b9 100644
--- a/src/Frontend/src/components/configuration/PlatformLicense.vue
+++ b/src/Frontend/src/components/configuration/PlatformLicense.vue
@@ -9,6 +9,8 @@ import { useConfigurationStore } from "@/stores/ConfigurationStore";
 import { storeToRefs } from "pinia";
 import { useLicenseStore } from "@/stores/LicenseStore";
 import LoadingSpinner from "../LoadingSpinner.vue";
+import ColumnHeader from "../ColumnHeader.vue";
+import DataView from "../DataView.vue";
 
 const configurationStore = useConfigurationStore();
 const { configuration } = storeToRefs(configurationStore);
@@ -23,6 +25,7 @@ const { licenseStatus, license } = licenseStore;
       <section>
         <LoadingSpinner v-if="loading" />
         <template v-else>
+          <h3 class="mt-2">License Details</h3>
           <div class="box">
             <div class="row">
               <div class="license-info">
@@ -100,7 +103,6 @@ const { licenseStatus, license } = licenseStore;
                     <a href="https://docs.particular.net/servicecontrol/license" target="_blank">Install or update a ServiceControl license</a>
                   </li>
                 </ul>
-
                 <div class="need-help">
                   Need help?
                   <a href="https://particular.net/contactus">Contact us <FAIcon :icon="faExternalLink" /></a>
@@ -109,6 +111,44 @@ const { licenseStatus, license } = licenseStore;
             </div>
           </div>
         </template>
+
+        <h3 class="mt-4">Licensed Endpoints</h3>
+        <div class="licensed-endpoints col-4">
+          <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
+            <ColumnHeader name="Size" label="Size" class="col-6" />
+            <ColumnHeader name="Quantity" label="Quantity" class="col-6" />
+          </div>
+          <DataView
+            :data="[
+              { size: 'LE1024', quantity: 7 },
+              { size: 'LE1024K', quantity: 5 },
+              { size: 'LE1024M', quantity: 2 },
+              { size: 'LE16K', quantity: 5 },
+              { size: 'LE16M', quantity: 9 },
+              { size: 'LE256', quantity: 10 },
+              { size: 'LE256K', quantity: 2 },
+              { size: 'LE256M', quantity: 7 },
+              { size: 'LE4K', quantity: 13 },
+              { size: 'LE4M', quantity: 6 },
+              { size: 'LE64', quantity: 7 },
+              { size: 'LE64M', quantity: 12 },
+              { size: 'LEU', quantity: 1 },
+            ]"
+          >
+            <template #data="{ pageData }">
+              <div role="rowgroup" aria-label="endpoints">
+                <div role="row" class="row grid-row" v-for="endpoint in pageData" :key="endpoint.size">
+                  <span class="col-6">
+                    {{ endpoint.size }}
+                  </span>
+                  <span class="col-6">
+                    {{ endpoint.quantity }}
+                  </span>
+                </div>
+              </div>
+            </template>
+          </DataView>
+        </div>
       </section>
     </ServiceControlAvailable>
   </section>
@@ -117,7 +157,6 @@ const { licenseStatus, license } = licenseStore;
 <style scoped>
 .license-info {
   font-size: 16px;
-  padding: 2em;
   line-height: 3em;
 }
 
@@ -130,4 +169,20 @@ const { licenseStatus, license } = licenseStore;
   padding-top: 20px;
   border-top: 2px solid #f2f2f2;
 }
+
+.licensed-endpoints {
+  padding: 20px;
+}
+
+.licensed-endpoints .grid-row {
+  border-top: 1px solid #eee;
+  border-right: 1px solid #fff;
+  border-bottom: 1px solid #eee;
+  border-left: 1px solid #fff;
+  background-color: #fff;
+}
+
+.licensed-endpoints span {
+  padding: 10px;
+}
 </style>

From 9bf8843d9f362a699ff6d0bd7b1197e513360b99 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Wed, 3 Jun 2026 10:26:58 +0800
Subject: [PATCH 2/3] use actual licensed endpoint data from ServiceControl

---
 .../configuration/PlatformLicense.vue         | 58 +++++++------------
 src/Frontend/src/resources/LicenseInfo.ts     |  6 ++
 src/Frontend/src/stores/LicenseStore.ts       |  2 +
 3 files changed, 30 insertions(+), 36 deletions(-)

diff --git a/src/Frontend/src/components/configuration/PlatformLicense.vue b/src/Frontend/src/components/configuration/PlatformLicense.vue
index b5155ce9b9..c6c26aeea0 100644
--- a/src/Frontend/src/components/configuration/PlatformLicense.vue
+++ b/src/Frontend/src/components/configuration/PlatformLicense.vue
@@ -112,43 +112,29 @@ const { licenseStatus, license } = licenseStore;
           </div>
         </template>
 
-        <h3 class="mt-4">Licensed Endpoints</h3>
-        <div class="licensed-endpoints col-4">
-          <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
-            <ColumnHeader name="Size" label="Size" class="col-6" />
-            <ColumnHeader name="Quantity" label="Quantity" class="col-6" />
-          </div>
-          <DataView
-            :data="[
-              { size: 'LE1024', quantity: 7 },
-              { size: 'LE1024K', quantity: 5 },
-              { size: 'LE1024M', quantity: 2 },
-              { size: 'LE16K', quantity: 5 },
-              { size: 'LE16M', quantity: 9 },
-              { size: 'LE256', quantity: 10 },
-              { size: 'LE256K', quantity: 2 },
-              { size: 'LE256M', quantity: 7 },
-              { size: 'LE4K', quantity: 13 },
-              { size: 'LE4M', quantity: 6 },
-              { size: 'LE64', quantity: 7 },
-              { size: 'LE64M', quantity: 12 },
-              { size: 'LEU', quantity: 1 },
-            ]"
-          >
-            <template #data="{ pageData }">
-              <div role="rowgroup" aria-label="endpoints">
-                <div role="row" class="row grid-row" v-for="endpoint in pageData" :key="endpoint.size">
-                  <span class="col-6">
-                    {{ endpoint.size }}
-                  </span>
-                  <span class="col-6">
-                    {{ endpoint.quantity }}
-                  </span>
+        <template v-if="license.products?.length">
+          <h3 class="mt-4">Licensed Endpoints</h3>
+          <div class="licensed-endpoints col-4">
+            <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
+              <ColumnHeader name="Size" label="Size (Average Messages/Month)" class="col-6" />
+              <ColumnHeader name="Quantity" label="Quantity" class="col-6" />
+            </div>
+            <DataView :data="license.products">
+              <template #data="{ pageData }">
+                <div role="rowgroup" aria-label="endpoints">
+                  <div role="row" class="row grid-row" v-for="endpoint in pageData" :key="endpoint.size">
+                    <span class="col-6">
+                      {{ endpoint.size }}
+                    </span>
+                    <span class="col-6">
+                      {{ endpoint.quantity }}
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </template>
-          </DataView>
-        </div>
+              </template>
+            </DataView>
+          </div>
+        </template>
       </section>
     </ServiceControlAvailable>
   </section>
diff --git a/src/Frontend/src/resources/LicenseInfo.ts b/src/Frontend/src/resources/LicenseInfo.ts
index 726c53963b..afe614a847 100644
--- a/src/Frontend/src/resources/LicenseInfo.ts
+++ b/src/Frontend/src/resources/LicenseInfo.ts
@@ -1,5 +1,10 @@
 import type Configuration from "./Configuration";
 
+export interface LicensedProduct {
+  size: string;
+  quantity: number;
+}
+
 export default interface LicenseInfo {
   registered_to: string;
   edition: string;
@@ -11,6 +16,7 @@ export default interface LicenseInfo {
   license_status: LicenseStatus;
   license_extension_url?: string;
   status: string;
+  products: LicensedProduct[];
 }
 
 export function typeText(license: LicenseInfo, configuration: Configuration | null) {
diff --git a/src/Frontend/src/stores/LicenseStore.ts b/src/Frontend/src/stores/LicenseStore.ts
index ea0cab1ebf..0a784e7064 100644
--- a/src/Frontend/src/stores/LicenseStore.ts
+++ b/src/Frontend/src/stores/LicenseStore.ts
@@ -18,6 +18,7 @@ export const useLicenseStore = defineStore("LicenseStore", () => {
     status: "",
     license_status: LicenseStatus.Unavailable,
     license_extension_url: "",
+    products: [],
   });
 
   const licenseStatus = reactive({
@@ -72,6 +73,7 @@ export const useLicenseStore = defineStore("LicenseStore", () => {
       license.instance_name = lic.instance_name;
       license.registered_to = lic.registered_to;
       license.status = lic.status;
+      license.products = lic.products;
       license.license_extension_url = lic.license_extension_url ?? "https://particular.net/extend-your-trial?p=servicepulse";
       license.upgrade_protection_expiration = lic.upgrade_protection_expiration;
 

From f3e0ba299f0e947708657118a5a3c293f3c1de9d Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Thu, 11 Jun 2026 10:47:38 +0800
Subject: [PATCH 3/3] update field name to reflect updated API contract

---
 src/Frontend/src/components/configuration/PlatformLicense.vue | 4 ++--
 src/Frontend/src/resources/LicenseInfo.ts                     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Frontend/src/components/configuration/PlatformLicense.vue b/src/Frontend/src/components/configuration/PlatformLicense.vue
index c6c26aeea0..6ff30fb838 100644
--- a/src/Frontend/src/components/configuration/PlatformLicense.vue
+++ b/src/Frontend/src/components/configuration/PlatformLicense.vue
@@ -122,9 +122,9 @@ const { licenseStatus, license } = licenseStore;
             <DataView :data="license.products">
               <template #data="{ pageData }">
                 <div role="rowgroup" aria-label="endpoints">
-                  <div role="row" class="row grid-row" v-for="endpoint in pageData" :key="endpoint.size">
+                  <div role="row" class="row grid-row" v-for="endpoint in pageData" :key="endpoint.name">
                     <span class="col-6">
-                      {{ endpoint.size }}
+                      {{ endpoint.name }}
                     </span>
                     <span class="col-6">
                       {{ endpoint.quantity }}
diff --git a/src/Frontend/src/resources/LicenseInfo.ts b/src/Frontend/src/resources/LicenseInfo.ts
index afe614a847..b75837b069 100644
--- a/src/Frontend/src/resources/LicenseInfo.ts
+++ b/src/Frontend/src/resources/LicenseInfo.ts
@@ -1,7 +1,7 @@
 import type Configuration from "./Configuration";
 
 export interface LicensedProduct {
-  size: string;
+  name: string;
   quantity: number;
 }