[Ingest] Datastream list: add icons and dashboard links #65048

skh · 2020-05-04T09:51:41Z

Summary

Implements #64369

This adds the following features to the datastream list page:

The package icon in the "Integration" column:

The "Actions" column, and in it, links to dashboards in a nested context menu:

~~(see also "Known issues" below).~~ See updates below.

When there is no dashboard, the link is greyed out:

When there is only one dashboard, the link is clickable, but there is no nested context menu (I faked the data to create this screenshot, our packages have either more than one dashboard or none):

Known issues

This PR currently uses the dashboard ids for display, i.e. the filenames of the dashboards as they are in the package. These are not very user friendly. I will try to fix this tomorrow, but want to open the PR now for review so people can comment now and I can make amends before feature freeze. See update below.
The PackageIcon component sometimes shows the default icon instead of the correct package icon. I'll try to find out why before FF.

How to test this

Enrol an agent to send data for a package that has dashboards
Navigate to "Data Streams"
Verify that you see an icon in the "Integrations" column
Use the Actions menu to navigate to dashboards

Update

The dashboard links use the dashboard titles from within the saved objects now:

elasticmachine · 2020-05-04T09:51:43Z

Pinging @elastic/ingest-management (Team:Ingest Management)

* introduces a separate TableRowActionsNested component * moves TableRowActions back into agent config components

skh · 2020-05-04T17:36:52Z

...cations/ingest_manager/sections/data_stream/list_page/components/data_stream_row_actions.tsx

