elastic/kibana

[Fleet] Add placeholder UI to integrations panel on agent details page

Open

#166246 opened on Sep 12, 2023

View on GitHub
 (9 comments) (0 reactions) (0 assignees)TypeScript (19,065 stars) (8,021 forks)batch import
Team:Fleetbuggood first issueimpact:lowv8.11.0

Description

Description: If there is no integration added, there should be a message displayed for the same

Build Details:

VERSION: 8.11.0
BUILD: 66955
COMMIT: 127d4dfce7e9b9af4999e401c649f4c736e526e2

Browser Details: All

Preconditions:

  1. Kibana user should be logged in

Steps to Reproduce:

  1. Navigate to the fleet tab
  2. Create a new policy
  3. The newly created policy should be deleted for any integration if added
  4. Use the same policy to deploy an agent
  5. Click on the agent name to view agent details
  6. Observe the integration column is empty

Actual Result: If there is no integration added, the user is shown with just empty page without any data

Expected Result: If there is no integration added, there should be a message displayed for the same

Screenshot: Capture

Logs N/A

Contributor guide

Tech stack
typescriptreacthtmlcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactTypeScriptKibana basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
The issue is about adding a placeholder when no integrations are present in the agent details page under the Fleet plugin. Start by locating the relevant React component responsible for rendering the integrations list (likely in `x pack/plugins/fleet/public/`). Look for existing empty state patterns in the codebase (e.g., using `EuiEmptyPrompt` from EUI library). Implement a conditional message when the integrations array is empty.