From 23535c2bb266fa0e35c9512848ba66f7e1d505e4 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Fri, 12 Apr 2019 10:40:48 +0200 Subject: [PATCH] Annotations: Annotation list style improvements (#16541) moved page-action-bar to top and put header inside it, removed to be able to run prettier --- .../features/annotations/partials/editor.html | 247 +++--- .../components/DashLinks/editor.html | 114 ++- .../features/templating/partials/editor.html | 716 ++++++++++-------- 3 files changed, 648 insertions(+), 429 deletions(-) diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index d8981cf982f..a39bb59310c 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -1,113 +1,152 @@ -
-

- Annotations - > New - > Edit -

+
+

+ Annotations + > New + > Edit +

-
-
-
- New -
+
- - - - - - - - - - - - - - - - - - -
Query nameData source
-   - {{annotation.name}} - -   - {{annotation.name}} (Built-in) - - {{annotation.datasource || 'Default'}} - - - - -
+ New +
- -
-
-
There are no custom annotation queries added yet
- - - Add Annotation Query - -
-
What are Annotations?
-

- Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons - on all graph panels. When you hover over an annotation icon you can get event text & tags for the event. You can add annotation events - directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be stored in Grafana's annotation database. -

- Checkout the Annotations documentation for more information. -
-
-
-
+
+ + + + + + + + + + + + + + + + + + +
Query nameData source
+   + {{ annotation.name }} + +   + {{ annotation.name }} (Built-in) + + {{ annotation.datasource || 'Default' }} + + + + + + + + +
-
-
-
General
-
-
- Name - -
-
- Data source -
- -
-
-
-
+ +
+
+
There are no custom annotation queries added yet
+ + + Add Annotation Query + +
+
What are Annotations?
+

+ Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines + and icons on all graph panels. When you hover over an annotation icon you can get event text & tags for + the event. You can add annotation events directly from grafana by holding CTRL or CMD + click on graph (or + drag region). These will be stored in Grafana's annotation database. +

+ Checkout the + Annotations documentation + for more information. +
+
+
+
-
-
- - - - -
- - - - -
-
-
+
+
+
General
+
+
+ Name + +
+
+ Data source +
+ +
+
+
+
-
Query
- - - - +
+
+ + + + +
+ + + + +
+
+
-
-
- - -
-
-
+
Query
+ + + + +
+
+ + +
+
+
diff --git a/public/app/features/dashboard/components/DashLinks/editor.html b/public/app/features/dashboard/components/DashLinks/editor.html index eb6c0a9fa4f..d965d2b9534 100644 --- a/public/app/features/dashboard/components/DashLinks/editor.html +++ b/public/app/features/dashboard/components/DashLinks/editor.html @@ -1,8 +1,21 @@ -

- Dashboard Links - > New - > Edit -

+
+

+ Dashboard Links + > New + > Edit +

+ +
+ + New +
@@ -17,18 +30,14 @@
What are Dashboard Links?

- Dashboard Links allow you to place links to other dashboards and web sites directly in below the dashboard header. + Dashboard Links allow you to place links to other dashboards and web sites directly in below the dashboard + header.

-
-
- - New -
@@ -41,17 +50,23 @@
- {{link.type}} + {{ link.type }}
- {{link.title}} + {{ link.title }}
- {{link.url}} + {{ link.url }}
- - {{tag}} + + {{ tag }} 		@@ -77,41 +92,66 @@
Type
- +
With tags - +
- +
Title - +
  • Url
    • - +
    Title - +
    Tooltip - +
    Icon
    - +
    @@ -120,9 +160,27 @@
    Include
    - - - + + +
    diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index b2f7312fe27..02700e636bb 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -1,325 +1,447 @@
    +
    +

    + Variables + > New + > Edit +

    -

    - Variables - > New - > Edit -

    +
    + New +
    -
    +
    +
    +
    +
    There are no variables added yet
    + + + Add variable + +
    +
    What do variables do?
    +

    + Variables enable more interactive and dynamic dashboards. Instead of hard-coding things like server or + sensor names in your metric queries you can use variables in their place. Variables are shown as dropdown + select boxes at the top of the dashboard. These dropdowns make it easy to change the data being displayed in + your dashboard. Check out the + + Templating documentation + + for more information. +

    +
    +
    +
    -
    -
    -
    There are no variables added yet
    - - - Add variable - -
    -
    What do variables do?
    -

    Variables enable more interactive and dynamic dashboards. Instead of hard-coding things like server or sensor - names - in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the - top of - the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. +

    + + + + + + + + + + + + + + + + + + +
    VariableDefinition
    + ${{ variable.name }} + + {{ variable.definition ? variable.definition : variable.query }} + + + + + + + Duplicate + + + + + +
    +
    +
    - Check out the - - Templating documentation - for more information. -
    -
    -
    +
    +
    General
    +
    +
    +
    + Name + +
    +
    + + Type + + {{ variableTypes[current.type].description }} + + +
    + +
    +
    +
    -
    -
    -
    - New -
    +
    + Template names cannot begin with '__', that's reserved for Grafana's global variables +
    - - - - - - - - - - - - - - - - - - -
    VariableDefinition
    - - ${{variable.name}} - - - {{variable.definition ? variable.definition : variable.query}} - - - Duplicate - - - - - -
    -
    -
    +
    +
    + Label + +
    +
    + Hide +
    + +
    +
    +
    +
    - -
    General
    -
    -
    -
    - Name - -
    -
    - - Type - - {{variableTypes[current.type].description}} - - -
    - -
    -
    -
    +
    +
    Interval Options
    -
    - Template names cannot begin with '__', that's reserved for - Grafana's global variables -
    +
    + Values + +
    -
    -
    - Label - -
    -
    - Hide -
    - -
    -
    -
    -
    +
    + + -
    -
    Interval Options
    +
    + + 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 + + +
    +
    +
    -
    - Values - -
    +
    +
    Custom Options
    +
    + Values separated by comma + +
    +
    -
    - - +
    +
    Constant options
    +
    + Value + +
    +
    -
    - - 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 - - -
    -
    -
    +
    +
    Text options
    +
    + Default value + +
    +
    -
    -
    Custom Options
    -
    - Values separated by comma - -
    -
    +
    +
    Query Options
    -
    -
    Constant options
    -
    - Value - -
    -
    +
    +
    + Data source +
    + +
    +
    -
    -
    Text options
    -
    - Default value - -
    -
    +
    + + Refresh + + When to update the values of this variable. + + +
    + +
    +
    +
    -
    -
    Query Options
    + + + -
    -
    - Data source -
    - -
    -
    +
    + + Regex + + Optional, if you want to extract part of a series name or metric node segment. + + + +
    +
    + + Sort + + How to sort the values of this variable. + + +
    + +
    +
    +
    -
    - - Refresh - - When to update the values of this variable. - - -
    - -
    -
    -
    +
    +
    Data source options
    - - - - +
    + +
    + +
    +
    -
    - - Regex - - Optional, if you want to extract part of a series name or metric node segment. - - - -
    -
    - - Sort - - How to sort the values of this variable. - - -
    - -
    -
    -
    +
    + + +
    +
    -
    -
    Data source options
    +
    +
    Options
    +
    + Data source +
    + +
    +
    +
    -
    - -
    - -
    -
    +
    +
    Selection Options
    +
    + + + + +
    +
    + Custom all value + +
    +
    -
    - - -
    -
    +
    +
    Preview of values
    +
    +
    + {{ option.text }} +
    +
    + Show more +
    +
    +
    -
    -
    Options
    -
    - Data source -
    - -
    -
    -
    +
    + {{ infoText }} +
    -
    -
    Selection Options
    -
    - - - - -
    -
    - Custom all value - -
    -
    - -
    -
    Value groups/tags (Experimental feature)
    - - -
    - Tags query - -
    -
    -
  • Tag values query
    • - -
    -
    - -
    -
    Preview of values
    -
    -
    - {{option.text}} -
    -
    - Show more -
    -
    -
    - -
    - {{infoText}} -
    - -
    - - -
    - - -
    \ No newline at end of file +
    + + +
    + +