diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts index c5e24741a96..7bd745bed53 100644 --- a/public/app/features/templating/editor_ctrl.ts +++ b/public/app/features/templating/editor_ctrl.ts @@ -10,6 +10,7 @@ export class VariableEditorCtrl { constructor(private $scope, private datasourceSrv, private variableSrv, templateSrv) { $scope.variableTypes = variableTypes; $scope.ctrl = {}; + $scope.namePattern = /^((?!__).)*$/; $scope.refreshOptions = [ {value: 0, text: "Never"}, diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 4fc2553244c..5f844931b4c 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -1,155 +1,158 @@
-
-

- Templating -

+
+

+ Templating +

- + - -
+ +
-
+
-
-
- No template variables defined -
- - - - +
+
+ No template variables defined +
+
- - ${{variable.name}} - - - {{variable.query}} -
+ + + - - - + + - - - -
+ + ${{variable.name}} + + + {{variable.query}} + + Duplicate - - - Edit - - - - - -
-
+ + + + Edit + + + + + + + + + +
-
-
-   New -
-
+
+
+   New +
+
-
-
Variable
-
-
-
- Name - -
-
- + +
Variable
+
+
+ Template names cannot begin with '__' that's reserved for Grafanas global variables +
+
+
+ Name + +
+
+ Type - {{variableTypes[current.type].description}} + {{variableTypes[current.type].description}} -
- -
-
+
+ +
+
-
-
- Label - -
-
- Hide +
+
+ Label + +
+
+ Hide
- -
-
-
-
+ +
+
+
+
-
+
Interval Options
-
- Values - -
+
+ Values + +
-
- - +
+ + -
- - Step count How many times should the current time range be divided to calculate the value - -
- -
-
-
- - Min interval The calculated value will not go below this threshold - - -
-
-
+
+ + Step count How many times should the current time range be divided to calculate the value + +
+ +
+
+
+ + Min interval The calculated value will not go below this threshold + + +
+
+
-
+
Custom Options
-
- Values separated by comma - -
-
+
+ Values separated by comma + +
+
-
+
Constant options
-
- Value - -
-
+
+ Value + +
+
-
+
Query Options
@@ -170,8 +173,8 @@
-
-
+
+
Query
@@ -184,26 +187,26 @@
-
- - Sort - - How to sort the values of this variable. - - -
- -
-
-
+
+ + Sort + + How to sort the values of this variable. + + +
+ +
+
+ -
-
Data source options
+
+
Data source options
-
- -
- +
+ +
+
@@ -222,18 +225,18 @@
-
+
Options
-
- Data source -
- -
-
-
+
+ Data source +
+ +
+
+
-
-
Selection Options
+
+
Selection Options
Value groups/tags (Experimental feature)
- - -
- Tags query - -
-
-
  • Tag values query
    • - -
    -
    + + +
    + Tags query + +
    +
    +
  • Tag values query
    • + +
    +
    -
    -
    Preview of values (shows max 20)
    -
    -
    - {{option.text}} -
    -
    -
    +
    +
    Preview of values (shows max 20)
    +
    +
    + {{option.text}} +
    +
    +
    -
    - {{infoText}} -
    +
    + {{infoText}} +
    -
    - - -
    +
    + + +
    - -
    + +
    diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 004ab86fb76..19588634dd3 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -66,6 +66,25 @@ $gf-form-margin: 0.25rem; } } +.gf-form-error { + padding: $input-padding-y $input-padding-x; + margin-right: $gf-form-margin; + flex-shrink: 0; + + background-color: $input-label-bg; + display: block; + font-size: $font-size-sm; + margin-right: $gf-form-margin; + + border: $input-btn-border-width solid $red; + @include border-radius($label-border-radius-sm); + + &--grow { + flex-grow: 1; + min-height: 2.60rem; + } +} + .gf-form-checkbox { flex-shrink: 0; padding: $input-padding-y $input-padding-x;