Add list of available terminals in the dashboard

IPython/html/static/tree/js/terminallist.js

@@ -0,0 +1,103 b''
+// Copyright (c) IPython Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+define([
+    'base/js/namespace',
+    'base/js/utils',
+    'jquery',
+    'tree/js/notebooklist',
+], function(IPython, utils, $, notebooklist) {
+    "use strict";
+
+    var TerminalList = function (selector, options) {
+        // Constructor
+        //
+        // Parameters:
+        //  selector: string
+        //  options: dictionary
+        //      Dictionary of keyword arguments.
+        //          base_url: string
+        this.base_url = options.base_url || utils.get_body_data("baseUrl");
+        this.element_name = options.element_name || 'terminal';
+        this.selector = selector;
+        this.terminals = [];
+        if (this.selector !== undefined) {
+            this.element = $(selector);
+            this.style();
+            this.bind_events();
+            this.load_terminals();
+        }
+    };
+
+    TerminalList.prototype = Object.create(notebooklist.NotebookList.prototype);
+
+    TerminalList.prototype.bind_events = function () {
+        var that = this;
+        $('#refresh_' + this.element_name + '_list').click(function () {
+            that.load_terminals();
+        });
+        $('#new_terminal').click($.proxy(this.new_terminal, this));
+    };
+
+    TerminalList.prototype.load_terminals = function() {
+        var that = this;
+        var url = utils.url_join_encode(this.base_url, 'api/terminals');
+        $.ajax(url, {
+            type: "GET",
+            cache: false,
+            dataType: "json",
+            success: $.proxy(this.terminals_loaded, this),
+            error : utils.log_ajax_error
+        });
+    };
+
+    TerminalList.prototype.terminals_loaded = function (data) {
+        this.terminals = data;
+        this.clear_list();
+        var item, path_name, term;
+        for (var i=0; i < this.terminals.length; i++) {
+            term = this.terminals[i];
+            item = this.new_item(-1);
+            this.add_link(term.name, item);
+            this.add_shutdown_button(term.name, item);
+        }
+        $('#terminal_list_header').toggle(data.length === 0);
+    };
+
+    TerminalList.prototype.new_terminal = function() {
+        var url = utils.url_join_encode(this.base_url, 'terminals/new');
+        window.open(url, '_blank');
+    };
+    
+    TerminalList.prototype.add_link = function(name, item) {
+        item.data('term-name', name);
+        item.find(".item_name").text(name);
+        item.find(".item_icon").addClass("fa fa-terminal");
+        var link = item.find("a.item_link")
+            .attr('href', utils.url_join_encode(this.base_url, "terminals", name));
+        link.attr('target', '_blank');
+        this.add_shutdown_button(name, item);
+    };
+    
+    TerminalList.prototype.add_shutdown_button = function(name, item) {
+        var that = this;
+        var shutdown_button = $("<button/>").text("Shutdown").addClass("btn btn-xs btn-danger").
+            click(function (e) {
+                var settings = {
+                    processData : false,
+                    type : "DELETE",
+                    dataType : "json",
+                    success : function () {
+                        that.load_terminals();
+                    },
+                    error : utils.log_ajax_error,
+                };
+                var url = utils.url_join_encode(that.base_url, 'api/terminals', name);
+                $.ajax(url, settings);
+                return false;
+            });
+        item.find(".item_buttons").text("").append(shutdown_button);
+    };
+
+    return {TerminalList: TerminalList};
+});

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

