Merge pull request #15634 from grafana/15621-series-overrides

graph: fixes click after scroll in series override menu

public/app/core/directives/dropdown_typeahead.ts

@@ -128,7 +128,7 @@ export function dropdownTypeahead2($compile) {
     '<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
 
   const buttonTemplate =
-    '<a class="gf-form-input dropdown-toggle"' +
+    '<a class="{{buttonTemplateClass}} dropdown-toggle"' +
     ' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
     ' ><i class="fa fa-plus"></i></a>';
 
@@ -137,9 +137,15 @@ export function dropdownTypeahead2($compile) {
       menuItems: '=dropdownTypeahead2',
       dropdownTypeaheadOnSelect: '&dropdownTypeaheadOnSelect',
       model: '=ngModel',
+      buttonTemplateClass: '@',
     },
     link: ($scope, elem, attrs) => {
       const $input = $(inputTemplate);
+
+      if (!$scope.buttonTemplateClass) {
+        $scope.buttonTemplateClass = 'gf-form-input';
+      }
+
       const $button = $(buttonTemplate);
       const timeoutId = {
         blur: null,

public/app/plugins/datasource/influxdb/partials/query.editor.html

@@ -1,19 +1,38 @@
 <query-editor-row query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="true">
-
   <div ng-if="ctrl.target.rawQuery">
     <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 class="gf-form-inline">
       <div class="gf-form">
         <label class="gf-form-label query-keyword">FORMAT AS</label>
         <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 class="gf-form max-width-25" ng-hide="ctrl.target.resultFormat === 'table'">
         <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 class="gf-form gf-form--grow">
         <div class="gf-form-label gf-form-label--grow"></div>
@@ -22,13 +41,20 @@
   </div>
 
   <div ng-if="!ctrl.target.rawQuery">
-
     <div class="gf-form-inline">
       <div class="gf-form">
         <label class="gf-form-label query-keyword width-7">FROM</label>
 
-				<metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
+        <metric-segment
-				<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements($query)" on-change="ctrl.measurementChanged()"></metric-segment>
+          segment="ctrl.policySegment"
+          get-options="ctrl.getPolicySegments()"
+          on-change="ctrl.policyChanged()"
+        ></metric-segment>
+        <metric-segment
+          segment="ctrl.measurementSegment"
+          get-options="ctrl.getMeasurements($query)"
+          on-change="ctrl.measurementChanged()"
+        ></metric-segment>
       </div>
 
       <div class="gf-form">
@@ -36,7 +62,11 @@
       </div>
 
       <div class="gf-form" ng-repeat="segment in ctrl.tagSegments">
-				<metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
+        <metric-segment
+          segment="segment"
+          get-options="ctrl.getTagsOrValues(segment, $index)"
+          on-change="ctrl.tagSegmentUpdated(segment, $index)"
+        ></metric-segment>
       </div>
 
       <div class="gf-form gf-form--grow">
@@ -46,20 +76,25 @@
 
     <div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels">
       <div class="gf-form">
-				<label class="gf-form-label query-keyword width-7">
+        <label class="gf-form-label query-keyword width-7"> <span ng-show="$index === 0">SELECT</span>&nbsp; </label>
-					<span ng-show="$index === 0">SELECT</span>&nbsp;
-				</label>
       </div>
 
       <div class="gf-form" ng-repeat="part in selectParts">
-				<query-part-editor class="gf-form-label query-part" part="part" handle-event="ctrl.handleSelectPartEvent(selectParts, part, $event)">
+        <query-part-editor
+          class="gf-form-label query-part"
+          part="part"
+          handle-event="ctrl.handleSelectPartEvent(selectParts, part, $event)"
+        >
         </query-part-editor>
       </div>
 
       <div class="gf-form">
-				<label class="dropdown"
+        <label
-								dropdown-typeahead="ctrl.selectMenu"
+          class="dropdown"
-								dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
+          dropdown-typeahead2="ctrl.selectMenu"
+          dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)"
+          button-template-class="gf-form-label query-part"
+        >
         </label>
       </div>
 
@@ -74,14 +109,21 @@
           <span>GROUP BY</span>
         </label>
 
-				<query-part-editor  ng-repeat="part in ctrl.queryModel.groupByParts"
+        <query-part-editor
-                            part="part" class="gf-form-label query-part"
+          ng-repeat="part in ctrl.queryModel.groupByParts"
-                            handle-event="ctrl.handleGroupByPartEvent(part, $index, $event)">
+          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>
+        <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">
@@ -92,7 +134,9 @@
     <div class="gf-form-inline" ng-if="ctrl.target.orderByTime === 'DESC'">
       <div class="gf-form">
         <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 class="gf-form gf-form--grow">
         <div class="gf-form-label gf-form-label--grow"></div>
@@ -102,7 +146,14 @@
     <div class="gf-form-inline" ng-if="ctrl.target.limit">
       <div class="gf-form">
         <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 class="gf-form gf-form--grow">
         <div class="gf-form-label gf-form-label--grow"></div>
@@ -112,7 +163,14 @@
     <div class="gf-form-inline" ng-if="ctrl.target.slimit">
       <div class="gf-form">
         <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 class="gf-form gf-form--grow">
         <div class="gf-form-label gf-form-label--grow"></div>
@@ -122,7 +180,14 @@
     <div class="gf-form-inline" ng-if="ctrl.target.tz">
       <div class="gf-form">
         <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 class="gf-form gf-form--grow">
         <div class="gf-form-label gf-form-label--grow"></div>
@@ -133,7 +198,12 @@
       <div class="gf-form">
         <label class="gf-form-label query-keyword width-7">FORMAT AS</label>
         <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 class="gf-form gf-form--grow">
@@ -144,12 +214,18 @@
     <div class="gf-form-inline" ng-hide="ctrl.target.resultFormat === 'table'">
       <div class="gf-form max-width-30">
         <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 class="gf-form gf-form--grow">
         <div class="gf-form-label gf-form-label--grow"></div>
       </div>
     </div>
   </div>
-
 </query-editor-row>

public/app/plugins/datasource/mysql/partials/query.editor.html

@@ -45,8 +45,10 @@
 
       <div class="gf-form">
         <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>
       </div>
 

public/app/plugins/datasource/postgres/partials/query.editor.html

@@ -45,8 +45,10 @@
 
       <div class="gf-form">
         <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>
       </div>
 

public/app/plugins/panel/graph/series_overrides_ctrl.ts

@@ -11,7 +11,7 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
     const option = {
       text: name,
       propertyName: propertyName,
-      index: $scope.overrideMenu.lenght,
+      index: $scope.overrideMenu.length,
       values: values,
       submenu: _.map(values, value => {
         return { text: String(value), value: value };

public/app/plugins/panel/graph/tab_display.html

@@ -1,31 +1,72 @@
-
+<div class="editor-row">
-	<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
-			<gf-form-switch class="gf-form" label="Lines" label-class="width-5" checked="ctrl.panel.lines" on-change="ctrl.render()"></gf-form-switch>
+      class="gf-form"
-			<gf-form-switch class="gf-form" label="Points" label-class="width-5" checked="ctrl.panel.points" on-change="ctrl.render()"></gf-form-switch>
+      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>
+        <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>
+        <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
+      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>
+        <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>
@@ -34,45 +75,86 @@
     <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>
+        <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>
+        <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>
+        <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">
     <h5 class="section-heading">Stacking & Null value</h5>
-			<gf-form-switch class="gf-form" label="Stack" label-class="width-7" checked="ctrl.panel.stack" on-change="ctrl.refresh()">
+    <gf-form-switch
+      class="gf-form"
+      label="Stack"
+      label-class="width-7"
+      checked="ctrl.panel.stack"
+      on-change="ctrl.refresh()"
+    >
     </gf-form-switch>
-			<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()">
+    <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()"
+    >
     </gf-form-switch>
     <div class="gf-form">
       <label class="gf-form-label width-7">Null value</label>
       <div class="gf-form-select-wrapper">
-					<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>
+        <select
-				</div>
+          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>
       </div>
     </div>
   </div>
+</div>
 
-		<div>
+<div>
   <div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
     <div class="gf-form">
       <label class="gf-form-label">alias or regex</label>
     </div>
     <div class="gf-form width-15">
-					<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">
+      <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>
     <div class="gf-form" ng-repeat="option in currentOverrides">
       <label class="gf-form-label">
@@ -80,14 +162,17 @@
         <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'">
+        <span ng-show="option.propertyName !== 'color'"> {{ option.name }}: {{ option.value }} </span>
-							{{option.name}}: {{option.value}}
-						</span>
       </label>
     </div>
 
     <div class="gf-form">
-					<span class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
+      <span
+        class="dropdown"
+        dropdown-typeahead2="overrideMenu"
+        dropdown-typeahead-on-select="setOverride($item, $subItem)"
+        button-template-class="gf-form-label"
+      >
       </span>
     </div>
 
@@ -106,5 +191,4 @@
       <i class="fa fa-plus"></i>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
     </button>
   </div>
-		</div>
+</div>
-