qpid-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From eal...@apache.org
Subject [06/11] qpid-dispatch git commit: DISPATCH-316 Hawtio and stand-alone consoles now use common code
Date Fri, 19 Aug 2016 16:59:13 GMT
http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/d98ae37e/console/stand-alone/index.html
----------------------------------------------------------------------
diff --git a/console/stand-alone/index.html b/console/stand-alone/index.html
index 166d89a..be03d62 100644
--- a/console/stand-alone/index.html
+++ b/console/stand-alone/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <!--
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
@@ -17,7 +17,7 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<html>
+<html xmlns:ng="http://angularjs.org">
 
 <head>
 
@@ -25,21 +25,18 @@ under the License.
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Qpid Dispatch Console</title>
 
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.css" type="text/css"/>
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.css" type="text/css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.css" type="text/css"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.15.0/skin-win8/ui.fancytree.css" type="text/css">
-
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
-
+    <link rel="stylesheet" href="https://cdn.rawgit.com/mar10/dynatree/master/dist/skin/ui.dynatree.css" type="text/css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" type="text/css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
 
-
-    <link rel="stylesheet" href="plugin/css/site-base.css" type="text/css"/>
     <link rel="stylesheet" href="plugin/css/plugin.css" type="text/css"/>
-    <link rel="stylesheet" href="plugin/css/qdrTopology.css" type="text/css"/>
+    <link rel="stylesheet" href="plugin/css/dispatch.css" type="text/css"/>
+    <link rel="stylesheet" href="plugin/css/site-base.css" type="text/css"/>
     <link rel="stylesheet" href="https://cdn.rawgit.com/mohsen1/json-formatter/master/dist/json-formatter.min.css" type="text/css"/>
 
 </head>
@@ -69,16 +66,7 @@ under the License.
 
     <div id="main-body" >
         <div id="main" class="container-fluid ng-cloak qdr">
-            <div>
-                <ul class="nav nav-tabs connected" ng-controller="QDR.NavBarController">
-                    <li ng-repeat="link in breadcrumbs" ng-show="isValid(link)" ng-class='{active : isActive(link.href), "pull-right" : isRight(link), haschart: hasChart(link)}'>
-                        <a ng-href="{{link.href}}{{hash}}" ng-bind-html="link.content | to_trusted"></a>
-                    </li>
-                </ul>
-                <div class="row-fluid">
-                    <div ng-view></div>
-                </div>
-            </div>
+            <div ng-include src="'plugin/html/qdrLayout.html'"></div>
         </div>
     </div>
 </div>
@@ -87,27 +75,27 @@ under the License.
     <script src="http://d3js.org/queue.v1.min.js"></script>
     <script src="http://d3js.org/topojson.v0.min.js"></script>
 
-    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
+    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
+
+    <script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
 
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular-sanitize.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular-resource.min.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.min.js"></script>
 
-    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
-    <script src="https://code.angularjs.org/1.4.8/angular-resource.js"></script>
-    <script src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
-    <script src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.0/ui-bootstrap-tpls.min.js"></script>
     <script src="https://cdn.rawgit.com/jaz303/tipsy/master/src/javascripts/jquery.tipsy.js"></script>
     <script src="https://cdn.rawgit.com/briancray/tooltipsy/master/tooltipsy.min.js"></script>
     <script src="https://cdn.rawgit.com/angular-ui/ui-slider/master/src/slider.js"></script>
-    <script src="https://cdn.rawgit.com/mohsen1/json-formatter/master/dist/json-formatter.min.js"></script>
-
     <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
 
-    <script type="text/javascript" src="plugin/js/qdrPlugin.js"></script>
+    <script type="text/javascript" src="plugin/js/dispatchPlugin.js"></script>
     <script type="text/javascript" src="plugin/js/qdrOverview.js"></script>
     <script type="text/javascript" src="plugin/js/navbar.js"></script>
     <script type="text/javascript" src="plugin/js/qdrList.js"></script>
+    <script type="text/javascript" src="plugin/js/qdrListChart.js"></script>
     <script type="text/javascript" src="plugin/js/qdrCharts.js"></script>
     <script type="text/javascript" src="plugin/js/qdrSchema.js"></script>
     <script type="text/javascript" src="plugin/js/qdrService.js"></script>
@@ -117,7 +105,7 @@ under the License.
 
     <script type="text/javascript" src="plugin/lib/rhea-min.js"></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.15.0/jquery.fancytree.js" type="text/javascript"></script>
