[Kimchi-devel] [PATCH] [Kimchi 1/2] Issue #733: Fix UI to handle relative paths.

pvital at linux.vnet.ibm.com pvital at linux.vnet.ibm.com
Mon Oct 10 14:08:47 UTC 2016


From: Paulo Vital <pvital at linux.vnet.ibm.com>

Updated necessary SCSS and JS files to handle the usage of relative paths.

Signed-off-by: Paulo Vital <pvital at linux.vnet.ibm.com>
---
 ui/css/src/modules/_guests.scss    | 14 +++++++-------
 ui/css/src/modules/_iso-list.scss  | 14 +++++++-------
 ui/css/src/modules/_network.scss   |  2 +-
 ui/css/src/modules/_storage.scss   | 18 +++++++++---------
 ui/css/src/modules/_templates.scss | 28 ++++++++++++++--------------
 ui/js/src/kimchi.api.js            | 19 ++++++++++++++++---
 6 files changed, 54 insertions(+), 41 deletions(-)

diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss
index 4947123..8175ddf 100644
--- a/ui/css/src/modules/_guests.scss
+++ b/ui/css/src/modules/_guests.scss
@@ -682,25 +682,25 @@
         background-repeat: no-repeat;
         background-position: 100% 50%;
         &.icon-centos {
-            background-image: url('#{$wok-icon-path}/icon-centos.png');
+            background-image: url('../../#{$wok-icon-path}/icon-centos.png');
         }
         &.icon-debian {
-            background-image: url('#{$wok-icon-path}/icon-debian.png');
+            background-image: url('../../#{$wok-icon-path}/icon-debian.png');
         }
         &.icon-fedora {
-            background-image: url('#{$wok-icon-path}/icon-fedora.png');
+            background-image: url('../../#{$wok-icon-path}/icon-fedora.png');
         }
         &.icon-opensuse {
-            background-image: url('#{$wok-icon-path}/icon-opensuse.png');
+            background-image: url('../../#{$wok-icon-path}/icon-opensuse.png');
         }
         &.icon-ubuntu {
-            background-image: url('#{$wok-icon-path}/icon-ubuntu.png');
+            background-image: url('../../#{$wok-icon-path}/icon-ubuntu.png');
         }
         &.icon-gentoo {
-            background-image: url('#{$wok-icon-path}/icon-gentoo.png');
+            background-image: url('../../#{$wok-icon-path}/icon-gentoo.png');
         }
         &.icon-unknown {
-            background-image: url('#{$wok-icon-path}/icon-unknown.png');
+            background-image: url('../../#{$wok-icon-path}/icon-unknown.png');
         }
     }
 }
diff --git a/ui/css/src/modules/_iso-list.scss b/ui/css/src/modules/_iso-list.scss
index 22a5a9c..a2e50a9 100644
--- a/ui/css/src/modules/_iso-list.scss
+++ b/ui/css/src/modules/_iso-list.scss
@@ -122,25 +122,25 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         &.centos {
-            background-image: url('#{$wok-icon-path}/icon-centos.png');
+            background-image: url('../../#{$wok-icon-path}/icon-centos.png');
         }
         &.debian {
-            background-image: url('#{$wok-icon-path}/icon-debian.png');
+            background-image: url('../../#{$wok-icon-path}/icon-debian.png');
         }
         &.fedora {
-            background-image: url('#{$wok-icon-path}/icon-fedora.png');
+            background-image: url('../../#{$wok-icon-path}/icon-fedora.png');
         }
         &.opensuse {
-            background-image: url('#{$wok-icon-path}/icon-opensuse.png');
+            background-image: url('../../#{$wok-icon-path}/icon-opensuse.png');
         }
         &.ubuntu {
-            background-image: url('#{$wok-icon-path}/icon-ubuntu.png');
+            background-image: url('../../#{$wok-icon-path}/icon-ubuntu.png');
         }
         &.gentoo {
-            background-image: url('#{$wok-icon-path}/icon-gentoo.png');
+            background-image: url('../../#{$wok-icon-path}/icon-gentoo.png');
         }
         &.unknown {
-            background-image: url('#{$wok-icon-path}/icon-unknown.png');
+            background-image: url('../../#{$wok-icon-path}/icon-unknown.png');
         }
     }
 }
