Kibana：如何嵌入 Kibana 仪表板

作者：Carly Richmond

像我这样的前端工程师常常提出的要求是将 Kibana 等来历的现有仪表板嵌入到 JavaScript Web 应用程序中。 这是我必须多次执行的使命，由于咱们期望快速布置用户生成的视图或答应用户操控给定的视图。 从咱们从精彩的开发者社区收到的常规问题来看，我并不孑立。

Kibana 仪表板等数据可视化东西甚至答应最不明白规划或技能倾向的用户在 Elasticsearch 数据和原型视图之上快速轻松地创立视图。 事实上，这意味着将仪表板嵌入到现有的 Web 应用程序中是最困难的部分 – 特别是假如咱们想要集成自界说 Web 控件来驱动数据视图，从而为用户供给一致的款式和体验。

在这里，我将逐渐介绍怎么运用 HTML iframe 在 Web 应用程序中嵌入 Kibana 仪表板的代码示例。 我还将介绍这些视图的 Kibana 身份验证以及怎么运用 JavaScript 将自界说控件连接到嵌入视图。

什么是 iframe？

本文中介绍的两个示例都运用 iframe 来嵌入咱们的仪表板。 iframe（由 HTML 标记表明）答应你在当时文档中嵌入另一个网页。 具体来说，咱们将从 Sample flight data 样本数据集中加载的 Global Flight Dashboard 包括到咱们页面中。

在应用程序中嵌入其他源时，保证这是用户应该有权拜访的可信数据源非常重要。 咱们必须利用恰当的内容安全策略、运用沙箱特点的约束以及约束嵌入内容的操作的权利。 经过不在 iframe 中指定沙箱特点，咱们默许包括全部约束。

在应用程序中包括第三方内容时，功用也是需求反映出来的。 由于 iframe 比其他资源消耗更多的带宽，因而在单个应用程序中运用许多 iframe 可能会降低整个应用程序的速度。 对于那些期望在应用程序中嵌入多个 Kibana 仪表板的人，请测验尽可能约束包括的数量并进行应用程序功用测验。 尽管增加组件和仪表板很简单，但作为开发人员，咱们需求保证供给用户所需的数据，而不是他们想要的每个闪亮的控件。 因而，在仪表板和可视化之间进行挑选时，请与顾客合作以确定他们真正需求什么。

HTML iframe 的基本嵌入

如本基本示例所述，能够经过 “Share” 选项从 Kibana 轻松生成用于在 Web 应用程序中包括 Global Flight Dashboard 的代码：

将生成增加你挑选的相关选项以及当时过滤器的 iframe 代码段，供你粘贴到 HTML 中：

<iframe src="https://my-deployment:9243/app/dashboards#/view/7adfa750-4c81-11e8-b3d7-01146121b73d?embed=true&_g=(refreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-1y%2Fd%2Cto%3Anow))&show-top-menu=true&show-query-input=true&show-time-filter=true" height="600" width="800"></iframe>

生成的代码片段利用像素丈量来丈量 iframe 的宽度和高度。 保证 iframe 巨细反映其间的内容一般是一个应战。 最佳实践是考虑运用视口巨细调整特点 vw 和 vh 相对于视点调整 iframe 的巨细，或
media queries 作为现代响应式规划的一部分来处理多个不同设备巨细的媒体查询。

考虑到可用设置的数量，弄清楚你需求什么可能会令人困惑。 这些选项答应你装备仪表板的状况以及 iframe 中可见的控件。

要生成的 URL 类型能够是两个不同选项之一：

• Snapshot：对仪表板的完整当时状况进行编码的 URL，这意味着对仪表板的更改不会出现在嵌入式版本中。
• Saved object：运用引用仪表板已保存对象 ID 的 URL，这意味着生成 URL 后对仪表板所做的任何更改都将对 JavaScript 应用程序的用户可见。

依据作者的经历，这些仪表板可能会发生变化。 因而，“Saved object” 选项将是最合适的嵌入选项，以保证生成 URL 后所做的仪表板更改可见。

Include 设置表明要包括在嵌入式仪表板顶部的附加控件：

1. Top menu：包括仪表板功用（例如编辑和全屏）的设置，经过在 Kibana URL 中包括 show-top-menu=true 进行操控。
2. Query：KQL 查询栏答应你过滤仪表板中可见的数据，由 show-query-input=true URL 参数表明。
3. Time filter：用于挑选仪表板中数据的日期规模的日期挑选器，经过在 URL 中运用 show-time-filter=true 启用。
4. Filter bar：躲藏设置以增加数据过滤，需求将 hide-filter-bar URL 参数设置为 true。

假如不运用公共 URL，系统将提示咱们登录以拜访仪表板。 此刻，体验并不是无缝的，但具有登录凭证的人能够拜访仪表板。

