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/10/03 23:10:11 UTC
[qpid-dispatch] branch eallen-DISPATCH-1385 updated: Added
filtering to overview tables
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 896a4fe Added filtering to overview tables
896a4fe is described below
commit 896a4fef2d50199b6a5e56947c01722acb1f6469
Author: Ernest Allen <ea...@redhat.com>
AuthorDate: Thu Oct 3 19:09:56 2019 -0400
Added filtering to overview tables
---
console/react/src/App.css | 7 +++-
console/react/src/overview/addressesTable.js | 5 +--
.../src/overview/dashboard/activeAddressesCard.js | 3 ++
console/react/src/overview/dashboard/chartBase.js | 3 ++
.../overview/dashboard/delayedDeliveriesCard.js | 3 ++
console/react/src/overview/overviewTable.js | 38 +++++++++++++----
console/react/src/overview/routersTable.js | 5 +--
console/react/src/overview/tableToolbar.jsx | 48 ++++++++++++++--------
8 files changed, 79 insertions(+), 33 deletions(-)
diff --git a/console/react/src/App.css b/console/react/src/App.css
index 8704b46..1f7a1f0 100644
--- a/console/react/src/App.css
+++ b/console/react/src/App.css
@@ -902,9 +902,12 @@ div.qdrChord .legend-text {
.toolbar-pagination {
margin-left: auto;
- margin-right: 0 !important;
}
-.table-toolbar {
+.overview-table .pf-m-footer {
+ padding-right: 2em;
+}
+
+.table-toolbar .pf-l-toolbar__item {
margin-right: 0 !important;
}
diff --git a/console/react/src/overview/addressesTable.js b/console/react/src/overview/addressesTable.js
index 860c85a..160d0b7 100644
--- a/console/react/src/overview/addressesTable.js
+++ b/console/react/src/overview/addressesTable.js
@@ -22,9 +22,8 @@ import AddressHelper from "./addressHelper";
class AddressesTable extends OverviewTable {
constructor(props) {
- const helper = new AddressHelper(props.service);
- super(props, helper);
- this.helper = helper;
+ super(props);
+ this.helper = new AddressHelper(this.props.service);
}
}
diff --git a/console/react/src/overview/dashboard/activeAddressesCard.js b/console/react/src/overview/dashboard/activeAddressesCard.js
index a4fc2be..6ec88d2 100644
--- a/console/react/src/overview/dashboard/activeAddressesCard.js
+++ b/console/react/src/overview/dashboard/activeAddressesCard.js
@@ -15,11 +15,13 @@ class ActiveAddressesCard extends React.Component {
}
componentDidMount = () => {
+ this.mounted = true;
this.timer = setInterval(this.updateData, UPDATE_INTERVAL);
this.updateData();
};
componentWillUnmount = () => {
+ this.mounted = false;
clearInterval(this.timer);
};
@@ -30,6 +32,7 @@ class ActiveAddressesCard extends React.Component {
attrs: ["settleRate", "linkType", "linkDir", "owningAddr"]
},
results => {
+ if (!this.mounted) return;
let active = {};
for (let id in results) {
const aresult = results[id]["router.link"];
diff --git a/console/react/src/overview/dashboard/chartBase.js b/console/react/src/overview/dashboard/chartBase.js
index 088b1ad..1c8d72c 100644
--- a/console/react/src/overview/dashboard/chartBase.js
+++ b/console/react/src/overview/dashboard/chartBase.js
@@ -40,10 +40,12 @@ class ChartBase extends React.Component {
}
componentDidMount = () => {
+ this.mounted = true;
this.timer = setInterval(this.updateData, 1000);
};
componentWillUnmount = () => {
+ this.mounted = false;
clearInterval(this.timer);
};
@@ -62,6 +64,7 @@ class ChartBase extends React.Component {
if (!this.initialized) {
this.init(datum);
}
+ if (!this.mounted) return;
const { rates } = this.state;
this.rawData.push(datum);
this.rawData.splice(0, 1);
diff --git a/console/react/src/overview/dashboard/delayedDeliveriesCard.js b/console/react/src/overview/dashboard/delayedDeliveriesCard.js
index 7a238ac..0c665b8 100644
--- a/console/react/src/overview/dashboard/delayedDeliveriesCard.js
+++ b/console/react/src/overview/dashboard/delayedDeliveriesCard.js
@@ -24,11 +24,13 @@ class DelayedDeliveriesCard extends React.Component {
}
componentDidMount = () => {
+ this.mounted = true;
this.timer = setInterval(this.updateData, UPDATE_INTERVAL);
this.updateData();
};
componentWillUnmount = () => {
+ this.mounted = false;
clearInterval(this.timer);
};
@@ -38,6 +40,7 @@ class DelayedDeliveriesCard extends React.Component {
this.props.service.management.topology.fetchAllEntities(
[{ entity: "router.link" }, { entity: "connection" }],
nodes => {
+ if (!this.mounted) return;
for (let node in nodes) {
let response = nodes[node]["router.link"];
// eslint-disable-next-line no-loop-func
diff --git a/console/react/src/overview/overviewTable.js b/console/react/src/overview/overviewTable.js
index 4f2287c..c3f7315 100644
--- a/console/react/src/overview/overviewTable.js
+++ b/console/react/src/overview/overviewTable.js
@@ -5,7 +5,7 @@ import { Pagination, Title } from "@patternfly/react-core";
import TableToolbar from "./tableToolbar";
class OverviewTable extends React.Component {
- constructor(props, helper) {
+ constructor(props) {
super(props);
this.state = {
sortBy: {},
@@ -13,7 +13,7 @@ class OverviewTable extends React.Component {
total: 1,
page: 1,
loading: true,
- columns: helper.fields,
+ columns: [],
allRows: [],
rows: [
{
@@ -45,11 +45,35 @@ class OverviewTable extends React.Component {
}
]
};
+ this.helper = null; // set in parent class
}
+ componentDidMount() {
+ this.mounted = true;
+ console.log("overviewTable componentDidMount");
+ // initialize the columns and get the data
+ this.setState({ columns: this.helper.fields }, () => {
+ this.update();
+ this.timer = setInterval(this.upate, 5000);
+ });
+ }
+
+ componentWillUnmount = () => {
+ this.mounted = false;
+ clearInterval(this.timer);
+ };
+
+ update = () => {
+ this.fetch(this.state.page, this.state.perPage);
+ };
+
fetch = (page, perPage) => {
+ if (!this.mounted) return;
this.setState({ loading: true });
this.helper.fetch(perPage, page, this.state.sortBy).then(sliced => {
+ // if fetch was called and the component was unmounted before
+ // the results arrived, don't call setState
+ if (!this.mounted) return;
const { rows, page, total, allRows } = sliced;
this.setState({
rows,
@@ -67,11 +91,6 @@ class OverviewTable extends React.Component {
this.setState({ rows, page: 1, sortBy: { index, direction } });
};
- componentDidMount() {
- console.log("overviewTable componentDidMount");
- this.fetch(this.state.page, this.state.perPage);
- }
-
renderPagination(variant = "top") {
const { page, perPage, total } = this.state;
return (
@@ -92,6 +111,9 @@ class OverviewTable extends React.Component {
onPerPageSelect = value => {
this.fetch(1, value);
};
+ handleChangeFilterValue = (field, value) => {
+ console.log(`handleChangeFilterValue(${field}, ${value})`);
+ };
render() {
console.log("OverviewTable rendered");
const { loading } = this.state;
@@ -103,6 +125,8 @@ class OverviewTable extends React.Component {
perPage={this.state.perPage}
onSetPage={this.onSetPage}
onPerPageSelect={this.onPerPageSelect}
+ fields={this.helper.fields}
+ handleChangeFilterValue={this.handleChangeFilterValue}
/>
{!loading && (
<Table
diff --git a/console/react/src/overview/routersTable.js b/console/react/src/overview/routersTable.js
index 9ae7aba..f00dca3 100644
--- a/console/react/src/overview/routersTable.js
+++ b/console/react/src/overview/routersTable.js
@@ -22,9 +22,8 @@ import RouterHelper from "./routerHelper";
class RoutersTable extends OverviewTable {
constructor(props) {
- const helper = new RouterHelper(props.service);
- super(props, helper);
- this.helper = helper;
+ super(props);
+ this.helper = new RouterHelper(this.props.service);
}
}
diff --git a/console/react/src/overview/tableToolbar.jsx b/console/react/src/overview/tableToolbar.jsx
index f5cde95..79154d0 100644
--- a/console/react/src/overview/tableToolbar.jsx
+++ b/console/react/src/overview/tableToolbar.jsx
@@ -16,32 +16,47 @@ class TableToolbar extends React.Component {
super(props);
this.state = {
isDropDownOpen: false,
- searchValue: ""
+ searchValue: "",
+ filterBy: this.props.fields[0].title
};
this.handleTextInputChange = value => {
- this.setState({ searchValue: value });
+ this.setState({ searchValue: value }, () => {
+ this.props.handleChangeFilterValue(
+ this.state.filterBy,
+ this.state.searchValue
+ );
+ });
};
- this.onDropDownToggle = isOpen => {
+ this.onDropDownToggle = isDropDownOpen => {
this.setState({
- isDropDownOpen: isOpen
+ isDropDownOpen
});
};
this.onDropDownSelect = event => {
- this.setState({
- isDropDownOpen: !this.state.isDropDownOpen
- });
+ this.setState(
+ {
+ isDropDownOpen: !this.state.isDropDownOpen,
+ filterBy: event.target.text,
+ searchValue: ""
+ },
+ () =>
+ this.props.handleChangeFilterValue(
+ this.state.filterBy,
+ this.state.searchValue
+ )
+ );
};
this.buildSearchBox = () => {
- let { value } = this.state.searchValue;
return (
<TextInput
- value={value ? value : ""}
+ value={this.state.searchValue}
type="search"
onChange={this.handleTextInputChange}
aria-label="search text input"
+ placeholder="Filter by..."
/>
);
};
@@ -54,18 +69,15 @@ class TableToolbar extends React.Component {
position={DropdownPosition.right}
toggle={
<DropdownToggle onToggle={this.onDropDownToggle}>
- All
+ {this.state.filterBy}
</DropdownToggle>
}
isOpen={isDropDownOpen}
- dropdownItems={[
- <DropdownItem key="item-1">Item 1</DropdownItem>,
- <DropdownItem key="item-2">Item 2</DropdownItem>,
- <DropdownItem key="item-3">Item 3</DropdownItem>,
- <DropdownItem isDisabled key="all">
- All
- </DropdownItem>
- ]}
+ dropdownItems={this.props.fields.map(f => {
+ return (
+ <DropdownItem key={`item-${f.title}`}>{f.title}</DropdownItem>
+ );
+ })}
/>
);
};
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@qpid.apache.org
For additional commands, e-mail: commits-help@qpid.apache.org