From 10016d9d38ab511e371208c7a96b609fcc7a0cb8 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Mon, 4 Jan 2016 16:56:18 +0900 Subject: [PATCH 001/108] add CloudWatch DescribeAlarms API support --- pkg/api/cloudwatch/cloudwatch.go | 52 +++++++++++++++++++ .../datasource/cloudwatch/datasource.js | 8 +++ 2 files changed, 60 insertions(+) diff --git a/pkg/api/cloudwatch/cloudwatch.go b/pkg/api/cloudwatch/cloudwatch.go index babcf9fddb0..bf281864da5 100644 --- a/pkg/api/cloudwatch/cloudwatch.go +++ b/pkg/api/cloudwatch/cloudwatch.go @@ -33,6 +33,7 @@ func init() { actionHandlers = map[string]actionHandler{ "GetMetricStatistics": handleGetMetricStatistics, "ListMetrics": handleListMetrics, + "DescribeAlarms": handleDescribeAlarms, "DescribeAlarmsForMetric": handleDescribeAlarmsForMetric, "DescribeAlarmHistory": handleDescribeAlarmHistory, "DescribeInstances": handleDescribeInstances, @@ -142,6 +143,57 @@ func handleListMetrics(req *cwRequest, c *middleware.Context) { c.JSON(200, resp) } +func handleDescribeAlarms(req *cwRequest, c *middleware.Context) { + sess := session.New() + creds := credentials.NewChainCredentials( + []credentials.Provider{ + &credentials.EnvProvider{}, + &credentials.SharedCredentialsProvider{Filename: "", Profile: req.DataSource.Database}, + &ec2rolecreds.EC2RoleProvider{Client: ec2metadata.New(sess), ExpiryWindow: 5 * time.Minute}, + }) + + cfg := &aws.Config{ + Region: aws.String(req.Region), + Credentials: creds, + } + + svc := cloudwatch.New(session.New(cfg), cfg) + + reqParam := &struct { + Parameters struct { + ActionPrefix string `json:"actionPrefix"` + AlarmNamePrefix string `json:"alarmNamePrefix"` + AlarmNames []*string `json:"alarmNames"` + StateValue string `json:"stateValue"` + } `json:"parameters"` + }{} + json.Unmarshal(req.Body, reqParam) + + params := &cloudwatch.DescribeAlarmsInput{ + MaxRecords: aws.Int64(100), + } + if reqParam.Parameters.ActionPrefix != "" { + params.ActionPrefix = aws.String(reqParam.Parameters.ActionPrefix) + } + if reqParam.Parameters.AlarmNamePrefix != "" { + params.AlarmNamePrefix = aws.String(reqParam.Parameters.AlarmNamePrefix) + } + if len(reqParam.Parameters.AlarmNames) != 0 { + params.AlarmNames = reqParam.Parameters.AlarmNames + } + if reqParam.Parameters.StateValue != "" { + params.StateValue = aws.String(reqParam.Parameters.StateValue) + } + + resp, err := svc.DescribeAlarms(params) + if err != nil { + c.JsonApiErr(500, "Unable to call AWS API", err) + return + } + + c.JSON(200, resp) +} + func handleDescribeAlarmsForMetric(req *cwRequest, c *middleware.Context) { cfg := &aws.Config{ Region: aws.String(req.Region), diff --git a/public/app/plugins/datasource/cloudwatch/datasource.js b/public/app/plugins/datasource/cloudwatch/datasource.js index 119c4a83167..ab97e4eedd5 100644 --- a/public/app/plugins/datasource/cloudwatch/datasource.js +++ b/public/app/plugins/datasource/cloudwatch/datasource.js @@ -204,6 +204,14 @@ function (angular, _, moment, dateMath) { return $q.when([]); }; + this.performDescribeAlarms = function(region, actionPrefix, alarmNamePrefix, alarmNames, stateValue) { + return this.awsRequest({ + region: region, + action: 'DescribeAlarms', + parameters: { actionPrefix: actionPrefix, alarmNamePrefix: alarmNamePrefix, alarmNames: alarmNames, stateValue: stateValue } + }); + }; + this.performDescribeAlarmsForMetric = function(region, namespace, metricName, dimensions, statistic, period) { return this.awsRequest({ region: region, From defb15bea1625bb0d2df93a09bce744b5003d747 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Mon, 4 Jan 2016 18:53:18 +0900 Subject: [PATCH 002/108] CloudWatch multiple alarm annotation support --- .../datasource/cloudwatch/datasource.js | 48 ++++++++++++++++--- .../partials/annotations.editor.html | 18 +++++++ 2 files changed, 60 insertions(+), 6 deletions(-) diff --git a/public/app/plugins/datasource/cloudwatch/datasource.js b/public/app/plugins/datasource/cloudwatch/datasource.js index ab97e4eedd5..881d4e48c3d 100644 --- a/public/app/plugins/datasource/cloudwatch/datasource.js +++ b/public/app/plugins/datasource/cloudwatch/datasource.js @@ -230,21 +230,57 @@ function (angular, _, moment, dateMath) { this.annotationQuery = function(options) { var annotation = options.annotation; + var usePrefixMatch = annotation.prefixMatching; var region = templateSrv.replace(annotation.region); var namespace = templateSrv.replace(annotation.namespace); var metricName = templateSrv.replace(annotation.metricName); var dimensions = convertDimensionFormat(annotation.dimensions); var statistics = _.map(annotation.statistics, function(s) { return templateSrv.replace(s); }); - var period = annotation.period || '300'; + var defaultPeriod = usePrefixMatch ? '' : '300'; + var period = annotation.period || defaultPeriod; period = parseInt(period, 10); - - if (!region || !namespace || !metricName || _.isEmpty(statistics)) { return $q.when([]); } + var actionPrefix = annotation.actionPrefix || ''; + var alarmNamePrefix = annotation.alarmNamePrefix || ''; var d = $q.defer(); var self = this; - var allQueryPromise = _.map(statistics, function(statistic) { - return self.performDescribeAlarmsForMetric(region, namespace, metricName, dimensions, statistic, period); - }); + var allQueryPromise; + if (usePrefixMatch) { + allQueryPromise = [ + this.performDescribeAlarms(region, actionPrefix, alarmNamePrefix, [], '').then(function(alarms) { + alarms.MetricAlarms = _.filter(alarms.MetricAlarms, function(alarm) { + if (!_.isEmpty(namespace) && alarm.Namespace !== namespace) { + return false; + } + if (!_.isEmpty(metricName) && alarm.MetricName !== metricName) { + return false; + } + var sd = function(d) { + return d.Name; + }; + var isSameDimensions = JSON.stringify(_.sortBy(alarm.Dimensions, sd)) === JSON.stringify(_.sortBy(dimensions, sd)); + if (!_.isEmpty(dimensions) && !isSameDimensions) { + return false; + } + if (!_.isEmpty(statistics) && !_.contains(statistics, alarm.Statistic)) { + return false; + } + if (!_.isNaN(period) && alarm.Period !== period) { + return false; + } + return true; + }); + + return alarms; + }) + ]; + } else { + if (!region || !namespace || !metricName || _.isEmpty(statistics)) { return $q.when([]); } + + allQueryPromise = _.map(statistics, function(statistic) { + return self.performDescribeAlarmsForMetric(region, namespace, metricName, dimensions, statistic, period); + }); + } $q.all(allQueryPromise).then(function(alarms) { var eventList = []; diff --git a/public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html b/public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html index 050698f3ff2..a82f82edf96 100644 --- a/public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html +++ b/public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html @@ -1 +1,19 @@ +
+
+
Prefix matching
+
+ +
+ +
+ + +
+ +
+ + +
+
+
From e96d72d66926fb2726bb01c8995f3a3507893b55 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Sat, 9 Jan 2016 09:50:10 +0900 Subject: [PATCH 003/108] reuse credentials --- pkg/api/cloudwatch/cloudwatch.go | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/pkg/api/cloudwatch/cloudwatch.go b/pkg/api/cloudwatch/cloudwatch.go index bf281864da5..88d22800d65 100644 --- a/pkg/api/cloudwatch/cloudwatch.go +++ b/pkg/api/cloudwatch/cloudwatch.go @@ -144,17 +144,9 @@ func handleListMetrics(req *cwRequest, c *middleware.Context) { } func handleDescribeAlarms(req *cwRequest, c *middleware.Context) { - sess := session.New() - creds := credentials.NewChainCredentials( - []credentials.Provider{ - &credentials.EnvProvider{}, - &credentials.SharedCredentialsProvider{Filename: "", Profile: req.DataSource.Database}, - &ec2rolecreds.EC2RoleProvider{Client: ec2metadata.New(sess), ExpiryWindow: 5 * time.Minute}, - }) - cfg := &aws.Config{ Region: aws.String(req.Region), - Credentials: creds, + Credentials: getCredentials(req.DataSource.Database), } svc := cloudwatch.New(session.New(cfg), cfg) From a20443b5772ce78f58d22aed59d5d8b7cdaaec4b Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Fri, 15 Jan 2016 21:34:34 +0900 Subject: [PATCH 004/108] (cloudwatch) refactor annotation query --- .../cloudwatch/annotation_query.d.ts | 2 + .../datasource/cloudwatch/annotation_query.js | 105 +++++++++++++++++ .../datasource/cloudwatch/datasource.js | 107 +++--------------- .../specs/annotation_query_specs.ts | 81 +++++++++++++ .../cloudwatch/specs/datasource_specs.ts | 55 --------- 5 files changed, 201 insertions(+), 149 deletions(-) create mode 100644 public/app/plugins/datasource/cloudwatch/annotation_query.d.ts create mode 100644 public/app/plugins/datasource/cloudwatch/annotation_query.js create mode 100644 public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts diff --git a/public/app/plugins/datasource/cloudwatch/annotation_query.d.ts b/public/app/plugins/datasource/cloudwatch/annotation_query.d.ts new file mode 100644 index 00000000000..c3318b8e133 --- /dev/null +++ b/public/app/plugins/datasource/cloudwatch/annotation_query.d.ts @@ -0,0 +1,2 @@ +declare var test: any; +export default test; diff --git a/public/app/plugins/datasource/cloudwatch/annotation_query.js b/public/app/plugins/datasource/cloudwatch/annotation_query.js new file mode 100644 index 00000000000..46fbd3a87a9 --- /dev/null +++ b/public/app/plugins/datasource/cloudwatch/annotation_query.js @@ -0,0 +1,105 @@ +define([ + 'lodash', +], +function (_) { + 'use strict'; + + function CloudWatchAnnotationQuery(datasource, annotation, $q, templateSrv) { + this.datasource = datasource; + this.annotation = annotation; + this.$q = $q; + this.templateSrv = templateSrv; + } + + CloudWatchAnnotationQuery.prototype.process = function(from, to) { + var self = this; + var usePrefixMatch = this.annotation.prefixMatching; + var region = this.templateSrv.replace(this.annotation.region); + var namespace = this.templateSrv.replace(this.annotation.namespace); + var metricName = this.templateSrv.replace(this.annotation.metricName); + var dimensions = this.datasource.convertDimensionFormat(this.annotation.dimensions); + var statistics = _.map(this.annotation.statistics, function(s) { return self.templateSrv.replace(s); }); + var defaultPeriod = usePrefixMatch ? '' : '300'; + var period = this.annotation.period || defaultPeriod; + period = parseInt(period, 10); + var actionPrefix = this.annotation.actionPrefix || ''; + var alarmNamePrefix = this.annotation.alarmNamePrefix || ''; + + var d = this.$q.defer(); + var allQueryPromise; + if (usePrefixMatch) { + allQueryPromise = [ + this.datasource.performDescribeAlarms(region, actionPrefix, alarmNamePrefix, [], '').then(function(alarms) { + alarms.MetricAlarms = self.filterAlarms(alarms, namespace, metricName, dimensions, statistics, period); + return alarms; + }) + ]; + } else { + if (!region || !namespace || !metricName || _.isEmpty(statistics)) { return this.$q.when([]); } + + allQueryPromise = _.map(statistics, function(statistic) { + return self.datasource.performDescribeAlarmsForMetric(region, namespace, metricName, dimensions, statistic, period); + }); + } + this.$q.all(allQueryPromise).then(function(alarms) { + var eventList = []; + + var start = self.datasource.convertToCloudWatchTime(from, false); + var end = self.datasource.convertToCloudWatchTime(to, true); + _.chain(alarms) + .pluck('MetricAlarms') + .flatten() + .each(function(alarm) { + if (!alarm) { + d.resolve(eventList); + return; + } + + self.datasource.performDescribeAlarmHistory(region, alarm.AlarmName, start, end).then(function(history) { + _.each(history.AlarmHistoryItems, function(h) { + var event = { + annotation: self.annotation, + time: Date.parse(h.Timestamp), + title: h.AlarmName, + tags: [h.HistoryItemType], + text: h.HistorySummary + }; + + eventList.push(event); + }); + + d.resolve(eventList); + }); + }); + }); + + return d.promise; + }; + + CloudWatchAnnotationQuery.prototype.filterAlarms = function(alarms, namespace, metricName, dimensions, statistics, period) { + return _.filter(alarms.MetricAlarms, function(alarm) { + if (!_.isEmpty(namespace) && alarm.Namespace !== namespace) { + return false; + } + if (!_.isEmpty(metricName) && alarm.MetricName !== metricName) { + return false; + } + var sd = function(d) { + return d.Name; + }; + var isSameDimensions = JSON.stringify(_.sortBy(alarm.Dimensions, sd)) === JSON.stringify(_.sortBy(dimensions, sd)); + if (!_.isEmpty(dimensions) && !isSameDimensions) { + return false; + } + if (!_.isEmpty(statistics) && !_.contains(statistics, alarm.Statistic)) { + return false; + } + if (!_.isNaN(period) && alarm.Period !== period) { + return false; + } + return true; + }); + }; + + return CloudWatchAnnotationQuery; +}); diff --git a/public/app/plugins/datasource/cloudwatch/datasource.js b/public/app/plugins/datasource/cloudwatch/datasource.js index 881d4e48c3d..153ca28b54f 100644 --- a/public/app/plugins/datasource/cloudwatch/datasource.js +++ b/public/app/plugins/datasource/cloudwatch/datasource.js @@ -3,8 +3,9 @@ define([ 'lodash', 'moment', 'app/core/utils/datemath', + './annotation_query', ], -function (angular, _, moment, dateMath) { +function (angular, _, moment, dateMath, CloudWatchAnnotationQuery) { 'use strict'; /** @ngInject */ @@ -15,9 +16,10 @@ function (angular, _, moment, dateMath) { this.proxyUrl = instanceSettings.url; this.defaultRegion = instanceSettings.jsonData.defaultRegion; + var self = this; this.query = function(options) { - var start = convertToCloudWatchTime(options.range.from, false); - var end = convertToCloudWatchTime(options.range.to, true); + var start = self.convertToCloudWatchTime(options.range.from, false); + var end = self.convertToCloudWatchTime(options.range.to, true); var queries = []; options = angular.copy(options); @@ -30,7 +32,7 @@ function (angular, _, moment, dateMath) { query.region = templateSrv.replace(target.region, options.scopedVars); query.namespace = templateSrv.replace(target.namespace, options.scopedVars); query.metricName = templateSrv.replace(target.metricName, options.scopedVars); - query.dimensions = convertDimensionFormat(target.dimensions, options.scopedVars); + query.dimensions = self.convertDimensionFormat(target.dimensions, options.scopedVars); query.statistics = target.statistics; var range = end - start; @@ -115,7 +117,7 @@ function (angular, _, moment, dateMath) { parameters: { namespace: templateSrv.replace(namespace), metricName: templateSrv.replace(metricName), - dimensions: convertDimensionFormat(filterDimensions, {}), + dimensions: this.convertDimensionFormat(filterDimensions, {}), } }; @@ -229,91 +231,8 @@ function (angular, _, moment, dateMath) { }; this.annotationQuery = function(options) { - var annotation = options.annotation; - var usePrefixMatch = annotation.prefixMatching; - var region = templateSrv.replace(annotation.region); - var namespace = templateSrv.replace(annotation.namespace); - var metricName = templateSrv.replace(annotation.metricName); - var dimensions = convertDimensionFormat(annotation.dimensions); - var statistics = _.map(annotation.statistics, function(s) { return templateSrv.replace(s); }); - var defaultPeriod = usePrefixMatch ? '' : '300'; - var period = annotation.period || defaultPeriod; - period = parseInt(period, 10); - var actionPrefix = annotation.actionPrefix || ''; - var alarmNamePrefix = annotation.alarmNamePrefix || ''; - - var d = $q.defer(); - var self = this; - var allQueryPromise; - if (usePrefixMatch) { - allQueryPromise = [ - this.performDescribeAlarms(region, actionPrefix, alarmNamePrefix, [], '').then(function(alarms) { - alarms.MetricAlarms = _.filter(alarms.MetricAlarms, function(alarm) { - if (!_.isEmpty(namespace) && alarm.Namespace !== namespace) { - return false; - } - if (!_.isEmpty(metricName) && alarm.MetricName !== metricName) { - return false; - } - var sd = function(d) { - return d.Name; - }; - var isSameDimensions = JSON.stringify(_.sortBy(alarm.Dimensions, sd)) === JSON.stringify(_.sortBy(dimensions, sd)); - if (!_.isEmpty(dimensions) && !isSameDimensions) { - return false; - } - if (!_.isEmpty(statistics) && !_.contains(statistics, alarm.Statistic)) { - return false; - } - if (!_.isNaN(period) && alarm.Period !== period) { - return false; - } - return true; - }); - - return alarms; - }) - ]; - } else { - if (!region || !namespace || !metricName || _.isEmpty(statistics)) { return $q.when([]); } - - allQueryPromise = _.map(statistics, function(statistic) { - return self.performDescribeAlarmsForMetric(region, namespace, metricName, dimensions, statistic, period); - }); - } - $q.all(allQueryPromise).then(function(alarms) { - var eventList = []; - - var start = convertToCloudWatchTime(options.range.from, false); - var end = convertToCloudWatchTime(options.range.to, true); - _.chain(alarms) - .pluck('MetricAlarms') - .flatten() - .each(function(alarm) { - if (!alarm) { - d.resolve(eventList); - return; - } - - self.performDescribeAlarmHistory(region, alarm.AlarmName, start, end).then(function(history) { - _.each(history.AlarmHistoryItems, function(h) { - var event = { - annotation: annotation, - time: Date.parse(h.Timestamp), - title: h.AlarmName, - tags: [h.HistoryItemType], - text: h.HistorySummary - }; - - eventList.push(event); - }); - - d.resolve(eventList); - }); - }); - }); - - return d.promise; + var annotationQuery = new CloudWatchAnnotationQuery(this, options.annotation, $q, templateSrv); + return annotationQuery.process(options.range.from, options.range.to); }; this.testDatasource = function() { @@ -383,21 +302,21 @@ function (angular, _, moment, dateMath) { }); } - function convertToCloudWatchTime(date, roundUp) { + this.convertToCloudWatchTime = function(date, roundUp) { if (_.isString(date)) { date = dateMath.parse(date, roundUp); } return Math.round(date.valueOf() / 1000); - } + }; - function convertDimensionFormat(dimensions, scopedVars) { + this.convertDimensionFormat = function(dimensions, scopedVars) { return _.map(dimensions, function(value, key) { return { Name: templateSrv.replace(key, scopedVars), Value: templateSrv.replace(value, scopedVars) }; }); - } + }; } diff --git a/public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts b/public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts new file mode 100644 index 00000000000..dbdbc8d1fd6 --- /dev/null +++ b/public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts @@ -0,0 +1,81 @@ +import "../datasource"; +import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; +import moment from 'moment'; +import helpers from 'test/specs/helpers'; +import Datasource from "../datasource"; +import CloudWatchAnnotationQuery from '../annotation_query'; + +describe('CloudWatchAnnotationQuery', function() { + var ctx = new helpers.ServiceTestContext(); + var instanceSettings = { + jsonData: {defaultRegion: 'us-east-1', access: 'proxy'}, + }; + + beforeEach(angularMocks.module('grafana.core')); + beforeEach(angularMocks.module('grafana.services')); + beforeEach(angularMocks.module('grafana.controllers')); + beforeEach(ctx.providePhase(['templateSrv', 'backendSrv'])); + + beforeEach(angularMocks.inject(function($q, $rootScope, $httpBackend, $injector) { + ctx.$q = $q; + ctx.$httpBackend = $httpBackend; + ctx.$rootScope = $rootScope; + ctx.ds = $injector.instantiate(Datasource, {instanceSettings: instanceSettings}); + })); + + describe('When performing annotationQuery', function() { + var parameter = { + annotation: { + region: 'us-east-1', + namespace: 'AWS/EC2', + metricName: 'CPUUtilization', + dimensions: { + InstanceId: 'i-12345678' + }, + statistics: ['Average'], + period: 300 + }, + range: { + from: moment(1443438674760), + to: moment(1443460274760) + } + }; + var alarmResponse = { + MetricAlarms: [ + { + AlarmName: 'test_alarm_name' + } + ] + }; + var historyResponse = { + AlarmHistoryItems: [ + { + Timestamp: '2015-01-01T00:00:00.000Z', + HistoryItemType: 'StateUpdate', + AlarmName: 'test_alarm_name', + HistoryData: '{}', + HistorySummary: 'test_history_summary' + } + ] + }; + beforeEach(function() { + ctx.backendSrv.datasourceRequest = function(params) { + switch (params.data.action) { + case 'DescribeAlarmsForMetric': + return ctx.$q.when({data: alarmResponse}); + case 'DescribeAlarmHistory': + return ctx.$q.when({data: historyResponse}); + } + }; + }); + it('should return annotation list', function(done) { + var annotationQuery = new CloudWatchAnnotationQuery(ctx.ds, parameter.annotation, ctx.$q, ctx.templateSrv); + annotationQuery.process(parameter.range.from, parameter.range.to).then(function(result) { + expect(result[0].title).to.be('test_alarm_name'); + expect(result[0].text).to.be('test_history_summary'); + done(); + }); + ctx.$rootScope.$apply(); + }); + }); +}); diff --git a/public/app/plugins/datasource/cloudwatch/specs/datasource_specs.ts b/public/app/plugins/datasource/cloudwatch/specs/datasource_specs.ts index cec32420aea..c03e5085cc2 100644 --- a/public/app/plugins/datasource/cloudwatch/specs/datasource_specs.ts +++ b/public/app/plugins/datasource/cloudwatch/specs/datasource_specs.ts @@ -187,59 +187,4 @@ describe('CloudWatchDatasource', function() { expect(scenario.request.data.action).to.be('ListMetrics'); }); }); - - describe('When performing annotationQuery', function() { - var parameter = { - annotation: { - region: 'us-east-1', - namespace: 'AWS/EC2', - metricName: 'CPUUtilization', - dimensions: { - InstanceId: 'i-12345678' - }, - statistics: ['Average'], - period: 300 - }, - range: { - from: moment(1443438674760), - to: moment(1443460274760) - } - }; - var alarmResponse = { - MetricAlarms: [ - { - AlarmName: 'test_alarm_name' - } - ] - }; - var historyResponse = { - AlarmHistoryItems: [ - { - Timestamp: '2015-01-01T00:00:00.000Z', - HistoryItemType: 'StateUpdate', - AlarmName: 'test_alarm_name', - HistoryData: '{}', - HistorySummary: 'test_history_summary' - } - ] - }; - beforeEach(function() { - ctx.backendSrv.datasourceRequest = function(params) { - switch (params.data.action) { - case 'DescribeAlarmsForMetric': - return ctx.$q.when({data: alarmResponse}); - case 'DescribeAlarmHistory': - return ctx.$q.when({data: historyResponse}); - } - }; - }); - it('should return annotation list', function(done) { - ctx.ds.annotationQuery(parameter).then(function(result) { - expect(result[0].title).to.be('test_alarm_name'); - expect(result[0].text).to.be('test_history_summary'); - done(); - }); - ctx.$rootScope.$apply(); - }); - }); }); From a4e5b7ea379e9f8a92ea0432158e9071a7a89ccc Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Thu, 4 Feb 2016 13:21:29 +0900 Subject: [PATCH 005/108] fix cloudwatch test error --- .../datasource/cloudwatch/specs/annotation_query_specs.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts b/public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts index dbdbc8d1fd6..e3a8fc3f9cb 100644 --- a/public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts +++ b/public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts @@ -2,7 +2,7 @@ import "../datasource"; import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; import moment from 'moment'; import helpers from 'test/specs/helpers'; -import Datasource from "../datasource"; +import {CloudWatchDatasource} from "../datasource"; import CloudWatchAnnotationQuery from '../annotation_query'; describe('CloudWatchAnnotationQuery', function() { @@ -20,7 +20,7 @@ describe('CloudWatchAnnotationQuery', function() { ctx.$q = $q; ctx.$httpBackend = $httpBackend; ctx.$rootScope = $rootScope; - ctx.ds = $injector.instantiate(Datasource, {instanceSettings: instanceSettings}); + ctx.ds = $injector.instantiate(CloudWatchDatasource, {instanceSettings: instanceSettings}); })); describe('When performing annotationQuery', function() { From fbe422008a5c1777abf7b28a071d9567edb2285d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 19 Feb 2016 15:58:26 +0100 Subject: [PATCH 006/108] ux(): began work on sasslint --- public/sass/.sass-lint.yml | 33 ++ public/sass/.scss-lint.yml | 533 ------------------ public/sass/_grafana.scss | 1 - public/sass/bootstrap/grid.scss | 21 - .../sass/bootstrap/responsive-1200px-min.scss | 28 - .../sass/bootstrap/responsive-767px-max.scss | 161 ------ .../bootstrap/responsive-768px-979px.scss | 19 - .../sass/bootstrap/responsive-utilities.scss | 59 -- public/sass/bootstrap/responsive.scss | 27 - tasks/options/sasslint.js | 10 + tasks/options/scsslint.js | 12 - 11 files changed, 43 insertions(+), 861 deletions(-) create mode 100644 public/sass/.sass-lint.yml delete mode 100644 public/sass/.scss-lint.yml delete mode 100644 public/sass/bootstrap/grid.scss delete mode 100644 public/sass/bootstrap/responsive-1200px-min.scss delete mode 100644 public/sass/bootstrap/responsive-767px-max.scss delete mode 100644 public/sass/bootstrap/responsive-768px-979px.scss delete mode 100644 public/sass/bootstrap/responsive-utilities.scss delete mode 100644 public/sass/bootstrap/responsive.scss create mode 100644 tasks/options/sasslint.js delete mode 100644 tasks/options/scsslint.js diff --git a/public/sass/.sass-lint.yml b/public/sass/.sass-lint.yml new file mode 100644 index 00000000000..a0016f966ee --- /dev/null +++ b/public/sass/.sass-lint.yml @@ -0,0 +1,33 @@ +files: + include: '**/*.s+(a|c)ss' + ignore: + +rules: + empty-line-between-blocks: 0 + no-empty-rulesets: 1 + # Consistency Rules + # extends-before-mixins: 1 + # extends-before-declarations: 1 + # mixins-before-declarations: 1 + # Require an empty line between blocks + # final-newline: 1 + # no-ids: 1 + # indentation: 0 + # leading-zero: 1 + # name-format: 0 + # nesting-depth: 1 + # placeholder-in-extend: 1 + # property-sort-order: 1 + # property-spelling: 0 + # shorthand: 1 + # one-declaration-per-line: 1 + # single-line-per-selector: 1 + # space-after-comma: 1 + # # Space surrounding colons + # space-before-colon: 1 + # space-after-colon: 1 + # + # space-before-brace: 1 + # + # space-between-parens: 1 + # trailing-semicolon: 1 diff --git a/public/sass/.scss-lint.yml b/public/sass/.scss-lint.yml deleted file mode 100644 index 925f3c4b0f1..00000000000 --- a/public/sass/.scss-lint.yml +++ /dev/null @@ -1,533 +0,0 @@ -# Default application configuration that all configurations inherit from. -scss_files: - - "**/*.scss" - -plugin_directories: ['.scss-linters'] - -# List of gem names to load custom linters from (make sure they are already -# installed) -plugin_gems: [] - -# Default severity of all linters. -severity: warning - -linters: - BangFormat: - enabled: true - space_before_bang: true - space_after_bang: false - - BemDepth: - enabled: false - max_elements: 1 - - BorderZero: - enabled: true - convention: zero # or `none` - - ChainedClasses: - enabled: false - - ColorKeyword: - enabled: true - - ColorVariable: - enabled: false - - Comment: - enabled: true - exclude: - - _normalize.scss - - bootstrap.scss - style: silent - - DebugStatement: - enabled: true - - DeclarationOrder: - enabled: false - - DisableLinterReason: - enabled: false - - DuplicateProperty: - enabled: true - - ElsePlacement: - enabled: true - style: same_line # or 'new_line' - - EmptyLineBetweenBlocks: - enabled: false - ignore_single_line_blocks: true - - EmptyRule: - enabled: true - - ExtendDirective: - enabled: false - - FinalNewline: - enabled: true - present: true - - HexLength: - enabled: true - style: short # or 'long' - - HexNotation: - enabled: true - style: lowercase # or 'uppercase' - - HexValidation: - enabled: true - - IdSelector: - enabled: true - - ImportantRule: - enabled: true - - ImportPath: - enabled: true - leading_underscore: false - filename_extension: false - - Indentation: - enabled: true - allow_non_nested_indentation: false - character: space # or 'tab' - width: 2 - - LeadingZero: - enabled: true - style: exclude_zero # or 'include_zero' - - MergeableSelector: - enabled: false - force_nesting: true - - NameFormat: - enabled: true - allow_leading_underscore: true - convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern - - NestingDepth: - enabled: true - max_depth: 4 - ignore_parent_selectors: false - - PlaceholderInExtend: - enabled: false - - PropertyCount: - enabled: false - include_nested: false - max_properties: 10 - - PropertySortOrder: - enabled: true - ignore_unspecified: false - min_properties: 2 - separate_groups: false - order: - - position - - top - - right - - bottom - - left - - z-index - - -webkit-box-sizing - - -moz-box-sizing - - box-sizing - - display - - flex - - flex-align - - flex-basis - - flex-direction - - flex-flow - - flex-grow - - flex-order - - flex-pack - - float - - width - - min-width - - max-width - - height - - min-height - - max-height - - padding - - padding-top - - padding-right - - padding-bottom - - padding-left - - margin - - margin-top - - margin-right - - margin-bottom - - margin-left - - overflow - - overflow-x - - overflow-y - - -webkit-overflow-scrolling - - -ms-overflow-x - - -ms-overflow-y - - -ms-overflow-style - - clip - - clear - - font - - font-family - - font-size - - font-style - - font-weight - - font-variant - - font-size-adjust - - font-stretch - - font-effect - - font-emphasize - - font-emphasize-position - - font-emphasize-style - - font-smooth - - -webkit-hyphens - - -moz-hyphens - - hyphens - - line-height - - color - - text-align - - -webkit-text-align-last - - -moz-text-align-last - - -ms-text-align-last - - text-align-last - - text-emphasis - - text-emphasis-color - - text-emphasis-style - - text-emphasis-position - - text-decoration - - text-indent - - text-justify - - text-outline - - -ms-text-overflow - - text-overflow - - text-overflow-ellipsis - - text-overflow-mode - - text-shadow - - text-transform - - text-wrap - - -webkit-text-size-adjust - - -ms-text-size-adjust - - letter-spacing - - -ms-word-break - - word-break - - word-spacing - - -ms-word-wrap - - word-wrap - - -moz-tab-size - - -o-tab-size - - tab-size - - white-space - - vertical-align - - list-style - - list-style-position - - list-style-type - - list-style-image - - pointer-events - - -ms-touch-action - - touch-action - - cursor - - visibility - - zoom - - table-layout - - empty-cells - - caption-side - - border-spacing - - border-collapse - - content - - quotes - - counter-reset - - counter-increment - - resize - - -webkit-user-select - - -moz-user-select - - -ms-user-select - - -o-user-select - - user-select - - nav-index - - nav-up - - nav-right - - nav-down - - nav-left - - background - - background-color - - background-image - - -ms-filter:\\'progid:DXImageTransform.Microsoft.gradient - - filter:progid:DXImageTransform.Microsoft.gradient - - filter:progid:DXImageTransform.Microsoft.AlphaImageLoader - - filter - - background-repeat - - background-attachment - - background-position - - background-position-x - - background-position-y - - -webkit-background-clip - - -moz-background-clip - - background-clip - - background-origin - - -webkit-background-size - - -moz-background-size - - -o-background-size - - background-size - - border - - border-color - - border-style - - border-width - - border-top - - border-top-color - - border-top-style - - border-top-width - - border-right - - border-right-color - - border-right-style - - border-right-width - - border-bottom - - border-bottom-color - - border-bottom-style - - border-bottom-width - - border-left - - border-left-color - - border-left-style - - border-left-width - - border-radius - - border-top-left-radius - - border-top-right-radius - - border-bottom-right-radius - - border-bottom-left-radius - - -webkit-border-image - - -moz-border-image - - -o-border-image - - border-image - - -webkit-border-image-source - - -moz-border-image-source - - -o-border-image-source - - border-image-source - - -webkit-border-image-slice - - -moz-border-image-slice - - -o-border-image-slice - - border-image-slice - - -webkit-border-image-width - - -moz-border-image-width - - -o-border-image-width - - border-image-width - - -webkit-border-image-outset - - -moz-border-image-outset - - -o-border-image-outset - - border-image-outset - - -webkit-border-image-repeat - - -moz-border-image-repeat - - -o-border-image-repeat - - border-image-repeat - - outline - - outline-width - - outline-style - - outline-color - - outline-offset - - -webkit-box-shadow - - -moz-box-shadow - - box-shadow - - filter:progid:DXImageTransform.Microsoft.Alpha(Opacity - - -ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha - - opacity - - -ms-interpolation-mode - - -webkit-transition - - -moz-transition - - -ms-transition - - -o-transition - - transition - - -webkit-transition-delay - - -moz-transition-delay - - -ms-transition-delay - - -o-transition-delay - - transition-delay - - -webkit-transition-timing-function - - -moz-transition-timing-function - - -ms-transition-timing-function - - -o-transition-timing-function - - transition-timing-function - - -webkit-transition-duration - - -moz-transition-duration - - -ms-transition-duration - - -o-transition-duration - - transition-duration - - -webkit-transition-property - - -moz-transition-property - - -ms-transition-property - - -o-transition-property - - transition-property - - -webkit-transform - - -moz-transform - - -ms-transform - - -o-transform - - transform - - -webkit-transform-origin - - -moz-transform-origin - - -ms-transform-origin - - -o-transform-origin - - transform-origin - - -webkit-animation - - -moz-animation - - -ms-animation - - -o-animation - - animation - - -webkit-animation-name - - -moz-animation-name - - -ms-animation-name - - -o-animation-name - - animation-name - - -webkit-animation-duration - - -moz-animation-duration - - -ms-animation-duration - - -o-animation-duration - - animation-duration - - -webkit-animation-play-state - - -moz-animation-play-state - - -ms-animation-play-state - - -o-animation-play-state - - animation-play-state - - -webkit-animation-timing-function - - -moz-animation-timing-function - - -ms-animation-timing-function - - -o-animation-timing-function - - animation-timing-function - - -webkit-animation-delay - - -moz-animation-delay - - -ms-animation-delay - - -o-animation-delay - - animation-delay - - -webkit-animation-iteration-count - - -moz-animation-iteration-count - - -ms-animation-iteration-count - - -o-animation-iteration-count - - animation-iteration-count - - -webkit-animation-direction - - -moz-animation-direction - - -ms-animation-direction - - -o-animation-direction - - - PropertySpelling: - enabled: true - extra_properties: [] - disabled_properties: [] - - PropertyUnits: - enabled: true - global: [ - 'ch', 'em', 'ex', 'rem', # Font-relative lengths - 'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths - 'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths - 'deg', 'grad', 'rad', 'turn', # Angle - 'ms', 's', # Duration - 'Hz', 'kHz', # Frequency - 'dpi', 'dpcm', 'dppx', # Resolution - '%'] # Other - properties: {} - - PseudoElement: - enabled: true - - QualifyingElement: - enabled: true - allow_element_with_attribute: false - allow_element_with_class: false - allow_element_with_id: false - - SelectorDepth: - enabled: true - max_depth: 4 - - SelectorFormat: - enabled: false - convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern - - Shorthand: - enabled: true - allowed_shorthands: [1, 2, 3] - - SingleLinePerProperty: - enabled: false - allow_single_line_rule_sets: true - - SingleLinePerSelector: - enabled: false - - SpaceAfterComma: - enabled: false - style: one_space # or 'no_space', or 'at_least_one_space' - - SpaceAfterPropertyColon: - enabled: true - style: at_least_one_space # or 'no_space', or 'at_least_one_space', or 'aligned' - - SpaceAfterPropertyName: - enabled: true - - SpaceAfterVariableName: - enabled: true - - SpaceAroundOperator: - enabled: true - style: one_space # or 'at_least_one_space', or 'no_space' - - SpaceBeforeBrace: - enabled: true - style: space # or 'new_line' - allow_single_line_padding: false - - SpaceBetweenParens: - enabled: true - spaces: 0 - - StringQuotes: - enabled: true - style: double_quotes # or double_quotes - - TrailingSemicolon: - enabled: true - - TrailingWhitespace: - enabled: true - - TrailingZero: - enabled: false - - TransitionAll: - enabled: false - - UnnecessaryMantissa: - enabled: true - - UnnecessaryParentReference: - enabled: true - - UrlFormat: - enabled: true - - UrlQuotes: - enabled: true - - VariableForProperty: - enabled: false - properties: [] - - VendorPrefix: - enabled: true - identifier_list: base - additional_identifiers: [] - excluded_identifiers: [] - exclude: - - _normalize.scss - - ZeroUnit: - enabled: true - - Compass::*: - enabled: false diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 9bc924ec79d..250721500e9 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -7,7 +7,6 @@ @import "mixins/hover"; @import "mixins/forms"; - // BASE @import "base/normalize"; @import "base/reboot"; diff --git a/public/sass/bootstrap/grid.scss b/public/sass/bootstrap/grid.scss deleted file mode 100644 index 15b89a8703e..00000000000 --- a/public/sass/bootstrap/grid.scss +++ /dev/null @@ -1,21 +0,0 @@ -// -// Grid system -// -------------------------------------------------- - - -// Fixed (940px) -#grid > .core($gridColumnWidth, $gridGutterWidth); - -// Fluid (940px) -#grid > .fluid($fluidGridColumnWidth, $fluidGridGutterWidth); - -// Reset utility classes due to specificity -[class*="span"].hide, -.row-fluid [class*="span"].hide { - display: none; -} - -[class*="span"].pull-right, -.row-fluid [class*="span"].pull-right { - float: right; -} diff --git a/public/sass/bootstrap/responsive-1200px-min.scss b/public/sass/bootstrap/responsive-1200px-min.scss deleted file mode 100644 index 8b85385d84f..00000000000 --- a/public/sass/bootstrap/responsive-1200px-min.scss +++ /dev/null @@ -1,28 +0,0 @@ -// -// Responsive: Large desktop and up -// -------------------------------------------------- - - -@media (min-width: 1200px) { - - // Fixed grid - #grid > .core($gridColumnWidth1200, $gridGutterWidth1200); - - // Fluid grid - #grid > .fluid($fluidGridColumnWidth1200, $fluidGridGutterWidth1200); - - // Input grid - #grid > .input($gridColumnWidth1200, $gridGutterWidth1200); - - // Thumbnails - .thumbnails { - margin-left: -$gridGutterWidth1200; - } - .thumbnails > li { - margin-left: $gridGutterWidth1200; - } - .row-fluid .thumbnails { - margin-left: 0; - } - -} diff --git a/public/sass/bootstrap/responsive-767px-max.scss b/public/sass/bootstrap/responsive-767px-max.scss deleted file mode 100644 index 37d9c11e700..00000000000 --- a/public/sass/bootstrap/responsive-767px-max.scss +++ /dev/null @@ -1,161 +0,0 @@ -// -// Responsive: Landscape phone to desktop/tablet -// -------------------------------------------------- - - -@media (max-width: 767px) { - - // GRID & CONTAINERS - // ----------------- - // Remove width from containers - .container { - width: auto; - } - // Fluid rows - .row-fluid { - width: 100%; - } - // Undo negative margin on rows and thumbnails - .row, - .thumbnails { - margin-left: 0; - } - .thumbnails > li { - float: none; - margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present - } - // Make all grid-sized elements block level again - [class*="span"], - .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing - .row-fluid [class*="span"] { - float: none; - display: block; - width: 100%; - margin-left: 0; - @include box-sizing(border-box); - } - .span12, - .row-fluid .span12 { - width: 100%; - @include box-sizing(border-box); - } - .row-fluid [class*="offset"]:first-child { - margin-left: 0; - } - - // FORM FIELDS - // ----------- - // Make span* classes full width - .input-large, - .input-xlarge, - .input-xxlarge, - input[class*="span"], - select[class*="span"], - textarea[class*="span"], - .uneditable-input { - @mixin input-block-level(); - } - // But don't let it screw up prepend/append inputs - .input-prepend input, - .input-append input, - .input-prepend input[class*="span"], - .input-append input[class*="span"] { - display: inline-block; // redeclare so they don't wrap to new lines - width: auto; - } - .controls-row [class*="span"] + [class*="span"] { - margin-left: 0; - } - - // Modals - .modal { - position: fixed; - top: 20px; - left: 20px; - right: 20px; - width: auto; - margin: 0; - &.fade { top: -100px; } - &.fade.in { top: 20px; } - } - -} - - - -// UP TO LANDSCAPE PHONE -// --------------------- - -@media (max-width: 480px) { - - // Smooth out the collapsing/expanding nav - .nav-collapse { - -webkit-transform: translate3d(0, 0, 0); // activate the GPU - } - - // Block level the page header small tag for readability - .page-header h1 small { - display: block; - line-height: $line-height-base; - } - - // Update checkboxes for iOS - input[type="checkbox"], - input[type="radio"] { - border: 1px solid #ccc; - } - - // Remove the horizontal form styles - .form-horizontal { - .control-label { - float: none; - width: auto; - padding-top: 0; - text-align: left; - } - // Move over all input controls and content - .controls { - margin-left: 0; - } - // Move the options list down to align with labels - .control-list { - padding-top: 0; // has to be padding because margin collaspes - } - // Move over buttons in .form-actions to align with .controls - .form-actions { - padding-left: 10px; - padding-right: 10px; - } - } - - // Medias - // Reset float and spacing to stack - .media .pull-left, - .media .pull-right { - float: none; - display: block; - margin-bottom: 10px; - } - // Remove side margins since we stack instead of indent - .media-object { - margin-right: 0; - margin-left: 0; - } - - // Modals - .modal { - top: 10px; - left: 10px; - right: 10px; - } - .modal-header .close { - padding: 10px; - margin: -10px; - } - - // Carousel - .carousel-caption { - position: static; - } - -} diff --git a/public/sass/bootstrap/responsive-768px-979px.scss b/public/sass/bootstrap/responsive-768px-979px.scss deleted file mode 100644 index cef846699c3..00000000000 --- a/public/sass/bootstrap/responsive-768px-979px.scss +++ /dev/null @@ -1,19 +0,0 @@ -// -// Responsive: Tablet to desktop -// -------------------------------------------------- - - -@media (min-width: 768px) and (max-width: 979px) { - - // Fixed grid - #grid > .core($gridColumnWidth768, $gridGutterWidth768); - - // Fluid grid - #grid > .fluid($fluidGridColumnWidth768, $fluidGridGutterWidth768); - - // Input grid - #grid > .input($gridColumnWidth768, $gridGutterWidth768); - - // No need to reset .thumbnails here since it's the same $gridGutterWidth - -} diff --git a/public/sass/bootstrap/responsive-utilities.scss b/public/sass/bootstrap/responsive-utilities.scss deleted file mode 100644 index eca42571a89..00000000000 --- a/public/sass/bootstrap/responsive-utilities.scss +++ /dev/null @@ -1,59 +0,0 @@ -// -// Responsive: Utility classes -// -------------------------------------------------- - - -// IE10 Metro responsive -// Required for Windows 8 Metro split-screen snapping with IE10 -// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ -$-ms-viewport{ - width: device-width; -} - -// Hide from screenreaders and browsers -// Credit: HTML5 Boilerplate -.hidden { - display: none; - visibility: hidden; -} - -// Visibility utilities - -// For desktops -.visible-phone { display: none !important; } -.visible-tablet { display: none !important; } -.hidden-phone { } -.hidden-tablet { } -.hidden-desktop { display: none !important; } -.visible-desktop { display: inherit !important; } - -// Tablets & small desktops only -@media (min-width: 768px) and (max-width: 979px) { - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important ; } - // Show - .visible-tablet { display: inherit !important; } - // Hide - .hidden-tablet { display: none !important; } -} - -// Phones only -@media (max-width: 767px) { - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important; } - // Show - .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior - // Hide - .hidden-phone { display: none !important; } -} - -// Print utilities -.visible-print { display: none !important; } -.hidden-print { } - -@media print { - .visible-print { display: inherit !important; } - .hidden-print { display: none !important; } -} diff --git a/public/sass/bootstrap/responsive.scss b/public/sass/bootstrap/responsive.scss deleted file mode 100644 index 8f4888f23d5..00000000000 --- a/public/sass/bootstrap/responsive.scss +++ /dev/null @@ -1,27 +0,0 @@ -/*! - * Bootstrap Responsive v2.3.2 - * - * Copyright 2013 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world by $mdo and $fat. - */ - - -// Responsive.scss -// For phone and tablet devices -// ------------------------------------------------------------- - - -// REPEAT VARIABLES & MIXINS -// ------------------------- -// Required since we compile the responsive stuff separately - -@import "../mixins/mixins.scss"; -@import "responsive-utilities.scss"; -@import "responsive-1200px-min.scss"; -@import "responsive-768px-979px.scss"; -@import "responsive-767px-max.scss"; - - diff --git a/tasks/options/sasslint.js b/tasks/options/sasslint.js new file mode 100644 index 00000000000..d16dad714a3 --- /dev/null +++ b/tasks/options/sasslint.js @@ -0,0 +1,10 @@ +module.exports = function(config) { + 'use strict'; + + return { + options: { + configFile: 'public/sass/.sass-lint.yml', + }, + target: ['public/sass/**/*.scss', '!public/sass/base/_normalize.scss'] + }; +}; diff --git a/tasks/options/scsslint.js b/tasks/options/scsslint.js deleted file mode 100644 index 86e2d8555ed..00000000000 --- a/tasks/options/scsslint.js +++ /dev/null @@ -1,12 +0,0 @@ -module.exports = function(config) { - return { - options: { - bundleExec: true, - config: 'public/sass/.scss-lint.yml', - reporterOutput: null - }, - core: { - src: ['public/sass/**/*.scss', '!public/sass/base/_normalize.scss'] - } - }; -}; From 02ac7a4001c99a17ecdf5a5a116f5aac479553c4 Mon Sep 17 00:00:00 2001 From: marknmel Date: Fri, 19 Feb 2016 10:05:01 -0500 Subject: [PATCH 007/108] Update kbn.js data rate for Mbits has typo - should be megabits/sec - not megabites/sec --- public/app/core/utils/kbn.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/core/utils/kbn.js b/public/app/core/utils/kbn.js index fbb854148f9..1f827dcbb80 100644 --- a/public/app/core/utils/kbn.js +++ b/public/app/core/utils/kbn.js @@ -595,7 +595,7 @@ function($, _) { {text: 'bytes/sec', value: 'Bps'}, {text: 'kilobites/sec', value: 'Kbits'}, {text: 'kilobytes/sec', value: 'KBs'}, - {text: 'megabites/sec', value: 'Mbits'}, + {text: 'megabits/sec', value: 'Mbits'}, {text: 'megabytes/sec', value: 'MBs'}, {text: 'gigabytes/sec', value: 'GBs'}, {text: 'gigabites/sec', value: 'Gbits'}, From 2c0b191ef532d515a77e486a11cdae8a1eaa5aaa Mon Sep 17 00:00:00 2001 From: marknmel Date: Fri, 19 Feb 2016 10:24:49 -0500 Subject: [PATCH 008/108] Updated typos - Kilobits, Megabits and Gigabits Update typos - Kilobits, Megabits and Gigabits - not Kilobites, Megabites, or Gigabites --- public/app/core/utils/kbn.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app/core/utils/kbn.js b/public/app/core/utils/kbn.js index 1f827dcbb80..97f2f10f799 100644 --- a/public/app/core/utils/kbn.js +++ b/public/app/core/utils/kbn.js @@ -593,12 +593,12 @@ function($, _) { {text: 'packets/sec', value: 'pps'}, {text: 'bits/sec', value: 'bps'}, {text: 'bytes/sec', value: 'Bps'}, - {text: 'kilobites/sec', value: 'Kbits'}, + {text: 'kilobits/sec', value: 'Kbits'}, {text: 'kilobytes/sec', value: 'KBs'}, {text: 'megabits/sec', value: 'Mbits'}, {text: 'megabytes/sec', value: 'MBs'}, {text: 'gigabytes/sec', value: 'GBs'}, - {text: 'gigabites/sec', value: 'Gbits'}, + {text: 'gigabits/sec', value: 'Gbits'}, ] }, { From 17904a6e8b6f4a4907280d3452dc5753fce87448 Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Sat, 20 Feb 2016 15:33:58 -0800 Subject: [PATCH 009/108] some nav fixes --- public/app/features/admin/partials/admin_home.html | 2 +- public/app/features/apps/partials/list.html | 2 +- public/app/features/playlist/partials/playlists.html | 2 +- public/app/features/profile/partials/profile.html | 2 +- public/app/features/snapshot/partials/snapshots.html | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/public/app/features/admin/partials/admin_home.html b/public/app/features/admin/partials/admin_home.html index eed8f503ed8..c6d0807a5d2 100644 --- a/public/app/features/admin/partials/admin_home.html +++ b/public/app/features/admin/partials/admin_home.html @@ -1,4 +1,4 @@ - +
diff --git a/public/app/features/apps/partials/list.html b/public/app/features/apps/partials/list.html index bab4ca5c687..bb39e6c6504 100644 --- a/public/app/features/apps/partials/list.html +++ b/public/app/features/apps/partials/list.html @@ -1,4 +1,4 @@ - +
diff --git a/public/app/features/playlist/partials/playlists.html b/public/app/features/playlist/partials/playlists.html index d790de40069..888bdb2b6b9 100644 --- a/public/app/features/playlist/partials/playlists.html +++ b/public/app/features/playlist/partials/playlists.html @@ -1,4 +1,4 @@ - +
diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index 00ae3b5e163..042344eeac6 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -1,4 +1,4 @@ - +
diff --git a/public/app/features/snapshot/partials/snapshots.html b/public/app/features/snapshot/partials/snapshots.html index f6e54b9f0c5..90b65058e21 100644 --- a/public/app/features/snapshot/partials/snapshots.html +++ b/public/app/features/snapshot/partials/snapshots.html @@ -1,4 +1,4 @@ - +
From a93fe5b2b2c54aaeea61ec473881002ca50ab57c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 21 Feb 2016 18:08:44 +0100 Subject: [PATCH 010/108] poc(): tether drop --- public/app/core/components/popover/popover.ts | 25 ++ public/app/core/core.ts | 11 +- .../datasources/partials/http_settings.html | 3 + public/app/headers/common.d.ts | 8 + public/app/system.conf.js | 1 + public/sass/_grafana.scss | 2 + public/sass/components/_popovers.scss | 178 +++++++++++++ public/sass/components/_tether_drop.scss | 245 ++++++++++++++++++ 8 files changed, 472 insertions(+), 1 deletion(-) create mode 100644 public/app/core/components/popover/popover.ts create mode 100644 public/sass/components/_tether_drop.scss diff --git a/public/app/core/components/popover/popover.ts b/public/app/core/components/popover/popover.ts new file mode 100644 index 00000000000..26b088f95d2 --- /dev/null +++ b/public/app/core/components/popover/popover.ts @@ -0,0 +1,25 @@ +/// + +import _ from 'lodash'; +import $ from 'jquery'; +import coreModule from '../../core_module'; +import Drop from 'tether-drop'; + +export function popoverDirective() { + return { + restrict: 'E', + link: function(scope, elem, attrs) { + var inputElem = elem.prev(); + console.log(inputElem); + var drop = new Drop({ + target: inputElem[0], + content: 'Welcome to the future!', + position: 'right middle', + classes: 'drop-theme-arrows-bounce-dark', + openOn: 'click' + }); + } + }; +} + +coreModule.directive('gfPopover', popoverDirective); diff --git a/public/app/core/core.ts b/public/app/core/core.ts index f973340a336..e9b5e3c71a3 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -24,6 +24,7 @@ import './partials'; import {grafanaAppDirective} from './components/grafana_app'; import {sideMenuDirective} from './components/sidemenu/sidemenu'; import {searchDirective} from './components/search/search'; +import {popoverDirective} from './components/popover/popover'; import {navbarDirective} from './components/navbar/navbar'; import {arrayJoin} from './directives/array_join'; import 'app/core/controllers/all'; @@ -32,4 +33,12 @@ import 'app/core/routes/routes'; import './filters/filters'; import coreModule from './core_module'; -export {arrayJoin, coreModule, grafanaAppDirective, sideMenuDirective, navbarDirective, searchDirective}; +export { + arrayJoin, + coreModule, + grafanaAppDirective, + sideMenuDirective, + navbarDirective, + searchDirective, + popoverDirective +}; diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index 2874e157767..cbcc471647e 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -6,6 +6,9 @@
Url + + Help +
diff --git a/public/app/headers/common.d.ts b/public/app/headers/common.d.ts index b66ba845827..67c8604685f 100644 --- a/public/app/headers/common.d.ts +++ b/public/app/headers/common.d.ts @@ -39,4 +39,12 @@ declare module 'app/core/store' { export default store; } +declare module 'tether' { + var config: any; + export default config; +} +declare module 'tether-drop' { + var config: any; + export default config; +} diff --git a/public/app/system.conf.js b/public/app/system.conf.js index 640ae843820..9e68baa8588 100644 --- a/public/app/system.conf.js +++ b/public/app/system.conf.js @@ -3,6 +3,7 @@ System.config({ baseURL: 'public', paths: { 'tether': 'vendor/npm/tether/dist/js/tether.js', + 'tether-drop': 'vendor/npm/tether-drop/dist/js/drop.js', 'moment': 'vendor/moment.js', "jquery": "vendor/jquery/dist/jquery.js", 'lodash-src': 'vendor/lodash.js', diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index a412919ef25..d273e9019ce 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -64,6 +64,7 @@ @import "components/footer"; @import "components/infobox"; @import "components/shortcuts"; +@import "components/tether_drop"; @import "components/query_editor"; // PAGES @@ -76,3 +77,4 @@ @import "pages/styleguide"; @import "old_responsive"; + diff --git a/public/sass/components/_popovers.scss b/public/sass/components/_popovers.scss index b426450d118..f97ae454c99 100644 --- a/public/sass/components/_popovers.scss +++ b/public/sass/components/_popovers.scss @@ -126,3 +126,181 @@ } } + +.drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before { + box-sizing: border-box; } + +.drop-element { + position: absolute; + display: none; } + .drop-element.drop-open { + display: block; } + +.drop-element.drop-theme-arrows-bounce-dark { + max-width: 100%; + max-height: 100%; } + .drop-element.drop-theme-arrows-bounce-dark .drop-content { + border-radius: 5px; + position: relative; + font-family: inherit; + background: #000; + color: #fff; + padding: 1em; + font-size: 1.1em; + line-height: 1.5em; } + .drop-element.drop-theme-arrows-bounce-dark .drop-content:before { + content: ""; + display: block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-width: 12px; + border-style: solid; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content { + margin-bottom: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content:before { + top: 100%; + left: 50%; + margin-left: -12px; + border-top-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content { + margin-top: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content:before { + bottom: 100%; + left: 50%; + margin-left: -12px; + border-bottom-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content { + margin-right: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content:before { + left: 100%; + top: 50%; + margin-top: -12px; + border-left-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content { + margin-left: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content:before { + right: 100%; + top: 50%; + margin-top: -12px; + border-right-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { + margin-top: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before { + bottom: 100%; + left: 12px; + border-bottom-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { + margin-top: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before { + bottom: 100%; + right: 12px; + border-bottom-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { + margin-bottom: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before { + top: 100%; + left: 12px; + border-top-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { + margin-bottom: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before { + top: 100%; + right: 12px; + border-top-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { + margin-right: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before { + top: 12px; + left: 100%; + border-left-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { + margin-left: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before { + top: 12px; + right: 100%; + border-right-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { + margin-right: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before { + bottom: 12px; + left: 100%; + border-left-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { + margin-left: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before { + bottom: 12px; + right: 100%; + border-right-color: #000; } + +.drop-element.drop-theme-arrows-bounce-dark { + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-transition: opacity 100ms; + transition: opacity 100ms; + opacity: 0; } + .drop-element.drop-theme-arrows-bounce-dark .drop-content { + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.265, 1.55); + transition: transform 0.3s cubic-bezier(0, 0, 0.265, 1.55); + -webkit-transform: scale(0) translateZ(0); + transform: scale(0) translateZ(0); } + .drop-element.drop-theme-arrows-bounce-dark.drop-open { + display: none; } + .drop-element.drop-theme-arrows-bounce-dark.drop-open-transitionend { + display: block; } + .drop-element.drop-theme-arrows-bounce-dark.drop-after-open { + -webkit-transition: none; + transition: none; + opacity: 1; } + .drop-element.drop-theme-arrows-bounce-dark.drop-after-open .drop-content { + -webkit-transform: scale(1) translateZ(0); + transform: scale(1) translateZ(0); } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content { + -webkit-transform-origin: 50% calc(100% + 12px); + -ms-transform-origin: 50% calc(100% + 12px); + transform-origin: 50% calc(100% + 12px); } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content { + -webkit-transform-origin: 50% -12px; + -ms-transform-origin: 50% -12px; + transform-origin: 50% -12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content { + -webkit-transform-origin: calc(100% + 12px) 50%; + -ms-transform-origin: calc(100% + 12px) 50%; + transform-origin: calc(100% + 12px) 50%; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content { + -webkit-transform-origin: -12px 50%; + -ms-transform-origin: -12px 50%; + transform-origin: -12px 50%; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { + -webkit-transform-origin: 0 -12px; + -ms-transform-origin: 0 -12px; + transform-origin: 0 -12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { + -webkit-transform-origin: 100% -12px; + -ms-transform-origin: 100% -12px; + transform-origin: 100% -12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { + -webkit-transform-origin: 0 calc(100% + 12px); + -ms-transform-origin: 0 calc(100% + 12px); + transform-origin: 0 calc(100% + 12px); } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { + -webkit-transform-origin: 100% calc(100% + 12px); + -ms-transform-origin: 100% calc(100% + 12px); + transform-origin: 100% calc(100% + 12px); } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { + -webkit-transform-origin: calc(100% + 12px) 0; + -ms-transform-origin: calc(100% + 12px) 0; + transform-origin: calc(100% + 12px) 0; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { + -webkit-transform-origin: -12px 0; + -ms-transform-origin: -12px 0; + transform-origin: -12px 0; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { + -webkit-transform-origin: calc(100% + 12px) 100%; + -ms-transform-origin: calc(100% + 12px) 100%; + transform-origin: calc(100% + 12px) 100%; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { + -webkit-transform-origin: -12px 100%; + -ms-transform-origin: -12px 100%; + transform-origin: -12px 100%; } diff --git a/public/sass/components/_tether_drop.scss b/public/sass/components/_tether_drop.scss new file mode 100644 index 00000000000..dc91d4dc2ea --- /dev/null +++ b/public/sass/components/_tether_drop.scss @@ -0,0 +1,245 @@ + +@mixin tether($themePrefix: "tether") { + .#{ $themePrefix }-element, .#{ $themePrefix }-element * { + &, &:after, &:before { + box-sizing: border-box; + } + } + + .#{ $themePrefix }-element { + position: absolute; + display: none; + } + + &.#{ $themePrefix }-open { + display: block; + } +} + +@mixin tether-theme-arrows($themePrefix: "tether", $themeName: "arrows", $arrowSize: 16px, $arrowPointerEvents: null, $backgroundColor: #fff, $color: inherit, $useDropShadow: false) { + .#{ $themePrefix }-element.#{ $themePrefix }-theme-#{ $themeName } { + max-width: 100%; + max-height: 100%; + + .#{ $themePrefix }-content { + border-radius: 5px; + position: relative; + font-family: inherit; + background: $backgroundColor; + color: $color; + padding: 1em; + font-size: 1.1em; + line-height: 1.5em; + + @if $useDropShadow { + transform: translateZ(0); + filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .2)); + } + + &:before { + content: ""; + display: block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-width: $arrowSize; + border-style: solid; + pointer-events: $arrowPointerEvents; + } + } + + // Centers and middles + + &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + left: 50%; + margin-left: - $arrowSize; + border-top-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + left: 50%; + margin-left: - $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content { + margin-right: $arrowSize; + + &:before { + left: 100%; + top: 50%; + margin-top: - $arrowSize; + border-left-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content { + margin-left: $arrowSize; + + &:before { + right: 100%; + top: 50%; + margin-top: - $arrowSize; + border-right-color: $backgroundColor; + } + } + + // Target middle/center, element corner + + &.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content { + left: - $arrowSize * 2; + } + + &.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content { + left: $arrowSize * 2; + } + + &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + left: $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + right: $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + left: $arrowSize; + border-top-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + right: $arrowSize; + border-top-color: $backgroundColor; + } + } + + // Top and bottom corners + &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + left: $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + right: $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + left: $arrowSize; + border-top-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + right: $arrowSize; + border-top-color: $backgroundColor; + } + } + + // Side corners + &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content { + margin-right: $arrowSize; + + &:before { + top: $arrowSize; + left: 100%; + border-left-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content { + margin-left: $arrowSize; + + &:before { + top: $arrowSize; + right: 100%; + border-right-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content { + margin-right: $arrowSize; + + &:before { + bottom: $arrowSize; + left: 100%; + border-left-color: $backgroundColor; + } + } + + &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content { + margin-left: $arrowSize; + + &:before { + bottom: $arrowSize; + right: 100%; + border-right-color: $backgroundColor; + } + } + } +} + +$themePrefix: "drop"; +$themeName: "arrows-bounce-dark"; +$arrowSize: 12px; +$backgroundColor: #000; +$color: #fff; +$useDropShadow: false; +$attachmentOffset: $arrowSize; +$easing: cubic-bezier(0, 0, 0.265, 1.55); + +@include tether($themePrefix: $themePrefix); +@include tether-theme-arrows($themePrefix: $themePrefix, $themeName: $themeName, $arrowSize: $arrowSize, $backgroundColor: $backgroundColor, $color: $color, $useDropShadow: $useDropShadow); + + +// +drop-animation-scale($themePrefix: $themePrefix, $themeName: $themeName, $attachmentOffset: $attachmentOffset, $easing: $easing) From 69b87fdb9a8d189ec1220d037b1fef8338382f21 Mon Sep 17 00:00:00 2001 From: benrubson Date: Mon, 22 Feb 2016 08:55:52 +0100 Subject: [PATCH 011/108] make auto interval calculation more accurate --- public/app/core/utils/kbn.js | 57 ++++++++++++++++++++++++++---------- 1 file changed, 42 insertions(+), 15 deletions(-) diff --git a/public/app/core/utils/kbn.js b/public/app/core/utils/kbn.js index fbb854148f9..b2741ad8f82 100644 --- a/public/app/core/utils/kbn.js +++ b/public/app/core/utils/kbn.js @@ -12,39 +12,66 @@ function($, _) { kbn.round_interval = function(interval) { switch (true) { - // 0.5s - case (interval <= 500): + // 0.3s + case (interval <= 300): return 100; // 0.1s - // 5s - case (interval <= 5000): + // 0.75s + case (interval <= 750): + return 500; // 0.5s + // 1.5s + case (interval <= 1500): return 1000; // 1s + // 3.5s + case (interval <= 3500): + return 2000; // 2s // 7.5s case (interval <= 7500): return 5000; // 5s - // 15s - case (interval <= 15000): + // 12.5s + case (interval <= 12500): return 10000; // 10s + // 17.5s + case (interval <= 17500): + return 15000; // 15s + // 25s + case (interval <= 25000): + return 20000; // 20s // 45s case (interval <= 45000): return 30000; // 30s - // 3m - case (interval <= 180000): + // 1.5m + case (interval <= 90000): return 60000; // 1m - // 9m + // 3.5m + case (interval <= 210000): + return 120000; // 2m + // 7.5m case (interval <= 450000): return 300000; // 5m - // 20m - case (interval <= 1200000): + // 12.5m + case (interval <= 750000): return 600000; // 10m + // 12.5m + case (interval <= 1050000): + return 900000; // 15m + // 25m + case (interval <= 1500000): + return 1200000; // 20m // 45m case (interval <= 2700000): return 1800000; // 30m - // 2h - case (interval <= 7200000): + // 1.5h + case (interval <= 5400000): return 3600000; // 1h - // 6h - case (interval <= 21600000): + // 2.5h + case (interval <= 9000000): + return 7200000; // 2h + // 4.5h + case (interval <= 16200000): return 10800000; // 3h + // 9h + case (interval <= 32400000): + return 21600000; // 6h // 24h case (interval <= 86400000): return 43200000; // 12h From f225bb003202dead511150f5e87024114affe72b Mon Sep 17 00:00:00 2001 From: bergquist Date: Fri, 19 Feb 2016 16:01:02 +0100 Subject: [PATCH 012/108] ux(annotations): migrate annotations editors to new form --- public/app/core/directives/misc.js | 2 +- .../features/annotations/partials/editor.html | 47 +++++++-------- .../partials/annotations.editor.html | 59 +++++++++---------- .../graphite/partials/annotations.editor.html | 25 ++++---- .../influxdb/partials/annotations.editor.html | 36 ++++++----- .../partials/annotations.editor.html | 38 ++++++------ public/sass/components/_dashboard.scss | 6 ++ 7 files changed, 105 insertions(+), 108 deletions(-) diff --git a/public/app/core/directives/misc.js b/public/app/core/directives/misc.js index d9bd7a38f0c..8e1791af46c 100644 --- a/public/app/core/directives/misc.js +++ b/public/app/core/directives/misc.js @@ -39,7 +39,7 @@ function (angular, coreModule, kbn) { var tip = attrs.tip ? (' ' + attrs.tip + '') : ''; var showIf = attrs.showIf ? (' ng-show="' + attrs.showIf + '" ') : ''; - var template = '
' + + var template = '
' + ' ' + '
- -
@@ -66,28 +64,32 @@
-
-
-
- - +
+
+
+ Name +
-
- - +
+ Datasource +
-
- +
+
+
+ Icon size + +
+
+ Icon color
-
- - +
+
- -
- +
+ Line color
@@ -96,11 +98,10 @@ -
- - -
-
+
+ + +
diff --git a/public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html b/public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html index 8f761b67865..1db00904c04 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html +++ b/public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html @@ -1,39 +1,36 @@ -
-
-
Index name
-
- -
+
+
+ Index name +
-
-
Search query (lucene) Use [[filterName]] in query to replace part of the query with a filter value
-
- -
+
+ Search query (lucene) Use [[filterName]] in query to replace part of the query with a filter value +
-
-
-
Field mappings
-
- - +
+
Field mappings
+
+
+ Time +
-
- - -
- -
- - -
- -
- - +
+ Title +
-
+
+
+ Tags + +
+ +
+ Text + +
+
+
\ No newline at end of file diff --git a/public/app/plugins/datasource/graphite/partials/annotations.editor.html b/public/app/plugins/datasource/graphite/partials/annotations.editor.html index ea5c2f7f50f..b7264b5e499 100644 --- a/public/app/plugins/datasource/graphite/partials/annotations.editor.html +++ b/public/app/plugins/datasource/graphite/partials/annotations.editor.html @@ -1,15 +1,10 @@ -
-
- - -
-
- -
-
- - -
-
- - +
+
+ Graphite target expression + +
+
+ Graphite event tags + +
+
\ No newline at end of file diff --git a/public/app/plugins/datasource/influxdb/partials/annotations.editor.html b/public/app/plugins/datasource/influxdb/partials/annotations.editor.html index 03ef1df0b52..3c4634bb657 100644 --- a/public/app/plugins/datasource/influxdb/partials/annotations.editor.html +++ b/public/app/plugins/datasource/influxdb/partials/annotations.editor.html @@ -1,29 +1,27 @@ -
-
-
InfluxDB Query Example: select text from events where $timeFilter
-
- +
+
+
+ InfluxDB Query Example: select text from events where $timeFilter +
- -
-
-
Column mappings If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.
-
- - +
+
Column mappings If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.
+
+
+ Title +
-
- - +
+ Tags +
-
- - +
+ Text +
- diff --git a/public/app/plugins/datasource/prometheus/partials/annotations.editor.html b/public/app/plugins/datasource/prometheus/partials/annotations.editor.html index ffeb7d6deea..5a155b3a1b5 100644 --- a/public/app/plugins/datasource/prometheus/partials/annotations.editor.html +++ b/public/app/plugins/datasource/prometheus/partials/annotations.editor.html @@ -1,28 +1,28 @@ -
-
-
Search expression
-
- +
+
+
+ Search expression +
- -
-
-
Field formats
-
- - +
+
Field formats
+
+
+ Title +
-
- - +
+ Tags +
- -
- - +
+
+
+ Text +
diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss index 1ca0c3b9719..8b4b272d523 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/components/_dashboard.scss @@ -285,3 +285,9 @@ div.flot-text { padding: 1.2rem .5rem .4rem .5rem; } } + +.annotations-basic-settings { + .last-row { + margin-bottom: 20px; + } +} From 2034d4b9710b0cb9fd0cdf14aa9981cd0417eda4 Mon Sep 17 00:00:00 2001 From: benrubson Date: Mon, 22 Feb 2016 10:12:02 +0100 Subject: [PATCH 013/108] update kbn specs to make tests OK --- public/test/core/utils/kbn_specs.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/test/core/utils/kbn_specs.js b/public/test/core/utils/kbn_specs.js index 23c752fe471..7e75e880546 100644 --- a/public/test/core/utils/kbn_specs.js +++ b/public/test/core/utils/kbn_specs.js @@ -127,7 +127,7 @@ define([ it('10m 1600 resolution', function() { var range = { from: dateMath.parse('now-10m'), to: dateMath.parse('now') }; var str = kbn.calculateInterval(range, 1600, null); - expect(str).to.be('100ms'); + expect(str).to.be('500ms'); }); it('fixed user interval', function() { @@ -145,7 +145,7 @@ define([ it('large time range and user low limit', function() { var range = { from: dateMath.parse('now-14d'), to: dateMath.parse('now') }; var str = kbn.calculateInterval(range, 1000, '>10s'); - expect(str).to.be('30m'); + expect(str).to.be('20m'); }); }); }); From b98c826e954d91610a566d017e1bcf2c09ce7816 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Feb 2016 10:17:35 +0100 Subject: [PATCH 014/108] ux(): worked on new popover --- public/app/core/components/popover/popover.ts | 45 +- .../datasources/partials/http_settings.html | 13 +- public/sass/components/_popovers.scss | 178 ------ public/sass/components/_tether_drop.scss | 540 ++++++++++-------- 4 files changed, 349 insertions(+), 427 deletions(-) diff --git a/public/app/core/components/popover/popover.ts b/public/app/core/components/popover/popover.ts index 26b088f95d2..5c4534ad500 100644 --- a/public/app/core/components/popover/popover.ts +++ b/public/app/core/components/popover/popover.ts @@ -8,15 +8,44 @@ import Drop from 'tether-drop'; export function popoverDirective() { return { restrict: 'E', - link: function(scope, elem, attrs) { + transclude: true, + link: function(scope, elem, attrs, ctrl, transclude) { var inputElem = elem.prev(); - console.log(inputElem); - var drop = new Drop({ - target: inputElem[0], - content: 'Welcome to the future!', - position: 'right middle', - classes: 'drop-theme-arrows-bounce-dark', - openOn: 'click' + if (inputElem.length === 0) { + console.log('Failed to find input element for popover'); + return; + } + + + transclude(function(clone, newScope) { + var content = document.createElement("div"); + _.each(clone, (node) => { + content.appendChild(node); + }); + + var drop = new Drop({ + target: inputElem[0], + content: content, + position: 'right middle', + classes: 'drop-popover', + openOn: 'click', + tetherOptions: { + offset: "0 -10px" + } + }); + + // inputElem.on('focus.popover', function() { + // drop.open(); + // }); + // + // inputElem.on('blur.popover', function() { + // close(); + // }); + + scope.$on('$destroy', function() { + drop.destroy(); + }); + }); } }; diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index cbcc471647e..93a47f4065a 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -6,8 +6,17 @@
Url - - Help + + +

Specify a complete HTTP url (http://your_server:8080)

+

+ When access method is Direct then this url needs to be + accessable from your browser. +

+

+ Your access method is currently Proxy then the url needs to + be accessable from the grafana backend. +

diff --git a/public/sass/components/_popovers.scss b/public/sass/components/_popovers.scss index f97ae454c99..e069fd8a78f 100644 --- a/public/sass/components/_popovers.scss +++ b/public/sass/components/_popovers.scss @@ -124,183 +124,5 @@ bottom: -$popoverArrowWidth; } } - } -.drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before { - box-sizing: border-box; } - -.drop-element { - position: absolute; - display: none; } - .drop-element.drop-open { - display: block; } - -.drop-element.drop-theme-arrows-bounce-dark { - max-width: 100%; - max-height: 100%; } - .drop-element.drop-theme-arrows-bounce-dark .drop-content { - border-radius: 5px; - position: relative; - font-family: inherit; - background: #000; - color: #fff; - padding: 1em; - font-size: 1.1em; - line-height: 1.5em; } - .drop-element.drop-theme-arrows-bounce-dark .drop-content:before { - content: ""; - display: block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-width: 12px; - border-style: solid; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content { - margin-bottom: 12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content:before { - top: 100%; - left: 50%; - margin-left: -12px; - border-top-color: #000; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content { - margin-top: 12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content:before { - bottom: 100%; - left: 50%; - margin-left: -12px; - border-bottom-color: #000; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content { - margin-right: 12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content:before { - left: 100%; - top: 50%; - margin-top: -12px; - border-left-color: #000; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content { - margin-left: 12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content:before { - right: 100%; - top: 50%; - margin-top: -12px; - border-right-color: #000; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { - margin-top: 12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before { - bottom: 100%; - left: 12px; - border-bottom-color: #000; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { - margin-top: 12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before { - bottom: 100%; - right: 12px; - border-bottom-color: #000; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { - margin-bottom: 12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before { - top: 100%; - left: 12px; - border-top-color: #000; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { - margin-bottom: 12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before { - top: 100%; - right: 12px; - border-top-color: #000; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { - margin-right: 12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before { - top: 12px; - left: 100%; - border-left-color: #000; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { - margin-left: 12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before { - top: 12px; - right: 100%; - border-right-color: #000; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { - margin-right: 12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before { - bottom: 12px; - left: 100%; - border-left-color: #000; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { - margin-left: 12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before { - bottom: 12px; - right: 100%; - border-right-color: #000; } - -.drop-element.drop-theme-arrows-bounce-dark { - -webkit-transform: translateZ(0); - transform: translateZ(0); - -webkit-transition: opacity 100ms; - transition: opacity 100ms; - opacity: 0; } - .drop-element.drop-theme-arrows-bounce-dark .drop-content { - -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.265, 1.55); - transition: transform 0.3s cubic-bezier(0, 0, 0.265, 1.55); - -webkit-transform: scale(0) translateZ(0); - transform: scale(0) translateZ(0); } - .drop-element.drop-theme-arrows-bounce-dark.drop-open { - display: none; } - .drop-element.drop-theme-arrows-bounce-dark.drop-open-transitionend { - display: block; } - .drop-element.drop-theme-arrows-bounce-dark.drop-after-open { - -webkit-transition: none; - transition: none; - opacity: 1; } - .drop-element.drop-theme-arrows-bounce-dark.drop-after-open .drop-content { - -webkit-transform: scale(1) translateZ(0); - transform: scale(1) translateZ(0); } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content { - -webkit-transform-origin: 50% calc(100% + 12px); - -ms-transform-origin: 50% calc(100% + 12px); - transform-origin: 50% calc(100% + 12px); } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content { - -webkit-transform-origin: 50% -12px; - -ms-transform-origin: 50% -12px; - transform-origin: 50% -12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content { - -webkit-transform-origin: calc(100% + 12px) 50%; - -ms-transform-origin: calc(100% + 12px) 50%; - transform-origin: calc(100% + 12px) 50%; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content { - -webkit-transform-origin: -12px 50%; - -ms-transform-origin: -12px 50%; - transform-origin: -12px 50%; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { - -webkit-transform-origin: 0 -12px; - -ms-transform-origin: 0 -12px; - transform-origin: 0 -12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { - -webkit-transform-origin: 100% -12px; - -ms-transform-origin: 100% -12px; - transform-origin: 100% -12px; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { - -webkit-transform-origin: 0 calc(100% + 12px); - -ms-transform-origin: 0 calc(100% + 12px); - transform-origin: 0 calc(100% + 12px); } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { - -webkit-transform-origin: 100% calc(100% + 12px); - -ms-transform-origin: 100% calc(100% + 12px); - transform-origin: 100% calc(100% + 12px); } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { - -webkit-transform-origin: calc(100% + 12px) 0; - -ms-transform-origin: calc(100% + 12px) 0; - transform-origin: calc(100% + 12px) 0; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { - -webkit-transform-origin: -12px 0; - -ms-transform-origin: -12px 0; - transform-origin: -12px 0; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { - -webkit-transform-origin: calc(100% + 12px) 100%; - -ms-transform-origin: calc(100% + 12px) 100%; - transform-origin: calc(100% + 12px) 100%; } - .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { - -webkit-transform-origin: -12px 100%; - -ms-transform-origin: -12px 100%; - transform-origin: -12px 100%; } diff --git a/public/sass/components/_tether_drop.scss b/public/sass/components/_tether_drop.scss index dc91d4dc2ea..28b563383b0 100644 --- a/public/sass/components/_tether_drop.scss +++ b/public/sass/components/_tether_drop.scss @@ -1,245 +1,307 @@ - -@mixin tether($themePrefix: "tether") { - .#{ $themePrefix }-element, .#{ $themePrefix }-element * { - &, &:after, &:before { - box-sizing: border-box; - } - } - - .#{ $themePrefix }-element { - position: absolute; - display: none; - } - - &.#{ $themePrefix }-open { - display: block; - } -} - -@mixin tether-theme-arrows($themePrefix: "tether", $themeName: "arrows", $arrowSize: 16px, $arrowPointerEvents: null, $backgroundColor: #fff, $color: inherit, $useDropShadow: false) { - .#{ $themePrefix }-element.#{ $themePrefix }-theme-#{ $themeName } { - max-width: 100%; - max-height: 100%; - - .#{ $themePrefix }-content { - border-radius: 5px; - position: relative; - font-family: inherit; - background: $backgroundColor; - color: $color; - padding: 1em; - font-size: 1.1em; - line-height: 1.5em; - - @if $useDropShadow { - transform: translateZ(0); - filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .2)); - } - - &:before { - content: ""; - display: block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-width: $arrowSize; - border-style: solid; - pointer-events: $arrowPointerEvents; - } - } - - // Centers and middles - - &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content { - margin-bottom: $arrowSize; - - &:before { - top: 100%; - left: 50%; - margin-left: - $arrowSize; - border-top-color: $backgroundColor; - } - } - - &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content { - margin-top: $arrowSize; - - &:before { - bottom: 100%; - left: 50%; - margin-left: - $arrowSize; - border-bottom-color: $backgroundColor; - } - } - - &.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content { - margin-right: $arrowSize; - - &:before { - left: 100%; - top: 50%; - margin-top: - $arrowSize; - border-left-color: $backgroundColor; - } - } - - &.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content { - margin-left: $arrowSize; - - &:before { - right: 100%; - top: 50%; - margin-top: - $arrowSize; - border-right-color: $backgroundColor; - } - } - - // Target middle/center, element corner - - &.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content { - left: - $arrowSize * 2; - } - - &.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content { - left: $arrowSize * 2; - } - - &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { - margin-top: $arrowSize; - - &:before { - bottom: 100%; - left: $arrowSize; - border-bottom-color: $backgroundColor; - } - } - - &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { - margin-top: $arrowSize; - - &:before { - bottom: 100%; - right: $arrowSize; - border-bottom-color: $backgroundColor; - } - } - - &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { - margin-bottom: $arrowSize; - - &:before { - top: 100%; - left: $arrowSize; - border-top-color: $backgroundColor; - } - } - - &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { - margin-bottom: $arrowSize; - - &:before { - top: 100%; - right: $arrowSize; - border-top-color: $backgroundColor; - } - } - - // Top and bottom corners - &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content { - margin-top: $arrowSize; - - &:before { - bottom: 100%; - left: $arrowSize; - border-bottom-color: $backgroundColor; - } - } - - &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content { - margin-top: $arrowSize; - - &:before { - bottom: 100%; - right: $arrowSize; - border-bottom-color: $backgroundColor; - } - } - - &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content { - margin-bottom: $arrowSize; - - &:before { - top: 100%; - left: $arrowSize; - border-top-color: $backgroundColor; - } - } - - &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content { - margin-bottom: $arrowSize; - - &:before { - top: 100%; - right: $arrowSize; - border-top-color: $backgroundColor; - } - } - - // Side corners - &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content { - margin-right: $arrowSize; - - &:before { - top: $arrowSize; - left: 100%; - border-left-color: $backgroundColor; - } - } - - &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content { - margin-left: $arrowSize; - - &:before { - top: $arrowSize; - right: 100%; - border-right-color: $backgroundColor; - } - } - - &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content { - margin-right: $arrowSize; - - &:before { - bottom: $arrowSize; - left: 100%; - border-left-color: $backgroundColor; - } - } - - &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content { - margin-left: $arrowSize; - - &:before { - bottom: $arrowSize; - right: 100%; - border-right-color: $backgroundColor; - } - } - } -} - -$themePrefix: "drop"; -$themeName: "arrows-bounce-dark"; -$arrowSize: 12px; -$backgroundColor: #000; -$color: #fff; +$arrowPointerEvents: null; +$color: inherit; +$useDropShadow: false; +$arrowSize: 1rem; +$backgroundColor: $btn-secondary-bg; +$color: $text-color; $useDropShadow: false; $attachmentOffset: $arrowSize; $easing: cubic-bezier(0, 0, 0.265, 1.55); -@include tether($themePrefix: $themePrefix); -@include tether-theme-arrows($themePrefix: $themePrefix, $themeName: $themeName, $arrowSize: $arrowSize, $backgroundColor: $backgroundColor, $color: $color, $useDropShadow: $useDropShadow); +.drop-element { + position: absolute; + display: none; + + &.drop-open { + display: block; + // hide when out of bounds + &.drop-out-of-bounds { + display: none; + } + } + + ul { + margin: 0 0 1rem 1rem; + } +} + +.drop-element, .drop-element * { + box-sizing: border-box; +} + +.drop-element.drop-popover { + max-width: 100%; + max-height: 100%; + + .drop-content { + border-radius: $border-radius-lg; + position: relative; + font-family: inherit; + background: $backgroundColor; + color: $color; + padding: 1em; + font-size: $font-size-sm; + max-width: 20rem; + + @if $useDropShadow { + transform: translateZ(0); + filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .2)); + } + + &:before { + content: ""; + display: block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-width: $arrowSize; + border-style: solid; + pointer-events: $arrowPointerEvents; + } + } + + // Centers and middles + + &.drop-element-attached-bottom.drop-element-attached-center .drop-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + left: 50%; + margin-left: - $arrowSize; + border-top-color: $backgroundColor; + } + } + + &.drop-element-attached-top.drop-element-attached-center .drop-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + left: 50%; + margin-left: - $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.drop-element-attached-right.drop-element-attached-middle .drop-content { + margin-right: $arrowSize; + + &:before { + left: 100%; + top: 50%; + margin-top: - $arrowSize; + border-left-color: $backgroundColor; + } + } + + &.drop-element-attached-left.drop-element-attached-middle .drop-content { + margin-left: $arrowSize; + + &:before { + right: 100%; + top: 50%; + margin-top: - $arrowSize; + border-right-color: $backgroundColor; + } + } + + // Target middle/center, element corner + &.drop-element-attached-left.drop-target-attached-center .drop-content { + left: - $arrowSize * 2; + } + + &.drop-element-attached-right.drop-target-attached-center .drop-content { + left: $arrowSize * 2; + } + + &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + left: $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + right: $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + left: $arrowSize; + border-top-color: $backgroundColor; + } + } + + &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + right: $arrowSize; + border-top-color: $backgroundColor; + } + } + + // Top and bottom corners + &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + left: $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { + margin-top: $arrowSize; + + &:before { + bottom: 100%; + right: $arrowSize; + border-bottom-color: $backgroundColor; + } + } + + &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + left: $arrowSize; + border-top-color: $backgroundColor; + } + } + + &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { + margin-bottom: $arrowSize; + + &:before { + top: 100%; + right: $arrowSize; + border-top-color: $backgroundColor; + } + } + + // Side corners + &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { + margin-right: $arrowSize; + + &:before { + top: $arrowSize; + left: 100%; + border-left-color: $backgroundColor; + } + } + + &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { + margin-left: $arrowSize; + + &:before { + top: $arrowSize; + right: 100%; + border-right-color: $backgroundColor; + } + } + + &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { + margin-right: $arrowSize; + + &:before { + bottom: $arrowSize; + left: 100%; + border-left-color: $backgroundColor; + } + } + + &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { + margin-left: $arrowSize; + + &:before { + bottom: $arrowSize; + right: 100%; + border-right-color: $backgroundColor; + } + } +} -// +drop-animation-scale($themePrefix: $themePrefix, $themeName: $themeName, $attachmentOffset: $attachmentOffset, $easing: $easing) +@mixin drop-animation-scale($themePrefix: "drop", $themeName: "default", $attachmentOffset: 0, $easing: "linear") { + .#{$themePrefix}-element.#{$themePrefix}-#{$themeName} { + transform: translateZ(0); + transition: opacity 100ms; + opacity: 0; + .#{$themePrefix}-content { + transition: transform 0.2s $easing; + transform: scale(0) translateZ(0); + } + &.#{$themePrefix}-open { + display: none; + } + &.#{$themePrefix}-open-transitionend { + display: block; + } + &.#{$themePrefix}-after-open { + transition: none; + opacity: 1; + .#{$themePrefix}-content { + transform: scale(1) translateZ(0); + } + } + // Centers and middles + &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-center .#{$themePrefix}-content { + transform-origin: 50% calc(100% + #{$attachmentOffset}); + } + &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-center .#{$themePrefix}-content { + transform-origin: 50% (-$attachmentOffset); + } + &.#{$themePrefix}-element-attached-right.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content { + transform-origin: calc(100% + #{$attachmentOffset}) 50%; + } + &.#{$themePrefix}-element-attached-left.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content { + transform-origin: -($attachmentOffset 50%); + } + // Top and bottom corners + &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content { + transform-origin: 0 (-$attachmentOffset); + } + &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content { + transform-origin: 100% (-$attachmentOffset); + } + &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-top .#{$themePrefix}-content { + transform-origin: 0 calc(100% + #{$attachmentOffset}); + } + &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-top .#{$themePrefix}-content { + transform-origin: 100% calc(100% + #{$attachmentOffset}); + } + // Side corners + &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content { + transform-origin: calc(100% + #{$attachmentOffset}) 0; + } + &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content { + transform-origin: (-$attachmentOffset) 0; + } + &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content { + transform-origin: calc(100% + #{$attachmentOffset}) 100%; + } + &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content { + transform-origin: (-$attachmentOffset) 100%; + } + } +} + +@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing); From 6c617ba28cfec8355a680e90b46fce7eb586e68f Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 22 Feb 2016 10:21:22 +0100 Subject: [PATCH 015/108] fix(annotations): rearrange missplaced save button --- .../features/annotations/partials/editor.html | 60 ++++++++++--------- 1 file changed, 32 insertions(+), 28 deletions(-) diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index f6e2a3a41a5..01171084bf5 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -64,32 +64,34 @@
-
-
-
- Name - +
+
+
+
+ Name + +
+
+ Datasource + +
-
- Datasource - -
-
-
-
- Icon size - -
-
- - Icon color -
-
- -
-
- - Line color +
+
+ Icon size + +
+
+ + Icon color +
+
+ +
+
+ + Line color +
@@ -98,9 +100,11 @@ -
- - +
+
+ + +
From ea4ce0ce1f4ea0cbdbbd3d61ef550e1fb7c1b3e0 Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 22 Feb 2016 11:29:09 +0100 Subject: [PATCH 016/108] ux(playlist): finalize the ux for playlists --- .../features/playlist/partials/playlist.html | 47 +++++++++++-------- .../features/playlist/playlist_edit_ctrl.ts | 2 +- public/sass/pages/_playlist.scss | 35 ++++++++++++++ 3 files changed, 64 insertions(+), 20 deletions(-) diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index b62d2a22f54..beb311a9e6c 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -7,6 +7,8 @@

Edit Playlist

+

A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.

+
Name @@ -19,24 +21,28 @@
-
-
Add dashboards
-
- -
-
+

Dashboards

-
Search results ({{ctrl.filteredDashboards.length + ctrl.filteredTags.length}})
+ +
+
+
Available
+
+ +
+
+
+
- +
- -
- {{playlistItem.title}} + +   {{playlistItem.title}} +
-
@@ -57,20 +63,20 @@
-
Added dashboards
- +
Selected
+
- - -
- {{playlistItem.title}} + +   {{playlistItem.title}} + {{playlistItem.title}} + @@ -89,7 +95,10 @@
-  Add + Save Cancel diff --git a/public/app/features/playlist/playlist_edit_ctrl.ts b/public/app/features/playlist/playlist_edit_ctrl.ts index 3baa3dd3353..ea018bc0bbb 100644 --- a/public/app/features/playlist/playlist_edit_ctrl.ts +++ b/public/app/features/playlist/playlist_edit_ctrl.ts @@ -11,7 +11,7 @@ export class PlaylistEditCtrl { searchQuery: string = ''; loading: boolean = false; playlist: any = { - interval: '10m', + interval: '5m', }; playlistItems: any = []; dashboardresult: any = []; diff --git a/public/sass/pages/_playlist.scss b/public/sass/pages/_playlist.scss index cbe94593f0a..f0d1cf4c038 100644 --- a/public/sass/pages/_playlist.scss +++ b/public/sass/pages/_playlist.scss @@ -1,3 +1,8 @@ +.playlist-description { + width: 555px; + margin-bottom: 20px; +} + .playlist-search-container { z-index: 1000; position: relative; @@ -18,6 +23,10 @@ right: 11px; } +.playlist-search-containerwrapper { + margin-bottom: 15px; +} + .playlist-search-field-wrapper { input { width: 100%; @@ -90,3 +99,29 @@ padding-left: 20px; } } + +.playlist-available-list { + td { + line-height: 2rem; + white-space: nowrap; + } + + .add-dashboard { + text-align: center; + } +} + +.playlist-column-header { + border-bottom: thin solid $gray-1; + padding-bottom: 10px; + margin-bottom: 15px; +} + +.selected-playlistitem-settings { + text-align: right; +} + +.tag-result-container { + width: 160px; + float: left; +} \ No newline at end of file From f375c3000d8e6f324660ff1ff55fc32d2036af75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Feb 2016 11:41:50 +0100 Subject: [PATCH 017/108] ux(): help popover --- public/app/core/components/popover/popover.ts | 5 +- .../core/components/sidemenu/sidemenu.html | 4 +- .../features/datasources/partials/edit.html | 8 + .../datasources/partials/http_settings.html | 16 +- public/sass/_grafana.scss | 6 +- public/sass/_variables.dark.scss | 4 + public/sass/_variables.light.scss | 6 +- public/sass/components/_drop.scss | 28 ++ public/sass/components/_tether_drop.scss | 307 ------------------ public/sass/mixins/_drop_element.scss | 272 ++++++++++++++++ 10 files changed, 333 insertions(+), 323 deletions(-) create mode 100644 public/sass/components/_drop.scss delete mode 100644 public/sass/components/_tether_drop.scss create mode 100644 public/sass/mixins/_drop_element.scss diff --git a/public/app/core/components/popover/popover.ts b/public/app/core/components/popover/popover.ts index 5c4534ad500..f2a413aca02 100644 --- a/public/app/core/components/popover/popover.ts +++ b/public/app/core/components/popover/popover.ts @@ -16,6 +16,7 @@ export function popoverDirective() { return; } + var offset = attrs.offset || '0 -10px'; transclude(function(clone, newScope) { var content = document.createElement("div"); @@ -27,10 +28,10 @@ export function popoverDirective() { target: inputElem[0], content: content, position: 'right middle', - classes: 'drop-popover', + classes: 'drop-help', openOn: 'click', tetherOptions: { - offset: "0 -10px" + offset: offset } }); diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html index 6e460e813ce..200f01e23cf 100644 --- a/public/app/core/components/sidemenu/sidemenu.html +++ b/public/app/core/components/sidemenu/sidemenu.html @@ -1,7 +1,7 @@
  • -
    +
    @@ -12,7 +12,7 @@ {{ctrl.user.name}} {{ctrl.user.orgName}}
    -
    +
+ diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index 93a47f4065a..a42d3e76c1b 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -9,14 +9,14 @@

Specify a complete HTTP url (http://your_server:8080)

-

- When access method is Direct then this url needs to be - accessable from your browser. -

-

- Your access method is currently Proxy then the url needs to - be accessable from the grafana backend. -

+ + Your access method is Direct, this means the url + needs to be accessable from the browser. + + + Your access method is currently Proxy, this means the url + needs to be accessable from the grafana backend. + diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index d273e9019ce..1d90ffaa97d 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -7,7 +7,7 @@ @import "mixins/grid-framework"; @import "mixins/hover"; @import "mixins/forms"; - +@import "mixins/drop_element"; // BASE @import "base/normalize"; @@ -64,7 +64,7 @@ @import "components/footer"; @import "components/infobox"; @import "components/shortcuts"; -@import "components/tether_drop"; +@import "components/drop"; @import "components/query_editor"; // PAGES @@ -76,5 +76,5 @@ @import "pages/signup"; @import "pages/styleguide"; -@import "old_responsive"; +@import "old_responsive"; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 8604552f020..eb2733206de 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -246,5 +246,9 @@ $popoverTitleBackground: $popoverBackground; $popoverArrowOuterWidth: $popoverArrowWidth + 1; $popoverArrowOuterColor: rgba(0,0,0,.25); +// popover +$popover-help-bg: $btn-secondary-bg; +$popover-help-color: $text-color; + // images $checkboxImageUrl: '../img/checkbox.png'; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 0b753411b32..9b04bd7445a 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -174,7 +174,7 @@ $dropdownBorder: $tight-form-border; $dropdownDividerTop: $gray-6; $dropdownDividerBottom: $white; $dropdownDivider: $dropdownDividerTop; -$dropdownTitle: $dark-5; +$dropdownTitle: $gray-3; $dropdownLinkColor: $dark-3; $dropdownLinkColorHover: $link-color; @@ -273,5 +273,9 @@ $popoverTitleBackground: $white; $popoverArrowOuterWidth: $popoverArrowWidth + 1; $popoverArrowOuterColor: rgba(0,0,0,.25); +// popover +$popover-help-bg: $blue-dark; +$popover-help-color: $gray-6; + // images $checkboxImageUrl: '../img/checkbox_white.png'; diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss new file mode 100644 index 00000000000..7a256f8efab --- /dev/null +++ b/public/sass/components/_drop.scss @@ -0,0 +1,28 @@ +$popover-arrow-size: 1rem; +$color: inherit; +$backgroundColor: $btn-secondary-bg; +$color: $text-color; +$useDropShadow: false; +$attachmentOffset: $popover-arrow-size; +$easing: cubic-bezier(0, 0, 0.265, 1.55); + +.drop-element { + position: absolute; + display: none; + + &.drop-open { + display: block; + } + + &.drop-open.drop-popover.drop-out-of-bounds, + &.drop-open-transitionend.drop-popover.drop-out-of-bounds { + display: none; + } +} + +.drop-element, .drop-element * { + box-sizing: border-box; +} + +@include drop-theme("help", $popover-help-bg, $popover-help-color); +@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing); diff --git a/public/sass/components/_tether_drop.scss b/public/sass/components/_tether_drop.scss deleted file mode 100644 index 28b563383b0..00000000000 --- a/public/sass/components/_tether_drop.scss +++ /dev/null @@ -1,307 +0,0 @@ -$arrowPointerEvents: null; -$color: inherit; -$useDropShadow: false; -$arrowSize: 1rem; -$backgroundColor: $btn-secondary-bg; -$color: $text-color; -$useDropShadow: false; -$attachmentOffset: $arrowSize; -$easing: cubic-bezier(0, 0, 0.265, 1.55); - -.drop-element { - position: absolute; - display: none; - - &.drop-open { - display: block; - // hide when out of bounds - &.drop-out-of-bounds { - display: none; - } - } - - ul { - margin: 0 0 1rem 1rem; - } -} - -.drop-element, .drop-element * { - box-sizing: border-box; -} - -.drop-element.drop-popover { - max-width: 100%; - max-height: 100%; - - .drop-content { - border-radius: $border-radius-lg; - position: relative; - font-family: inherit; - background: $backgroundColor; - color: $color; - padding: 1em; - font-size: $font-size-sm; - max-width: 20rem; - - @if $useDropShadow { - transform: translateZ(0); - filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .2)); - } - - &:before { - content: ""; - display: block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-width: $arrowSize; - border-style: solid; - pointer-events: $arrowPointerEvents; - } - } - - // Centers and middles - - &.drop-element-attached-bottom.drop-element-attached-center .drop-content { - margin-bottom: $arrowSize; - - &:before { - top: 100%; - left: 50%; - margin-left: - $arrowSize; - border-top-color: $backgroundColor; - } - } - - &.drop-element-attached-top.drop-element-attached-center .drop-content { - margin-top: $arrowSize; - - &:before { - bottom: 100%; - left: 50%; - margin-left: - $arrowSize; - border-bottom-color: $backgroundColor; - } - } - - &.drop-element-attached-right.drop-element-attached-middle .drop-content { - margin-right: $arrowSize; - - &:before { - left: 100%; - top: 50%; - margin-top: - $arrowSize; - border-left-color: $backgroundColor; - } - } - - &.drop-element-attached-left.drop-element-attached-middle .drop-content { - margin-left: $arrowSize; - - &:before { - right: 100%; - top: 50%; - margin-top: - $arrowSize; - border-right-color: $backgroundColor; - } - } - - // Target middle/center, element corner - &.drop-element-attached-left.drop-target-attached-center .drop-content { - left: - $arrowSize * 2; - } - - &.drop-element-attached-right.drop-target-attached-center .drop-content { - left: $arrowSize * 2; - } - - &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content { - margin-top: $arrowSize; - - &:before { - bottom: 100%; - left: $arrowSize; - border-bottom-color: $backgroundColor; - } - } - - &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content { - margin-top: $arrowSize; - - &:before { - bottom: 100%; - right: $arrowSize; - border-bottom-color: $backgroundColor; - } - } - - &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content { - margin-bottom: $arrowSize; - - &:before { - top: 100%; - left: $arrowSize; - border-top-color: $backgroundColor; - } - } - - &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content { - margin-bottom: $arrowSize; - - &:before { - top: 100%; - right: $arrowSize; - border-top-color: $backgroundColor; - } - } - - // Top and bottom corners - &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { - margin-top: $arrowSize; - - &:before { - bottom: 100%; - left: $arrowSize; - border-bottom-color: $backgroundColor; - } - } - - &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { - margin-top: $arrowSize; - - &:before { - bottom: 100%; - right: $arrowSize; - border-bottom-color: $backgroundColor; - } - } - - &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { - margin-bottom: $arrowSize; - - &:before { - top: 100%; - left: $arrowSize; - border-top-color: $backgroundColor; - } - } - - &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { - margin-bottom: $arrowSize; - - &:before { - top: 100%; - right: $arrowSize; - border-top-color: $backgroundColor; - } - } - - // Side corners - &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { - margin-right: $arrowSize; - - &:before { - top: $arrowSize; - left: 100%; - border-left-color: $backgroundColor; - } - } - - &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { - margin-left: $arrowSize; - - &:before { - top: $arrowSize; - right: 100%; - border-right-color: $backgroundColor; - } - } - - &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { - margin-right: $arrowSize; - - &:before { - bottom: $arrowSize; - left: 100%; - border-left-color: $backgroundColor; - } - } - - &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { - margin-left: $arrowSize; - - &:before { - bottom: $arrowSize; - right: 100%; - border-right-color: $backgroundColor; - } - } -} - - -@mixin drop-animation-scale($themePrefix: "drop", $themeName: "default", $attachmentOffset: 0, $easing: "linear") { - .#{$themePrefix}-element.#{$themePrefix}-#{$themeName} { - transform: translateZ(0); - transition: opacity 100ms; - opacity: 0; - .#{$themePrefix}-content { - transition: transform 0.2s $easing; - transform: scale(0) translateZ(0); - } - &.#{$themePrefix}-open { - display: none; - } - &.#{$themePrefix}-open-transitionend { - display: block; - } - &.#{$themePrefix}-after-open { - transition: none; - opacity: 1; - .#{$themePrefix}-content { - transform: scale(1) translateZ(0); - } - } - // Centers and middles - &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-center .#{$themePrefix}-content { - transform-origin: 50% calc(100% + #{$attachmentOffset}); - } - &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-center .#{$themePrefix}-content { - transform-origin: 50% (-$attachmentOffset); - } - &.#{$themePrefix}-element-attached-right.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content { - transform-origin: calc(100% + #{$attachmentOffset}) 50%; - } - &.#{$themePrefix}-element-attached-left.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content { - transform-origin: -($attachmentOffset 50%); - } - // Top and bottom corners - &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content { - transform-origin: 0 (-$attachmentOffset); - } - &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content { - transform-origin: 100% (-$attachmentOffset); - } - &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-top .#{$themePrefix}-content { - transform-origin: 0 calc(100% + #{$attachmentOffset}); - } - &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-top .#{$themePrefix}-content { - transform-origin: 100% calc(100% + #{$attachmentOffset}); - } - // Side corners - &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content { - transform-origin: calc(100% + #{$attachmentOffset}) 0; - } - &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content { - transform-origin: (-$attachmentOffset) 0; - } - &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content { - transform-origin: calc(100% + #{$attachmentOffset}) 100%; - } - &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content { - transform-origin: (-$attachmentOffset) 100%; - } - } -} - -@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing); diff --git a/public/sass/mixins/_drop_element.scss b/public/sass/mixins/_drop_element.scss new file mode 100644 index 00000000000..b4bd2f1a51e --- /dev/null +++ b/public/sass/mixins/_drop_element.scss @@ -0,0 +1,272 @@ + +@mixin drop-theme($themeName, $theme-bg, $theme-color) { + .drop-element.drop-#{$themeName} { + max-width: 100%; + max-height: 100%; + + .drop-content { + border-radius: $border-radius-lg; + position: relative; + font-family: inherit; + background: $theme-bg; + color: $theme-color; + padding: 1em; + font-size: $font-size-sm; + max-width: 20rem; + + &:before { + content: ""; + display: block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-width: $popover-arrow-size; + border-style: solid; + pointer-events: null; + } + } + + // Centers and middles + + &.drop-element-attached-bottom.drop-element-attached-center .drop-content { + margin-bottom: $popover-arrow-size; + + &:before { + top: 100%; + left: 50%; + margin-left: - $popover-arrow-size; + border-top-color: $theme-bg; + } + } + + &.drop-element-attached-top.drop-element-attached-center .drop-content { + margin-top: $popover-arrow-size; + + &:before { + bottom: 100%; + left: 50%; + margin-left: - $popover-arrow-size; + border-bottom-color: $theme-bg; + } + } + + &.drop-element-attached-right.drop-element-attached-middle .drop-content { + margin-right: $popover-arrow-size; + + &:before { + left: 100%; + top: 50%; + margin-top: - $popover-arrow-size; + border-left-color: $theme-bg; + } + } + + &.drop-element-attached-left.drop-element-attached-middle .drop-content { + margin-left: $popover-arrow-size; + + &:before { + right: 100%; + top: 50%; + margin-top: - $popover-arrow-size; + border-right-color: $theme-bg; + } + } + + // Target middle/center, element corner + &.drop-element-attached-left.drop-target-attached-center .drop-content { + left: - $popover-arrow-size * 2; + } + + &.drop-element-attached-right.drop-target-attached-center .drop-content { + left: $popover-arrow-size * 2; + } + + &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content { + margin-top: $popover-arrow-size; + + &:before { + bottom: 100%; + left: $popover-arrow-size; + border-bottom-color: $theme-bg; + } + } + + &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content { + margin-top: $popover-arrow-size; + + &:before { + bottom: 100%; + right: $popover-arrow-size; + border-bottom-color: $theme-bg; + } + } + + &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content { + margin-bottom: $popover-arrow-size; + + &:before { + top: 100%; + left: $popover-arrow-size; + border-top-color: $theme-bg; + } + } + + &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content { + margin-bottom: $popover-arrow-size; + + &:before { + top: 100%; + right: $popover-arrow-size; + border-top-color: $theme-bg; + } + } + + // Top and bottom corners + &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { + margin-top: $popover-arrow-size; + + &:before { + bottom: 100%; + left: $popover-arrow-size; + border-bottom-color: $theme-bg; + } + } + + &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { + margin-top: $popover-arrow-size; + + &:before { + bottom: 100%; + right: $popover-arrow-size; + border-bottom-color: $theme-bg; + } + } + + &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { + margin-bottom: $popover-arrow-size; + + &:before { + top: 100%; + left: $popover-arrow-size; + border-top-color: $theme-bg; + } + } + + &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { + margin-bottom: $popover-arrow-size; + + &:before { + top: 100%; + right: $popover-arrow-size; + border-top-color: $theme-bg; + } + } + + // Side corners + &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { + margin-right: $popover-arrow-size; + + &:before { + top: $popover-arrow-size; + left: 100%; + border-left-color: $theme-bg; + } + } + + &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { + margin-left: $popover-arrow-size; + + &:before { + top: $popover-arrow-size; + right: 100%; + border-right-color: $theme-bg; + } + } + + &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { + margin-right: $popover-arrow-size; + + &:before { + bottom: $popover-arrow-size; + left: 100%; + border-left-color: $theme-bg; + } + } + + &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { + margin-left: $popover-arrow-size; + + &:before { + bottom: $popover-arrow-size; + right: 100%; + border-right-color: $theme-bg; + } + } + } +} + +@mixin drop-animation-scale($themePrefix: "drop", $themeName: "default", $attachmentOffset: 0, $easing: "linear") { + .#{$themePrefix}-element.#{$themePrefix}-#{$themeName} { + transform: translateZ(0); + transition: opacity 100ms; + opacity: 0; + .#{$themePrefix}-content { + transition: transform 0.2s $easing; + transform: scale(0) translateZ(0); + } + &.#{$themePrefix}-open { + display: none; + } + &.#{$themePrefix}-open-transitionend { + display: block; + } + &.#{$themePrefix}-after-open { + transition: none; + opacity: 1; + .#{$themePrefix}-content { + transform: scale(1) translateZ(0); + } + } + // Centers and middles + &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-center .#{$themePrefix}-content { + transform-origin: 50% calc(100% + #{$attachmentOffset}); + } + &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-center .#{$themePrefix}-content { + transform-origin: 50% (-$attachmentOffset); + } + &.#{$themePrefix}-element-attached-right.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content { + transform-origin: calc(100% + #{$attachmentOffset}) 50%; + } + &.#{$themePrefix}-element-attached-left.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content { + transform-origin: -($attachmentOffset 50%); + } + // Top and bottom corners + &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content { + transform-origin: 0 (-$attachmentOffset); + } + &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content { + transform-origin: 100% (-$attachmentOffset); + } + &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-top .#{$themePrefix}-content { + transform-origin: 0 calc(100% + #{$attachmentOffset}); + } + &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-top .#{$themePrefix}-content { + transform-origin: 100% calc(100% + #{$attachmentOffset}); + } + // Side corners + &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content { + transform-origin: calc(100% + #{$attachmentOffset}) 0; + } + &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content { + transform-origin: (-$attachmentOffset) 0; + } + &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content { + transform-origin: calc(100% + #{$attachmentOffset}) 100%; + } + &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content { + transform-origin: (-$attachmentOffset) 100%; + } + } +} + From 773a13dc2686795705721a1fd8673d8223780361 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Feb 2016 11:45:10 +0100 Subject: [PATCH 018/108] fix(): fixed systemjs config for test --- public/test/test-main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/test/test-main.js b/public/test/test-main.js index 17971f1a43f..608305e46e7 100644 --- a/public/test/test-main.js +++ b/public/test/test-main.js @@ -10,6 +10,8 @@ baseURL: '/base/', defaultJSExtensions: true, paths: { + 'tether': 'vendor/npm/tether/dist/js/tether.js', + 'tether-drop': 'vendor/npm/tether-drop/dist/js/drop.js', 'moment': 'vendor/moment.js', "jquery": "vendor/jquery/dist/jquery.js", 'lodash-src': 'vendor/lodash.js', From eb58414600684085bda262f8812751c7f7f09a6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Feb 2016 12:39:56 +0100 Subject: [PATCH 019/108] ux(): fixed sidemenu submenu hover issue that caused it to be hidden as the mouse tried to move on to the submenu --- public/sass/components/_sidemenu.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index ceaba1a7a8b..e84ae61caf9 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -68,7 +68,9 @@ display: block; opacity: 0; top: 0px; - left: $side-menu-width; + // important to overlap it otherwise it can be hidden + // again by the mouse getting outside the hover space + left: $side-menu-width - 0.2rem; background-color: rgba($side-menu-bg,$side-menu-opacity); @include animation('dropdown-anim 100ms ease-in-out 100ms forwards'); z-index: -9999; From 9eabd956b7ee58b4adea1b94702f638f706d09fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Feb 2016 14:20:34 +0100 Subject: [PATCH 020/108] ux(): tweak to help popover annimation and fixed pull-right state --- public/app/core/services/popover_srv.js | 60 ------------------- public/app/core/services/popover_srv.ts | 49 +++++++++++++++ .../plugins/panel/graph/legend.popover.html | 10 ++-- public/sass/components/_drop.scss | 6 +- public/sass/mixins/_drop_element.scss | 2 +- public/sass/utils/_utils.scss | 4 +- 6 files changed, 61 insertions(+), 70 deletions(-) delete mode 100644 public/app/core/services/popover_srv.js create mode 100644 public/app/core/services/popover_srv.ts diff --git a/public/app/core/services/popover_srv.js b/public/app/core/services/popover_srv.js deleted file mode 100644 index 1654f7738c9..00000000000 --- a/public/app/core/services/popover_srv.js +++ /dev/null @@ -1,60 +0,0 @@ -define([ - 'angular', - 'lodash', - 'jquery', - '../core_module', -], -function (angular, _, $, coreModule) { - 'use strict'; - - coreModule.default.service('popoverSrv', function($templateCache, $timeout, $q, $http, $compile) { - - this.getTemplate = function(url) { - return $q.when($templateCache.get(url) || $http.get(url, {cache: true})); - }; - - this.show = function(options) { - var popover; - - // hide other popovers - $('.popover').each(function() { - popover = $(this).prev().data('popover'); - if (popover) { - popover.scope.$destroy(); - popover.destroy(); - } - }); - - options.scope.dismiss = function() { - popover = options.element.data('popover'); - if (popover) { - popover.destroy(); - } - options.scope.$destroy(); - }; - - this.getTemplate(options.templateUrl).then(function(result) { - $timeout(function() { - var template = _.isString(result) ? result : result.data; - - options.element.popover({ - content: template, - placement: options.placement || 'bottom', - html: true - }); - - popover = options.element.data('popover'); - popover.hasContent = function () { - return template; - }; - - popover.toggle(); - popover.scope = options.scope; - $compile(popover.$tip)(popover.scope); - }, 1); - }); - }; - - }); - -}); diff --git a/public/app/core/services/popover_srv.ts b/public/app/core/services/popover_srv.ts new file mode 100644 index 00000000000..64ff1b7af11 --- /dev/null +++ b/public/app/core/services/popover_srv.ts @@ -0,0 +1,49 @@ +/// + +import config from 'app/core/config'; +import _ from 'lodash'; +import $ from 'jquery'; +import coreModule from 'app/core/core_module'; + +/** @ngInject **/ +function popoverSrv($templateCache, $timeout, $q, $http, $compile) { + + this.getTemplate = function(url) { + return $q.when($templateCache.get(url) || $http.get(url, {cache: true})); + }; + + this.show = function(options) { + + options.scope.dismiss = function() { + var popover = options.element.data('popover'); + if (popover) { + popover.destroy(); + } + options.scope.$destroy(); + }; + + this.getTemplate(options.templateUrl).then(function(result) { + $timeout(function() { + var template = _.isString(result) ? result : result.data; + + + options.element.popover({ + content: template, + placement: options.placement || 'bottom', + html: true + }); + + var popover = options.element.data('popover'); + popover.hasContent = function () { + return template; + }; + + popover.toggle(); + popover.scope = options.scope; + $compile(popover.$tip)(popover.scope); + }, 1); + }); + }; +} + +coreModule.service('popoverSrv', popoverSrv); diff --git a/public/app/plugins/panel/graph/legend.popover.html b/public/app/plugins/panel/graph/legend.popover.html index e2b85a8dab4..f9cf16a3e87 100644 --- a/public/app/plugins/panel/graph/legend.popover.html +++ b/public/app/plugins/panel/graph/legend.popover.html @@ -1,16 +1,16 @@
× -
+
diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index 7a256f8efab..5edaf2ee421 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -3,12 +3,13 @@ $color: inherit; $backgroundColor: $btn-secondary-bg; $color: $text-color; $useDropShadow: false; -$attachmentOffset: $popover-arrow-size; -$easing: cubic-bezier(0, 0, 0.265, 1.55); +$attachmentOffset: 0%; +$easing: cubic-bezier(0, 0, 0.265, 1.00); .drop-element { position: absolute; display: none; + opacity: 0; &.drop-open { display: block; @@ -26,3 +27,4 @@ $easing: cubic-bezier(0, 0, 0.265, 1.55); @include drop-theme("help", $popover-help-bg, $popover-help-color); @include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing); + diff --git a/public/sass/mixins/_drop_element.scss b/public/sass/mixins/_drop_element.scss index b4bd2f1a51e..143574ad147 100644 --- a/public/sass/mixins/_drop_element.scss +++ b/public/sass/mixins/_drop_element.scss @@ -213,7 +213,7 @@ opacity: 0; .#{$themePrefix}-content { transition: transform 0.2s $easing; - transform: scale(0) translateZ(0); + transform: scale(0.8) translateZ(0); } &.#{$themePrefix}-open { display: none; diff --git a/public/sass/utils/_utils.scss b/public/sass/utils/_utils.scss index 3d8c08ed603..efccb434d48 100644 --- a/public/sass/utils/_utils.scss +++ b/public/sass/utils/_utils.scss @@ -45,10 +45,10 @@ button.close { // Quick floats .pull-right { - float: right; + float: right !important; } .pull-left { - float: left; + float: left !important; } // Toggling content From 3f05b4bb1ee359c83bf808e4f61ebbc690b6c16a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Feb 2016 14:54:19 +0100 Subject: [PATCH 021/108] fix(annotations): updated annotations query editor --- .../features/annotations/partials/editor.html | 20 ++++++++++--------- .../graphite/partials/annotations.editor.html | 10 +++++----- .../plugins/datasource/influxdb/datasource.ts | 4 ++++ public/sass/components/_dashboard.scss | 5 ----- public/sass/components/_drop.scss | 4 ++-- public/sass/components/_sidemenu.scss | 1 + 6 files changed, 23 insertions(+), 21 deletions(-) diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index 01171084bf5..0e026e51294 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -76,22 +76,24 @@
-
+
Icon size
-
- - Icon color +
+
-
+
+
-
- - Line color -
diff --git a/public/app/plugins/datasource/graphite/partials/annotations.editor.html b/public/app/plugins/datasource/graphite/partials/annotations.editor.html index b7264b5e499..421f7c3f3e5 100644 --- a/public/app/plugins/datasource/graphite/partials/annotations.editor.html +++ b/public/app/plugins/datasource/graphite/partials/annotations.editor.html @@ -1,10 +1,10 @@
- Graphite target expression - + Graphite metrics query +
- Graphite event tags - + Or Graphite events query +
-
\ No newline at end of file +
diff --git a/public/app/plugins/datasource/influxdb/datasource.ts b/public/app/plugins/datasource/influxdb/datasource.ts index 7ab8e3a254d..fec1dd71d6c 100644 --- a/public/app/plugins/datasource/influxdb/datasource.ts +++ b/public/app/plugins/datasource/influxdb/datasource.ts @@ -85,6 +85,10 @@ export function InfluxDatasource(instanceSettings, $q, backendSrv, templateSrv) }; this.annotationQuery = function(options) { + if (!options.annotation.query) { + return $q.reject({message: 'Query missing in annotation definition'}); + } + var timeFilter = getTimeFilter({rangeRaw: options.rangeRaw}); var query = options.annotation.query.replace('$timeFilter', timeFilter); query = templateSrv.replace(query); diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss index 8b4b272d523..293ac202318 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/components/_dashboard.scss @@ -286,8 +286,3 @@ div.flot-text { } } -.annotations-basic-settings { - .last-row { - margin-bottom: 20px; - } -} diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index 5edaf2ee421..e6e507a72dc 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -15,8 +15,8 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00); display: block; } - &.drop-open.drop-popover.drop-out-of-bounds, - &.drop-open-transitionend.drop-popover.drop-out-of-bounds { + &.drop-open.drop-help.drop-out-of-bounds, + &.drop-open-transitionend.drop-help.drop-out-of-bounds { display: none; } } diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index e84ae61caf9..9a0d12cf8c7 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -60,6 +60,7 @@ position: relative; @include left-brand-border(); + &.active, &:hover { background-color: $side-menu-item-hover-bg; @include left-brand-border-gradient(); From 3231d767d5a81c504adaaedd5e1dbd809dc44df2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 22 Feb 2016 15:15:01 +0100 Subject: [PATCH 022/108] in progress work --- public/app/core/services/popover_srv.ts | 22 ++++++++++------------ public/sass/components/_navbar.scss | 2 +- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/public/app/core/services/popover_srv.ts b/public/app/core/services/popover_srv.ts index 64ff1b7af11..5a55f63fbc0 100644 --- a/public/app/core/services/popover_srv.ts +++ b/public/app/core/services/popover_srv.ts @@ -4,6 +4,7 @@ import config from 'app/core/config'; import _ from 'lodash'; import $ from 'jquery'; import coreModule from 'app/core/core_module'; +import Drop from 'tether-drop'; /** @ngInject **/ function popoverSrv($templateCache, $timeout, $q, $http, $compile) { @@ -26,21 +27,18 @@ function popoverSrv($templateCache, $timeout, $q, $http, $compile) { $timeout(function() { var template = _.isString(result) ? result : result.data; - - options.element.popover({ + var drop = new Drop({ + target: options.element[0], content: template, - placement: options.placement || 'bottom', - html: true + position: 'bottom top', + classes: 'drop-help', + openOn: 'click', + tetherOptions: { + } }); - var popover = options.element.data('popover'); - popover.hasContent = function () { - return template; - }; - - popover.toggle(); - popover.scope = options.scope; - $compile(popover.$tip)(popover.scope); + drop.open(); + //$compile(popover.$tip)(popover.scope); }, 1); }); }; diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 2e0388eae07..b642618e4cf 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -76,7 +76,7 @@ img { width: 30px; position: relative; - top: -2px; + top: -1px; } .navbar-brand-btn-background { From b9d50fa144f36a5463910f6ec167c4d0cdaebc88 Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 22 Feb 2016 15:32:55 +0100 Subject: [PATCH 023/108] ux(admin): migrates admin edit user page --- .../features/admin/partials/edit_user.html | 160 ++++++------------ 1 file changed, 53 insertions(+), 107 deletions(-) diff --git a/public/app/features/admin/partials/edit_user.html b/public/app/features/admin/partials/edit_user.html index 192a1e556ea..24f98a206f4 100644 --- a/public/app/features/admin/partials/edit_user.html +++ b/public/app/features/admin/partials/edit_user.html @@ -4,126 +4,72 @@
-

- Edit User -

+

Edit User

-
-
-
-
    -
  • - Name -
    • -
  • - -
    • -
-
+ +
+ Name +
-
-
    -
  • - Email -
    • -
  • - -
    • -
-
+
+ Email +
-
-
    -
  • - Username -
    • -
  • - -
    • -
-
+
+ Username +
-
-
- +
+ +
-

- Change password -

+

Change password

-
-
-
-
    -
  • - New password -
    • -
  • - -
    • -
-
-
+ +
+ New password +
-
- - - -

- Permissions -

- -
-
-
    -
  • - Grafana Admin  - - -
    • -
-
-
-
- -
-
- -

- Organizations -

- -
-
-
    -
  • - Add organization -
    • -
  • - -
    • -
  • - Role -
    • -
  • - -
    • -
  • - -
    • -
    -
+
+
- +

Permissions

+ + +
+ +
+ +
+ +
+ + +

Organizations

+ + +
+
+ Add organization + +
+
+ Role + +
+
+ +
+
+ + +
@@ -134,7 +80,7 @@ {{org.name}} Current
Name Role - From 0aa4b47d59dd93a0f9c7adff0d1b150689905ded Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 22 Feb 2016 15:56:18 +0100 Subject: [PATCH 024/108] ux(admin): migrated admin new user page to gf-form --- .../app/features/admin/partials/new_user.html | 71 ++++++------------- 1 file changed, 20 insertions(+), 51 deletions(-) diff --git a/public/app/features/admin/partials/new_user.html b/public/app/features/admin/partials/new_user.html index 99d2f974565..3ae2dbfc209 100644 --- a/public/app/features/admin/partials/new_user.html +++ b/public/app/features/admin/partials/new_user.html @@ -4,60 +4,29 @@
-

- Add new user -

+

Add new user

-
-
-
-
    -
  • - Name -
    • -
  • - -
    • -
-
-
-
-
    -
  • - Email -
    • -
  • - -
    • -
-
-
-
-
    -
  • - Username -
    • -
  • - -
    • -
-
-
-
-
    -
  • - Password -
    • -
  • - -
    • -
-
-
+ +
+ Name + +
+
+ Email + +
+
+ Username + +
+
+ Password +
-
- +
+ +
From b1e9327a2b4e071fe5e3ff45396866179212d14f Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 22 Feb 2016 16:05:55 +0100 Subject: [PATCH 025/108] ux(admin): migrates edit org page --- .../app/features/admin/partials/edit_org.html | 78 ++++++++----------- 1 file changed, 32 insertions(+), 46 deletions(-) diff --git a/public/app/features/admin/partials/edit_org.html b/public/app/features/admin/partials/edit_org.html index 804076d8eed..de92cd3adf5 100644 --- a/public/app/features/admin/partials/edit_org.html +++ b/public/app/features/admin/partials/edit_org.html @@ -4,55 +4,41 @@
-

- Edit Organization -

+

Edit Organization

-
-
-
-
    -
  • - Name -
    • -
  • - -
    • -
-
-
-
+ +
+ Name + +
-
- -
+
+ +
+ -

- Organization Users -

+

Organization Users

- - - - - - - - - - - - - -
UsernameEmailRole
{{orgUser.login}}{{orgUser.email}} - - - - - -
- -
+ + + + + + + + + + + + + +
UsernameEmailRole
{{orgUser.login}}{{orgUser.email}} + + + + + +
From fc62af6b3a000e77ee2fed605a8764ccfed810ae Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 22 Feb 2016 16:12:59 +0100 Subject: [PATCH 026/108] style(admin): remove white spaces --- public/app/features/admin/partials/orgs.html | 4 +--- public/app/features/admin/partials/settings.html | 4 +--- public/app/features/admin/partials/stats.html | 4 +--- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/public/app/features/admin/partials/orgs.html b/public/app/features/admin/partials/orgs.html index fbda738b501..aba3ef70a92 100644 --- a/public/app/features/admin/partials/orgs.html +++ b/public/app/features/admin/partials/orgs.html @@ -4,9 +4,7 @@
-

- Organizations -

+

Organizations

diff --git a/public/app/features/admin/partials/settings.html b/public/app/features/admin/partials/settings.html index a941ed69bae..5e070f4d3c0 100644 --- a/public/app/features/admin/partials/settings.html +++ b/public/app/features/admin/partials/settings.html @@ -3,9 +3,7 @@
-

- Server settings -

+

Server settings

diff --git a/public/app/features/admin/partials/stats.html b/public/app/features/admin/partials/stats.html index e9af199fa60..1ad114f50e2 100644 --- a/public/app/features/admin/partials/stats.html +++ b/public/app/features/admin/partials/stats.html @@ -3,9 +3,7 @@
-

- Stats -

+

Stats

From 31ea5f550f2f87fceeb22f34d64594dea6816137 Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 22 Feb 2016 16:45:14 +0100 Subject: [PATCH 027/108] feat(playlist): changes tag result into a list --- .../features/playlist/partials/playlist.html | 30 ++++++++++++------- public/sass/pages/_playlist.scss | 10 +++---- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index beb311a9e6c..3701796b4a1 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -26,7 +26,6 @@
-
Available
@@ -40,7 +39,9 @@
-   {{playlistItem.title}} + +   {{playlistItem.title}} +
-
- - - {{tag.term}}  ({{tag.count}}) - -
-
+ + + + + +
+ + + {{tag.term}}  ({{tag.count}}) + + + +
+
diff --git a/public/sass/pages/_playlist.scss b/public/sass/pages/_playlist.scss index f0d1cf4c038..412fbcaef50 100644 --- a/public/sass/pages/_playlist.scss +++ b/public/sass/pages/_playlist.scss @@ -27,6 +27,7 @@ margin-bottom: 15px; } + .playlist-search-field-wrapper { input { width: 100%; @@ -109,6 +110,10 @@ .add-dashboard { text-align: center; } + + .fa-star { + color: $orange; + } } .playlist-column-header { @@ -120,8 +125,3 @@ .selected-playlistitem-settings { text-align: right; } - -.tag-result-container { - width: 160px; - float: left; -} \ No newline at end of file From 680ff95b8e760adcde103e0979e6f028316e010b Mon Sep 17 00:00:00 2001 From: Matt Date: Mon, 22 Feb 2016 11:39:11 -0500 Subject: [PATCH 028/108] Form adjustments and startting to add sidemenu --- pkg/api/index.go | 2 ++ public/app/features/annotations/partials/editor.html | 8 ++++++-- .../app/features/dashboard/partials/graphiteImport.html | 6 ++++-- public/app/features/dashboard/partials/import.html | 4 +++- .../app/features/datasources/partials/http_settings.html | 4 +++- 5 files changed, 18 insertions(+), 6 deletions(-) diff --git a/pkg/api/index.go b/pkg/api/index.go index 72277fe301b..5b0c5df2c29 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -56,6 +56,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { {Text: "Home dashboard", Icon: "fa fa-fw fa-list", Url: setting.AppSubUrl + "/"}, {Text: "Playlists", Icon: "fa fa-fw fa-list", Url: setting.AppSubUrl + "/playlists"}, {Text: "Snapshots", Icon: "fa-fw icon-gf icon-gf-snapshot", Url: setting.AppSubUrl + "/dashboard/snapshots"}, + {Text: "New dashboard", icon: "fa fa-fw fa-plus", url: this.getUrl('/dashboard/new')}, + {Text: "Import dashboard", icon: "fa fa-fw fa-plus", url: this.getUrl('/dashboard/import')}, }, }) diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index 0e026e51294..25222b2f89a 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -73,13 +73,17 @@
Datasource - +
+ +
Icon size - +
+ +
+
  • diff --git a/public/app/features/dashboard/timepicker/settings.html b/public/app/features/dashboard/timepicker/settings.html index fed0094086c..c22bb03c830 100644 --- a/public/app/features/dashboard/timepicker/settings.html +++ b/public/app/features/dashboard/timepicker/settings.html @@ -1,17 +1,6 @@
    - - - - - - - - - - -
    • diff --git a/public/app/partials/bootstrap/tabset.html b/public/app/partials/bootstrap/tabset.html index acbad38390b..a811f83fbb5 100644 --- a/public/app/partials/bootstrap/tabset.html +++ b/public/app/partials/bootstrap/tabset.html @@ -1,5 +1,6 @@
      -
        +
          +
        li > a { color: darken($link-color, 20%); } @@ -34,4 +32,39 @@ } } +.gf-tabs { + @include clearfix(); + float: left; + margin: 0.5rem 0 0 2rem; +} +.gf-tabs-item { + float: left; + list-style: none; +} + +.gf-tabs-link { + padding: ($spacer * 0.75) $spacer; + margin-right: $spacer/2; + line-height: $line-height-base; + border: 1px solid transparent; + @include border-radius(4px 4px 0 0); + + &:hover, + &:focus { + border-color: $divider-border-color; + color: $link-color; + } + + &.active, + &.active:hover, + &.active:focus { + @include border-radius(3px); + border: 1px solid $divider-border-color; + background-color: transparent; + border-bottom: 1px solid $panel-bg; + color: $link-color; + position: relative; + top: 1px; + } +} From 5e553e40fa8e01889ac89306bdd379bd32c4d588 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 23 Feb 2016 13:29:26 +0100 Subject: [PATCH 053/108] ux(): restored style for tabbed-view-title --- public/sass/components/_tabbed_view.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index 98cf559a7ac..e9c6d251275 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -1,7 +1,7 @@ .tabbed-view { background-color: $page-bg; background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%); - margin: -($spacer/2); + margin: -($spacer/2) 0 $spacer*2 0; padding: $spacer*2; } @@ -15,6 +15,12 @@ border-bottom: 1px solid transparent; } +.tabbed-view-title { + margin-left: $spacer*2; + float: left; + font-style: italic; +} + .tabbed-view-close-btn { float: right; padding: 0; From ecc22757b8d5d9d290a5a7249034230d844c3ac3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 23 Feb 2016 13:32:14 +0100 Subject: [PATCH 054/108] ux(): added dashboard-padding variable --- public/sass/_variables.scss | 3 +++ public/sass/components/_tabbed_view.scss | 3 ++- public/sass/layout/_page.scss | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 31fde6e35a7..60cf2945497 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -215,3 +215,6 @@ $btn-border-radius: 3px; // sidemenu $side-menu-width: 14rem; + +// dashboard +$dashboard-padding: $spacer / 2; diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index e9c6d251275..bc503fe3e80 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -1,7 +1,8 @@ .tabbed-view { background-color: $page-bg; background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%); - margin: -($spacer/2) 0 $spacer*2 0; + margin: -$dashboard-padding; + margin-bottom: $spacer*2; padding: $spacer*2; } diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index ad7c8fc9841..ac762460664 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -4,7 +4,7 @@ } .dashboard-container { - padding: $spacer / 2; + padding: $dashboard-padding; width: 100%; } From 0811338370de66204dd48fa50816cc1591964436 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 23 Feb 2016 14:05:12 +0100 Subject: [PATCH 055/108] ux(): updated dashboard settings view --- .../features/dashboard/partials/settings.html | 202 ++++++++---------- public/sass/components/_tabbed_view.scss | 10 +- public/sass/components/_tabs.scss | 13 +- 3 files changed, 105 insertions(+), 120 deletions(-) diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index 0e9221845ad..984390227f8 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -16,60 +16,40 @@
        -
        +
        -
        -
        -
        Dashboard info
        -
        -
          -
        • - Title -
          • -
        • - -
          • -
        • - Tags - Press enter to a add tag -
          • -
        • - - -
          • -
        -
        -
        -
        -
          -
        • - Timezone -
          • -
        • - -
          • -
        -
        + +
        Dashboard Detail
        +
        +
        + + +
        +
        + + + +
        + +
        + +
        +
        -
        -
        -
        Toggles
        -
        -
          -
        • - -
          • -
        • - -
          • -
        • - -
          • -
        -
        +
        On/Off Toggles
        +
        +
        +
        + +
        +
        + +
        +
        +
        @@ -116,68 +96,68 @@
        -
        -
        -
        Dashboard info
        -
        -
        -
          -
        • - Last updated at: -
          • -
        • - {{formatDate(dashboardMeta.updated)}} -
          • -
        -
        -
        -
        -
          -
        • - Last updated by: -
          • -
        • - {{dashboardMeta.updatedBy}} -
          • -
        -
        -
        -
        -
          -
        • - Created at: -
          • -
        • - {{formatDate(dashboardMeta.created)}} -
          • -
        -
        -
        -
        -
          -
        • - Created by: -
          • -
        • - {{dashboardMeta.createdBy}} -
          • -
        -
        -
        -
        -
          -
        • - Current version: -
          • -
        • - {{dashboardMeta.version}} -
          • -
        -
        -
        -
        -
        -
        +
        +
        +
        Dashboard info
        +
        +
        +
          +
        • + Last updated at: +
          • +
        • + {{formatDate(dashboardMeta.updated)}} +
          • +
        +
        +
        +
        +
          +
        • + Last updated by: +
          • +
        • + {{dashboardMeta.updatedBy}} +
          • +
        +
        +
        +
        +
          +
        • + Created at: +
          • +
        • + {{formatDate(dashboardMeta.created)}} +
          • +
        +
        +
        +
        +
          +
        • + Created by: +
          • +
        • + {{dashboardMeta.createdBy}} +
          • +
        +
        +
        +
        +
          +
        • + Current version: +
          • +
        • + {{dashboardMeta.version}} +
          • +
        +
        +
        +
        +
        +
        diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index bc503fe3e80..bcfab098a13 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -3,7 +3,7 @@ background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%); margin: -$dashboard-padding; margin-bottom: $spacer*2; - padding: $spacer*2; + padding: $spacer*3; } .tabbed-view-header { @@ -39,7 +39,11 @@ } .tabbed-view-body { - padding: 20px; - min-height: 150px; + padding: $spacer*2; + min-height: 250px; } +.section-heading { + font-size: 1.1rem; + margin-bottom: 0.6rem; +} diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index 254a874968b..6ffad0a0a47 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -44,15 +44,18 @@ } .gf-tabs-link { - padding: ($spacer * 0.75) $spacer; + padding: 0.80rem 1rem 0.60rem 1rem; margin-right: $spacer/2; line-height: $line-height-base; border: 1px solid transparent; - @include border-radius(4px 4px 0 0); + position: relative; + top: 3px; + + @include border-radius(2px 2px 0 0); &:hover, &:focus { - border-color: $divider-border-color; + border-color: #F9952B; color: $link-color; } @@ -60,11 +63,9 @@ &.active:hover, &.active:focus { @include border-radius(3px); - border: 1px solid $divider-border-color; + border: 1px solid #F9952B; background-color: transparent; border-bottom: 1px solid $panel-bg; color: $link-color; - position: relative; - top: 1px; } } From c189c2016438d7077ca4bc6b4b371bc346d1f966 Mon Sep 17 00:00:00 2001 From: bergquist Date: Tue, 23 Feb 2016 14:49:10 +0100 Subject: [PATCH 056/108] ux(modal): tight-form -> gf-form --- .../dashboard/partials/shareModal.html | 155 +++++++----------- public/sass/components/_modals.scss | 8 + 2 files changed, 70 insertions(+), 93 deletions(-) diff --git a/public/app/features/dashboard/partials/shareModal.html b/public/app/features/dashboard/partials/shareModal.html index 77ed80015e3..db09f81a20b 100644 --- a/public/app/features/dashboard/partials/shareModal.html +++ b/public/app/features/dashboard/partials/shareModal.html @@ -35,53 +35,30 @@
        -
        -
        - - - +
        +
        + +
        +
        +
        +
        +
        -