diff --git a/ui/css/src/modules/_network.scss b/ui/css/src/modules/_network.scss
index ab47c89..b030ee4 100644
--- a/ui/css/src/modules/_network.scss
+++ b/ui/css/src/modules/_network.scss
@@ -41,7 +41,7 @@
 #network-root-container {
 
     .wok-nw-loading-icon {
-        background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%;
+        background: transparent url('../../#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%;
         @include animation(spin 3s infinite linear);
         height: 16px;
         width: 16px;
diff --git a/ui/css/src/modules/_storage.scss b/ui/css/src/modules/_storage.scss
index cc2244e..2e15cbb 100644
--- a/ui/css/src/modules/_storage.scss
+++ b/ui/css/src/modules/_storage.scss
@@ -46,13 +46,13 @@
                 display: none;
             }
             .usage-icon.icon-high {
-                background-image: url('#{$wok-icon-path}/high_disabled.png') !important;
+                background-image: url('../../#{$wok-icon-path}/high_disabled.png') !important;
             }
             .usage-icon.icon-med {
-                background-image: url('#{$wok-icon-path}/med_disabled.png') !important;
+                background-image: url('../../#{$wok-icon-path}/med_disabled.png') !important;
             }
             .usage-icon.icon-low {
-                background-image: url('#{$wok-icon-path}/low_disabled.png') !important;
+                background-image: url('../../#{$wok-icon-path}/low_disabled.png') !important;
             }
         }
     }
@@ -118,13 +118,13 @@
         }
 
         .volume-icon.icon-high {
-            background-image: url('#{$wok-icon-path}/high.png');
+            background-image: url('../../#{$wok-icon-path}/high.png');
         }
         .volume-icon.icon-med {
-            background-image: url('#{$wok-icon-path}/med.png');
+            background-image: url('../../#{$wok-icon-path}/med.png');
         }
         .volume-icon.icon-low {
-            background-image: url('#{$wok-icon-path}/low.png');
+            background-image: url('../../#{$wok-icon-path}/low.png');
         }
 
         .volume-progress {
@@ -507,13 +507,13 @@
                 background-position: 0 50%;
                 background-color: transparent;
                 &.icon-high {
-                    background-image: url('#{$wok-icon-path}/high.png');
+                    background-image: url('../../#{$wok-icon-path}/high.png');
                 }
                 &.icon-med {
-                    background-image: url('#{$wok-icon-path}/med.png');
+                    background-image: url('../../#{$wok-icon-path}/med.png');
                 }
                 &.icon-low {
-                    background-image: url('#{$wok-icon-path}/low.png');
+                    background-image: url('../../#{$wok-icon-path}/low.png');
                 }
             }
         }
diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss
index 55b804a..be7e5bc 100644
--- a/ui/css/src/modules/_templates.scss
+++ b/ui/css/src/modules/_templates.scss
@@ -461,25 +461,25 @@ $kimchi-icon-path: '../images';
             background-repeat: no-repeat;
             background-position: 8px 50%;
             &.icon-centos {
-                background-image: url('#{$wok-icon-path}/icon-centos.png');
+                background-image: url('../../#{$wok-icon-path}/icon-centos.png');
             }
             &.icon-debian {
-                background-image: url('#{$wok-icon-path}/icon-debian.png');
+                background-image: url('../../#{$wok-icon-path}/icon-debian.png');
             }
             &.icon-fedora {
-                background-image: url('#{$wok-icon-path}/icon-fedora.png');
+                background-image: url('../../#{$wok-icon-path}/icon-fedora.png');
             }
             &.icon-opensuse {
-                background-image: url('#{$wok-icon-path}/icon-opensuse.png');
+                background-image: url('../../#{$wok-icon-path}/icon-opensuse.png');
             }
             &.icon-ubuntu {
-                background-image: url('#{$wok-icon-path}/icon-ubuntu.png');
+                background-image: url('../../#{$wok-icon-path}/icon-ubuntu.png');
             }
             &.icon-gentoo {
-                background-image: url('#{$wok-icon-path}/icon-gentoo.png');
+                background-image: url('../../#{$wok-icon-path}/icon-gentoo.png');
             }
             &.icon-unknown {
-                background-image: url('#{$wok-icon-path}/icon-unknown.png');
+                background-image: url('../../#{$wok-icon-path}/icon-unknown.png');
             }
         }
     }
