IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(timepicker2): more work on new timepicker

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-09-18 08:17:19 +02:00
parent 5eefa36111
commit 2a52d9bdf6
9 changed files with 55 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/app/features/dashboard/timepicker/dropdown.html
View File

@ -1,13 +1,4 @@
<div class="row pull-right">
<div class="gf-timepicker-relative-section">
<h3>Quick ranges</h3>
<ul ng-repeat="group in timeOptions">
<li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
<a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
</li>
</ul>
</div>
<div class="gf-timepicker-absolute-section">
<h3>Time range</h3>
<label class="small">From:</label>
@ -31,8 +22,22 @@
</div>
<label class="small">Refreshing every:</label>
<select ng-model="dashboard.refresh" class='input-large' ng-options="f for f in ['5m','10m']"></select>
<select ng-model="currentRefresh" class='input-large' ng-options="f for f in refreshOptions"></select>
<button class="btn btn-inverse pull-right" type="button" ng-click="applyCustomTimeRange()">
Apply
</button>
</div>
<div class="gf-timepicker-relative-section">
<h3>Quick ranges</h3>
<ul ng-repeat="group in timeOptions">
<li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
<a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
</li>
</ul>
</div>
</div>
<div class="clearfix"></div>

13
public/app/features/dashboard/timepicker/timepicker.html
View File

@ -7,17 +7,22 @@
</li>
<li>
<a class="timepicker-dropdown" bs-tooltip="tooltip" data-placement="bottom" ng-click="ctrl.loadTimeOptions()">
<a class="timepicker-dropdown" bs-tooltip="tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()">
<i class="fa fa-clock-o"></i>
<span ng-bind="rangeString"></span>
<i class="fa fa-caret-down"></i>
<span ng-show="dashboard.refresh" class="text-warning">
&nbsp;
&nbsp;
<i class="fa fa-refresh"></i>
refreshed every {{dashboard.refresh}}
</span>
</a>
</li>
<li class="grafana-menu-refresh">
<li class="grafana-menu-refresh" ng-show="!dashboard.refresh">
<a ng-click="timeSrv.refreshDashboard()">
<i class="fa fa-refresh"></i>
<span ng-show="dashboard.refresh" class="text-warning">refreshed every {{dashboard.refresh}} </span>
</a>
</li>

14
public/app/features/dashboard/timepicker/timepicker.ts
View File

@ -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) + ' <br>to<br>';
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) + ' <br>to<br>';
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,

1
public/app/partials/dashboard.html
View File

@ -5,6 +5,7 @@
<div dash-editor-view></div>
<div dash-search-view></div>
<div class="clearfix"></div>
<div ng-if="submenuEnabled" ng-include="'app/partials/submenu.html'">
</div>

9
public/app/plugins/PLUGIN_CHANGES.md Normal file
View File

@ -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).

9
public/less/tabs.less
View File

@ -30,10 +30,11 @@
background-color: #060606;
border-color: transparent;
}
.tab-content {
padding: 10px;
background-color: @grafanaPanelBackground;
}
}
.tab-content {
padding: 10px;
background-color: @grafanaPanelBackground;
}

10
public/less/timepicker.less
View File

@ -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;
}
}
}

22
public/less/variables.dark.less
View File

@ -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

20
public/less/variables.light.less
View File

@ -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
// -------------------------