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 2019/05/09 19:44:02 UTC
[qpid-dispatch] branch master updated: DISPATCH-1331 Add router
info popup to console's topology page
This is an automated email from the ASF dual-hosted git repository.
eallen pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/qpid-dispatch.git
The following commit(s) were added to refs/heads/master by this push:
new ca6f853 DISPATCH-1331 Add router info popup to console's topology page
ca6f853 is described below
commit ca6f853661a995b58473daa276e427278c7e7494
Author: Ernest Allen <ea...@redhat.com>
AuthorDate: Thu May 9 15:43:32 2019 -0400
DISPATCH-1331 Add router info popup to console's topology page
---
console/stand-alone/main.js | 2 +
console/stand-alone/plugin/html/qdrTopology.html | 4 +-
.../stand-alone/plugin/html/tmplRouterDetail.html | 123 +++++++++++++++++++++
.../stand-alone/plugin/js/dlgRouterController.js | 37 +++++++
console/stand-alone/plugin/js/topology/links.js | 4 +
console/stand-alone/plugin/js/topology/nodes.js | 22 +++-
.../stand-alone/plugin/js/topology/qdrTopology.js | 60 +++++++---
7 files changed, 228 insertions(+), 24 deletions(-)
diff --git a/console/stand-alone/main.js b/console/stand-alone/main.js
index 11445c1..8ad5e37 100644
--- a/console/stand-alone/main.js
+++ b/console/stand-alone/main.js
@@ -41,6 +41,7 @@ import { ListController } from './plugin/js/qdrList.js';
import { TopAddressesController } from './plugin/js/qdrTopAddressesController.js';
import { ChartDialogController } from './plugin/js/dlgChartController.js';
import { DetailDialogController, SubTable } from './plugin/js/dlgDetailController.js';
+import { RouterDialogController } from './plugin/js/dlgRouterController.js';
import { SettingsController } from './plugin/js/qdrSettings.js';
import { SchemaController } from './plugin/js/qdrSchema.js';
import { ChartsController } from './plugin/js/qdrCharts.js';
@@ -286,6 +287,7 @@ import { posint } from './plugin/js/posintDirective.js';
QDR.module.controller('QDR.TopAddressesController', TopAddressesController);
QDR.module.controller('QDR.ChartDialogController', ChartDialogController);
QDR.module.controller('QDR.DetailDialogController', DetailDialogController);
+ QDR.module.controller('QDR.RouterDialogController', RouterDialogController);
QDR.module.controller('QDR.SettingsController', SettingsController);
QDR.module.controller('QDR.TopologyController', TopologyController);
QDR.module.controller('QDR.ChordController', ChordController);
diff --git a/console/stand-alone/plugin/html/qdrTopology.html b/console/stand-alone/plugin/html/qdrTopology.html
index 14b5c8b..4c1a7d2 100644
--- a/console/stand-alone/plugin/html/qdrTopology.html
+++ b/console/stand-alone/plugin/html/qdrTopology.html
@@ -305,6 +305,8 @@ td.more-info {
<ul>
<li class="na" ng-class="{'force-display': !isFixed()}" ng-click="setFixed(true)">Freeze in place</li>
<li class="na" ng-class="{'force-display': isFixed()}" ng-click="setFixed(false)">Unfreeze</li>
+ <li class="na" ng-class="{'force-display': isSelected()}" ng-if="isSelectable()" ng-click="setSelected(false)">Unselect</li>
+ <li class="na" ng-class="{'force-display': !isSelected()}" ng-if="isSelectable()" ng-click="setSelected(true)">Select</li>
</ul>
</div>
</div>
@@ -321,4 +323,4 @@ td.more-info {
</script>
<script type="text/ng-template" id="titleCellTemplate.html">
<div title="{{row.entity.attributeValue}}" class="ui-grid-cell-contents">{{COL_FIELD CUSTOM_FILTERS | pretty}}</div>
-</script>
\ No newline at end of file
+</script>
diff --git a/console/stand-alone/plugin/html/tmplRouterDetail.html b/console/stand-alone/plugin/html/tmplRouterDetail.html
new file mode 100644
index 0000000..b479ceb
--- /dev/null
+++ b/console/stand-alone/plugin/html/tmplRouterDetail.html
@@ -0,0 +1,123 @@
+<!--
+ 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
+-->
+
+<style>
+ div.details {
+ max-height: 21em;
+ overflow: auto;
+ }
+
+ table td.right {
+ text-align: right;
+ }
+ table td {
+ padding: .4em;
+ border-right: 1px solid #F0F0F0;
+ }
+ table tr.odd {
+ background-color: #F0F0F0;
+ }
+ table td.expander {
+ cursor: pointer;
+ width: 1em;
+ }
+ table tr.hiddenRow {
+ display: none;
+ }
+ div.details {
+ width: 100%;
+ }
+ div.details span.right {
+ float: right;
+ }
+
+ div.sub-table {
+ border: 1px solid #CCCCCC;
+ margin: 1em 0;
+ }
+ div.sub-table-row.body {
+ background-color: #FFFFFF;
+ }
+ div.sub-table-row {
+ border-bottom: 1px solid #CCCCCC;
+ }
+ div.sub-table-row:last-child {
+ border-bottom: 0px;
+ }
+ div.sub-table-row.header {
+ background-clip: padding-box;
+ background-color: #f5f5f5;
+ background-image: linear-gradient(to bottom,#fafafa 0,#ededed 100%);
+ background-repeat: repeat-x;
+ }
+
+ span.sub-table-col {
+ display: inline-block;
+ border-right: 1px solid #CCCCCC;
+ padding: 2px 10px 3px;
+ }
+ span.sub-table-col:last-child {
+ border-right: 0px;
+ }
+
+
+ dl.sub-table {
+ display: grid;
+ grid-template-columns: max-content auto;
+ margin-left: 0.5em;
+ background-color: white;
+ border: 1px solid #CCCCCC;
+ }
+
+ dl.sub-table dt {
+ grid-column-start: 1;
+ padding: 3px 3em 3px 10px;
+ border-bottom: 1px solid #CCCCCC;
+ border-right: 1px solid #CCCCCC;
+ }
+
+ dl.sub-table dd {
+ grid-column-start: 2;
+ padding: 3px 10px;
+ border-bottom: 1px solid #CCCCCC;
+ }
+ dl.sub-table dd:last-child, dl.sub-table dt:last-of-type {
+ border-bottom: 0px;
+ }
+
+ dl.sub-table dd.odd, dl.sub-table dt.odd {
+ background-color: #f0f0f0;
+ }
+</style>
+<!--
+ This is the template for the client detail popup displayed when a group
+ of edge routers or clients are clicked on the topology page
+-->
+<div>
+ <div class="modal-header">
+ <h3 class="modal-title">Detail {{detail.title}}</h3>
+ </div>
+ <div class="modal-body">
+ <h4>{{detail.description}}</h4>
+ <div class="details" ng-bind-html="tip"></div>
+ </div>
+ <div class="modal-footer">
+ <button class="btn btn-primary" type="button" ng-click="okClick()">Close</button>
+ </div>
+</div>
diff --git a/console/stand-alone/plugin/js/dlgRouterController.js b/console/stand-alone/plugin/js/dlgRouterController.js
new file mode 100644
index 0000000..3920828
--- /dev/null
+++ b/console/stand-alone/plugin/js/dlgRouterController.js
@@ -0,0 +1,37 @@
+/*
+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.
+*/
+
+export class RouterDialogController {
+ constructor(QDRService, $scope, $timeout, $uibModalInstance, d, tip) {
+ this.controllerName = 'QDR.RouterDialogController';
+ this.rates = {};
+
+ $scope.d = d; // the node object
+ $scope.detail = {
+ template: 'loading.html',
+ };
+ $scope.tip = tip;
+
+ // close button clicked
+ $scope.okClick = function () {
+ $uibModalInstance.close(true);
+ };
+ }
+}
+RouterDialogController.$inject = ['QDRService', '$scope', '$timeout', '$uibModalInstance', 'd', 'tip'];
diff --git a/console/stand-alone/plugin/js/topology/links.js b/console/stand-alone/plugin/js/topology/links.js
index 1260415..82806e8 100644
--- a/console/stand-alone/plugin/js/topology/links.js
+++ b/console/stand-alone/plugin/js/topology/links.js
@@ -136,6 +136,10 @@ export class Links {
onode.connection.results[c]
);
+ // we need a unique connection.container
+ if (connection.container === '') {
+ connection.container = utils.uuidv4();
+ }
// this is a connection to another interior router
if (connection.role === "inter-router") {
const target = getContainerIndex(connection.container, nodeInfo);
diff --git a/console/stand-alone/plugin/js/topology/nodes.js b/console/stand-alone/plugin/js/topology/nodes.js
index 26ac9bc..00cabad 100644
--- a/console/stand-alone/plugin/js/topology/nodes.js
+++ b/console/stand-alone/plugin/js/topology/nodes.js
@@ -71,13 +71,13 @@ export class Node {
return "";
}
}
- toolTip(topology) {
+ toolTip(topology, verbose) {
return new Promise(
function (resolve) {
if (this.nodeType === "normal" || this.nodeType === "edge") {
resolve(this.clientTooltip());
} else
- this.routerTooltip(topology).then(function (toolTip) {
+ this.routerTooltip(topology, verbose).then(function (toolTip) {
resolve(toolTip);
});
}.bind(this)
@@ -99,7 +99,7 @@ export class Node {
return title;
}
- routerTooltip(topology) {
+ routerTooltip(topology, verbose) {
return new Promise(
function (resolve) {
topology.ensureEntities(
@@ -109,8 +109,7 @@ export class Node {
attrs: ["role", "port", "http"]
},
{
- entity: "router",
- attrs: ["name", "version", "hostName"]
+ entity: "router"
}
],
function (foo, nodes) {
@@ -148,6 +147,19 @@ export class Node {
title +=
"<tr><td>Ports</td><td>" + ports.join(", ") + "</td></tr>";
}
+ // add verbose rows
+ if (verbose) {
+ title +=
+ "<tr><td>Addresses</td><td>" + r.addrCount + "</td></tr>";
+ title +=
+ "<tr><td>Connections</td><td>" + r.connectionCount + "</td></tr>";
+ title +=
+ "<tr><td>Links</td><td>" + r.linkCount + "</td></tr>";
+ title +=
+ "<tr><td>Auto links</td><td>" + r.autoLinkCount + "</td></tr>";
+ title +=
+ "<tr><td>Link routes</td><td>" + r.linkRouteCount + "</td></tr>";
+ }
title += "</table>";
resolve(title);
return title;
diff --git a/console/stand-alone/plugin/js/topology/qdrTopology.js b/console/stand-alone/plugin/js/topology/qdrTopology.js
index c9dec02..88df593 100644
--- a/console/stand-alone/plugin/js/topology/qdrTopology.js
+++ b/console/stand-alone/plugin/js/topology/qdrTopology.js
@@ -164,17 +164,34 @@ export class TopologyController {
};
// show the details dialog for a client or group of clients
- function doDialog(d) {
+ function doDialog(d, type, toolTip) {
+ const dlgs = {
+ router: {
+ templateUrl: "tmplRouterDetail.html",
+ controller: "QDR.RouterDialogController",
+ size: "sm"
+ },
+ client: {
+ templateUrl: "tmplClientDetail.html",
+ controller: "QDR.DetailDialogController",
+ size: "md"
+ }
+ };
+ const which = dlgs[type];
$uibModal
.open({
+ size: which.size,
backdrop: true,
keyboard: true,
backdropClick: true,
- templateUrl: QDRTemplatePath + "tmplClientDetail.html",
- controller: "QDR.DetailDialogController",
+ templateUrl: QDRTemplatePath + which.templateUrl,
+ controller: which.controller,
resolve: {
d: function () {
return d;
+ },
+ tip: function () {
+ return toolTip;
}
}
})
@@ -195,6 +212,22 @@ export class TopologyController {
if (!$scope.contextNode) return false;
return $scope.contextNode.fixed;
};
+ $scope.isSelectable = function () {
+ if (!$scope.contextNode) return false;
+ const d = $scope.contextNode;
+ return d.nodeType !== "normal" &&
+ d.nodeType !== "on-demand" &&
+ d.nodeType !== "edge" &&
+ d.nodeTYpe !== "_edge";
+ };
+ $scope.isSelected = function () {
+ return $scope.isSelectable() && $scope.contextNode === selected_node;
+ };
+ $scope.setSelected = function (b) {
+ selected_node = b ? $scope.contextNode : null;
+ restart();
+ };
+
$scope.addressStyle = function (address) {
return {
"background-color": $scope.addressColors[address]
@@ -707,27 +740,18 @@ export class TopologyController {
return;
}
- // if this node was selected, unselect it
- if ($scope.mousedown_node === selected_node) {
- selected_node = null;
- } else {
- if (
- d.nodeType !== "normal" &&
- d.nodeType !== "on-demand" &&
- d.nodeType !== "edge" &&
- d.nodeTYpe !== "_edge"
- )
- selected_node = $scope.mousedown_node;
- }
clearAllHighlights();
$scope.mousedown_node = null;
- if (!$scope.$$phase) $scope.$apply();
// handle clicking on nodes that represent multiple sub-nodes
if (d.normals && !d.isArtemis && !d.isQpid) {
- doDialog(d);
+ doDialog(d, 'client');
+ } else if (d.nodeType === '_topo') {
+ d.toolTip(QDRService.management.topology, true).then(function (toolTip) {
+ doDialog(d, 'router', toolTip);
+ });
}
// apply any data changes to the interface
- restart();
+ $timeout(restart);
})
.on("dblclick", function (d) {
// circle
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@qpid.apache.org
For additional commands, e-mail: commits-help@qpid.apache.org