设计新的 Kibana 仪表板布局以支持可折叠部分等

作者：来自 Elastic Teresa Alvarez Soler, Hannah Mudge 及 Nathaniel Reese

在 Kibana 中构建可折叠仪表板部分需要彻底改造嵌入式系统并创建自定义布局引擎。这些更新改进了状态管理、层次结构和性能，同时为新的高级仪表板功能奠定了基础。

我们正在开发可折叠部分，以隐藏和显示 Kibana 仪表板中的面板，以帮助组织内容并提高性能。这是一个经典的软件开发故事：有时要前进，就必须……走下坡路？阅读有关如何构建看似简单的热门功能有时会导致比你预期的更大的简化的信息！😅

可折叠部分

背景介绍：Kibana 中的仪表板可以包含许多可视化内容，站点可靠性工程师 (SRE) 使用这些可视化内容来保持系统运行，或安全分析师在调查中使用它们。这些仪表板可能很长且加载速度很慢。用户希望更好地组织仪表板内容，以避免性能陷阱并使其更易于扫描。今天，实现此目的的最佳方法是将仪表板内容拆分为多个仪表板，然后使用仪表板链接面板链接它们以方便导航。不幸的是，这不允许你并排查看内容，并且使仪表板作者需要付出大量努力才能进行更新和维护。为了解决这一需求，我们正在开发可折叠部分以隐藏和显示 Kibana 仪表板中的面板 - 这些部分有助于组织内容，并且不会加载折叠的内容以提高性能。

这些新部分将允许你对主题相关的仪表板面板和数据可视化进行分组，从而更轻松地找到你要查找的信息。最重要的是，你可以轻松隐藏和展开这些部分，从而仅加载所需的数据。这将帮助你创建图表的并排比较并简化仪表板性能。

规划工程方法

一开始，当我们审视客户对该功能的需求时，它看起来像是一个常规规模的工程工作：仪表板包含面板（稍后会详细说明），需要将它们组织到不同的部分中，并且产品需求要求仅在某个部分打开时渲染相关面板。此外，还需要一个拖放系统来布局仪表板，该系统必须考虑这些部分，并能处理各种 “在部分之间移动内容” 类型的用例。看起来像是对现有代码的一次增强，对吧？

不幸的是，经过短暂的概念验证后，我们发现答案是否定的。事情没那么简单。Kibana 使用 “可嵌入” 框架，而该框架缺乏不在仪表板上呈现某些嵌入对象所需的特性。让我们来看看为什么……

什么是 “可嵌入”？

尽管 “可嵌入” 未出现在 “Discover” 和 “Dashboard" 旁边的导航菜单中，但你仍可以在整个 Kibana 中与可嵌入内容进行交互。Discover 中的直方图、仪表板中的每个面板、面板的上下文菜单、可观察性中的镜头图表或安全性中的地图 - 所有这些都可以通过可嵌入内容实现。

可嵌入内容是 React 组件，可提供与 Kibana 深度集成的 API。此 API 允许它们由任何页面持久保存和恢复，使它们能够访问当前搜索上下文，允许它们定义编辑 UI，并且可扩展，以便工程师可以定义组件如何相互交互。它们位于注册表中，注册表将它们的行为与编写代码的位置分开。因此，许多工程师可以同时处理不同的可嵌入内容，而不会互相干扰。

对新嵌入式系统的需求

我们当时正在研究的旧式嵌入式系统可以追溯到 2018 年。嵌入式功能通过自定义用户体验组件抽象来公开。当时，Kibana 正在从 Angular 1 过渡到 React，因此嵌入式系统被设计为与框架无关，这可以顺利实现从 React 的理论过渡。虽然当时需要这种架构，但自那时以来，Kibana 已经发生了很大变化，并且不太可能脱离 React。现在，不灵活且不可知的嵌入式架构是一个日益严重的摩擦点。一些痛点是：

复杂的状态管理：嵌入式中的所有状态都要经过两个可观察对象（输入、输出）之一才能被继承、设置或读取。这要求消费者设置复杂的双向同步管道。
有限的继承：嵌入式只能有一个父级，将继承限制在一个层次结构中。此外，可嵌入状态从父级流向子级，如果已定义，子级状态将覆盖父级状态。
手动渲染：可嵌入需要繁琐的手动渲染过程和 Kibana 其余部分之间的兼容层，后者通过 React 进行渲染。

可折叠部分无法通过单一层次结构实现。可折叠部分需要多个层次结构，以允许面板属于仪表板和可折叠部分。否则，你将无法将面板放入可折叠部分。

新的可嵌入系统

因此，为了实现此功能，我们实际上必须 “深入” 可嵌入系统本身，并现代化管理可嵌入项的方式：我们必须设计一个新的可嵌入系统。很有趣！但同时……范围也很大！

新的可嵌入功能通过普通的旧 JavaScript 对象公开，并且可以通过实现接口来组合其功能。例如，可嵌入可以通过实现 PublishesDataLoading 接口来传达数据加载。这提供了以下好处：

干净的状态管理：每个状态都作为只读可观察对象公开。可以为可变状态公开 Setter 方法。
灵活的继承：可嵌入可以有一个父级链，允许根据需要设置尽可能多的层次结构。每一层都保留自己的状态，以便在使用时决定使用哪个状态。

有了可以容忍我们所需的继承的系统，现在可以构建可折叠部分。

但是，像任何好的重构一样，也有一个问题：可嵌入在 Kibana 中无处不在，为了在不导致回归的情况下实现这一变化，我们需要在 Elastic 的整个体验中迁移到新的可嵌入系统 —— 从 Elastic Security 中的 Alerts 页面到 Elastic Observability 中的 Service Inventory，以及介于两者之间的几乎所有内容。这花费了我们一些时间，但却带来了一些令人兴奋的新可能性。

新的布局引擎

任何仪表板背后的驱动力都是布局引擎，它允许面板被拖动和调整大小 —— 没有它，仪表板将完全是静态的（和无聊的）！

目前，Kibana 使用外部 react-grid-layout 包来驱动我们的仪表板，这是一个由一小群志愿者管理的开源布局引擎。到目前为止，这个布局引擎对我们的仪表板非常有用；然而，不幸的是，它缺少一些关键功能，这些功能可以使可折叠部分开箱即用：要么是 “面板内的面板”，要么是将面板拖到布局的两个独立实例上。

由于 react-grid-layout 背后的团队很小，因此对包的更新很少 —— 这意味着，即使我们开始直接为 react-grid-layout 做出贡献以添加我们需要的功能，将这些更改纳入 Kibana 仪表板也会很慢且不可靠。虽然我们曾短暂考虑过制作一个特定于 Kibana 的 react-grid-layout 分支，以便以与我们的发展相匹配的速度发布更新，但维护成本和不灵活性最终导致我们放弃了这个想法。

在研究了替代的布局引擎包后，我们决定最好的前进道路是开发我们自己的内部布局引擎 —— 一个专门为 Kibana Dashboard 用例而构建的引擎！这个新布局引擎（我们称之为 kbn-grid-layout）的开发工作已经开始。据我们所知，这是第一个利用原生 CSS 网格来定位其面板的布局引擎 —— 我们在研究中发现的所有其他布局引擎都依赖于像素级变换或绝对定位。这使得理解面板在仪表板上的放置方式变得容易得多。

kbn-grid-layout 对所有拖动和调整大小事件使用被动事件处理程序，重点是将这些操作期间的重新渲染次数减少到最低限度，以提高性能。由于我们可以控制这些事件处理程序，因此我们可以比以前更加专注于用户体验，并且我们添加了一些功能，例如在屏幕顶部或底部附近拖动时自动滚动，以及在调整大小事件期间锁定网格高度，以防止浏览器在调整大小事件完成之前响应高度变化而导致的意外行为。

我们目前正在完善实施，包括改进可折叠部分的管理、添加用于拖动和调整大小的键盘支持（Kibana 仪表板目前不支持此功能）等等。这个新的布局引擎不仅能够解锁添加可折叠部分的功能，而且在构建时还以可访问性和效率为首要考虑 — 这意味着一旦我们将最终布局引擎从 react-grid-layout 切换到 kbn-grid-layout，整个仪表板体验就会得到改善！

react-grid-layout

<ResponsiveReactGridLayout
  cols={
  
  {
    lg: 48,
    sm: 1,
  }}
  layouts={layouts}
  className={classes}
  width={viewportWidth}
  breakpoints={breakpoints}
  onLayoutChange={
    onLayoutChangeCallback
  }
  isResizable={
    !expandedPanel && !focusedPanel
  }
  isDraggable={
    !expandedPanel && !focusedPanel
  }
  rowHeight={20}
  margin={useMargins ? [8, 8] : [0, 0]}
  draggableHandle={'.embPanel--dragHandle'}
  useCSSTransforms={false}
>
  {panelComponents}
</ResponsiveReactGridLayout>

kbn-grid-layout

<GridLayout
  layout={currentLayout}
  gridSettings={
  
  {
    gutterSize: useMargins ? 8 : 0,
    rowHeight: 20,
    columnCount: 48,
  }}
  renderPanelContents={
    renderPanelCallback
  }
  onLayoutChange={
    onLayoutChangeCallback
  }
  expandedPanelId={expandedPanel}
  accessMode={accessMode}
/>

在发布之前查看

我们即将走出可嵌入的困境，并准备与所有客户一起享受我们的劳动成果，从每周发布的 Elastic Serverless 到我们的自托管用户。我们的客户将能够设计一个包含许多部分的仪表板，默认情况下可以折叠这些部分，从而允许调查仅加载所需的面板内容，同时保持冗长的仪表板整洁。如果你想向我们提供反馈或注册早期测试，请告诉我们！我们将在未来几个月内宣布此功能何时可供使用。敬请期待！

Elasticsearch 包含许多新功能，可帮助你为你的用例构建最佳搜索解决方案。深入了解我们的示例笔记本以了解更多信息，开始免费云试用，或立即在你的本地机器上试用 Elastic。

原文：Engineering a new Kibana dashboard layout to support collapsible sections & more - Elasticsearch Labs