[Kimchi-devel] [PATCH v2] [Kimchi 6/8] Implement the Kimchi front-end for the web serial console

[Aline Manera]

On 02/09/2016 04:23 PM, Jose Ricardo Ziviani wrote:
>   - Kimchi needs to display an interface which clients can navigate to
>     the web serial console, this commits add a button and the Guest
>     tab to handles it plus a new api entry.
>
> Signed-off-by: Jose Ricardo Ziviani <joserz at linux.vnet.ibm.com>
> ---
>   config.py.in                   |  6 +++++-
>   ui/js/src/kimchi.api.js        | 27 +++++++++++++++++++++++++++
>   ui/js/src/kimchi.guest_main.js | 14 +++++++++++++-
>   ui/pages/guest.html.tmpl       |  3 ++-
>   4 files changed, 47 insertions(+), 3 deletions(-)
>
> diff --git a/config.py.in b/config.py.in
> index 44a49f2..0753a00 100644
> --- a/config.py.in
> +++ b/config.py.in
> @@ -117,6 +117,8 @@ class KimchiPaths(PluginPaths):
>           else:
>               self.spice_css_file = os.path.join(self.spice_dir, 'css/spice.css')
>
> +        self.serial_dir = os.path.join(self.ui_dir, 'serial')
> +
>
>   kimchiPaths = KimchiPaths()
>
> @@ -133,7 +135,9 @@ class KimchiConfig(PluginConfig):
>               '/spice_auto.html': {'type': 'file',
>                                    'path': kimchiPaths.spice_file},
>               '/spice-html5/spice.css': {'type': 'file',
> -                                       'path': kimchiPaths.spice_css_file}}
> +                                       'path': kimchiPaths.spice_css_file},
> +            '/serial': {'type': 'dir',
> +                        'path': kimchiPaths.serial_dir}}
>
>           custom_config = {}
>           for uri, data in static_config.iteritems():
> diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
> index bbe1bf8..0d1eb61 100644
> --- a/ui/js/src/kimchi.api.js
> +++ b/ui/js/src/kimchi.api.js
> @@ -307,6 +307,33 @@ var kimchi = {
>           });
>       },
>
> +    serialToVM : function(vm) {
> +        wok.requestJSON({
> +            url : 'config/',
> +            type : 'GET',
> +            dataType : 'json'
> +        }).done(function(data, textStatus, xhr) {
> +            proxy_port = data['websockets_port'];
> +            ssl_port = data['ssl_port'];
> +            wok.requestJSON({
> +                url : "plugins/kimchi/vms/" + encodeURIComponent(vm) + "/serial",
> +                type : "POST",
> +                dataType : "json"
> +            }).done(function() {
> +                url = 'https://' + location.hostname + ':' + ssl_port;
> +                url += "/plugins/kimchi/serial/serial.html";
> +                url += "?port=" + ssl_port;
> +                url += "&path=websockify?token=" + wok.urlSafeB64Encode(vm+'-console').replace(/=*$/g, "");
> +                url += '&encrypt=1';
> +                window.open(url);
> +            }).error(function(data) {
> +                wok.message.error(data.responseJSON.reason);
> +            });
> +        }).error(function(data) {
> +            wok.message.error(data.responseJSON.reason);
> +        });
> +    },
> +
>       vncToVM : function(vm) {
>           proxy_port = wok.config['websockets_port'];
>           ssl_port = wok.config['ssl_port'];
> diff --git a/ui/js/src/kimchi.guest_main.js b/ui/js/src/kimchi.guest_main.js
> index 8282e7c..bfd62a8 100644
> --- a/ui/js/src/kimchi.guest_main.js
> +++ b/ui/js/src/kimchi.guest_main.js
> @@ -241,6 +241,12 @@ kimchi.vmmigrate = function(event) {
>       wok.window.open('plugins/kimchi/guest-migration.html');
>   };
>
> +kimchi.openVmSerialConsole = function(event) {
> +    var button = event.target;
> +    var vm = $(button).closest('li[name=guest]');
> +    kimchi.serialToVM($(vm).attr('id'));
> +};
> +
>   kimchi.openVmConsole = function(event) {
>       var button = event.target;
>       var vm = $(button).closest('li[name=guest]');
> @@ -637,6 +643,12 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
>           guestActions.find(".resume-hidden").hide();
>       }
>
> +    var serialConsoleLinkActions = guestActions.find("[name=vm-serial-console]");
> +    serialConsoleLinkActions.on("click", function(event) {
> +        event.preventDefault();
> +        kimchi.openVmSerialConsole(event);
> +    });
> +
>       var consoleActions = guestActions.find("[name=vm-console]");
>       var consoleLinkActions = result.find(".vnc-link");
>
> @@ -768,4 +780,4 @@ kimchi.editTemplate = function(guestTemplate, oldPopStat) {
>           return guestTemplate.replace("vm-action", "vm-action open");
>       }
>       return guestTemplate;
> -};
> \ No newline at end of file
> +};
> diff --git a/ui/pages/guest.html.tmpl b/ui/pages/guest.html.tmpl
> index 1b6ef0f..52381f3 100644
> --- a/ui/pages/guest.html.tmpl
> +++ b/ui/pages/guest.html.tmpl
> @@ -45,6 +45,7 @@
>                           </button>
>                           <ul class="dropdown-menu" role="menu">


>                               <li role="presentation"><a nwAct="connect-vnc" class='shutoff-disabled' name="vm-console" href="#"><i class="fa fa-list-alt"></i>$_("Connect VNC")</a></li>

I know it is not related to your patch, but it is better to use "Connect 
Console" or "View Console" to cover VNC and Spice cases

See more below.

> +                            <li role="presentation"><a nwAct="connect-serial-console" class='shutoff-hidden' name="vm-serial-console" href="#"><i class="fa fa-list-alt"></i>$_("Connect Serial")</a></li>
>                           <!--     <li role="presentation"><a nwAct="view-vnc" class='shutoff-disabled' name="vm-view-vnc" href="#"><i class="fa fa-eye"></i>$_("View VNC Console")</a></li> -->
>                               <li role="presentation"><a nwAct="edit" name="vm-edit" href="#"><i class="fa fa-pencil"></i>$_("Edit")</a></li>
>                               <li role="presentation"><a nwAct="clone" class='running-disabled' name="vm-clone" href="#"><i class="fa fa-copy"></i>$_("Clone")</a></li>
> @@ -61,7 +62,7 @@
>                   </span>
>               </span><!--
>               --><span class='column-type distro-icon' style='padding-left: 40px !important'></span><!--

> -        --><span class='column-vnc'><i class="fa fa-spinner fa-spin"></i><a nwAct="connect-vnc" name="vm-console" class="vnc-link" href="#">$_("View Console")</a></span><!--
> +            --><span class='column-vnc'><i class="fa fa-spinner fa-spin"></i><a nwAct="connect-vnc" name="vm-console" class="vnc-link" href="#">$_("Open VNC")</a></span><!--

Please, keep using "View Console" so we can cover VNC and Spice cases.

>               --><span class='column-processors'>
>                   <div class="percentage-label processors-percentage">
>                   </div>