Merge pull request #484 from arahmarchak/display-api-versions-in-api-…

…status-table Display API versions of each service on the Home page
astarte-platform · Dec 6, 2024 · 36a9cf7 · 36a9cf7
2 parents 89ca382 + cdaf603
commit 36a9cf7
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 4 deletions.
diff --git a/src/HomePage.tsx b/src/HomePage.tsx
@@ -33,10 +33,15 @@ type ServiceStatus = 'loading' | 'ok' | 'err';
 
 interface ServiceStatusRowProps {
   service: string;
+  version?: string | null;
   status: ServiceStatus;
 }
 
-const ServiceStatusRow = ({ service, status }: ServiceStatusRowProps): React.ReactElement => {
+const ServiceStatusRow = ({
+  service,
+  version,
+  status,
+}: ServiceStatusRowProps): React.ReactElement => {
   let messageCell;
 
   if (status === 'loading') {
@@ -64,23 +69,30 @@ const ServiceStatusRow = ({ service, status }: ServiceStatusRowProps): React.Rea
   return (
     <tr>
       <td>{service}</td>
+      <td>{version}</td>
       {messageCell}
     </tr>
   );
 };
 
 interface ApiStatusCardProps {
   appengine: ServiceStatus;
+  appengineVersion: string | null;
   realmManagement: ServiceStatus;
+  realmManagementVersion: string | null;
   pairing: ServiceStatus;
+  pairingVersion: string | null;
   showFlowStatus: boolean;
   flow: ServiceStatus | null;
 }
 
 const ApiStatusCard = ({
   appengine,
+  appengineVersion,
   realmManagement,
+  realmManagementVersion,
   pairing,
+  pairingVersion,
   showFlowStatus,
   flow,
 }: ApiStatusCardProps): React.ReactElement => (
@@ -91,13 +103,18 @@ const ApiStatusCard = ({
         <thead>
           <tr>
             <th>Service</th>
+            <th>Version</th>
             <th>Status</th>
           </tr>
         </thead>
         <tbody>
-          <ServiceStatusRow service="Realm Management" status={realmManagement} />
-          <ServiceStatusRow service="AppEngine" status={appengine} />
-          <ServiceStatusRow service="Pairing" status={pairing} />
+          <ServiceStatusRow
+            service="Realm Management"
+            version={realmManagementVersion}
+            status={realmManagement}
+          />
+          <ServiceStatusRow service="AppEngine" version={appengineVersion} status={appengine} />
+          <ServiceStatusRow service="Pairing" version={pairingVersion} status={pairing} />
           {showFlowStatus && flow && <ServiceStatusRow service="Flow" status={flow} />}
         </tbody>
       </Table>
@@ -380,8 +397,11 @@ const HomePage = (): React.ReactElement => {
   );
   const triggers = useFetch(canFetchTriggers ? astarte.client.getTriggerNames : async () => []);
   const appEngineHealth = useFetch(astarte.client.getAppengineHealth);
+  const appengineVersion = useFetch(astarte.client.getAppEngineVersion);
   const realmManagementHealth = useFetch(astarte.client.getRealmManagementHealth);
+  const realmManagementVersion = useFetch(astarte.client.getRealmManagementVersion);
   const pairingHealth = useFetch(astarte.client.getPairingHealth);
+  const pairingVersion = useFetch(astarte.client.getPairingVersion);
   const flowHealth = useFetch(config.features.flow ? astarte.client.getFlowHealth : async () => {});
   const deviceRegistrationLimitFetcher = useFetch(
     canFetchDeviceRegistrationLimit && canFetchDeviceStats
@@ -442,8 +462,11 @@ const HomePage = (): React.ReactElement => {
         <Col xs={6} className={cellSpacingClass}>
           <ApiStatusCard
             appengine={appEngineHealth.status}
+            appengineVersion={appengineVersion.value}
             realmManagement={realmManagementHealth.status}
+            realmManagementVersion={realmManagementVersion.value}
             pairing={pairingHealth.status}
+            pairingVersion={pairingVersion.value}
             showFlowStatus={config.features.flow}
             flow={config.features.flow ? flowHealth.status : null}
           />

diff --git a/src/astarte-client/client.ts b/src/astarte-client/client.ts
@@ -195,6 +195,8 @@ class AstarteClient {
     this.getPipelines = this.getPipelines.bind(this);
     this.getPolicyNames = this.getPolicyNames.bind(this);
     this.getRealmManagementVersion = this.getRealmManagementVersion.bind(this);
+    this.getAppEngineVersion = this.getAppEngineVersion.bind(this);
+    this.getPairingVersion = this.getPairingVersion.bind(this);
 
     // prettier-ignore
     this.apiConfig = {
@@ -213,6 +215,7 @@ astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/interfaces/${'interfa
       policy:                astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/policies/${'policyName'}`,
       device:                astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/devices/${'deviceId'}`,
       appengineHealth:       astarteAPIurl`${config.appEngineApiUrl}health`,
+      appengineVersion:      astarteAPIurl`${config.appEngineApiUrl}v1/${'realm'}/version`,
       devicesStats:          astarteAPIurl`${config.appEngineApiUrl}v1/${'realm'}/stats/devices`,
       devices:               astarteAPIurl`${config.appEngineApiUrl}v1/${'realm'}/devices`,
       deviceInfo:            astarteAPIurl`${config.appEngineApiUrl}v1/${'realm'}/devices/${'deviceId'}`,
@@ -223,6 +226,7 @@ astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/interfaces/${'interfa
       phoenixSocket:         astarteAPIurl`${config.appEngineApiUrl}v1/socket`,
       sendInterfaceData:     astarteAPIurl`${config.appEngineApiUrl}v1/${'realm'}/devices/${'deviceId'}/interfaces/${'interfaceName'}${'path'}`,      
       pairingHealth:         astarteAPIurl`${config.pairingApiUrl}health`,
+      pairingVersion:        astarteAPIurl`${config.pairingApiUrl}v1/${'realm'}/version`,
       registerDevice:        astarteAPIurl`${config.pairingApiUrl}v1/${'realm'}/agent/devices`,
       deviceAgent:           astarteAPIurl`${config.pairingApiUrl}v1/${'realm'}/agent/devices/${'deviceId'}`,
       flowHealth:            astarteAPIurl`${config.flowApiUrl}health`,
@@ -741,6 +745,16 @@ astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/interfaces/${'interfa
     return response.data;
   }
 
+  async getAppEngineVersion(): Promise<string> {
+    const response = await this.$get(this.apiConfig.appengineVersion(this.config));
+    return response.data;
+  }
+
+  async getPairingVersion(): Promise<string> {
+    const response = await this.$get(this.apiConfig.pairingVersion(this.config));
+    return response.data;
+  }
+
   private async $get(url: string) {
     return axios({
       method: 'get',