From 2a52d9bdf658331c731777424f711fdbe2bb9902 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 18 Sep 2015 08:17:19 +0200 Subject: [PATCH] feat(timepicker2): more work on new timepicker --- .../dashboard/timepicker/dropdown.html | 25 +++++++++++-------- .../dashboard/timepicker/timepicker.html | 13 +++++++--- .../dashboard/timepicker/timepicker.ts | 14 +++++++---- public/app/partials/dashboard.html | 1 + public/app/plugins/PLUGIN_CHANGES.md | 9 +++++++ public/less/tabs.less | 9 ++++--- public/less/timepicker.less | 10 ++++---- public/less/variables.dark.less | 22 +--------------- public/less/variables.light.less | 20 +-------------- 9 files changed, 55 insertions(+), 68 deletions(-) create mode 100644 public/app/plugins/PLUGIN_CHANGES.md 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 // -------------------------