+    <script src="https://cdn.rawgit.com/mar10/dynatree/master/dist/jquery.dynatree.min.js"></script>
 
     <script type="text/javascript">
         angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/d98ae37e/console/stand-alone/plugin/css/dispatch.css
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/css/dispatch.css b/console/stand-alone/plugin/css/dispatch.css
new file mode 100644
index 0000000..e59fa36
--- /dev/null
+++ b/console/stand-alone/plugin/css/dispatch.css
@@ -0,0 +1,640 @@
+/*
+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.
+*/
+
+svg {
+  background-color: transparent;
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+svg:not(.active):not(.ctrl) {
+  cursor: crosshair;
+}
+#end-arrow-selected, #start-arrow-selected {
+	stroke: #00F;
+	fill: #00F;
+}
+
+path.link {
+  fill: none;
+  stroke: #000;
+  stroke-width: 4px;
+  cursor: default;
+}
+
+svg:not(.active):not(.ctrl) path.link {
+  cursor: pointer;
+}
+
+path.link.selected {
+  stroke-dasharray: 10,2;
+  stroke: #00F  !important;
+}
+
+
+path.link.highlighted {
+    stroke: #0F0 !important;
+
+}
+
+path.link.temp {
+  opacity: 0.3;
+}
+path.link.temp.over {
+  opacity: 0.8;
+  stroke-dasharray: 10,2;
+}
+
+path.link.dragline {
+  pointer-events: none;
+}
+
+path.link.hidden {
+  stroke-width: 0;
+}
+
+
+circle.node {
+    stroke-width: 1.5px;
+    cursor: pointer;
+    stroke: darkgray;
+    fill: lightgray;
+}
+
+circle.node.reflexive {
+    stroke: #F00 !important;
+    stroke-width: 2.5px;
+}
+circle.node.selected {
+    stroke: #F00 !important;
+    stroke-width: 2px;
+    fill: #e0e0ff !important;
+}
+circle.node.inter-router {
+    fill: #EAEAEA;
+}
+circle.node.normal {
+    fill: #F0F000;
+}
+circle.node.on-demand {
+    fill: #C0FFC0;
+}
+circle.node.on-demand.artemis {
+	fill: #FCC;
+	/*opacity: 0.2; */
+}
+
+circle.node.fixed {
+    stroke-dasharray: 10,2;
+}
+circle.node.temp {
+    stroke: #f80;
+    fill: #f0f0ff;
+}
+
+text {
+  font: 12px sans-serif;
+  pointer-events: none;
+  /*font-family: monospace;*/
+
+}
+
+.tooltipsy
+{
+    padding: 10px;
+/*    max-width: 320px;*/
+    color: #303030;
+    background-color: #fcfcfe;
+    border: 1px solid #deca7e;
+    border-radius: 5px;
+}
+
+.tiptable {
+
+}
+.tiptable tr {
+	border-bottom: 1px solid #ccc;
+}
+
+.tiptable tr:last-child {
+	border-bottom: 0px;
+}
+
+.tiptable tr:nth-child(even) {
+	background: #fcfcfe;
+}
+.tiptable tr:nth-child(odd) {
+	background: #FFF
+}
+
+text.id {
+  text-anchor: middle;
+  font-weight: bold;
+}
+
+text.label {
+  text-anchor: start;
+  font-weight: bold;
+}
+
+.row-fluid.tertiary {
+  position: relative;
+  left: 20px;
+}
+
+.row-fluid.tertiary.left {
+  float: left;
+}
+
+.row-fluid.tertiary.panel {
+  width: 410px;
+  /*height: 100%; */
+}
+
+div#topologyForm .ngViewport, div#topologyForm .gridStyle {
+    height: inherit !important;
+	min-height: initial !important;
+	overflow: initial;
+}
+
+div#multiple_details, div#link_details {
+	height: 300px;
+	width: 600px;
+	display: none;
+	padding: 0.5em;
+    border: 1px solid;
+	position: absolute;
+	background-color: white;
+	max-height: 330px !important;
+    overflow: hidden;
+}
+div#multiple_details div.ngRow.selected {
+	background-color: #c9dde1 !important;
+}
+
+div.grid-values {
+	text-align: right;
+}
+
+div.grid-values.ngCellText span {
+	padding-right: 4px;
+}
+
+.panel-adjacent {
+  margin-left: 430px;
+}
+
+#topologyForm.selected {
+  border: 1px solid red;
+}
+#topologyForm {
+    border: 1px solid white;
+    padding: 2px;
+    /* position: relative; */
+    /* top: -8px; */
+}
+div.qdr-topology.pane.left .ngViewport {
+    /* border: 1px solid lightgray; */
+}
+
+#topologyForm > div {
+  width:396px;
+}
+
+/* globe */
+.land {
+  fill: #999;
+  stroke-opacity: 1;
+}
+
+.graticule {
+  fill: none;
+  stroke: black;
+  stroke-width:.5;
+  opacity:.1;
+}
+
+.labels {
+    font: 18px sans-serif;
+    fill: black;
+    opacity: .85;
+	text-anchor: middle;
+}
+
+.noclicks { pointer-events:none; }
+
+.point {  opacity:.6; }
+
+.arcs {
+  opacity:.7;
+  stroke: darkgreen;
+  stroke-width: 3;
+}
+.flyers {
+  stroke-width:1;
+  opacity: 0;
+  stroke: darkred;
+}
+.arc, .flyer {
+  stroke-linejoin: round;
+  fill:none;
+}
+.arc { }
+.arc:hover {
+  stroke: darkred;
+}
+.flyer { }
+.flyer:hover {
+  stroke: darkgreen;
+}
+.arc.inter-router {
+  stroke: darkblue;
+}
+
+#addNodeForm {
+  padding: 1em;
+}
+
+
+li.currentStep {
+  font-weight: bold;
+}
+
+.qdrTopology div.panel {
+  position: absolute;
+}
+/*
+.ui-dialog-titlebar {
+    border: 0;
+    background: transparent;
+}
+*/
+
+/*
+.ui-tabs.ui-tabs-vertical {
+    padding: 0;
+    width: 48em;
+}
+.ui-tabs.ui-tabs-vertical .ui-widget-header {
+    border: none;
+}
+.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
+    float: left;
+    width: 10em;
+    background: #CCC;
+    border-radius: 4px 0 0 4px;
+    border-right: 1px solid gray;
+}
+.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
+    clear: left;
+    width: 100%;
+    margin: 0.1em 0;
+    border: 1px solid gray;
+    border-width: 1px 0 1px 1px;
+    border-radius: 4px 0 0 4px;
+    overflow: hidden;
+    position: relative;
+    right: -2px;
+    z-index: 2;
+}
+.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
+    display: block;
+    width: 100%;
+    padding: 0.1em 1em;
+}
+.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
+    cursor: pointer;
+}
+.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
+    margin-bottom: 0.2em;
+    padding-bottom: 0;
+    border-right: 1px solid white;
+}
+.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
+    margin-bottom: 10px;
+}
+.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
+    float: left;
+    width: 34em;
+    border-left: 1px solid gray;
+    border-radius: 0;
+    position: relative;
+    left: -1px;
+}
+
+.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
+    right: -3px !important;
+}
+
+.ui-tabs li i.ui-icon {
+    display: inline-block;
+}
+*/
+.ui-tabs .ui-tabs-panel {
+    /* padding-top: 0 !important; */
+}
+
+.ui-widget-content fieldset {
+  float: left;
+  padding: 0 1em 0 0;
+}
+
+.entity-description {
+  color: #960;
+  font-size: 90%;
+}
+
+.attr-description {
+  padding-top: 1.5em;
+  float: right;
+  width: 17em;
+}
+.attr-annotations {
+    padding-top: 2.5em;
+    clear: both;
+}
+.attr-annotations > span {
+    padding-top: 0.5em;
+    border-top: 1px dashed darkgray;
+    display: block;
+}
+
+.attr-type {
+    color: #990;
+    font-size: 85%;
+}
+.attr-required {
+    color: red;
+    font-size: 85%;
+}
+.attr-unique {
+    color: green;
+    font-size: 85%;
+}
+
+#tabs.nodeEntities {
+  border: 0;
+}
+
+#tabs ul.nodeTabs {
+  background: #fff;
+}
+
+#tabs #Container {
+  border-left: 1px solid #aaa;
+}
+
+#tabs.ui-tabs .ui-tabs-nav li {
+  border-bottom: 1px solid #aaa !important;
+}
+
+.entity-fields {
+  /* height: 400px; */
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+div.boolean label:first-child {
+    float: left;
+    margin-right: 1em;
+}
+div.boolean {
+    padding-bottom: 1em;
+}
+
+.entity-fields label {
+    font-weight: 600;
+    margin-top: 0.5em;
+	display: inline;
+}
+
+.aggregate {
+	text-align: right;
+}
+
+.aggregate i {
+	float: right;
+    margin: 3px 3px 3px 8px;
+}
+
+.aggregate .hastip {
+	padding: 5px;
+}
+
+.subTip .tipsy-inner {
+	background-color: white;
+	color: black;
+	font-size: 1.3em;
+	border: 1px solid black;
+}
+
+.subTip .tipsy-arrow-n { border-bottom-color: black; }
+.subTip .tipsy-arrow-s { border-top-color: black; }
+.subTip .tipsy-arrow-e { border-left-color: black; }
+.subTip .tipsy-arrow-w { border-right-color: black; }
+
+
+.contextMenu {
+    display:none;
+	position:absolute;
+	left:30px;
+	top:-30px;
+	z-index:999;
+	/* width:300px; */
+}
+.contextMenu ul {
+	width:300px;
+	margin:0;
+	/* padding:10px; */
+	list-style:none;
+	background:#fff;
+	color:#333;
+    font-weight: 600;
+	/* -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; */
+	-moz-box-shadow:5px 5px 5px #ddd; -webkit-box-shadow:5px 5px 5px #999; box-shadow:5px 5px 5px #ddd;
+	border: 1px solid #aaa;
+}
+.contextMenu ul li {
+	padding:5px 10px;
+	/* border-bottom: solid 1px #ccc; */
+}
+.contextMenu ul li:hover {
+	background:#4a90d9; color:#fff;
+}
+.contextMenu ul li:last-child {
+    border:none;
+}
+
+.na {
+    display: none;
+}
+.contextMenu ul li.new {
+    display: block;
+}
+.contextMenu ul li.adding, .contextMenu ul li.adding + li {
+    display: block;
+}
+.contextMenu ul li.force-display {
+    display: block;
+}
+.contextMenu ul li.context-separator {
+    background-color: lightgray;
+    height: 1px;
+    padding: 0;
+}
+
+.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.separated {
+    margin-top: 1em;
+}
+
+#crosssection {
+    display: none;
+    position: absolute;
+    top: 200px;
+    left: 600px;
+}
+
+.node circle {
+/*  fill: rgb(31, 119, 180);
+  fill-opacity: .25; */
+  fill: #cfe2f3;
+  fill-opacity: .98;
+  stroke: black;
+  stroke-width: 3px;
+}
+
+circle.subcircle {
+    stroke-width: 1px;
+    /* stroke-dasharray: 2; */
+    fill-opacity: 0;
+    stroke: darkgray;
+}
+
+.leaf circle {
+  fill: #6fa8dc;
+  fill-opacity: 0.95;
+  stroke-width: 3px;
+}
+
+.leaf circle[title] {
+    font-family: monospace;
+
+}
+
+#svg_legend {
+    position: absolute;
+    top: 110px;
+    right: 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #fcfcfc;
+    margin-right: 1.3em;
+	padding: 1em;
+}
+
+#svg_legend svg {
+    height: 235px;
+    width: 180px;
+}
+
+#multiple_details div.gridStyle {
+/*	height: 50em; */
+	min-height: 70px !important;
+	height: auto !important;
+}
+
+#multiple_details .ngViewport {
+    height: auto !important;
+}
+
+#multiple_details .gridCellButton button, #link_details .gridCellButton button {
+    margin: .25em .4em;
+    font-size: 12px;
+    height: 2em;
+	padding-top: .1em;
+}
+
+#linkFilter {
+	display: none;
+	padding: 0.5em;
+	border: 1px solid grey;
+	background-color: #F0F0F0;
+	position: absolute;
+}
+
+span.filter-icon {
+	padding-left: 1em;
+}
+
+button.filter-close {
+    width: 15px;
+    height: 20px;
+    padding: 0;
+    position: absolute;
+    right: 4px;
+    top: 4px;
+}
+
+div.filter-title h6 {
+	margin: 0;
+}
+
+.links button.btn-filter {
+	padding: 0 1em 0 0;
+    margin-left: 1em;
+    font-size: 1em;
+}
+
+button.btn-filter {
+	visibility: hidden;
+}
+span.dynatree-expanded button.btn-filter,
+a.dynatree-title:hover button.btn-filter {
+ 	visibility: visible;
+}
+
+div.hdash-button a {
+	color: white;
+}
+
+.linkDirIn {
+	color: red;
+	background-color: #f3f3f3;
+}
+
+.linkDirOut {
+	color: blue;
+	background-color: white;
+}
+
+div.topoGrid .ui-grid-viewport {
+	overflow: hidden !important;
+}
+
+@-moz-document url-prefix() {
+    .btn {padding: 2px 12px 8px !important;}
+}
+
+.ui-fancytree.fancytree-container {
+	font-size: 14px;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/d98ae37e/console/stand-alone/plugin/css/plugin.css
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/css/plugin.css b/console/stand-alone/plugin/css/plugin.css
index 0d9f34d..db318cf 100644
--- a/console/stand-alone/plugin/css/plugin.css
+++ b/console/stand-alone/plugin/css/plugin.css
@@ -21,37 +21,6 @@ main-display > .span8 {
   position: relative;
 }
 
-.nickname-window,
-.channel-window,
-.main-window {
-  position: absolute;
-  top: 2px;
-  bottom: 2px;
-  left: 4px;
-  right: 4px;
-  /* border: 1px solid #d4d4d4;
-  border-radius: 4px;*/
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.nickname-window > .nickname-window-inner,
-.channel-window > .channel-window-inner,
-.main-window > .main-window-inner {
-  position: static;
-}
-
-.channel-window-inner > ul > li {
-  cursor: pointer;
-  padding: 0;
-  border-bottom: 1px solid #EEEEEE;
-}
-
-
-.channel-window-inner > ul > li > span:hover {
-  background-color: #EAEAEA;
-}
-
 ul.qdrListNodes > li > span {
   padding: 6px 20px; 6px; 6px;
   display: block;
@@ -65,12 +34,11 @@ ul.qdrListNodes > li > span {
 
 
 .qdrList div.gridDetails {
-
     width: auto;
 }
 
 .selectedItems {
-    margin-left: 21em;
+    /* margin-left: 21em; */
 }
 
 .qdrListPane {
@@ -81,93 +49,13 @@ ul.qdrListNodes > li > span {
     width: auto;
 }
 
-.nickname-window-inner > ul > li {
-  cursor: pointer;
-}
-
-.channel-window {
-  bottom: 40px;
-}
-
-.main-window {
-  border: none;
-  top: 46px;
-  bottom: 46px;
-}
-
-.main-window.no-topic {
-  top: 2px;
-}
-
-.topic-window {
-  position: absolute;
-  left: 10px;
-  right: 10px;
-  top: 2px;
-  height: 20px;
-  overflow: hidden;
-  z-index: 50;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-left: 1px solid #d4d4d4;
-  border-right: 1px solid #d4d4d4;
-  border-bottom: 1px solid #d4d4d4;
-  background: white;
-  padding: 10px;
-}
-
-.input-widget {
-  background: white;
-  position: absolute;
-  bottom: 2px;
-  left: 2px;
-  right: 2px;
-  height: 40px;
-  z-index: 50;
-}
-
-.input-widget > form {
-  position: relative;
-}
-
-.input-widget > form > div {
-  position: absolute;
-  left: 2px;
-  top: 2px;
-  bottom: 2px;
-  right: 84px;
-}
-
-.input-widget > form > div > input[type="text"] {
-  width: 100%;
-}
-
-.input-widget > form > input[type="submit"] {
-  position: absolute;
-  right: 2px;
-  top: 3px;
-}
-
-.input-widget > form > input {
-  margin-bottom: 0;
-}
-
-.channel-control-buttons {
-  position: absolute;
-  background: white;
-  bottom: 2px;
-  left: 2px;
-  right: 2px;
-  z-index: 50;
-}
-
 div.listAttrName {
     padding-top: 5px;
 }
 
 div.listAttrName i.icon-bar-chart {
     float: right;
-    margin: 5px;
+    margin: 3px 5px;
 }
 
 div.listAttrName i.icon-bar-chart.active, div.hastip i.icon-bar-chart.active, li.haschart i {
@@ -221,25 +109,48 @@ div.centered {
 	margin: 0;
 }
 
+/* dialog */
 div.aChart {
     height: 200px;
     width:  400px;
     margin: 1em;
 }
 
+/* dashboard */
+div.aChart.hDash {
+	/* width: 21em; */
+	/* height: 17em; */
+	width: 100%;
+	height: 87%;
+	margin: 0;
+	padding: 0;
+
+}
 div.chartContainer {
     float: left;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
 }
 
-div.d3Chart path {
-    stroke: black;
+/* the x and y axis lines */
+.d3Chart g.axis path.domain {
     stroke-width: 1;
-	opacity: 0.5;
+    stroke: black;
+}
+
+/* the line surrounding the area chart */
+div.d3Chart path {
+/*    stroke: black; */
+    stroke-width: 0;
+/*	opacity: 0.5; */
 }
 
+/* the line above the area chart */
+/* the color gets overridden */
 div.d3Chart path.line {
     stroke: steelblue;
-    stroke-width: 1;
+    stroke-width: 1.5;
     fill: none;
     opacity: 1;
 }
@@ -300,6 +211,9 @@ div.d3Chart {
     padding: 1em 0;
     border: 1px solid #C0C0C0;
 }
+div.d3Chart.hDash {
+    border: 0px;
+}
 
 div.d3Chart .axis path {
 	display: inherit;
@@ -342,6 +256,10 @@ div.chartContainer div.aChart {
     margin-top: 0.5em;
 }
 
+div.qdr-attributes .tree-header select {
+	width: 100%;
+}
+
 div#main.qdr div ul.nav li.active a {
   background-color: #e0e0ff !important;
   color: #000000;
@@ -353,9 +271,20 @@ div#main.qdr .selected, .box.selected {
 }
 
 /* the selected node on the list page */
-div.qdrList li.active {
+div.qdrList li.active, ul.qdrListNodes li.active {
+    background-color: #e0e0ff;
+}
+
+div.qdr-attributes span.dynatree-selected a {
     background-color: #e0e0ff;
 }
+div.qdr-attributes.pane, div.qdr-topology.pane {
+	position: absolute;
+	margin-left: 10px;
+}
+div.qdr-topology.pane.left {
+	width: auto;
+}
 
 /* the selected row in the name table */
 div#main.qdr div.qdrList div.selected {
@@ -431,7 +360,10 @@ div.chartOptions span.minicolors-swatch {
     padding: 0 0 0 24px !important;
 }
 
-
+div.colorPicker div.colorText {
+	display: inline-block;
+	width: 10em;
+}
 div.colorPicker div:nth-of-type(1), /* first span under div.colorPicker */
  div.minicolors{
     float:left;
@@ -468,6 +400,9 @@ div.tabbable .tab-pane {
     border-left: 1px solid #ddd;
     border-bottom: 1px solid #ddd;
 }
+div.dlg-large div.tabbable .tab-pane {
+	margin-left: 11em;
+}
 
 div.tabbable ul.nav-tabs {
   margin-bottom: 0;
@@ -497,15 +432,34 @@ ul.qdrTopoModes {
 	text-align: right;
 }
 
+.grid-align-value .ngCellText {
+	padding-right: 10px;
+}
+
 .overview .ngRow:hover {
 	background:#e0e0ff;
 }
 
+.qdr-overview.pane.left, .qdr-attributes.pane.left {
+	top: 100px;
+}
+.qdr-topology.pane.left {
+	top: 104px;
+}
+.qdr-overview.pane.left, .qdr-attributes.pane.left, .qdr-topology.pane.left {
+	left: 10px;
+}
+
 .treeContainer {
 	width: 250px;
 	float: left;
 }
 
+#entityNames {
+    width: 20em;
+    float: left;
+}
+
 .treeDetails {
 	margin-left: 260px;
 }
@@ -545,8 +499,10 @@ div.chartOptions label:nth-of-type(2) {
 }
 div.chartOptions label {
 	font-weight: normal;
+	display: inline-block;
 }
 
+/*
 .form-horizontal .control-label {
     float: left;
     width: 160px;
@@ -593,16 +549,18 @@ input[type="text"], input[type="number"], input[type="password"] {
 .login input[type="checkbox"] {
 	margin-top: 0.75em;
 }
+*/
 
-#login-container {
-	width: 18.5em;
+#dispatch-login-container {
+	/* width: 18.5em; */
 	margin-top: 2em;
 }
-
+/*
 div.login.container {
-/*	width: 550px; */
-	margin-top: 4em;
+	width: 550px;
 }
+*/
+
 
 #overtree .fancytree-container {
 	border: 0px;
@@ -657,6 +615,201 @@ div.login.container {
   opacity:1;
 }
 
+.overview .table-striped tr:hover  td {
+	background-color: #e0e0ff !important;
+}
+
+#entityNames div.ngViewport {
+	overflow-x: hidden;
+}
+
+.connect-column.connect-form {
+	width: 20em;
+}
+
+.chartLabels button a {
+	text-decoration: none;
+}
+
+.fancytree-ico-c.router .fancytree-icon {
+
+}
+
+.tabs-left .nav-tabs {
+	float: left;
+}
+.tabs-left .nav-tabs > li {
+/*	float: initial; */
+}
+
+div.modal.dlg-large {
+	width: 53em;
+}
+
+button.hdash-button a {
+	text-decoration: none;
+	color: #fff;
+}
+
+div.widget-body > div {
+	height: 100%;
+}
+
+div.qdrCharts {
+	height: 100%;
+}
+
+ul.dispatch-view {
+	margin-bottom: 0 !important;
+}
+
+.qdr-overview.pane.left span:not(.dynatree-has-children) .dynatree-icon:before,
+.qdr-attributes.pane.left span:not(.dynatree-has-children) .dynatree-icon:before {
+    color: green;
+}
+
+span:not(.dynatree-has-children).address .dynatree-icon:before,
+span:not(.dynatree-has-children).router\.address .dynatree-icon:before {
+    content: "\f0ac";
+}
+
+span:not(.dynatree-has-children).connection.external .dynatree-icon:before,
+span:not(.dynatree-has-children).connection.normal .dynatree-icon:before {
+    content: "\f08e";
+}
+span:not(.dynatree-has-children).connection.external.quiesced .dynatree-icon:before {
+	content: "\f14c";
+	color: red;
+}
+
+span:not(.dynatree-has-children).connection.inter-router .dynatree-icon:before {
+     content: "\f152";
+}
+span:not(.dynatree-has-children).no-data .dynatree-icon:before {
+     content: "\f05e";
+     color: red !important;
+}
+span:not(.dynatree-has-children).loading .dynatree-icon:before {
+     content: "\f254";
+}
+span:not(.dynatree-has-children).router\.node .dynatree-icon:before {
+     content: "\f013";
+}
+span:not(.dynatree-has-children).connector .dynatree-icon:before {
+     content: "\f126";
+}
+span:not(.dynatree-has-children).container .dynatree-icon:before {
+     content: "\f16c";
+}
+span:not(.dynatree-has-children).log .dynatree-icon:before {
+     content: "\f0f6";
+}
+span:not(.dynatree-has-children).router\.link.inter-router .dynatree-icon:before {
+     content: "\f04e";
+}
+span:not(.dynatree-has-children).router\.link.endpoint .dynatree-icon:before {
+     content: "\f051";
+}
+span:not(.dynatree-has-children).listener .dynatree-icon:before {
+     content: "\f025";
+}
+span:not(.dynatree-has-children).connection .dynatree-icon:before {
+     content: "\f07e";
+}
+span:not(.dynatree-has-children).waypoint .dynatree-icon:before {
+     content: "\f0ec";
+}
+span:not(.dynatree-has-children).router .dynatree-icon:before {
+     content: "\f047";
+}
+span:not(.dynatree-has-children).fixedAddress .dynatree-icon:before {
+     content: "\f015";
+}
+span:not(.dynatree-has-children).linkRoutePattern .dynatree-icon:before {
+     content: "\f039";
+}
+span:not(.dynatree-has-children).allocator .dynatree-icon:before {
+     content: "\f170";
+}
+
+.ngCellText {
+/*    color: #333333; */
+}
+
+.changed {
+    color: #339933;
+}
+
+div.dispatch-router div.help {
+    width: auto;
+    padding: 1em;
+    background-color: lavender;
+    border-radius: 6px;
+    margin-top: 1em;
+    text-align: center;
+}
+
+div.operations tr:nth-child(even) {
+	background: #f3f3f3;
+}
+div.operations tr:nth-child(odd), div.operations tr:last-child {
+	background: #fff;
+}
+
+div.operations tr input {
+	margin: 0;
+	padding: 3px 6px;
+}
+div.operations table {
+    width: 100%;
+}
+div.operations th {
+    width: 50%;
+    border-bottom: 1px solid #cccccc;
+    text-align: left;
+}
+div.operations td:nth-child(odd), div.operations th:nth-child(odd) {
+	border-right: 1px solid #cccccc;
+}
+div.operations td:nth-child(odd) {
+	padding-left: 0;
+}
+div.operations td:nth-child(even), div.operations th:nth-child(even) {
+	padding-left: 5px;
+}
+div.operations th {
+	padding: 5px;
+}
+div.operations .tab-pane.active {
+    padding: 12px 12px 12px 0;
+}
+div.operations label {
+    padding-top: 4px;
+    margin-bottom: 4px;
+}
+.qdrListActions .ngGrid {
+	/*min-height: 40em;
+	height: 100%; */
+}
+div.qdrListActions .ngViewport {
+    height: initial !important;
+}
+
+div.operations .boolean {
+    padding-bottom: 0;
+}
+
+table.log-entry {
+    margin-bottom: 1em;
+    border-top: 1px solid black;
+}
+
+table.log-entry pre {
+    background-color: #f5f5f5;
+    color: inherit;
+    margin: 0;
+}
+
 circle.node.normal.console {
     fill: lightcyan;
 }
@@ -683,3 +836,39 @@ text.qpid-cpp.on-demand {
     font-size: 18px;
     font-weight: bold;
 }
+
+i.red {
+	color: red;
+}
+
+.qdrListActions div.delete {
+    width: 20em;
+    margin: auto;
+    border: 1px solid #eaeaea;
+    height: 5em;
+    padding: 4em;
+    background-color: #fcfcfc;
+}
+
+.btn:focus {
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+
+select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
+	outline:3px solid rgba(82, 168, 236, 0.6);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}
+
+btn.disabled, .btn[disabled] {
+    opacity: 0.35;
+}
+
+#dispatch-login-container .ng-invalid-range {
+	border-color: #e9322d !important;
+}
+
+div#durationSlider, div#rateSlider {
+	margin-top: 1em;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/d98ae37e/console/stand-alone/plugin/css/qdrTopology.css
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/css/qdrTopology.css b/console/stand-alone/plugin/css/qdrTopology.css
deleted file mode 100644
index f8cffed..0000000
--- a/console/stand-alone/plugin/css/qdrTopology.css
+++ /dev/null
@@ -1,562 +0,0 @@
-/*
-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.
-*/
-
-svg {
-  background-color: transparent;
-  cursor: default;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-}
-
-svg:not(.active):not(.ctrl) {
-  cursor: crosshair;
-}
-#end-arrow-selected, #start-arrow-selected {
-	stroke: #00F;
-	fill: #00F;
-}
-
-path.link {
-  fill: none;
-  stroke: #000;
-  stroke-width: 4px;
-  cursor: default;
-}
-
-svg:not(.active):not(.ctrl) path.link {
-  cursor: pointer;
-}
-
-path.link.selected {
-  stroke-dasharray: 10,2;
-  stroke: #00F  !important;
-}
-
-
-path.link.highlighted {
-    stroke: #0F0 !important;
-
-}
-
-path.link.temp {
-  opacity: 0.3;
-}
-path.link.temp.over {
-  opacity: 0.8;
-  stroke-dasharray: 10,2;
-}
-
-path.link.dragline {
-  pointer-events: none;
-}
-
-path.link.hidden {
-  stroke-width: 0;
-}
-
-
-circle.node {
-    stroke-width: 1.5px;
-    cursor: pointer;
-    stroke: darkgray;
-    fill: lightgray;
-}
-
-circle.node.reflexive {
-    stroke: #F00 !important;
-    stroke-width: 2.5px;
-}
-circle.node.selected {
-    stroke: #F00 !important;
-    stroke-width: 2px;
-    fill: #e0e0ff !important;
-}
-circle.node.inter-router {
-    fill: #EAEAEA;
-}
-circle.node.normal {
-    fill: #F0F000;
-}
-circle.node.on-demand {
-    fill: #C0FFC0;
-}
-circle.node.on-demand.artemis {
-	fill: #FCC;
-	/*opacity: 0.2; */
-}
-
-circle.node.fixed {
-    stroke-dasharray: 10,2;
-}
-circle.node.temp {
-    stroke: #f80;
-    fill: #f0f0ff;
-}
-
-text {
-  font: 12px sans-serif;
-  pointer-events: none;
-  /*font-family: monospace;*/
-
-}
-
-.tooltipsy
-{
-    padding: 10px;
-/*    max-width: 320px;*/
-    color: #303030;
-    background-color: #fcfcfe;
-    border: 1px solid #deca7e;
-    border-radius: 5px;
-}
-
-.tiptable {
-
-}
-.tiptable tr {
-	border-bottom: 1px solid #ccc;
-}
-
-.tiptable tr:last-child {
-	border-bottom: 0px;
-}
-
-.tiptable tr:nth-child(even) {
-	background: #fcfcfe;
-}
-.tiptable tr:nth-child(odd) {
-	background: #FFF
-}
-
-text.id {
-  text-anchor: middle;
-  font-weight: bold;
-}
-
-text.label {
-  text-anchor: start;
-  font-weight: bold;
-}
-
-.row-fluid.tertiary {
-  position: relative;
-  left: 20px;
-}
-
-.row-fluid.tertiary.left {
-  float: left;
-}
-
-.row-fluid.tertiary.panel {
-  width: 410px;
-  /*height: 100%; */
-}
-
-/*, div.qdrTopology div#multiple_details .ngViewport*/
-div#topologyForm .ngViewport, div#topologyForm .gridStyle {
-    height: inherit !important;
-	min-height: initial !important;
-	overflow: initial;
-}
-
-div#multiple_details {
-	height: 300px;
-	width: 500px;
-	display: none;
-	padding: 1em;
-    border: 1px solid;
-	position: absolute;
-	background-color: white;
-	max-height: 330px !important;
-    overflow: hidden;
-}
-
-.panel-adjacent {
-  margin-left: 430px;
-}
-
-#topologyForm.selected {
-  border: 1px solid red;
-}
-#topologyForm {
-    border: 1px solid white;
-    padding: 2px;
-    /* position: relative; */
-    /* top: -8px; */
-}
-div.qdr-topology.pane.left .ngViewport {
-    /* border: 1px solid lightgray; */
-}
-
-#topologyForm > div {
-  width:396px;
-}
-
-/* globe */
-.land {
-  fill: #999;
-  stroke-opacity: 1;
-}
-
-.graticule {
-  fill: none;
-  stroke: black;
-  stroke-width:.5;
-  opacity:.1;
-}
-
-.labels {
-    font: 18px sans-serif;
-    fill: black;
-    opacity: .85;
-	text-anchor: middle;
-}
-
-.noclicks { pointer-events:none; }
-
-.point {  opacity:.6; }
-
-.arcs {
-  opacity:.7;
-  stroke: darkgreen;
-  stroke-width: 3;
-}
-.flyers {
-  stroke-width:1;
-  opacity: 0;
-  stroke: darkred;
-}
-.arc, .flyer {
-  stroke-linejoin: round;
-  fill:none;
-}
-.arc { }
-.arc:hover {
-  stroke: darkred;
-}
-.flyer { }
-.flyer:hover {
-  stroke: darkgreen;
-}
-.arc.inter-router {
-  stroke: darkblue;
-}
-
-#addNodeForm {
-  padding: 1em;
-}
-
-
-li.currentStep {
-  font-weight: bold;
-}
-
-.qdrTopology div.panel {
-  position: absolute;
-}
-/*
-.ui-dialog-titlebar {
-    border: 0;
-    background: transparent;
-}
-*/
-
-/*
-.ui-tabs.ui-tabs-vertical {
-    padding: 0;
-    width: 48em;
-}
-.ui-tabs.ui-tabs-vertical .ui-widget-header {
-    border: none;
-}
-.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
-    float: left;
-    width: 10em;
-    background: #CCC;
-    border-radius: 4px 0 0 4px;
-    border-right: 1px solid gray;
-}
-.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
-    clear: left;
-    width: 100%;
-    margin: 0.1em 0;
-    border: 1px solid gray;
-    border-width: 1px 0 1px 1px;
-    border-radius: 4px 0 0 4px;
-    overflow: hidden;
-    position: relative;
-    right: -2px;
-    z-index: 2;
-}
-.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
-    display: block;
-    width: 100%;
-    padding: 0.1em 1em;
-}
-.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
-    cursor: pointer;
-}
-.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
-    margin-bottom: 0.2em;
-    padding-bottom: 0;
-    border-right: 1px solid white;
-}
-.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
-    margin-bottom: 10px;
-}
-.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
-    float: left;
-    width: 34em;
-    border-left: 1px solid gray;
-    border-radius: 0;
-    position: relative;
-    left: -1px;
-}
-
-.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
-    right: -3px !important;
-}
-
-.ui-tabs li i.ui-icon {
-    display: inline-block;
-}
-*/
-.ui-tabs .ui-tabs-panel {
-    /* padding-top: 0 !important; */
-}
-
-.ui-widget-content fieldset {
-  float: left;
-  padding: 0 1em 0 0;
-}
-
-.entity-description {
-  color: #960;
-  font-size: 90%;
-}
-
-.attr-description {
-  padding-top: 1.5em;
-  float: right;
-  width: 17em;
-}
-.attr-annotations {
-    padding-top: 2.5em;
-    clear: both;
-}
-.attr-annotations > span {
-    padding-top: 0.5em;
-    border-top: 1px dashed darkgray;
-    display: block;
-}
-
-.attr-type {
-    color: #990;
-    font-size: 85%;
-}
-.attr-required {
-    color: red;
-    font-size: 85%;
-}
-.attr-unique {
-    color: green;
-    font-size: 85%;
-}
-
-#tabs.nodeEntities {
-  border: 0;
-}
-
-#tabs ul.nodeTabs {
-  background: #fff;
-}
-
-#tabs #Container {
-  border-left: 1px solid #aaa;
-}
-
-#tabs.ui-tabs .ui-tabs-nav li {
-  border-bottom: 1px solid #aaa !important;
-}
-
-.entity-fields {
-  /* height: 400px; */
-  overflow-y: scroll;
-  overflow-x: hidden;
-}
-
-div.boolean label:first-child {
-    float: left;
-    margin-right: 1em;
-}
-div.boolean {
-    padding-bottom: 1em;
-}
-
-.entity-fields label {
-    font-weight: 600;
-    margin-top: 0.5em;
-	display: inline;
-}
-
-.aggregate {
-	text-align: right;
-}
-
-.aggregate i {
-	float: right;
-    margin: 3px 3px 3px 8px;
-}
-
-.aggregate .hastip {
-	padding: 5px;
-}
-
-.subTip .tipsy-inner {
-	background-color: white;
-	color: black;
-	font-size: 1.3em;
-	border: 1px solid black;
-}
-
-.subTip .tipsy-arrow-n { border-bottom-color: black; }
-.subTip .tipsy-arrow-s { border-top-color: black; }
-.subTip .tipsy-arrow-e { border-left-color: black; }
-.subTip .tipsy-arrow-w { border-right-color: black; }
-
-
-.contextMenu {
-    display:none;
-	position:absolute;
-	left:30px;
-	top:-30px;
-	z-index:999;
-	/* width:300px; */
-}
-.contextMenu ul {
-	width:300px;
-	margin:0;
-	/* padding:10px; */
-	list-style:none;
-	background:#fff;
-	color:#333;
-    font-weight: 600;
-	/* -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; */
-	-moz-box-shadow:5px 5px 5px #ddd; -webkit-box-shadow:5px 5px 5px #999; box-shadow:5px 5px 5px #ddd;
-	border: 1px solid #aaa;
-}
-.contextMenu ul li {
-	padding:5px 10px;
-	/* border-bottom: solid 1px #ccc; */
-}
-.contextMenu ul li:hover {
-	background:#4a90d9; color:#fff;
-}
-.contextMenu ul li:last-child {
-    border:none;
-}
-
-.na {
-    display: none;
-}
-.contextMenu ul li.new {
-    display: block;
-}
-.contextMenu ul li.adding, .contextMenu ul li.adding + li {
-    display: block;
-}
-.contextMenu ul li.force-display {
-    display: block;
-}
-.contextMenu ul li.context-separator {
-    background-color: lightgray;
-    height: 1px;
-    padding: 0;
-}
-
-.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.separated {
-    margin-top: 1em;
-}
-
-#crosssection {
-    display: none;
-    position: absolute;
-    top: 200px;
-    left: 600px;
-}
-
-.node circle {
-/*  fill: rgb(31, 119, 180);
-  fill-opacity: .25; */
-  fill: #cfe2f3;
-  fill-opacity: .98;
-  stroke: black;
-  stroke-width: 3px;
-}
-
-circle.subcircle {
-    stroke-width: 1px;
-    /* stroke-dasharray: 2; */
-    fill-opacity: 0;
-    stroke: black;
-}
-
-.leaf circle {
-  fill: #6fa8dc;
-  fill-opacity: 0.95;
-  stroke-width: 3px;
-}
-
-.leaf circle[title] {
-    font-family: monospace;
-
-}
-
-#svg_legend {
-    position: absolute;
-    top: 110px;
-    right: 0;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    background-color: #fcfcfc;
-    margin-right: 1.3em;
-	padding: 1em;
-}
-
-#svg_legend svg {
-    height: 235px;
-    width: 180px;
-}
-
-#multiple_details div.gridStyle {
-/*	height: 50em; */
-	min-height: 70px !important;
-	height: auto !important;
-}
-
-#multiple_details .ngViewport {
-    height: auto !important;
-}
-
-div.topoGrid .ui-grid-viewport {
-	overflow: hidden !important;
-}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/d98ae37e/console/stand-alone/plugin/css/site-base.css
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/css/site-base.css b/console/stand-alone/plugin/css/site-base.css
index e22476b..7c7ebf6 100644
--- a/console/stand-alone/plugin/css/site-base.css
+++ b/console/stand-alone/plugin/css/site-base.css
@@ -21,7 +21,7 @@ under the License.
 }
 
 * {
-    font-family: sans-serif;
+    font-family: 'Open Sans', sans-serif;
 }
 
 a:focus {
@@ -2004,8 +2004,8 @@ div#main div ul.nav li a.nav-primary .caret {
   font-size: 20px;
 }
 
-#main {
-  margin-top: 44px !important;
+div#main.qdr {
+  margin-top: 40px !important;
 }
 
 dd.file-list {
@@ -3344,7 +3344,7 @@ fs-donut svg g text.units {
 
 /* hack to work around strange tabset behavior */
 tabset > .tabbable > ul {
-  display: none;
+/*  display: none; */
 }
 /* end hack */
 
@@ -4504,3 +4504,224 @@ div#main div ul.nav {
     background-repeat: repeat-x;
     box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
 }
+
+ul.dynatree-container {
+  background: inherit;
+}
+ul.dynatree-container li {
+  background: inherit;
+}
+
+i.expandable-indicator {
+  color: #666;
+}
+
+span.dynatree-expander {
+  color: #728271;
+}
+
+span.dynatree-icon {
+  color: #EECA7C;
+}
+span:not(.dynatree-has-children) .dynatree-icon:before {
+  color: gray;
+}
+
+span.dynatree-empty,
+span.dynatree-vline,
+span.dynatree-connector,
+span.dynatree-expander,
+span.dynatree-icon,
+span.dynatree-checkbox,
+span.dynatree-radio,
+span.dynatree-drag-helper-img,
+#dynatree-drop-marker
+{
+    font-family: FontAwesome;
+    font-weight: normal;
+    font-style: normal;
+    display: inline-block;
+    text-decoration: inherit;
+    background-image: none;
+    vertical-align: middle;
+}
+
+.dynatree-checkbox {
+    color: #888888
+}
+
+/* Dynatree checkbox */
+span.dynatree-checkbox:before
+{
+    margin-top: 1px;
+    background-position: 0 0;
+    cursor: pointer;
+    content: "";
+}
+
+span.dynatree-checkbox:before:hover
+{
+    background-position: 0 0;
+    content: "";
+}
+
+.dynatree-selected span.dynatree-checkbox:before
+{
+    margin-top: 1px;
+    background-position: 0 0;
+    cursor: pointer;
+    content: "\f00c";
+}
+
+.dynatree-selected span.dynatree-checkbox:before:hover
+{
+    background-position: 0 0;
+    content: "\f00c";
+}
+
+
+.dynatree-expander {
+    color: #888888
+}
+
+/* Dynatree expander */
+span.dynatree-expander:before
+{
+    margin-top: 1px;
+    background-position: 0 0;
+    cursor: pointer;
+    content: "\f054";
+}
+
+span.dynatree-expander:before:hover
+{
+    background-position: 0 0;
+    content: "\f054";
+}
+
+.dynatree-exp-e span.dynatree-expander:before,  /* Expanded, not delayed, not last sibling */
+.dynatree-exp-ed span.dynatree-expander:before,  /* Expanded, delayed, not last sibling */
+.dynatree-exp-el span.dynatree-expander:before,  /* Expanded, not delayed, last sibling */
+.dynatree-exp-edl span.dynatree-expander:before  /* Expanded, delayed, last sibling */
+{
+    background-position: 0 0;
+    content: "\f078";
+}
+.dynatree-exp-e span.dynatree-expander:before:hover,  /* Expanded, not delayed, not last sibling */
+.dynatree-exp-ed span.dynatree-expander:before:hover,  /* Expanded, delayed, not last sibling */
+.dynatree-exp-el span.dynatree-expander:before:hover,  /* Expanded, not delayed, last sibling */
+.dynatree-exp-edl span.dynatree-expander:before:hover  /* Expanded, delayed, last sibling */
+{
+    background-position: 0 0;
+    content: "\f0da";
+}
+
+/* closed folder */
+.dynatree-ico-cf span.dynatree-icon:before {
+    background-position: 0 0;
+    content: "\f07b";
+}
+
+/* open folder */
+.dynatree-ico-ef span.dynatree-icon:before {
+    background-position: 0 0;
+    content: "\f07c";
+}
+
+span.dynatree-icon:before {
+    background-position: 0px 0px;
+    content: "\f013";
+}
+
+span.dynatree-folder a {
+    font-weight: normal;
+}
+
+div.treeContainer ul.dynatree-container {
+	border: 0px;
+}
+
+.pane {
+    position: fixed;
+    bottom: 0;
+    top: 70px;
+    height: auto;
+    width: 300px;
+}
+
+.pane>.pane-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+.pane.left .pane-viewport {
+    margin-left: 10px;
+    right: 5px;
+    margin-right: 0;
+}
+
+.pane-viewport {
+    border-top: 1px solid #d4d4d4;
+}
+.pane-viewport {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    margin-right: 10px;
+}
+
+.pane-content {
+    float: none;
+    position: static;
+}
+.pane-content {
+    width: auto;
+    height: auto;
+}
+
+.pane.left .pane-bar {
+    border-right: 1px solid #d4d4d4;
+}
+.pane.left .pane-bar, .pane.right {
+    right: 0;
+}
+.pane-bar {
+    background: white;
+}
+.pane-bar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 5px;
+    cursor: ew-resize;
+    height: 100%;
+}
+
+div#overview-controller, div#list-controller {
+	padding-left: 300px;
+}
+
+.ngViewport.ng-scope{
+    height: auto !important;
+    overflow-y: hidden;
+}
+
+.ngTopPanel.ng-scope, .ngHeaderContainer{
+    width: auto !important;
+}
+
+.qdr-overview.pane.left, .qdr-attributes.pane.left, .qdr-topology.pane.left {
+	top: 70px;
+}
+
+div.chartContainer {
+	width: auto;
+}
+
+div.chartOptions div.duration {
+    width: 30em !important;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/d98ae37e/console/stand-alone/plugin/html/qdrCharts.html
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/html/qdrCharts.html b/console/stand-alone/plugin/html/qdrCharts.html
index ccb7b5a..dc41a37 100644
--- a/console/stand-alone/plugin/html/qdrCharts.html
+++ b/console/stand-alone/plugin/html/qdrCharts.html
@@ -29,7 +29,7 @@ under the License.
         <div ng-init="chartsLoaded()"></div>
     </div>
     <div ng-hide="hasCharts()" class="centered">
-        There are no charts. To add charts to this page, click on a <i class="icon-bar-chart"></i> icon on the <button ng-click="showListPage()"><i class="icon-list "></i> List</button> page.
+        There are no charts. To add charts to this page, click on a <i class="icon-bar-chart"></i> icon on the <button ng-click="showListPage()"><i class="icon-list "></i> Entities</button> page.
     </div>
 </div>
 
@@ -44,36 +44,37 @@ under the License.
     </div>
     <div class="modal-body">
         <div id="{{svgDivId}}" class="d3Chart"></div>
-        <uib-tabset>
-            <uib-tab heading="Type">
+        <tabset>
+            <tab heading="Type">
                 <legend>Chart type</legend>
-                <label><input type="radio" ng-model="dialogChart.type" value="value" ng-change="chartChanged()" /> Value Chart</label>
-                <label><input type="radio" ng-model="dialogChart.type" value="rate" ng-change="chartChanged()" /> Rate Chart</label>
+                <label><input type="radio" ng-model="dialogChart.type" value="value" /> Value Chart</label>
+                <label><input type="radio" ng-model="dialogChart.type" value="rate" /> Rate Chart</label>
                 <div class="dlg-slider" ng-show="dialogChart.type=='rate'">
                     <span>Rate Window: {{rateWindow}} second{{rateWindow > 1 ? "s" : ""}}</span>
-                    <div class="slider" ui-slider="slider.options" ng-model="rateWindow"></div>
+                    <div id="rateSlider"></div>
                 </div>
                 <div style="clear:both;"> </div>
-            </uib-tab>
-            <uib-tab heading="Colors">
+            </tab>
+            <tab ng-hide="$parent.chart.aggregate()" heading="Colors">
                 <legend>Chart colors</legend>
                 <div class="colorPicker">
-                    <div>Area</div><input minicolors="areaColor" id="position-bottom-left" type="text" ng-model="dialogChart.areaColor" />
+                    <label>Line: <input id="lineColor" name="lineColor" type="color" /></label>
                 </div>
                 <div class="colorPicker">
-                    <div>Line</div><input minicolors="lineColor" id="position-bottom-left" type="text" ng-model="dialogChart.lineColor" />
+                    <label>Area: <input id="areaColor" name="areaColor" type="color" /></label>
                 </div>
                 <div style="clear:both;"> </div>
-            </uib-tab>
-            <uib-tab heading="Duration">
+            </tab>
+            <tab heading="Duration">
                 <legend>Chart duration</legend>
                 <div class="dlg-slider duration">
-                    <span>Show data for past {{dialogChart.visibleDuration}} minute{{dialogChart.visibleDuration > 1 ? "s" : ""}}</span> <div class="slider" ui-slider="duration.options" ng-model="dialogChart.visibleDuration"></div>
+                    <span>Show data for past {{dialogChart.visibleDuration}} minute{{dialogChart.visibleDuration > 1 ? "s" : ""}}</span>
+                    <div id="durationSlider"></div>
                 </div>
                 <div style="clear:both;"> </div>
 
-            </uib-tab>
-        </uib-tabset>
+            </tab>
+        </tabset>
     </div>
     <div class="modal-footer">
         <button class="btn btn-success" type="button" ng-click="apply()">Apply to existing chart</button>
@@ -81,88 +82,5 @@ under the License.
         <button class="btn btn-primary" type="button" ng-click="okClick()">Close</button>
     </div>
 </div>
-<!--
-    <div class="chartOptions" title="Configure chart" ng-controller="QDR.ChartDialogController">
-        <p class="dialogHeader">Title: <input type="text" ng-model="userTitle" /></p>
-        <div id="{{svgDivId}}" class="d3Chart"></div>
-        <p></p>
-        <uib-tabset>
-            <uib-tab heading="Type">
-                <legend>Chart type</legend>
-                <label><input type="radio" ng-model="dialogChart.type" value="value" ng-change="chartChanged()" /> Value Chart</label>
-                <label><input type="radio" ng-model="dialogChart.type" value="rate" ng-change="chartChanged()" /> Rate Chart</label>
-
-                <div class="dlg-slider" ng-show="dialogChart.type=='rate'">
-                    <span>Rate Window: {{rateWindow}} second{{rateWindow > 1 ? "s" : ""}}</span>
-                    <div class="slider" ui-slider="slider.options" ng-model="rateWindow"></div>
-                </div>
-                <div style="clear:both;"> </div>
-            </uib-tab>
-            <uib-tab heading="Colors">
-                <legend>Chart colors</legend>
-                <div class="colorPicker">
-                    <div>Area</div><input minicolors="areaColor" id="position-bottom-left" type="text" ng-model="dialogChart.areaColor" />
-                </div>
-                <div class="colorPicker">
-                    <div>Line</div><input minicolors="lineColor" id="position-bottom-left" type="text" ng-model="dialogChart.lineColor" />
-                </div>
-                <div style="clear:both;"> </div>
-            </uib-tab>
-            <uib-tab heading="Duration">
-                <legend>Chart duration</legend>
-                <div class="dlg-slider duration">
-                    <span>Show data for past {{dialogChart.visibleDuration}} minute{{dialogChart.visibleDuration > 1 ? "s" : ""}}</span> <div class="slider" ui-slider="duration.options" ng-model="dialogChart.visibleDuration"></div>
-                </div>
-                <div style="clear:both;"> </div>
-
-            </uib-tab>
-        </uib-tabset>
-
-        <tabset>
-            <tab heading="Type">
-                <div>
-                    <legend>Chart type</legend>
-                    <label>
-                        <input type="radio" ng-model="dialogChart.type" value="value" ng-change="chartChanged()" />
-                        Value Chart
-                    </label>
-                    <label class="rateGroup">
-                        <input type="radio" ng-model="dialogChart.type" value="rate" ng-change="chartChanged()" /> Rate Chart
-                    </label>
-                    <div class="dlg-slider" ng-show="dialogChart.type=='rate'">
-                        <span>Rate Window: {{rateWindow}} second{{rateWindow > 1 ? "s" : ""}}</span> <div class="slider" ui-slider="slider.options" ng-model="rateWindow"></div>
-                    </div>
-                </div>
-                <div style="clear:both;"> </div>
-            </tab>
-            <tab heading="Colors">
-                <div>
-                    <legend>Chart colors</legend>
-                    <div class="colorPicker">
-                        <div>Area</div><input minicolors="areaColor" id="position-bottom-left" type="text" ng-model="dialogChart.areaColor" />
-                    </div>
-                    <div class="colorPicker">
-                        <div>Line</div><input minicolors="lineColor" id="position-bottom-left" type="text" ng-model="dialogChart.lineColor" />
-                    </div>
-                </div>
-                <div style="clear:both;"> </div>
-            </tab>
-            <tab heading="Duration">
-                <div>
-                    <legend>Chart duration</legend>
-                </div>
-                <div class="dlg-slider duration">
-                    <span>Show data for past {{dialogChart.visibleDuration}} minute{{dialogChart.visibleDuration > 1 ? "s" : ""}}</span> <div class="slider" ui-slider="duration.options" ng-model="dialogChart.visibleDuration"></div>
-                </div>
-                <div style="clear:both;"> </div>
-            </tab>
-        </tabset>
-        <div class="okButton">
-            <button ng-click="apply()">Apply to existing chart</button>
-            <button ng-click="copyToDashboard()">Create new chart</button>
-            <button ng-click="okClick()">Close</button>
-        </div>
-    </div>
--->
 </script>
 

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/d98ae37e/console/stand-alone/plugin/html/qdrConnect.html
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/html/qdrConnect.html b/console/stand-alone/plugin/html/qdrConnect.html
index f1fd0b8..2ea3afa 100644
--- a/console/stand-alone/plugin/html/qdrConnect.html
+++ b/console/stand-alone/plugin/html/qdrConnect.html
@@ -36,66 +36,44 @@ under the License.
                   </div>
               </div>
               <div class="connect-column connect-form">
-                  <div class="span2 offset4">
-                      <!-- <div simple-form name="settings" data="formConfig" entity="formEntity"></div> -->
-                      <form class="form-horizontal no-bottom-margin" novalidate name="settings" action="" method="post">
-                          <fieldset>
-                              <div class="control-group">
-                                  <label class="control-label">Address: </label>
-                                  <div class="controls">
-                                      <input type="text" description="Router address" ng-model="formEntity.address" name="address" required="required" autofocus="autofocus" class="ng-pristine ng-valid ng-valid-required">
-                                      <span class="help-block"></span>
-                                  </div>
+                  <form class="hawtio-form form-horizontal no-bottom-margin" novalidate ng-submit="connect()" name="settings">
+                      <fieldset>
+                          <div class="control-group" ng-show="true">
+                              <label class="strong control-label">Address: </label>
+                              <div class="controls">
+                                  <input tabindex="1" type="text" ng-model="formEntity.address" placeholder="localhost" name="address" autofocus="autofocus" class="ng-pristine ng-valid ng-valid-required"></div>
+                          </div>
+                          <div class="control-group" ng-show="true">
+                              <label tabindex="-1" class="control-label" title="Ports to connect to, by default 5673">Port: </label>
+                              <div class="controls">
+                                  <input tabindex="2" posint type="number" placeholder="5673" tooltip="Ports to connect to, by default 5673" ng-model="formEntity.port" name="port" title="Ports to connect to, by default 5673">
+                                  <span ng-show="settings.port.$error.range">Must be 1 through 65535</span>
                               </div>
-                              <div class="control-group">
-                                  <label class="control-label" title="Port to connect to, by default 5673">Port: </label>
-                                  <div class="controls">
-                                      <input type="number" description="Router port" tooltip="Ports to connect to, by default 5672" ng-model="formEntity.port" name="port" title="Port to connect to, by default 5673" class="ng-scope ng-pristine ng-valid ng-valid-number">
-                                      <span class="help-block"></span>
-                                  </div>
-                              </div>
-                              <!--
-                                              <div class="control-group">
-                                                  <label class="control-label">Username: </label>
-                                                  <div class="controls">
-                                                      <input type="text" description="User Name" ng-model="formEntity.username" name="username" class="ng-pristine ng-valid">
-                                                      <span class="help-block"></span>
-                                                  </div>
-                                              </div>
-                                              <div class="control-group">
-                                                  <label class="control-label">Password: </label>
-                                                  <div class="controls">
-                                                      <input type="password" description="Password" ng-model="formEntity.password" name="password" class="ng-pristine ng-valid">
-                                                      <span class="help-block"></span>
-                                                  </div>
-                                              </div>
-                              -->
-                              <div class="control-group">
-                                  <label class="control-label" title="Whether or not the connection should be started as soon as you navigate to the console">Autostart: </label>
-                                  <div class="controls">
-                                      <input type="checkbox" description="Connect at startup" tooltip="Whether or not the connection should be started as soon as you navigate to the console" ng-model="formEntity.autostart" name="autostart" title="Whether or not the connection should be started as soon as you log into hawtio" class="ng-scope ng-pristine ng-valid">
-                                      <span class="help-block"></span>
-                                  </div>
-                              </div>
-                              <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;">
-                          </fieldset>
-                      </form>
-                      <p></p>
-                      <div>
-                          <button class="btn btn-primary pull-right" ng-disabled="settings.$invalid" ng-click="connect()">{{buttonText()}}</button>
-                      </div>
-                  </div>
+                          </div>
+                          <div class="control-group" ng-show="true">
+                              <label tabindex="-1" class="control-label" title="Whether or not the connection should be started as soon as you log into hawtio">Autostart: </label>
+                              <div class="controls">
+                                  <input tabindex="3" type="checkbox" tooltip="Whether or not the connection should be started as soon as you log into hawtio" ng-model="formEntity.autostart" name="autostart" title="Whether or not the connection should be started as soon as you log into hawtio"
+                                         class="ng-scope ng-pristine ng-valid"></div>
+                          </div>
+                          <input tabindex="-1" type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;">
+                          <p></p>
+                          <div>
+                              <button type="submit" tabindex="4" class="btn btn-primary pull-right" ng-disabled="settings.$invalid">{{buttonText()}}</button>
+                              <!-- <button tabindex="-1" class="btn btn-secondary pull-right" ng-click="connect1()">Debug</button> -->
+                          </div>
+                      </fieldset>
+                  </form>
               </div>
           </div>
       </div>
 
-  <div class="span4 centered" ng-show="connecting">
-    <i class="icon-spin icon-spinner icon-4x"></i>
-    <p>Please wait, connecting now...</p>
-  </div>
-  <div class="centered" ng-show="connectionError">
-    <p>There was a connection error: {{connectionErrorText}}</p>
-  </div>
+      <div class="centered" ng-show="connecting">
+        <i class="icon-spin icon-spinner icon-4x"></i>
+        <p>Please wait, connecting now...</p>
+      </div>
+      <div class="centered" ng-show="connectionError">
+        <p>There was a connection error: {{connectionErrorText}}</p>
+      </div>
 
-  <div class="span4"></div>
 </div>

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/d98ae37e/console/stand-alone/plugin/html/qdrLayout.html
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/html/qdrLayout.html b/console/stand-alone/plugin/html/qdrLayout.html
index d164f8a..208e390 100644
--- a/console/stand-alone/plugin/html/qdrLayout.html
+++ b/console/stand-alone/plugin/html/qdrLayout.html
@@ -16,11 +16,11 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<ul class="nav nav-tabs connected" ng-controller="QDR.NavBarController">
-  <li ng-repeat="link in breadcrumbs" ng-show="isValid(link)" ng-class='{active : isActive(link.href), "pull-right" : isRight(link), haschart: hasChart(link)}'>
-    <a ng-href="{{link.href}}{{hash}}" ng-bind-html="link.content | to_trusted"></a>
+<ul class="nav nav-tabs connected dispatch-view" ng-controller="QDR.NavBarController">
+  <li ng-repeat="link in breadcrumbs" title="{{link.title}}" ng-show="isValid(link)" ng-class='{active : isActive(link.href), "pull-right" : isRight(link), haschart: hasChart(link)}'>
+    <a ng-href="{{link.href}}{{hash}}" ng-bind-html-unsafe="link.content"></a>
   </li>
 </ul>
-<div class="row-fluid">
+<div class="row-fluid dispatch-router">
   <div ng-view></div>
 </div>

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/d98ae37e/console/stand-alone/plugin/html/qdrList.html
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/html/qdrList.html b/console/stand-alone/plugin/html/qdrList.html
index 156b21a..9d1379e 100644
--- a/console/stand-alone/plugin/html/qdrList.html
+++ b/console/stand-alone/plugin/html/qdrList.html
@@ -16,41 +16,73 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<div class="main-display row-fluid qdrList" ng-controller="QDR.ListController">
-    <ul class="nav nav-tabs qdrListNodes">
-          <li ng-repeat="node in nodes" ng-click="selectNode(node)" ng-class="{active : isNodeSelected(node.id)}"> <span>{{node.name}}</span> </li>
-    </ul>
 
+<div id="list-controller" ng-controller="QDR.ListController"  ng-include="tmplListTree"></div>
+
+<script type="text/ng-template" id="listGrid.html">
     <div class="row-fluid qdrListActions">
-        <ul class="nav nav-tabs ng-scope">
-            <li ng-repeat="entity in entities" ng-class="{active : isActionActive(entity.name)}" ng-click="selectAction(entity.name)" >
-                <a title="{{entity.title}}" data-placement="bottom"> {{entity.humanName}} </a></li>
+        <ul class="nav nav-tabs">
+            <li ng-repeat="mode in modes" ng-show="isValid(mode)" ng-click="selectMode(mode)" ng-class="{active : isModeSelected(mode)}" title="{{mode.title}}" ng-bind-html-unsafe="mode.content"> </li>
         </ul>
-            <div class="gridStyle" ng-style="getTableHeight()" ui-grid-auto-resize ui-grid-selection ui-grid="gridDef"></div>
-            <div class="selectedItems">
-                <div ng-style="getDetailsTableHeight()" ui-grid-auto-resize ui-grid-selection ui-grid="details"></div>
+        <h4>{{selectedRecordName}}</h4>
+        <div ng-show="currentMode.id === 'attributes'" class="selectedItems">
+            <div ng-show="selectedRecordName === selectedEntity" class="no-content">There are no {{selectedEntity | safePlural}}</div>
+            <div ng-hide="selectedRecordName === selectedEntity" ng-grid="details"></div>
+        </div>
+        <div ng-show="currentMode.id === 'delete'">
+            <div class="delete" ng-show="selectedRecordName !== selectedEntity">
+                <button class="btn btn-primary" ng-click="remove()">Delete</button> {{selectedRecordName}}
             </div>
-    </div>
-</div>
-<!--
-    This is the template for the graph dialog that is displayed. It uses the
-    dialogCtrl controller in qdrList.js.
--->
-<script type="text/ng-template" id="template-from-script.html">
-    <div class="modal-header">
-        <h3 class="modal-title">Chart {{chart.attr() | humanify}}</h3>
-    </div>
-    <div class="modal-body">
-            <div id="{{svgDivId}}" class="d3Chart"></div>
-    </div>
-    <div class="modal-footer">
-        <span ng-hide="isOnChartsPage()">
-            <button class="btn btn-success" type="button" ng-click="addChartsPage()"><i class="icon-bar-chart"></i> Add</button> this chart to the Charts page.
-        </span>
-        <span ng-show="isOnChartsPage()">
-            <button class="btn btn-danger" type="button" ng-click="delChartsPage()">Remove</button> this chart from the <button class="btn btn-success" type="button" ng-click="showChartsPage()"><i class="icon-bar-chart"></i> Charts</button> page.
-        </span>
-        <button class="btn btn-primary" type="button" ng-click="ok()">Close</button>
+            <div ng-hide="selectedRecordName !== selectedEntity">
+                There are no {{selectedEntity}}s
+            </div>
+        </div>
+        <div class="operations" ng-show="currentMode.id === 'operations'">
+            <fieldset ng-show="operation != ''">
+                <table>
+                    <tr>
+                        <th>Attribute</th>
+                        <th>Value</th>
+                    </tr>
+                <tr title="{{attribute.title}}" ng-repeat="attribute in detailFields">
+                    <td><label for="{{attribute.name}}">{{attribute.name | humanify}}</label></td>
+                    <!-- we can't do <input type="{angular expression}"> because... jquery throws an exception because... -->
+                    <td>
+                    <div ng-if="attribute.input == 'input'">
+                        <!-- ng-pattern="testPattern(attribute)" -->
+                        <input ng-if="attribute.type == 'number'" type="number" name="{{attribute.name}}" id="{{attribute.name}}" ng-model="attribute.rawValue" ng-required="attribute.required" class="ui-widget-content ui-corner-all"/>
+                        <input ng-if="attribute.type == 'text'" type="text" name="{{attribute.name}}" id="{{attribute.name}}" ng-model="attribute.attributeValue" ng-required="attribute.required" class="ui-widget-content ui-corner-all"/>
+                        <textarea ng-if="attribute.type == 'textarea'" name="{{attribute.name}}" id="{{attribute.name}}" ng-model="attribute.attributeValue" ng-required="attribute.required" class="ui-widget-content ui-corner-all"></textarea>
+                        <span ng-if="attribute.type == 'disabled'" >{{getAttributeValue(attribute)}}</span>
+                    </div>
+                    <div ng-if="attribute.input == 'select'">
+                        <select id="{{attribute.name}}" ng-model="attribute.selected" ng-options="item for item in attribute.rawtype track by item"></select>
+                    </div>
+                    <div ng-if="attribute.input == 'boolean'" class="boolean">
+                        <label><input type="radio" ng-model="attribute.rawValue" ng-value="true"> True</label>
+                        <label><input type="radio" ng-model="attribute.rawValue" ng-value="false"> False</label>
+                    </div>
+                    </td>
+                </tr>
+                <tr><td></td><td><button class="btn btn-primary" type="button" ng-click="ok()">{{operation | Pascalcase}}</button></td></tr>
+                </table>
+            </fieldset>
+        </div>
+        <div ng-show="currentMode.id === 'log'">
+            <table class="log-entry" ng-repeat="entry in logResults track by $index">
+                <tr>
+                    <td align="left" colspan="2">{{entry.time}}</td>
+                </tr>
+                <tr>
+                    <td>Type</td><td>{{entry.type}}</td>
+                </tr>
+                <tr>
+                    <td>Source</td><td>{{entry.source}}:{{entry.line}}</td>
+                </tr>
+                <tr>
+                    <td valign="middle">Message</td><td valign="middle"><pre>{{entry.message}}</pre></td>
+                </tr>
+            </table>
+        </div>
     </div>
 </script>
-

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/d98ae37e/console/stand-alone/plugin/html/qdrOverview.html
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/html/qdrOverview.html b/console/stand-alone/plugin/html/qdrOverview.html
index d63ea0e..e3876ee 100644
--- a/console/stand-alone/plugin/html/qdrOverview.html
+++ b/console/stand-alone/plugin/html/qdrOverview.html
@@ -16,61 +16,99 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-<div ng-controller="QDR.OverviewController">
+<div id="overview-controller" ng-controller="QDR.OverviewController" ng-include="tmplOverviewTree"></div>
 
-    <div class="treeContainer">
-        <div id="overtree"></div>
+<script type="text/ng-template" id="overviewGrid.html">
+    <div class="gridDetails" ng-include="template.url"></div>
+    <div id="linkFilter">
+        <div class="filter-title">
+            <h6>Filter by link type</h6>
+            <button ng-click="filterClose()" type="button" class="btn btn-primary filter-close">x</button>
+        </div>
+        <select ng-init="currentLinkFilter = 'endpoint'" ng-model="currentLinkFilter" ng-change="setLinkFilter(currentLinkFilter)">
+            <option value="">All link types</option>
+            <option value="endpoint" selected>Endpoints only</option>
+        </select>
     </div>
-
-    <div class="treeDetails" ng-include="template.url"></div>
-</div>
-
-
+</script>
 <!-- the following scripts are content that gets loaded into the above div that has the temple.url -->
 <script type="text/ng-template" id="routers.html">
     <div class="row-fluid">
         <h3>Routers</h3>
         <div class="overview">
-            <div class="gridStyle" ng-style="getGridHeight(allRouters)" ui-grid-auto-resize ui-grid-selection ui-grid="allRouters"></div>
+            <div class="gridStyle" ng-grid="allRouters"></div>
         </div>
     </div>
 </script>
 
 <script type="text/ng-template" id="router.html">
     <div class="row-fluid">
-        <h3>Router {{router.data.title}}</h3>
-        <div ng-style="getGridHeight(routerGrid)" ui-grid-auto-resize ui-grid="routerGrid" class="gridStyle noHighlight"></div>
+        <h3>Router {{router.data.title}} attributes</h3>
+        <div class="gridStyle noHighlight" ng-grid="routerGrid"></div>
     </div>
 </script>
 
 <script type="text/ng-template" id="addresses.html">
     <div class="row-fluid">
-    <h3>Addresses</h3>
-    <div class="overview">
-        <div class="gridStyle" ng-style="getGridHeight(addressGrid)" ui-grid-auto-resize ui-grid-selection ui-grid="addressGrid"></div>
-    </div>
+        <h3>Addresses</h3>
+        <div class="overview">
+            <div class="gridStyle" ng-grid="addressesGrid"></div>
+        </div>
     </div>
 </script>
 <script type="text/ng-template" id="address.html">
     <div class="row-fluid">
-    <h3>Address {{address.data.title}}</h3>
-    <div ng-style="getGridHeight(addressGrid)" ui-grid-auto-resize class="gridStyle noHighlight" ui-grid="addressGrid"></div>
+        <h3>Address {{address.data.title}}</h3>
+        <div class="gridStyle noHighlight" ng-grid="addressGrid"></div>
+    </div>
+</script>
+<script type="text/ng-template" id="links.html">
+    <div class="row-fluid">
+        <h3>Links</h3>
+        <div class="gridStyle" ng-grid="linksGrid"></div>
+    </div>
+</script>
+<script type="text/ng-template" id="link.html">
+    <div class="row-fluid">
+        <h3>Link {{link.data.title}}</h3>
+        <div class="gridStyle noHighlight" ng-grid="linkGrid"></div>
     </div>
 </script>
 <script type="text/ng-template" id="connections.html">
     <div class="row-fluid">
     <h3>Connections</h3>
     <div class="overview">
-        <div class="gridStyle" ng-style="getGridHeight(allConnectionGrid)" ui-grid-auto-resize ui-grid-selection ui-grid="allConnectionGrid"></div>
+        <div class="gridStyle" ng-grid="allConnectionGrid"></div>
     </div>
     </div>
 </script>
 <script type="text/ng-template" id="connection.html">
     <div class="row-fluid">
-    <h3>Connection {{connection.data.title}}</h3>
-    <div ng-style="getGridHeight(connectionGrid)" ui-grid-auto-resize class="gridStyle noHighlight" ui-grid="connectionGrid"></div>
+        <ul class="nav nav-tabs">
+            <li ng-repeat="mode in connectionModes" ng-show="isValid(mode)" ng-click="selectMode(mode)" ng-class="{active : isModeSelected(mode)}" title="{{mode.title}}" ng-bind-html-unsafe="mode.content"> </li>
+        </ul>
+        <div ng-show="currentMode.id === 'attributes'" class="selectedItems">
+            <h3>Connection {{connection.data.title}}</h3>
+            <div class="gridStyle noHighlight" ng-grid="connectionGrid"></div>
+        </div>
+        <div ng-show="currentMode.id === 'links'" class="selectedItems">
+            <h3>External links for connection {{connection.data.title}}</h3>
+            <!-- <button title="{{quiesceState.buttonText}} links" type="button" ng-hide="quiesceHide()" ng-class="quiesceClass()" class="btn" ng-click="quiesceAllClicked()" ng-disabled="quiesceState.buttonDisabled">{{quiesceState.buttonText}}</button> -->
+            <div class="gridStyle noHighlight" ng-grid="connectionLinksGrid"></div>
+        </div>
     </div>
 </script>
+<script type="text/ng-template" id="titleHeaderCellTemplate.html">
+    <div title="{{col.displayName}}" class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{'cursor': col.cursor}" ng-class="{ 'ngSorted': !noSortVisible }">
+        <div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div>
+        <div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>
+        <div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>
+        <div class="ngSortPriority">{{col.sortPriority}}</div>
+    </div>
+</script>
+<script type="text/ng-template" id="titleCellTemplate.html">
+    <div title="{{row.entity[col.field]}}" class="ngCellText">{{row.entity[col.field]}}</div>
+</script>
 <script type="text/ng-template" id="logs.html">
     <div class="row-fluid">
     <h3>Logs</h3>
@@ -81,3 +119,21 @@ under the License.
     <h3>Log {{log.data.title}}</h3>
     </div>
 </script>
+
+<script type="text/ng-template" id="linkRowTemplate.html">
+    <div ng-class="{linkDirIn: row.getProperty('linkDir') == 'in', linkDirOut: row.getProperty('linkDir') == 'out'}">
+        <div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}">
+            <div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div>
+            <div ng-cell></div>
+        </div>
+    </div>
+</script>
+
+<script type="text/ng-template" id="linkAggTemplate.html">
+    <div ng-click='row.toggleExpand(); saveGroupState()' ng-style='rowStyle(row)' class='ngAggregate ng-scope' style='top: 0px; height: 48px; left: 0px;'>
+    <span class='ngAggregateText ng-binding'>
+            {{row.label CUSTOM_FILTERS}} ({{row.totalChildren()}} {{AggItemsLabel}})
+        </span>
+    <div ng-class="{true: 'ngAggArrowCollapsed', false: 'ngAggArrowExpanded'}[row.collapsed]"></div>
+    </div>
+</script>

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/d98ae37e/console/stand-alone/plugin/html/qdrSchema.html
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/html/qdrSchema.html b/console/stand-alone/plugin/html/qdrSchema.html
index 15ebb46..33f6951 100644
--- a/console/stand-alone/plugin/html/qdrSchema.html
+++ b/console/stand-alone/plugin/html/qdrSchema.html
@@ -17,5 +17,5 @@ specific language governing permissions and limitations
 under the License.
 -->
 <div class="main-display row-fluid" ng-controller="QDR.SchemaController">
