Cloudforet Console

 

The present repository contains the source code of the Cloudforet Web Console application and related packages such as Mirinae which is the design system of the web console.

Documentation

The documentation for the Cloudforet Console is located under the docs directory.

Getting Started

To run the Web Console, you need follow the steps below.

1. Configure the backend services

The Cloudforet Web Console needs backend services to run.
You can see the details in the Cloudforet Quick Install Guide.

2. Set up the configuration file

To run the Web Console, you need to set up the environment configuration file.

The configuration file is located in the apps/web/public/config directory.
The default configuration file is apps/web/public/config/default.json.

For your development environment, you can copy apps/web/public/config/development.sample.json to apps/web/public/config/<environment>.json and modify it.

• for development environment: apps/web/public/config/development.json
• for production environment: apps/web/public/config/production.json

The final configuration file will be generated by merging the default configuration file and the environment configuration file.

Config Description

Name	Description	Required
CONSOLE_API	The endpoint of the Console API	O
CONSOLE_API_V2	The endpoint of the Console API V2	O
GTAG_ID	Google analytics Id	X
GTM_ID	Google tag manager Id	X
DOMAIN_NAME	Tenancy name	X
DOMAIN_NAME_REF	In case of hostname, it will extract the domain name from the url. In case of config, it will take DOMAIN_NAME value at the config file.	X
ADMIN_DOMAIN	Root domain name	X
AMCHARTS_LICENSE	License information of amcharts	X
DEV	Development configuration. Refer to the [Development Configuration](###Development Configuration) section for details.	X
ASSET_PATH	Asset endpoint information	X
DOMAIN_IMAGE	The url of the image used for the SignIn page and GNB	X
DOCS	Information for creating related document links. - Array of objects with labels and links - Support ejs template grammar - Provided variable: lang (User language code. e.g. "en")	X
CONTACT_LINK	Define the 'contact us' link on the SignIn page	X

3. Add your chart license keys to your config file (Optional)

The Web Console internally uses amCharts 5 for charts.
Before using the Console, look carefully at amCharts' license.
You can download and use all amCharts 5 products for free.
The only limitation of the free version is that a small amCharts logo will be displayed in the corner of your charts.
If you’d rather have your charts without any branding, please purchase a commercial license and configure it to your config file with the following format:

{
 "AMCHARTS_LICENSE": {
  "ENABLED": true,
  "AM5_CHARTS": "",
  "AM5_MAPS": ""
 }
}

Run

You can run the Web Console on your local with following commands.

npm install

npm run start:web

Development Configuration

Configuration for DEV in the config file. Follow the example at apps/web/public/config/development.sample.json.

Name	Description	Required
ENABLED	boolean(false). Whether to use dev config or not.	X
MOCK	Mock mode configuration. Refer to the [Mock Configuration](####Mock Mode Configuration) section for details.	X
AUTH	Authentication configuration. Refer to the [Authentication Configuration](####Auth Configuration) section for details.	X

Mock Mode Configuration

Configuration for DEV.MOCK in the config file.

Name	Description	Required
ENABLED	boolean(false). Whether apply mock mode to api requests except for reflection apis.	X
REFLECTION_V1	boolean(false). Whether to apply mock mode to reflection api v1 or not.	X
REFLECTION_V2	boolean(false). Whether to apply mock mode to reflection api v2 or not.	X
ENDPOINT_V1	string(""). Mock server endpoint for console api v1.	X
ENDPOINT_V2	string(""). Mock server endpoint for console api v2.	X
API_LIST_V1	array of string([]). List of api v1 to enable mock mock mode. Refer to the [Rules for API_LIST](#####Rules for DEV.MOCK.API_LIST_V1 and DEV.MOCK.API_LIST_V2) section for details.	X
API_LIST_V2	List of api v2 to enable mock mock mode. Refer to the [Rules for API_LIST](#####Rules for DEV.MOCK.API_LIST_V1 and DEV.MOCK.API_LIST_V2) section for details.	X

Rules for DEV.MOCK.API_LIST_V1 and DEV.MOCK.API_LIST_V2

• If the api is not in the list, it will be called to the real server.
• If the api is in the list, it will be called to the mock server.
• The black list has higher priority. So if the api is in the list and the api is in the black list, it will be called to the real server.

e.g. [""] : All apis will be called to the mock server.
e.g. ["/identity/", "!/identity/domain/*"] : All apis in the /identity/* will be called to the mock server except for /identity/domain/* api.

Auth Configuration

Configuration for DEV.AUTH in the config file.

Name	Description	Required
ENABLED	boolean(false). Whether to use auth config or not.	X
SKIP_TOKEN_CHECK	Whether to skip checking token.	X
API_KEY	API key which is used instead of access token.	X

Testing

Set variables for e2e test

Add apps/web/playwright/local.env file into project root.

  USERNAME=testuser
  PASSWORD=password
  BASEURL=https://example.com/ 

• BASEURL is an optional variable. Default is http://localhost:8080

🧩 Mirinae - Cloudforet Design System

You can see the details in the Mirinae storybook.
You can see the description of the Mirinae in the Mirinae package.

Contributing

TBU

👨‍👩‍👧 Author

See our OWNERS file.

 

📝 License

This project is Apache 2.0 licensed.