Allow custom container images in the JH Spawner UI

* Add a radio button to enable users to select between 'standard' and
  'custom' container images for their Jupyter Notebooks. Based on the
  checked option, the form dynamically switches between a dropdown list
  (standard images) and an input field (custom image).

Closes kubeflow#2060

Signed-off-by: Ioannis Androulidakis <ioannis@arrikto.com>
Signed-off-by: Ilias Tsitsimpis <iliastsi@arrikto.com>

kubeflow/jupyter/ui/default/script.js

@@ -27,6 +27,9 @@ $(function() {
     $('#spawn_form').find('input[type="submit"]').remove();
   }
 
+  // Configure Image input elements
+  setImageType();
+
   // Dynamically change Workspace form fields behavior
   setWorkspaceEventListeners();
 
@@ -37,6 +40,22 @@ $(function() {
   setTooltipsOnImmutable();
 });
 
+// Dynamically update Image input field, based on radio button selection
+function setImageType() {
+  imageType = $('#imageType').find('input:checked').val();
+  if (imageType == 'standard') {
+    $('select[for=standardImages]')
+      .attr({'id': 'image', 'name': 'image'}).css({'display': ''});
+    $('input[for=customImage]')
+      .attr({'id': '', 'name': ''}).removeAttr('required').css({'display': 'none'});
+  } else {
+    $('input[for=customImage]')
+      .attr({'id': 'image', 'name': 'image'}).css({'display': ''});
+    $('select[for=standardImages]')
+      .attr({'id': '', 'name': ''}).removeAttr('required').css({'display': 'none'});
+  }
+}
+
 // Set default values to form fields
 function setDefaultFormValues() {
 
@@ -60,15 +79,14 @@ function setDefaultFormValues() {
 
     // Make Container Image field readonly, if specified
     if ('readOnly' in formDefaults.image) {
-      $('#image').attr({
-        'readonly': formDefaults.image.readOnly,
-        'immutable': formDefaults.image.readOnly
+      $('#option_standard').prop({
+          'disabled': formDefaults.image.readOnly,
+          'immutable': formDefaults.image.readOnly
+      });
+      $('#option_custom').prop({
+          'disabled': formDefaults.image.readOnly,
+          'immutable': formDefaults.image.readOnly
       });
-      if ($('#image').attr('readonly')) {
-        $('#image').on('mousedown', function(e) {
-          e.preventDefault(); this.blur(); window.focus();
-        });
-      }
     }
   }
 

kubeflow/jupyter/ui/default/template.html

@@ -55,7 +55,18 @@ <h4>Please follow the steps below to address this issue:</h4>
         <label>Image</label>
       </div>
       <div class="panel-body" style="padding: 10px;">
-        <select id="image" class="form-control" name="image" placeholder='repo/image:tag'/ required></select>
+        <div id='imageType' style="padding-bottom: 5px;">
+          <label class="radio-inline">
+            <input id="option_standard" type="radio" name="imageType" onclick="setImageType()"
+                   value="standard" checked>Standard
+          </label>
+          <label class="radio-inline">
+            <input id="option_custom" type="radio" name="imageType" onclick="setImageType()"
+                   value="custom">Custom
+          </label>
+        </div>
+        <select class="form-control" for="standardImages" required></select>
+        <input class="form-control" for="customImage" placeholder="repo/image:tag" required>
       </div>
       <p class="text-muted" style="padding: 10px;">
         A starter Docker image for JupyterHub with a baseline deployment and typical ML packages.

kubeflow/jupyter/ui/rok/script.js

@@ -72,6 +72,9 @@ $(function() {
     $('#spawn_form').find('input[type="submit"]').remove();
   }
 
+  // Configure Image input elements
+  setImageType();
+
   // Dynamically change Workspace form fields behavior
   setWorkspaceEventListeners();
 
@@ -82,6 +85,22 @@ $(function() {
   setTooltipsOnImmutable();
 });
 
+// Dynamically update Image input field, based on radio button selection
+function setImageType() {
+  imageType = $('#imageType').find('input:checked').val();
+  if (imageType == 'standard') {
+    $('select[for=standardImages]')
+      .attr({'id': 'image', 'name': 'image'}).css({'display': ''});
+    $('input[for=customImage]')
+      .attr({'id': '', 'name': ''}).removeAttr('required').css({'display': 'none'});
+  } else {
+    $('input[for=customImage]')
+      .attr({'id': 'image', 'name': 'image'}).css({'display': ''});
+    $('select[for=standardImages]')
+      .attr({'id': '', 'name': ''}).removeAttr('required').css({'display': 'none'});
+  }
+}
+
 // Set default values to form fields
 function setDefaultFormValues() {
 
@@ -119,15 +138,14 @@ function setDefaultFormValues() {
 
     // Make Container Image field readonly, if specified
     if ('readOnly' in formDefaults.image) {
-      $('#image').attr({
-        'readonly': formDefaults.image.readOnly,
-        'immutable': formDefaults.image.readOnly
+      $('#option_standard').prop({
+          'disabled': formDefaults.image.readOnly,
+          'immutable': formDefaults.image.readOnly
+      });
+      $('#option_custom').prop({
+          'disabled': formDefaults.image.readOnly,
+          'immutable': formDefaults.image.readOnly
       });
-      if ($('#image').attr('readonly')) {
-        $('#image').on('mousedown', function(e) {
-          e.preventDefault(); this.blur(); window.focus();
-        });
-      }
     }
   }