-    <json-formatter json="schema" open="2"></json-formatter>
-</div>
\ No newline at end of file
+    <div id="schema"></div>
+</div>

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/d98ae37e/console/stand-alone/plugin/html/qdrTopology.html
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/html/qdrTopology.html b/console/stand-alone/plugin/html/qdrTopology.html
index 2c21b21..3ac2194 100644
--- a/console/stand-alone/plugin/html/qdrTopology.html
+++ b/console/stand-alone/plugin/html/qdrTopology.html
@@ -22,11 +22,11 @@ under the License.
             <!-- <div ng-repeat="form in forms" ng-show="isVisible(form)" ng-class='{selected : isSelected(form)}'> -->
             <div ng-show="form == 'router'">
                 <h4>Router Info</h4>
-                <div class="topoGrid" ng-style="getTableHeight(attributes)" ui-grid-auto-resize ui-grid="topoGridOptions"></div>
+                <div class="gridStyle" ng-grid="topoGridOptions"></div>
             </div>
             <div ng-show="form == 'connection'">
                 <h4>Connection Info</h4>
-                <div class="topoGrid" ng-style="getTableHeight(attributes)" ui-grid-auto-resize ui-grid="topoGridOptions"></div>
+                <div class="gridStyle" ng-grid="topoGridOptions"></div>
             </div>
             <div id="addNodeForm" ng-show="form == 'add'">
                 <h4>Add a new router</h4>
