Skip to content

Commit

Permalink
[Fleet] Agent activity flyout enhancements (#179161)
Browse files Browse the repository at this point in the history
## Summary

Closes #153232

Enhancements addressed in this PR:
1. Add a "Review errors" badge that is rendered when new agent activity
with errors are loaded. When clicked, the badge opens the Agent activity
flyout and is de-rendered.
2. Enhance the backend logic behind `GET /agents/action_status`.
* Introduce unified pagination for agent actions as well as agent policy
changes.
* Guarantee ordering by descending timestamp across both types (agent
and agent policy) actions.
3. Render "Show more" button in Agent activity flyout at the bottom of
actions list that loads 10 more actions.
* The button is disabled after clicking it once does not yield more
actions. This behaviour could be the object of a future enhancement.
4. Render "Go to date" button with date picker that sets a date filter
(of 1 day). Conditionally render a "Clear selected date" button to reset
the date filter.
5. Enhance the backend logic behind `POST /agents` to allow `actionIds`
to either refer to agent or agent policy actions ids. This allow the
"View agents" button in the Agent activity flyout to work with agent
policy change actions.
* It should be noted that this button will display the agents
_currently_ assigned to the policy, which may differ from the agents
that were assigned to it at the time of the change. A tooltip was added
to make this clear to the user.
6. Hide completion date if set to 1 Jan.
   * Added a comment for later investigation.

### Steps for testing

1. Create a couple of agent policies and enroll a few agents on both
policies.
2. Perform some upgrades, tag assignments and policy reassignment on the
agents. Make some changes to the agent policies. You should aim to have
more than 20 changes in total.
3. Open the Agent activity flyout. Your actions should be listed and the
"Show more" and "Go to date" buttons should be rendered at the bottom of
the list.
4. Click "Show more" until all actions are loaded (10 at a time). The
button should become disabled after there are no more actions to load.
5. Test the date filtering: if you select a date (e.g. today) with
actions, they should be rendered; if you select a date with no actions,
the empty state should be rendered. Test that the "Clear selected date"
button gets rendered in both cases and correctly resets the date filter.
6. Test that the "View agents" button correctly filters agents for agent
policy changes.
7. Generate some action errors on purpose: one way to do this is to try
to upgrade an agent to a nonexistent version number by typing it
manually. On the following agent data refresh (max 30 seconds), the
"Review errors" badge should appear and hovering on it should read
"There is 1 new agent activity error. Click to view". If other errors
are generated before the flyout is open, the count should increase
accordingly. Clicking on the badge should open the flyout and clear the
badge (reset the count of new activity errors). NB: if another page is
loaded before the Agent activity flyout is open, the badge will be
cleared.

### Screenshots and screen recordings

Agent activity flyout with no date filter selected and remaining actions
to load:
<img width="861" alt="Screenshot 2024-04-05 at 16 12 56"
src="https://github.com/elastic/kibana/assets/23701614/05b5a12c-7730-4a89-8f11-cab53dac631d">

Agent activity flyout with a date filter selected and all actions
loaded:
<img width="861" alt="Screenshot 2024-04-05 at 16 13 38"
src="https://github.com/elastic/kibana/assets/23701614/29ab0b28-8e69-49ab-a815-2a8acc2f0ee1">

Agent activity flyout with a date filter selected and no actions for
that date:
<img width="861" alt="Screenshot 2024-04-05 at 16 13 18"
src="https://github.com/elastic/kibana/assets/23701614/ca19e47a-04b0-4191-b227-a8ed67a45a86">

Tooltip on the "View agents" button for policy changes:
<img width="939" alt="Screenshot 2024-04-05 at 17 03 46"
src="https://github.com/elastic/kibana/assets/23701614/924d17c7-973f-4a7c-8a17-1ca88cf8e9b2">

"Review errors" badge with 1 new error:
<img width="1727" alt="Screenshot 2024-04-10 at 12 42 18"
src="https://github.com/elastic/kibana/assets/23701614/843f371f-d37b-4b1b-8211-2fde952823ca">

"Review errors" badge tooltip details (1 and 2 errors):
<img width="623" alt="Screenshot 2024-04-10 at 12 41 59"
src="https://github.com/elastic/kibana/assets/23701614/0698ceef-066c-4b8d-84e4-ff500e4711dd">
<img width="623" alt="Screenshot 2024-04-10 at 12 41 28"
src="https://github.com/elastic/kibana/assets/23701614/29e3ad87-301c-4651-bc21-23d12621c694">


"Show more" and date filtering functionalities:


https://github.com/elastic/kibana/assets/23701614/8eea8bb3-9f49-44ec-810f-7ed2ef2d6cca

Tooltip on the "View agents" button for policy changes:


https://github.com/elastic/kibana/assets/23701614/f36c9ab2-62bf-4de7-9c51-9bbc637796de

"Review errors" badge:


https://github.com/elastic/kibana/assets/23701614/9253301e-0a5c-460b-adfe-5e275aaf9849

### Checklist

- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
jillguyonnet and kibanamachine authored Apr 12, 2024
1 parent 89cbd52 commit f248783
Show file tree
Hide file tree
Showing 32 changed files with 2,086 additions and 960 deletions.
2 changes: 2 additions & 0 deletions x-pack/plugins/fleet/common/types/models/agent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -442,6 +442,8 @@ export interface ActionStatusOptions {
errorSize: number;
page?: number;
perPage?: number;
date?: string;
latest?: number;
}

export interface AgentUpgradeDetails {
Expand Down
9 changes: 9 additions & 0 deletions x-pack/plugins/fleet/common/types/rest_spec/agent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,15 @@ export interface GetAgentIncomingDataResponse {
export interface GetCurrentUpgradesResponse {
items: CurrentUpgrade[];
}

export interface GetActionStatusRequest {
query: {
perPage?: number;
page?: number;
date?: string;
latest?: number;
};
}
export interface GetActionStatusResponse {
items: ActionStatus[];
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import { EuiBadge, EuiToolTip } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import React from 'react';

export const AgentActivityBadge: React.FunctionComponent<{
recentErrors: number;
onClick: () => void;
}> = ({ recentErrors, onClick }) => {
if (recentErrors === 0) {
return null;
}

return (
<EuiToolTip
content={
<FormattedMessage
id="xpack.fleet.agentList.agentActivityBadge.tooltip"
defaultMessage="{recentErrors, plural, one {There is # new agent activity error} other {There are # new agent activity errors}}. Click to view."
values={{
recentErrors,
}}
/>
}
>
<EuiBadge
color="warning"
onClick={onClick}
onClickAriaLabel="Open the Agent activity flyout"
iconType="warning"
iconOnClick={onClick}
iconOnClickAriaLabel="Open the Agent activity flyout"
data-test-subj="agentActivityBadge"
>
<FormattedMessage
id="xpack.fleet.agentList.agentActivityBadge.label"
defaultMessage="Review errors"
/>
</EuiBadge>
</EuiToolTip>
);
};
Loading

0 comments on commit f248783

Please sign in to comment.