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/09/26 21:22:06 UTC
[qpid-dispatch] branch eallen-DISPATCH-1385 updated: Consolidate
addressComponent in legends for Topology and Message flow pages
This is an automated email from the ASF dual-hosted git repository.
eallen pushed a commit to branch eallen-DISPATCH-1385
in repository https://gitbox.apache.org/repos/asf/qpid-dispatch.git
The following commit(s) were added to refs/heads/eallen-DISPATCH-1385 by this push:
new ed9238f Consolidate addressComponent in legends for Topology and Message flow pages
ed9238f is described below
commit ed9238f343c40074a3636566c7571e8efb17af22
Author: Ernest Allen <ea...@redhat.com>
AuthorDate: Thu Sep 26 17:21:49 2019 -0400
Consolidate addressComponent in legends for Topology and Message flow pages
---
console/react/src/App.css | 17 +++++++++----
.../react/src/{chord => }/addressesComponent.js | 8 +++---
console/react/src/chord/legendComponent.js | 6 ++---
console/react/src/topology/trafficComponent.js | 29 +++++++++++-----------
4 files changed, 34 insertions(+), 26 deletions(-)
diff --git a/console/react/src/App.css b/console/react/src/App.css
index 1d89e47..93a6238 100644
--- a/console/react/src/App.css
+++ b/console/react/src/App.css
@@ -434,8 +434,7 @@ g text {
pointer-events: none;
}
-svg.address-svg g text,
-svg.chord-address-svg g text {
+svg.address-svg g text {
cursor: pointer;
pointer-events: auto;
}
@@ -457,6 +456,13 @@ svg:not(.active):not(.ctrl) {
svg.address-svg {
cursor: pointer;
}
+svg.address-svg {
+ margin-left: 1.5em;
+}
+.qdrChord svg.address-svg {
+ margin-left: 0;
+}
+
path.link.selected:not(.traffic) {
/* stroke-dasharray: 10,2; */
stroke: #33f !important;
@@ -629,9 +635,6 @@ div.qdrChord {
#traffic-address .pf-c-check {
padding-bottom: 0.5em;
}
-.address-svg {
- margin-left: 1.5em;
-}
.popup-info table.popupTable td {
font-size: 14px;
@@ -738,3 +741,7 @@ div.qdrChord .legend-text {
color: black;
font-size: 16px;
}
+
+.legend ul {
+ margin-bottom: 0;
+}
diff --git a/console/react/src/chord/addressesComponent.js b/console/react/src/addressesComponent.js
similarity index 92%
rename from console/react/src/chord/addressesComponent.js
rename to console/react/src/addressesComponent.js
index e0333c2..3193a97 100644
--- a/console/react/src/chord/addressesComponent.js
+++ b/console/react/src/addressesComponent.js
@@ -30,13 +30,15 @@ class AddressesComponent extends Component {
};
dotHover = (address, over) => {
- this.props.handleHoverAddress(address, over);
+ if (this.props.handleHoverAddress) {
+ this.props.handleHoverAddress(address, over);
+ }
};
coloredDot = (address, i) => {
return (
<svg
- className="chord-address-svg"
+ className="address-svg"
id={`address-dot-${i}`}
width="200"
height="20"
@@ -48,7 +50,7 @@ class AddressesComponent extends Component {
onMouseOver={() => this.dotHover(address, true)}
onMouseOut={() => this.dotHover(address, false)}
>
- <circle r="10" fill={this.props.chordColors[address]} />
+ <circle r="10" fill={this.props.addressColors[address]} />
{this.props.addresses[address] ? (
<text x="-8" y="5" className="address-checkbox">

diff --git a/console/react/src/chord/legendComponent.js b/console/react/src/chord/legendComponent.js
index a9a2901..9ad75ac 100644
--- a/console/react/src/chord/legendComponent.js
+++ b/console/react/src/chord/legendComponent.js
@@ -26,7 +26,7 @@ import {
} from "@patternfly/react-core";
import OptionsComponent from "./optionsComponent";
import RoutersComponent from "./routersComponent";
-import AddressesComponent from "./addressesComponent";
+import AddressesComponent from "../addressesComponent";
class LegendComponent extends Component {
constructor(props) {
@@ -41,7 +41,7 @@ class LegendComponent extends Component {
};
return (
- <Accordion>
+ <Accordion className="legend">
<AccordionItem>
<AccordionToggle
onClick={() => toggle("options")}
@@ -96,7 +96,7 @@ class LegendComponent extends Component {
>
<AddressesComponent
addresses={this.props.addresses}
- chordColors={this.props.chordColors}
+ addressColors={this.props.chordColors}
handleChangeAddress={this.props.handleChangeAddress}
handleHoverAddress={this.props.handleHoverAddress}
/>
diff --git a/console/react/src/topology/trafficComponent.js b/console/react/src/topology/trafficComponent.js
index e936582..6affdf5 100644
--- a/console/react/src/topology/trafficComponent.js
+++ b/console/react/src/topology/trafficComponent.js
@@ -19,6 +19,7 @@ under the License.
import React, { Component } from "react";
import { Checkbox } from "@patternfly/react-core";
+import AddressesComponent from "../addressesComponent";
class TrafficComponent extends Component {
constructor(props) {
@@ -75,21 +76,19 @@ class TrafficComponent extends Component {
name="dots"
/>
</li>
- <li id="traffic-dots-addresses">
- <ul className={this.props.dots ? "addresses" : "hidden"}>
- {Object.keys(this.props.addresses).length === 0 ? (
- <li key={`address-empty`}>There is no traffic</li>
- ) : (
- Object.keys(this.props.addresses).map((address, i) => {
- return (
- <li key={`address-${i}`} className="legend-line">
- {this.coloredDot(address, i)}
- </li>
- );
- })
- )}
- </ul>
- </li>
+ {this.props.dots ? (
+ <li id="traffic-dots-addresses">
+ <AddressesComponent
+ addresses={this.props.addresses}
+ addressColors={this.props.addressColors}
+ handleChangeAddress={
+ this.props.handleChangeTrafficFlowAddress
+ }
+ />
+ </li>
+ ) : (
+ <React.Fragment />
+ )}
</ul>
<ul>
<li id="traffic-congestion">
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@qpid.apache.org
For additional commands, e-mail: commits-help@qpid.apache.org