@@ -74,9 +74,26 @@ under the License.
         <div id="svg_legend"></div>
         <div id="multiple_details">
             <div class="gridStyle" ng-grid="multiDetails"></div>
+         </div>
+        <div id="link_details">
+            <div class="gridStyle" ng-grid="linkDetails"></div>
         </div>
     </div>
 </div>
+
+
+<script type="text/ng-template" id="titleHeaderCellTemplate.html">
+    <div title="{{col.displayName}}" class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{'cursor': col.cursor}" ng-class="{ 'ngSorted': !noSortVisible }">
+        <div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div>
+        <div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>
+        <div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>
+        <div class="ngSortPriority">{{col.sortPriority}}</div>
+    </div>
+</script>
+<script type="text/ng-template" id="titleCellTemplate.html">
+    <div title="{{row.entity[col.field]}}" class="ngCellText">{{row.entity[col.field]}}</div>
+</script>
+
 <!--
     This is the template for the node edit dialog that is displayed.
 -->
@@ -86,21 +103,21 @@ under the License.
     </div>
     <div class="modal-body">
         <form novalidate name="editForm">
-        <div class="tabbable tabs-left">
-            <ul class="nav nav-tabs">
-                <li ng-repeat="entity in entities" ng-click="setActive(entity.tabName)" ng-class="{separated: entity.tabName == 'listener0'}">
-                    <a href="#{{entity.tabName}}" data-toggle="tab"><i ng-if="entity.icon !== ''" ng-class="entity.icon ? 'ui-icon-arrowthick-1-w' : 'ui-icon-arrowthick-1-e'" class="ui-icon"></i>{{entity.humanName}}</a>
-                </li>
-            </ul>
-            <div class="tab-content">
-                <div id="{{entity.tabName}}" ng-repeat="entity in entities" ng-show="isActive(entity.tabName)" class="entity-fields">
+
+            <tabset vertical="true" class="tabs-left">
+                <tab ng-repeat="entity in entities"> <!-- ng-class="{separated: entity.tabName == 'listener0'}" -->
+                    <tab-heading>
+                        <i ng-if="entity.icon !== ''" ng-class="entity.icon ? 'ui-icon-arrowthick-1-w' : 'ui-icon-arrowthick-1-e'" class="ui-icon"></i>{{entity.humanName}}
+                    </tab-heading>
                     <div class="entity-description">{{entity.description}}</div>
                     <fieldset>
                         <div ng-mouseenter="showDescription(attribute, $event)" ng-repeat="attribute in entity.attributes">
                             <label for="{{attribute.name}}">{{attribute.humanName}}</label>
