Skip to content

Commit 71472ca

Browse files
karmada-botkarmada-bot
authored
Merge pull request #41 from warjiang/refactor/dashboard
Refactor dashboard
2 parents b53d245 + beb212c commit 71472ca

File tree

261 files changed

+30751
-28
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

261 files changed

+30751
-28
lines changed

‎.github/workflows/push-image.yml

+119-28
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,130 @@
1-
name: LatestImage
1+
name: Build Images
22

33
on:
44
push:
5-
branches: [main]
5+
branches:
6+
- main
7+
- feature/*
68

79
jobs:
8-
build-and-push:
9-
# prevent job running from forked repository, otherwise
10-
# 1. running on the forked repository would fail as missing necessary secret.
11-
# 2. running on the forked repository would use unnecessary GitHub Action time.
12-
if: ${{ github.repository == 'karmada-io/dashboard' && github.ref == 'refs/heads/main' }}
10+
build-fronted:
1311
runs-on: ubuntu-latest
14-
strategy:
15-
matrix:
16-
node-version: [14.18.x]
1712
steps:
18-
- uses: actions/checkout@v2
19-
- name: Use Node.js ${{ matrix.node-version }}
20-
uses: actions/setup-node@v1
13+
- name: Checkout
14+
uses: actions/checkout@v4
15+
- name: Use Node.js 20
16+
uses: actions/setup-node@v3
2117
with:
22-
node-version: ${{ matrix.node-version }}
23-
- name: Build
18+
node-version: 20
19+
- uses: pnpm/action-setup@v3
20+
with:
21+
version: 8.15.6
22+
- name: Build dashboard
23+
run: |
24+
echo "Start build"
25+
pnpm --version
26+
cd ui
27+
pnpm install -w
28+
pnpm run dashboard:build
29+
- name: Upload artifact
30+
uses: actions/upload-pages-artifact@v2
31+
with:
32+
path: ui/apps/dashboard/dist
33+
name: dashboard_artifact
34+
35+
build-and-push-web:
36+
runs-on: ubuntu-latest
37+
needs: [ "build-fronted" ]
38+
env:
39+
IMAGE_NAME: karmada/karmada-dashboard-web
40+
BINARY_NAME: karmada-dashboard-web
41+
steps:
42+
- name: Checkout
43+
uses: actions/checkout@v4
44+
- uses: actions/setup-go@v5
45+
with:
46+
go-version: '^1.22.2'
47+
- name: Detect misc info
48+
id: misc
49+
run: |
50+
echo "os=$(go env GOHOSTOS)" >> $GITHUB_OUTPUT
51+
echo "arch=$(go env GOHOSTARCH)" >> $GITHUB_OUTPUT
52+
echo "image_name=$IMAGE_NAME" >> $GITHUB_OUTPUT
53+
echo "binary_name=$BINARY_NAME" >> $GITHUB_OUTPUT
54+
- name: Login to DockerHub
55+
uses: docker/login-action@v3
56+
with:
57+
username: ${{ secrets.DOCKERHUB_USER_NAME }}
58+
password: ${{ secrets.DOCKERHUB_TOKEN }}
59+
- name: Build karmada-dashboard-web binary
60+
run: make bin-karmada-dashboard-web
61+
- name: Download a Build Artifact
62+
uses: actions/download-artifact@v2
63+
with:
64+
name: dashboard_artifact
65+
path: .
66+
- name: Unzip Artifact
2467
run: |
25-
echo "start build"
26-
npm install
27-
npm run build
28-
docker build . --file Dockerfile --tag ${{ secrets.SWR_REGISTRY }}/karmada-dashboard:latest
29-
- name: Login in to Docker Hub
30-
uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
31-
with:
32-
registry: ${{ secrets.SWR_REGISTRY }}
33-
username: ${{ secrets.SWR_REGISTRY_USER_NAME }}
34-
password: ${{ secrets.SWR_REGISTRY_PASSWORD }}
68+
pwd
69+
mkdir -p _output/bin/${{ steps.misc.outputs.os }}/${{ steps.misc.outputs.arch }}/dist
70+
tar xf ./artifact.tar -C _output/bin/${{ steps.misc.outputs.os }}/${{ steps.misc.outputs.arch }}/dist
71+
ls -al _output/bin
72+
ls -al _output/bin/${{ steps.misc.outputs.os }}/${{ steps.misc.outputs.arch }}/dist
73+
- name: Extract metadata for the Docker image
74+
id: meta
75+
uses: docker/metadata-action@v5
76+
with:
77+
images: ${{ steps.misc.outputs.image_name }}
78+
- name: Build and push image
79+
uses: docker/build-push-action@v5
80+
with:
81+
file: "cluster/images/build-web.Dockerfile"
82+
context: "_output/bin/${{ steps.misc.outputs.os }}/${{ steps.misc.outputs.arch }}"
83+
push: true
84+
tags: ${{ steps.meta.outputs.tags }}
85+
build-args: |
86+
BINARY=${{ steps.misc.outputs.binary_name }}
87+
BUILD_PLATFORMS=${{ steps.misc.outputs.os }}/${{ steps.misc.outputs.arch }}
88+
3589
36-
- name: Push image
90+
91+
build-and-push-api:
92+
runs-on: ubuntu-latest
93+
env:
94+
IMAGE_NAME: karmada/karmada-dashboard-api
95+
BINARY_NAME: karmada-dashboard-api
96+
steps:
97+
- name: Checkout
98+
uses: actions/checkout@v4
99+
- uses: actions/setup-go@v5
100+
with:
101+
go-version: '^1.22.2'
102+
- name: Detect misc info
103+
id: misc
37104
run: |
38-
echo "push image"
39-
docker push ${{ secrets.SWR_REGISTRY }}/karmada-dashboard:latest
105+
echo "os=$(go env GOHOSTOS)" >> $GITHUB_OUTPUT
106+
echo "arch=$(go env GOHOSTARCH)" >> $GITHUB_OUTPUT
107+
echo "image_name=$IMAGE_NAME" >> $GITHUB_OUTPUT
108+
echo "binary_name=$BINARY_NAME" >> $GITHUB_OUTPUT
109+
- name: Login to DockerHub
110+
uses: docker/login-action@v3
111+
with:
112+
username: ${{ secrets.DOCKERHUB_USER_NAME }}
113+
password: ${{ secrets.DOCKERHUB_TOKEN }}
114+
- name: Extract metadata for the Docker image
115+
id: meta
116+
uses: docker/metadata-action@v5
117+
with:
118+
images: ${{ steps.misc.outputs.image_name }}
119+
- name: Build karmada-dashboard-api binary
120+
run: make karmada-dashboard-api
121+
- name: Build and push image
122+
uses: docker/build-push-action@v5
123+
with:
124+
file: "cluster/images/Dockerfile"
125+
context: "_output/bin/${{ steps.misc.outputs.os }}/${{ steps.misc.outputs.arch }}"
126+
push: true
127+
tags: ${{ steps.meta.outputs.tags }}
128+
build-args: |
129+
BINARY=${{ steps.misc.outputs.binary_name }}
130+
BUILD_PLATFORMS=${{ steps.misc.outputs.os }}/${{ steps.misc.outputs.arch }}

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,7 @@ pnpm-debug.log*
2222
*.njsproj
2323
*.sln
2424
*.sw?
25+
_output
26+
# sub chart tgz
27+
charts/*/charts
28+
cmd/ops

‎DEVELOPMENT.md

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Development
2+
3+
## Architecture
4+
The Karmada dashboard project consists of **backend** and **frontend** parts. The part of backend includes two projects, `api` and `web` project. The `web` project is mainly responsible for serving static resources (including static files of pages and i18n translation resources) and forwarding API requests for frontend. The `api` project is primarily responsible for managing Kubernetes resources (CRUD operations) by interfacing with the apiserver service of `karmada-host` and `karmada-apiserver` by using the `client-go` SDK, the implementation of this part is located in the pkg directory.
5+
6+
The part of frontend is a monorepo project based on `pnpm`. All engineering related to the frontend project is located in the `ui` directory. The `packages` directory mainly stores reusable frontend components such as `navigations`, `editors`, or even `translation tools`. The `apps` directory contains projects that can be accessed directly from the outside, such as the `dashboard` project. In the production environment, after the projects in the apps directory are built, the compressed static resources are copied into the container using the `cp` command in the Dockerfile for external access.
7+
8+
9+
## Development Environment
10+
11+
Make sure the following software is installed and added to your path:
12+
13+
- [Docker](https://docs.docker.com/engine/install/)
14+
- [Go](https://golang.org/dl/) (check the required version in [`go.mod`](go.mod))
15+
- [Node.js](https://nodejs.org/en/download) (check the required version in [`ui/package.json`](ui/package.json))
16+
- [Pnpm](https://pnpm.io/installation)
17+
18+
19+
20+
## Getting Started
21+
22+
After cloning the repository, first you should prepare all required images in your local machine.
23+
You can load all required images online by executing:
24+
```shell
25+
cp hack/images/image.list.load.online.example hack/images/image.list
26+
bash hack/ops/load-images.sh hack/images/image.list
27+
```
28+
If you have private registry, you can also change images in `image.list` by wrapping image with your private registry address.
29+
30+
Meanwhile, you can load images in offline mode. Before loading images, you need download all offline image files in the folder
31+
`hack/images/` in advance, and then you can execute the following command:
32+
```shell
33+
cp hack/images/image.list.load.offline.example hack/images/image.list
34+
bash hack/ops/load-images.sh hack/images/image.list
35+
```
36+
37+
After loading all required images in your machine, you execute the code to start a minimal environment powered by kind for purpose of developing.
38+
```shell
39+
bash hack/local-up-karmada.sh
40+
```
41+
42+
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
43+
```shell
44+
_output/bin/${os name}/${os arch}/karmada-dashboard-api \
45+
--karmada-kubeconfig=${path/to/karmada.config} \
46+
--karmada-context=karmada-apiserver \
47+
--skip-karmada-apiserver-tls-verify \
48+
--kubeconfig=${path/to/karmada.config} \
49+
--context=karmada-host \
50+
--insecure-port=8000
51+
```
52+
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:
53+
```shell
54+
cd ui
55+
pnpm run dashboard:dev
56+
```
57+
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.

‎Makefile

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
GOOS ?= $(shell go env GOOS)
2+
GOARCH ?= $(shell go env GOARCH)
3+
VERSION ?= $(shell hack/version.sh)
4+
# Images management
5+
REGISTRY ?= "docker.io/karmada"
6+
REGISTRY_USER_NAME ?= ""
7+
REGISTRY_PASSWORD ?= ""
8+
REGISTRY_SERVER_ADDRESS ?= ""
9+
10+
TARGETS := karmada-dashboard-api
11+
12+
13+
# Build binary.
14+
#
15+
# Args:
16+
# GOOS: OS to build.
17+
# GOARCH: Arch to build.
18+
#
19+
# Example:
20+
# make
21+
# make all
22+
# make karmada-dashboard-api GOOS=linux
23+
.PHONY: $(TARGETS)
24+
$(TARGETS):
25+
BUILD_PLATFORMS=$(GOOS)/$(GOARCH) hack/build.sh $@
26+
27+
28+
# Build image.
29+
#
30+
# Args:
31+
# GOARCH: Arch to build.
32+
# OUTPUT_TYPE: Destination to save image(docker/registry).
33+
#
34+
# Example:
35+
# make images
36+
# make image-karmada-dashboard-api
37+
# make image-karmada-dashboard-api GOARCH=arm64
38+
IMAGE_TARGET=$(addprefix image-, $(TARGETS))
39+
.PHONY: $(IMAGE_TARGET)
40+
$(IMAGE_TARGET):
41+
set -e;\
42+
target=$$(echo $(subst image-,,$@));\
43+
make $$target GOOS=linux;\
44+
VERSION=$(VERSION) REGISTRY=$(REGISTRY) BUILD_PLATFORMS=linux/$(GOARCH) hack/docker.sh $$target
45+
46+
47+
bundle-ui-dashboard:
48+
cd ui && pnpm run dashboard:build
49+
bin-karmada-dashboard-web:
50+
BUILD_PLATFORMS=$(GOOS)/$(GOARCH) hack/build.sh karmada-dashboard-web
51+
image-karmada-dashboard-web:
52+
BUILD_PLATFORMS=linux/$(GOARCH) hack/build.sh karmada-dashboard-web
53+
cp -R ui/apps/dashboard/dist _output/bin/linux/$(GOARCH)/dist
54+
DOCKER_FILE="build-web.Dockerfile" VERSION=$(VERSION) REGISTRY=$(REGISTRY) BUILD_PLATFORMS=linux/$(GOARCH) hack/docker.sh karmada-dashboard-web

‎artifacts/agent/clusterrole.yaml

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
apiVersion: rbac.authorization.k8s.io/v1
2+
kind: ClusterRole
3+
metadata:
4+
name: karmada-agent
5+
rules:
6+
- apiGroups: ['*']
7+
resources: ['*']
8+
verbs: ['*']
9+
- nonResourceURLs: ['*']
10+
verbs: ["get"]

‎artifacts/agent/clusterrolebinding.yaml

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
apiVersion: rbac.authorization.k8s.io/v1
2+
kind: ClusterRoleBinding
3+
metadata:
4+
name: karmada-agent
5+
roleRef:
6+
apiGroup: rbac.authorization.k8s.io
7+
kind: ClusterRole
8+
name: karmada-agent
9+
subjects:
10+
- kind: ServiceAccount
11+
name: karmada-agent-sa
12+
namespace: karmada-system

‎artifacts/agent/karmada-agent.yaml

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
apiVersion: apps/v1
2+
kind: Deployment
3+
metadata:
4+
name: karmada-agent
5+
namespace: karmada-system
6+
labels:
7+
app: karmada-agent
8+
spec:
9+
replicas: 2
10+
selector:
11+
matchLabels:
12+
app: karmada-agent
13+
template:
14+
metadata:
15+
labels:
16+
app: karmada-agent
17+
spec:
18+
serviceAccountName: karmada-agent-sa
19+
tolerations:
20+
- key: node-role.kubernetes.io/master
21+
operator: Exists
22+
containers:
23+
- name: karmada-agent
24+
image: docker.io/karmada/karmada-agent:{{KARMADA_VERSION}}
25+
imagePullPolicy: {{image_pull_policy}}
26+
command:
27+
- /bin/karmada-agent
28+
- --karmada-kubeconfig=/etc/kubeconfig/karmada-kubeconfig
29+
- --karmada-context={{karmada_context}}
30+
- --cluster-name={{member_cluster_name}}
31+
- --cluster-api-endpoint={{member_cluster_api_endpoint}}
32+
- --cluster-status-update-frequency=10s
33+
- --bind-address=0.0.0.0
34+
- --secure-port=10357
35+
- --feature-gates=CustomizedClusterResourceModeling=true,MultiClusterService=true
36+
- --v=4
37+
livenessProbe:
38+
httpGet:
39+
path: /healthz
40+
port: 10357
41+
scheme: HTTP
42+
failureThreshold: 3
43+
initialDelaySeconds: 15
44+
periodSeconds: 15
45+
timeoutSeconds: 5
46+
volumeMounts:
47+
- name: kubeconfig
48+
mountPath: /etc/kubeconfig
49+
volumes:
50+
- name: kubeconfig
51+
secret:
52+
secretName: karmada-kubeconfig

‎artifacts/agent/namespace.yaml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
apiVersion: v1
2+
kind: Namespace
3+
metadata:
4+
name: karmada-system
5+

‎artifacts/agent/serviceaccount.yaml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
apiVersion: v1
2+
kind: ServiceAccount
3+
metadata:
4+
name: karmada-agent-sa
5+
namespace: karmada-system

‎artifacts/dashboard/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
NOTE:
2+
workload including `karmada-dashboard-api` and `karmada-dashboard-web` should be installed into karmada-host cluster, however
3+
service account `karmada-dashboard-sa` should be installed into karmada-apiserver, don't make mistake.

0 commit comments

Comments
 (0)