Giraffe 简介

作者：Jill Pelavin / 产品, 用例, 开发者
2021 年 3 月 23 日

Giraffe 是 InfluxData 的图形库，旨在利用和绘制来自 InfluxData 的 时间序列数据库 InfluxDB 的数据。

是的，还有其他可用的图形库；但我们的是唯一一个专门构建用于绘制线协议的库，无需进行转换。此外，我们还有许多很棒的功能，例如图例和着色，无需太多配置。

那么，如何开始呢？

首先，您需要设置和安装 InfluxData。您可以使用 此处 的云安装；或安装本地版本。

接下来，您需要拥有一些数据。

如果您的系统中已经有数据，则可以跳过此步骤。

本文将涵盖以下内容

• 使用 Telegraf 设置数据
• 示例项目 1：直接 API
• 示例项目 2：查询 API
• 相关资源

使用 Telegraf 设置数据

引导仪表板的一种简单方法是使用社区模板。这是一种导入他人已创建的仪表板以查看 InfluxData 中数据的方式。

我推荐的两个模板是

1. 如果您在本地运行 InfluxDB 并且拥有 Docker，则可以使用 Docker 监控模板。

2. 或 空气质量监控模板。

要安装模板；请转到左侧导航菜单中的设置，然后单击顶部（设置标题下方）的模板选项卡。

这是一个屏幕截图，其中两个要点击的项目用品红色圈出，并带有 #1 和 #2。

然后，将上述 URL 之一粘贴到表格中 #2 下方的输入框中（在图片中标记为 #3）。

如果您愿意，可以选择其他模板（您可以浏览可用的模板），但随后设置它将取决于您自己。

单击查找模板，然后按照提示进行安装。

1. 安装后，如果您选择了 空气质量监控模板，请按照 此处的说明进行设置。

如果您选择了 Docker 监控模板，则无需进行其他设置。只需跳到步骤 4 即可。

1. 设置 Telegraf

转到 数据 -> Telegraf（请参阅下面 #1 和 #2，了解点击位置）。

在此屏幕中，您将看到我安装的 Docker 监控模板。

1. 单击设置说明（上面屏幕截图中的 #3）。

您现在将看到此屏幕截图

如果您尚未安装 Telegraf，请安装。

单击生成新令牌（#1），然后单击上面复制到剪贴板（#2）。

然后使用弹出窗口中第三个选项中的命令启动 Telegraf；通过将该命令（#3）复制并粘贴到您的命令行中。

注意： 根据您的系统设置方式，您可能需要更改配置。我用来启动我自己的 telegraf 的命令如下

telegraf --config ~/Code/tools/telegraf/docker_monitoring.conf

上面引用的文件 (docker_monitoring.conf) 是

# Global tags can be specified here in key="value" format.
[global_tags]
  # dc = "us-east-1" # will tag all metrics with dc=us-east-1
  # rack = "1a"
  ## Environment variables can be used as tags, and throughout the config file
  # user = "$USER"


# Configuration for telegraf agent
[agent]
  interval = "10s"
  round_interval = true
  metric_batch_size = 1000
  metric_buffer_limit = 10000
  collection_jitter = "0s"
  flush_interval = "10s"
  flush_jitter = "0s"
  precision = ""

  hostname = ""
  omit_hostname = false


###############################################################################
#                            OUTPUT PLUGINS                                   #
###############################################################################

# Configuration for sending metrics to InfluxDB
[[outputs.influxdb_v2]]
  urls = ["https://kubernetes.docker.internal:8080/"]
  token = "$INFLUX_TOKEN"
  organization = "InfluxData" ## Destination bucket to write into.
  bucket = "docker"
  insecure_skip_verify = true


###############################################################################
#                            INPUT PLUGINS                                    #
###############################################################################

[[inputs.cpu]]
  percpu = true
  totalcpu = true
  collect_cpu_time = false
  report_active = false

[[inputs.disk]]
  #ignore_fs = ["tmpfs", "devtmpfs", "devfs", "iso9660", "overlay", "aufs", "squashfs"]

[[inputs.diskio]]

[[inputs.kernel]]

[[inputs.mem]]

[[inputs.net]]

[[inputs.processes]]

[[inputs.swap]]

[[inputs.system]]

[[inputs.docker]]
  endpoint = "unix:///var/run/docker.sock"
  gather_services = false
  container_names = []
  source_tag = false
  container_name_include = []
  container_name_exclude = []
  timeout = "5s"
  perdevice = true
  total = true
  docker_label_include = []
  docker_label_exclude = []
  tag_env = []

