kubeflow
/
notebooks
mirror of https://github.com/kubeflow/notebooks.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
notebooks/workspaces/frontend
History
Guilherme Caponetto f25a22eac3
feat(ws): automate generation of types and HTTP client layer from Swagger definitions (#496) 
Signed-off-by: Guilherme Caponetto <638737+caponetto@users.noreply.github.com>
 		2025-08-05 12:28:53 +00:00
..
.husky chore(ws): lint frontend on each commit (#440) 2025-06-25 10:51:16 +00:00
.vscode feat(ws): add fallback mechanism to broken images (#448) 2025-06-27 13:46:17 +00:00
__mocks__ feat(ws): initial commit for frontend (#19) 2024-06-28 00:48:41 +00:00
config chore(ws): added cspell to enforce spelling check (#469) 2025-07-07 11:15:22 +00:00
eslint-local-rules chore(ws): show ESLint errors from local rules on IDE (#439) 2025-06-25 10:52:16 +00:00
scripts feat(ws): automate generation of types and HTTP client layer from Swagger definitions (#496) 2025-08-05 12:28:53 +00:00
src feat(ws): automate generation of types and HTTP client layer from Swagger definitions (#496) 2025-08-05 12:28:53 +00:00
.dockerignore feat(ws): containerize frontend component (#394) 2025-07-24 19:41:01 +00:00
.env.cypress.mock chore(ws): add cypress structure and initial tests for frontend (#73) 2024-11-08 19:59:13 +00:00
.eslintignore chore(ws): Setup eslint and jest configurations (#141) 2024-12-03 15:21:59 +00:00
.eslintrc.js chore(ws): enforce component specific imports (#475) 2025-07-21 19:26:58 +00:00
.gitignore feat(ws): Notebooks v2 Create Workspace Kind (#365) 2025-06-25 10:50:15 +00:00
.prettierignore feat(ws): Notebooks 2.0 // Frontend // Workspaces table // Live mockup (#140) 2024-12-03 13:47:58 +00:00
.prettierrc feat(ws): Notebooks 2.0 // Frontend // Workspaces table // Live mockup (#140) 2024-12-03 13:47:58 +00:00
Dockerfile feat(ws): containerize frontend component (#394) 2025-07-24 19:41:01 +00:00
OWNERS chore: add OWNERS files with reviewers and labels (#450) 2025-06-26 21:42:17 +00:00
README.md feat(ws): automate generation of types and HTTP client layer from Swagger definitions (#496) 2025-08-05 12:28:53 +00:00
jest.config.js feat(ws): create new script to start frontend returning mocked data (#314) 2025-05-13 13:11:21 +00:00
nginx.conf feat(ws): containerize frontend component (#394) 2025-07-24 19:41:01 +00:00
package-lock.json feat(ws): automate generation of types and HTTP client layer from Swagger definitions (#496) 2025-08-05 12:28:53 +00:00
package.json feat(ws): automate generation of types and HTTP client layer from Swagger definitions (#496) 2025-08-05 12:28:53 +00:00
tsconfig.json feat(ws): create new script to start frontend returning mocked data (#314) 2025-05-13 13:11:21 +00:00

README.md

Kubeflow Workspaces Frontend

The Kubeflow Workspaces Frontend is the web user interface used to monitor and manage Kubeflow Workspaces as part of Kubeflow Notebooks 2.0.

⚠️ Warning ⚠️

The Kubeflow Workspaces Frontend is a work in progress and is NOT currently ready for use. We greatly appreciate any contributions.

Dev Setup

Requirements

This project requires the following tools to be installed on your system:

  • NodeJS and NPM
    • Node recommended version -> 20.17.0
    • NPM recommended version -> 10.8.2

Development

  1. Clone the repository:

    git clone https://github.com/kubeflow/notebooks.git

  2. Checkout the Notebooks 2.0 development branch:

    git checkout notebooks-v2

  3. Navigate to the frontend directory and install the project dependencies.

    cd workspaces/frontend && npm install

Build the Project

npm run build

Serve the UI Locally

This is the default setup for running the UI locally. Make sure you build the project using the instructions above prior to running the command below.

npm run start:dev

The command above requires the backend to be active in order to serve data. To run the UI independently, without establishing a connection to the backend, use the following command to start the application with a mocked API:

npm run start:dev:mock

Testing

Run all tests:

npm run test

Linting

Check for linting issues:

npm run test:lint

Automatically fix linting issues:

npm run test:fix

API Types & Client Generation

The TypeScript types and the HTTP client layer for interacting with the backend APIs are automatically generated from the backend's swagger.json file. This ensures the frontend remains aligned with the backend API contract at all times.

Generated Code Location

All generated files live in the src/generated directory.

⚠️ Do not manually edit any files in this folder.

Updating the Generated Code

To update the generated code, first update the swagger.version file in the scripts directory to the desired commit hash of the backend's swagger.json file.

Then run the following command to update the generated code:

npm run generate:api

Finally, make any necessary adaptations based on the changes in the generated code.