feat: migrated common frontend and backend from notebooks v1

.dockerignore

@@ -5,8 +5,21 @@
 # Don't ignore the necessary files for the app
 !frontend/
 !backend/
+!common/
 !Makefile
 
-# Ignore node_modules and pycache inside accepted dirs
-**/node_modules/*
-**/__pycache__/*
+# Ignore generated dependencies, caches, and package artifacts inside accepted dirs
+**/node_modules
+**/node_modules/**
+**/.angular
+**/.angular/**
+**/dist
+**/dist/**
+**/build
+**/build/**
+**/*.egg-info
+**/*.egg-info/**
+**/__pycache__
+**/__pycache__/**
+**/*.py[cod]
+**/*.whl

.github/workflows/linting_bash_python_yaml_files.yaml

@@ -28,8 +28,10 @@ jobs:
         "
     - uses: psf/black@stable
       with:
+        version: "24.2.0"
         src: |
           ./backend
+          ./common/backend
 
   format_YAML_files:
     runs-on: ubuntu-latest

.github/workflows/oci-release.yml

@@ -21,6 +21,7 @@ jobs:
     - name: Run tests
       run: |
         make docker-build
+        make docker-smoke-test
   push:
     needs: test
     runs-on: ubuntu-latest

.github/workflows/test-node.yaml

@@ -2,8 +2,34 @@ name: Frontend Test
 on:
   pull_request:
     paths:
+    - .github/workflows/test-node.yaml
     - frontend/**
+    - common/frontend/**
 jobs:
+  common-frontend-checks:
+    name: Common Library Checks
+    runs-on: ubuntu-latest
+    steps:
+    - name: Check out code
+      uses: actions/checkout@v4
+    - name: Setup Node
+      uses: actions/setup-node@v4
+      with:
+        node-version: 16
+        cache: 'npm'
+        cache-dependency-path: common/frontend/kubeflow-common-lib/package-lock.json
+    - name: Install Common Library Dependencies
+      working-directory: common/frontend/kubeflow-common-lib
+      run: npm ci --no-audit
+    - name: Check Common Library Formatting
+      working-directory: common/frontend/kubeflow-common-lib
+      run: npm run format:check
+    - name: Lint Common Library
+      working-directory: common/frontend/kubeflow-common-lib
+      run: npm run lint-check
+    - name: Test Common Library
+      working-directory: common/frontend/kubeflow-common-lib
+      run: npm run test-ci
   frontend-format-linting-check:
     name: Code format and lint
     runs-on: ubuntu-latest
@@ -15,7 +41,9 @@ jobs:
       with:
         node-version: 16
         cache: 'npm'
-        cache-dependency-path: frontend/package-lock.json
+        cache-dependency-path: |
+          frontend/package-lock.json
+          common/frontend/kubeflow-common-lib/package-lock.json
     - name: Format code
       run: |
         npm install prettier@2.8.8 --prefix ./frontend
@@ -27,6 +55,7 @@ jobs:
         npm run lint-check
   frontend-unit-tests:
     name: Frontend Unit Tests
+    needs: common-frontend-checks
     runs-on: ubuntu-latest
     steps:
     - name: Check out code
@@ -36,14 +65,12 @@ jobs:
       with:
         node-version: 16
         cache: 'npm'
-        cache-dependency-path: frontend/package-lock.json
-    - name: Fetch Kubeflow and Build Common Library
+        cache-dependency-path: |
+          frontend/package-lock.json
+          common/frontend/kubeflow-common-lib/package-lock.json
+    - name: Build Common Library
       run: |
-        COMMIT=$(cat frontend/COMMIT)
-        cd /tmp && git clone https://github.com/kubeflow/notebooks.git
-        cd notebooks
-        git checkout $COMMIT
-        cd components/crud-web-apps/common/frontend/kubeflow-common-lib
+        cd common/frontend/kubeflow-common-lib
         npm ci --no-audit
         npm run build
         npm link ./dist/kubeflow
@@ -54,16 +81,17 @@ jobs:
         npm link kubeflow
         # Copy styles from kubeflow source to local styles directory
         mkdir -p ./src/styles/
-        cp -r /tmp/notebooks/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./src/styles/
+        cp -r ../common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./src/styles/
         # Also copy to node_modules for the copyCSS script
         mkdir -p ./node_modules/kubeflow/styles/
-        cp -r /tmp/notebooks/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./node_modules/kubeflow/styles/
+        cp -r ../common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./node_modules/kubeflow/styles/
     - name: Run Unit Tests
       run: |
         cd frontend
         npm run test:jest
   frontend-mock-tests:
     name: Frontend Mock Tests
+    needs: common-frontend-checks
     runs-on: ubuntu-latest
     steps:
     - name: Check out code
@@ -73,14 +101,12 @@ jobs:
       with:
         node-version: 16
         cache: 'npm'
-        cache-dependency-path: frontend/package-lock.json
-    - name: Fetch Kubeflow and Build Common Library
+        cache-dependency-path: |
+          frontend/package-lock.json
+          common/frontend/kubeflow-common-lib/package-lock.json
+    - name: Build Common Library
       run: |
-        COMMIT=$(cat frontend/COMMIT)
-        cd /tmp && git clone https://github.com/kubeflow/notebooks.git
-        cd notebooks
-        git checkout $COMMIT
-        cd components/crud-web-apps/common/frontend/kubeflow-common-lib
+        cd common/frontend/kubeflow-common-lib
         npm ci --no-audit
         npm run build
         npm link ./dist/kubeflow
@@ -91,13 +117,13 @@ jobs:
         npm link kubeflow
         # Copy styles from kubeflow source to local styles directory
         mkdir -p ./src/styles/
-        cp -r /tmp/notebooks/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./src/styles/
+        cp -r ../common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./src/styles/
         # Also copy to node_modules for the copyCSS script
         mkdir -p ./node_modules/kubeflow/styles/
-        cp -r /tmp/notebooks/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./node_modules/kubeflow/styles/
+        cp -r ../common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./node_modules/kubeflow/styles/
         # Copy assets as well
         mkdir -p ./node_modules/kubeflow/assets/
-        cp -r /tmp/notebooks/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/* ./node_modules/kubeflow/assets/
+        cp -r ../common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/* ./node_modules/kubeflow/assets/
     - name: Run E2E Tests
       run: |
         cd frontend

.gitignore

@@ -1,7 +1,8 @@
 **/__pycache__/
 **/.vscode/
 **/static/*
-**/fonts/
+# Generated by `npm run copyLibAssets`; the source fonts live in common/.
+frontend/src/assets/fonts/
 
 # Swap
 [._]*.s[a-v][a-z]

.pre-commit-config.yaml

@@ -3,7 +3,7 @@ repos:
   rev: 24.2.0
   hooks:
   - id: black
-    files: ^backend/.*\.py$
+    files: ^(backend|common/backend)/.*\.py$
     exclude: .*upstream.*
 
 - repo: https://github.com/adrienverge/yamllint

Dockerfile

@@ -1,34 +1,20 @@
-# --- Clone the kubeflow/kubeflow code ---
-FROM ubuntu AS fetch-kubeflow-kubeflow
-
-RUN apt-get update && apt-get install git -y
-
-WORKDIR /kf
-COPY ./frontend/COMMIT ./
-RUN git clone https://github.com/kubeflow/notebooks.git kubeflow && \
-    COMMIT=$(cat ./COMMIT) && \
-    cd kubeflow && \
-    git checkout $COMMIT
-
-# --- Build the backend kubeflow-wheel ---
+# --- Build the backend kubeflow wheel ---
 FROM python:3.12-slim AS backend-kubeflow-wheel
 
 WORKDIR /src
 RUN pip install setuptools wheel
 
-ARG BACKEND_LIB=/kf/kubeflow/components/crud-web-apps/common/backend
-COPY --from=fetch-kubeflow-kubeflow $BACKEND_LIB .
+COPY ./common/backend/ ./
 RUN python setup.py sdist bdist_wheel
 
 # --- Build the frontend kubeflow library ---
 FROM node:22-bookworm-slim AS frontend-kubeflow-lib
 
 WORKDIR /src
