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