Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cloudforet-io/console
Frontend Project for Open-source Multi & Hybrid Cloud Management Platform
https://github.com/cloudforet-io/console
composition-api console core frontend vue
Last synced: about 2 months ago
JSON representation
Frontend Project for Open-source Multi & Hybrid Cloud Management Platform
- Host: GitHub
- URL: https://github.com/cloudforet-io/console
- Owner: cloudforet-io
- License: apache-2.0
- Created: 2022-09-05T01:06:16.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-04-12T08:36:51.000Z (5 months ago)
- Last Synced: 2024-04-12T10:14:18.969Z (5 months ago)
- Topics: composition-api, console, core, frontend, vue
- Language: Vue
- Homepage: https://console-cloudforet.vercel.app
- Size: 151 MB
- Stars: 38
- Watchers: 7
- Forks: 27
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Authors: AUTHORS
Awesome Lists containing this project
README
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](./docs) directory.
[](https://sourcerer.io/fame/wesky93/spaceone-dev/console/links/0)[](https://sourcerer.io/fame/wesky93/spaceone-dev/console/links/1)[](https://sourcerer.io/fame/wesky93/spaceone-dev/console/links/2)[](https://sourcerer.io/fame/wesky93/spaceone-dev/console/links/3)[](https://sourcerer.io/fame/wesky93/spaceone-dev/console/links/4)[](https://sourcerer.io/fame/wesky93/spaceone-dev/console/links/5)[](https://sourcerer.io/fame/wesky93/spaceone-dev/console/links/6)[](https://sourcerer.io/fame/wesky93/spaceone-dev/console/links/7)
## 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](https://cloudforet.io/docs/setup_operation/quick_install).
### 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/.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](https://www.amcharts.com/online-store/licenses-explained/).
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](https://www.amcharts.com/online-store/) and configure it to your config file with the following format:
```json
{
"AMCHARTS_LICENSE": {
"ENABLED": true,
"CHARTS": "",
"MAPS": "",
"TIMELINE": "",
"AM5_CHARTS": "",
"AM5_MAPS": ""
}
}
```
## Run
You can run the Web Console on your local with following commands.
```shell
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](http://storybook.developer.spaceone.dev/).
You can see the description of the Mirinae in the [Mirinae package](./packages/mirinae/README.md).
## Contributing
TBU
## 👨👩👧 Author
See our [OWNERS](https://github.com/cloudforet-io/console/blob/master/AUTHORS) file.
## 📝 License
This project is [Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0) licensed.