[Fleet] Tabular UI for installed integrations #212582

nchaulet · 2025-02-26T19:13:35Z

Summary

Related to #209861

The feature is behind a new feature installedIntegrationsTabularUI

# to enable it in your kibana config 
xpack.fleet.enableExperimental: ['installedIntegrationsTabularUI'].

Implementation details

All the packages are fetched in memory, and the pagination filtering is done client side, in the useInstalledIntegrations hook, that hook is unit tested.

API Changes

To be able to populate the View policies count, I update the package API with a new withPackagePoliciesCount query parameter default to false, that populate an packagePolicyInfo property on the package result.

UI Changes

Not Done in that PR

Actions are not implemented in that PR
View policies is not implemented
Version and status table are going to merged together, when the design is discussed/adjusted I will come up with a follow up PR, please do not review the current columns as they will be changed soon
Cypress test will come later too.

Todo

…ed-integrations-tabular-ui

github-actions · 2025-02-28T16:25:35Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

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

kibanamachine · 2025-02-28T16:37:37Z

PR Cloud deployment started at: https://buildkite.com/elastic/kibana-deploy-cloud-from-pr/builds/89

…t --include-path /api/status --include-path /api/alerting/rule/ --include-path /api/alerting/rules --include-path /api/actions --include-path /api/security/role --include-path /api/spaces --include-path /api/fleet --include-path /api/dashboards --update'

kibanamachine · 2025-02-28T17:13:35Z

Project deployed, see credentials at: https://buildkite.com/elastic/kibana-deploy-project-from-pr/builds/344

…m:nchaulet/kibana into feature-installed-integrations-tabular-ui

elasticmachine · 2025-03-03T14:11:10Z

Pinging @elastic/fleet (Team:Fleet)

nchaulet · 2025-03-03T14:18:00Z

@elasticmachine merge upstream

...sections/epm/screens/installed_integrations/components/installed_integrations_search_bar.tsx

...ions/sections/epm/screens/installed_integrations/components/installed_integrations_table.tsx

...ntegrations/sections/epm/screens/installed_integrations/hooks/use_installed_integrations.tsx

...fleet/public/applications/integrations/sections/epm/screens/installed_integrations/types.tsx

jen-huang · 2025-03-04T01:23:55Z

x-pack/platform/plugins/shared/fleet/server/routes/epm/handlers.ts

  const res = await getPackages({
    savedObjectsClient,
    ...request.query,
  });
  const flattenedRes = res.map((pkg) => soToInstallationInfo(pkg)) as PackageList;
