Skip to content

N
nexpie-grafana-theme
Commit 2fc8da7a by Torkel Ödegaard
Options

feat(plugins): migrated cloudwatch and fixed a bunch of issues with data source edit views

parent 0bea6aba
Showing with 94 additions and 150 deletions
public/app/plugins/datasource/cloudwatch/datasource.d.ts
declare var Datasource: any; declare var CloudWatchDatasource: any;
export default Datasource; export {CloudWatchDatasource};
public/app/plugins/datasource/cloudwatch/datasource.js
...@@ -357,5 +357,7 @@ function (angular, _, moment, dateMath) { ...@@ -357,5 +357,7 @@ function (angular, _, moment, dateMath) {
} }
return CloudWatchDatasource; return {
CloudWatchDatasource: CloudWatchDatasource
};
}); });
public/app/plugins/datasource/cloudwatch/module.js deleted 100644 → 0
define([
'./datasource',
'./query_parameter_ctrl',
'./query_ctrl',
],
function (CloudWatchDatasource) {
'use strict';
function metricsQueryEditor() {
return {controller: 'CloudWatchQueryCtrl', templateUrl: 'public/app/plugins/datasource/cloudwatch/partials/query.editor.html'};
}
function annotationsQueryEditor() {
return {templateUrl: 'public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html'};
}
function configView() {
return {templateUrl: 'public/app/plugins/datasource/cloudwatch/partials/edit_view.html'};
}
return {
Datasource: CloudWatchDatasource,
configView: configView,
annotationsQueryEditor: annotationsQueryEditor,
metricsQueryEditor: metricsQueryEditor,
};
});
public/app/plugins/datasource/cloudwatch/module.ts 0 → 100644
import './query_parameter_ctrl';
import {CloudWatchDatasource} from './datasource';
import {CloudWatchQueryCtrl} from './query_ctrl';
class CloudWatchConfigCtrl {
static templateUrl = 'public/app/plugins/datasource/cloudwatch/partials/config.html';
}
class CloudWatchAnnotationsQueryCtrl {
static templateUrl = 'public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html';
}
export {
CloudWatchDatasource as Datasource,
CloudWatchQueryCtrl as QueryCtrl,
CloudWatchConfigCtrl as ConfigCtrl,
CloudWatchAnnotationsQueryCtrl as AnnotationsQueryCtrl,
};
public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html
<cloudwatch-query-parameter target="annotation" datasource="datasource"></cloudwatch-query-parameter> <cloudwatch-query-parameter target="ctrl.annotation" datasource="ctrl.datasource"></cloudwatch-query-parameter>
public/app/plugins/datasource/cloudwatch/partials/edit_view.html → public/app/plugins/datasource/cloudwatch/partials/config.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
Credentials profile name<tip>Credentials profile name, as specified in ~/.aws/credentials, leave blank for default</tip> Credentials profile name<tip>Credentials profile name, as specified in ~/.aws/credentials, leave blank for default</tip>
</li> </li>
<li> <li>
<input type="text" class="tight-form-input input-large last" ng-model='current.database' placeholder="default"></input> <input type="text" class="tight-form-input input-large last" ng-model='ctrl.current.database' placeholder="default"></input>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
...@@ -19,12 +19,12 @@ ...@@ -19,12 +19,12 @@
<li class="tight-form-item" style="width: 200px"> <li class="tight-form-item" style="width: 200px">
Default Region<tip>Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region.</tip> Default Region<tip>Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region.</tip>
</li> </li>
<!-- <!--
Whenever this list is updated, backend list should also be updated. Whenever this list is updated, backend list should also be updated.
Please update the region list in pkg/api/cloudwatch/metric.go Please update the region list in pkg/api/cloudwatch/metric.go
--> -->
<li> <li>
<select class="tight-form-input input-large last" ng-model="current.jsonData.defaultRegion" ng-options="region for region in ['ap-northeast-1', 'ap-northeast-2', 'ap-southeast-1', 'ap-southeast-2', 'cn-north-1', 'eu-central-1', 'eu-west-1', 'sa-east-1', 'us-east-1', 'us-west-1', 'us-west-2']"></select> <select class="tight-form-input input-large last" ng-model="ctrl.current.jsonData.defaultRegion" ng-options="region for region in ['ap-northeast-1', 'ap-northeast-2', 'ap-southeast-1', 'ap-southeast-2', 'cn-north-1', 'eu-central-1', 'eu-west-1', 'sa-east-1', 'us-east-1', 'us-west-1', 'us-west-2']"></select>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
......
public/app/plugins/datasource/cloudwatch/partials/query.editor.html
<div class="tight-form"> <query-editor-row ctrl="ctrl">
<ul class="tight-form-list pull-right"> </query-editor-row>
<li class="tight-form-item">
<div class="dropdown">
<a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem"><a tabindex="1" ng-click="ctrl.duplicateDataQuery(target)">Duplicate</a></li>
<li role="menuitem"><a tabindex="1" ng-click="ctrl.moveDataQuery($index, $index-1)">Move up</a></li>
<li role="menuitem"><a tabindex="1" ng-click="ctrl.moveDataQuery($index, $index+1)">Move down</a></li>
</ul>
</div>
</li>
<li class="tight-form-item last">
<a class="pointer" tabindex="1" ng-click="ctrl.removeDataQuery(target)">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
<ul class="tight-form-list"> <cloudwatch-query-parameter target="ctrl.target" datasource="ctrl.datasource" on-change="ctrl.refresh()"></cloudwatch-query-parameter>
<li class="tight-form-item" style="min-width: 15px; text-align: center">
{{target.refId}}
</li>
<li>
<a class="tight-form-item"
ng-click="target.hide = !target.hide; ctrl.refresh();"
role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<cloudwatch-query-parameter target="target" datasource="ctrl.datasource" on-change="refreshMetricData()"></cloudwatch-query-parameter>
public/app/plugins/datasource/cloudwatch/query_ctrl.js deleted 100644 → 0
define([
'angular',
'lodash',
],
function (angular, _) {
'use strict';
var module = angular.module('grafana.controllers');
module.controller('CloudWatchQueryCtrl', function($scope) {
$scope.init = function() {
$scope.aliasSyntax = '{{metric}} {{stat}} {{namespace}} {{region}} {{<dimension name>}}';
};
$scope.refreshMetricData = function() {
if (!_.isEqual($scope.oldTarget, $scope.target)) {
$scope.oldTarget = angular.copy($scope.target);
$scope.ctrl.refresh();
}
};
$scope.init();
});
});
public/app/plugins/datasource/cloudwatch/query_ctrl.ts 0 → 100644
///<reference path="../../../headers/common.d.ts" />
import './query_parameter_ctrl';
import _ from 'lodash';
import {QueryCtrl} from 'app/features/panel/panel';
export class CloudWatchQueryCtrl extends QueryCtrl {
static templateUrl = 'public/app/plugins/datasource/cloudwatch/partials/query.editor.html';
aliasSyntax: string;
/** @ngInject **/
constructor($scope, $injector) {
super($scope, $injector);
this.aliasSyntax = '{{metric}} {{stat}} {{namespace}} {{region}} {{<dimension name>}}';
}
}
public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.js
...@@ -9,7 +9,7 @@ function (angular, _) { ...@@ -9,7 +9,7 @@ function (angular, _) {
module.directive('cloudwatchQueryParameter', function() { module.directive('cloudwatchQueryParameter', function() {
return { return {
templateUrl: 'app/plugins/datasource/cloudwatch/partials/query.parameter.html', templateUrl: 'public/app/plugins/datasource/cloudwatch/partials/query.parameter.html',
controller: 'CloudWatchQueryParameterCtrl', controller: 'CloudWatchQueryParameterCtrl',
restrict: 'E', restrict: 'E',
scope: { scope: {
......
public/app/plugins/datasource/cloudwatch/specs/datasource_specs.ts
...@@ -3,7 +3,7 @@ import "../datasource"; ...@@ -3,7 +3,7 @@ import "../datasource";
import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common';
import moment from 'moment'; import moment from 'moment';
import helpers from 'test/specs/helpers'; import helpers from 'test/specs/helpers';
import Datasource from "../datasource"; import {CloudWatchDatasource} from "../datasource";
describe('CloudWatchDatasource', function() { describe('CloudWatchDatasource', function() {
var ctx = new helpers.ServiceTestContext(); var ctx = new helpers.ServiceTestContext();
...@@ -20,7 +20,7 @@ describe('CloudWatchDatasource', function() { ...@@ -20,7 +20,7 @@ describe('CloudWatchDatasource', function() {
ctx.$q = $q; ctx.$q = $q;
ctx.$httpBackend = $httpBackend; ctx.$httpBackend = $httpBackend;
ctx.$rootScope = $rootScope; ctx.$rootScope = $rootScope;
ctx.ds = $injector.instantiate(Datasource, {instanceSettings: instanceSettings}); ctx.ds = $injector.instantiate(CloudWatchDatasource, {instanceSettings: instanceSettings});
})); }));
describe('When performing CloudWatch query', function() { describe('When performing CloudWatch query', function() {
......
public/app/plugins/datasource/elasticsearch/edit_view.ts → public/app/plugins/datasource/elasticsearch/config_ctrl.ts
...@@ -3,37 +3,32 @@ ...@@ -3,37 +3,32 @@
import angular from 'angular'; import angular from 'angular';
import _ from 'lodash'; import _ from 'lodash';
export class EditViewCtrl { export class ElasticConfigCtrl {
static templateUrl = 'public/app/plugins/datasource/elasticsearch/partials/config.html';
current: any;
/** @ngInject */ /** @ngInject */
constructor($scope) { constructor($scope) {
$scope.indexPatternTypes = [ this.current.jsonData.timeField = this.current.jsonData.timeField || '@timestamp';
{name: 'No pattern', value: undefined}, }
{name: 'Hourly', value: 'Hourly', example: '[logstash-]YYYY.MM.DD.HH'},
{name: 'Daily', value: 'Daily', example: '[logstash-]YYYY.MM.DD'},
{name: 'Weekly', value: 'Weekly', example: '[logstash-]GGGG.WW'},
{name: 'Monthly', value: 'Monthly', example: '[logstash-]YYYY.MM'},
{name: 'Yearly', value: 'Yearly', example: '[logstash-]YYYY'},
];
$scope.esVersions = [
{name: '1.x', value: 1},
{name: '2.x', value: 2},
];
$scope.indexPatternTypeChanged = function() { indexPatternTypes = [
var def = _.findWhere($scope.indexPatternTypes, {value: $scope.current.jsonData.interval}); {name: 'No pattern', value: undefined},
$scope.current.database = def.example || 'es-index-name'; {name: 'Hourly', value: 'Hourly', example: '[logstash-]YYYY.MM.DD.HH'},
}; {name: 'Daily', value: 'Daily', example: '[logstash-]YYYY.MM.DD'},
{name: 'Weekly', value: 'Weekly', example: '[logstash-]GGGG.WW'},
{name: 'Monthly', value: 'Monthly', example: '[logstash-]YYYY.MM'},
{name: 'Yearly', value: 'Yearly', example: '[logstash-]YYYY'},
];
esVersions = [
{name: '1.x', value: 1},
{name: '2.x', value: 2},
];
indexPatternTypeChanged() {
var def = _.findWhere(this.indexPatternTypes, {value: this.current.jsonData.interval});
this.current.database = def.example || 'es-index-name';
} }
} }
function editViewDirective() {
return {
templateUrl: 'public/app/plugins/datasource/elasticsearch/partials/edit_view.html',
controller: EditViewCtrl,
};
};
export default editViewDirective;
public/app/plugins/datasource/elasticsearch/module.ts
import {ElasticDatasource} from './datasource'; import {ElasticDatasource} from './datasource';
import {ElasticQueryCtrl} from './query_ctrl'; import {ElasticQueryCtrl} from './query_ctrl';
import {ElasticConfigCtrl} from './config_ctrl';
class ElasticConfigCtrl {
static templateUrl = 'public/app/plugins/datasource/elasticsearch/partials/config.html';
}
class ElasticQueryOptionsCtrl { class ElasticQueryOptionsCtrl {
static templateUrl = 'public/app/plugins/datasource/elasticsearch/partials/query.options.html'; static templateUrl = 'public/app/plugins/datasource/elasticsearch/partials/query.options.html';
......
public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html
<div class="editor-row"> <div class="editor-row">
<div class="section" ng-if="annotation.index"> <div class="section" ng-if="ctrl.annotation.index">
<h5>Index name</h5> <h5>Index name</h5>
<div class="editor-option"> <div class="editor-option">
<input type="text" class="span4" ng-model='annotation.index' placeholder="events-*"></input> <input type="text" class="span4" ng-model='ctrl.annotation.index' placeholder="events-*"></input>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<h5>Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></h5> <h5>Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></h5>
<div class="editor-option"> <div class="editor-option">
<input type="text" class="span6" ng-model='annotation.query' placeholder="tags:deploy"></input> <input type="text" class="span6" ng-model='ctrl.annotation.query' placeholder="tags:deploy"></input>
</div> </div>
</div> </div>
</div> </div>
...@@ -18,22 +18,22 @@ ...@@ -18,22 +18,22 @@
<h5>Field mappings</h5> <h5>Field mappings</h5>
<div class="editor-option"> <div class="editor-option">
<label class="small">Time</label> <label class="small">Time</label>
<input type="text" class="input-small" ng-model='annotation.timeField' placeholder="@timestamp"></input> <input type="text" class="input-small" ng-model='ctrl.annotation.timeField' placeholder="@timestamp"></input>
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Title</label> <label class="small">Title</label>
<input type="text" class="input-small" ng-model='annotation.titleField' placeholder="desc"></input> <input type="text" class="input-small" ng-model='ctrl.annotation.titleField' placeholder="desc"></input>
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Tags</label> <label class="small">Tags</label>
<input type="text" class="input-small" ng-model='annotation.tagsField' placeholder="tags"></input> <input type="text" class="input-small" ng-model='ctrl.annotation.tagsField' placeholder="tags"></input>
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Text</label> <label class="small">Text</label>
<input type="text" class="input-small" ng-model='annotation.textField' placeholder=""></input> <input type="text" class="input-small" ng-model='ctrl.annotation.textField' placeholder=""></input>
</div> </div>
</div> </div>
</div> </div>
public/app/plugins/datasource/elasticsearch/partials/edit_view.html → public/app/plugins/datasource/elasticsearch/partials/config.html
<datasource-http-settings></datasource-http-settings> <datasource-http-settings current="ctrl.current">
</datasource-http-settings>
<h4>Elasticsearch details</h4> <h4>Elasticsearch details</h4>
...@@ -8,13 +9,13 @@ ...@@ -8,13 +9,13 @@
Index name Index name
</li> </li>
<li> <li>
<input type="text" class="tight-form-input input-xlarge" ng-model='current.database' placeholder="" required></input> <input type="text" class="tight-form-input input-xlarge" ng-model='ctrl.current.database' placeholder="" required></input>
</li> </li>
<li class="tight-form-item"> <li class="tight-form-item">
Pattern Pattern
</li> </li>
<li> <li>
<select class="input-medium tight-form-input" ng-model="current.jsonData.interval" ng-options="f.value as f.name for f in indexPatternTypes" ng-change="indexPatternTypeChanged()" ></select> <select class="input-medium tight-form-input" ng-model="ctrl.current.jsonData.interval" ng-options="f.value as f.name for f in ctrl.indexPatternTypes" ng-change="ctrl.indexPatternTypeChanged()" ></select>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
...@@ -25,7 +26,7 @@ ...@@ -25,7 +26,7 @@
Time field name Time field name
</li> </li>
<li> <li>
<input type="text" class="tight-form-input input-xlarge" ng-model='current.jsonData.timeField' placeholder="" required ng-init="current.jsonData.timeField = current.jsonData.timeField || '@timestamp'"></input> <input type="text" class="tight-form-input input-xlarge" ng-model='ctrl.current.jsonData.timeField' placeholder="" required ng-init=""></input>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
...@@ -36,7 +37,7 @@ ...@@ -36,7 +37,7 @@
Version Version
</li> </li>
<li> <li>
<select class="input-medium tight-form-input" ng-model="current.jsonData.esVersion" ng-options="f.value as f.name for f in esVersions"></select> <select class="input-medium tight-form-input" ng-model="ctrl.current.jsonData.esVersion" ng-options="f.value as f.name for f in ctrl.esVersions"></select>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
...@@ -52,7 +53,7 @@ ...@@ -52,7 +53,7 @@
Group by time interval Group by time interval
</li> </li>
<li> <li>
<input type="text" class="input-medium tight-form-input input-xlarge" ng-model="current.jsonData.timeInterval" <input type="text" class="input-medium tight-form-input input-xlarge" ng-model="ctrl.current.jsonData.timeInterval"
spellcheck='false' placeholder="example: >10s"> spellcheck='false' placeholder="example: >10s">
</li> </li>
<li class="tight-form-item"> <li class="tight-form-item">
......
public/app/plugins/datasource/influxdb/partials/config.html
<datasource-http-settings></datasource-http-settings> <datasource-http-settings current="ctrl.current">
</datasource-http-settings>
<h4>InfluxDB Details</h4> <h4>InfluxDB Details</h4>
...@@ -8,7 +9,7 @@ ...@@ -8,7 +9,7 @@
Database Database
</li> </li>
<li> <li>
<input type="text" class="tight-form-input input-large" ng-model='current.database' placeholder="" required></input> <input type="text" class="tight-form-input input-large" ng-model='ctrl.current.database' placeholder="" required></input>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
...@@ -19,13 +20,13 @@ ...@@ -19,13 +20,13 @@
User User
</li> </li>
<li> <li>
<input type="text" class="tight-form-input input-large" ng-model='current.user' placeholder="" required></input> <input type="text" class="tight-form-input input-large" ng-model='ctrl.current.user' placeholder="" required></input>
</li> </li>
<li class="tight-form-item"> <li class="tight-form-item">
Password Password
</li> </li>
<li> <li>
<input type="password" class="tight-form-input input-large" ng-model='current.password' placeholder="" required></input> <input type="password" class="tight-form-input input-large" ng-model='ctrl.current.password' placeholder="" required></input>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
......
public/less/panel.less
...@@ -86,7 +86,6 @@ ...@@ -86,7 +86,6 @@
} }
.panel-fullscreen { .panel-fullscreen {
margin: 5px 20px;
.panel-title-container { .panel-title-container {
padding: 8px; padding: 8px;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment