Skip to content

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

License

Notifications You must be signed in to change notification settings

heeyoung1332/console

 
 

Repository files navigation

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(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

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.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 56.2%
  • TypeScript 27.0%
  • JavaScript 8.8%
  • MDX 7.8%
  • CSS 0.2%
  • HTML 0.0%