@@ -1,115 +1,118 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 require([
     'base/js/namespace',
     'jquery',
     'base/js/events',
     'base/js/page',
     'base/js/utils',
     'tree/js/notebooklist',
     'tree/js/clusterlist',
     'tree/js/sessionlist',
     'tree/js/kernellist',
+    'tree/js/terminallist',
     'auth/js/loginwidget',
     // only loaded, not used:
     'jqueryui',
     'bootstrap',
     'custom/custom',
 ], function(
     IPython, 
     $, 
     events,
     page, 
     utils, 
     notebooklist, 
     clusterlist, 
     sesssionlist, 
-    kernellist, 
+    kernellist,
+    terminallist,
     loginwidget){
 
     page = new page.Page();
     
     var common_options = {
         base_url: utils.get_body_data("baseUrl"),
         notebook_path: utils.get_body_data("notebookPath"),
     };
     session_list = new sesssionlist.SesssionList($.extend({
         events: events}, 
         common_options));
     notebook_list = new notebooklist.NotebookList('#notebook_list', $.extend({
         session_list:  session_list}, 
         common_options));
     cluster_list = new clusterlist.ClusterList('#cluster_list', common_options);
     kernel_list = new kernellist.KernelList('#running_list',  $.extend({
         session_list:  session_list}, 
         common_options));
+    terminal_list = new terminallist.TerminalList('#terminal_list', common_options);
     login_widget = new loginwidget.LoginWidget('#login_widget', common_options);
 
     $('#new_notebook').click(function (e) {
         notebook_list.new_notebook();
     });
 
     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
         session_list.load_sessions();
         cluster_list.load_list();
         if (!interval_id){
             interval_id = setInterval(function(){
                     session_list.load_sessions();
                     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();
 
     page.show();
 
     // For backwards compatability.
     IPython.page = page;
     IPython.notebook_list = notebook_list;
     IPython.cluster_list = cluster_list;
     IPython.session_list = session_list;
     IPython.kernel_list = kernel_list;
     IPython.login_widget = login_widget;
 
     events.trigger('app_initialized.DashboardApp');
     
     // bound the upload method to the on change of the file select list
     $("#alternate_upload").change(function (event){
         notebook_list.handleFilesUpload(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/templates/tree.html

@@ -1,115 +1,137 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-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="#terminals" data-toggle="tab">Terminals</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="col-sm-8 no-padding">
                 <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="col-sm-4 no-padding tree-buttons">
                 <span id="notebook_buttons" class="pull-right">
                     <button id="new_notebook" title="Create new notebook" class="btn btn-default btn-xs">New Notebook</button>
                     <button id="refresh_notebook_list" title="Refresh notebook list" class="btn btn-default btn-xs"><i class="fa fa-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="fa fa-home"></i></a></li>
                     {% for crumb in breadcrumbs[1:] %}
                         <li><a href="{{crumb[0]}}">{{crumb[1]}}</a></li>
                     {% endfor %}
                 </ul>
               </div>
           </div>
         </div>
     </div>
     
     <div id="running" class="tab-pane">
 
         <div id="running_toolbar" class="row">
             <div class="col-sm-8 no-padding">
                 <span id="running_list_info">Currently running IPython notebooks</span>
             </div>
             <div class="col-sm-4 no-padding tree-buttons">
                 <span id="running_buttons" class="pull-right">
                     <button id="refresh_running_list" title="Refresh running list" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i></button>
                 </span>
             </div>
         </div>
 
         <div id="running_list">
             <div id="running_list_header" class="row list_header"> 
                 <div> There are no notebooks running. </div>
             </div> 
         </div>
     </div>
     
+    <div id="terminals" class="tab-pane">
+
+        <div id="terminal_toolbar" class="row">
+            <div class="col-xs-8 no-padding">
+                <span id="terminal_list_info">Currently running terminals</span>
+            </div>
+            <div class="col-xs-4 no-padding tree-buttons">
+                <span id="terminal_buttons" class="pull-right">
+                    <button id="new_terminal" title="New terminal" class="btn btn-default btn-xs">New Terminal</button>
+                    <button id="refresh_terminal_list" title="Refresh terminal list" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i></button>
+                </span>
+            </div>
+        </div>
+
+        <div id="terminal_list">
+            <div id="terminal_list_header" class="row list_header">
+                <div> There are no terminals running. </div>
+            </div>
+        </div>
+    </div>
+    
     <div id="clusters" class="tab-pane">
 
         <div id="cluster_toolbar" class="row">
             <div class="col-xs-8 no-padding">
                 <span id="cluster_list_info">IPython parallel computing clusters</span>
             </div>
             <div class="col-xs-4 no-padding tree-buttons">
                 <span id="cluster_buttons" class="pull-right">
                     <button id="refresh_cluster_list" title="Refresh cluster list" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i></button>
                 </span>
             </div>
         </div>
 
         <div id="cluster_list">
             <div id="cluster_list_header" class="row list_header">
                 <div class="profile_col col-xs-4">profile</div>
                 <div class="status_col col-xs-3">status</div>
                 <div class="engines_col col-xs-3" title="Enter the number of engines to start or empty for default"># of engines</div>
                 <div class="action_col col-xs-2">action</div>
             </div>
         </div>
     </div>
 </div>
 
 </div>
 
 {% endblock %}
 
 {% block script %}
     {{super()}}
 
 <script src="{{ static_url("tree/js/main.js") }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}