Brand after build

.gitlab-ci.yml

@@ -10,52 +10,22 @@ build:
   stage: build
   image:
     name: docker
-  variables:
-    BRANDING: villasweb
-    DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
   script:
-  - docker build --build-arg REACT_APP_BRAND=${BRANDING} --tag ${DOCKER_IMAGE}:${DOCKER_TAG} .
+  - docker build --build-arg REACT_APP_BRAND=${BRANDING} --tag ${DOCKER_IMAGE}:${CI_COMMIT_BRANCH} .
   tags:
   - docker
 
-build.slew:
-  variables:
-    BRANDING: slew
-    DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
-  extends: build
-
-build.opalrt:
-  variables:
-    BRANDING: opalrt
-    DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
-  extends: build
-
 deploy:
   stage: deploy
-  variables:
-    BRANDING: villasweb
-    DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
   before_script:
   - docker login -u ${CI_REGISTRY_USER} -p ${CI_REGISTRY_PASSWORD} ${CI_REGISTRY}
   script:
-  - docker push ${DOCKER_IMAGE}:${DOCKER_TAG}
+  - docker push ${DOCKER_IMAGE}:${CI_COMMIT_BRANCH}
   tags:
   - docker
   dependencies:
   - build
 
-deploy.slew:
-  extends: deploy
-  variables:
-    BRANDING: slew
-    DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
-
-deploy.opalrt:
-  extends: deploy
-  variables:
-    BRANDING: opalrt
-    DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
-
 deploy.latest:
   extends: deploy
   variables:

Dockerfile

@@ -31,7 +31,16 @@ ARG REACT_APP_BRAND
 COPY . /usr/src/app
 # Production build, CI=false prevents warnings from being treated as errors
 RUN CI=false npm run build
+WORKDIR /usr/src/app/build
+
+RUN sed -i 's/<\/body>/<script src="\/static\/js\/injector.js"><\/script><link href="\/static\/css\/style.css" rel="stylesheet"><\/body>/g' index.html
+RUN mkdir -p branding/img
+ADD ./src/branding/default /usr/src/app/build/branding
+ADD ./src/branding/img /usr/src/app/build/branding/img
+ADD ./src/branding/injector.js /usr/src/app/build/static/js
+ADD ./src/branding/style.css /usr/src/app/build/static/css
 
 FROM nginx
 
 COPY --from=builder /usr/src/app/build /usr/share/nginx/html
+#EXPECT BRANDING VOLUME TO /usr/share/nginx/html/branding

compose.yaml

@@ -0,0 +1,9 @@
+services:
+  web:
+    build:
+      context: .
+    volumes:
+      - ./brand-mount:/usr/share/nginx/html/branding
+    ports:
+      - 2980:80
+      - 2443:443

package.json

