介绍Grafana的Lightstep Metrics插件Chris Sackes是Lightstep的一名软件工程师。

Lightstep强大的指标报告和分析现在可以提供给Grafana用户。使用新的Lightstep Metrics for Grafana插件，你可以直接在你的Grafana实例中查看报告给Lightstep的指标数据。当你注意到系统中的一个变化时，你就可以通过点击图表导航到Lightstep的变化情报来调查是什么原因造成的。今天我们就来看看我们是如何创建这个新工具的。

创建该插件

为了在Grafana中显示报告给Lightstep的度量数据，我们创建了一个数据源插件。Grafana数据源插件通过获取数据并将其转换为与Grafana兼容的格式，从而实现与外部数据源的工作。Grafana为创建这些插件提供了易于使用的资源，包括一个教程和一个CLI工具包。你可以在GitHub上查看完成的插件的源代码，网址是lightstep/lightstep-metrics-datasource。

使用grafana-toolkit ，我们首先用plugin:create 命令从一个模板中创建了插件的源文件，它生成了开始使用所需的所有文件:

ConfigEditor.tsx 用于插件配置用户界面的React组件
QueryEditor.tsx 用于编写图表查询的React组件
datasource.ts 数据获取和转换功能
types.ts 插件的共享TypeScript类型定义
plugin.json 插件的一般信息和元数据定义

使用配置编辑器

为了从Lightstep的公共API请求度量数据，我们需要让用户用他们的组织、项目和API密钥信息来配置数据源。Grafana配置编辑器使用@grafana/ui 包中的表单字段组件提供了一套标准的UI输入元素。

为了安全起见，API密钥被作为敏感数据管理，使用Grafana的secureJsonData 机制。通过将API密钥值保存为secureJsonData值，Grafana在服务器上自动对该值进行加密，然后再存储。加密后，API密钥值就不能再从浏览器中访问。来自Grafana的查询请求通过一个数据源代理传递，其中包括API密钥值，用于验证针对Lightstep公共API的请求。

Grafana插件为定义配置编辑器的值提供了有用的类型:


/**
* These are options configured for each DataSource instance
*/
export interface LightstepDataSourceOptions extends DataSourceJsonData {
  orgName: string;
  projectName: string;
}

/**
* Value that is used in the backend, but never sent over HTTP to the frontend
*/
export interface LightstepSecureJsonData {
  apiKey?: string;
}

查询Lightstep的API

现在我们可以配置这个插件了，我们准备开始向Lightstep的公共API发出API请求，以获取指标数据。在datasource.ts ，query 函数定义了数据的获取和转换逻辑。在这个函数中，我们把从Lightstep返回的数据转换成与Grafana兼容的格式。

实际获取数据的最后一步是定义由服务器执行的数据源代理路由:

{
  "path": "query",
  "url": "https://api.lightstep.com/public/v0.2/{{ .JsonData.orgName }}/projects/{{ .JsonData.projectName }}/telemetry/query_timeseries",
  "headers": [
    {
      "name": "Authorization",
      "content": "Bearer {{ .SecureJsonData.apiKey }}"
    },
    {
      "name": "Content-Type",
      "content": "application/json"
    }
  ]
}

转换为WideDataFrames以提高性能

Lightstep返回的度量数据为每个请求的系列（查询）提供了一个按时间戳排序的数据集:

data:
  attributes: {
    series: [
      { points: [[6, 123], [9, 124], [12, 125], …] },
      { points: [[17, 123], [24, 124], [19, 125], …] },
      ...
    ]
  }
}

为了在Grafana中使用这些指标数据，我们将其转换为DataFrames，特别是WideDataFrames。使用WideDataFrames大大加快了Grafana图表的渲染性能。WideDataFrames共享一个时间属性，用于表示时间序列数据。因此，我们不是为每个系列创建单独的DataFrames，每个系列都有自己的时间字段，而是将系列的数据存储在一起，用一个时间字段:

[
  { type: FieldType.time, values: [123, 124, 125] },
  { type: FieldType.number, values: [6, 9, 12] },
  { type: FieldType.number, values: [17, 24, 19] },
  ...
]

秘密的酱汁链接到变化情报

最后，也许是最令人兴奋的更新是在Grafana图表中增加了与Lightstep的Change Intelligence功能的链接能力。为了实现这一点，我们通过添加一个links 配置，为我们的数据源中的每个系列自动生成数据链接:

[
  {
    type: FieldType.number,
    values: [6, 9, 12],
    links: [
      {
        url: `https://app.lightstep.com/${projectName}/chart-relay?${query}`,
        targetBlank: true,
        title: 'View what changed in Lightstep',
      }
    ]
  },
  ...
]

有了这个设置，点击图表上的一个点，就可以得到一个带有Lightstep Change Intelligence自定义URL的数据链接。