-ARG LIB=/kf/kubeflow/components/crud-web-apps/common/frontend/kubeflow-common-lib
-COPY --from=fetch-kubeflow-kubeflow $LIB/package*.json ./
-RUN npm install
+COPY ./common/frontend/kubeflow-common-lib/package*.json ./
+RUN npm ci --no-audit
 
-COPY --from=fetch-kubeflow-kubeflow $LIB/ ./
+COPY ./common/frontend/kubeflow-common-lib/ ./
 RUN npm run build
 
 # --- Build the frontend ---

Makefile

@@ -1,8 +1,3 @@
-# Local path to kubeflow/notebooks repo for common backend code.
-# Clone https://github.com/kubeflow/notebooks to develop locally.
-# Set KUBEFLOW_REPOSITORY env var or use default /tmp/notebooks.
-KUBEFLOW_REPOSITORY ?= /tmp/notebooks
-
 # Default to kserve if not specified, but allow override via environment variable
 GITHUB_REPOSITORY_OWNER ?= kserve
 IMG ?= ghcr.io/$(shell echo $(GITHUB_REPOSITORY_OWNER) | tr '[:upper:]' '[:lower:]')/models-web-app
@@ -16,15 +11,19 @@ prettier-check:
 docker-build:
 	docker build -t ${IMG}:${TAG} .
 
+docker-smoke-test:
+	docker run --rm --entrypoint python ${IMG}:${TAG} -c \
+		'from kubernetes import config; config.load_incluster_config = lambda: None; config.load_kube_config = lambda: None; import entrypoint'
+
 docker-push:
 	docker push $(IMG):${TAG}
 
-.PHONY: docker-build-multi-arch
+.PHONY: docker-build docker-smoke-test docker-build-multi-arch
 docker-build-multi-arch: ##  Build multi-arch docker images with docker buildx
 	docker buildx build --platform ${ARCH} --tag ${IMG}:${TAG} .
 
 .PHONY: docker-build-push-multi-arch
 docker-build-push-multi-arch: ## Build multi-arch docker images with docker buildx and push to docker registry
 	docker buildx build --platform ${ARCH} --tag ${IMG}:${TAG} --push .
 
-image: docker-build docker-push
+image: docker-build docker-push

README.md

@@ -159,11 +159,11 @@ Expected response:
 
 ## Development
 
