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 82 additions and 138 deletions
public/app/plugins/datasource/cloudwatch/datasource.d.ts
declare var Datasource: any;
export default Datasource;
declare var CloudWatchDatasource: any;
export {CloudWatchDatasource};
public/app/plugins/datasource/cloudwatch/datasource.js
......@@ -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 @@
Credentials profile name<tip>Credentials profile name, as specified in ~/.aws/credentials, leave blank for default</tip>
</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>
</ul>
<div class="clearfix"></div>
......@@ -24,7 +24,7 @@
Please update the region list in pkg/api/cloudwatch/metric.go
-->
<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>
</ul>
<div class="clearfix"></div>
......
public/app/plugins/datasource/cloudwatch/partials/query.editor.html
<div class="tight-form">
<ul class="tight-form-list pull-right">
<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>
<query-editor-row ctrl="ctrl">
</query-editor-row>
<ul class="tight-form-list">
<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>
<cloudwatch-query-parameter target="ctrl.target" datasource="ctrl.datasource" on-change="ctrl.refresh()"></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, _) {
module.directive('cloudwatchQueryParameter', function() {
return {
templateUrl: 'app/plugins/datasource/cloudwatch/partials/query.parameter.html',
templateUrl: 'public/app/plugins/datasource/cloudwatch/partials/query.parameter.html',
controller: 'CloudWatchQueryParameterCtrl',
restrict: 'E',
scope: {
......
public/app/plugins/datasource/cloudwatch/specs/datasource_specs.ts
......@@ -3,7 +3,7 @@ import "../datasource";
import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common';
import moment from 'moment';
import helpers from 'test/specs/helpers';
import Datasource from "../datasource";
import {CloudWatchDatasource} from "../datasource";
describe('CloudWatchDatasource', function() {
var ctx = new helpers.ServiceTestContext();
......@@ -20,7 +20,7 @@ describe('CloudWatchDatasource', function() {
ctx.$q = $q;
ctx.$httpBackend = $httpBackend;
ctx.$rootScope = $rootScope;
ctx.ds = $injector.instantiate(Datasource, {instanceSettings: instanceSettings});
ctx.ds = $injector.instantiate(CloudWatchDatasource, {instanceSettings: instanceSettings});
}));
describe('When performing CloudWatch query', function() {
......
public/app/plugins/datasource/elasticsearch/edit_view.ts → public/app/plugins/datasource/elasticsearch/config_ctrl.ts
......@@ -3,11 +3,16 @@
import angular from 'angular';
import _ from 'lodash';
export class EditViewCtrl {
export class ElasticConfigCtrl {
static templateUrl = 'public/app/plugins/datasource/elasticsearch/partials/config.html';
current: any;
/** @ngInject */
constructor($scope) {
$scope.indexPatternTypes = [
this.current.jsonData.timeField = this.current.jsonData.timeField || '@timestamp';
}
indexPatternTypes = [
{name: 'No pattern', value: undefined},
{name: 'Hourly', value: 'Hourly', example: '[logstash-]YYYY.MM.DD.HH'},
{name: 'Daily', value: 'Daily', example: '[logstash-]YYYY.MM.DD'},
......@@ -16,24 +21,14 @@ export class EditViewCtrl {
{name: 'Yearly', value: 'Yearly', example: '[logstash-]YYYY'},
];
$scope.esVersions = [
esVersions = [
{name: '1.x', value: 1},
{name: '2.x', value: 2},
];
$scope.indexPatternTypeChanged = function() {
var def = _.findWhere($scope.indexPatternTypes, {value: $scope.current.jsonData.interval});
$scope.current.database = def.example || 'es-index-name';
};
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 {ElasticQueryCtrl} from './query_ctrl';
class ElasticConfigCtrl {
static templateUrl = 'public/app/plugins/datasource/elasticsearch/partials/config.html';
}
import {ElasticConfigCtrl} from './config_ctrl';
class ElasticQueryOptionsCtrl {
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="section" ng-if="annotation.index">
<div class="section" ng-if="ctrl.annotation.index">
<h5>Index name</h5>
<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 class="section">
<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">
<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>
......@@ -18,22 +18,22 @@
<h5>Field mappings</h5>
<div class="editor-option">
<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 class="editor-option">
<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 class="editor-option">
<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 class="editor-option">
<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>
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>
......@@ -8,13 +9,13 @@
Index name
</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 class="tight-form-item">
Pattern
</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>
</ul>
<div class="clearfix"></div>
......@@ -25,7 +26,7 @@
Time field name
</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>
</ul>
<div class="clearfix"></div>
......@@ -36,7 +37,7 @@
Version
</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>
</ul>
<div class="clearfix"></div>
......@@ -52,7 +53,7 @@
Group by time interval
</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">
</li>
<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>
......@@ -8,7 +9,7 @@
Database
</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>
</ul>
<div class="clearfix"></div>
......@@ -19,13 +20,13 @@
User
</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 class="tight-form-item">
Password
</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>
</ul>
<div class="clearfix"></div>
......
public/less/panel.less
......@@ -86,7 +86,6 @@
}
.panel-fullscreen {
margin: 5px 20px;
.panel-title-container {
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