From 55189200a45b707f380398f9bf49872a19a92f1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 20 Mar 2016 16:18:31 +0100 Subject: [PATCH 01/23] ux(): updated query editor test --- .../app/core/directives/dropdown_typeahead.js | 4 +- public/app/core/directives/metric_segment.js | 4 +- .../panel/partials/query_editor_row.html | 41 ++++++++- public/app/partials/metrics.html | 2 +- .../influxdb/partials/query.editor.html | 85 +++++++++++-------- public/sass/components/_gf-form.scss | 11 ++- public/sass/components/_query_editor.scss | 8 +- 7 files changed, 107 insertions(+), 48 deletions(-) diff --git a/public/app/core/directives/dropdown_typeahead.js b/public/app/core/directives/dropdown_typeahead.js index ae825c31fca..3401ca4c38e 100644 --- a/public/app/core/directives/dropdown_typeahead.js +++ b/public/app/core/directives/dropdown_typeahead.js @@ -9,10 +9,10 @@ function (_, $, coreModule) { coreModule.default.directive('dropdownTypeahead', function($compile) { var inputTemplate = ''; - var buttonTemplate = ''; diff --git a/public/app/core/directives/metric_segment.js b/public/app/core/directives/metric_segment.js index 56dc1fd935a..7680f6049e0 100644 --- a/public/app/core/directives/metric_segment.js +++ b/public/app/core/directives/metric_segment.js @@ -8,10 +8,10 @@ function (_, $, coreModule) { coreModule.default.directive('metricSegment', function($compile, $sce) { var inputTemplate = ''; - var buttonTemplate = ''; return { diff --git a/public/app/features/panel/partials/query_editor_row.html b/public/app/features/panel/partials/query_editor_row.html index 81f7e4f6c98..7fa5bbd113e 100644 --- a/public/app/features/panel/partials/query_editor_row.html +++ b/public/app/features/panel/partials/query_editor_row.html @@ -1,4 +1,43 @@ -
+
+
+ + +
+
+
+ +
+ + +
+
+ +
diff --git a/public/app/features/panel/query_ctrl.ts b/public/app/features/panel/query_ctrl.ts index 66370595252..199b070aaa7 100644 --- a/public/app/features/panel/query_ctrl.ts +++ b/public/app/features/panel/query_ctrl.ts @@ -10,9 +10,11 @@ export class QueryCtrl { panel: any; hasRawMode: boolean; error: string; + collapsed: boolean; constructor(public $scope, private $injector) { this.panel = this.panelCtrl.panel; + this.collapsed = true; if (!this.target.refId) { this.target.refId = this.getNextQueryLetter(); diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html index 54955a8e274..0f2f808f891 100644 --- a/public/app/partials/metrics.html +++ b/public/app/partials/metrics.html @@ -1,56 +1,19 @@ -
- -
-
- - - - -
-
- -
- - -
- - - -
- -
- - - - - +
+
+ + + + +
-
+ -
- - - -
- -
+
+ + + +
+ diff --git a/public/app/plugins/datasource/elasticsearch/partials/query.editor.html b/public/app/plugins/datasource/elasticsearch/partials/query.editor.html index 017f5cf1a42..87616acd6fc 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/query.editor.html +++ b/public/app/plugins/datasource/elasticsearch/partials/query.editor.html @@ -1,17 +1,21 @@ - -
  • - Query -
    • -
  • - -
    • -
  • - Alias -
    • -
  • - -
    • -     + + +
    +
      +
    • + Query +
      • +
    • + +
      • +
    • + Alias +
      • +
    • + +
      • +
    +
    -
    - -
    +
    + +
    -
    -
    -
    - +
    - - -
    +
    + +
    -
    - +
    -
    - -
    -
    +
    +
    + -
    -
    + + +
    -
    -
    - -
    +
    + -
    - - -
    +
    + +
    +
    -
    - -
    +
    +
    -
    -
    +
    +
    + +
    -
    -
    - +
    + + +
    - - +
    + +
    - -
    +
    +
    -
    -
    +
    +
    + -
    + + -
    -
    - - -
    -
    - -
    - -
    -
    -
    -
    + +
    + +
    +
    +
    + +
    +
    + + +
    +
    + +
    + +
    +
    +
    +
    +
    diff --git a/public/app/plugins/datasource/influxdb/partials/query.options.html b/public/app/plugins/datasource/influxdb/partials/query.options.html index 1e3a08eb556..e2b5e522541 100644 --- a/public/app/plugins/datasource/influxdb/partials/query.options.html +++ b/public/app/plugins/datasource/influxdb/partials/query.options.html @@ -38,7 +38,7 @@
    -
    +
    Alias patterns
    diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index a732661106b..94cc795d9eb 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -8,8 +8,8 @@ $gf-form-margin: 0.25rem; text-align: left; position: relative; - .cr1 { - margin-left: 8px; + &--offset-1 { + margin-left: $spacer; } } @@ -162,9 +162,11 @@ $gf-form-margin: 0.25rem; } .gf-form-btn { - margin-right: $gf-form-margin; padding: $input-padding-y $input-padding-x; + margin-right: $gf-form-margin; line-height: $input-line-height; + font-size: $font-size-sm; + flex-shrink: 0; flex-grow: 0; } diff --git a/public/sass/components/_query_part.scss b/public/sass/components/_query_part.scss index a2543e1a75c..1e2fb9622c2 100644 --- a/public/sass/components/_query_part.scss +++ b/public/sass/components/_query_part.scss @@ -9,8 +9,3 @@ } } -.query-part-name { -} - -.query-part-parameters { -} From 805fd18b7b55bbea7996fa8cf3640c127c47a0eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 17 Apr 2016 16:43:13 -0400 Subject: [PATCH 07/23] feat(query editors): more work on query editors make over --- .../app/features/panel/metrics_ds_selector.ts | 2 +- .../panel/partials/query_editor_row.html | 16 +- public/app/features/panel/query_ctrl.ts | 36 ----- public/app/features/panel/query_editor_row.ts | 88 +++++++++- .../graphite/partials/query.editor.html | 2 +- .../influxdb/partials/query.editor.html | 151 ++++++++---------- .../plugins/datasource/influxdb/query_ctrl.ts | 5 + 7 files changed, 176 insertions(+), 124 deletions(-) diff --git a/public/app/features/panel/metrics_ds_selector.ts b/public/app/features/panel/metrics_ds_selector.ts index f93ee5ad15a..b5457c21164 100644 --- a/public/app/features/panel/metrics_ds_selector.ts +++ b/public/app/features/panel/metrics_ds_selector.ts @@ -79,7 +79,7 @@ export class MetricsDsSelectorCtrl { } addDataQuery(datasource) { - var target: any = {}; + var target: any = {isNew: true}; if (datasource) { target.datasource = datasource.name; diff --git a/public/app/features/panel/partials/query_editor_row.html b/public/app/features/panel/partials/query_editor_row.html index 722c7c27b6f..f4c1854824c 100644 --- a/public/app/features/panel/partials/query_editor_row.html +++ b/public/app/features/panel/partials/query_editor_row.html @@ -10,14 +10,22 @@
    -
    +
    +
    + +
    +
    + +
    @@ -83,7 +91,9 @@
    -
    +
    +
    +
    diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index 4045c1daa4b..570c1862ef0 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -1,4 +1,4 @@ -$popover-arrow-size: 1rem; +$popover-arrow-size: 0.7rem; $color: inherit; $backgroundColor: $btn-secondary-bg; $color: $text-color; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 94cc795d9eb..75042f958e7 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -11,6 +11,10 @@ $gf-form-margin: 0.25rem; &--offset-1 { margin-left: $spacer; } + + &--grow { + flex-grow: 1; + } } .gf-form-group { @@ -22,10 +26,6 @@ $gf-form-margin: 0.25rem; flex-direction: row; flex-wrap: wrap; align-content: flex-start; - - .gf-form-flex { - flex-grow: 1; - } } .gf-form-button-row { @@ -48,16 +48,12 @@ $gf-form-margin: 0.25rem; border: $input-btn-border-width solid transparent; @include border-radius($label-border-radius-sm); -} -.gf-form-filler { - margin-right: $gf-form-margin; - margin-bottom: $gf-form-margin; - flex-grow: 1; - background-color: $input-label-bg; - border: $input-btn-border-width solid transparent; - @include border-radius($label-border-radius-sm); + &--grow { + flex-grow: 1; + min-height: 2.7rem; + } } .gf-form-checkbox { diff --git a/public/sass/mixins/_drop_element.scss b/public/sass/mixins/_drop_element.scss index d08e50e63b8..290e49f4cad 100644 --- a/public/sass/mixins/_drop_element.scss +++ b/public/sass/mixins/_drop_element.scss @@ -10,7 +10,7 @@ font-family: inherit; background: $theme-bg; color: $theme-color; - padding: $spacer; + padding: 0.65rem; font-size: $font-size-sm; max-width: 20rem; From 1069f485daf3335822897772d6a1588fd3cdb193 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 17 Apr 2016 22:24:40 -0400 Subject: [PATCH 10/23] ux(query_editors): handle text overflow in collapsed mode --- .../features/panel/partials/query_editor_row.html | 2 +- public/sass/components/_gf-form.scss | 12 ++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/public/app/features/panel/partials/query_editor_row.html b/public/app/features/panel/partials/query_editor_row.html index 6c0b0d69a80..0529a178d28 100644 --- a/public/app/features/panel/partials/query_editor_row.html +++ b/public/app/features/panel/partials/query_editor_row.html @@ -10,7 +10,7 @@
    -
    +
    - - - + + +
    @@ -38,78 +38,49 @@
    -
    -
    - - + +
    + +
    -
    - - +
    + +
    -
    - - +
    + +
    -
    - - +
    + +
    -
    -
      -
    • - {{stat.text}} -
      • -
    • - -
      • -
    -
    + + +
    + +
    -
    -
      -
    • - Sigma -
      • -
    • - -
      • -
    -
    + +
    + +
    -
    -
      -
    • - Script -
      • -
    • - -
      • -
    -
    +
    + +
    - -
    -
      -
    • - Missing - The missing parameter defines how documents that are missing a value should be treated. By default they will be ignored but it is also possible to treat them as if they had a value -
      • -
    • - -
      • -
    -
    -
    -
    diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 5aaea7bda7b..d3d5a9a07c9 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -210,6 +210,8 @@ $gf-form-margin: 0.25rem; margin-bottom: 2px; } + .gf-form-switch input, + .gf-form-switch label, .gf-form-input, .gf-form-select-wrapper, .gf-form-filler, @@ -220,7 +222,6 @@ $gf-form-margin: 0.25rem; .gf-form-query-content { flex-grow: 1; - overflow: hidden; &--collapsed { overflow: hidden; diff --git a/public/sass/utils/_widths.scss b/public/sass/utils/_widths.scss index b4bdbdb6ccc..cf324b35c72 100644 --- a/public/sass/utils/_widths.scss +++ b/public/sass/utils/_widths.scss @@ -17,3 +17,9 @@ } } +@for $i from 1 through 30 { + .offset-width-#{$i} { + margin-left: ($spacer * $i) !important; + } +} + From 39cdaf517503a515f5f9ca02ffbb92c9772c6c41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 18 Apr 2016 11:35:24 -0400 Subject: [PATCH 12/23] ux(query-editors): more progress and fixes --- .../panel/partials/query_editor_row.html | 2 +- .../datasource/elasticsearch/bucket_agg.js | 1 + .../elasticsearch/partials/bucket_agg.html | 156 +++++++----------- .../elasticsearch/partials/metric_agg.html | 10 +- .../influxdb/partials/query.editor.html | 108 +----------- public/sass/components/_gf-form.scss | 14 +- 6 files changed, 76 insertions(+), 215 deletions(-) diff --git a/public/app/features/panel/partials/query_editor_row.html b/public/app/features/panel/partials/query_editor_row.html index 0529a178d28..cdac281f7b5 100644 --- a/public/app/features/panel/partials/query_editor_row.html +++ b/public/app/features/panel/partials/query_editor_row.html @@ -23,7 +23,7 @@
    - - + + +
    -
    -
    -
    -
    -
      -
    • - Interval -
      • -
    • - -
      • -
    -
    -
    -
    -
      -
    • - Min Doc Count -
      • -
    • - -
      • -
    -
    -
    -
    -
      -
    • - Trim edges points -
      • -
    • - -
      • -
    • - -
      • -
    -
    -
    -
    -
    -
    -
      -
    • - Order -
      • -
    • - -
      • -
    -
    -
    -
    -
      -
    • - Size -
      • -
    • - -
      • -
    -
    -
    -
    -
      -
    • - Order By -
      • -
    • - -
      • -
    -
    -
    -
    -
    -
    -
      -
    • - Query {{$index + 1}} -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    -
    +
    +
    +
    + +
    +
    + + +
    + +
    + + +
    +
    + +
    +
    + + +
    + +
    + + +
    + +
    + + +
    +
    + +
    +
    +
    + + +
    +
    + + +
    +
    diff --git a/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html b/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html index e98d9d4af7e..bb78fd4aac5 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html +++ b/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html @@ -16,9 +16,9 @@
    -
    -
    -<<<<<<< HEAD -
    -
    -
    - - - - - - -
    -
    -
    -
    - - - - -
    -
    -
    -||||||| merged common ancestors -
    -
    -
    - - - - - - -
    -
    - -
    -
    -
      -
    • - SELECT -
      • -
    • - -
      • -
    • -
      • -
    -
    -
    - -
    -
      -
    • - GROUP BY -
      • -
    • - -
      • -
    • - -
      • -
    -
    -
    -
    -=======