RINGX-116 shell UI integration

README.md

@@ -36,6 +36,14 @@ sudo npm run start:dev
 *Note*: Regular users are not allowed to bind to port 80, ports below 1024 require root/adminstrator rights.
 You will need to either run as root using sudo, or setup a proxy that redirects requests on port 80 to a port over 1024.
 
+Zenko UI now uses the metalk8s common navbar:  
+```
+git clone https://github.com/scality/metalk8s
+cd metalk8s/shell-ui
+docker build -t shell-ui .
+docker run -d -p 8082:80 shell-ui
+```
+
 ### Access UI
 ```
 http://ui.zenko.local

cypress.json

@@ -1,4 +1,5 @@
 {
   "baseUrl": "http://127.0.0.1:8383",
-  "video": false
+  "video": false,
+  "chromeWebSecurity": false
 }

eve/main.yml

@@ -8,6 +8,9 @@ branches:
     stage: post-merge
 
 models:
+  - env: &shell-ui-env
+      # TODO: update SHELL_UI_IMAGE to a more "official" image.
+      SHELL_UI_IMAGE: 'registry.scality.com/playground/jbwatenberg/shell-ui:2.9-dev'
   - env: &deploy-env
       SCALITY_OCI_REPO: registry.scality.com/zenko-ui/zenko-ui
       SCALITY_OCI_REPO_DEV: registry.scality.com/zenko-ui-dev/zenko-ui
@@ -76,15 +79,21 @@ stages:
           command: npm run test:coverage
           haltOnFailure: True
       - ShellCommand: *npm-build
+      - ShellCommand: *docker-login
       - ShellCommand: *docker-build
       - ShellCommand:
           name: run end-to-end tests
           command: >-
+            docker pull ${SHELL_UI_IMAGE};
+            docker run -d -p 8082:80 ${SHELL_UI_IMAGE};
+  
             docker run -d -p 8383:8383
+            -v $(pwd)/eve/ui-test-config-shell.json:/usr/share/nginx/html/config-shell.json
             -v $(pwd)/eve/ui-test-config.json:/usr/share/nginx/html/config.json
             -v $(pwd)/conf/zenko-ui-nginx.conf:/etc/nginx/conf.d/default.conf
             ${SCALITY_OCI_REPO_DEV}:%(prop:commit_short_revision)s;
             set -exu;
+            bash wait_for_local_port.bash 8082 40;
             bash wait_for_local_port.bash 8080 40;
             bash wait_for_local_port.bash 8383 40;
             CYPRESS_KEYCLOAK_USER_FULLNAME="${KEYCLOAK_USER_FIRSTNAME} ${KEYCLOAK_USER_LASTNAME}"
@@ -97,6 +106,7 @@ stages:
           env:
             <<: *deploy-env
             <<: *keycloak-env
+            <<: *shell-ui-env
       - ShellCommand:
           name: upload test coverage
           haltOnFailure: False

eve/ui-test-config-shell.json

@@ -0,0 +1,21 @@
+{
+    "docUrl": "/docs",
+    "oidc": {
+      "providerUrl": "http://127.0.0.1:8080/auth/realms/myrealm",
+      "redirectUrl": "http://127.0.0.1:8383/login/callback",
+      "clientId": "myclient",
+      "responseType": "code",
+      "scopes": "openid profile email roles"
+    },
+    "options": {
+      "main": {
+          "http://127.0.0.1:8383/accounts":{ "en": "Accounts" },
+          "http://127.0.0.1:8383/buckets":{ "en": "Data Browser" },
+          "http://127.0.0.1:8383/workflows":{ "en": "Workflows" }
+      },
+      "subLogin": {}
+    },
+    "logo" : { "dark": "/logo-dark.svg" },
+    "favicon": ""
+  }
+

eve/ui-test-config.json

@@ -1,7 +1,7 @@
 {
+    "navbarEndpoint": "http://127.0.0.1:8082/shell/solution-ui-navbar.1.0.0.js",
+    "navbarConfigUrl": "/config-shell.json",
     "managementEndpoint": "http://127.0.0.1:5000",
-    "oidcAuthority": "http://127.0.0.1:8080/auth/realms/myrealm",
-    "oidcClientId": "myclient",
     "stsEndpoint": "http://127.0.0.1:8383/sts",
     "zenkoEndpoint": "http://127.0.0.1:8383/s3"
 }

package.json

@@ -72,6 +72,7 @@
     "react-debounce-input": "3.2.0",
     "react-dom": "^16.12.0",
     "react-dropzone": "^11.2.0",
+    "react-error-boundary": "^3.1.1",
     "react-hook-form": "^6.3.3",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",

public/assets/config-shell.json

@@ -0,0 +1,21 @@
+{
+  "docUrl": "/docs",
+  "oidc": {
+    "providerUrl": "http://keycloak.zenko.local/auth/realms/zenko",
+    "redirectUrl": "http://ui.zenko.local",
+    "clientId": "zenko-ui",
+    "responseType": "code",
+    "scopes": "openid profile email roles"
+  },
+  "options": {
+    "main": {
+        "http://ui.zenko.local/accounts":{ "en": "Accounts" },
+        "http://ui.zenko.local/buckets":{ "en": "Data Browser" },
+        "http://ui.zenko.local/workflows":{ "en": "Workflows" }
+    },
+    "subLogin": {}
+  },
+  "logo" : { "dark": "/logo-dark.svg" },
+  "favicon": "",
+  "providerLogout": true
+}

public/assets/config.json

@@ -1,7 +1,7 @@
 {
+    "navbarEndpoint": "http://127.0.0.1:8082/shell/solution-ui-navbar.1.0.0.js",
+    "navbarConfigUrl": "/config-shell.json",
     "managementEndpoint": "http://management.zenko.local",
-    "oidcAuthority": "http://keycloak.zenko.local/auth/realms/zenko",
-    "oidcClientId": "zenko-ui",
     "stsEndpoint": "http://ui.zenko.local/sts",
     "zenkoEndpoint": "http://ui.zenko.local/s3"
 }

src/js/config.js

@@ -4,14 +4,14 @@ export function getAppConfig() {
             return response.json();
         })
         .then(config => {
-            const { managementEndpoint, oidcAuthority, oidcClientId, stsEndpoint, zenkoEndpoint } = config;
-            if (!managementEndpoint || !oidcAuthority || !oidcClientId || !stsEndpoint || !zenkoEndpoint) {
-                throw new Error('incorrect or missing mandatory configuration information(s). (i.e. managementEndpoint, oidcAuthority, oidcClientId, stsEndpoint and zenkoEndpoint)');
+            const { managementEndpoint, navbarConfigUrl, navbarEndpoint, stsEndpoint, zenkoEndpoint } = config;
+            if (!navbarEndpoint || !managementEndpoint || !stsEndpoint || !zenkoEndpoint) {
+                throw new Error('incorrect or missing mandatory configuration information(s). (i.e. managementEndpoint, navbarEndpoint, stsEndpoint and zenkoEndpoint)');
             }
             return {
                 managementEndpoint,
-                oidcAuthority,
-                oidcClientId,
+                navbarConfigUrl,
+                navbarEndpoint,
                 stsEndpoint,
                 zenkoEndpoint,
             };

src/react/App.js

@@ -1,12 +1,12 @@
 import '../css/index.css';
 
 import { history, store } from './store';
-import Auth from './Auth';
 import { ConnectedRouter } from 'connected-react-router';
 import { Provider } from 'react-redux';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { ThemeProvider } from 'styled-components';
+import ZenkoUI from './ZenkoUI';
 import { theme } from './theme';
 
 // const whyDidYouRender = require('@welldone-software/why-did-you-render');
@@ -21,7 +21,7 @@ ReactDOM.render(
     <Provider store={store}>
         <ConnectedRouter history={history}>
             <ThemeProvider theme={theme}>
-                <Auth/>
+                <ZenkoUI/>
             </ThemeProvider>
         </ConnectedRouter>
     </Provider>,