构建现代化 CMDB 前端平台

Spring-_-Bear 的 CSDN 博客导航

---

文章目录

一、什么是 CMDB

CMDB

是配置管理数据库（

Configuration Management Database

）的缩写，是一种用于管理和跟踪信息技术（

IT

）资源和配置项（

CI

）的逻辑数据库，存储了配置项全生命周期信息以及配置项之间的关系（包括但不限于物理关系、实时通信关系、非实时通信关系和依赖关系等）。

CMDB

主要用于存储与管理企业

IT

架构中设备的各种配置信息，它与所有服务支持和服务交付流程都紧密相联，支持这些流程的运转、发挥配置信息的价值，同时依赖于相关流程保证数据的准确性。

CMDB

是信息技术基础设施库的一种形式，旨在帮助企业和组织有效地管理其

IT

资产和服务，其目标是提供一个全面的、精确的资产和配置信息的存储库，以便在需要时能够有效地协助管理和控制

IT

环境。

总的来说，

CMDB

的本质上就是一个数据库，但与计算机术语中的常规 “数据库” 有所不同。

CMDB

不仅包含了实际的数据记录，还包括了管理者对资源的抽象和建模的逻辑。由于每个管理者所面临的环境各不相同，这导致了他们所管理的资源类型、数量和关系也不尽相同。因此，市面上没有一款

CMDB

产品能够适应所有场景或满足所有需求，这也解释了为什么自主研发

CMDB

平台变得愈发重要的原因。

二、为什么需要 CMDB

CMDB

解决的核心问题是孤立的数据和过时的信息，在实施

CMDB

之前，大多数组织都将数据分散在具有不同负责人的不同系统中，这就很难概览所有

CI

及其相互依赖关系，而且更难理解哪些信息是最新的，哪些不是。这会使团队在做出决策时无法理解重要的背景，可能会影响风险评估和报告、影响决策、减慢问题解决速度，并最终给企业带来财务和声誉方面的损失。

例如，假设

CI A

的数据保存在一个部门，而

CI B

的数据存储在另一个部门，

CI B

依赖于

CI A

正常工作。当

CI A

的部门决定将其下线进行维护时，他们无法了解自己对

CI B

的影响。最后的情况就是这可能会导致团队之间的混乱，而最坏的情况是它可能会变成重大事件。要避免这种情况，只需要一个良好的

CMDB

平台。一款现代化、多功能、数据可视化的

CMDB

平台能够为企业和组织带来以下好处：

1. 全面资产管理：CMDB 允许企业维护一份详尽的资产清单，包括硬件、软件、网络设备、文档和服务。这有助于企业了解其 IT 环境的组成，确保没有遗漏的资产，并提供了每个资产的重要信息。
2. 关系可视化：CMDB 不仅存储配置项的信息，还记录了它们之间的各种关系。这包括物理连接、实时通信、依赖关系等。这使得企业能够清晰地了解不同配置项之间的相互作用，从而更好地规划和管理其 IT 环境。
3. 支持服务管理：CMDB 与 IT 服务管理（ITSM）和 IT 运营密切相关。它为服务支持和服务交付流程提供了必要的信息，有助于确保服务的高可用性、可靠性和性能。
4. 准确的决策数据支持：CMDB 提供了准确、实时的配置信息，这对于企业的决策制定至关重要。无论是采购新设备、升级系统还是规划新项目，都需要可靠的数据支持。
5. 合规性和安全性：对于需要遵守法规、标准或安全政策的企业，CMDB 可以帮助确保 IT 环境的合规性。它可以追踪配置项的状态，以满足监管要求，并帮助发现和解决潜在的安全漏洞。
6. 资源优化：通过 CMDB，企业可以更好地了解其 IT 资源的使用情况，以避免浪费和过度购买，从而降低成本并提高效率。
7. 问题解决和故障排除：CMDB 存储了详细的配置信息，有助于快速定位和解决故障，最大程度地减少了停机时间。

总之，

CMDB

平台对企业来说是一种关键的

IT

管理工具，帮助他们维护精确的资产清单、优化资源、提高服务质量、确保合规性，并支持更好的决策制定。在现代复杂的

IT

环境中，

CMDB

变得越来越重要，以确保企业能够有效地管理和控制其

IT

资产和服务。

三、如何建立自己的 CMDB

建立自己的配置管理数据库（

Configuration Management Database，CMDB

）是一个复杂的过程，需要仔细规划和执行。以下是建立自己的

CMDB

的一些核心要点和注意事项：

1. 为所有的 CI 建立一个可靠的信息库：CI 及其关系数据库维护的越好，CMDB 所呈现出来的价值更佳。CI 是 CMDB 的基础构成组件，因此正确记录所有 CI 及其关系信息至关重要。强烈建议使用自动发现工具发现组织中的所有资产，然后可以根据这些资产在组织服务交付模型中的角色来创建 CI。
2. 为所有关键服务构建单独的服务交付模型：构建独立的服务交付模型可以快速访问关系图，通过每个服务交付模型的组件展开详细信息。服务交付模型是仅显示与特定服务相关的组件的业务视图，隔离每个模型的组件可以减少在紧急事件（如重大事件）中出现混乱和错误的可能性。
3. 特别注意关键服务关系的绘制：CMDB 可以成为对抗停机和重大事故的强大工具，根据信息技术情报咨询公司的一项研究表明，其所调研的机构中，98% 的机构在停工一小时后至少会损失 10 万美元。这是我们非常希望避免的，或者至少是希望能最小化其影响的。清楚地映射关键服务 CI 之间的关系，当发生重大事件时可以快速地获得所需的所有信息，从而快速定位和解决问题。
4. 创建格式化的文档：CMDB 的好坏取决于它的数据质量，正确的文档是成功建立 CMDB 的关键。所有 CI 都需要使用正确的 CI 类型、所有者信息、位置或站点信息进行分类，并映射它们之间的关系。确保决策者在 CMDB 中能够获得所需的所有有价值的信息。
5. 随时更新 CMDB：确保 CMDB 中的信息都是动态更新并且准确的，在不断引入或退役资产和 CI、增加或删除人员、升级技术或逐步淘汰旧技术等过程中，需要不断的更新 CMDB 以反映这些变化。CMDB 需要准确的数据才是有效的，因此保持 CMDB 的更新是关键。

四、前端技术选型对比

4.1 Vue VS React

为什么选用

React

作为

CMDB

开发的

JavaScript

框架而不选用

Vue

？回答这个问题需要从两个框架本身的优点和缺点出发，对比权衡后做出更适用于

CMDB

平台开发的明智选择，二者优缺点对比如下表：
ReactVue学习曲线学习曲线陡峭，入门门槛较高，英文文档不够友好学习曲线较低，中文文档齐全且清晰，

API

直观语法层面基于

JSX

定义组件，将

HTML

和

JavaScript

结合在一起，代码结构更加紧凑基于

HTML

的模板语法，区分为

template

、

script

和

style

，使得开发者能够更加容易地编写模板生态系统生态系统庞大而活跃，拥有丰富的第三方库和组件，以及大量的社区支持生态系统相对较小，有待进一步发展灵活性非常灵活，允许开发者高度定制化提供更多的约定和默认配置，以减少开发者需要做出的决策。可以达到快速开发的目的，但可能限制某些高度自定义的需求适用场景适用于开发大规模和复杂的应用，以及需要高度自定义和控制的项目适用于快速原型开发、小到中等规模的项目以及需要简单的前端解决方案的项目

经过上述对比的深入分析后，综合考虑到

CMDB

平台的规模性、复杂度以及对高度自定义解决方案的需求，在慎重权衡了各种因素之后，我们团队选择了

React

作为构建

CMDB

前端平台的

JavaScript

框架，认为这是一项比选择

Vue

更加明智的选择。

这个决策的背后有着多方面的考虑，首先，

React

具有一个庞大而成熟的生态系统，这意味着我们可以利用广泛的社区支持和第三方库更快地实现我们的目标。其次，

React

提供了极高的可定制性，允许我们根据具体需求进行精细调整，以满足

CMDB

平台处理大规模和复杂数据的需求。这个选择有助于确保我们能够有效地应对挑战，为

CMDB

平台的成功开发和运营提供坚实的基础。

在使用

React

开发

CMDB

平台的过程中，存在着一些使用难点和需要注意的事项：

• 组件化思维：React 是组件化的，这意味着需要学会将用户界面拆分成小组件，这有助于提高代码可维护性，但也需要深度掌握组件化思想。
• JSX 语法：JSX 是一种在 JavaScript 中嵌套 HTML 标记的语法，这可以使代码更具可读性。但在编写 JSX 的过程中需要高度注意一些细节问题，如定义虚拟 DOM 时不要添加引号、样式的类名指定要用 className 而不用保留字 class、混入 JS 表达式时注意内容只能是表达式（有返回值）而非 JS 代码等。
• 性能优化：React 非常快，但如果不小心性能问题可能就会出现。为了避免不必要的重新渲染，可以使用 shouldComponentUpdate 或 React.memo 等方法来优化组件性能。

4.2 Semantic UI VS Ant Design

我们团队选择

Semantic UI

而不选择

Ant Design

来构建前端

CMDB

平台的决策是经过仔细考虑和权衡的，下面是选择

Semantic UI

的一些重要原因：

1. 一致性和集成性：Semantic UI 是一套相对简单的 UI 框架，更加符合 CMDB 平台风格简约一致的需求。在这种情况下一致性和集成性非常重要，Semantic UI 中提供了较少的样式和组件，这使得我们可以更轻松地创建一致性的用户界面。
2. 定制性：虽然 Ant Design 是一个功能强大的 UI 库，但其自带的样式和组件较多，这可能会导致我们需要花费更多的时间来调整和覆盖这些样式，以满足 CMDB 平台的特定需求。Semantic UI 则更加灵活，可以轻松地根据项目的需求进行自定义。
3. 轻量级：Semantic UI 相对较轻量，不会引入大量的额外依赖，这有助于提高前端性能，并降低加载时间，特别是对于需要快速访问大量数据的 CMDB 平台而言，这一点非常关键。
4. 社区支持：虽然 Ant Design 有一个庞大的社区支持，但 Semantic UI 同样有一支忠实的用户社群，提供了丰富的资源和解决方案，可以帮助我们解决问题和快速推进项目。

总的来说，虽然

Ant Design

是一个出色的

UI

库，但在构建

CMDB

平台时，

Semantic UI

更符合项目的需求，因为它提供了更大的定制性和更少的样式复杂性，有助于创建一致、高性能的

CMDB

前端界面。

4.3 ECharts VS Chart.js

我们团队在构建

CMDB

前端平台时选择

ECharts

而不选择

Chart.js

作为数据可视化绘图工具的原因主要有以下几点：

1. 复杂数据可视化需求：CMDB 平台通常需要处理大量复杂的数据，并且可能需要展示多种类型的图表，例如折线图、柱状图、饼图以及关系图等。ECharts 提供了更丰富的图表类型和更强大的定制性，使其更适合应对 CMDB 平台的复杂数据可视化需求。
2. 互动性和功能性：CMDB 平台通常需要用户与数据进行交互，进行数据筛选、缩放等操作。ECharts 提供了更多的互动功能，如数据区域缩放、数据刷选、多维数据展示等功能，可以帮助用户更深入地探索数据。
3. 性能优化：由于 CMDB 平台可能需要处理大规模的数据集，ECharts 的性能优化相对更为出色。它采用了 WebGL 技术来加速绘图，从而在处理大量数据时表现更优。
4. 定制性和灵活性：CMDB 平台的数据可视化通常需要特定的定制以满足特定的业务需求。ECharts 提供了高度的定制性和灵活性，使开发人员能够根据平台的需求对图表进行精细调整和定制。
5. 社区支持和文档资源：ECharts 拥有庞大的中文社区支持和文档资源，可以帮助开发人员快速解决问题并获得支持。这对于需要在项目中快速部署数据可视化的开发团队来说是非常重要的。

总的来说，

ECharts

提供了更丰富的图表类型、强大的互动功能和优秀的性能优化，这使其成为构建前端

CMDB

平台的更合适选择。它能够满足

CMDB

平台复杂数据可视化的需求，并提供定制性和灵活性，有助于开发人员快速构建适应业务需求的数据可视化功能。

诚然，使用

ECharts

绘制

CMDB

前端平台数据可视化图表相对容易上手，但仍有一些难点和需要注意的事项，列举如下：

• 理解数据结构：ECharts 的图表通常需要特定的数据结构，例如数组中的嵌套对象等，理解和准备正确的数据结构是对初学者的一个重大挑战。
• 配置项和选项参数：ECharts 图表的配置项和选项参数非常丰富，尤其是对于复杂的图表。学习如何正确配置图表以及如何使用不同的参数可能需要一些时间。
• 事件处理：如果需要为图表添加互动性，如点击事件或悬停事件等，你需要了解如何正确处理这些事件，包括捕获事件、处理事件数据等。
• 性能优化：在处理大规模数据时要特别注意性能，使用 ECharts 提供的性能优化选项，避免不必要的渲染，以确保图表在性能方面表现良好。
• 响应式设计：确保图表能够适应不同屏幕尺寸和设备。ECharts 提供了一些响应式设计的选项，可以帮助实现这一目标。

五、CMDB 前端核心技术

5.1 React

React

是一个由

Facebook

开源的

JavaScript

库，用于构建用户界面。它采用组件化开发模式，将界面拆分成小的、可重用的组件，每个组件都有自己的状态和渲染逻辑。代码采用

JSX

语法进行编写，将

HTML

和

JavaScript

组合在一起，提高了代码的可读性和可维护性。

React

通过虚拟

DOM

实现高效的页面更新，将整个界面抽象成虚拟

DOM

树，只更新需要变化的部分，极大程度上提高了页面的渲染性能。

React

具有庞大的生态系统，包括第三方库和工具，如

Redux

用于状态管理、

React Router

用于路由管理等，丰富的资源和社区支持让开发更加便捷。此外，

React

还支持移动应用开发，通过

React Native

可以构建原生移动应用，实现跨平台开发。总之，

React

是一个强大的前端开发工具，通过其组件化、虚拟

DOM

、单向数据流等特性，帮助开发者构建高性能、可维护的用户界面。

5.2 Semantic UI

Semantic UI

是一款开源的前端框架，旨在简化用户界面的设计和开发过程。它的主要特点在于采用语义化的

HTML

结构和易于理解的类名，以帮助开发者创建一致性高、可访问性强的用户界面。通过语义化的

HTML

元素和直观的类名，

Semantic UI

让开发者更容易定义和理解界面的结构和功能。这不仅有助于提高页面的可访问性，还能提高搜索引擎的优化效果，使代码更易维护。

Semantic UI

将用户界面划分为各种模块和组件，如按钮、表单、导航栏等。每个模块都有清晰的用途和功能，可以轻松地组合和定制，从而提高了代码的可重用性和可维护性。

此外，

Semantic UI

提供了主题和样式的定制选项，开发者可以根据项目需求自定义界面的外观和风格，以满足品牌标识和设计要求。最重要的是，

Semantic UI

提供了详尽的文档、示例和社区支持，使开发者能够轻松上手并解决问题。这个强大的生态系统有助于降低学习曲线，提高开发效率。

总之，

Semantic UI

是一个注重语义化、模块化和可定制性的前端框架，它帮助开发者快速创建具有高可访问性和一致性的用户界面。无论是开发简单网页还是复杂的

Web

应用程序，

Semantic UI

都为开发者提供了强大的工具和资源，使开发过程更加高效和愉快。

5.3 Cytoscape

Cytoscape

是一款强大的开源网络图可视化库，用于分析和可视化各种复杂的网络数据，如生物学网络、社交网络、交通网络等。它提供了丰富的功能和工具，以帮助研究人员、数据分析师和开发者探索和呈现复杂的关系数据。并允许使用者创建各种网络图和自定义节点的样式、颜色、大小等，通过节点和边来表示数据实体和它们之间的关系，以便更好地传达数据信息。

