寫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/