notebooks/components/crud-web-apps/common

Common code for CRUD web apps

Since our CRUD web apps like the Jupyter, Tensorboards and Volumes UIs are similarly build with Angular and Python/Flask we should factor the common code in to modules and libraries.

This directory will contain:

1. A Python package with a base backend. Each one of the mentioned apps are supposed to extend this backend.
2. An Angular library that will contain the common frontend code that these apps will be sharing

Backend

The backend will be exposing a base backend which will be taking care of:

• Serving the Single Page Application
• Adding liveness/readiness probes
• Authentication based on the kubeflow-userid header
• Authorization using SubjectAccessReviews
• Uniform logging
• Exceptions handling
• Common helper functions for dates, yaml file parsing etc.

How to use

In order to use this code during the development process one could use the -e flag with pip install. For example:

# I'm currently in /components/crud-web-apps/volumes/backend
cd ../../common/backend && pip install -e .

This will install all the dependencies of the package and you will now be able to include code from kubeflow.kubeflow.crud_backend in you current Python environment.

In order to build a Docker image and use this code you coud build a wheel and then install it:

### Docker
FROM python:3.7 AS backend-kubeflow-wheel

WORKDIR /src
COPY ./components/crud-web-apps/common/backend .

RUN python3 setup.py bdist_wheel

...
# Web App
FROM python:3.7

WORKDIR /package
COPY --from=backend-kubeflow-wheel /src .
RUN pip3 install .
...

Frontend

The common Angular library contains common code for:

• Communicating with the Central Dashboard to handle the Namespace selection
• Making http calls and handing their errors
• Surfacing errors and warnings
• Polling mechanisms
• Universal styling accross the different web apps
• Handling forms

How to use

# build the common library
cd common/frontend/kubeflow-common-lib
npm i
npm run build

# for development link the created module to the app
cd dist/kubeflow
npm link

# navigate to the corresponding app's frontend
cd crud-web-apps/volumes/frontend
npm i
npm link kubeflow

Common errors

NullInjectorError: StaticInjectorError(AppModule)[ApplicationRef -> NgZone]:
  StaticInjectorError(Platform: core)[ApplicationRef -> NgZone]:
    NullInjectorError: No provider for NgZone!

You also need to add "preserveSymlinks": true to the app's frontend angular.json at projects.frontend.architect.build.options.

Docker

# --- Build the frontend kubeflow library ---
FROM node:12 as frontend-kubeflow-lib

WORKDIR /src

COPY ./components/crud-web-apps/common/frontend/kubeflow-common-lib/package*.json ./
RUN npm install

COPY ./components/crud-web-apps/common/frontend/kubeflow-common-lib/ .
RUN npm run build

...
# --- Build the frontend ---
FROM node:12 as frontend
RUN npm install -g @angular/cli

WORKDIR /src
COPY ./components/crud-web-apps/volumes/frontend/package*.json ./
RUN npm install
COPY --from=frontend-kubeflow-lib /src/dist/kubeflow/ ./node_modules/kubeflow/

COPY ./components/crud-web-apps/volumes/frontend/ .

RUN npm run build -- --output-path=./dist/default --configuration=production