diff --git a/CHANGELOG.md b/CHANGELOG.md index 0331dfd5d95..6c82ce61a35 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,13 @@ # 2.0.0 (unreleased) +**New features** +- [Issue #1331](https://github.com/grafana/grafana/issues/1331). Graph & Singlestat: New axis/unit format selector and more units (kbytes, Joule, Watt, eV), and new design for graph axis & grid tab and single stat options tab views + **Enhancements** - [Issue #1297](https://github.com/grafana/grafana/issues/1297). Graphite: Added cumulative and minimumBelow graphite functions - [Issue #1296](https://github.com/grafana/grafana/issues/1296). InfluxDB: Auto escape column names with special characters. Thanks @steven-aerts +- [Issue #1321](https://github.com/grafana/grafana/issues/1321). SingleStatPanel: You can now use template variables in pre & postfix +- [Issue #599](https://github.com/grafana/grafana/issues/599). Graph: Added right y axis label setting and graph support **Fixes** - [Issue #1298](https://github.com/grafana/grafana/issues/1298). InfluxDB: Fix handling of empty array in templating variable query diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js index aedfbb90f17..80a2b976f6e 100644 --- a/src/app/components/kbn.js +++ b/src/app/components/kbn.js @@ -362,8 +362,14 @@ function($, _, moment) { kbn.valueFormats.bits = kbn.formatFuncCreator(1024, [' b', ' Kib', ' Mib', ' Gib', ' Tib', ' Pib', ' Eib', ' Zib', ' Yib']); kbn.valueFormats.bytes = kbn.formatFuncCreator(1024, [' B', ' KiB', ' MiB', ' GiB', ' TiB', ' PiB', ' EiB', ' ZiB', ' YiB']); + kbn.valueFormats.kbytes = kbn.formatFuncCreator(1024, [' KiB', ' MiB', ' GiB', ' TiB', ' PiB', ' EiB', ' ZiB', ' YiB']); + kbn.valueFormats.mbytes = kbn.formatFuncCreator(1024, [' MiB', ' GiB', ' TiB', ' PiB', ' EiB', ' ZiB', ' YiB']); kbn.valueFormats.bps = kbn.formatFuncCreator(1000, [' bps', ' Kbps', ' Mbps', ' Gbps', ' Tbps', ' Pbps', ' Ebps', ' Zbps', ' Ybps']); + kbn.valueFormats.Bps = kbn.formatFuncCreator(1000, [' Bps', ' KBps', ' MBps', ' GBps', ' TBps', ' PBps', ' EBps', ' ZBps', ' YBps']); kbn.valueFormats.short = kbn.formatFuncCreator(1000, ['', ' K', ' Mil', ' Bil', ' Tri', ' Qaudr', ' Quint', ' Sext', ' Sept']); + kbn.valueFormats.joule = kbn.formatFuncCreator(1000, [' J', ' kJ', ' MJ', 'GJ', 'TJ', 'PJ', 'EJ', 'ZJ', 'YJ']); + kbn.valueFormats.watt = kbn.formatFuncCreator(1000, [' W', ' kW', ' MW', 'GW', 'TW', 'PW', 'EW', 'ZW', 'YW']); + kbn.valueFormats.ev = kbn.formatFuncCreator(1000, [' eV', ' keV', ' MeV', 'GeV', 'TeV', 'PeV', 'EeV', 'ZeV', 'YeV']); kbn.valueFormats.none = kbn.toFixed; kbn.valueFormats.ms = function(size, decimals, scaledDecimals) { @@ -479,5 +485,50 @@ function($, _, moment) { return new RegExp(match[1], match[2]); }; + kbn.getUnitFormats = function() { + return [ + { + text: 'none', + submenu: [ + {text: 'none' , value: 'none'}, + {text: 'short', value: 'short'}, + {text: 'percent', value: 'percent'}, + ] + }, + { + text: 'duration', + submenu: [ + {text: 'nanoseconds (ns)' , value: 'ns'}, + {text: 'microseconds (µs)', value: 'µs'}, + {text: 'milliseconds (ms)', value: 'ms'}, + {text: 'seconds (s)', value: 's'}, + ] + }, + { + text: 'data', + submenu: [ + {text: 'bits', value: 'bits'}, + {text: 'bytes', value: 'bytes'}, + {text: 'kilobytes', value: 'kbytes'}, + ] + }, + { + text: 'data rate', + submenu: [ + {text: 'bits/sec', value: 'bps'}, + {text: 'bytes/sec', value: 'Bps'}, + ] + }, + { + text: 'energy', + submenu: [ + {text: 'watt', value: 'watt'}, + {text: 'joule', value: 'joule'}, + {text: 'eV', value: 'ev'}, + ] + }, + ]; + }; + return kbn; }); diff --git a/src/app/directives/arrayJoin.js b/src/app/directives/arrayJoin.js index 9f0900d880d..a2b5fbe59dd 100644 --- a/src/app/directives/arrayJoin.js +++ b/src/app/directives/arrayJoin.js @@ -31,4 +31,5 @@ function (angular, app, _) { } }; }); + }); diff --git a/src/app/directives/dropdown.typeahead.js b/src/app/directives/dropdown.typeahead.js index f46de052c06..56203ee3c6f 100644 --- a/src/app/directives/dropdown.typeahead.js +++ b/src/app/directives/dropdown.typeahead.js @@ -17,35 +17,47 @@ function (angular, app, _, $) { var buttonTemplate = ''; + ' data-placement="top">'; return { scope: { - "menuItems": "=dropdownTypeahead", - "dropdownTypeaheadOnSelect": "&dropdownTypeaheadOnSelect" + menuItems: "=dropdownTypeahead", + dropdownTypeaheadOnSelect: "&dropdownTypeaheadOnSelect", + model: '=ngModel' }, - link: function($scope, elem) { + link: function($scope, elem, attrs) { var $input = $(inputTemplate); var $button = $(buttonTemplate); $input.appendTo(elem); $button.appendTo(elem); - var typeaheadValues = _.reduce($scope.menuItems, function(memo, value) { - _.each(value.submenu, function(item) { + if (attrs.linkText) { + $button.html(attrs.linkText); + } + + if (attrs.ngModel) { + $scope.$watch('model', function(newValue) { + _.each($scope.menuItems, function(item) { + _.each(item.submenu, function(subItem) { + if (subItem.value === newValue) { + $button.html(subItem.text); + } + }); + }); + }); + } + + var typeaheadValues = _.reduce($scope.menuItems, function(memo, value, index) { + _.each(value.submenu, function(item, subIndex) { + item.click = 'menuItemSelected(' + index + ',' + subIndex + ')'; memo.push(value.text + ' ' + item.text); }); return memo; }, []); - $scope.menuItemSelected = function(optionIndex, valueIndex) { - var option = $scope.menuItems[optionIndex]; - var result = { - $item: option.submenu[valueIndex], - $optionIndex: optionIndex, - $valueIndex: valueIndex - }; - - $scope.dropdownTypeaheadOnSelect(result); + $scope.menuItemSelected = function(index, subIndex) { + var item = $scope.menuItems[index]; + $scope.dropdownTypeaheadOnSelect({$item: item, $subItem: item.submenu[subIndex]}); }; $input.attr('data-provide', 'typeahead'); @@ -55,12 +67,11 @@ function (angular, app, _, $) { items: 10, updater: function (value) { var result = {}; - _.each($scope.menuItems, function(menuItem, optionIndex) { - _.each(menuItem.submenu, function(submenuItem, valueIndex) { + _.each($scope.menuItems, function(menuItem) { + _.each(menuItem.submenu, function(submenuItem) { if (value === (menuItem.text + ' ' + submenuItem.text)) { - result.$item = submenuItem; - result.$optionIndex = optionIndex; - result.$valueIndex = valueIndex; + result.$item = menuItem; + result.$subItem = submenuItem; } }); }); diff --git a/src/app/directives/ngModelOnBlur.js b/src/app/directives/ngModelOnBlur.js index 0e9d94a282e..1aea09f9dc8 100644 --- a/src/app/directives/ngModelOnBlur.js +++ b/src/app/directives/ngModelOnBlur.js @@ -22,5 +22,17 @@ function (angular) { }); } }; + }) + .directive('emptyToNull', function () { + return { + restrict: 'A', + require: 'ngModel', + link: function (scope, elm, attrs, ctrl) { + ctrl.$parsers.push(function (viewValue) { + if(viewValue === "") { return null; } + return viewValue; + }); + } + }; }); }); diff --git a/src/app/features/annotations/partials/editor.html b/src/app/features/annotations/partials/editor.html index b6118f15d63..14208dc2ab2 100644 --- a/src/app/features/annotations/partials/editor.html +++ b/src/app/features/annotations/partials/editor.html @@ -53,7 +53,7 @@ -
+
@@ -62,7 +62,7 @@
-
+
diff --git a/src/app/features/graphite/partials/query.editor.html b/src/app/features/graphite/partials/query.editor.html index 8857ab83983..9487106ecdf 100755 --- a/src/app/features/graphite/partials/query.editor.html +++ b/src/app/features/graphite/partials/query.editor.html @@ -7,66 +7,68 @@ ng-init="init()">
- - -
-
    -
  • - - - - +
      +
    • +
      + + + + +
      • -
    • +
    • @@ -42,7 +44,7 @@
      • -
        • @@ -89,14 +91,14 @@
        • - +
        • alias
        • - @@ -122,7 +124,7 @@ select
        • - +
          • @@ -130,7 +132,7 @@ where
        • -
          • @@ -138,18 +140,18 @@ group by time
        • -
        • - + and
        • -
          • @@ -190,7 +192,7 @@ group by time
        • -
        • diff --git a/src/app/features/opentsdb/partials/query.editor.html b/src/app/features/opentsdb/partials/query.editor.html index f06904f5d2d..e2f6f995dac 100644 --- a/src/app/features/opentsdb/partials/query.editor.html +++ b/src/app/features/opentsdb/partials/query.editor.html @@ -7,24 +7,26 @@
          -
            -
          • - - - - -
            • -
          • - +
              +
            • +
              + + + + +
              +
              • +
            • +
              • diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html index 36353464324..a851038b91e 100644 --- a/src/app/panels/graph/axisEditor.html +++ b/src/app/panels/graph/axisEditor.html @@ -1,86 +1,227 @@
              -
              -
              Left Y Axis
              -
              - - -
              -
              - - -
              -
              - - -
              -
              - - -
              -
              -
              -
              Right Y Axis
              -
              - - -
              -
              - - -
              -
              - - -
              -
              -
              - - -
              -
              -
              Legend styles
              - - - - - +
              +
              +
              +
                +
              • + Left Y +
                • +
              • + Unit +
                • +
              • +
                • +
              • +    Grid Max +
                • +
              • + +
                • +
              • + Min +
                • +
              • + +
                • +
              • + Label +
                • +
              • + +
                • +
              +
              +
              +
              +
                +
              • + Right Y +
                • +
              • + Unit +
                • +
              • +
                • +
              • +    Grid Max +
                • +
              • + +
                • +
              • + Min +
                • +
              • + +
                • +
              • + Label +
                • +
              • + +
                • +
              +
              +
              +
              -
              -
              Legend values
              - - - - - -
              - -
              -
              Grid thresholds
              -
              - - -
              -
              - - -
              -
              - - -
              -
              - - -
              - -
              - -
              -
              Show Axes
              - - -
              +
              +
              +
              +
                +
              • + Show Axis +
                • +
              • + X-Axis  + + +
                • +
              • + Y-Axis  + + +
                • +
              +
              +
              +
              +
                +
              • + Thresholds +
                • +
              • + Level 1 +
                • +
              • + +
                • +
              • + +
                • +
              • + Level 2 +
                • +
              • + +
                • +
              • + +
                • +
              • + Line mode  + + +
                • +
              +
              +
              +
              +
              + +
              +
              +
              +
              +
                +
              • + Legend +
                • +
              • + Show  + + +
                • +
              • + Table  + + +
                • +
              • + Right side  + + +
                • +
              • + Hide empty  + + +
                • +
              +
              +
              +
              +
              +
              +
              +
              +
                +
              • + Legend values +
                • +
              • + Min  + + +
                • +
              • + Max  + + +
                • +
              • + Avg  + + +
                • +
              • + Current  + + +
                • +
              • + Total  + + +
                • +
              +
              +
              +
              +
              +
              + diff --git a/src/app/panels/graph/graph.js b/src/app/panels/graph/graph.js index 62fd543d0e8..20648af5751 100755 --- a/src/app/panels/graph/graph.js +++ b/src/app/panels/graph/graph.js @@ -109,9 +109,9 @@ function (angular, $, kbn, moment, _, GraphTooltip) { } } - function updateLegendValues(plot) { + function drawHook(plot) { + // Update legend values var yaxis = plot.getYAxes(); - for (var i = 0; i < data.length; i++) { var series = data[i]; var axis = yaxis[series.yaxis - 1]; @@ -124,6 +124,29 @@ function (angular, $, kbn, moment, _, GraphTooltip) { series.updateLegendValues(formater, tickDecimals, axis.scaledDecimals + 2); if(!scope.$$phase) { scope.$digest(); } } + + // add left axis labels + if (scope.panel.leftYAxisLabel) { + var yaxisLabel = $("
              ") + .text(scope.panel.leftYAxisLabel) + .appendTo(elem); + + yaxisLabel.css("margin-top", yaxisLabel.width() / 2); + } + + // add right axis labels + if (scope.panel.rightYAxisLabel) { + var rightLabel = $("
              ") + .text(scope.panel.rightYAxisLabel) + .appendTo(elem); + + rightLabel.css("margin-top", rightLabel.width() / 2); + } + } + + function processOffsetHook(plot, gridMargin) { + if (scope.panel.leftYAxisLabel) { gridMargin.left = 20; } + if (scope.panel.rightYAxisLabel) { gridMargin.right = 20; } } // Function for rendering panel @@ -137,7 +160,10 @@ function (angular, $, kbn, moment, _, GraphTooltip) { // Populate element var options = { - hooks: { draw: [updateLegendValues] }, + hooks: { + draw: [drawHook], + processOffset: [processOffsetHook], + }, legend: { show: false }, series: { stackpercent: panel.stack ? panel.percentage : false, @@ -173,7 +199,8 @@ function (angular, $, kbn, moment, _, GraphTooltip) { backgroundColor: null, borderWidth: 0, hoverable: true, - color: '#c8c8c8' + color: '#c8c8c8', + margin: { left: 0, right: 0 }, }, selection: { mode: "x", @@ -213,8 +240,6 @@ function (angular, $, kbn, moment, _, GraphTooltip) { } catch (e) { console.log('flotcharts error', e); } - - addAxisLabels(); } if (shouldDelayDraw(panel)) { @@ -317,19 +342,6 @@ function (angular, $, kbn, moment, _, GraphTooltip) { }; } - function addAxisLabels() { - if (scope.panel.leftYAxisLabel) { - elem.css('margin-left', '10px'); - var yaxisLabel = $("
              ") - .text(scope.panel.leftYAxisLabel) - .appendTo(elem); - - yaxisLabel.css("margin-top", yaxisLabel.width() / 2 - 20); - } else if (elem.css('margin-left')) { - elem.css('margin-left', ''); - } - } - function configureAxisOptions(data, options) { var defaults = { position: 'left', @@ -406,9 +418,21 @@ function (angular, $, kbn, moment, _, GraphTooltip) { case 'bps': url += '&yUnitSystem=si'; break; + case 'Bps': + url += '&yUnitSystem=si'; + break; case 'short': url += '&yUnitSystem=si'; break; + case 'joule': + url += '&yUnitSystem=si'; + break; + case 'watt': + url += '&yUnitSystem=si'; + break; + case 'ev': + url += '&yUnitSystem=si'; + break; case 'none': url += '&yUnitSystem=none'; break; diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js index a1ae2bf2b4f..7fde36b475f 100644 --- a/src/app/panels/graph/module.js +++ b/src/app/panels/graph/module.js @@ -104,6 +104,12 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) { $scope.hiddenSeries = {}; $scope.seriesList = []; + $scope.unitFormats = kbn.getUnitFormats(); + + $scope.setUnitFormat = function(axis, subItem) { + $scope.panel.y_formats[axis] = subItem.value; + $scope.render(); + }; $scope.updateTimeRange = function () { $scope.range = timeSrv.timeRange(); @@ -262,11 +268,6 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) { $scope.render(); }; - $scope.toggleGridMinMax = function(key) { - $scope.panel.grid[key] = _.toggle($scope.panel.grid[key], null, 0); - $scope.render(); - }; - $scope.addSeriesOverride = function(override) { $scope.panel.seriesOverrides.push(override || {}); }; @@ -282,6 +283,12 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) { $scope.get_data(); }; + $scope.legendValuesOptionChanged = function() { + var legend = $scope.panel.legend; + legend.values = legend.min || legend.max || legend.avg || legend.current || legend.total; + $scope.render(); + }; + $scope.exportCsv = function() { kbn.exportSeriesListToCsv($scope.seriesList); }; diff --git a/src/app/panels/graph/seriesOverridesCtrl.js b/src/app/panels/graph/seriesOverridesCtrl.js index 04d66ee5e73..80fb2ead6c2 100644 --- a/src/app/panels/graph/seriesOverridesCtrl.js +++ b/src/app/panels/graph/seriesOverridesCtrl.js @@ -20,26 +20,21 @@ define([ option.index = $scope.overrideMenu.length; option.values = values; - option.submenu = _.map(values, function(value, index) { - return { - text: String(value), - click: 'menuItemSelected(' + option.index + ',' + index + ')' - }; + option.submenu = _.map(values, function(value) { + return { text: String(value), value: value }; }); $scope.overrideMenu.push(option); }; - $scope.setOverride = function(optionIndex, valueIndex) { - var option = $scope.overrideMenu[optionIndex]; - var value = option.values[valueIndex]; - $scope.override[option.propertyName] = value; + $scope.setOverride = function(item, subItem) { + $scope.override[item.propertyName] = subItem.value; // automatically disable lines for this series and the fill bellow to series // can be removed by the user if they still want lines - if (option.propertyName === 'fillBelowTo') { + if (item.propertyName === 'fillBelowTo') { $scope.override['lines'] = false; - $scope.addSeriesOverride({ alias: value, lines: false }); + $scope.addSeriesOverride({ alias: subItem.value, lines: false }); } $scope.updateCurrentOverrides(); diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index 77eb933f855..f58fbab5c51 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -89,7 +89,7 @@ {{option.name}}: {{option.value}} -
            • +
            diff --git a/src/app/panels/singlestat/editor.html b/src/app/panels/singlestat/editor.html index 2460571a4b3..17e94f317f5 100644 --- a/src/app/panels/singlestat/editor.html +++ b/src/app/panels/singlestat/editor.html @@ -1,115 +1,190 @@
            -
            -
            Big value
            -
            - - -
            -
            - - -
            -
            - - -
            -
            - - -
            -
            - -
            -
            Big value font size
            -
            - - -
            -
            - - -
            -
            - - -
            -
            - -
            -
            Formats
            -
            - - -
            -
            -
            - -
            -
            -
            Coloring
            - - -
            - - -
            -
            - - - - - invert order -
            -
            - -
            -
            Spark lines
            - - -
            - - -
            -
            - - -
            -
            -
            - -
            -
            -
            Value to text mapping
            -
            - -
            -
            -
              -
            • - -
              • - -
            • - -
              • -
            • - -
              • -
            • - -
              • - -
            • - - - -
              • - -
            -
            -
            +
            +
            +
            +
              +
            • + Big value +
              • +
            • + Prefix +
              • +
            • + +
              • +
            • + Value +
              • +
            • + +
              • +
            • + Postfix +
              • +
            • + +
              • +
            +
            +
            +
            +
              +
            • + Font size +
              • +
            • + Prefix +
              • +
            • + +
              • +
            • + Value +
              • +
            • + +
              • +
            • + Postfix +
              • +
            • + +
              • +
            +
            +
            +
            +
              +
            • + Unit +
              • +
            • +
              • +
            +
            +
            +
            +
            +
            +
              +
            • + Coloring +
              • +
            • + Background  + + +
              • +
            • + Value  + + +
              • +
            • + ThresholdsComma seperated values +
              • +
            • + +
              • +
            • + Colors +
              • +
            • + + + +
              • +
            • + invert order +
              • +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
              +
            • + Spark lines +
              • +
            • + Show  + + +
              • +
            • + Background mode  + + +
              • +
            • + Line Color +
              • +
            • + +
              • +
            • + Fill Color +
              • +
            • + +
              • +
            +
            +
            +
            +
            +
            + +
            +
            +
            +
            +
              +
            • + Value to text mapping +
              • +
            • + +
              • +
            • + +
              • +
            • + +
              • +
            • + +
              • + +
            • + + + +
              • + +
            +
            +
            +
            +
            +
            diff --git a/src/app/panels/singlestat/module.js b/src/app/panels/singlestat/module.js index 3568cc53c64..75e657094ef 100644 --- a/src/app/panels/singlestat/module.js +++ b/src/app/panels/singlestat/module.js @@ -57,6 +57,12 @@ function (angular, app, _, TimeSeries, kbn, PanelMeta) { }; _.defaults($scope.panel, _d); + $scope.unitFormats = kbn.getUnitFormats(); + + $scope.setUnitFormat = function(subItem) { + $scope.panel.format = subItem.value; + $scope.render(); + }; $scope.init = function() { panelSrv.init($scope); diff --git a/src/app/panels/singlestat/singleStatPanel.js b/src/app/panels/singlestat/singleStatPanel.js index 01ecfe2499d..49c248bc5cd 100644 --- a/src/app/panels/singlestat/singleStatPanel.js +++ b/src/app/panels/singlestat/singleStatPanel.js @@ -11,7 +11,7 @@ function (angular, app, _, $) { var module = angular.module('grafana.panels.singlestat', []); app.useModule(module); - module.directive('singlestatPanel', function($location, linkSrv, $timeout) { + module.directive('singlestatPanel', function($location, linkSrv, $timeout, templateSrv) { return { link: function(scope, elem) { @@ -63,6 +63,7 @@ function (angular, app, _, $) { } function getSpan(className, fontSize, value) { + value = templateSrv.replace(value); return '' + value + ''; } @@ -133,9 +134,7 @@ function (angular, app, _, $) { color: panel.sparkline.lineColor }; - setTimeout(function() { - $.plot(plotCanvas, [plotSeries], options); - }, 10); + $.plot(plotCanvas, [plotSeries], options); } function render() { diff --git a/src/css/less/forms.less b/src/css/less/forms.less index e1affd09ae9..5018b9329da 100644 --- a/src/css/less/forms.less +++ b/src/css/less/forms.less @@ -15,7 +15,7 @@ input[type="checkbox"]+.cr1 { height: 19px; clear: none; text-indent: 2px; - margin-top: 4px; + margin: 0; padding: 0 0 0 20px; vertical-align:middle; background: url(@checkboxImageUrl) left top no-repeat; diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 90b8ce6bcd0..23ca81d64bf 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -88,29 +88,6 @@ } } -.yaxisLabel { - top: 50%; - left: -20px; - transform: rotate(-90deg); - -o-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -webkit-transform: rotate(-90deg); - transform-origin: 0 0; - -o-transform-origin: 0 0; - -ms-transform-origin: 0 0; - -moz-transform-origin: 0 0; - -webkit-transform-origin: 0 0; -} - -.axisLabel { - color: @textColor; - font-size: @fontSizeSmall; - position: absolute; - text-align: center; - font-size: 12px; -} - .dashboard-fullscreen { .main-view-container { overflow: hidden; @@ -146,7 +123,6 @@ .grafana-segment-list { list-style: none; margin: 0; - margin-right: 90px; >li { float: left; } @@ -192,6 +168,9 @@ padding: 8px 15px; } + &.last { + border-right: none; + } } .grafana-target-segment-icon { @@ -225,37 +204,6 @@ input[type=text].grafana-function-param-input { padding: 0; } -.grafana-target-controls { - float: right; - list-style: none; - margin: 0; - text-align: right; - - >li { - display: inline-block; - white-space: nowrap; - } - - .fa { - position: relative; - top: 8px; - } - - a { - padding: 8px 7px; - color: @grafanaTargetColor; - font-size: 16px; - - .grafana-target-hidden & { - color: @grafanaTargetColorHide; - } - - &:hover, &:focus { - text-decoration: none; - } - } -} - input[type=text].grafana-target-text-input { padding: 8px 7px; border: none; @@ -267,12 +215,15 @@ input[type=text].grafana-target-text-input { border-right: 1px solid @grafanaTargetSegmentBorder; } -input[type=text].grafana-target-segment-input { +[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input { border: none; border-right: 1px solid @grafanaTargetSegmentBorder; margin: 0px; border-radius: 0; padding: 8px 4px; + &.last { + border-right: none; + } } input[type=checkbox].grafana-target-option-checkbox { @@ -286,6 +237,9 @@ select.grafana-target-segment-input { border-radius: 0; height: 36px; padding: 8px 5px; + &.last { + border-right: none; + } } .grafana-target .dropdown { @@ -371,6 +325,7 @@ select.grafana-target-segment-input { background: inherit; border: none; color: inherit; + padding: 0; } .sp-replacer:hover, .sp-replacer.sp-active { diff --git a/src/css/less/graph.less b/src/css/less/graph.less index d6856f5bbf9..5ad38283689 100644 --- a/src/css/less/graph.less +++ b/src/css/less/graph.less @@ -228,3 +228,44 @@ text-align: right; } } + +.left-yaxis-label { + top: 50%; + left: -5px; + transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform-origin: left top; + -o-transform-origin: left top; + -ms-transform-origin: left top; + -moz-transform-origin: left top; + -webkit-transform-origin: left top; +} + +.right-yaxis-label { + top: 50%; + right: -5px; + + -webkit-transform: rotate(90deg); + -webkit-transform-origin: right top; + -moz-transform: rotate(90deg); + -moz-transform-origin: right top; + -ms-transform: rotate(90deg); + -ms-transform-origin: right top; + -o-transform: rotate(90deg); + -o-transform-origin: right top; + transform: rotate(90deg); + transform-origin: right top; +} + + +.axisLabel { + color: @textColor; + font-size: @fontSizeSmall; + position: absolute; + text-align: center; + font-size: 12px; +} + diff --git a/src/index.html b/src/index.html index c6323c8b367..b5ff55bca8d 100644 --- a/src/index.html +++ b/src/index.html @@ -31,7 +31,7 @@
            {{alert.title}}
            diff --git a/src/plugins/custom.panel.example/module.js b/src/plugins/custom.panel.example/module.js index d04d8fca959..8ed4a450533 100644 --- a/src/plugins/custom.panel.example/module.js +++ b/src/plugins/custom.panel.example/module.js @@ -2,9 +2,9 @@ define([ 'angular', 'app', 'lodash', - 'require', + 'components/panelmeta', ], -function (angular, app, _) { +function (angular, app, _, PanelMeta) { 'use strict'; var module = angular.module('grafana.panels.custom', []); @@ -12,9 +12,9 @@ function (angular, app, _) { module.controller('CustomPanelCtrl', function($scope, panelSrv) { - $scope.panelMeta = { - description : "Example plugin panel", - }; + $scope.panelMeta = new PanelMeta({ + description : "A static text panel that can use plain text, markdown, or (sanitized) HTML" + }); // set and populate defaults var _d = { @@ -22,10 +22,6 @@ function (angular, app, _) { _.defaults($scope.panel, _d); - $scope.init = function() { - panelSrv.init($scope); - }; - - $scope.init(); + panelSrv.init($scope); }); }); diff --git a/src/test/specs/seriesOverridesCtrl-specs.js b/src/test/specs/seriesOverridesCtrl-specs.js index 0542e613a34..ec7cc70159c 100644 --- a/src/test/specs/seriesOverridesCtrl-specs.js +++ b/src/test/specs/seriesOverridesCtrl-specs.js @@ -16,15 +16,9 @@ define([ ctx.scope.render = function() {}; }); - describe('Controller should init overrideMenu', function() { - it('click should include option and value index', function() { - expect(ctx.scope.overrideMenu[1].submenu[1].click).to.be('menuItemSelected(1,1)'); - }); - }); - describe('When setting an override', function() { beforeEach(function() { - ctx.scope.setOverride(1, 0); + ctx.scope.setOverride({propertyName: 'lines'}, {value: true}); }); it('should set override property', function() {