Skip to content

N
nexpie-grafana-theme
Commit e76655df by Daniel Lee
Options

graph: fixes click after scroll in series override menu 

Makes changes to dropdown-typeahead2 so that a css
class for the button can be passed in. Means it can
be used instead of dropdown-typeahead.

Switches to using dropdown-typeahead2 for series_overrides
directive and for the influxdb, mysql and postgres datasources
as it already contains a fix for this issue.

This commit also fixes the index property which
was set using an incorrectly spelled length property in the
series_overrides directive.

Closes #15621
parent e6830b06
Showing with 368 additions and 198 deletions
public/app/core/directives/dropdown_typeahead.ts
...@@ -128,7 +128,7 @@ export function dropdownTypeahead2($compile) { ...@@ -128,7 +128,7 @@ export function dropdownTypeahead2($compile) {
'<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>'; '<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
const buttonTemplate = const buttonTemplate =
'<a class="gf-form-input dropdown-toggle"' + '<a class="{{buttonTemplateClass}} dropdown-toggle"' +
' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' + ' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
' ><i class="fa fa-plus"></i></a>'; ' ><i class="fa fa-plus"></i></a>';
...@@ -137,9 +137,15 @@ export function dropdownTypeahead2($compile) { ...@@ -137,9 +137,15 @@ export function dropdownTypeahead2($compile) {
menuItems: '=dropdownTypeahead2', menuItems: '=dropdownTypeahead2',
dropdownTypeaheadOnSelect: '&dropdownTypeaheadOnSelect', dropdownTypeaheadOnSelect: '&dropdownTypeaheadOnSelect',
model: '=ngModel', model: '=ngModel',
buttonTemplateClass: '@',
}, },
link: ($scope, elem, attrs) => { link: ($scope, elem, attrs) => {
const $input = $(inputTemplate); const $input = $(inputTemplate);
if (!$scope.buttonTemplateClass) {
$scope.buttonTemplateClass = 'gf-form-input';
}
const $button = $(buttonTemplate); const $button = $(buttonTemplate);
const timeoutId = { const timeoutId = {
blur: null, blur: null,
......
public/app/plugins/datasource/influxdb/partials/query.editor.html
<query-editor-row query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="true"> <query-editor-row query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="true">
<div ng-if="ctrl.target.rawQuery">
<div ng-if="ctrl.target.rawQuery">
<div class="gf-form"> <div class="gf-form">
<textarea rows="3" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" placeholder="InfluxDB Query" ng-model-onblur ng-change="ctrl.refresh()"></textarea> <textarea
rows="3"
class="gf-form-input"
ng-model="ctrl.target.query"
spellcheck="false"
placeholder="InfluxDB Query"
ng-model-onblur
ng-change="ctrl.refresh()"
></textarea>
</div> </div>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label query-keyword">FORMAT AS</label> <label class="gf-form-label query-keyword">FORMAT AS</label>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select> <select
class="gf-form-input gf-size-auto"
ng-model="ctrl.target.resultFormat"
ng-options="f.value as f.text for f in ctrl.resultFormats"
ng-change="ctrl.refresh()"
></select>
</div> </div>
</div> </div>
<div class="gf-form max-width-25" ng-hide="ctrl.target.resultFormat === 'table'"> <div class="gf-form max-width-25" ng-hide="ctrl.target.resultFormat === 'table'">
<label class="gf-form-label query-keyword">ALIAS BY</label> <label class="gf-form-label query-keyword">ALIAS BY</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()"> <input
type="text"
class="gf-form-input"
ng-model="ctrl.target.alias"
spellcheck="false"
placeholder="Naming pattern"
ng-blur="ctrl.refresh()"
/>
</div> </div>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div> <div class="gf-form-label gf-form-label--grow"></div>
...@@ -21,108 +40,154 @@ ...@@ -21,108 +40,154 @@
</div> </div>
</div> </div>
<div ng-if="!ctrl.target.rawQuery"> <div ng-if="!ctrl.target.rawQuery">
<div class="gf-form-inline">
<div class="gf-form-inline"> <div class="gf-form">
<div class="gf-form"> <label class="gf-form-label query-keyword width-7">FROM</label>
<label class="gf-form-label query-keyword width-7">FROM</label>
<metric-segment
<metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment> segment="ctrl.policySegment"
<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements($query)" on-change="ctrl.measurementChanged()"></metric-segment> get-options="ctrl.getPolicySegments()"
</div> on-change="ctrl.policyChanged()"
></metric-segment>
<div class="gf-form"> <metric-segment
<label class="gf-form-label query-keyword">WHERE</label> segment="ctrl.measurementSegment"
</div> get-options="ctrl.getMeasurements($query)"
on-change="ctrl.measurementChanged()"
<div class="gf-form" ng-repeat="segment in ctrl.tagSegments"> ></metric-segment>
<metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment> </div>
</div>
<div class="gf-form">
<div class="gf-form gf-form--grow"> <label class="gf-form-label query-keyword">WHERE</label>
<div class="gf-form-label gf-form-label--grow"></div> </div>
</div>
</div> <div class="gf-form" ng-repeat="segment in ctrl.tagSegments">
<metric-segment
<div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels"> segment="segment"
<div class="gf-form"> get-options="ctrl.getTagsOrValues(segment, $index)"
<label class="gf-form-label query-keyword width-7"> on-change="ctrl.tagSegmentUpdated(segment, $index)"
<span ng-show="$index === 0">SELECT</span>&nbsp; ></metric-segment>
</label> </div>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form" ng-repeat="part in selectParts"> <div class="gf-form-label gf-form-label--grow"></div>
<query-part-editor class="gf-form-label query-part" part="part" handle-event="ctrl.handleSelectPartEvent(selectParts, part, $event)"> </div>
</query-part-editor> </div>
</div>
<div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels">
<div class="gf-form"> <div class="gf-form">
<label class="dropdown" <label class="gf-form-label query-keyword width-7"> <span ng-show="$index === 0">SELECT</span>&nbsp; </label>
dropdown-typeahead="ctrl.selectMenu" </div>
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
</label> <div class="gf-form" ng-repeat="part in selectParts">
</div> <query-part-editor
class="gf-form-label query-part"
<div class="gf-form gf-form--grow"> part="part"
<div class="gf-form-label gf-form-label--grow"></div> handle-event="ctrl.handleSelectPartEvent(selectParts, part, $event)"
</div> >
</div> </query-part-editor>
</div>
<div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label query-keyword width-7"> <label
<span>GROUP BY</span> class="dropdown"
</label> dropdown-typeahead2="ctrl.selectMenu"
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)"
<query-part-editor ng-repeat="part in ctrl.queryModel.groupByParts" button-template-class="gf-form-label query-part"
part="part" class="gf-form-label query-part" >
handle-event="ctrl.handleGroupByPartEvent(part, $index, $event)"> </label>
</query-part-editor> </div>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form"> <div class="gf-form-label gf-form-label--grow"></div>
<metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment> </div>
</div> </div>
<div class="gf-form gf-form--grow"> <div class="gf-form-inline">
<div class="gf-form-label gf-form-label--grow"></div> <div class="gf-form">
</div> <label class="gf-form-label query-keyword width-7">
</div> <span>GROUP BY</span>
</label>
<query-part-editor
ng-repeat="part in ctrl.queryModel.groupByParts"
part="part"
class="gf-form-label query-part"
handle-event="ctrl.handleGroupByPartEvent(part, $index, $event)"
>
</query-part-editor>
</div>
<div class="gf-form">
<metric-segment
segment="ctrl.groupBySegment"
get-options="ctrl.getGroupByOptions()"
on-change="ctrl.groupByAction(part, $index)"
></metric-segment>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form-inline" ng-if="ctrl.target.orderByTime === 'DESC'"> <div class="gf-form-inline" ng-if="ctrl.target.orderByTime === 'DESC'">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label query-keyword width-7">ORDER BY</label> <label class="gf-form-label query-keyword width-7">ORDER BY</label>
<label class="gf-form-label pointer" ng-click="ctrl.removeOrderByTime()">time <span class="query-keyword">DESC</span> <i class="fa fa-remove"></i></label> <label class="gf-form-label pointer" ng-click="ctrl.removeOrderByTime()"
>time <span class="query-keyword">DESC</span> <i class="fa fa-remove"></i
></label>
</div> </div>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div> <div class="gf-form-label gf-form-label--grow"></div>
</div> </div>
</div> </div>
<div class="gf-form-inline" ng-if="ctrl.target.limit"> <div class="gf-form-inline" ng-if="ctrl.target.limit">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label query-keyword width-7">LIMIT</label> <label class="gf-form-label query-keyword width-7">LIMIT</label>
<input type="text" class="gf-form-input width-9" ng-model="ctrl.target.limit" spellcheck='false' placeholder="No Limit" ng-blur="ctrl.refresh()"> <input
type="text"
class="gf-form-input width-9"
ng-model="ctrl.target.limit"
spellcheck="false"
placeholder="No Limit"
ng-blur="ctrl.refresh()"
/>
</div> </div>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div> <div class="gf-form-label gf-form-label--grow"></div>
</div> </div>
</div> </div>
<div class="gf-form-inline" ng-if="ctrl.target.slimit"> <div class="gf-form-inline" ng-if="ctrl.target.slimit">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label query-keyword width-7">SLIMIT</label> <label class="gf-form-label query-keyword width-7">SLIMIT</label>
<input type="text" class="gf-form-input width-9" ng-model="ctrl.target.slimit" spellcheck='false' placeholder="No Limit" ng-blur="ctrl.refresh()"> <input
type="text"
class="gf-form-input width-9"
ng-model="ctrl.target.slimit"
spellcheck="false"
placeholder="No Limit"
ng-blur="ctrl.refresh()"
/>
</div> </div>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div> <div class="gf-form-label gf-form-label--grow"></div>
</div> </div>
</div> </div>
<div class="gf-form-inline" ng-if="ctrl.target.tz"> <div class="gf-form-inline" ng-if="ctrl.target.tz">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label query-keyword width-7">tz</label> <label class="gf-form-label query-keyword width-7">tz</label>
<input type="text" class="gf-form-input width-9" ng-model="ctrl.target.tz" spellcheck='false' placeholder="No Timezone" ng-blur="ctrl.refresh()"> <input
type="text"
class="gf-form-input width-9"
ng-model="ctrl.target.tz"
spellcheck="false"
placeholder="No Timezone"
ng-blur="ctrl.refresh()"
/>
</div> </div>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div> <div class="gf-form-label gf-form-label--grow"></div>
...@@ -133,7 +198,12 @@ ...@@ -133,7 +198,12 @@
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label query-keyword width-7">FORMAT AS</label> <label class="gf-form-label query-keyword width-7">FORMAT AS</label>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select> <select
class="gf-form-input gf-size-auto"
ng-model="ctrl.target.resultFormat"
ng-options="f.value as f.text for f in ctrl.resultFormats"
ng-change="ctrl.refresh()"
></select>
</div> </div>
</div> </div>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
...@@ -141,15 +211,21 @@ ...@@ -141,15 +211,21 @@
</div> </div>
</div> </div>
<div class="gf-form-inline" ng-hide="ctrl.target.resultFormat === 'table'"> <div class="gf-form-inline" ng-hide="ctrl.target.resultFormat === 'table'">
<div class="gf-form max-width-30"> <div class="gf-form max-width-30">
<label class="gf-form-label query-keyword width-7">ALIAS BY</label> <label class="gf-form-label query-keyword width-7">ALIAS BY</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()"> <input
type="text"
class="gf-form-input"
ng-model="ctrl.target.alias"
spellcheck="false"
placeholder="Naming pattern"
ng-blur="ctrl.refresh()"
/>
</div> </div>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div> <div class="gf-form-label gf-form-label--grow"></div>
</div> </div>
</div> </div>
</div> </div>
</query-editor-row> </query-editor-row>
public/app/plugins/datasource/mysql/partials/query.editor.html
...@@ -45,8 +45,10 @@ ...@@ -45,8 +45,10 @@
<div class="gf-form"> <div class="gf-form">
<label class="dropdown" <label class="dropdown"
dropdown-typeahead="ctrl.selectMenu" dropdown-typeahead2="ctrl.selectMenu"
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)"> dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)"
button-template-class="gf-form-label query-part"
>
</label> </label>
</div> </div>
......
public/app/plugins/datasource/postgres/partials/query.editor.html
...@@ -45,8 +45,10 @@ ...@@ -45,8 +45,10 @@
<div class="gf-form"> <div class="gf-form">
<label class="dropdown" <label class="dropdown"
dropdown-typeahead="ctrl.selectMenu" dropdown-typeahead2="ctrl.selectMenu"
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)"> dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)"
button-template-class="gf-form-label query-part"
>
</label> </label>
</div> </div>
......
public/app/plugins/panel/graph/series_overrides_ctrl.ts
...@@ -11,7 +11,7 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) { ...@@ -11,7 +11,7 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
const option = { const option = {
text: name, text: name,
propertyName: propertyName, propertyName: propertyName,
index: $scope.overrideMenu.lenght, index: $scope.overrideMenu.length,
values: values, values: values,
submenu: _.map(values, value => { submenu: _.map(values, value => {
return { text: String(value), value: value }; return { text: String(value), value: value };
......
public/app/plugins/panel/graph/tab_display.html
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Draw Modes</h5>
<gf-form-switch
class="gf-form"
label="Bars"
label-class="width-5"
checked="ctrl.panel.bars"
on-change="ctrl.render()"
></gf-form-switch>
<gf-form-switch
class="gf-form"
label="Lines"
label-class="width-5"
checked="ctrl.panel.lines"
on-change="ctrl.render()"
></gf-form-switch>
<gf-form-switch
class="gf-form"
label="Points"
label-class="width-5"
checked="ctrl.panel.points"
on-change="ctrl.render()"
></gf-form-switch>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Mode Options</h5>
<div class="gf-form">
<label class="gf-form-label width-8">Fill</label>
<div class="gf-form-select-wrapper max-width-5">
<select
class="gf-form-input"
ng-model="ctrl.panel.fill"
ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"
ng-change="ctrl.render()"
ng-disabled="!ctrl.panel.lines"
></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Line Width</label>
<div class="gf-form-select-wrapper max-width-5">
<select
class="gf-form-input"
ng-model="ctrl.panel.linewidth"
ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"
ng-change="ctrl.render()"
ng-disabled="!ctrl.panel.lines"
></select>
</div>
</div>
<gf-form-switch
ng-disabled="!ctrl.panel.lines"
class="gf-form"
label="Staircase"
label-class="width-8"
checked="ctrl.panel.steppedLine"
on-change="ctrl.render()"
>
</gf-form-switch>
<div class="gf-form" ng-if="ctrl.panel.points">
<label class="gf-form-label width-8">Point Radius</label>
<div class="gf-form-select-wrapper max-width-5">
<select
class="gf-form-input"
ng-model="ctrl.panel.pointradius"
ng-options="f for f in [0.5,1,2,3,4,5,6,7,8,9,10]"
ng-change="ctrl.render()"
></select>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Hover tooltip</h5>
<div class="gf-form">
<label class="gf-form-label width-9">Mode</label>
<div class="gf-form-select-wrapper max-width-8">
<select
class="gf-form-input"
ng-model="ctrl.panel.tooltip.shared"
ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]"
ng-change="ctrl.render()"
></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-9">Sort order</label>
<div class="gf-form-select-wrapper max-width-8">
<select
class="gf-form-input"
ng-model="ctrl.panel.tooltip.sort"
ng-options="f.value as f.text for f in [{text: 'None', value: 0}, {text: 'Increasing', value: 1}, {text: 'Decreasing', value: 2}]"
ng-change="ctrl.render()"
></select>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.stack">
<label class="gf-form-label width-9">Stacked value</label>
<div class="gf-form-select-wrapper max-width-8">
<select
class="gf-form-input"
ng-model="ctrl.panel.tooltip.value_type"
ng-options="f for f in ['cumulative','individual']"
ng-change="ctrl.render()"
></select>
</div>
</div>
</div>
<div class="editor-row"> <div class="section gf-form-group">
<div class="section gf-form-group"> <h5 class="section-heading">Stacking & Null value</h5>
<h5 class="section-heading">Draw Modes</h5> <gf-form-switch
<gf-form-switch class="gf-form" label="Bars" label-class="width-5" checked="ctrl.panel.bars" on-change="ctrl.render()"></gf-form-switch> class="gf-form"
<gf-form-switch class="gf-form" label="Lines" label-class="width-5" checked="ctrl.panel.lines" on-change="ctrl.render()"></gf-form-switch> label="Stack"
<gf-form-switch class="gf-form" label="Points" label-class="width-5" checked="ctrl.panel.points" on-change="ctrl.render()"></gf-form-switch> label-class="width-7"
</div> checked="ctrl.panel.stack"
<div class="section gf-form-group"> on-change="ctrl.refresh()"
<h5 class="section-heading">Mode Options</h5> >
<div class="gf-form"> </gf-form-switch>
<label class="gf-form-label width-8">Fill</label> <gf-form-switch
<div class="gf-form-select-wrapper max-width-5"> class="gf-form"
<select class="gf-form-input" ng-model="ctrl.panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()" ng-disabled="!ctrl.panel.lines"></select> ng-show="ctrl.panel.stack"
</div> label="Percent"
</div> label-class="width-7"
<div class="gf-form"> checked="ctrl.panel.percentage"
<label class="gf-form-label width-8">Line Width</label> on-change="ctrl.render()"
<div class="gf-form-select-wrapper max-width-5"> >
<select class="gf-form-input" ng-model="ctrl.panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()" ng-disabled="!ctrl.panel.lines"></select> </gf-form-switch>
</div> <div class="gf-form">
</div> <label class="gf-form-label width-7">Null value</label>
<gf-form-switch ng-disabled="!ctrl.panel.lines" class="gf-form" label="Staircase" label-class="width-8" checked="ctrl.panel.steppedLine" on-change="ctrl.render()"> <div class="gf-form-select-wrapper">
</gf-form-switch> <select
<div class="gf-form" ng-if="ctrl.panel.points"> class="gf-form-input max-width-9"
<label class="gf-form-label width-8">Point Radius</label> ng-model="ctrl.panel.nullPointMode"
<div class="gf-form-select-wrapper max-width-5"> ng-options="f for f in ['connected', 'null', 'null as zero']"
<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [0.5,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select> ng-change="ctrl.render()"
</div> ></select>
</div> </div>
</div> </div>
<div class="section gf-form-group"> </div>
<h5 class="section-heading">Hover tooltip</h5> </div>
<div class="gf-form">
<label class="gf-form-label width-9">Mode</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.shared" ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-9">Sort order</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.sort" ng-options="f.value as f.text for f in [{text: 'None', value: 0}, {text: 'Increasing', value: 1}, {text: 'Decreasing', value: 2}]" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.stack">
<label class="gf-form-label width-9">Stacked value</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
<div class="section gf-form-group"> <div>
<h5 class="section-heading">Stacking & Null value</h5> <div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
<gf-form-switch class="gf-form" label="Stack" label-class="width-7" checked="ctrl.panel.stack" on-change="ctrl.refresh()"> <div class="gf-form">
</gf-form-switch> <label class="gf-form-label">alias or regex</label>
<gf-form-switch class="gf-form" ng-show="ctrl.panel.stack" label="Percent" label-class="width-7" checked="ctrl.panel.percentage" on-change="ctrl.render()"> </div>
</gf-form-switch> <div class="gf-form width-15">
<div class="gf-form"> <input
<label class="gf-form-label width-7">Null value</label> type="text"
<div class="gf-form-select-wrapper"> ng-model="override.alias"
<select class="gf-form-input max-width-9" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="ctrl.render()"></select> bs-typeahead="getSeriesNames"
</div> ng-blur="ctrl.render()"
</div> data-min-length="0"
</div> data-items="100"
</div> class="gf-form-input width-15"
/>
</div>
<div class="gf-form" ng-repeat="option in currentOverrides">
<label class="gf-form-label">
<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
<span ng-show="option.propertyName === 'color'">
Color: <i class="fa fa-circle" ng-style="{color:option.value}"></i>
</span>
<span ng-show="option.propertyName !== 'color'"> {{ option.name }}: {{ option.value }} </span>
</label>
</div>
<div> <div class="gf-form">
<div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl"> <span
<div class="gf-form"> class="dropdown"
<label class="gf-form-label">alias or regex</label> dropdown-typeahead2="overrideMenu"
</div> dropdown-typeahead-on-select="setOverride($item, $subItem)"
<div class="gf-form width-15"> button-template-class="gf-form-label"
<input type="text" ng-model="override.alias" bs-typeahead="getSeriesNames" ng-blur="ctrl.render()" data-min-length=0 data-items=100 class="gf-form-input width-15"> >
</div> </span>
<div class="gf-form" ng-repeat="option in currentOverrides"> </div>
<label class="gf-form-label">
<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
<span ng-show="option.propertyName === 'color'">
Color: <i class="fa fa-circle" ng-style="{color:option.value}"></i>
</span>
<span ng-show="option.propertyName !== 'color'">
{{option.name}}: {{option.value}}
</span>
</label>
</div>
<div class="gf-form"> <div class="gf-form gf-form--grow">
<span class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)"> <div class="gf-form-label gf-form-label--grow"></div>
</span> </div>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
<div class="gf-form">
<label class="gf-form-label">
<i class="fa fa-trash pointer" ng-click="ctrl.removeSeriesOverride(override)"></i>
</label>
</div>
</div>
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
<i class="fa fa-plus"></i>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
</button>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label">
<i class="fa fa-trash pointer" ng-click="ctrl.removeSeriesOverride(override)"></i>
</label>
</div>
</div>
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
<i class="fa fa-plus"></i>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
</button>
</div>
</div>
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