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

@@ -11,6 +11,7 b' require(['
     'tree/js/clusterlist',
     'tree/js/sessionlist',
     'tree/js/kernellist',
+    'tree/js/terminallist',
     'auth/js/loginwidget',
     // only loaded, not used:
     'jqueryui',
@@ -25,7 +26,8 b' require(['
     notebooklist, 
     clusterlist, 
     sesssionlist, 
-    kernellist, 
+    kernellist,
+    terminallist,
     loginwidget){
 
     page = new page.Page();
@@ -44,6 +46,7 b' require(['
     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) {

IPython/html/templates/tree.html

@@ -24,6 +24,7 b' data-notebook-path="{{notebook_path}}"'
     <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>
 
@@ -80,6 +81,27 b' data-notebook-path="{{notebook_path}}"'
         </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">