Fixes to make spinners in cluster list display correctly.

IPython/html/static/tree/js/clusterlist.js

@@ -1,198 +1,198 b''
 //----------------------------------------------------------------------------
 //  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 ClusterList = function (selector, options) {
         this.selector = selector;
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.style();
             this.bind_events();
         }
         options = options || {};
         this.options = options;
         this.base_url = options.base_url || utils.get_body_data("baseUrl");
         this.notebook_path = options.notebook_path || utils.get_body_data("notebookPath");
     };
 
     ClusterList.prototype.style = function () {
         $('#cluster_list').addClass('list_container');
         $('#cluster_toolbar').addClass('list_toolbar');
         $('#cluster_list_info').addClass('toolbar_info');
         $('#cluster_buttons').addClass('toolbar_buttons');
     };
 
 
     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),
             error : utils.log_ajax_error,
         };
         var url = utils.url_join_encode(this.base_url, 'clusters');
         $.ajax(url, settings);
     };
 
 
     ClusterList.prototype.clear_list = function () {
         this.element.children('.list_item').remove();
     };
 
     ClusterList.prototype.load_list_success = function (data, status, xhr) {
         this.clear_list();
         var len = data.length;
         for (var i=0; i<len; i++) {
             var element = $('<div/>');
             var item = new ClusterItem(element, this.options);
             item.update_state(data[i]);
             element.data('item', item);
             this.element.append(element);
         }
     };
 
 
     var ClusterItem = function (element, options) {
         this.element = $(element);
         this.base_url = options.base_url || utils.get_body_data("baseUrl");
         this.notebook_path = options.notebook_path || utils.get_body_data("notebookPath");
         this.data = null;
         this.style();
     };
 
     ClusterItem.prototype.style = function () {
         this.element.addClass('list_item').addClass("row");
     };
 
     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 that = this;
         var profile_col = $('<div/>').addClass('profile_col col-md-4').text(this.data.profile);
         var status_col = $('<div/>').addClass('status_col col-md-3').text('stopped');
         var engines_col = $('<div/>').addClass('engine_col col-md-3');
         var input = $('<input/>').attr('type','number')
                 .attr('min',1)
                 .attr('size',3)
-                .addClass('engine_num_input');
+                .addClass('engine_num_input form-control');
         engines_col.append(input);
         var start_button = $('<button/>').addClass("btn btn-default btn-xs").text("Start");
         var action_col = $('<div/>').addClass('action_col col-md-2').append(
             $("<span/>").addClass("item_buttons btn-group").append(
                 start_button
             )
         );
         this.element.empty()
             .append(profile_col)
             .append(status_col)
             .append(engines_col)
             .append(action_col);
         start_button.click(function (e) {
             var n = that.element.find('.engine_num_input').val();
             if (!/^\d+$/.test(n) && n.length>0) {
                 status_col.text('invalid engine #');
             } else {
                 var settings = {
                     cache : false,
                     data : {n:n},
                     type : "POST",
                     dataType : "json",
                     success : function (data, status, xhr) {
                         that.update_state(data);
                     },
                     error : function (xhr, status, error) {
                         status_col.text("error starting cluster");
                         utils.log_ajax_error(xhr, status, error);
                     }
                 };
                 status_col.text('starting');
                 var url = utils.url_join_encode(
                     that.base_url,
                     'clusters',
                     that.data.profile,
                     'start'
                 );
                 $.ajax(url, settings);
             }
         });
     };
 
 
     ClusterItem.prototype.state_running = function () {
         var that = this;
         var profile_col = $('<div/>').addClass('profile_col col-md-4').text(this.data.profile);
         var status_col = $('<div/>').addClass('status_col col-md-3').text('running');
         var engines_col = $('<div/>').addClass('engines_col col-md-3').text(this.data.n);
         var stop_button = $('<button/>').addClass("btn btn-default btn-xs").text("Stop");
         var action_col = $('<div/>').addClass('action_col col-md-2').append(
             $("<span/>").addClass("item_buttons btn-group").append(
                 stop_button
             )
         );
         this.element.empty()
             .append(profile_col)
             .append(status_col)
             .append(engines_col)
             .append(action_col);
         stop_button.click(function (e) {
             var settings = {
                 cache : false,
                 type : "POST",
                 dataType : "json",
                 success : function (data, status, xhr) {
                     that.update_state(data);
                 },
                 error : function (xhr, status, error) {
                     utils.log_ajax_error(xhr, status, error),
                     status_col.text("error stopping cluster");
                 }
             };
             status_col.text('stopping');
             var url = utils.url_join_encode(
                 that.base_url,
                 'clusters',
                 that.data.profile,
                 'stop'
             );
             $.ajax(url, settings);
         });
     };
 
 
     IPython.ClusterList = ClusterList;
     IPython.ClusterItem = ClusterItem;
 
     return IPython;
 
 }(IPython));
 

