The UI microservice, grc-ui, is the governance and risk dashboard for Red Hat Advanced Cluster Management. (See grc-ui-api for the API Server microservice it uses)

The UI Platform is developed as an isomorphic React application. View the list of major components that are used to build this service:

• NodeJS
• Express
• React
• Handlebars
• Redux
• Webpack
• Babel
• Apollo/GraphQL
• IBM Carbon Design System
• RedHat PatternFly
• Jest
• Nightwatch

• Install the modules

  npm install

• Build the project

     npm run build
  or npm run build:watch
  or npm run build:production

SECURITY WARNING: The GRC UI provides an SSL certificate in /sslcert that is open to the public. In order to run this in production, you'll need to replace these certificates. For our production builds, we replace these certificates using its Helm chart.

1. The following environment variables need to be set to point to a running Openshift cluster. Your environment might resemble the following content:

   {
      "NODE_ENV": "development",
      "headerUrl": "<url-to-rhacm-console>",
      "API_SERVER_URL": "<url-to-openshift-apiserver>",
      "SERVICEACCT_TOKEN": "<openshift-token-to-authenticate>",
      "OAUTH2_CLIENT_ID": "multicloudingress",
      "OAUTH2_CLIENT_SECRET": "multicloudingresssecret",
      "OAUTH2_REDIRECT_URL": "https://localhost:3000/multicloud/policies/auth/callback",
   }

   The SERVICEACCT_TOKEN expires so if you need to get a new one:

   • From the UI...
     • Go to the RHACM Hub, enter the Hub login info, and hit “configure client” from the menu in the top right
   • With the CLI...

     • Login to the RHACM Hub with oc using the API Server URL and run

       oc whoami -t

2. Start the server for production by running the following command:

   npm run start:production

3. Start the server for development by running the following commands:

   npm run build:watch
   npm run start

   • Start the API server alongside it. See: grc-ui-api

5.Open a browser to https://localhost:3000/multicloud/policies and log in using your cluster admin credentials.

Run the following command to start all unit tests (run through Jest):

npm run test:unit

Note: It is required that the UI runs locally or can target a remote cluster to start the selenium based tests.

1. Before you run any cypress test, make sure the following envs are set.

   export OC_HUB_CLUSTER_URL=https://api.grcui-e2e.dev08.red-chesterfield.com:6443
   export OC_CLUSTER_USER=kubeadmin
   export OC_HUB_CLUSTER_PASS=XXXXXXXXX
   export OC_IDP=kube:admin

2. The RBAC tests require a set of users to exist in the remote cluster. To set up these users, first log in to your remote cluster. Decide on a password you'd like to use for these users. Then, from the grc-ui folder, run these commands (the script will also export OC_CLUSTER_USER, OC_HUB_CLUSTER_PASS, and OC_IDP to match the RBAC users and use in place of kubeadmin):

   export RBAC_PASS=<your-rbac-password>
   source ./build/rbac-setup.sh

   For reference, the following users will be created:

   USER	ACCESS	ROLE
   e2e-cluster-admin-cluster	Cluster	cluster-admin
   e2e-admin-cluster	Cluster	admin
   e2e-edit-cluster	Cluster	edit
   e2e-view-cluster	Cluster	view
   e2e-group-cluster	Cluster	view
   e2e-cluster-admin-ns	Namespace	cluster-admin for e2e-rbac-test-1
   e2e-admin-ns	Namespace	admin for e2e-rbac-test-1 view for e2e-rbac-test-2
   e2e-edit-ns	Namespace	edit for e2e-rbac-test-1
   e2e-view-ns	Namespace	view for e2e-rbac-test-1
   e2e-group-ns	Namespace	view for e2e-rbac-test-1

3. Optional: By default, cypress test runs against a live cluster. You can run cypress test against localhost. Set the environment parameter, CYPRESS_BASE_URL by running the following command:

   export CYPRESS_BASE_URL=https://localhost:3000

4. Run the following command to start the cypress test:

   npm run test:cypress

   To run the tests headless (i.e. with the browser running in the background):

   npm run test:cypress-headless

View the full list of npm scripts that are described in the following table:

Note: The build process leverages the Dll and DllReference plugins to extract vendor plugins for faster build times and improve browser caching. A separate bundle is created for 3rd-party client-side libraries. The generated bundle is sourced (public/dll.vendor.js) along with its manifest (vendor-manifest.json). If new client dependencies are added or existing versions of dependencies are updated, this module needs to be regenerated and recommitted back into source control. Run the following command npm run build:dll.

These are a few useful links that provide technical reference and best practices when developing for the platform.

• Carbon Components
• Carbon React Components
• Patternfly
• Webpack
• React Docs
• Thinking in React
• Redux
• Structuring Redux State
• React Best Practices
• Smart and Dumb Components
• Redux Best Practices