Skip to content

[Drilldowns] Dashboard broken back button if embeddable update input during initial rendering  #61596

Closed
#62415
Closed
[Drilldowns] Dashboard broken back button if embeddable update input during initial rendering #61596
#62415
Labels
Feature:DashboardDashboard related featuresFeature:DrilldownsEmbeddable panel DrilldownsbugFixes for quality problems that affect the customer experience
@Dosant

Description

@Dosant
Dosant
opened on Mar 27, 2020

While working on dashboard-to-dashboard drilldown a handful of issues were fixed to improve back button experience. #61230. But this particular one stands out.

Reproduce:

  1. Load logs sample data
  2. Open [Logs] Web Traffic dashboard
  3. Press back button

Expected behaviour: navigate back to listing page
Current behaviour (after all fixes from #61230 in master): nothing

If to look into history stack:

#/dashboard/edf84fe0-e1a0-11e7-b6d5-4dc382ef7f5b?_a=(description:'Analyze%20mock%20web%20traffic%20log%20data%20for%20Elastic!'s%20website',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,useMargins:!t),panels:!((embeddableConfig:(vis:(colors:('Avg.%20Bytes':%236ED0E0,'Unique%20Visitors':%230A437C),legendOpen:!f)),gridData:(h:13,i:'2',w:21,x:27,y:11),id:e1d0f010-9ee7-11e7-8711-e7a007dcef99,panelIndex:'2',type:visualization,version:'8.0.0'),(embeddableConfig:(isLayerTOCOpen:!f),gridData:(h:18,i:'4',w:24,x:0,y:49),id:de71f4f0-1902-11e9-919b-ffe5949a18d2,panelIndex:'4',type:map,version:'8.0.0'),(embeddableConfig:(vis:(defaultColors:('0%20-%2022':'rgb(247,251,255)','22%20-%2044':'rgb(208,225,242)','44%20-%2066':'rgb(148,196,223)','66%20-%2088':'rgb(74,152,201)','88%20-%20110':'rgb(23,100,171)'),legendOpen:!f)),gridData:(h:13,i:'7',w:24,x:0,y:36),id:'935afa20-e0cd-11e7-9d07-1398ccfcefa3',panelIndex:'7',type:visualization,version:'8.0.0'),(embeddableConfig:(mapCenter:!(36.8092847020594,-96.94335937500001),vis:(params:(sort:(columnIndex:!n,direction:!n)))),gridData:(h:12,i:'9',w:21,x:27,y:24),id:'4eb6e500-e1c7-11e7-b6d5-4dc382ef7f5b',panelIndex:'9',type:visualization,version:'8.0.0'),(embeddableConfig:(title:'',vis:(colors:('0%20-%20500':%23BF1B00,'1000%20-%201500':%237EB26D,'500%20-%201000':%23F2C96D),defaultColors:('0%20-%20500':'rgb(165,0,38)','1000%20-%201500':'rgb(0,104,55)','500%20-%201000':'rgb(255,255,190)'),legendOpen:!f)),gridData:(h:11,i:'11',w:9,x:10,y:0),id:'69a34b00-9ee8-11e7-8711-e7a007dcef99',panelIndex:'11',type:visualization,version:'8.0.0'),(embeddableConfig:(),gridData:(h:12,i:'13',w:27,x:0,y:24),id:'42b997f0-0c26-11e8-b0ec-3bb475f6b6ff',panelIndex:'13',type:visualization,version:'8.0.0'),(embeddableConfig:(),gridData:(h:31,i:'14',w:24,x:24,y:36),id:'7cbd2350-2223-11e8-b802-5bcf64c2cfb4',panelIndex:'14',type:visualization,version:'8.0.0'),(embeddableConfig:(),gridData:(h:13,i:'15',w:27,x:0,y:11),id:'314c6f60-2224-11e8-b802-5bcf64c2cfb4',panelIndex:'15',type:visualization,version:'8.0.0'),(embeddableConfig:(title:''),gridData:(h:11,i:'16',w:15,x:19,y:0),id:'24a3e970-4257-11e8-b3aa-73fdaf54bfc9',panelIndex:'16',type:visualization,version:'8.0.0'),(embeddableConfig:(vis:(legendOpen:!f)),gridData:(h:11,i:'17',w:14,x:34,y:0),id:'14e2e710-4258-11e8-b3aa-73fdaf54bfc9',panelIndex:'17',type:visualization,version:'8.0.0'),(embeddableConfig:(title:''),gridData:(h:11,i:'18',w:10,x:0,y:0),id:'47f2c680-a6e3-11e8-94b4-c30c0228351b',panelIndex:'18',type:visualization,version:'8.0.0')),query:(language:kuery,query:''),timeRestore:!t,title:'%5BLogs%5D%20Web%20Traffic',viewMode:view)&_g=(filters:!(),refreshInterval:(pause:!f,value:900000),time:(from:now-7d,to:now))
#/dashboard/edf84fe0-e1a0-11e7-b6d5-4dc382ef7f5b?_a=(description:'Analyze%20mock%20web%20traffic%20log%20data%20for%20Elastic!'s%20website',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,useMargins:!t),panels:!((embeddableConfig:(vis:(colors:('Avg.%20Bytes':%236ED0E0,'Unique%20Visitors':%230A437C),legendOpen:!f)),gridData:(h:13,i:'2',w:21,x:27,y:11),id:e1d0f010-9ee7-11e7-8711-e7a007dcef99,panelIndex:'2',type:visualization,version:'8.0.0'),(embeddableConfig:(isLayerTOCOpen:!f,mapCenter:(lat:42.16337,lon:-88.92107,zoom:3.64)),gridData:(h:18,i:'4',w:24,x:0,y:49),id:de71f4f0-1902-11e9-919b-ffe5949a18d2,panelIndex:'4',type:map,version:'8.0.0'),(embeddableConfig:(vis:(defaultColors:('0%20-%2022':'rgb(247,251,255)','22%20-%2044':'rgb(208,225,242)','44%20-%2066':'rgb(148,196,223)','66%20-%2088':'rgb(74,152,201)','88%20-%20110':'rgb(23,100,171)'),legendOpen:!f)),gridData:(h:13,i:'7',w:24,x:0,y:36),id:'935afa20-e0cd-11e7-9d07-1398ccfcefa3',panelIndex:'7',type:visualization,version:'8.0.0'),(embeddableConfig:(mapCenter:!(36.8092847020594,-96.94335937500001),vis:(params:(sort:(columnIndex:!n,direction:!n)))),gridData:(h:12,i:'9',w:21,x:27,y:24),id:'4eb6e500-e1c7-11e7-b6d5-4dc382ef7f5b',panelIndex:'9',type:visualization,version:'8.0.0'),(embeddableConfig:(title:'',vis:(colors:('0%20-%20500':%23BF1B00,'1000%20-%201500':%237EB26D,'500%20-%201000':%23F2C96D),defaultColors:('0%20-%20500':'rgb(165,0,38)','1000%20-%201500':'rgb(0,104,55)','500%20-%201000':'rgb(255,255,190)'),legendOpen:!f)),gridData:(h:11,i:'11',w:9,x:10,y:0),id:'69a34b00-9ee8-11e7-8711-e7a007dcef99',panelIndex:'11',type:visualization,version:'8.0.0'),(embeddableConfig:(),gridData:(h:12,i:'13',w:27,x:0,y:24),id:'42b997f0-0c26-11e8-b0ec-3bb475f6b6ff',panelIndex:'13',type:visualization,version:'8.0.0'),(embeddableConfig:(),gridData:(h:31,i:'14',w:24,x:24,y:36),id:'7cbd2350-2223-11e8-b802-5bcf64c2cfb4',panelIndex:'14',type:visualization,version:'8.0.0'),(embeddableConfig:(),gridData:(h:13,i:'15',w:27,x:0,y:11),id:'314c6f60-2224-11e8-b802-5bcf64c2cfb4',panelIndex:'15',type:visualization,version:'8.0.0'),(embeddableConfig:(title:''),gridData:(h:11,i:'16',w:15,x:19,y:0),id:'24a3e970-4257-11e8-b3aa-73fdaf54bfc9',panelIndex:'16',type:visualization,version:'8.0.0'),(embeddableConfig:(vis:(legendOpen:!f)),gridData:(h:11,i:'17',w:14,x:34,y:0),id:'14e2e710-4258-11e8-b3aa-73fdaf54bfc9',panelIndex:'17',type:visualization,version:'8.0.0'),(embeddableConfig:(title:''),gridData:(h:11,i:'18',w:10,x:0,y:0),id:'47f2c680-a6e3-11e8-94b4-c30c0228351b',panelIndex:'18',type:visualization,version:'8.0.0')),query:(language:kuery,query:''),timeRestore:!t,title:'%5BLogs%5D%20Web%20Traffic',viewMode:view)&_g=(filters:!(),refreshInterval:(pause:!f,value:900000),time:(from:now-7d,to:now))
#/dashboard/edf84fe0-e1a0-11e7-b6d5-4dc382ef7f5b?_a=(description:'Analyze%20mock%20web%20traffic%20log%20data%20for%20Elastic!'s%20website',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,useMargins:!t),panels:!((embeddableConfig:(vis:(colors:('Avg.%20Bytes':%236ED0E0,'Unique%20Visitors':%230A437C),legendOpen:!f)),gridData:(h:13,i:'2',w:21,x:27,y:11),id:e1d0f010-9ee7-11e7-8711-e7a007dcef99,panelIndex:'2',type:visualization,version:'8.0.0'),(embeddableConfig:(hiddenLayers:!(),isLayerTOCOpen:!f,mapCenter:(lat:42.16337,lon:-88.92107,zoom:3.64),openTOCDetails:!()),gridData:(h:18,i:'4',w:24,x:0,y:49),id:de71f4f0-1902-11e9-919b-ffe5949a18d2,panelIndex:'4',type:map,version:'8.0.0'),(embeddableConfig:(vis:(defaultColors:('0%20-%2022':'rgb(247,251,255)','22%20-%2044':'rgb(208,225,242)','44%20-%2066':'rgb(148,196,223)','66%20-%2088':'rgb(74,152,201)','88%20-%20110':'rgb(23,100,171)'),legendOpen:!f)),gridData:(h:13,i:'7',w:24,x:0,y:36),id:'935afa20-e0cd-11e7-9d07-1398ccfcefa3',panelIndex:'7',type:visualization,version:'8.0.0'),(embeddableConfig:(mapCenter:!(36.8092847020594,-96.94335937500001),vis:(params:(sort:(columnIndex:!n,direction:!n)))),gridData:(h:12,i:'9',w:21,x:27,y:24),id:'4eb6e500-e1c7-11e7-b6d5-4dc382ef7f5b',panelIndex:'9',type:visualization,version:'8.0.0'),(embeddableConfig:(title:'',vis:(colors:('0%20-%20500':%23BF1B00,'1000%20-%201500':%237EB26D,'500%20-%201000':%23F2C96D),defaultColors:('0%20-%20500':'rgb(165,0,38)','1000%20-%201500':'rgb(0,104,55)','500%20-%201000':'rgb(255,255,190)'),legendOpen:!f)),gridData:(h:11,i:'11',w:9,x:10,y:0),id:'69a34b00-9ee8-11e7-8711-e7a007dcef99',panelIndex:'11',type:visualization,version:'8.0.0'),(embeddableConfig:(),gridData:(h:12,i:'13',w:27,x:0,y:24),id:'42b997f0-0c26-11e8-b0ec-3bb475f6b6ff',panelIndex:'13',type:visualization,version:'8.0.0'),(embeddableConfig:(),gridData:(h:31,i:'14',w:24,x:24,y:36),id:'7cbd2350-2223-11e8-b802-5bcf64c2cfb4',panelIndex:'14',type:visualization,version:'8.0.0'),(embeddableConfig:(),gridData:(h:13,i:'15',w:27,x:0,y:11),id:'314c6f60-2224-11e8-b802-5bcf64c2cfb4',panelIndex:'15',type:visualization,version:'8.0.0'),(embeddableConfig:(title:''),gridData:(h:11,i:'16',w:15,x:19,y:0),id:'24a3e970-4257-11e8-b3aa-73fdaf54bfc9',panelIndex:'16',type:visualization,version:'8.0.0'),(embeddableConfig:(vis:(legendOpen:!f)),gridData:(h:11,i:'17',w:14,x:34,y:0),id:'14e2e710-4258-11e8-b3aa-73fdaf54bfc9',panelIndex:'17',type:visualization,version:'8.0.0'),(embeddableConfig:(title:''),gridData:(h:11,i:'18',w:10,x:0,y:0),id:'47f2c680-a6e3-11e8-94b4-c30c0228351b',panelIndex:'18',type:visualization,version:'8.0.0')),query:(language:kuery,query:''),timeRestore:!t,title:'%5BLogs%5D%20Web%20Traffic',viewMode:view)&_g=(filters:!(),refreshInterval:(pause:!f,value:900000),time:(from:now-7d,to:now))

Redundant changes are triggered by maps embeddable:

(embeddableConfig:(isLayerTOCOpen:!f)
(embeddableConfig:(isLayerTOCOpen:!f,mapCenter:(lat:42.16337,lon:-88.92107,zoom:3.64))
(embeddableConfig:(hiddenLayers:!(),isLayerTOCOpen:!f,mapCenter:(lat:42.16337,lon:-88.92107,zoom:3.64)

I assume what is happening, is when map embeddable from older kibana version is opened, maps are doing state migrations on a fly and update input during initial rendering.

https://github.com/elastic/kibana/blob/master/x-pack/legacy/plugins/maps/public/embeddable/map_embeddable.tsx#L190

I am not sure, if there are other cases like this except for maps. Didn't find in dashboards from sample data

Please Note:

  1. If to Save Dashboard now and return to it - history button works correctly, because we saved last state which map embeddable expects!

  2. This maps behaviour causing other issue: as it updates input multiple time, it will retrigger redundant rerenders for other panels

This is not only migration edge case

  1. Create a new map
  2. Go to dashboard, create new dashboard
  3. Add this map do dashboard
  4. Press back button

The same problem is happening, app adds new fields to embeddable state during it's initial rendering.

Possible solutions:

  1. Fix in maps. ? Is this possible?
    2. Come up with some magic "all settled" on parent embeddable? start syncing state in dashboard when it emitted? - won't work because issue is actually happening not only during initial rendering
    3. Magic setTimeout in dashboard before push state into url? - won't work because issue is actually happening not only during initial rendering
  2. Consider not storing all the state in the URL?

cc @stacey-gammon @ppisljar @streamich

p.s.: maps are ignoring most of state changes which are coming from embeddable input, so history button almost not working for user actions done in maps. but this seems like separate bug

Metadata

Metadata

Assignees

No one assigned

    Labels

    Feature:DashboardDashboard related featuresFeature:DrilldownsEmbeddable panel DrilldownsbugFixes for quality problems that affect the customer experience

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions