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

[Integrations UI] Add support for custom asset definitions in Integration assets tab #103554

Merged
merged 31 commits into from Jul 1, 2021

Conversation

kpollich
Copy link
Member

@kpollich kpollich commented Jun 28, 2021

Summary

Adds support for UI extensions that customize the "Assets" tab on the integration details page to support packages that don't export assets.

Also sets up UI extensions for existing "assetless" integrations.

  • Add support for UI Extensions on Assets tab
  • Add support for UI Extensions on "Enroll Agent" flyout to customize final step
  • Add UI extension for Endpoint Security assets
  • Add UI extension for Synthetics assets
  • Add UI extension for Custom Logs assets
  • Add UI extension for APM assets
  • Add UI extension for final step in "Enroll Agent" flyout for APM
  • Add tests

Closes #102967

Screenshots

Custom Logs

Screen Shot 2021-06-29 at 5 17 00 PM

Endpoint

Screen Shot 2021-06-29 at 5 17 56 PM

APM

Screen Shot 2021-06-29 at 5 18 41 PM

Synthetics

Screen Shot 2021-06-29 at 5 19 06 PM

@kpollich kpollich added release_note:enhancement v8.0.0 Team:Fleet Team label for Observability Data Collection Fleet team v7.14.0 auto-backport Deprecated: Automatically backport this PR after it's merged labels Jun 28, 2021
@kpollich kpollich requested a review from a team as a code owner June 28, 2021 19:57
@kpollich kpollich self-assigned this Jun 28, 2021
@elasticmachine
Copy link
Contributor

Pinging @elastic/fleet (Team:Fleet)

@kpollich kpollich requested review from a team as code owners June 28, 2021 20:23
@botelastic botelastic bot added the Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability label Jun 28, 2021
@elasticmachine
Copy link
Contributor

Pinging @elastic/uptime (Team:uptime)

Copy link
Contributor

@jen-huang jen-huang left a comment

Choose a reason for hiding this comment

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

Great start, I spotted a few issues in my first run with it.

@kpollich kpollich requested a review from a team as a code owner June 29, 2021 15:48
@botelastic botelastic bot added the Team:APM All issues that need APM UI Team support label Jun 29, 2021
@elasticmachine
Copy link
Contributor

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

@kpollich kpollich requested a review from nchaulet June 29, 2021 16:10
@kpollich
Copy link
Member Author

@nchaulet @jen-huang - Want to try and gather some thoughts on these two tasks with APM here, as I'm not sure how to proceed.

Add support for UI Extensions on "Enroll Agent" flyout to customize final step
Add UI extension for final step in "Enroll Agent" flyout for APM

The idea here is to allow the APM app to hook into Fleet via a UI extension that replaces the final step of the agent enrollment flyout, so we can direct the user back into the APM flow. See this screenshot from the original issue here:

image

The problem is, these steps are not directly React components, but they're instead simply sets of props passed into the EuiSteps component, so we can't use UI Extensions like we do everywhere else to render out a replacement EuiStep in this instance.

We pass in the content for the View Data step in the enrollment flyout here:

const renderViewDataStepContent = useCallback(
() => (
<>
<EuiText>
<FormattedMessage
id="xpack.fleet.agentEnrollment.viewDataDescription"
defaultMessage="After your agent starts, you can view your data in Kibana by using the integration's installed assets. {pleaseNote}: it may take a few minutes for the initial data to arrive."
values={{
pleaseNote: (
<strong>
{i18n.translate(
'xpack.fleet.epm.agentEnrollment.viewDataDescription.pleaseNoteLabel',
{ defaultMessage: 'Please note' }
)}
</strong>
),
}}
/>
</EuiText>
<EuiSpacer size="l" />
<EuiButton href={getHref('integration_details_assets', { pkgkey: `${name}-${version}` })}>
{i18n.translate('xpack.fleet.epm.agentEnrollment.viewDataAssetsLabel', {
defaultMessage: 'View assets',
})}
</EuiButton>
</>
),
[name, version, getHref]
);

So, my initial thought was to swap out this argument based on the presence of a UI Extension, but this only controls the content underneath the title and step UI, e.g.

Screen Shot 2021-06-29 at 1 41 18 PM

So, what we really need is a way to replace the entire step entry passed in to the EuiSteps component here:

if (viewDataStepContent) {
baseSteps.push(ViewDataStep(viewDataStepContent));
}

