From 9b06b0ecad54df34dce3eb22da3577c107202aef Mon Sep 17 00:00:00 2001
From: Ioannis Androulidakis <ioannis@arrikto.com>
Date: Tue, 6 Nov 2018 20:19:23 +0200
Subject: [PATCH] Manage multiple PVCs via the default JH Spawner UI

* Extend default Spawner UI with two new elements: Workspace and Data Volumes
* Extend `config.yaml` of the default UI with default values and
  options for the new Spawner form fields
* Add asynchronous logic for handling K8s-native API requests in
  `spawner.py` (e.g. provision new PVCs, retrieve existing PVCs)
* Add 'storageClass` ksonnet parameter to easily configure which PVC
  provisioner will be used - defaults to 'none'
* Remove `disks` and `notebookPVCMount` ksonnet parameters, along with
  related assignments in `jupyterhub_config.py`
* Remove buggy code for attaching multiple PVCs in `jupyterhub_config.py`
* Fix flake8 linting errors in `spawner.py`

Closes #34
Closes #541

Signed-off-by: Ioannis Androulidakis <ioannis@arrikto.com>
Signed-off-by: Ilias Tsitsimpis <iliastsi@arrikto.com>
---
 kubeflow/core/jupyterhub.libsonnet          |   8 +-
 kubeflow/core/jupyterhub_config.py          |  59 +---
 kubeflow/core/prototypes/jupyterhub.jsonnet |   3 +-
 kubeflow/core/tests/jupyterhub_test.jsonnet |  11 +-
 kubeflow/core/ui/default/config.yaml        |  15 +
 kubeflow/core/ui/default/script.js          | 344 ++++++++++++++++++--
 kubeflow/core/ui/default/spawner.py         | 228 ++++++++++++-
 kubeflow/core/ui/default/style.css          |  28 ++
 kubeflow/core/ui/default/template.html      | 106 +++++-
 9 files changed, 717 insertions(+), 85 deletions(-)