然后转到仪表板，查找数据。这就是我们在本文其余部分将要引用的数据。

您可以将任何查询用于第一个实现（我的 Giraffe 示例）。第二个实现使用与 docker 模板对齐的特定查询。

如果您选择使用空气质量模板或其他模板，则需要调整查询。

请记住，带状图需要三个数据点（最小值、最大值、平均值），因此请相应地调整您的查询。

示例项目 1：直接 API

下一步是下载我们的示例项目之一。但是下载哪一个呢？

我们在此处有一个示例项目列表：此处。我将讨论其中的两个项目；我参与的项目（上面引用的列表中的第五个）和 Gene Hynson 的 Giraffe Playground（上面列出的第二个项目）。

两者都使用代理服务器，但其中一个是通过式的（它直接使用 InfluxDB API），另一个直接查询 InfluxDB（更复杂，但随后更容易调整查询并实时更改您获得的内容）。

我的项目：Giraffe Line Sample

此项目是直通式的；为了在另一个页面中显示已在您的 influxdata Web 应用程序中显示的图表；可以通过使用仪表板或“探索”功能来实现。

当按照上面链接中的说明操作时，需要注意以下事项

1. 这有一个代理和客户端目录。Proxy 目录包含一个本地服务器，该服务器与您的 InfluxDB 实例通信，无论该实例是本地的还是在另一台机器上。它的存在是为了绕过 CORS 限制（跨域资源共享；浏览器安全，确保一个站点无法访问另一个站点）。
2. 客户端目录包含检索数据并显示图表的网页。这是您将复制以使图表显示在您自己的网页/网站上的代码。
3. 对于配置和获取 orgId：在 29:05，此视频 显示了 Kristina Robinson 从 URL 中获取 orgId 的过程，她还展示了组织 ID 在 UI 中的显示位置。
4. 请注意您使用的是 http 还是 https。如果您只是在内部开发此功能，则可以绕过证书，但是如果您要将这些图表放在外部世界可访问的站点上，则您需要实际使用证书。

如 proxy/index.js 中所述

//to get past the self-signed cert issue: ignore the need for a cert
// DO NOT DO THIS IF SHARING PRIVATE DATA WITH SERVICE

//if you want to not use this workaround, then you need to put the actual cert into
//this agent; like so: (instead of the agent in the code below)

//const httpsAgent = new https.Agent({ ca: MY_CA_BUNDLE });

//see https://stackoverflow.com/questions/51363855/how-to-configure-axios-to-use-ssl-certificate
//for details
const httpsAgent = new https.Agent({  
  rejectUnauthorized: false
});

在您使其工作后，您应该看到一个折线图；如下所示

此项目的陷阱

Create-react-app 有其自己的样式，并且有一种样式应用于整个页面，该样式干扰了 Giraffe 并在图中添加了偏移量。必须删除它，Giraffe 才能正确呈现。因此，请注意任何影响绘图的样式。

https 可能会令人沮丧，因此首先（在开发时）将其关闭以使其正常工作，然后在需要时使用您的证书重新打开它。

我没有包含自动更新的计时器，因此需要按下按钮才能获取数据。 这意味着在首次加载页面时，没有数据；因此请先按按钮！

此解决方案只是获取一个已设置好的查询并将其发送到 InfluxDB。但是，如果要制作我们自己的查询呢？

下一个项目就是这样做的。

示例项目 2：查询 API

Gene Hynson，InfluxData 的另一位高级软件工程师，创建了这个 Giraffe 示例项目。

如果您连接到 influxdata cloud2 实例，则客户端应该能够处理 https，因为它没有使用自签名证书。如果您连接到本地开源实例 (OSS)，则该实例未使用 https（它使用的是 http），因此应该没有安全连接问题。

但是，如果您在本地运行并使用自签名证书，则您需要绕过 https。您可以使用类似于我的项目的 httpsAgent，或者您可以像我一样在开发时将其关闭。

我添加了此变量，以及它需要的 BUCKET_NAME、ORG_ID 等

export NODE_TLS_REJECT_UNAUTHORIZED=0

这样，服务器可以继续用于我的测试。请注意，如果您想在公共站点上公开这样的图表，请不要忘记使用证书进行实际授权。

我还创建了一个名为“environment”的文件，其中包含 export 命令，因此只需运行该文件，而不必每次在新 shell 中重新启动服务器时都键入它们，这很简单。

这是 Gene 的项目图表的外观；包含来自 Telegraf 的最后五分钟的数据

