Question

我正在开发自己制作的非常基本的面板插件。我使用了Grafana文档中的Angular。一种“ Hello world”示例。

但是不显示来自数据源的数据。我已经了解到函数 handleDataFrame 具有将数据从数据源连接到面板的作用。但是似乎从未调用过该函数。

这是代码：

import { MetricsPanelCtrl } from 'grafana/app/plugins/sdk';
import defaultsDeep from 'lodash/defaultsDeep';

import { DataFrame } from '@grafana/data';

interface KeyValue {
  key: string;
  value: any;
}

export default class SimpleCtrl extends MetricsPanelCtrl {
  static templateUrl = 'partials/module.html';

  panelDefaults = {
    text: 'Hello World',
  };

  // Simple example showing the last value of all data
  firstValues: KeyValue[] = [];

  /** @ngInject */
  constructor($scope, $injector) {
    super($scope, $injector);
    defaultsDeep(this.panel, this.panelDefaults);

    // Get results directly as DataFrames
    (this as any).dataFormat = 'series';

    this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
    this.events.on('render', this.onRender.bind(this));
    this.events.on('data-error', this.onDataError.bind(this));
  }

  onInitEditMode() {
    this.addEditorTab('Options', `public/plugins/${this.pluginId}/partials/options.html`, 2);
  }

  onRender() {
    if (!this.firstValues || !this.firstValues.length) {
      return;
    }

    // Tells the screen capture system that you finished
    this.renderingCompleted();
  }

  onDataError(err: any) {
    console.log('onDataError', err);
  }

  // 6.3+ get typed DataFrame directly
  handleDataFrame(data: DataFrame[]) {
    const values: KeyValue[] = [];

    for (const frame of data) {
      for (let i = 0; i < frame.fields.length; i++) {
        values.push({
          key: frame.fields[i].name,
          value: frame.fields[i].values,
        });
      }
    }
    console.log(values);
    this.firstValues = values;
  }
}

export { SimpleCtrl as PanelCtrl };

<div>
  <h2>{{ctrl.panel.text}}</h2>
  <h2>{{ctrl.firstValues}}</h2>
  <div ng-repeat="first in ctrl.firstValues">
    <b>{{first.key}}:</b> {{first.value}}
  </div>
</div>

由于该 {{ctrl.firstValues}} 为空，因此以下代码也是如此。

您知道为什么handleDataFrame无法正常工作吗？

Grafana将数据源连接到自定义面板

0 个答案: