写Kibana插件——可视化使用数据

Writing Kibana 4 Plugins – Visualizations using Data

在阅读本教程以前，您须要阅读第2部分 - 简单可视化。

　　在本教程系列的前一部分（这是本部分必读的一节）中，您已经学会了建立一个简单的可视化，它不须要访问Elasticsearch的数据。在这一部分，咱们将编写另一个插件，使用聚合（像极了可视化）从Elasticsearch访问数据。

　　咱们将建立一个很是简单的标签云插件，它将桶名称显示为标签，而且根据指标聚合的结果决定了标签的字体大小。若是你不熟悉桶和指标聚合，能够看看个人Kibana 4 Visualize教程。

　　本教程的来源能够在GitHub上找到：https://github.com/timroes/tr-k4p-tagcloud

　　本教程中将使用名称tr-k4p-tagcloud。您必须用适当的惟一插件名称替换它。

The tagcloud visualization

　　首先，您应该想出以什么方式想要显示哪些数据。这意味着你如今应该使用什么样的桶和指标聚合来致使什么可视化。

　　咱们保持可视化很是简单，只容许一个桶和一个指标聚合。桶聚合将肯定将显示哪些标签（每一个桶将致使一个标签）。指标聚合将决定每一个桶的标签的字体大小，即，越大的指标聚合致使桶标签将被显示的越大。

　　重要的是要考虑您想要可视化的多少指标或桶聚合，以及是否能够嵌套聚合等。您稍后须要在插件中定义它。

Define and register you visualization

　　如前一部分，第一步是建立index.js， package.json 并注册简单的可视化提供程序。咱们将只显示可视化提供程序的亮点（这能够在public / tagcloud.js文件中找到）。

function TagcloudProvider(Private) {
  var TemplateVisType = Private(require('ui/template_vis_type/TemplateVisType'));

  return new TemplateVisType({
    name: 'trTagcloud', // The internal id of the visualization (must be unique)
    title: 'Tagcloud', // The title of the visualization, shown to the user
    description: 'Tagcloud visualization', // The description of this vis
    icon: 'fa-cloud', // The font awesome icon of this visualization
    template: require('plugins/tr-k4p-tagcloud/tagcloud.html')
  });
}

require('ui/registry/vis_types').register(TagcloudProvider);

　　之前的教程部分有两个变化：

• 咱们在插件周围省略了define（）块（AMD模块定义）。如前一部分所述，因为与webpack捆绑在一块儿，这再也不须要了。这也意味着您不要在模块中返回提供程序功能。
• 咱们在可视化的定义中省略requireSearch：false。咱们的标签云将使用Elasticsearch的数据，所以您应该能够将其连接到搜索，如全部其余可视化消耗数据。因为requireSearch：true是咱们能够离开键的默认值。

　　您将须要建立public / tagcloud.html文件，但如今能够将其留空。您能够在GitHub项目中的标签0.1.0中找到第一步。

Define your schemas

　　对于使用数据聚合的可视化，您须要准确指定可视化须要或容许的聚合。这些所谓的模式将被添加到可视化描述中。咱们来修改咱们的描述以下：

function TagcloudProvider(Private) {
  var TemplateVisType = /* ... */;

  // Include the Schemas class, which will be used to define schemas
  var Schemas = Private(require('ui/Vis/Schemas'));

  return new TemplateVisType({
    /* every attribute shown above */,
    schemas: new Schemas([
      {
        group: 'metrics',
        name: 'tagsize',
        title: 'Tagsize',
        min: 1,
        max: 1,
        aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality', 'std_dev']
      },
      {
        group: 'buckets',
        name: 'tags',
        title: 'Tags',
        min: 1,
        max: 1,
        aggFilter: '!geohash_grid'
      }
    ])
  });
}

　　要定义您的模式，您将建立一个新的Schemas对象，它将在其构造中使用一组对象。每一个对象描述您为可视化接受的一个聚合。每一个聚合对象都具备如下密钥：

• group -- "metrics”或“buckets”。将定义要在此对象中描述哪一种聚合。
• name -- 该聚合的名称（id）。您能够稍后再次使用它来再次引用不一样的聚合。
• title -- 显示给用户的标题，当他添加聚合。应该描述如何可视化该聚合（例如，在这种状况下，桶聚合将建立标签，指标聚合将影响标签大小）
• min/max -- 该类型的最小和最大聚合数，用户能够添加。例如。垂直条形图具备“分割条”的桶聚合。它不受限制（即，没有指定最大值），由于它能够按照用户指望的条数分开屡次。在咱们的例子中，因为咱们的可视化工做原理，咱们只容许每种类型的1个聚合。
• aggFilter -- 应该容许聚合的过滤器。它是一个聚合类型的数组（见下文），在这个位置容许（如咱们的指标聚合中所示）或禁止的聚合类型数组（每一个都必须以bang为前缀）。在后面的状况下，容许全部其余聚合。若是数组只有一个元素，您也能够将其指定为字符串（如桶聚合所示）。

 　　您能够在聚合中指定一些更多的键，咱们将不会在本教程中介绍

　　您能够为指标聚合的aggFilter指定的类型以下：avg, cardinality, count, max, median, min, percentile_ranks, percentiles, std_dev, sum

　　能够为桶聚合的aggFilter指定的类型以下：date_histogram, date_range, filters, geohash_grid, histogram, ip_range, range, significant_terms, terms

　　若是您将此插件加载到Kibana内，则您能够在建立新可视化类型时，按照您所描述的方式选择聚合。

　　您能够在GitHub的0.2.0标签中找到此步骤的来源。

Writing the controller

　　为了给咱们的可视化添加逻辑，咱们将再次须要一个角度控制器（ Angular controller）。与上一部分相反，咱们将其解压缩到本身的文件中（由于它会更大一些）。所以只需将如下行添加到tagcloud.js文件的头部：

require('plugins/tr-k4p-tagcloud/tagcloudController')

　　如今，您可使用空控制器建立一个新文件public / tagcloudController.js：

var module = require('ui/modules').get('tr-k4p-tagcloud');
module.controller('TagcloudController', function($scope) {
  // Your logic will go here
});

　　要加载控制器，请按以下所示修改您的模板（public / tagcloud.html）：

<div ng-controller="TagcloudController"></div>

　　如今咱们有一个空的控制器，这将被加载为咱们的可视化。

Accessing data

　　有两个您将须要的变量继承到您的角度范围。一个是可变变量，已经在系列的上一部分看到了，其中包含有关可视化信息和用户选择的设置的信息。另外一个变量名为esResponse，并保存您的可视化的Elasticsearch 响应。Kibana将使用用户设置的聚合自动查询Elasticsearch，并考虑到当前设置的查询和过滤器。

　　为了可视化咱们的数据，咱们须要将响应数据与咱们小部件的用户配置相匹配。要访问聚合的结果，咱们能够查看$ scope.esResponse.aggregations。要在该对象中查找聚合，咱们须要它们的ids。要找到特定聚合的ids，咱们可使用$ scope.vis.aggs的几种方法来查找id。

　　在咱们的例子中，咱们首先想要从响应中提取全部的桶（即标签名称）。您能够按照如下方式访问配置标签聚合的ID：

$scope.vis.aggs.bySchemaName['tags'][0].id

　　bySchemaName对象包含名称（您在模式中指定的）到聚合配置的映射。访问标签键将为咱们提供用户为标签输入的全部聚合配置的数组。因为咱们将min和max设置为1，咱们知道只有一个对象能够检索它的id。咱们可使用该id在esResponse中查找结果。

　　您一般但愿在esResponse变量上建立一个监控，并在该变量更改时更新数据。因此让咱们把全部东西放在一块儿，显示一个简单的标签列表：

$scope.$watch('esResponse', function(resp) {
  if (!resp) {
    $scope.tags = null;
    return;
  }

  // Retrieve the id of the configured tags aggregation
  var tagsAggId = $scope.vis.aggs.bySchemaName['tags'][0].id;
  // Get the buckets of that aggregation
  var buckets = resp.aggregations[tagsAggId].buckets;
  // Transform all buckets into tag objects
  $scope.tags = buckets.map(function(bucket) {
    return {
      label: bucket.key
    };
   });
});

　　这样，$ scope.tags将具备一个以桶键做为标签的ob对象的数组（每一个桶一个）。您如今能够相应地更改您的tagcloud.html：

