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

[APM][Infrastructure UI] Enables log flyouts on APM logs tables #132617

Merged
merged 6 commits into from
May 25, 2022

Conversation

crespocarlos
Copy link
Contributor

Summary

This PR closes #111325 by enabling LogStream component to show flyouts on APM Trace sample logs and Logs tab

Screenshots

Trace Samples

flyout

Logs Tab

flyout_2

Notes

  • The flyout on those pages won't show the event filter button for now.

image

  • This PR also fixes a broken interaction with the button Investigate, which caused the popover to not close when the button is clicked 2x or more. The button will now toggle the visibility when clicked.

@crespocarlos crespocarlos requested review from a team as code owners May 20, 2022 12:44
@botelastic botelastic bot added the Team:APM All issues that need APM UI Team support label May 20, 2022
@elasticmachine
Copy link
Contributor

Pinging @elastic/apm-ui (Team:apm)

@crespocarlos crespocarlos added release_note:enhancement v8.3.0 backport:skip This commit does not require backporting Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services labels May 20, 2022
@elasticmachine
Copy link
Contributor

Pinging @elastic/infra-monitoring-ui (Team:Infra Monitoring UI)

@crespocarlos crespocarlos added the Feature:Logs UI Logs UI feature label May 20, 2022
@@ -223,6 +261,7 @@ Read more at https://github.com/elastic/kibana/blob/main/src/plugins/kibana_reac
jumpToTarget={noop}
reportVisibleInterval={handlePagination}
reloadItems={fetchEntries}
onOpenLogEntryFlyout={flyoutEnabled ? handleOpenLogFlyoutClick : undefined}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm wondering if we should write tests for this. I haven't found any tests for this component, but it could be nice to write some.

});

flyoutRef.current = openFlyout(
<KibanaReactContextProvider>
Copy link
Contributor Author

@crespocarlos crespocarlos May 20, 2022

Choose a reason for hiding this comment

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

this is needed because LogEntryFlyout needs to call some services that exist in this context. openFlyout isolates the component into a separate mount which doesn't include it

@crespocarlos crespocarlos changed the title provides a way for LogStream component to show log flyouts [APM][Infrastructure UI] Provides a way for LogStream component to show log flyouts May 20, 2022
@crespocarlos crespocarlos changed the title [APM][Infrastructure UI] Provides a way for LogStream component to show log flyouts [APM][Infrastructure UI] Enables log flyouts on APM logs tables May 20, 2022
@crespocarlos
Copy link
Contributor Author

@elasticmachine merge upstream

1 similar comment
@crespocarlos
Copy link
Contributor Author

@elasticmachine merge upstream

@crespocarlos
Copy link
Contributor Author

@elasticmachine merge upstream

@weltenwort weltenwort self-requested a review May 24, 2022 15:02
Copy link
Member

@weltenwort weltenwort left a comment

Choose a reason for hiding this comment

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

This seems to work quite well - good job 👍

I noticed that clicking the actions in the "Investigate" menu doesn't close the fly-out. When opened from the shared component. The reason probably is that the globally scoped overlays service keeps the fly-out alive across the navigation. Do we want to make sure the actions also close the fly-out?

Aside from that I just left a few ideas about the code structure and the component properties below.

Comment on lines 221 to 223
if (flyoutRef.current) {
flyoutRef.current.close();
}
Copy link
Member

Choose a reason for hiding this comment

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

How about writing this as

Suggested change
if (flyoutRef.current) {
flyoutRef.current.close();
}
flyoutRef.current?.close();

Copy link
Contributor Author

Choose a reason for hiding this comment

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

good catch!

}) => {
const flyoutRef = useRef<ReturnType<KibanaReactOverlays['openFlyout']>>();
Copy link
Member

Choose a reason for hiding this comment

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

What do you think about using OverlayRef from @kbn/core/public directly here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

cool! much better

@@ -208,6 +217,35 @@ Read more at https://github.com/elastic/kibana/blob/main/src/plugins/kibana_reac
[isLoadingMore, fetchPreviousEntries, fetchNextEntries]
);

