DISPATCH-1002 Added optional message flow animation to topology page
Project: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/repo Commit: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/commit/61df4890 Tree: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/tree/61df4890 Diff: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/diff/61df4890 Branch: refs/heads/master Commit: 61df4890ba6b1ed240b0c00accf57170115c219c Parents: e9f8a85 Author: Ernest Allen <eal...@redhat.com> Authored: Thu May 17 16:54:52 2018 -0400 Committer: Ernest Allen <eal...@redhat.com> Committed: Thu May 17 16:54:52 2018 -0400 ---------------------------------------------------------------------- console/stand-alone/plugin/css/dispatch.css | 3 - console/stand-alone/plugin/html/qdrSchema.html | 6 +- .../stand-alone/plugin/html/qdrTopology.html | 107 +- console/stand-alone/plugin/js/chord/matrix.js | 19 +- console/stand-alone/plugin/js/chord/qdrChord.js | 2 +- console/stand-alone/plugin/js/qdrList.js | 2 + console/stand-alone/plugin/js/qdrTopology.js | 2098 ----------------- .../plugin/js/topology/qdrTopology.js | 2125 ++++++++++++++++++ .../stand-alone/plugin/js/topology/traffic.js | 278 +++ 9 files changed, 2527 insertions(+), 2113 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/61df4890/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 index 0096f95..a815ca1 100644 --- a/console/stand-alone/plugin/css/dispatch.css +++ b/console/stand-alone/plugin/css/dispatch.css @@ -263,9 +263,6 @@ li.currentStep { font-weight: bold; } -.qdrTopology div.panel { - position: absolute; -} /* .ui-dialog-titlebar { border: 0; http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/61df4890/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 5bd9207..6b86689 100644 --- a/console/stand-alone/plugin/html/qdrSchema.html +++ b/console/stand-alone/plugin/html/qdrSchema.html @@ -24,10 +24,8 @@ under the License. span.fancytree-title { color: black; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - width: 16em; + width: auto; + white-space: normal; } span.fancytree-node:hover { http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/61df4890/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 2b82e34..e355413 100644 --- a/console/stand-alone/plugin/html/qdrTopology.html +++ b/console/stand-alone/plugin/html/qdrTopology.html @@ -93,15 +93,88 @@ button.page-menu-button { .page-menu { width: 300px; } - + + .legend-container { + position: absolute; + top: 1em; + right: 1em; + } + + .legend-container ul { + list-style: none; + padding-left: 0; + margin-bottom: 0.5em; + } + + span.legend-text { + padding-left: 0.25em; + font-weight: bold; + } + + span.legend-text:disabled { + color: darkgray; + } + + li:disabled * { + color: darkgray; + } + circle.flow { + opacity: 1; + pointer-events: none; + /*fill: green; */ + } + + circle.flow.fade { + opacity: 0.1; + } + + #topo_legend ul.addresses li, #topo_legend ul.options li { + margin-top: 0.5em; + margin-bottom: 1em; + } + +#topo_legend ul.addresses { + margin-bottom: 1.5em; +} + + /* the checkboxes for the addresses */ + #topo_legend ul li input[type=checkbox]:checked + label::before { + content:'\2713'; + font-weight: bold; + font-size: 16px; + display:inline-block; + /* padding:0 6px 0 0; */ + color: black; + position: absolute; + top: -8px; + left: -1px; + } + /* The aggregate addresses need a black checkbox on the white background */ + #topo_legend ul li input[type=checkbox]:checked + label.aggregate::before { + color: black; + /* left: 1px; */ + } +#topo_legend ul.addresses button.btn-default { + background-image: none; + color: white; + border-radius: 10px; +} + +#topo_legend li.legend-sublist ul { + margin-bottom: 0.5em; + } + +#topo_legend li.legend-sublist ul.addresses{ + max-height: 11.6em; /* show up to 4 addresses */ + overflow-y: auto; +} </style> -<div class="qdrTopology row" ng-controller="QDR.TopologyController"> +<div class="qdrTopology" ng-controller="QDR.TopologyController"> <div ng-controller="QDR.TopologyFormController"> <div class="page-menu navbar-collapse collapse"> <div id="topologyForm"> <div> <h4>{{form}} Info</h4> - <!-- <div id="routerInfo" class="grid" ui-grid="topoGridRouter" ng-style="infoStyle()"></div> --> <div id="formInfo"></div> </div> </div> @@ -110,7 +183,32 @@ button.page-menu-button { <button ng-if="!panelVisible" ng-click="showLeftPane()" class="showLeft" title="Show"><i class="icon-step-forward"></i></button> </div> - <div class="diagram col-xs-12"> + <div class="legend-container hidden-xs"> + <uib-accordion id="topo_legend" close-others="false"> + <div uib-accordion-group class="panel-default" is-open="legend.status.optionsOpen" heading="Options"> + <ul class="options"> + <li class="legend-line"> + <checkbox title="Show message traffic" ng-model="legendOptions.showTraffic"></checkbox> + <span class="legend-text" title="Select to show message traffic">Show traffic</span> + </li> + <li class="legend-sublist" ng-hide="!legendOptions.showTraffic"> + <ul class="addresses"> + <li ng-repeat="(address, color) in addresses" class="legend-line"> + <checkbox style="background-color: {{addressColors[address]}};" + title="{{address}}" ng-change="addressFilterChanged()" + ng-model="addresses[address]"></checkbox> + <span class="legend-text" ng-mouseenter="enterLegend(address)" ng-mouseleave="leaveLegend()" ng-click="addressClick(address)" title="{{address}}">{{address | limitTo : 15}}{{address.length>15 ? 'â¦' : ''}}</span> + </li> + </ul> + </li> + </ul> + </div> + <div uib-accordion-group class="panel-default" is-open="legend.status.legendOpen" heading="Legend"> + <div id="topo_svg_legend"></div> + </div> + </uib-accordion> + </div> + <div class="diagram"> <div id="topology"><!-- d3 toplogy here --></div> <div id="crosssection"></div><div id="crosshtml" ng-bind-html="crosshtml"></div> @@ -120,7 +218,6 @@ button.page-menu-button { <li class="na" ng-class="{'force-display': isFixed()}" ng-click="setFixed(false)">Unfreeze</li> </ul> </div> - <div id="svg_legend" class="hidden-xs"></div> <div id="multiple_details"> <h4 class="grid-title">Connections</h4> <div class="grid" ui-grid="multiDetails" ui-grid-selection ui-grid-auto-resize ng-style="connectionsStyle()"></div> http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/61df4890/console/stand-alone/plugin/js/chord/matrix.js ---------------------------------------------------------------------- diff --git a/console/stand-alone/plugin/js/chord/matrix.js b/console/stand-alone/plugin/js/chord/matrix.js index d8b9456..3f10ddc 100644 --- a/console/stand-alone/plugin/js/chord/matrix.js +++ b/console/stand-alone/plugin/js/chord/matrix.js @@ -71,7 +71,18 @@ valuesMatrix.prototype.hasValues = function () { }); }); }; - +valuesMatrix.prototype.getMinMax = function () { + let min = Number.MAX_VALUE, max = Number.MIN_VALUE; + this.rows.forEach( function (row) { + row.cols.forEach( function (col) { + if (col.messages > MIN_CHORD_THRESHOLD) { + max = Math.max(max, col.messages); + min = Math.min(min, col.messages); + } + }); + }); + return [min, max]; +}; // extract a square matrix with just the values from the object matrix valuesMatrix.prototype.matrixMessages = function () { let m = emptyMatrix(this.rows.length); @@ -130,7 +141,11 @@ valuesMatrix.prototype.getAddresses = function (r) { let getAttribute = function (self, attr, i) { if (self.aggregate) return self.rows[i][attr]; - return self.rows[self.getGroupBy().indexOf(i)][attr]; + let groupByIndex = self.getGroupBy().indexOf(i); + if (groupByIndex < 0) { + groupByIndex = i; + } + return self.rows[groupByIndex][attr]; }; valuesMatrix.prototype.addRow = function (chordName, ingress, egress, address) { let rowIndex = this.rows.length; http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/61df4890/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 5ce7aa1..91ee96a 100644 --- a/console/stand-alone/plugin/js/chord/qdrChord.js +++ b/console/stand-alone/plugin/js/chord/qdrChord.js @@ -520,7 +520,7 @@ var QDR = (function (QDR) { .transition() .duration(duration/2) .attrTween('d', arcTweenExit) - .each('end', function (d) {d3.select(this).node().parentNode.remove();}); + .each('end', function () {d3.select(this).node().parentNode.remove();}); // decorate the chord layout's .chord() data with key, color, and orgIndex rechord.chordData = decorateChordData(rechord, matrix); http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/61df4890/console/stand-alone/plugin/js/qdrList.js ---------------------------------------------------------------------- diff --git a/console/stand-alone/plugin/js/qdrList.js b/console/stand-alone/plugin/js/qdrList.js index 056e686..8044400 100644 --- a/console/stand-alone/plugin/js/qdrList.js +++ b/console/stand-alone/plugin/js/qdrList.js @@ -376,6 +376,7 @@ var QDR = (function(QDR) { }); let h = $scope.detailFields.length * 30 + 46; $('.ui-grid-viewport').height(h); + $scope.details.excessRows = $scope.detailFields.length; }; $(window).resize(resizer); @@ -731,6 +732,7 @@ var QDR = (function(QDR) { enableVerticalScrollbar: 0, multiSelect: false, jqueryUIDraggable: true, + excessRows: 20, onRegisterApi: function(gridApi) { $scope.gridApi = gridApi; } --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@qpid.apache.org For additional commands, e-mail: commits-h...@qpid.apache.org