@@ -67,12 +67,12 @@
     "react-scripts": "^4.0.3"
   },
   "scripts": {
-    "start": "react-scripts --openssl-legacy-provider start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy": "https://villas.k8s.eonerc.rwth-aachen.de",
+  "proxy": "https://slew.k8s.eonerc.rwth-aachen.de/",
   "browserslist": {
     "production": [
       ">0.2%",

src/app.js

@@ -15,102 +15,133 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React from 'react';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend }from 'react-dnd-html5-backend';
-import NotificationSystem from 'react-notification-system';
-import { Redirect, Route } from 'react-router-dom';
-import jwt from 'jsonwebtoken';
-import NotificationsDataManager from './common/data-managers/notifications-data-manager';
-import Home from './common/home';
-import Header from './common/header';
-import Menu from './common/menu';
-import InfrastructureComponent from './pages/infrastructure/ic';
-import Scenarios from './pages/scenarios/scenarios';
-import APIBrowser from './common/api-browser';
-import Scenario from './pages/scenarios/scenario';
-import Users from './pages/users/users';
-import Dashboard from './pages/dashboards/dashboard';
-import Account from './pages/account/account';
-import './styles/app.css';
-import './styles/login.css';
-import branding from './branding/branding';
-import Logout from './pages/login/logout';
-import Infrastructure from './pages/infrastructure/infrastructure';
-import { useSelector } from 'react-redux';
+import React from "react";
+import { useRef, useEffect } from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import NotificationSystem from "react-notification-system";
+import { Redirect, Route } from "react-router-dom";
+import jwt from "jsonwebtoken";
+import NotificationsDataManager from "./common/data-managers/notifications-data-manager";
+import Home from "./common/home";
+import Header from "./common/header";
+import Menu from "./common/menu";
+import InfrastructureComponent from "./pages/infrastructure/ic";
+import Scenarios from "./pages/scenarios/scenarios";
+import APIBrowser from "./common/api-browser";
+import Scenario from "./pages/scenarios/scenario";
+import Users from "./pages/users/users";
+import Dashboard from "./pages/dashboards/dashboard.jsx";
+import Account from "./pages/account/account";
+import "./styles/app.css";
+import "./styles/login.css";
+import Logout from "./pages/login/logout";
+import Infrastructure from "./pages/infrastructure/infrastructure";
+import Usergroup from "./pages/usergroups/usergroup";
+import { useSelector } from "react-redux";
+import DashboardErrorBoundary from "./pages/dashboards/dashboard-error-boundry";
+import { villasweb_footer } from "./branding/functions.js";
 
 const App = () => {
-
   const isTokenExpired = (token) => {
     let decodedToken = jwt.decode(token);
     let timeNow = (new Date().getTime() + 1) / 1000;
     return decodedToken.exp < timeNow;
-  }
+  };
+
+  const notificationSystem = useRef(null);
+
+  useEffect(() => {
+    NotificationsDataManager.setSystem(notificationSystem.current);
+
+    return () => {
+      NotificationsDataManager.setSystem(null);
+    };
+  }, []);
 
   const { isAuthenticated, token, user } = useSelector((state) => state.auth);
 
   if (!isAuthenticated || isTokenExpired(token)) {
     console.log("APP redirecting to logout/login");
-    return (<Redirect to="/logout" />);
+    return <Redirect to="/logout" />;
   } else {
 
     console.log("APP rendering app");
-    const pages = branding.values.pages;
 
-    return (<DndProvider backend={HTML5Backend} >
-      <div className="app">
-        <NotificationSystem />
-        <Header />
+    return (
+      <DndProvider backend={HTML5Backend}>
+        <div className="app">
+          <NotificationSystem ref={notificationSystem} />
+          <Header />
 
-        <div className='app-body app-body-spacing'>
-          <Menu currentRole={user.role} />
+          <div className="app-body app-body-spacing">
+            <Menu currentRole={user.role} />
 
-          <div className='app-content app-content-margin-left'>
-            <Route exact path="/" component={Home} />
-            { pages.home ? <Route path="/home" component={Home} /> : '' }
-            { pages.scenarios ? <>
-              <Route exact path="/scenarios">
-                <Scenarios />
-              </Route>
-              <Route exact path="/logout">
-                <Logout />
-              </Route>
-              <Route path="/scenarios/:scenario">
-                <Scenario />
-              </Route>
-              <Route path="/dashboards/:dashboard">
-                <Dashboard />
-              </Route>
-              <Route path="/dashboards-new/:dashboard">
-                <Dashboard />
-              </Route>
-              </>
-            : '' }
-            { user.role === "Admin" || pages.infrastructure ? <>
-              <Route exact path="/infrastructure">
-                <Infrastructure />
-              </Route>
-              <Route path="/infrastructure/:ic">
-                <InfrastructureComponent />
-              </Route>
-              </>
-            : '' }
-            { pages.account ? <Route path="/account"><Account /></Route> : '' }
-            { user.role === "Admin" ?
-              <Route path="/users">
-                <Users />
-              </Route>
-            : '' }
-            { user.role === "Admin" || pages.api ?
-              <Route path="/api" component={APIBrowser} />
-            : '' }
+            <div className="app-content app-content-margin-left">
+              <Route exact path="/" component={Home} />
+              <Route path="/home" component={Home} />
+                <>
+                  <Route exact path="/scenarios">
+                    <Scenarios />
+                  </Route>
+                  <Route exact path="/logout">
+                    <Logout />
+                  </Route>
+                  <Route path="/scenarios/:scenario">
+                    <Scenario />
+                  </Route>
+                  <Route path="/dashboards/:dashboard">
+                    <DashboardErrorBoundary>
+                      <Dashboard />
+                    </DashboardErrorBoundary>
+                  </Route>
+                  <Route path="/dashboards-new/:dashboard">
+                    <Dashboard />
+                  </Route>
+                </>
+
+              {user.role === "Admin" ? (
+                <>
+                  <Route exact path="/infrastructure">
+                    <Infrastructure />
+                  </Route>
+                  <Route path="/infrastructure/:ic">
+                    <InfrastructureComponent />
+                  </Route>
+                </>
+              ) : (
+                ""
+              )}
+                <Route path="/account">
+                  <Account />
+                </Route>
+
+              {user.role === "Admin" ? (
+                <>
+                  <Route path="/users">
+                    <Users />
+                  </Route>
+                  <Route path="/usergroup/:usergroup">
+                    <Usergroup />
+                  </Route>
+                </>
+              ) : (
+                ""
+              )}
+              {user.role === "Admin"? (
+                <Route path="/api" component={APIBrowser} />
+              ) : (
+                ""
+              )}
+            </div>
           </div>
+          <footer className="app-footer" id="brand-footer"> 
+            {villasweb_footer()}
+          </footer>
         </div>
-
-        {branding.getFooter()}
-      </div>
-  </DndProvider>)
+      </DndProvider>
+    );
   }
-}
+};
 
 export default App;