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

Aline Manera alinefm at linux.vnet.ibm.com
Thu Dec 10 16:49:21 UTC 2015


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 at linux.vnet.ibm.com>
---
 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..9b5f049
--- /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)/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




More information about the Kimchi-devel mailing list