Draft of the cluster list UI.

Not functional yet, but the idea is there.

IPython/frontend/html/notebook/static/css/projectdashboard.css

@@ -10,30 +10,30 @@
     margin: 30px auto 0px auto;
 }
 
-#notebooks_toolbar {
+.list_toolbar {
     padding: 5px;
     height: 25px;
     line-height: 25px;
 }
 
-#drag_info {
+.toolbar_info {
     float: left;
 }
 
-#notebooks_buttons {
+.toolbar_buttons {
     float: right;
 }
 
-#project_name {
+.list_header {
     height: 25px;
     line-height: 25px;
-    padding: 3px;
+    padding: 3px 5px;
 }
 
-.notebook_item {
+.list_item {
     height: 25px;
     line-height: 25px;
-    padding: 3px;
+    padding: 3px 5px;
 }
 
 .notebook_item a {

IPython/frontend/html/notebook/static/js/clusterlist.js

@@ -0,0 +1,128 @@
+//----------------------------------------------------------------------------
+//  Copyright (C) 2008-2011  The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// NotebookList
+//============================================================================
+
+var IPython = (function (IPython) {
+
+    var ClusterList = function (selector) {
+        this.selector = selector;
+        if (this.selector !== undefined) {
+            this.element = $(selector);
+            this.style();
+            this.bind_events();
+        }
+    };
+
+    ClusterList.prototype.style = function () {
+        $('#cluster_toolbar').addClass('list_toolbar');
+        $('#cluster_list_info').addClass('toolbar_info');
+        $('#cluster_buttons').addClass('toolbar_buttons');
+        $('div#cluster_header').addClass('list_header ui-widget ui-widget-header');
+        $('#refresh_cluster_list').button({
+            icons : {primary: 'ui-icon-arrowrefresh-1-s'},
+            text : false
+        });
+    };
+
+
+    ClusterList.prototype.bind_events = function () {
+        var that = this;
+        $('#refresh_cluster_list').click(function () {
+            that.load_list();
+        });
+    };
+
+
+    ClusterList.prototype.load_list = function () {
+        var settings = {
+            processData : false,
+            cache : false,
+            type : "GET",
+            dataType : "json",
+            success : $.proxy(this.load_list_success, this)
+        };
+        var url = $('body').data('baseProjectUrl') + 'clusters';
+        $.ajax(url, settings);
+    };
+
+
+    ClusterList.prototype.clear_list = function () {
+        this.element.children('.list_item').remove();
+    }
+
+    ClusterList.prototype.load_list_success = function (data, status, xhr) {
+        console.log(data);
+        this.clear_list();
+        var len = data.length;
+        for (var i=0; i<len; i++) {
+            var item_div = $('<div/>');
+            item_div.addClass('list_item ui-widget ui-widget-content ui-helper-clearfix');
+            item_div.css('border-top-style','none');
+            var item = new ClusterItem(item_div);
+            item.update_state(data[i]);
+            item_div.data('item', item);
+            console.log('appending item', item);
+            this.element.append(item_div);
+        };
+    };
+
+
+    var ClusterItem = function (element) {
+        this.element = $(element);
+        this.data = null;
+    };
+
+
+    ClusterItem.prototype.update_state = function (data) {
+        this.data = data;
+        if (data.status === 'running') {
+            this.state_running();
+        } else if (data.status === 'stopped') {
+            this.state_stopped();
+        };
+
+    }
+
+
+    ClusterItem.prototype.state_stopped = function () {
+        var item_name = $('<span/>').addClass('item_name').text(this.data.profile);
+        var item_buttons = $('<span/>').addClass('item_buttons');
+        var start_button = $('<button>Start</button>').button();
+        item_buttons.append(start_button);
+        this.element.append(item_name).append(item_buttons);
+        start_button.click(function (e) {
+            console.log('start');
+        });
+    }
+
+
+    ClusterItem.prototype.start_success = function () {
+        
+    };
+
+    ClusterItem.prototype.state_running = function () {
+        var item_name = $('<span/>').addClass('item_name').text(this.data.profile);
+        var item_buttons = $('<span/>').addClass('item_buttons');
+        var stop_button = $('<button>Stop</button>').button();
+        item_buttons.append(start_button);
+        this.element.append(item_name).append(item_buttons);
+        start_button.click(function (e) {
+            console.log('stop');
+        });
+    };
+
+
+    IPython.ClusterList = ClusterList;
+    IPython.ClusterItem = ClusterItem;
+
+    return IPython;
+
+}(IPython));
+

IPython/frontend/html/notebook/static/js/notebooklist.js

@@ -21,7 +21,14 @@ var IPython = (function (IPython) {
     };
 
     NotebookList.prototype.style = function () {
-        $('div#project_name').addClass('ui-widget ui-widget-header');
+        $('#notebook_toolbar').addClass('list_toolbar');
+        $('#drag_info').addClass('toolbar_info');
+        $('#notebook_buttons').addClass('toolbar_buttons');
+        $('div#project_name').addClass('list_header ui-widget ui-widget-header');
+        $('#refresh_notebook_list').button({
+            icons : {primary: 'ui-icon-arrowrefresh-1-s'},
+            text : false
+        });
     };
 
 
@@ -30,6 +37,9 @@ var IPython = (function (IPython) {
             return;
         }
         var that = this;
+        $('#refresh_notebook_list').click(function () {
+            that.load_list();
+        });
         this.element.bind('dragover', function () {
             return false;
         });
@@ -61,7 +71,13 @@ var IPython = (function (IPython) {
     };
 
 
+    NotebookList.prototype.clear_list = function () {
+        this.element.children('.list_item').remove();
+    }
+
+
     NotebookList.prototype.load_list = function () {
+        this.clear_list();
         var settings = {
             processData : false,
             cache : false,
@@ -92,7 +108,7 @@ var IPython = (function (IPython) {
 
     NotebookList.prototype.new_notebook_item = function (index) {
         var item = $('<div/>');
-        item.addClass('notebook_item ui-widget ui-widget-content ui-helper-clearfix');
+        item.addClass('list_item ui-widget ui-widget-content ui-helper-clearfix');
         item.css('border-top-style','none');
         var item_name = $('<span/>').addClass('item_name');
 
@@ -156,7 +172,7 @@ var IPython = (function (IPython) {
                 var that = $(this);
                 // We use the nbname and notebook_id from the parent notebook_item element's
                 // data because the outer scopes values change as we iterate through the loop.
-                var parent_item = that.parents('div.notebook_item');
+                var parent_item = that.parents('div.list_item');
                 var nbname = parent_item.data('nbname');
                 var notebook_id = parent_item.data('notebook_id');
                 var dialog = $('<div/>');

IPython/frontend/html/notebook/static/js/projectdashboardmain.js

@@ -23,9 +23,11 @@ $(document).ready(function () {
 
     IPython.read_only = $('body').data('readOnly') === 'True';
     IPython.notebook_list = new IPython.NotebookList('div#notebook_list');
+    IPython.cluster_list = new IPython.ClusterList('div#cluster_list');
     IPython.login_widget = new IPython.LoginWidget('span#login_widget');
 
     IPython.notebook_list.load_list();
+    IPython.cluster_list.load_list();
 
     IPython.page.show();
 

IPython/frontend/html/notebook/templates/projectdashboard.html

@@ -29,12 +29,13 @@ data-read-only={{read_only}}
 
     <div id="tab1">
         {% if logged_in or not read_only %}
-        <div id="notebooks_toolbar">
+        <div id="notebook_toolbar">
             <span id="drag_info">Drag files onto the list to import
             notebooks.</span>
 
-            <span id="notebooks_buttons">
-              <button id="new_notebook">New Notebook</button>
+            <span id="notebook_buttons">
+                <button id="refresh_notebook_list" title="Refresh notebook list">Refresh</button>
+                <button id="new_notebook" title="Create new notebook">New Notebook</button>
             </span>
         </div>
         {% end %}
@@ -44,6 +45,19 @@ data-read-only={{read_only}}
         </div>
     </div>
     <div id="tab2">
+
+        <div id="cluster_toolbar">
+            <span id="cluster_list_info">IPython parallel computing clusters</span>
+
+            <span id="cluster_buttons">
+                <button id="refresh_cluster_list" title="Refresh cluster list">Refresh</button>
+            </span>
+        </div>
+
+        <div id="cluster_list">
+            <div id="cluster_header"><h2>Clusters</h2></div>
+        </div>
+
     </div>
 </div>
 
@@ -53,5 +67,6 @@ data-read-only={{read_only}}
 
 {% block script %}
     <script src="{{static_url("js/notebooklist.js") }}" type="text/javascript" charset="utf-8"></script>
+    <script src="{{static_url("js/clusterlist.js") }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{static_url("js/projectdashboardmain.js") }}" type="text/javascript" charset="utf-8"></script>
 {% end %}