NBISweden · KattisLej · Oct 23, 2024 · Oct 23, 2024 · Nov 26, 2024
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,5 +1,3 @@
----
-version: "3"
 
 services:
 
@@ -33,6 +31,7 @@ services:
     volumes:
       - ./frontend:/home/node/app/
       - exclude:/home/node/app/node_modules
+      - .git:/home/node/app/.git
 
   nginx:
     image: nginx:1.25.1-alpine

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="URDR timelogging"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><meta name="msapplication-TileColor" content="#da532c"><meta name="theme-color" content="#ffffff"><title>Urdr timelogging</title><script defer="defer" src="/./js/webpack-runtime.f17eca79827185016082.js"></script><script defer="defer" src="/./js/commons-index-react-dom.production.min.js.7489cee763cbb2ae09a9.js"></script><script defer="defer" src="/./js/commons-index-react-datepicker.min.js.08d1d997c0191701caa3.js"></script><script defer="defer" src="/./js/commons-index-react-beautiful-dnd.esm.js.c58b2369488b5d8a6936.js"></script><script defer="defer" src="/./js/97.ba514274620892b89b7d.js"></script><script defer="defer" src="/./js/index.54b4d711d7482ad12849.js"></script></head><body><div id="root"></div></body></html>
diff --git a/frontend/src/icons/info-circle-fill.svg b/frontend/src/icons/info-circle-fill.svg
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -470,6 +470,10 @@ Other button classes are defined further down together with other classes for th
   width: 1.7rem;
 }
 
+.info-icon {
+  width: 1.3rem;
+}
+
 .hide-icon {
   width: 2rem;
   margin-top: 0.5rem;

diff --git a/frontend/src/pages/Report.tsx b/frontend/src/pages/Report.tsx
@@ -37,6 +37,7 @@ import warning from "../icons/exclamation-triangle.svg";
 import check from "../icons/check.svg";
 import up from "../icons/caret-up-fill.svg";
 import down from "../icons/caret-down-fill.svg";
+import info from "../icons/info-circle-fill.svg";
 import { BarChart } from "../components/BarChart";
 
 const beforeUnloadHandler = (event) => {
@@ -64,6 +65,8 @@ export const Report = () => {
   const [isLoading, setIsLoading] = useState(false);
   const context = React.useContext(AuthContext);
   const urlparams = useParams();
+  const gitBranch = process.env.GIT_BRANCH;
+  const gitHash = process.env.GIT_HASH;
 
   // Effect only run on first render to check if the user has entered
   // a valid year and week in URL.
@@ -832,6 +835,12 @@ export const Report = () => {
             </div>
           </section>
           <BarChart loading={isLoading}></BarChart>
+          <section className="recent-container ">
+            <div>
+              <img src={info} className="info-icon" alt={"information icon"} />{" "}
+              Release from {gitBranch} ({gitHash})
+            </div>
+          </section>
         </main>
         <div className="footer">
           <section className="footer-container">

diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
@@ -1,71 +1,79 @@
-const path = require('path')
-const webpack = require('webpack')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
+const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+const { execSync } = require("child_process");
+
+const gitBranch = execSync("git rev-parse --abbrev-ref HEAD").toString().trim();
+const gitHash = execSync("git rev-parse --short HEAD").toString().trim();
 
 module.exports = {
-  mode: 'development',
+  mode: "development",
   entry: {
-    index: './src/index.tsx'
+    index: "./src/index.tsx",
   },
   module: {
     rules: [
       {
         test: /\.(ts|tsx)$/i,
-        loader: 'ts-loader',
-        exclude: ['/node_modules/'],
+        loader: "ts-loader",
+        exclude: ["/node_modules/"],
         options: {
-          transpileOnly: true
-        }
+          transpileOnly: true,
+        },
       },
       {
         test: /\.(woff|woff2|png|svg|html)$/i,
-        type: 'asset'
+        type: "asset",
       },
       {
         test: /\.(css)$/i,
-        use: ['style-loader', 'css-loader']
+        use: ["style-loader", "css-loader"],
       },
       {
-        test: /\.hbs$/, loader: 'handlebars-loader'
-      }
-    ]
+        test: /\.hbs$/,
+        loader: "handlebars-loader",
+      },
+    ],
   },
   resolve: {
-    extensions: ['.tsx', '.ts', '.jsx', '.js', '...']
+    extensions: [".tsx", ".ts", ".jsx", ".js", "..."],
   },
-  devtool: 'inline-source-map',
+  devtool: "inline-source-map",
   devServer: {
     open: true,
-    host: '0.0.0.0',
+    host: "0.0.0.0",
     port: 4242,
     compress: true,
-    allowedHosts: 'all',
+    allowedHosts: "all",
     historyApiFallback: true,
-    static: './public',
+    static: "./public",
     client: {
-      webSocketURL: 'ws://localhost:4567/ws',
+      webSocketURL: "ws://localhost:4567/ws",
       overlay: {
         errors: true,
         warnings: false,
-        runtimeErrors: false
-      }
-    }
+        runtimeErrors: false,
+      },
+    },
   },
   plugins: [
     new webpack.DefinePlugin({
-      'process.env.PUBLIC_API_URL': JSON.stringify(process.env.PUBLIC_API_URL),
-      'process.env.PUBLIC_REDMINE_URL': JSON.stringify(
+      "process.env.PUBLIC_API_URL": JSON.stringify(process.env.PUBLIC_API_URL),
+      "process.env.PUBLIC_REDMINE_URL": JSON.stringify(
         process.env.PUBLIC_REDMINE_URL
-      )
+      ),
+      "process.env.GIT_BRANCH": JSON.stringify(gitBranch),
+      "process.env.GIT_HASH": JSON.stringify(gitHash),
     }),
     new HtmlWebpackPlugin({
-      filename: 'index.html',
-      publicPath: '/',
-      template: './src/template.hbs'
-    })
+      filename: "index.html",
+      publicPath: "/",
+      template: "./src/template.hbs",
+    }),
   ],
   output: {
-    filename: './js/index.js',
-    path: path.resolve(__dirname, './public')
-  }
-}
+    filename: "./js/index.js",
+    path: path.resolve(__dirname, "./public"),
+  },
+};
diff --git a/node/Dockerfile b/node/Dockerfile
@@ -3,6 +3,15 @@ FROM node:20.3.0-alpine as build
 USER node
 RUN mkdir /home/node/app
 