+    });
+    panels.push({
+      id: 1,
+      title: 'View dashboards',


This gave a type error from somewhere within EUI when I used a <FormattedMessage /> instead, so this is not translated. I'm sure there's a way to fix that, comments welcome.

maybe use i18n.translate instead of FormattedMessage? the prop might expect a string instead of react node

jen-huang · 2020-05-04T17:37:09Z

...ns/ingest_manager/public/applications/ingest_manager/components/table_row_actions_nested.tsx

+          <EuiButtonIcon
+            iconType="boxesHorizontal"
+            onClick={handleToggleMenu}
+            aria-label={i18n.translate('xpack.ingestManager.genericActionsMenuTextB', {


Suggested change

aria-label={i18n.translate('xpack.ingestManager.genericActionsMenuTextB', {

aria-label={i18n.translate('xpack.ingestManager.genericActionsMenuText', {

(small typo?)

jen-huang

Small comments but otherwise code LGTM! Testing locally now.

jen-huang · 2020-05-04T17:37:43Z

...er/public/applications/ingest_manager/sections/agent_config/components/table_row_actions.tsx

@@ -23,7 +23,7 @@ export const TableRowActions = React.memo<{ items: EuiContextMenuPanelProps['ite
          <EuiButtonIcon
            iconType="boxesHorizontal"
            onClick={handleToggleMenu}
-            aria-label={i18n.translate('xpack.ingestManager.agentConfigList.actionsMenuText', {
+            aria-label={i18n.translate('xpack.ingestManager.agentConfigList.ActionsMenuText', {


revert this change?

Oops. Thanks.

jen-huang · 2020-05-04T17:38:33Z

...cations/ingest_manager/sections/data_stream/list_page/components/data_stream_row_actions.tsx

+    });
+    panels.push({
+      id: 1,
+      title: 'View dashboards',


jen-huang · 2020-05-04T17:41:12Z

x-pack/plugins/translations/translations/ja-JP.json

@@ -8196,7 +8196,6 @@
    "xpack.ingestManager.agentConfigForm.systemMonitoringText": "システムメトリックを収集",
    "xpack.ingestManager.agentConfigForm.systemMonitoringTooltipText": "このオプションを有効にすると、システムメトリックと情報を収集するデータソースで構成をブートストラップできます。",
    "xpack.ingestManager.agentConfigList.actionsColumnTitle": "アクション",
-    "xpack.ingestManager.agentConfigList.actionsMenuText": "開く",


these two translation files may need to be reverted if you revert the change to the i18n key

jen-huang · 2020-05-04T18:04:49Z

x-pack/plugins/ingest_manager/server/routes/data_streams/handlers.ts

+        package: pkg,
+        package_version: packageMetadata[pkg] ? packageMetadata[pkg].version : '',


After testing locally, I realized we still display the package id instead of the nice name (system vs System). Now that we have the package saved objects here, what do you think about restructuring DataStream type to include package name?:

package: { id: string; name: string; version: string; }

Not a blocker for FF tho :)

Yes, we should do that for beta1. We'll need to add the title from the registry package information to our epm-packages saved object type, and I'm reluctant to do that right now, so this is #65230 now.

kibanamachine · 2020-05-05T11:53:59Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 745707b

History

💚 Build #45131 succeeded 95a0d71
💚 Build #44979 succeeded 39bfa331ae137712a5f64c78075231eb6ee89500
💔 Build #44953 failed d42bac3dbdd40bc1265d25627c6ec3adcd6a54ac
💚 Build #44918 succeeded ec3384699675d1b1e7c3788a8c5ffbc5a4e39e94
💚 Build #44896 succeeded 1a0703904c473aa030054197e86c8687994de302

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

* Read package saved objects in data stream handler. * Render package icon. * Make TableRowAction more generic * Add Actions column to data stream list * Disable dashboard link if no dashboards present. * Data stream list: link to first dashbord found * Update i18n strings * Add nested context menu to link to dashboards * introduces a separate TableRowActionsNested component * moves TableRowActions back into agent config components * Fix i18n label. * Re-add translated strings removed by mistake * Fix i18n issues * Add helper to read a saved object installed by EPM * Display titles from within dashboard saved objects

) * Read package saved objects in data stream handler. * Render package icon. * Make TableRowAction more generic * Add Actions column to data stream list * Disable dashboard link if no dashboards present. * Data stream list: link to first dashbord found * Update i18n strings * Add nested context menu to link to dashboards * introduces a separate TableRowActionsNested component * moves TableRowActions back into agent config components * Fix i18n label. * Re-add translated strings removed by mistake * Fix i18n issues * Add helper to read a saved object installed by EPM * Display titles from within dashboard saved objects

* master: (133 commits) Cleanup Typescript index pattern field editor / Expression functions for bucket agg (elastic#65254) Removes legacy infra plugin and moves saved objects registration to NP (elastic#64848) Added support for docLinks plugin in Connectors forms and missing save capabilities for modal dialog (elastic#64986) [SIEM] Removes prebuilt rules number dependency (elastic#65128) [Maps] add categorical palettes with 20 and 30 categories (elastic#64701) [CI] Slack alerts - Elasticsearch snapshot failures (elastic#64724) [Uptime] Console errors in case index missing (elastic#65115) [SIEM][CASE] Dynamic fields mapping based on connector (elastic#64412) [test/functional] Tsfy page objects (elastic#64887) [Maps] [Telemetry] Track geo_point and geo_shape index patterns separately (elastic#65195) [Maps] Add global fit to data (elastic#64702) Visualize: Reload on ui state change and fix ui state for tsvb (elastic#63699) [SIEM] [Cases] External service selection per case (elastic#64775) [Uptime] Set ML anomaly look-back to 2w (from 24h) / Add spinner (elastic#65055) [Metrics UI] Remove APM Hard Dependency (elastic#64952) [Ingest] Datastream list: add icons and dashboard links (elastic#65048) disable plugins. they could access ES via SO repository (elastic#65242) Feature fleet enrollment instructions (elastic#65176) [SIEM] Adds 'Configure connector' Cypress test (elastic#64807) [TSVB] Fix std deviation band mode (elastic#64413) ...

skh added v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v7.8.0 Team:Fleet Team label for Observability Data Collection Fleet team labels May 4, 2020

skh self-assigned this May 4, 2020

skh added 9 commits May 4, 2020 18:57

Read package saved objects in data stream handler.

c25a081

Render package icon.

14e78fd

Make TableRowAction more generic

5cb8189

Add Actions column to data stream list

31b8a72

Disable dashboard link if no dashboards present.

846d9cd

Data stream list: link to first dashbord found

5527755

Update i18n strings

2ce2b62

Add nested context menu to link to dashboards

d0c6abc

* introduces a separate TableRowActionsNested component * moves TableRowActions back into agent config components

Fix i18n label.

95a0d71

skh force-pushed the 64369-datastream-links-icons branch from 7e29bc6 to 95a0d71 Compare May 4, 2020 16:57

skh marked this pull request as ready for review May 4, 2020 16:58

skh requested a review from a team May 4, 2020 16:58

skh commented May 4, 2020

View reviewed changes

jen-huang reviewed May 4, 2020

View reviewed changes

jen-huang approved these changes May 4, 2020

View reviewed changes

jen-huang reviewed May 4, 2020

View reviewed changes

skh added 5 commits May 5, 2020 08:58

Merge branch 'master' into 64369-datastream-links-icons

1f5e7b9

Re-add translated strings removed by mistake

e39a28c

Fix i18n issues

c9251f2

Add helper to read a saved object installed by EPM

4fa4012

Display titles from within dashboard saved objects

745707b

ruflin added the Ingest Management:alpha1 Group issues for ingest management alpha1 label May 5, 2020

skh merged commit 4142f57 into elastic:master May 5, 2020

skh deleted the 64369-datastream-links-icons branch May 5, 2020 11:55

skh mentioned this pull request May 5, 2020

[7.x] [Ingest] Datastream list: add icons and dashboard links (#65048) #65251

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Ingest] Datastream list: add icons and dashboard links #65048

[Ingest] Datastream list: add icons and dashboard links #65048

skh commented May 4, 2020 •

edited

Loading

elasticmachine commented May 4, 2020

skh May 4, 2020

jen-huang May 4, 2020

jen-huang May 4, 2020

jen-huang left a comment

jen-huang May 4, 2020

skh May 5, 2020

jen-huang May 4, 2020

jen-huang May 4, 2020

jen-huang May 4, 2020

skh May 5, 2020

kibanamachine commented May 5, 2020

	aria-label={i18n.translate('xpack.ingestManager.genericActionsMenuTextB', {
	aria-label={i18n.translate('xpack.ingestManager.genericActionsMenuText', {

		package: pkg,
		package_version: packageMetadata[pkg] ? packageMetadata[pkg].version : '',

[Ingest] Datastream list: add icons and dashboard links #65048

[Ingest] Datastream list: add icons and dashboard links #65048

Conversation

skh commented May 4, 2020 • edited Loading

Summary

elasticmachine commented May 4, 2020

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

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

Choose a reason for hiding this comment

kibanamachine commented May 5, 2020

💚 Build Succeeded

History

skh commented May 4, 2020 •

edited

Loading