[Fleet] Update agent details page #84434

nchaulet · 2020-11-26T18:00:05Z

Description

Implements the design defined here #81872

Implement new design for agent details page, this design prepare for having per integration status.

Details from the original issue:

Use EuiBadge to indicate agent status in the page's header area
Adds "last activity" in the header area. This is the same information we present in the previous page in the agent table.
Agent metadata is now wrapped inside a panel called "Overview". Some new information we'll be adding here include:
- A summary of the integrations that exist on this agent using a hollow EuiBadge with the integration's icon on the left side. This information is somewhat duplicative of what is shown on the right half of this page, but it provides a scannable representation. If an agent has multiple instances of the same integration (for example, Uptime/Synthetics monitors), it will only be shown once in the "Overview" panel, whereas the information on the right hand side will list all instances of an integration which could become quite long in the event of there being many instances.
- The agent's log level (can be info, warn, debug, or error). In a separate issue, we will add the ability for a user to set the log level for a single agent. [Fleet] Allow to config Agent log level #83330 (comment)
- Monitor logs and monitor metrics can be true or false. This information is set at the agent policy level.
On the right half of the page, we will list individual instances of an integration. Users can click the integration's name which will take them to the "edit page" for that integration. Users can also click the expand icon to view which inputs are configured for the integration. Once expanded, users can click the "view logs" icon which will take the user to the logs tab with a filter applied to only show logs that correspond with that process. I.e. the "logs" input will show the "elastic_agent.filebeat" dataset

UI Change

Update the details agent page to have two section: Overview and Integration.

The integration section is per default closed, and should show the different inputs when it's visible

UI change details

Status

We now use EuiBadge to display agent status and we use healthy, unhealthy, offline, updating as status, the agent listing page will be updated in a follow up PR

Integration Badges

I updated the AgentPolicyPackages components to only show integration once.

…tatus

elasticmachine · 2020-11-26T21:33:32Z

Pinging @elastic/ingest-management (Team:Ingest Management)

jfsiii

The screenshot in the description looks great!

I tried to run locally but had some unrelated difficulty running a snapshot agent. I left some comments but it looks good overall

...t/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx

...fleet/sections/agents/agent_details_page/components/agent_details/agent_details_overview.tsx

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_details_page/index.tsx

jfsiii · 2020-11-29T23:45:34Z

...t/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx

+const StyledCollapsablePanel = styled(EuiPanel).attrs((props) => ({
+  paddingSize: 'none',
+}))`
+  .euiAccordion__triggerWrapper {


Can we do this without targeting EUI internal classes? If the solution isn't obvious, mind opening a ticket/discussion with the EUI team for a suggestion or fix?

I do not think it's possible to do it without custom css here, I know @hbharding implemented it the same way for the overview panel,

@elastic/eui-design Do you think there is anything built in that I can use to build this component? I currently use an EuiAccordion in a EuiPanel with some custom css

Hey @nchaulet , It looks like what you're actually building is a table within the contents of the accordion body. I would explicitly use the EuiBasicTable component so that all the right associations are made between cells. Then you'll just need to remove the padding from the accordion but pass a custom padding and class to the button portion of the accordion. Here's an example CodeSandox https://codesandbox.io/s/thirsty-river-hmfd2?file=/index.js

Thanks a lot I just updated to use a buttonClass in EuiAccordion works perfectly :)

...t/sections/agents/agent_details_page/components/agent_details/agent_details_integrations.tsx

jfsiii · 2020-11-30T00:03:34Z

...ations/fleet/sections/agents/agent_details_page/components/agent_details/input_type_utils.ts

+} from '../agent_logs/constants';
+
+export function displayInputType(inputType: string): string {
+  if (inputType === 'logfile') {


Do we have TS types for any of these input types? Should we? Seems like we have a limited set of acceptable values, or at least a few known ones, and we could add some type safety to them.

We do not have, and only logfile and endpoint are fix for metrics it's something like */metrics

...ugins/fleet/public/applications/fleet/sections/agents/agent_details_page/components/index.ts

…-update-design-agent-details-page

jfsiii

Thanks for all iterations and changes!

kibanamachine · 2020-11-30T23:11:07Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 25524bc

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`fleet`	446	449	+3

Async chunks

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

id	before	after	diff
`fleet`	1.1MB	1.1MB	+7.8KB

Page load bundle

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

id	before	after	diff
`fleet`	374.8KB	374.9KB	+62.0B

History

💚 Build #90852 succeeded fed695b
💔 Build #90834 failed 1ec8e98
💚 Build #90497 succeeded 4bdf9fa
💔 Build #90489 failed e3ea6a9
💔 Build #90482 failed d9b0350

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

* master: (63 commits) Revert the Revert of "[Alerting] renames Resolved action group to Recovered (elastic#84123)" (elastic#84662) declare kbn/monaco dependency on kbn/i18n explicitly (elastic#84660) Remove unscripted fields from sample data index-pattern saved objects (elastic#84659) [ML] Fix unnecessary trigger of wildcard field type search for ML plugin routes. (elastic#84605) Update create.asciidoc (elastic#84046) [Security Solution][Detections] Fix labels and issue with mandatory fields (elastic#84525) Fix flaky test suite (elastic#84602) [Security Solution] [Detections] Create a 'partial failure' status for rules (elastic#84293) Revert "[Alerting] renames Resolved action group to Recovered (elastic#84123)" Update code-comments describing babel plugins (elastic#84622) [Security Solution] [Cases] Cypress for case connector selector options (elastic#80745) [Discover] Unskip doc table tests (elastic#84564) [Lens] (Accessibility) Improve landmarks in Lens (elastic#84511) [Lens] (Accessibility) Focus mistakenly stops on righthand form (elastic#84519) Return early when parallel install process detected (elastic#84190) [Security Solution][Detections] Support arrays in event fields for Severity/Risk overrides (elastic#83723) [Security Solution][Detections] Fix grammatical error in validation message for threshold field in "Create new rule" -> "Define rule" (elastic#84490) [Fleet] Update agent details page (elastic#84434) adding documentation of use of NODE_EXTRA_CA_CERTS env var (elastic#84578) [Search] Integrate "Send to background" UI with session service (elastic#83073) ...

ghost · 2020-12-04T13:07:01Z

Hi Eric

We have reviewed and created following 05 testcases for this ticket under Agent Details section:-
https://elastic.testrail.io/index.php?/cases/view/35177
https://elastic.testrail.io/index.php?/cases/view/35178
https://elastic.testrail.io/index.php?/cases/view/35179
https://elastic.testrail.io/index.php?/cases/view/35180
https://elastic.testrail.io/index.php?/cases/view/35181

ghost · 2020-12-08T13:31:12Z

Hi @EricDavisX

We have created 07 testcases and executed 12 testcases under [Fleet] Update agent details page Test Run on 8.0.0-SNAPSHOT Kibana cloud environment.

Build details:
Kibana Commit: 008c6a0e19a1c9e130152a6082c574057c841f89
BUILD: 38640
Agent: https://snapshots.elastic.co/8.0.0-46e297d8/downloads/beats/elastic-agent/elastic-agent-8.0.0-SNAPSHOT-windows-x86_64.zip

Query:
Could you please let us know how to get the agent into Unhealthy status.

EricDavisX · 2020-12-08T15:32:07Z

I don't know, good question. Can you open the question to the larger Fleet group in chat or in the testing-ticket (which is open for us to use for testing) please? And if we don't get a good or feasible / easy answer we can skip that manual assessment and rely on automation work the team should do.

ghost · 2020-12-09T13:24:36Z

Hi Eric

Thank you for sharing the feedback

We have added the query on corresponding testing ticket #84962

nchaulet added v8.0.0 release_note:skip Skip the PR/issue when compiling release notes Team:Fleet Team label for Observability Data Collection Fleet team v7.11.0 labels Nov 26, 2020

nchaulet self-assigned this Nov 26, 2020

nchaulet force-pushed the feature-fleet-update-design-agent-details-page branch 2 times, most recently from f2a9100 to e3ea6a9 Compare November 26, 2020 18:22

[Fleet] Update agent details page to prepare for a per integrations s…

4bdf9fa

…tatus

nchaulet force-pushed the feature-fleet-update-design-agent-details-page branch from e3ea6a9 to 4bdf9fa Compare November 26, 2020 19:08

nchaulet changed the title ~~[Fleet] Update agent details pag~~ [Fleet] Update agent details page Nov 26, 2020

nchaulet marked this pull request as ready for review November 26, 2020 21:33

nchaulet requested a review from a team November 26, 2020 21:33

jfsiii reviewed Nov 30, 2020

View reviewed changes

nchaulet added 5 commits November 30, 2020 13:26

Fix after review

0271964

Merge branch 'master' of github.com:elastic/kibana into feature-fleet…

1ec8e98

…-update-design-agent-details-page

Fix useless import

3932205

Better route definition for fleet_agent_details

fed695b

Do not override EUIAccordion internal classes

25524bc

jfsiii approved these changes Nov 30, 2020

View reviewed changes

nchaulet merged commit 0ba7d9c into elastic:master Dec 1, 2020

nchaulet deleted the feature-fleet-update-design-agent-details-page branch December 1, 2020 13:47

nchaulet mentioned this pull request Dec 1, 2020

[7.x] [Fleet] Update agent details page (#84434) #84639

Merged

nchaulet added a commit to nchaulet/kibana that referenced this pull request Dec 1, 2020

[Fleet] Update agent details page (elastic#84434)

1892204

nchaulet added a commit that referenced this pull request Dec 1, 2020

[Fleet] Update agent details page (#84434) (#84639)

438bbb5

hbharding mentioned this pull request Dec 3, 2020

Fleet agent details design review #84939

Merged

EricDavisX mentioned this pull request Dec 3, 2020

[Fleet] Testing ticket for new Agent Details page work #84962

Closed

3 tasks

ghost mentioned this pull request Dec 14, 2020

Incorrect 'elastic_agent' Dataset filter is applied when clicking 'logs' quickly on agent details page (for a specific integration) #85764

Closed

nchaulet mentioned this pull request Dec 18, 2020

[Fleet] Agent status improvements #75236

Open

amolnater-qasource mentioned this pull request Jan 13, 2021

[Ingest Manager] The long name breaks the UI structure for the Host details table under the Fleet tab. #85374

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fleet] Update agent details page #84434

[Fleet] Update agent details page #84434

nchaulet commented Nov 26, 2020 •

edited

elasticmachine commented Nov 26, 2020

jfsiii left a comment

jfsiii Nov 29, 2020

nchaulet Nov 30, 2020

nchaulet Nov 30, 2020

cchaos Nov 30, 2020

nchaulet Nov 30, 2020

jfsiii Nov 30, 2020

nchaulet Nov 30, 2020

jfsiii left a comment

kibanamachine commented Nov 30, 2020

ghost commented Dec 4, 2020

ghost commented Dec 8, 2020 •

edited by ghost

EricDavisX commented Dec 8, 2020

ghost commented Dec 9, 2020

[Fleet] Update agent details page #84434

[Fleet] Update agent details page #84434

Conversation

nchaulet commented Nov 26, 2020 • edited

Description

UI Change

UI change details

Status

Integration Badges

elasticmachine commented Nov 26, 2020

jfsiii left a comment

Choose a reason for hiding this comment

jfsiii Nov 29, 2020

Choose a reason for hiding this comment

nchaulet Nov 30, 2020

Choose a reason for hiding this comment

nchaulet Nov 30, 2020

Choose a reason for hiding this comment

cchaos Nov 30, 2020

Choose a reason for hiding this comment

nchaulet Nov 30, 2020

Choose a reason for hiding this comment

jfsiii Nov 30, 2020

Choose a reason for hiding this comment

nchaulet Nov 30, 2020

Choose a reason for hiding this comment

jfsiii left a comment

Choose a reason for hiding this comment

kibanamachine commented Nov 30, 2020

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

ghost commented Dec 4, 2020

ghost commented Dec 8, 2020 • edited by ghost

EricDavisX commented Dec 8, 2020

ghost commented Dec 9, 2020

nchaulet commented Nov 26, 2020 •

edited

ghost commented Dec 8, 2020 •

edited by ghost