erda-project / erda-ui

Erda's frontend console UI, build with React, Typescript, webpack and vite.

Frontend UI for Erda platform.

📣 Introduction

Erda is an open-source platform created by Terminus to ensure the development of microservice applications. It provides DevOps, microservice governance, and multi-cloud management capabilities. The multi-cloud architecture based on Kubernetes and application-centric DevOps and microservice governance can make the development, operation, monitoring, and problem diagnosis of complex business applications simpler and more efficient.

For Technology stack and development process, please see here.

✨ Platforms

• DevOps platform
• Microservice Governance platform
• Multi-Cloud Management platform
• Edge computing platform
• Fast-Data platform

For a detailed introduction, please check the official website.

🖥 Environment Support

Modern browsers

Firefox	Chrome	Safari	Edge
last 2 versions	last 2 versions	last 2 versions	last 2 versions

🚀 Quick Start

Usage

Welcome to use Erda Cloud

Installation

Please use the following installation documents to install Erda.

• English(Coming soon)
• 简体中文

Run Erda-UI project

This repository contains many Node.JS packages. Each package has its own set of commands, but the most common commands are available from the root package.json and can be accessed using the npm run ... command. Just follow the four steps below to start.

# Step1 Install erda-ui cli to global
	npm i @erda-ui/cli -g


# Step2 Initialize the project of erda-ui
  # Run the following command in the root directory of erda-ui
	erda-ui init

  # What does this command do?
  # Generate initial config to the .env file. After successful running, the .env configuration file will be generated in the root directory of erda-ui.


# Step3 Start App
  # Run the following command in the directory of shell
  pnpm start

  # What does this command do?
  # Start the dev server, redirect /static/{module}/* to the corresponding module folder in public folder based on the .env file, and redirect /api/* to api server.

Architecture

Technology stack：

• UI library: Ant Design
• state management: cube-state
• i18n: i18next
• bundler: webpack(production) & vite(development)
• style: sass & tailwind

This project contain the following parts:

• cli: command line interface for erda-ui, help to quick setup develop environment and pack files to docker images.
• core: provide registration framework and core functions such as initialize cube-state and i18n etc.
• shell: provide layout, user and common components for business modules.
• scheduler: support module federation style development, register and navigate to multiple modules.
• modules: business modules, each of these can develop and publish standalone.

architecture of development mode

🔗 Links

• Erda Cloud
• Official Website
• User Docs
• Erda backend project

🤝 Contributing

We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues. If you'd like to improve code, check out the Development Instructions and have a good time! :)

Contact Us

If you have any questions, please feel free to contact us.

• Email: [email protected]
• Twitter: @ErdaProject
• 知乎：Erda 技术团队 (A Chinese knowledge community, similar to Quora.)
• 微信公众号（Wechat）:

• 钉钉用户群（Dingtalk）:

License

Erda ui is under the AGPL 3.0 license. See the LICENSE file for details.

erda-ui's Issues

npm run watch发生报错

根据readme,成功运行完成

	npm i @erda-ui/cli -g
	erda-ui init
        #core目录
       	npm run build
        # shell目录
        npm run watch

在运行npm run watch的时候提

示module not found

erda-ui init 命令无法执行

操作系统： Red Hat 4.8.5
node 版本: v6.17.1

git clone下erda-ui项目后，跟着README下的命令时出现问题

redundant scrollbars

Current Behavior

In the current version, scrollbars appear in some screens that should not be there. For example, the sidebar and the table header of the code quality access control.

Context

Fix the style for better user experience.

Your Environment

• Browser Name and version: Microsoft Edge Version 92.0.902.55 (Official build) (64-bit) & Google Chrome Version 92.0.4515.107 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): win10 19043.1110

npm run watch出现问题

环境: redhat ,win10
node版本：16.13.1
运行erda-ui init,core: npm run build后，在shell:// npm run watch下遇到如下报错

D:\project\erda-ui\shell>npm run watch

> @erda-ui/[email protected] watch
> cross-env-shell NODE_ENV=development 'webpack --progress --color -w'

================ remotes: =================
 {
  core: 'mf_core@/static/core/scripts/mf_core.js',
  admin: 'mf_admin@/static/admin/scripts/mf_admin.js',
  fdp: 'mf_fdp@/static/fdp/scripts/mf_fdp.js'
}
isProd: false v16.13.1
Installing shortcut: "C:\\Users\\hp\\AppData\\Roaming\\Microsoft\\Windows\\Start Menu\\Programs\\SnoreToast.lnk" "D:\\project\\erda-ui\\node_modules\\.pnpm\\[email protected]\\node_modules\\node-notifier\\vendor\\snoreToast\\snoretoast-x64.exe" Snore.DesktopToasts
10% building 0/2 entries 2260/2260 dependencies 62/903 modules[BABEL] Note: The code generator has deoptimised the styling of D:\project\erda-ui\node_modules\.pnpm\a[email protected]\node_modules\ace-builds\src-noconflict\ace.js as it exceeds the max of 500KB.
13% building 0/2 entries 4591/4600 dependencies 286/1596 modulesBrowserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
16% building 0/2 entries 5789/5800 dependencies 558/1854 modules[BABEL] Note: The code generator has deoptimised the styling of D:\project\erda-ui\node_modules\.pnpm\l[email protected]\node_modules\lodash\lodash.js as it exceeds the max of 500KB.
18% building 0/2 entries 6570/6600 dependencies 773/2093 modules[BABEL] Note: The code generator has deoptimised the styling of D:\project\erda-ui\node_modules\.pnpm\r[email protected][email protected]\node_modules\react-dom\cjs\react-dom.development.js as it exceeds the max of 500KB.
assets by path scripts/*.js 131 MiB
  assets by chunk 70.2 MiB (id hint: vendors) 90 assets
assets by path images/ 1.16 MiB
  assets by path images/*.svg 1020 KiB 51 assets
  assets by path images/*.png 162 KiB 12 assets
  asset images/favicon.0a1e6f6d21957d1e5c5f2dcacddc2c47.ico 7.54 KiB [emitted] [immutable] [from: app/static/favicon.ico]
assets by path ../ 805 KiB
  assets by path ../empty-holder/*.svg 15.7 KiB 5 assets
  assets by path ../*.js 572 KiB 3 assets
  assets by path ../*.xmind 140 KiB 2 assets
  assets by path ../*.xlsx 42 KiB 2 assets
  asset ../roboto-regular.ttf 27.5 KiB [emitted] [from: app/static/roboto-regular.ttf] [copied]
  asset ../favicon.ico 7.54 KiB [emitted] [from: app/static/favicon.ico] [copied]
asset index.html 6.08 KiB [emitted]
Entrypoint app 96 KiB = scripts/app.js
Entrypoint mf_share 108 KiB = scripts/mf_share.js
orphan modules 50.5 KiB [orphan] 36 modules
runtime modules 96.8 KiB 35 modules
modules by path ../ 25 MiB
  javascript modules 24.9 MiB 2619 modules
  json modules 128 KiB 8 modules
modules by path ./app/ 7.98 MiB 2318 modules
provide-module modules 1.68 KiB
  modules by path provide shared module (default) @erda-ui/ 84 bytes 2 modules
remote-module modules 72 bytes (remote) 72 bytes (share-init)
  modules by path remote core/ 60 bytes (remote) 60 bytes (share-init) 3 modules
  2 modules
consume-shared-module modules 168 bytes 4 modules
asset modules 16.3 KiB 3 modules
7 modules

ERROR in ./app/App-vite.tsx 79:596-627
Module not found: Error: Can't resolve './modules/extra/entry' in 'D:\project\erda-ui\shell\app'
resolve './modules/extra/entry' in 'D:\project\erda-ui\shell\app'
  using description file: D:\project\erda-ui\shell\package.json (relative path: ./app)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: D:\project\erda-ui\shell\package.json (relative path: ./app/modules/extra/entry)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        D:\project\erda-ui\shell\app\modules\extra\entry doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        D:\project\erda-ui\shell\app\modules\extra\entry.js doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        D:\project\erda-ui\shell\app\modules\extra\entry.jsx doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        D:\project\erda-ui\shell\app\modules\extra\entry.tsx doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        D:\project\erda-ui\shell\app\modules\extra\entry.ts doesn't exist
      .d.ts
        Field 'browser' doesn't contain a valid alias configuration
        D:\project\erda-ui\shell\app\modules\extra\entry.d.ts doesn't exist
      as directory
        D:\project\erda-ui\shell\app\modules\extra\entry doesn't exist
 @ ./app/index.js 14:2-22

ERROR in ./app/App.tsx 78:596-627
Module not found: Error: Can't resolve './modules/extra/entry' in 'D:\project\erda-ui\shell\app'
resolve './modules/extra/entry' in 'D:\project\erda-ui\shell\app'
  using description file: D:\project\erda-ui\shell\package.json (relative path: ./app)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: D:\project\erda-ui\shell\package.json (relative path: ./app/modules/extra/entry)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        D:\project\erda-ui\shell\app\modules\extra\entry doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        D:\project\erda-ui\shell\app\modules\extra\entry.js doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        D:\project\erda-ui\shell\app\modules\extra\entry.jsx doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        D:\project\erda-ui\shell\app\modules\extra\entry.tsx doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        D:\project\erda-ui\shell\app\modules\extra\entry.ts doesn't exist
      .d.ts
        Field 'browser' doesn't contain a valid alias configuration
        D:\project\erda-ui\shell\app\modules\extra\entry.d.ts doesn't exist
      as directory
        D:\project\erda-ui\shell\app\modules\extra\entry doesn't exist
 @ ./app/index.js 16:2-17

webpack 5.63.0 compiled with 2 errors in 131211 ms

初始化界面时，应该使用骨架屏填充

请教个关于config-page 组件的问题？

配置页面上的组件如果跟后台有交互(Http 请求)，那么如何体现在配置模板里？

我看到https://github.com/erda-project/erda-ui/blob/master/shell/app/config-page/mock/下的几个案例都没有体现和后台交互的配置或者关联细节。

有构建好的docker镜像吗

构建core模块时内存不足，已经分配到4G，有构建好的Docker 镜像吗

无法自己编译，已经设置4G内存了

Erda dashboard value view problem

What happened:

�when value below 0.005 percent, dashboard value round down view will not be readable.

What you expected to happen:

round down like 0.00 or other readable type.

Environment:

• Erda Cloud

DOP add external project Git warehouse regular verification problem

What happened:

When adding an item, when the first-level domain name exceeds six digits, the regular verification fails.

What you expected to happen:

The first-level domain name exceeds six digits and still passes verification.

Environment:

• Erda version: Erda Cloud

1.5版本报错

原先是直接运行的master版本的erda-ui，通过npm start没有问题。
通过git chekcout到1.5版本的web-ui之后，通过npm start 打开后，通过浏览器访问提示