Openshift dashboard clean #469
Conversation
Add OpenShift deployment support for the semantic router dashboard with integrated OpenWebUI playground functionality. This enables running the dashboard on OpenShift with: - Dashboard UI for router configuration - OpenWebUI playground for LLM interaction - Dynamic hostname detection for OpenShift routes - Custom build system with frontend patches Components: deploy/openshift/dashboard/ ├── dashboard-deployment.yaml - Kubernetes resources (deployment, service, route) ├── PlaygroundPage.tsx.patch - Frontend patch for OpenShift URL detection ├── build-custom-dashboard.sh - Automated build and deployment script └── README.md - Build and deployment instructions Implementation Details: - PlaygroundPage patch detects OpenShift hostname and constructs OpenWebUI URL (dashboard-vllm-semantic-router-system → openwebui-vllm-semantic-router-system) - Uses direct OpenWebUI route instead of embedded proxy - Works with pre-built OpenWebUI images (no build-time configuration needed) - Build script applies patches and pushes custom image to OpenShift registry Deployment: 1. Deploy dashboard: oc apply -f deploy/openshift/dashboard/dashboard-deployment.yaml 2. Build custom image: ./deploy/openshift/dashboard/build-custom-dashboard.sh 3. Access playground at dashboard route /playground Testing: Verified end-to-end on OpenShift cluster: - Dashboard accessible via HTTPS route - OpenWebUI playground loads correctly in iframe - Dynamic URL construction works - All functionality working without 404 errors Signed-off-by: Yossi Ovadia <yovadia@redhat.com>
…WebUI playground This commit improves the OpenShift dashboard deployment workflow by: 1. **Single-step deployment**: Users now only need to run `./deploy/openshift/dashboard/build-custom-dashboard.sh` for both fresh deployments and updates. The script automatically detects if the deployment exists and handles both scenarios. 2. **Automatic imagestream creation**: The build script now creates the `dashboard-custom` imagestream if it doesn't exist, eliminating manual setup steps. 3. **Updated deployment YAML**: Changed the default image reference from the base GitHub image to the custom OpenShift-built image (`image-registry.openshift-image-registry.svc:5000/...`), ensuring the patched version is deployed by default. 4. **Improved documentation**: Updated README with clear single-command instructions and explanation of how the PlaygroundPage.tsx patch enables OpenWebUI integration in OpenShift's route-based architecture. The PlaygroundPage.tsx patch enables hostname-aware URL construction, automatically detecting OpenShift routes and loading OpenWebUI correctly instead of showing "404: Not Found". 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Yossi Ovadia <yovadia@redhat.com>
✅ Deploy Preview for vllm-semantic-router ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
👥 vLLM Semantic Team NotificationThe following members have been identified for the changed files in this PR and have been automatically assigned: 📁
|
|
Sample ( on openshift ) |
There was a problem hiding this comment.
Pull Request Overview
This PR integrates a custom dashboard deployment for OpenShift environments with OpenWebUI playground functionality. The solution addresses the challenge of dynamic service routing in OpenShift by patching the dashboard to construct proper URLs based on the deployment environment.
- Creates OpenShift-specific deployment configurations and build scripts for a custom dashboard
- Implements hostname-aware URL construction to replace localhost references with OpenShift routes
- Provides automated build and deployment process with proper image registry integration
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| deploy/openshift/dashboard/dashboard-deployment.yaml | Complete Kubernetes deployment configuration including ConfigMap, Deployment, Service, and Route resources |
| deploy/openshift/dashboard/build-custom-dashboard.sh | Automated build script that creates custom dashboard image with OpenWebUI patches and deploys to OpenShift |
| deploy/openshift/dashboard/README.md | Documentation explaining the custom build process, deployment steps, and OpenShift-specific URL handling |
| deploy/openshift/dashboard/PlaygroundPage.tsx.patch | Frontend patch implementing hostname-aware OpenWebUI URL construction for OpenShift environments |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| echo "" | ||
| echo "Logging in to OpenShift registry..." | ||
| TOKEN=$(oc whoami -t) | ||
| docker login -u $(oc whoami) -p $TOKEN $REGISTRY |
There was a problem hiding this comment.
Using command substitution in password parameter exposes credentials in process list. Store the username in a variable and use it in the login command to reduce exposure.
| docker login -u $(oc whoami) -p $TOKEN $REGISTRY | |
| USERNAME=$(oc whoami) | |
| docker login -u $USERNAME -p $TOKEN $REGISTRY |
Copilot uses AI. Check for mistakes.
| echo "" | ||
| echo "Building docker image for linux/amd64 with no cache..." | ||
| cd $BUILD_DIR/dashboard | ||
| docker buildx build --no-cache --platform linux/amd64 -f Dockerfile.custom -t $REGISTRY/$NAMESPACE/$IMAGE_NAME:latest --load . |
There was a problem hiding this comment.
The hardcoded platform 'linux/amd64' may not work on all architectures. Consider using the host platform or making it configurable.
Copilot uses AI. Check for mistakes.
| const PlaygroundPage: React.FC = () => { | ||
| // Use the OpenWebUI route for OpenShift deployments, fallback to embedded proxy | ||
| const getOpenWebUIUrl = () => { | ||
| const hostname = window.location.hostname | ||
| // In OpenShift, use the direct OpenWebUI route | ||
| if (hostname.includes('dashboard-vllm-semantic-router-system')) { | ||
| return hostname.replace('dashboard-vllm-semantic-router-system', 'openwebui-vllm-semantic-router-system') |
There was a problem hiding this comment.
The hardcoded hostname pattern is fragile and will break if the namespace or service names change. Consider making these configurable through environment variables or props.
| const PlaygroundPage: React.FC = () => { | |
| // Use the OpenWebUI route for OpenShift deployments, fallback to embedded proxy | |
| const getOpenWebUIUrl = () => { | |
| const hostname = window.location.hostname | |
| // In OpenShift, use the direct OpenWebUI route | |
| if (hostname.includes('dashboard-vllm-semantic-router-system')) { | |
| return hostname.replace('dashboard-vllm-semantic-router-system', 'openwebui-vllm-semantic-router-system') | |
| // Make the hostname patterns configurable via environment variables, fallback to defaults | |
| const DASHBOARD_HOST_PATTERN = process.env.REACT_APP_DASHBOARD_HOST_PATTERN || 'dashboard-vllm-semantic-router-system'; | |
| const OPENWEBUI_HOST_PATTERN = process.env.REACT_APP_OPENWEBUI_HOST_PATTERN || 'openwebui-vllm-semantic-router-system'; | |
| const PlaygroundPage: React.FC = () => { | |
| // Use the OpenWebUI route for OpenShift deployments, fallback to embedded proxy | |
| const getOpenWebUIUrl = () => { | |
| const hostname = window.location.hostname | |
| // In OpenShift, use the direct OpenWebUI route | |
| if (hostname.includes(DASHBOARD_HOST_PATTERN)) { | |
| return hostname.replace(DASHBOARD_HOST_PATTERN, OPENWEBUI_HOST_PATTERN) |
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| echo "Preparing build directory with patched files..." | ||
| BUILD_DIR="/tmp/dashboard-build-$$" | ||
| mkdir -p $BUILD_DIR | ||
| cp -r dashboard $BUILD_DIR/ |
There was a problem hiding this comment.
The script copies from dashboard directory but this path is relative and may not exist from the script's location. Should use an absolute path like $SCRIPT_DIR/../../../dashboard or verify the dashboard directory exists relative to the script.
Copilot uses AI. Check for mistakes.
| if [ -f "$SCRIPT_DIR/main.go.patch" ]; then | ||
| cp "$SCRIPT_DIR/main.go.patch" "$BUILD_DIR/dashboard/backend/main.go" | ||
| echo " ✓ Applied main.go patch (OpenWebUI proxy + auth)" | ||
| fi |
There was a problem hiding this comment.
The script references main.go.patch file that doesn't exist in the PR. Either include this patch file or remove the conditional logic that depends on it.
| if [ -f "$SCRIPT_DIR/main.go.patch" ]; then | |
| cp "$SCRIPT_DIR/main.go.patch" "$BUILD_DIR/dashboard/backend/main.go" | |
| echo " ✓ Applied main.go patch (OpenWebUI proxy + auth)" | |
| fi |
Copilot uses AI. Check for mistakes.
| echo "Building docker image for linux/amd64 with no cache..." | ||
| cd $BUILD_DIR/dashboard | ||
| docker buildx build --no-cache --platform linux/amd64 -f Dockerfile.custom -t $REGISTRY/$NAMESPACE/$IMAGE_NAME:latest --load . |
There was a problem hiding this comment.
Using --no-cache on every build will significantly slow down the build process. Consider removing this flag to allow Docker layer caching, which would improve build times for incremental changes.
| echo "Building docker image for linux/amd64 with no cache..." | |
| cd $BUILD_DIR/dashboard | |
| docker buildx build --no-cache --platform linux/amd64 -f Dockerfile.custom -t $REGISTRY/$NAMESPACE/$IMAGE_NAME:latest --load . | |
| echo "Building docker image for linux/amd64..." | |
| cd $BUILD_DIR/dashboard | |
| docker buildx build --platform linux/amd64 -f Dockerfile.custom -t $REGISTRY/$NAMESPACE/$IMAGE_NAME:latest --load . |
Copilot uses AI. Check for mistakes.
Integrating the dashboard into openshift env.
dashboard-customimagestream if neededAccess the Dashboard
Why a Custom Build?
The upstream dashboard uses
localhost:3001for local OpenWebUI development. In OpenShift: