karmada-io · HappyLadySauce · May 4, 2025 · May 5, 2025 · May 6, 2025 · May 6, 2025
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
@@ -40,18 +40,102 @@ bash hack/local-up-karmada.sh
 ```
 
 The minimal environment consists of one host cluster and three member cluster, the host cluster is responsible for deploying karmada control-plane, after karmada control-plane is up, member clusters will be managed by karmada control-plane, member1 and member2 cluster will be managed in `push` mode, and the member3 cluster will be managed in `pull` mode. After you see the success tips for installing, you can start `api` project. To start the `api` project locally, you should fetch kubeconfig for `karmada-apiserver` and `karmada-host` context, you can get the file under the `$HOME/.kubeconfig/karmada.config`. Executing command `make karmada-dashboard-api` to build binary for `api` project, you can start `api` by 
-```shell
+<!-- ```shell
 _output/bin/${os name}/${os arch}/karmada-dashboard-api \
   --karmada-kubeconfig=${path/to/karmada.config} \
   --karmada-context=karmada-apiserver \
   --skip-karmada-apiserver-tls-verify \
   --kubeconfig=${path/to/karmada.config} \
   --context=karmada-host \
   --insecure-port=8000
+``` -->
+
+```shell
+./root/dashboard/_output/bin/linux/amd64/karmada-dashboard-api \
+  --karmada-kubeconfig=/root/.kube/karmada.config \
+  --karmada-context=karmada-apiserver \
+  --kubeconfig=/root/.kube/karmada.config \
+  --context=karmada-host \
+  --insecure-port=8000
 ```
+
 After that, you can start the dashboard fronted project, install frontend dependencies with `cd ui && pnpm install` firstly. And then start the dashboard fronted project by executing:
 ```shell
 cd ui
 pnpm run dashboard:dev
 ```
 then open your browser with `http://localhost:5173/`, if you can see the overview page of dashboard, it means everything is ok, start developing now.
