tech(templating): refactoring, updated dashboardSrv to typescript

public/app/features/dashboard/all.js

@@ -7,7 +7,7 @@ define([
   './rowCtrl',
   './shareModalCtrl',
   './shareSnapshotCtrl',
-  './dashboardSrv',
+  './dashboard_srv',
   './keybindings',
   './viewStateSrv',
   './timeSrv',

public/app/features/dashboard/dashboard_ctrl.ts

@@ -87,8 +87,6 @@ export class DashboardCtrl {
       };
 
       $scope.templateVariableUpdated = function() {
-        console.log('dynamic update');
-        dynamicDashboardSrv.update($scope.dashboard);
       };
 
       $scope.updateSubmenuVisibility = function() {

public/app/features/dashboard/dashboardSrv.js → public/app/features/dashboard/dashboard_srv.ts

-define([
-  'angular',
-  'jquery',
-  'lodash',
-  'moment',
-],
-function (angular, $, _, moment) {
-  'use strict';
-
-  var module = angular.module('grafana.services');
-
-  module.factory('dashboardSrv', function(contextSrv)  {
-
-    function DashboardModel (data, meta) {
+///<reference path="../../headers/common.d.ts" />
+
+import config from 'app/core/config';
+import angular from 'angular';
+import moment from 'moment';
+import _ from 'lodash';
+import $ from 'jquery';
+
+import coreModule from 'app/core/core_module';
+
+export class DashboardModel {
+  id: any;
+  title: any;
+  autoUpdate: any;
+  description: any;
+  tags: any;
+  style: any;
+  timezone: any;
+  editable: any;
+  hideControls: any;
+  sharedCrosshair: any;
+  rows: any;
+  time: any;
+  timepicker: any;
+  templating: any;
+  annotations: any;
+  refresh: any;
+  snapshot: any;
+  schemaVersion: number;
+  version: number;
+  links: any;
+  gnetId: any;
+  meta: any;
+  contextSrv: any;
+
+  constructor(data, meta, contextSrv) {
     if (!data) {
       data = {};
     }
 
+    this.contextSrv = contextSrv;
     this.id = data.id || null;
     this.title = data.title || 'No Title';
     this.autoUpdate = data.autoUpdate;
@@ -29,21 +52,20 @@ function (angular, $, _, moment) {
     this.rows = data.rows || [];
     this.time = data.time || { from: 'now-6h', to: 'now' };
     this.timepicker = data.timepicker || {};
-      this.templating = this._ensureListExist(data.templating);
-      this.annotations = this._ensureListExist(data.annotations);
+    this.templating = this.ensureListExist(data.templating);
+    this.annotations = this.ensureListExist(data.annotations);
     this.refresh = data.refresh;
     this.snapshot = data.snapshot;
     this.schemaVersion = data.schemaVersion || 0;
     this.version = data.version || 0;
     this.links = data.links || [];
     this.gnetId = data.gnetId || null;
-      this._updateSchema(data);
-      this._initMeta(meta);
-    }
 
-    var p = DashboardModel.prototype;
+    this.updateSchema(data);
+    this.initMeta(meta);
+  }
 
-    p._initMeta = function(meta) {
+  private initMeta(meta) {
     meta = meta || {};
 
     meta.canShare = meta.canShare !== false;
@@ -59,22 +81,22 @@ function (angular, $, _, moment) {
     }
 
     this.meta = meta;
-    };
+  }
 
   // cleans meta data and other non peristent state
-    p.getSaveModelClone = function() {
+  getSaveModelClone() {
     var copy = $.extend(true, {}, this);
     delete copy.meta;
     return copy;
-    };
+  }
 
-    p._ensureListExist = function (data) {
+  private ensureListExist(data) {
     if (!data) { data = {}; }
     if (!data.list) { data.list = []; }
     return data;
-    };
+  }
 
-    p.getNextPanelId = function() {
+  getNextPanelId() {
     var i, j, row, panel, max = 0;
     for (i = 0; i < this.rows.length; i++) {
       row = this.rows[i];
@@ -84,9 +106,9 @@ function (angular, $, _, moment) {
       }
     }
     return max + 1;
-    };
+  }
 
-    p.forEachPanel = function(callback) {
+  forEachPanel(callback) {
     var i, j, row;
     for (i = 0; i < this.rows.length; i++) {
       row = this.rows[i];
@@ -94,9 +116,9 @@ function (angular, $, _, moment) {
         callback(row.panels[j], j, row, i);
       }
     }
-    };
+  }
 
-    p.getPanelById = function(id) {
+  getPanelById(id) {
     for (var i = 0; i < this.rows.length; i++) {
       var row = this.rows[i];
       for (var j = 0; j < row.panels.length; j++) {
@@ -107,15 +129,15 @@ function (angular, $, _, moment) {
       }
     }
     return null;
-    };
+  }
 
-    p.rowSpan = function(row) {
+  rowSpan(row) {
     return _.reduce(row.panels, function(p,v) {
       return p + v.span;
     },0);
   };
 
-    p.addPanel = function(panel, row) {
+  addPanel(panel, row) {
     var rowSpan = this.rowSpan(row);
     var panelCount = row.panels.length;
     var space = (12 - rowSpan) - panel.span;
@@ -126,8 +148,7 @@ function (angular, $, _, moment) {
       if (panelCount === 1) {
         row.panels[0].span = 6;
         panel.span = 6;
-        }
-        else if (panelCount === 2) {
+      } else if (panelCount === 2) {
         row.panels[0].span = 4;
         row.panels[1].span = 4;
         panel.span = 4;
@@ -135,18 +156,18 @@ function (angular, $, _, moment) {
     }
 
     row.panels.push(panel);
-    };
+  }
 
-    p.isSubmenuFeaturesEnabled = function() {
+  isSubmenuFeaturesEnabled() {
     var visableTemplates = _.filter(this.templating.list, function(template) {
       return template.hideVariable === undefined || template.hideVariable === false;
     });
 
     return visableTemplates.length > 0 || this.annotations.list.length > 0 || this.links.length > 0;
-    };
+  }
 
-    p.getPanelInfoById = function(panelId) {
-      var result = {};
+  getPanelInfoById(panelId) {
+    var result: any = {};
     _.each(this.rows, function(row) {
       _.each(row.panels, function(panel, index) {
         if (panel.id === panelId) {
@@ -162,9 +183,9 @@ function (angular, $, _, moment) {
     }
 
     return result;
-    };
+  }
 
-    p.duplicatePanel = function(panel, row) {
+  duplicatePanel(panel, row) {
     var rowIndex = _.indexOf(this.rows, row);
     var newPanel = angular.copy(panel);
     newPanel.id = this.getNextPanelId();
@@ -177,9 +198,9 @@ function (angular, $, _, moment) {
     var currentRow = this.rows[rowIndex];
     currentRow.panels.push(newPanel);
     return newPanel;
-    };
+  }
 
-    p.formatDate = function(date, format) {
+  formatDate(date, format) {
     date = moment.isMoment(date) ? date : moment(date);
     format = format || 'YYYY-MM-DD HH:mm:ss';
     this.timezone = this.getTimezone();
@@ -187,17 +208,17 @@ function (angular, $, _, moment) {
     return this.timezone === 'browser' ?
       moment(date).format(format) :
       moment.utc(date).format(format);
-    };
+  }
 
-    p.getRelativeTime = function(date) {
+  getRelativeTime(date) {
     date = moment.isMoment(date) ? date : moment(date);
 
     return this.timezone === 'browser' ?
       moment(date).fromNow() :
       moment.utc(date).fromNow();
-    };
+  }
 
-    p.getNextQueryLetter = function(panel) {
+  getNextQueryLetter(panel) {
     var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 
     return _.find(letters, function(refId) {
@@ -205,17 +226,17 @@ function (angular, $, _, moment) {
         return other.refId !== refId;
       });
     });
-    };
+  }
 
-    p.isTimezoneUtc = function() {
+  isTimezoneUtc() {
     return this.getTimezone() === 'utc';
-    };
+  }
 
-    p.getTimezone = function() {
-      return this.timezone ? this.timezone : contextSrv.user.timezone;
-    };
+  getTimezone() {
+    return this.timezone ? this.timezone : this.contextSrv.user.timezone;
+  }
 
-    p._updateSchema = function(old) {
+  private updateSchema(old) {
     var i, j, k;
     var oldVersion = this.schemaVersion;
     var panelUpgrades = [];
@@ -233,7 +254,6 @@ function (angular, $, _, moment) {
           this.time = old.services.filter.time;
           this.templating.list = old.services.filter.list || [];
         }
-          delete this.services;
       }
 
       panelUpgrades.push(function(panel) {
@@ -319,7 +339,6 @@ function (angular, $, _, moment) {
     if (oldVersion < 7) {
       if (old.nav && old.nav.length) {
         this.timepicker = old.nav[0];
-          delete this.nav;
       }
 
       // ensure query refIds
@@ -474,7 +493,7 @@ function (angular, $, _, moment) {
           if (panel.type !== 'graph') { return; }
 
           panel.thresholds = [];
-          var t1 = {}, t2 = {};
+          var t1: any = {}, t2: any = {};
 
           if (panel.grid.threshold1 !== null) {
             t1.value = panel.grid.threshold1;
@@ -535,18 +554,29 @@ function (angular, $, _, moment) {
           }
         }
       }
-    };
+    }
+}
 
-    return {
-      create: function(dashboard, meta) {
-        return new DashboardModel(dashboard, meta);
-      },
-      setCurrent: function(dashboard) {
+
+export class DashboardSrv {
+  currentDashboard: any;
+
+  /** @ngInject */
+  constructor(private contextSrv) {
+  }
+
+  create(dashboard, meta) {
+    return new DashboardModel(dashboard, meta, this.contextSrv);
+  }
+
+  setCurrent(dashboard) {
     this.currentDashboard = dashboard;
-      },
-      getCurrent: function() {
+  }
+
+  getCurrent() {
     return this.currentDashboard;
-      },
-    };
-  });
-});
+  }
+}
+
+coreModule.service('dashboardSrv', DashboardSrv);
+

public/test/specs/dashboardSrv-specs.js → public/app/features/dashboard/specs/dashboard_srv_specs.ts

-define([
-  'app/features/dashboard/dashboardSrv'
-], function() {
-  'use strict';
+import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common';
 
-  describe('dashboardSrv', function() {
+import {DashboardSrv} from '../dashboard_srv';
+
+describe('dashboardSrv', function() {
   var _dashboardSrv;
 
-    beforeEach(module('grafana.services'));
-    beforeEach(module(function($provide) {
-      $provide.value('contextSrv', {
+  beforeEach(() => {
+    _dashboardSrv = new DashboardSrv({});
   });
-    }));
-
-    beforeEach(inject(function(dashboardSrv) {
-      _dashboardSrv = dashboardSrv;
-    }));
 
   describe('when creating new dashboard with defaults only', function() {
     var model;
@@ -383,6 +376,4 @@ define([
       expect(dashboard.formatDate(1234567890007,'YYYY-MM-DD HH:mm:ss.SSS')).to.be('2009-02-13 23:31:30.007');
     });
   });
-
-  });
 });

public/app/features/dashboard/specs/dynamic_dashboard_srv_specs.ts

 import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common';
 
-import 'app/features/dashboard/dashboardSrv';
+import {DashboardSrv} from '../dashboard_srv';
 import {DynamicDashboardSrv} from '../dynamic_dashboard_srv';
 
 function dynamicDashScenario(desc, func)  {
@@ -10,6 +10,7 @@ function dynamicDashScenario(desc, func)  {
 
     ctx.setup = function (setupFunc) {
 
+      beforeEach(angularMocks.module('grafana.core'));
       beforeEach(angularMocks.module('grafana.services'));
       beforeEach(angularMocks.module(function($provide) {
         $provide.value('contextSrv', {

public/test/specs/unsavedChangesSrv-specs.js

 define([
   'app/features/dashboard/unsavedChangesSrv',
-  'app/features/dashboard/dashboardSrv'
+  'app/features/dashboard/dashboard_srv'
 ], function() {
   'use strict';