A web-based UI for visualizing and managing Trivy vulnerability scan results in Kubernetes clusters.

Trivy UI provides a centralized dashboard for viewing vulnerability reports generated by the Trivy Operator in Kubernetes environments. It offers an intuitive interface to browse, search, and analyze security vulnerabilities detected in your container images.

Main dashboard showing vulnerability statistics and summary

In-depth view of individual vulnerability reports

Currently supports vulnerability reports view, other report types will fallback to JSON format

You can quickly run Trivy UI using the official Docker image:

docker pull locustbaby/trivy-ui:v0.0.2

docker run -d \
  -v /path/to/your/kubeconfigs:/kubeconfigs \
  -e KUBECONFIG_DIR=/kubeconfigs \
  -p 8080:8080 \
  locustbaby/trivy-ui:v0.0.2

• Replace /path/to/your/kubeconfigs with the directory containing your kubeconfig files (one per cluster).
• Access the dashboard at http://localhost:8080

1. Install the Helm chart:

# Install directly from Docker Hub (Recommended)
helm install my-trivy-ui oci://registry-1.docker.io/locustbaby/trivy-ui

# Or from GitHub Pages
helm repo add trivy-ui https://locustbaby.github.io/trivy-ui/
helm repo update
helm install my-trivy-ui trivy-ui/trivy-ui

# Or from local chart
git clone https://github.com/locustbaby/trivy-ui.git
cd trivy-ui/charts/trivy-ui
helm install my-trivy-ui .

2. Configure kubeconfigs for multi-cluster support:

# Create a secret with your kubeconfig files
kubectl create secret generic kubeconfigs \
  --from-file=cluster1=/path/to/cluster1-kubeconfig \
  --from-file=cluster2=/path/to/cluster2-kubeconfig

3. Customize the deployment (optional):

# Install with custom values
helm install my-trivy-ui . \
  --set ingress.enabled=true \
  --set ingress.hosts[0].host=trivy-ui.example.com \
  --set resources.limits.memory=256Mi

For easier deployment and management, we recommend using our Helm charts:

# Clone the repository
git clone https://github.com/locustbaby/trivy-ui.git
cd trivy-ui/charts/trivy-ui

# Create kubeconfig secret first
kubectl create secret generic kubeconfigs \
  --from-file=cluster1=/path/to/cluster1-kubeconfig \
  --from-file=cluster2=/path/to/cluster2-kubeconfig

# Install with Helm
helm install my-trivy-ui . \
  --set kubeconfigs.create=false \
  --set kubeconfigs.secretName=kubeconfigs

# Or install with custom values
helm install my-trivy-ui . \
  --set ingress.enabled=true \
  --set ingress.hosts[0].host=trivy-ui.example.com \
  --set resources.limits.memory=256Mi

Benefits of using Helm:

• Simplified deployment - One command to install all components
• Easy customization - Configure via values.yaml or command line
• Version management - Easy upgrades and rollbacks
• Production ready - Includes RBAC, health checks, and resource limits
• Multi-environment support - Different configurations for dev/staging/prod

For detailed Helm chart documentation, see charts/trivy-ui/README.md.

• Multi-Cluster Support: Manage and view reports from multiple Kubernetes clusters by mounting a directory of kubeconfig files
• Dashboard View: Overview of vulnerability statistics across namespaces and clusters
• Detailed Reports: In-depth analysis of vulnerabilities by severity
• Search & Filter: Quickly locate specific vulnerability reports
• Caching: Optimized performance with disk-persistent caching
• Responsive Design: Works on desktop and mobile devices
• Real-time Updates: Automatic refresh of vulnerability data
• Export Capabilities: Download reports in various formats

The application consists of two main components:

• Frontend: Vue 3 single-page application with Vite
• Backend: Go server that interfaces with the Kubernetes API (multi-cluster via kubeconfig directory)

trivy-ui/
├── go-server/         # Go backend application
│   ├── api/           # API handlers and routes
│   ├── config/        # Configuration management
│   ├── kubernetes/    # Kubernetes client interface
│   └── main.go        # Application entry point
├── trivy-dashboard/   # Vue 3 frontend
│   ├── src/           # Frontend source code
│   ├── public/        # Static assets
│   └── dist/          # Built frontend files
└── charts/            # Helm charts for deployment
    └── trivy-ui/      # Kubernetes deployment chart

1. Backend loads kubeconfig files from mounted directory
2. Backend connects to multiple Kubernetes clusters
3. Backend queries Trivy Operator CRDs for vulnerability reports
4. Frontend requests data via REST API
5. Frontend renders interactive dashboard with vulnerability data

• Go 1.24+
• Node.js 16+
• Access to one or more Kubernetes clusters with Trivy Operator installed
• Each cluster's kubeconfig file (see below)

1. Clone the repository

git clone https://github.com/locustbaby/trivy-ui.git
cd trivy-ui

2. Build and run the frontend

cd trivy-dashboard
npm install
npm run build

3. Build and run the backend server

cd ../go-server
go mod download
go build
./go-server

4. Access the dashboard at http://localhost:8080

cd go-server
go run main.go

cd trivy-dashboard
npm install
npm run dev

# Terminal 1: Backend
cd go-server && go run main.go

# Terminal 2: Frontend
cd trivy-dashboard && npm run dev

The server can be configured using the following environment variables:

1. Prepare kubeconfig files:

   • Each file should contain a single cluster's kubeconfig
   • Files should be named descriptively (e.g., prod-cluster, staging-cluster)

2. Mount kubeconfig directory:

   • Docker: -v /path/to/kubeconfigs:/kubeconfigs
   • Kubernetes: Mount as Secret or ConfigMap

3. Verify cluster connectivity:

   # Check if clusters are detected
   curl http://localhost:8080/api/clusters

• GET /api/clusters - List all available clusters
• GET /api/clusters/{cluster}/namespaces - List namespaces in a cluster

• GET /api/reports/{type}/{cluster}/{namespace} - Get reports by type, cluster, and namespace
• `