diff --git a/public/app/features/dashboard/timepicker/dropdown.html b/public/app/features/dashboard/timepicker/dropdown.html index ca686db8114..142f256c41c 100644 --- a/public/app/features/dashboard/timepicker/dropdown.html +++ b/public/app/features/dashboard/timepicker/dropdown.html @@ -1,13 +1,4 @@
-
-

Quick ranges

- -
-

Time range

@@ -31,8 +22,22 @@
- + + +
+ +
+

Quick ranges

+ +
+
diff --git a/public/app/features/dashboard/timepicker/timepicker.html b/public/app/features/dashboard/timepicker/timepicker.html index 4abd957b738..d80066848dc 100644 --- a/public/app/features/dashboard/timepicker/timepicker.html +++ b/public/app/features/dashboard/timepicker/timepicker.html @@ -7,17 +7,22 @@
  • - + - + + +   +   + + refreshed every {{dashboard.refresh}} +
    • -
  • +
  • - refreshed every {{dashboard.refresh}}
    • diff --git a/public/app/features/dashboard/timepicker/timepicker.ts b/public/app/features/dashboard/timepicker/timepicker.ts index 625df0bbc4c..c9cfc97bb5e 100644 --- a/public/app/features/dashboard/timepicker/timepicker.ts +++ b/public/app/features/dashboard/timepicker/timepicker.ts @@ -54,18 +54,22 @@ export class TimePickerCtrl { this.$scope.dashboard.formatDate(time.to, format); } - this.$scope.timeRaw = timeRaw; this.$scope.absolute = {form: time.from.toDate(), to: time.to.toDate()}; + this.$scope.timeRaw = timeRaw; + this.$scope.tooltip = this.$scope.dashboard.formatDate(time.from) + '
    to
    '; + this.$scope.tooltip += this.$scope.dashboard.formatDate(time.to); + this.$scope.onAppEvent('zoom-out', function() { this.$scope.zoom(2); }); - - this.$scope.tooltip = this.$scope.dashboard.formatDate(time.from.date) + '
    to
    '; - this.$scope.tooltip += this.$scope.dashboard.formatDate(time.to.date); } - loadTimeOptions() { + openDropdown() { this.$scope.timeOptions = rangeUtil.getRelativeTimesList(this.$scope.panel, this.$scope.rangeString); + this.$scope.currentRefresh = this.$scope.dashboard.refresh || 'off'; + this.$scope.refreshOptions = this.$scope.panel.refresh_intervals; + this.$scope.refreshOptions.unshift('off'); + this.$scope.appEvent('show-dash-editor', { src: 'app/features/dashboard/timepicker/dropdown.html', scope: this.$scope, diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 57c9cb74521..732d05cd318 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -5,6 +5,7 @@
    +
    diff --git a/public/app/plugins/PLUGIN_CHANGES.md b/public/app/plugins/PLUGIN_CHANGES.md new file mode 100644 index 00000000000..5627af4a706 --- /dev/null +++ b/public/app/plugins/PLUGIN_CHANGES.md @@ -0,0 +1,9 @@ +# Plugin API + +## Changelog + +2.5 changed the `range` parameter in the `datasource.query` function's options parameter. This +parameter now holds a parsed range with `moment` dates `form` and `to`. To get +millisecond epoc from a `moment` you the function `valueOf`. The raw date range as represented +internally in grafana (which may be relative expressions like `now-5h`) is included in the +new property `rangeRaw` (on the options object). diff --git a/public/less/tabs.less b/public/less/tabs.less index 098d1360524..13ad593ef80 100644 --- a/public/less/tabs.less +++ b/public/less/tabs.less @@ -30,10 +30,11 @@ background-color: #060606; border-color: transparent; } -} -.tab-content { - padding: 10px; - background-color: @grafanaPanelBackground; + .tab-content { + padding: 10px; + background-color: @grafanaPanelBackground; + } } + diff --git a/public/less/timepicker.less b/public/less/timepicker.less index f4d66bb498f..e17d009ca74 100644 --- a/public/less/timepicker.less +++ b/public/less/timepicker.less @@ -38,21 +38,21 @@ div.timepicker-now { } .gf-timepicker-dropdown { - margin: 15px; + margin: 0px; padding: 10px 20px; float: right; background-color: @grafanaPanelBackground; - border: 1px solid @grafanaTargetFuncBackground; + .box-shadow(@navbarDropdownShadow); } .gf-timepicker-absolute-section { width: 300px; float: left; + border-right: @grafanaTriggerBorder; padding: 0 20px 0 20px; } .gf-timepicker-relative-section { - border-right: @grafanaTriggerBorder; padding: 0 20px 0 20px; min-height: 258px; float: left; @@ -60,8 +60,8 @@ div.timepicker-now { float: left; margin: 0 20px 10px 25px; li.active { - border-left: 1px solid @blue; - padding: 2px 0; + border-bottom: 1px solid @blue; + margin: 3px 0; } } } diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 9614d61ba74..708b5ad299a 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -48,7 +48,6 @@ @bodyBackground: rgb(22,22,22); @textColor: @grayLighter; - // Links // ------------------------- @linkColor: darken(@white,11%); @@ -225,27 +224,8 @@ @navbarLinkColorActive: @navbarLinkColorHover; @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: @navbarBackground; - @navbarBrandColor: @linkColor; - -// Inverted navbar -@navbarInverseBackground: #252A30; -@navbarInverseBackgroundHighlight: #252A30; -@navbarInverseBorder: transparent; - -@navbarInverseText: @grayLight; -@navbarInverseLinkColor: @grayLight; -@navbarInverseLinkColorHover: @white; -@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; -@navbarInverseLinkBackgroundHover: #242A31; -@navbarInverseLinkBackgroundActive: @navbarInverseLinkBackgroundHover; - -@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); -@navbarInverseSearchBackgroundFocus: @white; -@navbarInverseSearchBorder: @navbarInverseBackground; -@navbarInverseSearchPlaceholderColor: @white; - -@navbarInverseBrandColor: @navbarInverseLinkColor; +@navbarDropdownShadow: inset 0px 4px 10px -4px @bodyBackground; // Pagination diff --git a/public/less/variables.light.less b/public/less/variables.light.less index 5025dfa63ea..174a4529395 100644 --- a/public/less/variables.light.less +++ b/public/less/variables.light.less @@ -238,28 +238,10 @@ @navbarLinkColorActive: #555; @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: darken(@navbarBackground, 6.5%); +@navbarDropdownShadow: inset 0px 4px 10px -4px darken(@bodyBackground, 20%); @navbarBrandColor: @navbarLinkColor; -// Inverted navbar -@navbarInverseBackground: @blue; -@navbarInverseBackgroundHighlight: @navbarInverseBackground; -@navbarInverseBorder: transparent; - -@navbarInverseText: @white; -@navbarInverseLinkColor: @white; -@navbarInverseLinkColorHover: @white; -@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; -@navbarInverseLinkBackgroundHover: rgba(0, 0, 0, 0.05); -@navbarInverseLinkBackgroundActive: @navbarInverseBackground; - -@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); -@navbarInverseSearchBackgroundFocus: @white; -@navbarInverseSearchBorder: @navbarInverseBackground; -@navbarInverseSearchPlaceholderColor: @grayDark; - -@navbarInverseBrandColor: @navbarInverseLinkColor; - // Pagination // -------------------------