此外，

Cytoscape

还支持布局算法，可自动排列和调整节点，以确保网络图的可读性。

Cytoscape

的另一个强大之处在于其可交互性和数据分析能力。用户可以通过鼠标交互浏览网络图，缩放、滚动、选中节点等操作，同时可以进行数据过滤、聚类分析、网络度量等高级数据分析。

总之，

Cytoscape

是一个功能强大的网络图可视化库，用于分析和呈现复杂的关系数据。它的定制性强、插件丰富、交互性和分析能力出色，使其成为研究、数据分析和可视化领域的重要工具，广泛应用于生物信息学、社交网络分析、交通规划等领域。

5.4 Echarts

ECharts

是百度开发的一款开源

JavaScript

图表库，旨在帮助开发者创建交互式、可视化的数据图表。它是一种功能丰富且高度可定制的工具，可用于呈现各种类型的数据，从简单的折线图到复杂的热力图和地图可视化等。并且

Echarts

支持多种图表类型，包括折线图、柱状图、饼图、散点图、雷达图、地图等，使开发者能够根据数据类型和需求选择最合适的图表类型。这些图表都具有交互性，用户可以通过鼠标悬停、缩放、拖拽等方式与图表进行互动，深入了解数据。而且

Echart

还具备丰富的配置选项，开发者可以轻松定制图表的样式、颜色、标签和图例等，以满足特定设计和品牌要求。

一个显著的特点是

ECharts

拥有强大的数据处理和分析能力。它支持数据的动态更新和切换，可以实时呈现数据的变化。开发者可以使用

ECharts

内置的

API

进行数据处理，也可以自定义数据处理逻辑，以满足复杂的需求。

Echarts

中还提供了丰富的扩展功能，包括数据驱动的动画、数据缩略图、图表联动、导出图表图片等，使开发者能够更灵活地呈现数据和提供更丰富的用户体验。

总之，

ECharts

是一款强大的

JavaScript

图表库，用于创建交互式、可视化的数据图表。它具有多种图表类型、高度可定制性、丰富的配置选项、数据处理和分析能力以及扩展功能，适用于各种应用场景，包括数据分析、数据可视化、报表生成等。

ECharts

的开源性质和活跃的社区支持使其成为前端开发领域的热门工具之一。

5.5 Dagre-D3

Dagre-D3

是一个用于可视化有向图（

DAG

）的

JavaScript

库，它建立在两个流行的开源库

Dagre

和

D3.js

的基础上。该库的主要作用是帮助开发者创建高度可定制的、交互式的有向图可视化，用于展示和分析复杂的关系和流程数据。

Dagre-D3

的核心功能包括以下几点：

1. 自动布局算法： Dagre-D3 内置了自动布局算法，可以根据图的结构自动排列节点和边，使得图表呈现更加美观和易读。开发者可以选择不同的布局算法，如层次布局、树形布局等，以满足不同需求。
2. 可定制性与交互性： 该库允许开发者自定义节点和边的样式、大小、颜色等属性，以及整个图表的外观。这样可以根据具体的数据和设计要求创建独特的可视化效果。此外 Dagre-D3 结合了 D3.js 的强大交互功能，允许用户通过鼠标悬停、点击、拖拽等方式与图表进行互动。这增加了用户体验，使得用户可以深入探索图表中的数据。
3. 导出和嵌入： 开发者可以轻松地将 Dagre-D3 生成的图表导出为 SVG 或 PNG 格式的图片，也可以将图表嵌入到 Web 应用程序或文档中，以便与他人分享分析结果。

总之，

Dagre-D3

是一个用于可视化有向图的强大工具，结合了自动布局、可定制性、交互性和导出功能。它适用于各种应用领域，包括流程图、组织结构图、网络拓扑图等，帮助用户更好地理解和分析复杂的关系数据。通过结合

Dagre

和

D3.js

的功能，

Dagre-D3

提供了强大的可视化解决方案，为数据科学家、分析师和开发者提供了有力的工具。

六、CMDB 核心功能模块

6.1 主机管理

主机管理模块共包含四方面内容，分别是主机分布、物理视图、管理试图和用途视图，从四个不同的维度展示主机服务器的分布和使用情况。

1. 主机分布：使用 ECharts 创建一个从左到右的树状图，展示各个业务单元所拥有的主机数量，以便清晰地展示主机资源的分配和数量。
2. 物理视图：通过表格展示物理主机资产，显示主机的物理信息和性能数据（如 IP、CPU、内存等），可通过筛选主机类型、机房位置、机柜位置和货架位置的方式快速定位到某个地域下分配有多少主机以及主机的列表数据。
3. 管理视图：通过表格展示物理主机资产，显示主机的物理信息和性能数据（如 IP、CPU、内存等），可通过筛选业务单元的方式快速定位到某个业务单元下拥有的各类型主机数量。
4. 用途视图：通过表格展示物理主机资产，显示主机的物理信息和性能数据（如 IP、CPU、内存等），可通过筛选主机用途快速定位到具体用途下的主机列表。

6.2 应用管理

应用分布：以表格方式展现各业务单元下的应用列表信息，包括启动命令和运行状态等，通过定时自动巡检的方式动态掌握应用的分布和健康情况。点击查看应用详情时将通过

dagre-D3.js

绘制某个应用集群下的分布信息，并支持从上到下、两度距离、经典试图等视图风格的切换。

6.3 网络资产

1. 网络设备：以表格方式展示各类型网络设备，如路由器、交换机和防火墙等，以便快速了解该设备的物理位置、管理 IP、制造商和价格等信息。
2. 公网 EIP：以表格方式展示弹性公网 IP（EIP）的列表情况，记录公网的 IP、绑定实例、带宽和使用状态等信息。
3. 负载均衡：以表格方式展示定时抓取的负载均衡策略信息，包括 IP、平台和地区等信息。
4. 专线链路：以表格方式展现机房下的所有专线链路（点对点通信链路），记录网络类型、两端 IP、带宽和每月价格等信息。

6.4 配置管理

1. 域名解析：以表格方式展示定时抓取的域名解析配置信息，包括域名解析记录的关键性信息，如域名、IP、解析类型等。
2. 证书管理：以表格方式展示定时抓取的 HTTPS 证书信息，包括域名、到期时间和根证书机构等信息。
3. Nginx 规则：以表格方式展示 Nginx 服务器的各种配置策略信息，如配置文件名、域名、监听端口和代理的根路径等信息。
4. Haproxy 规则：以表格方式展示 Haproxy 服务器的各种配置策略信息，如配置文件名、内外部 IP 和端口等信息。
5. 防火墙规则：以表格方式展示防火墙的各种配置策略信息，如配置文件名、内外部 IP 和端口等信息。

6.5 成本管理

1. 公有云账号：以表格方式展示各业务单元下的各种账号的云平台月费用信息。
2. 专项费用：以表格方式展示每月专项费用的用途和资金流向等信息。
3. 年度预算：以表格方式记录展示各业务单元的年度预计费用信息。

6.6 可观测性

1. 可观测设备：以表格方式展示各机房下网络设备的各种指标数据和 Zabbix 的 Host ID 信息。
2. 可观测链路：以表格方式展示各链路的起始点和指标数量等信息。

当进入网络可观测系统时，页面左侧将使用

Semantic UI

提供的统计组件展示各机房的网络状况信息，右侧将通过

ECharts

绘制状态图展示系统的监控信息，如

TOP CPU

和

TOP Memeory

的主机信息，中部内容区将使用

Cytoscape

绘制各机房网络设备的链路联通信息和链路出入口带宽信息。

七、总结

在本文中，我们深入探讨了配置管理数据库（

CMDB

）的重要性和构建过程以及自研

CMDB

的前端核心技术和核心功能模块，

CMDB

是现代

IT

管理的不可或缺的一部分，通过构建自己的

CMDB

我们可以更好地管理和优化

IT

基础设施，提高效率并降低风险。这是一个持续发展和不断演进的领域，在公司未来的发展历程中

CMDB

将充当重要的一员。