improve indicators and handling of dead kernels and broken websocket connections

I think it's still possible to get to a state with no kernel and insufficient indication.
Imperfect, but an improvement.

IPython/html/static/notebook/js/notificationarea.js

@@ -109,6 +109,12 @@ define([
             knw.set_message("Restarting kernel", 2000);
         });
 
+        this.events.on('status_dead.Kernel',function () {
+            that.save_widget.update_document_title();
+            knw.danger("Dead kernel");
+            $kernel_ind_icon.attr('class','kernel_dead_icon').attr('title','Kernel Dead');
+        });
+
         this.events.on('status_interrupting.Kernel',function () {
             knw.set_message("Interrupting kernel", 2000);
         });
@@ -118,6 +124,8 @@ define([
         $kernel_ind_icon.attr('class','kernel_busy_icon').attr('title','Kernel Busy');
 
         this.events.on('status_started.Kernel', function (evt, data) {
+            knw.info("Websockets Connected", 500);
+            that.events.trigger('status_busy.Kernel');
             data.kernel.kernel_info(function () {
                 that.events.trigger('status_idle.Kernel');
             });
@@ -153,8 +161,13 @@ define([
             var ws_url = data.ws_url;
             var early = data.early;
             var msg;
+
+            $kernel_ind_icon
+                .attr('class', 'kernel_disconnected_icon')
+                .attr('title', 'No Connection to Kernel');
+            
             if (!early) {
-                    knw.set_message('Reconnecting WebSockets', 1000);
+                    knw.warning('Reconnecting');
                     setTimeout(function () {
                         kernel.start_channels();
                     }, 5000);
@@ -173,7 +186,7 @@ define([
                     "OK": {},
                     "Reconnect": {
                         click: function () {
-                            knw.set_message('Reconnecting WebSockets', 1000);
+                            knw.warning('Reconnecting');
                             setTimeout(function () {
                                 kernel.start_channels();
                             }, 5000);

IPython/html/static/notebook/less/notificationarea.less

@@ -43,4 +43,12 @@
     .icon(@fa-var-circle);
 }
 
+.kernel_dead_icon:before {
+    .icon(@fa-var-bomb);
+}
+
+.kernel_disconnected_icon:before {
+    .icon(@fa-var-chain-broken);
+}
+
 

IPython/html/static/services/kernels/js/kernel.js

@@ -179,10 +179,18 @@ define([
                 that._websocket_closed(ws_host_url, false);
             }
         };
+        var ws_error = function(evt){
+            if (already_called_onclose){
+                return;
+            }
+            already_called_onclose = true;
+            that._websocket_closed(ws_host_url, false);
+        };
         var channels = [this.shell_channel, this.iopub_channel, this.stdin_channel];
         for (var i=0; i < channels.length; i++) {
             channels[i].onopen = $.proxy(this._ws_opened, this);
             channels[i].onclose = ws_closed_early;
+            channels[i].onerror = ws_error;
         }
         // switch from early-close to late-close message after 1s
         setTimeout(function() {
@@ -211,7 +219,7 @@ define([
         var channels = [this.shell_channel, this.iopub_channel, this.stdin_channel];
         for (var i=0; i < channels.length; i++) {
             // if any channel is not ready, don't trigger event.
-            if ( !channels[i].readyState ) return;
+            if ( channels[i].readyState == WebSocket.OPEN ) return;
         }
         // all events ready, trigger started event.
         this.events.trigger('status_started.Kernel', {kernel: this});
@@ -385,7 +393,7 @@ define([
     };
 
 
-    Kernel.prototype.kill = function (success, faiure) {
+    Kernel.prototype.kill = function (success, error) {
         if (this.running) {
             this.running = false;
             var settings = {

IPython/html/static/services/sessions/js/session.js

@@ -44,7 +44,13 @@ define([
                     success(data, status, xhr);
                 }
             },
-            error : error || utils.log_ajax_error,
+            error : function (xhr, status, err) {
+                that._handle_start_failure(xhr, status, err);
+                if (error !== undefined) {
+                    error(xhr, status, err);
+                }
+                utils.log_ajax_error(xhr, status, err);
+            }
         };
         var url = utils.url_join_encode(this.base_url, 'api/sessions');
         $.ajax(url, settings);
@@ -80,8 +86,10 @@ define([
             success : success,
             error : error || utils.log_ajax_error,
         };
-        this.kernel.running = false;
-        this.kernel.stop_channels();
+        if (this.kernel) {
+            this.kernel.running = false;
+            this.kernel.stop_channels();
+        }
         var url = utils.url_join_encode(this.base_url, 'api/sessions', this.id);
         $.ajax(url, settings);
     };
@@ -101,6 +109,11 @@ define([
         this.kernel = new kernel.Kernel(kernel_service_url, this.ws_url, this.notebook, this.kernel_name);
         this.kernel._kernel_started(data.kernel);
     };
+
+    Session.prototype._handle_start_failure = function (xhr, status, error) {
+        this.events.trigger('start_failed.Session', [this, xhr, status, error]);
+        this.events.trigger('status_dead.Kernel');
+    };
     
     /**
      * Prompt the user to restart the IPython kernel.

IPython/html/static/style/style.min.css

@@ -9998,6 +9998,38 @@ ul#help_menu li a i {
 .kernel_busy_icon:before.pull-right {
   margin-left: .3em;
 }
+.kernel_dead_icon:before {
+  display: inline-block;
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\f1e2";
+}
+.kernel_dead_icon:before.pull-left {
+  margin-right: .3em;
+}
+.kernel_dead_icon:before.pull-right {
+  margin-left: .3em;
+}
+.kernel_disconnected_icon:before {
+  display: inline-block;
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\f127";
+}
+.kernel_disconnected_icon:before.pull-left {
+  margin-right: .3em;
+}
+.kernel_disconnected_icon:before.pull-right {
+  margin-left: .3em;
+}
 .notification_widget {
   color: #777777;
   padding: 1px 12px;