+<!-- we can't do <input type="{angular expression}"> because... jquery throws an exception because... -->
                             <div ng-if="attribute.input == 'input'">
                                 <!-- ng-pattern="testPattern(attribute)" -->
-                                <input type="{{attribute.type}}" name="{{attribute.name}}" id="{{attribute.name}}" ng-model="attribute.value" ng-required="attribute.required" class="ui-widget-content ui-corner-all">
+                                <input ng-if="attribute.type == 'number'" type="number" name="{{attribute.name}}" id="{{attribute.name}}" ng-model="attribute.value" ng-required="attribute.required" class="ui-widget-content ui-corner-all"/>
+                                <input ng-if="attribute.type == 'text'" type="text" name="{{attribute.name}}" id="{{attribute.name}}" ng-model="attribute.value" ng-required="attribute.required" class="ui-widget-content ui-corner-all"/>
                             </div>
                             <div ng-if="attribute.input == 'select'">
                                 <select id="{{attribute.name}}" ng-model="attribute.selected" ng-options="item for item in attribute.rawtype"></select>
@@ -119,63 +136,16 @@ under the License.
                     <div class="attr-annotations" ng-repeat="annotation in entity.annotatedBy">
                         <span>You can also enter the <button ng-click="selectAnnotationTab(annotation)">{{annotation}}</button> values.</span>
                     </div>
