Merge pull request #160 from yuvipanda/profiles-styling

Provide a nicer default profile template
jupyterhub · Apr 30, 2018 · cc658f4 · cc658f4
2 parents dbbe121 + e7320e7
commit cc658f4
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 6 deletions.
diff --git a/jupyterhub_config.py b/jupyterhub_config.py
@@ -34,3 +34,22 @@
 c.KubeSpawner.user_storage_pvc_ensure = False
 
 c.JupyterHub.allow_named_servers = True
+
+c.KubeSpawner.profile_list = [
+    {
+        'display_name': 'Training Env - Python',
+        'default': True,
+        'kubespawner_override': {
+            'singleuser_image_spec': 'training/python:label',
+            'cpu_limit': 0.5,
+        },
+        'description': 'Something description of what is going on here, maybe a <a href="#">link too!</a>'
+    }, {
+        'display_name': 'Training Env - Datascience',
+        'kubespawner_override': {
+            'singleuser_image_spec': 'training/datascience:label',
+            'cpu_limit': 0.2,
+        },
+        'description': 'Something description of how this is different, maybe a <a href="#">link too!</a>'
+    }
+]
diff --git a/kubespawner/spawner.py b/kubespawner/spawner.py
@@ -794,12 +794,35 @@ def _hub_connect_port_default(self):
 
     profile_form_template = Unicode(
         """
-        <label for="profile">Please select a profile to launch</label>
-        <select class="form-control" name="profile" required autofocus>
-            {% for profile in profile_list %}
-            <option {% if profile.default %}selected{% endif %} value="{{ loop.index0 }}">{{ profile.display_name }}</option>
-            {% endfor %}
-        </select>
+        <script>
+        // JupyterHub 0.8 applied form-control indisciminately to all form elements.
+        // Can be removed once we stop supporting JupyterHub 0.8
+        $(document).ready(function() {
+            $('#kubespawner-profiles-list input[type="radio"]').removeClass('form-control');
+        });
+        </script>
+        <style>
+        /* The profile description should not be bold, even though it is inside the <label> tag */
+        #kubespawner-profiles-list label p {
+            font-weight: normal;
+        }
+        </style>
+
+        <div class='form-group' id='kubespawner-profiles-list'>
+        {% for profile in profile_list %}
+        <label for='profile-item-{{ loop.index0 }}' class='form-control input-group'>
+            <div class='col-md-1'>
+                <input type='radio' name='profile' id='profile-item-{{ loop.index0 }}' value='{{ loop.index0 }}' {% if profile.default %}checked{% endif %} />
+            </div>
+            <div class='col-md-11'>
+                <strong>{{ profile.display_name }}</strong>
+                {% if profile.description %}
+                <p>{{ profile.description }}</p>
+                {% endif %}
+            </div>
+        </label>
+        {% endfor %}
+        </div>
         """,
         config=True,
         help="""
@@ -824,6 +847,7 @@ def _hub_connect_port_default(self):
 
         Signature is: List(Dict()), where each item is a dictionary that has two keys:
         - 'display_name': the human readable display name (should be HTML safe)
+        - 'description': Optional description of this profile displayed to the user.
         - 'kubespawner_override': a dictionary with overrides to apply to the KubeSpawner
             settings. Each value can be either the final value to change or a callable that
             take the `KubeSpawner` instance as parameter and return the final value.