INTLY-2346 openshift 4 support

package.json

@@ -1,19 +1,20 @@
 {
   "name": "integreatly-web-app",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "private": true,
   "proxy": "http://localhost:5001/",
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.7.2",
-    "@patternfly/react-core": "3.73.0",
     "@patternfly/patternfly": "2.20.2",
+    "@patternfly/react-core": "3.73.0",
     "asciidoctor.js": "1.5.7",
     "axios": "0.18.0",
     "body-parser": "^1.18.3",
     "classnames": "2.2.5",
     "client-oauth2": "4.2.1",
     "detect-browser": "3.0.0",
     "express": "4.16.3",
+    "express-http-proxy": "^1.5.1",
     "express-prometheus-middleware": "^0.6.1",
     "i": "0.3.6",
     "i18next": "11.6.0",
@@ -85,7 +86,7 @@
     "watch:css": "yarn build:css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/styles/index.scss -o src/styles/.css --watch --recursive",
     "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 OPENSHIFT_OAUTHCLIENT_ID=\"tutorial-web-app\" run-p -l watch:css start:local start:server",
+    "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: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",

server.js

@@ -13,13 +13,22 @@ const promMid = require('express-prometheus-middleware');
 const Prometheus = require('prom-client');
 const querystring = require('querystring');
 const flattenDeep = require('lodash.flattendeep');
+const proxy = require('express-http-proxy');
 const { sync, closeConnection, getUserWalkthroughs, setUserWalkthroughs, validUrl } = require('./model');
 
+const OPENSHIFT_PROXY_PATH = '/proxy/openshift';
+
 const app = express();
 
 const adoc = asciidoctor();
 
 app.use(bodyParser.json());
+app.use(OPENSHIFT_PROXY_PATH, proxy(`https://${process.env.OPENSHIFT_API}`, {
+  proxyReqOptDecorator: function(proxyReqOpts, _) {
+    proxyReqOpts.rejectUnauthorized = false
+    return proxyReqOpts;
+  }
+}));
 
 // prometheus metrics endpoint
 app.use(
@@ -30,6 +39,7 @@ app.use(
   })
 );
 
+const openshiftVersion = process.env.OPENSHIFT_VERSION || '3';
 const port = process.env.PORT || 5001;
 const configPath = process.env.SERVER_EXTRA_CONFIG_FILE || '/etc/webapp/customServerConfig.json';
 
@@ -487,10 +497,15 @@ function getWalkthroughHeader(basePath) {
   });
 }
 
+function isOpenShift4() {
+  return `${process.env.OPENSHIFT_VERSION}` === '4';
+}
+
 function getMockConfigData() {
   return `window.OPENSHIFT_CONFIG = {
     masterUri: 'mock-openshift-console-url',
     integreatlyVersion: '${process.env.INTEGREATLY_VERSION || ''}',
+    openshiftVersion: ${openshiftVersion},
     threescaleWildcardDomain: '${process.env.THREESCALE_WILDCARD_DOMAIN || ''}',
     optionalWatchServices: [],
     optionalProvisionServices: [],
@@ -609,22 +624,26 @@ function getConfigData(req) {
     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}`;
+
   return `window.OPENSHIFT_CONFIG = {
     clientId: '${process.env.OPENSHIFT_OAUTHCLIENT_ID}',
     accessTokenUri: 'https://${process.env.OPENSHIFT_OAUTH_HOST}/oauth/token',
     authorizationUri: 'https://${process.env.OPENSHIFT_OAUTH_HOST}/oauth/authorize',
     redirectUri: '${redirectHost}/oauth/callback',
     scopes: ['user:full'],
-    masterUri: 'https://${process.env.OPENSHIFT_HOST}',
-    wssMasterUri: 'wss://${process.env.OPENSHIFT_HOST}',
+    masterUri: '${masterUri}',
+    wssMasterUri: '${wssMasterUri}',
     ssoLogoutUri: 'https://${
       process.env.SSO_ROUTE
     }/auth/realms/openshift/protocol/openid-connect/logout?redirect_uri=${logoutRedirectUri}',
     threescaleWildcardDomain: '${process.env.THREESCALE_WILDCARD_DOMAIN || ''}',
     integreatlyVersion: '${process.env.INTEGREATLY_VERSION || ''}',
     clusterType: '${process.env.CLUSTER_TYPE || ''}',
     optionalWatchServices: ${JSON.stringify(arrayFromString(process.env.OPTIONAL_WATCH_SERVICES || '', ','))},
-    optionalProvisionServices: ${JSON.stringify(arrayFromString(process.env.OPTIONAL_PROVISION_SERVICES || '', ','))}
+    optionalProvisionServices: ${JSON.stringify(arrayFromString(process.env.OPTIONAL_PROVISION_SERVICES || '', ','))},
+    openshiftVersion: ${openshiftVersion}
   };`;
 }
 

