[cueweb] CueWeb system: First web-based release of CueGUI with many f…

…eatures from Cuetopia (#1596)

CueWeb is a web-based application that brings the core functionality of [CueGUI](https://github.com/AcademySoftwareFoundation/OpenCue/tree/master/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](https://github.com/AcademySoftwareFoundation/OpenCue/tree/master/rest_gateway) to provide a REST endpoint for seamless interaction with the OpenCue gRPC API.

CueWeb was developed using [React.js](https://react.dev/), [Next.js](https://nextjs.org/), [ShadCN UI](https://ui.shadcn.com/), and [NextAuth.js](https://next-auth.js.org/) 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:

- [Using a built-in OAuth Provider](https://next-auth.js.org/configuration/providers/oauth) (e.g
Github, Google, Okta, Apple, GitLab, Amazon, Microsoft Azure, LinkedIn, Atlassian, Auth0, etc...)
   - List of NextAuth.js providers: https://next-auth.js.org/providers/.
- [Using a custom OAuth Provider](https://next-auth.js.org/configuration/providers/oauth#using-a-custom-provider)
- [Using Email](https://next-auth.js.org/configuration/providers/email)
- [Using Credentials](https://next-auth.js.org/configuration/providers/credentials)

Core features and code changes:
- User authentication:
   - Secure login capabilities. Initial version using Okta, Google, and GitHub.
   - Added functionality to make login usage optional in CueWeb. See cueweb/README.md for more information.

- Job management dashboard:
   - Customizable table views to show or hide specific columns.
   - Filter jobs by state (active, paused, or completed).
   - Monitor or unmonitor jobs across various statuses.
   - Detailed job inspection via pop-ups displaying associated layers and frames.
   - Frame navigation with hyperlinks to logs and data pages.

- Job search functionality:
   - Search for jobs using show names followed by a hyphen.
   - Dropdown suggestions for matching jobs based on naming conventions like show1-shot-test_job_123.
   - Regex-enabled search (triggered by !) for advanced query patterns, with a tooltip for guidance.

- Dark mode toggle: 
   - Allows users to switch between light and dark themes.

- Optimized search and results loading:
   - Virtualized lists via FixedSizeList to improve performance.
   - Web worker implementation for filtering, reducing main thread workload.
   - Loading animations and efficient API call handling.

- Multi-job management:
   - Add or remove multiple jobs from the dashboard directly from search results.
   - Highlight jobs already in the table with a green indicator.

- Actions and context menu
   - Added actions for jobs, layers, and frames, including pause, unpause, retry, kill, and eat dead frames.
   - Option to un-monitor all/selected/finished/paused jobs in the jobs data table.
   - Context-sensitive menus disable options for completed jobs and ensure proper screen rendering.

- Table auto-reloading: 
   - All tables (jobs, layers, frames) now update at regular intervals for real-time data.

- View frame logs:
   - View previous and current log versions with a dropdown menu for selection.

- Authorization and security:
   - Authorization headers included in all REST gateway requests.
   - JWT tokens generated securely for API authentication.

- Unit testing:
   - Added Jest tests for authentication middleware, error handling, and JWT creation.

- 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: #1595


Co-authored-by: Mariz Fahmy <[email protected]>
Co-authored-by: Zachary Fong <[email protected]>
Co-authored-by: Tomi Lui <[email protected]>
Co-authored-by: Ramon Figueiredo <[email protected]>

cueweb/.env.example

@@ -0,0 +1,26 @@
+NEXT_PUBLIC_OPENCUE_ENDPOINT=http://your-rest-gateway-url.com
+
+# Sentry values
+SENTRY_ENVIRONMENT='development'
+SENTRY_DSN = sentrydsn
+SENTRY_URL = sentryurl
+SENTRY_ORG = sentryorg
+SENTRY_PROJECT = sentryproject
+
+# Authentication Configuration:
+NEXT_PUBLIC_AUTH_PROVIDER=github,okta,google
+NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_SECRET=canbeanything
+
+# values from Okta OAuth 2.0
+NEXT_AUTH_OKTA_CLIENT_ID=oktaid
+NEXT_AUTH_OKTA_ISSUER=https://company.okta.com
+NEXT_AUTH_OKTA_CLIENT_SECRET=oktasecret
+
+# values from Google Cloud Platform OAuth 2.0
+GOOGLE_CLIENT_ID=googleclientid
+GOOGLE_CLIENT_SECRET=googleclientsecret
+
+# values from Github OAuth 2.0
+GITHUB_ID=githubid
+GITHUB_SECRET=githubsecret

cueweb/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"]
+}

cueweb/.gitignore

@@ -0,0 +1,5 @@
+
+# Sentry Config File
+.sentryclirc
+.env.local
+/coverage

cueweb/.prettierignore

@@ -0,0 +1 @@
+.next

cueweb/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+    "printWidth": 120
+}

cueweb/Dockerfile

@@ -0,0 +1,68 @@
+FROM node:21-alpine
+
+WORKDIR /opt/cueweb
+
+# If needed, you can change the registry where packages are fetched from
+# RUN npm config set registry <your artifactory url>
+
+# install dependencies before copying the source code
+COPY package*.json ./
+
+# when SENTRYCLI_USE_LOCAL is set to 1, sentry-cli binary will be discovered from $PATH and copied locally, instead
+# of being downloaded from external servers. (https://docs.sentry.io/product/cli/installation/)
+# This is necessary if the firewall blocks downloads from external servers
+# sentry-cli is needed to upload source maps to sentry
+# ENV SENTRYCLI_USE_LOCAL=1
+
+# Skip downloading the sentry-cli binary entirely
+ENV SENTRYCLI_SKIP_DOWNLOAD=1
+# run npm install if npm ci is not working properly because of the package-lock.json
+# RUN npm install
+RUN npm ci
+
+COPY *.json /opt/cueweb/
+COPY next.config.js /opt/cueweb/
+COPY postcss.config.js /opt/cueweb/
+COPY tailwind.config.js /opt/cueweb/
+COPY app/ /opt/cueweb/app/
+COPY components/ui /opt/cueweb/components/ui
+COPY lib/ /opt/cueweb/lib/
+COPY sentry.client.config.ts /opt/cueweb/sentry.client.config.ts
+COPY sentry.server.config.ts /opt/cueweb/sentry.server.config.ts
+COPY sentry.edge.config.ts /opt/cueweb/sentry.edge.config.ts
+COPY public/ /opt/cueweb/public/ 
+
+# needed to give permission to store cached data from 'fetch'
+RUN chmod 755 /opt/cueweb
+
+EXPOSE 3000
+
+# for dev testing:
+# CMD ["/bin/sh"]
+# command for running unit tests:
+# CMD ["npm, "run", "test"]
+# command for running the application
+# CMD ["npm", "run", "dev"]
+
+# For production builds using Openshift (comment out all the following lines when testing locally):
+# this is required to build Next.js or else it will throw errors. Actual env variables will be passed by Openshift
+ENV NEXTAUTH_URL=tobeoverriden
+ENV NEXTAUTH_SECRET=tobeoverriden
+ENV NEXT_JWT_SECRET=tobeoverriden
+ENV NEXT_AUTH_OKTA_CLIENT_ID=tobeoverriden
+ENV NEXT_AUTH_OKTA_ISSUER=tobeoverriden
+ENV NEXT_AUTH_OKTA_CLIENT_SECRET=tobeoverriden
+ENV SENTRY_ENVIRONMENT=tobeoverriden
+ENV SENTRY_PROJECT=tobeoverriden
+ENV SENTRY_URL=tobeoverriden
+ENV SENTRY_ORG=tobeoverriden
+ENV SENTRY_DSN=tobeoverriden
+
+# The following environment variables need to be accurately defined during production or dev builds as their
+# values cannot be changed after build time
+ENV NEXT_PUBLIC_URL=tobeoverriden
+ENV NEXT_PUBLIC_OPENCUE_ENDPOINT=tobeoverriden
+ENV NEXT_PUBLIC_AUTH_PROVIDER=google,okta,github
+
+RUN npm run build
+CMD ["npm", "run", "start"]