[Kimchi-devel] [PATCH] [Kimchi 1/2] Expose HTML tabs files in a specific /tabs URI

Wok provides a specific API to load tabs content (/tabs URI). It is designed to identify when a tab is requested to properly setup the 'lastPage' cookie. That way, the last tab visited by user can be remembered. This patch depends on Wok patch: - Bug fix: Make /tabs URI generic to be used by any plugin To test it, you can login into Wok, access a different tab than the default, logout, login again and you will be redirected to your last selection. Signed-off-by: Aline Manera <alinefm(a)linux.vnet.ibm.com&gt; --- configure.ac | 1 + ui/config/tab-ext.xml | 8 +- ui/pages/Makefile.am | 2 +- ui/pages/guests.html.tmpl | 104 -------------------- ui/pages/network.html.tmpl | 105 -------------------- ui/pages/storage.html.tmpl | 198 -------------------------------------- ui/pages/tabs/Makefile.am | 20 ++++ ui/pages/tabs/guests.html.tmpl | 104 ++++++++++++++++++++ ui/pages/tabs/network.html.tmpl | 105 ++++++++++++++++++++ ui/pages/tabs/storage.html.tmpl | 198 ++++++++++++++++++++++++++++++++++++++ ui/pages/tabs/templates.html.tmpl | 102 ++++++++++++++++++++ ui/pages/templates.html.tmpl | 102 -------------------- 12 files changed, 535 insertions(+), 514 deletions(-) delete mode 100644 ui/pages/guests.html.tmpl delete mode 100644 ui/pages/network.html.tmpl delete mode 100644 ui/pages/storage.html.tmpl create mode 100644 ui/pages/tabs/Makefile.am create mode 100644 ui/pages/tabs/guests.html.tmpl create mode 100644 ui/pages/tabs/network.html.tmpl create mode 100644 ui/pages/tabs/storage.html.tmpl create mode 100644 ui/pages/tabs/templates.html.tmpl delete mode 100644 ui/pages/templates.html.tmpl diff --git a/configure.ac b/configure.ac index 6b334c6..0ff0ce8 100644 --- a/configure.ac +++ b/configure.ac @@ -103,6 +103,7 @@ AC_CONFIG_FILES([ ui/spice-html5/thirdparty/Makefile ui/pages/Makefile ui/pages/help/Makefile + ui/pages/tabs/Makefile ui/pages/help/en_US/Makefile ui/pages/help/de_DE/Makefile ui/pages/help/es_ES/Makefile diff --git a/ui/config/tab-ext.xml b/ui/config/tab-ext.xml index 5a3bd7a..8fba1c6 100644 --- a/ui/config/tab-ext.xml +++ b/ui/config/tab-ext.xml @@ -5,24 +5,24 @@ <access role="admin" mode="admin"/> <access role="user" mode="byInstance"/> <title>Guests</title> - <path>plugins/kimchi/guests.html</path> + <path>plugins/kimchi/tabs/guests.html</path> </tab> <tab> <access role="admin" mode="admin"/> <access role="user" mode="none"/> <title>Templates</title> - <path>plugins/kimchi/templates.html</path> + <path>plugins/kimchi/tabs/templates.html</path> </tab> <tab> <access role="admin" mode="admin"/> <access role="user" mode="read-only"/> <title>Storage</title> - <path>plugins/kimchi/storage.html</path> + <path>plugins/kimchi/tabs/storage.html</path> </tab> <tab> <access role="admin" mode="admin"/> <access role="user" mode="read-only"/> <title>Network</title> - <path>plugins/kimchi/network.html</path> + <path>plugins/kimchi/tabs/network.html</path> </tab> </tabs-ext> diff --git a/ui/pages/Makefile.am b/ui/pages/Makefile.am index 56288e3..076b814 100644 --- a/ui/pages/Makefile.am +++ b/ui/pages/Makefile.am @@ -15,7 +15,7 @@ # See the License for the specific language governing permissions and # limitations under the License. -SUBDIRS = help +SUBDIRS = help tabs htmldir = $(datadir)/wok/plugins/kimchi/ui/pages diff --git a/ui/pages/guests.html.tmpl b/ui/pages/guests.html.tmpl deleted file mode 100644 index 66a6e00..0000000 --- a/ui/pages/guests.html.tmpl +++ /dev/null @@ -1,104 +0,0 @@ -#* - * Project Kimchi - * - * Copyright IBM, Corp. 2013-2014 - * - * 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. - *# - -#unicode UTF-8 -#import gettext -#from Cheetah.Template import Template -#from wok.cachebust import href -#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) -#silent _ = t.gettext -#silent _t = t.gettext - -#silent ht = Template - -<!DOCTYPE html> -<html> -<head> -<link rel="stylesheet" href="plugins/kimchi/css/theme-default.min.css"> -<script src="plugins/kimchi/js/kimchi.min.js"></script> -</head> -<body> -<div id="guests-root-container"> - <nav class="navbar navbar-default toolbar"> - <div class="container"> - <!-- Brand and toggle get grouped for better mobile display --> - <div class="navbar-header"> - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - </div> - <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse" id="toolbar"> - <ul class="nav navbar-nav navbar-right tools" display="none"> - <li><a id="vm-add" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Guest</span></a></li> - </ul> - </div> - </div> - </nav> - <div id="guest-content-container"> - <div class="container"> - <div class="row grid-control hidden"> - <div class="pull-right"> - <label for="guests-filter" class="sr-only">$_("Filter"):</label> - <input type="text" class="filter form-control" placeholder="$_("Filter")"> - </div> - </div> - <div id="alert-container"></div> - <div id="guestListField" style="display: none"> - <ul class="wok-guest-list"> - <li class="wok-guest-list-header"> - <span class="column-state"><span class="sr-only">$_("State")</span></span><!-- - --><span class="column-name"><span>$_("Guest Name ID")</span></span><!-- - --><span class="column-type"><span>$_("OS Type")</span></span><!-- - --><span class="column-vnc"><span>$_("VNC")</span></span><!-- - --><span class="column-processors"><span>$_("Processors Used")</span></span><!-- - --><span class="column-memory"><span>$_("Memory Utilization")</span></span><!-- - --><span class="column-storage"><span>$_("Storage I/O")</span></span><!-- - --><span class="column-network"><span>$_("Network I/O")</span></span><!-- - --><span class="column-action" style="display:none"> - <span class="sr-only">Actions</span><!-- - --></span> - </li> - <li class="wok-guest-list-body"> - <ul id="guestList" class="wok-guest-list empty-when-logged-off" style="-webkit-padding-start: 0px;"> - </li> - </ul> - </div> - <div id="noGuests" class="list-no-result" style="display: none;"> - $_("No guests found.") - </div> - </div> - </div> -<div id="modalWindow" class="modal fade host-modal guests-modal" tabindex="-1" role="dialog" aria-labelledby="guestsModalLabel" aria-hidden="true"> -</div> -<div id="extendCreateTemplate" class="modal fade host-modal templates-modal" tabindex="-1" role="dialog" aria-labelledby="templateModalLabel" aria-hidden="true"> -</div> -<div id="extendCreateStorage" class="modal fade host-modal storage-modal" tabindex="-1" role="dialog" aria-labelledby="storageModalLabel" aria-hidden="true"> -</div> - <script id="guest-tmpl" type="kimchi/template"> - $ht(file=$data.ui_dir + "/pages/guest.html.tmpl", searchList=[self, {'lang':$lang}]) - </script> - <script type="text/javascript"> - kimchi.guest_main(); - </script> -</div> -</body> -</html> diff --git a/ui/pages/network.html.tmpl b/ui/pages/network.html.tmpl deleted file mode 100644 index 722fc11..0000000 --- a/ui/pages/network.html.tmpl +++ /dev/null @@ -1,105 +0,0 @@ -#* - * Project Kimchi - * - * Copyright IBM, Corp. 2013-2015 - * - * 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. - *# - -#unicode UTF-8 -#import gettext -#from wok.cachebust import href -#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) -#silent _ = t.gettext -#silent _t = t.gettext -<!DOCTYPE html> -<html> -<head> -<link rel="stylesheet" href="plugins/kimchi/css/theme-default.min.css"> -<script src="plugins/kimchi/js/kimchi.min.js"></script> -</head> -<body> -<div id="network-root-container"> - <nav class="navbar navbar-default toolbar"> - <div class="container"> - <!-- Brand and toggle get grouped for better mobile display --> - <div class="navbar-header"> - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - </div> - <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse" id="toolbar"> - <ul class="nav navbar-nav navbar-right tools" display="none"> - <li><a id="networkAdd" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Network</span></a></li> - </ul> - </div> - </div> - </nav> - <div id="network-content-container"> - <div class="container"> - <div class="row grid-control"> - <div class="pull-right"> - <label for="network-filter" class="sr-only">$_("Filter"):</label> - <input type="text" class="filter form-control" placeholder="$_("Filter")"> - </div> - </div> - <div id="alert-container"></div> - <div id="networkGrid"> - <div> - <span class="column-state"><span class="sr-only">$_("State")</span></span><!-- - --><span class="column-name">$_("Network Name")</span><!-- - --><span class="column-type">$_("Network Type")</span><!-- - --><span class="column-interface">$_("Interface")</span><!-- - --><span class="column-space">$_("Address Space")</span><!-- - --><span class="column-action" style="display:none"> - <span class="sr-only">$_("Actions")</span><!-- - --></span> - </div> - <div id="networkBody" class="empty-when-logged-off"></div> - </div> - - </div> - </div> -</div> -<div id="modalWindow" class="modal fade network-modal" tabindex="-1" role="dialog" aria-labelledby="networkModalLabel" aria-hidden="true"> </div> -<script id="networkItem" type="text/html"> - <div id='{name}' class='wok-nw-grid-body remove-when-logged-off '> - <span class='column-state' val="{state}"><span class='network-state {state}'><i class="fa fa-power-off"></i><span class="wok-nw-loading-icon"></span></span></span><!-- - --><span class='column-name' title="{name}" val="{name}">{name}</span><!-- - --><span class='column-type' val="{type}">{type}</span><!-- - --><span class='column-interface' val="{interface}">{interface}</span><!-- - --><span class='column-space' val="{addrSpace}">{addrSpace}</span><!-- - --><span class='column-action' style="display:none"> - <span class="pull-right"> - <div class="dropdown menu-flat"> - <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu"> - <li role="presentation" nwAct="start" class='{startClass}'><a><i class="fa fa-undo"></i>$_("Start")</a></li> - <li role="presentation" nwAct="stop" class='{stopClass}'><a {stopDisabled}><i class="fa fa-ban"></i>$_("Stop")</a></li> - <li role="presentation" nwAct="delete" class='critical {deleteClass}'><a {deleteDisabled}><i class="fa fa-minus-circle"></i>$_("Delete")</a></li> - </ul> - </div> - </span> - </span> - </div> -</script> -<script> - kimchi.initNetwork(); -</script> -</body> -</html> diff --git a/ui/pages/storage.html.tmpl b/ui/pages/storage.html.tmpl deleted file mode 100644 index 9f2a978..0000000 --- a/ui/pages/storage.html.tmpl +++ /dev/null @@ -1,198 +0,0 @@ -#* - * Project Kimchi - * - * Copyright IBM, Corp. 2013-2015 - * - * 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. - *# - -#unicode UTF-8 -#import gettext -#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) -#silent _ = t.gettext -#silent _t = t.gettext -<!DOCTYPE html> -<html> -<head> -<link rel="stylesheet" href="plugins/kimchi/css/theme-default.min.css"> -<script src="plugins/kimchi/js/kimchi.min.js"></script> -</head> -<body> -<div id="storage-root-container"> - <nav class="navbar navbar-default toolbar"> - <div class="container"> - <!-- Brand and toggle get grouped for better mobile display --> - <div class="navbar-header"> - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - </div> - <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse" id="toolbar"> - <ul class="nav navbar-nav navbar-right tools" display="none"> - <li><a id="storage-pool-add" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Storage</span></a></li> - </ul> - </div> - </div> - </nav> - <div class='storage'> - <div class="container"> - <div class="row grid-control"> - <div class="pull-right"> - <label for="storage-filter" class="sr-only">$_("Filter"):</label> - <input type="text" class="filter form-control" placeholder="$_("Filter")"> - </div> - </div> - <div id="alert-container"></div> - <div id='storageGrid'> - <div> - <span class="column-state"><span class="sr-only">$_("State")</span></span><!-- - --><span class="column-name">$_("Name")</span><!-- - --><span class="column-type">$_("Type")</span><!-- - --><span class="column-location">$_("Location")</span><!-- - --><span class="column-usage">$_("%Used")</span><!-- - --><span class="column-allocated">$_("Allocated")</span><!-- - --><span class="column-capacity">$_("Capacity")</span><!-- - --><span class="column-disks">$_("Disks")</span><!-- - --><span class="column-action" display="none"><span class="sr-only">$_("Actions")</span></span> - </div> - <div id="storagepoolsList" class="list-storage empty-when-logged-off"></div> - </div> - <div id="logicalPoolExtend" class="modal fade logicalpool-modal" tabindex="-2" role="dialog" aria-labelledby="logicalPoolExtendLabel" aria-hidden="true"> - <div class="modal-dialog modal-sm"> - <div class="modal-content"> - <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> - <h4 class="modal-title" id="logicalPoolExtendLabel">$_("Device path")</h4> - </div> - <div class="modal-body"> - <p id="loading-info" class="hidden"><span class="wok-loading-icon"></span><span>$_("Looking for available partitions ...")</span></p> - <div class="host-partition"> - </div> - </div> - <div class="modal-footer"> - <button type="button" id="savePartitions" class="btn btn-default" disabled="disabled">$_("Save")</button> - <button type="button" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button> - </div> - </div> - </div> - </div> - </div> - </div> -</div> -<script id="storageTmpl" type="html/text"> - <div id="{name}" class="storage-li in" data-name="{name}" data-stat="{state}"> - <span class='column-state' val="{state}"> - <span class='storage-state {state}'> - <i class="fa fa-power-off"></i> - </span> - </span><!-- - --><span class='column-name' title="{name}" val="{name}">{name}</span><!-- - --><span class='column-type' val="{type}">{type}</span><!-- - --><span class='column-location' val="{path}">{path}</span><!-- - --><span class='column-usage {state}' val="{usage}" ><span class='usage-icon {icon}'>{usage}</span>%</span><!-- - --><span class='column-allocated' val="{allocated}">{allocated}</span><!-- - --><span class='column-capacity' val="{capacity}">{capacity}</span><!-- - --><span class="column-disks {state}"> - <div class="handle arrow-down"></div> - </span><!-- - --><span class="column-action storage-button" style="display:none"> - <span class="pull-right"> - <div class="dropdown menu-flat storage-action" data-state="{state}" data-type="{type}" data-name="{name}"> - <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span></button> - <ul class="dropdown-menu actionsheet"> - <li role="presentation"> - <a href="#" class="pool-deactivate" data-stat="{state}" data-name="{name}" data-persistent="{persistent}" href="#"><i class="fa fa-minus-circle"></i>$_("Deactivate")</a> - </li> - <li role="presentation"> - <a href="#" class="pool-activate" data-stat="{state}" data-name="{name}"><i class="fa fa-power-off"></i>$_("Activate")</a> - </li> - <li role="presentation"> - <a href="#" class="pool-add-volume" data-stat="{state}" data-name="{name}" data-type="{type}"><i class="fa fa-plus-circle"></i>$_("Add Volume")</a> - </li> - <li role="presentation" class="{enableExt}"> - <a href="#" class="pool-extend" data-stat="{state}" data-name="{name}" data-toggle="modal" data-target="#logicalPoolExtend"><i class="fa fa-external-link-square"></i>$_("Extend")</a> - </li> - <li role="presentation" class="critical"> - <a href="#" class="pool-delete" data-stat="{state}" data-name="{name}"><i class="fa fa-ban"></i>$_("Undefine")</a> - </li> - </ul> - </div> - </span> - </span> - <div class="volumes"> - <div id="volume{name}" class="volumeslist" data-name="{name}" ></div> - <div class="clear"></div> - </div> - </div> -</script> -<script id="volumeTmpl" type="html/text"> - <div class="volume-box" data-volume-name="{name}"> - <div class="volume-title"> - <div class="volume-name" title="{name}">{name}</div> - <div class="volume-utilization"> - <span class="volume-icon {capacityIcon}"></span> - <span class="volume-usage">{capacityLevel}%</span> - </div> - <div class="volume-progress hidden"> - <div class="progress-bar-outer"> - <div class="progress-bar-inner"></div> - </div> - <div class="progress-label"> - <span class="progress-status"></span> - <span class="progress-transferred"></span> - </div> - </div> - </div> - <div class="volume-setting"> - </div> - <ul class="volume-data"> - <li> - <span class="value" title="{format}">{format}</span> - <span class="key">$_("Format")</span> - </li> - <li> - <span class="value" title="{type}">{type}</span> - <span class="key">$_("Type")</span> - </li> - <li> - <span class="value" title="{allocation}">{allocation}</span> - <span class="key">$_("Allocation")</span> - </li> - <li> - <span class="value" title="{capacity}">{capacity}</span> - <span class="key">$_("Capacity")</span> - </li> - </ul> - </div> -</script> -<script id="logicalPoolExtendTmpl" type="html/text"> - <div> - <input type="checkbox" class="wok-checkbox" id="{name}" value="{path}" name="devices"> - <label for="{name}"> - <div> - <span class="device-name">{name}</span> - <span class="device-path">{path}</span> - </div> - </label> - </div> -</script> -<script> - kimchi.storage_main(); -</script> -<div id="modalWindow" class="modal fade storage-modal" tabindex="-1" role="dialog" aria-labelledby="storageModalLabel" aria-hidden="true"> </div> -</body> -</html> \ No newline at end of file diff --git a/ui/pages/tabs/Makefile.am b/ui/pages/tabs/Makefile.am new file mode 100644 index 0000000..0e08208 --- /dev/null +++ b/ui/pages/tabs/Makefile.am @@ -0,0 +1,20 @@ +# +# Kimchi +# +# Copyright IBM, Corp. 2013-2015 +# +# 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. + +tabshtmldir = $(datadir)/wok/plugins/kimchi/ui/pages/tabs + +dist_tabshtml_DATA = $(wildcard *.html.tmpl) $(NULL) diff --git a/ui/pages/tabs/guests.html.tmpl b/ui/pages/tabs/guests.html.tmpl new file mode 100644 index 0000000..66a6e00 --- /dev/null +++ b/ui/pages/tabs/guests.html.tmpl @@ -0,0 +1,104 @@ +#* + * Project Kimchi + * + * Copyright IBM, Corp. 2013-2014 + * + * 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. + *# + +#unicode UTF-8 +#import gettext +#from Cheetah.Template import Template +#from wok.cachebust import href +#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) +#silent _ = t.gettext +#silent _t = t.gettext + +#silent ht = Template + +<!DOCTYPE html> +<html> +<head> +<link rel="stylesheet" href="plugins/kimchi/css/theme-default.min.css"> +<script src="plugins/kimchi/js/kimchi.min.js"></script> +</head> +<body> +<div id="guests-root-container"> + <nav class="navbar navbar-default toolbar"> + <div class="container"> + <!-- Brand and toggle get grouped for better mobile display --> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + </div> + <!-- Collect the nav links, forms, and other content for toggling --> + <div class="collapse navbar-collapse" id="toolbar"> + <ul class="nav navbar-nav navbar-right tools" display="none"> + <li><a id="vm-add" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Guest</span></a></li> + </ul> + </div> + </div> + </nav> + <div id="guest-content-container"> + <div class="container"> + <div class="row grid-control hidden"> + <div class="pull-right"> + <label for="guests-filter" class="sr-only">$_("Filter"):</label> + <input type="text" class="filter form-control" placeholder="$_("Filter")"> + </div> + </div> + <div id="alert-container"></div> + <div id="guestListField" style="display: none"> + <ul class="wok-guest-list"> + <li class="wok-guest-list-header"> + <span class="column-state"><span class="sr-only">$_("State")</span></span><!-- + --><span class="column-name"><span>$_("Guest Name ID")</span></span><!-- + --><span class="column-type"><span>$_("OS Type")</span></span><!-- + --><span class="column-vnc"><span>$_("VNC")</span></span><!-- + --><span class="column-processors"><span>$_("Processors Used")</span></span><!-- + --><span class="column-memory"><span>$_("Memory Utilization")</span></span><!-- + --><span class="column-storage"><span>$_("Storage I/O")</span></span><!-- + --><span class="column-network"><span>$_("Network I/O")</span></span><!-- + --><span class="column-action" style="display:none"> + <span class="sr-only">Actions</span><!-- + --></span> + </li> + <li class="wok-guest-list-body"> + <ul id="guestList" class="wok-guest-list empty-when-logged-off" style="-webkit-padding-start: 0px;"> + </li> + </ul> + </div> + <div id="noGuests" class="list-no-result" style="display: none;"> + $_("No guests found.") + </div> + </div> + </div> +<div id="modalWindow" class="modal fade host-modal guests-modal" tabindex="-1" role="dialog" aria-labelledby="guestsModalLabel" aria-hidden="true"> +</div> +<div id="extendCreateTemplate" class="modal fade host-modal templates-modal" tabindex="-1" role="dialog" aria-labelledby="templateModalLabel" aria-hidden="true"> +</div> +<div id="extendCreateStorage" class="modal fade host-modal storage-modal" tabindex="-1" role="dialog" aria-labelledby="storageModalLabel" aria-hidden="true"> +</div> + <script id="guest-tmpl" type="kimchi/template"> + $ht(file=$data.ui_dir + "/pages/guest.html.tmpl", searchList=[self, {'lang':$lang}]) + </script> + <script type="text/javascript"> + kimchi.guest_main(); + </script> +</div> +</body> +</html> diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl new file mode 100644 index 0000000..722fc11 --- /dev/null +++ b/ui/pages/tabs/network.html.tmpl @@ -0,0 +1,105 @@ +#* + * Project Kimchi + * + * Copyright IBM, Corp. 2013-2015 + * + * 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. + *# + +#unicode UTF-8 +#import gettext +#from wok.cachebust import href +#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) +#silent _ = t.gettext +#silent _t = t.gettext +<!DOCTYPE html> +<html> +<head> +<link rel="stylesheet" href="plugins/kimchi/css/theme-default.min.css"> +<script src="plugins/kimchi/js/kimchi.min.js"></script> +</head> +<body> +<div id="network-root-container"> + <nav class="navbar navbar-default toolbar"> + <div class="container"> + <!-- Brand and toggle get grouped for better mobile display --> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + </div> + <!-- Collect the nav links, forms, and other content for toggling --> + <div class="collapse navbar-collapse" id="toolbar"> + <ul class="nav navbar-nav navbar-right tools" display="none"> + <li><a id="networkAdd" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Network</span></a></li> + </ul> + </div> + </div> + </nav> + <div id="network-content-container"> + <div class="container"> + <div class="row grid-control"> + <div class="pull-right"> + <label for="network-filter" class="sr-only">$_("Filter"):</label> + <input type="text" class="filter form-control" placeholder="$_("Filter")"> + </div> + </div> + <div id="alert-container"></div> + <div id="networkGrid"> + <div> + <span class="column-state"><span class="sr-only">$_("State")</span></span><!-- + --><span class="column-name">$_("Network Name")</span><!-- + --><span class="column-type">$_("Network Type")</span><!-- + --><span class="column-interface">$_("Interface")</span><!-- + --><span class="column-space">$_("Address Space")</span><!-- + --><span class="column-action" style="display:none"> + <span class="sr-only">$_("Actions")</span><!-- + --></span> + </div> + <div id="networkBody" class="empty-when-logged-off"></div> + </div> + + </div> + </div> +</div> +<div id="modalWindow" class="modal fade network-modal" tabindex="-1" role="dialog" aria-labelledby="networkModalLabel" aria-hidden="true"> </div> +<script id="networkItem" type="text/html"> + <div id='{name}' class='wok-nw-grid-body remove-when-logged-off '> + <span class='column-state' val="{state}"><span class='network-state {state}'><i class="fa fa-power-off"></i><span class="wok-nw-loading-icon"></span></span></span><!-- + --><span class='column-name' title="{name}" val="{name}">{name}</span><!-- + --><span class='column-type' val="{type}">{type}</span><!-- + --><span class='column-interface' val="{interface}">{interface}</span><!-- + --><span class='column-space' val="{addrSpace}">{addrSpace}</span><!-- + --><span class='column-action' style="display:none"> + <span class="pull-right"> + <div class="dropdown menu-flat"> + <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span> + </button> + <ul class="dropdown-menu" role="menu"> + <li role="presentation" nwAct="start" class='{startClass}'><a><i class="fa fa-undo"></i>$_("Start")</a></li> + <li role="presentation" nwAct="stop" class='{stopClass}'><a {stopDisabled}><i class="fa fa-ban"></i>$_("Stop")</a></li> + <li role="presentation" nwAct="delete" class='critical {deleteClass}'><a {deleteDisabled}><i class="fa fa-minus-circle"></i>$_("Delete")</a></li> + </ul> + </div> + </span> + </span> + </div> +</script> +<script> + kimchi.initNetwork(); +</script> +</body> +</html> diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl new file mode 100644 index 0000000..9f2a978 --- /dev/null +++ b/ui/pages/tabs/storage.html.tmpl @@ -0,0 +1,198 @@ +#* + * Project Kimchi + * + * Copyright IBM, Corp. 2013-2015 + * + * 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. + *# + +#unicode UTF-8 +#import gettext +#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) +#silent _ = t.gettext +#silent _t = t.gettext +<!DOCTYPE html> +<html> +<head> +<link rel="stylesheet" href="plugins/kimchi/css/theme-default.min.css"> +<script src="plugins/kimchi/js/kimchi.min.js"></script> +</head> +<body> +<div id="storage-root-container"> + <nav class="navbar navbar-default toolbar"> + <div class="container"> + <!-- Brand and toggle get grouped for better mobile display --> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + </div> + <!-- Collect the nav links, forms, and other content for toggling --> + <div class="collapse navbar-collapse" id="toolbar"> + <ul class="nav navbar-nav navbar-right tools" display="none"> + <li><a id="storage-pool-add" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Storage</span></a></li> + </ul> + </div> + </div> + </nav> + <div class='storage'> + <div class="container"> + <div class="row grid-control"> + <div class="pull-right"> + <label for="storage-filter" class="sr-only">$_("Filter"):</label> + <input type="text" class="filter form-control" placeholder="$_("Filter")"> + </div> + </div> + <div id="alert-container"></div> + <div id='storageGrid'> + <div> + <span class="column-state"><span class="sr-only">$_("State")</span></span><!-- + --><span class="column-name">$_("Name")</span><!-- + --><span class="column-type">$_("Type")</span><!-- + --><span class="column-location">$_("Location")</span><!-- + --><span class="column-usage">$_("%Used")</span><!-- + --><span class="column-allocated">$_("Allocated")</span><!-- + --><span class="column-capacity">$_("Capacity")</span><!-- + --><span class="column-disks">$_("Disks")</span><!-- + --><span class="column-action" display="none"><span class="sr-only">$_("Actions")</span></span> + </div> + <div id="storagepoolsList" class="list-storage empty-when-logged-off"></div> + </div> + <div id="logicalPoolExtend" class="modal fade logicalpool-modal" tabindex="-2" role="dialog" aria-labelledby="logicalPoolExtendLabel" aria-hidden="true"> + <div class="modal-dialog modal-sm"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> + <h4 class="modal-title" id="logicalPoolExtendLabel">$_("Device path")</h4> + </div> + <div class="modal-body"> + <p id="loading-info" class="hidden"><span class="wok-loading-icon"></span><span>$_("Looking for available partitions ...")</span></p> + <div class="host-partition"> + </div> + </div> + <div class="modal-footer"> + <button type="button" id="savePartitions" class="btn btn-default" disabled="disabled">$_("Save")</button> + <button type="button" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button> + </div> + </div> + </div> + </div> + </div> + </div> +</div> +<script id="storageTmpl" type="html/text"> + <div id="{name}" class="storage-li in" data-name="{name}" data-stat="{state}"> + <span class='column-state' val="{state}"> + <span class='storage-state {state}'> + <i class="fa fa-power-off"></i> + </span> + </span><!-- + --><span class='column-name' title="{name}" val="{name}">{name}</span><!-- + --><span class='column-type' val="{type}">{type}</span><!-- + --><span class='column-location' val="{path}">{path}</span><!-- + --><span class='column-usage {state}' val="{usage}" ><span class='usage-icon {icon}'>{usage}</span>%</span><!-- + --><span class='column-allocated' val="{allocated}">{allocated}</span><!-- + --><span class='column-capacity' val="{capacity}">{capacity}</span><!-- + --><span class="column-disks {state}"> + <div class="handle arrow-down"></div> + </span><!-- + --><span class="column-action storage-button" style="display:none"> + <span class="pull-right"> + <div class="dropdown menu-flat storage-action" data-state="{state}" data-type="{type}" data-name="{name}"> + <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span></button> + <ul class="dropdown-menu actionsheet"> + <li role="presentation"> + <a href="#" class="pool-deactivate" data-stat="{state}" data-name="{name}" data-persistent="{persistent}" href="#"><i class="fa fa-minus-circle"></i>$_("Deactivate")</a> + </li> + <li role="presentation"> + <a href="#" class="pool-activate" data-stat="{state}" data-name="{name}"><i class="fa fa-power-off"></i>$_("Activate")</a> + </li> + <li role="presentation"> + <a href="#" class="pool-add-volume" data-stat="{state}" data-name="{name}" data-type="{type}"><i class="fa fa-plus-circle"></i>$_("Add Volume")</a> + </li> + <li role="presentation" class="{enableExt}"> + <a href="#" class="pool-extend" data-stat="{state}" data-name="{name}" data-toggle="modal" data-target="#logicalPoolExtend"><i class="fa fa-external-link-square"></i>$_("Extend")</a> + </li> + <li role="presentation" class="critical"> + <a href="#" class="pool-delete" data-stat="{state}" data-name="{name}"><i class="fa fa-ban"></i>$_("Undefine")</a> + </li> + </ul> + </div> + </span> + </span> + <div class="volumes"> + <div id="volume{name}" class="volumeslist" data-name="{name}" ></div> + <div class="clear"></div> + </div> + </div> +</script> +<script id="volumeTmpl" type="html/text"> + <div class="volume-box" data-volume-name="{name}"> + <div class="volume-title"> + <div class="volume-name" title="{name}">{name}</div> + <div class="volume-utilization"> + <span class="volume-icon {capacityIcon}"></span> + <span class="volume-usage">{capacityLevel}%</span> + </div> + <div class="volume-progress hidden"> + <div class="progress-bar-outer"> + <div class="progress-bar-inner"></div> + </div> + <div class="progress-label"> + <span class="progress-status"></span> + <span class="progress-transferred"></span> + </div> + </div> + </div> + <div class="volume-setting"> + </div> + <ul class="volume-data"> + <li> + <span class="value" title="{format}">{format}</span> + <span class="key">$_("Format")</span> + </li> + <li> + <span class="value" title="{type}">{type}</span> + <span class="key">$_("Type")</span> + </li> + <li> + <span class="value" title="{allocation}">{allocation}</span> + <span class="key">$_("Allocation")</span> + </li> + <li> + <span class="value" title="{capacity}">{capacity}</span> + <span class="key">$_("Capacity")</span> + </li> + </ul> + </div> +</script> +<script id="logicalPoolExtendTmpl" type="html/text"> + <div> + <input type="checkbox" class="wok-checkbox" id="{name}" value="{path}" name="devices"> + <label for="{name}"> + <div> + <span class="device-name">{name}</span> + <span class="device-path">{path}</span> + </div> + </label> + </div> +</script> +<script> + kimchi.storage_main(); +</script> +<div id="modalWindow" class="modal fade storage-modal" tabindex="-1" role="dialog" aria-labelledby="storageModalLabel" aria-hidden="true"> </div> +</body> +</html> \ No newline at end of file diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl new file mode 100644 index 0000000..1031f52 --- /dev/null +++ b/ui/pages/tabs/templates.html.tmpl @@ -0,0 +1,102 @@ +#* +* Project Kimchi +* +* Copyright IBM, Corp. 2013-2014 +* +* 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. +*# +#unicode UTF-8 +#import gettext +#from wok.cachebust import href +#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) +#silent _ = t.gettext +#silent _t = t.gettext +<!DOCTYPE html> +<html> +<head> + <link rel="stylesheet" href="plugins/kimchi/css/theme-default.min.css"> + <script src="plugins/kimchi/js/kimchi.min.js"></script> +</head> +<body> + <div id="templates-root-container"> + <nav class="navbar navbar-default toolbar"> + <div class="container"> + <!-- Brand and toggle get grouped for better mobile display --> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + </div> + <!-- Collect the nav links, forms, and other content for toggling --> + <div class="collapse navbar-collapse" id="toolbar"> + <ul class="nav navbar-nav navbar-right tools" display="none"> + <li><a id="template-add" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Template</span></a></li> + </ul> + </div> + </div> + </nav> + <div class="templates"> + <div class="container"> + <div class="row grid-control hidden"> + <div class="pull-right"> + <label for="templates-filter" class="sr-only">$_("Filter"):</label> + <input type="text" class="filter form-control" placeholder="$_("Filter")"> + </div> + </div> + <div id="alert-container"></div> + <div id="noTemplates" class="list-no-result" style="display: none;"> + $_("No templates found.") + </div> + <div id="alert-container"></div> + <ul id="templateList" class="wok-vm-list empty-when-logged-off"> + <script id="templateTmpl" type="html/text"> + <li class="wok-vm-body"> + <span class='column-name' title="{name}" val="{name}">{name}</span><!-- + --><span class='column-action pull-right'> + <span class="pull-right"> + <div class="dropdown menu-flat"> + <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span> + </button> + <ul class="dropdown-menu" role="menu"> + <li role="presentation" nwAct="edit" class='template-edit'><a href="#" data-template='{name}'><i class="fa fa-pencil"></i>$_("Edit")</a></li> + <li role="presentation" nwAct="clone" class='template-clone'><a href="#" data-template='{name}'><i class="fa fa-files-o"></i>$_("Clone")</a></li> + <li role="presentation" nwAct="delete" class='critical template-delete'><a href="#" data-template='{name}'><i class="fa fa-minus-circle"></i>$_("Delete")</a></li> + </ul> + </div> + </span> + </span><!-- + --><span class='column-type distro-icon icon-{os_distro}' val="{os_distro}">{os_distro}</span><!-- + --><span class="item-hidden">$_("OS")</span><!-- + --><span class='column-version' val="{os_version}">{os_version}</span><!-- + --><span class="item-hidden">$_("Version")</span><!-- + --><span class='column-processors' val="{cpus}"><strong>{cpus}</strong> cores</span><!-- + --><span class="item-hidden">$_("CPUs")</span><!-- + --><span class='column-memory' val="{memory}"><strong>{memory}</strong> M</span><!-- + --><span class="item-hidden">$_("Memory")</span> + </li> + + </script> + </ul> + </div> + </div> + + <div id="modalWindow" class="modal fade host-modal templates-modal" tabindex="-1" role="dialog" aria-labelledby="templatesModalLabel" aria-hidden="true"> + </div> + <script> + kimchi.template_main(); + </script> +</body> +</html> diff --git a/ui/pages/templates.html.tmpl b/ui/pages/templates.html.tmpl deleted file mode 100644 index 1031f52..0000000 --- a/ui/pages/templates.html.tmpl +++ /dev/null @@ -1,102 +0,0 @@ -#* -* Project Kimchi -* -* Copyright IBM, Corp. 2013-2014 -* -* 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. -*# -#unicode UTF-8 -#import gettext -#from wok.cachebust import href -#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True) -#silent _ = t.gettext -#silent _t = t.gettext -<!DOCTYPE html> -<html> -<head> - <link rel="stylesheet" href="plugins/kimchi/css/theme-default.min.css"> - <script src="plugins/kimchi/js/kimchi.min.js"></script> -</head> -<body> - <div id="templates-root-container"> - <nav class="navbar navbar-default toolbar"> - <div class="container"> - <!-- Brand and toggle get grouped for better mobile display --> - <div class="navbar-header"> - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - </div> - <!-- Collect the nav links, forms, and other content for toggling --> - <div class="collapse navbar-collapse" id="toolbar"> - <ul class="nav navbar-nav navbar-right tools" display="none"> - <li><a id="template-add" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Template</span></a></li> - </ul> - </div> - </div> - </nav> - <div class="templates"> - <div class="container"> - <div class="row grid-control hidden"> - <div class="pull-right"> - <label for="templates-filter" class="sr-only">$_("Filter"):</label> - <input type="text" class="filter form-control" placeholder="$_("Filter")"> - </div> - </div> - <div id="alert-container"></div> - <div id="noTemplates" class="list-no-result" style="display: none;"> - $_("No templates found.") - </div> - <div id="alert-container"></div> - <ul id="templateList" class="wok-vm-list empty-when-logged-off"> - <script id="templateTmpl" type="html/text"> - <li class="wok-vm-body"> - <span class='column-name' title="{name}" val="{name}">{name}</span><!-- - --><span class='column-action pull-right'> - <span class="pull-right"> - <div class="dropdown menu-flat"> - <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span> - </button> - <ul class="dropdown-menu" role="menu"> - <li role="presentation" nwAct="edit" class='template-edit'><a href="#" data-template='{name}'><i class="fa fa-pencil"></i>$_("Edit")</a></li> - <li role="presentation" nwAct="clone" class='template-clone'><a href="#" data-template='{name}'><i class="fa fa-files-o"></i>$_("Clone")</a></li> - <li role="presentation" nwAct="delete" class='critical template-delete'><a href="#" data-template='{name}'><i class="fa fa-minus-circle"></i>$_("Delete")</a></li> - </ul> - </div> - </span> - </span><!-- - --><span class='column-type distro-icon icon-{os_distro}' val="{os_distro}">{os_distro}</span><!-- - --><span class="item-hidden">$_("OS")</span><!-- - --><span class='column-version' val="{os_version}">{os_version}</span><!-- - --><span class="item-hidden">$_("Version")</span><!-- - --><span class='column-processors' val="{cpus}"><strong>{cpus}</strong> cores</span><!-- - --><span class="item-hidden">$_("CPUs")</span><!-- - --><span class='column-memory' val="{memory}"><strong>{memory}</strong> M</span><!-- - --><span class="item-hidden">$_("Memory")</span> - </li> - - </script> - </ul> - </div> - </div> - - <div id="modalWindow" class="modal fade host-modal templates-modal" tabindex="-1" role="dialog" aria-labelledby="templatesModalLabel" aria-hidden="true"> - </div> - <script> - kimchi.template_main(); - </script> -</body> -</html> -- 2.5.0