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

From: Paulo Vital <pvital(a)linux.vnet.ibm.com&gt; Updated necessary SCSS and JS files to handle the usage of relative paths. Signed-off-by: Paulo Vital <pvital(a)linux.vnet.ibm.com&gt; --- 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..c0a1412 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']; + relative_path = data['relative_path']; wok.requestJSON({ url : "plugins/kimchi/vms/" + encodeURIComponent(vm) + "/serial", type : "POST", dataType : "json" }).done(function() { url = 'https://' + location.hostname + ':' + ssl_port; + url += relative_path; url += "/plugins/kimchi/serial/html/serial.html"; url += "?port=" + ssl_port; - url += "&path=websockify?token=" + wok.urlSafeB64Encode(vm+'-console').replace(/=*$/g, ""); + url += "&path=" + relative_path + "/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']; + relative_path = wok.config['relative_path']; wok.requestJSON({ url : "plugins/kimchi/vms/" + encodeURIComponent(vm) + "/connect", type : "POST", dataType : "json" }).done(function() { url = 'https://' + location.hostname + ':' + ssl_port; + url += relative_path; url += "/plugins/kimchi/novnc/vnc_auto.html"; url += "?port=" + ssl_port; + url += "&path=" + relative_path + "/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']; + relative_path = wok.config['relative_path']; 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 += relative_path; url += "/plugins/kimchi/spice_auto.html"; - url += "?port=" + ssl_port + "&listen=" + location.hostname; + /* + * When using relative_path we need pass the value with port + * argument to be used correctly by spice_auto.html scripts + */ + url += "?port=" + ssl_port + relative_path; + url += "&listen=" + location.hostname; /* * From python documentation base64.urlsafe_b64encode(s) * substitutes - instead of + and _ instead of / in the -- 2.7.4