diff --git a/kubeflow/core/jupyterhub.libsonnet b/kubeflow/core/jupyterhub.libsonnet
index 9bd403dad6d..a02bd1e465d 100644
--- a/kubeflow/core/jupyterhub.libsonnet
+++ b/kubeflow/core/jupyterhub.libsonnet
@@ -150,10 +150,6 @@
                   },
                 ],
                 env: std.prune([
-                  {
-                    name: "NOTEBOOK_PVC_MOUNT",
-                    value: params.notebookPVCMount,
-                  },
                   {
                     name: "KF_AUTHENTICATOR",
                     value: params.jupyterHubAuthenticator,
@@ -163,8 +159,8 @@
                     value: params.useJupyterLabAsDefault,
                   },
                   {
-                    name: "KF_PVC_LIST",
-                    value: params.disks,
+                    name: "STORAGE_CLASS",
+                    value: params.storageClass,
                   },
                   if params.platform == "gke" then
                     {
diff --git a/kubeflow/core/jupyterhub_config.py b/kubeflow/core/jupyterhub_config.py
index 7ffca8e58ee..e79de982c8b 100644
--- a/kubeflow/core/jupyterhub_config.py
+++ b/kubeflow/core/jupyterhub_config.py
@@ -35,8 +35,6 @@
 c.KubeSpawner.singleuser_uid = 1000
 c.KubeSpawner.singleuser_fs_gid = 100
 c.KubeSpawner.singleuser_working_dir = '/home/jovyan'
-volumes = []
-volume_mounts = []
 
 # Allow environment vars to override uid and gid.
 # This allows local host path mounts to be read/writable
@@ -65,34 +63,23 @@ def modify_pod_hook(spawner, pod):
 ###################################################
 # Persistent volume options
 ###################################################
-# Using persistent storage requires a default storage class.
-# TODO(jlewi): Verify this works on minikube.
-# see https://github.com/kubeflow/kubeflow/pull/22#issuecomment-350500944
-pvc_mount = os.environ.get('NOTEBOOK_PVC_MOUNT')
-if pvc_mount and pvc_mount != 'null':
-    c.KubeSpawner.user_storage_pvc_ensure = True
-    c.KubeSpawner.storage_pvc_ensure = True
-    # How much disk space do we want?
-    c.KubeSpawner.user_storage_capacity = '10Gi'
-    c.KubeSpawner.storage_capacity = '10Gi'
-    c.KubeSpawner.pvc_name_template = 'claim-{username}{servername}'
-    volumes.append(
-        {
-            'name': 'volume-{username}{servername}',
-            'persistentVolumeClaim': {
-                'claimName': 'claim-{username}{servername}'
-            }
-        }
-    )
-    volume_mounts.append(
-        {
-            'mountPath': pvc_mount,
-            'name': 'volume-{username}{servername}'
-        }
-    )
 
+# Set user_storage_pvc_ensure to False to prevent KubeSpawner from handling PVCs
+# We natively handle PVCs via KubeFormSpawner and its dedicated methods
+
+# NOTE: user_storage_pvc_ensure has been deprecated in a future release
+c.KubeSpawner.storage_pvc_ensure = False
+c.KubeSpawner.user_storage_pvc_ensure = False
+
+volumes = []
+volume_mounts = []
 c.KubeSpawner.volumes = volumes
 c.KubeSpawner.volume_mounts = volume_mounts
+
+storage_class = None
+if os.environ.get('STORAGE_CLASS') != 'null':
+    storage_class = os.environ.get('STORAGE_CLASS')
+
 # Set both service_account and singleuser_service_account because
 # singleuser_service_account has been deprecated in a future release
 c.KubeSpawner.service_account = 'jupyter-notebook'
@@ -107,21 +94,6 @@ def modify_pod_hook(spawner, pod):
 if os.environ.get('DEFAULT_JUPYTERLAB').lower() == 'true':
     c.KubeSpawner.default_url = '/lab'
 
-# PVCs
-pvcs = os.environ.get('KF_PVC_LIST')
-if pvcs and pvcs != 'null':
-    for pvc in pvcs.split(','):
-        volumes.append({
-            'name': pvc,
-            'persistentVolumeClaim': {
-                'claimName': pvc
-            }
-        })
-        volume_mounts.append({
-            'name': pvc,
-            'mountPath': '/mnt/' + pvc
-        })
-
 gcp_secret_name = os.environ.get('GCP_SECRET_NAME')
 if gcp_secret_name:
     volumes.append({
@@ -137,5 +109,6 @@ def modify_pod_hook(spawner, pod):
 
 # Set extra spawner configuration variables
 c.KubeSpawner.extra_spawner_config = {
-    'gcp_secret_name': gcp_secret_name
+    'gcp_secret_name': gcp_secret_name,
+    'storage_class': storage_class
 }
diff --git a/kubeflow/core/prototypes/jupyterhub.jsonnet b/kubeflow/core/prototypes/jupyterhub.jsonnet
index 1a94449f2ac..320746889a8 100644
--- a/kubeflow/core/prototypes/jupyterhub.jsonnet
+++ b/kubeflow/core/prototypes/jupyterhub.jsonnet
@@ -8,13 +8,12 @@
 // @optionalParam image string gcr.io/kubeflow/jupyterhub-k8s:v20180531-3bb991b1 The image to use for JupyterHub.
 // @optionalParam jupyterHubAuthenticator string null The authenticator to use
 // @optionalParam useJupyterLabAsDefault string false Set JupterLab interface as the default
-// @optionalParam notebookPVCMount string /home/jovyan Mount path for PVC. Set empty to disable PVC
-// @optionalParam disks string null Comma separated list of Google persistent disks to attach to jupyter environments.
 // @optionalParam gcpSecretName string user-gcp-sa The name of the secret containing service account credentials for GCP
 // @optionalParam notebookUid string -1 UserId of the host user for minikube local fs mount
 // @optionalParam notebookGid string -1 GroupID of the host user for minikube local fs mount
 // @optionalParam accessLocalFs string false Set true if mounting a local fs directory that needs to be accessed by Jupyter Notebook in Minikube.
 // @optionalParam ui string default The JupyterHub Spawner User Interface
+// @optionalParam storageClass string null The storageClass to use for PVC management
 
 local jupyterhub = import "kubeflow/core/jupyterhub.libsonnet";
 local instance = jupyterhub.new(env, params);
diff --git a/kubeflow/core/tests/jupyterhub_test.jsonnet b/kubeflow/core/tests/jupyterhub_test.jsonnet
index d9d056b082d..77e0f0a17f6 100644
--- a/kubeflow/core/tests/jupyterhub_test.jsonnet
+++ b/kubeflow/core/tests/jupyterhub_test.jsonnet
@@ -4,16 +4,15 @@ local params = {
   name: "jupyterhub",
   platform: "gke",
   serviceType: "ClusterIP",
-  disks: "null",
   gcpSecretName: "user-gcp-sa",
   image: "gcr.io/kubeflow/jupyterhub-k8s:v20180531-3bb991b1",
   jupyterHubAuthenticator: "iap",
   useJupyterLabAsDefault: true,
-  notebookPVCMount: "/home/jovyan",
   notebookUid: "-1",
   notebookGid: "-1",
   accessLocalFs: "false",
   ui: "default",
+  storageClass: "null",
 };
 local env = {
   namespace: "foo",
@@ -98,10 +97,6 @@ std.assertEqual(
                 "/etc/config/jupyterhub_config.py",
               ],
               env: [
-                {
-                  name: "NOTEBOOK_PVC_MOUNT",
-                  value: "/home/jovyan",
-                },
                 {
                   name: "KF_AUTHENTICATOR",
                   value: "iap",
@@ -111,7 +106,7 @@ std.assertEqual(
                   value: true,
                 },
                 {
-                  name: "KF_PVC_LIST",
+                  name: "STORAGE_CLASS",
                   value: "null",
                 },
                 {
@@ -172,6 +167,7 @@ std.assertEqual(
         resources: [
           "pods",
           "persistentvolumeclaims",
+          "secrets",
         ],
         verbs: [
           "get",
@@ -179,6 +175,7 @@ std.assertEqual(
           "list",
           "create",
           "delete",
+          "patch",
         ],
       },
       {
diff --git a/kubeflow/core/ui/default/config.yaml b/kubeflow/core/ui/default/config.yaml
index 20b716c035b..facf2e4bd6b 100644
--- a/kubeflow/core/ui/default/config.yaml
+++ b/kubeflow/core/ui/default/config.yaml
@@ -21,5 +21,20 @@ spawnerFormDefaults:
     value: '1.0'
   memory:
     value: 1.0Gi
+  workspaceVolume:
+    value:
+      type:
+        value: New
+      name:
+        value: workspace
+      size:
+        value: '10'
+      mountPath:
+        readOnly: true
+        value: /home/jovyan
+      accessModes:
+        value: ReadWriteOnce
+  dataVolumes:
+    value: []
   extraResources:
     value: ''
diff --git a/kubeflow/core/ui/default/script.js b/kubeflow/core/ui/default/script.js
index 9043580e183..114535b4763 100644
--- a/kubeflow/core/ui/default/script.js
+++ b/kubeflow/core/ui/default/script.js
@@ -22,52 +22,354 @@ $(function() {
       .val('Spawning...');
   });
 
+  // Dynamically change Workspace form fields behavior
+  setWorkspaceEventListeners();
+
   // Fill the form with values defined in the YAML config file
   setDefaultFormValues();
 
-  // Set tooltip to disabled form fields
-  setTooltipsOnDisabled();
+  // Set tooltip to readOnly form fields
+  setTooltipsOnReadOnly();
 });
 
 // Set default values to form fields
 function setDefaultFormValues() {
 
   // Set default Container Image - Disable if specified
-  formDefaults.image.options.forEach(function(item) {
-    $('#image').append($('<option/>').attr('value', item).text(item));
-  });
+  if (formDefaults.image.options) {
+    formDefaults.image.options.forEach(function(item) {
+      $('#image').append($('<option/>').attr('value', item).text(item));
+    });
+  }
+
+  // Set default Container Image, if specified
+  if (formDefaults.image.value) {
+    $('#image').val(formDefaults.image.value)
+  }
 
-  $('#image').val(formDefaults.image.value)
+  // Make Container Image field readonly, if specified
   if (formDefaults.image.readOnly) {
-    $('#image').attr('disabled', true);
+    $('#image').attr('readonly', true);
   }
 
-  // Set default CPU - Disable if specified
-  $('#cpu').val(formDefaults.cpu.value);
+  // Set default CPU, if specified
+  if (formDefaults.cpu.value) {
+    $('#cpu').val(formDefaults.cpu.value);
+  }
+
+  // Make CPU field readonly, if specified
   if (formDefaults.cpu.readOnly) {
-    $('#cpu').attr('disabled', true);
+    $('#cpu').attr('readonly', true);
+  }
+
+  // Set default Memory, if specified
+  if (formDefaults.memory.value) {
+    $('#memory').val(formDefaults.memory.value);
   }
 
-  // Set default Memory - Disable if specified
-  $('#memory').val(formDefaults.memory.value);
+  // Make Memory field readonly if specified
   if (formDefaults.memory.readOnly) {
-    $('#memory').attr('disabled', true);
+    $('#memory').attr('readonly', true);
   }
 
-  // Set default Extra Resources - Disable if specified
-  $('#extraResources').val(formDefaults.extraResources.value);
+  // Set default Workspace Volume, if specified
+  // Make Workspace Volume fields readonly, if specified
+  var defaultWorkspace = formDefaults.workspaceVolume.value;
+  var defaultWorkspaceReadOnly = formDefaults.workspaceVolume.readOnly
+
+  if (defaultWorkspace) {
+    $('#ws_type').val(defaultWorkspace.type.value).trigger('change');
+    if (defaultWorkspace.type.readOnly || defaultWorkspaceReadOnly) {
+      $('#ws_type').attr('readonly', true);
+    }
+    $('#ws_name').val(defaultWorkspace.name.value).trigger('focusout');
+    if (defaultWorkspace.name.readOnly || defaultWorkspaceReadOnly) {
+      $('#ws_name').attr('readonly', true);
+    }
+    $('#ws_size').val(defaultWorkspace.size.value);
+    if (defaultWorkspace.size.readOnly || defaultWorkspaceReadOnly) {
+      $('#ws_size').attr('readonly', true);
+    }
+    $('#ws_mount_path').val(defaultWorkspace.mountPath.value);
+    if (defaultWorkspace.mountPath.readOnly || defaultWorkspaceReadOnly) {
+      $('#ws_mount_path').attr('readonly', true);
+    }
+    $('#ws_access_modes').val(defaultWorkspace.accessModes.value);
+    if (defaultWorkspace.accessModes.readOnly || defaultWorkspaceReadOnly) {
+      $('#ws_access_modes').attr('readonly', true);
+    }
+  }
+
+  // Set default Data Volumes - Disable if specified
+  if (formDefaults.dataVolumes.readOnly) {
+    $('#add_volume').attr('readonly', true);
+  }
+
+  var defaultDataVolumes = formDefaults.dataVolumes.value;
+
+  for (i=0; i<defaultDataVolumes.length; i++) {
+    addVolume();
+    var vol = defaultDataVolumes[i].value;
+
+    $('#vol_type' + counter).val(vol.type.value).trigger('change');
+    if (vol.type.readOnly) {
+      $('#vol_type' + counter).attr('readonly', true);
+    }
+
+    $('#vol_name' + counter).val(vol.name.value).trigger('focusout');
+    if (vol.name.readOnly) {
+      $('#vol_name' + counter).attr('readonly', true);
+    }
+
+    $('#vol_size' + counter).val(vol.size.value);
+    if (vol.size.readOnly) {
+      $('#vol_size' + counter).attr('readonly', true);
+    }
+
+    $('#vol_mount_path' + counter).val(vol.mountPath.value);
+    if (vol.mountPath.readOnly) {
+      $('#vol_mount_path' + counter).attr('readonly', true);
+    }
+
+    $('#vol_access_modes' + counter).val(vol.accessModes.value);
+    if (vol.accessModes.readOnly) {
+      $('#vol_access_modes' + counter).attr('readonly', true);
+    }
+
+    if (defaultDataVolumes[i].readOnly){
+      $('#vol_delete_button' + counter).attr('readonly', true);
+    }
+  }
+
+  // Set default Extra Resources, if specified
+  if (formDefaults.extraResources.value) {
+    $('#extraResources').val(formDefaults.extraResources.value);
+  }
+
+  // Make Extra Resources field readonly, if specified
   if (formDefaults.extraResources.readOnly) {
-    $('#extraResources').attr('disabled', true);
+    $('#extraResources').attr('readonly', true);
+  }
+}
+
+// Register jQuery event listeners for the Workspace Volume
+function  setWorkspaceEventListeners() {
+  var workspaceType = $('#ws_type');
+  var workspaceName = $('#ws_name');
+  var workspaceSize = $('#ws_size');
+  var workspaceAccessModes = $('#ws_access_modes');
+
+  // Disable/Enable Workspace size option based on its Type
+  // For 'Existing' Workspace, provide suggestions from the cluster
+  workspaceType.on('change', function(){
+    if (this.value == 'Existing') {
+      workspaceName.attr('list', 'suggest_pvcs').val('');
+
+      workspaceSize.attr({
+        'readonly': true,
+        'data-toggle': 'tooltip',
+        'data-placement': 'top',
+        'title': 'Size is autofilled when cloning existing Volumes',
+        'value': ''
+      });
+
+      workspaceAccessModes.attr({
+        'readonly': true,
+        'data-toggle': 'tooltip',
+        'data-placement': 'top',
+        'title': 'Access Modes are autofilled when cloning existing Volumes',
+        'value': ''
+      });
+
+    } else if (this.value == 'New') {
+      workspaceName.attr('list', 'suggest_pvcs_disabled').val('');
+      workspaceSize.removeAttr('readonly data-toggle data-placement title').val('');
+      workspaceAccessModes.removeAttr('readonly data-toggle data-placement title').val('');
+    }
+  });
+
+  workspaceName.on('change keyup paste', function(e) {
+    if (workspaceType.val() == 'Existing') {
+      // If Volume already exists, autocomplete Volume Size and Access Mode
+      workspaceSize.val('');
+      workspaceAccessModes.val('');
+      for (var i=0; i<existingPVCs.length; i++) {
+        if (existingPVCs[i].name == e.target.value) {
+          workspaceSize.val(existingPVCs[i].size);
+          workspaceAccessModes.val(existingPVCs[i].access_modes);
+          break;
+        }
+      }
+    }
+  });
+}
+
+// Counter and options for Dataset Volumes
+var counter=0;
+var options = ['vol_type', 'vol_name', 'vol_size', 'vol_mount_path', 'vol_access_modes'];
+
+// Dynamically adds a UI element for configuring a volume
+function addVolume() {
+  counter++;
+
+  // Input for volume type
+  var volumeType = $('<select>').attr({
+    class: 'form-control',
+    id: 'vol_type' + counter,
+    name: 'vol_type' + counter
+  });
+
+  volumeType
+    .append($('<option/>').attr({selected: true, value: 'New'}).text('New'))
+    .append($('<option/>').attr({value: 'Existing'}).text('Existing'));
+
+  // Input for volume name
+  var volumeName = $('<input>').attr({
+    class: 'form-control',
+    id: 'vol_name' + counter,
+    name: 'vol_name' + counter,
+    type: 'text',
+    placeholder: 'volume-' + counter,
+    list: 'suggest_pvcs_disabled'
+  });
+
+  // Input for volume size
+  var volumeSize = $('<input>').attr({
+    class: 'form-control',
+    id: 'vol_size' + counter,
+    name: 'vol_size' + counter,
+    type: 'number',
+    min: '0',
+    step: '0.5',
+    placeholder: '5'
+  });
+
+  // Input for volume mount point
+  var volumeMountPath = $('<input>').attr({
+    class: 'form-control',
+    id: 'vol_mount_path' + counter,
+    name: 'vol_mount_path' + counter,
+    type: 'text',
+    placeholder: '/data/volume-' + counter
+  });
+
+  // Selection for volume access mode
+  var volumeAccessModes = $('<select>').attr({
+      class: 'form-control',
+      id: 'vol_access_modes' + counter,
+      name: 'vol_access_modes' + counter
+  });
+
+  volumeAccessModes
+    .append($('<option/>').attr({value: 'ReadWriteOnce'}).text('RWO'))
+    .append($('<option/>').attr({value: 'ReadWriteMany'}).text('RWX'))
+    .append($('<option/>').attr({value: 'ReadOnlyMany'}).text('ROX'));
+
+
+  // Delete button for volume removal
+  var deleteButton = $('<button/>').attr({
+    class: 'btn btn-danger btn-sm',
+    id: 'vol_delete_button' + counter,
+    type: 'button',
+    onclick: 'removeVolume(' + counter + ');'
+  });
+
+  deleteButton.append($('<i>').attr({class: 'fas fa-minus'}));
+
+  // Create and append new volume
+  $('<div/>', {'class': 'form-group volume' + counter})
+    .append($('<div/>', {class: 'col-sm-2 form-group'}).append(volumeType))
+    .append($('<div/>', {class: 'col-sm-3 form-group', style: 'width: 22.5%'}).append(volumeName))
+    .append($('<div/>', {class: 'col-sm-2 form-group', style: 'width: 12.5%'}).append(volumeSize))
+    .append($('<div/>', {class: 'col-sm-3 form-group'}).append(volumeMountPath))
+    .append($('<div/>', {class: 'col-sm-2 form-group', style: 'width: 14%'}).append(volumeAccessModes))
+    .append($('<div/>', {class: 'col-sm-1 form-group', style: 'padding: 2px'}).append(deleteButton))
+    .hide().fadeIn('normal').appendTo($('#data_volumes'));
+
+  // Disable/Enable Volume size option based on its Type
+  volumeType.on('change', function(){
+    if (this.value == 'Existing') {
+
+      volumeName.attr('list', 'suggest_pvcs').val('');
+
+      volumeSize.attr({
+        'readonly': true,
+        'data-toggle': 'tooltip',
+        'data-placement': 'top',
+        'title': 'Size is autofilled when cloning existing Volumes',
+        'value': ''
+      });
+
+      volumeAccessModes.attr({
+        'readonly': true,
+        'data-toggle': 'tooltip',
+        'data-placement': 'top',
+        'title': 'Access Modes are autofilled when cloning existing Volumes',
+        'value': ''
+      });
+
+    } else if (this.value == 'New') {
+      volumeName.attr('list', 'suggest_pvcs_disabled').val('');
+      volumeSize.removeAttr('readonly data-toggle data-placement title').val('');
+      volumeAccessModes.removeAttr('readonly data-toggle data-placement title').val('');
+    }
+  });
+
+  volumeName.on('change keyup paste', function(e){
+    if (volumeType.val() == 'Existing') {
+      // If Volume already exists, autocomplete Volume Size and Access Mode
+      volumeSize.val('');
+      volumeAccessModes.val('');
+      for (var i = 0; i < existingPVCs.length; i++) {
+        if (existingPVCs[i].name == e.target.value) {
+          volumeSize.val(existingPVCs[i].size);
+          volumeAccessModes.val(existingPVCs[i].access_modes);
+          break;
+        }
+      }
+    }
+  });
+}
+
+// Dynamically remove a previously added UI element for configuring a volume
+function removeVolume(id) {
+  $('.volume' + id).fadeOut('normal', function() {
+    $(this).remove();
+  });
+  counter--;
+
+  // Normalize the IDs of remainder volumes
+  for (i=id; i<=counter; i++) {
+    var volumeElement = $('.volume' + (i + 1));
+    volumeElement.find('#vol_delete_button' + (i + 1)).attr({
+      'id': 'vol_delete_button' + i,
+      'onclick': 'removeVolume(' + i + ')'
+    });
+
+    // Update the class of the Volume
+    volumeElement.removeClass('volume' + (i + 1)).addClass('volume' + i);
+
+    // Update the id and name of the Volume options
+    options.forEach(function(option) {
+      volumeElement.find('#' + option + (i + 1)).attr({
+        'id': option + i,
+        'name': option + i
+      });
+    });
+
+    // Update the placeholders of the Volume options
+    volumeElement.find('[id^=vol_name]').attr('placeholder', 'volume-' + i);
+    volumeElement.find('[id^=vol_mount_path]').attr('placeholder', '/data/volume-' + i);
   }
 }
 
 // Helper function to set a tooltip to admin-disabled Spawner form fields
-function setTooltipsOnDisabled() {
-  // Get all disabled Elements
-  var disabledElements = $('*:disabled');
+function setTooltipsOnReadOnly() {
+  // Get all readOnly Elements
+  var readOnlyElements = $(':input[readonly]');
 
-  // Keep only disabled Elements that do not already have a tooltip
-  var filtered = disabledElements.filter(function() {
+  // Keep only readOnly Elements that do not already have a tooltip
+  var filtered = readOnlyElements.filter(function() {
     return !($(this).attr('data-toggle'))
   });
 
diff --git a/kubeflow/core/ui/default/spawner.py b/kubeflow/core/ui/default/spawner.py
index 3f64323c905..ca5aa34c73f 100644
--- a/kubeflow/core/ui/default/spawner.py
+++ b/kubeflow/core/ui/default/spawner.py
@@ -2,10 +2,14 @@
 import yaml
 import string
 import escapism
+from tornado import gen
 from traitlets import Dict
-from kubespawner.spawner import KubeSpawner
 from jinja2 import FileSystemLoader, Environment
 
+from kubespawner.objects import make_pvc
+from kubespawner.spawner import KubeSpawner
+from kubernetes.client.rest import ApiException
+
 SERVICE_ACCOUNT_SECRET_MOUNT = '/var/run/secrets/sa'
 
 
@@ -31,9 +35,14 @@ def _options_form_default(self):
         # Create Jinja environment to dynamically load templates
         j2_env = Environment(loader=FileSystemLoader('/etc/config'))
 
-        # Return the rendered template as unicode string
+        # Get available PVCs in a given namespace
+        # This is a blocking K8s API call
+        existing_pvcs = self._list_pvcs_in_namespace(self.namespace)
+
+        # Return the rendered template as a unicode string
         return j2_env.get_template('template.html').render(
             form_defaults=self.spawner_ui_config['spawnerFormDefaults'],
+            existing_pvcs=existing_pvcs,
         )
 
     def options_from_form(self, formdata):
@@ -55,6 +64,76 @@ def options_from_form(self, formdata):
         if 'memory' in formdata and formdata['memory'][0]:
             options['memory'] = formdata['memory'][0].strip()
 
+        # Manage Workspace Volume
+        options['workspaceVolume'] = {}
+        ws_volume = {}
+
+        if 'workspaceVolume' in form_defaults:
+            # The Workspace Volume is specified in `config.yaml`
+            default_ws_volume = form_defaults['workspaceVolume']['value']
+
+            # Get the default values from the YAML configuration file
+            ws_volume['type'] = default_ws_volume['type']['value']
+            ws_volume['name'] = default_ws_volume['name']['value']
+            ws_volume['size'] = '%sGi' % default_ws_volume['size']['value']
+            ws_volume['mountPath'] = default_ws_volume['mountPath']['value']
+            ws_volume['accessModes'] = (
+                default_ws_volume['accessModes']['value']
+            )
+
+        # Get the Workspace Volume values from the form, if user specified them
+        if 'ws_type' in formdata and formdata['ws_type'][0]:
+            ws_volume['type'] = formdata['ws_type'][0].strip()
+
+        if 'ws_name' in formdata and formdata['ws_name'][0]:
+            ws_volume['name'] = formdata['ws_name'][0].strip()
+
+        if 'ws_size' in formdata and formdata['ws_size'][0]:
+            ws_volume['size'] = '%sGi' % formdata['ws_size'][0].strip()
+
+        if 'ws_mount_path' in formdata and formdata['ws_mount_path'][0]:
+            ws_volume['mountPath'] = formdata['ws_mount_path'][0].strip()
+
+        if 'ws_access_modes' in formdata and formdata['ws_access_modes'][0]:
+            ws_volume['accessModes'] = formdata['ws_access_modes'][0].strip()
+
+        options['workspaceVolume'] = ws_volume
+
+        # Manage Data Volumes
+        options['dataVolumes'] = []
+
+        data_volumes_cnt = 0
+        # Deduce the total number of Data Volumes
+        for k, v in formdata.items():
+            if k.startswith('vol_type'):
+                data_volumes_cnt += 1
+
+        for i in range(1, data_volumes_cnt + 1):
+            data_volume = {}
+
+            # Get all Data Volume fields from the form
+            id = 'vol_type' + str(i)
+            if id in formdata and formdata[id][0]:
+                data_volume['type'] = formdata[id][0].strip()
+
+            id = 'vol_name' + str(i)
+            if id in formdata and formdata[id][0]:
+                data_volume['name'] = formdata[id][0].strip()
+
+            id = 'vol_size' + str(i)
+            if id in formdata and formdata[id][0]:
+                data_volume['size'] = '%sGi' % formdata[id][0].strip()
+
+            id = 'vol_mount_path' + str(i)
+            if id in formdata and formdata[id][0]:
+                data_volume['mountPath'] = formdata[id][0].strip()
+
+            id = 'vol_access_modes' + str(i)
+            if id in formdata and formdata[id][0]:
+                data_volume['accessModes'] = formdata[id][0].strip()
+
+            options['dataVolumes'].append(data_volume)
+
         # Manage Extra Resources
         options['extraResources'] = form_defaults['extraResources']['value']
         if 'extraResources' in formdata and formdata['extraResources'][0]:
@@ -76,6 +155,14 @@ def cpu_guarantee(self):
     def mem_guarantee(self):
         return self.user_options['memory']
 
+    @property
+    def workspace_volume(self):
+        return self.user_options["workspaceVolume"]
+
+    @property
+    def data_volumes(self):
+        return self.user_options["dataVolumes"]
+
     @property
     def extra_resource_limits(self):
         extra = ''
@@ -119,3 +206,140 @@ def _expand_user_properties(self, template):
             servername=servername
         )[:63]
         return rname
+
+    def _get_pvc_manifest(self, name, storage_class, access_modes,
+                          storage, labels, annotations):
+        """
+        Return a PVC spec based on the given parameters.
+
+        This manifest will be used to create PVCs in the K8s cluster.
+        """
+        return make_pvc(
+            name=name,
+            storage_class=storage_class,
+            access_modes=access_modes,
+            storage=storage,
+            labels=labels,
+            annotations=annotations
+        )
+
+    def _list_pvcs_in_namespace(self, namespace):
+        """
+        Return a list with all non-failed PVCs in a K8s namespace.
+
+        Each list entry is a dict with `name`, `size` and `access_modes` keys.
+        """
+        existing_pvcs = []
+
+        try:
+            resp = self.api.list_namespaced_persistent_volume_claim(
+                namespace=namespace,
+                watch=False
+            )
+
+        except ApiException as e:
+            self.log.warn('Could not list PVCs in %s: %s', namespace, e)
+            raise
+
+        # Iterate over all existing PVCs and return all non-failed ones
+        for pvc in [pvc for pvc in resp.items if pvc.status.phase != 'Failed']:
+            existing_pvcs.append({
+                "name": pvc.metadata.name,
+                "size": pvc.status.capacity.get('storage')[:-2],
+                "access_modes": pvc.status.access_modes
+            })
+
+        return existing_pvcs
+
+    @gen.coroutine
+    def _prepare_volumes(self):
+        """Create PVC manifests and attach as volumes to the Notebook."""
+        # Workspace and Data Volumes are managed as PVCs
+        persistent_volumes = [self.workspace_volume] + self.data_volumes
+
+        for (idx, volume) in enumerate(persistent_volumes):
+            if volume['type'] == 'New':
+                yield self._provision_new_pvc(volume, self.namespace)
+                pvc_name = self._expand_user_properties(
+                    '{username}-%s' % volume['name'])
+            else:
+                yield self._get_existing_pvc(volume['name'], self.namespace)
+                pvc_name = volume['name']
+
+            # Upon success, mount PVC as a volume
+            self.volumes.append({
+                'name': 'volume-%d' % idx,
+                'persistentVolumeClaim': {'claimName': pvc_name}
+            })
+
+            self.volume_mounts.append({
+                'mountPath': volume['mountPath'],
+                'name': 'volume-%d' % idx
+            })
+
+    @gen.coroutine
+    def _provision_new_pvc(self, volume, namespace):
+        """Issue a K8s API request to create a new, namespaced PVC."""
+        pvc_name = self._expand_user_properties(
+            "{username}-%s" % volume['name']
+        )
+
+        storage_class = self.extra_spawner_config['storage_class']
+
+        labels = self._build_common_labels(self._expand_all(
+            self.user_storage_extra_labels))
+        labels.update({'component': 'singleuser-storage'})
+        annotations = self._build_common_annotations({})
+
+        # Create a V1PersistentVolumeClaim for the API call
+        pvc_manifest = self._get_pvc_manifest(
+            name=pvc_name,
+            storage_class=storage_class,
+            access_modes=[volume['accessModes']],
+            storage=volume['size'],
+            labels=labels,
+            annotations=annotations
+        )
+
+        pvc = None
+        try:
+            pvc = yield self.asynchronize(
+                self.api.create_namespaced_persistent_volume_claim,
+                namespace=namespace,
+                body=pvc_manifest
+            )
+
+        except ApiException as e:
+            if e.status == 409:
+                self.log.warning('PVC %s already exists. New PVC not created.',
+                                 pvc_name)
+            self.log.info(e.reason)
+            raise
+
+        self.log.info('PVC %s was successfully created', pvc_name)
+        return pvc
+
+    @gen.coroutine
+    def _get_existing_pvc(self, pvc_name, namespace):
+        """Issue a K8s API request to retrieve a namespaced PVC."""
+        pvc = None
+
+        try:
+            pvc = yield self.asynchronize(
+                self.api.read_namespaced_persistent_volume_claim,
+                name=pvc_name,
+                namespace=namespace
+            )
+
+        except ApiException as e:
+            self.log.warning('PVC %s could not be retrieved: %s', pvc_name, e)
+            raise
+
+        self.log.info('PVC %s was successfully retrieved', pvc_name)
+        return pvc
+
+    @gen.coroutine
+    def start(self):
+        """Override KubeSpawner class start method."""
+        yield self._prepare_volumes()
+        return (yield super(KubeFormSpawner, self).start())
diff --git a/kubeflow/core/ui/default/style.css b/kubeflow/core/ui/default/style.css
index 9983da9ee70..652af84c22c 100644
--- a/kubeflow/core/ui/default/style.css
+++ b/kubeflow/core/ui/default/style.css
@@ -19,3 +19,31 @@ body {
   background-color: #F37524;
   border-color: #E34F21;
 }
+
+.btn-success {
+  color: #fff;
+  background-color: #28a745;
+  border-color: #28a745;
+}
+
+.btn-success:hover {
+  color: #fff;
+  background-color: #218838;
+  border-color: #1e7e34;
+}
+
+.btn-success:active:focus {
+  color: #fff;
+  background-color: #28a745;
+  border-color: #28a745;
+}
+
+.btn-success:focus {
+  color: #fff;
+  background-color: #28a745;
+  border-color: #28a745;
+}
+
+input[readonly] {
+  cursor: not-allowed;
+}
diff --git a/kubeflow/core/ui/default/template.html b/kubeflow/core/ui/default/template.html
index 2368afdf6c3..fbf000570c1 100644
--- a/kubeflow/core/ui/default/template.html
+++ b/kubeflow/core/ui/default/template.html
@@ -7,15 +7,24 @@
 
 {% block javascript %}
   <script type="text/javascript">
+    var existingPVCs = {{ existing_pvcs|tojson }};
     var formDefaults = {{ form_defaults|tojson }};
     {% include "script.js" %}
   </script>
 {% endblock %}
 
 {% block header %}
-<div class="panel-info">
-  <div class="panel-heading">Fill out the form to customize your Jupyter Notebook.</div>
-</div>
+  <div class="panel-info">
+    <div class="panel-heading">Fill out the form to customize your Jupyter Notebook.</div>
+  </div>
+{% endblock %}
+
+{% block existing_pvcs %}
+  <datalist id="suggest_pvcs">
+    {% for pvc in existing_pvcs %}
+      <option value="{{ pvc.name }}">
+    {% endfor %}
+  </datalist>
 {% endblock %}
 
 {% block image %}
@@ -80,6 +89,94 @@
   </div>
   {% endblock %}
 
+  {% block workspaceVolume %}
+  <!-- Workspace Volume -->
+  <div class="panel panel-primary">
+    <div class="panel-heading">
+      <i class="fas fa-laptop-code" style="padding: 0px 2px;"></i>
+      <label>Workspace Volume</label>
+    </div>
+    <div class="panel-body" id="workspace_volume">
+        <div class="col-sm-2"><label>Type</label></div>
+        <div class="col-sm-3" style="width: 22.5%"><label>Name</label></div>
+        <div class="col-sm-2" style="width: 12.5%"><label>Size (Gi)</label></div>
+        <div class="col-sm-3"><label>Mount Path</label></div>
+        <div class="col-sm-2" style="width: 14%"><label>Access Mode</label></div>
+        <div class="col-sm-*">
+        <div class="col-sm-2">
+          <select class="form-control" name="ws_type" id="ws_type">
+            <option selected>New</option>
+            <option>Existing</option>
+          </select>
+        </div>
+        <div class="col-sm-3" style="width: 22.5%">
+          <input class="form-control" name="ws_name" id="ws_name"
+                 placeholder='workspace' list="suggest_pvcs_disabled">
+          </input>
+        </div>
+        <div class="col-sm-2" style="width: 12.5%">
+          <input class="form-control" name="ws_size" id="ws_size" placeholder='10'
+                 type="number" step="0.5" min="0">
+          </input>
+        </div>
+        <div class="col-sm-3">
+          <input class="form-control" id="ws_mount_path" name="ws_mount_path" data-toggle="tooltip"
+                 title="Your Workspace is always mounted under /home/jovyan">
+          </input>
+        </div>
+        <div class="col-sm-2" style="width: 14%">
+          <select class="form-control" id="ws_access_modes" name="ws_access_modes">
+            <option value="ReadWriteOnce">RWO</option>
+            <option value="ReadWriteMany">RWX</option>
+            <option value="ReadOnlyMany">ROX</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <p class="text-muted" style="padding: 10px;">
+      Configure the Volume to be mounted as your personal Workspace.</br>
+      For example, to create an empty Workspace:
+      <span><code>New</code></span>
+      <span><code>workspace</code></span>,
+      <span><code>10</code></span>,
+      <span><code>/home/jovyan</code></span>,
+      <span><code>RWO</code></span>
+    </p>
+  </div>
+  {% endblock %}
+
+  {% block dataVolumes %}
+  <!-- Data Volumes -->
+  <div class="panel panel-primary">
+    <div class="panel-heading">
+      <i class="far fa-hdd" style="padding: 0px 2px;"></i>
+      <label>Data Volumes</label>
+    </div>
+    <div class="panel-body">
+      <div class="col-sm-2"><label>Type</label></div>
+      <div class="col-sm-3" style="width: 22.5%"><label>Name</label></div>
+      <div class="col-sm-2" style="width: 12.5%"><label>Size (Gi)</label></div>
+      <div class="col-sm-3"><label>Mount Path</label> </div>
+      <div class="col-sm-2" style="width: 14%"><label>Access Mode</label></div>
+      <div class="col-sm-*" id="data_volumes"></div>
+      <div class="col-sm-2">
+        <button id="add_volume" class="btn btn-success btn-sm" type="button" onclick="addVolume();">
+          <i class="fas fa-plus"></i>
+        </button>
+      </div>
+    </div>
+    <p class="text-muted" style="padding: 10px;">
+      Configure the Volumes to be mounted as your Datasets.</br>
+      For example, to create an empty Data Volume:
+      <span><code>New</code></span>,
+      <span><code>volume-1</code></span>,
+      <span><code>5</code></span>,
+      <span><code>/data/volume-1</code></span>,
+      <span><code>RWO</code></span>
+    </p>
+  </div>
+  {% endblock %}
+
   {% block extra_resources %}
   <!-- Extra Resources -->
   <div class="panel panel-primary">
@@ -105,6 +202,7 @@
 {% block footer %}
 <div class="panel-warning">
   <div class="panel-heading">
-    In case your Jupyter Notebook does not start, make sure that the resource quotas you specified are available in the cluster.</div>
+    In case your Jupyter Notebook does not start, make sure that the resource quotas you specified are available in the cluster.
+  </div>
 </div>
 {% endblock %}