[Research] [Dashboard plugin De-Angular] Dashboard state manager

[abbyhu2000]

Research and document on how dashboard state manager keep app state and global state in sync; and how it interacts with the dashboard embeddable container.

[abbyhu2000]

URL at different scenarios:

1. table listing page: - [ ] http://localhost:5603/izg/app/dashboards#/list?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))
2. in view mode: - [ ] http://localhost:5603/izg/app/dashboards#/view/7adfa750-4c81-11e8-b3d7-01146121b73d?_g=(filters:!(),refreshInterval:(pause:!f,value:900000),time:(from:now-24h,to:now))&_a=(description:'Analyze%20mock%20flight%20data%20for%20OpenSearch-Air,%20Logstash%20Airways,%20OpenSearch%20Dashboards%20Airlines%20and%20BeatsWest',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,useMargins:!t),query:(language:kuery,query:''),timeRestore:!t,title:'%5BFlights%5D%20Global%20Flight%20Dashboard',viewMode:view)
3. in edit mode: - [ ] http://localhost:5603/izg/app/dashboards#/view/7adfa750-4c81-11e8-b3d7-01146121b73d?_g=(filters:!(),refreshInterval:(pause:!f,value:900000),time:(from:now-24h,to:now))&_a=(description:'Analyze%20mock%20flight%20data%20for%20OpenSearch-Air,%20Logstash%20Airways,%20OpenSearch%20Dashboards%20Airlines%20and%20BeatsWest',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,useMargins:!t),panels:!((embeddableConfig:(),gridData:(h:7,i:'1',w:32,x:0,y:0),id:aeb212e0-4c84-11e8-b3d7-01146121b73d,panelIndex:'1',type:visualization,version:'3.0.0'),(embeddableConfig:(vis:(colors:('Average%20Ticket%20Price':%230A50A1,'Flight%20Count':%2382B5D8),legendOpen:!f)),gridData:(h:12,i:'3',w:23,x:17,y:7),id:c8fc3d30-4c87-11e8-b3d7-01146121b73d,panelIndex:'3',type:visualization,version:'3.0.0'),(embeddableConfig:(),gridData:(h:15,i:'4',w:48,x:0,y:85),id:'571aaf70-4c88-11e8-b3d7-01146121b73d',panelIndex:'4',type:search,version:'3.0.0'),(embeddableConfig:(vis:(colors:(BeatsWest:%2365C5DB,'Logstash%20Airways':%23E5AC0E,'OpenSearch%20Dashboards%20Airlines':%23BA43A9,OpenSearch-Air:%23447EBC),legendOpen:!f)),gridData:(h:12,i:'5',w:17,x:0,y:7),id:'8f4d0c00-4c86-11e8-b3d7-01146121b73d',panelIndex:'5',type:visualization,version:'3.0.0'),(embeddableConfig:(vis:(colors:('Carrier%20Delay':%235195CE,'Late%20Aircraft%20Delay':%231F78C1,'NAS%20Delay':%2370DBED,'No%20Delay':%23BADFF4,'Security%20Delay':%23052B51,'Weather%20Delay':%236ED0E0))),gridData:(h:14,i:'6',w:24,x:24,y:33),id:f8290060-4c88-11e8-b3d7-01146121b73d,panelIndex:'6',type:visualization,version:'3.0.0'),(embeddableConfig:(),gridData:(h:14,i:'7',w:24,x:24,y:19),id:bcb63b50-4c89-11e8-b3d7-01146121b73d,panelIndex:'7',type:visualization,version:'3.0.0'),(embeddableConfig:(vis:(colors:(Count:%231F78C1),legendOpen:!f)),gridData:(h:12,i:'10',w:24,x:0,y:35),id:'9886b410-4c8b-11e8-b3d7-01146121b73d',panelIndex:'10',type:visualization,version:'3.0.0'),(embeddableConfig:(vis:(colors:(Count:%231F78C1),legendOpen:!f)),gridData:(h:8,i:'13',w:14,x:10,y:19),id:'76e3c090-4c8c-11e8-b3d7-01146121b73d',panelIndex:'13',type:visualization,version:'3.0.0'),(embeddableConfig:(vis:(colors:(Count:%231F78C1),legendOpen:!f)),gridData:(h:8,i:'14',w:14,x:10,y:27),id:'707665a0-4c8c-11e8-b3d7-01146121b73d',panelIndex:'14',type:visualization,version:'3.0.0'),(embeddableConfig:(),gridData:(h:8,i:'21',w:48,x:0,y:62),id:'293b5a30-4c8f-11e8-b3d7-01146121b73d',panelIndex:'21',type:visualization,version:'3.0.0'),(embeddableConfig:(),gridData:(h:7,i:'22',w:16,x:32,y:0),id:'129be430-4c93-11e8-b3d7-01146121b73d',panelIndex:'22',type:visualization,version:'3.0.0'),(embeddableConfig:(mapCenter:!(42.19556096274418,9.536742995308601e-7),mapZoom:1),gridData:(h:15,i:'23',w:48,x:0,y:70),id:'334084f0-52fd-11e8-a160-89cc2ad9e8e2',panelIndex:'23',type:visualization,version:'3.0.0'),(embeddableConfig:(vis:(defaultColors:('0%20-%2050':'rgb(247,251,255)','100%20-%20150':'rgb(107,174,214)','150%20-%20200':'rgb(33,113,181)','200%20-%20250':'rgb(8,48,107)','50%20-%20100':'rgb(198,219,239)'),legendOpen:!f)),gridData:(h:8,i:'25',w:10,x:0,y:19),id:f8283bf0-52fd-11e8-a160-89cc2ad9e8e2,panelIndex:'25',type:visualization,version:'3.0.0'),(embeddableConfig:(vis:(defaultColors:('0%20-%2050':'rgb(247,251,255)','100%20-%20150':'rgb(107,174,214)','150%20-%20200':'rgb(33,113,181)','200%20-%20250':'rgb(8,48,107)','50%20-%20100':'rgb(198,219,239)'),legendOpen:!f)),gridData:(h:8,i:'27',w:10,x:0,y:27),id:'08884800-52fe-11e8-a160-89cc2ad9e8e2',panelIndex:'27',type:visualization,version:'3.0.0'),(embeddableConfig:(vis:(defaultColors:('0%20-%2011':'rgb(247,251,255)','11%20-%2022':'rgb(208,225,242)','22%20-%2033':'rgb(148,196,223)','33%20-%2044':'rgb(74,152,201)','44%20-%2055':'rgb(23,100,171)'),legendOpen:!f)),gridData:(h:15,i:'28',w:24,x:0,y:47),id:e6944e50-52fe-11e8-a160-89cc2ad9e8e2,panelIndex:'28',type:visualization,version:'3.0.0'),(embeddableConfig:(),gridData:(h:6,i:'29',w:8,x:40,y:7),id:'01c413e0-5395-11e8-99bf-1ba7b1bdaa61',panelIndex:'29',type:visualization,version:'3.0.0'),(embeddableConfig:(),gridData:(h:6,i:'30',w:8,x:40,y:13),id:'2edf78b0-5395-11e8-99bf-1ba7b1bdaa61',panelIndex:'30',type:visualization,version:'3.0.0'),(embeddableConfig:(),gridData:(h:15,i:'31',w:24,x:24,y:47),id:ed78a660-53a0-11e8-acbd-0be0ad9d822b,panelIndex:'31',type:visualization,version:'3.0.0')),query:(language:kuery,query:''),timeRestore:!t,title:'%5BFlights%5D%20Global%20Flight%20Dashboard',viewMode:edit)
4. after save and back to view mode: - [ ] http://localhost:5603/izg/app/dashboards#/view/7adfa750-4c81-11e8-b3d7-01146121b73d?_g=(filters:!(),refreshInterval:(pause:!f,value:900000),time:(from:now-24h,to:now))&_a=(description:'Analyze%20mock%20flight%20data%20for%20OpenSearch-Air,%20Logstash%20Airways,%20OpenSearch%20Dashboards%20Airlines%20and%20BeatsWest',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,useMargins:!t),query:(language:kuery,query:''),timeRestore:!t,title:'%5BFlights%5D%20Global%20Flight%20Dashboard',viewMode:view)

[abbyhu2000]

[abbyhu2000]

When switching from view to edit, the state container will detect changes in viewMode, that will trigger the update to the URL storage. Then the URL is formed by callingget: () => toUrlState(stateContainer.get()) that include the panel state information.