@@ -576,25 +576,25 @@ $kimchi-icon-path: '../images';
             background-repeat: no-repeat;
             background-position: 100% 50%;
             &.icon-centos {
-                background-image: url('#{$wok-icon-path}/icon-centos.png');
+                background-image: url('../../#{$wok-icon-path}/icon-centos.png');
             }
             &.icon-debian {
-                background-image: url('#{$wok-icon-path}/icon-debian.png');
+                background-image: url('../../#{$wok-icon-path}/icon-debian.png');
             }
             &.icon-fedora {
-                background-image: url('#{$wok-icon-path}/icon-fedora.png');
+                background-image: url('../../#{$wok-icon-path}/icon-fedora.png');
             }
             &.icon-opensuse {
-                background-image: url('#{$wok-icon-path}/icon-opensuse.png');
+                background-image: url('../../#{$wok-icon-path}/icon-opensuse.png');
             }
             &.icon-ubuntu {
-                background-image: url('#{$wok-icon-path}/icon-ubuntu.png');
+                background-image: url('../../#{$wok-icon-path}/icon-ubuntu.png');
             }
             &.icon-gentoo {
-                background-image: url('#{$wok-icon-path}/icon-gentoo.png');
+                background-image: url('../../#{$wok-icon-path}/icon-gentoo.png');
             }
             &.icon-unknown {
-                background-image: url('#{$wok-icon-path}/icon-unknown.png');
+                background-image: url('../../#{$wok-icon-path}/icon-unknown.png');
             }
         }
     }
diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
index 950ca00..55fd55f 100644
--- a/ui/js/src/kimchi.api.js
+++ b/ui/js/src/kimchi.api.js
@@ -315,15 +315,18 @@ var kimchi = {
         }).done(function(data, textStatus, xhr) {
             proxy_port = data['websockets_port'];
             ssl_port = data['ssl_port'];
+            server_root = data['server_root'];
             wok.requestJSON({
                 url : "plugins/kimchi/vms/" + encodeURIComponent(vm) + "/serial",
                 type : "POST",
                 dataType : "json"
             }).done(function() {
                 url = 'https://' + location.hostname + ':' + ssl_port;
+                url += server_root;
                 url += "/plugins/kimchi/serial/html/serial.html";
                 url += "?port=" + ssl_port;
-                url += "&path=websockify?token=" + wok.urlSafeB64Encode(vm+'-console').replace(/=*$/g, "");
+                url += "&path=" + server_root + "/websockify";
+                url += "?token=" + wok.urlSafeB64Encode(vm+'-console').replace(/=*$/g, "");
                 url += '&encrypt=1';
                 window.open(url);
             }).error(function(data) {
@@ -337,14 +340,17 @@ var kimchi = {
     vncToVM : function(vm) {
         proxy_port = wok.config['websockets_port'];
         ssl_port = wok.config['ssl_port'];
+        server_root = wok.config['server_root'];
         wok.requestJSON({
             url : "plugins/kimchi/vms/" + encodeURIComponent(vm) + "/connect",
             type : "POST",
             dataType : "json"
         }).done(function() {
             url = 'https://' + location.hostname + ':' + ssl_port;
+            url += server_root;
             url += "/plugins/kimchi/novnc/vnc_auto.html";
             url += "?port=" + ssl_port;
+            url += "&path=" + server_root + "/websockify";
             /*
              * From python documentation base64.urlsafe_b64encode(s)
              * substitutes - instead of + and _ instead of / in the
@@ -352,7 +358,7 @@ var kimchi = {
              * contain = which is not safe in a URL query component.
              * So remove it when needed as base64 can work well without it.
              * */
-            url += "&path=websockify?token=" + wok.urlSafeB64Encode(vm).replace(/=*$/g, "");
+            url += "?token=" + wok.urlSafeB64Encode(vm).replace(/=*$/g, "");
             url += '&encrypt=1';
             window.open(url);
         });
@@ -361,14 +367,21 @@ var kimchi = {
     spiceToVM : function(vm) {
         proxy_port = wok.config['websockets_port'];
         ssl_port = wok.config['ssl_port'];
+        server_root = wok.config['server_root'];
         wok.requestJSON({
             url : "plugins/kimchi/vms/" + encodeURIComponent(vm) + "/connect",
             type : "POST",
             dataType : "json"
         }).done(function(data, textStatus, xhr) {
             url = 'https://' + location.hostname + ':' + ssl_port;
+            url += server_root;
             url += "/plugins/kimchi/spice_auto.html";
-            url += "?port=" + ssl_port + "&listen=" + location.hostname;
+            /*
+             * When using server_root we need pass the value with port
+             * argument to be used correctly by spice_auto.html scripts
+             */
+            url += "?port=" + ssl_port + server_root;
+            url += "&listen=" + location.hostname;
             /*
              * From python documentation base64.urlsafe_b64encode(s)
              * substitutes - instead of + and _ instead of / in the
-- 
2.7.4




More information about the Kimchi-devel mailing list