change to cluster list

fix css and make engine input of type number

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

@@ -1,89 +1,97 b''
 
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 
 #ipython-main-app {
     width: 920px;
     margin: 30px auto 0px auto;
 }
 
 #tabs {
     border-style: none;
 }
 
 #tab1, #tab2 {
     padding: 1em 0em;
 }
 
 .list_toolbar {
     padding: 5px;
     height: 25px;
     line-height: 25px;
 }
 
 .toolbar_info {
     float: left;
 }
 
 .toolbar_buttons {
     float: right;
 }
 
 .list_header {
     height: 25px;
     line-height: 25px;
     padding: 3px 5px;
 }
 
 
 
 .list_item {
     height: 25px;
     line-height: 25px;
     padding: 3px 5px;
 }
 
 .notebook_item a {
     text-decoration: none;
 }
 
 .profile_col {
 }
 
 .status_col {
     float: right;
     width: 325px;
 }
 
 .engines_col {
     float: right;
     width: 325px;
 }
 
 .action_col {
     float: right;
 }
 
 .item_buttons {
     float: right;
 }
 
 .item_buttons .upload_button {
     color: darkred;
 }
 
 .highlight_text {
     color: blue;
 }
 
 .ui-tabs .ui-tabs-nav li a {
     padding: .3em .5em;
 }
 
 #project_name > .breadcrumb {
  padding : 0;
  background-color: transparent;
 }
+
+input.engine_num_input {
+    height: 20px;
+    margin-bottom:2px;
+    padding-top:0;
+    padding-bottom:0;
+    width: 90px;
+}

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

@@ -1,180 +1,180 b''
 //----------------------------------------------------------------------------
 //  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 ui-helper-clearfix');
         $('div#cluster_header').children().eq(0).addClass('profile_col');
         $('div#cluster_header').children().eq(1).addClass('action_col');
         $('div#cluster_header').children().eq(2).addClass('engines_col');
         $('div#cluster_header').children().eq(3).addClass('status_col');
         $('#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) {
         this.clear_list();
         var len = data.length;
         for (var i=0; i<len; i++) {
             var item_div = $('<div/>');
             var item = new ClusterItem(item_div);
             item.update_state(data[i]);
             item_div.data('item', item);
             this.element.append(item_div);
         };
     };
 
 
     var ClusterItem = function (element) {
         this.element = $(element);
         this.data = null;
         this.style();
     };
 
 
     ClusterItem.prototype.style = function () {
         this.element.addClass('list_item ui-widget ui-widget-content ui-helper-clearfix');
         this.element.css('border-top-style','none');
     }
 
     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;
         this.element.empty();
         var profile_col = $('<span/>').addClass('profile_col').text(this.data.profile);
         var status_col = $('<span/>').addClass('status_col').html('stopped');
         var engines_col = $('<span/>').addClass('engines_col');
-        var input = $('<input/>').attr('type','text').
+        var input = $('<input/>').attr('type','number').
                 attr('size',3).addClass('engine_num_input');
         engines_col.append(input);
         var action_col = $('<span/>').addClass('action_col');
         var start_button = $('<button>Start</button>').button();
         action_col.append(start_button);
         this.element.append(profile_col).
             append(action_col).
             append(engines_col).
             append(status_col);
         start_button.click(function (e) {
             var n = that.element.find('.engine_num_input').val();
             if (!/^\d+$/.test(n) && n.length>0) {
                 status_col.html('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 (data, status, xhr) {
                         status_col.html("error starting cluster")
                     }
                 };
                 status_col.html('starting');
                 var url = $('body').data('baseProjectUrl') + 'clusters/' + that.data.profile + '/start';
                 $.ajax(url, settings);
             };
         });
     };
 
 
     ClusterItem.prototype.state_running = function () {
         this.element.empty();
         var that = this;
         var profile_col = $('<span/>').addClass('profile_col').text(this.data.profile);
         var status_col = $('<span/>').addClass('status_col').html('running');
         var engines_col = $('<span/>').addClass('engines_col').html(this.data.n);
         var action_col = $('<span/>').addClass('action_col');
         var stop_button = $('<button>Stop</button>').button();
         action_col.append(stop_button);
         this.element.append(profile_col).
             append(action_col).
             append(engines_col).
             append(status_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 (data, status, xhr) {
                     console.log('error',data);
                     status_col.html("error stopping cluster")
                 }
             };
             status_col.html('stopping')
             var url = $('body').data('baseProjectUrl') + 'clusters/' + that.data.profile + '/stop';
             $.ajax(url, settings);
         });
     };
 
 
     IPython.ClusterList = ClusterList;
     IPython.ClusterItem = ClusterItem;
 
     return IPython;
 
 }(IPython));
 

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

@@ -1,88 +1,88 b''
 {% extends "page.html" %}
 
 {% block title %}IPython Dashboard{% endblock %}
 
 {% block stylesheet %}
-    <link rel="stylesheet" href="{{static_url("css/projectdashboard.css") }}" type="text/css" />
     <link rel="stylesheet" href="{{static_url("css/alternateuploadform.css") }}" type="text/css" />
     <link rel="stylesheet" href="{{static_url("css/style.min.css") }}" type="text/css" />
+    <link rel="stylesheet" href="{{static_url("css/projectdashboard.css") }}" type="text/css" />
 {% endblock %}
 
 
 {% block params %}
 
 data-project={{project}}
 data-base-project-url={{base_project_url}}
 data-base-kernel-url={{base_kernel_url}}
 data-read-only={{read_only}}
 
 {% endblock %}
 
 
 {% block site %}
 
 <div id="ipython-main-app">
 
 <div id="tabs">
     <ul>
         <li><a href="#tab1">Notebooks</a></li>
         <li><a href="#tab2">Clusters</a></li>
     </ul>
 
     <div id="tab1">
         {% if logged_in or not read_only %}
         <div id="notebook_toolbar">
             <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>
             <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>
         {% endif %}
 
         <div id="notebook_list">
             <div id="project_name">
                 <ul class="breadcrumb">
                     {% for component in project_component %}
                         <li>{{component}} <span>/</span></li>
                     {% endfor %}
                 </ul>
             </div>
         </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">
                 <span>profile</span>
                 <span>action</span>
                 <span title="Enter the number of engines to start or empty for default"># of engines</span>
                 <span>status</span>
             </div>
         </div>
 
     </div>
 </div>
 
 </div>
 
 {% endblock %}
 
 {% 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>
 {% endblock %}