feat: Kmesh Dashboard for Simplified Service Mesh Management#1682
feat: Kmesh Dashboard for Simplified Service Mesh Management#1682FAUST-BENCHOU wants to merge 33 commits into
Conversation
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
Signed-off-by: zhoujinyu <2319109590@qq.com>
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a new Kmesh Dashboard, designed to lower the usage barrier for Kmesh by providing an interactive UI for managing service mesh configurations. The project includes a full-stack implementation with a Go backend and a React frontend. It also enhances the existing Kmesh server by adding monitoring status endpoints, allowing the dashboard to effectively manage and monitor Waypoint proxies, circuit breakers, rate limits, and authorization policies. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize the Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counterproductive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. A dashboard bright and new, To keep the mesh in view. With Go and React, The traffic is tracked, And Kmesh is easy to do. Footnotes
|
|
@LiZhenCheng9527 @hzxuzhonghu ptal.Hope this won't be a burden on the community. |
There was a problem hiding this comment.
Pull request overview
Adds a new “Kmesh Dashboard” (Go backend + React/Vite frontend + in-app docs) to simplify Kmesh service-mesh operations, and extends the existing Kmesh status server with a monitoring status endpoint.
Changes:
- Add
kmesh_dashboard/with a Go backend that talks to Kubernetes / Gateway API / Istio CRDs and serves/api/*endpoints used by the UI. - Add a React + Ant Design frontend with pages for cluster nodes, topology (Kiali link), waypoint management, circuit breaking, authorization policy, rate limiting, metrics, and help/docs.
- Extend
pkg/statusadmin server withGET /monitoring/statusto expose current monitoring/accesslog/metrics toggles.
Reviewed changes
Copilot reviewed 96 out of 116 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| pkg/status/status_server.go | Adds /monitoring/status endpoint exposing monitoring toggle states. |
| kmesh_dashboard/README.md | Dashboard quick start instructions for backend/frontend. |
| kmesh_dashboard/.gitignore | Initial dashboard-specific ignore rules. |
| kmesh_dashboard/backend/go.mod | New Go module for dashboard backend. |
| kmesh_dashboard/backend/Dockerfile | Container build for dashboard backend. |
| kmesh_dashboard/backend/cmd/server/main.go | Backend server bootstrap (clients + route registration + CORS wrapper). |
| kmesh_dashboard/backend/internal/k8s/config.go | Kubeconfig/in-cluster config resolution. |
| kmesh_dashboard/backend/internal/k8s/client.go | Kubernetes client constructor. |
| kmesh_dashboard/backend/internal/lang/lang.go | Simple i18n helper + message catalogs. |
| kmesh_dashboard/backend/internal/handler/handler.go | Registers all backend HTTP routes under /api. |
| kmesh_dashboard/backend/internal/handler/cors.go | Adds CORS headers for frontend dev access. |
| kmesh_dashboard/backend/internal/handler/cluster.go | Cluster nodes + namespaces endpoints. |
| kmesh_dashboard/backend/internal/handler/services.go | Service list endpoint for UI selectors. |
| kmesh_dashboard/backend/internal/handler/kiali.go | /api/config provides Kiali redirect URL from env. |
| kmesh_dashboard/backend/internal/handler/metrics.go | Prometheus-backed metrics overview + datasource info endpoints. |
| kmesh_dashboard/backend/internal/handler/accesslog.go | Accesslog scraping via Pod logs + kmesh pod discovery. |
| kmesh_dashboard/backend/internal/handler/pod.go | Generic pod detail/events and log endpoints used by UI. |
| kmesh_dashboard/backend/internal/handler/docs.go | In-app docs listing and markdown content serving (zh/en). |
| kmesh_dashboard/backend/internal/handler/circuitbreaker.go | DestinationRule CRUD/list parsing for circuit breaker UI. |
| kmesh_dashboard/backend/internal/handler/ratelimit.go | EnvoyFilter local_ratelimit CRUD/list parsing for rate limit UI. |
| kmesh_dashboard/frontend/package.json | Frontend dependencies and scripts (Vite/React/AntD/i18n/Monaco). |
| kmesh_dashboard/frontend/package-lock.json | Locked dependency tree for the frontend. |
| kmesh_dashboard/frontend/index.html | Frontend HTML entrypoint. |
| kmesh_dashboard/frontend/tsconfig.json | Frontend TypeScript config. |
| kmesh_dashboard/frontend/tsconfig.node.json | TypeScript config for Vite config file. |
| kmesh_dashboard/frontend/tsconfig.tsbuildinfo | TypeScript incremental build artifact (committed). |
| kmesh_dashboard/frontend/tsconfig.node.tsbuildinfo | TypeScript incremental build artifact (committed). |
| kmesh_dashboard/frontend/vite.config.ts | Vite config (TS). |
| kmesh_dashboard/frontend/vite.config.js | Vite config (JS, duplicate). |
| kmesh_dashboard/frontend/vite.config.d.ts | Generated typing artifact (committed). |
| kmesh_dashboard/frontend/public/.gitkeep | Keeps public/ tracked. |
| kmesh_dashboard/frontend/src/main.tsx | React root + AntD locale selection. |
| kmesh_dashboard/frontend/src/App.tsx | Router layout and page routing. |
| kmesh_dashboard/frontend/src/index.css | Global styles + header language select styling. |
| kmesh_dashboard/frontend/src/i18n/index.ts | i18next setup + localStorage persistence. |
| kmesh_dashboard/frontend/src/i18n/locales/zh.ts | Chinese UI translations. |
| kmesh_dashboard/frontend/src/i18n/locales/en.ts | English UI translations. |
| kmesh_dashboard/frontend/src/api/client.ts | API wrapper with /api base and Accept-Language header. |
| kmesh_dashboard/frontend/src/api/cluster.ts | Cluster nodes/namespaces API calls. |
| kmesh_dashboard/frontend/src/api/services.ts | Services API calls. |
| kmesh_dashboard/frontend/src/api/config.ts | Kiali config fetch. |
| kmesh_dashboard/frontend/src/api/waypoint.ts | Waypoint list/status/apply/delete API calls. |
| kmesh_dashboard/frontend/src/api/circuitbreaker.ts | Circuit breaker API calls. |
| kmesh_dashboard/frontend/src/api/authorization.ts | Authorization policy API calls. |
| kmesh_dashboard/frontend/src/api/ratelimit.ts | Rate limit API calls. |
| kmesh_dashboard/frontend/src/api/metrics.ts | Metrics + accesslog + kmesh pods API calls. |
| kmesh_dashboard/frontend/src/api/pod.ts | Pod detail/log API calls. |
| kmesh_dashboard/frontend/src/api/customYaml.ts | Custom YAML template/validate/apply API calls. |
| kmesh_dashboard/frontend/src/api/docs.ts | Docs list/content fetch for help page. |
| kmesh_dashboard/frontend/src/types/cluster.ts | Cluster types. |
| kmesh_dashboard/frontend/src/types/waypoint.ts | Waypoint types. |
| kmesh_dashboard/frontend/src/types/circuitbreaker.ts | Circuit breaker types. |
| kmesh_dashboard/frontend/src/types/authorization.ts | Authorization policy types. |
| kmesh_dashboard/frontend/src/types/ratelimit.ts | Rate limit types. |
| kmesh_dashboard/frontend/src/types/metrics.ts | Metrics/accesslog types. |
| kmesh_dashboard/frontend/src/components/layout/Layout.tsx | Top navigation + language switcher layout. |
| kmesh_dashboard/frontend/src/components/pod/PodDetailModal.tsx | Pod detail/events/log modal UI. |
| kmesh_dashboard/frontend/src/components/customYaml/YamlApplyCard.tsx | Monaco-based YAML editor + validate/apply UI. |
| kmesh_dashboard/frontend/src/pages/cluster/ClusterNodesPage.tsx | Cluster nodes page. |
| kmesh_dashboard/frontend/src/pages/topology/TopologyPage.tsx | Kiali topology link page. |
| kmesh_dashboard/frontend/src/pages/waypoint/index.tsx | Waypoint tabbed page shell. |
| kmesh_dashboard/frontend/src/pages/waypoint/WaypointListPage.tsx | Waypoint list/status page with expandable details + pod modal. |
| kmesh_dashboard/frontend/src/pages/waypoint/WaypointApplyPage.tsx | Waypoint install/apply form. |
| kmesh_dashboard/frontend/src/pages/circuitbreaker/index.tsx | Circuit breaker tabbed page shell. |
| kmesh_dashboard/frontend/src/pages/circuitbreaker/CircuitBreakerListPage.tsx | Circuit breaker policies list page. |
| kmesh_dashboard/frontend/src/pages/circuitbreaker/CircuitBreakerFormPage.tsx | Circuit breaker apply form page. |
| kmesh_dashboard/frontend/src/pages/authorization/index.tsx | Authorization tabbed page shell. |
| kmesh_dashboard/frontend/src/pages/authorization/AuthorizationListPage.tsx | Authorization policies list page. |
| kmesh_dashboard/frontend/src/pages/authorization/AuthorizationFormPage.tsx | Authorization policy apply form page. |
| kmesh_dashboard/frontend/src/pages/ratelimit/index.tsx | Rate limit tabbed page shell. |
| kmesh_dashboard/frontend/src/pages/ratelimit/RateLimitListPage.tsx | Rate limit policies list page. |
| kmesh_dashboard/frontend/src/pages/ratelimit/RateLimitFormPage.tsx | Rate limit apply form page. |
| kmesh_dashboard/frontend/src/pages/metrics/MetricsPage.tsx | Prometheus metrics overview + accesslog query UI. |
| kmesh_dashboard/frontend/src/pages/help/HelpPage.tsx | In-app docs browser (markdown). |
| kmesh_dashboard/frontend/.vite/deps/_metadata.json | Vite prebundle artifact (committed). |
| kmesh_dashboard/frontend/.vite/deps/package.json | Vite prebundle artifact (committed). |
| kmesh_dashboard/frontend/.vite/deps/react.js | Vite prebundle artifact (committed). |
| kmesh_dashboard/frontend/.vite/deps/react.js.map | Vite prebundle artifact (committed). |
| kmesh_dashboard/frontend/.vite/deps/react-dom_client.js | Vite prebundle artifact (committed). |
| kmesh_dashboard/frontend/.vite/deps/react-dom_client.js.map | Vite prebundle artifact (committed). |
| kmesh_dashboard/frontend/.vite/deps/chunk-5WRI5ZAA.js | Vite prebundle artifact (committed). |
| kmesh_dashboard/frontend/.vite/deps/chunk-5WRI5ZAA.js.map | Vite prebundle artifact (committed). |
| kmesh_dashboard/docs/cluster.md | Chinese docs: cluster page. |
| kmesh_dashboard/docs/topology.md | Chinese docs: topology page. |
| kmesh_dashboard/docs/waypoint.md | Chinese docs: waypoint. |
| kmesh_dashboard/docs/circuitbreaker.md | Chinese docs: circuit breaker. |
| kmesh_dashboard/docs/authorization.md | Chinese docs: authorization. |
| kmesh_dashboard/docs/ratelimit.md | Chinese docs: rate limit. |
| kmesh_dashboard/docs/metrics.md | Chinese docs: metrics/accesslog. |
| kmesh_dashboard/docs/en/cluster.md | English docs: cluster page. |
| kmesh_dashboard/docs/en/topology.md | English docs: topology page. |
| kmesh_dashboard/docs/en/waypoint.md | English docs: waypoint. |
| kmesh_dashboard/docs/en/circuitbreaker.md | English docs: circuit breaker. |
| kmesh_dashboard/docs/en/authorization.md | English docs: authorization. |
| kmesh_dashboard/docs/en/ratelimit.md | English docs: rate limit. |
| kmesh_dashboard/docs/en/metrics.md | English docs: metrics/accesslog. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| FROM golang:1.21-alpine AS builder | ||
| WORKDIR /app | ||
| COPY go.mod go.sum ./ | ||
| RUN go mod download | ||
| COPY . . | ||
| RUN CGO_ENABLED=0 go build -o /server ./cmd/server |
| # frontend | ||
| frontend/node_modules/ | ||
| frontend/dist/ | ||
|
|
||
| # backend | ||
| backend/bin/ | ||
| backend/server |
| import { defineConfig } from 'vite'; | ||
| import react from '@vitejs/plugin-react'; | ||
| import path from 'node:path'; | ||
| import { fileURLToPath } from 'node:url'; | ||
| const __dirname = path.dirname(fileURLToPath(import.meta.url)); | ||
| export default defineConfig({ | ||
| plugins: [react()], | ||
| resolve: { |
| if (!kialiUrl) { | ||
| return ( | ||
| <Card title={t('topology.title')}> | ||
| <Alert | ||
| type="warning" | ||
| message={t('topology.noKiali')} | ||
| description={t('topology.kialiEnvTip')} | ||
| showIcon | ||
| /> | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| if (error) { | ||
| return ( | ||
| <Card title={t('topology.title')}> | ||
| <Alert type="error" message={error} showIcon /> | ||
| </Card> | ||
| ) | ||
| } |
| const url = `/api/docs/${name}${lang === 'en' ? '?lang=en' : ''}` | ||
| const res = await fetch(url, { headers, cache: 'no-store' }) | ||
| if (!res.ok) { | ||
| throw new Error(res.status === 404 ? '文档不存在' : `HTTP ${res.status}`) | ||
| } |
| // CORS wraps the mux with CORS headers for frontend cross-origin access during development. | ||
| func CORS(next http.Handler) http.Handler { | ||
| return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { | ||
| w.Header().Set("Access-Control-Allow-Origin", "*") | ||
| w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS") | ||
| w.Header().Set("Access-Control-Allow-Headers", "Content-Type, X-Doc-Lang") | ||
| if r.Method == http.MethodOptions { | ||
| w.WriteHeader(http.StatusNoContent) | ||
| return | ||
| } | ||
| next.ServeHTTP(w, r) | ||
| }) |
| func (s *Server) monitoringStatusHandler(w http.ResponseWriter, r *http.Request) { | ||
| if r.Method != http.MethodGet { | ||
| http.Error(w, "Method Not Allowed", http.StatusMethodNotAllowed) | ||
| return | ||
| } | ||
| resp := monitoringStatusResponse{} | ||
| if !s.checkWorkloadMode(w) { | ||
| return | ||
| } | ||
| resp.Monitoring = s.loader.GetEnableMonitoring() == constants.ENABLED | ||
| resp.Accesslog = s.xdsClient.WorkloadController.GetAccesslogTrigger() | ||
| resp.WorkloadMetrics = s.xdsClient.WorkloadController.GetWorklaodMetricTrigger() | ||
| resp.ConnectionMetrics = s.xdsClient.WorkloadController.GetConnectionMetricTrigger() | ||
| data, err := json.Marshal(resp) | ||
| if err != nil { | ||
| http.Error(w, err.Error(), http.StatusInternalServerError) | ||
| return | ||
| } | ||
| w.Header().Set("Content-Type", "application/json") | ||
| w.WriteHeader(http.StatusOK) | ||
| _, _ = w.Write(data) | ||
| } |
| // monitoringStatusResponse 返回 monitoring/accesslog/workloadMetrics/connectionMetrics 的当前状态 | ||
| type monitoringStatusResponse struct { | ||
| Monitoring bool `json:"monitoring"` |
There was a problem hiding this comment.
Code Review
This pull request introduces a new Kmesh Dashboard backend and frontend. The backend provides various APIs for cluster nodes, services, and Istio resources like AuthorizationPolicy, DestinationRule (for circuit breaking), and EnvoyFilter (for rate limiting). The frontend is built with React and Ant Design, offering a UI for these features. I have identified a critical issue in the itoa function implementation in both authorization.go and circuitbreaker.go, where a manual, buggy, and redundant implementation of strconv.Itoa is used. This should be replaced with the standard library's strconv.Itoa.
| spec, ok := u.Object["spec"].(map[string]interface{}) | ||
| if !ok { | ||
| return item | ||
| } | ||
| if action, ok := spec["action"].(string); ok { | ||
| item.Action = action | ||
| } | ||
| if sel, ok := spec["selector"].(map[string]interface{}); ok { | ||
| if ml, ok := sel["matchLabels"].(map[string]interface{}); ok { | ||
| item.Selector = make(map[string]string) | ||
| for k, v := range ml { |
| func itoa(i int) string { | ||
| if i == 0 { | ||
| return "0" | ||
| } | ||
| var b []byte | ||
| for i > 0 { | ||
| b = append([]byte{byte('0' + i%10)}, b...) | ||
| i /= 10 | ||
| } | ||
| return string(b) | ||
| } |
|
@FAUST-BENCHOU is any feature pending ? i want to contribute as well .. |
ya but i think i need to First obtain the maintainer's consent.I think the dashboard is more suitable to put in a individual repo under kmesh-net.If these initial designs are approved by the community, I will contact you to discuss them further. Thank you for your kind offer. |
First i thought that this project will appear for LFX term-3 |
What type of PR is this?
/kind feature
Which issue(s) this PR fixes:
Fixes #1552
Although CNCF rejected the Kmesh dashboard project at GSOC, I hope my proposal and code will be helpful to the community.
Actual dashboard screenshots are also in the proposal; comments from everyone are welcome.
https://docs.google.com/document/d/1UOTtSIWca0z96V4ovyeMq5_q0jpyEhv8HpeOv4jkbUk/edit?usp=sharing
Below is the Chinese document. I have already discussed some of the content with @LiZhenCheng9527 ; you can check the comments for details.
https://docs.google.com/document/d/11OikXuBe303RIxa4moJVQ-2FFcY2Ypg95XSoYlJoA9s/edit?tab=t.0#heading=h.a3lst3drsgo7