-                </div>
-            </div>
-        </div>
+                </tab>
+            </tabset>
+
+
         </form>
     </div>
     <div class="modal-footer">
         <button class="btn btn-primary" type="button" ng-click="download()">Download</button>
         <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
     </div>
-
-<!--
-
-
-    <div class="nodeOptions" title="Configure new router">
-        <form novalidate name="editForm">
-        <div id="tabs" class="nodeEntities">
-            <ul class="nodeTabs">
-                <li ng-repeat="entity in entities" ng-class="{separated: entity.tabName == 'listener0'}">
-
-                    <a href="#{{entity.tabName}}"><i ng-if="entity.icon !== ''" ng-class="entity.icon ? 'ui-icon-arrowthick-1-w' : 'ui-icon-arrowthick-1-e'" class="ui-icon"></i>{{entity.humanName}}</a>
-                </li>
-            </ul>
-            <div id="{{entity.tabName}}" ng-repeat="entity in entities" class="entity-fields">
-                <div class="entity-description">{{entity.description}}</div>
-                <fieldset>
-                    <div ng-mouseenter="showDescription(attribute, $event)" ng-repeat="attribute in entity.attributes">
-                        <label for="{{attribute.name}}">{{attribute.humanName}}</label>
-                        <div ng-if="attribute.input == 'input'">
-                            <input type="{{attribute.type}}" name="{{attribute.name}}" id="{{attribute.name}}" ng-model="attribute.value" ng-pattern="testPattern(attribute)" ng-required="attribute.required" class="ui-widget-content ui-corner-all">
-                        </div>
-                        <div ng-if="attribute.input == 'select'">
-                            <select id="{{attribute.name}}" ng-model="attribute.selected" ng-options="item for item in attribute.rawtype"></select>
-                        </div>
-                        <div ng-if="attribute.input == 'boolean'" class="boolean">
-                            <label><input type="radio" ng-model="attribute.value" value="true"> True</label>
-                            <label><input type="radio" ng-model="attribute.value" value="false"> False</label>
-                        </div>
-                    </div>
-                </fieldset>
-                <div class="attr-description">{{attributeDescription}}
-                    <div class="attr-type">{{attributeType}}</div>
-                    <div class="attr-required">{{attributeRequired}}</div>
-                    <div class="attr-unique">{{attributeUnique}}</div>
-                </div>
-                <div class="attr-annotations" ng-repeat="annotation in entity.annotatedBy">
-                    <span>You can also enter the <button ng-click="selectAnnotationTab(annotation)">{{annotation}}</button> values.</span>
-                </div>
-            </div>
-        </div>
-        </form>
-
-        <div class="okButton">
-            <button ng-click="download()">Download</button>
-            <button ng-click="cancel()">Cancel</button>
-        </div>
-    </div>
-    -->
 </script>
 
 <script type="text/ng-template" id="config-file-header.html">##
