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.

Sign up for GitHub

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

Jump to bottom

[Uptime] Improve duration chart #58404

Merged
merged 19 commits into from
Mar 5, 2020
Merged

[Uptime] Improve duration chart #58404

merged 19 commits into from
Mar 5, 2020

Conversation

shahzad31
Copy link
Contributor

@shahzad31 shahzad31 commented Feb 24, 2020 •
edited
Loading

Summary

Fix #58403

Remove only provided color and let the EUI chart coloring scheme work it out.

Also converted duration lines endpoint to rest api.

image

@shahzad31 shahzad31 self-assigned this Feb 24, 2020
@shahzad31 shahzad31 added the Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability label Feb 24, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/uptime (Team:uptime)

@shahzad31 shahzad31 added release_note:skip Skip the PR/issue when compiling release notes v7.7.0 v8.0.0 labels Feb 24, 2020
shahzad31
shahzad31 commented Feb 25, 2020
View reviewed changes
x-pack/legacy/plugins/uptime/public/components/connected/charts/monitor_duration.tsx
Comment on lines +19 to +41
export const DurationChart: React.FC<Props> = ({ monitorId }: Props) => {
const [getUrlParams] = useUrlParams();
const { dateRangeStart, dateRangeEnd } = getUrlParams();

const { monitor_duration, loading } = useSelector(selectDurationLines);

const dispatch = useDispatch();

const { lastRefresh } = useContext(UptimeRefreshContext);

useEffect(() => {
dispatch(
getMonitorDurationAction({ monitorId, dateStart: dateRangeStart, dateEnd: dateRangeEnd })
);
}, [dateRangeStart, dateRangeEnd, dispatch, lastRefresh, monitorId]);

return (
<DurationChartComponent
locationDurationLines={monitor_duration?.locationDurationLines ?? []}
loading={loading}
/>
);
};
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@justinkambic using hooks redux becomes much cleaner and simple. At least the connect part.

Copy link
Contributor

Choose a reason for hiding this comment

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

++ was just thinking that to myself. I have never used the hooks before; does this mean...

const { monitor_duration, loading } = useSelector(selectDurationLines);

...is effectively mapStateToProps? And we could use multiple selectors if needed to get the state we want, instead of doing it in a function we'd pass to connect?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes, you can use as many selectors as you like.

@andrewvc andrewvc mentioned this pull request Feb 25, 2020
Closed
4 tasks
justinkambic
justinkambic reviewed Feb 28, 2020
View reviewed changes
Copy link
Contributor

@justinkambic justinkambic left a comment

Choose a reason for hiding this comment

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

I had a few comments for clarification or minor tweaks. There are also a number of comments directed more for me to create follow-up issues that are unrelated to the work you've done here.

This looks awesome and it's great to see so much code getting removed 👍

x-pack/legacy/plugins/uptime/common/graphql/types.ts Outdated Show resolved Hide resolved
x-pack/legacy/plugins/uptime/common/types/index.ts Outdated Show resolved Hide resolved
x-pack/legacy/plugins/uptime/common/types/index.ts Outdated Show resolved Hide resolved
x-pack/legacy/plugins/uptime/common/types/index.ts Outdated Show resolved Hide resolved
x-pack/legacy/plugins/uptime/public/components/connected/charts/monitor_duration.tsx Show resolved Hide resolved
x-pack/legacy/plugins/uptime/public/state/actions/monitor_duration.ts Show resolved Hide resolved
x-pack/legacy/plugins/uptime/public/state/api/monitor_duration.ts Show resolved Hide resolved
x-pack/plugins/uptime/server/graphql/index.ts Show resolved Hide resolved
x-pack/plugins/uptime/server/rest_api/monitors/monitors_durations.ts Show resolved Hide resolved
x-pack/plugins/uptime/server/rest_api/monitors/monitors_durations.ts Outdated Show resolved Hide resolved
@shahzad31
Copy link
Contributor Author