-The frontend is build with [Angular](https://angular.io/) and the backend is written with the Python [Flask](https://flask.palletsprojects.com/en/1.1.x/) framework.
+The frontend is built with [Angular](https://angular.io/) and the backend is written with the Python [Flask](https://flask.palletsprojects.com/en/1.1.x/) framework.
 
-This web application is utilizing common code from the [kubeflow/notebooks](https://github.com/kubeflow/notebooks/tree/master/components/crud-web-apps/common) repository. We want to enforce the same user experience across our different Kubeflow web applications and also keep them in the same development state. In order to achieve this the applications will be using this shared common code.
-
-This will require us to fetch this common code when we want to either build the application locally or in an OCI container image.
+The common Angular and Python libraries required by this web application are
+maintained in this repository under [`common`](common/README.md). Local
+development and OCI image builds therefore require only this repository.
 
 In order to run the application locally you will need to:
 
@@ -187,8 +187,6 @@ cd $KSERVE_MODELS_WEB_APPLICATION_REPOSITORY/frontend
 # Setup dependencies and build common library
 make setup
 
-# Optional: Specify custom Kubeflow repository path. Default: `../../notebooks` (relative to the frontend directory)
-# make setup KF_REPO=/path/to/notebooks
 # Clean Command: Provides a make clean target to remove node_modules
 # make clean
 
@@ -199,11 +197,8 @@ npm run build:watch
 #### Option 2: Manual setup
 
 ```bash
-# build the common library
-COMMIT=$(cat ./frontend/COMMIT)
-cd $KUBEFLOW_REPOSITORY/components/crud-web-apps/common/frontend/kubeflow-common-lib
-git checkout $COMMIT
-
+# build the common library included in this repository
+cd $KSERVE_MODELS_WEB_APPLICATION_REPOSITORY/common/frontend/kubeflow-common-lib
 npm i
 npm run build
 cd dist/kubeflow
@@ -223,13 +218,13 @@ npm run build:watch
 ```bash
 # create a virtual environment and install dependencies
 # https://packaging.python.org/guides/installing-using-pip-and-virtual-environments/
-cd $KSERVE_MODELS_WEB_APPLICATION_REPOSITORY/backend
+cd $KSERVE_MODELS_WEB_APPLICATION_REPOSITORY
 python3.12 -m pip install --user virtualenv
-python3.12 -m venv web-application-development
-source web-application-development/bin/activate
+python3.12 -m venv backend/web-application-development
+source backend/web-application-development/bin/activate
 
 # install the dependencies on the activated virtual environment
-KUBEFLOW_REPOSITORY="/path/to/kubeflow/notebooks" make -C backend install-deps
+make -C backend install-deps
 
 # run the backend
 make -C backend run-dev

backend/Makefile

@@ -1,13 +1,10 @@
 SHELL=bash
 
-# Local path to kubeflow/notebooks repository for common backend code.
-# Clone https://github.com/kubeflow/notebooks to develop locally.
-# Set KUBEFLOW_REPOSITORY environment variable or use the default /tmp/notebooks.
-KUBEFLOW_REPO ?= $(or $(KUBEFLOW_REPOSITORY),/tmp/notebooks)
-COMMON_BACKEND_DIR ?= ${KUBEFLOW_REPO}/components/crud-web-apps/common/backend
+# Local path to the common backend package in this repository.
+COMMON_BACKEND_DIRECTORY ?= ../common/backend
 
 install-deps:
-	pushd ${COMMON_BACKEND_DIR} && \
+	pushd ${COMMON_BACKEND_DIRECTORY} && \
 	pip install -e . && \
 	popd
 	pip install -r requirements.txt

common/README.md

@@ -0,0 +1,26 @@
+# Common web application libraries
+
+This directory contains the Python backend package and Angular frontend package
+required to build KServe UI. Keeping these packages in this repository makes
+local development, continuous integration, and OCI image builds independent of
+a separate `kubeflow/notebooks` checkout.
+
+The initial source was copied from
+[`kubeflow/notebooks`](https://github.com/kubeflow/notebooks/tree/0b835a7848ddcadf2c920a8e14aeae121ac982d9/components/crud-web-apps/common)
+at commit `0b835a7848ddcadf2c920a8e14aeae121ac982d9`:
+
+- `backend` comes from `components/crud-web-apps/common/backend`.
+- `frontend/kubeflow-common-lib` comes from
+  `components/crud-web-apps/common/frontend/kubeflow-common-lib`.
+
+The copied Kubeflow source is provided under the Apache License 2.0, except for
+third-party files that retain their original license terms. The vendored Monaco
+Editor v0.32.0 type definitions in
+[`monaco.ts`](frontend/kubeflow-common-lib/projects/kubeflow/src/lib/editor/interfaces/monaco.ts)
+are provided by Microsoft under the MIT License; the applicable license text is
+preserved in
+[`LICENSE.monaco-editor.txt`](frontend/kubeflow-common-lib/projects/kubeflow/src/lib/editor/interfaces/LICENSE.monaco-editor.txt).
+
+Future changes to these libraries are maintained and reviewed in the KServe
+Models Web Application repository; they are not automatically synchronized
+from Kubeflow Notebooks.

common/backend/.gitignore

@@ -0,0 +1,3 @@
+kubeflow.egg-info
+dist
+build