ok, Running tab is working now

IPython/html/static/tree/js/kernellist.js

@@ -1,26 +1,48
 //----------------------------------------------------------------------------
 //  Copyright (C) 2014  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Running Kernels List
 //============================================================================
 
 var IPython = (function (IPython) {
     "use strict";
 
+    var utils = IPython.utils;
     
     var KernelList = function (selector, options) {
-        IPython.NotebookList.call(this, selector, options);
+        IPython.NotebookList.call(this, selector, options, 'running');
     };
 
-    KernelList.prototype = IPython.NotebookList.prototype;
+    KernelList.prototype = Object.create(IPython.NotebookList.prototype);
+
+    KernelList.prototype.sessions_loaded = function (d) {
+        // clear out the previous list
+        this.clear_list();
+        var len  = d.length;
+        var item;
+        for (var i=0; i < d.length; i++) {
+            var path = utils.url_path_join(d[i].notebook.path, d[i].notebook.name);
+            var name = d[i].name;
+            item = this.new_notebook_item(i);
+            this.add_link(path, path, item);
+            this.sessions[path] = d[i].id;
+            this.add_shutdown_button(item,this.sessions[path]);
+        }
+       
+        if (len > 0) {
+           $('#' + this.element_name + '_list_header').hide();
+       } else {
+           $('#' + this.element_name + '_list_header').show();
+       }
+    }
 
     IPython.KernelList = KernelList;
 
     return IPython;
 
 }(IPython));

IPython/html/static/tree/js/main.js

@@ -1,90 +1,92
 //----------------------------------------------------------------------------
 //  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // On document ready
 //============================================================================
 
 
 $(document).ready(function () {
 
     IPython.page = new IPython.Page();
 
     $('#new_notebook').button().click(function (e) {
         IPython.notebook_list.new_notebook()
     });
     
     var opts = {
         base_url : IPython.utils.get_body_data("baseUrl"),
         notebook_path : IPython.utils.get_body_data("notebookPath"),
     };
     IPython.notebook_list = new IPython.NotebookList('#notebook_list', opts);
     IPython.cluster_list = new IPython.ClusterList('#cluster_list', opts);
-    IPython.kernel_list = new IPython.KernelList('#kernel_list', opts);
+    IPython.kernel_list = new IPython.KernelList('#running_list', opts);
     IPython.login_widget = new IPython.LoginWidget('#login_widget', opts);
 
     var interval_id=0;
     // auto refresh every xx secondes, no need to be fast,
     //  update is done at least when page get focus
     var time_refresh = 60; // in sec
 
     var enable_autorefresh = function(){
         //refresh immediately , then start interval
         if($('.upload_button').length == 0)
         {
             IPython.notebook_list.load_sessions();
+            IPython.kernel_list.load_sessions();
             IPython.cluster_list.load_list();
         }
         if (!interval_id){
             interval_id = setInterval(function(){
                     if($('.upload_button').length == 0)
                     {
                         IPython.notebook_list.load_sessions();
+                        IPython.kernel_list.load_sessions();
                         IPython.cluster_list.load_list();
                     }
                 }, time_refresh*1000);
             }
     }
 
     var disable_autorefresh = function(){
         clearInterval(interval_id);
         interval_id = 0;
     }
 
     // stop autorefresh when page lose focus
     $(window).blur(function() {
         disable_autorefresh();
     })
 
     //re-enable when page get focus back
     $(window).focus(function() {
         enable_autorefresh();
     });
 
     // finally start it, it will refresh immediately
     enable_autorefresh();
 
     IPython.page.show();
     
     // bound the upload method to the on change of the file select list
     $("#alternate_upload").change(function (event){
         IPython.notebook_list.handelFilesUpload(event,'form');
     });
     
     // set hash on tab click
     $("#tabs").find("a").click(function() {
         window.location.hash = $(this).attr("href");
     })
     
     // load tab if url hash
     if (window.location.hash) {
         $("#tabs").find("a[href=" + window.location.hash + "]").click();
     }
 
 
 });
 

IPython/html/static/tree/js/notebooklist.js

