120 lines
3.8 KiB
Markdown
120 lines
3.8 KiB
Markdown
# Jupyter web app
|
|
|
|
This web app is responsible for allowing the user to manipulate the Jupyter Notebooks in their Kubeflow cluster. To achieve this it provides a user friendly way to handle the lifecycle of Notebook CRs.
|
|
|
|
## Image Groups
|
|
|
|
With the release of Kubeflow 1.3, two types have Notebook Servers have been added
|
|
alongside the familiar JupyterLab:
|
|
|
|
- Group 1
|
|
- Group 2
|
|
|
|
Some extra configurations are applied Notebook Servers belonging to these groups:
|
|
|
|
The annotation `notebooks.kubeflow.org/http-rewrite-uri: /` is added to Notebook
|
|
resources of both groups. This configures Istio to rewrite the URI to `/` on
|
|
the container. This is useful for applications which host their on `/`
|
|
and do not allow you to change the URI subpath easily.
|
|
|
|
The annotation `notebooks.kubeflow.org/http-headers-request-set:`
|
|
`'{"X-RStudio-Root-Path":"/notebook/<namespace>/<name>/"}'` is added to
|
|
Notebook resources belonging to Group 2. This configures Istio to add
|
|
this header to requests, which is necessary for images from Group 2 to work.
|
|
|
|
The Jupyter Web App displays the logos for each Notebook Server group
|
|
in a button toggle in the Spawner UI. To easily identify the group of
|
|
a running Notebook Server, the Index page contains a column that displays
|
|
the icon for each image group. The SVG logos and icons for each group are added
|
|
with a [configmap](./manifests/base/configs/logos-configmap.yaml) to make it easy for users to customize the logos and icons for their environment.
|
|
|
|
## Development
|
|
|
|
Requirements:
|
|
* node 12.0.0
|
|
* python 3.8
|
|
|
|
### Frontend
|
|
|
|
__Build the common library:__
|
|
|
|
```bash
|
|
cd components/crud-web-apps/common/frontend/kubeflow-common-lib
|
|
npm i
|
|
npm run build
|
|
cd dist/kubeflow
|
|
npm link
|
|
```
|
|
|
|
__Build the app frontend:__
|
|
|
|
```bash
|
|
cd components/crud-web-apps/jupyter/frontend
|
|
npm i
|
|
npm link kubeflow
|
|
npm run build:watch
|
|
```
|
|
|
|
### Backend
|
|
|
|
__Build the app backend:__
|
|
|
|
```bash
|
|
cd components/crud-web-apps/jupyter
|
|
|
|
# create a virtual env and install deps
|
|
# https://packaging.python.org/guides/installing-using-pip-and-virtual-environments/
|
|
python3.8 -m pip install --user virtualenv
|
|
python3.8 -m venv web-apps-dev
|
|
source web-apps-dev/bin/activate
|
|
|
|
# install the deps on the activated virtual env
|
|
make -C backend install-deps
|
|
|
|
# run the backend
|
|
# NOTE: if your on MacOS, you might need to disable "AirPlay Receiver" as this uses port 5000
|
|
# https://developer.apple.com/forums/thread/682332
|
|
make -C backend run-dev
|
|
```
|
|
|
|
### Internationalization
|
|
|
|
Support for non-English languages is only supported in a best effort way.
|
|
|
|
Internationalization(i18n) was implemented using [Angular's i18n](https://angular.io/guide/i18n)
|
|
guide and practices, in the frontend. You can use the following methods to
|
|
ensure the text of the app will be localized:
|
|
1. `i18n` attribute in html elements, if the node's text should be translated
|
|
2. `i18n-{attribute}` in an html element, if the element's attribute should be
|
|
translated
|
|
3. [$localize](https://angular.io/api/localize/init/$localize) to mark text in
|
|
TypeScript variables that should be translated
|
|
|
|
The file for the English text is located under `i18n/messages.xlf` and other
|
|
languages under their respective locale folder, i.e. `i18n/fr/messages.fr.xfl`.
|
|
Each language's folder, aside from English, should have a distinct and up to
|
|
date OWNERs file that reflects the maintainers of that language.
|
|
|
|
**Testing**
|
|
|
|
You can run a different translation of the app, locally, by running
|
|
```bash
|
|
ng serve --configuration=fr
|
|
```
|
|
|
|
You must also ensure that the backend is running, since Angular's dev server
|
|
will be proxying request to the backend at `localhost:5000`.
|
|
|
|
## E2E Tests
|
|
|
|
To run the tests locally users will need to:
|
|
```bash
|
|
# navigate to the frontend and make sure the node modules are installed
|
|
cd frontend
|
|
npm i
|
|
# ensure the backend is running and serving the files under localhost:5000
|
|
# you can run the backend with: make run-dev
|
|
# run the tests
|
|
npm run e2e
|
|
```
|