ramonfigueiredo
commented
2 days ago Note: The following text will be in a new PR to the opencue.io page with the extra instructions in the CueWeb README.md file.
First look: CueWeb's user interface
Introduction
OpenCue has facilitated efficient management of rendering jobs through its application, CueGUI, which includes Cuetopia and CueCommander. Previously, OpenCue's capabilities were somewhat restricted as it was primarily limited to desktops/workstations running Qt-based applications. Because of that, the CueWeb system was created. CueWeb is a transformative, web-based application that extends access across multiple platforms, ensuring users can manage their rendering tasks from virtually anywhere.
A seamless transition to web accessibility
CueWeb replicates the core functionality of CueGUI (Cuetopia and Cuecommander) in a web-accessible format, enhancing usability while maintaining the familiar interface that users appreciate. This adaptation supports essential operations such as:
- Secure user authentication:
- Authentication through Github, Google, Okta, Apple, GitLab, Amazon, Microsoft Azure, LinkedIn, Atlassian, Auth0, etc. Other providers and login options can be easily configured and enabled in the CueWeb. See NextAuth.js authentication using email, credentials and providers: https://next-auth.js.org/providers/
- Customizable job management dashboard:
- Manage jobs with a customizable table where users can select visible columns and filter jobs based on their state (active, paused, completed).
- Flexible monitoring controls:
- Easily un-monitor jobs across all statuses.
- Detailed job inspection:
- View job details with pop-up windows showing layers and frames associated with each job.
- Frame navigation and logs access:
- Navigate frames using hyperlinks that lead to dedicated pages for frame data and logs.
- Advanced job search functionality:
- Search for jobs by show name with dropdown suggestions for matching entries.
- Search functionality requires
show-shot-as the prefix to reduce the number of results returned.
- Dark mode toggle for user preference:
- Switch between light and dark modes according to user preference.
- Enhanced search functionality:
- Users can enable regex searches by appending '!' to their queries, with tooltips provided for guidance.
- Optimized loading times using virtualization and web workers, along with loading animations for a better user experience.
- Users can add or remove multiple jobs directly from the search results, with existing jobs highlighted in green.
- Enhanced security using Opencue API:
- CueWeb uses JWT token generation for enhanced security in authorization headers.
- CueWeb actions and context menu are available:
Job actions: Unmonitor, Pause, Retry dead frames, Eat dead frames, Kill.
- Layer actions:
Kill,Eat,Retry,Retry dead frames. - Frame actions:
Retry,Eat,Kill. - Menu items are disabled if the job has finished, and the context menu is always rendered on-screen.
- Layer actions:
- Auto-reloading of tables:
- All tables (jobs, layers, frames) are auto-reloaded at regular intervals to display the latest data.
CueWeb’s user interface
Upon logging in through Okta/Google/GitHub or another authentication method configured using NextAuth.js (Figures 1 or 2), users are welcomed by CueWeb’s main dashboard, as shown in Figure 3 (light mode) or Figure 4 (dark mode). The CueWeb main page contains a paginated table that is populated with the OpenCue jobs.
Figure 1: CueWeb authentication page (light mode)
Figure 2: CueWeb authentication page (dark mode)
Figure 3: CueWeb main page (light mode)
Figure 4: CueWeb main page (dark mode)
CueWeb dashboard (Jobs data table) - Similar to CueGUI Cuetopia's functionalities
Here’s what you can expect:
-
Visual modes: Toggle between light and dark mode to suit your viewing preferences.
-
Customizable jobs tables: Tailor your dashboard by selecting which columns to display, enhancing readability and focus on critical jobs metrics (see Figure 5)
Figure 5: Column visibility dropdown to choose display data table columns
- Efficient job filtering: Filter jobs by state -
Finished,Failing,Dependency,In Progress,Paused- to streamline management tasks (see Figure 6).
Figure 6: Data table filtering based on job state
- Advanced monitoring options: Un-monitor jobs selectively or in bulk, providing flexibility in data visualization (see Figures 7 and 8).
Figure 7: Un-monitoring selected jobs (data table before un-monitor selection)
Figure 8: Un-monitoring selected jobs (data table after un-monitor selection)
- Detailed inspections: A pop-up detail view for layers and frames associated with a selected job (see Figure 8 for light mode and Figure 10 for dark mode), offering deep dives into specific frame logs as shown in Figure 11 for light mode and Figure 12 for dark mode.
Figure 9: Pop-up window to view layers and frames information (light mode)
Figure 10: Pop-up window to view layers and frames information (dark mode)
Figure 11: Frame information and logs visualization (light mode)
Figure 12: Frame information and logs visualization (dark mode)
- Job searching: Search for a job by typing in a show name followed by a hyphen and then the shot followed by a hyphen (ex: “show-shot-”) or by typing in a regex query followed by a “!” (ex: “.character-name!”). This will trigger a dropdown populated with jobs for that query (see Figure 13). Clicking jobs in this dropdown will add them to the jobs table. Jobs in the jobs table will be highlighted
greenin the dropdown.
Figure 13: Job search functionality
CueWeb Actions for Jobs / Layers / Frames
The CueWeb system includes actions like eat dead frames, retry dead frames, pause, unpause, and kill for selected jobs in the table. Also, the ability to right-click jobs, layers, and frames to get a context menu popup with actions for that object type.
Figure 14 shows the job context menu with options to un-monitor, pause, retry dead frames, eat dead frames and kill jobs and Figure 15 shows the successful message after selecting kill a job.
Figure 14: CueWeb with job context menu open
Figure 15: Pop-up showing a successful message after selecting kill a job
Figure 16 shows the layer context menu with options to kill, eat, retry, and retry dead frames and Figure 17 shows the successful message after selecting retry a layer.
Figure 16: CueWeb with layer context menu open
Figure 17: Pop-up showing a successful message after selecting retry a layer
Finally, Figure 16 shows the layer context menu with options to kill, eat, retry, and retry dead frames and Figure 17 shows the successful message after selecting retry a layer.
Figure 18: CueWeb with frame context menu open
Figure 19: Pop-up showing a successful message after selecting eat a frame
Conclusion
In conclusion, the CueWeb system marks a significant advancement in rendering job management by providing a powerful, web-based interface that simplifies and enhances user interaction with the OpenCue system. With features like customizable job tables, efficient job filtering, and detailed inspections, along with the ability to view comprehensive logs and switch visual modes, CueWeb ensures that managing rendering jobs is more accessible and adaptable to a variety of user needs.
marizf888
CueWeb is a web-based application that brings the core functionality of CueGUI, including Cuetopia and Cuecommander, to a web-accessible format. This initial version includes most Cuetopia features, with Cuecommander integration planned for the next phase. CueWeb simplifies rendering job management with customizable job tables, advanced filtering, detailed inspections, log viewing, and light/dark mode toggling, making it efficient and accessible across platforms. Finally, CueWeb leverages the OpenCue REST Gateway to provide a REST endpoint for seamless interaction with the OpenCue gRPC API.
CueWeb was developed using React.js, Next.js, ShadCN UI, and NextAuth.js for authentications. Authentication Providers in NextAuth.js are services that can be used to sign in to a user.
There are four ways a user can be signed in:
Core features and code changes:
User authentication:
Job management dashboard:
Job search functionality:
Dark mode toggle:
Optimized search and results loading:
Multi-job management:
Actions and context menu
Table auto-reloading:
View frame logs:
Authorization and security:
Unit testing:
Include some CueWeb screenshots examples: https://github.com/AcademySoftwareFoundation/OpenCue/blob/master/cueweb/interface_screenshots
Link the Issue(s) this Pull Request is related to. Create the first version of the CueWeb system: a web-based application that replicates the core functionality of CueGUI: https://github.com/AcademySoftwareFoundation/OpenCue/issues/1595
Co-authored-by: Mariz Fahmy mfahmy@imageworks.com Co-authored-by: Zachary Fong zfong@imageworks.com Co-authored-by: Tomi Lui tlui@imageworks.com Co-authored-by: Ramon Figueiredo rfigueiredo@imageworks.com