feat: add maintenace page (#900)

Co-authored-by: Chandrasekhar Ramakrishnan <cramakri@ethz.ch>

fix #894

docker-entrypoint.sh

@@ -24,6 +24,7 @@ echo " SENTRY_URL=${SENTRY_URL}"
 echo " SENTRY_NAMESPACE=${SENTRY_NAMESPACE}"
 echo " RENKU_TEMPLATES_URL=${RENKU_TEMPLATES_URL}"
 echo " RENKU_TEMPLATES_REF=${RENKU_TEMPLATES_REF}"
+echo " MAINTENANCE=${MAINTENANCE}"
 echo "==================================================="
 
 tee > /usr/share/nginx/html/config.json << EOF
@@ -34,7 +35,8 @@ tee > /usr/share/nginx/html/config.json << EOF
   "SENTRY_URL": "${SENTRY_URL}",
   "SENTRY_NAMESPACE": "${SENTRY_NAMESPACE}",
   "RENKU_TEMPLATES_URL": "${RENKU_TEMPLATES_URL}",
-  "RENKU_TEMPLATES_REF": "${RENKU_TEMPLATES_REF}"
+  "RENKU_TEMPLATES_REF": "${RENKU_TEMPLATES_REF}",
+  "MAINTENANCE": "${MAINTENANCE}"
 }
 EOF
 

helm-chart/renku-ui/templates/deployment.yaml

@@ -44,6 +44,10 @@ spec:
               value: {{ required "templateRepository.url must be specified, e.g., https://github.com/repos/SwissDataScienceCenter/renku-project-template" .Values.templatesRepository.url | quote }}
             - name: RENKU_TEMPLATES_REF
               value: {{ required "templateRepository.ref must be specified, e.g., master" .Values.templatesRepository.ref | quote }}
+              {{- if .Values.maintenance }}
+            - name: MAINTENANCE
+              value: {{ .Values.maintenance | default (printf "false") | quote }}
+              {{- end }}
           livenessProbe:
             httpGet:
               path: /

helm-chart/renku-ui/values.yaml

@@ -62,6 +62,10 @@ templatesRepository:
   url: https://github.com/SwissDataScienceCenter/renku-project-template
   ref: 0.1.9
 
+# Any string here, other than 'false', will enable the maintenance page and be added on it as an info.
+# Setting 'true' will display a standard message embedded in maintenace page.
+maintenance: false
+
 sentry:
   enabled: false
   url: ''

src/Maintenance.js

@@ -0,0 +1,63 @@
+/*!
+ * Copyright 2020 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ *  renku-ui
+ *
+ *  Maintenance.js
+ *  Maintenance components.
+ */
+
+import React, { Component } from "react";
+import { BrowserRouter as Router, Route } from "react-router-dom";
+import { Jumbotron } from "reactstrap";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faWrench } from "@fortawesome/free-solid-svg-icons";
+
+import { MaintenanceNavBar, FooterNavbar } from "./landing";
+
+
+class Maintenance extends Component {
+  render() {
+    const { info } = this.props;
+
+    const headerText = "Maintenance";
+    const body = info && info !== "true" && info !== "1" ?
+      info :
+      "Renku is undergoing maintenance. It should be available again soon. Please check back in a little while.";
+    return (
+      <Router>
+        <div>
+          <Route component={MaintenanceNavBar} />
+          <main role="main" className="container-fluid">
+            <Jumbotron>
+              <h1 className="text-center text-primary">
+                <FontAwesomeIcon icon={faWrench} /> {headerText} <FontAwesomeIcon icon={faWrench} />
+              </h1>
+              <br />
+              <p className="text-center">{body}</p>
+            </Jumbotron>
+          </main>
+          <Route component={FooterNavbar} />
+        </div>
+      </Router>
+    );
+  }
+}
+
+export { Maintenance };

src/Maintenance.test.js

@@ -0,0 +1,54 @@
+/*!
+ * Copyright 2020 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ *  renku-ui
+ *
+ *  Maintenance.js
+ *  Tests for maintenance components.
+ */
+
+import React from "react";
+import ReactDOM from "react-dom";
+import { MemoryRouter } from "react-router-dom";
+
+import { Maintenance } from "./Maintenance";
+
+describe("rendering", () => {
+  it("renders Maintenance without info", () => {
+    const div = document.createElement("div");
+    document.body.appendChild(div);
+    ReactDOM.render(
+      <MemoryRouter>
+        <Maintenance info={null} />
+      </MemoryRouter>,
+      div
+    );
+  });
+
+  it("renders Maintenance witht info", () => {
+    const div = document.createElement("div");
+    document.body.appendChild(div);
+    ReactDOM.render(
+      <MemoryRouter>
+        <Maintenance info={"Important info"} />
+      </MemoryRouter>,
+      div
+    );
+  });
+});

src/index.js

@@ -6,6 +6,7 @@ import * as Sentry from "@sentry/browser";
 import "./styles/index.css";
 import "./index.css";
 import App from "./App";
+import { Maintenance } from "./Maintenance";
 // Disable service workers for the moment -- see below where registerServiceWorker is called
 // import registerServiceWorker from './utils/ServiceWorker';
 import APIClient from "./api-client";
@@ -16,6 +17,11 @@ const configPromise = fetch("/config.json");
 
 configPromise.then((res) => {
   res.json().then((params) => {
+    if (params["MAINTENANCE"]) {
+      ReactDOM.render(<Maintenance info={params["MAINTENANCE"]} />, document.getElementById("root"));
+      return;
+    }
+
     // create client to be passed to coordinators
     const client = new APIClient(params.GATEWAY_URL);
 

src/landing/NavBar.js

@@ -273,6 +273,32 @@ class AnonymousNavBar extends Component {
   }
 }
 
+class MaintenanceNavBar extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: true
+    };
+  }
+
+  render() {
+    return (
+      <header>
+        <nav className="navbar navbar-expand-sm navbar-light bg-light justify-content-between">
+          <span className="navbar-brand">
+            <Link to="/"><img src={logo} alt="Renku" height="24" /></Link>
+          </span>
+          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span className="navbar-toggler-icon"></span>
+          </button>
+        </nav>
+      </header>
+    );
+  }
+}
+
 class FooterNavbar extends Component {
   render() {
     return (
@@ -296,4 +322,4 @@ class FooterNavbar extends Component {
   }
 }
 
-export { RenkuNavBar, FooterNavbar };
+export { RenkuNavBar, FooterNavbar, MaintenanceNavBar };

src/landing/index.js

@@ -24,6 +24,6 @@
  */
 
 import Landing from "./Landing";
-import { RenkuNavBar, FooterNavbar } from "./NavBar";
+import { RenkuNavBar, FooterNavbar, MaintenanceNavBar } from "./NavBar";
 
-export { Landing, RenkuNavBar, FooterNavbar };
+export { Landing, RenkuNavBar, FooterNavbar, MaintenanceNavBar };