此图表自动更新，您可以在 client/src/plotters/band.js 文件中设置间隔

在代码中设置为五秒 (5000)，但我将其更改为 25000（25 秒），以便我可以截取屏幕截图等。

const REASONABLE_API_REFRESH_RATE = 25000;

这是定义图表的 Flux 查询，以及 Flux 指南 此处。由于它是带状图，因此我们需要平均值、最大值和最小值才能正确显示。

让我们在此处探索查询

// the cpu usage query we're using
const cpuQuery = `from(bucket: "${bucket}")
|> range(start: -5m)
|> filter(fn: (r) => r["_measurement"] == "cpu")
|> filter(fn: (r) => r["_field"] == "usage_user" or r["_field"] == "usage_system")
|> filter(fn: (r) => r["cpu"] == "cpu-total")
|> aggregateWindow(every: 15s, fn: mean, createEmpty: false)
|> yield(name: "mean")

from(bucket: "${bucket}")
|> range(start: -5m)
|> filter(fn: (r) => r["_measurement"] == "cpu")
|> filter(fn: (r) => r["_field"] == "usage_user" or r["_field"] == "usage_system")
|> filter(fn: (r) => r["cpu"] == "cpu-total")
|> aggregateWindow(every: 15s, fn: min, createEmpty: false)
|> yield(name: "min")

from(bucket: "${bucket}")
|> range(start: -5m)
|> filter(fn: (r) => r["_measurement"] == "cpu")
|> filter(fn: (r) => r["_field"] == "usage_user" or r["_field"] == "usage_system")
|> filter(fn: (r) => r["cpu"] == "cpu-total")
|> aggregateWindow(every: 15s, fn: max, createEmpty: false)
|> yield(name: "max")`;

此处的范围 (-5m) 表示获取过去 5 分钟的数据。您可以将其更改为小时 (h)、天 (d) 或您想要的任何范围。

时间范围的 API 在此处，带有时间戳快捷方式格式详细信息的 API 在此处。

这是一个时间段更长的图表（2 小时而不是五分钟）。

我个人将范围更改为 -2d 以获取最近两天的数据；因为这是我想要的范围。

但是，如果您查看图表，它会显示时间，并且仅跨越一个小时。这是因为我使用的存储桶大约在 2 天前活跃了一个小时，因此它获取了最近两天内的所有数据，然后显示了它拥有的数据。如果您执行查询，但没有数据，则图表中不会显示任何内容，这非常令人沮丧。因此，您可能需要在我们的数据浏览器中以交互方式处理数据和查询，以找到您想要的时间范围，然后再将其放入独立的 Giraffe 应用程序中。

当我将时间切换到最后 10 分钟 (-10m) 时，我没有得到任何数据，因此它看起来像这样

填充

另外，我们需要提供填充。填充是线条的分组方式。在本例中，我们通过获取所有数据类型为字符串的列来获得填充

const findStringColumns = (table) =>
  table.columnKeys.filter(k => table.getColumnType(k) === 'string')

 const fill = findStringColumns(this.state.table)

对于上述情况，填充变量为

["result", "_field", "_measurement", "cpu", "host"]

因此，每条线都按结果、_field、_measurement、cpu 和 host 分组；此外，所有这些项目都显示在图例中

如果将代码更改为 *only* have ['_result', 'cpu']，则它看起来像这样。

这是因为使线条不同的数据位于“_field”列中，因此如果没有该列，Giraffe 会被告知数据都属于同一条线。因此，它们都具有相同的颜色。当填充告诉图表如何对项目进行分组时，颜色会更改。

例如，当填充为

const fill=["result", "cpu", "host", '_field'];

然后图表为

仅当填充等于

const fill=["result", '_field'];

图表为

您会注意到，除了数值之外，图例仅添加了 _field。

如果添加了 cpu，则 cpu 值会显示在图例中，但图表看起来完全相同。

这就是我对 Giraffe 的介绍！

相关资源

我在此处包含了相关资源，全部集中在一处，以便于访问。其中一些已在文档前面介绍过，另一些仅在此处引用。

• 您可以观看 Kristina Robinson 在她的演讲 Meet the Experts: Visualize Your Time-Stamped Data Using the React-Based Giraffe Library 中介绍的另一个示例。
• Giraffe 快速入门：您可以在其中完全从头开始创建一个非常简单的图表。这是一种创建您自己的带注释的 csv 表格并仅显示它的方法。
• 示例项目列表
• Flux 文档
• 开始和停止时间
• 时间戳快捷方式格式