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

kpollich · 2021-06-28T19:57:13Z

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

Endpoint

APM

Synthetics

elasticmachine · 2021-06-28T19:57:16Z

Pinging @elastic/fleet (Team:Fleet)

elasticmachine · 2021-06-28T20:38:33Z

Pinging @elastic/uptime (Team:uptime)

x-pack/plugins/fleet/public/lazy_custom_logs_assets_component.tsx

...plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets.tsx

jen-huang

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

...management/pages/policy/view/ingest_manager_integration/endpoint_custom_assets_extension.tsx

x-pack/plugins/uptime/public/components/fleet_package/synthetics_custom_assets_extension.tsx

elasticmachine · 2021-06-29T15:48:40Z

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

x-pack/plugins/apm/public/components/fleet_integration/apm_custom_assets_extension.tsx

...t/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx

kpollich · 2021-06-29T17:53:59Z

@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:

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:

kibana/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx

Lines 101 to 129 in 7ec04e1

    
           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.

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

kibana/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx

Lines 111 to 113 in 7ec04e1

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

kibana/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/managed_instructions.tsx

Lines 127 to 147 in 7ec04e1

    
           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?

jen-huang · 2021-06-29T18:13:56Z

x-pack/plugins/fleet/public/types/ui_extensions.ts

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


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

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:

kibana/x-pack/plugins/fleet/public/hooks/use_ui_extension.ts

Lines 20 to 37 in de19795

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;

}

};

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.

@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.

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?

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 />)} }

kpollich · 2021-06-29T19:26:26Z

x-pack/plugins/apm/public/components/fleet_integration/apm_enrollment_flyout_extension.tsx

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


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

You would have to pass it in as an argument.

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?

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.

smith

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

x-pack/plugins/apm/kibana.json

x-pack/plugins/apm/public/components/fleet_integration/apm_custom_assets_extension.tsx

smith · 2021-06-29T19:37:26Z

x-pack/plugins/apm/public/components/fleet_integration/apm_enrollment_flyout_extension.tsx

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


You would have to pass it in as an argument.

x-pack/plugins/apm/public/components/fleet_integration/apm_enrollment_flyout_extension.tsx

...s/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/index.tsx

...t/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx

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

...management/pages/policy/view/ingest_manager_integration/endpoint_custom_assets_extension.tsx

kevinlog · 2021-06-30T20:29:38Z

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 · 2021-06-30T20:31:08Z

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 · 2021-07-01T00:33:45Z

@elasticmachine merge upstream

kpollich · 2021-07-01T11:43:46Z

@elasticmachine merge upstream

smith

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.

x-pack/plugins/apm/public/components/fleet_integration/apm_enrollment_flyout_extension.tsx

x-pack/plugins/apm/public/plugin.ts

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/types.ts

x-pack/plugins/apm/kibana.json

kibanamachine · 2021-07-01T22:41:15Z

💚 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

💛 Build #135949 was flaky a5ca466
💔 Build #135866 failed a8fe206
💔 Build #135856 failed 86227ce
💚 Build #135798 succeeded 5f9a7eb
💛 Build #135685 was flaky 54b421e

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

cc @kpollich

…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 <[email protected]>

kibanamachine · 2021-07-01T22:44:28Z

💚 Backport successful

Status	Branch	Result
✅	7.14
✅	7.x

The backport PRs will be merged automatically after passing CI.

…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 <[email protected]> Co-authored-by: Kyle Pollich <[email protected]>

…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 <[email protected]> Co-authored-by: Kyle Pollich <[email protected]>

dikshachauhan-qasource · 2021-07-07T11:48:41Z

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 · 2021-07-16T12:32:40Z

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 · 2024-03-07T16:11:13Z

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

kpollich added release_note:enhancement v8.0.0 Team:Fleet Team label for Observability Data Collection Fleet team v7.14.0 auto-backport Deprecated - use backport:version if exact versions are needed labels Jun 28, 2021

kpollich requested a review from a team as a code owner June 28, 2021 19:57

kpollich self-assigned this Jun 28, 2021

kpollich requested review from a team as code owners June 28, 2021 20:23

botelastic bot added the Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability label Jun 28, 2021

jen-huang reviewed Jun 28, 2021

View reviewed changes

x-pack/plugins/fleet/public/lazy_custom_logs_assets_component.tsx Outdated Show resolved Hide resolved

jen-huang reviewed Jun 28, 2021

View reviewed changes

...plugins/fleet/public/applications/integrations/sections/epm/screens/detail/assets/assets.tsx Outdated Show resolved Hide resolved

jen-huang reviewed Jun 28, 2021

View reviewed changes

...management/pages/policy/view/ingest_manager_integration/endpoint_custom_assets_extension.tsx Outdated Show resolved Hide resolved

x-pack/plugins/uptime/public/components/fleet_package/synthetics_custom_assets_extension.tsx Outdated Show resolved Hide resolved

