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 }"> </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-unsubscr...@qpid.apache.org For additional commands, e-mail: commits-h...@qpid.apache.org
