From d96a6a59ee25cd44813794368862b9b34668fe74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 12 Sep 2015 11:49:14 +0200 Subject: [PATCH] refactor: moved timepicker from a simple panel to component, removed simple panel directive --- public/app/controllers/signupCtrl.ts | 3 +- public/app/core/directives/array_join.ts | 4 +- public/app/directives/grafanaSimplePanel.js | 66 ---------- public/app/features/dashboard/all.js | 1 + public/app/features/dashboard/dashboardSrv.js | 16 +-- .../dashboard/partials/dashboardTopNav.html | 5 +- .../features/dashboard/partials/settings.html | 11 +- .../dashboard/timepicker/settings.html | 55 +++++++++ .../dashboard/timepicker/timepicker.html | 56 +++++++++ .../dashboard/timepicker/timepicker.ts} | 116 +++++++++--------- public/app/features/dashlinks/editor.html | 2 +- public/app/headers/angularjs/angularjs.d.ts | 2 +- public/app/headers/common.d.ts | 13 ++ public/app/headers/moment/moment.d.ts | 1 - public/app/panels/timepicker/custom.html | 81 ------------ public/app/panels/timepicker/editor.html | 55 --------- public/app/panels/timepicker/module.html | 57 --------- public/test/specs/dashboardSrv-specs.js | 3 +- tasks/build_task.js | 1 + tasks/options/tslint.js | 2 +- tasks/options/watch.js | 2 +- 21 files changed, 208 insertions(+), 344 deletions(-) delete mode 100644 public/app/directives/grafanaSimplePanel.js create mode 100644 public/app/features/dashboard/timepicker/settings.html create mode 100644 public/app/features/dashboard/timepicker/timepicker.html rename public/app/{panels/timepicker/module.js => features/dashboard/timepicker/timepicker.ts} (71%) delete mode 100644 public/app/panels/timepicker/custom.html delete mode 100644 public/app/panels/timepicker/editor.html delete mode 100644 public/app/panels/timepicker/module.html diff --git a/public/app/controllers/signupCtrl.ts b/public/app/controllers/signupCtrl.ts index 27f0aeabac4..d59f1f0eb68 100644 --- a/public/app/controllers/signupCtrl.ts +++ b/public/app/controllers/signupCtrl.ts @@ -1,8 +1,7 @@ /// -/// import angular = require('angular'); -declare var config : any; +import config = require('config'); var module = angular.module('grafana.controllers'); diff --git a/public/app/core/directives/array_join.ts b/public/app/core/directives/array_join.ts index 3fa1c209847..fd88b5cfb8c 100644 --- a/public/app/core/directives/array_join.ts +++ b/public/app/core/directives/array_join.ts @@ -3,7 +3,7 @@ import angular = require('angular'); import _ = require('lodash'); -export function ArrayJoin() { +export function arrayJoin() { 'use strict'; return { @@ -29,5 +29,5 @@ export function ArrayJoin() { }; } -angular.module('grafana.directives').directive('arrayJoin', ArrayJoin); +angular.module('grafana.directives').directive('arrayJoin', arrayJoin); diff --git a/public/app/directives/grafanaSimplePanel.js b/public/app/directives/grafanaSimplePanel.js deleted file mode 100644 index ce34e2841e7..00000000000 --- a/public/app/directives/grafanaSimplePanel.js +++ /dev/null @@ -1,66 +0,0 @@ -define([ - 'angular', -], -function (angular) { - 'use strict'; - - angular - .module('grafana.directives') - .directive('grafanaSimplePanel', function($compile) { - var panelLoading = '' + - ''+ - ' loading ...' + - ''+ - ''; - - return { - restrict: 'E', - link: function($scope, elem, attr) { - - // once we have the template, scan it for controllers and - // load the module.js if we have any - - // compile the module and uncloack. We're done - function loadModule($module) { - $module.appendTo(elem); - /* jshint indent:false */ - $compile(elem.contents())($scope); - elem.removeClass("ng-cloak"); - } - - function loadController(name) { - elem.addClass("ng-cloak"); - // load the panels module file, then render it in the dom. - var nameAsPath = name.replace(".", "/"); - $scope.require([ - 'jquery', - 'text!panels/'+nameAsPath+'/module.html' - ], function ($, moduleTemplate) { - var $module = $(moduleTemplate); - // top level controllers - var $controllers = $module.filter('ngcontroller, [ng-controller], .ng-controller'); - // add child controllers - $controllers = $controllers.add($module.find('ngcontroller, [ng-controller], .ng-controller')); - - if ($controllers.length) { - $controllers.first().prepend(panelLoading); - $scope.require([ - 'panels/'+nameAsPath+'/module' - ], function() { - loadModule($module); - }); - } else { - loadModule($module); - } - }); - } - - $scope.$watch(attr.type, function (name) { - loadController(name); - }); - - } - }; - }); - -}); diff --git a/public/app/features/dashboard/all.js b/public/app/features/dashboard/all.js index d6e713070e9..0ee3a64a806 100644 --- a/public/app/features/dashboard/all.js +++ b/public/app/features/dashboard/all.js @@ -16,6 +16,7 @@ define([ './timeSrv', './unsavedChangesSrv', './directives/dashSearchView', + './timepicker/timepicker', './graphiteImportCtrl', './dynamicDashboardSrv', './importCtrl', diff --git a/public/app/features/dashboard/dashboardSrv.js b/public/app/features/dashboard/dashboardSrv.js index 0ee2fde8a4b..b7a9e1dbbab 100644 --- a/public/app/features/dashboard/dashboardSrv.js +++ b/public/app/features/dashboard/dashboardSrv.js @@ -31,7 +31,7 @@ function (angular, $, kbn, _, moment) { this.hideControls = data.hideControls || false; this.sharedCrosshair = data.sharedCrosshair || false; this.rows = data.rows || []; - this.nav = data.nav || []; + this.timepicker = data.timepicker || {}; this.time = data.time || { from: 'now-6h', to: 'now' }; this.templating = this._ensureListExist(data.templating); this.annotations = this._ensureListExist(data.annotations); @@ -40,11 +40,6 @@ function (angular, $, kbn, _, moment) { this.schemaVersion = data.schemaVersion || 0; this.version = data.version || 0; this.links = data.links || []; - - if (this.nav.length === 0) { - this.nav.push({ type: 'timepicker' }); - } - this._updateSchema(data); this._initMeta(meta); } @@ -232,9 +227,9 @@ function (angular, $, kbn, _, moment) { var i, j, k; var oldVersion = this.schemaVersion; var panelUpgrades = []; - this.schemaVersion = 6; + this.schemaVersion = 7; - if (oldVersion === 6) { + if (oldVersion === 7) { return; } @@ -329,6 +324,11 @@ function (angular, $, kbn, _, moment) { } } + if (oldVersion < 7 && old.nav && old.nav.length) { + this.timepicker = old.nav[0]; + delete this.nav; + } + if (panelUpgrades.length === 0) { return; } diff --git a/public/app/features/dashboard/partials/dashboardTopNav.html b/public/app/features/dashboard/partials/dashboardTopNav.html index 58445abf505..f370ce324f5 100644 --- a/public/app/features/dashboard/partials/dashboardTopNav.html +++ b/public/app/features/dashboard/partials/dashboardTopNav.html @@ -61,9 +61,8 @@ Back to dashboard -
  • - - +
  • +
    • diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index 256b7cd825f..892eebbb927 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -5,9 +5,7 @@
    -
    -
    -
    +
    @@ -40,7 +38,7 @@
    -
    +
    • Timezone @@ -110,9 +108,8 @@
    -
    - - +
    +
    diff --git a/public/app/features/dashboard/timepicker/settings.html b/public/app/features/dashboard/timepicker/settings.html new file mode 100644 index 00000000000..b382c593094 --- /dev/null +++ b/public/app/features/dashboard/timepicker/settings.html @@ -0,0 +1,55 @@ +
    +
    +
    +
    +
      +
    • + Relative times +
      • +
    • + +
      • +
    +
    +
    +
    +
      +
    • + Auto-refresh +
      • +
    • + +
      • +
    +
    +
    + +
    +
      +
    • + Now delay +
      • +
    • + now- +
      • +
    • + +
      • + +
    +
    +
    + +
    + +

    +
    + + For these changes to fully take effect save and reload the dashboard. + +

    +
    diff --git a/public/app/features/dashboard/timepicker/timepicker.html b/public/app/features/dashboard/timepicker/timepicker.html new file mode 100644 index 00000000000..f202c1ed27e --- /dev/null +++ b/public/app/features/dashboard/timepicker/timepicker.html @@ -0,0 +1,56 @@ + +
    + +
    +
    diff --git a/public/app/panels/timepicker/module.js b/public/app/features/dashboard/timepicker/timepicker.ts similarity index 71% rename from public/app/panels/timepicker/module.js rename to public/app/features/dashboard/timepicker/timepicker.ts index 0e6525016e8..72de01db29b 100644 --- a/public/app/panels/timepicker/module.js +++ b/public/app/features/dashboard/timepicker/timepicker.ts @@ -1,32 +1,13 @@ -/* +/// - ## Timepicker2 +import angular = require('angular'); +import _ = require('lodash'); +import moment = require('moment'); +import kbn = require('kbn'); - ### Parameters - * mode :: The default mode of the panel. Options: 'relative', 'absolute' 'since' Default: 'relative' - * time_options :: An array of possible time options. Default: ['5m','15m','1h','6h','12h','24h','2d','7d','30d'] - * timespan :: The default options selected for the relative view. Default: '15m' - * timefield :: The field in which time is stored in the document. - * refresh: Object containing refresh parameters - * enable :: true/false, enable auto refresh by default. Default: false - * interval :: Seconds between auto refresh. Default: 30 - * min :: The lowest interval a user may set -*/ -define([ - 'angular', - 'app', - 'lodash', - 'moment', - 'kbn' -], -function (angular, app, _, moment, kbn) { - 'use strict'; - - var module = angular.module('grafana.panels.timepicker', []); - app.useModule(module); - - module.controller('timepicker', function($scope, $rootScope, timeSrv) { +export class TimePickerCtrl { + constructor($scope : any, $rootScope, timeSrv) { $scope.panelMeta = { status : "Stable", description : "" @@ -39,8 +20,6 @@ function (angular, app, _, moment, kbn) { refresh_intervals : ['5s','10s','30s','1m','5m','15m','30m','1h','2h','1d'], }; - _.defaults($scope.panel,_d); - // ng-pattern regexs $scope.patterns = { date: /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/, @@ -57,6 +36,10 @@ function (angular, app, _, moment, kbn) { }); $scope.init = function() { + $scope.panel = $scope.dashboard.timepicker; + + _.defaults($scope.panel, _d); + var time = timeSrv.timeRange(true); $scope.panel.now = false; @@ -86,11 +69,11 @@ function (angular, app, _, moment, kbn) { $scope.temptime = cloneTime($scope.time); $scope.temptime.now = $scope.panel.now; - $scope.temptime.from.date.setHours(0,0,0,0); - $scope.temptime.to.date.setHours(0,0,0,0); + $scope.temptime.from.date.setHours(0, 0, 0, 0); + $scope.temptime.to.date.setHours(0, 0, 0, 0); // Date picker needs the date to be at the start of the day - if(new Date().getTimezoneOffset() < 0) { + if (new Date().getTimezoneOffset() < 0) { $scope.temptime.from.date = moment($scope.temptime.from.date).add(1, 'days').toDate(); $scope.temptime.to.date = moment($scope.temptime.to.date).add(1, 'days').toDate(); } @@ -100,7 +83,7 @@ function (angular, app, _, moment, kbn) { // Constantly validate the input of the fields. This function does not change any date variables // outside of its own scope - $scope.validate = function(time) { + $scope.validate = function(time) : any { // Assume the form is valid. There is a hidden dummy input for invalidating it programatically. $scope.input.$setValidity("dummy", true); @@ -108,13 +91,13 @@ function (angular, app, _, moment, kbn) { _to = datepickerToLocal(time.to.date), _t = time; - if($scope.input.$valid) { + if ($scope.input.$valid) { - _from.setHours(_t.from.hour,_t.from.minute,_t.from.second,_t.from.millisecond); - _to.setHours(_t.to.hour,_t.to.minute,_t.to.second,_t.to.millisecond); + _from.setHours(_t.from.hour, _t.from.minute, _t.from.second, _t.from.millisecond); + _to.setHours(_t.to.hour, _t.to.minute, _t.to.second, _t.to.millisecond); // Check that the objects are valid and to is after from - if(isNaN(_from.getTime()) || isNaN(_to.getTime()) || _from.getTime() >= _to.getTime()) { + if (isNaN(_from.getTime()) || isNaN(_to.getTime()) || _from.getTime() >= _to.getTime()) { $scope.input.$setValidity("dummy", false); return false; } @@ -122,29 +105,23 @@ function (angular, app, _, moment, kbn) { return false; } - return { from: _from, to:_to, now: time.now}; + return { from: _from, to: _to, now: time.now }; }; $scope.setNow = function() { $scope.time.to = getTimeObj(new Date()); }; - /* - time : { - from: Date - to: Date - } - */ $scope.setAbsoluteTimeFilter = function (time) { // Create filter object var _filter = _.clone(time); - if(time.now) { + if (time.now) { _filter.to = "now"; } // Update our representation - $scope.time = getScopeTimeObj(time.from,time.to); + $scope.time = getScopeTimeObj(time.from, time.to); timeSrv.setTime(_filter); }; @@ -160,10 +137,10 @@ function (angular, app, _, moment, kbn) { timeSrv.setTime(range); - $scope.time = getScopeTimeObj(kbn.parseDate(range.from),new Date()); + $scope.time = getScopeTimeObj(kbn.parseDate(range.from), new Date()); }; - var pad = function(n, width, z) { + var pad : any = function(n, width, z) { z = z || '0'; n = n.toString(); return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n; @@ -180,8 +157,8 @@ function (angular, app, _, moment, kbn) { return _n; }; - var getScopeTimeObj = function(from,to) { - var model = {from: getTimeObj(from), to: getTimeObj(to)}; + var getScopeTimeObj = function(from, to) { + var model : any = {from: getTimeObj(from), to: getTimeObj(to)}; if (model.from.date) { model.tooltip = $scope.dashboard.formatDate(model.from.date) + '
    to
    '; @@ -212,10 +189,10 @@ function (angular, app, _, moment, kbn) { var getTimeObj = function(date) { return { date: new Date(date), - hour: pad(date.getHours(),2), - minute: pad(date.getMinutes(),2), - second: pad(date.getSeconds(),2), - millisecond: pad(date.getMilliseconds(),3) + hour: pad(date.getHours(), 2), + minute: pad(date.getMinutes(), 2), + second: pad(date.getSeconds(), 2), + millisecond: pad(date.getMilliseconds(), 3) }; }; @@ -234,7 +211,7 @@ function (angular, app, _, moment, kbn) { var to = (center + (timespan*factor)/2); var from = (center - (timespan*factor)/2); - if(to > Date.now() && range.to <= Date.now()) { + if (to > Date.now() && range.to <= Date.now()) { var offset = to - Date.now(); from = from - offset; to = Date.now(); @@ -246,5 +223,32 @@ function (angular, app, _, moment, kbn) { }); }; - }); -}); + $scope.init(); + } +} + +export function settingsDirective() { + 'use strict'; + return { + restrict: 'E', + templateUrl: 'app/features/dashboard/timepicker/settings.html', + controller: TimePickerCtrl, + scope: true, + link: function() { + } + }; +} + +export function timePickerDirective() { + 'use strict'; + return { + restrict: 'E', + templateUrl: 'app/features/dashboard/timepicker/timepicker.html', + controller: TimePickerCtrl, + scope: true + }; +} + + +angular.module('grafana.directives').directive('gfTimePickerSettings', settingsDirective); +angular.module('grafana.directives').directive('gfTimePicker', timePickerDirective); diff --git a/public/app/features/dashlinks/editor.html b/public/app/features/dashlinks/editor.html index 33283fed03d..9f44d72206c 100644 --- a/public/app/features/dashlinks/editor.html +++ b/public/app/features/dashlinks/editor.html @@ -67,7 +67,7 @@
    -
    +
    • diff --git a/public/app/headers/angularjs/angularjs.d.ts b/public/app/headers/angularjs/angularjs.d.ts index d183167b59f..2e746389d90 100644 --- a/public/app/headers/angularjs/angularjs.d.ts +++ b/public/app/headers/angularjs/angularjs.d.ts @@ -6,7 +6,6 @@ /// -declare var angular: angular.IAngularStatic; // Support for painless dependency injection interface Function { @@ -17,6 +16,7 @@ interface Function { import ng = angular; // Support AMD require declare module 'angular' { + var angular: angular.IAngularStatic; export = angular; } diff --git a/public/app/headers/common.d.ts b/public/app/headers/common.d.ts index c4d1812a075..e9f5b80c50c 100644 --- a/public/app/headers/common.d.ts +++ b/public/app/headers/common.d.ts @@ -2,3 +2,16 @@ /// /// /// + +// dummy modules +declare module 'config' { + var config : any; + export = config; +} + +declare module 'kbn' { + var kbn : any; + export = kbn; +} + + diff --git a/public/app/headers/moment/moment.d.ts b/public/app/headers/moment/moment.d.ts index 78b09016cb6..e7afe769fdf 100644 --- a/public/app/headers/moment/moment.d.ts +++ b/public/app/headers/moment/moment.d.ts @@ -5,4 +5,3 @@ /// -declare var moment: moment.MomentStatic; diff --git a/public/app/panels/timepicker/custom.html b/public/app/panels/timepicker/custom.html deleted file mode 100644 index c5532ddfb5d..00000000000 --- a/public/app/panels/timepicker/custom.html +++ /dev/null @@ -1,81 +0,0 @@ -
      -
      - - Custom time range -
      - -
      - -
      - - -
      -
      - -
      - -
      - @ - : - : - . - -
      -
      - -
      - - - -
      -
      - @ - : - : - . - -
      -   Right Now -
      -
      - -
      - - Invalid date or range -
      -
      -
      diff --git a/public/app/panels/timepicker/editor.html b/public/app/panels/timepicker/editor.html deleted file mode 100644 index 81e9eccdeeb..00000000000 --- a/public/app/panels/timepicker/editor.html +++ /dev/null @@ -1,55 +0,0 @@ -
      -
      -
      -
      -
        -
      • - Relative times -
        • -
      • - -
        • -
      -
      -
      -
      -
        -
      • - Auto-refresh -
        • -
      • - -
        • -
      -
      -
      - -
      -
        -
      • - Now delay -
        • -
      • - now- -
        • -
      • - -
        • - -
      -
      -
      - -
      - -

      -
      - - For these changes to fully take effect save and reload the dashboard. - -

      -
      diff --git a/public/app/panels/timepicker/module.html b/public/app/panels/timepicker/module.html deleted file mode 100644 index 2978d38ce83..00000000000 --- a/public/app/panels/timepicker/module.html +++ /dev/null @@ -1,57 +0,0 @@ -
      - -
      - -
      -
      diff --git a/public/test/specs/dashboardSrv-specs.js b/public/test/specs/dashboardSrv-specs.js index 4fdb48f4ed1..d3857ad8d82 100644 --- a/public/test/specs/dashboardSrv-specs.js +++ b/public/test/specs/dashboardSrv-specs.js @@ -30,7 +30,6 @@ define([ it('should have default properties', function() { expect(model.rows.length).to.be(0); - expect(model.nav.length).to.be(1); }); }); @@ -199,7 +198,7 @@ define([ }); it('dashboard schema version should be set to latest', function() { - expect(model.schemaVersion).to.be(6); + expect(model.schemaVersion).to.be(7); }); }); diff --git a/tasks/build_task.js b/tasks/build_task.js index ed6387e69ea..0ca987ddf38 100644 --- a/tasks/build_task.js +++ b/tasks/build_task.js @@ -6,6 +6,7 @@ module.exports = function(grunt) { 'jshint:source', 'jshint:tests', 'jscs', + 'tslint', 'clean:release', 'copy:public_to_gen', 'typescript:build', diff --git a/tasks/options/tslint.js b/tasks/options/tslint.js index 18609b33c93..4ffa53beecd 100644 --- a/tasks/options/tslint.js +++ b/tasks/options/tslint.js @@ -15,7 +15,7 @@ module.exports = function(config) { "interface-name": true, "semicolon": true, "use-strict": [true, "check-module", "check-function" ], - "whitespace": [true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type"], + "whitespace": [true, "check-branch", "check-decl", "check-type"], } } } diff --git a/tasks/options/watch.js b/tasks/options/watch.js index f91c0dc92fd..855617b645a 100644 --- a/tasks/options/watch.js +++ b/tasks/options/watch.js @@ -18,7 +18,7 @@ module.exports = function(config) { typescript: { files: ['<%= srcDir %>/app/**/*.ts'], - tasks: ['typescript:build'], + tasks: ['tslint', 'typescript:build'], options: { spawn: false }