@@ -1,431 +1,433
 //----------------------------------------------------------------------------
 //  Copyright (C) 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) {
     "use strict";
     
     var utils = IPython.utils;
 
-    var NotebookList = function (selector, options) {
+    var NotebookList = function (selector, options, element_name) {
+        // allow code re-use by just changing element_name in kernellist.js
+        this.element_name = element_name || 'notebook';
         this.selector = selector;
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.style();
             this.bind_events();
         }
         this.notebooks_list = [];
         this.sessions = {};
         this.base_url = options.base_url || utils.get_body_data("baseUrl");
         this.notebook_path = options.notebook_path || utils.get_body_data("notebookPath");
     };
 
     NotebookList.prototype.style = function () {
-        $('#notebook_toolbar').addClass('list_toolbar');
+        $('#' + this.element_name + '_toolbar').addClass('list_toolbar');
         $('#drag_info').addClass('toolbar_info');
-        $('#notebook_buttons').addClass('toolbar_buttons');
-        $('#notebook_list_header').addClass('list_header');
+        $('#' + this.element_name + '_buttons').addClass('toolbar_buttons');
+        $('#' + this.element_name + '_list_header').addClass('list_header');
         this.element.addClass("list_container");
     };
 
 
     NotebookList.prototype.bind_events = function () {
         var that = this;
         $('#refresh_notebook_list').click(function () {
             that.load_list();
         });
         this.element.bind('dragover', function () {
             return false;
         });
         this.element.bind('drop', function(event){
             that.handelFilesUpload(event,'drop');
             return false;
         });
     };
 
     NotebookList.prototype.handelFilesUpload =  function(event, dropOrForm) {
         var that = this;
         var files;
         if(dropOrForm =='drop'){
             files = event.originalEvent.dataTransfer.files;
         } else 
         {
             files = event.originalEvent.target.files;
         }
         for (var i = 0; i < files.length; i++) {
             var f = files[i];
             var reader = new FileReader();
             reader.readAsText(f);
             var name_and_ext = utils.splitext(f.name);
             var file_ext = name_and_ext[1];
             if (file_ext === '.ipynb') {
                 var item = that.new_notebook_item(0);
                 that.add_name_input(f.name, item);
                 // Store the notebook item in the reader so we can use it later
                 // to know which item it belongs to.
                 $(reader).data('item', item);
                 reader.onload = function (event) {
                     var nbitem = $(event.target).data('item');
                     that.add_notebook_data(event.target.result, nbitem);
                     that.add_upload_button(nbitem);
                 };
             } else {
                 var dialog = 'Uploaded notebooks must be .ipynb files';
                 IPython.dialog.modal({
                     title : 'Invalid file type',
                     body : dialog,
                     buttons : {'OK' : {'class' : 'btn-primary'}}
                 });
             }
         }
         // Replace the file input form wth a clone of itself. This is required to
         // reset the form. Otherwise, if you upload a file, delete it and try to 
         // upload it again, the changed event won't fire.
         var form = $('input.fileinput');
         form.replaceWith(form.clone(true));
         return false;
     };
 
     NotebookList.prototype.clear_list = function () {
         this.element.children('.list_item').remove();
     };
 
     NotebookList.prototype.load_sessions = function(){
         var that = this;
         var settings = {
             processData : false,
             cache : false,
             type : "GET",
             dataType : "json",
             success : $.proxy(that.sessions_loaded, this)
         };
         var url = utils.url_join_encode(this.base_url, 'api/sessions');
         $.ajax(url,settings);
     };
 
 
     NotebookList.prototype.sessions_loaded = function(data){
         this.sessions = {};
         var len = data.length;
         if (len > 0) {
             for (var i=0; i<len; i++) {
                 var nb_path;
                 if (!data[i].notebook.path) {
                     nb_path = data[i].notebook.name;
                 }
                 else {
                     nb_path = utils.url_path_join(
                         data[i].notebook.path,
                         data[i].notebook.name
                     );
                 }
                 this.sessions[nb_path] = data[i].id;
             }
         }
         this.load_list();
     };
 
     NotebookList.prototype.load_list = function () {
         var that = this;
         var settings = {
             processData : false,
             cache : false,
             type : "GET",
             dataType : "json",
             success : $.proxy(this.list_loaded, this),
             error : $.proxy( function(){
                 that.list_loaded([], null, null, {msg:"Error connecting to server."});
                              },this)
         };
 
         var url = utils.url_join_encode(
                 this.base_url,
                 'api',
                 'notebooks',
                 this.notebook_path
         );
         $.ajax(url, settings);
     };
 
 
     NotebookList.prototype.list_loaded = function (data, status, xhr, param) {
         var message = 'Notebook list empty.';
         if (param !== undefined && param.msg) {
             message = param.msg;
         }
         var item = null;
         var len = data.length;
         this.clear_list();
         if (len === 0) {
             item = this.new_notebook_item(0);
             var span12 = item.children().first();
             span12.empty();
             span12.append($('<div style="margin:auto;text-align:center;color:grey"/>').text(message));
         }
         var path = this.notebook_path;
         var offset = 0;
         if (path !== '') {
             item = this.new_notebook_item(0);
             this.add_dir(path, '..', item);
             offset = 1;
         }
         for (var i=0; i<len; i++) {
             if (data[i].type === 'directory') {
                 var name = data[i].name;
                 item = this.new_notebook_item(i+offset);
                 this.add_dir(path, name, item);
             } else {
                 var name = data[i].name;
                 item = this.new_notebook_item(i+offset);
                 this.add_link(path, name, item);
                 name = utils.url_path_join(path, name);
                 if(this.sessions[name] === undefined){
                     this.add_delete_button(item);
                 } else {
                     this.add_shutdown_button(item,this.sessions[name]);
                 }
             }
         }
     };
 
 
     NotebookList.prototype.new_notebook_item = function (index) {
         var item = $('<div/>').addClass("list_item").addClass("row-fluid");
         // item.addClass('list_item ui-widget ui-widget-content ui-helper-clearfix');
         // item.css('border-top-style','none');
         item.append($("<div/>").addClass("span12").append(
             $('<i/>').addClass('item_icon')
         ).append(
             $("<a/>").addClass("item_link").append(
                 $("<span/>").addClass("item_name")
             )
         ).append(
             $('<div/>').addClass("item_buttons btn-group pull-right")
         ));
         
         if (index === -1) {
             this.element.append(item);
         } else {
             this.element.children().eq(index).after(item);
         }
         return item;
     };
 
 
     NotebookList.prototype.add_dir = function (path, name, item) {
         item.data('name', name);
         item.data('path', path);
         item.find(".item_name").text(name);
         item.find(".item_icon").addClass('icon-folder-open');
         item.find("a.item_link")
             .attr('href',
                 utils.url_join_encode(
                     this.base_url,
                     "tree",
                     path,
                     name
                 )
             );
     };
 
 
     NotebookList.prototype.add_link = function (path, nbname, item) {
         item.data('nbname', nbname);
         item.data('path', path);
         item.find(".item_name").text(nbname);
         item.find(".item_icon").addClass('icon-book');
         item.find("a.item_link")
             .attr('href',
                 utils.url_join_encode(
                     this.base_url,
                     "notebooks",
                     path,
                     nbname
                 )
             ).attr('target','_blank');
     };
 
 
     NotebookList.prototype.add_name_input = function (nbname, item) {
         item.data('nbname', nbname);
         item.find(".item_icon").addClass('icon-book');
         item.find(".item_name").empty().append(
             $('<input/>')
             .addClass("nbname_input")
             .attr('value', utils.splitext(nbname)[0])
             .attr('size', '30')
             .attr('type', 'text')
         );
     };
 
 
     NotebookList.prototype.add_notebook_data = function (data, item) {
         item.data('nbdata', data);
     };
 
 
     NotebookList.prototype.add_shutdown_button = function (item, session) {
         var that = this;
         var shutdown_button = $("<button/>").text("Shutdown").addClass("btn btn-mini btn-danger").
             click(function (e) {
                 var settings = {
                     processData : false,
                     cache : false,
                     type : "DELETE",
                     dataType : "json",
                     success : function () {
                         that.load_sessions();
                     }
                 };
                 var url = utils.url_join_encode(
                     that.base_url,
                     'api/sessions',
                     session
                 );
                 $.ajax(url, settings);
                 return false;
             });
         // var new_buttons = item.find('a'); // shutdown_button;
         item.find(".item_buttons").text("").append(shutdown_button);
     };
 
     NotebookList.prototype.add_delete_button = function (item) {
         var new_buttons = $('<span/>').addClass("btn-group pull-right");
         var notebooklist = this;
         var delete_button = $("<button/>").text("Delete").addClass("btn btn-mini").
             click(function (e) {
                 // $(this) is the button that was clicked.
                 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.list_item');
                 var nbname = parent_item.data('nbname');
                 var message = 'Are you sure you want to permanently delete the notebook: ' + nbname + '?';
                 IPython.dialog.modal({
                     title : "Delete notebook",
                     body : message,
                     buttons : {
                         Delete : {
                             class: "btn-danger",
                             click: function() {
                                 var settings = {
                                     processData : false,
                                     cache : false,
                                     type : "DELETE",
                                     dataType : "json",
                                     success : function (data, status, xhr) {
                                         parent_item.remove();
                                     }
                                 };
                                 var url = utils.url_join_encode(
                                     notebooklist.base_url,
                                     'api/notebooks',
                                     notebooklist.notebook_path,
                                     nbname
                                 );
                                 $.ajax(url, settings);
                             }
                         },
                         Cancel : {}
                     }
                 });
                 return false;
             });
         item.find(".item_buttons").text("").append(delete_button);
     };
 
 
     NotebookList.prototype.add_upload_button = function (item) {
         var that = this;
         var upload_button = $('<button/>').text("Upload")
             .addClass('btn btn-primary btn-mini upload_button')
             .click(function (e) {
                 var nbname = item.find('.item_name > input').val();
                 if (nbname.slice(nbname.length-6, nbname.length) != ".ipynb") {
                     nbname = nbname + ".ipynb";
                 }
                 var path = that.notebook_path;
                 var nbdata = item.data('nbdata');
                 var content_type = 'application/json';
                 var model = {
                     content : JSON.parse(nbdata),
                 };
                 var settings = {
                     processData : false,
                     cache : false,
                     type : 'PUT',
                     dataType : 'json',
                     data : JSON.stringify(model),
                     headers : {'Content-Type': content_type},
                     success : function (data, status, xhr) {
                         that.add_link(path, nbname, item);
                         that.add_delete_button(item);
                     },
                     error : function (data, status, xhr) {
                         console.log(data, status);
                     }
                 };
 
                 var url = utils.url_join_encode(
                     that.base_url,
                     'api/notebooks',
                     that.notebook_path,
                     nbname
                 );
                 $.ajax(url, settings);
                 return false;
             });
         var cancel_button = $('<button/>').text("Cancel")
             .addClass("btn btn-mini")
             .click(function (e) {
                 console.log('cancel click');
                 item.remove();
                 return false;
             });
         item.find(".item_buttons").empty()
             .append(upload_button)
             .append(cancel_button);
     };
 
 
     NotebookList.prototype.new_notebook = function(){
         var path = this.notebook_path;
         var base_url = this.base_url;
         var settings = {
             processData : false,
             cache : false,
             type : "POST",
             dataType : "json",
             async : false,
             success : function (data, status, xhr) {
                 var notebook_name = data.name;
                 window.open(
                     utils.url_join_encode(
                         base_url,
                         'notebooks',
                         path,
                         notebook_name),
                     '_blank'
                 );
             }
         };
         var url = utils.url_join_encode(
             base_url,
             'api/notebooks',
             path
         );
         $.ajax(url, settings);
     };
 
     IPython.NotebookList = NotebookList;
 
     return IPython;
 
 }(IPython));

