|
| 1 | +--- |
| 2 | +id: kibBuildingBlocks |
| 3 | +slug: /kibana-dev-docs/building-blocks |
| 4 | +title: Building blocks |
| 5 | +summary: Consider these building blocks when developing your plugin. |
| 6 | +date: 2021-02-24 |
| 7 | +tags: ['kibana','onboarding', 'dev', 'architecture'] |
| 8 | +--- |
| 9 | + |
| 10 | +When building a plugin in Kibana, there are a handful of architectural "building blocks" you can use. Some of these building blocks are "higher-level", |
| 11 | +and some are "lower-level". High-level building blocks come |
| 12 | +with many built-in capabilities, require less maintenance, and evolve new feature sets over time with little to no |
| 13 | + impact on consumers. When developers use high-level building blocks, new features are exposed consistently, across all of Kibana, at the same time. |
| 14 | + On the downside, they are not as flexible as our low-level building blocks. |
| 15 | + |
| 16 | + Low-level building blocks |
| 17 | + provide greater flexibility, but require more code to stitch them together into a meaningful UX. This results in higher maintenance cost for consumers and greater UI/UX variability |
| 18 | + across Kibana. |
| 19 | + |
| 20 | + For example, if an application is using <DocLink id="kibBuildingBlocks" section="index-patterns" text="Index Patterns"/> and |
| 21 | + <DocLink id="kibBuildingBlocks" section="search-source" text="Search Source"/>, |
| 22 | + their application would automatically support runtime fields. If the app is instead using the |
| 23 | + lower-level <DocLink id="kibBuildingBlocks" section="search-strategy" text="Search Strategy"/>, additional work would be required. |
| 24 | + |
| 25 | +Armed with this knowledge, you can choose what works best for your use case! |
| 26 | + |
| 27 | +# Application building blocks |
| 28 | + |
| 29 | +## UI components |
| 30 | + |
| 31 | +The following high-level building blocks can be rendered directly into your application UI. |
| 32 | + |
| 33 | +### Query Bar |
| 34 | + |
| 35 | +The <DocLink id="kibDataPlugin" text="Data plugin"/> provides a high-level Query Bar component that comes with support for Lucene, KQL, Saved Queries, |
| 36 | +and <DocLink id="kibBuildingBlocks" section="index-patterns" text="Index Patterns"/>. |
| 37 | + |
| 38 | +If you would like to expose the ability to search and filter on Elasticsearch data, the Query Bar provided by the |
| 39 | +<DocLink id="kibDataPlugin" text="Data plugin"/> |
| 40 | + is your go-to building block. |
| 41 | + |
| 42 | +**Github labels**: `Team:AppServices`, `Feature:QueryBar` |
| 43 | + |
| 44 | +### Dashboard Embeddable |
| 45 | + |
| 46 | +Add a Dashboard Embeddable directly inside your application to provide users with a set of visualizations and graphs that work seamlessly |
| 47 | +with the <DocLink id="kibBuildingBlocks" section="query-bar" text="Query Bar"/>. Every feature that is added to a registered |
| 48 | +<DocLink id="kibBuildingBlocks" section="embeddables" text="Embeddable"/> |
| 49 | +(Lens, Maps, Saved Searches and more) will be available automatically, as well as any |
| 50 | + <DocLink id="kibBuildingBlocks" section="ui-actions--triggers" text="UI Actions"/> that are |
| 51 | + added to the Embeddable context menu panel (for example, drilldowns, custom panel time ranges, and "share to" features). |
| 52 | + |
| 53 | +The Dashboard Embeddable is one of the highest-level UI components you can add to your application. |
| 54 | + |
| 55 | +**Github labels**: `Team:Presentation`, `Feature:Dashboard` |
| 56 | + |
| 57 | +### Lens Embeddable |
| 58 | + |
| 59 | +Check out the Lens Embeddable if you wish to show users visualizations based on Elasticsearch data without worrying about query building and chart rendering. It's built on top of the |
| 60 | + <DocLink id="kibBuildingBlocks" section="expressions" text="Expression language"/>, and integrates with |
| 61 | + <DocLink id="kibBuildingBlocks" section="index-patterns" text="Index Patterns"/> |
| 62 | + and <DocLink id="kibBuildingBlocks" section="ui-actions--triggers" text="UI Actions"/>. Using the same configuration, it's also possible to link to |
| 63 | + a prefilled Lens editor, allowing the user to drill deeper and explore their data. |
| 64 | + |
| 65 | +**Github labels**: `Team:KibanaApp`, `Feature:Lens` |
| 66 | + |
| 67 | +### Map Embeddable |
| 68 | + |
| 69 | +Check out the Map Embeddable if you wish to embed a map in your application. |
| 70 | + |
| 71 | +**Github labels**: `Team:Geo` |
| 72 | + |
| 73 | +## Searching |
| 74 | + |
| 75 | +### Index Patterns |
| 76 | + |
| 77 | +<DocLink id="kibDataPlugin" section="index-patterns-api" text="Index Patterns"/> are a high-level, space-aware abstraction layer that sits |
| 78 | +above Data Streams and Elasticsearch indices. Index Patterns provide users the |
| 79 | +ability to define and customize the data they wish to search and filter on, on a per-space basis. For example, users can specify a set of indices, |
| 80 | +and they can customize the field list with runtime fields, formatting options and custom labels. |
| 81 | + |
| 82 | +Index Patterns are used in many other high-level building blocks so we highly recommend you consider this building block for your search needs. |
| 83 | + |
| 84 | +**Github labels**: `Team:AppServices`, `Feature:Index Patterns` |
| 85 | + |
| 86 | +### Search Source |
| 87 | + |
| 88 | +<DocLink id="kibDataPlugin" section="searchsource" text="Search Source"/> is a high-level search service offered by the |
| 89 | +<DocLink id="kibDataPlugin" section="searchsource" text="Data plugin"/>. It requires an |
| 90 | +<DocLink id="kibBuildingBlocks" section="index-patterns" text="Index Pattern"/>, and abstracts away the raw ES DSL and search endpoint. Internally |
| 91 | +it uses the ES <DocLink id="kibBuildingBlocks" section="search-strategies" text="Search Strategy"/>. Use Search Source if you need to query data |
| 92 | +from Elasticsearch, and you aren't already using one of the high-level UI Components that handles this internally. |
| 93 | + |
| 94 | +**Github labels**: `Team:AppServices`, `Feature:Search` |
| 95 | + |
| 96 | +### Search Strategies |
| 97 | + |
| 98 | +Search Strategies are a low-level building block that abstracts away search details, like what REST endpoint is being called. The ES Search Strategy |
| 99 | +is a very lightweight abstraction layer that sits just above querying ES with the elasticsearch-js client. Other search stragies are offered for other |
| 100 | +languages, like EQL and SQL. These are very low-level building blocks so expect a lot of glue work to make these work with the higher-level abstractions. |
| 101 | + |
| 102 | +**Github labels**: `Team:AppServices`, `Feature:Search` |
| 103 | + |
| 104 | +### Expressions |
| 105 | + |
| 106 | +Expressions are a low-level building block that can be used if you have advanced search needs that requiring piping results into additional functionality, like |
| 107 | +joining and manipulating data. Lens and Canvas are built on top of Expressions. Most developers should be able to use |
| 108 | + <DocLink id="kibBuildingBlocks" section="lens-embeddable" text="Lens"/> or |
| 109 | + <DocLink id="kibBuildingBlocks" section="search-source" text="Search Source"/>, rather than need to access the Expression language directly. |
| 110 | + |
| 111 | +**Github labels**: `Team:AppServices`, `Feature:ExpressionLanguage` |
| 112 | + |
| 113 | +## Saved Objects |
| 114 | + |
| 115 | +<DocLink id="kibDevDocsSavedObjectsIntro" text="Saved Objects" /> should be used if you need to persist application-level information. If you were building a TODO |
| 116 | +application, each TODO item would be a `Saved Object`. Saved objects come pre-wired with support for bulk export/import, security features like space sharing and |
| 117 | +space isolation, and tags. |
| 118 | + |
| 119 | +**Github labels**: `Team:Core`, `Feature:Saved Objects` |
| 120 | + |
| 121 | +# Integration building blocks |
| 122 | + |
| 123 | +Use the following building blocks to create an inter-connected, cross-application, holistic Kibana experience. These building blocks allow you to expose functionality |
| 124 | + that promotes your own application into other applications, as well as help developers of other applications integrate into your app. |
| 125 | + |
| 126 | +## UI Actions & Triggers |
| 127 | + |
| 128 | +Integrate custom actions into other applications by registering UI Actions attached to existing triggers. For example, the Maps |
| 129 | +application could register a UI Action called "View in Maps" to appear any time the user clicked a geo field to filter on. |
| 130 | + |
| 131 | +**Github labels**: `Team:AppServices`, `Feature:UIActions` |
| 132 | + |
| 133 | +## Embeddables |
| 134 | + |
| 135 | +Embeddables help you integrate your application with the Dashboard application. Register your custom UI Widget as an Embeddable and users will |
| 136 | +be able to add it as a panel on a Dashboard. With a little extra work, it can also be exposed in Canvas workpads. |
| 137 | + |
| 138 | +**Github labels**: `Team:AppServices`, `Feature:Embeddables` |
0 commit comments