Display version information to web

pkg/app/web/BUILD.bazel

@@ -73,13 +73,27 @@ genrule(
     visibility = ["//visibility:public"],
 )
 
+genrule(
+    name = "embed_version",
+    srcs = ["webpack.config.js", "webpack.common.js"],
+    outs = ["gen_webpack.config.js","gen_webpack.common.js"],
+    cmd = """
+    for f in $(SRCS)
+    do
+        sed -e "s/unknown/$$(cat ./bazel-out/stable-status.txt | grep STABLE_VERSION | awk '{print $$2}')/g" $$f > $(@D)/gen_$$(basename $$f)
+    done
+    """,
+    output_to_bindir = 1,
+    stamp = True,
+)
+
 webpack(
     name = "public_files",
     args = [
         "--mode",
         "production",
         "--config",
-        "$(execpath webpack.config.js)",
+        "$(execpath gen_webpack.config.js)",
         "--env htmlTemplate=./$(execpath base.html)",
         "--env bazelBinPath=./$(BINDIR)",
         "--output-path",
@@ -92,9 +106,10 @@ webpack(
         "base.html",
         "compile",
         "copy_assets",
+        "embed_version",
+        "gen_webpack.config.js",
+        "gen_webpack.common.js",
         "model",
-        "webpack.common.js",
-        "webpack.config.js",
         "public/mockServiceWorker.js",
         "@npm//:node_modules",
     ] + glob(["assets/**/*"]),

pkg/app/web/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "license": "Apache-2.0",
   "scripts": {
-    "dev": "webpack serve --env htmlTemplate=./base.html --config ./webpack.config.dev.js",
+    "dev": "STABLE_VERSION=`git describe --tags --always --dirty --abbrev=7` webpack serve --env htmlTemplate=./base.html --config ./webpack.config.dev.js",
     "gen": "scaffdog generate",
     "test": "TZ=Asia/Tokyo jest --config jest.config.local.js",
     "test:coverage": "yarn test --coverage",

pkg/app/web/src/components/header/index.tsx

@@ -206,11 +206,23 @@ export const Header: FC = memo(function Header() {
             Events
           </Link>
         </MenuItem>
-        <MenuItem>
+        <MenuItem divider={true}>
           <Link component={RouterLink} to={PAGE_PATH_SETTINGS}>
             Settings
           </Link>
         </MenuItem>
+        <MenuItem>
+          <Link
+            href="https://pipecd.dev/docs/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Docs
+          </Link>
+        </MenuItem>
+        <MenuItem disabled={true} dense={true}>
+          {process.env.STABLE_VERSION?.substring(0, 10)}
+        </MenuItem>
       </Menu>
     </AppBar>
   );

pkg/app/web/webpack.config.dev.js

@@ -62,6 +62,9 @@ module.exports = (env) =>
     },
     plugins: [
       new ForkTsCheckerWebpackPlugin(),
-      new webpack.EnvironmentPlugin(["API_ENDPOINT"]),
+      new webpack.EnvironmentPlugin({
+        API_ENDPOINT: process.env.API_ENDPOINT || null,
+        STABLE_VERSION: process.env.STABLE_VERSION || null,
+      }),
     ],
   });

pkg/app/web/webpack.config.js

@@ -1,8 +1,12 @@
 /* eslint @typescript-eslint/no-var-requires: 0 */
 "use strict";
-const commonConfig = require("./webpack.common");
+const commonConfig = require("./gen_webpack.common");
 const { merge } = require("webpack-merge");
 const path = require("path");
+const webpack = require("webpack");
+
+// overridden by bazel
+const version = "unknown";
 
 module.exports = (env) => {
   return merge(commonConfig(env), {
@@ -25,5 +29,10 @@ module.exports = (env) => {
       ],
     },
     mode: "production",
+    plugins: [
+      new webpack.EnvironmentPlugin({
+        STABLE_VERSION: version || null,
+      }),
+    ],
   });
 };