<div ng-controller="TagcloudController">
  <span ng-repeat="tag in tags">{{tag.label}}</span>
</div>

　　您能够在存储库中找到0.3.0的完整版本（添加了一些CSS）。

　　访问指标聚合有点简单，可是按照相似的步骤。首先，咱们须要引用咱们想要读取的指标集合：

var metricsAgg = $scope.vis.aggs.bySchemaName['tagsize'][0];

　　请注意，在这种状况下，咱们不会读出id，而是读取整个聚合对象。再次，咱们只需访问阵列中的第一个元素，由于咱们只容许配置一个指标聚合。咱们如今可使用指标聚合中的值来完成对桶的映射：

$scope.tags = buckets.map(function(bucket) {
  return {
    label: bucket.key,
    value: metricsAgg.getValue(bucket)
  };
});

　　咱们能够在指标聚合对象上使用getValue方法，并传入桶中，以返回指定桶的此指标聚合的值。以后，咱们有一个标签列表和一个值。咱们如今须要作的最后一件事是计算每一个标签的字体大小。为此，咱们将在收集标签数组时计算全部标签的最小值最大值并使用最小和最大字体大小来计算字体。因为这不是Kibana特定的，而是一些常规的AngularJS JavaScript具备，咱们不会在这里讲解，可是您能够查看GitHub上的版本0.4.0中的tagcloudController.js和tagcloud.html文件。

Accessing data sum-up

　　标签云是如何访问数据的一个很简单的例子。它只有一个桶聚合和一个指标聚合。没有多个聚合，没有嵌套聚合等。在更复杂的可视化中，您能够拥有这些。因此咱们来试一试这个过程：

• 您能够经过$ scope.vis.aggs和不一样的子方法：bySchemaName （您在模式中配置的名称）；bySchemaGroup（指标或桶）；byTypeName （例如计数，项等）访问配置的可视化对象
• 要访问桶中的数据，您能够在聚合对象上使用getValue方法。

　　通常来讲，还有一些更多的方法，在更复杂的可视化中可能会变得有用（例如，您也能够经过使用聚合对象的getKey方法获取一个桶的密钥）。要找出这些方法，您须要等待一些官方的插件开发文档，查询Kibana源码或在开发过程当中，设置本身的断点并只在您本身的浏览器开发工具中检查对象。

Adding filters on click

 　　咱们要添加到标签云中的最后一个功能是过滤。若是用户点击标签，则该值的过滤器应该自动添加到仪表板。

　　建立过滤器的第一步是检索过滤器管理器服务。咱们将使用私有服务（负责从所需模块实例化角度服务（angular services），如前面教程部分所述）来实例化过滤器服务。控制器所需的修改：

module.controller('TagcloudController', function($scope, Private) {
  var filterManager = Private(require('ui/filter_manager'));
  // ...
});

　　过滤器管理器具备一种称为add的方法，咱们可使用它来建立新的过滤器。首先让咱们改变HTML，若是用户点击过滤器则调用方法：

<span ng-click="filter(tag)" ng-repeat="tag in tags" ...>

　　如今咱们能够实现过滤方法：

$scope.filter = function(tag) {
  // Add a new filter via the filter manager
  filterManager.add(
    // The field to filter for, we can get it from the config
    $scope.vis.aggs.bySchemaName['tags'][0].params.field,
    // The value to filter for, we will read out the bucket key from the tag
    tag.label,
    // Whether the filter is negated. If you want to create a negated filter pass '-' here
    null,
    // The index pattern for the filter
    $scope.vis.indexPattern.title
  );
};

　　您能够在GitHub版本0.5.0中找到插件的最后一步。

What’s next?

 　　如今，您能够编写您的第一个可视化文件，从Elasticsearch中消耗数据。假如你编写你的可视化请牢记，你真正可以可视化的模式并确保你仅仅容许模式（schema），实际上你也检查你的代码。所以，若是容许多个桶聚合，请确保可视化每一个桶，正如咱们所作的，您将从$ scope.vis.aggs.bySchemaName ['foobar']得到，而不只仅是第一个。

 

原文地址：https://www.timroes.de/2015/12/06/writing-kibana-4-plugins-visualizations-using-data/