const handleCloseFlyout = () => {
Copy link
Member

Choose a reason for hiding this comment

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

This component is getting uncomfortably long. What do you think about bundling the fly-out-related functionality into a useLogEntryFlyout hook, which could be consumed like

const { closeLogEntryFlyout, openLogEntryFlyout } = useLogEntryFlyout({ sourceId });

?

Copy link
Contributor Author

@crespocarlos crespocarlos May 25, 2022

Choose a reason for hiding this comment

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

I totally agree. It could be a little confusing because of the useLogFlyout hook, but it's worth it

@@ -72,6 +77,7 @@ interface LogStreamContentProps {
center?: LogEntryCursor;
highlight?: string;
columns?: LogColumnDefinition[];
flyoutEnabled?: boolean;
Copy link
Member

Choose a reason for hiding this comment

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

💭 I can see requests in the future to also support the other log entry actions in the shared component. We could try to anticipate that by designing this as a log entry row feature configuration property like

logEntryActions?: LogEntryAction[];

where LogEntryAction could be

interface LogEntryAction {
  actionType: 'show-details';
}

This would open up some possibilities without breaking the API:

  1. We could offer more actions that the consumer can opt into:
type LogEntryAction =
  | {
    actionType: 'show-details';
  }
  | {
    actionType: 'show-in-context';
  }
  1. We could offer action-specific configuration:
type LogEntryAction =
  | {
    actionType: 'show-details';
    timeout: number;
  }
  | {
    actionType: 'custom';
    label: string;
    handleAction: () => void;
  }

What do you think?

Copy link
Contributor Author

@crespocarlos crespocarlos May 25, 2022

Choose a reason for hiding this comment

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

I like it! But I'm not sure about anticipating it now. It makes more sense to me once we have the actual requirement. Besides, it expands a bit the purpose of this PR. Having the requirement for those changes also help me to understand better what it needs to provide.

From what I know, we will still have more work to do on the flyout in the next cycle. We could do these things in the future. wdyt?

Copy link
Member

Choose a reason for hiding this comment

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

Sure, the compiler should allow us to find and fix usages in the future when the API changes 👍 In that case, do we want to name the property so it matches the EUI style more closely? Something like enableFlyoutAction or showFlyoutAction?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

showFlyoutAction sounds good. I'll change that.

@crespocarlos
Copy link
Contributor Author

crespocarlos commented May 25, 2022

Thanks for reviewing it @weltenwort!

I noticed that clicking the actions in the "Investigate" menu doesn't close the fly-out

This is true. I had noticed that too, but I thought that's how it was supposed to be. I personally think it's better to close the flyout. I'll look into it

@crespocarlos crespocarlos force-pushed the 111325-apm-log-flyout branch from 1a33519 to 8b7343c Compare May 25, 2022 09:49
@crespocarlos crespocarlos requested review from a team as code owners May 25, 2022 09:49
@crespocarlos crespocarlos requested a review from a team May 25, 2022 09:49
@crespocarlos crespocarlos requested a review from a team as a code owner May 25, 2022 09:49
@crespocarlos crespocarlos force-pushed the 111325-apm-log-flyout branch from 8b7343c to 1a33519 Compare May 25, 2022 09:51
@crespocarlos crespocarlos removed request for a team May 25, 2022 09:51
@crespocarlos
Copy link
Contributor Author

@elasticmachine merge upstream

Copy link
Member

@sorenlouv sorenlouv left a comment

Choose a reason for hiding this comment

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

APM changes lgtm.
Awesome improvement!

@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
apm 2.9MB 2.9MB +40.0B
infra 1003.7KB 1004.5KB +830.0B
total +870.0B

History

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

Copy link
Member

@weltenwort weltenwort left a comment

Choose a reason for hiding this comment

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

thanks for polishing it so much 👍

@crespocarlos crespocarlos merged commit a7e2bb1 into elastic:main May 25, 2022
@crespocarlos crespocarlos deleted the 111325-apm-log-flyout branch May 25, 2022 17:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:skip This commit does not require backporting Feature:Logs UI Logs UI feature release_note:enhancement Team:APM All issues that need APM UI Team support Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services v8.3.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[APM Service Logs] Show flyout in LogsEmbeddable
6 participants