[Fleet] Add raw status to Agent details UI #154826

jillguyonnet · 2023-04-12T14:25:00Z

Summary

Make raw agent status discoverable in Fleet UI, under Agent details tab.

Closes #154067

Screenshots

UX checklist

Action link title (View agent JSON)
Flyout title ({agentName} agent details)
Download button
Download button label (Download JSON)
Downloaded file name ({agentName}-agent-details.json)

Testing steps

Run Kibana in dev on this branch.
In Fleet, click on an agent to get to the agent details page.
There should be a new View agent JSON item in the Actions menu. Click it.
A new flyout should open with the agent details in JSON format. Clicking outside of the flyout or on the Close button should close the flyout.
The Download JSON button should download the JSON correctly.

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

apmmachine · 2023-04-12T14:25:16Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

jillguyonnet · 2023-04-12T14:50:14Z

@kpollich @jen-huang @karenzone
Could I get some early review on the implementation based on the screenshots above?

jen-huang · 2023-04-12T20:40:04Z

@jillguyonnet I think the code block is too big to be in the collapsible details area. WDYT of adding a new item to the Actions menu that says "View agent document"? The current actions menu:

When clicked, it can open a flyout with the raw document. This would make it consistent with an existing UX pattern that exists at Agent policy > Actions > View policy:

jillguyonnet · 2023-04-13T08:08:41Z

@jen-huang Thank you! That looks way better and consistent with existing UX. On it.

...c/applications/fleet/sections/agents/agent_details_page/components/agent_document_flyout.tsx

kpollich · 2023-04-13T11:49:58Z

@jillguyonnet - Could you paste an example of the agent JSON here to make sure it aligns with what Craig is proposing in the original issue?

jillguyonnet · 2023-04-13T13:11:52Z

Thanks for catching the typo @kpollich :)

Here is an example JSON from my local dev:

JSON output

  {
"id": "430f2e47-0dc2-40a5-870e-07e861a38e67",
"access_api_key_id": "ws-8dYcBO_tAA7yPFnJS",
"action_seq_no": [
  -1
],
"active": true,
"agent": {
  "id": "430f2e47-0dc2-40a5-870e-07e861a38e67",
  "version": "8.8.0"
},
"enrolled_at": "2023-04-12T13:51:13Z",
"local_metadata": {
  "elastic": {
    "agent": {
      "build.original": "8.8.0-SNAPSHOT (build: 0c96fc55ec341d0a3c4f12477e5207e2827e3bdc at 2023-04-11 02:10:10 +0000 UTC)",
      "id": "430f2e47-0dc2-40a5-870e-07e861a38e67",
      "log_level": "info",
      "snapshot": true,
      "upgradeable": false,
      "version": "8.8.0"
    }
  },
  "host": {
    "architecture": "aarch64",
    "hostname": "dcfc864e0e1c",
    "id": "",
    "ip": [
      "127.0.0.1/8",
      "172.17.0.3/16"
    ],
    "mac": [
      "02:42:ac:11:00:03"
    ],
    "name": "dcfc864e0e1c"
  },
  "os": {
    "family": "debian",
    "full": "Ubuntu focal(20.04.5 LTS (Focal Fossa))",
    "kernel": "5.15.49-linuxkit",
    "name": "Ubuntu",
    "platform": "ubuntu",
    "version": "20.04.5 LTS (Focal Fossa)"
  }
},
"policy_id": "21fbd1e0-d917-11ed-8c4b-9f33f6a28da9",
"type": "PERMANENT",
"outputs": {
  "default": {
    "api_key": "xM-8dYcBO_tAA7yPIXJl:GIHnIyDtQK21XHJXIVGkcg",
    "permissions_hash": "a40c5fbf91c40a30ee69112a6e659e13513e37799d2264c866c42f8752d1d356",
    "type": "elasticsearch",
    "api_key_id": "xM-8dYcBO_tAA7yPIXJl"
  }
},
"policy_revision_idx": 3,
"policy_coordinator_idx": 1,
"updated_at": "2023-04-13T11:07:52Z",
"components": [
  {
    "id": "log-default",
    "units": [
      {
        "id": "log-default-logfile-system-240b02d0-d917-11ed-8c4b-9f33f6a28da9",
        "type": "input",
        "message": "Healthy",
        "status": "HEALTHY"
      },
      {
        "id": "log-default",
        "type": "output",
        "message": "Healthy",
        "status": "HEALTHY"
      }
    ],
    "type": "log",
    "message": "Healthy: communicating with pid '28'",
    "status": "HEALTHY"
  },
  {
    "id": "system/metrics-default",
    "units": [
      {
        "id": "system/metrics-default",
        "type": "output",
        "message": "Healthy",
        "status": "HEALTHY"
      },
      {
        "id": "system/metrics-default-system/metrics-system-240b02d0-d917-11ed-8c4b-9f33f6a28da9",
        "type": "input",
        "message": "Healthy",
        "status": "HEALTHY"
      }
    ],
    "type": "system/metrics",
    "message": "Healthy: communicating with pid '34'",
    "status": "HEALTHY"
  },
  {
    "id": "http/metrics-monitoring",
    "units": [
      {
        "id": "http/metrics-monitoring-metrics-monitoring-agent",
        "type": "input",
        "message": "Healthy",
        "status": "HEALTHY"
      },
      {
        "id": "http/metrics-monitoring",
        "type": "output",
        "message": "Healthy",
        "status": "HEALTHY"
      }
    ],
    "type": "http/metrics",
    "message": "Healthy: communicating with pid '46'",
    "status": "HEALTHY"
  },
  {
    "id": "filestream-monitoring",
    "units": [
      {
        "id": "filestream-monitoring-filestream-monitoring-agent",
        "type": "input",
        "message": "Healthy",
        "status": "HEALTHY"
      },
      {
        "id": "filestream-monitoring",
        "type": "output",
        "message": "Healthy",
        "status": "HEALTHY"
      }
    ],
    "type": "filestream",
    "message": "Healthy: communicating with pid '57'",
    "status": "HEALTHY"
  },
  {
    "id": "beat/metrics-monitoring",
    "units": [
      {
        "id": "beat/metrics-monitoring-metrics-monitoring-beats",
        "type": "input",
        "message": "Healthy",
        "status": "HEALTHY"
      },
      {
        "id": "beat/metrics-monitoring",
        "type": "output",
        "message": "Healthy",
        "status": "HEALTHY"
      }
    ],
    "type": "beat/metrics",
    "message": "Healthy: communicating with pid '69'",
    "status": "HEALTHY"
  }
],
"last_checkin_message": "Running",
"last_checkin_status": "online",
"last_checkin": "2023-04-13T11:07:49Z",
"policy_revision": 3,
"status": "online",
"packages": [],
"sort": [
  1681307473000
],
"metrics": {}
}

karenzone · 2023-04-13T15:00:24Z

@zombieFox is joining Ingest to help with UX design. Looping him in here.

karenzone · 2023-04-13T16:10:31Z

...eet/public/applications/fleet/sections/agents/agent_details_page/components/actions_menu.tsx

+    >
+      <FormattedMessage
+        id="xpack.fleet.agentList.viewAgentDocumentText"
+        defaultMessage="View agent document"


We try to be as descriptive with labeling as possible so that users have a better idea of what an option will do for them.

Could we use "View agent json" instead of "View agent document"? My first thought was "View agent details,", but that label is already being used.

Thank you @karenzone - I am not sure whether there is a UX pattern in this case. View agent json sounds clear to me. There is a sort of equivalent in the agent policy simply labelled View policy (note that the output is represented as yaml, not json, like in the screenshot @jen-huang posted above), so maybe View agent could even make sense? Or maybe View full agent details?

@zombieFox As it looks like Karen is on PTO this week could you weigh in on this?

cc @jen-huang @kpollich

kpollich · 2023-04-13T17:10:14Z

I think it'd be good if we could add some kind of description here, as it's not clear why a user might open this flyout or what they should do with the resulting data.

Maybe something like

The JSON below is the raw agent data tracked by Fleet. This data can be useful for debugging or troubleshooting Elastic Agent. For more information, see the troubleshooting documentation.

cc @karenzone for copy suggestions 🙏

zombieFox · 2023-04-13T17:27:33Z

Hi all 👋🏽

From the limited context I have the I feel the comments and contributors here are on the right path.

+1 to the View agent document CTA in the dropdown and the flyout panel for the large code block. This UI pattern works well here.

I think it'd be good if we could add some kind of description here, as it's not clear why a user might open this flyout or what they should do with the resulting data.

+1 to adding more details on the flyout to guide users to useful information in the JSON code block.

This might add scope, so please disregard if so - A question:

Are there any parts of the code block we can automatically highlight to help debug the failed state?

jillguyonnet · 2023-04-17T13:41:12Z

Hi @zombieFox - thank you for your feedback!

+1 to adding more details on the flyout to guide users to useful information in the JSON code block.

Definitely 👍 Could you weigh in on Kyle's suggestion above? As mentioned in the other thread, it looks like Karen is off this week.

Are there any parts of the code block we can automatically highlight to help debug the failed state?

While it is possible to highlight certain lines (https://elastic.github.io/eui/#/editors-syntax/code), which lines are relevant for debugging might depend on the specific failure scenario. I am not sure in my current understanding how feasible that would be. Maybe @kpollich can confirm.

kpollich · 2023-04-18T12:41:02Z

While it is possible to highlight certain lines (https://elastic.github.io/eui/#/editors-syntax/code), which lines are relevant for debugging might depend on the specific failure scenario. I am not sure in my current understanding how feasible that would be. Maybe @kpollich can confirm.

We could look for any components with a status of UNHEALTHY and highlight the status and message fields. I don't think this would be particularly meaningful here, though. Let's punt on that for this PR and maybe we can take a look at all of our EuiCodeBlock usages across the board for an enhancement along those lines.

…-ref HEAD~1..HEAD --fix'

kibana-ci · 2023-04-19T12:25:26Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: d33c8af

Failed CI Steps

FTR Configs #57

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`fleet`	798	799	+1

Async chunks

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

id	before	after	diff
`fleet`	945.5KB	948.0KB	+2.5KB

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`securitySolution`	432	435	+3

Total ESLint disabled count

id	before	after	diff
`securitySolution`	512	515	+3

History

💛 Build #119849 was flaky e364c2ed1d1477c7647f0390997422945fda0ce2
💚 Build #119773 succeeded 8264f89cb708e157e116aa6006c935f6a5684c4f
💛 Build #119739 was flaky 536be72e911d6aed43669719629673ba2aa7cabf
💚 Build #119442 succeeded d19bae38ee454c5a061e7ff317348445b4032bff

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

cc @jillguyonnet

elasticmachine · 2023-04-19T13:02:11Z

Pinging @elastic/fleet (Team:Fleet)

jillguyonnet · 2023-04-19T13:05:59Z

Opening this for review based on the feedback gathered so far.

@karenzone @zombieFox If this gets merged before you get a chance to do any more reviewing, please note that any additional UX feedback such as wording can very easily be added at a later stage.

@elastic/fleet Something I'm not 100% confident with is the implementation of the download link (seems like a shame to do an API call since the payload is already in memory). Please have a critical look at it when reviewing, thanks 🙂

criamico

Code LGTM! I also tested locally and it works well. 🚢

jillguyonnet self-assigned this Apr 12, 2023

jillguyonnet force-pushed the fleet/Add-raw-status-to-agent-details branch from d19bae3 to a4c3094 Compare April 13, 2023 11:18

jillguyonnet added Team:Fleet Team label for Observability Data Collection Fleet team release_note:enhancement v8.8.0 labels Apr 13, 2023

kpollich reviewed Apr 13, 2023

View reviewed changes

...c/applications/fleet/sections/agents/agent_details_page/components/agent_document_flyout.tsx Outdated Show resolved Hide resolved

karenzone reviewed Apr 13, 2023

View reviewed changes

jillguyonnet and others added 7 commits April 19, 2023 11:10

[Fleet] Add raw status to Agent details UI

9c16d36

Move to action flyout

d089ab0

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

3cd7ec7

…-ref HEAD~1..HEAD --fix'

Fix typo

38e1db6

Add unit test for new flyout

440681f

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

82ddaf1

…-ref HEAD~1..HEAD --fix'

UI updates

d33c8af

jillguyonnet force-pushed the fleet/Add-raw-status-to-agent-details branch from e364c2e to d33c8af Compare April 19, 2023 11:20

jillguyonnet marked this pull request as ready for review April 19, 2023 13:02

jillguyonnet requested a review from a team as a code owner April 19, 2023 13:02

criamico approved these changes Apr 21, 2023

View reviewed changes

jillguyonnet merged commit b97b18e into elastic:main Apr 21, 2023

kibanamachine added the backport:skip This commit does not require backporting label Apr 21, 2023

jillguyonnet deleted the fleet/Add-raw-status-to-agent-details branch April 21, 2023 13:19

cmacknz mentioned this pull request Apr 24, 2023

[Fleet] Implement per-integration health reporting #154634

Closed

jen-huang mentioned this pull request Apr 26, 2023

[Fleet] Request diagnostics action should be available on managed agents #155294

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fleet] Add raw status to Agent details UI #154826

[Fleet] Add raw status to Agent details UI #154826

jillguyonnet commented Apr 12, 2023 •

edited

Loading

apmmachine commented Apr 12, 2023

jillguyonnet commented Apr 12, 2023

jen-huang commented Apr 12, 2023

jillguyonnet commented Apr 13, 2023

kpollich commented Apr 13, 2023

jillguyonnet commented Apr 13, 2023 •

edited

Loading

karenzone commented Apr 13, 2023

karenzone Apr 13, 2023

jillguyonnet Apr 17, 2023

kpollich commented Apr 13, 2023

zombieFox commented Apr 13, 2023

jillguyonnet commented Apr 17, 2023 •

edited

Loading

kpollich commented Apr 18, 2023

kibana-ci commented Apr 19, 2023

ESLint disabled line counts

Total ESLint disabled count

elasticmachine commented Apr 19, 2023

jillguyonnet commented Apr 19, 2023

criamico left a comment

[Fleet] Add raw status to Agent details UI #154826

[Fleet] Add raw status to Agent details UI #154826

Conversation

jillguyonnet commented Apr 12, 2023 • edited Loading

Summary

Screenshots

UX checklist

Testing steps

Checklist

apmmachine commented Apr 12, 2023

🤖 GitHub comments

jillguyonnet commented Apr 12, 2023

jen-huang commented Apr 12, 2023

jillguyonnet commented Apr 13, 2023

kpollich commented Apr 13, 2023

jillguyonnet commented Apr 13, 2023 • edited Loading

karenzone commented Apr 13, 2023

karenzone Apr 13, 2023

Choose a reason for hiding this comment

jillguyonnet Apr 17, 2023

Choose a reason for hiding this comment

kpollich commented Apr 13, 2023

zombieFox commented Apr 13, 2023

jillguyonnet commented Apr 17, 2023 • edited Loading

kpollich commented Apr 18, 2023

kibana-ci commented Apr 19, 2023

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Module Count

Async chunks

ESLint disabled line counts

Total ESLint disabled count

History

elasticmachine commented Apr 19, 2023

jillguyonnet commented Apr 19, 2023

criamico left a comment

Choose a reason for hiding this comment

jillguyonnet commented Apr 12, 2023 •

edited

Loading

jillguyonnet commented Apr 13, 2023 •

edited

Loading

jillguyonnet commented Apr 17, 2023 •

edited

Loading