Kibana：如何嵌入 Kibana 仪表板

作者：Carly Richmond

像我这样的前端工程师经常提出的要求是将 Kibana® 等来源的现有仪表板嵌入到 JavaScript Web 应用程序中。 这是我必须多次执行的任务，因为我们希望快速部署用户生成的视图或允许用户控制给定的视图。 从我们从精彩的开发者社区收到的常规问题来看，我并不孤单。

Kibana 仪表板等数据可视化工具甚至允许最不懂设计或技术倾向的用户在 Elasticsearch® 数据和原型视图之上快速轻松地创建视图。 事实上，这意味着将仪表板嵌入到现有的 Web 应用程序中是最困难的部分 - 特别是如果我们想要集成自定义 Web 控件来驱动数据视图，从而为用户提供一致的样式和体验。

在这里，我将逐步介绍如何使用 HTML iframe 在 Web 应用程序中嵌入 Kibana 仪表板的代码示例。 我还将介绍这些视图的 Kibana 身份验证以及如何使用 JavaScript 将自定义控件连接到嵌入视图。

什么是 iframe？

本文中介绍的两个示例都使用 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：

xpack.security.authc.providers:anonymous.anonymous1:order: 0credentials:username: "my_anonymous_user"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 日期格式。

let selectedStartDate = 'now-1y';
let selectedEndDate = 'now';const picker = new easepick.create({element: '#datepicker',css: ['https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css'],zIndex: 10,firstDay: 0,autoApply: false,format: 'MMM DD, YYYY @ HH:MM:00',plugins: ['RangePlugin','TimePlugin'],setup(picker) {picker.on('select', (e) => {const dateFormat = 'YYYY-MM-DDTHH:MM:00.000Z';selectedStartDate =  picker.getStartDate().format(dateFormat);selectedEndDate =  picker.getEndDate().format(dateFormat);dashboardUri=getDashboardUri();iframe.setAttribute('src', dashboardUri);});}
});

就 URL 本身而言，全局过滤器参数 _g 随后会使用所选范围进行更新，如 getDashboardUri() 辅助方法中所示：

function getDashboardUri() {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`;
}

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

<div class="carrier-select-container"><label for="carrier-select">Carrier</label><select name="carrier-select" id="carrier-select" onchange="updateWithCarrier()"><option value="ES-Air">ES-Air</option><option value="JetBeats">JetBeats</option><option value="Kibana Airlines">Kibana Airlines</option><option value="Logstash Airways">Logstash Airways</option></select>
</div>

当从连接到 onchange 事件的 updateWithCarrier() 方法更改时，可以提取选定的值。 该事件是从事件处理程序中的选择控件中拉出的：

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

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

function getDashboardUri() {const carrierQuery = rison.encode_object({Carrier : encodeURIComponent(selectedCarrier)});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`;
}

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/258056.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

算法沉淀——BFS 解决 FloodFill 算法（leetcode真题剖析）

算法沉淀——BFS 解决 FloodFill 算法（leetcode真题剖析）

算法沉淀——BFS 解决 FloodFill 算法 01.图像渲染02.岛屿数量03.岛屿的最大面积04.被围绕的区域 BFS&#xff08;广度优先搜索&#xff09;解决 Flood Fill 算法的基本思想是通过从起始点开始&#xff0c;逐层向外扩展&#xff0c;访问所有与起始点相连且具有相同特性&#xf…
阅读更多...
【小沐学GIS】基于WebGL绘制三维数字地球Earth（OpenGL）

【小沐学GIS】基于WebGL绘制三维数字地球Earth（OpenGL）

&#x1f37a;三维数字地球系列相关文章如下&#x1f37a;&#xff1a;1【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;456:OpenGL、glfw、glut&#xff09;第一期2【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;456:OpenGL、glfw、glut&#xff09;第二期3【小沐…
阅读更多...
B端系统从0到1：有几步，其中需求分析要做啥？

B端系统从0到1：有几步，其中需求分析要做啥？

