Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix topology view updates on search and item select #6033

Merged

Conversation

jeff-phillips-18
Copy link
Member

Fixes
https://issues.redhat.com/browse/ODC-4346
https://issues.redhat.com/browse/ODC-4355

Description
Topology graph view needs to update node renderings when the selections change and when the filter value changes. Add a watcher on the match parameter to re-render when it changes.

/kind bug

@openshift-ci-robot openshift-ci-robot added the kind/bug Categorizes issue or PR as related to a bug. label Jul 20, 2020
@openshift-ci-robot openshift-ci-robot added the component/dev-console Related to dev-console label Jul 20, 2020
@christianvogt
Copy link
Contributor

@jeff-phillips-18 can we use react-router useParams instead of getQueryArgument ? This way the hook is reactive to changes in the URL. Looks like this is available in react-router v5.

Comment on lines +281 to +283
const selectId = queryParams.get('selectId');
const selectTab = queryParams.get('selectTab');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

queryParams should be a dependency.
We should remove the comment // eslint-disable-next-line react-hooks/exhaustive-deps because that is an old comment and the dependencies have changed since.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✔️

Comment on lines 3 to 7
export const useQueryParams = () => {
return new URLSearchParams(useLocation().search);
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We want the result to be stable and only change when search has changed.

Suggested change
export const useQueryParams = () => {
return new URLSearchParams(useLocation().search);
};
export const useQueryParams = () => {
const search = useLocation().search;
const queryParams = React.useMemo(() => new URLSearchParams(search), [search]);
return queryParams;
};

kindsInFlight,
trafficData,
}) => {
const dataModelContext = React.useContext<ExtensibleModel>(ModelContext);
const [model, setModel] = React.useState<Model>(null);
const [loadError, setLoadError] = React.useState<string>(null);
const params = useParams();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we are better off to pass in props than couple the component to URL params. Especially when the component is utility in nature.

Comment on lines -16 to -18
match: RMatch<{
name?: string;
}>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we just accept namespace here instead as to not couple this component to router or url.

@christianvogt
Copy link
Contributor

/lgtm
/approve

@openshift-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: christianvogt, jeff-phillips-18

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@openshift-ci-robot openshift-ci-robot added lgtm Indicates that a PR is ready to be merged. approved Indicates a PR has been approved by an approver from all required OWNERS files. labels Jul 24, 2020
@openshift-merge-robot openshift-merge-robot merged commit 7145753 into openshift:master Jul 24, 2020
@spadgett spadgett added the kind/dependency-change Categorizes issue or PR as related to changing dependencies label Jul 28, 2020
@spadgett spadgett added this to the v4.6 milestone Jul 28, 2020
@jeff-phillips-18 jeff-phillips-18 deleted the topology-update branch December 2, 2020 13:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. component/dev-console Related to dev-console component/shared Related to console-shared kind/bug Categorizes issue or PR as related to a bug. kind/dependency-change Categorizes issue or PR as related to changing dependencies lgtm Indicates that a PR is ready to be merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants