mirror of
https://github.com/elastic/kibana.git
synced 2025-04-22 17:04:01 -04:00
b83b4951ca
## 📓 Summary Closes #170728 This work comes from the need to use agent and cloud provider icons in the new Log Detail flyout. Since those icons were already used across the `infra` and `apm` plugins, this was a good opportunity to extract the shared logic into packages. The results of this refactoring are two new packages: - **@kbn/elastic-agent-utils**: exports small utilities and type definition used to parse the icon to render and exploits also across the APM plugin. - **@kbn/custom-icons**: exports custom icons built on top of EuiIcon, encapsulating logic related to mapping from data to the relative icon. Apart from creating the new plugins, this also applies their usage to the `infra` and `apm` plugins, while the Log Explorer flyout will benefit from these working on https://github.com/elastic/kibana/issues/170721. ## 🧪 How to test ### Infra - Navigate to `Infrastructure -> Hosts` - Verify the hosts table correctly renders the cloud provider icon for each table entry. ### APM - Navigate to `APM -> Services`. - Verify each table entry correctly displays the related agent icon. - Navigate to `APM -> Services`. - Click on a service where t a cloud provider icon is expected to appear next to the service name. - Verify the icon is correctly displayed. - Navigate to `APM -> Services -> Service Map`. - Create a new group. - Verify the agent icon is correctly displayed for each entry in the preview list. - Navigate to `APM -> Traces`. - Verify each table entry correctly displays the related agent icon. - Navigate to `APM -> Settings -> Agent Explorer`. - Verify each table entry correctly displays the related agent icon. --------- Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| .storybook | ||
| assets | ||
| src/components | ||
| index.ts | ||
| jest.config.js | ||
| kibana.jsonc | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
@kbn/custom-icons
A utility package, @kbn/custom-icons, that provides components for rendering icons related to Elastic Agents, Cloud Providers and more.
Components
<AgentIcon />
<AgentIcon agentName={agentName} />
This component renders an icon corresponding to the specified Elastic Agent name (agentName).
Props
agentName: The name of the Elastic Agent for which the icon should be rendered.
<CloudProviderIcon />
<CloudProviderIcon cloudProvider={cloudProvider} />
This component renders an icon associated with the specified Cloud Provider (cloudProvider).
Props
cloudProvider: The name of the Cloud Provider for which the icon should be rendered.