Add support for displaying component versions in the headers.

Kami · Kami · commit 1da5c9e50e87 · 2021-04-04T20:27:55.000+02:00
It defaults to false and it can be enabled via config option.
diff --git a/config.js b/config.js
@@ -22,7 +22,10 @@ angular.module('main')
     // history details widget. Keep in mind that anything above 200-500 KB will take a long time to
     // render and likely freeze the browser window for deeply nested JSON object results.
     // Value is in bytes.
-    // max_execution_result_size_for_render: 200 * 1024;
+    // max_execution_result_size_for_render: 200 * 1024,
+    //
+    // Set to true to display StackStorm and st2web version in the header
+    //show_version_in_header: false;
 
     // hosts: [
     //   {
diff --git a/index.html b/index.html
@@ -19,12 +19,18 @@
             throw new Error('The st2web angular-config-polyfill only supports the "main" module.');
           }
 
-          if (constant !== 'st2Config') {
-            throw new Error('The st2web angular-config-polyfill only supports the "st2Config" constant.');
+          if (constant !== 'st2Config' && constant !== 'st2PackageMeta') {
+            throw new Error('The st2web angular-config-polyfill only supports the "st2Config" and "st2PackageMeta" constant.');
           }
 
           window.st2constants = window.st2constants || {};
-          window.st2constants.st2Config = value;
+
+          if (constant === 'st2Config') {
+            window.st2constants.st2Config = value;
+          }
+          else if (constant === 'st2PackageMeta') {
+            window.st2constants.st2PackageMeta = value;
+          }
         },
         run: (fn) => {
           if (module !== 'main') {
@@ -33,6 +39,7 @@
 
           window.st2constants = window.st2constants || {};
           window.st2constants.st2Config = window.st2constants.st2Config || {};
+          window.st2constants.st2PackageMeta = window.st2constants.st2PackageMeta || {};
 
           fn(window.st2constants.st2Config);
         },
@@ -44,6 +51,7 @@
 <body>
   <div class="wrapper" id="container"></div>
   <script src="config.js"></script>
+  <script src="package.meta.js"></script>
   <script src="js/main.js"></script>
 </body>
 
diff --git a/modules/st2-menu/menu.component.js b/modules/st2-menu/menu.component.js
@@ -73,7 +73,7 @@ export default class Menu extends React.Component {
 
   render() {
     const { className, location, routes: allRoutes, style, ...props } = this.props;
-    
+
     const routes = _(allRoutes)
       .filter((e) => !!e.icon)
       .sortBy((e) => e.position)
@@ -82,10 +82,13 @@ export default class Menu extends React.Component {
 
     const user = api.token && api.token.user;
     const server = api.server;
+    const showVersion = window.st2constants.st2Config.show_version_in_header || false;
+    const hasPackageMeta = (window.st2constants.st2PackageMeta !== undefined);
+    const st2webCommitsUrl = (showVersion && hasPackageMeta) ? "https://github.com/StackStorm/st2web/commit/" + window.st2constants.st2PackageMeta.git_sha : ""
 
     return (
       <header {...props} className={cx(style.component, className)}>
-        <a href="#" className={style.logo} />
+        <a href="#" className={style.logo} /> { (showVersion && hasPackageMeta) ? <span style={{ fontSize: 15, marginTop: 30 }}>st2: v{window.st2constants.st2PackageMeta.version}, st2web: <a href={st2webCommitsUrl} target="_blank">{window.st2constants.st2PackageMeta.git_sha}</a></span> : '' }
 
         <div className={style.spacer} />
 
diff --git a/tasks/production/package-metadata.js b/tasks/production/package-metadata.js
@@ -25,13 +25,17 @@ gulp.task('production-package-metadata', (done) => {
 
   const result = child_process.spawnSync('git', [ 'rev-parse', '--short', 'HEAD' ]);
   const git_sha = result.stdout.toString().trim();
-
   const pkg_version = require(path.resolve('./package.json')).st2_version;
 
-  const data = `[st2web]\nversion = ${pkg_version}\ngit_sha = ${git_sha}\ncircle_build_url = ${circle_build_url}\n`;
+  // Write it to ini style file
+  const data_1 = `[st2web]\nversion = ${pkg_version}\ngit_sha = ${git_sha}\ncircle_build_url = ${circle_build_url}\n`;
+  const file_path_1 = path.join(path.resolve('./build'), 'package.meta');
+  fs.writeFileSync(file_path_1, data_1);
 
-  const file_path = path.join(path.resolve('./build'), 'package.meta');
+  // Write it to .js file
+  const data_2 = `angular.module('main').constant('st2PackageMeta', { version: "${pkg_version}", git_sha: "${git_sha}"});\n`
+  const file_path_2 = path.join(path.resolve('./build'), 'package.meta.js');
+  fs.writeFileSync(file_path_2, data_2);
 
-  fs.writeFileSync(file_path, data);
   done();
 });
