whdalsrnt / console

Frontend Project for Open-source Multi & Hybrid Cloud Management Platform

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
MOCK	Mock Api information	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
DASHBOARD_ENABLED	Whether the dashboard service is open	X

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

The Web Console internally uses amCharts(both 4 and 5 versions) for charts.
Before using the Console, look carefully at amCharts' license.
You can download and use all amCharts 4 and 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,
  "CHARTS": "",
  "MAPS": "",
  "TIMELINE": "",
  "AM5_CHARTS": "",
  "AM5_MAPS": ""
 }
}

Run

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

npm install

npm run start:web

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

• Develop with local turbo cache server

TBU

👨‍👩‍👧 Author

See our OWNERS file.

 

📝 License

This project is Apache 2.0 licensed.