+# Switch to root user to install git
+USER root
+
+# Install git with root privileges
+RUN apk update && apk add --no-cache git
+
+# Switch back to the node user
+USER node
+
 WORKDIR /home/node
 COPY --chown=node:node /frontend/package.json /frontend/package-lock.json ./
 RUN npm ci

diff --git a/production/Dockerfile.nginx b/production/Dockerfile.nginx
@@ -1,9 +1,13 @@
 FROM node:20.6.1-alpine as build
 
+USER root
+RUN apk update && apk add --no-cache git
+
 USER node
 RUN mkdir /home/node/app
 WORKDIR /home/node
 COPY --chown=node:node ./package.json ./package-lock.json ./
+COPY --chown=node:node .git ./.git
 RUN npm ci
 
 FROM node:20.6.1-alpine as bundler
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="URDR timelogging"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><meta name="msapplication-TileColor" content="#da532c"><meta name="theme-color" content="#ffffff"><title>Urdr timelogging</title><script defer="defer" src="/./js/webpack-runtime.f17eca79827185016082.js"></script><script defer="defer" src="/./js/commons-index-react-dom.production.min.js.7489cee763cbb2ae09a9.js"></script><script defer="defer" src="/./js/commons-index-react-datepicker.min.js.08d1d997c0191701caa3.js"></script><script defer="defer" src="/./js/commons-index-react-beautiful-dnd.esm.js.c58b2369488b5d8a6936.js"></script><script defer="defer" src="/./js/97.ba514274620892b89b7d.js"></script><script defer="defer" src="/./js/index.54b4d711d7482ad12849.js"></script></head><body><div id="root"></div></body></html>