You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@qpid.apache.org by ea...@apache.org on 2018/04/30 16:10:26 UTC
qpid-dispatch git commit: DISPATCH-982 Handle small/narrow screens
better. Change page menus to be more consistent with Patternfly.
Repository: qpid-dispatch
Updated Branches:
refs/heads/master 788a2b748 -> e645721c7
DISPATCH-982 Handle small/narrow screens better. Change page menus to be more consistent with Patternfly.
Project: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/repo
Commit: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/commit/e645721c
Tree: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/tree/e645721c
Diff: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/diff/e645721c
Branch: refs/heads/master
Commit: e645721c7887320bc4621aa723a1692c39e4b8b5
Parents: 788a2b7
Author: Ernest Allen <ea...@redhat.com>
Authored: Mon Apr 30 12:10:09 2018 -0400
Committer: Ernest Allen <ea...@redhat.com>
Committed: Mon Apr 30 12:10:09 2018 -0400
----------------------------------------------------------------------
console/stand-alone/index.html | 29 ++--
console/stand-alone/plugin/html/qdrChord.html | 134 ++++++++++++-------
console/stand-alone/plugin/js/chord/qdrChord.js | 26 +++-
console/stand-alone/plugin/js/navbar.js | 7 +-
4 files changed, 132 insertions(+), 64 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/e645721c/console/stand-alone/index.html
----------------------------------------------------------------------
diff --git a/console/stand-alone/index.html b/console/stand-alone/index.html
index d9ec7fd..d912d9a 100644
--- a/console/stand-alone/index.html
+++ b/console/stand-alone/index.html
@@ -52,8 +52,14 @@ under the License.
<body ng-app="QDR" ng-controller="QDR.Core">
-<nav class="navbar navbar-default navbar-pf" role="navigation">
+<nav class="navbar navbar-default navbar-pf navbar-fixed-top" role="navigation">
<div class="navbar-header">
+ <button type='button' class='navbar-toggle left page-menu-button' data-toggle="collapse" data-target=".page-menu">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
@@ -87,13 +93,7 @@ under the License.
display: none;
}
</style>
-<script>
- setTimeout(function () {
- var no_npm = document.getElementById('no-npm');
- if (no_npm)
- no_npm.style.display = "block";
- }, 1000)
-</script>
+
<!-- Only needed for IE -->
<script src="node_modules/bluebird/js/browser/bluebird.js"></script>
@@ -153,6 +153,19 @@ under the License.
<script type="text/javascript" src="plugin/js/chord/data.js"></script>
<script type="text/javascript" src="plugin/js/chord/layout/layout.js"></script>
<script type="text/javascript" src="plugin/js/chord/qdrChord.js"></script>
+<script>
+ setTimeout(function () {
+ var no_npm = document.getElementById('no-npm');
+ if (no_npm)
+ no_npm.style.display = "block";
+ }, 1000);
+
+ $(function(){
+ $('.nav a').on('click', function(){
+ $('.navbar-collapse').collapse('hide');
+ });
+ })
+</script>
</body>
</html>
http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/e645721c/console/stand-alone/plugin/html/qdrChord.html
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/html/qdrChord.html b/console/stand-alone/plugin/html/qdrChord.html
index ba1e41e..640de43 100644
--- a/console/stand-alone/plugin/html/qdrChord.html
+++ b/console/stand-alone/plugin/html/qdrChord.html
@@ -48,6 +48,7 @@
padding-right: 1em;
opacity: 0;
background-color: white;
+ z-index: 2;
}
#switches ul {
list-style: none;
@@ -57,16 +58,14 @@
#switches li {
margin-bottom: 1em;
}
+
#legend {
- position: absolute;
right: 1em;
top: 1em;
- padding: 0 1em;
- border: 1px solid black;
- border-radius: 4px;
min-width: 10em;
background-color: white;
}
+
#legend .legend-color {
width: 19.6667px;
height: 18.1667px;
@@ -145,17 +144,18 @@
fill-opacity: .67;
}
-#legend ul.addresses li, #legend ul.routers li {
+#legend ul.addresses li, #legend ul.routers li, #legend ul.options li {
margin-top: 0.5em;
+ margin-bottom: 1em;
}
-#legend ul.routers li {
- margin-bottom: 0.5em;
-}
#legend ul.addresses {
margin-bottom: 1.5em;
}
+#legend .panel-body {
+ padding: 4px 15px;
+}
.code-branch:before {
font-style: normal;
font-family: FontAwesome;
@@ -168,10 +168,6 @@
z-index: 0;
}
- div#debugging {
- width: 20em;
- }
-
.addresses .btn, #switches .btn {
padding: 0px 4px !important;
background-image: none;
@@ -198,43 +194,89 @@
#noTraffic {
position:absolute;
}
+
+.legend-button {
+ color: black;
+ background: white;
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 2;
+ width: 1em;
+ padding: 4px 0 0 4px;
+ margin: 4px 0 0 4px;
+}
+.legend-button span.icon-bar {
+ display: block;
+ color: black;
+ background-color: black;
+ height: 4px;
+ width: 4px;
+ font-weight: bold;
+ border-radius: 2px;
+}
+
+.page-menu {
+ position: absolute;
+ right: 1em;
+ top: 1em;
+ left: auto;
+ width: auto;
+}
+
+@media (max-width: 768px) {
+ .navbar-collapse.page-menu {
+ left: 1em;
+ right: auto;
+ }
+}
+
+.navbar-collapse {
+ padding-right: 0;
+}
+
+.panel-group {
+ margin-bottom: 0;
+}
</style>
- <div ng-controller="QDR.ChordController">
- <div id="popover-div" ng-bind-html="trustedpopoverContent"></div>
- <div id="noTraffic"></div>
- <div id="chord"></div>
- <div id="legend">
- <div ng-hide="arcColorsEmpty()">
- <h4>Routers</h4>
+<div ng-controller="QDR.ChordController">
+ <div id="popover-div" ng-bind-html="trustedpopoverContent"></div>
+ <div id="noTraffic"></div>
+ <div id="chord"></div>
+
+ <div class="page-menu navbar-collapse collapse">
+ <uib-accordion id="legend" close-others="false">
+ <div uib-accordion-group class="panel-default" is-open="legend.status.optionsOpen" heading="Options">
+ <ul class="options">
+ <li>
+ <checkbox title="Select to show message rates" ng-model="legendOptions.isRate"></checkbox>
+ <span title="Select to show message rates">Show rates</span>
+ </li>
+ <li>
+ <checkbox title="Select to break out traffic by address" ng-model="legendOptions.byAddress"></checkbox>
+ <span title="Select to break out traffic by address">Show by address</span>
+ </li>
+ </ul>
+ </div>
+ <div uib-accordion-group class="panel-default" is-open="legend.status.routersOpen" ng-hide="arcColorsEmpty()" heading="Routers">
<ul class="routers">
- <li ng-repeat="(router, color) in arcColors" class="legend-line" ng-mouseover="enterRouter(router)" ng-mouseleave="leaveLegend()">
- <span class='legend-color' ng-style="{'background-color': color}"></span>
- <span class='legend-router' title="{{router}}">{{router | limitTo:15}}{{router.length>15 ? '…' : ''}}</span>
- </li>
+ <li ng-repeat="(router, color) in arcColors" class="legend-line" ng-mouseover="enterRouter(router)" ng-mouseleave="leaveLegend()">
+ <span class='legend-color' ng-style="{'background-color': color}"></span>
+ <span class='legend-router' title="{{router}}">{{router | limitTo:15}}{{router.length>15 ? '…' : ''}}</span>
+ </li>
</ul>
</div>
- <h4>Addresses</h4>
- <ul class="addresses">
- <li ng-repeat="(address, color) in addresses" class="legend-line">
- <checkbox style="background-color: {{chordColors[address]}};"
- title="{{address}}" ng-change="addressFilterChanged()"
- ng-model="addresses[address]"></checkbox>
- <span ng-mouseenter="enterLegend(address)" ng-mouseleave="leaveLegend()" ng-click="addressClick(address)" title="{{address}}">{{address | limitTo : 15}}{{address.length>15 ? '…' : ''}}</span>
- </li>
- </ul>
- </div>
- <div id="switches">
- <ul>
- <li>
- <checkbox title="Select to show message rates" ng-model="legendOptions.isRate"></checkbox>
- <span title="Select to show message rates">Show rates</span>
- </li>
- <li>
- <checkbox title="Select to break out traffic by address" ng-model="legendOptions.byAddress"></checkbox>
- <span title="Select to break out traffic by address">Show by address</span>
- </li>
- </ul>
- </div>
+ <div uib-accordion-group class="panel-default" is-open="legend.status.addressesOpen" heading="Addresses">
+ <ul class="addresses">
+ <li ng-repeat="(address, color) in addresses" class="legend-line">
+ <checkbox style="background-color: {{chordColors[address]}};"
+ title="{{address}}" ng-change="addressFilterChanged()"
+ ng-model="addresses[address]"></checkbox>
+ <span ng-mouseenter="enterLegend(address)" ng-mouseleave="leaveLegend()" ng-click="addressClick(address)" title="{{address}}">{{address | limitTo : 15}}{{address.length>15 ? '…' : ''}}</span>
+ </li>
+ </ul>
+ </div>
+ </uib-accordion>
</div>
- <div ng-init="loaded=true"></div>
+</div>
http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/e645721c/console/stand-alone/plugin/js/chord/qdrChord.js
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/js/chord/qdrChord.js b/console/stand-alone/plugin/js/chord/qdrChord.js
index 4e6b94f..5ce7aa1 100644
--- a/console/stand-alone/plugin/js/chord/qdrChord.js
+++ b/console/stand-alone/plugin/js/chord/qdrChord.js
@@ -34,6 +34,8 @@ var QDR = (function (QDR) {
const DOUGHNUT = '#chord svg .empty';
const ERROR_RENDERING = 'Error while rendering ';
const ARCPADDING = .06;
+ const SMALL_OFFSET = 210;
+ const MIN_RADIUS = 200;
// flag to show/hide the router section of the legend
$scope.noValues = true;
@@ -45,6 +47,7 @@ var QDR = (function (QDR) {
$scope.chordColors = {};
$scope.arcColors = {};
+ $scope.legend = {status: {addressesOpen: true, routersOpen: true, optionsOpen: true}};
// get notified when the byAddress checkbox is toggled
let switchedByAddress = false;
$scope.$watch('legendOptions.byAddress', function (newValue, oldValue) {
@@ -163,7 +166,7 @@ var QDR = (function (QDR) {
b = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || b.clientWidth,
y = w.innerHeight|| e.clientHeight|| b.clientHeight;
- return Math.max(Math.floor((Math.min(x, y) * 0.9) / 2), 300);
+ return Math.max(Math.floor((Math.min(x, y) * 0.9) / 2), MIN_RADIUS);
};
// diagram sizes that change when browser is resized
@@ -178,6 +181,14 @@ var QDR = (function (QDR) {
};
setSizes();
+ $scope.navbutton_toggle = function () {
+ let legendPos = $('#legend').position();
+ console.log(legendPos);
+ if (legendPos.left === 0)
+ setTimeout(windowResized, 10);
+ else
+ $('#switches').css({left: -legendPos.left, opacity: 1});
+ };
// TODO: handle window resizes
//let updateWindow = function () {
//setSizes();
@@ -188,7 +199,8 @@ var QDR = (function (QDR) {
let legendPos = $('#legend').position();
let switches = $('#switches');
let outerWidth = switches.outerWidth();
- switches.css({left: (legendPos.left - outerWidth), opacity: 1});
+ if (switches && legendPos)
+ switches.css({left: (legendPos.left - outerWidth), opacity: 1});
};
window.addEventListener('resize', function () {
windowResized();
@@ -249,17 +261,17 @@ var QDR = (function (QDR) {
// global pointer to the diagram
let svg;
- // called once when the page loads and again
- // whenever the number of routers that have egressed messages changes
+ // called once when the page loads
let initSvg = function () {
d3.select('#chord svg').remove();
+ let xtrans = outerRadius === MIN_RADIUS ? SMALL_OFFSET : outerRadius;
svg = d3.select('#chord').append('svg')
.attr('width', outerRadius * 2)
.attr('height', outerRadius * 2)
.append('g')
.attr('id', 'circle')
- .attr('transform', 'translate(' + outerRadius + ',' + outerRadius + ')');
+ .attr('transform', 'translate(' + xtrans + ',' + outerRadius + ')');
// mouseover target for when the mouse leaves the diagram
svg.append('circle')
@@ -413,7 +425,9 @@ var QDR = (function (QDR) {
let msg = 'There is no message traffic';
if (addressLen !== 0)
msg += ' for the selected addresses';
- $.notify($('#noTraffic'), msg, {clickToHide: false, autoHide: false, arrowShow: false, className: 'Warning'});
+ let autoHide = outerRadius === MIN_RADIUS;
+ $.notify($('#noTraffic'), msg, {clickToHide: autoHide, autoHide: autoHide, arrowShow: false, className: 'Warning'});
+ $('.notifyjs-wrapper').css('z-index', autoHide ? 3 : 0);
}
});
emptyCircle();
http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/e645721c/console/stand-alone/plugin/js/navbar.js
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/js/navbar.js b/console/stand-alone/plugin/js/navbar.js
index c127e85..c17cd77 100644
--- a/console/stand-alone/plugin/js/navbar.js
+++ b/console/stand-alone/plugin/js/navbar.js
@@ -26,7 +26,7 @@ var QDR = (function (QDR) {
QDR.breadcrumbs = [
{
- content: '<i class="icon-cogs"></i> Connect',
+ content: '<i class="icon-power"></i> Connect',
title: 'Connect to a router',
isValid: function () { return true; },
href: '#/connect',
@@ -47,7 +47,7 @@ var QDR = (function (QDR) {
name: 'Entities'
},
{
- content: '<i class="icon-star-empty"></i> Topology',
+ content: '<i class="code-branch"></i> Topology',
title: 'View router network topology',
isValid: function (QDRService) { return QDRService.management.connection.is_connected(); },
href: '#/topology',
@@ -68,11 +68,10 @@ var QDR = (function (QDR) {
name: 'Message Flow'
},
{
- content: '<i class="icon-align-left"></i> Schema',
+ content: '<i class="icon-schema"></i> Schema',
title: 'View dispatch schema',
isValid: function (QDRService) { return QDRService.management.connection.is_connected(); },
href: '#/schema',
- right: true,
name: 'Schema'
}
];
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@qpid.apache.org
For additional commands, e-mail: commits-help@qpid.apache.org