return (
<>
{fleetStatus.isReady ? (
<>
<EuiText>
<FormattedMessage
id="xpack.fleet.agentEnrollment.managedDescription"
defaultMessage="Enroll an Elastic Agent in Fleet to automatically deploy updates and centrally manage the agent."
/>
</EuiText>
<EuiSpacer size="l" />
<EuiSteps steps={steps} />
</>
) : fleetStatus.missingRequirements?.length === 1 &&
fleetStatus.missingRequirements[0] === 'fleet_server' ? (
<FleetServerMissingRequirements />
) : (
<DefaultMissingRequirements />
)}
</>
);

I don't think we have a way to allow a UI Extension to export arbitrary data instead of a React component, so I think this is a bit of a blocker. Do either of you have any potential input here?

export interface AgentEnrollmentFlyoutFinalStepExtension {
package: string;
view: 'agent-enrollment-flyout';
component: LazyExoticComponent<AgentEnrollmentFlyoutFinalStepExtensionComponent>;
Copy link
Contributor

Choose a reason for hiding this comment

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

what if you adjusted this interface to accept a title field that you can then use to modify the step title?

Copy link
Member Author

Choose a reason for hiding this comment

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

This definitely makes sense, then the apps that want to hook into this functionality will simply need to export something like stepProps in the extension data to control what we pass into EuiSteps.

The next question I have here is how to handle this change in contract in our useUiExtensionHook, which currently expects there to be a component in each of these extension interfaces:

export const useUIExtension = <V extends UIExtensionPoint['view'] = UIExtensionPoint['view']>(
packageName: UIExtensionPoint['package'],
view: V
): NarrowExtensionPoint<V>['component'] | undefined => {
const registeredExtensions = useContext(UIExtensionsContext);
if (!registeredExtensions) {
throw new Error('useUIExtension called outside of UIExtensionsContext');
}
const extension = registeredExtensions?.[packageName]?.[view];
if (extension) {
// FIXME:PT Revisit ignore below and see if TS error can be addressed
// @ts-ignore
return extension.component;
}
};

Copy link
Member Author

Choose a reason for hiding this comment

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

I think the solution I'm going to work towards will be to simply include a new hook useAgentEnrollmentFlyoutExtension to capture this special case for now.

Copy link
Member

Choose a reason for hiding this comment

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

@kpollich I think we can have a component and a title in our AgentEnrollmentFlyoutFinalStepExtension type and you can build the step later when you retrieve the extension with that, I am wondering if the useUIExtension should return the whole extension instead of just the component too.

Copy link
Member Author

Choose a reason for hiding this comment

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

I just pushed up e4fb321 which adds a separate hook that does what you're mentioning. We could instead refactor useUIExtension to return the entire extension object and then update all our usages of useUIExtensiion (only a few places) to do something like

const extension = useUIExtension(...)

// ...

if (extension) { 
  <extension.Component />
}

Is that what you're thinking here?

Copy link
Member

@nchaulet nchaulet Jun 29, 2021

Choose a reason for hiding this comment

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

Yes it was I was thinking, and in the case of the step do something like this (it's a little less coupled to the steps component)

const extension = useUIExtension(...)

// ...


if (extension) { 
const step = { title: extension.title, children: (<extension.Component />)}

}


export function getApmEnrollmentFlyoutStepProps(): AgentEnrollmentFlyoutFinalStepExtension['stepProps'] {
// TODO: Figure out how to get `http.basePath` here
const installApmAgentLink = '/app/home#/tutorial/apm';
Copy link
Member Author

Choose a reason for hiding this comment

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

How can I get Kibana's basePath value here without using a React hook?

Copy link
Contributor

Choose a reason for hiding this comment

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

You would have to pass it in as an argument.

Copy link
Member

Choose a reason for hiding this comment

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

I think it's a good argument to change the extension to have a title and a component, you will be able to use hooks in the component, and I am sure in the future it will prevent some headache to be able to use hooks here too. what do you think?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah that should work here. I have the refactor title + Component in the extension working locally. I will try pulling in hooks to the component tree rendered here to get at this data.

Copy link
Contributor

@smith smith left a comment

Choose a reason for hiding this comment

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

Looks like this is still WIP. Can you switch it to draft?

x-pack/plugins/apm/kibana.json Outdated Show resolved Hide resolved

export function getApmEnrollmentFlyoutStepProps(): AgentEnrollmentFlyoutFinalStepExtension['stepProps'] {
// TODO: Figure out how to get `http.basePath` here
const installApmAgentLink = '/app/home#/tutorial/apm';
Copy link
Contributor

Choose a reason for hiding this comment

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

You would have to pass it in as an argument.

@kpollich kpollich marked this pull request as draft June 29, 2021 19:40
- Remove default filter for log stream url
- Fix missing basePath prepend on asset urls
- Expand accordion by default on assetless integrations
@kevinlog
Copy link
Contributor

Left a couple comments of things to change, but looks good otherwise! Will 👍 after changes for the @elastic/security-onboarding-and-lifecycle-mgt team

@kpollich
Copy link
Member Author

Left a couple comments of things to change, but looks good otherwise! Will 👍 after changes for the @elastic/security-onboarding-and-lifecycle-mgt team

@kevinlog Thanks much. Addressed those comments in 5f9a7eb

@jen-huang
Copy link
Contributor

@elasticmachine merge upstream

@kpollich
Copy link
Member Author

kpollich commented Jul 1, 2021

@elasticmachine merge upstream

Copy link
Contributor

@smith smith left a comment

Choose a reason for hiding this comment

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

Seems to be working for me. I had a few suggestions but nothing blocking.

@cauemarcondes has been doing some work on Fleet for APM and tutorials so you might want to check with him next week to make sure there aren't any conflicts with work he's done.

@kpollich kpollich enabled auto-merge (squash) July 1, 2021 20:35
@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
apm 1559 1563 +4
fleet 480 483 +3
securitySolution 2202 2204 +2
uptime 559 561 +2
total +11

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id before after diff
fleet 1024 1038 +14

Async chunks

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

id before after diff
apm 4.3MB 4.3MB +1.6KB
fleet 716.1KB 715.5KB -607.0B
securitySolution 6.3MB 6.3MB +13.4KB
uptime 953.4KB 955.3KB +1.8KB
total +16.3KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
apm 37.5KB 39.8KB +2.3KB
fleet 441.0KB 448.0KB +7.0KB
securitySolution 202.0KB 202.4KB +437.0B
uptime 22.0KB 22.6KB +632.0B
total +10.3KB
Unknown metric groups

API count

id before after diff
fleet 1117 1133 +16

async chunk count

id before after diff
apm 15 16 +1
securitySolution 20 21 +1
uptime 13 14 +1
total +3

History

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

cc @kpollich

@kpollich kpollich merged commit 059ed08 into elastic:master Jul 1, 2021
kibanamachine added a commit to kibanamachine/kibana that referenced this pull request Jul 1, 2021
…tion assets tab (elastic#103554)

* Add UI extension logic for assets + set up custom log views

* Add endpoint security UI extension

* Add synthetics ui extension

* Address PR feedback

- Remove default filter for log stream url
- Fix missing basePath prepend on asset urls
- Expand accordion by default on assetless integrations

* Fix type errors

* Add initial APM extension setup

* Fix missing ExtensionWrapper for enrollment extension

* Fix custom logs asset extension

* Fix type errors

* Add new hook for enrollment flyout ui extensions

* Address PR review + refactor UI extension usage for flyout

* Update limits.yml via script

* Fix type errors

* Add tests for custom assets UI extensions

* Update tests for flyout

* Remove unused import

* Fix type errors in ui extension tests

* Skip view data tests and link to issue

* Use RedirectAppLinks + fix synthetics link

* Use constants for app ID's where possible

* Revert limits.yml

* Fix lazy imports for custom asset components

* Update endpoint custom assets link + description

* Add translation for custom assets UI

* Address PR review in APM

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
kibanamachine added a commit to kibanamachine/kibana that referenced this pull request Jul 1, 2021
…tion assets tab (elastic#103554)

* Add UI extension logic for assets + set up custom log views

* Add endpoint security UI extension

* Add synthetics ui extension

* Address PR feedback

- Remove default filter for log stream url
- Fix missing basePath prepend on asset urls
- Expand accordion by default on assetless integrations

* Fix type errors

* Add initial APM extension setup

* Fix missing ExtensionWrapper for enrollment extension

* Fix custom logs asset extension

* Fix type errors

* Add new hook for enrollment flyout ui extensions

* Address PR review + refactor UI extension usage for flyout

* Update limits.yml via script

* Fix type errors

* Add tests for custom assets UI extensions

* Update tests for flyout

* Remove unused import

* Fix type errors in ui extension tests

* Skip view data tests and link to issue

* Use RedirectAppLinks + fix synthetics link

* Use constants for app ID's where possible

* Revert limits.yml

* Fix lazy imports for custom asset components

* Update endpoint custom assets link + description

* Add translation for custom assets UI

* Address PR review in APM

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
@kibanamachine
Copy link
Contributor

💚 Backport successful

Status Branch Result
7.14
7.x

The backport PRs will be merged automatically after passing CI.

kibanamachine added a commit that referenced this pull request Jul 2, 2021
…tion assets tab (#103554) (#104230)

* Add UI extension logic for assets + set up custom log views

* Add endpoint security UI extension

* Add synthetics ui extension

* Address PR feedback

- Remove default filter for log stream url
- Fix missing basePath prepend on asset urls
- Expand accordion by default on assetless integrations

* Fix type errors

* Add initial APM extension setup

* Fix missing ExtensionWrapper for enrollment extension

* Fix custom logs asset extension

* Fix type errors

* Add new hook for enrollment flyout ui extensions

* Address PR review + refactor UI extension usage for flyout

* Update limits.yml via script

* Fix type errors

* Add tests for custom assets UI extensions

* Update tests for flyout

* Remove unused import

* Fix type errors in ui extension tests

* Skip view data tests and link to issue

* Use RedirectAppLinks + fix synthetics link

* Use constants for app ID's where possible

* Revert limits.yml

* Fix lazy imports for custom asset components

* Update endpoint custom assets link + description

* Add translation for custom assets UI

* Address PR review in APM

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kyle Pollich <kyle.pollich@elastic.co>
kibanamachine added a commit that referenced this pull request Jul 2, 2021
…tion assets tab (#103554) (#104229)

* Add UI extension logic for assets + set up custom log views

* Add endpoint security UI extension

* Add synthetics ui extension

* Address PR feedback

- Remove default filter for log stream url
- Fix missing basePath prepend on asset urls
- Expand accordion by default on assetless integrations

* Fix type errors

* Add initial APM extension setup

* Fix missing ExtensionWrapper for enrollment extension

* Fix custom logs asset extension

* Fix type errors

* Add new hook for enrollment flyout ui extensions

* Address PR review + refactor UI extension usage for flyout

* Update limits.yml via script

* Fix type errors

* Add tests for custom assets UI extensions

* Update tests for flyout

* Remove unused import

* Fix type errors in ui extension tests

* Skip view data tests and link to issue

* Use RedirectAppLinks + fix synthetics link

* Use constants for app ID's where possible

* Revert limits.yml

* Fix lazy imports for custom asset components

* Update endpoint custom assets link + description

* Add translation for custom assets UI

* Address PR review in APM

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kyle Pollich <kyle.pollich@elastic.co>
madirey pushed a commit to madirey/kibana that referenced this pull request Jul 6, 2021
…tion assets tab (elastic#103554)

* Add UI extension logic for assets + set up custom log views

* Add endpoint security UI extension

* Add synthetics ui extension

* Address PR feedback

- Remove default filter for log stream url
- Fix missing basePath prepend on asset urls
- Expand accordion by default on assetless integrations

* Fix type errors

* Add initial APM extension setup

* Fix missing ExtensionWrapper for enrollment extension

* Fix custom logs asset extension

* Fix type errors

* Add new hook for enrollment flyout ui extensions

* Address PR review + refactor UI extension usage for flyout

* Update limits.yml via script

* Fix type errors

* Add tests for custom assets UI extensions

* Update tests for flyout

* Remove unused import

* Fix type errors in ui extension tests

* Skip view data tests and link to issue

* Use RedirectAppLinks + fix synthetics link

* Use constants for app ID's where possible

* Revert limits.yml

* Fix lazy imports for custom asset components

* Update endpoint custom assets link + description

* Add translation for custom assets UI

* Address PR review in APM

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
@kpollich kpollich deleted the 102967-allow-custom-asset-views branch July 6, 2021 16:55
@dikshachauhan-qasource
Copy link

dikshachauhan-qasource commented Jul 7, 2021

Hi @EricDavisX

We have created following testcases for the above merged PR. Test cases link is as follows:

Please let us know if anything is missing.

Thanks
QAS

@dikshachauhan-qasource
Copy link

Hi @EricDavisX

We have validated this PR and executed related testcases under below test run on 7.13 BC3 kibana staging cloud build and found them working fine.

Custom asset definitions in Integration assets tab Test run

Please let us know if anything is missing.

Thanks
QAS

@susan-shu-c
Copy link
Member

Hi, question if ingest pipeline assets are included in the UI? Is there anywhere I can track newer work? This issue linked from this comment but if there's something newer I'd love to follow it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
auto-backport Deprecated: Automatically backport this PR after it's merged release_note:enhancement Team:APM All issues that need APM UI Team support Team:Fleet Team label for Observability Data Collection Fleet team Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability v7.14.0 v7.15.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Integrations UI] Solution for "assetless" integrations and viewing data