IPython/html/static/tree/less/tree.less

@@ -1,141 +1,140 b''
 
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 
 @dashboard_tb_pad: 4px;
 @dashboard_lr_pad: 7px;
 // These are the total heights of the Bootstrap small and mini buttons. These values
 // are not less variables so we have to track them statically.
 @btn_small_height: 26px;
 @btn_mini_height: 22px;
 @dark_dashboard_color: darken(@border_color, 30%);
 
 ul#tabs {
     margin-bottom: @dashboard_tb_pad;
 }
 
 ul#tabs a {
     padding-top: @dashboard_tb_pad;
     padding-bottom: @dashboard_tb_pad;
 }
 
 ul.breadcrumb {
     a:focus, a:hover {
         text-decoration: none;
     }
     i.icon-home {
         font-size: 16px;
         margin-right: 4px;
     }
     
     span {
         color: @dark_dashboard_color;
     }
 }
 
 .list_toolbar {
     padding: @dashboard_tb_pad 0 @dashboard_tb_pad 0;
 }
 
 .list_toolbar [class*="span"] {
     min-height: @btn_small_height;
 }
 
 .list_header {
     font-weight: bold;
 }
 
 .list_container {
   margin-top: @dashboard_tb_pad;
   margin-bottom: 5*@dashboard_tb_pad;
   border: 1px solid @border_color;
   border-radius: 4px;
 }
 
 .list_container > div {
   border-bottom: 1px solid @border_color;
   &:hover .list-item{
     background-color: red;
   };
 }
 
 .list_container > div:last-child {
   border: none;
 }
 
 .list_item {
   &:hover .list_item {
     background-color: #ddd;
   };
   a {text-decoration: none;}
 }
 
 .list_header>div, .list_item>div {
     padding-top: @dashboard_tb_pad;
     padding-bottom: @dashboard_tb_pad;
     padding-left: @dashboard_lr_pad;
     padding-right: @dashboard_lr_pad;
-    height: @btn_mini_height;
     line-height: @btn_mini_height;
 }
 
 .item_name {
     line-height: @btn_mini_height;
     height: @btn_small_height;
 }
 
 .item_icon {
     font-size: 14px; 
     color: @dark_dashboard_color;
     margin-right: @dashboard_lr_pad;
 }
 
 .item_buttons {
     line-height: 1em;
 }
 
 .toolbar_info {
     height: @btn_small_height;
     line-height: @btn_small_height;
 }
 
 input.nbname_input, input.engine_num_input {
     // These settings give these inputs a height that matches @btn_mini_height = 22
     padding-top: 3px;
     padding-bottom: 3px;
-    height: 14px;
+    height: @btn_mini_height;
     line-height: 14px;
     margin: 0px;
 }
 
 input.engine_num_input {
     width: 60px;
 }
 
 .highlight_text {
     color: blue;
 }
 
 #project_name > .breadcrumb {
     padding: 0px;
     margin-bottom: 0px;
     background-color: transparent;
     font-weight: bold;
    
 }
 
 .tab-content .row {
     margin-left: 0px;
     margin-right: 0px;
 }
 
 .folder_icon:before {
     .icon(@folder-close-alt)
 }
 
 .notebook_icon:before {
     .icon(@book)
 }

IPython/html/templates/tree.html

@@ -1,121 +1,121 b''
 {% 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}}"
 
 {% 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">
             <div class="span8">
                 <form id='alternate_upload'  class='alternate_upload' >
                     <span id="notebook_list_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-default btn-sm">New Notebook</button>
                     <button id="refresh_notebook_list" title="Refresh notebook list" class="btn btn-default btn-sm"><i class="icon-refresh"></i></button>
                 </span>
             </div>
         </div>
 
         <div id="notebook_list">
           <div id="notebook_list_header" class="row 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">
             <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 running list" class="btn btn-default btn-sm"><i class="icon-refresh"></i></button>
                 </span>
             </div>
         </div>
 
         <div id="running_list">
-            <div id="running_list_header" class="row list_header"> 
+            <div id="running_list_header" class="row warning"> 
                 <div> There are no notebooks running. </div>
             </div> 
         </div>
     </div>
     
     <div id="clusters" class="tab-pane">
 
         <div id="cluster_toolbar" class="row">
             <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-default btn-sm"><i class="icon-refresh"></i></button>
                 </span>
             </div>
         </div>
 
         <div id="cluster_list">
             <div id="cluster_list_header" class="row list_header">
                 <div class="profile_col col-md-4">profile</div>
                 <div class="status_col col-md-3">status</div>
                 <div class="engines_col col-md-3" title="Enter the number of engines to start or empty for default"># of engines</div>
                 <div class="action_col col-md-2">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/sessionlist.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 %}