rkapoor10/harness-core-ui

Next Gen UI

This repo contains code used in the Harness CD Community Edition which is licensed under the PolyForm Shield License 1.0.0. This repo also contains code belonging to Harness CD Enterprise Plan which is licensed under the PolyForm Free Trial License 1.0.0. You may obtain a copy of these licenses in the licenses directory at the root of this repository.

Harness Core UI

Grouped Code Coverage report for master branch: Coverage Report

Important Links

• Workflow for creating docker image from any branch
• Release Build Workflows
• New Branch Cut Workflow

Documentation

Documentation

Getting Started

1. Install NodeJS v16. There are many ways to do this (choose any one):

   • Download relevant package from https://nodejs.org/download/release/v16.15.0/, unpack and install.
   • Use Homebrew: brew install node@16
   • If you already have Node installed, use nvm or n to install/select correct version. (see https://www.npmjs.com/package/n)

Note: Additional installation requirements for M1-based Macs found here

2. Install yarn package manager

brew install yarn

Note: More options here: https://classic.yarnpkg.com/en/docs/install

3. Clone this repo

git clone [email protected]:harness/harness-core-ui.git
cd harness-core-ui

4. Add config to make Harness GitHub Package Registry accessible. Before running this step, make sure your GitHub personal access token is authorized for both "wings-software" and "harness", step is here: https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating-with-saml-single-sign-on/authorizing-a-personal-access-token-for-use-with-saml-single-sign-on

yarn setup-github-registry

Note: This is only needed if this is the first UI project you are installing on your machine

5. Create self-assigned certificate before running the app

yarn generate-certificate

6. Install/Update/Refresh dependencies

yarn

Note: This will take some time the first time you run it. Subsequent runs should be near-instant. Run this everytime you change branches or take a pull. If there are no dependency changes, this is practically a no-op.

Note: This is a shorthand for the command yarn install. Read more here: https://classic.yarnpkg.com/en/docs/usage

7. Compile/Build the code and start the web-server in watch mode

yarn dev

Note: This will start the local server in watch mode with hot reloading. Any code changes will trigger fast patch rebuilds and refresh the page in the browser.

8. View in the browser

https://localhost:8181

Publishing

yarn build
yarn docker <tagname>

First command will create a production build (minified, optimised).

Second command will create a docker image and publish it to harness/nextgenui Dockerhub repo.

Configuring Proxies (optional)

You can configure/manage proxies for local development in the file webpack.config.js. Sample:

proxy: {
   '/cd/api': {
     logLevel: 'info',
     target: 'http://localhost:7457',
     pathRewrite: { '^/cd/api': '' }
  }
},

Note: These proxies are only relevant for local development. This config file is used by webpack-dev-server package, which we use to serve files locally. This is not used in the docker builds.

The docker builds all use nginx to serve the built files, whose configuration is stored at scripts/nginx.conf. This config is shared for prod builds, so please pay attention if making changes.

Auto-generating services

See src/services/README.md

Local development against remote environments

You can configure the application to use remote environments such as uat.harness.io, qa.harness.io or qb.harness.io to allow local UI development without the need to run backend services. To achieve this, two environment variables are available.

Variable	Default value	Description
BASE_URL	https://qa.harness.io/gateway	Location of backend services to access
TARGET_LOCALHOST	true	Whether to use local backend services. Set to false to use remote services
DISABLE_TYPECHECK	false	Whether to disable the ForkTsCheckerWebpackPlugin for local development
SEGMENT_TOKEN		Add your segment token here to enable telemetry for local development

These environment variables can be passed in a number of ways including being set in your .bashrc or .zshrc file, set in a .env file in the root of the application (see .env.example), or passed when starting the dev server as below.

TARGET_LOCALHOST=false yarn dev

Utilities

Run lint checks

yarn lint

Run unit tests

yarn test

Enabling feature flags in local

To enable a feature flag in local development mode, just add an entry to .env by prefixing the feature flag name with FF_ and setting its value to true and (re)start your development server.

For example, if you want to enable a feature flag named MY_FETAURE_FLAG. Just add an entry FF_MY_FEATURE_FLAG=true in .env file.

Note: This will only work when NODE_ENV=development is set.

Hotfix Process

1. Find out which release branch you need to hotfix. You can do that checking the currently deployed version in the environment you want to hotfix. For e.g. For prod environment, you can hit https://app.harness.io/ng/static/version.json to get the currently deployed version. (eg. 0.53.4)
2. Create a branch from the corresponding release branch (e.g. release/0.53.x) which you want to hotfix
3. Commit your changes on your branch
4. Bump up the patch version in package.json (eg. 0.53.4 -> 0.53.5)
5. Raise PR with these changes
6. When this PR gets merged, this Pipeline will create a new build for you automatically
7. Please inform Ops/QE team to deploy your new build, especially in QA, UAT or prod environment.
8. Make sure to raise a PR with the same changes (minus the version bump) for develop branch too. Otherwise, your changes will get overridden with next deployment.

For Windows environment setup only

Download Git bash for Windows

Use git bash for executing any git command, and it is also helpful to run scripts of package.json where shell script is used.

https://git-scm.com/download/win

Git clone

If you face any issue while taking clone of this repo in Windows operating system. Kindly refer below.

For development *NIX system is preferred. On Windows 10 you can use Ubuntu via WSL

Running scripts

To run various scripts of package.json , you need to install dev dependency "cross-env": "^7.0.3"(any latest version) in package.json. Example:-

1. To run this script "dev": "NODE_ENV=development webpack-dev-server --progress", just change it to "dev": "cross-env NODE_ENV=development webpack-dev-server --progress"
2. To run shell script "setup-github-registry": "sh scripts/setup-github-registry.sh", just change it to "setup-github-registry": "cross-env scripts/setup-github-registry.sh"

Note: Similarly you can update the scripts part wherever needed as per above to run in Windows environment.