Skip to content

Commit

Permalink
[Embeddable] Fix embeddable panel loader (#173000)
Browse files Browse the repository at this point in the history
## Summary

Fix #172996

Basically, the embeddable output has three optional properties tracking
the state of the child: `loading`, `rendered`, `error`.

Child embeddables are currently using these relatively inconsistently,
but for the purposes of hiding/showing the loader we can assume that the
first time any embeddable sets `loading` to false, `rendered` to true,
or `error` to some error, the loader shouldn't be shown anymore.

## Testing
This is a dashboard that creates both a search error (runtime) and an
embeddable stack error (missing reference).

<img width="961" alt="Screenshot 2023-12-08 at 4 05 03 PM"
src="https://github.com/elastic/kibana/assets/315764/b25a525f-99e3-4de2-bfdd-f2f70d5abdf3">


<details>

```
{"attributes":{"fieldFormatMap":"{\"hour_of_day\":{}}","name":"Kibana Sample Data Logs","runtimeFieldMap":"{\"hour_of_day\":{\"type\":\"long\",\"script\":{\"source\":\"emit(doc['timestamp'].value.getHour());\"}}}","timeFieldName":"timestamp","title":"kibana_sample_data_logs"},"coreMigrationVersion":"8.8.0","created_at":"2023-12-08T17:30:55.069Z","id":"90943e30-9a47-11e8-b64d-95841ca0b247","managed":false,"references":[],"type":"index-pattern","typeMigrationVersion":"8.0.0","updated_at":"2023-12-08T17:30:55.069Z","version":"WzExMCwzXQ=="}
{"attributes":{"description":"","kibanaSavedObjectMeta":{"searchSourceJSON":"{\"query\":{\"query\":\"\",\"language\":\"kuery\"},\"filter\":[]}"},"optionsJSON":"{\"useMargins\":true,\"syncColors\":false,\"syncCursor\":true,\"syncTooltips\":false,\"hidePanelTitles\":false}","panelsJSON":"[{\"type\":\"lens\",\"gridData\":{\"x\":0,\"y\":0,\"w\":24,\"h\":15,\"i\":\"72110599-43d0-4e7e-8821-55e92670d181\"},\"panelIndex\":\"72110599-43d0-4e7e-8821-55e92670d181\",\"embeddableConfig\":{\"enhancements\":{}},\"panelRefName\":\"panel_72110599-43d0-4e7e-8821-55e92670d181\"},{\"type\":\"lens\",\"gridData\":{\"x\":24,\"y\":0,\"w\":24,\"h\":15,\"i\":\"bcd0181c-dbdf-4165-8011-b1211970232c\"},\"panelIndex\":\"bcd0181c-dbdf-4165-8011-b1211970232c\",\"embeddableConfig\":{\"attributes\":{\"title\":\"\",\"visualizationType\":\"lnsXY\",\"type\":\"lens\",\"references\":[{\"type\":\"index-pattern\",\"id\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"name\":\"indexpattern-datasource-layer-75249dd3-e213-44a7-ab24-e155c7bff23c\"},{\"type\":\"index-pattern\",\"name\":\"568ef039-09f6-47e4-adae-30f449514d4b\",\"id\":\"90943e30-9a47-11e8-b64d-95841ca0b247\"}],\"state\":{\"visualization\":{\"legend\":{\"isVisible\":true,\"position\":\"right\"},\"valueLabels\":\"hide\",\"fittingFunction\":\"None\",\"axisTitlesVisibilitySettings\":{\"x\":true,\"yLeft\":true,\"yRight\":true},\"tickLabelsVisibilitySettings\":{\"x\":true,\"yLeft\":true,\"yRight\":true},\"labelsOrientation\":{\"x\":0,\"yLeft\":0,\"yRight\":0},\"gridlinesVisibilitySettings\":{\"x\":true,\"yLeft\":true,\"yRight\":true},\"preferredSeriesType\":\"bar_stacked\",\"layers\":[{\"layerId\":\"75249dd3-e213-44a7-ab24-e155c7bff23c\",\"accessors\":[\"968f9f62-722e-4c79-9675-390632f76a23\"],\"position\":\"top\",\"seriesType\":\"bar_stacked\",\"showGridlines\":false,\"layerType\":\"data\",\"xAccessor\":\"03a7a16a-0761-4e19-a3ff-ea412facc4f8\"}]},\"query\":{\"query\":\"\",\"language\":\"lucene\"},\"filters\":[{\"meta\":{\"index\":\"568ef039-09f6-47e4-adae-30f449514d4b\",\"type\":\"custom\",\"disabled\":false,\"negate\":false,\"alias\":null,\"key\":\"query\",\"value\":\"{\\\"error_query\\\":{\\\"indices\\\":[{\\\"error_type\\\":\\\"exception\\\",\\\"message\\\":\\\"local shard failure message 123\\\",\\\"name\\\":\\\"kibana_sample_data_logs\\\"}]}}\"},\"$state\":{\"store\":\"appState\"},\"query\":{\"error_query\":{\"indices\":[{\"error_type\":\"exception\",\"message\":\"local shard failure message 123\",\"name\":\"kibana_sample_data_logs\"}]}}}],\"datasourceStates\":{\"formBased\":{\"layers\":{\"75249dd3-e213-44a7-ab24-e155c7bff23c\":{\"columns\":{\"03a7a16a-0761-4e19-a3ff-ea412facc4f8\":{\"label\":\"timestamp\",\"dataType\":\"date\",\"operationType\":\"date_histogram\",\"sourceField\":\"timestamp\",\"isBucketed\":true,\"scale\":\"interval\",\"params\":{\"interval\":\"auto\",\"includeEmptyRows\":true,\"dropPartials\":false}},\"968f9f62-722e-4c79-9675-390632f76a23\":{\"label\":\"Median of bytes\",\"dataType\":\"number\",\"operationType\":\"median\",\"sourceField\":\"bytes\",\"isBucketed\":false,\"scale\":\"ratio\",\"params\":{\"emptyAsNull\":true}}},\"columnOrder\":[\"03a7a16a-0761-4e19-a3ff-ea412facc4f8\",\"968f9f62-722e-4c79-9675-390632f76a23\"],\"incompleteColumns\":{},\"sampling\":1}}},\"indexpattern\":{\"layers\":{}},\"textBased\":{\"layers\":{}}},\"internalReferences\":[],\"adHocDataViews\":{}}},\"enhancements\":{}}}]","timeRestore":false,"title":"My problem dash","version":1},"coreMigrationVersion":"8.8.0","created_at":"2023-12-08T23:02:45.161Z","id":"14469a24-5299-44f8-974a-69e66c48e9f4","managed":false,"references":[{"id":"67a260e2-01d2-44ae-8c3c-448829aebe0c","name":"72110599-43d0-4e7e-8821-55e92670d181:panel_72110599-43d0-4e7e-8821-55e92670d181","type":"lens"},{"id":"90943e30-9a47-11e8-b64d-95841ca0b247","name":"bcd0181c-dbdf-4165-8011-b1211970232c:indexpattern-datasource-layer-75249dd3-e213-44a7-ab24-e155c7bff23c","type":"index-pattern"},{"id":"90943e30-9a47-11e8-b64d-95841ca0b247","name":"bcd0181c-dbdf-4165-8011-b1211970232c:568ef039-09f6-47e4-adae-30f449514d4b","type":"index-pattern"}],"type":"dashboard","typeMigrationVersion":"8.9.0","updated_at":"2023-12-08T23:02:45.161Z","version":"WzE0MSwzXQ=="}
{"excludedObjects":[],"excludedObjectsCount":0,"exportedCount":2,"missingRefCount":1,"missingReferences":[{"id":"67a260e2-01d2-44ae-8c3c-448829aebe0c","type":"lens"}]}
```
</details>
  • Loading branch information
drewdaemon authored Dec 11, 2023
1 parent 543a047 commit 644c61c
Showing 1 changed file with 2 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,9 @@ export const EmbeddablePanel = (panelProps: UnwrappedEmbeddablePanelProps) => {
* Select state from the embeddable
*/
const loading = useSelectFromEmbeddableOutput('loading', embeddable);
const rendered = useSelectFromEmbeddableOutput('rendered', embeddable);

if (loading === false && !initialLoadComplete) {
if ((loading === false || rendered === true || outputError) && !initialLoadComplete) {
setInitialLoadComplete(true);
}

Expand Down

0 comments on commit 644c61c

Please sign in to comment.