kpollich requested a review from a team as a code owner June 29, 2021 15:48

botelastic bot added the Team:APM All issues that need APM UI Team support label Jun 29, 2021

kpollich commented Jun 29, 2021

View reviewed changes

x-pack/plugins/apm/public/components/fleet_integration/apm_custom_assets_extension.tsx Outdated Show resolved Hide resolved

...t/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx Outdated Show resolved Hide resolved

kpollich requested a review from nchaulet June 29, 2021 16:10

jen-huang reviewed Jun 29, 2021

View reviewed changes

kpollich commented Jun 29, 2021

View reviewed changes

smith reviewed Jun 29, 2021

View reviewed changes

kpollich marked this pull request as draft June 29, 2021 19:40

kpollich commented Jun 29, 2021

View reviewed changes

kpollich added 4 commits June 29, 2021 16:57

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

a4302a2

Add endpoint security UI extension

29041e3

Add synthetics ui extension

c06eca2

Address PR feedback

e38b002

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

kevinlog reviewed Jun 30, 2021

View reviewed changes

...management/pages/policy/view/ingest_manager_integration/endpoint_custom_assets_extension.tsx Outdated Show resolved Hide resolved

Update endpoint custom assets link + description

5f9a7eb

kevinlog approved these changes Jun 30, 2021

View reviewed changes

Add translation for custom assets UI

86227ce

Merge branch 'master' into 102967-allow-custom-asset-views

a8fe206

Merge branch 'master' into 102967-allow-custom-asset-views

a5ca466

smith approved these changes Jul 1, 2021

View reviewed changes

kpollich added 2 commits July 1, 2021 16:27

Address PR review in APM

e8eaa0d

Merge branch 'master' into 102967-allow-custom-asset-views

ea34bb0

kpollich enabled auto-merge (squash) July 1, 2021 20:35

kpollich merged commit 059ed08 into elastic:master Jul 1, 2021

kibanamachine mentioned this pull request Jul 1, 2021

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

Merged

kibanamachine mentioned this pull request Jul 1, 2021

[7.x] [Integrations UI] Add support for custom asset definitions in Integration assets tab (#103554) #104230

Merged

kpollich deleted the 102967-allow-custom-asset-views branch July 6, 2021 16:55

dominiqueclarke mentioned this pull request Jul 7, 2021

[Uptime] [Synthetics Integration] Asset tab - direct to the Uptime Monitor page, filtered by monitor.isFleetManaged : true #104758

Closed

criamico mentioned this pull request Mar 16, 2022

[Fleet] Dynamic "view incoming data" button behaviour #125920

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kpollich commented Jun 28, 2021 •

edited

Loading

elasticmachine commented Jun 28, 2021

elasticmachine commented Jun 28, 2021

jen-huang left a comment

elasticmachine commented Jun 29, 2021

kpollich commented Jun 29, 2021

jen-huang Jun 29, 2021

kpollich Jun 29, 2021

kpollich Jun 29, 2021

nchaulet Jun 29, 2021

kpollich Jun 29, 2021

nchaulet Jun 29, 2021 •

edited

Loading

kpollich Jun 29, 2021

smith Jun 29, 2021

nchaulet Jun 29, 2021

kpollich Jun 29, 2021

smith left a comment

smith Jun 29, 2021

kevinlog commented Jun 30, 2021

kpollich commented Jun 30, 2021

jen-huang commented Jul 1, 2021

kpollich commented Jul 1, 2021

smith left a comment

kibanamachine commented Jul 1, 2021

API count

async chunk count

kibanamachine commented Jul 1, 2021

dikshachauhan-qasource commented Jul 7, 2021 •

edited

Loading

dikshachauhan-qasource commented Jul 16, 2021

susan-shu-c commented Mar 7, 2024

	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;
	}
	};

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

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

Conversation

kpollich commented Jun 28, 2021 • edited Loading

Summary

Screenshots

Custom Logs

Endpoint

APM

Synthetics

elasticmachine commented Jun 28, 2021

elasticmachine commented Jun 28, 2021

jen-huang left a comment

Choose a reason for hiding this comment

elasticmachine commented Jun 29, 2021

kpollich commented Jun 29, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nchaulet Jun 29, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

smith left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kevinlog commented Jun 30, 2021

kpollich commented Jun 30, 2021

jen-huang commented Jul 1, 2021

kpollich commented Jul 1, 2021

smith left a comment

Choose a reason for hiding this comment

kibanamachine commented Jul 1, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

async chunk count

History

kibanamachine commented Jul 1, 2021

💚 Backport successful

dikshachauhan-qasource commented Jul 7, 2021 • edited Loading

dikshachauhan-qasource commented Jul 16, 2021

susan-shu-c commented Mar 7, 2024

kpollich commented Jun 28, 2021 •

edited

Loading

nchaulet Jun 29, 2021 •

edited

Loading

dikshachauhan-qasource commented Jul 7, 2021 •

edited

Loading