[Logs Explorer] Hide hard coded flyout actions using customization extension point #166638

tonyghiani · 2023-09-18T15:16:03Z

📓 Summary

This work implements a new extension point in the Discover customization framework to allow customizing the flyout content. Although it enables customizing only the actions displayed on top, it could be enhanced for additional flyout customizations in the future.

To keep it simple and familiar to other customizations, it relies on a similar API as the top_nav customization, allowing one to disable default actions and insert additional ones.

/**
 * Hide flyout actions to prevent rendering hard-coded actions.
 */
customizations.set({
  id: 'flyout',
  actions: {
    defaultActions: {
      viewSingleDocument: { disabled: true },
      viewSurroundingDocument: { disabled: true },
    },
  },
});

🧪 Testing

Navigate to /app/observability-log-explorer and expand the flyout for any grid entry.
The actions on top of the flyout should not be displayed, only the title and the pagination control should appear.
Navigate to /app/discover and expand the flyout for any grid entry.
The actions for viewing a single documents or surrounding documents should be displayed.

apmmachine · 2023-09-18T15:16:19Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

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

elasticmachine · 2023-09-18T15:16:21Z

Pinging @elastic/infra-monitoring-ui (Team:Infra Monitoring UI)

tonyghiani · 2023-09-18T15:18:32Z

src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx

-  const { singleDocHref, contextViewHref, onOpenSingleDoc, onOpenContextView } = useNavigationProps(
-    { dataView, rowIndex: hit.raw._index, rowId: hit.raw._id, columns, filters, savedSearchId }
-  );
+  const { flyoutActions } = useFlyoutActions({


note: this hook is purely helpful to split the computation of the actions list on top of the customization framework and the navigation helpers to keep cleaner the whole flyout rendering content.

tonyghiani · 2023-09-18T15:19:46Z

src/plugins/discover/public/components/discover_grid_flyout/use_flyout_actions.tsx

+  href: string;
+}
+
+const staticViewDocumentItem = {


note: this entry represents the static "View" label at the beginning of the list, which will be prepended only in the presence of some enabled actions.

davismcphee

This looks good to me and worked well in testing, but it looks like Security simultaneously added the same customization point in #166780. I think we should all align on one implementation before merging either.

One thing I like about this implementation is that it allows for selectively disabling the links if needed, and it provides a good base for future enhancements like a getActionItems() option.

@kqualters-elastic What do you think about merging this PR first and adapting your PR to this implementation of the flyout customization point?

davismcphee · 2023-09-20T01:05:39Z

src/plugins/discover/public/customizations/customization_types/flyout_customization.ts

+  id: 'flyout';
+  actions: {
+    defaultActions?: FlyoutDefaultActions;
+    getActionItems?: () => FlyoutActionItem[];


Suggested change

getActionItems?: () => FlyoutActionItem[];

This would make sense, but it doesn't look like it's implemented or used currently, so I think we should drop this for now.

You're right, I totally forgot to apply the custom action items into the rendered list 🙈
Thanks for the heads up, instead of removing it I used it when computing the actions list, as we'll probably need to use it soon for our customizations and to keep it aligned with the options available for the top_nav customization (disabling default entries, add custom entries)

mohamedhamed-ahmed

Infra changes LGTM, nice work!

kqualters-elastic

independently did basically the same thing in #166780 so lgtm 😂 commenting so i get a notification when it's merged ha

kqualters-elastic · 2023-09-20T17:10:51Z

@davismcphee ya that sounds good to me, will update once this is merged

davismcphee

The latest changes look good to me, and it seems like we're all in agreement on merging this implementation. Would be great to have a unit test for getActionItems too, but approving now since otherwise it all LGTM to me.

src/plugins/discover/public/components/discover_grid_flyout/use_flyout_actions.tsx

kibana-ci · 2023-09-21T11:45:33Z

💚 Build Succeeded

Buildkite Build
Commit: c358cce

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`discover`	651	653	+2

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`discover`	72	75	+3

Async chunks

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

id	before	after	diff
`discover`	555.5KB	557.8KB	+2.3KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`discover`	15	17	+2

Page load bundle

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

id	before	after	diff
`logExplorer`	34.9KB	35.0KB	+119.0B

Unknown metric groups

API count

id	before	after	diff
`discover`	113	116	+3

ESLint disabled line counts

id	before	after	diff
`discover`	24	22	-2

Total ESLint disabled count

id	before	after	diff
`discover`	24	22	-2

History

💛 Build #160669 was flaky 58cf6e8
💚 Build #160229 succeeded c87558a
💚 Build #159867 succeeded 74a219a
💛 Build #159831 was flaky 156342d
💔 Build #159817 failed d7be4c0
💛 Build #159600 was flaky 6c5039c

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

…ension point (elastic#166638) ## 📓 Summary Closes elastic#165217 This work implements a new extension point in the Discover customization framework to allow customizing the flyout content. Although it enables customizing only the actions displayed on top, it could be enhanced for additional flyout customizations in the future. To keep it simple and familiar to other customizations, it relies on a similar API as the `top_nav` customization, allowing one to disable default actions and insert additional ones. ```ts /** * Hide flyout actions to prevent rendering hard-coded actions. */ customizations.set({ id: 'flyout', actions: { defaultActions: { viewSingleDocument: { disabled: true }, viewSurroundingDocument: { disabled: true }, }, }, }); ``` ## 🧪 Testing - Navigate to `/app/observability-log-explorer` and expand the flyout for any grid entry. The actions on top of the flyout should not be displayed, only the title and the pagination control should appear. - Navigate to `/app/discover` and expand the flyout for any grid entry. The actions for viewing a single documents or surrounding documents should be displayed. --------- Co-authored-by: Marco Antonio Ghiani <[email protected]>

Marco Antonio Ghiani added 3 commits September 18, 2023 17:02

feat(discover): add flyout extension point (actions)

7f2a180

feat(discover): hide flyout hard coded actions

0bc34c5

fix(discover): remove unused param

2df796f

tonyghiani requested review from a team as code owners September 18, 2023 15:16

tonyghiani added Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services release_note:skip Skip the PR/issue when compiling release notes labels Sep 18, 2023

Merge branch 'main' into 165217-log-explorer-hardcoded-links

6c5039c

tonyghiani commented Sep 18, 2023

View reviewed changes

tonyghiani added 3 commits September 19, 2023 09:32

Merge branch 'main' into 165217-log-explorer-hardcoded-links

d7be4c0

Merge branch 'main' into 165217-log-explorer-hardcoded-links

156342d

Merge branch 'main' into 165217-log-explorer-hardcoded-links

74a219a

davismcphee mentioned this pull request Sep 19, 2023

[Security Solution] [Timeline] [Discover] Disable discover app in serverless security, redirect users to timeline with discover tab #166780

Closed

3 tasks

davismcphee reviewed Sep 20, 2023

View reviewed changes

Marco Antonio Ghiani and others added 2 commits September 20, 2023 10:29

feat(discover): use getActionItems

da65e66

Merge branch 'main' into 165217-log-explorer-hardcoded-links

c87558a

mohamedhamed-ahmed approved these changes Sep 20, 2023

View reviewed changes

kqualters-elastic approved these changes Sep 20, 2023

View reviewed changes

davismcphee approved these changes Sep 20, 2023

View reviewed changes

src/plugins/discover/public/components/discover_grid_flyout/use_flyout_actions.tsx Show resolved Hide resolved

Marco Antonio Ghiani and others added 3 commits September 21, 2023 11:07

feat(discover): update tests for flyout customizaton

f1b8448

Merge branch 'main' into 165217-log-explorer-hardcoded-links

58cf6e8

Merge branch 'main' into 165217-log-explorer-hardcoded-links

c358cce

tonyghiani merged commit 0743a11 into elastic:main Sep 21, 2023

tonyghiani deleted the 165217-log-explorer-hardcoded-links branch September 21, 2023 11:50

kibanamachine added the v8.11.0 label Sep 21, 2023

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

achyutjhunjhunwala changed the title ~~[Log Explorer] Hide hard coded flyout actions using customization extension point~~ [Logs Explorer] Hide hard coded flyout actions using customization extension point Jan 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Logs Explorer] Hide hard coded flyout actions using customization extension point #166638

[Logs Explorer] Hide hard coded flyout actions using customization extension point #166638

tonyghiani commented Sep 18, 2023

apmmachine commented Sep 18, 2023

elasticmachine commented Sep 18, 2023

tonyghiani Sep 18, 2023

tonyghiani Sep 18, 2023

davismcphee left a comment

davismcphee Sep 20, 2023

tonyghiani Sep 20, 2023

mohamedhamed-ahmed left a comment

kqualters-elastic left a comment

kqualters-elastic commented Sep 20, 2023

davismcphee left a comment

kibana-ci commented Sep 21, 2023

API count

ESLint disabled line counts

Total ESLint disabled count

[Logs Explorer] Hide hard coded flyout actions using customization extension point #166638

[Logs Explorer] Hide hard coded flyout actions using customization extension point #166638

Conversation

tonyghiani commented Sep 18, 2023

📓 Summary

🧪 Testing

apmmachine commented Sep 18, 2023

🤖 GitHub comments

elasticmachine commented Sep 18, 2023

tonyghiani Sep 18, 2023

Choose a reason for hiding this comment

tonyghiani Sep 18, 2023

Choose a reason for hiding this comment

davismcphee left a comment

Choose a reason for hiding this comment

davismcphee Sep 20, 2023

Choose a reason for hiding this comment

tonyghiani Sep 20, 2023

Choose a reason for hiding this comment

mohamedhamed-ahmed left a comment

Choose a reason for hiding this comment

kqualters-elastic left a comment

Choose a reason for hiding this comment

kqualters-elastic commented Sep 20, 2023

davismcphee left a comment

Choose a reason for hiding this comment

kibana-ci commented Sep 21, 2023

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

ESLint disabled line counts

Total ESLint disabled count

History