@justinkambic took care of PR feedback.

@justinkambic
Copy link
Contributor

This looks good, want to get it mergeable and I will do a final functional test?

justinkambic
justinkambic approved these changes Mar 3, 2020
View reviewed changes
Copy link
Contributor

@justinkambic justinkambic left a comment

Choose a reason for hiding this comment

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

LGTM WFG

@shahzad31
Copy link
Contributor Author

@elasticmachine merge upstream

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@shahzad31 shahzad31 merged commit edfbe03 into elastic:master Mar 5, 2020
@shahzad31 shahzad31 deleted the feature/improve-duration-chart branch March 5, 2020 09:44
jloleysens added a commit to jloleysens/kibana that referenced this pull request Mar 5, 2020
@jloleysens
Merge branch 'master' of github.com:elastic/kibana into console/featu…
ce71db9 
…re/files-and-filetree

* 'master' of github.com:elastic/kibana: (254 commits)
  Convert discover_page to ts, remove redundunt methods (elastic#59312)
  [Fix for Vis Editor] Revert setting time field to empty string when it's undefined (elastic#58873)
  Delete legacy search endpoint (elastic#59341)
  [Uptime] Improve duration chart (elastic#58404)
  [Snapshot & Restore] NP migration (elastic#59109)
  [ML] Add support for date_nanos time field in anomaly job wizard (elastic#59017)
  Revert "Makes alerting and actions optional properties for interface RequestH… (elastic#59264)"
  Change remote_clusters ID to remoteClusters (elastic#59246)
  Makes alerting and actions optional properties for interface RequestH… (elastic#59264)
  Clean up date histogram agg type. (elastic#58805)
  [ML] Management: fix license unsubscribe (elastic#59365)
  Remove documentation for server.cors settings (elastic#59096)
  Edit alert flyout (elastic#58964)
  [SIEM] Fix rule delete/duplicate actions (elastic#59306)
  move mouse to close obstructing tooltip (elastic#59214)
  Reset page after deleting (elastic#59310)
  Make sure phrases input filter triggers autosuggestons (elastic#59299)
  Add loading count source for http requests (elastic#59245)
  Revert "[ML] Transforms: Deprecate custom KibanaContext. (elastic#59133)"
  Expose metrics service to public API (elastic#59294)
  ...

# Conflicts:
#	src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx
@kibanamachine
Copy link
Contributor

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 58404 or prevent reminders by adding the backport:skip label.

@kibanamachine kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 6, 2020
shahzad31 added a commit to shahzad31/kibana that referenced this pull request Mar 6, 2020
@shahzad31 @elasticmachine
[Uptime] Improve duration chart (elastic#58404)
2ef03c8 
* use differential colors for duration chart

* remove duration chart gql

* update type

* type fix

* fix tyoe

* update translation

* update test

* update conflicts

* type checking

* update snaps

* PR feedback

* PR feedback

Co-authored-by: Elastic Machine <[email protected]>
@shahzad31 shahzad31 mentioned this pull request Mar 6, 2020
Merged
shahzad31 added a commit that referenced this pull request Mar 6, 2020
@shahzad31 @elasticmachine
[Uptime] Improve duration chart (#58404) (#59548)
56a7c58 
* use differential colors for duration chart

* remove duration chart gql

* update type

* type fix

* fix tyoe

* update translation

* update test

* update conflicts

* type checking

* update snaps

* PR feedback

* PR feedback

Co-authored-by: Elastic Machine <[email protected]>

Co-authored-by: Elastic Machine <[email protected]>
@kibanamachine kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@justinkambic justinkambic justinkambic approved these changes

Assignees

@shahzad31 shahzad31

Labels
release_note:skip Skip the PR/issue when compiling release notes Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability v7.7.0 v8.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Uptime] Details page duration chart, location color differentiation
4 participants
@shahzad31 @elasticmachine @justinkambic @kibanamachine