UI: Display version

ui/.eslintrc

@@ -35,7 +35,6 @@
       {
         "ts": "never",
         "tsx": "never",
-        "json": "never",
         "js": "never",
         "jsx": "never"
       }

ui/craco.config.js

@@ -3,8 +3,14 @@ const path = require("path");
 const { loaderByName } = require("@craco/craco");
 const CracoLessPlugin = require("craco-less");
 
+const webpack = require("webpack");
+
+const packageJson = require("./package.json");
+
 const resolve = (dir) => path.resolve(__dirname, dir);
 
+const currentTime = new Date();
+
 module.exports = {
   babel: {
     plugins: [
@@ -22,6 +28,28 @@ module.exports = {
     alias: {
       "@": resolve("src"),
     },
+    configure: (webpackConfig, { env, paths }) => {
+      const index = webpackConfig.plugins.findIndex(
+        (itme) => itme instanceof webpack.DefinePlugin
+      );
+
+      if (index > -1) {
+        const definePlugin = webpackConfig.plugins[index];
+        webpackConfig.plugins.splice(
+          index,
+          1,
+          new webpack.DefinePlugin({
+            "process.env": {
+              ...definePlugin.definitions["process.env"],
+              FEATHR_VERSION: JSON.stringify(packageJson.version),
+              FEATHR_GENERATED_TIME: JSON.stringify(currentTime.toISOString()),
+            },
+          })
+        );
+      }
+
+      return webpackConfig;
+    },
   },
   plugins: [
     {

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feathr-ui",
-  "version": "0.1.0",
+  "version": "0.8.1",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
@@ -21,7 +21,7 @@
     "@craco/craco": "^7.0.0-alpha.8",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
-    "@testing-library/user-event": "^13.5.0", 
+    "@testing-library/user-event": "^13.5.0",
     "@types/dagre": "^0.7.47",
     "@types/jest": "^27.5.0",
     "@types/node": "^16.11.26",
@@ -42,7 +42,8 @@
     "prettier": "2.7.1",
     "react-scripts": "5.0.0",
     "typescript": "^4.6.3",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.72.0"
   },
   "scripts": {
     "start": "craco start",

ui/src/app.tsx

@@ -20,48 +20,56 @@ import RoleManagement from "./pages/management/roleManagement";
 import Home from "./pages/home/home";
 import Projects from "./pages/project/projects";
 import { getMsalConfig } from "./utils/utils";
+import Footer from "@/components/footer";
 
 const queryClient = new QueryClient();
 
 const msalClient = getMsalConfig();
+
 const App = () => {
   return (
     <MsalProvider instance={msalClient}>
       <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
         <QueryClientProvider client={queryClient}>
           <BrowserRouter>
-            <Layout style={{ minHeight: "100vh" }}>
+            <Layout style={{ minHeight: "100vh", position: "relative" }}>
               <SideMenu />
               <Layout>
                 <Header />
-                <Routes>
-                  <Route index element={<Home />} />
-                  <Route path="/home" element={<Home />} />
-                  <Route path="/projects" element={<Projects />} />
-                  <Route path="/dataSources" element={<DataSources />} />
-                  <Route path="/features" element={<Features />} />
-                  <Route path="/new-feature" element={<NewFeature />} />
-                  <Route
-                    path="/projects/:project/features/:featureId"
-                    element={<FeatureDetails />}
-                  />
-                  <Route
-                    path="/projects/:project/dataSources/:dataSourceId"
-                    element={<DataSourceDetails />}
-                  />
-                  <Route
-                    path="/projects/:project/lineage"
-                    element={<LineageGraph />}
-                  />
-                  <Route path="/jobs" element={<Jobs />} />
-                  <Route path="/monitoring" element={<Monitoring />} />
-                  <Route path="/management" element={<Management />} />
-                  <Route path="/role-management" element={<RoleManagement />} />
-                  <Route
-                    path="/responseErrors/:status/:detail"
-                    element={<ResponseErrors />}
-                  />
-                </Routes>
+                <Layout.Content>
+                  <Routes>
+                    <Route index element={<Home />} />
+                    <Route path="/home" element={<Home />} />
+                    <Route path="/projects" element={<Projects />} />
+                    <Route path="/dataSources" element={<DataSources />} />
+                    <Route path="/features" element={<Features />} />
+                    <Route path="/new-feature" element={<NewFeature />} />
+                    <Route
+                      path="/projects/:project/features/:featureId"
+                      element={<FeatureDetails />}
+                    />
+                    <Route
+                      path="/projects/:project/dataSources/:dataSourceId"
+                      element={<DataSourceDetails />}
+                    />
+                    <Route
+                      path="/projects/:project/lineage"
+                      element={<LineageGraph />}
+                    />
+                    <Route path="/jobs" element={<Jobs />} />
+                    <Route path="/monitoring" element={<Monitoring />} />
+                    <Route path="/management" element={<Management />} />
+                    <Route
+                      path="/role-management"
+                      element={<RoleManagement />}
+                    />
+                    <Route
+                      path="/responseErrors/:status/:detail"
+                      element={<ResponseErrors />}
+                    />
+                  </Routes>
+                </Layout.Content>
+                <Footer />
               </Layout>
             </Layout>
           </BrowserRouter>

ui/src/components/footer/index.module.less

@@ -0,0 +1,12 @@
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 200px;
+  right: 0;
+  padding: 16px;
+  text-align: center;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  background-color: rgb(240 242 245 / 40%);
+  backdrop-filter: blur(8px);
+  z-index: 10;
+}

ui/src/components/footer/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Layout, Space } from "antd";
+import dayjs from "dayjs";
+
+import styles from "./index.module.less";
+
+const { Footer } = Layout;
+
+const FooterBar = () => {
+  const generatedTime = dayjs(process.env.FEATHR_GENERATED_TIME)
+    .utc()
+    .format("YYYY-MM-DD HH:mm:DD UTC");
+
+  return (
+    <Footer className={styles.footer}>
+      <Space size={32}>
+        <span>version {process.env.FEATHR_VERSION}</span>
+        <span> generated at {generatedTime}</span>
+      </Space>
+    </Footer>
+  );
+};
+
+export default FooterBar;

ui/src/index.tsx

@@ -1,8 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
 import App from "./app";
 import "./site.css";
 
+dayjs.extend(utc);
+
 ReactDOM.render(
   <React.StrictMode>
     <App />

ui/src/site.css

@@ -1,5 +1,6 @@
 .page {
-  margin: 1%;
+  margin: 16px;
+  padding-bottom: 100px;
 }
 
 .card {