主动登录

为了保证仪表板主动显示，身份验证需求与 Kibana 中的仪表板集成，以消除用户在 JavaScript 应用程序和仪表板中输入凭证的需求。 这供给了无缝的体验。 这能够经过以下两种方式之一完成：

1. 启用匿名身份验证，为无法提取身份验证令牌的任何传入请求供给一组默许凭证和权利（在免费套餐中供给）。
2. 增加对 SAML 单点登录，或许 SSO 供给商的支撑，以将未经身份验证的用户重定向到 SSO 门户，并将经过身份验证的用户直接传递到仪表板。 这是企业及以上许可的功用。

在这里咱们将介绍匿名选项。 首要，咱们需求在 kibana.yml 中增加一个匿名身份验证供给者anonymous1：

1.  xpack.security.authc.providers:
2.    anonymous.anonymous1:
3.      order: 0
4.      credentials:
5.        username: "my_anonymous_user"
6.        password: "password"

还必须从头生成 iframe URL 以指定 auth_provider_hint 参数，以将供给程序 anonymous1 的装备凭证链接到嵌入内容：

<iframe src="https://my-deployment-9f9945.kb.eu-west-2.aws.cloud.es.io:9243/app/dashboards?auth_provider_hint=anonymous1#/view/7adfa750-4c81-11e8-b3d7-01146121b73d?embed=true&_g=(refreshInterval%3A(pause%3A!f%2Cvalue%3A120000)%2Ctime%3A(from%3Anow-1y%2Cto%3Anow))&show-time-filter=true" height="600" width="800"></iframe>

假如未包括 auth_provider_hint=anonymous1 参数，将导致无法以访客身份持续拜访仪表板。 相同，假如没有运用正确的用户名和暗码在 Kibana 中注册相应的用户人物，也会导致身份验证过错：

要更正此问题，请保证你注册的用户运用与 kibana.yml 中的供给程序装备相匹配的正确暗码。 鉴于将向未经身份验证的用户颁发拜访权限，主张你将此帐户的权限约束为所需的最低权限。

此刻，你可能以为全部都已准备就绪。 可是，当你连接到仪表板时，你会看到一些古怪的重复改写事情发生：

此问题是由于浏览器阻止 Kibana 仪表板导致的。 现代网络浏览器强制执行同源策略来约束嵌入内容的内容。 假如两个 URL 具有相同的协议、端口和主机，则它们同享相同的来历。 简而言之，除非内容策略答应，不然默许情况下将阻止任何来自不同来历的内容。

要答应浏览器在启用安全功用的情况下将会话 cookie 传输到 ELK 堆栈中的 Kibana 服务器（这是 Elastic v8.x 的默许设置），你必须在 kibana.yml 中装备 SameSiteCookies 选项：

xpack.security.sameSiteCookies: "None"

经过最后一步，咱们能够看到嵌入在 JavaScript 应用程序中的 Kibana 仪表板：

运用自界说控件

你可能已经注意到，此仪表板运用控件来过滤数据。 让用户查询数据并缩小挑选规模以找到风趣的见解非常重要。

在某些情况下，运用仪表板内的控件可能不是正确的决定。 你可能期望在现有应用程序中运用自己的自界说控件来实现规划凝聚力。 或许，将仪表板与你想要过滤的其他数据源和可视化放在一同，以构成有凝聚力的体验。

在此高级示例中，咱们展示了怎么将日期规模设置从日期挑选器和下拉挑选传递到仪表板以强制更新仪表板：

运用自界说控件意味着咱们需求了解仪表板 URL 的组成。 让咱们评论以下示例：

https://elastic-deployment-9f9945.kb.eu-west-2.aws.cloud.es.io:9243/app/dashboards?auth_provider_hint=anonymous1#/view/7adfa750-4c81-11e8-b3d7-01146121b73d?embed=true&_g=(filters:!(),refreshInterval:(pause:!f,value:0),time:(from:'${selectedStartDate}',to:'${selectedEndDate}'))&_a=(query:(language:kuery,query:'${carrierQuery}'))&hide-time-filter=true

除了基本示例中评论的参数之外，咱们还需求操作过滤器。 正如社区之前评论的，Kibana 中有两个等级的过滤器：

• _g 参数表明的大局状况表明在各个 Kibana 应用程序之间移动的状况。 一个重要的比如是固定过滤器，包括选定的开端和完毕日期。
• 状况仅限于单个应用程序，例如当时仪表板。 这由 _a URL 参数表明。

要从任何日期挑选器传递日期规模，当新的日期规模应用于控件时，必须运用所选的开端和完毕日期更新 URL 的 iframe。 最初，咱们将这些值设置为上一年的相对规模。 以 easypick 为例，在运用新 URL 更新 iframe 的 src 特点之前，在设置时注册的 select 事情中捕获新日期，并将其转换为所需的 ISO 日期格局。

