Volumes Management UI (kubeflow/kubeflow#5684)
* vwa(back): first commit of volumes web app backend
Signed-off-by: Kimonas Sotirchos <kimwnasptd@arrikto.com>
* vwa(front): init code for volumes web app frontend
Signed-off-by: Kimonas Sotirchos <kimwnasptd@arrikto.com>
* vwa: {Make,Docker}files
Signed-off-by: Kimonas Sotirchos <kimwnasptd@arrikto.com>
* vwa: gitignore
Signed-off-by: Kimonas Sotirchos <kimwnasptd@arrikto.com>
* vwa: README
Signed-off-by: Kimonas Sotirchos <kimwnasptd@arrikto.com>
* review: Rename Jupyter to Volumes in README
Signed-off-by: Kimonas Sotirchos <kimwnasptd@arrikto.com>
* review: Rephrase comment in default flavor
Signed-off-by: Kimonas Sotirchos <kimwnasptd@arrikto.com>
* review: Remove snapshot reference from default flavor
Signed-off-by: Kimonas Sotirchos <kimwnasptd@arrikto.com>
This commit is contained in:
Kimonas Sotirchos
GitHub
parent
a1e52c2b9e
commit
a63eff43ed
|
|
@ -0,0 +1,3 @@
|
|||
**/__pycache__/
|
||||
**/static/*
|
||||
py/
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
# --- Build the backend kubeflow-wheel ---
|
||||
FROM python:3.8 AS backend-kubeflow-wheel
|
||||
|
||||
WORKDIR /src
|
||||
|
||||
COPY ./common/backend/ .
|
||||
RUN python3 setup.py bdist_wheel
|
||||
|
||||
# --- Build the frontend kubeflow library ---
|
||||
FROM node:12 as frontend-kubeflow-lib
|
||||
|
||||
WORKDIR /src
|
||||
|
||||
COPY ./common/frontend/kubeflow-common-lib/package*.json ./
|
||||
RUN npm install
|
||||
|
||||
COPY ./common/frontend/kubeflow-common-lib/ .
|
||||
RUN npm run build
|
||||
|
||||
# --- Build the frontend ---
|
||||
FROM node:12-buster-slim as frontend
|
||||
|
||||
WORKDIR /src
|
||||
COPY ./volumes/frontend/package*.json ./
|
||||
RUN npm install
|
||||
COPY --from=frontend-kubeflow-lib /src/dist/kubeflow/ ./node_modules/kubeflow/
|
||||
|
||||
COPY ./volumes/frontend/ .
|
||||
|
||||
RUN npm run build -- --output-path=./dist/default --configuration=production
|
||||
RUN npm run build -- --output-path=./dist/rok --configuration=rok-prod
|
||||
|
||||
# Web App
|
||||
FROM python:3.7-slim-buster
|
||||
|
||||
WORKDIR /package
|
||||
COPY --from=backend-kubeflow-wheel /src .
|
||||
RUN pip3 install .
|
||||
|
||||
WORKDIR /src
|
||||
COPY ./volumes/backend/requirements.txt .
|
||||
RUN pip3 install -r requirements.txt
|
||||
|
||||
COPY ./volumes/backend/apps/ ./apps
|
||||
COPY ./volumes/backend/entrypoint.py .
|
||||
|
||||
COPY --from=frontend /src/dist/default/ /src/apps/default/static/
|
||||
COPY --from=frontend /src/dist/rok/ /src/apps/rok/static/
|
||||
|
||||
ENTRYPOINT ["/bin/bash","-c","gunicorn -w 3 --bind 0.0.0.0:5000 --access-logfile - entrypoint:app"]
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# See: https://github.com/moby/moby/issues/12886#issuecomment-480575928
|
||||
# Ignore everything and node_modules
|
||||
**
|
||||
#
|
||||
# Don't ignore the necessary files for the app
|
||||
!common/
|
||||
!volumes/
|
||||
|
||||
# Ignore node_modules and pycache inside accepted dirs
|
||||
**/node_modules/*
|
||||
**/__pycache__/*
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
IMG ?= gcr.io/arrikto-playground/kubeflow/volumes-web-app
|
||||
TAG ?= $(shell git describe --tags)
|
||||
DOCKERFILE=volumes/Dockerfile
|
||||
|
||||
docker-build:
|
||||
cp Dockerfile.dockerignore ../.dockerignore
|
||||
-cd ../ && docker build -t ${IMG}:${TAG} -f ${DOCKERFILE} .
|
||||
rm ../.dockerignore
|
||||
|
||||
|
||||
docker-push:
|
||||
docker push $(IMG):$(TAG)
|
||||
|
||||
image: docker-build docker-push
|
||||
@echo "Updated image ${IMG}"
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
# Volumes web app
|
||||
|
||||
This web app is responsible for allowing the user to manipulate PVCs in their Kubeflow cluster. To achieve this it provides a user friendly way to handle the lifecycle of PVC objects.
|
||||
|
||||
## Development
|
||||
|
||||
Requirements:
|
||||
* node 12.0.0
|
||||
* python 3.7
|
||||
|
||||
### Frontend
|
||||
|
||||
```bash
|
||||
# build the common library
|
||||
cd components/crud-web-apps/common/frontend/kubeflow-common-lib
|
||||
npm i
|
||||
npm run build
|
||||
cd dist/kubeflow
|
||||
npm link
|
||||
|
||||
# build the app frontend
|
||||
cd ../../../volumes/frontend
|
||||
npm i
|
||||
npm link kubeflow
|
||||
npm run build:watch
|
||||
```
|
||||
|
||||
### Backend
|
||||
```bash
|
||||
# create a virtual env and install deps
|
||||
# https://packaging.python.org/guides/installing-using-pip-and-virtual-environments/
|
||||
cd component/crud-web-apps/volumes/backend
|
||||
python3.7 -m pip install --user virtualenv
|
||||
python3.7 -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
|
||||
make -C backend run-dev
|
||||
```
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
SHELL=bash
|
||||
|
||||
install-deps:
|
||||
pushd ../../../py && \
|
||||
pip install -e . && \
|
||||
popd
|
||||
pip install -r requirements.txt
|
||||
|
||||
run:
|
||||
APP_PREFIX=/volumes \
|
||||
gunicorn -w 3 --bind 0.0.0.0:5000 --access-logfile - entrypoint:app
|
||||
|
||||
run-rok:
|
||||
UI_FLAVOR=rok \
|
||||
APP_PREFIX=/volumes \
|
||||
gunicorn -w 3 --bind 0.0.0.0:5000 --access-logfile - entrypoint:app
|
||||
|
||||
run-dev:
|
||||
UI_FLAVOR=default \
|
||||
BACKEND_MODE=dev \
|
||||
APP_PREFIX=/ \
|
||||
gunicorn -w 3 --bind 0.0.0.0:5000 --access-logfile - entrypoint:app
|
||||
|
||||
run-dev-rok:
|
||||
UI_FLAVOR=rok \
|
||||
BACKEND_MODE=dev \
|
||||
APP_PREFIX=/ \
|
||||
gunicorn -w 3 --bind 0.0.0.0:5000 --access-logfile - entrypoint:app
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import kubeflow.kubeflow.crud_backend as base
|
||||
from kubeflow.kubeflow.crud_backend import config, logging
|
||||
|
||||
log = logging.getLogger(__name__)
|
||||
|
||||
|
||||
def create_app(name=__name__, static_folder="static",
|
||||
cfg: config.Config = None):
|
||||
cfg = config.Config() if cfg is None else cfg
|
||||
|
||||
app = base.create_app(name, static_folder, cfg)
|
||||
|
||||
return app
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
from kubernetes import client
|
||||
|
||||
|
||||
def handle_storage_class(vol):
|
||||
"""
|
||||
vol: dict (send from the frontend)
|
||||
|
||||
If the fronend sent the special values `{none}` or `{empty}` then the
|
||||
backend will need to set the corresponding storage_class value that the
|
||||
python client expects.
|
||||
"""
|
||||
if "class" not in vol:
|
||||
return None
|
||||
if vol["class"] == "{none}":
|
||||
return ""
|
||||
if vol["class"] == "{empty}":
|
||||
return None
|
||||
else:
|
||||
return vol["class"]
|
||||
|
||||
|
||||
def pvc_from_dict(body, namespace):
|
||||
"""
|
||||
body: json object (frontend json data)
|
||||
|
||||
Convert the PVC json object that is sent from the backend to a python
|
||||
client PVC instance.
|
||||
"""
|
||||
return client.V1PersistentVolumeClaim(
|
||||
metadata=client.V1ObjectMeta(name=body["name"], namespace=namespace),
|
||||
spec=client.V1PersistentVolumeClaimSpec(
|
||||
access_modes=[body["mode"]],
|
||||
storage_class_name=handle_storage_class(body),
|
||||
resources=client.V1ResourceRequirements(
|
||||
requests={"storage": body["size"]}
|
||||
),
|
||||
),
|
||||
)
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
from kubeflow.kubeflow.crud_backend import api, status
|
||||
|
||||
|
||||
def pvc_status(pvc):
|
||||
"""
|
||||
Set the status of the pvc
|
||||
"""
|
||||
if pvc.metadata.deletion_timestamp is not None:
|
||||
return status.create_status(
|
||||
status.STATUS_PHASE.TERMINATING, "Deleting Volume..."
|
||||
)
|
||||
|
||||
if pvc.status.phase == "Bound":
|
||||
return status.create_status(status.STATUS_PHASE.READY, "Bound")
|
||||
|
||||
# The PVC is in Pending state, we check the Events to find out why
|
||||
evs = api.v1_core.list_namespaced_event(
|
||||
namespace=pvc.metadata.namespace,
|
||||
field_selector=api.events_field_selector(
|
||||
"PersistentVolumeClaim", pvc.metadata.name
|
||||
),
|
||||
).items
|
||||
|
||||
# If there are no events, then the PVC was just created
|
||||
if len(evs) == 0:
|
||||
return status.create_status(
|
||||
status.STATUS_PHASE.WAITING, "Provisioning Volume..."
|
||||
)
|
||||
|
||||
msg = f"Pending: {evs[0].message}"
|
||||
state = evs[0].reason
|
||||
if evs[0].reason == "WaitForFirstConsumer":
|
||||
phase = status.STATUS_PHASE.UNAVAILABLE
|
||||
msg = (
|
||||
"Pending: This volume will be bound when its first consumer"
|
||||
+ " is created. E.g., when you first browse its contents, or"
|
||||
+ " attach it to a notebook server"
|
||||
)
|
||||
elif evs[0].reason == "Provisioning":
|
||||
phase = status.STATUS_PHASE.WAITING
|
||||
elif evs[0].reason == "FailedBinding":
|
||||
phase = status.STATUS_PHASE.WARNING
|
||||
elif evs[0].type == "Warning":
|
||||
phase = status.STATUS_PHASE.WARNING
|
||||
elif evs[0].type == "Normal":
|
||||
phase = status.STATUS_PHASE.READY
|
||||
|
||||
return status.create_status(phase, msg, state)
|
||||
|
||||
|
||||
def viewer_status(viewer):
|
||||
"""
|
||||
Return a string representing the status of that viewer. If a deletion
|
||||
timestamp is set we want to return a `Terminating` state.
|
||||
"""
|
||||
try:
|
||||
ready = viewer["status"]["ready"]
|
||||
except KeyError:
|
||||
return status.STATUS_PHASE.UNINITIALIZED
|
||||
|
||||
if "deletionTimestamp" in viewer["metadata"]:
|
||||
return status.STATUS_PHASE.TERMINATING
|
||||
|
||||
if not ready:
|
||||
return status.STATUS_PHASE.WAITING
|
||||
|
||||
return status.STATUS_PHASE.READY
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
from kubeflow.kubeflow.crud_backend import api, helpers
|
||||
|
||||
from . import status
|
||||
|
||||
|
||||
def parse_pvc(pvc):
|
||||
"""
|
||||
pvc: client.V1PersistentVolumeClaim
|
||||
|
||||
Process the PVC and format it as the UI expects it.
|
||||
"""
|
||||
try:
|
||||
capacity = pvc.status.capacity["storage"]
|
||||
except Exception:
|
||||
capacity = pvc.spec.resources.requests["storage"]
|
||||
|
||||
parsed_pvc = {
|
||||
"name": pvc.metadata.name,
|
||||
"namespace": pvc.metadata.namespace,
|
||||
"status": status.pvc_status(pvc),
|
||||
"age": {
|
||||
"uptime": helpers.get_uptime(pvc.metadata.creation_timestamp),
|
||||
"timestamp": pvc.metadata.creation_timestamp.strftime(
|
||||
"%d/%m/%Y, %H:%M:%S"
|
||||
),
|
||||
},
|
||||
"capacity": capacity,
|
||||
"modes": pvc.spec.access_modes,
|
||||
"class": pvc.spec.storage_class_name,
|
||||
}
|
||||
|
||||
return parsed_pvc
|
||||
|
||||
|
||||
def get_pods_using_pvc(pvc, namespace):
|
||||
"""
|
||||
Return a list of Pods that are using the given PVC
|
||||
"""
|
||||
pods = api.list_pods(namespace)
|
||||
mounted_pods = []
|
||||
|
||||
for pod in pods.items:
|
||||
pvcs = get_pod_pvcs(pod)
|
||||
if pvc in pvcs:
|
||||
mounted_pods.append(pod)
|
||||
|
||||
return mounted_pods
|
||||
|
||||
|
||||
def get_pod_pvcs(pod):
|
||||
"""
|
||||
Return a list of PVC name that the given Pod
|
||||
is using. If it doesn't use any, then an empty list will
|
||||
be returned.
|
||||
"""
|
||||
pvcs = []
|
||||
if not pod.spec.volumes:
|
||||
return []
|
||||
|
||||
vols = pod.spec.volumes
|
||||
for vol in vols:
|
||||
# Check if the volume is a pvc
|
||||
if not vol.persistent_volume_claim:
|
||||
continue
|
||||
|
||||
pvcs.append(vol.persistent_volume_claim.claim_name)
|
||||
|
||||
return pvcs
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import os
|
||||
|
||||
from kubeflow.kubeflow.crud_backend import config, logging
|
||||
|
||||
from ..common import create_app as create_default_app
|
||||
from .routes import bp as routes_bp
|
||||
|
||||
log = logging.getLogger(__name__)
|
||||
|
||||
|
||||
def create_app(name=__name__, cfg: config.Config = None):
|
||||
cfg = config.Config() if cfg is None else cfg
|
||||
|
||||
# Properly set the static serving directory
|
||||
static_dir = os.path.join(
|
||||
os.path.abspath(os.path.dirname(__file__)), "static"
|
||||
)
|
||||
|
||||
app = create_default_app(name, static_dir, cfg)
|
||||
|
||||
log.info("Setting STATIC_DIR to: " + static_dir)
|
||||
app.config["STATIC_DIR"] = static_dir
|
||||
|
||||
# Register the app's blueprints
|
||||
app.register_blueprint(routes_bp)
|
||||
|
||||
return app
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
from flask import Blueprint
|
||||
|
||||
bp = Blueprint("default_routes", __name__)
|
||||
|
||||
from . import delete, get, post # noqa: F401, E402
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
from werkzeug import exceptions
|
||||
|
||||
from kubeflow.kubeflow.crud_backend import api, logging
|
||||
|
||||
from ...common import utils as common_utils
|
||||
from . import bp
|
||||
|
||||
log = logging.getLogger(__name__)
|
||||
|
||||
|
||||
@bp.route("/api/namespaces/<namespace>/pvcs/<pvc>", methods=["DELETE"])
|
||||
def delete_pvc(pvc, namespace):
|
||||
"""
|
||||
Delete a PVC only if it is not used from any Pod
|
||||
"""
|
||||
pods = common_utils.get_pods_using_pvc(pvc, namespace)
|
||||
if pods:
|
||||
pod_names = [p.metadata.name for p in pods]
|
||||
raise exceptions.Conflict("Cannot delete PVC '%s' because it is being"
|
||||
" used by pods: %s" % (pvc, pod_names))
|
||||
|
||||
log.info("Deleting PVC %s/%s...", namespace, pvc)
|
||||
api.delete_pvc(pvc, namespace)
|
||||
log.info("Successfully deleted PVC %s/%s", namespace, pvc)
|
||||
|
||||
return api.success_response("message",
|
||||
"PVC %s successfully deleted." % pvc)
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
from kubeflow.kubeflow.crud_backend import api, logging
|
||||
|
||||
from ...common import utils
|
||||
from . import bp
|
||||
|
||||
log = logging.getLogger(__name__)
|
||||
|
||||
|
||||
@bp.route("/api/namespaces/<namespace>/pvcs")
|
||||
def get_pvcs(namespace):
|
||||
# Return the list of PVCs
|
||||
pvcs = api.list_pvcs(namespace)
|
||||
content = [utils.parse_pvc(pvc) for pvc in pvcs.items]
|
||||
|
||||
return api.success_response("pvcs", content)
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
from flask import request
|
||||
|
||||
from kubeflow.kubeflow.crud_backend import api, decorators, logging
|
||||
|
||||
from ...common import form
|
||||
from . import bp
|
||||
|
||||
log = logging.getLogger(__name__)
|
||||
|
||||
|
||||
@bp.route("/api/namespaces/<namespace>/pvcs", methods=["POST"])
|
||||
@decorators.request_is_json_type
|
||||
@decorators.required_body_params("name", "mode", "class", "size", "type")
|
||||
def post_pvc(namespace):
|
||||
body = request.get_json()
|
||||
log.info("Received body: %s", body)
|
||||
|
||||
pvc = form.pvc_from_dict(body, namespace)
|
||||
|
||||
log.info("Creating PVC '%s'...", pvc)
|
||||
api.create_pvc(pvc, namespace)
|
||||
log.info("Successfully created PVC %s/%s", namespace, pvc.metadata.name)
|
||||
|
||||
return api.success_response("message", "PVC created successfully.")
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import os
|
||||
|
||||
from kubeflow.kubeflow.crud_backend import config, logging, rok
|
||||
|
||||
from ..common import create_app as create_default_app
|
||||
from .routes import bp as routes_bp
|
||||
|
||||
log = logging.getLogger(__name__)
|
||||
|
||||
|
||||
def create_app(name=__name__, cfg: config.Config = None):
|
||||
cfg = config.Config() if cfg is None else cfg
|
||||
|
||||
# Properly set the static serving directory
|
||||
static_dir = os.path.join(
|
||||
os.path.abspath(os.path.dirname(__file__)), "static"
|
||||
)
|
||||
|
||||
app = create_default_app(name, static_dir, cfg)
|
||||
|
||||
log.info("Setting STATIC_DIR to: " + static_dir)
|
||||
app.config["STATIC_DIR"] = static_dir
|
||||
|
||||
# Register the app's blueprints
|
||||
app.register_blueprint(rok.bp)
|
||||
app.register_blueprint(routes_bp)
|
||||
|
||||
return app
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
apiVersion: kubeflow.org/v1alpha1
|
||||
kind: PVCViewer
|
||||
metadata:
|
||||
name: {name}
|
||||
namespace: {namespace}
|
||||
spec:
|
||||
pvc: {name}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
from flask import Blueprint
|
||||
|
||||
bp = Blueprint("rok_routes", __name__)
|
||||
|
||||
from . import get, post, delete # noqa: F401, E402
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
from werkzeug import exceptions
|
||||
|
||||
from kubeflow.kubeflow.crud_backend import api, logging
|
||||
|
||||
from ...common import utils as common_utils
|
||||
from .. import utils as rok_utils
|
||||
from . import bp
|
||||
|
||||
log = logging.getLogger(__name__)
|
||||
|
||||
|
||||
@bp.route("/api/namespaces/<namespace>/pvcs/<pvc>", methods=["DELETE"])
|
||||
def delete_pvc(pvc, namespace):
|
||||
"""
|
||||
Delete a PVC, even if it is only mounted on PVCViewer Pods.
|
||||
Get list of PVCViewers that use the requested PVC. If no other Pods
|
||||
are using that PVC then delete the Viewer Pods as well as the PVC.
|
||||
"""
|
||||
pods = common_utils.get_pods_using_pvc(pvc, namespace)
|
||||
non_viewer_pods = [p for p in pods if not rok_utils.is_viewer_pod(p)]
|
||||
if non_viewer_pods:
|
||||
pod_names = [p.metadata.name for p in non_viewer_pods]
|
||||
raise exceptions.Conflict("Cannot delete PVC '%s' because it is being"
|
||||
" used by pods: %s" % (pvc, pod_names))
|
||||
|
||||
log.info("Deleting PVC %s/%s...", namespace, pvc)
|
||||
api.delete_pvc(pvc, namespace)
|
||||
log.info("Successfully deleted PVC %s/%s", namespace, pvc)
|
||||
|
||||
return api.success_response("message",
|
||||
"PVC %s successfully deleted." % pvc)
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
from kubeflow.kubeflow.crud_backend import api, logging
|
||||
|
||||
from ...common import status
|
||||
from .. import utils
|
||||
from . import bp
|
||||
|
||||
log = logging.getLogger(__name__)
|
||||
|
||||
|
||||
@bp.route("/api/namespaces/<namespace>/pvcs")
|
||||
def get_pvcs(namespace):
|
||||
# Get the active viewers for each pvc as a dictionary
|
||||
# with Key:PVC name and Value:Status of Viewer
|
||||
viewers_lst = api.list_custom_rsrc(*utils.PVCVIEWER, namespace)
|
||||
|
||||
viewers = {}
|
||||
for v in viewers_lst["items"]:
|
||||
pvc_name = v["spec"]["pvc"]
|
||||
viewers[pvc_name] = status.viewer_status(v)
|
||||
|
||||
# Return the list of PVCs and the corresponding Viewer's state
|
||||
pvcs = api.list_pvcs(namespace)
|
||||
content = [utils.parse_pvc(pvc, viewers) for pvc in pvcs.items]
|
||||
|
||||
return api.success_response("pvcs", content)
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
from flask import request
|
||||
|
||||
from kubeflow.kubeflow.crud_backend import api, decorators, logging
|
||||
|
||||
from ...common import form
|
||||
from .. import utils as rok_utils
|
||||
from . import bp
|
||||
|
||||
log = logging.getLogger(__name__)
|
||||
|
||||
|
||||
@bp.route("/api/namespaces/<namespace>/viewers", methods=["POST"])
|
||||
@decorators.request_is_json_type
|
||||
@decorators.required_body_params("name")
|
||||
def post_viewer(namespace):
|
||||
body = request.get_json()
|
||||
log.info("Received body: %s", body)
|
||||
|
||||
name = body["name"]
|
||||
viewer = rok_utils.load_pvcviewer_yaml_template(name=name,
|
||||
namespace=namespace)
|
||||
|
||||
log.info("Creating PVCViewer '%s'...", viewer)
|
||||
api.create_custom_rsrc(*rok_utils.PVCVIEWER, viewer, namespace)
|
||||
log.info("Successfully created PVCViewer %s/%s", namespace, name)
|
||||
|
||||
return api.success_response("message", "PVCViewer created successfully.")
|
||||
|
||||
|
||||
@bp.route("/api/namespaces/<namespace>/pvcs", methods=["POST"])
|
||||
@decorators.request_is_json_type
|
||||
@decorators.required_body_params("name", "mode", "class", "size", "type")
|
||||
def post_pvc(namespace):
|
||||
body = request.get_json()
|
||||
log.info("Received body: ", body)
|
||||
|
||||
pvc = form.pvc_from_dict(body, namespace)
|
||||
rok_utils.add_pvc_rok_annotations(pvc, body)
|
||||
|
||||
log.info("Creating PVC '%s'...", pvc)
|
||||
api.create_pvc(pvc, namespace)
|
||||
log.info("Successfully created PVC %s/%s", namespace, pvc.metadata.name)
|
||||
|
||||
return api.success_response("message", "PVC created successfully.")
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import os
|
||||
|
||||
from kubeflow.kubeflow.crud_backend import helpers, status
|
||||
|
||||
from ..common import utils as common_utils
|
||||
|
||||
KIND = "PVCViewer"
|
||||
GROUP = "kubeflow.org"
|
||||
VERSION = "v1alpha1"
|
||||
PLURAL = "pvcviewers"
|
||||
PVCVIEWER = [GROUP, VERSION, PLURAL]
|
||||
|
||||
PVCVIEWER_YAML = os.path.join(
|
||||
os.path.abspath(os.path.dirname(__file__)), "pvcviewer.yaml"
|
||||
)
|
||||
|
||||
|
||||
def load_pvcviewer_yaml_template(**kwargs):
|
||||
"""
|
||||
kwargs: the parameters to be replaced in the yaml
|
||||
|
||||
Reads the yaml for the web app's custom resource, replaces the variables
|
||||
and returns it as a python dict.
|
||||
"""
|
||||
return helpers.load_param_yaml(PVCVIEWER_YAML, **kwargs)
|
||||
|
||||
|
||||
def add_pvc_rok_annotations(pvc, body):
|
||||
"""Set the necessary Rok annotations"""
|
||||
annotations = pvc.metadata.annotations or {}
|
||||
|
||||
if body["type"] == "rok_snapshot" and "snapshot" in body:
|
||||
annotations["rok/origin"] = body["snapshot"]
|
||||
|
||||
labels = pvc.metadata.labels or {}
|
||||
labels["component"] = "singleuser-storage"
|
||||
|
||||
pvc.metadata.annotations = annotations
|
||||
pvc.metadata.labels = labels
|
||||
|
||||
|
||||
def parse_pvc(pvc, viewers):
|
||||
"""
|
||||
pvc: client.V1PersistentVolumeClaim
|
||||
viewers: dict(Key:PVC Name, Value: Viewer's Status)
|
||||
|
||||
Process the PVC and format it as the UI expects it. If a Viewer is active
|
||||
for that PVC, then include this information
|
||||
"""
|
||||
parsed_pvc = common_utils.parse_pvc(pvc)
|
||||
parsed_pvc["viewer"] = viewers.get(pvc.metadata.name,
|
||||
status.STATUS_PHASE.UNINITIALIZED)
|
||||
|
||||
return parsed_pvc
|
||||
|
||||
|
||||
def get_viewer_owning_pod(pod):
|
||||
"""
|
||||
Return a list of PVCViewer names that own the Pod
|
||||
"""
|
||||
owner_refs = pod.metadata.owner_references
|
||||
for owner_ref in owner_refs:
|
||||
if owner_ref.kind == KIND:
|
||||
return owner_ref.name
|
||||
|
||||
return None
|
||||
|
||||
|
||||
def is_viewer_pod(pod):
|
||||
"""
|
||||
Checks if the given Pod belongs to a PVCViewer
|
||||
"""
|
||||
return get_viewer_owning_pod(pod) is not None
|
||||
|
||||
|
||||
def get_viewers_owning_pods(pods):
|
||||
"""
|
||||
Return the name of PVCViewers that own a subset of the given Pods
|
||||
"""
|
||||
viewers = []
|
||||
for pod in pods:
|
||||
if not is_viewer_pod(pod):
|
||||
continue
|
||||
|
||||
viewers.append(get_viewer_owning_pod(pod))
|
||||
|
||||
return viewers
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import os
|
||||
import sys
|
||||
|
||||
from apps import default, rok
|
||||
from kubeflow.kubeflow.crud_backend import config, logging
|
||||
|
||||
log = logging.getLogger(__name__)
|
||||
|
||||
|
||||
def get_config(mode):
|
||||
"""Return a config based on the selected mode."""
|
||||
config_classes = {
|
||||
config.BackendMode.DEVELOPMENT.value: config.DevConfig,
|
||||
config.BackendMode.DEVELOPMENT_FULL.value: config.DevConfig,
|
||||
config.BackendMode.PRODUCTION.value: config.ProdConfig,
|
||||
config.BackendMode.PRODUCTION_FULL.value: config.ProdConfig,
|
||||
}
|
||||
cfg_class = config_classes.get(mode)
|
||||
if not cfg_class:
|
||||
raise RuntimeError("Backend mode '%s' is not implemented. Choose one"
|
||||
" of %s" % (mode, list(config_classes.keys())))
|
||||
return cfg_class()
|
||||
|
||||
|
||||
APP_NAME = os.environ.get("APP_NAME", "Volumes Web App")
|
||||
BACKEND_MODE = os.environ.get("BACKEND_MODE",
|
||||
config.BackendMode.PRODUCTION.value)
|
||||
UI_FLAVOR = os.environ.get("UI_FLAVOR", "default")
|
||||
PREFIX = os.environ.get("APP_PREFIX", "/")
|
||||
|
||||
cfg = get_config(BACKEND_MODE)
|
||||
cfg.PREFIX = PREFIX
|
||||
|
||||
# Load the app based on UI_FLAVOR env var
|
||||
if UI_FLAVOR == "default":
|
||||
app = default.create_app(APP_NAME, cfg)
|
||||
elif UI_FLAVOR == "rok":
|
||||
app = rok.create_app(APP_NAME, cfg)
|
||||
else:
|
||||
log.error("No UI flavor for '%s'", UI_FLAVOR)
|
||||
sys.exit(1)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.run()
|
||||
|
|
@ -0,0 +1 @@
|
|||
gunicorn
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
# Only exists if Bazel was run
|
||||
/bazel-out
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# profiling files
|
||||
chrome-profiler-events*.json
|
||||
speed-measure-plugin*.json
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# IDE - VSCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# misc
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Rok files
|
||||
**/browse-in-rok-gray.svg
|
||||
**/browse-in-rok-grey.svg
|
||||
**/browse-in-rok-blue.svg
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"printWidth": 80,
|
||||
"useTabs": false,
|
||||
"tabWidth": 2,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"bracketSpacing": true,
|
||||
"arrowParens": "avoid",
|
||||
"proseWrap": "preserve"
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
# Frontend
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.20.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"frontend": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"style": "scss"
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"preserveSymlinks": true,
|
||||
"outputPath": "dist/frontend",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"aot": false,
|
||||
"assets": ["src/favicon.ico", "src/assets"],
|
||||
"styles": ["src/styles.scss"],
|
||||
"scripts": [],
|
||||
"crossOrigin": "use-credentials"
|
||||
},
|
||||
"configurations": {
|
||||
"rok": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.rok.ts"
|
||||
}
|
||||
]
|
||||
},
|
||||
"rok-prod": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.rok.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"extractCss": true,
|
||||
"namedChunks": false,
|
||||
"aot": true,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "2mb",
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb",
|
||||
"maximumError": "10kb"
|
||||
}
|
||||
]
|
||||
},
|
||||
"production": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"extractCss": true,
|
||||
"namedChunks": false,
|
||||
"aot": true,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "2mb",
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb",
|
||||
"maximumError": "10kb"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "frontend:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "frontend:build:production"
|
||||
},
|
||||
"rok": {
|
||||
"browserTarget": "frontend:build:rok"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "frontend:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"karmaConfig": "karma.conf.js",
|
||||
"assets": ["src/favicon.ico", "src/assets"],
|
||||
"styles": ["src/styles.scss"],
|
||||
"scripts": []
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"tsconfig.app.json",
|
||||
"tsconfig.spec.json",
|
||||
"e2e/tsconfig.json"
|
||||
],
|
||||
"exclude": ["**/node_modules/**"]
|
||||
}
|
||||
},
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "e2e/protractor.conf.js",
|
||||
"devServerTarget": "frontend:serve"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"devServerTarget": "frontend:serve:production"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "frontend"
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
> 0.5%
|
||||
last 2 versions
|
||||
Firefox ESR
|
||||
not dead
|
||||
not IE 9-11 # For IE 9-11 support, remove 'not'.
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
// @ts-check
|
||||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
const { SpecReporter } = require('jasmine-spec-reporter');
|
||||
|
||||
/**
|
||||
* @type { import("protractor").Config }
|
||||
*/
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs: [
|
||||
'./src/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities: {
|
||||
browserName: 'chrome'
|
||||
},
|
||||
directConnect: true,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print: function() {}
|
||||
},
|
||||
onPrepare() {
|
||||
require('ts-node').register({
|
||||
project: require('path').join(__dirname, './tsconfig.json')
|
||||
});
|
||||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { AppPage } from './app.po';
|
||||
import { browser, logging } from 'protractor';
|
||||
|
||||
describe('workspace-project App', () => {
|
||||
let page: AppPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new AppPage();
|
||||
});
|
||||
|
||||
it('should display welcome message', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getTitleText()).toEqual('frontend app is running!');
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
// Assert that there are no errors emitted from the browser
|
||||
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
|
||||
expect(logs).not.toContain(jasmine.objectContaining({
|
||||
level: logging.Level.SEVERE,
|
||||
} as logging.Entry));
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { browser, by, element } from 'protractor';
|
||||
|
||||
export class AppPage {
|
||||
navigateTo() {
|
||||
return browser.get(browser.baseUrl) as Promise<any>;
|
||||
}
|
||||
|
||||
getTitleText() {
|
||||
return element(by.css('app-root .content span')).getText() as Promise<string>;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/e2e",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"jasminewd2",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage-istanbul-reporter'),
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
],
|
||||
client: {
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
coverageIstanbulReporter: {
|
||||
dir: require('path').join(__dirname, './coverage/frontend'),
|
||||
reports: ['html', 'lcovonly', 'text-summary'],
|
||||
fixWebpackSourcePaths: true
|
||||
},
|
||||
reporters: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false,
|
||||
restartOnFileChange: true
|
||||
});
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,63 @@
|
|||
{
|
||||
"name": "frontend",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"build": "npm run copyLibAssets && ng build --prod --base-href /volumes/ --deploy-url static/",
|
||||
"build:watch": "npm run copyLibAssets && ng build --watch --deploy-url static/ --outputPath ../backend/apps/default/static/ --outputHashing all",
|
||||
"build:watch:rok": "npm run copyLibAssets && ng build --watch --deploy-url static/ --configuration=rok --outputPath ../backend/apps/rok/static/ --outputHashing all",
|
||||
"copyLibAssets": "cp ./node_modules/kubeflow/assets/* ./src/assets/",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~8.2.14",
|
||||
"@angular/cdk": "^8.2.3",
|
||||
"@angular/common": "~8.2.14",
|
||||
"@angular/compiler": "~8.2.14",
|
||||
"@angular/cdk-experimental": "^8.2.3",
|
||||
"@angular/core": "~8.2.14",
|
||||
"@angular/forms": "~8.2.14",
|
||||
"@angular/material": "^8.2.3",
|
||||
"@angular/platform-browser": "~8.2.14",
|
||||
"@angular/platform-browser-dynamic": "~8.2.14",
|
||||
"@angular/router": "~8.2.14",
|
||||
"@fortawesome/angular-fontawesome": "^0.5.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.26",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.12.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.12.0",
|
||||
"date-fns": "^1.29.0",
|
||||
"lodash-es": "^4.17.11",
|
||||
"hammerjs": "^2.0.8",
|
||||
"lodash": "^4.17.15",
|
||||
"material-icons": "^0.3.1",
|
||||
"raw-loader": "^4.0.0",
|
||||
"rxjs": "~6.4.0",
|
||||
"tslib": "^1.10.0",
|
||||
"zone.js": "~0.9.1",
|
||||
"@kubernetes/client-node": "^0.12.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.803.20",
|
||||
"@angular/cli": "~8.3.20",
|
||||
"@angular/compiler-cli": "~8.2.14",
|
||||
"@angular/language-service": "~8.2.14",
|
||||
"@types/node": "~8.9.4",
|
||||
"@types/jasmine": "~3.3.8",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
"codelyzer": "^5.0.0",
|
||||
"jasmine-core": "~3.4.0",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
"karma": "~4.1.0",
|
||||
"karma-chrome-launcher": "~2.2.0",
|
||||
"karma-coverage-istanbul-reporter": "~2.0.1",
|
||||
"karma-jasmine": "~2.0.1",
|
||||
"karma-jasmine-html-reporter": "^1.4.0",
|
||||
"protractor": "~5.4.0",
|
||||
"ts-node": "~7.0.0",
|
||||
"tslint": "~5.15.0",
|
||||
"typescript": "~3.5.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
import { IndexComponent } from './pages/index/index.component';
|
||||
|
||||
const routes: Routes = [{ path: '', component: IndexComponent }];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<router-outlet></router-outlet>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [RouterTestingModule],
|
||||
declarations: [AppComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'frontend'`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app.title).toEqual('frontend');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('.content span').textContent).toContain(
|
||||
'frontend app is running!',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss'],
|
||||
})
|
||||
export class AppComponent {}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { ErrorStateMatcher } from '@angular/material/core';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
import {
|
||||
ResourceTableModule,
|
||||
NamespaceSelectModule,
|
||||
ConfirmDialogModule,
|
||||
FormModule,
|
||||
ImmediateErrorStateMatcher,
|
||||
KubeflowModule,
|
||||
} from 'kubeflow';
|
||||
|
||||
import { IndexComponent } from './pages/index/index.component';
|
||||
import { FormDefaultComponent } from './pages/form/form-default/form-default.component';
|
||||
import { FormRokComponent } from './pages/form/form-rok/form-rok.component';
|
||||
import { IndexDefaultComponent } from './pages/index/index-default/index-default.component';
|
||||
import { IndexRokComponent } from './pages/index/index-rok/index-rok.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
IndexComponent,
|
||||
FormDefaultComponent,
|
||||
FormRokComponent,
|
||||
IndexDefaultComponent,
|
||||
IndexRokComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CommonModule,
|
||||
AppRoutingModule,
|
||||
ResourceTableModule,
|
||||
NamespaceSelectModule,
|
||||
ConfirmDialogModule,
|
||||
FormModule,
|
||||
KubeflowModule,
|
||||
],
|
||||
providers: [
|
||||
{ provide: ErrorStateMatcher, useClass: ImmediateErrorStateMatcher },
|
||||
],
|
||||
bootstrap: [AppComponent],
|
||||
entryComponents: [FormDefaultComponent, FormRokComponent],
|
||||
})
|
||||
export class AppModule {}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<div class="form--container" mat-dialog-content>
|
||||
<form novalidate (ngSubmit)="onSubmit()" [formGroup]="formCtrl">
|
||||
<lib-form-section
|
||||
title="New Volume"
|
||||
text="Create a new empty Volume."
|
||||
icon="fa:fas:hdd"
|
||||
>
|
||||
</lib-form-section>
|
||||
|
||||
<!--Name / Namespace-->
|
||||
<lib-form-name-namespace-inputs
|
||||
[nameControl]="formCtrl.get('name')"
|
||||
[namespaceControl]="formCtrl.get('namespace')"
|
||||
resourceName="Volume"
|
||||
[existingNames]="pvcNames"
|
||||
>
|
||||
</lib-form-name-namespace-inputs>
|
||||
|
||||
<!--Snapshot Chooser-->
|
||||
<mat-form-field
|
||||
*ngIf="formCtrl.get('type').value === 'snapshot'"
|
||||
appearance="outline"
|
||||
class="wide"
|
||||
>
|
||||
<mat-label>Snapshot</mat-label>
|
||||
<mat-select formControlName="snapshot"> </mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<!--Size-->
|
||||
<lib-positive-number-input
|
||||
[sizeControl]="formCtrl.get('size')"
|
||||
min="1"
|
||||
step="1"
|
||||
label="Volume size in Gi"
|
||||
></lib-positive-number-input>
|
||||
|
||||
<!--Storage Class-->
|
||||
<mat-form-field appearance="outline" class="wide">
|
||||
<mat-label>Storage Class</mat-label>
|
||||
<mat-select formControlName="class">
|
||||
<mat-option value="{none}">None</mat-option>
|
||||
<mat-option *ngFor="let sc of storageClasses" [value]="sc">
|
||||
{{ sc }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<!--Access Mode-->
|
||||
<mat-form-field appearance="outline" class="wide">
|
||||
<mat-label>Access Mode</mat-label>
|
||||
<mat-select formControlName="mode">
|
||||
<mat-option value="ReadWriteOnce">ReadWriteOnce</mat-option>
|
||||
<mat-option value="ReadOnlyMany">ReadOnlyMany</mat-option>
|
||||
<mat-option value="ReadWriteMany">ReadWriteMany</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
class="form--button-margin"
|
||||
type="submit"
|
||||
[disabled]="!formCtrl.valid || blockSubmit"
|
||||
>
|
||||
CREATE
|
||||
</button>
|
||||
|
||||
<button mat-raised-button type="button" (click)="onCancel()">
|
||||
CANCEL
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { FormDefaultComponent } from './form-default.component';
|
||||
|
||||
describe('FormDefaultComponent', () => {
|
||||
let component: FormDefaultComponent;
|
||||
let fixture: ComponentFixture<FormDefaultComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [FormDefaultComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FormDefaultComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import {
|
||||
FormBuilder,
|
||||
FormGroup,
|
||||
Validators,
|
||||
FormControl,
|
||||
ValidatorFn,
|
||||
} from '@angular/forms';
|
||||
import { Subscription } from 'rxjs';
|
||||
import {
|
||||
NamespaceService,
|
||||
getExistingNameValidator,
|
||||
dns1035Validator,
|
||||
getNameError,
|
||||
DIALOG_RESP,
|
||||
} from 'kubeflow';
|
||||
import { VWABackendService } from 'src/app/services/backend.service';
|
||||
import { PVCPostObject } from 'src/app/types';
|
||||
import { MatDialogRef } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'app-form-default',
|
||||
templateUrl: './form-default.component.html',
|
||||
styleUrls: ['./form-default.component.scss'],
|
||||
})
|
||||
export class FormDefaultComponent implements OnInit, OnDestroy {
|
||||
public TYPE_ROK_SNAPSHOT = 'rok_snapshot';
|
||||
public TYPE_EMPTY = 'empty';
|
||||
|
||||
public subs = new Subscription();
|
||||
public formCtrl: FormGroup;
|
||||
public blockSubmit = false;
|
||||
|
||||
public currNamespace = '';
|
||||
public pvcNames = new Set<string>();
|
||||
public storageClasses: string[] = [];
|
||||
public defaultStorageClass: string;
|
||||
|
||||
constructor(
|
||||
public ns: NamespaceService,
|
||||
public fb: FormBuilder,
|
||||
public backend: VWABackendService,
|
||||
public dialog: MatDialogRef<FormDefaultComponent>,
|
||||
) {
|
||||
this.formCtrl = this.fb.group({
|
||||
type: ['empty', [Validators.required]],
|
||||
name: ['', [Validators.required]],
|
||||
namespace: ['', [Validators.required]],
|
||||
size: [10, []],
|
||||
class: ['$empty', [Validators.required]],
|
||||
mode: ['ReadWriteOnce', [Validators.required]],
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.formCtrl.controls.namespace.disable();
|
||||
|
||||
this.backend.getStorageClasses().subscribe(storageClasses => {
|
||||
this.storageClasses = storageClasses;
|
||||
|
||||
// Once we have the list of storage classes, get the
|
||||
// default one from the backend and make it the preselected
|
||||
this.backend.getDefaultStorageClass().subscribe(defaultClass => {
|
||||
this.defaultStorageClass = defaultClass;
|
||||
this.formCtrl.controls.class.setValue(defaultClass);
|
||||
});
|
||||
});
|
||||
|
||||
this.subs.add(
|
||||
this.ns.getSelectedNamespace().subscribe(ns => {
|
||||
this.currNamespace = ns;
|
||||
this.formCtrl.controls.namespace.setValue(ns);
|
||||
|
||||
this.backend.getPVCs(ns).subscribe(pvcs => {
|
||||
this.pvcNames.clear();
|
||||
pvcs.forEach(pvc => this.pvcNames.add(pvc.name));
|
||||
});
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subs.unsubscribe();
|
||||
}
|
||||
|
||||
public onSubmit() {
|
||||
const pvc: PVCPostObject = JSON.parse(JSON.stringify(this.formCtrl.value));
|
||||
pvc.size = pvc.size + 'Gi';
|
||||
this.blockSubmit = true;
|
||||
|
||||
this.backend.createPVC(this.currNamespace, pvc).subscribe(
|
||||
result => {
|
||||
this.dialog.close(DIALOG_RESP.ACCEPT);
|
||||
},
|
||||
error => {
|
||||
this.blockSubmit = false;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
public onCancel() {
|
||||
this.dialog.close(DIALOG_RESP.CANCEL);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<div class="form--container" mat-dialog-content>
|
||||
<form novalidate (ngSubmit)="onSubmit()" [formGroup]="formCtrl">
|
||||
<lib-form-section
|
||||
title="New Volume"
|
||||
text="Create a new empty Volume or clone an existing snapshot."
|
||||
icon="fa:fas:hdd"
|
||||
>
|
||||
</lib-form-section>
|
||||
|
||||
<!--Volume Type-->
|
||||
<mat-form-field appearance="outline" class="wide">
|
||||
<mat-label>Volume Type</mat-label>
|
||||
<mat-select formControlName="type">
|
||||
<mat-option [value]="TYPE_EMPTY">Empty Volume</mat-option>
|
||||
<mat-option [value]="TYPE_ROK_SNAPSHOT">
|
||||
Clone an existing Rok snapshot
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<!--Name / Namespace-->
|
||||
<lib-form-name-namespace-inputs
|
||||
[nameControl]="formCtrl.get('name')"
|
||||
[namespaceControl]="formCtrl.get('namespace')"
|
||||
resourceName="Volume"
|
||||
[existingNames]="pvcNames"
|
||||
>
|
||||
</lib-form-name-namespace-inputs>
|
||||
|
||||
<!--Snapshot Chooser-->
|
||||
<lib-rok-url-input
|
||||
*ngIf="formCtrl.get('type').value === TYPE_ROK_SNAPSHOT"
|
||||
[control]="formCtrl.controls.snapshot"
|
||||
[mode]="'file'"
|
||||
(urlEntered)="rokUrlChanged($event)"
|
||||
></lib-rok-url-input>
|
||||
|
||||
<!--Size-->
|
||||
<lib-positive-number-input
|
||||
[sizeControl]="formCtrl.get('size')"
|
||||
min="1"
|
||||
step="1"
|
||||
label="Volume size in Gi"
|
||||
></lib-positive-number-input>
|
||||
|
||||
<!--Storage Class-->
|
||||
<mat-form-field appearance="outline" class="wide">
|
||||
<mat-label>Storage Class</mat-label>
|
||||
<mat-select formControlName="class">
|
||||
<mat-option
|
||||
value="{none}"
|
||||
[disabled]="classIsDisabled('{none}')"
|
||||
[matTooltip]="classTooltip('{none}')"
|
||||
>
|
||||
None</mat-option
|
||||
>
|
||||
<mat-option
|
||||
*ngFor="let sc of storageClasses"
|
||||
[value]="sc"
|
||||
[disabled]="classIsDisabled(sc)"
|
||||
[matTooltip]="classTooltip(sc)"
|
||||
>
|
||||
{{ sc }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="formCtrl.controls.class.hasError('notRokClass')">
|
||||
Must use a Rok provided Storage Class when cloning a snapshot from Rok
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<!--Access Mode-->
|
||||
<mat-form-field appearance="outline" class="wide">
|
||||
<mat-label>Access Mode</mat-label>
|
||||
<mat-select formControlName="mode">
|
||||
<mat-option value="ReadWriteOnce">ReadWriteOnce</mat-option>
|
||||
<mat-option value="ReadOnlyMany">ReadOnlyMany</mat-option>
|
||||
<mat-option value="ReadWriteMany">ReadWriteMany</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
class="form--button-margin"
|
||||
type="submit"
|
||||
[disabled]="!formCtrl.valid || blockSubmit"
|
||||
>
|
||||
CREATE
|
||||
</button>
|
||||
|
||||
<button mat-raised-button type="button" (click)="onCancel()">
|
||||
CANCEL
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { FormRokComponent } from './form-rok.component';
|
||||
|
||||
describe('FormRokComponent', () => {
|
||||
let component: FormRokComponent;
|
||||
let fixture: ComponentFixture<FormRokComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [FormRokComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FormRokComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { FormBuilder, Validators, FormControl } from '@angular/forms';
|
||||
import {
|
||||
NamespaceService,
|
||||
RokService,
|
||||
DIALOG_RESP,
|
||||
SnackBarService,
|
||||
SnackType,
|
||||
rokUrlValidator,
|
||||
updateNonDirtyControl,
|
||||
} from 'kubeflow';
|
||||
|
||||
import { VWABackendService } from 'src/app/services/backend.service';
|
||||
import { PVCPostObject } from 'src/app/types';
|
||||
import { MatDialogRef } from '@angular/material';
|
||||
import { FormDefaultComponent } from '../form-default/form-default.component';
|
||||
import { environment } from '@app/environment';
|
||||
import { rokStorageClassValidator } from './utils';
|
||||
import { concatMap } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'app-form-rok',
|
||||
templateUrl: './form-rok.component.html',
|
||||
styleUrls: [
|
||||
'../form-default/form-default.component.scss',
|
||||
'./form-rok.component.scss',
|
||||
],
|
||||
})
|
||||
// TODO: Use an abstract class to eliminate common code
|
||||
export class FormRokComponent extends FormDefaultComponent
|
||||
implements OnInit, OnDestroy {
|
||||
public env = environment;
|
||||
|
||||
private rokManagedStorageClasses: string[] = [];
|
||||
|
||||
constructor(
|
||||
public ns: NamespaceService,
|
||||
public fb: FormBuilder,
|
||||
public backend: VWABackendService,
|
||||
public dialog: MatDialogRef<FormDefaultComponent>,
|
||||
public snack: SnackBarService,
|
||||
public rok: RokService,
|
||||
) {
|
||||
super(ns, fb, backend, dialog);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
super.ngOnInit();
|
||||
|
||||
this.formCtrl.get('size').setValue(5);
|
||||
|
||||
this.subs.add(
|
||||
this.formCtrl.get('type').valueChanges.subscribe(volType => {
|
||||
if (volType === this.TYPE_EMPTY) {
|
||||
this.formCtrl.removeControl('snapshot');
|
||||
this.formCtrl.get('class').setValidators([Validators.required]);
|
||||
updateNonDirtyControl(this.formCtrl.get('size'), 5);
|
||||
updateNonDirtyControl(
|
||||
this.formCtrl.get('class'),
|
||||
this.defaultStorageClass,
|
||||
);
|
||||
} else {
|
||||
// Add a Rok URL control
|
||||
this.formCtrl.addControl(
|
||||
'snapshot',
|
||||
new FormControl(
|
||||
'',
|
||||
[Validators.required],
|
||||
[rokUrlValidator(this.rok)],
|
||||
),
|
||||
);
|
||||
|
||||
// Set the size value to none to force the user to handle this field
|
||||
updateNonDirtyControl(this.formCtrl.get('size'), null);
|
||||
|
||||
// Ensure that the StorageClass used is provisioned from Rok
|
||||
this.formCtrl
|
||||
.get('class')
|
||||
.setValidators([
|
||||
Validators.required,
|
||||
rokStorageClassValidator(this.rokManagedStorageClasses),
|
||||
]);
|
||||
}
|
||||
|
||||
this.formCtrl.get('class').updateValueAndValidity({ onlySelf: true });
|
||||
}),
|
||||
);
|
||||
|
||||
// Get the list of Rok managed storage classes
|
||||
this.rok.getRokManagedStorageClasses().subscribe(classes => {
|
||||
this.rokManagedStorageClasses = classes;
|
||||
|
||||
// update the validators if type is Rok Snapshot
|
||||
if (this.formCtrl.get('type').value === this.TYPE_ROK_SNAPSHOT) {
|
||||
this.formCtrl
|
||||
.get('class')
|
||||
.setValidators([
|
||||
Validators.required,
|
||||
rokStorageClassValidator(this.rokManagedStorageClasses),
|
||||
]);
|
||||
}
|
||||
});
|
||||
|
||||
this.rok.initCSRF();
|
||||
}
|
||||
|
||||
public rokUrlChanged(url: string) {
|
||||
this.rok.getObjectMetadata(url).subscribe({
|
||||
next: headers => {
|
||||
// Autofill the name
|
||||
let size = parseInt(headers.get('content-length'), 10);
|
||||
size = size / Math.pow(1024, 3);
|
||||
this.formCtrl.get('size').setValue(size);
|
||||
this.snack.open(
|
||||
'Successfully retrieved snapshot information.',
|
||||
SnackType.Success,
|
||||
3000,
|
||||
);
|
||||
},
|
||||
error: err => {
|
||||
this.snack.open(`'${url}' is not a valid Rok URL`, SnackType.Error, -1);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Handle the Storage Classes Select state
|
||||
*/
|
||||
public classIsDisabled(name: string) {
|
||||
const volType = this.formCtrl.controls.type.value;
|
||||
if (volType !== this.TYPE_ROK_SNAPSHOT) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.rokManagedStorageClasses.includes(name)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
public classTooltip(name: string) {
|
||||
if (!this.classIsDisabled(name)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return 'This Storage Class is not backed by Rok';
|
||||
}
|
||||
|
||||
public onSubmit() {
|
||||
// TODO: Could use a lodash helper instead
|
||||
const pvc: PVCPostObject = JSON.parse(JSON.stringify(this.formCtrl.value));
|
||||
pvc.size = pvc.size + 'Gi';
|
||||
this.blockSubmit = true;
|
||||
|
||||
// Check if the Rok URL is valid
|
||||
if (pvc.type === this.TYPE_ROK_SNAPSHOT) {
|
||||
this.rok.getObjectMetadata(pvc.snapshot, false).subscribe(headers => {
|
||||
this.backend.createPVC(this.currNamespace, pvc).subscribe(result => {
|
||||
this.dialog.close(DIALOG_RESP.ACCEPT);
|
||||
});
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.backend.createPVC(this.currNamespace, pvc).subscribe(result => {
|
||||
this.dialog.close(DIALOG_RESP.ACCEPT);
|
||||
});
|
||||
this.blockSubmit = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { ValidatorFn, FormControl } from '@angular/forms';
|
||||
|
||||
export function rokStorageClassValidator(
|
||||
rokManagedClasses: string[],
|
||||
): ValidatorFn {
|
||||
return (control: FormControl): { [key: string]: any } => {
|
||||
const currentClass = control.value;
|
||||
if (!rokManagedClasses.includes(currentClass)) {
|
||||
return { notRokClass: true };
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import {
|
||||
PropertyValue,
|
||||
StatusValue,
|
||||
ActionListValue,
|
||||
ActionIconValue,
|
||||
TRUNCATE_TEXT_SIZE,
|
||||
TableConfig,
|
||||
} from 'kubeflow';
|
||||
|
||||
export const tableConfig: TableConfig = {
|
||||
title: 'Volumes',
|
||||
newButtonText: 'NEW VOLUME',
|
||||
columns: [
|
||||
{
|
||||
matHeaderCellDef: 'Status',
|
||||
matColumnDef: 'status',
|
||||
value: new StatusValue(),
|
||||
},
|
||||
{
|
||||
matHeaderCellDef: 'Name',
|
||||
matColumnDef: 'name',
|
||||
value: new PropertyValue({
|
||||
field: 'name',
|
||||
tooltipField: 'name',
|
||||
truncate: TRUNCATE_TEXT_SIZE.SMALL,
|
||||
}),
|
||||
},
|
||||
{
|
||||
matHeaderCellDef: 'Age',
|
||||
matColumnDef: 'age',
|
||||
value: new PropertyValue({
|
||||
field: 'age.uptime',
|
||||
tooltipField: 'age.timestamp',
|
||||
}),
|
||||
},
|
||||
{
|
||||
matHeaderCellDef: 'Size',
|
||||
matColumnDef: 'size',
|
||||
value: new PropertyValue({ field: 'capacity' }),
|
||||
},
|
||||
{
|
||||
matHeaderCellDef: 'Access Mode',
|
||||
matColumnDef: 'modes',
|
||||
value: new PropertyValue({ field: 'modes' }),
|
||||
},
|
||||
{
|
||||
matHeaderCellDef: 'Storage Class',
|
||||
matColumnDef: 'class',
|
||||
value: new PropertyValue({ field: 'class' }),
|
||||
},
|
||||
|
||||
// the apps should import the actions they want
|
||||
],
|
||||
};
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { ActionListValue, ActionIconValue, TableColumn, TableConfig } from 'kubeflow';
|
||||
import { tableConfig } from '../config';
|
||||
|
||||
const actionsCol: TableColumn = {
|
||||
matHeaderCellDef: '',
|
||||
matColumnDef: 'actions',
|
||||
value: new ActionListValue([
|
||||
new ActionIconValue({
|
||||
name: 'delete',
|
||||
tooltip: 'Delete Volume',
|
||||
color: 'warn',
|
||||
field: 'deleteAction',
|
||||
iconReady: 'material:delete',
|
||||
}),
|
||||
]),
|
||||
};
|
||||
|
||||
export const defaultConfig: TableConfig = {
|
||||
title: tableConfig.title,
|
||||
newButtonText: tableConfig.newButtonText,
|
||||
columns: tableConfig.columns.concat(actionsCol),
|
||||
};
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<lib-namespace-select *ngIf="!env.production"></lib-namespace-select>
|
||||
|
||||
<lib-resource-table
|
||||
[config]="config"
|
||||
[data]="processedData"
|
||||
[trackByFn]="pvcTrackByFn"
|
||||
(actionsEmitter)="reactToAction($event)"
|
||||
></lib-resource-table>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { IndexDefaultComponent } from './index-default.component';
|
||||
|
||||
describe('IndexDefaultComponent', () => {
|
||||
let component: IndexDefaultComponent;
|
||||
let fixture: ComponentFixture<IndexDefaultComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [IndexDefaultComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(IndexDefaultComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material';
|
||||
import {
|
||||
NamespaceService,
|
||||
ActionEvent,
|
||||
ConfirmDialogService,
|
||||
ExponentialBackoff,
|
||||
STATUS_TYPE,
|
||||
DIALOG_RESP,
|
||||
DialogConfig,
|
||||
SnackBarService,
|
||||
SnackType,
|
||||
} from 'kubeflow';
|
||||
import { defaultConfig } from './config';
|
||||
import { environment } from '@app/environment';
|
||||
import { VWABackendService } from 'src/app/services/backend.service';
|
||||
import { PVCResponseObject, PVCProcessedObject } from 'src/app/types';
|
||||
import { Subscription, Observable, Subject } from 'rxjs';
|
||||
import { isEqual } from 'lodash';
|
||||
import { FormDefaultComponent } from '../../form/form-default/form-default.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-index-default',
|
||||
templateUrl: './index-default.component.html',
|
||||
styleUrls: ['./index-default.component.scss'],
|
||||
})
|
||||
export class IndexDefaultComponent implements OnInit {
|
||||
public env = environment;
|
||||
public poller: ExponentialBackoff;
|
||||
|
||||
public currNamespace = '';
|
||||
public subs = new Subscription();
|
||||
|
||||
public config = defaultConfig;
|
||||
public rawData: PVCResponseObject[] = [];
|
||||
public processedData: PVCProcessedObject[] = [];
|
||||
public pvcsWaitingViewer = new Set<string>();
|
||||
|
||||
constructor(
|
||||
public ns: NamespaceService,
|
||||
public confirmDialog: ConfirmDialogService,
|
||||
public backend: VWABackendService,
|
||||
public dialog: MatDialog,
|
||||
public snackBar: SnackBarService,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.poller = new ExponentialBackoff({ interval: 1000, retries: 3 });
|
||||
|
||||
// Poll for new data and reset the poller if different data is found
|
||||
this.subs.add(
|
||||
this.poller.start().subscribe(() => {
|
||||
if (!this.currNamespace) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.backend.getPVCs(this.currNamespace).subscribe(pvcs => {
|
||||
if (!isEqual(this.rawData, pvcs)) {
|
||||
this.rawData = pvcs;
|
||||
|
||||
// Update the frontend's state
|
||||
this.processedData = this.parseIncomingData(pvcs);
|
||||
this.poller.reset();
|
||||
}
|
||||
});
|
||||
}),
|
||||
);
|
||||
|
||||
// Reset the poller whenever the selected namespace changes
|
||||
this.subs.add(
|
||||
this.ns.getSelectedNamespace().subscribe(ns => {
|
||||
this.currNamespace = ns;
|
||||
this.pvcsWaitingViewer = new Set<string>();
|
||||
this.poller.reset();
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
public reactToAction(a: ActionEvent) {
|
||||
switch (a.action) {
|
||||
case 'newResourceButton': // TODO: could also use enums here
|
||||
this.newResourceClicked();
|
||||
break;
|
||||
case 'delete':
|
||||
this.deleteVolumeClicked(a.data);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Functions for handling the action events
|
||||
public newResourceClicked() {
|
||||
const ref = this.dialog.open(FormDefaultComponent, {
|
||||
width: '600px',
|
||||
panelClass: 'form--dialog-padding',
|
||||
});
|
||||
|
||||
ref.afterClosed().subscribe(res => {
|
||||
if (res === DIALOG_RESP.ACCEPT) {
|
||||
this.snackBar.open(
|
||||
'Volume was submitted successfully.',
|
||||
SnackType.Success,
|
||||
2000,
|
||||
);
|
||||
this.poller.reset();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public deleteVolumeClicked(pvc: PVCProcessedObject) {
|
||||
const deleteDialogConfig: DialogConfig = {
|
||||
title: `Are you sure you want to delete this volume? ${pvc.name}`,
|
||||
message: 'Warning: All data in this volume will be lost.',
|
||||
accept: 'DELETE',
|
||||
confirmColor: 'warn',
|
||||
cancel: 'CANCEL',
|
||||
error: '',
|
||||
applying: 'DELETING',
|
||||
width: '600px',
|
||||
};
|
||||
|
||||
const ref = this.confirmDialog.open(pvc.name, deleteDialogConfig);
|
||||
const delSub = ref.componentInstance.applying$.subscribe(applying => {
|
||||
if (!applying) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Close the open dialog only if the DELETE request succeeded
|
||||
this.backend.deletePVC(this.currNamespace, pvc.name).subscribe({
|
||||
next: _ => {
|
||||
this.poller.reset();
|
||||
ref.close(DIALOG_RESP.ACCEPT);
|
||||
},
|
||||
error: err => {
|
||||
// Simplify the error message
|
||||
const errorMsg = err;
|
||||
console.log(err);
|
||||
deleteDialogConfig.error = errorMsg;
|
||||
ref.componentInstance.applying$.next(false);
|
||||
},
|
||||
});
|
||||
|
||||
// DELETE request has succeeded
|
||||
ref.afterClosed().subscribe(res => {
|
||||
delSub.unsubscribe();
|
||||
if (res !== DIALOG_RESP.ACCEPT) {
|
||||
return;
|
||||
}
|
||||
|
||||
pvc.status.phase = STATUS_TYPE.TERMINATING;
|
||||
pvc.status.message = 'Preparing to delete the Volume...';
|
||||
pvc.deleteAction = STATUS_TYPE.UNAVAILABLE;
|
||||
this.pvcsWaitingViewer.delete(pvc.name);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Utility funcs
|
||||
public parseIncomingData(pvcs: PVCResponseObject[]): PVCProcessedObject[] {
|
||||
const pvcsCopy = JSON.parse(JSON.stringify(pvcs)) as PVCProcessedObject[];
|
||||
|
||||
for (const pvc of pvcsCopy) {
|
||||
pvc.deleteAction = this.parseDeletionActionStatus(pvc);
|
||||
pvc.ageValue = pvc.age.uptime;
|
||||
pvc.ageTooltip = pvc.age.timestamp;
|
||||
}
|
||||
|
||||
return pvcsCopy;
|
||||
}
|
||||
|
||||
public parseDeletionActionStatus(pvc: PVCProcessedObject) {
|
||||
if (pvc.status.phase !== STATUS_TYPE.TERMINATING) {
|
||||
return STATUS_TYPE.READY;
|
||||
}
|
||||
|
||||
return STATUS_TYPE.TERMINATING;
|
||||
}
|
||||
|
||||
public pvcTrackByFn(index: number, pvc: PVCProcessedObject) {
|
||||
return `${pvc.name}/${pvc.namespace}/${pvc.capacity}`;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { ActionListValue, ActionIconValue, TableColumn, TableConfig } from 'kubeflow';
|
||||
import { tableConfig } from '../config';
|
||||
|
||||
const actionsCol: TableColumn = {
|
||||
matHeaderCellDef: '',
|
||||
matColumnDef: 'actions',
|
||||
value: new ActionListValue([
|
||||
new ActionIconValue({
|
||||
name: 'edit',
|
||||
tooltip: 'Browse',
|
||||
color: 'primary',
|
||||
field: 'editAction',
|
||||
iconInit: 'material:folder',
|
||||
iconReady: 'custom:folderSearch',
|
||||
}),
|
||||
new ActionIconValue({
|
||||
name: 'delete',
|
||||
tooltip: 'Delete Volume',
|
||||
color: 'warn',
|
||||
field: 'deleteAction',
|
||||
iconReady: 'material:delete',
|
||||
}),
|
||||
]),
|
||||
};
|
||||
|
||||
export const rokConfig: TableConfig = {
|
||||
title: tableConfig.title,
|
||||
newButtonText: tableConfig.newButtonText,
|
||||
columns: tableConfig.columns.concat([actionsCol]),
|
||||
};
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { IndexRokComponent } from './index-rok.component';
|
||||
|
||||
describe('IndexRokComponent', () => {
|
||||
let component: IndexRokComponent;
|
||||
let fixture: ComponentFixture<IndexRokComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [IndexRokComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(IndexRokComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material';
|
||||
import {
|
||||
NamespaceService,
|
||||
ConfirmDialogService,
|
||||
DIALOG_RESP,
|
||||
SnackBarService,
|
||||
SnackType,
|
||||
RokService,
|
||||
ActionEvent,
|
||||
STATUS_TYPE,
|
||||
} from 'kubeflow';
|
||||
import { environment } from '@app/environment';
|
||||
import { VWABackendService } from 'src/app/services/backend.service';
|
||||
import { IndexDefaultComponent } from '../index-default/index-default.component';
|
||||
import { FormRokComponent } from '../../form/form-rok/form-rok.component';
|
||||
import { rokConfig } from './config';
|
||||
import { PVCProcessedObjectRok, PVCResponseObjectRok } from 'src/app/types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-index-rok',
|
||||
templateUrl: '../index-default/index-default.component.html',
|
||||
styleUrls: ['../index-default/index-default.component.scss'],
|
||||
})
|
||||
export class IndexRokComponent extends IndexDefaultComponent implements OnInit {
|
||||
config = rokConfig;
|
||||
|
||||
constructor(
|
||||
public ns: NamespaceService,
|
||||
public confirmDialog: ConfirmDialogService,
|
||||
public backend: VWABackendService,
|
||||
public dialog: MatDialog,
|
||||
public snackBar: SnackBarService,
|
||||
public rok: RokService,
|
||||
) {
|
||||
super(ns, confirmDialog, backend, dialog, snackBar);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
super.ngOnInit();
|
||||
|
||||
this.rok.initCSRF();
|
||||
}
|
||||
|
||||
// Functions for handling the action events
|
||||
public newResourceClicked() {
|
||||
const ref = this.dialog.open(FormRokComponent, {
|
||||
width: '600px',
|
||||
panelClass: 'form--dialog-padding',
|
||||
});
|
||||
|
||||
ref.afterClosed().subscribe(res => {
|
||||
if (res === DIALOG_RESP.ACCEPT) {
|
||||
this.snackBar.open(
|
||||
'Volume was submitted successfully.',
|
||||
SnackType.Success,
|
||||
2000,
|
||||
);
|
||||
this.poller.reset();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public reactToAction(a: ActionEvent) {
|
||||
super.reactToAction(a);
|
||||
|
||||
switch (a.action) {
|
||||
case 'edit':
|
||||
this.editClicked(a.data);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
public editClicked(pvc: PVCProcessedObjectRok) {
|
||||
if (pvc.viewer === STATUS_TYPE.READY) {
|
||||
this.openEditWindow(pvc);
|
||||
return;
|
||||
}
|
||||
|
||||
this.pvcsWaitingViewer.add(pvc.name);
|
||||
pvc.editAction = this.parseViewerActionStatus(pvc);
|
||||
|
||||
this.backend.createViewer(this.currNamespace, pvc.name).subscribe({
|
||||
next: res => {
|
||||
this.poller.reset();
|
||||
},
|
||||
error: err => {
|
||||
this.pvcsWaitingViewer.delete(pvc.name);
|
||||
pvc.editAction = this.parseViewerActionStatus(pvc);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Utility funcs
|
||||
public parseIncomingData(
|
||||
pvcs: PVCResponseObjectRok[],
|
||||
): PVCProcessedObjectRok[] {
|
||||
const parsedPVCs = [];
|
||||
for (const pvc of super.parseIncomingData(pvcs)) {
|
||||
const parsedPVC = pvc as PVCProcessedObjectRok;
|
||||
|
||||
parsedPVC.editAction = this.parseViewerActionStatus(parsedPVC);
|
||||
parsedPVCs.push(parsedPVC);
|
||||
}
|
||||
|
||||
return parsedPVCs;
|
||||
}
|
||||
|
||||
public parseViewerActionStatus(pvc: PVCProcessedObjectRok): STATUS_TYPE {
|
||||
// If the PVC is being created or there was an error, then
|
||||
// don't allow the user to edit it
|
||||
if (
|
||||
pvc.status.phase === STATUS_TYPE.UNINITIALIZED ||
|
||||
pvc.status.phase === STATUS_TYPE.WAITING ||
|
||||
pvc.status.phase === STATUS_TYPE.WARNING ||
|
||||
pvc.status.phase === STATUS_TYPE.TERMINATING ||
|
||||
pvc.status.phase === STATUS_TYPE.ERROR
|
||||
) {
|
||||
return STATUS_TYPE.UNAVAILABLE;
|
||||
}
|
||||
|
||||
// The PVC is either READY or UNAVAILABLE(WaitForFirstConsumer)
|
||||
|
||||
// If the user had clicked to view the files and the viewer just
|
||||
// became ready, then open the edit window
|
||||
if (
|
||||
this.pvcsWaitingViewer.has(pvc.name) &&
|
||||
pvc.viewer === STATUS_TYPE.READY
|
||||
) {
|
||||
this.pvcsWaitingViewer.delete(pvc.name);
|
||||
this.openEditWindow(pvc);
|
||||
return STATUS_TYPE.READY;
|
||||
}
|
||||
|
||||
// If the user clicked to view the files and the viewer
|
||||
// is stil uninitialized or unavailable, then show a spinner
|
||||
if (
|
||||
this.pvcsWaitingViewer.has(pvc.name) &&
|
||||
(pvc.viewer === STATUS_TYPE.UNINITIALIZED ||
|
||||
pvc.viewer === STATUS_TYPE.WAITING)
|
||||
) {
|
||||
return STATUS_TYPE.WAITING;
|
||||
}
|
||||
|
||||
// If the user hasn't yet clicked to edit the pvc, then the viewer
|
||||
// button should be enabled
|
||||
if (
|
||||
!this.pvcsWaitingViewer.has(pvc.name) &&
|
||||
pvc.status.state === 'WaitForFirstConsumer'
|
||||
) {
|
||||
return STATUS_TYPE.UNINITIALIZED;
|
||||
}
|
||||
|
||||
return pvc.viewer;
|
||||
}
|
||||
|
||||
public openEditWindow(pvc: PVCProcessedObjectRok) {
|
||||
const url =
|
||||
this.env.viewerUrl + `/volume/browser/${pvc.namespace}/${pvc.name}/`;
|
||||
|
||||
window.open(url, `${pvc.name}: Edit file contents`, 'height=600,width=800');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<app-index-default *ngIf="env.ui === 'default'"></app-index-default>
|
||||
<app-index-rok *ngIf="env.ui === 'rok'"></app-index-rok>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { IndexComponent } from './index.component';
|
||||
|
||||
describe('IndexComponent', () => {
|
||||
let component: IndexComponent;
|
||||
let fixture: ComponentFixture<IndexComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [IndexComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(IndexComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { environment } from '@app/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'app-index',
|
||||
templateUrl: './index.component.html',
|
||||
styleUrls: ['./index.component.scss'],
|
||||
})
|
||||
export class IndexComponent {
|
||||
env = environment;
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { VWABackendService } from './backend.service';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
|
||||
describe('VWABackendService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({
|
||||
imports: [HttpClientModule]
|
||||
}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: VWABackendService = TestBed.get(VWABackendService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { BackendService, SnackBarService } from 'kubeflow';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import { catchError, map } from 'rxjs/operators';
|
||||
import { PVCResponseObject, VWABackendResponse, PVCPostObject } from '../types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class VWABackendService extends BackendService {
|
||||
constructor(public http: HttpClient, public snackBar: SnackBarService) {
|
||||
super(http, snackBar);
|
||||
}
|
||||
|
||||
public getPVCs(namespace: string): Observable<PVCResponseObject[]> {
|
||||
const url = `api/namespaces/${namespace}/pvcs`;
|
||||
|
||||
return this.http.get<VWABackendResponse>(url).pipe(
|
||||
catchError(error => this.handleError(error)),
|
||||
map((resp: VWABackendResponse) => {
|
||||
return resp.pvcs;
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
// POST
|
||||
public createViewer(namespace: string, viewer: string) {
|
||||
const url = `api/namespaces/${namespace}/viewers`;
|
||||
|
||||
return this.http
|
||||
.post<VWABackendResponse>(url, { name: viewer })
|
||||
.pipe(catchError(error => this.handleError(error)));
|
||||
}
|
||||
|
||||
public createPVC(namespace: string, pvc: PVCPostObject) {
|
||||
const url = `api/namespaces/${namespace}/pvcs`;
|
||||
|
||||
return this.http
|
||||
.post<VWABackendResponse>(url, pvc)
|
||||
.pipe(catchError(error => this.handleError(error)));
|
||||
}
|
||||
|
||||
// DELETE
|
||||
public deletePVC(namespace: string, pvc: string) {
|
||||
const url = `api/namespaces/${namespace}/pvcs/${pvc}`;
|
||||
|
||||
return this.http
|
||||
.delete<VWABackendResponse>(url)
|
||||
.pipe(catchError(error => this.handleError(error, false)));
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import { Status, BackendResponse } from 'kubeflow';
|
||||
|
||||
export interface VWABackendResponse extends BackendResponse {
|
||||
pvcs?: PVCResponseObject[];
|
||||
}
|
||||
|
||||
export interface PVCResponseObject {
|
||||
age: {
|
||||
uptime: string;
|
||||
timestamp: string;
|
||||
};
|
||||
capacity: string;
|
||||
class: string;
|
||||
modes: string[];
|
||||
name: string;
|
||||
namespace: string;
|
||||
status: Status;
|
||||
}
|
||||
|
||||
export interface PVCProcessedObject extends PVCResponseObject {
|
||||
deleteAction?: string;
|
||||
editAction?: string;
|
||||
ageValue?: string;
|
||||
ageTooltip?: string;
|
||||
}
|
||||
|
||||
export interface PVCPostObject {
|
||||
name: string;
|
||||
type: string;
|
||||
size: string | number;
|
||||
class: string;
|
||||
mode: string;
|
||||
snapshot: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export * from './backend';
|
||||
export * from './rok';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { PVCResponseObject, PVCProcessedObject } from './backend';
|
||||
import { STATUS_TYPE } from 'kubeflow';
|
||||
|
||||
export interface PVCResponseObjectRok extends PVCResponseObject {
|
||||
viewer: STATUS_TYPE;
|
||||
}
|
||||
|
||||
export interface PVCProcessedObjectRok
|
||||
extends PVCResponseObjectRok,
|
||||
PVCProcessedObject {}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export const environment = {
|
||||
production: true,
|
||||
viewerUrl: '',
|
||||
resource: 'pvcviewers',
|
||||
ui: 'default',
|
||||
};
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export const environment = {
|
||||
production: true,
|
||||
viewerUrl: '',
|
||||
resource: 'pvcviewers',
|
||||
ui: 'rok',
|
||||
};
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
// This file can be replaced during build by using the `fileReplacements` array.
|
||||
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false,
|
||||
viewerUrl: '//localhost:8081',
|
||||
resource: 'pvcviewers',
|
||||
ui: 'rok',
|
||||
};
|
||||
|
||||
/*
|
||||
* For easier debugging in development mode, you can import the following file
|
||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
||||
*
|
||||
* This import should be commented out in production mode because it will have a negative impact
|
||||
* on performance if an error is thrown.
|
||||
*/
|
||||
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
// This file can be replaced during build by using the `fileReplacements` array.
|
||||
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false,
|
||||
viewerUrl: '//localhost:8081',
|
||||
resource: 'pvcviewers',
|
||||
ui: 'default',
|
||||
};
|
||||
|
||||
/*
|
||||
* For easier debugging in development mode, you can import the following file
|
||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
||||
*
|
||||
* This import should be commented out in production mode because it will have a negative impact
|
||||
* on performance if an error is thrown.
|
||||
*/
|
||||
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 948 B |
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Frontend</title>
|
||||
<base href="/" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script defer src="/dashboard_lib.bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
body {
|
||||
--accent-color: #007dfc;
|
||||
--accent-color-light: #69abff;
|
||||
--accent-color-dark: #0052c8;
|
||||
--kubeflow-color: #003c75;
|
||||
--primary-background-color: #2196f3;
|
||||
--sidebar-color: #f8fafb;
|
||||
--border-color: #f4f4f6;
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||
.catch(err => console.error(err));
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
/**
|
||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||
* You can add your own extra polyfills to this file.
|
||||
*
|
||||
* This file is divided into 2 sections:
|
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
|
||||
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
|
||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||
|
||||
/**
|
||||
* Web Animations `@angular/platform-browser/animations`
|
||||
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
|
||||
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
|
||||
*/
|
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags.ts';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
* The following flags will work for all browsers.
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*
|
||||
* (window as any).__Zone_enable_cross_context_check = true;
|
||||
*
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/* You can add global styles to this file, and also import other style files */
|
||||
@import '~kubeflow/styles.scss';
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js/dist/zone-testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import {
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: any;
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting()
|
||||
);
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"src/test.ts",
|
||||
"src/**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"downlevelIteration": true,
|
||||
"experimentalDecorators": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2015",
|
||||
"paths": {
|
||||
"@shared/*": ["../../angular-frontend-shared/*"],
|
||||
"@app/environment": ["src/environments/environment"]
|
||||
},
|
||||
"typeRoots": ["node_modules/@types"],
|
||||
"lib": ["es2018", "dom"]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"fullTemplateTypeCheck": true,
|
||||
"strictInjectionParameters": true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"src/test.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
{
|
||||
"extends": "tslint:recommended",
|
||||
"rules": {
|
||||
"array-type": false,
|
||||
"arrow-parens": false,
|
||||
"deprecation": {
|
||||
"severity": "warning"
|
||||
},
|
||||
"component-class-suffix": true,
|
||||
"contextual-lifecycle": true,
|
||||
"directive-class-suffix": true,
|
||||
"directive-selector": [true, "attribute", "app", "camelCase"],
|
||||
"component-selector": [true, "element", "app", "kebab-case"],
|
||||
"import-blacklist": [true, "rxjs/Rx"],
|
||||
"interface-name": false,
|
||||
"max-classes-per-file": false,
|
||||
"max-line-length": [true, 140],
|
||||
"member-access": false,
|
||||
"member-ordering": [
|
||||
true,
|
||||
{
|
||||
"order": [
|
||||
"static-field",
|
||||
"instance-field",
|
||||
"static-method",
|
||||
"instance-method"
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-consecutive-blank-lines": false,
|
||||
"no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
|
||||
"no-empty": false,
|
||||
"no-inferrable-types": [true, "ignore-params"],
|
||||
"no-non-null-assertion": true,
|
||||
"no-redundant-jsdoc": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-var-requires": false,
|
||||
"object-literal-key-quotes": [true, "as-needed"],
|
||||
"object-literal-sort-keys": false,
|
||||
"ordered-imports": false,
|
||||
"quotemark": [true, "single"],
|
||||
"trailing-comma": false,
|
||||
"no-conflicting-lifecycle": true,
|
||||
"no-host-metadata-property": true,
|
||||
"no-input-rename": true,
|
||||
"no-inputs-metadata-property": true,
|
||||
"no-output-native": true,
|
||||
"no-output-on-prefix": true,
|
||||
"no-output-rename": true,
|
||||
"no-outputs-metadata-property": true,
|
||||
"template-banana-in-box": true,
|
||||
"template-no-negated-async": true,
|
||||
"use-lifecycle-interface": true,
|
||||
"use-pipe-transform-interface": true
|
||||
},
|
||||
"rulesDirectory": ["codelyzer"]
|
||||
}
|
||||
Loading…
Reference in New Issue