一款B系统从无到有都经历了啥&#xff0c;而其中的需求分析又要做什么&#xff1f;贝格前端工场给老铁们做一下分析&#xff0c;文章写作不易&#xff0c;如果咱们有界面设计和前端开发需求&#xff0c;别忘了私信我呦&#xff0c;开始了。 一、B端系统从0到1都有哪些要走的步骤…
阅读更多...
ZigBee学习——BDB

ZigBee学习——BDB

✨本博客参考了善学坊的教程&#xff0c;并总结了在实现过程中遇到的问题。 善学坊官网 文章目录 一、BDB简介二、BDB Commissioning Modes2.1 Network Steering2.2 Network Formation2.3 Finding and Binding&#xff08;F & B&#xff09;2.4 Touchlink 三、BDB Commissi…
阅读更多...
PKI - 借助Nginx 实现Https 服务端单向认证、服务端客户端双向认证

PKI - 借助Nginx 实现Https 服务端单向认证、服务端客户端双向认证

文章目录 Openssl操系统默认的CA证书的公钥位置Nginx Https 自签证书1. 生成自签名证书和私钥2. 配置 Nginx 使用 HTTPS3. 重启 Nginx 服务4. 直接访问5. 不验证证书直接访问6. 使用server.crt作为ca证书验证服务端解决方法1&#xff1a;使用 --resolve 参数进行请求域名解析解…
阅读更多...
备战蓝桥杯---搜索（完结篇）

备战蓝桥杯---搜索（完结篇）

再看一道不完全是搜索的题&#xff1a; 解法1&#xff1a;贪心并查集&#xff1a; 把冲突事件从大到小排&#xff0c;判断是否两个在同一集合&#xff0c;在的话就返回&#xff0c;不在的话就合并。 下面是AC代码&#xff1a; #include<bits/stdc.h> using namespace …
阅读更多...
LabVIEW荧光显微镜下微管运动仿真系统开发

LabVIEW荧光显微镜下微管运动仿真系统开发

LabVIEW荧光显微镜下微管运动仿真系统开发 在生物医学研究中&#xff0c;对微管运动的观察和分析至关重要。介绍了一个基于LabVIEW的仿真系统&#xff0c;模拟荧光显微镜下微管的运动过程。该系统提供了一个高效、可靠的工具&#xff0c;用于研究微管与运动蛋白&#xff08;如…
阅读更多...
网络安全的今年：量子、生成人工智能以及 LLM 和密码

网络安全的今年：量子、生成人工智能以及 LLM 和密码

尽管世界总是难以预测&#xff0c;但网络安全的几个强劲趋势表明未来几个月的发展充满希望和令人担忧。有一点是肯定的&#xff1a;2024 年将是非常重要且有趣的一年。 近年来&#xff0c;人工智能&#xff08;AI&#xff09;以令人难以置信的速度发展&#xff0c;其在网络安全…
阅读更多...
Spring Boot 笔记 019 创建接口_文件上传

Spring Boot 笔记 019 创建接口_文件上传

1.1 创建阿里OSS bucket OSS Java SDK 兼容性和示例代码_对象存储(OSS)-阿里云帮助中心 (aliyun.com) 1.2 编写工具类 package com.geji.utils;import com.aliyun.oss.ClientException; import com.aliyun.oss.OSS; import com.aliyun.oss.OSSClientBuilder; import com.aliyun…
阅读更多...
深度学习基础之《深度学习介绍》

深度学习基础之《深度学习介绍》

一、深度学习与机器学习的区别 1、特征提取方面 机器学习&#xff1a;人工特征提取 分类算法 深度学习&#xff1a;没有人工特征提取&#xff0c;直接将特征值传进去 &#xff08;1&#xff09;机器学习的特征工程步骤是要靠手工完成的&#xff0c;而且需要大量领域专业知识…
阅读更多...
Android之Android.bp文件格式语法(一百八十六)

Android之Android.bp文件格式语法(一百八十六)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
LabVIEW高效电磁阀性能测试