src/common/docsHelpers.js

@@ -1,6 +1,7 @@
 import { DEFAULT_SERVICES, getDashboardUrl } from '../common/serviceInstanceHelpers';
 import { buildValidProjectNamespaceName, cleanUsername } from './openshiftHelpers';
 import { KIND_ROUTE } from '../services/openshiftServices';
+import { SERVICE_TYPES } from '../redux/constants/middlewareConstants';
 
 const getDocsForWalkthrough = (walkthroughId, middlewareServices, walkthroughResources) => {
   if (window.OPENSHIFT_CONFIG.mockData) {
@@ -17,16 +18,27 @@ const getDocsForWalkthrough = (walkthroughId, middlewareServices, walkthroughRes
   return Object.assign({}, middlewareAttrs, walkthroughAttrs, userAttrs, { 'walkthrough-id': walkthroughId });
 };
 
-const getUserAttrs = (walkthroughId, username) => ({
-  'openshift-host': window.OPENSHIFT_CONFIG.masterUri,
-  'project-namespace': buildValidProjectNamespaceName(username, 'shared'),
-  'walkthrough-namespace': buildValidProjectNamespaceName(
-    username,
-    walkthroughId || buildValidProjectNamespaceName(username, 'shared')
-  ),
-  'user-username': username,
-  'user-sanitized-username': cleanUsername(username)
-});
+const getUserAttrs = (walkthroughId, username) => {
+  let attrs = {
+    'openshift-host': window.OPENSHIFT_CONFIG.masterUri
+  };
+  if (username) {
+    attrs = Object.assign({}, attrs, {
+      'project-namespace': buildValidProjectNamespaceName(username, 'shared'),
+      'user-username': username,
+      'user-sanitized-username': cleanUsername(username)
+    });
+  }
+  if (!!username && !!walkthroughId) {
+    attrs = Object.assign({}, attrs, {
+      'walkthrough-namespace': buildValidProjectNamespaceName(
+        username,
+        walkthroughId || buildValidProjectNamespaceName(username, 'shared')
+      )
+    });
+  }
+  return attrs;
+};
 
 const getWalkthroughSpecificAttrs = (walkthroughId, walkthroughResources) =>
   Object.keys(walkthroughResources[walkthroughId] || {}).reduce((acc, resId) => {
@@ -76,7 +88,12 @@ const getMiddlewareServiceAttrs = middlewareServices => {
     });
   }
 
-  return output;
+  // Allow OpenShift 4 service additionalAttributes to be exposed
+  const additionalAttrsList = Object.values(middlewareServices.data)
+    .filter(svc => svc.type === SERVICE_TYPES.PROVISIONED_SERVICE)
+    .map(svc => svc.additionalAttributes || {});
+
+  return Object.assign({}, output, ...additionalAttrsList);
 };
 
 const getUrlFromMiddlewareServices = (middlewareServices, serviceName) => {

src/common/openshiftHelpers.js

@@ -8,6 +8,21 @@ const NAMESPACE_USERNAME_LENGTH = 10;
 // The length of the hash appended to the end of the namespace.
 const NAMESPACE_HASH_LENGTH = 4;
 
+// OpenShift versions
+const V4 = '4';
+const V3 = '3';
+
+/**
+ * Retrieve the OpenShift version that should be set on the window.
+ */
+const getOpenShiftVersion = (defaultTo = V3) => `${window.OPENSHIFT_CONFIG.openshiftVersion}` || defaultTo;
+
+const isOpenShift4 = () => getOpenShiftVersion() === V4;
+const isOpenShift3 = () => getOpenShiftVersion() === V3;
+
+const getMasterUri = () => window.OPENSHIFT_CONFIG.masterUri;
+const getWSMasterUri = () => window.OPENSHIFT_CONFIG.wssMasterUri;
+
 /**
  * Same as `buildValidProjectNamespaceName`, but with a hardcoded suffix
  */
@@ -45,11 +60,17 @@ const buildValidNamespaceDisplayName = (username, suffix) => `${username} - ${su
  * Get a sanitized version of a username, so it can be used to name OpenShift.
  * @param {string} username The username to sanitize.
  */
-const cleanUsername = username =>
-  username
+const cleanUsername = username => {
+  let sanitizedUsername = username
     .replace(/@/g, '-')
     .replace(/\./g, '-')
-    .replace(/\s/g, '-');
+    .replace(/\s/g, '-')
+    .replace(/:/g, '-');
+  if (sanitizedUsername.startsWith('kube-') || sanitizedUsername.startsWith('openshift-')) {
+    sanitizedUsername = `user-${sanitizedUsername}`;
+  }
+  return sanitizedUsername;
+};
 
 const trimmedHash = (namespace, length) =>
   shajs('sha256')
@@ -94,7 +115,7 @@ const findOrCreateOpenshiftResource = (
       if (resourceToCreateDef && resourceToCreateObj) {
         return create(resourceToCreateDef, resourceToCreateObj);
       }
-      create(resourceDef, resourceToFind);
+      return create(resourceDef, resourceToFind);
     }
     return Promise.resolve(foundResource);
   });
@@ -107,5 +128,12 @@ export {
   cleanUsername,
   buildValidNamespaceDisplayName,
   getUsersSharedNamespaceName,
-  getUsersSharedNamespaceDisplayName
+  getUsersSharedNamespaceDisplayName,
+  getOpenShiftVersion,
+  isOpenShift4,
+  isOpenShift3,
+  getMasterUri,
+  getWSMasterUri,
+  V3,
+  V4
 };

src/common/openshiftResourceDefinitions.js

@@ -62,6 +62,43 @@ const messagingUserDef = namespace => ({
   version: 'v1beta1',
   group: 'user.enmasse.io'
 });
+const syndesisDef = namespace => ({
+  name: 'syndesises',
+  namespace,
+  version: 'v1alpha1',
+  group: 'syndesis.io'
+});
+const packageManifestDef = namespace => ({
+  name: 'packagemanifests',
+  namespace,
+  version: 'v1',
+  group: 'packages.operators.coreos.com'
+});
+const catalogSourceConfigDef = namespace => ({
+  kind: 'CatalogSourceConfig',
+  name: 'catalogsourceconfigs',
+  namespace,
+  version: 'v1',
+  group: 'operators.coreos.com'
+});
+const operatorGroupDef = namespace => ({
+  name: 'operatorgroups',
+  namespace,
+  version: 'v1',
+  group: 'operators.coreos.com'
+});
+const subscriptionDef = namespace => ({
+  name: 'subscriptions',
+  namespace,
+  version: 'v1alpha1',
+  group: 'operators.coreos.com'
+});
+const csvDef = namespace => ({
+  name: 'clusterserviceversions',
+  namespace,
+  version: 'v1alpha1',
+  group: 'operators.coreos.com'
+});
 
 export {
   namespaceRequestDef,
@@ -75,5 +112,11 @@ export {
   secretDef,
   templateDef,
   addressSpaceDef,
-  messagingUserDef
+  messagingUserDef,
+  syndesisDef,
+  packageManifestDef,
+  catalogSourceConfigDef,
+  operatorGroupDef,
+  subscriptionDef,
+  csvDef
 };

src/components/installedAppsView/InstalledAppsView.js

@@ -175,6 +175,10 @@ class InstalledAppsView extends React.Component {
   }
 
   handleLaunchClicked(svc) {
+    if (svc.type === SERVICE_TYPES.PROVISIONED_SERVICE) {
+      this.props.handleLaunch(svc.name);
+      return;
+    }
     this.props.handleLaunch(svc.spec.clusterServiceClassExternalName);
   }