IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 19:00:54 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(plugins): extracted first plugin row to its own component

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-02-02 16:32:36 +01:00
parent 21f6c07686
commit f2700822e9
10 changed files with 182 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
public/app/core/directives/rebuild_on_change.ts
View File

@ -32,31 +32,38 @@ function rebuildOnChange($animate) {
priority: 600,
restrict: 'E',
link: function(scope, elem, attrs, ctrl, transclude) {
var childScope, previousElements;
var uncompiledHtml;
var block, childScope, previousElements;
function cleanUp() {
if (previousElements) {
previousElements.remove();
previousElements = null;
}
if (childScope) {
childScope.$destroy();
childScope = null;
elem.empty();
}
if (block) {
previousElements = getBlockNodes(block.clone);
$animate.leave(previousElements).then(function() {
previousElements = null;
});
block = null;
}
}
scope.$watch(attrs.property, function rebuildOnChangeAction(value, oldValue) {
if (value || attrs.showNull) {
// if same value and we have childscope
// ignore this double event
if (value === oldValue && childScope) {
return;
}
if (childScope && value !== oldValue) {
cleanUp();
}
if (!childScope && (value || attrs.showNull)) {
transclude(function(clone, newScope) {
childScope = newScope;
clone[clone.length++] = document.createComment(' end rebuild on change ');
block = {clone: clone};
$animate.enter(clone, elem.parent(), elem);
});
} else {
cleanUp();
}

1
public/app/features/panel/all.js
View File

@ -5,4 +5,5 @@ define([
'./panel_loader',
'./query_ctrl',
'./panel_editor_tab',
'./query_editor_row',
], function () {});

4
public/app/features/panel/metrics_panel_ctrl.ts
View File

@ -164,12 +164,12 @@ class MetricsPanelCtrl extends PanelCtrl {
};
issueQueries(datasource) {
this.updateTimeRange();
if (!this.panel.targets || this.panel.targets.length === 0) {
return this.$q.when([]);
}
this.updateTimeRange();
var metricsQuery = {
range: this.range,
rangeRaw: this.rangeRaw,

56
public/app/features/panel/partials/query_editor_row.html Normal file
View File

@ -0,0 +1,56 @@
<div class="tight-form">
<ul class="tight-form-list pull-right">
<li ng-show="ctrl.parserError" class="tight-form-item">
<a bs-tooltip="ctrl.parserError" style="color: rgb(229, 189, 28)" role="menuitem">
<i class="fa fa-warning"></i>
</a>
</li>
<li class="tight-form-item small" ng-show="ctrl.target.datasource">
<em>{{ctrl.target.datasource}}</em>
</li>
<li class="tight-form-item" ng-if="ctrl.toggleEditorMode">
<a class="pointer" tabindex="1" ng-click="ctrl.toggleEditorMode()">
<i class="fa fa-pencil"></i>
</a>
</li>
<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.duplicateQuery()">Duplicate</a>
</li>
<li role="menuitem">
<a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a>
</li>
<li role="menuitem">
<a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a>
</li>
</ul>
</div>
</li>
<li class="tight-form-item last">
<a class="pointer" tabindex="1" ng-click="ctrl.removeQuery(target)">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
<ul class="tight-form-list">
<li class="tight-form-item" style="min-width: 15px; text-align: center">
{{ctrl.target.refId}}
</li>
<li>
<a class="tight-form-item" ng-click="ctrl.toggleHideQuery()" role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<ul class="tight-form-list" ng-transclude>
</ul>
<div class="clearfix"></div>
</div>

1
public/app/features/panel/query_ctrl.ts
View File

@ -8,6 +8,7 @@ export class QueryCtrl {
datasource: any;
panelCtrl: any;
panel: any;
hasRawMode: boolean;
constructor(public $scope, private $injector) {
this.panel = this.panelCtrl.panel;

18
public/app/features/panel/query_editor_row.ts Normal file
View File

@ -0,0 +1,18 @@
///<reference path="../../headers/common.d.ts" />
import angular from 'angular';
import $ from 'jquery';
var module = angular.module('grafana.directives');
/** @ngInject **/
function queryEditorRowDirective() {
return {
restrict: 'E',
templateUrl: 'public/app/features/panel/partials/query_editor_row.html',
transclude: true,
scope: { ctrl: "=" },
};
}
module.directive('queryEditorRow', queryEditorRowDirective);

10
public/app/partials/metrics.html
View File

@ -1,10 +1,12 @@
<div class="editor-row">
<div class="tight-form-container">
<!-- <rebuild&#45;on&#45;change property="ctrl.panel.datasource" show&#45;null="true"> -->
<!-- <plugin&#45;component type="query&#45;ctrl" ng&#45;repeat="target in ctrl.panel.targets" ng&#45;class="{'tight&#45;form&#45;disabled': target.hide}"> -->
<!-- </plugin&#45;component> -->
<!-- </rebuild&#45;on&#45;change> -->
<div ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}">
<rebuild-on-change property="ctrl.panel.datasource || target.datasource" show-null="true">
<plugin-component type="query-ctrl">
</plugin-component>
</rebuild-on-change>
</div>
</div>
<div style="margin: 20px 0 0 0">

62
public/app/plugins/datasource/graphite/partials/query.editor.html
View File

@ -1,61 +1,7 @@
<div class="tight-form">
<ul class="tight-form-list pull-right">
<li ng-show="ctrl.parserError" class="tight-form-item">
<a bs-tooltip="ctrl.parserError" style="color: rgb(229, 189, 28)" role="menuitem">
<i class="fa fa-warning"></i>
</a>
</li>
<li class="tight-form-item small" ng-show="ctrl.target.datasource">
<em>{{ctrl.target.datasource}}</em>
</li>
<li class="tight-form-item">
<a class="pointer" tabindex="1" ng-click="ctrl.toggleEditorMode()">
<i class="fa fa-pencil"></i>
</a>
</li>
<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.toggleEditorMode()">
Switch editor mode
</a>
</li>
<li role="menuitem">
<a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a>
</li>
<li role="menuitem">
<a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a>
</li>
<li role="menuitem">
<a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a>
</li>
</ul>
</div>
</li>
<li class="tight-form-item last">
<a class="pointer" tabindex="1" ng-click="ctrl.removeQuery(target)">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
<ul class="tight-form-list">
<li class="tight-form-item" style="min-width: 15px; text-align: center">
{{ctrl.target.refId}}
</li>
<li>
<a class="tight-form-item" ng-click="ctrl.toggleHideQuery()" role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<query-editor-row ctrl="ctrl" controls="true">
<span style="display: block; overflow: hidden;">
<input type="text" class="tight-form-clear-input" style="width: 100%;" ng-model="ctrl.target.target" give-focus="ctrl.target.textEditor" spellcheck='false' ng-model-onblur ng-change="ctrl.refresh()" ng-show="ctrl.target.textEditor"></input>
<input type="text" class="tight-form-clear-input" style="width: 100%;" ng-model="ctrl.target.target" give-focus="ctrl.target.textEditor" spellcheck='false' ng-model-onblur ng-change="ctrl.targetTextChanged()" ng-show="ctrl.target.textEditor"></input>
</span>
<ul class="tight-form-list" role="menu" ng-hide="ctrl.target.textEditor">
@ -69,5 +15,5 @@
<li class="dropdown" graphite-add-func>
</li>
</ul>
<div class="clearfix"></div>
</div>
</query-editor-row>

1
public/app/plugins/datasource/graphite/query_ctrl.ts
View File

@ -17,6 +17,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
segments: any[];
parserError: string;
/** @ngInject **/
constructor($scope, $injector, private uiSegmentSrv, private templateSrv) {
super($scope, $injector);

186
public/app/plugins/datasource/prometheus/partials/query.editor.html
View File

@ -1,118 +1,82 @@
<query-editor-row ctrl="ctrl" controls="true">
<li class="tight-form-item" style="width: 94px">
Query
</li>
<li>
<input type="text"
class="input-xxlarge tight-form-input"
ng-model="ctrl.target.expr"
spellcheck='false'
placeholder="query expression"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="ctrl.refreshMetricData()">
</li>
<li class="tight-form-item">
Metric
</li>
<li>
<input type="text"
class="input-medium tight-form-input"
ng-model="ctrl.target.metric"
spellcheck='false'
bs-typeahead="ctrl.suggestMetrics"
placeholder="metric name"
data-min-length=0 data-items=100>
</li>
</query-editor-row>
<div class="tight-form">
<ul class="tight-form-list pull-right">
<li class="tight-form-item small" ng-show="ctrl.target.datasource">
<em>{{ctrl.target.datasource}}</em>
</li>
<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.duplicateQuery()">Duplicate</a></li>
<li role="menuitem"><a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a></li>
<li role="menuitem"><a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a></li>
</ul>
</div>
</li>
<li class="tight-form-item last">
<a class="pointer" tabindex="1" ng-click="ctrl.removeQuery()">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
<ul class="tight-form-list" role="menu">
<li class="tight-form-item tight-form-align" style="width: 94px">
Legend format
</li>
<li>
<input type="text" class="tight-form-input input-xxlarge" ng-model="ctrl.target.legendFormat"
spellcheck='false' placeholder="legend format" data-min-length=0 data-items=1000
ng-model-onblur ng-change="ctrl.refreshMetricData()">
</input>
</li>
</ul>
<ul class="tight-form-list">
<li class="tight-form-item" style="min-width: 15px; text-align: center">
{{ctrl.target.refId}}
</li>
<li>
<a class="tight-form-item" ng-click="ctrl.toggleHideQuery();" role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<ul class="tight-form-list" role="menu">
<li class="tight-form-item" style="width: 94px">
Query
</li>
<li>
<input type="text"
class="input-xxlarge tight-form-input"
ng-model="ctrl.target.expr"
spellcheck='false'
placeholder="query expression"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="ctrl.refreshMetricData()">
</li>
<li class="tight-form-item">
Metric
</li>
<li>
<input type="text"
class="input-medium tight-form-input"
ng-model="ctrl.target.metric"
spellcheck='false'
bs-typeahead="ctrl.suggestMetrics"
placeholder="metric name"
data-min-length=0 data-items=100>
</li>
</ul>
<div class="clearfix"></div>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item tight-form-align" style="width: 94px">
Legend format
</li>
<li>
<input type="text" class="tight-form-input input-xxlarge" ng-model="ctrl.target.legendFormat"
spellcheck='false' placeholder="legend format" data-min-length=0 data-items=1000
ng-model-onblur ng-change="ctrl.refreshMetricData()">
</input>
</li>
</ul>
<ul class="tight-form-list" role="menu">
<li class="tight-form-item tight-form-align" style="width: 94px">
Step
</li>
<li>
<input type="text" class="input-mini tight-form-input" ng-model="ctrl.target.interval"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
data-placement="right"
spellcheck='false'
placeholder="{{ctrl.panelCtrl.interval}}"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="ctrl.refreshMetricData()"
/>
</input>
</li>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item tight-form-align" style="width: 94px">
Step
</li>
<li>
<input type="text" class="input-mini tight-form-input" ng-model="ctrl.target.interval"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
data-placement="right"
spellcheck='false'
placeholder="{{ctrl.panelCtrl.interval}}"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="ctrl.refreshMetricData()"
/>
</input>
</li>
<li class="tight-form-item">
Resolution
</li>
<li>
<select ng-model="ctrl.target.intervalFactor" class="tight-form-input input-mini"
ng-options="r.factor as r.label for r in ctrl.resolutions"
ng-change="ctrl.refreshMetricData()">
</select>
</li>
<li class="tight-form-item">
<a href="{{ctrl.linkToPrometheus}}" target="_blank" bs-tooltip="'Link to Graph in Prometheus'">
<i class="fa fa-share-square-o"></i>
</a>
</li>
</ul>
<div class="clearfix"></div>
<li class="tight-form-item">
Resolution
</li>
<li>
<select ng-model="ctrl.target.intervalFactor" class="tight-form-input input-mini"
ng-options="r.factor as r.label for r in ctrl.resolutions"
ng-change="ctrl.refreshMetricData()">
</select>
</li>
<li class="tight-form-item">
<a href="{{ctrl.linkToPrometheus}}" target="_blank" bs-tooltip="'Link to Graph in Prometheus'">
<i class="fa fa-share-square-o"></i>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>