在整个应用开发中最为重要的是 Datasource Plugin 模块的开发，下面我们以该模块为例进行详细介绍。

Datasource Plugin 的开发

Datasource Plugin 中有3个必须文件：Datasource、 QueryCtrl 和 ConfigCtrl；

import { QueryCtrl } from ‘grafana/app/plugins/sdk‘;

export class TCMonitorDatasourceQueryCtrl extends QueryCtrl {
static templateUrl = ‘datasource/partials/query.editor.html‘;
datasource: any; // 对应 datasource.ts 实例的对象
panelCtrl: any; // 对应 Panel 的实例对象
target: { // 具体的查询条件信息保存
refId: string;
namespace: string;
service: string;
showInstanceDetails: boolean;
};
defaults = { // 初始化值
namespace: ‘‘,
service: ‘‘,
showInstanceDetails: false,
...InitServiceState,
};

lastQuery: string;
lastQueryError?: string;

/** @ngInject */
constructor($scope, $injector, private templateSrv) {
super($scope, $injector);
_.defaultsDeep(this.target, this.defaults);
this.panelCtrl.events.on(‘data-received‘, this.onDataReceived.bind(this), $scope);
}

// Panel 实例的数据接收处理函数
onDataReceived(dataList) {
this.lastQueryError = undefined;
this.lastQuery = ‘‘;
const anySeriesFromQuery: any = _.find(dataList, { refId: this.target.refId });
if (anySeriesFromQuery) {
this.lastQuery = anySeriesFromQuery.query;
}
}

// Panel 数据查询失败的调用函数
onDataError(err) {
this.handleQueryCtrlError(err);
}

handleQueryCtrlError(err) {...}
// 省略其它详细代码
}

对应视图 View 中的部分代码如下，<query-editor-row query-ctrl="ctrl"></query-editor-row> 标签的内容会加入到Add Query模板中：

<query-editor-row query-ctrl="ctrl" class="generic-datasource-query-row" has-text-edit-mode="true">
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label query-keyword width-9">Namespace</label>
<div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
<select class="gf-form-input min-width-12" ng-model="ctrl.target.namespace" ng-options="f as f for f in ctrl.namespaces"
ng-change="ctrl.onNamespaceChange()"></select>
</div>
</div>
</div>
<!-- 省略更多详情 -->

<!-- 新增不同的云产品，需要在该处增加新产品独有的配置页面 -->
<!-- CVM -->
<cvm-query
ng-if="ctrl.target.service===‘cvm‘"
target="ctrl.target.cvm"
show-detail="ctrl.checkShowDetail(‘instance‘)"
datasource="ctrl.datasource"
on-change="ctrl.onInstanceQueryChange()"
region="ctrl.replace(ctrl.target.cvm.region)"
></cvm-query>

<!-- Global error message -->
<div class="gf-form" ng-show="ctrl.lastQueryError">
<pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
</div>
</query-editor-row>

QueryCtrl 类是查询面板的入口，其中 Namespace、Region、MetricName、 Period、 Insatnce 查询条件是腾讯云产品共有的，其业务逻辑实现在 QueryCtrl 类中。对于自定义业务，则可在自定义QueryCtrl 类中实现单独的 Angular 组件。以上面图片显示的面板为例，其中 ShowDetail 控制获取特定业务的实例列表数据，因此需抽象到单独的 Angular 组件中。新增产品则需要在 tc_monitor 目录实现各自的 query.ts 类，并在 index.tx 文件中通过 import 注册该组件，则对应在 query.editor.html 中引入产品实现的组件即可。

 

 

/* 文件路径为 /src/datasource/config.ctrl.ts */
import * as _ from ‘lodash‘;
import { SERVICES } from ‘./tc_monitor‘;

export class TCMonitorDatasourceConfigCtrl {
static templateUrl = ‘datasource/partials/config.html‘; // 指定该Controller 对应 View 文件，且实际路径为 /src/datasource/partials/config.html
current: any;
/** @ngInject */
constructor($scope) {
this.current.jsonData.services = SERVICES;
_.forEach(this.current.jsonData.services, (service) => {
this.current.jsonData[service.service] = true;
});
}
}