Skip to content

Commit 0f4a684

Browse files
[docs] Add comprehensive CueWeb documentation with mermaid diagram support (#1955)
- Add CueWeb Quick Start guide with setup instructions - Add complete CueWeb User Guide covering all interface features - Add CueWeb Development Guide for developers and contributors - Add CueWeb Deployment guide for production environments - Add step-by-step CueWeb tutorial with progressive lessons - Add comprehensive REST Gateway API reference documentation - Create CueWeb and REST Gateway concepts documentation - Update OpenCue overview to include CueWeb and REST Gateway - Create comprehensive architecture diagram at /assets/images/opencue_architecture_comprehensive.svg - Add Mermaid.js support for rendering diagrams in Jekyll - Update .gitignore to exclude node_modules and .next directories - Organize documentation navigation with proper ordering Documentation covers setup, usage, development, deployment, API reference, tutorials, and troubleshooting for both CueWeb web interface and REST Gateway. **Link the Issue(s) this Pull Request is related to.** - #1800
1 parent dc56c68 commit 0f4a684

File tree

67 files changed

+4483
-532
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+4483
-532
lines changed

cueweb/.gitignore

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,62 @@
11

2+
# Dependencies
3+
node_modules/
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
8+
# Next.js
9+
.next/
10+
out/
11+
dist/
12+
13+
# Production
14+
build/
15+
16+
# Runtime data
17+
pids
18+
*.pid
19+
*.seed
20+
*.pid.lock
21+
22+
# Coverage directory used by tools like istanbul
23+
coverage/
24+
25+
# Environment variables
26+
.env
27+
.env.local
28+
.env.development.local
29+
.env.test.local
30+
.env.production.local
31+
32+
# Vercel
33+
.vercel
34+
35+
# TypeScript
36+
*.tsbuildinfo
37+
next-env.d.ts
38+
39+
# OS generated files
40+
.DS_Store
41+
.DS_Store?
42+
._*
43+
.Spotlight-V100
44+
.Trashes
45+
ehthumbs.db
46+
Thumbs.db
47+
48+
# Editor directories and files
49+
.vscode/
50+
.idea/
51+
*.swp
52+
*.swo
53+
54+
# Logs
55+
logs
56+
*.log
57+
258
# Sentry Config File
359
.sentryclirc
4-
.env.local
60+
61+
# Jest
562
/coverage
Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
---
2+
title: "CueWeb and REST Gateway"
3+
nav_order: 11
4+
parent: Concepts
5+
layout: default
6+
linkTitle: "CueWeb and REST Gateway"
7+
date: 2024-09-17
8+
description: >
9+
Understanding CueWeb and the OpenCue REST Gateway architecture
10+
---
11+
12+
# CueWeb and REST Gateway
13+
{: .no_toc }
14+
15+
Learn about CueWeb's web-based interface and the REST Gateway that enables HTTP communication with OpenCue.
16+
17+
<details open markdown="block">
18+
<summary>
19+
Table of contents
20+
</summary>
21+
{: .text-delta }
22+
1. TOC
23+
{:toc}
24+
</details>
25+
26+
---
27+
28+
## What is CueWeb?
29+
30+
CueWeb is a web-based application that brings the core functionality of CueGUI to your browser. Built with Next.js and React, CueWeb provides a responsive, accessible interface for managing OpenCue render farms from anywhere on the network.
31+
32+
### Key Features
33+
34+
- **Job Management Dashboard**: View, filter, and manage rendering jobs
35+
- **Real-time Updates**: Automatic refresh of job, layer, and frame status
36+
- **Advanced Search**: Regex-enabled search with dropdown suggestions
37+
- **Frame Navigation**: Detailed frame inspection with log viewing
38+
- **Multi-job Operations**: Bulk operations on multiple jobs
39+
- **Dark/Light Mode**: Theme switching for user preference
40+
- **Responsive Design**: Works on desktop, tablet, and mobile devices
41+
- **Authentication Support**: Optional OAuth integration (GitHub, Google, Okta)
42+
43+
### CueWeb vs CueGUI
44+
45+
| Feature | CueGUI | CueWeb |
46+
|---------|---------|---------|
47+
| **Platform** | Desktop application | Web browser |
48+
| **Installation** | Requires Python/Qt setup | No client installation |
49+
| **Access** | Local workstation only | Network accessible |
50+
| **Updates** | Manual client updates | Automatic via web |
51+
| **Mobile Support** | No | Yes (responsive design) |
52+
| **Multi-user** | Individual instances | Shared web service |
53+
| **Authentication** | System-based | OAuth providers |
54+
55+
---
56+
57+
## What is the OpenCue REST Gateway?
58+
59+
The OpenCue REST Gateway is a production-ready HTTP service that provides RESTful endpoints for OpenCue's gRPC API. It acts as a translation layer, converting HTTP requests to gRPC calls and responses back to JSON.
60+
61+
### Architecture Overview
62+
63+
<div class="mermaid">
64+
graph LR
65+
A["Web Client<br/>- CueWeb<br/>- Mobile App<br/>- curl/Scripts<br/>- Third-party"]
66+
B["REST Gateway<br/>- Authentication<br/>- Request Trans.<br/>- Response Form.<br/>- Error Handling"]
67+
C["Cuebot<br/>- Job Mgmt<br/>- Scheduling<br/>- Resources<br/>- Monitoring"]
68+
69+
A <-->|HTTP/JSON| B
70+
B <-->|gRPC| C
71+
</div>
72+
73+
### Request Flow
74+
75+
1. **HTTP Request**: Client sends HTTP POST with JSON payload and JWT token
76+
2. **Authentication**: Gateway validates JWT token signature and expiration
77+
3. **gRPC Translation**: HTTP request converted to gRPC call
78+
4. **Cuebot Communication**: Request forwarded to Cuebot service
79+
5. **Response Translation**: gRPC response converted back to JSON
80+
6. **HTTP Response**: Formatted JSON returned to client
81+
82+
---
83+
84+
## Authentication and Security
85+
86+
### JWT Token System
87+
88+
Both CueWeb and the REST Gateway use JSON Web Tokens (JWT) for secure authentication:
89+
90+
- **Algorithm**: HMAC SHA256 (HS256)
91+
- **Header Format**: `Authorization: Bearer <token>`
92+
- **Expiration**: Configurable token lifetime
93+
- **Secret Sharing**: Same secret used by both CueWeb and REST Gateway
94+
95+
### Token Lifecycle
96+
97+
<div class="mermaid">
98+
sequenceDiagram
99+
participant U as User
100+
participant C as CueWeb
101+
participant G as Gateway
102+
participant B as Cuebot
103+
104+
U->>C: 1. Login/Access
105+
C->>G: 2. Generate JWT Token
106+
C->>G: 3. API Request + JWT
107+
G->>B: 4. Validate JWT
108+
G->>B: 5. gRPC Call
109+
B->>G: 6. gRPC Response
110+
G->>C: 7. JSON Response
111+
C->>U: 8. Updated UI
112+
</div>
113+
114+
### Security Features
115+
116+
- **No API Keys**: JWT tokens eliminate need for permanent credentials
117+
- **Token Expiration**: Automatic token expiry prevents unauthorized access
118+
- **Request Validation**: All requests validated before processing
119+
- **CORS Support**: Configurable cross-origin resource sharing
120+
- **TLS Support**: Optional HTTPS encryption
121+
122+
---
123+
124+
## Deployment Patterns
125+
126+
### Standalone Deployment
127+
128+
CueWeb and REST Gateway run as separate services:
129+
130+
<div class="mermaid">
131+
graph LR
132+
A["CueWeb<br/>Port: 3000"] --> B["REST Gateway<br/>Port: 8448"]
133+
B --> C["Cuebot<br/>Port: 8443"]
134+
</div>
135+
136+
### Container Deployment
137+
138+
Using Docker containers for isolation and scalability:
139+
140+
```yaml
141+
services:
142+
cueweb:
143+
image: cueweb:latest
144+
ports: ["3000:3000"]
145+
environment:
146+
- NEXT_PUBLIC_OPENCUE_ENDPOINT=http://rest-gateway:8448
147+
148+
rest-gateway:
149+
image: opencue-rest-gateway:latest
150+
ports: ["8448:8448"]
151+
environment:
152+
- CUEBOT_ENDPOINT=cuebot:8443
153+
- JWT_SECRET=${JWT_SECRET}
154+
```
155+
156+
### High Availability Setup
157+
158+
Load-balanced deployment for production environments:
159+
160+
<div class="mermaid">
161+
graph TD
162+
LB["Load Balancer"]
163+
164+
LB --> CW1["CueWeb #1"]
165+
LB --> CW2["CueWeb #2"]
166+
LB --> CW3["CueWeb #3"]
167+
168+
CW1 --> RG["REST Gateway<br/>(Clustered)"]
169+
CW2 --> RG
170+
CW3 --> RG
171+
172+
RG --> CB["Cuebot<br/>(Clustered)"]
173+
</div>
174+
175+
---
176+
177+
## Data Flow and API Coverage
178+
179+
### Supported Interfaces
180+
181+
The REST Gateway exposes all OpenCue gRPC interfaces:
182+
183+
| Interface | Description | Example Endpoints |
184+
|-----------|-------------|-------------------|
185+
| **ShowInterface** | Project management | `GetShows`, `FindShow`, `CreateShow` |
186+
| **JobInterface** | Job lifecycle | `GetJobs`, `Kill`, `Pause`, `Resume` |
187+
| **FrameInterface** | Frame operations | `GetFrame`, `Retry`, `Kill`, `Eat` |
188+
| **LayerInterface** | Layer management | `GetLayer`, `GetFrames`, `Kill` |
189+
| **GroupInterface** | Resource groups | `GetGroup`, `SetMinCores`, `SetMaxCores` |
190+
| **HostInterface** | Host management | `GetHosts`, `Lock`, `Unlock` |
191+
| **OwnerInterface** | Resource ownership | `GetOwner`, `TakeOwnership` |
192+
| **ProcInterface** | Process control | `GetProc`, `Kill`, `Unbook` |
193+
| **DeedInterface** | Resource deeds | `GetOwner`, `GetHost` |
194+
195+
### Real-time Updates
196+
197+
CueWeb implements automatic updates through:
198+
199+
- **Polling Strategy**: Regular API calls to refresh data
200+
- **Configurable Intervals**: Adjustable refresh rates per table
201+
- **Intelligent Updates**: Only update changed data to minimize load
202+
- **Background Workers**: Web workers for filtering and processing
203+
204+
---
205+
206+
## Configuration and Environment Variables
207+
208+
### CueWeb Configuration
209+
210+
Key environment variables for CueWeb:
211+
212+
```bash
213+
# Required
214+
NEXT_PUBLIC_OPENCUE_ENDPOINT=http://localhost:8448 # REST Gateway URL
215+
NEXT_PUBLIC_URL=http://localhost:3000 # CueWeb URL
216+
NEXT_JWT_SECRET=your-secret-key # JWT signing secret
217+
218+
# Authentication (optional)
219+
NEXT_PUBLIC_AUTH_PROVIDER=github,okta,google # OAuth providers
220+
NEXTAUTH_URL=http://localhost:3000 # Auth callback URL
221+
NEXTAUTH_SECRET=random-secret # NextAuth secret
222+
223+
# Third-party integrations (optional)
224+
SENTRY_DSN=your-sentry-dsn # Error tracking
225+
GOOGLE_CLIENT_ID=your-google-client-id # Google OAuth
226+
GITHUB_ID=your-github-app-id # GitHub OAuth
227+
```
228+
229+
### REST Gateway Configuration
230+
231+
Key environment variables for the REST Gateway:
232+
233+
```bash
234+
# Required
235+
CUEBOT_ENDPOINT=localhost:8443 # Cuebot gRPC address
236+
REST_PORT=8448 # HTTP server port
237+
JWT_SECRET=your-secret-key # JWT validation secret
238+
239+
# Optional
240+
LOG_LEVEL=info # Logging verbosity
241+
GRPC_TIMEOUT=30s # gRPC call timeout
242+
CORS_ORIGINS=https://cueweb.example.com # CORS configuration
243+
RATE_LIMIT_RPS=100 # Rate limiting
244+
```
245+
246+
---
247+
248+
## Performance and Scalability
249+
250+
### CueWeb Performance
251+
252+
- **Server-Side Rendering**: Fast initial page loads with Next.js SSR
253+
- **Code Splitting**: Automatic bundle optimization
254+
- **Virtual Scrolling**: Efficient rendering of large job lists
255+
- **Web Workers**: Background processing for data filtering
256+
- **Caching**: Browser and server-side caching strategies
257+
258+
### REST Gateway Performance
259+
260+
- **Connection Pooling**: Efficient gRPC connection reuse
261+
- **Concurrent Handling**: Multiple simultaneous requests
262+
- **Memory Efficiency**: Minimal overhead HTTP-to-gRPC translation
263+
- **Rate Limiting**: Configurable request throttling
264+
- **Health Monitoring**: Built-in health checks and metrics
265+
266+
### Scaling Considerations
267+
268+
- **Horizontal Scaling**: Multiple CueWeb instances behind load balancer
269+
- **Gateway Clustering**: Multiple REST Gateway instances for redundancy
270+
- **Database Optimization**: Efficient Cuebot database queries
271+
- **CDN Integration**: Static asset delivery optimization
272+
- **Monitoring**: Application performance monitoring (APM) integration
273+
274+
---
275+
276+
## Best Practices
277+
278+
### Development
279+
280+
1. **Environment Separation**: Use different configurations for dev/staging/prod
281+
2. **Secret Management**: Use secure secret storage for JWT keys
282+
3. **Testing**: Implement unit and integration tests
283+
4. **Code Quality**: Follow TypeScript and React best practices
284+
5. **Documentation**: Maintain API and component documentation
285+
286+
### Deployment
287+
288+
1. **Container Security**: Use minimal base images and security scanning
289+
2. **Network Security**: Implement proper firewall rules and TLS
290+
3. **Monitoring**: Set up logging, metrics, and alerting
291+
4. **Backup Strategy**: Regular configuration and data backups
292+
5. **Update Procedures**: Establish rolling update procedures
293+
294+
### Operations
295+
296+
1. **Performance Monitoring**: Track response times and error rates
297+
2. **Capacity Planning**: Monitor resource usage and plan scaling
298+
3. **User Training**: Provide documentation and training materials
299+
4. **Incident Response**: Establish procedures for troubleshooting
300+
5. **Regular Maintenance**: Schedule updates and maintenance windows
301+
302+
---
303+
304+
## Troubleshooting Common Issues
305+
306+
### Connection Problems
307+
308+
- **502 Bad Gateway**: Check REST Gateway status and Cuebot connectivity
309+
- **CORS Errors**: Verify CORS configuration in REST Gateway
310+
- **Timeout Issues**: Adjust GRPC_TIMEOUT and HTTP_TIMEOUT settings
311+
312+
### Authentication Issues
313+
314+
- **JWT Validation Failed**: Ensure JWT_SECRET matches between services
315+
- **Token Expired**: Check token expiration times and refresh logic
316+
- **OAuth Failures**: Verify OAuth provider configuration and callbacks
317+
318+
### Performance Issues
319+
320+
- **Slow Page Loads**: Enable caching and optimize bundle sizes
321+
- **High Memory Usage**: Review data fetching patterns and implement pagination
322+
- **API Rate Limits**: Implement request throttling and caching strategies
323+
324+
For detailed troubleshooting guides, see:
325+
- [CueWeb User Guide](/docs/user-guides/cueweb-user-guide)
326+
- [REST API Reference](/docs/reference/rest-api-reference/)
327+
- [Developer Guide](/docs/developer-guide/cueweb-development)

0 commit comments

Comments
 (0)