+
+---
+
+# 开发
+
+## 架构
+Karmada dashboard项目由**后端**和**前端**部分组成。后端部分包含两个项目，`api`项目和`web`项目。`web`项目主要负责提供静态资源服务（包括页面静态文件和i18n翻译资源）以及转发前端的API请求。`api`项目主要负责通过使用`client-go` SDK与`karmada-host`和`karmada-apiserver`的apiserver服务交互来管理Kubernetes资源（CRUD操作），这部分的实现位于pkg目录中。
+
+前端部分是基于`pnpm`的monorepo项目。所有与前端项目相关的工程都位于`ui`目录中。`packages`目录主要存储可重用的前端组件，如`navigations`、`editors`，甚至`translation tools`。`apps`目录包含可以从外部直接访问的项目，如`dashboard`项目。在生产环境中，apps目录中的项目构建后，会通过Dockerfile中的`cp`命令将压缩的静态资源复制到容器中供外部访问。
+
+## 开发环境
+
+确保安装了以下软件并添加到您的路径中：
+
+- [Docker](https://docs.docker.com/engine/install/)
+- [Go](https://golang.org/dl/)（在[`go.mod`](go.mod)中检查所需版本）
+- [Node.js](https://nodejs.org/en/download)（在[`ui/package.json`](ui/package.json)中检查所需版本）
+- [Pnpm](https://pnpm.io/installation)
+
+## 入门指南
+
+克隆仓库后，首先您应该在本地机器上准备所有需要的镜像。
+您可以通过执行以下命令在线加载所有需要的镜像：
+```shell
+cp hack/images/image.list.load.online.example hack/images/image.list
+bash hack/ops/load-images.sh hack/images/image.list
+```
+如果您有私有注册表，您也可以通过在`image.list`中用私有注册表地址包装镜像来更改镜像。
+
+同时，您也可以在离线模式下加载镜像。在加载镜像之前，您需要预先在`hack/images/`文件夹中下载所有离线镜像文件，然后执行以下命令：
+```shell
+cp hack/images/image.list.load.offline.example hack/images/image.list
+bash hack/ops/load-images.sh hack/images/image.list
+```
+
+在您的机器上加载所有需要的镜像后，您可以执行代码来启动由kind提供支持的用于开发目的的最小环境。
+```shell
+bash hack/local-up-karmada.sh
+```
+
+最小环境由一个主集群和三个成员集群组成，主集群负责部署karmada控制平面，karmada控制平面启动后，成员集群将由karmada控制平面管理，member1和member2集群将以`push`模式管理，member3集群将以`pull`模式管理。当您看到安装成功提示后，您可以启动`api`项目。要在本地启动`api`项目，您应该获取`karmada-apiserver`和`karmada-host`上下文的kubeconfig，您可以在`$HOME/.kubeconfig/karmada.config`下获取文件。执行命令`make karmada-dashboard-api`构建`api`项目的二进制文件，您可以通过以下方式启动`api`：
+```shell
+./_output/bin/linux/amd64/karmada-dashboard-api \
+  --karmada-kubeconfig=/root/.kube/karmada.config \
+  --karmada-context=karmada-apiserver \
+  --skip-karmada-apiserver-tls-verify \
+  --kubeconfig=/root/.kube/karmada.config \
+  --context=karmada-host \
+  --insecure-port=8000
+```
+之后，您可以启动dashboard前端项目，首先通过`cd ui && pnpm install`安装前端依赖。然后通过执行以下命令启动dashboard前端项目：
+```shell
+cd ui
+pnpm run dashboard:dev
+```
+然后用浏览器打开`http://localhost:5173/`，如果您能看到dashboard的概览页面，说明一切正常，现在开始开发吧。
+
+## 开发构建项目脚本命令
+
+后端构建命令
+
+```bash
+cd /root/dashboard && make karmada-dashboard-api  && ./_output/bin/linux/amd64/karmada-dashboard-api --karmada-kubeconfig=/root/.kube/karmada.config --karmada-context=karmada-apiserver --kubeconfig=/root/.kube/karmada.config --context=karmada-host
+```
+
+```bash
+make karmada-dashboard-api  && ./_output/bin/linux/amd64/karmada-dashboard-api --karmada-kubeconfig=/root/.kube/karmada.config --karmada-context=karmada-apiserver --kubeconfig=/root/.kube/config --context=default
+```
+
+前端构建命令
+
+```bash
+cd ui && pnpm run dashboard:dev
+```
diff --git a/README-en.md b/README-en.md
@@ -0,0 +1,139 @@
+# Karmada-dashboard
+[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://github.com/kubernetes/dashboard/blob/master/LICENSE)
+
+Karmada Dashboard is a general-purpose, web-based control panel for Karmada which is a multi-cluster management project.
+![image](docs/images/readme-dashboard-en.png)
+
+## 🚀QuickStart
+
+### Prerequisites
+You need to have a Karmada installed on Kubernetes(aka. `host cluster`) and the [karmadactl](https://karmada.io/docs/installation/install-cli-tools#install-karmadactl) or
+kubectl command-line tool must be configured to communicate with your host cluster and Karmada control plane.
+
+If you don't already have the Karmada, you can launch one by following this [tutorial](https://karmada.io/docs/installation/#install-karmada-for-development-environment).
+
+
+---
+### Install Karmada-dashboard
+In the following steps, we are going to install Karmada Dashboard on the `host cluster` where running the Karmada
+control plane components. We assume that Karmada was installed in namespace `karmada-system` and Karmada config is 
+located at `$HOME/.kube/karmada.config`, if this differs from your environment, please modify the following commands 
+accordingly. 
+
+1. Switch user-context of your Karmada config to `karmada-host`.
+
+```bash
+export KUBECONFIG="$HOME/.kube/karmada.config"
+kubectl config use-context karmada-host
+```
+
+Now, you should be able to see Karmada control plane components by following command:
+```
+kubectl get deployments.apps -n karmada-system
+```
+
+If everything works fine, you will get similar messages as following:
+```
+NAME                                  READY   UP-TO-DATE   AVAILABLE   AGE
+karmada-aggregated-apiserver          2/2     2            2           3d
+karmada-apiserver                     1/1     1            1           3d
+karmada-controller-manager            1/1     1            1           3d
+karmada-kube-controller-manager       1/1     1            1           3d
+karmada-scheduler                     2/2     2            2           3d
+karmada-webhook                       2/2     2            2           3d
+```
+
+2. Deploy Karmada Dashboard
+
+Clone this repo to your machine:
+```
+git clone https://github.com/karmada-io/dashboard.git
+```
+
+Change to the dashboard directory:
+```
+cd dashboard
+```
+
+Create the secret based on your Karmada config, the Karmada Dashboard will use this config to talk to the Karmada API server.
+```
+kubectl create secret generic kubeconfig --from-file=kubeconfig=$HOME/.kube/karmada.config -n karmada-system
+```
+
+Deploy Karmada Dashboard:
+```
+kubectl apply -k artifacts/overlays/nodeport-mode
+```
+
+This will deploy two components in `karmada-system` namespace:
+
+```
+kubectl get deployments.apps -n karmada-system                                                                                                                karmada-dev-linux-renhongcai: Fri Jan 10 16:08:38 2025
+
+NAME                                  READY   UP-TO-DATE   AVAILABLE   AGE
+karmada-dashboard-api                 1/1     1            1           2m
+karmada-dashboard-web                 1/1     1            1           2m
+...
+```
+
+Then you will be able to access the Karmada Dashboard by `http://your-karmada-host:32000`.
+Note that, the Karmada Dashboard service type is `NodePort`, this exposes the dashboard on a specific port on each node
+of your `host cluster`, allowing you to access it via any node's IP address and that port.
+
+You also can use `kubectl port-forward` to forward a local port to the Dashboard's backend pod:
+```
+kubectl port-forward -n karmada-system services/karmada-dashboard-web --address 0.0.0.0 8000:8000
+```
+Then you can access it via `http://localhost:8000`.
+
+You still need the jwt token to login to the dashboard.
+
+3. Create Service Account
+
+switch user-context to karmada-apiserver:
+```bash
+kubectl config use-context karmada-apiserver
+```
+Create Service Account:
+```bash
+kubectl apply -f artifacts/dashboard/karmada-dashboard-sa.yaml
+```
+
+4. Get jwt token
+
+Execute the following code to get the jwt token:
+```bash
+kubectl -n karmada-system get secret/karmada-dashboard-secret -o go-template="{{.data.token | base64decode}}"
+```
+
+it should print results like this:
+```bash
+eyJhbGciOiJSUzI1NiIsImtpZCI6InZLdkRNclVZSFB6SUVXczBIRm8zMDBxOHFOanQxbWU4WUk1VVVpUzZwMG8ifQ.eyJpc3MiOiJrdWJlcm5ldGVzL3NlcnZpY2VhY2NvdW50Iiwia3ViZXJuZXRlcy5pby9zZXJ2aWNlYWNjb3VudC9uYW1lc3BhY2UiOiJrYXJtYWRhLXN5c3RlbSIsImt1YmVybmV0ZXMuaW8vc2VydmljZWFjY291bnQvc2VjcmV0Lm5hbWUiOiJrYXJtYWRhLWRhc2hib2FyZC10b2tlbi14NnhzcCIsImt1YmVybmV0ZXMuaW8vc2VydmljZWFjY291bnQvc2VydmljZS1hY2NvdW50Lm5hbWUiOiJrYXJtYWRhLWRhc2hib2FyZCIsImt1YmVybmV0ZXMuaW8vc2VydmljZWFjY291bnQvc2VydmljZS1hY2NvdW50LnVpZCI6ImE5Y2RkZDc3LTkyOWYtNGM0MS1iZDY4LWIzYWVhY2E0NGJiYiIsInN1YiI6InN5c3RlbTpzZXJ2aWNlYWNjb3VudDprYXJtYWRhLXN5c3RlbTprYXJtYWRhLWRhc2hib2FyZCJ9.F0BqSxl0GVGvJZ_WNwcEFtChE7joMdIPGhv8--eN22AFTX34IzJ_2akjZcWQ63mbgr1mVY4WjYdl7KRS6w4fEQpqWkWx2Dfp3pylIcMslYRrUPirHE2YN13JDxvjtYyhBVPlbYHSj7y0rvxtfTr7iFaVRMFFiUbC3kVKNhuZtgk_tBHg4UDCQQKFALGc8xndU5nz-BF1gHgzEfLcf9Zyvxj1xLy9mEkLotZjIcnZhwiHKFYtjvCnGXxGyrTvQ5rgilAxBKv0TcmjQep_TG_Q5M9r0u8wmxhDnYd2a7wsJ3P3OnDw7smk6ikY8UzMxVoEPG7XoRcmNqhhAEutvcJoyw
+```
+
+### Login Dashboard
+Now open Karmada-dashboard with url [http://your-karmada-host:32000 ]()
+
+copy the token you just generated and paste it into the Enter token field on the login page. 
+![image](docs/images/readme-login-en.png)
+Once the process of authentication passed, you can use karmada dashboard freely. You can follow the Usage of karmada-dashboard to have a quick experience of  karmada dashboard.
+
+## Meeting
+
+Regular Meeting For dashboard:
+* Wednesday at 14:30 UTC+8 (Chinese)(biweekly). [Convert to your timezone](https://www.thetimezoneconverter.com/?t=14%3A30&tz=GMT%2B8&).
+* There isn't a dedicated English meeting yet. If you have any topics to discuss, please join [the community meeting](https://github.com/karmada-io/karmada?tab=readme-ov-file#meeting).
+
+Resources:
+- [Meeting Notes and Agenda](https://docs.google.com/document/d/1dX3skCE-QRBWzABq3O9cG7yhIDUWLYWmg7kGq8UHU6s/edit)
+- [Meeting Calendar](https://calendar.google.com/calendar/embed?src=a71aae8a75e3558a90683596c71382b8195bf7c84cb50e6e75d1a3e64e08480b%40group.calendar.google.com&ctz=Asia%2FShanghai) | [Subscribe](https://calendar.google.com/calendar/u/1?cid=YTcxYWFlOGE3NWUzNTU4YTkwNjgzNTk2YzcxMzgyYjgxOTViZjdjODRjYjUwZTZlNzVkMWEzZTY0ZTA4NDgwYkBncm91cC5jYWxlbmRhci5nb29nbGUuY29t)
+- [Meeting Link](https://zoom.us/j/97070047574?pwd=lXha0Sqngw4mwtmArP1sjsLMMXk34z.1)
+
+## 💻Contributing
+Karmada dashboard is still catching up with the features of Karmada, we have only implemented the basic functionalities currently. 
+If you want to contribute to the development of the Karmada dashboard, you can refer to the document of development, we are happy to see more contributors join us.
+Please feel free to submit issues or pull requests to our repository.
+
+## License
+
+Karmada-dashboard is under the Apache 2.0 license. See the [LICENSE](LICENSE) file for details.