brooklyn-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From rich...@apache.org
Subject [13/14] git commit: Move common javascript to separate file. Clean up child pages.
Date Mon, 08 Sep 2014 12:39:13 GMT
Move common javascript to separate file. Clean up child pages.


Project: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/commit/a14adf02
Tree: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/tree/a14adf02
Diff: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/diff/a14adf02

Branch: refs/heads/master
Commit: a14adf02031f18acf0d3543352f57f5935a116aa
Parents: 91d7bc7
Author: Alasdair Hodge <alasdair.hodge@cloudsoftcorp.com>
Authored: Sat Sep 6 17:46:16 2014 +0100
Committer: Martin Harris <github@nakomis.com>
Committed: Mon Sep 8 11:22:39 2014 +0100

----------------------------------------------------------------------
 .../brooklyn/cli/itemlister/ItemLister.java     |   2 +
 .../main/resources/brooklyn-object-list.html    |  69 ++-----
 usage/cli/src/main/resources/common.js          |  94 +++++++++
 usage/cli/src/main/resources/enricher.html      |  68 +++---
 usage/cli/src/main/resources/entity.html        |  99 ++++-----
 usage/cli/src/main/resources/items.css          | 207 ++++---------------
 usage/cli/src/main/resources/policy.html        |  66 +++---
 7 files changed, 257 insertions(+), 348 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/a14adf02/usage/cli/src/main/java/brooklyn/cli/itemlister/ItemLister.java
----------------------------------------------------------------------
diff --git a/usage/cli/src/main/java/brooklyn/cli/itemlister/ItemLister.java b/usage/cli/src/main/java/brooklyn/cli/itemlister/ItemLister.java
index 0dfec16..f12d31d 100644
--- a/usage/cli/src/main/java/brooklyn/cli/itemlister/ItemLister.java
+++ b/usage/cli/src/main/java/brooklyn/cli/itemlister/ItemLister.java
@@ -125,6 +125,8 @@ public class ItemLister extends AbstractMain {
                 mkdir(parentDir, "locationResolvers");
                 Files.write("var items = " + json, new File(Os.mergePaths(outputFolder, "items.js")),
Charsets.UTF_8);
                 ResourceUtils resourceUtils = ResourceUtils.create(this);
+                String js = resourceUtils.getResourceAsString("common.js");
+                Files.write(js, new File(Os.mergePaths(outputFolder, "common.js")), Charsets.UTF_8);
                 String css = resourceUtils.getResourceAsString("items.css");
                 Files.write(css, new File(Os.mergePaths(outputFolder, "items.css")), Charsets.UTF_8);
                 String mainHtml = resourceUtils.getResourceAsString("brooklyn-object-list.html");

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/a14adf02/usage/cli/src/main/resources/brooklyn-object-list.html
----------------------------------------------------------------------
diff --git a/usage/cli/src/main/resources/brooklyn-object-list.html b/usage/cli/src/main/resources/brooklyn-object-list.html
index 5c88529..b1a576a 100644
--- a/usage/cli/src/main/resources/brooklyn-object-list.html
+++ b/usage/cli/src/main/resources/brooklyn-object-list.html
@@ -18,74 +18,49 @@ under the License.
 -->
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-<head>
+  <head>
     <title>Brooklyn Objects</title>
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
     <link rel="stylesheet" href="items.css" type="text/css" media="screen"/>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
-    <script src="http://underscorejs.org/underscore-min.js" type="text/javascript"></script>
-    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-</head>
-<body>
-<div id="container">
-    <div id="header">
+  </head>
+
+  <body>
+    <div id="container">
+      <div id="header">
         <div id="identity">
-            <a href="http://brooklyncentral.github.com/" rel="home">Brooklyn</a>
+          <a href="http://brooklyncentral.github.com/" rel="home">Brooklyn</a>
         </div>
-    </div>
+      </div>
 
-    <ul class="nav nav-tabs">
+      <ul class="nav nav-tabs">
         <li class="active"><a href="#entities" data-toggle="tab">Entities</a></li>
         <li><a href="#policies" data-toggle="tab">Policies</a></li>
         <li><a href="#enrichers" data-toggle="tab">Enrichers</a></li>
-    </ul>
+      </ul>
 
-    <div class="tab-content">
+      <div class="tab-content">
         <div class="tab-pane active" id="entities"></div>
         <div class="tab-pane" id="policies"></div>
         <div class="tab-pane" id="enrichers"></div>
         <div class="tab-pane" id="locations"></div>
         <div class="tab-pane" id="locationResolvers"></div>
+      </div>
     </div>
 
+    <script src="http://underscorejs.org/underscore-min.js" type="text/javascript"></script>
+    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="common.js" type="text/javascript"></script>
     <script src="items.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
-            var entityTemplate = _.template(
-                "<div class='card'>" +
-                "<a class='detailsLink' href='entities/<%=type%>.html' title='detailed
info'><span class='glyphicon glyphicon-info-sign'/></a>" +
-                "<div class='name'><%=name%></div>" +
-                "<div class='type'><%=type%></div>" +
-                "<div class='description'><%=description%></div>" +
-                "</div>"
-            );
-            var policyTemplate = _.template(
-                "<div class='card'>" +
-                "<a class='detailsLink' href='policies/<%=type%>.html' title='detailed
info'><span class='glyphicon glyphicon-info-sign'/></a>" +
-                "<div class='name'><%=name%></div>" +
-                "<div class='type'><%=type%></div>" +
-                "<div class='description'><%=description%></div>" +
-                "</div>"
-            );
-            var enricherTemplate = _.template(
-                "<div class='card'>" +
-                "<a class='detailsLink' href='enrichers/<%=type%>.html' title='detailed
info'><span class='glyphicon glyphicon-info-sign'/></a>" +
-                "<div class='name'><%=name%></div>" +
-                "<div class='type'><%=type%></div>" +
-                "<div class='description'><%=description%></div>" +
-                "</div>"
-            );
-            var locationTemplate = _.template(
-                "<div class='card'><a class='location' href='locations/<%=type%>.html'><%=type%></a></div>"
-            );
-            items.entities.forEach(function (element) { $("#entities").append(entityTemplate(element));
});
-            items.policies.forEach(function (element) { $("#policies").append(policyTemplate(element));
});
-            items.enrichers.forEach(function (element) { $("#enrichers").append(enricherTemplate(element));
});
-            //items.locations.forEach(function (element) { $("#locations").append(locationTemplate(element));
});
+            items.entities.forEach(function (element) { $("#entities").append(brooklyn.entityCard(element));
});
+            items.policies.forEach(function (element) { $("#policies").append(brooklyn.policyCard(element));
});
+            items.enrichers.forEach(function (element) { $("#enrichers").append(brooklyn.enricherCard(element));
});
+            //items.locations.forEach(function (element) { $("#locations").append(brooklyn.locationCard(element));
});
             //items.locationResolvers.forEach(function (element) { $("#locationResolvers").append("<tr><td>"
