Showing the application version in the status page

Author: Marc-Antoine Hinse

packages/status-screen/src/StatusScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, FC, useState } from 'react';
 import './global.css';
 import './StatusScreen.css';
-import { findCollection, retrieveTenantId } from './utils/setupConfiguration';
+import { findCollection, getVersionName, retrieveTenantId } from './utils/setupConfiguration';
 import { SplunkCollectionItem } from './models/splunk';
 import Button from './components/Button';
 
@@ -21,28 +21,32 @@ interface StatusItem {
 }
 
 const StatusScreen: FC<{ theme: string }> = ({ theme }) => {
+    const [versionName, setVersionName] = useState<string>('unknown');
     const [statusItems, setStatusItem] = useState<StatusItem[]>([]);
     const [isShowingAllItems, setShowingAllItems] = useState<boolean>(false);
 
     useEffect(() => {
-        Promise.all([retrieveTenantId(), findCollection()]).then(([id, splunkCollectionItems]) => {
-            const items: StatusItem[] = [];
-            items.push({
-                key: StatusItemKeys.CURRENT_TENANT_ID,
-                name: getItemName(StatusItemKeys.CURRENT_TENANT_ID),
-                value: `${id}`,
-            });
-            splunkCollectionItems.forEach((item) => {
+        Promise.all([retrieveTenantId(), findCollection(), getVersionName()]).then(
+            ([id, splunkCollectionItems, version]) => {
+                const items: StatusItem[] = [];
                 items.push({
-                    key: item.key.startsWith(COLLECTION_KEYS_NEXT_PREFIX)
-                        ? StatusItemKeys.NEXT_TOKEN
-                        : (item.key as StatusItemKeys),
-                    name: getItemName(item.key),
-                    value: formatValue(item),
+                    key: StatusItemKeys.CURRENT_TENANT_ID,
+                    name: getItemName(StatusItemKeys.CURRENT_TENANT_ID),
+                    value: `${id}`,
                 });
-            });
-            setStatusItem(items);
-        });
+                splunkCollectionItems.forEach((item) => {
+                    items.push({
+                        key: item.key.startsWith(COLLECTION_KEYS_NEXT_PREFIX)
+                            ? StatusItemKeys.NEXT_TOKEN
+                            : (item.key as StatusItemKeys),
+                        name: getItemName(item.key),
+                        value: formatValue(item),
+                    });
+                });
+                setStatusItem(items);
+                setVersionName(version);
+            }
+        );
     }, []);
 
     useEffect(() => {
@@ -101,7 +105,10 @@ const StatusScreen: FC<{ theme: string }> = ({ theme }) => {
         <div id="container" className={theme === 'dark' ? 'dark' : ''}>
             <div id="experimental">This is an experimental release</div>
             <div className="content">
-                <h2>Status</h2>
+                <div>
+                    <h2>Status</h2>
+                    <small>{`Version: ${versionName}`}</small>
+                </div>
                 <div id="status-list">
                     {getItems().map((item) => {
                         return (

packages/status-screen/src/global.css

@@ -102,7 +102,6 @@ h2 {
 h5 {
     font-size: 1rem;
     color: var(--text-color);
-    margin-top: 8px;
     text-align: start;
     font-weight: normal;
 }

packages/status-screen/src/utils/configurationFileHelper.ts

@@ -164,3 +164,29 @@ export async function getCurrentIndexName(service: SplunkService): Promise<strin
 
     return currentIndex;
 }
+
+export async function getVersion(service: SplunkService): Promise<string> {
+    // Retrieve the accessor used to get a configuration file
+    let configurations = service.configurations({
+        // Name space information not provided
+    });
+    configurations = await promisify(configurations.fetch)();
+
+    // Retrieves the configuration file accessor
+    let configurationFileAccessor = getConfigurationFile(configurations, 'app');
+    configurationFileAccessor = await promisify(configurationFileAccessor.fetch)();
+
+    // Retrieves the configuration stanza accessor
+    let configurationStanzaAccessor = getConfigurationFileStanza(
+        configurationFileAccessor,
+        'launcher'
+    );
+    configurationStanzaAccessor = await promisify(configurationStanzaAccessor.fetch)();
+
+    let versionName = 'unknown';
+    if ('version' in configurationStanzaAccessor._properties) {
+        versionName = configurationStanzaAccessor._properties.version;
+    }
+
+    return versionName;
+}

packages/status-screen/src/utils/setupConfiguration.ts

@@ -1,4 +1,8 @@
-import { updateConfigurationFile, getCurrentIndexName } from './configurationFileHelper';
+import {
+    updateConfigurationFile,
+    getCurrentIndexName,
+    getVersion,
+} from './configurationFileHelper';
 import { Tenant } from '../models/flare';
 import {
     PasswordKeys,
@@ -51,6 +55,11 @@ async function getFlareDataUrl(): Promise<string> {
     return `/app/${appName}/search?q=search%20index%3D"${indexName}"%20source%3D"flare"`;
 }
 
+async function getVersionName(): Promise<string> {
+    const service = createService(applicationNameSpace);
+    return getVersion(service);
+}
+
 function redirectToHomepage(): void {
     window.location.href = getRedirectUrl();
 }
@@ -197,4 +206,5 @@ export {
     getRedirectUrl,
     getFlareDataUrl,
     findCollection,
+    getVersionName,
 };