123 lines
3.7 KiB
Markdown
123 lines
3.7 KiB
Markdown
# 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.
|
|
|
|
### Supported ENV Vars
|
|
|
|
The following is a list of ENV var that can be set for any web app that is using this base app.
|
|
This is list is incomplete, we will be adding more variables in the future.
|
|
| ENV Var | Description |
|
|
| - | - |
|
|
| CSRF_SAMESITE | Controls the [SameSite value](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#SameSite) of the CSRF cookie |
|
|
|
|
### How to use
|
|
|
|
In order to use this code during the development process one could use the `-e` [flag](https://pip.pypa.io/en/stable/reference/pip_install/#install-editable) with `pip install`. For example:
|
|
|
|
```bash
|
|
# 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:
|
|
```dockerfile
|
|
### 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
|
|
```bash
|
|
# 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
|
|
|
|
```dockerfile
|
|
# --- 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
|
|
|
|
```
|