LabVIEW高效电磁阀性能测试

LabVIEW高效电磁阀性能测试 在核电站的安全运营中&#xff0c;电磁阀作为关键组件&#xff0c;其性能的可靠性至关重要。设计一套基于LabVIEW的电磁阀测试平台&#xff0c;既能精准测试电磁阀的多项性能指标&#xff0c;又能提高检修效率与准确性&#xff0c;进而保障核电站的…
阅读更多...
关于内存相关的梳理

关于内存相关的梳理

1 关键字 总结 &#xff08;lowmemory&#xff0c;anr in&#xff09; 2 知识储备 虚拟机原理 垃圾回收算法 又包含标记 和清除两种算法 标记&#xff1a;程序计数器-已过时&#xff0c;可达性分析 具体可见 http://help.eclipse.org/luna/index.jsp?topic%2Forg.ec…
阅读更多...
消息中间件：Puslar、Kafka、RabbigMQ、ActiveMQ

消息中间件：Puslar、Kafka、RabbigMQ、ActiveMQ

消息队列 消息队列&#xff1a;它主要用来暂存生产者生产的消息&#xff0c;供后续其他消费者来消费。 它的功能主要有两个&#xff1a; 暂存&#xff08;存储&#xff09;队列&#xff08;有序&#xff1a;先进先出 从目前互联网应用中使用消息队列的场景来看&#xff0c;…
阅读更多...
SpringCloud第一天

SpringCloud第一天

1.认识微服务 随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢&#xff1f; 1.1.单体架构 单体架构&#xff1a;将业务的所有功能集中在一个项目中开发&#xff0c;打…
阅读更多...
四、案例 - Oracle数据迁移至MySQL

四、案例 - Oracle数据迁移至MySQL

Oracle数据迁移至MySQL 一、生成测试数据表和数据1.在Oracle创建数据表和数据2.在MySQL创建数据表 二、生成模板文件1.模板文件内容2.模板文件参数详解2.1 全局设置2.2 数据读取&#xff08;Reader&#xff09;2.3 数据写入&#xff08;Writer&#xff09;2.4 性能设置 三、案例…
阅读更多...
qt “美颜”

qt “美颜”

要想成为一名优秀的qt工程师 学会使用qss编程也是重要的 不可获缺的一部分 qss 简介和优势 QSS&#xff08;Qt Style Sheets&#xff09;是一种用于定义Qt应用程序界面外观和样式的样式表语言。它类似于CSS&#xff08;层叠样式表&#xff09;&#xff0c;但针对Qt框架进行了定…
阅读更多...
高仿原神官网UI 纯html源码

高仿原神官网UI 纯html源码

高仿原神官网UI源码介绍 如果您希望打造一个与原神官方网站相似的外观和用户体验&#xff0c;但又不想使用复杂的框架或模板&#xff0c;那么我们的高仿原神官网UI源码将是一个完美的选择。它采用纯HTML5构建&#xff0c;无需任何额外的CSS或JavaScript库支持&#xff0c;即可…
阅读更多...
（三十五）大数据实战——Superset可视化平台搭建

（三十五）大数据实战——Superset可视化平台搭建

前言 本节内容是关于Apache Superset可视化平台的搭建&#xff0c;Apache Superset是一个现代的数据探索和可视化平台 。它功能强大且十分易用&#xff0c;可对接各种数据源&#xff0c;包括很多现代的大数据分析引擎&#xff0c;拥有丰富的图表展示形式&#xff0c;并且支持自…
阅读更多...
Flutter Android开发 梳理Google Material Design颜色体系

Flutter Android开发 梳理Google Material Design颜色体系

前言 做安卓开发&#xff08;Kotlin语言&#xff09;&#xff0c;Flutter开发的人员应该都听说过谷歌一直推崇的Material Design&#xff0c;而Material Design Color是其推崇的颜色体系&#xff0c;具体来说&#xff0c;Material Design Color是一套旨在帮助设计师和开发者创…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023