介绍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 网络应用程序中显示的图表；无论是使用仪表板还是“探索”功能。

在遵循上方链接中的说明时，请注意以下几点

1. 这有一个代理和客户端目录。代理目录包含一个本地服务器，该服务器与您的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

InfluxData的一位资深软件工程师Gene Hynson创建了这个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文件中设置间隔。

代码中设置为5秒（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在这里，而时间戳快捷格式详情请在这里找到。

这里是一个具有更长时间范围的图表（2小时而不是5分钟）。

我亲自将范围更改为-2d以获取最后两天的数据；因为这正是我想要的范围。

但是，如果您查看图表，它显示的是时间，并且时间跨度只有一小时。这是因为我在两天前使用的数据桶大约活跃了一个小时，因此它显示了最后两天内的所有数据，然后显示了它所拥有的数据。如果您进行查询，并且没有数据，那么图表中将不会显示任何内容，这会非常令人沮丧。因此，在将其放入独立的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"]

因此，每行都是通过result, _field, _measurement, cpu, 和 host进行分组的；此外，所有这些项都显示在图例中

如果代码改为仅包含['_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 文档
• 开始和结束时间
• 时间戳快捷格式化