Make console work with zun-wsproxy

Zun server is switching to websockify library for streaming.
This requires client to set sub-protocols manually.

New WebSocket connection manner is completely same as of
serial console for the instance.
So it's enough to use django template for the instance.

Change-Id: I7ebd0893ea4db0149fade4f32d6b70ee8b55147c

zun_ui/content/container/containers/views.py

@@ -15,7 +15,7 @@ from zun_ui.api import client
 
 
 class SerialConsoleView(generic.TemplateView):
-    template_name = 'console.html'
+    template_name = 'project/instances/serial_console.html'
 
     def get_context_data(self, **kwargs):
         context = super(SerialConsoleView, self).get_context_data(**kwargs)

zun_ui/static/dashboard/container/containers/details/serialConsole.js

@@ -1,106 +0,0 @@
-/*
-Copyright 2017, NEC Corporation.
-Copyright 2014, Rackspace, US, Inc.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/*global Terminal,Blob,FileReader,gettext,interpolate */
-(function() {
-  'use strict';
-
-  angular.module('serialConsoleApp', [])
-    .constant('states', [
-      gettext('Connecting'),
-      gettext('Open'),
-      gettext('Closing'),
-      gettext('Closed')
-    ])
-
-    /**
-     * @ngdoc directive
-     * @ngname serialConsole
-     *
-     * @description
-     * The serial-console element creates a terminal based on the widely-used term.js.
-     * The "connection" attribute is input to a WebSocket object, which connects
-     * to a server. In Horizon, this directive is used to connect to docker,
-     * opening a serial console to container set interactive mode.
-     * Each key the user types is transmitted to the instance, and each character
-     * the instance reponds with is displayed.
-     */
-    .directive('serialConsole', serialConsole);
-
-  serialConsole.$inject = ['states'];
-
-  function serialConsole(states) {
-    return {
-      scope: true,
-      template: '<div id="terminalNode"></div><br>{{statusMessage()}}',
-      restrict: 'E',
-      link: function postLink(scope, element, attrs) {
-
-        var connection = scope.$eval(attrs.connection);
-        var protocols = attrs.protocols ? scope.$eval(attrs.protocols) : null;
-        var term = new Terminal();
-        var socket = new WebSocket(connection, protocols);
-
-        socket.onerror = function() {
-          scope.$apply(scope.status);
-        };
-        socket.onopen = function() {
-          scope.$apply(scope.status);
-          // initialize by "hitting enter"
-          socket.send(String.fromCharCode(13));
-        };
-        socket.onclose = function() {
-          scope.$apply(scope.status);
-        };
-
-        // turn the angular jQlite element into a raw DOM element so we can
-        // attach the Terminal to it
-        var termElement = angular.element(element)[0];
-        term.open(termElement.ownerDocument.getElementById('terminalNode'));
-
-        term.on('data', function(data) {
-          socket.send(data);
-        });
-
-        socket.onmessage = function(e) {
-          if (e.data instanceof Blob) {
-            var f = new FileReader();
-            f.onload = function() {
-              term.write(f.result);
-            };
-            f.readAsText(e.data);
-          } else {
-            term.write(e.data);
-          }
-        };
-
-        scope.status = function() {
-          return states[socket.readyState];
-        };
-
-        scope.statusMessage = function() {
-          return interpolate(gettext('Status: %s'), [scope.status()]);
-        };
-
-        scope.$on('$destroy', function() {
-          socket.close();
-        });
-      }
-    };
-  }
-
-}());

zun_ui/templates/console.html

@@ -1,24 +0,0 @@
-{% load i18n %}
-<!DOCTYPE html>
-<html>
-<head>
-  <meta content='IE=edge' http-equiv='X-UA-Compatible' />
-  <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
-  <title>{{container_name}} ({{container_id}})</title>
-  <link rel="stylesheet" href="{{ STATIC_URL }}dashboard/scss/serial_console.css" type="text/css" media="screen">
-  <script src="{% url 'horizon:jsi18n' 'horizon' %}"></script>
-  <script src='{{ STATIC_URL }}horizon/lib/termjs/term.js'></script>
-  <script src="{{ STATIC_URL }}horizon/lib/jquery/jquery.js"></script>
-  <script src="{{ STATIC_URL }}horizon/lib/angular/angular.js"></script>
-  <script src="{{ STATIC_URL }}dashboard/container/containers/details/serialConsole.js"></script>
-</head>
-<body ng-app='serialConsoleApp'>
-
-    {% if error_message %}
-        {{ error_message }}
-    {% else %}
-        <serial-console connection='"{{console_url}}"'></serial-console>
-    {% endif %}
-
-</body>
-</html>