1.  let selectedStartDate = 'now-1y';
2.  let selectedEndDate = 'now';
4.  const picker = new easepick.create({
5.      element: '#datepicker',
6.      css: [
7.          'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css'
8.      ],
9.      zIndex: 10,
10.      firstDay: 0,
11.      autoApply: false,
12.      format: 'MMM DD, YYYY @ HH:MM:00',
13.      plugins: [
14.          'RangePlugin',
15.          'TimePlugin'
16.      ],
17.      setup(picker) {
18.          picker.on('select', (e) => {
19.              const dateFormat = 'YYYY-MM-DDTHH:MM:00.000Z';
20.              selectedStartDate =  picker.getStartDate().format(dateFormat);
21.              selectedEndDate =  picker.getEndDate().format(dateFormat);
23.              dashboardUri=getDashboardUri();
24.              iframe.setAttribute('src', dashboardUri);
25.          });
26.       }
27.  });

就 URL 本身而言，大局过滤器参数 _g 随后会运用所选规模进行更新，如 getDashboardUri() 辅佐办法中所示：

1.  function getDashboardUri() {
2.      return `https://my-deployment-9f9945.kb.eu-west-2.aws.cloud.es.io:9243/app/dashboards?auth_provider_hint=anonymous1#/view/7adfa750-4c81-11e8-b3d7-01146121b73d?embed=true&_g=(filters:!(),refreshInterval:(pause:!f,value:0),time:(from:'${selectedStartDate}',to:'${selectedEndDate}'))&hide-time-filter=true`;
3.  }

对于你期望在控件（例如下拉列表）中过滤的任何数据字段，咱们需求运用 _a 参数中的 query 选项传递这些值。 以下面的 HTML select 控件为例：

1.  <div class="carrier-select-container">
2.    <label for="carrier-select">Carrier</label>
3.    <select >
4.      <option value="ES-Air">ES-Air</option>
5.      <option value="JetBeats">JetBeats</option>
6.      <option value="Kibana Airlines">Kibana Airlines</option>
7.      <option value="Logstash Airways">Logstash Airways</option>
8.    </select>
9.  </div>

当从连接到 onchange 事情的 updateWithCarrier() 办法更改时，能够提取选定的值。 该事情是从事情处理程序中的挑选控件中拉出的：

1.  function updateWithCarrier() {
2.      const carrierSelect = document.getElementById('carrier-select');
3.      selectedCarrier = carrierSelect.value || '';
5.      dashboardUri=getDashboardUri();
6.      iframe.setAttribute('src', dashboardUri);
7.  }

请注意，咱们仍在运用 getDashboardUri() 协助程序，它需求更新以生成 KQL 查询，以经过应用程序过滤器中的查询选项传递到仪表板 URL：

1.  function getDashboardUri() {
2.    const carrierQuery = rison.encode_object({Carrier : encodeURIComponent(selectedCarrier)});
3.    return `https://my-deployment-9f9945.kb.eu-west-2.aws.cloud.es.io:9243/app/dashboards?auth_provider_hint=anonymous1#/view/7adfa750-4c81-11e8-b3d7-01146121b73d?embed=true&_g=(filters:!(),refreshInterval:(pause:!f,value:0),time:(from:'${selectedStartDate}',to:'${selectedEndDate}'))&_a=(query:(language:kuery,query:'${carrierQuery}'))&hide-time-filter=true`;
4.  }

Kibana 运用 Rison 和 URI 编码，需求在包括之前应用于查询。 这在上面的 CarrierQuery 界说中注意到，咱们运用 rison.js 并运用一般的 encodeURIComponent 办法转义所选值。

连接后，你将看到仪表板每次都会改写新的挑选。 请留意提示 Rison 格局过错的过错，例如咱们论坛上报告的此过错，该过错可能很难调试。

请注意，URL 一直会发生变化，因而你挑选嵌入的任何第三方东西的新版本可能会导致你的功用遭到损坏。 保证查看每个 Kibana 版本的严重更改，并细心对应用程序进行回归测验。

做更多 Kibana 仪表板

在这里，咱们深入评论了嵌入式 Kibana 仪表板的世界。 咱们介绍了一个运用单个 HTML iframe 的简单示例，以及一个运用咱们自己的 JavaScript 组件将参数传递到仪表板的复杂示例。 全部代码都能够在此 GitHub 存储库中找到，并且能够轻松调整以运用你最喜欢的 Web 技能、JavaScript 结构或与 TypeScript 一同运用。

请在咱们的社区论坛上共享你在嵌入仪表板时遇到的任何疑问或问题。 咱们总是很乐意供给协助。 高兴的仪表板！

原文：How to embed Kibana dashboards | Elastic Blog