Feat: Refactor the UI framework and remove b-design (#691)

* Feat: Refactor the UI framework and remove b-design Signed-off-by: barnettZQG <[email protected]> * Feat: optimize the style and the breadcrumb Signed-off-by: barnettZQG <[email protected]> * Feat: add the dependencies for the testing Signed-off-by: barnettZQG <[email protected]> * Fix: Variable @link-color is undefined Signed-off-by: barnettZQG <[email protected]> * Fix: Update the openssl package Signed-off-by: barnettZQG <[email protected]> --------- Signed-off-by: barnettZQG <[email protected]>
kubevela · Mar 13, 2023 · 443dfb8 · 443dfb8
1 parent 2e3bd62
commit 443dfb8
Show file tree

Hide file tree

Showing 219 changed files with 9,168 additions and 19,291 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -1,3 +1,7 @@
 # This file is a github code protect rule follow the codeowners https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/about-code-owners#example-of-a-codeowners-file
 
-*  @barnettZQG @wonderflow
+*  @barnettZQG @wonderflow
+
+pkg @barnettZQG @yangsoon @FogDong
+
+packages @barnettZQG
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -47,12 +47,4 @@ jobs:
       name: Check Frontend Code Style
     - run: yarn test
     - run: make check-diff
-      name: Check Server Code Style
-    - name: Build docker image
-      id: docker_build
-      uses: docker/build-push-action@v2
-      with:
-        context: ./
-        file: ./Dockerfile
-        push: false
-        tags: oamdev/velaux:latest
+      name: Check Server Code Style
diff --git a/.github/workflows/server-test.yml b/.github/workflows/server-test.yml
@@ -112,6 +112,14 @@ jobs:
         uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c
         with:
           submodules: true
+      - name: Build docker image
+        id: docker_build
+        uses: docker/build-push-action@v2
+        with:
+          context: ./
+          file: ./Dockerfile
+          push: false
+          tags: oamdev/velaux:latest
 
       - name: Tear down K3d if exist
         run: |
@@ -133,7 +141,6 @@ jobs:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           k3d-args: ${{ env.EGRESS_ARG }}
 
-
       - name: Setup K3d (Worker)
         uses: nolar/setup-k3d-k3s@293b8e5822a20bc0d5bcdd4826f1a665e72aba96
         with:
@@ -142,7 +149,6 @@ jobs:
           k3d-name: worker
           k3d-args: --kubeconfig-update-default=false --network=k3d-k3s-default ${{ env.EGRESS_ARG }}
 
-
       - name: Kind Cluster (Worker)
         run: |
           internal_ip=$(docker network inspect k3d-k3s-default|jq ".[0].Containers"| jq -r '.[]| select(.Name=="k3d-worker-server-0")|.IPv4Address' | cut -d/ -f1)
@@ -154,6 +160,7 @@ jobs:
         run: |
           make e2e-setup-core
           make start-addon-mock-server
+          make load-image
           
       - name: Run server e2e test
         run: |

diff --git a/.gitignore b/.gitignore
@@ -27,4 +27,5 @@ build
 package-lock.json
 yarn-error.log
 
-.DS_Store
+.DS_Store
+dist
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,5 +1,5 @@
-const fabric = require('@umijs/fabric');
-
 module.exports = {
-  ...fabric.prettier,
+  trailingComma: 'es5',
+  singleQuote: true,
+  printWidth: 120,
 };
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -2,7 +2,7 @@
 
 ## About VelaUX
 
-The [KubeVela](https://github.com/oam-dev/kubevela) User Experience (UX) Platform, it provides out-of-box application delivery and management platform.
+The [KubeVela](https://github.com/oam-dev/kubevela) User Experience (UX) Dashboard. Designed as an extensible, application-oriented delivery platform.
 
 To help us create a safe and positive community experience for all, we require all participants to adhere to the [Code of Conduct](https://github.com/oam-dev/kubevela/blob/master/CODE_OF_CONDUCT.md).
 

diff --git a/Dockerfile b/Dockerfile
@@ -34,7 +34,7 @@ RUN GO111MODULE=on CGO_ENABLED=0 GOOS=linux GOARCH=${TARGETARCH} \
 
 FROM ${BASE_IMAGE:-alpine:3.15@sha256:cf34c62ee8eb3fe8aa24c1fab45d7e9d12768d945c3f5a6fd6a63d901e898479}
 # This is required by daemon connecting with cri
-RUN apk add --no-cache ca-certificates bash expat
+RUN apk add --no-cache ca-certificates bash expat openssl-dev
 
 WORKDIR /
 

diff --git a/Makefile b/Makefile
@@ -87,6 +87,9 @@ install-addon:
 start-addon-mock-server:
 	go run ./e2e-test/addon &
 
+load-image:
+	k3d image import oamdev/velaux:latest || { echo >&2 "kind not installed or error loading image: $(VELA_CORE_TEST_IMAGE)"; exit 1; }
+
 .PHONY: e2e-server-test
 e2e-server-test:
 	go test -v -coverpkg=./... -coverprofile=/tmp/e2e_apiserver_test.out ./e2e-test

diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 
 ## Overview
 
-The [KubeVela](https://github.com/oam-dev/kubevela) User Experience (UX) Platform. Designed as an extensible, application-oriented delivery control panel.
+The [KubeVela](https://github.com/oam-dev/kubevela) User Experience (UX) Dashboard. Designed as an extensible, application-oriented delivery platform.
 
 ## Quick Start
 
@@ -19,14 +19,16 @@ Please refer to: [https://kubevela.net/docs/install](https://kubevela.net/docs/i
 
 Make sure you have installed [yarn](https://classic.yarnpkg.com/en/docs/install).
 
+Install frontend dependencies and build the frontend.
+
 ```shell
 yarn install
 yarn build
 ```
 
 #### Start the server
 
-1. Install the Go 1.19
+1. Install the Go 1.19+.
 2. Prepare a KubeVela core environment.
 
   ```shell
@@ -41,16 +43,24 @@ yarn build
 3. Init the dependencies.
 
   ```shell
-  vela addon enable ./addon
+  vela addon enable ./addon replicas=0
   ```
 
 4. Start the server on local
 
   ```shell
+  # Install all dependencies
   go mod tidy
+
+  # Setting the kube config
+  export KUBECONFIG=$(velad kubeconfig --host)
+
+  # Start the server
   make run-server
   ```
 
+Then, you can open the http://127.0.0.1:8000. More info refer to [contributing](./docs/contributing/velaux.md)
+
 ## Community
 
 - Slack:  [CNCF Slack](https://slack.cncf.io/) #kubevela channel (*English*)

diff --git a/docs/contributing/velaux.md b/docs/contributing/velaux.md
@@ -4,9 +4,9 @@
 
 > Docker v20.10.5+ (runc >= v1.0.0-rc93) or Linux system
 
-1. Install VelaCore
+### Install VelaCore
 
-* Download the binary.
+1. Download the binary.
 
     * MacOS/Linux
 
@@ -20,13 +20,13 @@
     powershell -Command "iwr -useb https://static.kubevela.net/script/install-velad.ps1 | iex"
     ```
 
-* Install
+2. Install
 
 ```bash
 velad install
 ```
 
-2. Install VelaUX environment
+3. Install VelaUX environment
 
 ```bash
 vela addon enable ./addon
@@ -38,16 +38,30 @@ Make sure you have installed [yarn](https://classic.yarnpkg.com/en/docs/install)
 
 ```shell
 yarn install
-yarn build
+
+## Build the frontend and watch the code changes
+yarn dev
 ```
 
-* Start the server
+### Start the server
 
 ```shell
+## Setting the KUBECONFIG environment
+export KUBECONFIG=$(velad kubeconfig --host)
+
 make run-server
 ```
 
-* Check the code style
+Waiting the server started, open http://127.0.0.1:8000 via the browser.
+
+Now, the local environment is built successfully, you could write the server or frontend code.
+
+Notes:
+
+- If you change the frontend code, it will take effect after the website refresh.
+- If you change the server code, it will take effect after restarted the server.
+
+### Check the code style
 
 ```shell
 # Frontend
@@ -56,7 +70,7 @@ yarn lint
 make reviewable
 ```
 
-* Test the code
+### Test the code
 
 Frontend:
 
@@ -71,8 +85,13 @@ make unit-test-server
 make e2e-server-test
 ```
 
-* Generate the OpenAPI schema
+### Generate the OpenAPI schema
 
 ```shell
 make build-swagger
 ```
+
+## References
+
+* UI framework: [@alifd/next](https://fusion.design/)
+* Icons: [react-icons](https://react-icons.github.io/react-icons)
diff --git a/e2e-test/suite_test.go b/e2e-test/suite_test.go
@@ -49,7 +49,7 @@ var token string
 const (
 	baseDomain   = "http://127.0.0.1:8001"
 	baseURL      = "http://127.0.0.1:8001/api/v1"
-	testNSprefix = "api-e2e-test-"
+	testNSprefix = "api-test-"
 )
 
 func TestE2eApiserverTest(t *testing.T) {

diff --git a/package.json b/package.json
@@ -7,22 +7,21 @@
     "repository": "github:kubevela/velaux",
     "scripts": {
         "dev": "NODE_ENV=dev webpack --progress --color --config scripts/webpack/webpack.dev.js --watch",
-        "build": "NODE_ENV=production webpack --progress --config scripts/webpack/webpack.prod.js",
+        "build": "yarn run build-theme && NODE_ENV=production webpack --progress --config scripts/webpack/webpack.prod.js",
         "lint": "yarn run lint:ts",
         "lint:ts": "eslint . --ext .js,.tsx,.ts --cache",
         "lint:fix": "yarn lint:ts --fix",
         "test": "yarn test:ui",
-        "test:ui": "yarn workspace @velaux/ui run test"
+        "test:ui": "yarn workspace @velaux/ui run test",
+        "build-theme": "yarn workspace @velaux/theme run build-theme"
     },
     "workspaces": {
         "packages": [
             "packages/*",
             "plugins-bundled/internal/*"
         ]
     },
-    "dependencies": {
-        "jquery": "3.6.1"
-    },
+    "dependencies": {},
     "devDependencies": {
         "browserslist": "^4.21.4",
         "@babel/core": "7.20.5",
@@ -76,6 +75,7 @@
         "@grafana/eslint-config": "5.1.0",
         "@typescript-eslint/parser": "5.42.0",
         "@typescript-eslint/eslint-plugin": "5.42.0",
+        "react-dev-utils": "^11.0.4",
         "typescript": "4.4.4"
     },
     "engines": {

diff --git a/packages/velaux-theme/bin/build.js b/packages/velaux-theme/bin/build.js
@@ -0,0 +1,66 @@
+'use strict';
+
+const path = require('path');
+const rmdir = require('rimraf');
+const webpack = require('webpack');
+const fs = require('fs');
+
+const BASE_DIR = path.dirname(__dirname);
+
+const config = require('../webpack.config.js');
+const distPath = path.join(process.cwd(), 'dist');
+
+function build(minimize = false) {
+  return new Promise((resolve, reject) => {
+    webpack(config({ minimize })).run((err, stats) => {
+      if (err) {
+        reject(err);
+      } else {
+        const errors = stats.toJson().errors;
+        if (errors.length) {
+          reject(
+            stats.toString({
+              chunkModules: false,
+            })
+          );
+        } else {
+          resolve(stats);
+        }
+      }
+    });
+  });
+}
+
+function emendLess() {
+  let less = fs.readFileSync(path.join(BASE_DIR, 'variables.less'), 'utf8');
+
+  less = less.replace(/\/\/ lessUnsupport[\s\S]*/g, '');
+  fs.writeFileSync(path.join(BASE_DIR, 'variables.less'), less);
+}
+
+async function buildTheme() {
+  // build
+  const start = Date.now();
+  console.log('# build');
+  await build();
+  console.log('# build minimize');
+  await build(true);
+
+  console.log('# emend less');
+  emendLess();
+
+  try {
+    fs.unlinkSync(path.join(distPath, 'next-noreset.min.js'));
+    fs.unlinkSync(path.join(distPath, 'next-noreset.js'));
+    fs.unlinkSync(path.join(distPath, 'next-noreset.var.min.js'));
+    fs.unlinkSync(path.join(distPath, 'next-noreset.var.js'));
+    fs.unlinkSync(path.join(distPath, 'next.var.min.js'));
+    fs.unlinkSync(path.join(distPath, 'next.var.js'));
+  } catch (e) {
+    console.log('remove next-noreset.js or next-noreset.min.js failed: ', e);
+  }
+  console.log('# build end, cost: ', Date.now() - start);
+  process.exit(0);
+}
+
+buildTheme();
diff --git a/packages/velaux-theme/icons.scss b/packages/velaux-theme/icons.scss
@@ -0,0 +1 @@
+@import "variables.scss";
diff --git a/packages/velaux-theme/icons.var.css b/packages/velaux-theme/icons.var.css
@@ -0,0 +1 @@
+@import "variables.scss";
diff --git a/packages/velaux-theme/index-noreset.scss b/packages/velaux-theme/index-noreset.scss
@@ -0,0 +1,5 @@
+@import "variables.scss";
+
+@import "~@alifd/next/index-noreset.scss";
+
+@import "icons.scss";
diff --git a/packages/velaux-theme/index-noreset.var.scss b/packages/velaux-theme/index-noreset.var.scss
@@ -0,0 +1,3 @@
+@import 'variables.scss2css.scss';
+@import '~@alifd/next/index-noreset.scss';
+@import 'icons.var.css';
diff --git a/packages/velaux-theme/index.js b/packages/velaux-theme/index.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('@alifd/next');
diff --git a/packages/velaux-theme/index.scss b/packages/velaux-theme/index.scss
@@ -0,0 +1,6 @@
+@import "variables.scss";
+
+// Base theme
+@import "~@alifd/next/index.scss";
+
+@import "icons.scss";
diff --git a/packages/velaux-theme/index.var.scss b/packages/velaux-theme/index.var.scss
@@ -0,0 +1,4 @@
+
+@import 'variables.scss2css.scss';
+@import "~@alifd/next/index.scss";
+@import 'icons.var.css';