IPython/html/templates/tree.html

@@ -1,120 +1,122
 {% extends "page.html" %}
 
 {% block title %}{{page_title}}{% endblock %}
 
 
 {% block stylesheet %}
 {{super()}}
 <link rel="stylesheet" href="{{ static_url("tree/css/override.css") }}" type="text/css" />
 {% endblock %}
 
 {% block params %}
 
 data-project="{{project}}"
 data-base-url="{{base_url}}"
 data-notebook-path="{{notebook_path}}"
 data-base-kernel-url="{{base_kernel_url}}"
 
 {% endblock %}
 
 
 {% block site %}
 
 <div id="ipython-main-app" class="container">
 
 <div id="tab_content" class="tabbable">
     <ul id="tabs" class="nav nav-tabs">
         <li class="active"><a href="#notebooks" data-toggle="tab">Notebooks</a></li>
         <li><a href="#running" data-toggle="tab">Running</a></li>
         <li><a href="#clusters" data-toggle="tab">Clusters</a></li>
     </ul>
 
     <div class="tab-content">
     <div id="notebooks" class="tab-pane active">
         <div id="notebook_toolbar" class="row-fluid">
             <div class="span8">
                 <form id='alternate_upload'  class='alternate_upload' >
                     <span id="drag_info" style="position:absolute" >
                         To import a notebook, drag the file onto the listing below or <strong>click here</strong>.
                         </span>
                     <input type="file" name="datafile" class="fileinput" multiple='multiple'>
                 </form>
             </div>
             <div class="span4 clearfix">
                 <span id="notebook_buttons" class="pull-right">
                     <button id="new_notebook" title="Create new notebook" class="btn btn-small">New Notebook</button>
                     <button id="refresh_notebook_list" title="Refresh notebook list" class="btn btn-small"><i class="icon-refresh"></i></button>
                 </span>
             </div>
         </div>
 
         <div id="notebook_list">
           <div id="notebook_list_header" class="row-fluid list_header">
               <div id="project_name">
                 <ul class="breadcrumb">
                     <li><a href="{{breadcrumbs[0][0]}}"><i class="icon-home"></i></a><span>/</span></li>
                     {% for crumb in breadcrumbs[1:] %}
                         <li><a href="{{crumb[0]}}">{{crumb[1]}}</a> <span>/</span></li>
                     {% endfor %}
                 </ul>
               </div>
           </div>
         </div>
     </div>
     
     <div id="running" class="tab-pane">
 
         <div id="running_toolbar" class="row-fluid">
             <div class="span8">
                 <span id="running_list_info">Currently running IPython notebooks</span>
             </div>
             <div class="span4" class="clearfix">
                 <span id="running_buttons" class="pull-right">
