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

[Fleet] Update agent details page #84434

Conversation

nchaulet
Copy link
Member

@nchaulet nchaulet commented Nov 26, 2020

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

Screen Shot 2020-11-26 at 11 28 41 AM

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
Screen Shot 2020-11-26 at 4 31 06 PM

Integration Badges

I updated the AgentPolicyPackages components to only show integration once.
Screen Shot 2020-11-26 at 4 32 08 PM

@nchaulet 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 nchaulet self-assigned this Nov 26, 2020
@nchaulet 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
@nchaulet nchaulet force-pushed the feature-fleet-update-design-agent-details-page branch from e3ea6a9 to 4bdf9fa Compare November 26, 2020 19:08
@nchaulet nchaulet changed the title [Fleet] Update agent details pag [Fleet] Update agent details page Nov 26, 2020
@nchaulet nchaulet marked this pull request as ready for review November 26, 2020 21:33
@nchaulet nchaulet requested a review from a team November 26, 2020 21:33
@elasticmachine
Copy link
Contributor

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

Copy link
Contributor

@jfsiii jfsiii left a comment

Choose a reason for hiding this comment

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

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

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

Choose a reason for hiding this comment

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

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?

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 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,

Copy link
Member Author

Choose a reason for hiding this comment

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

@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

Screen Shot 2020-11-30 at 1 26 08 PM

Screen Shot 2020-11-30 at 1 26 03 PM

Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Member Author

Choose a reason for hiding this comment

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

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

} from '../agent_logs/constants';

export function displayInputType(inputType: string): string {
if (inputType === 'logfile') {
Copy link
Contributor

Choose a reason for hiding this comment

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

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.

Copy link
Member Author

Choose a reason for hiding this comment

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

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

Copy link
Contributor

@jfsiii jfsiii left a comment

Choose a reason for hiding this comment

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

Thanks for all iterations and changes!

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

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

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

@nchaulet nchaulet merged commit 0ba7d9c into elastic:master Dec 1, 2020
@nchaulet nchaulet deleted the feature-fleet-update-design-agent-details-page branch December 1, 2020 13:47
nchaulet added a commit to nchaulet/kibana that referenced this pull request Dec 1, 2020
gmmorris added a commit to gmmorris/kibana that referenced this pull request Dec 1, 2020
* 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
Copy link

ghost commented Dec 8, 2020

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
Copy link
Contributor

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
Copy link

ghost commented Dec 9, 2020

Hi Eric

Thank you for sharing the feedback

We have added the query on corresponding testing ticket #84962

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
release_note:skip Skip the PR/issue when compiling release notes Team:Fleet Team label for Observability Data Collection Fleet team v7.11.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants