Merge and disable cross console to master. (#606)

dlabaj · web-flow · commit 4b3b56e1a902 · 2020-07-27T20:05:07.000-04:00
* Updated server side changes.

* Added code to retrieve cross console apps on client side.

* Server.js updates and addition of demo mode env variable.

* Updated with latest version of integration builds.

* Fixed linting errors.

* Fix for CORS error.

* Fixed import error

* updated to use getAvailableApps

* Fixed issues with prettier problems.

* Fixed typo.

* Updated DEMO_MODE to CROSS_CONSOLE_LOCAL_DEV_MODE

* Refactor some of the cross console server code.

* Added code to get list of apps from live server.

* Updated with bug fixes and latest cross console version.

* Fixed APICUITO change and missing null value for appList.

* Updated to latest version of rh integration.

* Fixed issue with rootURL

* upgraded 1.0.2 integration and added amqonline.

* Updated with rebase from RHMI master.

* Added code for cross console but have it disabled.

* Fixed with review comments.

* Fixed yarn.lock file.
diff --git a/.env.development b/.env.development
@@ -20,3 +20,5 @@ REACT_APP_LAUNCHER_URL=http://localhost:3006
 REACT_APP_CHE_URL=http://localhost:3006
 REACT_APP_ENMASSE_URL=http://localhost:3006
 REACT_APP_APICURIO_URL=http://localhost:3006
+
+REACT_APP_RHMI_SERVER_URL=http://localhost:5001
diff --git a/package.json b/package.json
@@ -5,8 +5,11 @@
   "proxy": "http://localhost:5001/",
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.7.2",
-    "@patternfly/patternfly": "4.16.7",
-    "@patternfly/react-core": "4.23.1",
+    "@patternfly/patternfly": "4.23.3",
+    "@patternfly/react-core": "4.32.1",
+    "@patternfly/react-icons": "4.5.0",
+    "@patternfly/react-styles" :"4.5.0",
+    "@rh-uxd/appservices-patternfly-core": "1.0.5",
     "asciidoctor.js": "1.5.7",
     "axios": "^0.19.0",
     "body-parser": "^1.18.3",
@@ -84,6 +87,7 @@
     "build:js": "react-scripts build",
     "start": "node server.js",
     "start:dev": "FUSE_URL=http://localhost:3006 LAUNCHER_URL=http://localhost:3006 ENMASSE_URL=http://localhost:3006 CHE_URL=http://localhost:3006 APICURIO_URL=http://localhost:3006 run-p -l watch:css start:local start:server",
+    "start:dev:crossconsole": "CROSS_CONSOLE_LOCAL_DEV_MODE=true FUSE_URL=http://localhost:3000 LAUNCHER_URL=http://localhost:3006 ENMASSE_URL=http://localhost:3006 CHE_URL=http://localhost:3006 APICURIO_URL=http://localhost:4200 run-p -l watch:css start:local start:server",
     "start:local": "react-scripts start",
     "start:server": "nodemon --watch server.js --exec 'node server.js'",
     "commit:hash": "echo REACT_APP_UI_COMMIT_HASH=$(git rev-list -1 --all) > .env",
diff --git a/server.js b/server.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-shadow */
 const express = require('express');
 const path = require('path');
 const url = require('url');
@@ -21,14 +22,48 @@ const OPENSHIFT_PROXY_PATH = '/proxy/openshift';
 const app = express();
 
 const adoc = asciidoctor();
+const LOCAL_DEV_INSTALLED_SERVICES = {
+  '3scale': {
+    Host: 'https://3scale-admin.apps.demo.com',
+    Version: '2.7'
+  },
+  amqonline: {
+    Host: 'http://localhost:3003',
+    Version: '1.3.1'
+  },
+  apicurito: {
+    Host: 'http://localhost:4200',
+    Version: '1.0.1'
+  },
+  codeready: {
+    Host: 'https://codeready-redhat-rhmi-codeready-workspaces.apps.demo.com',
+    Version: '2.0.0'
+  },
+  'fuse-managed': {
+    Host: 'http://localhost:3000',
+    Version: '7.5'
+  },
+  ups: {
+    Host: 'https://ups-unifiedpush-proxy-redhat-rhmi-ups.apps.demo.com',
+    Version: '2.3.2'
+  },
+  'user-rhsso': {
+    Host: 'https://keycloak-edge-redhat-rhmi-user-sso.apps.demo.com',
+    Version: '8.0.1'
+  }
+};
+const CROSS_CONSOLE_ENABLED = false;
 
 app.use(bodyParser.json());
-app.use(OPENSHIFT_PROXY_PATH, proxy(`https://${process.env.OPENSHIFT_API}`, {
-  proxyReqOptDecorator: function(proxyReqOpts, _) {
-    proxyReqOpts.rejectUnauthorized = false;
-    return proxyReqOpts;
-  }
-}));
+app.use(
+  OPENSHIFT_PROXY_PATH,
+  proxy(`https://${process.env.OPENSHIFT_API}`, {
+    proxyReqOptDecorator(proxyReqOpts, _) {
+      proxyReqOpts.rejectUnauthorized = false;
+      return proxyReqOpts;
+    }
+  })
+);
 
 // prometheus metrics endpoint
 app.use(
@@ -79,6 +114,21 @@ const backendRequiredRoles = [
 const walkthroughs = [];
 let server;
 
+app.get('/services', (req, res) => {
+  res.setHeader('Content-Type', 'application/json');
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
+  if ((isOpenShift4() || process.env.CROSS_CONSOLE_LOCAL_DEV_MODE === 'true') && CROSS_CONSOLE_ENABLED) {
+    if (process.env.INSTALLED_SERVICES) {
+      res.send(process.env.INSTALLED_SERVICES);
+    } else {
+      res.send(JSON.stringify(LOCAL_DEV_INSTALLED_SERVICES));
+    }
+  } else {
+    res.send(JSON.stringify({}));
+  }
+});
+
 app.get('/customWalkthroughs', (req, res) => {
   res.status(200).json(walkthroughs);
 });
@@ -97,9 +147,8 @@ app.get('/user_walkthroughs', (req, res) =>
       if (data) {
         const { value } = data;
         return res.json(value);
-      } else {
-        return res.end();
       }
+      return res.end();
     })
     .catch(err => {
       console.error(err);
@@ -281,89 +330,88 @@ function resolveWalkthroughLocations(locations) {
   }
 
   const tmpDirPrefix = uuid.v4();
-  const mappedLocations = locations.map(
-    location =>
-      new Promise((resolve, reject) => {
-        const locationResultTemplate = { origin: location };
-        if (!location) {
-          return reject(new Error(`Invalid location ${location}`));
-        } else if (isPath(location)) {
-          console.log(`Importing walkthrough from path ${location}`);
-          const locationResult = Object.assign(
-            {
-              parentId: path.basename(location),
-              walkthroughLocationInfo: Object.assign({}, WALKTHROUGH_LOCATION_DEFAULT, {
-                type: WALKTHROUGH_LOCATION_TYPE_PATH,
-                directory: path.basename(location)
-              })
-            },
-            locationResultTemplate,
-            { local: location }
-          );
-          return resolve(locationResult);
-        } else if (isGitRepo(location)) {
-          const clonePath = path.join(TMP_DIR, tmpDirPrefix);
-
-          // Need to parse out query params for walkthroughs, e.g custom directory
-          const cloneUrl = generateCloneUrlFromLocation(location);
-          const repoName = getWalkthroughRepoNameFromLocation(location);
-          const walkthroughParams = querystring.parse(url.parse(location).query);
-
-          console.log(`Importing walkthrough from git ${cloneUrl}`);
-          return gitClient
-            .cloneRepo(cloneUrl, clonePath)
-            .then(cloned => {
-              gitClient.latestLog(cloned.localDir).then(log => {
-                getWalkthroughHeader(cloned.localDir)
-                  .then(head => {
-                    let wtHeader;
-                    if (head === null) {
-                      wtHeader = null;
-                    } else {
-                      wtHeader = head.prettyName;
-                    }
-                    const walkthroughFolders = [];
-                    if (!Array.isArray(walkthroughParams.walkthroughsFolder)) {
-                      walkthroughFolders.push(walkthroughParams.walkthroughsFolder || 'walkthroughs');
-                    } else {
-                      walkthroughFolders.push(...walkthroughParams.walkthroughsFolder);
-                    }
-                    // Get the folders to import in the repository.
-                    const walkthroughInfos = walkthroughFolders.map(folder => {
-                      const walkthroughLocationInfo = Object.assign({}, WALKTHROUGH_LOCATION_DEFAULT, {
-                        type: WALKTHROUGH_LOCATION_TYPE_GIT,
-                        commitHash: log.latest.hash,
-                        commitDate: log.latest.date,
-                        remote: cloned.repoName,
-                        directory: folder,
-                        header: wtHeader
-                      });
-
-                      return Object.assign({}, locationResultTemplate, {
-                        parentId: `${repoName}-${path.basename(folder)}`,
-                        walkthroughLocationInfo,
-                        local: path.join(cloned.localDir, folder)
-                      });
-                    });
-                    resolve(walkthroughInfos);
-                  })
-                  .catch(reject);
-              });
+  const mappedLocations = locations.map(location =>
+    new Promise((resolve, reject) => {
+      const locationResultTemplate = { origin: location };
+      if (!location) {
+        return reject(new Error(`Invalid location ${location}`));
+      } else if (isPath(location)) {
+        console.log(`Importing walkthrough from path ${location}`);
+        const locationResult = Object.assign(
+          {
+            parentId: path.basename(location),
+            walkthroughLocationInfo: Object.assign({}, WALKTHROUGH_LOCATION_DEFAULT, {
+              type: WALKTHROUGH_LOCATION_TYPE_PATH,
+              directory: path.basename(location)
             })
-            .catch(reject);
-        }
+          },
+          locationResultTemplate,
+          { local: location }
+        );
+        return resolve(locationResult);
+      } else if (isGitRepo(location)) {
+        const clonePath = path.join(TMP_DIR, tmpDirPrefix);
+
+        // Need to parse out query params for walkthroughs, e.g custom directory
+        const cloneUrl = generateCloneUrlFromLocation(location);
+        const repoName = getWalkthroughRepoNameFromLocation(location);
+        const walkthroughParams = querystring.parse(url.parse(location).query);
+
+        console.log(`Importing walkthrough from git ${cloneUrl}`);
+        return gitClient
+          .cloneRepo(cloneUrl, clonePath)
+          .then(cloned => {
+            gitClient.latestLog(cloned.localDir).then(log => {
+              getWalkthroughHeader(cloned.localDir)
+                .then(head => {
+                  let wtHeader;
+                  if (head === null) {
+                    wtHeader = null;
+                  } else {
+                    wtHeader = head.prettyName;
+                  }
+                  const walkthroughFolders = [];
+                  if (!Array.isArray(walkthroughParams.walkthroughsFolder)) {
+                    walkthroughFolders.push(walkthroughParams.walkthroughsFolder || 'walkthroughs');
+                  } else {
+                    walkthroughFolders.push(...walkthroughParams.walkthroughsFolder);
+                  }
+                  // Get the folders to import in the repository.
+                  const walkthroughInfos = walkthroughFolders.map(folder => {
+                    const walkthroughLocationInfo = Object.assign({}, WALKTHROUGH_LOCATION_DEFAULT, {
+                      type: WALKTHROUGH_LOCATION_TYPE_GIT,
+                      commitHash: log.latest.hash,
+                      commitDate: log.latest.date,
+                      remote: cloned.repoName,
+                      directory: folder,
+                      header: wtHeader
+                    });
 
-        return reject(new Error(`${location} is neither a path nor a git repo`));
-      }).catch(err => {
-        console.error(err);
-        return undefined;
-      })
+                    return Object.assign({}, locationResultTemplate, {
+                      parentId: `${repoName}-${path.basename(folder)}`,
+                      walkthroughLocationInfo,
+                      local: path.join(cloned.localDir, folder)
+                    });
+                  });
+                  resolve(walkthroughInfos);
+                })
+                .catch(reject);
+            });
+          })
+          .catch(reject);
+      }
+
+      return reject(new Error(`${location} is neither a path nor a git repo`));
+    }).catch(err => {
+      console.error(err);
+      return undefined;
+    })
   );
 
-  return Promise.all(mappedLocations).then(promises => {
+  return Promise.all(mappedLocations).then(promises =>
     // Ignore all locations that could not be resolved
-    return flattenDeep(promises.filter(p => !!p));
-  });
+    flattenDeep(promises.filter(p => !!p))
+  );
 }
 
 /**
@@ -623,13 +671,19 @@ function getConfigData(req) {
     logoutRedirectUri = 'http://localhost:3006';
   }
   if (!process.env.OPENSHIFT_OAUTH_HOST) {
-    console.warn('OPENSHIFT_OAUTH_HOST not set, using OPENSHIFT_HOST instead. This is okay on OCP 3.11, but will not work on 4.x, see INTLY-2791.');
+    console.warn(
+      'OPENSHIFT_OAUTH_HOST not set, using OPENSHIFT_HOST instead. This is okay on OCP 3.11, but will not work on 4.x, see INTLY-2791.'
+    );
     process.env.OPENSHIFT_OAUTH_HOST = process.env.OPENSHIFT_HOST;
   }
 
   const masterUri = isOpenShift4() ? OPENSHIFT_PROXY_PATH : `https://${process.env.OPENSHIFT_HOST}`;
   const wssMasterUri = isOpenShift4() ? OPENSHIFT_PROXY_PATH : `wss://${process.env.OPENSHIFT_HOST}`;
-  const ssoLogoutUri = isOpenShift4() ? '/' : `https://${process.env.SSO_ROUTE}/auth/realms/openshift/protocol/openid-connect/logout?redirect_uri=${logoutRedirectUri}`;
+  const ssoLogoutUri = isOpenShift4()
+    ? '/'
+    : `https://${
+        process.env.SSO_ROUTE
+      }/auth/realms/openshift/protocol/openid-connect/logout?redirect_uri=${logoutRedirectUri}`;
 
   const installedServices = process.env.INSTALLED_SERVICES || '{}';
   return `window.OPENSHIFT_CONFIG = {
diff --git a/src/components/masthead/masthead.js b/src/components/masthead/masthead.js
@@ -1,5 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+// TODO: ENABLE WHEN WE ARE READY TO RELEASE CROSS CONSOLE
+// import { getAvailableApps, getSolutionExplorerServer } from '@rh-uxd/integration-core';
+// import { CrossNavHeader } from '@rh-uxd/integration-react';
 import {
   Brand,
   Button,
@@ -17,6 +20,8 @@ import {
 import { CogIcon, HelpIcon } from '@patternfly/react-icons';
 import accessibleStyles from '@patternfly/patternfly/utilities/Accessibility/accessibility.css';
 import { css } from '@patternfly/react-styles';
+// TODO: ENABLE WHEN WE ARE READY TO RELEASE CROSS CONSOLE
+// import rhiImage from '@rh-uxd/appservices-patternfly-core/styles/assets/Logo-Red_Hat-Managed_Integration-A-Reverse-RGB.png';
 import { withRouter } from 'react-router-dom';
 import { noop } from '../../common/helpers';
 import { connect, reduxActions } from '../../redux';
@@ -35,6 +40,8 @@ class Masthead extends React.Component {
       isHelpDropdownOpen: false,
       isUserDropdownOpen: false,
       showAboutModal: false
+      // showLogo: false,
+      // appList: null
     };
 
     this.onTitleClick = this.onTitleClick.bind(this);
@@ -48,6 +55,19 @@ class Masthead extends React.Component {
 
     this.onAboutModal = this.onAboutModal.bind(this);
     this.closeAboutModal = this.closeAboutModal.bind(this);
+
+    // TODO: ENABLE WHEN WE ARE READY TO RELEASE CROSS CONSOLE
+    // if (!this.state.appList) {
+    //   getAvailableApps(
+    //     process.env.REACT_APP_RHMI_SERVER_URL ? process.env.REACT_APP_RHMI_SERVER_URL : getSolutionExplorerServer(),
+    //     undefined,
+    //     undefined,
+    //     ['3scale', 'solution-explorer'],
+    //     !!process.env.REACT_APP_RHMI_SERVER_URL
+    //   ).then(apps => {
+    //     this.setState({ appList: apps, showLogo: true });
+    //   });
+    // }
   }
 
   onLogoutUser = () => {
@@ -106,6 +126,18 @@ class Masthead extends React.Component {
   getLogo = () => {
     let clusterType = '';
     let logoName = '';
+    // TODO: ENABLE ONCE WE ARE READY TO RELEASE CROSS CONSOLE.
+    // if (window.OPENSHIFT_CONFIG && this.state.showLogo) {
+    //   clusterType = window.OPENSHIFT_CONFIG.mockData ? 'localhost' : window.OPENSHIFT_CONFIG.clusterType;
+    //   if (clusterType === 'poc') {
+    //     logoName =
+    //       this.state.appList && this.state.appList.length > 0 ? rhiImage : managedIntegrationSolutionExplorerImg;
+    //   } else if (clusterType === 'osd') {
+    //     logoName =
+    //       this.state.appList && this.state.appList.length > 0 ? rhiImage : managedIntegrationSolutionExplorerImg;
+    //   } else {
+    //     logoName = this.state.appList && this.state.appList.length > 0 ? rhiImage : solutionExplorerImg;
+    //   }
     if (window.OPENSHIFT_CONFIG) {
       clusterType = window.OPENSHIFT_CONFIG.mockData ? 'localhost' : window.OPENSHIFT_CONFIG.clusterType;
       if (clusterType === 'poc') {
@@ -306,7 +338,16 @@ class Masthead extends React.Component {
         {showAboutModal && <AboutModal isOpen={showAboutModal} closeAboutModal={this.closeAboutModal} />}
       </React.Fragment>
     );
-
+    // TODO: ENABLE ONCE WE ARE READY TO SHOW CROSS CONSOLE.
+    //   return (
+    //     <CrossNavHeader
+    //     apps={this.state.appList}
+    //     currentApp={{ id: 'solution-explorer', name: 'Solution Explorer', rootUrl: window.location.href }}
+    //     logo={this.state.showLogo ? <Brand src={this.getLogo()} alt="Red Hat Solution Explorer" /> : null}
+    //     logoProps={logoProps}
+    //     headerTools={MastheadToolbar}
+    //   />
+    // );
     return (
       <PageHeader
         logo={<Brand src={this.getLogo()} alt="Red Hat Solution Explorer" />}
diff --git a/src/services/middlewareServices.js b/src/services/middlewareServices.js
diff --git a/yarn.lock b/yarn.lock
