Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Lens] Fix embeddable title and description for reporting and dashboard tooltip #78767

Merged
merged 10 commits into from
Oct 1, 2020

Conversation

dej611
Copy link
Contributor

@dej611 dej611 commented Sep 29, 2020

Summary

This PR aims to correctly propagate to the Lens embeddable both title and description information to the VisualizationContainer element, used for reporting. ( #70725 )
While in the area, it also addresses rendering differences with Visualize description tooltip behaviour in Dashboard of Lens embeddables. ( #69638 )

Reporting fixes:

Screenshot 2020-09-29 at 15 22 56

Screenshot 2020-09-29 at 15 23 09

Note: the metric visualization was using the metric title as embeddable title, while this PR separate the two things. An idea could be to use the metricTitle as fallback for the title, but I do not see much value in it as metricTitle is already shown.

Dashboard tooltip with description:

Screenshot 2020-09-29 at 14 56 57

Screenshot 2020-09-29 at 15 01 36

Screenshot 2020-09-29 at 15 01 42

Screenshot 2020-09-29 at 15 01 49

Screenshot 2020-09-29 at 15 01 55

Fixes: #70725 and #69638

Checklist

@dej611 dej611 added release_note:fix Team:Visualizations Visualization editors, elastic-charts and infrastructure v8.0.0 Feature:Lens v7.10.0 labels Sep 29, 2020
@dej611 dej611 self-assigned this Sep 29, 2020
@dej611 dej611 marked this pull request as ready for review September 29, 2020 16:00
@dej611 dej611 requested a review from a team September 29, 2020 16:00
@dej611 dej611 requested a review from a team as a code owner September 29, 2020 16:00
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app (Team:KibanaApp)

@botelastic botelastic bot added the Feature:Embedding Embedding content via iFrame label Sep 30, 2020
@dej611 dej611 added the Feature:Dashboard Dashboard related features label Sep 30, 2020
Copy link
Contributor

@flash1293 flash1293 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see why you used the approach in this PR by pushing description and title into the visualization state so it can be piped through the layers, but I'm not sure I like the approach because it magically extends the state which was intended to be private to the visualization.

I propose passing down these things to the toExpression function explicitly by extending the global types:

  toExpression: (
    state: T,
    datasourceLayers: Record<string, DatasourcePublicAPI>
  ) => Ast | string | null;

becomes

  toExpression: (
    state: T,
    datasourceLayers: Record<string, DatasourcePublicAPI>,
    title?: string,
    description?: string
  ) => Ast | string | null;

@@ -79,7 +81,7 @@ export async function persistedStateToExpression(

return buildExpression({
visualization,
visualizationState,
visualizationState: { ...(visualizationState as object), title, description },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I like this approach - it assumes a certain state structure we don't guarantee and it seems like it's breaking the current isolation between frame and individual visualizations to magically set state.

@dej611
Copy link
Contributor Author

dej611 commented Sep 30, 2020

Refactored the code. Some toExpression implementations extended the original interface with custom parameter: I tried to refactor that into an attributes parameter which can contain "flags" or options to use in each scenario.

Copy link
Contributor

@wylieconlon wylieconlon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and LGTM! I included some tests for Lens by Value and found that the titles were not rendered, so I want to loop in @ThomThomson to see if that's expected.

type VisualizeEmbeddable = any;

function getViewDescription(embeddable: IEmbeddable | VisualizeEmbeddable) {
if (embeddable.type === VISUALIZE_EMBEDDABLE_TYPE) {
if (embeddable.getVisualizationDescription) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this be embeddable.getDescription instead? Not all embeddables are visualizations

@tsullivan
Copy link
Member

LGTM, on Reporting integration changes.

Copy link
Contributor

@ThomThomson ThomThomson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@wylieconlon it seems like the placeholder titles are only missing because master hasn't been merged in since that was added.

Additionally, I agree with on the naming of the getDescription function, and have one comment below

@@ -109,11 +109,10 @@ function renderTooltip(description: string) {
);
}

const VISUALIZE_EMBEDDABLE_TYPE = 'visualization';
type VisualizeEmbeddable = any;
Copy link
Contributor

@ThomThomson ThomThomson Sep 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this wasn't added in this PR, but I'm not a huge fan of using any like this. Now that this description is added to both lens and visualize, I wonder if it would be worth adding an optional getDescription function to IEmbeddable.

If not, at least the any could be removed with something like:

type EmbeddableWithDescription = IEmbeddable & { getDescription: () => string };

function getViewDescription(embeddable: IEmbeddable) {
  return (embeddable as EmbeddableWithDescription).getDescription?.() || '';
}

@dej611 dej611 requested a review from flash1293 October 1, 2020 10:10
@dej611
Copy link
Contributor Author

dej611 commented Oct 1, 2020

@elasticmachine merge upstream

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

async chunks size

id before after diff
lens 995.6KB 998.6KB +3.0KB

page load bundle size

id before after diff
embeddable 290.6KB 290.5KB -73.0B
lens 139.6KB 139.9KB +288.0B
visualizations 272.6KB 272.6KB -26.0B
total +189.0B

History

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

Copy link
Contributor

@ThomThomson ThomThomson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for getting rid of that any. New changes LGTM!

@flash1293 flash1293 dismissed their stale review October 1, 2020 15:34

Wylie checked it out, it's fine

@dej611 dej611 merged commit 198c5d9 into elastic:master Oct 1, 2020
@dej611 dej611 deleted the fix/70725 branch October 1, 2020 16:02
dej611 added a commit to dej611/kibana that referenced this pull request Oct 1, 2020
…rd tooltip (elastic#78767)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
phillipb added a commit to phillipb/kibana that referenced this pull request Oct 1, 2020
…aly-detection-partition-field

* 'master' of github.com:elastic/kibana: (76 commits)
  Fix z-index of KQL Suggestions dropdown (elastic#79184)
  [babel] remove unused/unneeded babel plugins (elastic#79173)
  [Search] Fix timeout upgrade link (elastic#79045)
  Always Show Embeddable Panel Header in Edit Mode (elastic#79152)
  [Ingest]: add more test for transform index (elastic#79154)
  [ML] DF Analytics: Collapsable sections on results pages (elastic#76641)
  [Fleet] Fix agent policy change action migration (elastic#79046)
  [Ingest Manager] Match package spec `dataset`->`data_stream` and `config_templates`->`policy_templates` renaming (elastic#78699)
  Revert "[Metrics UI] Add ability to override datafeeds and job config for partition field (elastic#78875)"
  [ML] Update transform cloning to include description and new fields (elastic#78364)
  chore(NA): remove non existing plugin paths from case api integration tests (elastic#79127)
  [Ingest Manager] Ensure we trigger agent policy updated event when we bump revision. (elastic#78836)
  [Metrics UI] Display No Data context.values as [NO DATA] (elastic#78038)
  [Monitoring] Missing data alert (elastic#78208)
  [Lens] Fix embeddable title and description for reporting and dashboard tooltip (elastic#78767)
  [Lens] Consistent Drag and Drop styles (elastic#78674)
  [ML] Model management UI fixes and enhancements (elastic#79072)
  [Metrics UI] Add ability to override datafeeds and job config for partition field (elastic#78875)
  [Security Solution]Fix basepath used by endpoint telemetry tests (elastic#79027)
  update rum agent version which contains longtasks (elastic#79105)
  ...
dej611 added a commit that referenced this pull request Oct 2, 2020
…ashboard tooltip (#78767) (#79164)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Dashboard Dashboard related features Feature:Embedding Embedding content via iFrame Feature:Lens release_note:fix Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.10.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Lens] Reporting title missing on xy, pie and data table chart
7 participants