Add version and commit to UI during production build

This sets the version in the Framework7 parameters to the build version during production build,
and adds the commit hash to the Vuex store.

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>

bundles/org.openhab.ui/pom.xml

@@ -67,7 +67,7 @@
               <goal>npm</goal>
             </goals>
             <configuration>
-              <arguments>run build-prod</arguments>
+              <arguments>run build-prod ${project.version}</arguments>
             </configuration>
           </execution>
         </executions>

bundles/org.openhab.ui/web/build/build.js

@@ -1,16 +1,37 @@
+const util = require('node:util');
+const exec = util.promisify(require('node:child_process').exec);
+
 const webpack = require('webpack');
 const ora = require('ora');
 const rm = require('rimraf').rimraf;
 const chalk = require('chalk');
+const replaceInFile = require('replace-in-file')
+
 const config = require('./webpack.config.js');
 
 const env = process.env.NODE_ENV || 'development';
 const target = process.env.TARGET || 'web';
+let version = process.argv[2];
+if (version.endsWith('SNAPSHOT')) version += '-' + new Date().toISOString().slice(0, 16).replaceAll(/[T:-]/g, "");
 
 const spinner = ora(env === 'production' ? chalk.cyan('Building for production...') : chalk.cyan('Building development version...'));
 spinner.start();
 
-rm('./www/').then(() => {
+exec('git rev-parse --short HEAD').then((result) => {
+  return Promise.resolve(result.stdout.trim());
+}).then((commit) => {
+  const versionReplace = {
+    files: './src/components/app.vue',
+    from: /%VERSION%/g,
+    to: version
+  }
+  const commitReplace = {
+    files: './src/js/store/index.js',
+    from: /%GIT_COMMIT_HASH%/g,
+    to: commit || 'unknown'
+  }
+  return Promise.all([rm('./www/'), replaceInFile(versionReplace), replaceInFile(commitReplace)]);
+}).then(() => {
   webpack(config, (err, stats) => {
     if (err) throw err;
     spinner.stop();

bundles/org.openhab.ui/web/package.json

@@ -149,6 +149,7 @@
     "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^10.0.0",
     "process": "^0.11.10",
+    "replace-in-file": "^7.2.0",
     "rimraf": "^6.0.1",
     "standard": "^17.1.0",
     "style-loader": "^4.0.0",

bundles/org.openhab.ui/web/src/components/app.vue

@@ -297,7 +297,7 @@ export default {
       f7params: {
         id: 'org.openhab.ui', // App bundle ID
         name: 'openHAB', // App name
-        version: '3.0.0', // App version, TODO retrieve from the server (with the build information)
+        version: '%VERSION%', // App version, replaced during production build
         theme: theme || 'auto',
         // theme: (document.documentURI && document.documentURI.indexOf('?theme=ios') > 0) ? 'ios'
         //   : (document.documentURI && document.documentURI.indexOf('?theme=md') > 0) ? 'md'

bundles/org.openhab.ui/web/src/js/store/index.js

@@ -26,6 +26,9 @@ const store = new Vuex.Store({
     apiEndpoints: null,
     locale: null,
     runtimeInfo: null,
+    uiInfo: {
+      commit: '%GIT_COMMIT_HASH%' // replaced during production build
+    },
     websiteUrl: null,
     developerDock: false,
     pagePath: null

bundles/org.openhab.ui/web/src/pages/about.vue

@@ -12,8 +12,12 @@
           <f7-block>
             <img src="../res/icons/favicon.svg" type="image/svg+xml" width="96" class="padding float-right">
             <h2 v-if="$store.state.runtimeInfo" class="block-title-medium">
-              openHAB {{ $store.state.runtimeInfo.version }}<br><small>{{ $store.state.runtimeInfo.buildString }}</small>
+              openHAB {{ $store.state.runtimeInfo.version }}<br>
+              <small>{{ $store.state.runtimeInfo.buildString }}</small>
             </h2>
+            <p v-if="$store.state.uiInfo.commit !== '%GIT_COMMIT_HASH%'">
+              Main UI Commit {{ $store.state.uiInfo.commit }}
+            </p>
             <p><f7-link external target="_blank" href="https://www.openhab.org/" v-t="'about.homePage'" /></p>
             <p><f7-link external target="_blank" href="https://www.openhab.org/docs/" v-t="'about.documentation'" /></p>
             <p><f7-link external target="_blank" href="https://community.openhab.org/" v-t="'about.communityForum'" /></p>