[Fleet] Dynamic "view incoming data" button behaviour

[hop-dev]

Part of #80841

From designs here

After adding an agent and confirming incoming data, the "view incoming data" button could offer dynamic behaviour based on the agent policy e.g:

• "View incoming logs" if only logs collected
• "View monitors" if only synthetics added
• "View hosts" if only endpoint added

Screenshot from designs

[elasticmachine]

Pinging @elastic/fleet (Team:Fleet)

[mostlyjason]

@dborodyansky @hop-dev I just had a zoom call with @criamico and I want to clarify the expected behavior for this issue. Its currently marked as a stretch goal. However, I think the current flyout already has dynamic behavior. For example, if you add an APM integration it says to add APM agents. If you add an Nginx integration it says to view assets. For more context see this #95442.

I think we should maintain the current behavior to avoid breaking APM and Endpoint Security, along with the other next step links we have. Is this issue proposing any changes to the current behavior? I don't recall making any during design planning, but I want to make sure I'm not forgetting something.

[jen-huang]

@mostlyjason Today, it is possible that the user clicks to view assets before actual data comes in. I believe this change is to check for + validate actual data existence (hence the success callout in designs).

[mostlyjason]

@jen-huang I'm looking at the design in Figma and it looks like the user can click to view assets before data comes in the new design too. It looks likes its a secondary CTA styling before data comes in, and a primary CTA styling after data comes in. So the only change would be the styling of the button?

[jen-huang]

@mostlyjason I missed that we already cover the "checking for data" part in #125534 - and that issue actually calls out that we already have the dynamic behavior today. So I agree, this issue is actually minimal, if any, work.

[joshdover]

@criamico Correct me if I'm wrong, but I believe the reason this is more work is that the current dynamic behavior is based on which page the flyout is rendered in the UI, rather than what data is expected to be in the agent policy. For instance, the current behavior if the Add Agent flyout is displayed from the APM Integration details view is to show the "View APM" button. However if the Add Agent flyout is shown from the Agent policy view, we do not currently show the "View APM" button, even if the agent policy contains an APM integration policy.

So the change in this issue requires that we change the logic for deciding when to show this button to be based on the integration policies that are in the agent policy, rather than what page the add agent flyout is being displayed on.

[criamico]

@joshdover exactly, looking at the current behavior we display a different button based on the page we're in. This is obtained by injecting the whole step to the flyout, and in the case of apm, it's injected from the apm plugin (code). I'm not sure why it was done this way, but for more reference check this PR, which introduced this functionality.

In my PR created a dynamic button which I'm controlling with a prop to replicate the current behavior. There are three possible cases:

• installedPolicy name is apm will show Install APM agent
• installedPolicy name is anything else will show View Assets
• no installedPolicy is passed will not render the button

This is the same behaviour we have today. @mostlyjason please let me know if this is acceptable.

[mostlyjason]

Thanks @criamico but what changed with this new flyout that required you to change the button behavior? I think we still change the button based on which page the flyout is rendered in the UI. How does it change based on what data is expected to be in the policy? Are you intending to show the add APM agent button when a user opens the flyout in the Fleet app (outside of the integrations app)?

Also, I figured out what we did with Endpoint security. I forgotten we did this, but its documented in GitHub #102967 (comment). It looks like we just show the regular assets button and then link people back to the hosts page from there. So I think that makes APM the only exception to this rule. I don't remember why APM is an exception, but it is nice to have fewer clicks.

[joshdover]

One thing that still needs clarification is whether or not we expect this CTA to view data to be displayed when the agent enrollment was done outside the Integrations app. For example, here compare the add agent flyout on when adding an Agent to the same policy, once from the Integrations app where the "Install APM Agents" CTA is shown and from the Fleet app where it is not shown. Do we want to show something when enrolling from the Fleet app or are we ok with not showing any CTA (just checking for incoming data and showing no button?)

Enroll from APM integration page

Enroll from Fleet agent policy page

To preserve existing behavior

If we want to just preserve existing behavior where the button is only showed when enrolling from the Integrations app, we will need to adjust a few things across the project:

1. We need to change the AgentEnrollmentFlyoutFinalStepExtension type to be simpler and instead of rendering an entire component, it just needs to provide text for a button and a URL. It could probably be something like:

export interface AgentEnrollmentFlyoutFinalStepExtension {
  package: string;
  view: 'agent-enrollment-flyout';
  callToAction: {
    title: string;
    href: string;
  }
}

2. We need to update the APM implementation of this in x-pack/plugins/apm/public/components/fleet_integration/apm_enrollment_flyout_extension.tsx to only return these fields rather than the entire component
3. Remove the viewDataStep prop from the ManagedInstructions component and instead add a viewDataCalltoAction which is the same type as AgentEnrollmentFlyoutFinalStepExtension['callToAction']
4. Update PackagePoliciesPage component in the integrations app to only pass in the call to action props, rather than a whole step component.
5. Implement the EuiContainedStepProps directly in ManagedInstructions by passing the viewDataCallToAction to ConfirmIncomingData component's linkButton props.
6. Update ConfirmIncomingData component to not display any button when linkButton is undefined

[joshdover]

I do think it would make more sense if the button was always displayed. We could implement this differently and instead of basing our decision to show this button on which page we're on, to show it based on which integration policies are in the agent policy that the agent was just enrolled in.

I wonder if that would be a similar or even less amount of effort to the plan I outlined above. It would allow us to remove this viewDataStep prop that is being passed around everywhere and contain all the logic in the ManagedInstructions component. One issue would be that we'd potentially want to show multiple CTAs, one for each integration.

[mostlyjason]

We just met live and discussed the behavior for this feature. I'm documenting it here so its clear. The button and instruction text should show only after incoming data is detected.

When the user adds an agent on the APM integration page, the instructions should say "Next, install APM agents on your hosts to collect data from your applications and services." The button should say "Install APM agent"

When the user adds an agent on any other integration page, the instructions should say "Next, analyze your data using our integration assets such as curated views, dashboards and more." The button should say "View assets"

When the user adds an agent on the Fleet page, the instructions should say "Next, view the status of agents in this policy." The button should say "View agents". This should be a lower priority because we already display a count of enrolled agents. It can be left blank if there is no time.

[criamico]

I added the buttons when the APM and other integrations are added, but I didn't add any button when installing in Fleet, since it would be a duplicate of the button in the step above linking to the agents.

[criamico]

Implemented in https://github.com/elastic/kibana/pull/128381/files - this ticket can be closed once it's merged.

[dikshachauhan-qasource]

Hi @hop-dev @mostlyjason

Could you please provide your approval on current implemention of this feature. We have noticed that currently application is working as per comment: #125920 (comment)

Our observations:

1. For any integration, "view assets" button is now displayed at step 4 on Add agent flyout from Integrations tab.
2. For APM integration, "Install Apm agent" button is displayed at step 4 on Add agent flyout from Integrations tab

Edge case:

If we are only taking APM integration in Agent policy excluding SYSTEM integration then flyout stucks at View incoming data step. However as soon as we add system integration to this policy "Install Apm agent" button is displayed.

Could you please provide your confirmation on this behavior.

Thanks
QAS