Skip to content

Commit 1cd86d8

Browse files
committed
feat(demo): add OpenShift deployment for flow visualization
Add deployment script and manifests to serve the interactive flow visualization as a web service on OpenShift: - deploy-flow-viz.sh: One-command deployment script - flow-viz-deployment.yaml: Kubernetes manifests for nginx + route - Creates ConfigMap from HTML file - Exposes via OpenShift route for easy access during demos - Updated DEMO-README.md with deployment instructions Perfect for presentations - get a public URL in seconds. Signed-off-by: Yossi Ovadia <yovadia@redhat.com>
1 parent cc229f6 commit 1cd86d8

File tree

3 files changed

+154
-5
lines changed

3 files changed

+154
-5
lines changed

deploy/openshift/demo/DEMO-README.md

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -230,17 +230,27 @@ Restarts semantic-router deployment to clear in-memory cache (~30 seconds).
230230
- `curl-examples.sh` - Quick classification examples (direct API)
231231
- `cache-management.sh` - Cache management helper
232232
- `flow-visualization.html` - **Interactive flow visualization** (open in browser)
233+
- `deploy-flow-viz.sh` - Deploy flow visualization to OpenShift
233234
- `CATEGORY-MODEL-MAPPING.md` - Category to model routing reference
234235
- `demo-classification-results.json` - Test results (auto-generated)
235236

236237
### Flow Visualization
237238

238-
Open `flow-visualization.html` in your browser for an **interactive visual guide** showing:
239+
**Interactive visual guide** showing step-by-step request flow, security checks, classification, and routing decisions.
239240

240-
- Step-by-step request flow from user to model
241-
- Security checks, classification, and routing decisions
242-
- Performance metrics and key features
243-
- Animated walkthrough of the entire pipeline
241+
#### Option 1: Deploy to OpenShift (Recommended for Demos)
242+
243+
```bash
244+
# Deploy as a web service with public URL
245+
./deploy/openshift/demo/deploy-flow-viz.sh
246+
```
247+
248+
This creates a lightweight nginx pod and gives you a URL like:
249+
`http://flow-visualization-vllm-semantic-router-system.apps.cluster-xxx.opentlc.com`
250+
251+
Perfect for presentations - just open the URL and click "Start Animation"!
252+
253+
#### Option 2: Open Locally
244254

245255
```bash
246256
# Open in browser (macOS)
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
#!/bin/bash
2+
#
3+
# Deploy Flow Visualization to OpenShift
4+
#
5+
# This script deploys the interactive flow visualization HTML page
6+
# to OpenShift as a lightweight nginx service with a public route.
7+
#
8+
9+
set -e
10+
11+
# Colors
12+
GREEN='\033[0;32m'
13+
CYAN='\033[0;36m'
14+
YELLOW='\033[1;33m'
15+
RED='\033[0;31m'
16+
NC='\033[0m'
17+
18+
NAMESPACE="vllm-semantic-router-system"
19+
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
20+
HTML_FILE="${SCRIPT_DIR}/flow-visualization.html"
21+
22+
echo -e "${CYAN}Deploying Flow Visualization to OpenShift...${NC}\n"
23+
24+
# Check if logged into OpenShift
25+
if ! oc whoami &>/dev/null; then
26+
echo -e "${RED}Error: Not logged into OpenShift${NC}"
27+
echo -e "${YELLOW}Please run: oc login${NC}"
28+
exit 1
29+
fi
30+
31+
# Check if HTML file exists
32+
if [ ! -f "$HTML_FILE" ]; then
33+
echo -e "${RED}Error: flow-visualization.html not found${NC}"
34+
exit 1
35+
fi
36+
37+
# Create or update ConfigMap with the HTML content
38+
echo -e "${CYAN}📄 Creating ConfigMap with HTML content...${NC}"
39+
oc create configmap flow-visualization-html \
40+
--from-file=index.html="$HTML_FILE" \
41+
-n "$NAMESPACE" \
42+
--dry-run=client -o yaml | oc apply -f -
43+
44+
# Deploy the nginx service
45+
echo -e "${CYAN}🚀 Deploying nginx service...${NC}"
46+
oc apply -f "${SCRIPT_DIR}/flow-viz-deployment.yaml" -n "$NAMESPACE"
47+
48+
# Wait for deployment to be ready
49+
echo -e "${CYAN}⏳ Waiting for deployment to be ready...${NC}"
50+
oc rollout status deployment/flow-visualization -n "$NAMESPACE" --timeout=60s
51+
52+
# Get the route URL
53+
echo -e "\n${GREEN}✅ Deployment successful!${NC}\n"
54+
55+
ROUTE_URL=$(oc get route flow-visualization -n "$NAMESPACE" -o jsonpath='{.spec.host}' 2>/dev/null)
56+
57+
if [ -n "$ROUTE_URL" ]; then
58+
echo -e "${GREEN}🌐 Flow Visualization URL:${NC}"
59+
echo -e " ${CYAN}http://${ROUTE_URL}${NC}\n"
60+
61+
echo -e "${YELLOW}💡 For your demo:${NC}"
62+
echo -e " 1. Open the URL in your browser"
63+
echo -e " 2. Click 'Start Animation' to show the flow"
64+
echo -e " 3. Click any step to see detailed information\n"
65+
else
66+
echo -e "${RED}Warning: Could not retrieve route URL${NC}"
67+
echo -e "${YELLOW}Check manually with: oc get route flow-visualization -n ${NAMESPACE}${NC}\n"
68+
fi
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
apiVersion: v1
3+
kind: ConfigMap
4+
metadata:
5+
name: flow-visualization-html
6+
namespace: vllm-semantic-router-system
7+
data:
8+
index.html: |
9+
<!-- Content will be added via: kubectl create configmap flow-visualization-html --from-file=index.html=flow-visualization.html -->
10+
---
11+
apiVersion: apps/v1
12+
kind: Deployment
13+
metadata:
14+
name: flow-visualization
15+
namespace: vllm-semantic-router-system
16+
labels:
17+
app: flow-visualization
18+
spec:
19+
replicas: 1
20+
selector:
21+
matchLabels:
22+
app: flow-visualization
23+
template:
24+
metadata:
25+
labels:
26+
app: flow-visualization
27+
spec:
28+
containers:
29+
- name: nginx
30+
image: nginx:alpine
31+
ports:
32+
- containerPort: 80
33+
volumeMounts:
34+
- name: html
35+
mountPath: /usr/share/nginx/html
36+
readOnly: true
37+
resources:
38+
requests:
39+
memory: "32Mi"
40+
cpu: "10m"
41+
limits:
42+
memory: "64Mi"
43+
cpu: "50m"
44+
volumes:
45+
- name: html
46+
configMap:
47+
name: flow-visualization-html
48+
---
49+
apiVersion: v1
50+
kind: Service
51+
metadata:
52+
name: flow-visualization
53+
namespace: vllm-semantic-router-system
54+
spec:
55+
selector:
56+
app: flow-visualization
57+
ports:
58+
- port: 80
59+
targetPort: 80
60+
---
61+
apiVersion: route.openshift.io/v1
62+
kind: Route
63+
metadata:
64+
name: flow-visualization
65+
namespace: vllm-semantic-router-system
66+
spec:
67+
to:
68+
kind: Service
69+
name: flow-visualization
70+
port:
71+
targetPort: 80

0 commit comments

Comments
 (0)