Add Kubeapps version in the footer (#880)

* Add Kubeapps version in the footer * Adjust margin * Move container to footer
vmware-tanzu · Dec 17, 2018 · 84b6a15 · 84b6a15
1 parent de755d5
commit 84b6a15
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 55 deletions.
diff --git a/chart/kubeapps/templates/dashboard-config.yaml b/chart/kubeapps/templates/dashboard-config.yaml
@@ -23,4 +23,5 @@ data:
   config.json: |-
     {
       "namespace": "{{ .Release.Namespace }}"
+      "appVersion": "{{ .Chart.AppVersion }}"
     }
diff --git a/dashboard/public/config.json b/dashboard/public/config.json
@@ -1,3 +1,4 @@
 {
-  "namespace": "default"
+  "namespace": "default",
+  "appVersion": "DEVEL"
 }
diff --git a/dashboard/src/components/Footer/Footer.tsx b/dashboard/src/components/Footer/Footer.tsx
@@ -4,61 +4,64 @@ import logo from "../../logo.svg";
 // Icons
 import Heart from "../../icons/Heart";
 
-class Footer extends React.Component {
-  public render() {
-    return (
-      <footer className="osFooter bg-dark type-color-reverse-anchor-reset">
-        <div className="container padding-h-big padding-v-bigger">
-          <div className="row collapse-b-phone-land align-center">
-            <div className="col-6">
-              <h4 className="inverse margin-reset">
-                <img src={logo} alt="Kubeapps logo" className="osFooter__logo" />
-              </h4>
-              <p className="type-color-white type-small margin-reset">
-                Made with <Heart className="icon icon-small" /> by Bitnami and{" "}
-                <a href="https://github.com/kubeapps/kubeapps/graphs/contributors" target="_blank">
-                  contributors
-                </a>
-                .
-              </p>
-            </div>
-            <div className="col-6 text-r">
-              <a href="https://twitter.com/kubeapps" className="socialIcon margin-h-small">
-                <svg
-                  role="img"
-                  aria-label="Kubeapps on Twitter"
-                  viewBox="0 0 54 54"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <title>twitter</title>
-                  <circle fill="currentColor" cx="27" cy="27" r="27" />
-                  <path
-                    d="M14 35.618A15.166 15.166 0 0 0 22.177 38c9.904 0 15.498-8.313 15.162-15.77A10.761 10.761 0 0 0 40 19.485c-.957.422-1.985.707-3.063.834a5.314 5.314 0 0 0 2.344-2.932 10.729 10.729 0 0 1-3.386 1.287A5.344 5.344 0 0 0 32 17c-3.442 0-5.973 3.193-5.195 6.51a15.17 15.17 0 0 1-10.994-5.54 5.288 5.288 0 0 0 1.65 7.078 5.33 5.33 0 0 1-2.417-.663c-.057 2.456 1.714 4.753 4.279 5.265-.751.204-1.573.25-2.408.09a5.33 5.33 0 0 0 4.982 3.683A10.767 10.767 0 0 1 14 35.618"
-                    fill="currentColor"
-                  />
-                </svg>
-              </a>
-              <a href="https://github.com/kubeapps/kubeapps" className="socialIcon margin-h-small">
-                <svg
-                  role="img"
-                  aria-label="Kubeapps on GitHub"
-                  viewBox="0 0 54 54"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <title>github</title>
-                  <circle fill="currentColor" cx="27" cy="27" r="27" />
-                  <path
-                    d="M27.5 14C20.044 14 14 19.968 14 27.33c0 5.888 3.868 10.885 9.233 12.647.675.122.921-.289.921-.642 0-.317-.011-1.155-.018-2.268-3.755.806-4.547-1.786-4.547-1.786-.614-1.54-1.5-1.95-1.5-1.95-1.225-.827.094-.81.094-.81 1.355.094 2.067 1.373 2.067 1.373 1.204 2.038 3.16 1.45 3.93 1.108.122-.861.47-1.449.856-1.782-2.997-.336-6.149-1.48-6.149-6.588 0-1.455.526-2.644 1.39-3.576-.14-.337-.603-1.693.132-3.527 0 0 1.133-.36 3.712 1.366a13.085 13.085 0 0 1 3.38-.449c1.146.005 2.301.153 3.38.449 2.577-1.725 3.708-1.366 3.708-1.366.737 1.834.273 3.19.134 3.527.865.932 1.388 2.121 1.388 3.576 0 5.12-3.156 6.248-6.164 6.578.485.411.917 1.225.917 2.468 0 1.782-.017 3.22-.017 3.657 0 .356.243.77.928.64C37.135 38.21 41 33.218 41 27.33 41 19.968 34.955 14 27.5 14"
-                    fill="currentColor"
-                  />
-                </svg>
+interface IFooterProps {
+  appVersion: string;
+}
+
+const Footer: React.SFC<IFooterProps> = props => {
+  return (
+    <footer className="osFooter bg-dark type-color-reverse-anchor-reset">
+      <div className="container padding-h-big padding-v-bigger">
+        <div className="row collapse-b-phone-land align-center">
+          <div className="col-6">
+            <h4 className="inverse margin-reset">
+              <img src={logo} alt="Kubeapps logo" className="osFooter__logo" />
+            </h4>
+            <p className="type-color-white type-small margin-reset">
+              Made with <Heart className="icon icon-small" /> by Bitnami and{" "}
+              <a href="https://github.com/kubeapps/kubeapps/graphs/contributors" target="_blank">
+                contributors
               </a>
-            </div>
+              .
+            </p>
+          </div>
+          <div className="col-6 text-r">
+            <a href="https://twitter.com/kubeapps" className="socialIcon margin-small">
+              <svg
+                role="img"
+                aria-label="Kubeapps on Twitter"
+                viewBox="0 0 54 54"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>twitter</title>
+                <circle fill="currentColor" cx="27" cy="27" r="27" />
+                <path
+                  d="M14 35.618A15.166 15.166 0 0 0 22.177 38c9.904 0 15.498-8.313 15.162-15.77A10.761 10.761 0 0 0 40 19.485c-.957.422-1.985.707-3.063.834a5.314 5.314 0 0 0 2.344-2.932 10.729 10.729 0 0 1-3.386 1.287A5.344 5.344 0 0 0 32 17c-3.442 0-5.973 3.193-5.195 6.51a15.17 15.17 0 0 1-10.994-5.54 5.288 5.288 0 0 0 1.65 7.078 5.33 5.33 0 0 1-2.417-.663c-.057 2.456 1.714 4.753 4.279 5.265-.751.204-1.573.25-2.408.09a5.33 5.33 0 0 0 4.982 3.683A10.767 10.767 0 0 1 14 35.618"
+                  fill="currentColor"
+                />
+              </svg>
+            </a>
+            <a href="https://github.com/kubeapps/kubeapps" className="socialIcon margin-small">
+              <svg
+                role="img"
+                aria-label="Kubeapps on GitHub"
+                viewBox="0 0 54 54"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>github</title>
+                <circle fill="currentColor" cx="27" cy="27" r="27" />
+                <path
+                  d="M27.5 14C20.044 14 14 19.968 14 27.33c0 5.888 3.868 10.885 9.233 12.647.675.122.921-.289.921-.642 0-.317-.011-1.155-.018-2.268-3.755.806-4.547-1.786-4.547-1.786-.614-1.54-1.5-1.95-1.5-1.95-1.225-.827.094-.81.094-.81 1.355.094 2.067 1.373 2.067 1.373 1.204 2.038 3.16 1.45 3.93 1.108.122-.861.47-1.449.856-1.782-2.997-.336-6.149-1.48-6.149-6.588 0-1.455.526-2.644 1.39-3.576-.14-.337-.603-1.693.132-3.527 0 0 1.133-.36 3.712 1.366a13.085 13.085 0 0 1 3.38-.449c1.146.005 2.301.153 3.38.449 2.577-1.725 3.708-1.366 3.708-1.366.737 1.834.273 3.19.134 3.527.865.932 1.388 2.121 1.388 3.576 0 5.12-3.156 6.248-6.164 6.578.485.411.917 1.225.917 2.468 0 1.782-.017 3.22-.017 3.657 0 .356.243.77.928.64C37.135 38.21 41 33.218 41 27.33 41 19.968 34.955 14 27.5 14"
+                  fill="currentColor"
+                />
+              </svg>
+            </a>
+            <p className="type-color-white type-small margin-small">v{props.appVersion}</p>
           </div>
         </div>
-      </footer>
-    );
-  }
-}
+      </div>
+    </footer>
+  );
+};
 
 export default Footer;
diff --git a/dashboard/src/components/Layout/Layout.tsx b/dashboard/src/components/Layout/Layout.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
+import Footer from "../../containers/FooterContainer";
 import ErrorBoundary from "../ErrorBoundary";
-import Footer from "../Footer";
 
 import "./Layout.css";
 

diff --git a/dashboard/src/containers/FooterContainer/FooterContainer.ts b/dashboard/src/containers/FooterContainer/FooterContainer.ts
@@ -0,0 +1,12 @@
+import { connect } from "react-redux";
+
+import Footer from "../../components/Footer";
+import { IStoreState } from "../../shared/types";
+
+function mapStateToProps({ config }: IStoreState) {
+  return {
+    appVersion: config.appVersion,
+  };
+}
+
+export default connect(mapStateToProps)(Footer);
diff --git a/dashboard/src/containers/FooterContainer/index.ts b/dashboard/src/containers/FooterContainer/index.ts
@@ -0,0 +1,3 @@
+import FooterContainer from "./FooterContainer";
+
+export default FooterContainer;
diff --git a/dashboard/src/reducers/config.ts b/dashboard/src/reducers/config.ts
@@ -11,6 +11,7 @@ export interface IConfigState extends IConfig {
 const initialState: IConfigState = {
   loaded: false,
   namespace: "",
+  appVersion: "",
 };
 
 const configReducer = (state: IConfigState = initialState, action: ConfigAction): IConfigState => {

diff --git a/dashboard/src/shared/Config.ts b/dashboard/src/shared/Config.ts
@@ -3,6 +3,7 @@ import axios from "axios";
 // IConfig is the configuration for Kubeapps
 export interface IConfig {
   namespace: string;
+  appVersion: string;
 }
 
 export default class Config {
@@ -16,6 +17,7 @@ export default class Config {
     // Please note that this env variable gets mapped in the run command in the package.json file
     if (process.env.NODE_ENV !== "production" && process.env.REACT_APP_KUBEAPPS_NS) {
       data.namespace = process.env.REACT_APP_KUBEAPPS_NS;
+      data.appVersion = "DEVEL";
     }
 
     return data;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import FooterContainer from "./FooterContainer";

		export default FooterContainer;