+
+  if (request.query.withPackagePoliciesCount) {
+    const countByPackage = await getPackagePoliciesCountByPackageName(


curious why not use packagePolicyService.list instead of a new function?

that function does an aggregation in elasticsearch on package policy name as we do not need to return package policies, we could eventually update the list method to support passing aggregations but we will still probably need an extra function to abstract that aggregation wdyt?

👍 I also missed that getPackagePoliciesCountByPackageName keys by package name, not that it returns a count based on a package name param (that's why I thought we could use packagePolicyService.list kuery + total). thanks for clarifying

…rations/sections/epm/screens/installed_integrations/components/installed_integrations_table.tsx Co-authored-by: Jen Huang <its.jenetic@gmail.com>

…rations/sections/epm/screens/installed_integrations/components/installed_integrations_search_bar.tsx Co-authored-by: Jen Huang <its.jenetic@gmail.com>

elasticmachine · 2025-03-04T04:14:05Z

💚 Build Succeeded

Buildkite Build
Commit: 0713d34

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`fleet`	1201	1211	+10

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.7MB	1.7MB	+12.5KB

Page load bundle

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

id	before	after	diff
`fleet`	156.9KB	158.1KB	+1.2KB

History

💚 Build #280354 succeeded 071c7fd
💔 Build #280028 failed f639be3

juliaElastic · 2025-03-04T15:23:41Z

...atform/plugins/shared/fleet/server/services/package_policies/package_policies_aggregation.ts

+    { count_by_package_name: { buckets: Array<{ key: string; doc_count: number }> } }
+  >({
+    type: savedObjectType,
+    perPage: 0,


should we add size:0 since hits are not used?

yes 👍 I will make the change

actually it's already done with the perPage: 0 it's a saved object client not an ES client

…ed-integrations-tabular-ui

juliaElastic · 2025-03-04T16:02:48Z

...sections/epm/screens/installed_integrations/components/installed_integrations_search_bar.tsx

+        label: (
+          <FormattedMessage
+            id="xpack.fleet.epmInstalledIntegrations.upgradeAvailableFilterLabel"
+            defaultMessage="Upgrade"


I think Upgrade available would be more expressive, though it might take up too much space.

That a good point noting this to do a design review with christian when this is technically done.

jen-huang

Thanks for the changes, LGTM 🚀

juliaElastic

LGTM

juliaElastic · 2025-03-04T16:07:58Z

...sections/epm/screens/installed_integrations/components/installed_integrations_search_bar.tsx

+        <EuiFlexItem grow={false}>
+          <EuiFilterGroup>
+            {statuses.map((item) => (
+              <EuiFilterButton


this could be extracted to a small component

nchaulet force-pushed the feature-installed-integrations-tabular-ui branch from 0e7a038 to 5783ba9 Compare February 26, 2025 21:57

[Fleet] Tabular UI for installed integrations

284b64f

nchaulet force-pushed the feature-installed-integrations-tabular-ui branch from 5783ba9 to 284b64f Compare February 26, 2025 22:23

nchaulet added 2 commits February 27, 2025 14:29

API for package policies count on packages

cdd5886

Add active filter count

525bbe4

nchaulet added the ci:cloud-deploy Create or update a Cloud deployment label Feb 27, 2025

nchaulet added 2 commits February 27, 2025 15:52

Merge branch 'main' of github.com:elastic/kibana into feature-install…

d87bdf0

…ed-integrations-tabular-ui

add unit tests

f639be3

nchaulet added ci:project-deploy-observability Create an Observability project and removed ci:cloud-deploy Create or update a Cloud deployment labels Feb 28, 2025

nchaulet added ci:cloud-deploy Create or update a Cloud deployment and removed ci:project-deploy-observability Create an Observability project labels Feb 28, 2025

add custom filter

6af81c5

nchaulet added 3 commits March 2, 2025 18:43

remove installed status

32e884e

Merge branch 'feature-installed-integrations-tabular-ui' of github.co…

bd94cf2

…m:nchaulet/kibana into feature-installed-integrations-tabular-ui

add tests

a3455d4

nchaulet marked this pull request as ready for review March 3, 2025 14:09

nchaulet requested a review from a team as a code owner March 3, 2025 14:09

nchaulet added release_note:skip Skip the PR/issue when compiling release notes backport:skip This commit does not require backporting Team:Fleet Team label for Observability Data Collection Fleet team and removed ci:cloud-deploy Create or update a Cloud deployment labels Mar 3, 2025

elasticmachine and others added 2 commits March 3, 2025 14:18

Merge branch 'main' into feature-installed-integrations-tabular-ui

d8f82ce

[CI] Auto-commit changed files from 'make api-docs'

071c7fd

jen-huang self-requested a review March 4, 2025 01:00

jen-huang reviewed Mar 4, 2025

View reviewed changes

nchaulet and others added 2 commits March 3, 2025 21:07

Update x-pack/platform/plugins/shared/fleet/public/applications/integ…

a9204cb

…rations/sections/epm/screens/installed_integrations/components/installed_integrations_table.tsx Co-authored-by: Jen Huang <its.jenetic@gmail.com>

Update x-pack/platform/plugins/shared/fleet/public/applications/integ…

0713d34

…rations/sections/epm/screens/installed_integrations/components/installed_integrations_search_bar.tsx Co-authored-by: Jen Huang <its.jenetic@gmail.com>

juliaElastic reviewed Mar 4, 2025

View reviewed changes

Merge branch 'main' of github.com:elastic/kibana into feature-install…

82c9098

…ed-integrations-tabular-ui

juliaElastic reviewed Mar 4, 2025

View reviewed changes

fix after review

81a06e7

nchaulet requested review from jen-huang and juliaElastic March 4, 2025 16:10

jen-huang approved these changes Mar 4, 2025

View reviewed changes

juliaElastic approved these changes Mar 5, 2025

View reviewed changes

nchaulet merged commit 680bf58 into elastic:main Mar 5, 2025
10 checks passed

kibanamachine added the v9.1.0 label Mar 5, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fleet] Tabular UI for installed integrations #212582

[Fleet] Tabular UI for installed integrations #212582

nchaulet commented Feb 26, 2025 •

edited

Loading

github-actions bot commented Feb 28, 2025

kibanamachine commented Feb 28, 2025

kibanamachine commented Feb 28, 2025

elasticmachine commented Mar 3, 2025

nchaulet commented Mar 3, 2025

jen-huang Mar 4, 2025

nchaulet Mar 4, 2025

jen-huang Mar 4, 2025

elasticmachine commented Mar 4, 2025

juliaElastic Mar 4, 2025

nchaulet Mar 4, 2025

nchaulet Mar 4, 2025

juliaElastic Mar 4, 2025

nchaulet Mar 4, 2025

jen-huang left a comment

juliaElastic left a comment

juliaElastic Mar 4, 2025

[Fleet] Tabular UI for installed integrations #212582

[Fleet] Tabular UI for installed integrations #212582

Conversation

nchaulet commented Feb 26, 2025 • edited Loading

Summary

Implementation details

API Changes

UI Changes

Not Done in that PR

Todo

github-actions bot commented Feb 28, 2025

🤖 GitHub comments

kibanamachine commented Feb 28, 2025

kibanamachine commented Feb 28, 2025

elasticmachine commented Mar 3, 2025

nchaulet commented Mar 3, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elasticmachine commented Mar 4, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jen-huang left a comment

Choose a reason for hiding this comment

juliaElastic left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nchaulet commented Feb 26, 2025 •

edited

Loading