+ element + "</td></tr>"); });
         });
     </script>
-</div>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/a14adf02/usage/cli/src/main/resources/common.js
----------------------------------------------------------------------
diff --git a/usage/cli/src/main/resources/common.js b/usage/cli/src/main/resources/common.js
new file mode 100644
index 0000000..877052a
--- /dev/null
+++ b/usage/cli/src/main/resources/common.js
@@ -0,0 +1,94 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+var brooklyn = (function ($, _) {
+
+    return {
+        findItemOfType: function(items, type) {
+            return _.findWhere(items, { type: type });
+        },
+
+        entityCard: _.template(
+            "<a class='plain' href='entities/<%=type%>.html'>" +
+            "<div class='card'>" +
+            "<span class='glyphicon glyphicon-chevron-right'/>" +
+            "<div class='name'><%=name%></div>" +
+            "<div class='type'><%=type%></div>" +
+            "<div class='description'><%=description%></div>" +
+            "</div>" +
+            "</a>"
+        ),
+        policyCard: _.template(
+            "<a class='plain' href='policies/<%=type%>.html'>" +
+            "<div class='card'>" +
+            "<span class='glyphicon glyphicon-chevron-right'/>" +
+            "<div class='name'><%=name%></div>" +
+            "<div class='type'><%=type%></div>" +
+            "<div class='description'><%=description%></div>" +
+            "</div>" +
+            "</a>"
+        ),
+        enricherCard: _.template(
+            "<a class='plain' href='enrichers/<%=type%>.html'>" +
+            "<div class='card'>" +
+            "<span class='glyphicon glyphicon-chevron-right'/>" +
+            "<div class='name'><%=name%></div>" +
+            "<div class='type'><%=type%></div>" +
+            "<div class='description'><%=description%></div>" +
+            "</div>" +
+            "</a>"
+        ),
+
+        typeSummary: _.template(
+            "<div class='summaryLabel'><%=name%></div>" +
+            "<div class='summaryType'><%=type%></div>" +
+            "<div class='description'><%=description%></div>"
+        ),
+
+        configKeyCard: _.template(
+            "<div class='card configKey'>" +
+            "<div class='name'><%=name%></div>" +
+            "<dl>" +
+            "<dt>description</dt><dd><%=(description||'&nbsp;')%></dd>"
+
+            "<dt>value type</dt><dd class='java'><%=(type||'&nbsp;')%></dd>"
+
+            "<dt>default value</dt><dd><%=(defaultValue||'&nbsp;')%></dd>"
+
+            "</dl>" +
+            "</div>"
+        ),
+        sensorCard: _.template(
+            "<div class='card sensor'>" +
+            "<div class='name'><%=name%></div>" +
+            "<dl>" +
+            "<dt>description</dt><dd><%=(description||'&nbsp;')%></dd>"
+
+            "<dt>value type</dt><dd class='java'><%=(type||'&nbsp;')%></dd>"
+
+            "</dl>" +
+            "</div>"
+        ),
+        effectorCard: _.template(
+            "<div class='card effector'>" +
+            "<div class='name'><%=name%></div>" +
+            "<dl>" +
+            "<dt>description</dt><dd><%=(description||'&nbsp;')%></dd>"
+
+            "<dt>return type</dt><dd class='java'><%=(returnType||'&nbsp;')%></dd>"
+
+            "</dl>" +
+            "</div>"
+        ),
+    };
+
+}(jQuery, _));

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/a14adf02/usage/cli/src/main/resources/enricher.html
----------------------------------------------------------------------
diff --git a/usage/cli/src/main/resources/enricher.html b/usage/cli/src/main/resources/enricher.html
index dc018fa..b484de2 100644
--- a/usage/cli/src/main/resources/enricher.html
+++ b/usage/cli/src/main/resources/enricher.html
@@ -17,49 +17,43 @@ specific language governing permissions and limitations
 under the License.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-<head>
+  <head>
     <title>Brooklyn Enricher - ${name}</title>
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="../items.css" type="text/css" media="screen"/>
-</head>
-<body>
-<div id="container">
-    <div id="header">
+  </head>
+  <body>
+    <div id="container">
+      <div id="header">
         <div id="identity">
-            <a href="http://brooklyncentral.github.com/" rel="home">Brooklyn</a>
+          <a href="http://brooklyncentral.github.com/" rel="home">Brooklyn</a>
         </div>
-    </div>
-    <div id="content" class="objectContent">
-        <br>
-        <h1>${name}</h1>
-        <h2 class="typeLabel">Type:</h2><span id="type"></span>
+      </div>
 
-        <h2>Config Keys</h2>
-        <table id="configKeys">
-            <tr>
-                <th>Name</th>
-                <th>Type</th>
-                <th>Default Value</th>
-                <th>Description</th>
-            </tr>
-        </table>
-        <br>
-    </div>
-</div>
+      <div id="summary"></div>
+
+      <ul class="nav nav-tabs">
+        <li class="active"><a href="#configKeys" data-toggle="tab">Config Keys</a></li>
+      </ul>
 
+      <div class="tab-content">
+        <div id="configKeys"></div>
+      </div>
+
+    </div>
 
-<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
-<script src="../items.js" type="text/javascript"></script>
-<script type="text/javascript">
-    $(document).ready(function () {
-        var item = $.grep((items.enrichers), function (entity) {
-            return entity.type == "${type}";
-        })[0];
-        $("#type").html(item.type);
-        item.config.forEach(function (element) {
-            $("#configKeys").find("tr:last").after("<tr><td>" + element.name
+ "</td><td>" + element.type + "</td><td>" + element.defaultValue
+ "</td><td>" + element.description + "</td></tr>")
+    <script src="http://underscorejs.org/underscore-min.js" type="text/javascript"></script>
+    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="../common.js" type="text/javascript"></script>
+    <script src="../items.js" type="text/javascript"></script>
+    <script type="text/javascript">
+        $(document).ready(function () {
+            var item = brooklyn.findItemOfType(items.enrichers, "${type}");
+            $("#summary").html(brooklyn.typeSummary(item));
+            item.config.forEach(function (element) { $("#configKeys").append(brooklyn.configKeyCard(element));
});
         });
-    });
-</script>
-</body>
-</html>
\ No newline at end of file
+    </script>
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/a14adf02/usage/cli/src/main/resources/entity.html
----------------------------------------------------------------------
diff --git a/usage/cli/src/main/resources/entity.html b/usage/cli/src/main/resources/entity.html
index d4d2fe7..b1602f7 100644
--- a/usage/cli/src/main/resources/entity.html
+++ b/usage/cli/src/main/resources/entity.html
@@ -17,75 +17,50 @@ specific language governing permissions and limitations
 under the License.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-<head>
-    <title>Brooklyn - ${name}</title>
+  <head>
+    <title>Brooklyn Entity - ${name}</title>
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="../items.css" type="text/css" media="screen"/>
-</head>
-<body>
-<div id="container">
-    <div id="header">
+  </head>
+  <body>
+    <div id="container">
+      <div id="header">
         <div id="identity">
-            <a href="http://brooklyncentral.github.com/" rel="home">Brooklyn</a>
+          <a href="http://brooklyncentral.github.com/" rel="home">Brooklyn</a>
         </div>
-    </div>
-    <div id="content" class="objectContent">
-        <h1>${name}</h1>
-        <h2 class="typeLabel">Type:</h2><span id="type"></span>
+      </div>
 
-        <h2>Config Keys</h2>
-        <table id="configKeys">
-            <tr>
-                <th>Name</th>
-                <th>Type</th>
-                <th>Default Value</th>
-                <th>Description</th>
-            </tr>
-        </table>
-        <br>
+      <div id="summary"></div>
 
-        <h2>Sensors</h2>
-        <table id="sensors">
-            <tr>
-                <th>Name</th>
-                <th>Type</th>
-                <th>Description</th>
-            </tr>
-        </table>
-        <br>
+      <ul class="nav nav-tabs">
+        <li class="active"><a href="#configKeys" data-toggle="tab">Config Keys</a></li>
+        <li><a href="#sensors" data-toggle="tab">Sensors</a></li>
+        <li><a href="#effectors" data-toggle="tab">Effectors</a></li>
+      </ul>
 
-        <h2>Effectors</h2>
-        <table id="effectors">
-            <tr>
-                <th>Name</th>
-                <th>Type</th>
-                <th>Description</th>
-            </tr>
-        </table>
-        <br>
+      <div class="tab-content">
+        <div class="tab-pane active" id="configKeys"></div>
+        <div class="tab-pane" id="sensors"></div>
+        <div class="tab-pane" id="effectors"></div>
+      </div>
     </div>
-</div>
 
-<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
-<script src="../items.js" type="text/javascript"></script>
-<script type="text/javascript">
-    $(document).ready(function () {
-        var item = $.grep((items.entities), function (entity) {
-            return entity.type == "${type}";
-        })[0];
-        $("#type").html(item.type);
-        item.config.forEach(function (element) {
-            $("#configKeys").find("tr:last").after("<tr><td>" + element.name
+ "</td><td>" + element.type + "</td><td>" + element.defaultValue
+ "</td><td class='wordWrap'>" + element.description + "</td></tr>")
-        });
-        item.sensors.forEach(function (element) {
-            $("#sensors").find("tr:last").after("<tr><td>" + element.name + "</td><td>"
+ element.type + "</td><td class='wordWrap'>" + element.description + "</td></tr>")
+    <script src="http://underscorejs.org/underscore-min.js" type="text/javascript"></script>
+    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="../common.js" type="text/javascript"></script>
+    <script src="../items.js" type="text/javascript"></script>
+    <script type="text/javascript">
+        $(document).ready(function () {
+            var item = brooklyn.findItemOfType(items.entities, "${type}");
+            $("#summary").html(brooklyn.typeSummary(item));
+            item.config.forEach(function (element) { $("#configKeys").append(brooklyn.configKeyCard(element));
});
+            item.sensors.forEach(function (element) { $("#sensors").append(brooklyn.sensorCard(element));
});
+            if (item.effectors != undefined) {
+                item.effectors.forEach(function (element) { $("#effectors").append(brooklyn.effectorCard(element));
});
+            }
         });
-        if (item.effectors != undefined) {
-            item.effectors.forEach(function (element) {
-                $("#effectors").find("tr:last").after("<tr><td>" + element.name
+ "</td><td>" + element.type + "</td><td  class='wordWrap'>" + element.description
+ "</td></tr>")
-            });
-        }
-    });
-</script>
-</body>
-</html>
\ No newline at end of file
+    </script>
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/a14adf02/usage/cli/src/main/resources/items.css
----------------------------------------------------------------------
diff --git a/usage/cli/src/main/resources/items.css b/usage/cli/src/main/resources/items.css
index d367748..0e9ff73 100644
--- a/usage/cli/src/main/resources/items.css
+++ b/usage/cli/src/main/resources/items.css
@@ -26,15 +26,6 @@ body {
   font-size: 15px;
 }
 
-h1 {
-  margin: 0 0 20px 0;
-  padding: 0;
-  font-size: 32px;
-  font-weight: normal;
-  color: #4d9d3a;
-  border-bottom: 1px solid #e9e9e9;
-}
-
 .nav-tabs {
   clear: both;
   font-weight: bold;
@@ -54,6 +45,11 @@ h1 {
   border-top: none;
 }
 
+a:hover > .card {
+  top: -2px;
+  background-color: #f4f4f4;
+  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
+}
 .card {
   position: relative;
   padding: 12px;
@@ -64,23 +60,20 @@ h1 {
   border-radius: 6px;
   font-size: 11pt;
 }
-.card:hover {
-  background-color: #f4f4f4;
-  top: -2px;
-  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
-}
-.card .detailsLink {
+a .glyphicon {
   display: block;
   position: absolute;
   right: 0;
   top: 0;
   padding: 8px;
-  font-size: 20pt;
-  color: #8a8 !important;
-  text-decoration: none;
+  font-size: 16pt;
+  color: #aaa;
 }
-.detailsLink:hover {
-  color: #686 !important;
+a:hover .glyphicon {
+  color: #888;
+}
+a.plain {
+  text-decoration: none !important;
 }
 .name {
   font-size: 12pt;
@@ -91,55 +84,43 @@ h1 {
   color: #888;
   margin-top: 2px;
 }
-.description {
-  margin: 10px 40px 0 20px;
+#summary .description {
+  margin: 15px 0 25px 0;
 }
-
-th {
-  margin: 1.25em 0 20px 0;
-  font-size: 20px;
-  font-weight: normal;
-  color: #4f8243
+.card .description {
+  margin: 10px 40px 0 20px;
 }
 
-.typeLabel {
-  display: inline;
-  padding-right: 10px;
+#summary {
+  clear: both;
+  margin: 10px 0 20px 0;
 }
-
-table {
-  border: 1px solid #f0f0f0;
-  border-radius: 5px;
-  background-color: #fcfcfc;
-  border-collapse: collapse;
-    padding: 6px;
+.summaryLabel {
+  font-size: 20px;
+  font-weight: bold;
 }
-
-td {
-  border-bottom: 1px solid #f0f0f0;
-  padding: 6px;
-  max-width: 350px;
-  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
-  white-space: -pre-wrap;      /* Opera 4-6 */
-  white-space: -o-pre-wrap;    /* Opera 7 */
-  white-space: pre-wrap;       /* css-3 */
-  word-wrap: break-word;       /* Internet Explorer 5.5+ */
-  word-break: break-all;
-  white-space: normal;
+.summaryType {
+  font-family: monospace;
+  font-size: 12pt;
+  color: #888;
 }
-
-.wordWrap {
-  word-break: normal !important;
+.java {
+  font-family: monospace;
 }
 
-.location {
-  word-break: keep-all;
-  max-width: 100%;
+.card dl {
+  margin-bottom: 0;
+  margin-top: 5px;
 }
-
-.objectContent {
-  display: block;
+dt {
   clear: both;
+  float: left;
+  width: 8em;
+  text-align: right;
+  font-weight: normal;
+}
+dd {
+  margin-left: 9em;
 }
 
 #container {
@@ -167,111 +148,3 @@ td {
   text-indent: -1000px;
   overflow: hidden;
 }
-
-#menubar {
-  clear: both;
-  width: 978px;
-  height: 34px;
-  background-color: #e8eded;
-  border: 1px solid #d5dade;
-  -moz-border-radius: 8px;
-  border-radius: 8px;
-}
-
-#mainmenu {
-  list-style: none;
-  margin: 0;
-  padding: 4px 0 0 2px;
-  width: 765px;
-  display: block;
-  float: left;
-  font-size: 15px;
-}
-
-#mainmenu li {
-  float: left;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-
-#mainmenu>li {
-  border: 1px solid transparent;
-  border-top-left-radius: 5px;
-  -moz-border-radius-topleft: 5px;
-  border-top-right-radius: 5px;
-  -moz-border-radius-topright: 5px;
-  border-bottom: 0;
-}
-
-#mainmenu a {
-  display: block;
-  text-decoration: none;
-  color: #508243;
-}
-
-#mainmenu>li>a {
-  padding: 0 8px 5px 8px;
-  line-height: 25px;
-}
-
-#mainmenu>li:hover {
-  background-color: #ffffff;
-  border: 1px solid #dbe0e4;
-  border-bottom: 0;
-}
-
-#mainmenu .current a {
-  color: #838a8b;
-}
-
-#mainmenu ul {
-  display: none;
-  position: absolute;
-  top: 30px;
-  left: -1px;
-  float: left;
-  background-color: #f5f5f5;
-  border: 1px solid #dbe0e4;
-  border-top: 0;
-  list-style: none;
-  margin: 0;
-  padding: 5px;
-  width: 185px;
-}
-
-#mainmenu ul ul {
-  left: 100%;
-  margin-left: 6px;
-  top: -1px;
-  border-top: 1px solid #dbe0e4;
-}
-
-#mainmenu ul li {
-  width: 183px;
-  padding: 0;
-  border: 1px solid transparent;
-}
-
-#mainmenu ul li:hover {
-  border: 1px solid #dbe0e4;
-  background-color: #ffffff;
-}
-
-#mainmenu ul a {
-  font-size: 14px;
-  padding: 7px;
-}
-
-#mainmenu li:hover>ul,#mainmenu li.sfHover>ul {
-  display: block;
-}
-
-#content {
-  overflow: scroll;
-  height: 1000px;
-}
-
-#content a {
-  color: #4f8243;
-}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/a14adf02/usage/cli/src/main/resources/policy.html
----------------------------------------------------------------------
diff --git a/usage/cli/src/main/resources/policy.html b/usage/cli/src/main/resources/policy.html
index 4fc1f59..ef4b7cb 100644
--- a/usage/cli/src/main/resources/policy.html
+++ b/usage/cli/src/main/resources/policy.html
@@ -17,47 +17,43 @@ specific language governing permissions and limitations
 under the License.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-<head>
+  <head>
     <title>Brooklyn Policy - ${name}</title>
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="../items.css" type="text/css" media="screen"/>
-</head>
-<body>
-<div id="container">
-    <div id="header">
+  </head>
+  <body>
+    <div id="container">
+      <div id="header">
         <div id="identity">
-            <a href="http://brooklyncentral.github.com/" rel="home">Brooklyn</a>
+          <a href="http://brooklyncentral.github.com/" rel="home">Brooklyn</a>
         </div>
-    </div>
-    <div id="content" class="objectContent">
-        <h1>${name}</h1>
-        <h2 class="typeLabel">Type:</h2><span id="type"></span>
+      </div>
+
+      <div id="summary"></div>
+
+      <ul class="nav nav-tabs">
+        <li class="active"><a href="#configKeys" data-toggle="tab">Config Keys</a></li>
+      </ul>
+
+      <div class="tab-content">
+        <div id="configKeys"></div>
+      </div>
 
-        <h2>Config Keys</h2>
-        <table id="configKeys">
-            <tr>
-                <th>Name</th>
-                <th>Type</th>
-                <th>Default Value</th>
-                <th>Description</th>
-            </tr>
-        </table>
-        <br>
     </div>
-</div>
 
-<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
-<script src="../items.js" type="text/javascript"></script>
-<script type="text/javascript">
-    $(document).ready(function () {
-        var item = $.grep((items.policies), function (entity) {
-            return entity.type == "${type}";
-        })[0];
-        $("#type").html(item.type);
-        item.config.forEach(function (element) {
-            $("#configKeys").find("tr:last").after("<tr><td>" + element.name
+ "</td><td>" + element.type + "</td><td>" + element.defaultValue
+ "</td><td class='wordWrap'>" + element.description + "</td></tr>")
+    <script src="http://underscorejs.org/underscore-min.js" type="text/javascript"></script>
+    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="../common.js" type="text/javascript"></script>
+    <script src="../items.js" type="text/javascript"></script>
+    <script type="text/javascript">
+        $(document).ready(function () {
+            var item = brooklyn.findItemOfType(items.policies, "${type}");
+            $("#summary").html(brooklyn.typeSummary(item));
+            item.config.forEach(function (element) { $("#configKeys").append(brooklyn.configKeyCard(element));
});
         });
-    });
-</script>
-</body>
-</html>
\ No newline at end of file
+    </script>
+  </body>
+</html>


Mime
View raw message