IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(graph panel): more refactoring of #5917

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-09-05 11:46:16 +02:00
parent 31642b472c
commit 395213abd7
6 changed files with 33 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/app/core/directives/metric_segment.js
View File

@@ -23,10 +23,10 @@ function (_, $, coreModule) {
getOptions: "&",
onChange: "&",
},
link: function($scope, elem, attrs) {
link: function($scope, elem) {
var $input = $(inputTemplate);
var $button = $(attrs.styleMode === 'select' ? selectTemplate : linkTemplate);
var segment = $scope.segment;
var $button = $(segment.selectMode ? selectTemplate : linkTemplate);
var options = null;
var cancelBlur = null;
var linkMode = true;
@@ -179,6 +179,7 @@ function (_, $, coreModule) {
cssClass: attrs.cssClass,
custom: attrs.custom,
value: option ? option.text : value,
selectMode: attrs.selectMode,
};
return uiSegmentSrv.newSegment(segment);
};

1
public/app/core/services/segment_srv.js
View File

@@ -28,6 +28,7 @@ function (angular, _, coreModule) {
this.type = options.type;
this.fake = options.fake;
this.value = options.value;
this.selectMode = options.selectMode;
this.type = options.type;
this.expandable = options.expandable;
this.html = options.html || $sce.trustAsHtml(templateSrv.highlightVariablesAsHtml(this.value));

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

@@ -16,7 +16,7 @@ var template = `
Panel data source
</label>
<metric-segment segment="ctrl.dsSegment" style-mode="select"
<metric-segment segment="ctrl.dsSegment"
get-options="ctrl.getOptions()"
on-change="ctrl.datasourceChanged()"></metric-segment>
</div>
@@ -67,7 +67,7 @@ export class MetricsDsSelectorCtrl {
this.current = {name: dsValue + ' not found', value: null};
}
this.dsSegment = uiSegmentSrv.newSegment(this.current.name);
this.dsSegment = uiSegmentSrv.newSegment({value: this.current.name, selectMode: true});
}
getOptions() {

20
public/app/plugins/panel/graph/module.ts
View File

@@ -23,7 +23,7 @@ class GraphCtrl extends MetricsPanelCtrl {
logScales: any;
unitFormats: any;
xAxisModes: any;
xAxisSeriesStats: any;
xNameSegment: any;
annotationsPromise: any;
datapointsCount: number;
datapointsOutside: boolean;
@@ -154,7 +154,6 @@ class GraphCtrl extends MetricsPanelCtrl {
'Json': 'json'
};
this.xAxisSeriesStats = ['min', 'max', 'avg', 'current', 'count', 'total'];
this.subTabIndex = 0;
}
@@ -288,7 +287,6 @@ class GraphCtrl extends MetricsPanelCtrl {
});
var alias = valueField;
return this.seriesHandler(seriesData, index, datapoints, alias);
}
@@ -396,6 +394,22 @@ class GraphCtrl extends MetricsPanelCtrl {
fileExport.exportSeriesListToCsvColumns(this.seriesList);
}
xAxisModeChanged() {
// set defaults
this.refresh();
}
getXAxisNameOptions() {
return this.$q.when([
{text: 'Avg', value: 'avg'}
]);
}
getXAxisValueOptions() {
return this.$q.when([
{text: 'Avg', value: 'avg'}
]);
}
}
function getFieldsFromESDoc(doc) {

63
public/app/plugins/panel/graph/tab_axes.html
View File

@@ -47,68 +47,23 @@
<select class="gf-form-input"
ng-model="ctrl.panel.xaxis.mode"
ng-options="v as k for (k, v) in ctrl.xAxisModes"
ng-change="ctrl.refresh()">
ng-change="ctrl.xAxisModeChanged()">
</select>
</div>
</div>
<!-- Table mode -->
<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'table' || ctrl.panel.xaxis.mode === 'json'">
<label class="gf-form-label width-5">Name</label>
<metric-segment-model property="ctrl.panel.xaxis.name" get-options="ctrl.getXAxisNameOptions()" on-change="ctrl.render()" custom="false" css-class="width-10" select-mode="true"></metric-segment-model>
</div>
<!-- Series mode -->
<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'series'">
<div class="gf-form" ng-if="ctrl.panel.xaxis.mode !== 'time'">
<label class="gf-form-label width-5">Value</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input"
ng-model="ctrl.panel.xaxis.values[0]"
ng-options="v for v in ctrl.xAxisSeriesStats"
ng-change="ctrl.render()">
</select>
</div>
<metric-segment-model property="ctrl.panel.xaxis.values[0]" get-options="ctrl.getXAxisValueOptions()" on-change="ctrl.render()" custom="false" css-class="width-10" select-mode="true"></metric-segment-model>
</div>
<!-- Table mode -->
<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'table'">
<label class="gf-form-label width-5">Column</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input"
ng-model="ctrl.panel.xaxis.nameField"
ng-options="col.index as col.text for col in ctrl.xAxisColumns"
ng-change="ctrl.refresh()">
</select>
</div>
</div>
<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'table'">
<label class="gf-form-label width-5">Value</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input"
ng-model="ctrl.panel.xaxis.valueFields[0]"
ng-options="col.index as col.text for col in ctrl.xAxisColumns"
ng-change="ctrl.refresh()">
</select>
</div>
</div>
<!-- Elastic Raw Document mode -->
<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'json'">
<label class="gf-form-label width-5">Column</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input"
ng-model="ctrl.panel.xaxis.nameField"
ng-options="field for field in ctrl.xAxisColumns"
ng-change="ctrl.refresh()">
</select>
</div>
</div>
<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'elastic'">
<label class="gf-form-label width-5">Value</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input"
ng-model="ctrl.panel.xaxis.valueFields[0]"
ng-options="field for field in ctrl.xAxisColumns"
ng-change="ctrl.refresh()">
</select>
</div>
</div>
</div>
</div>

2
public/sass/components/_gf-form.scss
View File

@@ -135,7 +135,7 @@ $gf-form-margin: 0.25rem;
&::after {
position: absolute;
top: 35%;
right: $input-padding-x/2;
right: $input-padding-x;
background-color: transparent;
color: $input-color;
font: normal normal normal $font-size-sm/1 FontAwesome;