qpid-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From eal...@apache.org
Subject [qpid-dispatch] branch master updated: DISPATCH-1331 Add router info popup to console's topology page
Date Thu, 09 May 2019 19:44:02 GMT
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 <eallen@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


Mime
View raw message