-                    <button id="refresh_running_list" title="Refresh cluster list" class="btn btn-small"><i class="icon-refresh"></i></button>
+                    <button id="refresh_running_list" title="Refresh running list" class="btn btn-small"><i class="icon-refresh"></i></button>
                 </span>
             </div>
         </div>
 
         <div id="running_list">
-            <div id="running_list_header" class="row-fluid list_header">
+            <div id="running_list_header" class="row-fluid list_header" style='display:none'> 
+                <div> There are no actively running kernels </div>
+            <!-- damn it, I seem to need this stupid placeholder, otherwise items don't get added to the list -->
             </div>
         </div>
     </div>
     
     <div id="clusters" class="tab-pane">
 
         <div id="cluster_toolbar" class="row-fluid">
             <div class="span8">
                 <span id="cluster_list_info">IPython parallel computing clusters</span>
             </div>
             <div class="span4" class="clearfix">
                 <span id="cluster_buttons" class="pull-right">
                     <button id="refresh_cluster_list" title="Refresh cluster list" class="btn btn-small"><i class="icon-refresh"></i></button>
                 </span>
             </div>
         </div>
 
         <div id="cluster_list">
             <div id="cluster_list_header" class="row-fluid list_header">
                 <div class="profile_col span4">profile</div>
                 <div class="status_col span3">status</div>
                 <div class="engines_col span3" title="Enter the number of engines to start or empty for default"># of engines</div>
                 <div class="action_col span2">action</div>
             </div>
         </div>
     </div>
 </div>
 
 </div>
 
 {% endblock %}
 
 {% block script %}
     {{super()}}
     <script src="{{ static_url("base/js/utils.js") }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{static_url("base/js/dialog.js") }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{static_url("tree/js/notebooklist.js") }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{static_url("tree/js/kernellist.js") }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{static_url("tree/js/clusterlist.js") }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{static_url("tree/js/main.js") }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}