插件〉网络地图面板

面板

社区

网络地图面板

概览
安装
更新日志
相关内容

Network Map Screenshot

如何在 Grafana 中设置并附带示例：请参阅入门教程对于开发：请参阅开发说明

网络地图面板

此面板显示网络拓扑。

拓扑可以参考地理瓦片集进行地理定位，也可以是纯逻辑的。

插件将在网络拓扑上绘制流量信息，显示节点之间的双向流量。

仪表盘 JSON

下面的入门教程很完整，但篇幅较长。为了更快地进入演示状态，请尝试使用此 Grafana 仪表盘 JSON 片段

仪表盘 JSON 片段

入门教程

本教程（篇幅较长）将帮助您设置和着色地图拓扑，并作为额外步骤，演示如何将其与 Grafana 仪表盘中的其他插件集成。

设置

在本教程的几个地方，我们将引用此 Google 表格

https://docs.google.com/spreadsheets/d/1K_nZcu4yzPXBuOR3nO8NkbSCxMnvWtu37H9cGagkQgc/edit#gid=0

此 Google 表格包含一组模拟网络流量数据，这些数据始终保持最近 7 天的最新状态。

它还包含在设置网络地图面板时将使用的示例拓扑。

打开 Grafana

1. 设置 Google Sheets 数据源

如果尚未选择，请点击标有“数据源”的标签页。
点击“添加新数据源”按钮。
在搜索栏中输入“Google Sheet”。
安装 Google Sheet 数据源。
点击“[创建 Google Sheets 数据源]”按钮
获取 Google Sheets API 密钥（如果没有，请自行搜索如何获取）
将您的 Google Sheets API 密钥输入到“API 密钥”输入框中
点击“[测试 + 保存]”

2. 设置测试仪表盘

创建一个新仪表盘
将您的仪表盘保存为“测试仪表盘”

3. 添加网络地图面板

点击“[添加可视化]”
在屏幕右上方的可视化选择器中，搜索并选择“Network Map Panel”
现在您将看到一个空白的网络地图可视化

4. 设置可视化

现在让我们配置面板的选项。有很多选项。

5. 设置数据源查询

在屏幕底部，选择“Google Sheets”
在“Spreadsheet ID”空白处，输入“1K_nZcu4yzPXBuOR3nO8NkbSCxMnvWtu37H9cGagkQgc”
将“范围”留空
将缓存时间设置为 5 分钟
开启“使用时间过滤器”

6. 创建仪表盘变量

在右上角附近，选择齿轮图标：“仪表盘设置”
从左侧列表中，选择“变量”
点击“[添加变量]”
从“选择变量类型”中，选择“文本框”
在“名称”字段中输入“source”
在右上角，点击“[保存仪表盘]”
从左侧列表中，选择“变量”
点击“[添加变量]”
从“选择变量类型”中，选择“文本框”
在“名称”字段中输入“destination”
在右上角，点击“[保存仪表盘]”
在右上角，点击“[关闭]”

7. 配置可视化

现在我们将输入所有使网络地图面板渲染完整网络可视化的选项。按照下面的列表输入各种选项，以输入拓扑并将其与电子表格数据链接。

8. 可视化选项

地图初始视图策略

此选项指定地图加载时视口如何设置。有 3 种策略

指定静态中心，调整大小时不缩放
指定 Lat/Lng 视口，调整大小时缩放到适合
从变量设置地图中心，调整大小时不缩放

对于我们的演示，我们将选择“指定静态中心，调整大小时不缩放”

这将为我们提供一个初始静态中心和缩放，使美国合理地适应视口。

地图背景颜色

此选项使用内置的 Grafana 颜色选择器设置地图背景颜色。我们将保留此设置不变。

地理瓦片集

这将渲染地图的地理瓦片集图层。对于此介绍，请选择“USGS Satellite Imagery”

政治边界瓦片集

这将在地图上渲染政治边界。对于此演示，请选择“Toner Political Boundaries”。

政治标签瓦片集

政治标签将标记每个政治边界。对于此介绍，请选择“[无政治标签]”。

显示视图控件

这将可选地隐藏和显示地图面板中的缩放控件。保持此设置为“on”

启用拖动地图滚动

这允许最终用户滚动视口。保持此设置为“on”

启用地图编辑

此选项可选地禁用内置拓扑编辑器。保持此设置为“on”

启用节点选择动画

此选项可选地禁用节点选择动画。保持此设置为“on”

启用边缘流量方向动画

此选项可选地禁用边缘选择动画。保持此设置为“on”

图层 1 开

此选项可选地隐藏拓扑信息的图层 1。保持此设置为“on”

从 URL 获取图层 1 JSON

这将可选地从 URL 而不是提供的文本区域获取图层 1 的 JSON 拓扑。保持此设置为“off”

图层 1 地图数据 (JSON)

从位于 https://docs.google.com/spreadsheets/d/1K_nZcu4yzPXBuOR3nO8NkbSCxMnvWtu37H9cGagkQgc/edit#gid=0 的 Google 表格中，点击视口下方名为“Topology”的标签页，然后将最左上角单元格 (A1) 中的内容粘贴进来。

图层 1 默认颜色

保持此设置为灰色。这将有助于显示我们正确关联边缘元数据的时间。

图层 1 端点标识符

此输入指定了 JSON 拓扑中每个“edges”对象的“endpoint_identifiers”属性的属性。JSON 中的每个“endpoint_identifiers”条目都应有一个与此文本框中指定值匹配的键（尽管分配的 JSON 值是长度为二的节点名称数组，这无关紧要）。Grafana 中的此值应保留默认值“names”。

图层 1 节点高亮颜色

当您的指标数据显示与特定节点匹配时，该节点将高亮显示此颜色。对于此介绍，请设置为中蓝色（“blue”）。

图层 1 节点大小

这将更改此拓扑层中节点的直径。保持此设置为默认值 5。

图层 1 边缘宽度

这将更改此拓扑层中所有边缘的宽度。保持此设置为默认值 3。

图层 1 边缘偏移

这将更改此拓扑层中边缘之间的空间。保持此设置为默认值 3。

图层 2 开

这将显示另一个拓扑层。暂时保持此设置为“off”。

图层 3 开

这将显示另一个拓扑层。暂时保持此设置为“off”。