Skip to content

feat: Kmesh Dashboard for Simplified Service Mesh Management#1682

Open
FAUST-BENCHOU wants to merge 33 commits into
kmesh-net:mainfrom
FAUST-BENCHOU:kmesh-dashboard
Open

feat: Kmesh Dashboard for Simplified Service Mesh Management#1682
FAUST-BENCHOU wants to merge 33 commits into
kmesh-net:mainfrom
FAUST-BENCHOU:kmesh-dashboard

Conversation

@FAUST-BENCHOU
Copy link
Copy Markdown

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

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>
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>
Copilot AI review requested due to automatic review settings May 7, 2026 09:00
@kmesh-bot
Copy link
Copy Markdown
Collaborator

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign bitcoffeeiux for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@gemini-code-assist
Copy link
Copy Markdown

Summary of Changes

Hello, 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

  • New Kmesh Dashboard: Introduced a comprehensive Kmesh Dashboard project, featuring a Go-based backend and a React-based frontend to provide a visual interface for service mesh management.
  • Service Mesh Management Features: Implemented management capabilities for Waypoint installation, circuit breaking, rate limiting, and authorization policies, along with cluster node and service visibility.
  • Monitoring and Status API: Added a new /monitoring/status endpoint to the Kmesh server to expose monitoring, accesslog, and metrics status, enabling the dashboard to track mesh health.
Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@FAUST-BENCHOU
Copy link
Copy Markdown
Author

@LiZhenCheng9527 @hzxuzhonghu ptal.Hope this won't be a burden on the community.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/status admin server with GET /monitoring/status to 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.

Comment on lines +1 to +6
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
Comment on lines +1 to +7
# frontend
frontend/node_modules/
frontend/dist/

# backend
backend/bin/
backend/server
Comment on lines +1 to +8
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: {
Comment on lines +35 to +54
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>
)
}
Comment on lines +18 to +22
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}`)
}
Comment on lines +7 to +18
// 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)
})
Comment on lines +342 to +363
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)
}
Comment on lines +334 to +336
// monitoringStatusResponse 返回 monitoring/accesslog/workloadMetrics/connectionMetrics 的当前状态
type monitoringStatusResponse struct {
Monitoring bool `json:"monitoring"`
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment on lines +183 to +193
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 {
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

The itoa function is a manual re-implementation of strconv.Itoa. This implementation is buggy for negative numbers and redundant. Please use the standard library strconv.Itoa instead.

Comment on lines +183 to +193
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)
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

The itoa function is a manual re-implementation of strconv.Itoa. This implementation is buggy for negative numbers and redundant. Please use the standard library strconv.Itoa instead.

@yashisrani
Copy link
Copy Markdown
Contributor

@FAUST-BENCHOU is any feature pending ? i want to contribute as well ..

@FAUST-BENCHOU
Copy link
Copy Markdown
Author

@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.

@yashisrani
Copy link
Copy Markdown
Contributor

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] Kmesh dashboard

4 participants