From 4558c886a38f31f6746472d35b8ed735b14fde30 Mon Sep 17 00:00:00 2001
From: Scott Baker <smbaker@gmail.com>
Date: Thu, 30 Oct 2014 00:06:16 -0700
Subject: [PATCH] many changes to xoslib test
---
planetstack/core/xoslib/dashboards/test.html | 218 +++++++++++++++----
planetstack/core/xoslib/static/css/test.css | 9 +
planetstack/core/xoslib/static/js/test.js | 68 ++++--
3 files changed, 232 insertions(+), 63 deletions(-)
diff --git a/planetstack/core/xoslib/dashboards/test.html b/planetstack/core/xoslib/dashboards/test.html
index 5326b76..cc539ce 100644
--- a/planetstack/core/xoslib/dashboards/test.html
+++ b/planetstack/core/xoslib/dashboards/test.html
@@ -12,43 +12,33 @@
<p>This shows all of the things you can see using xosLib</p>
-<h3>Deployments</h3>
<div id="deploymentList">
</div>
-<h3>Images</h3>
<div id="imageList">
</div>
-<h3>Network Templates</h3>
<div id="networkTemplateList">
</div>
-<h3>Networks</h3>
<div id="networkList">
</div>
-<h3>Nodes</h3>
<div id="nodeList">
</div>
-<h3>Services</h3>
<div id="serviceList">
</div>
-<h3>Sites</h3>
<div id="siteList">
</div>
-<h3>Slices</h3>
<div id="sliceList">
</div>
-<h3>Slivers</h3>
<div id="sliverList">
</div>
-<h3>Users</h3>
<div id="userList">
</div>
@@ -63,6 +53,8 @@
<div id="detail"></div>
<div id="linkedObjs1"></div>
<div id="linkedObjs2"></div>
+<div id="linkedObjs3"></div>
+<div id="linkedObjs4"></div>
</div>
</div>
@@ -87,6 +79,7 @@
<!-- Deployment -->
<script type="text/template" id="test-deployment-list-template">
+ <h3><%= title %></h3>
<table class="test-table">
<thead><tr>
<th>id</th>
@@ -101,8 +94,8 @@
<script type="text/template" id="test-deployment-listitem-template">
- <td><%= id %></td>
- <td><%= name %></td>
+ <td class="objectLink"><%= id %></td>
+ <td class="objectLink"><%= name %></td>
<td><%= backend_type %></td>
<td><%= admin_tenant %></td>
<td><%= sites.length %></td>
@@ -123,6 +116,7 @@
<!-- Image -->
<script type="text/template" id="test-image-list-template">
+ <h3><%= title %></h3>
<table class="test-table">
<thead><tr>
<th>id</th>
@@ -136,8 +130,8 @@
</script>
<script type="text/template" id="test-image-listitem-template">
- <td><%= id %></td>
- <td><%= name %></td>
+ <td class="objectLink"><%= id %></td>
+ <td class="objectLink"><%= name %></td>
<td><%= disk_format %></td>
<td><%= container_format %></td>
<td><%= path %></td>
@@ -158,6 +152,7 @@
<!-- NetworkTemplate -->
<script type="text/template" id="test-networkTemplate-list-template">
+ <h3><%= title %></h3>
<table class="test-table">
<thead><tr>
<th>id</th>
@@ -174,8 +169,8 @@
<script type="text/template" id="test-networkTemplate-listitem-template">
- <td><%= id %></td>
- <td><%= name %></td>
+ <td class="objectLink"><%= id %></td>
+ <td class="objectLink"><%= name %></td>
<td><%= description %></td>
<td><%= visibility %></td>
<td><%= translation %></td>
@@ -201,6 +196,7 @@
<!-- Network -->
<script type="text/template" id="test-network-list-template">
+ <h3><%= title %></h3>
<table class="test-table">
<thead><tr>
<th>id</th>
@@ -214,14 +210,13 @@
</table>
</script>
-
<script type="text/template" id="test-network-listitem-template">
- <td><%= id %></td>
- <td><%= name %></td>
+ <td class="objectLink"><%= id %></td>
+ <td class="objectLink"><%= name %></td>
<td><%= template %></td>
<td><%= ports %></td>
<td><%= labels %></td>
- <td><%= owner %></td>
+ <td><%= idToName(owner,"slivers","name") %></td>
</script>
<script type="text/template" id="test-network-detail-template">
@@ -238,9 +233,47 @@
</form>
</script>
+<!-- NetworkSliver -->
+
+<script type="text/template" id="test-networkSliver-list-template">
+ <h3><%= title %></h3>
+ <table class="test-table">
+ <thead><tr>
+ <th>id</th>
+ <th>network</th>
+ <th>sliver</th>
+ <th>ip</th>
+ <th>port_id</th>
+ </tr></thead>
+ <tbody></tbody>
+ </table>
+</script>
+
+<script type="text/template" id="test-networkSliver-listitem-template">
+ <td class="objectLink"><%= id %></td>
+ <td><%= idToName(network,"networks","name") %></td>
+ <td><%= idToName(sliver,"slivers","name") %></td>
+ <td><%= ip %></td>
+ <td><%= port_id %></td>
+</script>
+
+<script type="text/template" id="test-networkSliver-detail-template">
+ <h3>Detail View: Network</h3>
+ <form>
+ <table>
+ <tr><td>Network:</td><td><input type="text" name="network" value="<%= network %>"></td></tr>
+ <tr><td>Sliver:</td><td><input type="text" name="sliver" value="<%= sliver %>"></td></tr>
+ <tr><td>Ip:</td><td><input type="text" name="ip" value="<%= ip %>"></td></tr>
+ <tr><td>Port_id:</td><td><input type="text" name="port_id" value="<%= port_id %>"></td></tr>
+ <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
+ </table>
+ </form>
+</script>
+
<!-- Node -->
<script type="text/template" id="test-node-list-template">
+ <h3><%= title %></h3>
<table class="test-table">
<thead><tr>
<th>id</th>
@@ -254,10 +287,10 @@
<script type="text/template" id="test-node-listitem-template">
- <td><%= id %></td>
- <td><%= name %></td>
- <td><%= site %></td>
- <td><%= deployment %></td>
+ <td class="objectLink"><%= id %></td>
+ <td class="objectLink"><%= name %></td>
+ <td><%= idToName(site,"sites","name") %></td>
+ <td><%= idToName(deployment,"deployments","name") %></td>
</script>
<script type="text/template" id="test-node-detail-template">
@@ -272,9 +305,39 @@
</form>
</script>
+<!-- SliceRole -->
+
+<script type="text/template" id="test-sliceRole-list-template">
+ <h3><%= title %></h3>
+ <table class="test-table">
+ <thead><tr>
+ <th>id</th>
+ <th>role</th>
+ </tr></thead>
+ <tbody></tbody>
+ </table>
+</script>
+
+
+<script type="text/template" id="test-sliceRole-listitem-template">
+ <td class="objectLink"><%= id %></td>
+ <td><%= role %></td>
+</script>
+
+<script type="text/template" id="test-sliceRole-detail-template">
+ <h3>Detail View: Service</h3>
+ <form>
+ <table>
+ <tr><td>Role:</td><td><input type="text" name="role" value="<%= role %>"></td></tr>
+ <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
+ </table>
+ </form>
+</script>
+
<!-- Service -->
<script type="text/template" id="test-service-list-template">
+ <h3><%= title %></h3>
<table class="test-table">
<thead><tr>
<th>id</th>
@@ -290,8 +353,8 @@
<script type="text/template" id="test-service-listitem-template">
- <td><%= id %></td>
- <td><%= name %></td>
+ <td class="objectLink"><%= id %></td>
+ <td class="objectLink"><%= name %></td>
<td><%= description %></td>
<td><%= enabled %></td>
<td><%= versionNumber %></td>
@@ -313,6 +376,7 @@
<!-- Site -->
<script type="text/template" id="test-site-list-template">
+ <h3><%= title %></h3>
<table class="test-table">
<thead><tr>
<th>id</th>
@@ -327,10 +391,9 @@
</table>
</script>
-
<script type="text/template" id="test-site-listitem-template">
- <td><%= id %></td>
- <td><%= name %></td>
+ <td class="objectLink"><%= id %></td>
+ <td class="objectLink"><%= name %></td>
<td><%= site_url %></td>
<td><%= enabled %></td>
<td><%= login_base %></td>
@@ -353,6 +416,7 @@
<!-- Slice -->
<script type="text/template" id="test-slice-list-template">
+ <h3><%= title %></h3>
<table class="test-table">
<thead><tr>
<th>id</th>
@@ -370,15 +434,15 @@
</script>
<script type="text/template" id="test-slice-listitem-template">
- <td><%= id %></td>
- <td><%= name %></td>
+ <td class="objectLink"><%= id %></td>
+ <td class="objectLink"><%= name %></td>
<td><%= enabled %></td>
<td><%= omf_friendly %></td>
<td><%= description %></td>
<td><%= slice_url %></td>
- <td><%= site %></td>
+ <td><%= idToName(site,"sites","name") %></td>
<td><%= max_slivers %></td>
- <td><%= service %></td>
+ <td><%= idToName(service,"services","name") %></td>
</script>
<script type="text/template" id="test-slice-detail-template">
@@ -395,9 +459,78 @@
</form>
</script>
+<!-- SlicDeployment -->
+
+<script type="text/template" id="test-sliceDeployment-list-template">
+ <h3><%= title %></h3>
+ <table class="test-table">
+ <thead><tr>
+ <th>id</th>
+ <th>slice</th>
+ <th>deployment</th>
+ <th>tenant_id</th>
+ </tr></thead>
+ <tbody></tbody>
+ </table>
+</script>
+
+<script type="text/template" id="test-sliceDeployment-listitem-template">
+ <td class="objectLink"><%= id %></td>
+ <td><%= idToName(slice,"slices","name") %></td>
+ <td><%= idToName(deployment,"deployments","name") %></td>
+ <td><%= tenant_id %></td>
+</script>
+
+<script type="text/template" id="test-sliceDeployment-detail-template">
+ <h3>Detail View: Slice Deployment</h3>
+ <form>
+ <table>
+ <tr><td>Slice:</td><td><input type="text" name="slice" value="<%= slice %>"></td></tr>
+ <tr><td>Deployment:</td><td><input type="text" name="deployment" value="<%= deployment %>"></td></tr>
+ <tr><td>Tenant Id:</td><td><input type="text" name="tenant_id" value="<%= tenant_id %>"></td></tr>
+ <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
+ </table>
+ </form>
+</script>
+
+<!-- SlicePrivilege -->
+
+<script type="text/template" id="test-slicePrivilege-list-template">
+ <h3><%= title %></h3>
+ <table class="test-table">
+ <thead><tr>
+ <th>id</th>
+ <th>user</th>
+ <th>slice</th>
+ <th>role</th>
+ </tr></thead>
+ <tbody></tbody>
+ </table>
+</script>
+
+<script type="text/template" id="test-slicePrivilege-listitem-template">
+ <td class="objectLink"><%= id %></td>
+ <td><%= idToName(user,"users","username") %></td>
+ <td><%= idToName(slice,"slices","name") %></td>
+ <td><%= idToName(role,"sliceRoles","role") %></td>
+</script>
+
+<script type="text/template" id="test-slicePrivilege-detail-template">
+ <h3>Detail View: Slice Privilege</h3>
+ <form>
+ <table>
+ <tr><td>User:</td><td><input type="text" name="user" value="<%= user %>"></td></tr>
+ <tr><td>Slice:</td><td><input type="text" name="slice" value="<%= slice %>"></td></tr>
+ <tr><td>Role:</td><td><input type="text" name="role" value="<%= role %>"></td></tr>
+ <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
+ </table>
+ </form>
+</script>
+
<!-- Sliver -->
<script type="text/template" id="test-sliver-list-template">
+ <h3><%= title %></h3>
<table class="test-table">
<thead><tr>
<th>id</th>
@@ -418,15 +551,15 @@
<script type="text/template" id="test-sliver-listitem-template">
- <td><%= id %></td>
- <td><%= name %></td>
+ <td class="objectLink"><%= id %></td>
+ <td class="objectLink"><%= name %></td>
<td><%= instance_id %></td>
<td><%= instance_name %></td>
- <td><%= image %></td>
- <td><%= creator %></td>
- <td><%= slice %></td>
- <td><%= node %></td>
- <td><%= deploymentNetwork %></td>
+ <td><%= idToName(image,"images","name") %></td>
+ <td><%= idToName(creator,"users","name") %></td>
+ <td><%= idToName(slice,"slices","name") %></td>
+ <td><%= idToName(node,"nodes","name") %></td>
+ <td><%= idToName(deploymentNetwork,"deployments","name") %></td>
<td><%= flavor %></td>
<td><%= userData %></td>
</script>
@@ -449,6 +582,7 @@
<!-- User -->
<script type="text/template" id="test-user-list-template">
+ <h3><%= title %></h3>
<table class="test-table">
<thead><tr>
<th>id</th>
@@ -465,8 +599,8 @@
<script type="text/template" id="test-user-listitem-template">
- <td><%= id %></td>
- <td><%= username %></td>
+ <td class="objectLink"><%= id %></td>
+ <td class="objectLink"><%= username %></td>
<td><%= firstname %></td>
<td><%= lastname %></td>
<td><%= phone %></td>
diff --git a/planetstack/core/xoslib/static/css/test.css b/planetstack/core/xoslib/static/css/test.css
index e5b1b80..dee32d8 100644
--- a/planetstack/core/xoslib/static/css/test.css
+++ b/planetstack/core/xoslib/static/css/test.css
@@ -6,6 +6,7 @@
position: fixed;
top: 1em;
right: 1em;
+ width: 450px;
}
#detailBox {
@@ -14,6 +15,8 @@
background-color: #f0f0f0;
margin-bottom:30px;
display:none;
+ overflow:auto;
+ max-height:80vh;
}
#errorBox {
@@ -32,3 +35,9 @@
display:none;
}
+.objectLink {
+ cursor:pointer;
+ color:blue;
+ text-decoration:underline;
+}
+
diff --git a/planetstack/core/xoslib/static/js/test.js b/planetstack/core/xoslib/static/js/test.js
index ff681e8..86de742 100644
--- a/planetstack/core/xoslib/static/js/test.js
+++ b/planetstack/core/xoslib/static/js/test.js
@@ -11,25 +11,11 @@ TestApp.addRegions({
sliceList: "#sliceList",
sliverList: "#sliverList",
userList: "#userList",
- detail: "#detail"
-});
-
-// ---- Deployment ----
-
-TestApp.DeploymentListItemView = Marionette.ItemView.extend({
- template: '#test-deployment-listitem-template',
- tagName: 'tr',
- className: 'test-tablerow',
-});
-
-TestApp.DeploymentListView = Marionette.CompositeView.extend({
- childView: TestApp.DeploymentListItemView,
- childViewContainer: 'tbody',
- template: '#test-deployment-list-template',
-
- initialize: function() {
- this.listenTo(this.collection, 'change', this._renderChildren)
- },
+ detail: "#detail",
+ linkedObjs1: "#linkedObjs1",
+ linkedObjs2: "#linkedObjs2",
+ linkedObjs3: "#linkedObjs3",
+ linkedObjs4: "#linkedObjs4"
});
TestApp.hideError = function(result) {
@@ -53,8 +39,17 @@ TestApp.showError = function(result) {
});
};
+idToName = function(id, collectionName, fieldName) {
+ linkedObject = xos[collectionName].get(id);
+ if (linkedObject == undefined) {
+ return "#" + id;
+ } else {
+ return linkedObject.attributes[fieldName];
+ }
+};
+
TestApp.on("start", function() {
- var objs = ['deployment', 'image', 'networkTemplate', 'network', 'node', 'service', 'site', 'slice', 'sliver', 'user'];
+ var objs = ['deployment', 'image', 'networkTemplate', 'network', 'networkSliver', 'node', 'service', 'site', 'slice', 'sliceDeployment', 'slicePrivilege', 'sliver', 'user', 'sliceRole'];
for (var index in objs) {
name = objs[index];
@@ -112,6 +107,20 @@ TestApp.on("start", function() {
e.preventDefault();
e.stopPropagation();
+ index=0;
+ for (relatedName in this.model.collection.relatedCollections) {
+ relatedField = this.model.collection.relatedCollections[relatedName];
+
+ relatedListViewClass = TestApp[relatedName + "ListView"].extend({collection: xos[relatedName].filterBy(relatedField,this.model.id)});
+ TestApp["linkedObjs" + (index+1)].show(new relatedListViewClass());
+ index = index + 1;
+ }
+
+ while (index<4) {
+ TestApp["linkedObjs" + (index+1)].empty();
+ index = index + 1;
+ }
+
var detailView = new this.detailClass({
model: this.model,
});
@@ -125,15 +134,32 @@ TestApp.on("start", function() {
childViewContainer: 'tbody',
template: table_template,
collection: xos[collection_name],
+ title: name + "s",
initialize: function() {
this.listenTo(this.collection, 'change', this._renderChildren)
+
+ // Because many of the templates use idToName(), we need to
+ // listen to the collections that hold the names for the ids
+ // that we want to display.
+ for (i in this.collection.foreignCollections) {
+ foreignName = this.collection.foreignCollections[i];
+ this.listenTo(xos[foreignName], 'change', this._renderChildren);
+ this.listenTo(xos[foreignName], 'sort', this._renderChildren);
+ }
+ },
+
+ templateHelpers: function() {
+ return { title: this.title };
},
});
+ TestApp[collection_name + "ListView"] = listViewClass;
var listView = new listViewClass();
- TestApp[region_name].show(listView);
+ if (region_name in TestApp.getRegions()) {
+ TestApp[region_name].show(listView);
+ }
xos[collection_name].fetch(); //startPolling();
}
--
2.47.0