diff --git a/CHANGELOG.md b/CHANGELOG.md index a61e0d66c65..f00957dc9a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,15 @@ * **Singlestat**: Fixes prefix an postfix for gauges, fixes [#4812](https://github.com/grafana/grafana/issues/4812) * **Singlestat**: Fixes auto-refresh on change for some options, fixes [#4809](https://github.com/grafana/grafana/issues/4809) +### Breaking changes +**Data Source Query Editors**: Issue [#3900](https://github.com/grafana/grafana/issues/3900) + +Query editors have been updated to use the new form styles. External data source plugins needs to be +updated to work. Sorry to introduce breaking change this late in beta phase. We wanted to get this change +in before 3.0 stable is released so we don't have to break data sources in next release (3.1). If you are +a data source plugin author and want help for how the new form styles work please ask for help in +slack channel (link to slack channel in readme). + # 3.0.0-beta5 (2016-04-15) ### Bug fixes diff --git a/public/app/core/components/info_popover.ts b/public/app/core/components/info_popover.ts index 8bc28b8a57d..b221c8577fa 100644 --- a/public/app/core/components/info_popover.ts +++ b/public/app/core/components/info_popover.ts @@ -11,11 +11,6 @@ export function infoPopover() { template: '', transclude: true, link: function(scope, elem, attrs, ctrl, transclude) { - // var inputElem = elem.prev(); - // if (inputElem.length === 0) { - // console.log('Failed to find input element for popover'); - // return; - // } var offset = attrs.offset || '0 -10px'; var position = attrs.position || 'right middle'; diff --git a/public/app/core/directives/dropdown_typeahead.js b/public/app/core/directives/dropdown_typeahead.js index 2dc5111874e..b44e953785e 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..61415a660b2 100644 --- a/public/app/core/directives/metric_segment.js +++ b/public/app/core/directives/metric_segment.js @@ -8,10 +8,13 @@ function (_, $, coreModule) { coreModule.default.directive('metricSegment', function($compile, $sce) { var inputTemplate = ''; - var buttonTemplate = ''; + + var selectTemplate = ''; return { @@ -20,9 +23,9 @@ function (_, $, coreModule) { getOptions: "&", onChange: "&", }, - link: function($scope, elem) { + link: function($scope, elem, attrs) { var $input = $(inputTemplate); - var $button = $(buttonTemplate); + var $button = $(attrs.styleMode === 'select' ? selectTemplate : linkTemplate); var segment = $scope.segment; var options = null; var cancelBlur = null; diff --git a/public/app/core/services/context_srv.ts b/public/app/core/services/context_srv.ts index ad670f68a32..41d99c3198f 100644 --- a/public/app/core/services/context_srv.ts +++ b/public/app/core/services/context_srv.ts @@ -25,7 +25,6 @@ export class ContextSrv { isGrafanaAdmin: any; isEditor: any; sidemenu: any; - lightTheme: any; constructor() { this.pinned = store.getBool('grafana.sidemenu.pinned', false); @@ -41,7 +40,6 @@ export class ContextSrv { } this.version = config.buildInfo.version; - this.lightTheme = false; this.user = new User(); this.isSignedIn = this.user.isSignedIn; this.isGrafanaAdmin = this.user.isGrafanaAdmin; diff --git a/public/app/features/panel/all.js b/public/app/features/panel/all.js index b3ec16e541f..2f978e65345 100644 --- a/public/app/features/panel/all.js +++ b/public/app/features/panel/all.js @@ -5,4 +5,5 @@ define([ './query_ctrl', './panel_editor_tab', './query_editor_row', + './metrics_ds_selector', ], function () {}); diff --git a/public/app/features/panel/metrics_ds_selector.ts b/public/app/features/panel/metrics_ds_selector.ts new file mode 100644 index 00000000000..0c3c61955e3 --- /dev/null +++ b/public/app/features/panel/metrics_ds_selector.ts @@ -0,0 +1,106 @@ +/// + +import angular from 'angular'; +import _ from 'lodash'; + +var module = angular.module('grafana.directives'); + +var template = ` +
+
+
+ + + + +
+ +
+ + +
+ + + +
+
+
+
+`; + + +export class MetricsDsSelectorCtrl { + dsSegment: any; + dsName: string; + panelCtrl: any; + datasources: any[]; + current: any; + + /** @ngInject */ + constructor(private uiSegmentSrv, datasourceSrv) { + this.datasources = datasourceSrv.getMetricSources(); + + var dsValue = this.panelCtrl.panel.datasource || null; + + for (let ds of this.datasources) { + if (ds.value === dsValue) { + this.current = ds; + } + } + + this.dsSegment = uiSegmentSrv.newSegment(this.current.name); + } + + getOptions() { + return Promise.resolve(this.datasources.map(value => { + return this.uiSegmentSrv.newSegment(value.name); + })); + } + + datasourceChanged() { + var ds = _.findWhere(this.datasources, {name: this.dsSegment.value}); + if (ds) { + this.current = ds; + this.panelCtrl.setDatasource(ds); + } + } + + addDataQuery(datasource) { + var target: any = {isNew: true}; + + if (datasource) { + target.datasource = datasource.name; + } + + this.panelCtrl.panel.targets.push(target); + } +} + +module.directive('metricsDsSelector', function() { + return { + restrict: 'E', + template: template, + controller: MetricsDsSelectorCtrl, + bindToController: true, + controllerAs: 'ctrl', + transclude: true, + scope: { + panelCtrl: "=" + } + }; +}); diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index e8c16fd9ab7..9ff63785273 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -27,7 +27,6 @@ class MetricsPanelCtrl extends PanelCtrl { resolution: any; timeInfo: any; skipDataOnInit: boolean; - datasources: any[]; dataStream: any; dataSubscription: any; @@ -52,7 +51,6 @@ class MetricsPanelCtrl extends PanelCtrl { private onInitMetricsPanelEditMode() { this.addEditorTab('Metrics', 'public/app/partials/metrics.html'); this.addEditorTab('Time range', 'public/app/features/panel/partials/panelTime.html'); - this.datasources = this.datasourceSrv.getMetricSources(); } private onMetricsPanelRefresh() { @@ -249,16 +247,6 @@ class MetricsPanelCtrl extends PanelCtrl { this.datasource = null; this.refresh(); } - - addDataQuery(datasource) { - var target: any = {}; - - if (datasource) { - target.datasource = datasource.name; - } - - this.panel.targets.push(target); - } } export {MetricsPanelCtrl}; diff --git a/public/app/features/panel/partials/query_editor_row.html b/public/app/features/panel/partials/query_editor_row.html index 81f7e4f6c98..e8dbe1434e7 100644 --- a/public/app/features/panel/partials/query_editor_row.html +++ b/public/app/features/panel/partials/query_editor_row.html @@ -1,4 +1,63 @@ -
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+ + + +
+
+ +
+ +
- -
+ +
-
-
-
-
    -
  • - 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 5f3c3072bfa..24582baf8d1 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html +++ b/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html @@ -1,138 +1,82 @@ -
-
    -
  • +
    +
    +
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - + +
+ +
+ + + +
+ +
+ - {{settingsLinkText}} + {{settingsLinkText}} - - + +
-
    -
  • +
    +
    • -
  • + +
    • -
-
+ +
-
-
-
-
    -
  • - Unit -
    • -
  • - -
    • -
-
-
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
-
-
    -
  • - Window -
    • -
  • - -
    • -
-
-
-
-
    -
  • - Model -
    • -
  • - -
    • -
-
-
-
-
    -
  • - Percentiles -
    • -
  • - -
    • -
-
-
-
-
-
    -
  • - {{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/app/plugins/datasource/elasticsearch/partials/query.editor.html b/public/app/plugins/datasource/elasticsearch/partials/query.editor.html index 017f5cf1a42..48fea594ad6 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/query.editor.html +++ b/public/app/plugins/datasource/elasticsearch/partials/query.editor.html @@ -1,32 +1,31 @@ - -
  • - Query -
    • -
  • - -
    • -
  • - Alias -
    • -
  • - -
    • + + +
    +
    + + +
    +
    + + +
    +
    + +
    + + +
    + +
    + + +
    +     - -
    - - -
    - -
    - - -
    - diff --git a/public/app/plugins/datasource/elasticsearch/query_ctrl.ts b/public/app/plugins/datasource/elasticsearch/query_ctrl.ts index 21bb578f40e..a356b433f57 100644 --- a/public/app/plugins/datasource/elasticsearch/query_ctrl.ts +++ b/public/app/plugins/datasource/elasticsearch/query_ctrl.ts @@ -5,6 +5,7 @@ import './metric_agg'; import angular from 'angular'; import _ from 'lodash'; +import queryDef from './query_def'; import {QueryCtrl} from 'app/plugins/sdk'; export class ElasticQueryCtrl extends QueryCtrl { @@ -38,6 +39,48 @@ export class ElasticQueryCtrl extends QueryCtrl { this.$rootScope.appEvent('elastic-query-updated'); } + getCollapsedText() { + var metricAggs = this.target.metrics; + var bucketAggs = this.target.bucketAggs; + var metricAggTypes = queryDef.getMetricAggTypes(this.esVersion); + var bucketAggTypes = queryDef.bucketAggTypes; + var text = ''; + + if (this.target.query) { + text += 'Query: ' + this.target.query + ', '; + } + + text += 'Metrics: '; + + _.each(metricAggs, (metric, index) => { + var aggDef = _.findWhere(metricAggTypes, {value: metric.type}); + text += aggDef.text + '('; + if (aggDef.requiresField) { + text += metric.field; + } + text += '), '; + }); + + _.each(bucketAggs, (bucketAgg, index) => { + if (index === 0) { + text += ' Group by: '; + } + + var aggDef = _.findWhere(bucketAggTypes, {value: bucketAgg.type}); + text += aggDef.text + '('; + if (aggDef.requiresField) { + text += bucketAgg.field; + } + text += '), '; + }); + + if (this.target.alias) { + text += 'Alias: ' + this.target.alias; + } + + return text; + } + handleQueryError(err) { this.error = err.message || 'Failed to issue metric query'; return []; diff --git a/public/app/plugins/datasource/elasticsearch/query_def.js b/public/app/plugins/datasource/elasticsearch/query_def.js index ae44af3e2db..099cb3607c3 100644 --- a/public/app/plugins/datasource/elasticsearch/query_def.js +++ b/public/app/plugins/datasource/elasticsearch/query_def.js @@ -20,9 +20,9 @@ function (_) { ], bucketAggTypes: [ - {text: "Terms", value: 'terms' }, + {text: "Terms", value: 'terms', requiresField: true}, {text: "Filters", value: 'filters' }, - {text: "Date Histogram", value: 'date_histogram' }, + {text: "Date Histogram", value: 'date_histogram', requiresField: true}, ], orderByOptions: [ diff --git a/public/app/plugins/datasource/grafana/partials/query.editor.html b/public/app/plugins/datasource/grafana/partials/query.editor.html index 3131b4cc346..880402573d5 100644 --- a/public/app/plugins/datasource/grafana/partials/query.editor.html +++ b/public/app/plugins/datasource/grafana/partials/query.editor.html @@ -1,5 +1,7 @@ - -
  • - Test metric (fake data source) -
    • + +
    +
    + +
    +
    diff --git a/public/app/plugins/datasource/graphite/add_graphite_func.js b/public/app/plugins/datasource/graphite/add_graphite_func.js index 4547526d08f..bb4558b154b 100644 --- a/public/app/plugins/datasource/graphite/add_graphite_func.js +++ b/public/app/plugins/datasource/graphite/add_graphite_func.js @@ -11,10 +11,10 @@ function (angular, _, $, gfunc) { .module('grafana.directives') .directive('graphiteAddFunc', function($compile) { var inputTemplate = ''; - var buttonTemplate = '' + ''; diff --git a/public/app/plugins/datasource/graphite/partials/query.editor.html b/public/app/plugins/datasource/graphite/partials/query.editor.html index 90dfe0794c0..60372fb8ab0 100755 --- a/public/app/plugins/datasource/graphite/partials/query.editor.html +++ b/public/app/plugins/datasource/graphite/partials/query.editor.html @@ -1,21 +1,27 @@ - + -
  • - -
    • +
    + +
    -
  • +
    +
    + -
  • - -
    • -
  • - - -
    • -
  • -
    • +
    + +
    -
  • +
    + +
    + +
    +
    +
    +
    +
    diff --git a/public/app/plugins/datasource/influxdb/influx_query.ts b/public/app/plugins/datasource/influxdb/influx_query.ts index 407861f22df..301d40a2edb 100644 --- a/public/app/plugins/datasource/influxdb/influx_query.ts +++ b/public/app/plugins/datasource/influxdb/influx_query.ts @@ -164,7 +164,7 @@ export default class InfluxQuery { getMeasurementAndPolicy(interpolate) { var policy = this.target.policy; - var measurement = this.target.measurement; + var measurement = this.target.measurement || 'measurement'; if (!measurement.match('^/.*/')) { measurement = '"' + measurement+ '"'; @@ -192,10 +192,6 @@ export default class InfluxQuery { } } - if (!target.measurement) { - throw {message: "Metric measurement is missing"}; - } - var query = 'SELECT '; var i, y; for (i = 0; i < this.selectModels.length; i++) { diff --git a/public/app/plugins/datasource/influxdb/partials/query.editor.html b/public/app/plugins/datasource/influxdb/partials/query.editor.html index 140f298f458..c2efe3093f4 100644 --- a/public/app/plugins/datasource/influxdb/partials/query.editor.html +++ b/public/app/plugins/datasource/influxdb/partials/query.editor.html @@ -1,73 +1,96 @@ - -
      -
    • - FROM -
      • -
    • + + +
      + +
      + +
      + +
      +
      + + -
      • -
    • -
      • -
    • - WHERE -
      • -
    • +
    + +
    + +
    + +
    - - +
    -
    - +
    +
    +
    + +
    +
    + +
    + +
    + + +
    + +
    + +
    + +
    +
    +
    +
    + +
    +
    + + + + +
    + +
    +
    +
    +
    + +
    + +
    +
    + + +
    +
    + +
    + +
    +
    +
    +
    +
    +
    + - -
    -
    -
      -
    • - SELECT -
      • -
    • - -
      • -
    • -
      • -
    -
    -
    - -
    -
      -
    • - GROUP BY -
      • -
    • - -
      • -
    • - -
      • -
    -
    -
    -
    - -
    -
      -
    • - ALIAS BY -
      • -
    • - -
      • -
    • - Format as -
      • -
    • - -
      • -
    -
    -
    - 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/app/plugins/datasource/influxdb/partials/query_part.html b/public/app/plugins/datasource/influxdb/partials/query_part.html index 0eb0146ec13..478edfe5c29 100644 --- a/public/app/plugins/datasource/influxdb/partials/query_part.html +++ b/public/app/plugins/datasource/influxdb/partials/query_part.html @@ -2,4 +2,4 @@
    -{{part.def.type}}() +{{part.def.type}}() diff --git a/public/app/plugins/datasource/influxdb/query_ctrl.ts b/public/app/plugins/datasource/influxdb/query_ctrl.ts index 041e3c8a882..8d6a03fc4a1 100644 --- a/public/app/plugins/datasource/influxdb/query_ctrl.ts +++ b/public/app/plugins/datasource/influxdb/query_ctrl.ts @@ -23,6 +23,7 @@ export class InfluxQueryCtrl extends QueryCtrl { measurementSegment: any; removeTagFilterSegment: any; + /** @ngInject **/ constructor($scope, $injector, private templateSrv, private $q, private uiSegmentSrv) { super($scope, $injector); @@ -154,7 +155,11 @@ export class InfluxQueryCtrl extends QueryCtrl { } toggleEditorMode() { - this.target.query = this.queryModel.render(false); + try { + this.target.query = this.queryModel.render(false); + } catch (err) { + console.log('query render error'); + } this.target.rawQuery = !this.target.rawQuery; } @@ -316,5 +321,9 @@ export class InfluxQueryCtrl extends QueryCtrl { return '='; } } + + getCollapsedText() { + return this.queryModel.render(false); + } } diff --git a/public/app/plugins/datasource/opentsdb/partials/query.editor.html b/public/app/plugins/datasource/opentsdb/partials/query.editor.html index def68d19bf9..4683f9c300a 100644 --- a/public/app/plugins/datasource/opentsdb/partials/query.editor.html +++ b/public/app/plugins/datasource/opentsdb/partials/query.editor.html @@ -1,223 +1,253 @@ - -
  • - Metric -
    • -
  • - - - - - -
    • -
  • - Aggregator -
    • -
  • - - - - -
    • + +
    +
    + + + +
    +
    + +
    + +
    +
    +
    + + +
    -
  • - Alias: - Use patterns like $tag_tagname to replace part of the alias for a tag value -
    • -
  • - -
    • - +
    +
    +
    +
    -
    - -
    -
    +
    + {{fil.tagk}} = {{fil.type}}({{fil.filter}}) , groupBy = {{fil.groupBy}} + + + + + + +
    + +
    -
    - -
    -
    + +
    -
    -
    -
  • - - - -
    • +
    +
    +
    +
    -
  • - +
    +
    + +
    - +
    + +
    + +
    + +
    + +
    + - - - + + - - add tag - - - - - -
    • - -
    -
    + + +
    -
    -
    -
  • - Counter -
    • +
    + + -
  • - Counter Max: -
    • + + -
  • - -
    • -
  • - Reset Value: -
    • -
  • - -
    • - -
    -
    +
    + + + + + + + +
    + +
    +
    +
    +
    + + diff --git a/public/app/plugins/datasource/prometheus/partials/query.editor.html b/public/app/plugins/datasource/prometheus/partials/query.editor.html index fa04bb33b18..37c27ace58a 100644 --- a/public/app/plugins/datasource/prometheus/partials/query.editor.html +++ b/public/app/plugins/datasource/prometheus/partials/query.editor.html @@ -1,80 +1,54 @@ - -
  • - Query -
    • -
  • - -
    • -
  • - Metric -
    • -
  • - -
    • -     + +
    +
    + + +
    +
    + + +
    +
    -
    - +
    +
    + + + + Leave blank for auto handling based on time range and panel width + +
    +
    + +
    + +
    + +
    -
    -
    +
    +
    +
    +
    -
    - - -
    -
    + diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 460adebb9da..194d7a5487c 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -70,6 +70,7 @@ @import "components/drop"; @import "components/query_editor"; @import "components/tabbed_view"; +@import "components/query_part"; // PAGES @import "pages/login"; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 560f2d2dab1..fed3d805b82 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -67,8 +67,8 @@ $page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98% // Links // ------------------------- -$link-color: darken($white,11%); -$link-color-disabled: darken($link-color,30%); +$link-color: darken($white, 11%); +$link-color-disabled: darken($link-color, 30%); $link-hover-color: $white; $external-link-color: $blue; @@ -76,7 +76,7 @@ $external-link-color: $blue; // ------------------------- $headings-color: darken($white,11%); $abbr-border-color: $gray-3 !default; -$text-muted: darken($link-color,30%); +$text-muted: $text-color-weak; $blockquote-small-color: $gray-3 !default; $blockquote-border-color: $gray-4 !default; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index a7b5c72af2b..42775d989f7 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -82,7 +82,7 @@ $external-link-color: $blue; // ------------------------- $headings-color: $text-color; $abbr-border-color: $gray-2 !default; -$text-muted: darken($link-color,30%); +$text-muted: $text-color-weak; $blockquote-small-color: $gray-2 !default; $blockquote-border-color: $gray-3 !default; diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 904dfa13b4e..7770be25a68 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -27,9 +27,9 @@ em { font-style: italic; color: $headings-color; } cite { font-style: normal; } // Utility classes -.muted { color: $gray-2; } +.muted { color: $text-muted; } a.muted:hover, -a.muted:focus { color: darken($gray-2, 10%); } +a.muted:focus { color: darken($text-muted, 10%); } .text-warning { color: $state-warning-text; } a.text-warning:hover, @@ -118,6 +118,10 @@ small, font-weight: normal; } +.small-xs { + font-size: $font-size-xs; +} + mark, .mark { padding: .2em; 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 66dab450ee1..0ae9f7ebb71 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -8,8 +8,22 @@ $gf-form-margin: 0.25rem; text-align: left; position: relative; - .cr1 { - margin-left: 8px; + &--offset-1 { + margin-left: $spacer; + } + + &--grow { + flex-grow: 1; + } +} + +.gf-form-disabled { + color: $text-color-weak; + + .query-keyword, + a, + .gf-form-input { + color: $text-color-weak; } } @@ -22,10 +36,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,6 +58,12 @@ $gf-form-margin: 0.25rem; border: $input-btn-border-width solid transparent; @include border-radius($label-border-radius-sm); + + + &--grow { + flex-grow: 1; + min-height: 2.70rem; + } } .gf-form-checkbox { @@ -107,6 +123,21 @@ $gf-form-margin: 0.25rem; } &.gf-size-auto { width: auto; } + + &--dropdown { + padding-right: $input-padding-x*2; + + &:after { + position: absolute; + top: 35%; + right: $input-padding-x/2; + background-color: transparent; + color: $input-color; + font: normal normal normal $font-size-sm/1 FontAwesome; + content: '\f0d7'; + pointer-events: none; + } + } } .gf-form-select-wrapper { @@ -152,9 +183,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; } @@ -209,4 +242,3 @@ $gf-form-margin: 0.25rem; select.gf-form-input ~ .gf-form-help-icon { right: 10px; } - diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss index fe8d3fb157c..4c807ed0e6b 100644 --- a/public/sass/components/_query_editor.scss +++ b/public/sass/components/_query_editor.scss @@ -4,13 +4,66 @@ } .query-segment-key { - border-right: none; - padding-right: 1px; + //border-right: none; + //padding-right: 1px; } .query-segment-operator { - padding-right: 1px; - border-right: none; + //padding-right: 1px; + //border-right: none; color: $orange; } +.gf-form-query { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-content: flex-start; + align-items: flex-start; + + .gf-form, + .gf-form-filler { + margin-bottom: 2px; + } + + .gf-form-switch, + .gf-form-switch label, + .gf-form-input, + .gf-form-select-wrapper, + .gf-form-filler, + .gf-form-label { + margin-right: 2px; + } +} + +.gf-form-query-content { + flex-grow: 2; + + &--collapsed { + overflow: hidden; + + .gf-form-label { + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + white-space: nowrap; + } + } +} + +.gf-form-query-letter-cell { + .gf-form-query-letter-cell-carret { + display: inline-block; + width: 0.7rem; + position: relative; + left: -2px; + } + .gf-form-query-letter-cell-letter { + font-weight: bold; + color: $blue; + } + .gf-form-query-letter-cell-ds { + color: $text-color-weak; + } +} + diff --git a/public/sass/components/_query_part.scss b/public/sass/components/_query_part.scss new file mode 100644 index 00000000000..1e2fb9622c2 --- /dev/null +++ b/public/sass/components/_query_part.scss @@ -0,0 +1,11 @@ + +.query-part { + background-color: $input-bg !important; + + &.show-function-controls { + padding-top: 5px; + min-width: 100px; + text-align: center; + } +} + 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; diff --git a/public/sass/utils/_utils.scss b/public/sass/utils/_utils.scss index 055fe96a213..39e4edfe7ed 100644 --- a/public/sass/utils/_utils.scss +++ b/public/sass/utils/_utils.scss @@ -61,13 +61,14 @@ button.close { .hide { display: none; } + .show { display: block; } // Visibility .invisible { - visibility: hidden; + visibility: hidden !important; } // For Affix plugin 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; + } +} +