@@ -199,6 +169,32 @@ under the License.
 </script>
 
 <script type="text/ng-template" id="download-dialog-template.html">
+    <div class="modal-header">
+        <h3 class="modal-title">Configure new router</h3>
+    </div>
+    <div class="modal-body">
+
+        <label title="Show descriptions and default values in confile files"><input type="checkbox" ng-model="verbose"> Verbose output</label>
+        <div>
+            <button ng-click="download()">Download</button>
+            <button class="btn" zero-clipboard data-clipboard-text="{{output}}" title="Copy to clipboard">
+                <i class="icon-copy"></i>
+            </button> configuration file for {{newRouterName}}
+        </div>
+        <div ng-repeat="part in parts">
+            <button ng-click="downloadPart(part)">Download</button>
+            <button class="btn" zero-clipboard data-clipboard-text="{{part.output}}" title="Copy to clipboard">
+                <i class="icon-copy"></i>
+            </button> connector section for {{part.name}}
+        </div>
+
+    </div>
+    <div class="modal-footer">
+        <button class="btn btn-primary" type="button" ng-click="done()">Done</button>
+    </div>
+
+<!--
+
     <div title="Configure new router">
 
         <label title="Show descriptions and default values in confile files"><input type="checkbox" ng-model="verbose"> Verbose output</label>
@@ -220,5 +216,6 @@ under the License.
         </div>
 
     </div>
+-->
 </script>
 


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@qpid.apache.org
For additional commands, e-mail: commits-help@qpid.apache.org


Mime
View raw message