diff --git a/CHANGELOG.md b/CHANGELOG.md
index aed25afb02e..41b07e4ad7a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 # 5.3.0 (unreleased)
 
+* **Dashboard**: TV & Kiosk mode changes, new cycle view mode button in dashboard toolbar [#13025](https://github.com/grafana/grafana/pull/13025)
 * **OAuth**: Gitlab OAuth with support for filter by groups [#5623](https://github.com/grafana/grafana/issues/5623), thx [@BenoitKnecht](https://github.com/BenoitKnecht)
 * **Dataproxy**: Pass configured/auth headers to a Datasource [#10971](https://github.com/grafana/grafana/issues/10971), thx [@mrsiano](https://github.com/mrsiano)
 * **Cleanup**: Make temp file time to live configurable [#11607](https://github.com/grafana/grafana/issues/11607), thx [@xapon](https://github.com/xapon)
@@ -62,6 +63,8 @@ om/grafana/grafana/issues/12668)
 ### Breaking changes
 
 * Postgres datasource no longer automatically adds time column alias when using the $__timeGroup alias. However, there's code in place which should make this change backward compatible and shouldn't create any issues.
+* Kiosk mode now also hides submenu (variables)
+* ?inactive url parameter no longer supported, replaced with kiosk=tv url parameter
 
 ### New experimental features
 
diff --git a/Gopkg.lock b/Gopkg.lock
index 6f08e208ecd..bd247d691dd 100644
--- a/Gopkg.lock
+++ b/Gopkg.lock
@@ -427,12 +427,6 @@
   revision = "1744e2970ca51c86172c8190fadad617561ed6e7"
   version = "v1.0.0"
 
-[[projects]]
-  branch = "master"
-  name = "github.com/shurcooL/sanitized_anchor_name"
-  packages = ["."]
-  revision = "86672fcb3f950f35f2e675df2240550f2a50762f"
-
 [[projects]]
   name = "github.com/smartystreets/assertions"
   packages = [
@@ -679,6 +673,6 @@
 [solve-meta]
   analyzer-name = "dep"
   analyzer-version = 1
-  inputs-digest = "cb8e7fd81f23ec987fc4d5dd9d31ae0f1164bc2f30cbea2fe86e0d97dd945beb"
+  inputs-digest = "81a37e747b875cf870c1b9486fa3147e704dea7db8ba86f7cb942d3ddc01d3e3"
   solver-name = "gps-cdcl"
   solver-version = 1
diff --git a/package.json b/package.json
index 9cc47ff71b8..87ba147fb4d 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,7 @@
     "build": "grunt build",
     "test": "grunt test",
     "test:coverage": "grunt test --coverage=true",
-    "lint": "tslint -c tslint.json --project tsconfig.json --type-check",
+    "lint": "tslint -c tslint.json --project tsconfig.json",
     "jest": "jest --notify --watch",
     "api-tests": "jest --notify --watch --config=tests/api/jest.js",
     "precommit": "lint-staged && grunt precommit"
diff --git a/pkg/cmd/grafana-cli/utils/grafana_path.go b/pkg/cmd/grafana-cli/utils/grafana_path.go
index afb622bbb93..5f5c944f52b 100644
--- a/pkg/cmd/grafana-cli/utils/grafana_path.go
+++ b/pkg/cmd/grafana-cli/utils/grafana_path.go
@@ -42,6 +42,8 @@ func returnOsDefault(currentOs string) string {
 		return "/usr/local/var/lib/grafana/plugins"
 	case "freebsd":
 		return "/var/db/grafana/plugins"
+	case "openbsd":
+		return "/var/grafana/plugins"
 	default: //"linux"
 		return "/var/lib/grafana/plugins"
 	}
diff --git a/public/app/containers/Explore/Explore.tsx b/public/app/containers/Explore/Explore.tsx
index 92712709858..16175747a06 100644
--- a/public/app/containers/Explore/Explore.tsx
+++ b/public/app/containers/Explore/Explore.tsx
@@ -173,6 +173,12 @@ export class Explore extends React.Component<any, ExploreState> {
       datasource.init();
     }
 
+    // Keep queries but reset edit state
+    const nextQueries = this.state.queries.map(q => ({
+      ...q,
+      edited: false,
+    }));
+
     this.setState(
       {
         datasource,
@@ -182,6 +188,7 @@ export class Explore extends React.Component<any, ExploreState> {
         supportsLogs,
         supportsTable,
         datasourceLoading: false,
+        queries: nextQueries,
       },
       () => datasourceError === null && this.onSubmit()
     );
diff --git a/public/app/containers/Explore/utils/debounce.ts b/public/app/containers/Explore/utils/debounce.ts
index 9f2bd35e116..5fda5a05f5f 100644
--- a/public/app/containers/Explore/utils/debounce.ts
+++ b/public/app/containers/Explore/utils/debounce.ts
@@ -1,7 +1,7 @@
 // Based on underscore.js debounce()
 export default function debounce(func, wait) {
   let timeout;
-  return function() {
+  return function(this: any) {
     const context = this;
     const args = arguments;
     const later = function() {
diff --git a/public/app/containers/Explore/utils/dom.ts b/public/app/containers/Explore/utils/dom.ts
index 6ba21b54c83..6ab3de39923 100644
--- a/public/app/containers/Explore/utils/dom.ts
+++ b/public/app/containers/Explore/utils/dom.ts
@@ -1,6 +1,6 @@
 // Node.closest() polyfill
 if ('Element' in window && !Element.prototype.closest) {
-  Element.prototype.closest = function(s) {
+  Element.prototype.closest = function(this: any, s) {
     const matches = (this.document || this.ownerDocument).querySelectorAll(s);
     let el = this;
     let i;
diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index a4439509f8e..e7295646172 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -2,7 +2,6 @@ import { react2AngularDirective } from 'app/core/utils/react2angular';
 import { PasswordStrength } from './components/PasswordStrength';
 import PageHeader from './components/PageHeader/PageHeader';
 import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
-import LoginBackground from './components/Login/LoginBackground';
 import { SearchResult } from './components/search/SearchResult';
 import { TagFilter } from './components/TagFilter/TagFilter';
 import DashboardPermissions from './components/Permissions/DashboardPermissions';
@@ -11,7 +10,6 @@ export function registerAngularDirectives() {
   react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
   react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']);
   react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);
-  react2AngularDirective('loginBackground', LoginBackground, []);
   react2AngularDirective('searchResult', SearchResult, []);
   react2AngularDirective('tagFilter', TagFilter, [
     'tags',
diff --git a/public/app/core/components/Login/LoginBackground.tsx b/public/app/core/components/Login/LoginBackground.tsx
deleted file mode 100644
index 83e228ab6e0..00000000000
--- a/public/app/core/components/Login/LoginBackground.tsx
+++ /dev/null
@@ -1,1240 +0,0 @@
-import React, { Component } from 'react';
-
-const xCount = 50;
-const yCount = 50;
-
-function Cell({ x, y, flipIndex }) {
-  const index = (y * xCount) + x;
-  const bgColor1 = getColor(x, y);
-  return (
-    <div className={`login-bg__item ${flipIndex === index ? 'login-bg-flip' : ''}`} key={index} style={{background: bgColor1}} />
-  );
-}
-
-function getRandomInt(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
-}
-
-export default class LoginBackground extends Component<any, any> {
-  cancelInterval: any;
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      flipIndex: null,
-    };
-
-    this.flipElements = this.flipElements.bind(this);
-  }
-
-  flipElements() {
-    const elementIndexToFlip = getRandomInt(0, (xCount * yCount) - 1);
-    this.setState(prevState => {
-      return {
-        ...prevState,
-        flipIndex: elementIndexToFlip,
-      };
-    });
-  }
-
-  componentWillMount() {
-    this.cancelInterval = setInterval(this.flipElements, 3000);
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.cancelInterval);
-  }
-
-  render() {
-    console.log('re-render!', this.state.flipIndex);
-
-    return (
-      <div className="login-bg">
-        {Array.from(Array(yCount)).map((el, y) => {
-          return (
-            <div className="login-bg__row">
-              {Array.from(Array(xCount)).map((el2, x) => {
-                return (
-                  <Cell y={y} x={x} flipIndex={this.state.flipIndex} />
-                );
-              })}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-}
-
-function getColor(x, y) {
-  const colors = [
-    '#14161A',
-    '#111920',
-    '#121E27',
-    '#13212B',
-    '#122029',
-    '#101C24',
-    '#0F1B23',
-    '#0F1B22',
-    '#111C24',
-    '#101A22',
-    '#101A21',
-    '#111D25',
-    '#101E27',
-    '#101D26',
-    '#101B23',
-    '#11191E',
-    '#131519',
-    '#131518',
-    '#101B21',
-    '#121F29',
-    '#10232D',
-    '#11212B',
-    '#0E1C25',
-    '#0E1C24',
-    '#111F29',
-    '#11222B',
-    '#101E28',
-    '#102028',
-    '#111F2A',
-    '#11202A',
-    '#11191F',
-    '#121417',
-    '#12191D',
-    '#101D25',
-    '#11212C',
-    '#10242F',
-    '#0F212B',
-    '#0F1E27',
-    '#0F1D26',
-    '#0F1F29',
-    '#0F2029',
-    '#11232E',
-    '#10212B',
-    '#10222C',
-    '#0F202A',
-    '#112530',
-    '#10252F',
-    '#0F242E',
-    '#10222D',
-    '#10202A',
-    '#0F1C24',
-    '#0F1E28',
-    '#0F212A',
-    '#0F222B',
-    '#14171A',
-    '#0F1A20',
-    '#0F1C25',
-    '#10232E',
-    '#0E202A',
-    '#0E1E27',
-    '#0E1D26',
-    '#0F202B',
-    '#11232F',
-    '#102632',
-    '#102530',
-    '#122430',
-    '#0F1B21',
-    '#0F212C',
-    '#0E1F29',
-    '#112531',
-    '#0F2734',
-    '#0F2835',
-    '#0D1B23',
-    '#0F1A21',
-    '#0F1A23',
-    '#0F1D27',
-    '#0F222D',
-    '#102430',
-    '#102531',
-    '#10222E',
-    '#0F232D',
-    '#0E2633',
-    '#0E2734',
-    '#0F2834',
-    '#0E2835',
-    '#0F2633',
-    '#0F2532',
-    '#0E1A22',
-    '#0D1C24',
-    '#0F2735',
-    '#0F2937',
-    '#102A38',
-    '#112938',
-    '#102A39',
-    '#0F2A38',
-    '#102836',
-    '#0E1B23',
-    '#0F2938',
-    '#102A3A',
-    '#102D3D',
-    '#0F3040',
-    '#102D3E',
-    '#0F2E3E',
-    '#112C3B',
-    '#102B3B',
-    '#102B3A',
-    '#102D3C',
-    '#0F2A39',
-    '#0F2634',
-    '#0E2029',
-    '#0E1A21',
-    '#0F2B39',
-    '#0F2D3D',
-    '#0F2F40',
-    '#0E3142',
-    '#113445',
-    '#122431',
-    '#102E3E',
-    '#0F3345',
-    '#0E2F40',
-    '#0F3143',
-    '#102C3C',
-    '#0F2B3A',
-    '#0F1F28',
-    '#0F3344',
-    '#113548',
-    '#113C51',
-    '#144258',
-    '#103A4E',
-    '#103A4F',
-    '#103547',
-    '#10364A',
-    '#103649',
-    '#0F3448',
-    '#102C3A',
-    '#0F2836',
-    '#103447',
-    '#0F384C',
-    '#123F55',
-    '#15445A',
-    '#133F55',
-    '#103B50',
-    '#113E54',
-    '#103446',
-    '#0F3A4F',
-    '#0F3548',
-    '#0D3142',
-    '#102C3B',
-    '#0E2937',
-    '#103D52',
-    '#0E3544',
-    '#184C65',
-    '#154760',
-    '#14435B',
-    '#15465F',
-    '#124159',
-    '#0F3D53',
-    '#103C51',
-    '#0F3447',
-    '#0E3243',
-    '#113143',
-    '#113D53',
-    '#184B64',
-    '#184D67',
-    '#184C66',
-    '#174A63',
-    '#15455C',
-    '#13425A',
-    '#14445A',
-    '#10384C',
-    '#0E3446',
-    '#10181E',
-    '#103243',
-    '#0F384D',
-    '#14455C',
-    '#164761',
-    '#164C66',
-    '#1D627D',
-    '#12425A',
-    '#164A63',
-    '#14465D',
-    '#13435A',
-    '#0A2B38',
-    '#0F3446',
-    '#0D2F40',
-    '#0D2F3F',
-    '#0F2531',
-    '#102937',
-    '#10384B',
-    '#0F3649',
-    '#184E68',
-    '#1A5472',
-    '#184D68',
-    '#154A63',
-    '#19506B',
-    '#19536F',
-    '#1A4F69',
-    '#144760',
-    '#114058',
-    '#0E3A4F',
-    '#0E3547',
-    '#0C3042',
-    '#0E1B24',
-    '#11222C',
-    '#154C65',
-    '#1A5776',
-    '#1B5675',
-    '#113847',
-    '#1A5371',
-    '#194E68',
-    '#0E2D3D',
-    '#112D3B',
-    '#113D52',
-    '#18516D',
-    '#1A5979',
-    '#1B5878',
-    '#19526E',
-    '#1A526E',
-    '#13435B',
-    '#0F3E55',
-    '#0B374C',
-    '#0E3448',
-    '#0D2E3F',
-    '#0F2B3B',
-    '#112E3E',
-    '#113B50',
-    '#15465D',
-    '#1A526F',
-    '#1E5E81',
-    '#1D5B7B',
-    '#1A5777',
-    '#154456',
-    '#113949',
-    '#0D394E',
-    '#0F3549',
-    '#0F2C3B',
-    '#0E2733',
-    '#112E3D',
-    '#123D52',
-    '#10394C',
-    '#1B5674',
-    '#1A5370',
-    '#144861',
-    '#104058',
-    '#104159',
-    '#0E384C',
-    '#0D2D3D',
-    '#0E2533',
-    '#112C3A',
-    '#1B5979',
-    '#1B5C7D',
-    '#1A5675',
-    '#104057',
-    '#0F3C51',
-    '#11425A',
-    '#0E394D',
-    '#0C3243',
-    '#0E2735',
-    '#112F3E',
-    '#134158',
-    '#1D5E7F',
-    '#1D6083',
-    '#1C5877',
-    '#1A5573',
-    '#184D66',
-    '#164962',
-    '#0F3D54',
-    '#0E3D53',
-    '#0E3447',
-    '#0F2A3A',
-    '#0F2936',
-    '#101F28',
-    '#103040',
-    '#124056',
-    '#164E69',
-    '#144B64',
-    '#164D66',
-    '#0F3E54',
-    '#0E3B51',
-    '#0D3346',
-    '#0E1F27',
-    '#124158',
-    '#164961',
-    '#0E3C52',
-    '#19506C',
-    '#0F2C3C',
-    '#0E3244',
-    '#0E2A39',
-    '#0E2938',
-    '#113040',
-    '#134057',
-    '#1A5471',
-    '#154B63',
-    '#1C597A',
-    '#164760',
-    '#10374B',
-    '#0E374C',
-    '#0E384D',
-    '#11242F',
-    '#10394D',
-    '#18526E',
-    '#154B65',
-    '#103F55',
-    '#0D3345',
-    '#102532',
-    '#102029',
-    '#113142',
-    '#1B5973',
-    '#1A516B',
-    '#1C5979',
-    '#1C5A7A',
-    '#184A65',
-    '#164C65',
-    '#0D3041',
-    '#123142',
-    '#123E54',
-    '#1B5877',
-    '#1A5574',
-    '#1C5878',
-    '#13435C',
-    '#0F374B',
-    '#0C3143',
-    '#112F40',
-    '#123C51',
-    '#174E68',
-    '#1D5C7D',
-    '#14465F',
-    '#0F3F56',
-    '#0B3041',
-    '#123243',
-    '#15435B',
-    '#19516D',
-    '#1D5D7E',
-    '#1C5C7D',
-    '#184F69',
-    '#11374B',
-    '#103E54',
-    '#0E3143',
-    '#0F2D3C',
-    '#11242E',
-    '#133445',
-    '#1A5674',
-    '#1D6184',
-    '#1F658B',
-    '#0D3A50',
-    '#0C374B',
-    '#154862',
-    '#164B64',
-    '#154961',
-    '#0D384D',
-    '#102631',
-    '#113242',
-    '#134259',
-    '#185270',
-    '#1D6386',
-    '#1E678C',
-    '#1C5978',
-    '#0D3549',
-    '#0F2632',
-    '#184961',
-    '#1D5E80',
-    '#1E6488',
-    '#1F678D',
-    '#1E5B7C',
-    '#164862',
-    '#19526D',
-    '#113C52',
-    '#15455E',
-    '#0F2F3F',
-    '#144259',
-    '#194D67',
-    '#1D6991',
-    '#195777',
-    '#19516C',
-    '#103F56',
-    '#144660',
-    '#0D2E3E',
-    '#10212A',
-    '#113141',
-    '#16455C',
-    '#1D5B7C',
-    '#1F6589',
-    '#1E668C',
-    '#1E5F81',
-    '#0F3B50',
-    '#0D3244',
-    '#164A64',
-    '#184E69',
-    '#0E364A',
-    '#0E2E3E',
-    '#10222B',
-    '#19475E',
-    '#1B5A7B',
-    '#1E5D7F',
-    '#1E678D',
-    '#1E6184',
-    '#19506A',
-    '#1B5370',
-    '#1B5573',
-    '#0E3041',
-    '#122E3E',
-    '#16455B',
-    '#195370',
-    '#1D6489',
-    '#1D6B93',
-    '#164A65',
-    '#154A64',
-    '#1A5572',
-    '#1D6082',
-    '#1F6286',
-    '#1D6C94',
-    '#1E709A',
-    '#174A65',
-    '#1B526F',
-    '#1E6589',
-    '#1D6384',
-    '#0D3143',
-    '#0E2F3F',
-    '#174760',
-    '#1F6487',
-    '#1D668C',
-    '#0D2F41',
-    '#103B4F',
-    '#1C5C7E',
-    '#1F688F',
-    '#1C5B7C',
-    '#164D68',
-    '#1D6285',
-    '#0D364A',
-    '#1D5A7A',
-    '#1E6990',
-    '#1D6488',
-    '#18516B',
-    '#1A506B',
-    '#0E3B50',
-    '#0E3548',
-    '#124259',
-    '#13455C',
-    '#14485F',
-    '#1E5C7D',
-    '#122D3C',
-    '#1E6E98',
-    '#1E6A91',
-    '#1E6286',
-    '#1E6C95',
-    '#1D6990',
-    '#101F29',
-    '#174A62',
-    '#10394E',
-    '#1D6D96',
-    '#1E688E',
-    '#1D6E97',
-    '#1E6C94',
-    '#0E394E',
-    '#112B39',
-    '#195270',
-    '#1E668B',
-    '#1E6386',
-    '#1D6385',
-    '#0C3142',
-    '#1E6083',
-    '#1E729C',
-    '#1F709A',
-    '#1E6F98',
-    '#1D5F81',
-    '#1F688D',
-    '#1C6488',
-    '#1D6588',
-    '#1C6A93',
-    '#1E658B',
-    '#1F6C95',
-    '#0D3C52',
-    '#1C6385',
-    '#1E5F82',
-    '#0E3D54',
-    '#0F3244',
-    '#18485F',
-    '#1E6991',
-    '#1C5B7B',
-    '#1F6082',
-    '#0F3346',
-    '#18536F',
-    '#114056',
-    '#1D6B92',
-    '#1B5776',
-    '#0F3C52',
-    '#1E6890',
-    '#1F688E',
-    '#0C394E',
-    '#0F1D25',
-    '#1F6386',
-    '#1E688D',
-    '#1F6488',
-    '#20668C',
-    '#1D5978',
-    '#0F3D52',
-    '#0F1E26',
-    '#13465F',
-    '#0D374C',
-    '#1B5C7C',
-    '#0E1A23',
-    '#0F374A',
-    '#1B5574',
-    '#0F394C',
-    '#0E2A38',
-    '#102A37',
-    '#18506B',
-    '#1E5A7A',
-    '#0F3245',
-    '#0E2E3F',
-    '#1E678E',
-    '#1C5D7E',
-    '#1A5A7A',
-    '#0E2837',
-    '#102733',
-    '#0F3B51',
-    '#15475E',
-    '#1E6B93',
-    '#1E648A',
-    '#194961',
-    '#0F3A4E',
-    '#0E1D25',
-    '#194F69',
-    '#103345',
-    '#0F394D',
-    '#102B39',
-    '#103E55',
-    '#1B5572',
-    '#164861',
-    '#174861',
-    '#113B4F',
-    '#102936',
-    '#0F3041',
-    '#174961',
-    '#113E53',
-    '#134056',
-    '#124057',
-    '#194B63',
-    '#0E364B',
-    '#15445B',
-    '#16475E',
-    '#102F3F',
-    '#16485F',
-    '#0F2E3D',
-    '#101920',
-    '#12222C',
-    '#122C3B',
-    '#144157',
-    '#123B50',
-    '#16465D',
-    '#184960',
-    '#112B3A',
-    '#12232F',
-    '#132430',
-    '#113344',
-    '#11394C',
-    '#113649',
-    '#11364A',
-    '#133F56',
-    '#121D25',
-    '#112733',
-    '#112A38',
-    '#0F1F2A',
-    '#113447',
-    '#113A4E',
-    '#0F222C',
-    '#13222B',
-    '#112836',
-    '#102F3E',
-    '#113243',
-    '#123445',
-    '#12374B',
-    '#121E26',
-    '#122531',
-    '#11303F',
-    '#0D1D25',
-    '#102835',
-    '#112834',
-    '#101C23',
-    '#111C23',
-    '#12212B',
-    '#11222D',
-    '#0E1B22',
-    '#0E1D27',
-    '#121C22',
-    '#12202A',
-    '#101A20',
-    '#13191E',
-    '#111E28',
-    '#11212D',
-    '#0F1B24',
-    '#0F1C23',
-    '#13181D',
-    '#15171A',
-    '#121D23',
-    '#121F27',
-    '#111E27',
-    '#101B22',
-    '#121F28',
-    '#111E26',
-    '#101D24',
-    '#111C22',
-    '#12161E',
-    '#101925',
-    '#121E2D',
-    '#112033',
-    '#111E2F',
-    '#0F1B29',
-    '#0F1A28',
-    '#101B2A',
-    '#0E1A27',
-    '#101C2B',
-    '#111D2D',
-    '#111D2B',
-    '#0F1B28',
-    '#101923',
-    '#13161D',
-    '#13161C',
-    '#0F1A26',
-    '#101E2F',
-    '#112235',
-    '#102031',
-    '#0F1B2A',
-    '#112031',
-    '#102032',
-    '#101D2E',
-    '#121F2F',
-    '#112133',
-    '#101E30',
-    '#101F30',
-    '#102336',
-    '#101B2C',
-    '#0F1C2B',
-    '#111E2E',
-    '#0F2134',
-    '#102236',
-    '#0F2133',
-    '#101F31',
-    '#0F2438',
-    '#102337',
-    '#102235',
-    '#102133',
-    '#11171E',
-    '#101F2F',
-    '#102030',
-    '#102234',
-    '#102132',
-    '#12181F',
-    '#0F1A25',
-    '#0F2135',
-    '#0F1F30',
-    '#0F1C2D',
-    '#101D2C',
-    '#0F2033',
-    '#0E2338',
-    '#0F2237',
-    '#0F2236',
-    '#0B243B',
-    '#0D2338',
-    '#0E1A26',
-    '#0F1D2E',
-    '#0F2032',
-    '#0D2339',
-    '#0B253F',
-    '#0A253F',
-    '#0A253E',
-    '#0C2439',
-    '#0E1925',
-    '#0E2135',
-    '#0F2235',
-    '#0A243A',
-    '#08253E',
-    '#09253E',
-    '#0A263F',
-    '#0A243C',
-    '#0B233B',
-    '#0E1A28',
-    '#0D1A26',
-    '#09253F',
-    '#0A2743',
-    '#0B2844',
-    '#0B2641',
-    '#0A2744',
-    '#0A2844',
-    '#0B2743',
-    '#092745',
-    '#0F2337',
-    '#101D2D',
-    '#092743',
-    '#092846',
-    '#0E2B4C',
-    '#102E4F',
-    '#0E2C4D',
-    '#0B2A49',
-    '#082947',
-    '#0D2B4B',
-    '#0C2A4A',
-    '#092946',
-    '#082845',
-    '#0C2B4B',
-    '#0F2D4E',
-    '#103051',
-    '#133257',
-    '#0E2D4E',
-    '#143156',
-    '#112F51',
-    '#0B243A',
-    '#082744',
-    '#092844',
-    '#123054',
-    '#143359',
-    '#173A64',
-    '#183F6E',
-    '#173F6D',
-    '#153961',
-    '#163962',
-    '#133358',
-    '#15345B',
-    '#14345A',
-    '#102F50',
-    '#0A2948',
-    '#082844',
-    '#092641',
-    '#16375F',
-    '#193C69',
-    '#174170',
-    '#173E6B',
-    '#163A63',
-    '#173D69',
-    '#183D6A',
-    '#15365E',
-    '#112E50',
-    '#0A2A49',
-    '#082743',
-    '#0E1927',
-    '#173C68',
-    '#13487E',
-    '#164476',
-    '#174375',
-    '#193F6F',
-    '#173B66',
-    '#163B65',
-    '#082A48',
-    '#0A2641',
-    '#09243C',
-    '#174171',
-    '#14477C',
-    '#124980',
-    '#14487F',
-    '#174374',
-    '#15467B',
-    '#184172',
-    '#17406F',
-    '#184070',
-    '#163C67',
-    '#16355D',
-    '#123256',
-    '#0E1B29',
-    '#0F1923',
-    '#113052',
-    '#184274',
-    '#164579',
-    '#13477C',
-    '#193E6D',
-    '#0A243E',
-    '#0B233A',
-    '#0D1A29',
-    '#0B2742',
-    '#17365E',
-    '#163860',
-    '#124A84',
-    '#095191',
-    '#114A83',
-    '#0D4D8A',
-    '#0C4D8C',
-    '#104B85',
-    '#15477E',
-    '#174477',
-    '#183862',
-    '#0A233A',
-    '#092947',
-    '#09243D',
-    '#173963',
-    '#194173',
-    '#085396',
-    '#085394',
-    '#114B87',
-    '#144983',
-    '#094F8E',
-    '#075090',
-    '#0F4C89',
-    '#215287',
-    '#0E1A29',
-    '#184376',
-    '#0C4D8B',
-    '#07549A',
-    '#0A4E8D',
-    '#0F4C88',
-    '#0A4E8C',
-    '#174273',
-    '#193C6A',
-    '#0B2948',
-    '#0B2C4B',
-    '#0C4E8D',
-    '#1259A4',
-    '#0C579E',
-    '#0D4D8B',
-    '#095397',
-    '#085397',
-    '#085295',
-    '#144880',
-    '#173861',
-    '#15335A',
-    '#0F2C4D',
-    '#0C2949',
-    '#0B4E8D',
-    '#08559C',
-    '#07508F',
-    '#154578',
-    '#17365F',
-    '#122F53',
-    '#111D2C',
-    '#092A48',
-    '#08559D',
-    '#08559E',
-    '#0C56A1',
-    '#164271',
-    '#163E6A',
-    '#194071',
-    '#082642',
-    '#0F1E30',
-    '#0D2D4D',
-    '#114C87',
-    '#0E59A3',
-    '#135BA6',
-    '#085498',
-    '#085497',
-    '#095192',
-    '#0E4D8B',
-    '#0C4E8A',
-    '#134982',
-    '#17457B',
-    '#121F2E',
-    '#183E6C',
-    '#153E69',
-    '#07508E',
-    '#173F6C',
-    '#193D6B',
-    '#112D4F',
-    '#0A243B',
-    '#072946',
-    '#111E2D',
-    '#0B2740',
-    '#10497F',
-    '#17406E',
-    '#084F8D',
-    '#104A80',
-    '#0E2E4F',
-    '#143358',
-    '#16365D',
-    '#0A2742',
-    '#13477B',
-    '#154474',
-    '#104C86',
-    '#095291',
-    '#0B4F8E',
-    '#114A80',
-    '#095090',
-    '#075296',
-    '#163760',
-    '#2D6DB5',
-    '#0C2843',
-    '#0C233A',
-    '#153A62',
-    '#14467A',
-    '#075498',
-    '#085293',
-    '#09263F',
-    '#122030',
-    '#09559D',
-    '#0F4B83',
-    '#08549A',
-    '#14375D',
-    '#085499',
-    '#075499',
-    '#0A243D',
-    '#143E68',
-    '#10497E',
-    '#074F8E',
-    '#085496',
-    '#0C58A3',
-    '#065499',
-    '#085190',
-    '#0A2B4A',
-    '#104C88',
-    '#0D4F8E',
-    '#0F58A2',
-    '#0B569B',
-    '#0D58A1',
-    '#134A81',
-    '#09559C',
-    '#0A5293',
-    '#114B86',
-    '#0D2C4C',
-    '#103255',
-    '#16457A',
-    '#074F8C',
-    '#07559C',
-    '#185DA9',
-    '#1D61AD',
-    '#175CA8',
-    '#16406D',
-    '#153C65',
-    '#0E243A',
-    '#144679',
-    '#085192',
-    '#1A5EAC',
-    '#1D61AE',
-    '#11497F',
-    '#12487E',
-    '#0C243C',
-    '#123155',
-    '#0F59A3',
-    '#1B5FAB',
-    '#1E61AD',
-    '#145CA4',
-    '#0E599F',
-    '#11497E',
-    '#094F8D',
-    '#15345A',
-    '#134A85',
-    '#165CA8',
-    '#2263AF',
-    '#124466',
-    '#0A518F',
-    '#08569D',
-    '#16416F',
-    '#0B2B4A',
-    '#124A83',
-    '#0C57A2',
-    '#1E60AD',
-    '#1E62AE',
-    '#165DA8',
-    '#1059A4',
-    '#15406C',
-    '#0A4F8E',
-    '#12365A',
-    '#0A5191',
-    '#16355C',
-    '#1C5EAB',
-    '#155CA7',
-    '#085292',
-    '#174478',
-    '#153258',
-    '#111F2F',
-    '#174272',
-    '#1159A5',
-    '#1C5EAC',
-    '#2F74BB',
-    '#0C58A2',
-    '#0D59A3',
-    '#14477D',
-    '#132F53',
-    '#155BA6',
-    '#195FAA',
-    '#2366B1',
-    '#2967B2',
-    '#14477E',
-    '#1B5EAB',
-    '#175DA8',
-    '#0F4C86',
-    '#065090',
-    '#1C5FAC',
-    '#185CA8',
-    '#0D58A3',
-    '#0C4E8C',
-    '#134981',
-    '#14416D',
-    '#0F5AA5',
-    '#1F63AF',
-    '#114B88',
-    '#09508E',
-    '#0A569D',
-    '#195DAA',
-    '#0F1D2F',
-    '#1059A2',
-    '#0E599E',
-    '#2063AF',
-    '#1F63AE',
-    '#1A5EAA',
-    '#0C57A0',
-    '#195EAA',
-    '#1A5EA9',
-    '#0E4E8A',
-    '#12487D',
-    '#185DAA',
-    '#175EAA',
-    '#0A508E',
-    '#1559A6',
-    '#0E58A3',
-    '#095399',
-    '#0B4E8B',
-    '#0B569F',
-    '#0C57A1',
-    '#2967B1',
-    '#2365B0',
-    '#2163AE',
-    '#1A5DAA',
-    '#195EAB',
-    '#1E5FAC',
-    '#2564AF',
-    '#2767B1',
-    '#2766B1',
-    '#0D5A9F',
-    '#2062AE',
-    '#1F61AD',
-    '#195FAB',
-    '#0D4E8D',
-    '#173760',
-    '#111D2E',
-    '#09518F',
-    '#1A5FAC',
-    '#135BA7',
-    '#085291',
-    '#183761',
-    '#0B2845',
-    '#113457',
-    '#075393',
-    '#185EA9',
-    '#2B69B3',
-    '#2A67B2',
-    '#2867B1',
-    '#155DA8',
-    '#135CA6',
-    '#135AA5',
-    '#114980',
-    '#2566B1',
-    '#2064AF',
-    '#2364AF',
-    '#13365B',
-    '#154475',
-    '#08549B',
-    '#164373',
-    '#085392',
-    '#144576',
-    '#12497E',
-    '#0E5392',
-    '#135BA3',
-    '#0C5395',
-    '#0C5291',
-    '#0E579C',
-    '#0E5290',
-    '#134C83',
-    '#2163AC',
-    '#195CA6',
-    '#0D4E8C',
-    '#082945',
-    '#133256',
-    '#0E2F50',
-    '#105AA6',
-    '#134677',
-    '#144475',
-    '#145BA7',
-    '#154270',
-    '#1D60AD',
-    '#09569B',
-    '#09243E',
-    '#134A86',
-    '#0E59A4',
-    '#0A4E8B',
-    '#0E4B83',
-    '#1D5EAC',
-    '#101C2A',
-    '#134A84',
-    '#0E518F',
-    '#145CA7',
-    '#0E5699',
-    '#145BA5',
-    '#095292',
-    '#15416E',
-    '#153D67',
-    '#153F6B',
-    '#125AA5',
-    '#16406E',
-    '#0E1B27',
-    '#0D4F8C',
-    '#0F58A3',
-    '#114A82',
-    '#09569C',
-    '#0C2339',
-    '#0E1B28',
-    '#0D59A4',
-    '#07559D',
-    '#08569E',
-    '#095190',
-    '#0B253E',
-    '#0C2B49',
-    '#2264AF',
-    '#09549A',
-    '#09569F',
-    '#163D68',
-    '#0C263F',
-    '#143960',
-    '#183A65',
-    '#075496',
-    '#0C579F',
-    '#085191',
-    '#102438',
-    '#075295',
-    '#082946',
-    '#102437',
-    '#0C2642',
-    '#101C29',
-    '#0C253E',
-    '#15355C',
-    '#0B2E4D',
-    '#0F3253',
-    '#154577',
-    '#16335B',
-    '#0F1925',
-    '#0C2742',
-    '#0B2946',
-    '#0E2C4B',
-    '#0E2B48',
-    '#0E2237',
-    '#102237',
-    '#0B253D',
-    '#0A2946',
-    '#0C2841',
-    '#0D2A47',
-    '#0C2C4A',
-    '#08253F',
-    '#08243D',
-    '#111C2B',
-    '#0C2844',
-    '#0C2945',
-    '#0D243A',
-    '#122134',
-    '#0B2642',
-    '#113154',
-    '#113255',
-    '#0A2642',
-    '#0A2945',
-    '#0B263F',
-    '#0D2E4E',
-    '#0F1E2E',
-    '#0A2845',
-    '#0D2439',
-    '#0F1A29',
-    '#101C2E',
-    '#111923',
-    '#13181F',
-    '#111D2F',
-    '#111F30',
-    '#121E30',
-    '#121E2E',
-    '#101B27',
-    '#101A27',
-    '#13171F',
-  ];
-
-  // let randX = getRandomInt(0, x);
-  // let randY = getRandomInt(0, y);
-  // let randIndex = randY * xCount + randX;
-
-  return colors[(y*xCount + x) % colors.length];
-}
diff --git a/public/app/core/components/form_dropdown/form_dropdown.ts b/public/app/core/components/form_dropdown/form_dropdown.ts
index 4604e1d7838..6e863e1cb5d 100644
--- a/public/app/core/components/form_dropdown/form_dropdown.ts
+++ b/public/app/core/components/form_dropdown/form_dropdown.ts
@@ -1,8 +1,8 @@
 import _ from 'lodash';
 import coreModule from '../../core_module';
 
-function typeaheadMatcher(item) {
-  var str = this.query;
+function typeaheadMatcher(this: any, item) {
+  let str = this.query;
   if (str === '') {
     return true;
   }
@@ -36,7 +36,7 @@ export class FormDropdownCtrl {
   startOpen: any;
   debounce: number;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private $scope, $element, private $sce, private templateSrv, private $q) {
     this.inputElement = $element.find('input').first();
     this.linkElement = $element.find('a').first();
diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts
index b715a20e28f..286c3f743c7 100644
--- a/public/app/core/components/grafana_app.ts
+++ b/public/app/core/components/grafana_app.ts
@@ -50,7 +50,7 @@ export class GrafanaCtrl {
 
     $rootScope.onAppEvent = function(name, callback, localScope) {
       const unbind = $rootScope.$on(name, callback);
-      var callerScope = this;
+      let callerScope = this;
       if (callerScope.$id === 1 && !localScope) {
         console.log('warning rootScope onAppEvent called without localscope');
       }
@@ -69,18 +69,44 @@ export class GrafanaCtrl {
   }
 }
 
+function setViewModeBodyClass(body, mode, sidemenuOpen: boolean) {
+  body.removeClass('view-mode--tv');
+  body.removeClass('view-mode--kiosk');
+  body.removeClass('view-mode--inactive');
+
+  switch (mode) {
+    case 'tv': {
+      body.removeClass('sidemenu-open');
+      body.addClass('view-mode--tv');
+      break;
+    }
+    // 1 & true for legacy states
+    case 1:
+    case true: {
+      body.removeClass('sidemenu-open');
+      body.addClass('view-mode--kiosk');
+      break;
+    }
+    default: {
+      body.toggleClass('sidemenu-open', sidemenuOpen);
+    }
+  }
+}
+
 /** @ngInject */
 export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScope, $location) {
   return {
     restrict: 'E',
     controller: GrafanaCtrl,
     link: (scope, elem) => {
-      var sidemenuOpen;
+      let sidemenuOpen;
       const body = $('body');
 
       // see https://github.com/zenorocha/clipboard.js/issues/155
       $.fn.modal.Constructor.prototype.enforceFocus = function() {};
 
+      $('.preloader').remove();
+
       sidemenuOpen = scope.contextSrv.sidemenu;
       body.toggleClass('sidemenu-open', sidemenuOpen);
 
@@ -98,7 +124,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
       });
 
       scope.$watch(() => playlistSrv.isPlaying, function(newValue) {
-        elem.toggleClass('playlist-active', newValue === true);
+        elem.toggleClass('view-mode--playlist', newValue === true);
       });
 
       // check if we are in server side render
@@ -108,7 +134,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
 
       // tooltip removal fix
       // manage page classes
-      var pageClass;
+      let pageClass;
       scope.$on('$routeChangeSuccess', function(evt, data) {
         if (pageClass) {
           body.removeClass(pageClass);
@@ -127,17 +153,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
         $('#tooltip, .tooltip').remove();
 
         // check for kiosk url param
-        if (data.params.kiosk) {
-          appEvents.emit('toggle-kiosk-mode');
-        }
-
-        // check for 'inactive' url param for clean looks like kiosk, but with title
-        if (data.params.inactive) {
-          body.addClass('user-activity-low');
-
-          // for some reason, with this class it looks cleanest
-          body.addClass('sidemenu-open');
-        }
+        setViewModeBodyClass(body, data.params.kiosk, sidemenuOpen);
 
         // close all drops
         for (const drop of Drop.drops) {
@@ -146,15 +162,37 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
       });
 
       // handle kiosk mode
-      appEvents.on('toggle-kiosk-mode', () => {
-        body.toggleClass('page-kiosk-mode');
+      appEvents.on('toggle-kiosk-mode', options => {
+        const search = $location.search();
+
+        if (options && options.exit) {
+          search.kiosk = 1;
+        }
+
+        switch (search.kiosk) {
+          case 'tv': {
+            search.kiosk = 1;
+            appEvents.emit('alert-success', ['Press ESC to exit Kiosk mode']);
+            break;
+          }
+          case 1:
+          case true: {
+            delete search.kiosk;
+            break;
+          }
+          default: {
+            search.kiosk = 'tv';
+          }
+        }
+
+        $location.search(search);
+        setViewModeBodyClass(body, search.kiosk, sidemenuOpen);
       });
 
       // handle in active view state class
-      var lastActivity = new Date().getTime();
-      var activeUser = true;
-      const inActiveTimeLimit = 60 * 1000;
-      var sidemenuHidden = false;
+      let lastActivity = new Date().getTime();
+      let activeUser = true;
+      const inActiveTimeLimit = 60 * 5000;
 
       function checkForInActiveUser() {
         if (!activeUser) {
@@ -167,15 +205,8 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
 
         if (new Date().getTime() - lastActivity > inActiveTimeLimit) {
           activeUser = false;
-          body.addClass('user-activity-low');
-          // hide sidemenu
-          if (sidemenuOpen) {
-            sidemenuHidden = true;
-            body.removeClass('sidemenu-open');
-            $timeout(function() {
-              $rootScope.$broadcast('render');
-            }, 100);
-          }
+          body.addClass('view-mode--inactive');
+          body.removeClass('sidemenu-open');
         }
       }
 
@@ -183,17 +214,8 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
         lastActivity = new Date().getTime();
         if (!activeUser) {
           activeUser = true;
-          body.removeClass('user-activity-low');
-
-          // restore sidemenu
-          if (sidemenuHidden) {
-            sidemenuHidden = false;
-            body.addClass('sidemenu-open');
-            appEvents.emit('toggle-inactive-mode');
-            $timeout(function() {
-              $rootScope.$broadcast('render');
-            }, 100);
-          }
+          body.removeClass('view-mode--inactive');
+          body.toggleClass('sidemenu-open', sidemenuOpen);
         }
       }
 
diff --git a/public/app/core/components/json_explorer/helpers.ts b/public/app/core/components/json_explorer/helpers.ts
index bc7468b3b21..c039d818281 100644
--- a/public/app/core/components/json_explorer/helpers.ts
+++ b/public/app/core/components/json_explorer/helpers.ts
@@ -21,7 +21,7 @@ export function isObject(value: any): boolean {
  * From http://stackoverflow.com/a/332429
  *
 */
-export function getObjectName(object: Object): string {
+export function getObjectName(object: object): string {
   if (object === undefined) {
     return '';
   }
@@ -44,7 +44,7 @@ export function getObjectName(object: Object): string {
 /*
  * Gets type of an object. Returns "null" for null objects
 */
-export function getType(object: Object): string {
+export function getType(object: object): string {
   if (object === null) {
     return 'null';
   }
@@ -54,7 +54,7 @@ export function getType(object: Object): string {
 /*
  * Generates inline preview for a JavaScript object based on a value
 */
-export function getValuePreview(object: Object, value: string): string {
+export function getValuePreview(object: object, value: string): string {
   const type = getType(object);
 
   if (type === 'null' || type === 'undefined') {
@@ -79,15 +79,15 @@ export function getValuePreview(object: Object, value: string): string {
 /*
  * Generates inline preview for a JavaScript object
 */
-export function getPreview(object: string): string {
-  let value = '';
-  if (isObject(object)) {
-    value = getObjectName(object);
-    if (Array.isArray(object)) {
-      value += '[' + object.length + ']';
+let value = '';
+export function getPreview(obj: object): string {
+  if (isObject(obj)) {
+    value = getObjectName(obj);
+    if (Array.isArray(obj)) {
+      value += '[' + obj.length + ']';
     }
   } else {
-    value = getValuePreview(object, object);
+    value = getValuePreview(obj, obj.toString());
   }
   return value;
 }
diff --git a/public/app/core/components/layout_selector/layout_selector.ts b/public/app/core/components/layout_selector/layout_selector.ts
index a28abe19251..6fcc768c846 100644
--- a/public/app/core/components/layout_selector/layout_selector.ts
+++ b/public/app/core/components/layout_selector/layout_selector.ts
@@ -15,7 +15,7 @@ const template = `
 export class LayoutSelectorCtrl {
   mode: string;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private $rootScope) {
     this.mode = store.get('grafana.list.layout.mode') || 'grid';
   }
@@ -33,7 +33,7 @@ export class LayoutSelectorCtrl {
   }
 }
 
-/** @ngInject **/
+/** @ngInject */
 export function layoutSelector() {
   return {
     restrict: 'E',
@@ -45,14 +45,14 @@ export function layoutSelector() {
   };
 }
 
-/** @ngInject **/
+/** @ngInject */
 export function layoutMode($rootScope) {
   return {
     restrict: 'A',
     scope: {},
     link: function(scope, elem) {
       const layout = store.get('grafana.list.layout.mode') || 'grid';
-      var className = 'card-list-layout-' + layout;
+      let className = 'card-list-layout-' + layout;
       elem.addClass(className);
 
       $rootScope.onAppEvent(
diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.ts b/public/app/core/components/manage_dashboards/manage_dashboards.ts
index 0016305e617..da3fa2f8ab8 100644
--- a/public/app/core/components/manage_dashboards/manage_dashboards.ts
+++ b/public/app/core/components/manage_dashboards/manage_dashboards.ts
@@ -14,7 +14,7 @@ class Query {
 }
 
 export class ManageDashboardsCtrl {
-  public sections: any[];
+  sections: any[];
 
   query: Query;
   navModel: any;
diff --git a/public/app/core/components/query_part/query_part.ts b/public/app/core/components/query_part/query_part.ts
index ea874094402..10ac878f4b5 100644
--- a/public/app/core/components/query_part/query_part.ts
+++ b/public/app/core/components/query_part/query_part.ts
@@ -74,7 +74,7 @@ export class QueryPart {
       return;
     }
 
-    var text = this.def.type + '(';
+    let text = this.def.type + '(';
     text += this.params.join(', ');
     text += ')';
     this.text = text;
diff --git a/public/app/core/components/query_part/query_part_editor.ts b/public/app/core/components/query_part/query_part_editor.ts
index cab7907a9a2..d45c6532364 100644
--- a/public/app/core/components/query_part/query_part_editor.ts
+++ b/public/app/core/components/query_part/query_part_editor.ts
@@ -33,7 +33,7 @@ export function queryPartEditorDirective($compile, templateSrv) {
 
       $scope.partActions = [];
 
-      function clickFuncParam(paramIndex) {
+      function clickFuncParam(this: any, paramIndex) {
         /*jshint validthis:true */
         const $link = $(this);
         const $input = $link.next();
@@ -53,7 +53,7 @@ export function queryPartEditorDirective($compile, templateSrv) {
         }
       }
 
-      function inputBlur(paramIndex) {
+      function inputBlur(this: any, paramIndex) {
         /*jshint validthis:true */
         const $input = $(this);
         const $link = $input.prev();
@@ -72,14 +72,14 @@ export function queryPartEditorDirective($compile, templateSrv) {
         $link.show();
       }
 
-      function inputKeyPress(paramIndex, e) {
+      function inputKeyPress(this: any, paramIndex, e) {
         /*jshint validthis:true */
         if (e.which === 13) {
           inputBlur.call(this, paramIndex);
         }
       }
 
-      function inputKeyDown() {
+      function inputKeyDown(this: any) {
         /*jshint validthis:true */
         this.style.width = (3 + this.value.length) * 8 + 'px';
       }
@@ -91,7 +91,7 @@ export function queryPartEditorDirective($compile, templateSrv) {
 
         const typeaheadSource = function(query, callback) {
           if (param.options) {
-            var options = param.options;
+            let options = param.options;
             if (param.type === 'int') {
               options = _.map(options, function(val) {
                 return val.toString();
diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts
index 5cdbdb62ee3..2d60825e739 100644
--- a/public/app/core/components/scroll/scroll.ts
+++ b/public/app/core/components/scroll/scroll.ts
@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import baron from 'baron';
 import coreModule from 'app/core/core_module';
-import appEvents from 'app/core/app_events';
 
 const scrollBarHTML = `
 <div class="baron__track">
@@ -39,43 +38,6 @@ export function geminiScrollbar() {
 
       const scrollbar = baron(scrollParams);
 
-      let lastPos = 0;
-
-      appEvents.on(
-        'dash-scroll',
-        evt => {
-          if (evt.restore) {
-            elem[0].scrollTop = lastPos;
-            return;
-          }
-
-          lastPos = elem[0].scrollTop;
-
-          if (evt.animate) {
-            elem.animate({ scrollTop: evt.pos }, 500);
-          } else {
-            elem[0].scrollTop = evt.pos;
-          }
-        },
-        scope
-      );
-
-      // force updating dashboard width
-      appEvents.on('toggle-sidemenu', forceUpdate, scope);
-      appEvents.on('toggle-sidemenu-hidden', forceUpdate, scope);
-      appEvents.on('toggle-view-mode', forceUpdate, scope);
-      appEvents.on('toggle-kiosk-mode', forceUpdate, scope);
-      appEvents.on('toggle-inactive-mode', forceUpdate, scope);
-
-      function forceUpdate() {
-        scrollbar.scroll();
-      }
-
-      scope.$on('$routeChangeSuccess', () => {
-        lastPos = 0;
-        elem[0].scrollTop = 0;
-      });
-
       scope.$on('$destroy', () => {
         scrollbar.dispose();
       });
diff --git a/public/app/core/components/sql_part/sql_part_editor.ts b/public/app/core/components/sql_part/sql_part_editor.ts
index f272a6d7254..5d0f63a6953 100644
--- a/public/app/core/components/sql_part/sql_part_editor.ts
+++ b/public/app/core/components/sql_part/sql_part_editor.ts
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import $ from 'jquery';
 import coreModule from 'app/core/core_module';
 
-let template = `
+const template = `
 <div class="dropdown cascade-open">
 <a ng-click="showActionsMenu()" class="query-part-name pointer dropdown-toggle" data-toggle="dropdown">{{part.label}}</a>
 <span>{{part.def.wrapOpen}}</span><span class="query-part-parameters"></span><span>{{part.def.wrapClose}}</span>
@@ -15,7 +15,7 @@ let template = `
 
 /** @ngInject */
 export function sqlPartEditorDirective($compile, templateSrv) {
-  let paramTemplate = '<input type="text" class="hide input-mini"></input>';
+  const paramTemplate = '<input type="text" class="hide input-mini"></input>';
 
   return {
     restrict: 'E',
@@ -26,18 +26,18 @@ export function sqlPartEditorDirective($compile, templateSrv) {
       debounce: '@',
     },
     link: function postLink($scope, elem) {
-      let part = $scope.part;
-      let partDef = part.def;
-      let $paramsContainer = elem.find('.query-part-parameters');
-      let debounceLookup = $scope.debounce;
+      const part = $scope.part;
+      const partDef = part.def;
+      const $paramsContainer = elem.find('.query-part-parameters');
+      const debounceLookup = $scope.debounce;
       let cancelBlur = null;
 
       $scope.partActions = [];
 
-      function clickFuncParam(paramIndex) {
+      function clickFuncParam(this: any, paramIndex) {
         /*jshint validthis:true */
-        let $link = $(this);
-        let $input = $link.next();
+        const $link = $(this);
+        const $input = $link.next();
 
         $input.val(part.params[paramIndex]);
         $input.css('width', $link.width() + 16 + 'px');
@@ -47,7 +47,7 @@ export function sqlPartEditorDirective($compile, templateSrv) {
         $input.focus();
         $input.select();
 
-        let typeahead = $input.data('typeahead');
+        const typeahead = $input.data('typeahead');
         if (typeahead) {
           $input.val('');
           typeahead.lookup();
@@ -62,8 +62,8 @@ export function sqlPartEditorDirective($compile, templateSrv) {
 
       function switchToLink($input, paramIndex) {
         /*jshint validthis:true */
-        let $link = $input.prev();
-        let newValue = $input.val();
+        const $link = $input.prev();
+        const newValue = $input.val();
 
         if (newValue !== '' || part.def.params[paramIndex].optional) {
           $link.html(templateSrv.highlightVariablesAsHtml(newValue));
@@ -78,14 +78,14 @@ export function sqlPartEditorDirective($compile, templateSrv) {
         $link.show();
       }
 
-      function inputKeyPress(paramIndex, e) {
+      function inputKeyPress(this: any, paramIndex, e) {
         /*jshint validthis:true */
         if (e.which === 13) {
           switchToLink($(this), paramIndex);
         }
       }
 
-      function inputKeyDown() {
+      function inputKeyDown(this: any) {
         /*jshint validthis:true */
         this.style.width = (3 + this.value.length) * 8 + 'px';
       }
@@ -95,7 +95,7 @@ export function sqlPartEditorDirective($compile, templateSrv) {
           return;
         }
 
-        let typeaheadSource = function(query, callback) {
+        const typeaheadSource = function(query, callback) {
           if (param.options) {
             let options = param.options;
             if (param.type === 'int') {
@@ -108,7 +108,7 @@ export function sqlPartEditorDirective($compile, templateSrv) {
 
           $scope.$apply(function() {
             $scope.handleEvent({ $event: { name: 'get-param-options', param: param } }).then(function(result) {
-              let dynamicOptions = _.map(result, function(op) {
+              const dynamicOptions = _.map(result, function(op) {
                 return op.value;
               });
 
@@ -138,10 +138,10 @@ export function sqlPartEditorDirective($compile, templateSrv) {
           },
         });
 
-        let typeahead = $input.data('typeahead');
+        const typeahead = $input.data('typeahead');
         typeahead.lookup = function() {
           this.query = this.$element.val() || '';
-          let items = this.source(this.query, $.proxy(this.process, this));
+          const items = this.source(this.query, $.proxy(this.process, this));
           return items ? this.process(items) : items;
         };
 
@@ -170,9 +170,9 @@ export function sqlPartEditorDirective($compile, templateSrv) {
             $('<span>' + partDef.separator + '</span>').appendTo($paramsContainer);
           }
 
-          let paramValue = templateSrv.highlightVariablesAsHtml(part.params[index]);
-          let $paramLink = $('<a class="graphite-func-param-link pointer">' + paramValue + '</a>');
-          let $input = $(paramTemplate);
+          const paramValue = templateSrv.highlightVariablesAsHtml(part.params[index]);
+          const $paramLink = $('<a class="graphite-func-param-link pointer">' + paramValue + '</a>');
+          const $input = $(paramTemplate);
 
           $paramLink.appendTo($paramsContainer);
           $input.appendTo($paramsContainer);
diff --git a/public/app/core/directives/misc.ts b/public/app/core/directives/misc.ts
index 07796245f2b..07ba3263763 100644
--- a/public/app/core/directives/misc.ts
+++ b/public/app/core/directives/misc.ts
@@ -9,7 +9,7 @@ function tip($compile) {
   return {
     restrict: 'E',
     link: function(scope, elem, attrs) {
-      var _t =
+      let _t =
         '<i class="grafana-tip fa fa-' +
         (attrs.icon || 'question-circle') +
         '" bs-tooltip="\'' +
@@ -125,7 +125,7 @@ function editorCheckbox($compile, $interpolate) {
       const tip = attrs.tip ? ' <tip>' + attrs.tip + '</tip>' : '';
       const label = '<label for="' + scope.$id + model + '" class="checkbox-label">' + text + tip + '</label>';
 
-      var template =
+      let template =
         '<input class="cr1" id="' +
         scope.$id +
         model +
@@ -163,7 +163,7 @@ function gfDropdown($parse, $compile, $timeout) {
         continue;
       }
 
-      var li =
+      let li =
         '<li' +
         (item.submenu && item.submenu.length ? ' class="dropdown-submenu"' : '') +
         '>' +
diff --git a/public/app/core/directives/rebuild_on_change.ts b/public/app/core/directives/rebuild_on_change.ts
index 3a2d33dd771..72b9c05064a 100644
--- a/public/app/core/directives/rebuild_on_change.ts
+++ b/public/app/core/directives/rebuild_on_change.ts
@@ -2,11 +2,11 @@ import $ from 'jquery';
 import coreModule from '../core_module';
 
 function getBlockNodes(nodes) {
-  var node = nodes[0];
+  let node = nodes[0];
   const endNode = nodes[nodes.length - 1];
-  var blockNodes;
+  let blockNodes;
 
-  for (var i = 1; node !== endNode && (node = node.nextSibling); i++) {
+  for (let i = 1; node !== endNode && (node = node.nextSibling); i++) {
     if (blockNodes || nodes[i] !== node) {
       if (!blockNodes) {
         blockNodes = $([].slice.call(nodes, 0, i));
@@ -18,7 +18,7 @@ function getBlockNodes(nodes) {
   return blockNodes || nodes;
 }
 
-/** @ngInject **/
+/** @ngInject */
 function rebuildOnChange($animate) {
   return {
     multiElement: true,
@@ -27,7 +27,7 @@ function rebuildOnChange($animate) {
     priority: 600,
     restrict: 'E',
     link: function(scope, elem, attrs, ctrl, transclude) {
-      var block, childScope, previousElements;
+      let block, childScope, previousElements;
 
       function cleanUp() {
         if (previousElements) {
diff --git a/public/app/core/directives/tags.ts b/public/app/core/directives/tags.ts
index 7cee3ac338d..00da9105e5f 100644
--- a/public/app/core/directives/tags.ts
+++ b/public/app/core/directives/tags.ts
@@ -69,7 +69,7 @@ function bootstrapTagsinput() {
             },
       });
 
-      select.on('itemAdded', function(event) {
+      select.on('itemAdded', event => {
         if (scope.model.indexOf(event.item) === -1) {
           scope.model.push(event.item);
           if (scope.onTagsUpdated) {
@@ -79,7 +79,7 @@ function bootstrapTagsinput() {
         const tagElement = select
           .next()
           .children('span')
-          .filter(function() {
+          .filter(() => {
             return $(this).text() === event.item;
           });
         setColor(event.item, tagElement);
@@ -104,7 +104,7 @@ function bootstrapTagsinput() {
 
           select.tagsinput('removeAll');
 
-          for (var i = 0; i < scope.model.length; i++) {
+          for (let i = 0; i < scope.model.length; i++) {
             select.tagsinput('add', scope.model[i]);
           }
         },
diff --git a/public/app/core/filters/filters.ts b/public/app/core/filters/filters.ts
index 098bda58de9..745873369c0 100644
--- a/public/app/core/filters/filters.ts
+++ b/public/app/core/filters/filters.ts
@@ -56,7 +56,7 @@ coreModule.filter('noXml', function() {
 /** @ngInject */
 function interpolateTemplateVars(templateSrv) {
   const filterFunc: any = function(text, scope) {
-    var scopedVars;
+    let scopedVars;
     if (scope.ctrl) {
       scopedVars = (scope.ctrl.panel || scope.ctrl.row).scopedVars;
     } else {
diff --git a/public/app/core/jquery_extended.ts b/public/app/core/jquery_extended.ts
index f6c28c69f35..241baa1af22 100644
--- a/public/app/core/jquery_extended.ts
+++ b/public/app/core/jquery_extended.ts
@@ -9,10 +9,10 @@ $.fn.place_tt = (function() {
     offset: 5,
   };
 
-  return function(x, y, opts) {
+  return function(this: any, x, y, opts) {
     opts = $.extend(true, {}, defaults, opts);
 
-    return this.each(function() {
+    return this.each(() => {
       const $tooltip = $(this);
       let width, height;
 
diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts
index 8985b2c489c..300a7f0e208 100644
--- a/public/app/core/nav_model_srv.ts
+++ b/public/app/core/nav_model_srv.ts
@@ -38,7 +38,7 @@ export class NavModelSrv {
   }
 
   getNav(...args) {
-    var children = this.navItems;
+    let children = this.navItems;
     const nav = new NavModel();
 
     for (const id of args) {
diff --git a/public/app/core/partials.ts b/public/app/core/partials.ts
index fb70e30f96a..8f8fd040b9f 100644
--- a/public/app/core/partials.ts
+++ b/public/app/core/partials.ts
@@ -1,4 +1,4 @@
-var templates = (<any>require).context('../', true, /\.html$/);
+let templates = (<any>require).context('../', true, /\.html$/);
 templates.keys().forEach(function(key) {
   templates(key);
 });
diff --git a/public/app/core/profiler.ts b/public/app/core/profiler.ts
index 09c0d6843a8..9ad451353d2 100644
--- a/public/app/core/profiler.ts
+++ b/public/app/core/profiler.ts
@@ -69,7 +69,7 @@ export class Profiler {
 
       // measure digest performance
       const rootDigestStart = window.performance.now();
-      for (var i = 0; i < 30; i++) {
+      for (let i = 0; i < 30; i++) {
         this.$rootScope.$apply();
       }
 
@@ -78,8 +78,8 @@ export class Profiler {
   }
 
   getTotalWatcherCount() {
-    var count = 0;
-    var scopes = 0;
+    let count = 0;
+    let scopes = 0;
     const root = $(document.getElementsByTagName('body'));
 
     const f = function(element) {
diff --git a/public/app/core/services/backend_srv.ts b/public/app/core/services/backend_srv.ts
index 99f8358fdfc..2a50a1b1f12 100644
--- a/public/app/core/services/backend_srv.ts
+++ b/public/app/core/services/backend_srv.ts
@@ -43,7 +43,7 @@ export class BackendSrv {
       return;
     }
 
-    var data = err.data || { message: 'Unexpected error' };
+    let data = err.data || { message: 'Unexpected error' };
     if (_.isString(data)) {
       data = { message: data };
     }
diff --git a/public/app/core/services/impression_srv.ts b/public/app/core/services/impression_srv.ts
index bbebf37c149..57464f773b3 100644
--- a/public/app/core/services/impression_srv.ts
+++ b/public/app/core/services/impression_srv.ts
@@ -7,7 +7,7 @@ export class ImpressionSrv {
 
   addDashboardImpression(dashboardId) {
     const impressionsKey = this.impressionKey(config);
-    var impressions = [];
+    let impressions = [];
     if (store.exists(impressionsKey)) {
       impressions = JSON.parse(store.get(impressionsKey));
       if (!_.isArray(impressions)) {
@@ -28,7 +28,7 @@ export class ImpressionSrv {
   }
 
   getDashboardOpened() {
-    var impressions = store.get(this.impressionKey(config)) || '[]';
+    let impressions = store.get(this.impressionKey(config)) || '[]';
 
     impressions = JSON.parse(impressions);
 
diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts
index cad538d13aa..d05e9b0c21c 100644
--- a/public/app/core/services/keybindingSrv.ts
+++ b/public/app/core/services/keybindingSrv.ts
@@ -77,15 +77,15 @@ export class KeybindingSrv {
 
     appEvents.emit('hide-modal');
 
-    if (!this.modalOpen) {
-      if (this.timepickerOpen) {
-        this.$rootScope.appEvent('closeTimepicker');
-        this.timepickerOpen = false;
-      } else {
-        this.$rootScope.appEvent('panel-change-view', { fullscreen: false, edit: false });
-      }
-    } else {
+    if (this.modalOpen) {
       this.modalOpen = false;
+      return;
+    }
+
+    if (this.timepickerOpen) {
+      this.$rootScope.appEvent('closeTimepicker');
+      this.timepickerOpen = false;
+      return;
     }
 
     // close settings view
@@ -93,6 +93,16 @@ export class KeybindingSrv {
     if (search.editview) {
       delete search.editview;
       this.$location.search(search);
+      return;
+    }
+
+    if (search.fullscreen) {
+      this.$rootScope.appEvent('panel-change-view', { fullscreen: false, edit: false });
+      return;
+    }
+
+    if (search.kiosk) {
+      this.$rootScope.appEvent('toggle-kiosk-mode', { exit: true });
     }
   }
 
diff --git a/public/app/core/services/ng_react.ts b/public/app/core/services/ng_react.ts
index 8c262275ffa..4036b4bd1fd 100644
--- a/public/app/core/services/ng_react.ts
+++ b/public/app/core/services/ng_react.ts
@@ -27,7 +27,7 @@ function getReactComponent(name, $injector) {
   }
 
   // ensure the specified React component is accessible, and fail fast if it's not
-  var reactComponent;
+  let reactComponent;
   try {
     reactComponent = $injector.get(name);
   } catch (e) {}
@@ -204,7 +204,7 @@ const reactComponent = function($injector) {
       attrs.props ? watchProps(attrs.watchDepth, scope, [attrs.props], renderMyComponent) : renderMyComponent();
 
       // cleanup when scope is destroyed
-      scope.$on('$destroy', function() {
+      scope.$on('$destroy', () => {
         if (!attrs.onScopeDestroy) {
           ReactDOM.unmountComponentAtNode(elem[0]);
         } else {
@@ -256,7 +256,7 @@ const reactDirective = function($injector) {
 
         // for each of the properties, get their scope value and set it to scope.props
         const renderMyComponent = function() {
-          var scopeProps = {};
+          let scopeProps = {};
           const config = {};
 
           props.forEach(function(prop) {
@@ -280,7 +280,7 @@ const reactDirective = function($injector) {
         props.length ? watchProps(attrs.watchDepth, scope, propExpressions, renderMyComponent) : renderMyComponent();
 
         // cleanup when scope is destroyed
-        scope.$on('$destroy', function() {
+        scope.$on('$destroy', () => {
           if (!attrs.onScopeDestroy) {
             ReactDOM.unmountComponentAtNode(elem[0]);
           } else {
diff --git a/public/app/core/services/popover_srv.ts b/public/app/core/services/popover_srv.ts
index 33568cda8d3..631cc274021 100644
--- a/public/app/core/services/popover_srv.ts
+++ b/public/app/core/services/popover_srv.ts
@@ -2,8 +2,8 @@ import _ from 'lodash';
 import coreModule from 'app/core/core_module';
 import Drop from 'tether-drop';
 
-/** @ngInject **/
-function popoverSrv($compile, $rootScope, $timeout) {
+/** @ngInject */
+function popoverSrv(this: any, $compile, $rootScope, $timeout) {
   let openDrop = null;
 
   this.close = function() {
diff --git a/public/app/core/services/segment_srv.ts b/public/app/core/services/segment_srv.ts
index 5250febc11a..f03f5eca546 100644
--- a/public/app/core/services/segment_srv.ts
+++ b/public/app/core/services/segment_srv.ts
@@ -2,10 +2,10 @@ import _ from 'lodash';
 import coreModule from '../core_module';
 
 /** @ngInject */
-export function uiSegmentSrv($sce, templateSrv) {
+export function uiSegmentSrv(this: any, $sce, templateSrv) {
   const self = this;
 
-  function MetricSegment(options) {
+  function MetricSegment(this: any, options) {
     if (options === '*' || options.value === '*') {
       this.value = '*';
       this.html = $sce.trustAsHtml('<i class="fa fa-asterisk"><i>');
diff --git a/public/app/core/specs/datemath.test.ts b/public/app/core/specs/datemath.test.ts
index cca6eb31593..8197f01c872 100644
--- a/public/app/core/specs/datemath.test.ts
+++ b/public/app/core/specs/datemath.test.ts
@@ -55,8 +55,8 @@ describe('DateMath', () => {
   });
 
   describe('subtraction', () => {
-    var now;
-    var anchored;
+    let now;
+    let anchored;
 
     beforeEach(() => {
       clock = sinon.useFakeTimers(unix);
@@ -83,7 +83,7 @@ describe('DateMath', () => {
   });
 
   describe('rounding', () => {
-    var now;
+    let now;
 
     beforeEach(() => {
       clock = sinon.useFakeTimers(unix);
diff --git a/public/app/core/specs/table_model.test.ts b/public/app/core/specs/table_model.test.ts
index b88bad12227..990daaaa2da 100644
--- a/public/app/core/specs/table_model.test.ts
+++ b/public/app/core/specs/table_model.test.ts
@@ -26,7 +26,7 @@ describe('when sorting table desc', () => {
 });
 
 describe('when sorting table asc', () => {
-  var table;
+  let table;
   const panel = {
     sort: { col: 1, desc: false },
   };
@@ -46,8 +46,8 @@ describe('when sorting table asc', () => {
 });
 
 describe('when sorting with nulls', () => {
-  var table;
-  var values;
+  let table;
+  let values;
 
   beforeEach(() => {
     table = new TableModel();
diff --git a/public/app/core/specs/time_series.test.ts b/public/app/core/specs/time_series.test.ts
index 605c8fd0a2e..3c0fc42be65 100644
--- a/public/app/core/specs/time_series.test.ts
+++ b/public/app/core/specs/time_series.test.ts
@@ -174,7 +174,7 @@ describe('TimeSeries', function() {
   });
 
   describe('can detect if series contains ms precision', function() {
-    var fakedata;
+    let fakedata;
 
     beforeEach(function() {
       fakedata = testData;
@@ -194,7 +194,7 @@ describe('TimeSeries', function() {
   });
 
   describe('series overrides', function() {
-    var series;
+    let series;
     beforeEach(function() {
       series = new TimeSeries(testData);
     });
@@ -313,7 +313,7 @@ describe('TimeSeries', function() {
   });
 
   describe('value formatter', function() {
-    var series;
+    let series;
     beforeEach(function() {
       series = new TimeSeries(testData);
     });
diff --git a/public/app/core/time_series2.ts b/public/app/core/time_series2.ts
index f8c27cfc67d..76af75d0935 100644
--- a/public/app/core/time_series2.ts
+++ b/public/app/core/time_series2.ts
@@ -124,7 +124,7 @@ export default class TimeSeries {
     delete this.stack;
     delete this.bars.show;
 
-    for (var i = 0; i < overrides.length; i++) {
+    for (let i = 0; i < overrides.length; i++) {
       const override = overrides[i];
       if (!matchSeriesOverride(override.alias, this.alias)) {
         continue;
@@ -211,14 +211,14 @@ export default class TimeSeries {
 
     const ignoreNulls = fillStyle === 'connected';
     const nullAsZero = fillStyle === 'null as zero';
-    var currentTime;
-    var currentValue;
-    var nonNulls = 0;
-    var previousTime;
-    var previousValue = 0;
-    var previousDeltaUp = true;
-
-    for (var i = 0; i < this.datapoints.length; i++) {
+    let currentTime;
+    let currentValue;
+    let nonNulls = 0;
+    let previousTime;
+    let previousValue = 0;
+    let previousDeltaUp = true;
+
+    for (let i = 0; i < this.datapoints.length; i++) {
       currentValue = this.datapoints[i][0];
       currentTime = this.datapoints[i][1];
 
@@ -328,7 +328,7 @@ export default class TimeSeries {
   }
 
   isMsResolutionNeeded() {
-    for (var i = 0; i < this.datapoints.length; i++) {
+    for (let i = 0; i < this.datapoints.length; i++) {
       if (this.datapoints[i][1] !== null) {
         const timestamp = this.datapoints[i][1].toString();
         if (timestamp.length === 13 && timestamp % 1000 !== 0) {
diff --git a/public/app/core/utils/css_loader.ts b/public/app/core/utils/css_loader.ts
index b8aaef47085..19dd84a6087 100644
--- a/public/app/core/utils/css_loader.ts
+++ b/public/app/core/utils/css_loader.ts
@@ -11,7 +11,7 @@ for (let i = 0; i < links.length; i++) {
 const isWebkit = !!window.navigator.userAgent.match(/AppleWebKit\/([^ ;]*)/);
 const webkitLoadCheck = function(link, callback) {
   setTimeout(function() {
-    for (var i = 0; i < document.styleSheets.length; i++) {
+    for (let i = 0; i < document.styleSheets.length; i++) {
       const sheet = document.styleSheets[i];
       if (sheet.href === link.href) {
         return callback();
@@ -68,7 +68,7 @@ export function fetch(load): any {
   }
 
   // don't reload styles loaded in the head
-  for (var i = 0; i < linkHrefs.length; i++) {
+  for (let i = 0; i < linkHrefs.length; i++) {
     if (load.address === linkHrefs[i]) {
       return '';
     }
diff --git a/public/app/core/utils/datemath.ts b/public/app/core/utils/datemath.ts
index 045b5711beb..cdc529146a1 100644
--- a/public/app/core/utils/datemath.ts
+++ b/public/app/core/utils/datemath.ts
@@ -14,10 +14,10 @@ export function parse(text, roundUp?, timezone?) {
     return moment(text);
   }
 
-  var time;
-  var mathString = '';
-  var index;
-  var parseString;
+  let time;
+  let mathString = '';
+  let index;
+  let parseString;
 
   if (text.substring(0, 3) === 'now') {
     if (timezone === 'utc') {
@@ -61,14 +61,14 @@ export function isValid(text) {
 
 export function parseDateMath(mathString, time, roundUp?) {
   const dateTime = time;
-  var i = 0;
+  let i = 0;
   const len = mathString.length;
 
   while (i < len) {
     const c = mathString.charAt(i++);
-    var type;
-    var num;
-    var unit;
+    let type;
+    let num;
+    let unit;
 
     if (c === '/') {
       type = 0;
diff --git a/public/app/core/utils/kbn.ts b/public/app/core/utils/kbn.ts
index 9f30972bc61..0ac26947076 100644
--- a/public/app/core/utils/kbn.ts
+++ b/public/app/core/utils/kbn.ts
@@ -169,8 +169,8 @@ kbn.intervals_in_seconds = {
 };
 
 kbn.calculateInterval = function(range, resolution, lowLimitInterval) {
-  var lowLimitMs = 1; // 1 millisecond default low limit
-  var intervalMs;
+  let lowLimitMs = 1; // 1 millisecond default low limit
+  let intervalMs;
 
   if (lowLimitInterval) {
     if (lowLimitInterval[0] === '>') {
@@ -304,7 +304,7 @@ kbn.formatBuilders.scaledUnits = function(factor, extArray) {
       return '';
     }
 
-    var steps = 0;
+    let steps = 0;
     const limit = extArray.length;
 
     while (Math.abs(size) >= factor) {
@@ -328,7 +328,7 @@ kbn.formatBuilders.scaledUnits = function(factor, extArray) {
 // offset is given, it adjusts the starting units at the given prefix; a value
 // of 0 starts at no scale; -3 drops to nano, +2 starts at mega, etc.
 kbn.formatBuilders.decimalSIPrefix = function(unit, offset) {
-  var prefixes = ['n', 'µ', 'm', '', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
+  let prefixes = ['n', 'µ', 'm', '', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
   prefixes = prefixes.slice(3 + (offset || 0));
   const units = prefixes.map(function(p) {
     return ' ' + p + unit;
@@ -790,8 +790,8 @@ kbn.toDuration = function(size, decimals, timeScale) {
 
   const strings = [];
   // after first value >= 1 print only $decimals more
-  var decrementDecimals = false;
-  for (var i = 0; i < units.length && decimals >= 0; i++) {
+  let decrementDecimals = false;
+  for (let i = 0; i < units.length && decimals >= 0; i++) {
     const interval = kbn.intervals_in_seconds[units[i].short] * 1000;
     const value = size / interval;
     if (value >= 1 || decrementDecimals) {
diff --git a/public/app/core/utils/tags.ts b/public/app/core/utils/tags.ts
index d0f244be76b..cea01c3df05 100644
--- a/public/app/core/utils/tags.ts
+++ b/public/app/core/utils/tags.ts
@@ -75,7 +75,7 @@ export function getTagColorsFromName(name: string): { color: string; borderColor
 
 function djb2(str) {
   let hash = 5381;
-  for (var i = 0; i < str.length; i++) {
+  for (let i = 0; i < str.length; i++) {
     hash = (hash << 5) + hash + str.charCodeAt(i); /* hash * 33 + c */
   }
   return hash;
diff --git a/public/app/core/utils/url.ts b/public/app/core/utils/url.ts
index 857e76d9094..1bc5e361218 100644
--- a/public/app/core/utils/url.ts
+++ b/public/app/core/utils/url.ts
@@ -20,7 +20,7 @@ export function toUrlParams(a) {
   };
 
   const buildParams = function(prefix, obj) {
-    var i, len, key;
+    let i, len, key;
 
     if (prefix) {
       if (isArray(obj)) {
diff --git a/public/app/features/admin/admin.ts b/public/app/features/admin/admin.ts
index bdbb887817e..383b50b5d25 100644
--- a/public/app/features/admin/admin.ts
+++ b/public/app/features/admin/admin.ts
@@ -8,7 +8,7 @@ import coreModule from 'app/core/core_module';
 class AdminSettingsCtrl {
   navModel: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, backendSrv, navModelSrv) {
     this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-settings', 1);
 
@@ -21,7 +21,7 @@ class AdminSettingsCtrl {
 class AdminHomeCtrl {
   navModel: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(navModelSrv) {
     this.navModel = navModelSrv.getNav('cfg', 'admin', 1);
   }
diff --git a/public/app/features/admin/admin_list_users_ctrl.ts b/public/app/features/admin/admin_list_users_ctrl.ts
index 083340a43eb..1b5b27a4d66 100644
--- a/public/app/features/admin/admin_list_users_ctrl.ts
+++ b/public/app/features/admin/admin_list_users_ctrl.ts
@@ -26,7 +26,7 @@ export default class AdminListUsersCtrl {
         this.showPaging = this.totalPages > 1;
         this.pages = [];
 
-        for (var i = 1; i < this.totalPages + 1; i++) {
+        for (let i = 1; i < this.totalPages + 1; i++) {
           this.pages.push({ page: i, current: i === this.page });
         }
       });
diff --git a/public/app/features/alerting/threshold_mapper.ts b/public/app/features/alerting/threshold_mapper.ts
index cbc7dbf6b43..995add42ef0 100644
--- a/public/app/features/alerting/threshold_mapper.ts
+++ b/public/app/features/alerting/threshold_mapper.ts
@@ -1,6 +1,6 @@
 export class ThresholdMapper {
   static alertToGraphThresholds(panel) {
-    for (var i = 0; i < panel.alert.conditions.length; i++) {
+    for (let i = 0; i < panel.alert.conditions.length; i++) {
       const condition = panel.alert.conditions[i];
       if (condition.type !== 'query') {
         continue;
diff --git a/public/app/features/annotations/annotation_tooltip.ts b/public/app/features/annotations/annotation_tooltip.ts
index cadbac1bd89..6da6fc4f66d 100644
--- a/public/app/features/annotations/annotation_tooltip.ts
+++ b/public/app/features/annotations/annotation_tooltip.ts
@@ -3,7 +3,7 @@ import $ from 'jquery';
 import coreModule from 'app/core/core_module';
 import alertDef from '../alerting/alert_def';
 
-/** @ngInject **/
+/** @ngInject */
 export function annotationTooltipDirective($sanitize, dashboardSrv, contextSrv, $compile) {
   function sanitizeString(str) {
     try {
@@ -22,12 +22,12 @@ export function annotationTooltipDirective($sanitize, dashboardSrv, contextSrv,
     },
     link: function(scope, element) {
       const event = scope.event;
-      var title = event.title;
-      var text = event.text;
+      let title = event.title;
+      let text = event.text;
       const dashboard = dashboardSrv.getCurrent();
 
-      var tooltip = '<div class="graph-annotation">';
-      var titleStateClass = '';
+      let tooltip = '<div class="graph-annotation">';
+      let titleStateClass = '';
 
       if (event.alertId) {
         const stateModel = alertDef.getStateDisplayModel(event.newState);
@@ -42,7 +42,7 @@ export function annotationTooltipDirective($sanitize, dashboardSrv, contextSrv,
         title = '';
       }
 
-      var header = `<div class="graph-annotation__header">`;
+      let header = `<div class="graph-annotation__header">`;
       if (event.login) {
         header += `<div class="graph-annotation__user" bs-tooltip="'Created by ${event.login}'"><img src="${
           event.avatarUrl
diff --git a/public/app/features/annotations/annotations_srv.ts b/public/app/features/annotations/annotations_srv.ts
index 94e6dd7f6fd..f9820fe566d 100644
--- a/public/app/features/annotations/annotations_srv.ts
+++ b/public/app/features/annotations/annotations_srv.ts
@@ -25,7 +25,7 @@ export class AnnotationsSrv {
       .all([this.getGlobalAnnotations(options), this.getAlertStates(options)])
       .then(results => {
         // combine the annotations and flatten results
-        var annotations = _.flattenDeep(results[0]);
+        let annotations = _.flattenDeep(results[0]);
 
         // filter out annotations that do not belong to requesting panel
         annotations = _.filter(annotations, item => {
diff --git a/public/app/features/annotations/event_editor.ts b/public/app/features/annotations/event_editor.ts
index 90c425438ab..a88cc44a251 100644
--- a/public/app/features/annotations/event_editor.ts
+++ b/public/app/features/annotations/event_editor.ts
@@ -12,7 +12,7 @@ export class EventEditorCtrl {
   close: any;
   timeFormated: string;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private annotationsSrv) {
     this.event.panelId = this.panelCtrl.panel.id;
     this.event.dashboardId = this.panelCtrl.dashboard.id;
diff --git a/public/app/features/annotations/event_manager.ts b/public/app/features/annotations/event_manager.ts
index f9c04141f8d..ef74ca193d4 100644
--- a/public/app/features/annotations/event_manager.ts
+++ b/public/app/features/annotations/event_manager.ts
@@ -102,7 +102,7 @@ export class EventManager {
       }
     } else {
       // annotations from query
-      for (var i = 0; i < annotations.length; i++) {
+      for (let i = 0; i < annotations.length; i++) {
         const item = annotations[i];
 
         // add properties used by jquery flot events
diff --git a/public/app/features/dashboard/create_folder_ctrl.ts b/public/app/features/dashboard/create_folder_ctrl.ts
index 5c8bd276f76..99b2e8d4853 100644
--- a/public/app/features/dashboard/create_folder_ctrl.ts
+++ b/public/app/features/dashboard/create_folder_ctrl.ts
@@ -8,7 +8,7 @@ export class CreateFolderCtrl {
   hasValidationError: boolean;
   validationError: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private backendSrv, private $location, private validationSrv, navModelSrv) {
     this.navModel = navModelSrv.getNav('dashboards', 'manage-dashboards', 0);
   }
diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts
index 5524b55e3dd..2c5e3fffb9f 100644
--- a/public/app/features/dashboard/dashboard_ctrl.ts
+++ b/public/app/features/dashboard/dashboard_ctrl.ts
@@ -144,7 +144,7 @@ export class DashboardCtrl implements PanelContainer {
   removePanel(panel: PanelModel, ask: boolean) {
     // confirm deletion
     if (ask !== false) {
-      var text2, confirmText;
+      let text2, confirmText;
 
       if (panel.alert) {
         text2 = 'Panel includes an alert rule, removing panel will also remove alert rule';
diff --git a/public/app/features/dashboard/dashboard_loader_srv.ts b/public/app/features/dashboard/dashboard_loader_srv.ts
index cbf753c0124..0e1ec3508d1 100644
--- a/public/app/features/dashboard/dashboard_loader_srv.ts
+++ b/public/app/features/dashboard/dashboard_loader_srv.ts
@@ -36,7 +36,7 @@ export class DashboardLoaderSrv {
   }
 
   loadDashboard(type, slug, uid) {
-    var promise;
+    let promise;
 
     if (type === 'script') {
       promise = this._loadScriptedDashboard(slug);
diff --git a/public/app/features/dashboard/dashboard_migration.ts b/public/app/features/dashboard/dashboard_migration.ts
index 88bd178c128..c26a71f2182 100644
--- a/public/app/features/dashboard/dashboard_migration.ts
+++ b/public/app/features/dashboard/dashboard_migration.ts
@@ -18,7 +18,7 @@ export class DashboardMigrator {
   }
 
   updateSchema(old) {
-    var i, j, k, n;
+    let i, j, k, n;
     const oldVersion = this.dashboard.schemaVersion;
     const panelUpgrades = [];
     this.dashboard.schemaVersion = 16;
@@ -83,7 +83,7 @@ export class DashboardMigrator {
     // schema version 3 changes
     if (oldVersion < 3) {
       // ensure panel ids
-      var maxId = this.dashboard.getNextPanelId();
+      let maxId = this.dashboard.getNextPanelId();
       panelUpgrades.push(function(panel) {
         if (!panel.id) {
           panel.id = maxId;
@@ -140,15 +140,12 @@ export class DashboardMigrator {
       }
 
       // ensure query refIds
-      panelUpgrades.push(function(panel) {
-        _.each(
-          panel.targets,
-          function(target) {
-            if (!target.refId) {
-              target.refId = this.dashboard.getNextQueryLetter(panel);
-            }
-          }.bind(this)
-        );
+      panelUpgrades.push(panel => {
+        _.each(panel.targets, target => {
+          if (!target.refId) {
+            target.refId = this.dashboard.getNextQueryLetter(panel);
+          }
+        });
       });
     }
 
diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts
index d40467e8338..1a7f0b85f2b 100644
--- a/public/app/features/dashboard/dashboard_model.ts
+++ b/public/app/features/dashboard/dashboard_model.ts
@@ -144,7 +144,7 @@ export class DashboardModel {
     });
 
     // make clone
-    var copy: any = {};
+    let copy: any = {};
     for (const property in this) {
       if (DashboardModel.nonPersistedProperties[property] || !this.hasOwnProperty(property)) {
         continue;
@@ -842,12 +842,20 @@ export class DashboardModel {
       })
     );
 
-    // Consider navbar and submenu controls, padding and margin
-    let visibleHeight = window.innerHeight - 55 - 20;
+    const navbarHeight = 55;
+    const margin = 20;
+    const submenuHeight = 50;
 
-    // Remove submenu if visible
-    if (this.meta.submenuEnabled) {
-      visibleHeight -= 50;
+    let visibleHeight = viewHeight - navbarHeight - margin;
+
+    // Remove submenu height if visible
+    if (this.meta.submenuEnabled && !this.meta.kiosk) {
+      visibleHeight -= submenuHeight;
+    }
+
+    // add back navbar height
+    if (this.meta.kiosk === 'b') {
+      visibleHeight += 55;
     }
 
     const visibleGridHeight = Math.floor(visibleHeight / (GRID_CELL_HEIGHT + GRID_CELL_VMARGIN));
diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html
index 6ec272b5ca4..74e00fea798 100644
--- a/public/app/features/dashboard/dashnav/dashnav.html
+++ b/public/app/features/dashboard/dashnav/dashnav.html
@@ -8,14 +8,14 @@
 		</a>
 	</div>
 
+	<div class="navbar__spacer"></div>
+
 	<div class="navbar-buttons navbar-buttons--playlist" ng-if="ctrl.playlistSrv.isPlaying">
 		<a class="navbar-button navbar-button--tight" ng-click="ctrl.playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
 		<a class="navbar-button navbar-button--tight" ng-click="ctrl.playlistSrv.stop()"><i class="fa fa-stop"></i></a>
 		<a class="navbar-button navbar-button--tight" ng-click="ctrl.playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
 	</div>
 
-	<div class="navbar__spacer"></div>
-
 	<div class="navbar-buttons navbar-buttons--actions">
 		<button class="btn navbar-button navbar-button--add-panel" ng-show="::ctrl.dashboard.meta.canSave" bs-tooltip="'Add panel'" data-placement="bottom" ng-click="ctrl.addPanel()">
 			<i class="gicon gicon-add-panel"></i>
@@ -25,11 +25,11 @@
 			<i class="fa" ng-class="{'fa-star-o': !ctrl.dashboard.meta.isStarred, 'fa-star': ctrl.dashboard.meta.isStarred}"></i>
 		</button>
 
-		<button class="btn navbar-button navbar-button--share" ng-show="::ctrl.dashboard.meta.canShare" ng-click="ctrl.shareDashboard(0)" bs-tooltip="'Share dashboard'" data-placement="bottom">
+    <button class="btn navbar-button navbar-button--share" ng-show="::ctrl.dashboard.meta.canShare" ng-click="ctrl.shareDashboard(0)" bs-tooltip="'Share dashboard'" data-placement="bottom">
 			<i class="fa fa-share-square-o"></i></a>
 		</button>
 
-		<button class="btn navbar-button navbar-button--save" ng-show="ctrl.dashboard.meta.canSave" ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom">
+    <button class="btn navbar-button navbar-button--save" ng-show="ctrl.dashboard.meta.canSave" ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom">
 			<i class="fa fa-save"></i>
 		</button>
 
@@ -42,6 +42,12 @@
 		</button>
 	</div>
 
+	<div class="navbar-buttons navbar-buttons--tv">
+    <button class="btn navbar-button navbar-button--tv" ng-click="ctrl.toggleViewMode()" bs-tooltip="'Cycle view mode'" data-placement="bottom">
+      <i class="fa fa-desktop"></i>
+    </button>
+  </div>
+
 	<gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="!ctrl.dashboard.timepicker.hidden"></gf-time-picker>
 
 	<div class="navbar-buttons navbar-buttons--close">
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts
index 6d6373c7e82..c4095e7948b 100644
--- a/public/app/features/dashboard/dashnav/dashnav.ts
+++ b/public/app/features/dashboard/dashnav/dashnav.ts
@@ -31,6 +31,10 @@ export class DashNavCtrl {
     this.$location.search(search);
   }
 
+  toggleViewMode() {
+    appEvents.emit('toggle-kiosk-mode');
+  }
+
   close() {
     const search = this.$location.search();
     if (search.editview) {
diff --git a/public/app/features/dashboard/export_data/export_data_modal.ts b/public/app/features/dashboard/export_data/export_data_modal.ts
index c384331963b..460f80079d9 100644
--- a/public/app/features/dashboard/export_data/export_data_modal.ts
+++ b/public/app/features/dashboard/export_data/export_data_modal.ts
@@ -5,9 +5,9 @@ import appEvents from 'app/core/app_events';
 export class ExportDataModalCtrl {
   private data: any[];
   private panel: string;
-  asRows: Boolean = true;
+  asRows = true;
   dateTimeFormat = 'YYYY-MM-DDTHH:mm:ssZ';
-  excel: false;
+  excel = false;
 
   export() {
     if (this.panel === 'table') {
diff --git a/public/app/features/dashboard/repeat_option/repeat_option.ts b/public/app/features/dashboard/repeat_option/repeat_option.ts
index 01e1d716fc5..19c28607640 100644
--- a/public/app/features/dashboard/repeat_option/repeat_option.ts
+++ b/public/app/features/dashboard/repeat_option/repeat_option.ts
@@ -7,7 +7,7 @@ const template = `
 </div>
 `;
 
-/** @ngInject **/
+/** @ngInject */
 function dashRepeatOptionDirective(variableSrv) {
   return {
     restrict: 'E',
diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts
index dabf5f85378..048a51efead 100755
--- a/public/app/features/dashboard/settings/settings.ts
+++ b/public/app/features/dashboard/settings/settings.ts
@@ -179,8 +179,8 @@ export class SettingsCtrl {
   }
 
   deleteDashboard() {
-    var confirmText = '';
-    var text2 = this.dashboard.title;
+    let confirmText = '';
+    let text2 = this.dashboard.title;
 
     const alerts = _.sumBy(this.dashboard.panels, panel => {
       return panel.alert ? 1 : 0;
diff --git a/public/app/features/dashboard/shareModalCtrl.ts b/public/app/features/dashboard/shareModalCtrl.ts
index 694329c3102..f569f2454dc 100644
--- a/public/app/features/dashboard/shareModalCtrl.ts
+++ b/public/app/features/dashboard/shareModalCtrl.ts
@@ -35,7 +35,7 @@ export function ShareModalCtrl($scope, $rootScope, $location, $timeout, timeSrv,
   };
 
   $scope.buildUrl = function() {
-    var baseUrl = $location.absUrl();
+    let baseUrl = $location.absUrl();
     const queryStart = baseUrl.indexOf('?');
 
     if (queryStart !== -1) {
@@ -72,7 +72,7 @@ export function ShareModalCtrl($scope, $rootScope, $location, $timeout, timeSrv,
 
     $scope.shareUrl = linkSrv.addParamsToUrl(baseUrl, params);
 
-    var soloUrl = baseUrl.replace(config.appSubUrl + '/dashboard/', config.appSubUrl + '/dashboard-solo/');
+    let soloUrl = baseUrl.replace(config.appSubUrl + '/dashboard/', config.appSubUrl + '/dashboard-solo/');
     soloUrl = soloUrl.replace(config.appSubUrl + '/d/', config.appSubUrl + '/d-solo/');
     delete params.fullscreen;
     delete params.edit;
diff --git a/public/app/features/dashboard/share_snapshot_ctrl.ts b/public/app/features/dashboard/share_snapshot_ctrl.ts
index c470ddb47dd..2cda493838a 100644
--- a/public/app/features/dashboard/share_snapshot_ctrl.ts
+++ b/public/app/features/dashboard/share_snapshot_ctrl.ts
@@ -2,7 +2,7 @@ import angular from 'angular';
 import _ from 'lodash';
 
 export class ShareSnapshotCtrl {
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $rootScope, $location, backendSrv, $timeout, timeSrv) {
     $scope.snapshot = {
       name: $scope.dashboard.title,
diff --git a/public/app/features/dashboard/specs/repeat.test.ts b/public/app/features/dashboard/specs/repeat.test.ts
index d8c9e3bc2ed..0fc6dc512c5 100644
--- a/public/app/features/dashboard/specs/repeat.test.ts
+++ b/public/app/features/dashboard/specs/repeat.test.ts
@@ -5,7 +5,7 @@ import { expect } from 'test/lib/common';
 jest.mock('app/core/services/context_srv', () => ({}));
 
 describe('given dashboard with panel repeat', function() {
-  var dashboard;
+  let dashboard;
 
   beforeEach(function() {
     const dashboardJSON = {
@@ -56,7 +56,7 @@ describe('given dashboard with panel repeat', function() {
 });
 
 describe('given dashboard with panel repeat in horizontal direction', function() {
-  var dashboard;
+  let dashboard;
 
   beforeEach(function() {
     dashboard = new DashboardModel({
@@ -188,7 +188,7 @@ describe('given dashboard with panel repeat in horizontal direction', function()
 });
 
 describe('given dashboard with panel repeat in vertical direction', function() {
-  var dashboard;
+  let dashboard;
 
   beforeEach(function() {
     dashboard = new DashboardModel({
diff --git a/public/app/features/dashboard/time_srv.ts b/public/app/features/dashboard/time_srv.ts
index 9435433848e..4bd78ce776d 100644
--- a/public/app/features/dashboard/time_srv.ts
+++ b/public/app/features/dashboard/time_srv.ts
@@ -13,7 +13,7 @@ export class TimeSrv {
   timeAtLoad: any;
   private autoRefreshBlocked: boolean;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private $rootScope, private $timeout, private $location, private timer, private contextSrv) {
     // default time
     this.time = { from: '6h', to: 'now' };
diff --git a/public/app/features/dashboard/timepicker/input_date.ts b/public/app/features/dashboard/timepicker/input_date.ts
index 0e5e176b72b..1e016ab0896 100644
--- a/public/app/features/dashboard/timepicker/input_date.ts
+++ b/public/app/features/dashboard/timepicker/input_date.ts
@@ -18,7 +18,7 @@ export function inputDateDirective() {
           return text;
         }
 
-        var parsed;
+        let parsed;
         if ($scope.ctrl.isUtc) {
           parsed = moment.utc(text, format);
         } else {
diff --git a/public/app/features/dashboard/timepicker/timepicker.html b/public/app/features/dashboard/timepicker/timepicker.html
index 07f97604c42..3e38881d480 100644
--- a/public/app/features/dashboard/timepicker/timepicker.html
+++ b/public/app/features/dashboard/timepicker/timepicker.html
@@ -1,18 +1,8 @@
-<div class="navbar-buttons navbar-buttons--zoom">
-	<button class="btn navbar-button navbar-button--tight" ng-click='ctrl.move(-1)'>
+<div class="navbar-buttons">
+  <button class="btn navbar-button navbar-button--tight" ng-click='ctrl.move(-1)' ng-if="ctrl.isAbsolute">
 		<i class="fa fa-chevron-left"></i>
 	</button>
 
-	<button class="btn navbar-button" bs-tooltip="'Time range zoom out <br> CTRL+Z'" data-placement="bottom" ng-click='ctrl.zoom(2)'>
-		<i class="fa fa-search-minus"></i>
-	</button>
-
-	<button class="btn navbar-button navbar-button--tight" ng-click='ctrl.move(1)'>
-		<i class="fa fa-chevron-right"></i>
-	</button>
-</div>
-
-<div class="navbar-buttons">
 	<button bs-tooltip="ctrl.tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()" class="btn navbar-button gf-timepicker-nav-btn">
 		<i class="fa fa-clock-o"></i>
 		<span ng-bind="ctrl.rangeString"></span>
@@ -20,7 +10,15 @@
 		<span ng-show="ctrl.dashboard.refresh" class="text-warning">&nbsp; Refresh every {{ctrl.dashboard.refresh}}</span>
 	</button>
 
-	<button class="btn navbar-button navbar-button--refresh" ng-click="ctrl.timeSrv.refreshDashboard()">
+  <button class="btn navbar-button navbar-button--tight" ng-click='ctrl.move(1)' ng-if="ctrl.isAbsolute">
+		<i class="fa fa-chevron-right"></i>
+	</button>
+
+  <button class="btn navbar-button navbar-button--zoom" bs-tooltip="'Time range zoom out <br> CTRL+Z'" data-placement="bottom" ng-click='ctrl.zoom(2)'>
+		<i class="fa fa-search-minus"></i>
+	</button>
+
+  <button class="btn navbar-button navbar-button--refresh" ng-click="ctrl.timeSrv.refreshDashboard()">
 		<i class="fa fa-refresh"></i>
 	</button>
 </div>
diff --git a/public/app/features/dashboard/timepicker/timepicker.ts b/public/app/features/dashboard/timepicker/timepicker.ts
index 46d45050ecd..c133203cefc 100644
--- a/public/app/features/dashboard/timepicker/timepicker.ts
+++ b/public/app/features/dashboard/timepicker/timepicker.ts
@@ -23,6 +23,7 @@ export class TimePickerCtrl {
   isUtc: boolean;
   firstDayOfWeek: number;
   isOpen: boolean;
+  isAbsolute: boolean;
 
   /** @ngInject */
   constructor(private $scope, private $rootScope, private timeSrv) {
@@ -65,6 +66,7 @@ export class TimePickerCtrl {
     this.tooltip = this.dashboard.formatDate(time.from) + ' <br>to<br>';
     this.tooltip += this.dashboard.formatDate(time.to);
     this.timeRaw = timeRaw;
+    this.isAbsolute = moment.isMoment(this.timeRaw.to);
   }
 
   zoom(factor) {
@@ -75,7 +77,7 @@ export class TimePickerCtrl {
     const range = this.timeSrv.timeRange();
 
     const timespan = (range.to.valueOf() - range.from.valueOf()) / 2;
-    var to, from;
+    let to, from;
     if (direction === -1) {
       to = range.to.valueOf() - timespan;
       from = range.from.valueOf() - timespan;
diff --git a/public/app/features/dashboard/unsaved_changes_srv.ts b/public/app/features/dashboard/unsaved_changes_srv.ts
index 0406e6a55d7..f0a8bf40501 100644
--- a/public/app/features/dashboard/unsaved_changes_srv.ts
+++ b/public/app/features/dashboard/unsaved_changes_srv.ts
@@ -2,7 +2,7 @@ import angular from 'angular';
 import { ChangeTracker } from './change_tracker';
 
 /** @ngInject */
-export function unsavedChangesSrv($rootScope, $q, $location, $timeout, contextSrv, dashboardSrv, $window) {
+export function unsavedChangesSrv(this: any, $rootScope, $q, $location, $timeout, contextSrv, dashboardSrv, $window) {
   this.init = function(dashboard, scope) {
     this.tracker = new ChangeTracker(dashboard, scope, 1000, $location, $window, $timeout, contextSrv, $rootScope);
     return this.tracker;
diff --git a/public/app/features/dashboard/upload.ts b/public/app/features/dashboard/upload.ts
index cd911f51543..7f7a177ac4b 100644
--- a/public/app/features/dashboard/upload.ts
+++ b/public/app/features/dashboard/upload.ts
@@ -21,7 +21,7 @@ function uploadDashboardDirective(timer, alertSrv, $location) {
         const files = evt.target.files; // FileList object
         const readerOnload = function() {
           return function(e) {
-            var dash;
+            let dash;
             try {
               dash = JSON.parse(e.target.result);
             } catch (err) {
@@ -36,7 +36,7 @@ function uploadDashboardDirective(timer, alertSrv, $location) {
           };
         };
 
-        for (var i = 0, f; (f = files[i]); i++) {
+        for (let i = 0, f; (f = files[i]); i++) {
           const reader = new FileReader();
           reader.onload = readerOnload();
           reader.readAsText(f);
diff --git a/public/app/features/dashlinks/editor.ts b/public/app/features/dashlinks/editor.ts
index aba297603b3..a4ba9ea209a 100644
--- a/public/app/features/dashlinks/editor.ts
+++ b/public/app/features/dashlinks/editor.ts
@@ -1,7 +1,7 @@
 import angular from 'angular';
 import _ from 'lodash';
 
-export var iconMap = {
+export let iconMap = {
   'external link': 'fa-external-link',
   dashboard: 'fa-th-large',
   question: 'fa-question',
diff --git a/public/app/features/dashlinks/module.ts b/public/app/features/dashlinks/module.ts
index 492ed81a31e..aab6817b327 100644
--- a/public/app/features/dashlinks/module.ts
+++ b/public/app/features/dashlinks/module.ts
@@ -20,7 +20,7 @@ function dashLink($compile, $sanitize, linkSrv) {
     restrict: 'E',
     link: function(scope, elem) {
       const link = scope.link;
-      var template =
+      let template =
         '<div class="gf-form">' +
         '<a class="pointer gf-form-label" data-placement="bottom"' +
         (link.asDropdown ? ' ng-click="fillDropdown(link)" data-toggle="dropdown"' : '') +
diff --git a/public/app/features/org/change_password_ctrl.ts b/public/app/features/org/change_password_ctrl.ts
index b84cbecfea7..033ff807721 100644
--- a/public/app/features/org/change_password_ctrl.ts
+++ b/public/app/features/org/change_password_ctrl.ts
@@ -2,7 +2,7 @@ import angular from 'angular';
 import config from 'app/core/config';
 
 export class ChangePasswordCtrl {
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, backendSrv, $location, navModelSrv) {
     $scope.command = {};
     $scope.authProxyEnabled = config.authProxyEnabled;
diff --git a/public/app/features/org/create_team_ctrl.ts b/public/app/features/org/create_team_ctrl.ts
index 241e96968a0..d016d85afc0 100644
--- a/public/app/features/org/create_team_ctrl.ts
+++ b/public/app/features/org/create_team_ctrl.ts
@@ -5,7 +5,7 @@ export default class CreateTeamCtrl {
   email: string;
   navModel: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private backendSrv, private $location, navModelSrv) {
     this.navModel = navModelSrv.getNav('cfg', 'teams', 0);
   }
diff --git a/public/app/features/org/new_org_ctrl.ts b/public/app/features/org/new_org_ctrl.ts
index 91b16adc113..bc87010c100 100644
--- a/public/app/features/org/new_org_ctrl.ts
+++ b/public/app/features/org/new_org_ctrl.ts
@@ -2,7 +2,7 @@ import angular from 'angular';
 import config from 'app/core/config';
 
 export class NewOrgCtrl {
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $http, backendSrv, navModelSrv) {
     $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs', 1);
     $scope.newOrg = { name: '' };
diff --git a/public/app/features/org/org_api_keys_ctrl.ts b/public/app/features/org/org_api_keys_ctrl.ts
index 4ea40b900c7..668d6a86841 100644
--- a/public/app/features/org/org_api_keys_ctrl.ts
+++ b/public/app/features/org/org_api_keys_ctrl.ts
@@ -1,7 +1,7 @@
 import angular from 'angular';
 
 export class OrgApiKeysCtrl {
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $http, backendSrv, navModelSrv) {
     $scope.navModel = navModelSrv.getNav('cfg', 'apikeys', 0);
 
diff --git a/public/app/features/org/org_details_ctrl.ts b/public/app/features/org/org_details_ctrl.ts
index 7bc6ee1336b..2ec1b57e170 100644
--- a/public/app/features/org/org_details_ctrl.ts
+++ b/public/app/features/org/org_details_ctrl.ts
@@ -1,7 +1,7 @@
 import angular from 'angular';
 
 export class OrgDetailsCtrl {
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $http, backendSrv, contextSrv, navModelSrv) {
     $scope.init = function() {
       $scope.getOrgInfo();
diff --git a/public/app/features/org/prefs_control.ts b/public/app/features/org/prefs_control.ts
index 6c6ffdf647d..74dde250eec 100644
--- a/public/app/features/org/prefs_control.ts
+++ b/public/app/features/org/prefs_control.ts
@@ -14,7 +14,7 @@ export class PrefsControlCtrl {
   ];
   themes: any = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }];
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private backendSrv, private $location) {}
 
   $onInit() {
diff --git a/public/app/features/org/profile_ctrl.ts b/public/app/features/org/profile_ctrl.ts
index 40ee4d908a1..d394fc4319a 100644
--- a/public/app/features/org/profile_ctrl.ts
+++ b/public/app/features/org/profile_ctrl.ts
@@ -12,7 +12,7 @@ export class ProfileCtrl {
   readonlyLoginFields = config.disableLoginForm;
   navModel: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private backendSrv, private contextSrv, private $location, navModelSrv) {
     this.getUser();
     this.getUserTeams();
diff --git a/public/app/features/org/select_org_ctrl.ts b/public/app/features/org/select_org_ctrl.ts
index 199d1f8ac94..34cfc9b7df4 100644
--- a/public/app/features/org/select_org_ctrl.ts
+++ b/public/app/features/org/select_org_ctrl.ts
@@ -2,7 +2,7 @@ import angular from 'angular';
 import config from 'app/core/config';
 
 export class SelectOrgCtrl {
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, backendSrv, contextSrv) {
     contextSrv.sidemenu = false;
 
diff --git a/public/app/features/org/user_invite_ctrl.ts b/public/app/features/org/user_invite_ctrl.ts
index 36dde418b2c..9f3b641035a 100644
--- a/public/app/features/org/user_invite_ctrl.ts
+++ b/public/app/features/org/user_invite_ctrl.ts
@@ -5,7 +5,7 @@ export class UserInviteCtrl {
   invite: any;
   inviteForm: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private backendSrv, navModelSrv, private $location) {
     this.navModel = navModelSrv.getNav('cfg', 'users', 0);
 
diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts
index ec934387c1f..5eecf6036d8 100644
--- a/public/app/features/panel/metrics_panel_ctrl.ts
+++ b/public/app/features/panel/metrics_panel_ctrl.ts
@@ -75,7 +75,7 @@ class MetricsPanelCtrl extends PanelCtrl {
     // if we have snapshot data use that
     if (this.panel.snapshotData) {
       this.updateTimeRange();
-      var data = this.panel.snapshotData;
+      let data = this.panel.snapshotData;
       // backward compatibility
       if (!_.isArray(data)) {
         data = data.data;
@@ -155,7 +155,7 @@ class MetricsPanelCtrl extends PanelCtrl {
   }
 
   calculateInterval() {
-    var intervalOverride = this.panel.interval;
+    let intervalOverride = this.panel.interval;
 
     // if no panel interval check datasource
     if (intervalOverride) {
diff --git a/public/app/features/panel/metrics_tab.ts b/public/app/features/panel/metrics_tab.ts
index e55190bf491..3a1d0abe1c2 100644
--- a/public/app/features/panel/metrics_tab.ts
+++ b/public/app/features/panel/metrics_tab.ts
@@ -110,7 +110,7 @@ export class MetricsTabCtrl {
   }
 }
 
-/** @ngInject **/
+/** @ngInject */
 export function metricsTabDirective() {
   'use strict';
   return {
diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts
index 72d46c947e5..c0fd89286bf 100644
--- a/public/app/features/panel/panel_ctrl.ts
+++ b/public/app/features/panel/panel_ctrl.ts
@@ -317,7 +317,7 @@ export class PanelCtrl {
   }
 
   getInfoContent(options) {
-    var markdown = this.panel.description;
+    let markdown = this.panel.description;
 
     if (options.mode === 'tooltip') {
       markdown = this.error || this.panel.description;
@@ -327,7 +327,7 @@ export class PanelCtrl {
     const sanitize = this.$injector.get('$sanitize');
     const templateSrv = this.$injector.get('templateSrv');
     const interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars);
-    var html = '<div class="markdown-html">';
+    let html = '<div class="markdown-html">';
 
     html += new Remarkable().render(interpolatedMarkdown);
 
diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts
index 410be0a1890..102f065cff2 100644
--- a/public/app/features/panel/panel_header.ts
+++ b/public/app/features/panel/panel_header.ts
@@ -80,7 +80,7 @@ function createMenuTemplate(ctrl) {
   return html;
 }
 
-/** @ngInject **/
+/** @ngInject */
 function panelHeader($compile) {
   return {
     restrict: 'E',
diff --git a/public/app/features/panel/query_editor_row.ts b/public/app/features/panel/query_editor_row.ts
index 211dbcfccb2..fb4c4a5cde6 100644
--- a/public/app/features/panel/query_editor_row.ts
+++ b/public/app/features/panel/query_editor_row.ts
@@ -87,7 +87,7 @@ export class QueryRowCtrl {
   }
 }
 
-/** @ngInject **/
+/** @ngInject */
 function queryEditorRowDirective() {
   return {
     restrict: 'E',
diff --git a/public/app/features/panel/query_troubleshooter.ts b/public/app/features/panel/query_troubleshooter.ts
index 3e3cd448620..e4d2eb5a302 100644
--- a/public/app/features/panel/query_troubleshooter.ts
+++ b/public/app/features/panel/query_troubleshooter.ts
@@ -40,7 +40,7 @@ export class QueryTroubleshooterCtrl {
   mockedResponse: string;
   jsonExplorer: JsonExplorer;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, private $timeout) {
     this.onRequestErrorEventListener = this.onRequestError.bind(this);
     this.onRequestResponseEventListener = this.onRequestResponse.bind(this);
@@ -87,7 +87,7 @@ export class QueryTroubleshooterCtrl {
   }
 
   handleMocking(data) {
-    var mockedData;
+    let mockedData;
     try {
       mockedData = JSON.parse(this.mockedResponse);
     } catch (err) {
diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html
index 0c35563a282..b1db4bd2b0e 100644
--- a/public/app/features/playlist/partials/playlist.html
+++ b/public/app/features/playlist/partials/playlist.html
@@ -1,9 +1,9 @@
 <page-header model="ctrl.navModel"></page-header>
 
-<div class="page-container page-body" ng-form="playlistEditForm">
+<div class="page-container page-body" ng-form="ctrl.playlistEditForm">
 
-  <h3 class="page-sub-heading" ng-hide="ctrl.isNew">Edit Playlist</h3>
-  <h3 class="page-sub-heading" ng-show="ctrl.isNew">New Playlist</h3>
+	<h3 class="page-sub-heading" ng-hide="ctrl.isNew">Edit Playlist</h3>
+	<h3 class="page-sub-heading" ng-show="ctrl.isNew">New Playlist</h3>
 
 	<p class="playlist-description">A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.</p>
 
@@ -20,79 +20,71 @@
 
 	<div class="gf-form-group">
 		<h3 class="page-headering">Dashboards</h3>
-	</div>
 
-	<div class="row">
-		<div class="col-lg-6">
-			<div class="playlist-search-containerwrapper">
-				<div class="max-width-32">
-					<h5 class="page-headering playlist-column-header">Available</h5>
-					<div style="">
-						<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
-					</div>
-				</div>
-			</div>
+		<table class="filter-table playlist-available-list">
+			<tr ng-repeat="playlistItem in ctrl.playlistItems">
+				<td ng-if="playlistItem.type === 'dashboard_by_id'">
+					<i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
+				</td>
+				<td ng-if="playlistItem.type === 'dashboard_by_tag'">
+					<a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title">
+						<i class="fa fa-tag"></i>
+						<span>{{playlistItem.title}}</span>
+					</a>
+				</td>
 
-			<div ng-if="ctrl.filteredDashboards.length > 0">
-				<table class="filter-table playlist-available-list">
-					<tr ng-repeat="playlistItem in ctrl.filteredDashboards">
-						<td>
-							<i class="icon-gf icon-gf-dashboard"></i>
-							&nbsp;&nbsp;{{playlistItem.title}}
-							<i class="fa fa-star" ng-show="playlistItem.isStarred"></i>
-						</td>
-						<td class="add-dashboard">
-							<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
-								<i class="fa fa-plus"></i>
-								Add to playlist
-							</button>
-						</td>
-					</tr>
-				</table>
-			</div>
-			<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0;">
-				<table class="filter-table playlist-available-list">
-					<tr ng-repeat="tag in ctrl.filteredTags">
-						<td>
-							<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
-								<i class="fa fa-tag"></i>
-								<span>{{tag.term}} &nbsp;({{tag.count}})</span>
-							</a>
-						</td>
-						<td class="add-dashboard">
-							<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addTagPlaylistItem(tag)">
-								<i class="fa fa-plus"></i>
-								Add to playlist
-							</button>
-						</td>
-					</tr>
-				</table>
-			</div>
-		</div>
+				<td class="selected-playlistitem-settings">
+					<button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
+						<i class="fa fa-arrow-up"></i>
+					</button>
+					<button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)">
+						<i class="fa fa-arrow-down"></i>
+					</button>
+					<button class="btn btn-inverse btn-mini" ng-click="ctrl.removePlaylistItem(playlistItem)">
+						<i class="fa fa-remove"></i>
+					</button>
+				</td>
+			</tr>
+			<tr ng-if="ctrl.playlistItems.length === 0">
+				<td><em>Playlist is empty, add dashboards below.</em></td>
+			</tr>
+		</table>
+	</div>
 
-		<div class="col-lg-6">
-			<h5 class="page headering playlist-column-header">Selected</h5>
+	<div class="gf-form-group">
+		<h3 class="page-headering">Add dashboards</h3>
+		<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>
+
+		<div ng-if="ctrl.filteredDashboards.length > 0">
 			<table class="filter-table playlist-available-list">
-				<tr ng-repeat="playlistItem in ctrl.playlistItems">
-					<td ng-if="playlistItem.type === 'dashboard_by_id'">
-						<i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
+				<tr ng-repeat="playlistItem in ctrl.filteredDashboards">
+					<td>
+						<i class="icon-gf icon-gf-dashboard"></i>
+						&nbsp;&nbsp;{{playlistItem.title}}
+						<i class="fa fa-star" ng-show="playlistItem.isStarred"></i>
+					</td>
+					<td class="add-dashboard">
+						<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
+							<i class="fa fa-plus"></i>
+							Add to playlist
+						</button>
 					</td>
-					<td ng-if="playlistItem.type === 'dashboard_by_tag'">
-						<a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title">
+				</tr>
+			</table>
+		</div>
+		<div class="playlist-search-results-container" ng-if="ctrl.filteredTags.length > 0;">
+			<table class="filter-table playlist-available-list">
+				<tr ng-repeat="tag in ctrl.filteredTags">
+					<td>
+						<a class="search-result-tag label label-tag" tag-color-from-name="tag.term">
 							<i class="fa fa-tag"></i>
-							<span>{{playlistItem.title}}</span>
+							<span>{{tag.term}} &nbsp;({{tag.count}})</span>
 						</a>
 					</td>
-
-					<td class="selected-playlistitem-settings">
-						<button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
-							<i class="fa fa-arrow-up"></i>
-						</button>
-						<button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)">
-							<i class="fa fa-arrow-down"></i>
-						</button>
-						<button class="btn btn-inverse btn-mini" ng-click="ctrl.removePlaylistItem(playlistItem)">
-							<i class="fa fa-remove"></i>
+					<td class="add-dashboard">
+						<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addTagPlaylistItem(tag)">
+							<i class="fa fa-plus"></i>
+							Add to playlist
 						</button>
 					</td>
 				</tr>
@@ -103,12 +95,8 @@
 	<div class="clearfix"></div>
 
 	<div class="gf-form-button-row">
-		<a class="btn btn-success " ng-show="ctrl.isNew"
-			ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
-			ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Create new playlist</a>
-		<a class="btn btn-success" ng-show="!ctrl.isNew()"
-			ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
-			ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a>
+		<a class="btn btn-success" ng-show="ctrl.isNew" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Create</a>
+		<a class="btn btn-success" ng-show="!ctrl.isNew" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a>
 		<a class="btn-text" ng-click="ctrl.backToList()">Cancel</a>
 	</div>
 </div>
diff --git a/public/app/features/playlist/partials/playlists.html b/public/app/features/playlist/partials/playlists.html
index ec24fc9bfd1..ce6a5498ca7 100644
--- a/public/app/features/playlist/partials/playlists.html
+++ b/public/app/features/playlist/partials/playlists.html
@@ -10,38 +10,42 @@
       </a>
     </div>
 
-    <table class="filter-table">
+    <table class="filter-table filter-table--hover">
       <thead>
-        <th>
-          <strong>Name</strong>
-        </th>
-        <th>
-          <strong>Start url</strong>
-        </th>
+        <th><strong>Name</strong></th>
+        <th style="width: 100px"></th>
         <th style="width: 78px"></th>
-        <th style="width: 78px"></th>
-        <th style="width: 25px"></th>
       </thead>
       <tr ng-repeat="playlist in ctrl.playlists">
-        <td>
+        <td class="link-td">
           <a href="playlists/edit/{{playlist.id}}">{{playlist.name}}</a>
         </td>
-        <td>
-          <a href="playlists/play/{{playlist.id}}">playlists/play/{{playlist.id}}</a>
-        </td>
-        <td class="text-center">
-          <a href="playlists/play/{{playlist.id}}" class="btn btn-inverse btn-small">
-            <i class="fa fa-play"></i>
-            Play
-          </a>
+        <td class="dropdown">
+          <button class="btn btn-inverse btn-small" data-toggle="dropdown">
+            Start playlist
+            <i class="fa fa-caret-down"></i>
+          </button>
+          <ul class="dropdown-menu" role="menu">
+            <li>
+              <a href="{{playlist.startUrl}}">
+                <i class="fa fa-play"></i> In Normal mode</span>
+              </a>
+              <a href="{{playlist.startUrl}}?kiosk=tv">
+                <i class="fa fa-play"></i> In TV mode</span>
+              </a>
+              <a href="{{playlist.startUrl}}?kiosk=tv&autofitpanels">
+                <i class="fa fa-play"></i> In TV mode <span class="muted">(with auto fit panels)</span>
+              </a>
+              <a href="{{playlist.startUrl}}?kiosk">
+                <i class="fa fa-play"></i> In Kiosk mode</span>
+              </a>
+              <a ng-href="{{playlist.startUrl}}?kiosk&autofitpanels">
+                <i class="fa fa-play"></i> In Kiosk mode <span class="muted">(with auto fit panels)</span>
+              </a>
+            </li>
+          </ul>
         </td>
-        <td class="text-right">
-          <a href="playlists/edit/{{playlist.id}}" class="btn btn-inverse btn-small">
-            <i class="fa fa-edit"></i>
-            Edit
-          </a>
-        </td>
-        <td class="text-right">
+        <td  class="text-right">
           <a ng-click="ctrl.removePlaylist(playlist)" class="btn btn-danger btn-small">
             <i class="fa fa-remove"></i>
           </a>
@@ -49,18 +53,16 @@
       </tr>
     </table>
   </div>
-
   <div ng-if="ctrl.playlists.length === 0">
     <empty-list-cta model="{
       title: 'There are no playlists created yet',
       buttonIcon: 'fa fa-plus',
       buttonLink: 'playlists/create',
       buttonTitle: ' Create Playlist',
-      proTip: 'You can run the playlist in Kiosk Mode.',
+      proTip: 'You can use playlists to remove control TVs',
       proTipLink: 'http://docs.grafana.org/reference/playlist/',
       proTipLinkTitle: 'Learn more',
       proTipTarget: '_blank'
     }" />
   </div>
-
 </div>
diff --git a/public/app/features/playlist/playlist_edit_ctrl.ts b/public/app/features/playlist/playlist_edit_ctrl.ts
index 037fa9e6f6b..3c81aff1093 100644
--- a/public/app/features/playlist/playlist_edit_ctrl.ts
+++ b/public/app/features/playlist/playlist_edit_ctrl.ts
@@ -19,29 +19,18 @@ export class PlaylistEditCtrl {
   /** @ngInject */
   constructor(private $scope, private backendSrv, private $location, $route, navModelSrv) {
     this.navModel = navModelSrv.getNav('dashboards', 'playlists', 0);
-    this.isNew = $route.current.params.id;
+    this.isNew = !$route.current.params.id;
 
     if ($route.current.params.id) {
       const playlistId = $route.current.params.id;
 
       backendSrv.get('/api/playlists/' + playlistId).then(result => {
         this.playlist = result;
-        this.navModel.node = {
-          text: result.name,
-          icon: this.navModel.node.icon,
-        };
-        this.navModel.breadcrumbs.push(this.navModel.node);
       });
 
       backendSrv.get('/api/playlists/' + playlistId + '/items').then(result => {
         this.playlistItems = result;
       });
-    } else {
-      this.navModel.node = {
-        text: 'New playlist',
-        icon: this.navModel.node.icon,
-      };
-      this.navModel.breadcrumbs.push(this.navModel.node);
     }
   }
 
@@ -88,7 +77,7 @@ export class PlaylistEditCtrl {
   }
 
   savePlaylist(playlist, playlistItems) {
-    var savePromise;
+    let savePromise;
 
     playlist.items = playlistItems;
 
diff --git a/public/app/features/playlist/playlist_routes.ts b/public/app/features/playlist/playlist_routes.ts
index 3cb9aceaefb..8e9913cbc60 100644
--- a/public/app/features/playlist/playlist_routes.ts
+++ b/public/app/features/playlist/playlist_routes.ts
@@ -19,9 +19,7 @@ function grafanaRoutes($routeProvider) {
       controller: 'PlaylistEditCtrl',
     })
     .when('/playlists/play/:id', {
-      templateUrl: 'public/app/features/playlist/partials/playlists.html',
-      controllerAs: 'ctrl',
-      controller: 'PlaylistsCtrl',
+      template: '',
       resolve: {
         init: function(playlistSrv, $route) {
           const playlistId = $route.current.params.id;
diff --git a/public/app/features/playlist/playlist_search.ts b/public/app/features/playlist/playlist_search.ts
index ee9a7ab6121..790cd393180 100644
--- a/public/app/features/playlist/playlist_search.ts
+++ b/public/app/features/playlist/playlist_search.ts
@@ -8,7 +8,7 @@ export class PlaylistSearchCtrl {
 
   /** @ngInject */
   constructor($timeout, private backendSrv) {
-    this.query = { query: '', tag: [], starred: false, limit: 30 };
+    this.query = { query: '', tag: [], starred: false, limit: 20 };
 
     $timeout(() => {
       this.query.query = '';
diff --git a/public/app/features/playlist/playlist_srv.ts b/public/app/features/playlist/playlist_srv.ts
index e95f2d59884..9d3b635a1e5 100644
--- a/public/app/features/playlist/playlist_srv.ts
+++ b/public/app/features/playlist/playlist_srv.ts
@@ -1,6 +1,8 @@
 import coreModule from '../../core/core_module';
 import kbn from 'app/core/utils/kbn';
 import appEvents from 'app/core/app_events';
+import _ from 'lodash';
+import { toUrlParams } from 'app/core/utils/url';
 
 class PlaylistSrv {
   private cancelPromise: any;
@@ -8,45 +10,30 @@ class PlaylistSrv {
   private index: number;
   private interval: any;
   private startUrl: string;
-  public isPlaying: boolean;
+  isPlaying: boolean;
 
   /** @ngInject */
-  constructor(private $location: any, private $timeout: any, private backendSrv: any, private $routeParams: any) {}
+  constructor(private $location: any, private $timeout: any, private backendSrv: any) {}
 
   next() {
     this.$timeout.cancel(this.cancelPromise);
 
     const playedAllDashboards = this.index > this.dashboards.length - 1;
-
     if (playedAllDashboards) {
-      window.location.href = this.getUrlWithKioskMode();
+      window.location.href = this.startUrl;
       return;
     }
 
     const dash = this.dashboards[this.index];
-    this.$location.url('dashboard/' + dash.uri);
+    const queryParams = this.$location.search();
+    const filteredParams = _.pickBy(queryParams, value => value !== null);
+
+    this.$location.url('dashboard/' + dash.uri + '?' + toUrlParams(filteredParams));
 
     this.index++;
     this.cancelPromise = this.$timeout(() => this.next(), this.interval);
   }
 
-  getUrlWithKioskMode() {
-    const inKioskMode = document.body.classList.contains('page-kiosk-mode');
-
-    // check if should add kiosk query param
-    if (inKioskMode && this.startUrl.indexOf('kiosk') === -1) {
-      return this.startUrl + '?kiosk=true';
-    }
-
-    // check if should remove kiosk query param
-    if (!inKioskMode) {
-      return this.startUrl.split('?')[0];
-    }
-
-    // already has kiosk query param, just return startUrl
-    return this.startUrl;
-  }
-
   prev() {
     this.index = Math.max(this.index - 2, 0);
     this.next();
@@ -59,10 +46,6 @@ class PlaylistSrv {
     this.index = 0;
     this.isPlaying = true;
 
-    if (this.$routeParams.kiosk) {
-      appEvents.emit('toggle-kiosk-mode');
-    }
-
     this.backendSrv.get(`/api/playlists/${playlistId}`).then(playlist => {
       this.backendSrv.get(`/api/playlists/${playlistId}/dashboards`).then(dashboards => {
         this.dashboards = dashboards;
@@ -73,6 +56,13 @@ class PlaylistSrv {
   }
 
   stop() {
+    if (this.isPlaying) {
+      const queryParams = this.$location.search();
+      if (queryParams.kiosk) {
+        appEvents.emit('toggle-kiosk-mode', { exit: true });
+      }
+    }
+
     this.index = 0;
     this.isPlaying = false;
 
diff --git a/public/app/features/playlist/playlists_ctrl.ts b/public/app/features/playlist/playlists_ctrl.ts
index bc7e2bb1440..b481ac4ee7f 100644
--- a/public/app/features/playlist/playlists_ctrl.ts
+++ b/public/app/features/playlist/playlists_ctrl.ts
@@ -10,7 +10,10 @@ export class PlaylistsCtrl {
     this.navModel = navModelSrv.getNav('dashboards', 'playlists', 0);
 
     backendSrv.get('/api/playlists').then(result => {
-      this.playlists = result;
+      this.playlists = result.map(item => {
+        item.startUrl = `playlists/play/${item.id}`;
+        return item;
+      });
     });
   }
 
diff --git a/public/app/features/playlist/specs/playlist_edit_ctrl.test.ts b/public/app/features/playlist/specs/playlist_edit_ctrl.test.ts
index 183947f5072..bc2e0229c6e 100644
--- a/public/app/features/playlist/specs/playlist_edit_ctrl.test.ts
+++ b/public/app/features/playlist/specs/playlist_edit_ctrl.test.ts
@@ -2,7 +2,7 @@ import '../playlist_edit_ctrl';
 import { PlaylistEditCtrl } from '../playlist_edit_ctrl';
 
 describe('PlaylistEditCtrl', () => {
-  var ctx: any;
+  let ctx: any;
   beforeEach(() => {
     const navModelSrv = {
       getNav: () => {
diff --git a/public/app/features/plugins/datasource_srv.ts b/public/app/features/plugins/datasource_srv.ts
index 2b8b9476b94..b73c91ddb2b 100644
--- a/public/app/features/plugins/datasource_srv.ts
+++ b/public/app/features/plugins/datasource_srv.ts
@@ -136,13 +136,13 @@ export class DatasourceSrv {
 
   addDataSourceVariables(list) {
     // look for data source variables
-    for (var i = 0; i < this.templateSrv.variables.length; i++) {
+    for (let i = 0; i < this.templateSrv.variables.length; i++) {
       const variable = this.templateSrv.variables[i];
       if (variable.type !== 'datasource') {
         continue;
       }
 
-      var first = variable.current.value;
+      let first = variable.current.value;
       if (first === 'default') {
         first = config.defaultDatasource;
       }
diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts
index 280622cb29a..3c1a1860ac3 100644
--- a/public/app/features/plugins/ds_edit_ctrl.ts
+++ b/public/app/features/plugins/ds_edit_ctrl.ts
@@ -4,7 +4,7 @@ import config from 'app/core/config';
 import { coreModule, appEvents } from 'app/core/core';
 import { store } from 'app/stores/store';
 
-var datasourceTypes = [];
+let datasourceTypes = [];
 
 const defaults = {
   name: '',
@@ -16,7 +16,7 @@ const defaults = {
   secureJsonData: {},
 };
 
-var datasourceCreated = false;
+let datasourceCreated = false;
 
 export class DataSourceEditCtrl {
   isNew: boolean;
diff --git a/public/app/features/plugins/plugin_component.ts b/public/app/features/plugins/plugin_component.ts
index fe895693032..dc55ee2a181 100644
--- a/public/app/features/plugins/plugin_component.ts
+++ b/public/app/features/plugins/plugin_component.ts
@@ -7,7 +7,7 @@ import { importPluginModule } from './plugin_loader';
 
 import { UnknownPanelCtrl } from 'app/plugins/panel/unknown/module';
 
-/** @ngInject **/
+/** @ngInject */
 function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $templateCache) {
   function getTemplate(component) {
     if (component.template) {
@@ -69,7 +69,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
     };
 
     const panelInfo = config.panels[scope.panel.type];
-    var panelCtrlPromise = Promise.resolve(UnknownPanelCtrl);
+    let panelCtrlPromise = Promise.resolve(UnknownPanelCtrl);
     if (panelInfo) {
       panelCtrlPromise = importPluginModule(panelInfo.module).then(function(panelModule) {
         return panelModule.PanelCtrl;
diff --git a/public/app/features/styleguide/styleguide.ts b/public/app/features/styleguide/styleguide.ts
index 26f14bf9388..4aac194d950 100644
--- a/public/app/features/styleguide/styleguide.ts
+++ b/public/app/features/styleguide/styleguide.ts
@@ -8,7 +8,7 @@ class StyleGuideCtrl {
   buttonVariants = ['-'];
   navModel: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private $routeParams, private backendSrv, navModelSrv) {
     this.navModel = navModelSrv.getNav('cfg', 'admin', 'styleguide', 1);
     this.theme = config.bootData.user.lightTheme ? 'light' : 'dark';
diff --git a/public/app/features/templating/adhoc_variable.ts b/public/app/features/templating/adhoc_variable.ts
index 3e5b2af8b6b..bc157bfd697 100644
--- a/public/app/features/templating/adhoc_variable.ts
+++ b/public/app/features/templating/adhoc_variable.ts
@@ -15,7 +15,7 @@ export class AdhocVariable implements Variable {
     skipUrlSync: false,
   };
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private model) {
     assignModelProperties(this, model, this.defaults);
   }
diff --git a/public/app/features/templating/constant_variable.ts b/public/app/features/templating/constant_variable.ts
index e727c6e98af..dcda31f43a3 100644
--- a/public/app/features/templating/constant_variable.ts
+++ b/public/app/features/templating/constant_variable.ts
@@ -17,7 +17,7 @@ export class ConstantVariable implements Variable {
     skipUrlSync: false,
   };
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private model, private variableSrv) {
     assignModelProperties(this, model, this.defaults);
   }
diff --git a/public/app/features/templating/custom_variable.ts b/public/app/features/templating/custom_variable.ts
index 4490a41a38f..fe383c68077 100644
--- a/public/app/features/templating/custom_variable.ts
+++ b/public/app/features/templating/custom_variable.ts
@@ -23,7 +23,7 @@ export class CustomVariable implements Variable {
     skipUrlSync: false,
   };
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private model, private variableSrv) {
     assignModelProperties(this, model, this.defaults);
   }
diff --git a/public/app/features/templating/datasource_variable.ts b/public/app/features/templating/datasource_variable.ts
index 366d2f89b68..4424720c7f8 100644
--- a/public/app/features/templating/datasource_variable.ts
+++ b/public/app/features/templating/datasource_variable.ts
@@ -22,7 +22,7 @@ export class DatasourceVariable implements Variable {
     skipUrlSync: false,
   };
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private model, private datasourceSrv, private variableSrv, private templateSrv) {
     assignModelProperties(this, model, this.defaults);
     this.refresh = 1;
@@ -43,14 +43,14 @@ export class DatasourceVariable implements Variable {
   updateOptions() {
     const options = [];
     const sources = this.datasourceSrv.getMetricSources({ skipVariables: true });
-    var regex;
+    let regex;
 
     if (this.regex) {
       regex = this.templateSrv.replace(this.regex, null, 'regex');
       regex = kbn.stringToJsRegex(regex);
     }
 
-    for (var i = 0; i < sources.length; i++) {
+    for (let i = 0; i < sources.length; i++) {
       const source = sources[i];
       // must match on type
       if (source.meta.id !== this.query) {
diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts
index 1222af7f93c..9dc6468415a 100644
--- a/public/app/features/templating/editor_ctrl.ts
+++ b/public/app/features/templating/editor_ctrl.ts
@@ -4,7 +4,7 @@ import { variableTypes } from './variable';
 import appEvents from 'app/core/app_events';
 
 export class VariableEditorCtrl {
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, datasourceSrv, variableSrv, templateSrv) {
     $scope.variableTypes = variableTypes;
     $scope.ctrl = {};
diff --git a/public/app/features/templating/interval_variable.ts b/public/app/features/templating/interval_variable.ts
index e6ee861f828..bb6c2a19e7f 100644
--- a/public/app/features/templating/interval_variable.ts
+++ b/public/app/features/templating/interval_variable.ts
@@ -28,7 +28,7 @@ export class IntervalVariable implements Variable {
     skipUrlSync: false,
   };
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private model, private timeSrv, private templateSrv, private variableSrv) {
     assignModelProperties(this, model, this.defaults);
     this.refresh = 2;
diff --git a/public/app/features/templating/query_variable.ts b/public/app/features/templating/query_variable.ts
index fc51b44ca04..e1ffcb837cb 100644
--- a/public/app/features/templating/query_variable.ts
+++ b/public/app/features/templating/query_variable.ts
@@ -46,7 +46,7 @@ export class QueryVariable implements Variable {
     skipUrlSync: false,
   };
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private model, private datasourceSrv, private templateSrv, private variableSrv, private timeSrv) {
     // copy model properties to this instance
     assignModelProperties(this, model, this.defaults);
@@ -91,7 +91,7 @@ export class QueryVariable implements Variable {
     if (this.useTags) {
       return this.metricFindQuery(datasource, this.tagsQuery).then(results => {
         this.tags = [];
-        for (var i = 0; i < results.length; i++) {
+        for (let i = 0; i < results.length; i++) {
           this.tags.push(results[i].text);
         }
         return datasource;
@@ -142,7 +142,7 @@ export class QueryVariable implements Variable {
   }
 
   metricNamesToVariableValues(metricNames) {
-    var regex, options, i, matches;
+    let regex, options, i, matches;
     options = [];
 
     if (this.regex) {
@@ -150,9 +150,9 @@ export class QueryVariable implements Variable {
     }
     for (i = 0; i < metricNames.length; i++) {
       const item = metricNames[i];
-      var text = item.text === undefined || item.text === null ? item.value : item.text;
+      let text = item.text === undefined || item.text === null ? item.value : item.text;
 
-      var value = item.value === undefined || item.value === null ? item.text : item.value;
+      let value = item.value === undefined || item.value === null ? item.text : item.value;
 
       if (_.isNumber(value)) {
         value = value.toString();
diff --git a/public/app/features/templating/specs/variable_srv.test.ts b/public/app/features/templating/specs/variable_srv.test.ts
index 28fd3860ed3..96b3e5b81b6 100644
--- a/public/app/features/templating/specs/variable_srv.test.ts
+++ b/public/app/features/templating/specs/variable_srv.test.ts
@@ -3,7 +3,7 @@ import { VariableSrv } from '../variable_srv';
 import moment from 'moment';
 import $q from 'q';
 
-describe('VariableSrv', function() {
+describe('VariableSrv', function(this: any) {
   const ctx = <any>{
     datasourceSrv: {},
     timeSrv: {
diff --git a/public/app/features/templating/specs/variable_srv_init.test.ts b/public/app/features/templating/specs/variable_srv_init.test.ts
index f06f533e429..978ad824d69 100644
--- a/public/app/features/templating/specs/variable_srv_init.test.ts
+++ b/public/app/features/templating/specs/variable_srv_init.test.ts
@@ -4,7 +4,7 @@ import _ from 'lodash';
 import { VariableSrv } from '../variable_srv';
 import $q from 'q';
 
-describe('VariableSrv init', function() {
+describe('VariableSrv init', function(this: any) {
   const templateSrv = {
     init: vars => {
       this.variables = vars;
diff --git a/public/app/features/templating/template_srv.ts b/public/app/features/templating/template_srv.ts
index 8e716a9f5d9..3510c729cdb 100644
--- a/public/app/features/templating/template_srv.ts
+++ b/public/app/features/templating/template_srv.ts
@@ -32,7 +32,7 @@ export class TemplateSrv {
   updateTemplateData() {
     this.index = {};
 
-    for (var i = 0; i < this.variables.length; i++) {
+    for (let i = 0; i < this.variables.length; i++) {
       const variable = this.variables[i];
 
       if (!variable.current || (!variable.current.isNone && !variable.current.value)) {
@@ -48,9 +48,9 @@ export class TemplateSrv {
   }
 
   getAdhocFilters(datasourceName) {
-    var filters = [];
+    let filters = [];
 
-    for (var i = 0; i < this.variables.length; i++) {
+    for (let i = 0; i < this.variables.length; i++) {
       const variable = this.variables[i];
       if (variable.type !== 'adhoc') {
         continue;
@@ -171,7 +171,7 @@ export class TemplateSrv {
       return variable.allValue;
     }
     const values = [];
-    for (var i = 1; i < variable.options.length; i++) {
+    for (let i = 1; i < variable.options.length; i++) {
       values.push(variable.options[i].value);
     }
     return values;
@@ -182,7 +182,7 @@ export class TemplateSrv {
       return target;
     }
 
-    var variable, systemValue, value, fmt;
+    let variable, systemValue, value, fmt;
     this.regex.lastIndex = 0;
 
     return target.replace(this.regex, (match, var1, var2, fmt2, var3, fmt3) => {
@@ -227,7 +227,7 @@ export class TemplateSrv {
       return target;
     }
 
-    var variable;
+    let variable;
     this.regex.lastIndex = 0;
 
     return target.replace(this.regex, (match, var1, var2, fmt2, var3) => {
diff --git a/public/app/features/templating/variable.ts b/public/app/features/templating/variable.ts
index 8751a64b47d..412426fb294 100644
--- a/public/app/features/templating/variable.ts
+++ b/public/app/features/templating/variable.ts
@@ -10,14 +10,14 @@ export interface Variable {
   getSaveModel();
 }
 
-export var variableTypes = {};
+export let variableTypes = {};
 export { assignModelProperties };
 
 export function containsVariable(...args: any[]) {
-  var variableName = args[args.length - 1];
-  var str = args[0] || '';
+  let variableName = args[args.length - 1];
+  let str = args[0] || '';
 
-  for (var i = 1; i < args.length - 1; i++) {
+  for (let i = 1; i < args.length - 1; i++) {
     str += ' ' + args[i] || '';
   }
 
diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts
index 55294d6fea2..22f8a909440 100644
--- a/public/app/features/templating/variable_srv.ts
+++ b/public/app/features/templating/variable_srv.ts
@@ -138,7 +138,7 @@ export class VariableSrv {
   }
 
   selectOptionsForCurrentValue(variable) {
-    var i, y, value, option;
+    let i, y, value, option;
     const selected: any = [];
 
     for (i = 0; i < variable.options.length; i++) {
@@ -167,7 +167,7 @@ export class VariableSrv {
     }
 
     if (_.isArray(variable.current.value)) {
-      var selected = this.selectOptionsForCurrentValue(variable);
+      let selected = this.selectOptionsForCurrentValue(variable);
 
       // if none pick first
       if (selected.length === 0) {
@@ -200,14 +200,14 @@ export class VariableSrv {
   }
 
   setOptionFromUrl(variable, urlValue) {
-    var promise = this.$q.when();
+    let promise = this.$q.when();
 
     if (variable.refresh) {
       promise = variable.updateOptions();
     }
 
     return promise.then(() => {
-      var option = _.find(variable.options, op => {
+      let option = _.find(variable.options, op => {
         return op.text === urlValue || op.value === urlValue;
       });
 
@@ -262,7 +262,7 @@ export class VariableSrv {
   }
 
   setAdhocFilter(options) {
-    var variable = _.find(this.variables, {
+    let variable = _.find(this.variables, {
       type: 'adhoc',
       datasource: options.datasource,
     });
diff --git a/public/app/plugins/datasource/cloudwatch/datasource.ts b/public/app/plugins/datasource/cloudwatch/datasource.ts
index 8b0905ac80b..34771618095 100644
--- a/public/app/plugins/datasource/cloudwatch/datasource.ts
+++ b/public/app/plugins/datasource/cloudwatch/datasource.ts
@@ -85,12 +85,12 @@ export default class CloudWatchDatasource {
     const end = this.convertToCloudWatchTime(options.range.to, true);
     now = Math.round((now || Date.now()) / 1000);
 
-    var period;
+    let period;
     const range = end - start;
 
     const hourSec = 60 * 60;
     const daySec = hourSec * 24;
-    var periodUnit = 60;
+    let periodUnit = 60;
     if (!target.period) {
       if (now - start <= daySec * 15) {
         // until 15 days ago
@@ -222,10 +222,10 @@ export default class CloudWatchDatasource {
   }
 
   metricFindQuery(query) {
-    var region;
-    var namespace;
-    var metricName;
-    var filterJson;
+    let region;
+    let namespace;
+    let metricName;
+    let filterJson;
 
     const regionQuery = query.match(/^regions\(\)/);
     if (regionQuery) {
@@ -291,7 +291,7 @@ export default class CloudWatchDatasource {
       return this.templateSrv.replace(s);
     });
     const defaultPeriod = annotation.prefixMatching ? '' : '300';
-    var period = annotation.period || defaultPeriod;
+    let period = annotation.period || defaultPeriod;
     period = parseInt(period, 10);
     const parameters = {
       prefixMatching: annotation.prefixMatching,
diff --git a/public/app/plugins/datasource/cloudwatch/query_ctrl.ts b/public/app/plugins/datasource/cloudwatch/query_ctrl.ts
index 0d250935445..55b7786e302 100644
--- a/public/app/plugins/datasource/cloudwatch/query_ctrl.ts
+++ b/public/app/plugins/datasource/cloudwatch/query_ctrl.ts
@@ -6,7 +6,7 @@ export class CloudWatchQueryCtrl extends QueryCtrl {
 
   aliasSyntax: string;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $injector) {
     super($scope, $injector);
     this.aliasSyntax = '{{metric}} {{stat}} {{namespace}} {{region}} {{<dimension name>}}';
diff --git a/public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts b/public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts
index e69c99c8ad9..065a7100b09 100644
--- a/public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts
+++ b/public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts
@@ -120,7 +120,7 @@ export class CloudWatchQueryParameterCtrl {
       }
 
       const target = $scope.target;
-      var query = $q.when([]);
+      let query = $q.when([]);
 
       if (segment.type === 'key' || segment.type === 'plus-button') {
         query = $scope.datasource.getDimensionKeys($scope.target.namespace, $scope.target.region);
@@ -164,7 +164,7 @@ export class CloudWatchQueryParameterCtrl {
       const dims = {};
       const length = $scope.dimSegments.length;
 
-      for (var i = 0; i < length - 2; i += 3) {
+      for (let i = 0; i < length - 2; i += 3) {
         const keySegment = $scope.dimSegments[i];
         const valueSegment = $scope.dimSegments[i + 2];
         if (!valueSegment.fake) {
diff --git a/public/app/plugins/datasource/elasticsearch/bucket_agg.ts b/public/app/plugins/datasource/elasticsearch/bucket_agg.ts
index dba0596874d..8c8e00b34ec 100644
--- a/public/app/plugins/datasource/elasticsearch/bucket_agg.ts
+++ b/public/app/plugins/datasource/elasticsearch/bucket_agg.ts
@@ -84,7 +84,7 @@ export class ElasticBucketAggCtrl {
       $scope.isFirst = $scope.index === 0;
       $scope.bucketAggCount = bucketAggs.length;
 
-      var settingsLinkText = '';
+      let settingsLinkText = '';
       const settings = $scope.agg.settings || {};
 
       switch ($scope.agg.type) {
@@ -199,7 +199,7 @@ export class ElasticBucketAggCtrl {
     $scope.addBucketAgg = function() {
       // if last is date histogram add it before
       const lastBucket = bucketAggs[bucketAggs.length - 1];
-      var addIndex = bucketAggs.length - 1;
+      let addIndex = bucketAggs.length - 1;
 
       if (lastBucket && lastBucket.type === 'date_histogram') {
         addIndex -= 1;
diff --git a/public/app/plugins/datasource/elasticsearch/datasource.ts b/public/app/plugins/datasource/elasticsearch/datasource.ts
index 632f8add61f..ab763773dac 100644
--- a/public/app/plugins/datasource/elasticsearch/datasource.ts
+++ b/public/app/plugins/datasource/elasticsearch/datasource.ts
@@ -151,9 +151,9 @@ export class ElasticDatasource {
         }
 
         const fieldNames = fieldName.split('.');
-        var fieldValue = source;
+        let fieldValue = source;
 
-        for (var i = 0; i < fieldNames.length; i++) {
+        for (let i = 0; i < fieldNames.length; i++) {
           fieldValue = fieldValue[fieldNames[i]];
           if (!fieldValue) {
             console.log('could not find field in annotation: ', fieldName);
@@ -164,9 +164,9 @@ export class ElasticDatasource {
         return fieldValue;
       };
 
-      for (var i = 0; i < hits.length; i++) {
+      for (let i = 0; i < hits.length; i++) {
         const source = hits[i]._source;
-        var time = getFieldFromSource(source, timeField);
+        let time = getFieldFromSource(source, timeField);
         if (typeof hits[i].fields !== 'undefined') {
           const fields = hits[i].fields;
           if (_.isString(fields[timeField]) || _.isNumber(fields[timeField])) {
@@ -203,7 +203,7 @@ export class ElasticDatasource {
     this.timeSrv.setTime({ from: 'now-1m', to: 'now' }, true);
     // validate that the index exist and has date field
     return this.getFields({ type: 'date' }).then(
-      function(dateFields) {
+      dateFields => {
         const timeField = _.find(dateFields, { text: this.timeField });
         if (!timeField) {
           return {
@@ -212,11 +212,11 @@ export class ElasticDatasource {
           };
         }
         return { status: 'success', message: 'Index OK. Time field name OK.' };
-      }.bind(this),
+      },
       function(err) {
         console.log(err);
         if (err.data && err.data.error) {
-          var message = angular.toJson(err.data.error);
+          let message = angular.toJson(err.data.error);
           if (err.data.error.reason) {
             message = err.data.error.reason;
           }
@@ -241,14 +241,14 @@ export class ElasticDatasource {
   }
 
   query(options) {
-    var payload = '';
-    var target;
+    let payload = '';
+    let target;
     const sentTargets = [];
 
     // add global adhoc filters to timeFilter
     const adhocFilters = this.templateSrv.getAdhocFilters(this.name);
 
-    for (var i = 0; i < options.targets.length; i++) {
+    for (let i = 0; i < options.targets.length; i++) {
       target = options.targets[i];
       if (target.hide) {
         continue;
@@ -362,7 +362,7 @@ export class ElasticDatasource {
     const range = this.timeSrv.timeRange();
     const searchType = this.esVersion >= 5 ? 'query_then_fetch' : 'count';
     const header = this.getQueryHeader(searchType, range.from, range.to);
-    var esQuery = angular.toJson(this.queryBuilder.getTermsQuery(queryDef));
+    let esQuery = angular.toJson(this.queryBuilder.getTermsQuery(queryDef));
 
     esQuery = esQuery.replace(/\$timeFrom/g, range.from.valueOf());
     esQuery = esQuery.replace(/\$timeTo/g, range.to.valueOf());
diff --git a/public/app/plugins/datasource/elasticsearch/elastic_response.ts b/public/app/plugins/datasource/elasticsearch/elastic_response.ts
index 1341b7830e9..2be97423176 100644
--- a/public/app/plugins/datasource/elasticsearch/elastic_response.ts
+++ b/public/app/plugins/datasource/elasticsearch/elastic_response.ts
@@ -9,7 +9,7 @@ export class ElasticResponse {
   }
 
   processMetrics(esAgg, target, seriesList, props) {
-    var metric, y, i, newSeries, bucket, value;
+    let metric, y, i, newSeries, bucket, value;
 
     for (y = 0; y < target.metrics.length; y++) {
       metric = target.metrics[y];
@@ -177,7 +177,7 @@ export class ElasticResponse {
   // This is quite complex
   // need to recurise down the nested buckets to build series
   processBuckets(aggs, target, seriesList, table, props, depth) {
-    var bucket, aggDef, esAgg, aggId;
+    let bucket, aggDef, esAgg, aggId;
     const maxDepth = target.bucketAggs.length - 1;
 
     for (aggId in aggs) {
@@ -213,7 +213,7 @@ export class ElasticResponse {
   }
 
   private getMetricName(metric) {
-    var metricDef = _.find(queryDef.metricAggTypes, { value: metric });
+    let metricDef = _.find(queryDef.metricAggTypes, { value: metric });
     if (!metricDef) {
       metricDef = _.find(queryDef.extendedStats, { value: metric });
     }
@@ -222,7 +222,7 @@ export class ElasticResponse {
   }
 
   private getSeriesName(series, target, metricTypeCount) {
-    var metricName = this.getMetricName(series.metric);
+    let metricName = this.getMetricName(series.metric);
 
     if (target.alias) {
       const regex = /\{\{([\s\S]+?)\}\}/g;
@@ -263,7 +263,7 @@ export class ElasticResponse {
       return metricName;
     }
 
-    var name = '';
+    let name = '';
     for (const propName in series.props) {
       name += series.props[propName] + ' ';
     }
@@ -278,7 +278,7 @@ export class ElasticResponse {
   nameSeries(seriesList, target) {
     const metricTypeCount = _.uniq(_.map(seriesList, 'metric')).length;
 
-    for (var i = 0; i < seriesList.length; i++) {
+    for (let i = 0; i < seriesList.length; i++) {
       const series = seriesList[i];
       series.target = this.getSeriesName(series, target, metricTypeCount);
     }
@@ -292,7 +292,7 @@ export class ElasticResponse {
       total: hits.total,
       filterable: true,
     };
-    var propName, hit, doc, i;
+    let propName, hit, doc, i;
 
     for (i = 0; i < hits.hits.length; i++) {
       hit = hits.hits[i];
@@ -351,7 +351,7 @@ export class ElasticResponse {
   getTimeSeries() {
     const seriesList = [];
 
-    for (var i = 0; i < this.response.responses.length; i++) {
+    for (let i = 0; i < this.response.responses.length; i++) {
       const response = this.response.responses[i];
       if (response.error) {
         throw this.getErrorFromElasticResponse(this.response, response.error);
@@ -371,7 +371,7 @@ export class ElasticResponse {
         this.trimDatapoints(tmpSeriesList, target);
         this.nameSeries(tmpSeriesList, target);
 
-        for (var y = 0; y < tmpSeriesList.length; y++) {
+        for (let y = 0; y < tmpSeriesList.length; y++) {
           seriesList.push(tmpSeriesList[y]);
         }
 
diff --git a/public/app/plugins/datasource/elasticsearch/metric_agg.ts b/public/app/plugins/datasource/elasticsearch/metric_agg.ts
index e0e1215b00f..61e2f52354b 100644
--- a/public/app/plugins/datasource/elasticsearch/metric_agg.ts
+++ b/public/app/plugins/datasource/elasticsearch/metric_agg.ts
@@ -140,7 +140,7 @@ export class ElasticMetricAggCtrl {
     $scope.updateMovingAvgModelSettings = function() {
       const modelSettingsKeys = [];
       const modelSettings = queryDef.getMovingAvgSettings($scope.agg.settings.model, false);
-      for (var i = 0; i < modelSettings.length; i++) {
+      for (let i = 0; i < modelSettings.length; i++) {
         modelSettingsKeys.push(modelSettings[i].value);
       }
 
diff --git a/public/app/plugins/datasource/elasticsearch/query_builder.ts b/public/app/plugins/datasource/elasticsearch/query_builder.ts
index 0ef1c4ceab5..a4d92397d80 100644
--- a/public/app/plugins/datasource/elasticsearch/query_builder.ts
+++ b/public/app/plugins/datasource/elasticsearch/query_builder.ts
@@ -21,7 +21,7 @@ export class ElasticQueryBuilder {
   }
 
   buildTermsAgg(aggDef, queryNode, target) {
-    var metricRef, metric, y;
+    let metricRef, metric, y;
     queryNode.terms = { field: aggDef.field };
 
     if (!aggDef.settings) {
@@ -94,9 +94,9 @@ export class ElasticQueryBuilder {
 
   getFiltersAgg(aggDef) {
     const filterObj = {};
-    for (var i = 0; i < aggDef.settings.filters.length; i++) {
+    for (let i = 0; i < aggDef.settings.filters.length; i++) {
       const query = aggDef.settings.filters[i].query;
-      var label = aggDef.settings.filters[i].label;
+      let label = aggDef.settings.filters[i].label;
       label = label === '' || label === undefined ? query : label;
       filterObj[label] = {
         query_string: {
@@ -133,7 +133,7 @@ export class ElasticQueryBuilder {
       return;
     }
 
-    var i, filter, condition, queryCondition;
+    let i, filter, condition, queryCondition;
 
     for (i = 0; i < adhocFilters.length; i++) {
       filter = adhocFilters[i];
@@ -181,7 +181,7 @@ export class ElasticQueryBuilder {
     target.bucketAggs = target.bucketAggs || [{ type: 'date_histogram', id: '2', settings: { interval: 'auto' } }];
     target.timeField = this.timeField;
 
-    var i, nestedAggs, metric;
+    let i, nestedAggs, metric;
     const query = {
       size: 0,
       query: {
@@ -258,7 +258,7 @@ export class ElasticQueryBuilder {
       }
 
       const aggField = {};
-      var metricAgg = null;
+      let metricAgg = null;
 
       if (queryDef.isPipelineAgg(metric.type)) {
         if (metric.pipelineAgg && /^\d*$/.test(metric.pipelineAgg)) {
@@ -302,7 +302,7 @@ export class ElasticQueryBuilder {
       });
     }
 
-    var size = 500;
+    let size = 500;
     if (queryDef.size) {
       size = queryDef.size;
     }
diff --git a/public/app/plugins/datasource/elasticsearch/query_ctrl.ts b/public/app/plugins/datasource/elasticsearch/query_ctrl.ts
index 1aea8fe4717..422d35dd277 100644
--- a/public/app/plugins/datasource/elasticsearch/query_ctrl.ts
+++ b/public/app/plugins/datasource/elasticsearch/query_ctrl.ts
@@ -12,7 +12,7 @@ export class ElasticQueryCtrl extends QueryCtrl {
   esVersion: any;
   rawQueryOld: string;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $injector, private $rootScope, private uiSegmentSrv) {
     super($scope, $injector);
 
@@ -43,7 +43,7 @@ export class ElasticQueryCtrl extends QueryCtrl {
     const bucketAggs = this.target.bucketAggs;
     const metricAggTypes = queryDef.getMetricAggTypes(this.esVersion);
     const bucketAggTypes = queryDef.bucketAggTypes;
-    var text = '';
+    let text = '';
 
     if (this.target.query) {
       text += 'Query: ' + this.target.query + ', ';
diff --git a/public/app/plugins/datasource/elasticsearch/specs/datasource.test.ts b/public/app/plugins/datasource/elasticsearch/specs/datasource.test.ts
index d37d1d86d54..a54a3f50f86 100644
--- a/public/app/plugins/datasource/elasticsearch/specs/datasource.test.ts
+++ b/public/app/plugins/datasource/elasticsearch/specs/datasource.test.ts
@@ -5,7 +5,7 @@ import { ElasticDatasource } from '../datasource';
 
 import * as dateMath from 'app/core/utils/datemath';
 
-describe('ElasticDatasource', function() {
+describe('ElasticDatasource', function(this: any) {
   const backendSrv = {
     datasourceRequest: jest.fn(),
   };
diff --git a/public/app/plugins/datasource/elasticsearch/specs/elastic_response.test.ts b/public/app/plugins/datasource/elasticsearch/specs/elastic_response.test.ts
index ea9d10f989f..8b41e71145a 100644
--- a/public/app/plugins/datasource/elasticsearch/specs/elastic_response.test.ts
+++ b/public/app/plugins/datasource/elasticsearch/specs/elastic_response.test.ts
@@ -1,9 +1,9 @@
 import { ElasticResponse } from '../elastic_response';
 
 describe('ElasticResponse', () => {
-  var targets;
-  var response;
-  var result;
+  let targets;
+  let response;
+  let result;
 
   describe('simple query and count', () => {
     beforeEach(() => {
@@ -48,7 +48,7 @@ describe('ElasticResponse', () => {
   });
 
   describe('simple query count & avg aggregation', () => {
-    var result;
+    let result;
 
     beforeEach(() => {
       targets = [
@@ -97,7 +97,7 @@ describe('ElasticResponse', () => {
   });
 
   describe('single group by query one metric', () => {
-    var result;
+    let result;
 
     beforeEach(() => {
       targets = [
@@ -149,7 +149,7 @@ describe('ElasticResponse', () => {
   });
 
   describe('single group by query two metrics', () => {
-    var result;
+    let result;
 
     beforeEach(() => {
       targets = [
@@ -209,7 +209,7 @@ describe('ElasticResponse', () => {
   });
 
   describe('with percentiles ', () => {
-    var result;
+    let result;
 
     beforeEach(() => {
       targets = [
@@ -257,7 +257,7 @@ describe('ElasticResponse', () => {
   });
 
   describe('with extended_stats', () => {
-    var result;
+    let result;
 
     beforeEach(() => {
       targets = [
@@ -333,7 +333,7 @@ describe('ElasticResponse', () => {
   });
 
   describe('single group by with alias pattern', () => {
-    var result;
+    let result;
 
     beforeEach(() => {
       targets = [
@@ -394,7 +394,7 @@ describe('ElasticResponse', () => {
   });
 
   describe('histogram response', () => {
-    var result;
+    let result;
 
     beforeEach(() => {
       targets = [
@@ -426,7 +426,7 @@ describe('ElasticResponse', () => {
   });
 
   describe('with two filters agg', () => {
-    var result;
+    let result;
 
     beforeEach(() => {
       targets = [
diff --git a/public/app/plugins/datasource/graphite/add_graphite_func.ts b/public/app/plugins/datasource/graphite/add_graphite_func.ts
index f025b4f1830..c63df9d934d 100644
--- a/public/app/plugins/datasource/graphite/add_graphite_func.ts
+++ b/public/app/plugins/datasource/graphite/add_graphite_func.ts
@@ -35,7 +35,7 @@ export function graphiteAddFunc($compile) {
           minLength: 1,
           items: 10,
           updater: function(value) {
-            var funcDef = ctrl.datasource.getFuncDef(value);
+            let funcDef = ctrl.datasource.getFuncDef(value);
             if (!funcDef) {
               // try find close match
               value = value.toLowerCase();
@@ -81,7 +81,7 @@ export function graphiteAddFunc($compile) {
         $compile(elem.contents())($scope);
       });
 
-      var drop;
+      let drop;
       const cleanUpDrop = function() {
         if (drop) {
           drop.destroy();
@@ -90,10 +90,10 @@ export function graphiteAddFunc($compile) {
       };
 
       $(elem)
-        .on('mouseenter', 'ul.dropdown-menu li', function() {
+        .on('mouseenter', 'ul.dropdown-menu li', () => {
           cleanUpDrop();
 
-          var funcDef;
+          let funcDef;
           try {
             funcDef = ctrl.datasource.getFuncDef($('a', this).text());
           } catch (e) {
@@ -101,7 +101,7 @@ export function graphiteAddFunc($compile) {
           }
 
           if (funcDef && funcDef.description) {
-            var shortDesc = funcDef.description;
+            let shortDesc = funcDef.description;
             if (shortDesc.length > 500) {
               shortDesc = shortDesc.substring(0, 497) + '...';
             }
diff --git a/public/app/plugins/datasource/graphite/datasource.ts b/public/app/plugins/datasource/graphite/datasource.ts
index e86bf828207..cd58e511d62 100644
--- a/public/app/plugins/datasource/graphite/datasource.ts
+++ b/public/app/plugins/datasource/graphite/datasource.ts
@@ -4,7 +4,7 @@ import { isVersionGtOrEq, SemVersion } from 'app/core/utils/version';
 import gfunc from './gfunc';
 
 /** @ngInject */
-export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv) {
+export function GraphiteDatasource(this: any, instanceSettings, $q, backendSrv, templateSrv) {
   this.basicAuth = instanceSettings.basicAuth;
   this.url = instanceSettings.url;
   this.name = instanceSettings.name;
@@ -74,9 +74,9 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv
     if (!result || !result.data) {
       return [];
     }
-    for (var i = 0; i < result.data.length; i++) {
+    for (let i = 0; i < result.data.length; i++) {
       const series = result.data[i];
-      for (var y = 0; y < series.datapoints.length; y++) {
+      for (let y = 0; y < series.datapoints.length; y++) {
         series.datapoints[y][1] *= 1000;
       }
     }
@@ -109,10 +109,10 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv
       return this.query(graphiteQuery).then(function(result) {
         const list = [];
 
-        for (var i = 0; i < result.data.length; i++) {
+        for (let i = 0; i < result.data.length; i++) {
           const target = result.data[i];
 
-          for (var y = 0; y < target.datapoints.length; y++) {
+          for (let y = 0; y < target.datapoints.length; y++) {
             const datapoint = target.datapoints[y];
             if (!datapoint[0]) {
               continue;
@@ -133,10 +133,10 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv
       const tags = templateSrv.replace(options.annotation.tags);
       return this.events({ range: options.rangeRaw, tags: tags }).then(results => {
         const list = [];
-        for (var i = 0; i < results.data.length; i++) {
+        for (let i = 0; i < results.data.length; i++) {
           const e = results.data[i];
 
-          var tags = e.tags;
+          let tags = e.tags;
           if (_.isString(e.tags)) {
             tags = this.parseTags(e.tags);
           }
@@ -157,7 +157,7 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv
 
   this.events = function(options) {
     try {
-      var tags = '';
+      let tags = '';
       if (options.tags) {
         tags = '&tags=' + options.tags;
       }
@@ -493,10 +493,10 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv
     const graphite_options = ['from', 'until', 'rawData', 'format', 'maxDataPoints', 'cacheTimeout'];
     const clean_options = [],
       targets = {};
-    var target, targetValue, i;
+    let target, targetValue, i;
     const regex = /\#([A-Z])/g;
     const intervalFormatFixRegex = /'(\d+)m'/gi;
-    var hasTargets = false;
+    let hasTargets = false;
 
     options['format'] = 'json';
 
diff --git a/public/app/plugins/datasource/graphite/func_editor.ts b/public/app/plugins/datasource/graphite/func_editor.ts
index 2d68dbbfa8a..dfef2be2a61 100644
--- a/public/app/plugins/datasource/graphite/func_editor.ts
+++ b/public/app/plugins/datasource/graphite/func_editor.ts
@@ -24,11 +24,11 @@ export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
       const $funcControls = $(funcControlsTemplate);
       const ctrl = $scope.ctrl;
       const func = $scope.func;
-      var scheduledRelink = false;
-      var paramCountAtLink = 0;
-      var cancelBlur = null;
+      let scheduledRelink = false;
+      let paramCountAtLink = 0;
+      let cancelBlur = null;
 
-      function clickFuncParam(paramIndex) {
+      function clickFuncParam(this: any, paramIndex) {
         /*jshint validthis:true */
 
         const $link = $(this);
@@ -108,7 +108,7 @@ export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
       }
 
       // this = input element
-      function inputBlur(paramIndex) {
+      function inputBlur(this: any, paramIndex) {
         /*jshint validthis:true */
         const inputElem = this;
         // happens long before the click event on the typeahead options
@@ -118,14 +118,14 @@ export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
         }, 200);
       }
 
-      function inputKeyPress(paramIndex, e) {
+      function inputKeyPress(this: any, paramIndex, e) {
         /*jshint validthis:true */
         if (e.which === 13) {
           $(this).blur();
         }
       }
 
-      function inputKeyDown() {
+      function inputKeyDown(this: any) {
         /*jshint validthis:true */
         this.style.width = (3 + this.value.length) * 8 + 'px';
       }
@@ -133,7 +133,7 @@ export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
       function addTypeahead($input, paramIndex) {
         $input.attr('data-provide', 'typeahead');
 
-        var options = paramDef(paramIndex).options;
+        let options = paramDef(paramIndex).options;
         if (paramDef(paramIndex).type === 'int') {
           options = _.map(options, function(val) {
             return val.toString();
@@ -190,7 +190,7 @@ export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
             return false;
           }
 
-          var paramValue = templateSrv.highlightVariablesAsHtml(func.params[index]);
+          let paramValue = templateSrv.highlightVariablesAsHtml(func.params[index]);
 
           const last = index >= func.params.length - 1 && param.optional && !paramValue;
           if (last && param.multiple) {
diff --git a/public/app/plugins/datasource/graphite/gfunc.ts b/public/app/plugins/datasource/graphite/gfunc.ts
index aee3e6ea19a..35cf6385324 100644
--- a/public/app/plugins/datasource/graphite/gfunc.ts
+++ b/public/app/plugins/datasource/graphite/gfunc.ts
@@ -964,26 +964,23 @@ export class FuncInstance {
   render(metricExp) {
     const str = this.def.name + '(';
 
-    const parameters = _.map(
-      this.params,
-      function(value, index) {
-        var paramType;
-        if (index < this.def.params.length) {
-          paramType = this.def.params[index].type;
-        } else if (_.get(_.last(this.def.params), 'multiple')) {
-          paramType = _.get(_.last(this.def.params), 'type');
-        }
-        // param types that should never be quoted
-        if (_.includes(['value_or_series', 'boolean', 'int', 'float', 'node'], paramType)) {
-          return value;
-        }
-        // param types that might be quoted
-        if (_.includes(['int_or_interval', 'node_or_tag'], paramType) && _.isFinite(+value)) {
-          return _.toString(+value);
-        }
-        return "'" + value + "'";
-      }.bind(this)
-    );
+    const parameters = _.map(this.params, (value, index) => {
+      let paramType;
+      if (index < this.def.params.length) {
+        paramType = this.def.params[index].type;
+      } else if (_.get(_.last(this.def.params), 'multiple')) {
+        paramType = _.get(_.last(this.def.params), 'type');
+      }
+      // param types that should never be quoted
+      if (_.includes(['value_or_series', 'boolean', 'int', 'float', 'node'], paramType)) {
+        return value;
+      }
+      // param types that might be quoted
+      if (_.includes(['int_or_interval', 'node_or_tag'], paramType) && _.isFinite(+value)) {
+        return _.toString(+value);
+      }
+      return "'" + value + "'";
+    });
 
     // don't send any blank parameters to graphite
     while (parameters[parameters.length - 1] === '') {
@@ -1017,12 +1014,9 @@ export class FuncInstance {
     // handle optional parameters
     // if string contains ',' and next param is optional, split and update both
     if (this._hasMultipleParamsInString(strValue, index)) {
-      _.each(
-        strValue.split(','),
-        function(partVal, idx) {
-          this.updateParam(partVal.trim(), index + idx);
-        }.bind(this)
-      );
+      _.each(strValue.split(','), (partVal, idx) => {
+        this.updateParam(partVal.trim(), index + idx);
+      });
       return;
     }
 
@@ -1041,7 +1035,7 @@ export class FuncInstance {
       return;
     }
 
-    var text = this.def.name + '(';
+    let text = this.def.name + '(';
     text += this.params.join(', ');
     text += ')';
     this.text = text;
@@ -1086,7 +1080,7 @@ function parseFuncDefs(rawDefs) {
       return;
     }
 
-    var description = funcDef.description;
+    let description = funcDef.description;
     if (description) {
       // tidy up some pydoc syntax that rst2html can't handle
       description = description
diff --git a/public/app/plugins/datasource/graphite/graphite_query.ts b/public/app/plugins/datasource/graphite/graphite_query.ts
index 4cea22f13e2..20179e0e509 100644
--- a/public/app/plugins/datasource/graphite/graphite_query.ts
+++ b/public/app/plugins/datasource/graphite/graphite_query.ts
@@ -179,7 +179,7 @@ export default class GraphiteQuery {
     delete targetsByRefId[target.refId];
 
     const nestedSeriesRefRegex = /\#([A-Z])/g;
-    var targetWithNestedQueries = target.target;
+    let targetWithNestedQueries = target.target;
 
     // Use ref count to track circular references
     function countTargetRefs(targetsByRefId, refId) {
diff --git a/public/app/plugins/datasource/graphite/lexer.ts b/public/app/plugins/datasource/graphite/lexer.ts
index 2ed85026bca..1f2da854991 100644
--- a/public/app/plugins/datasource/graphite/lexer.ts
+++ b/public/app/plugins/datasource/graphite/lexer.ts
@@ -900,7 +900,7 @@ const unicodeLetterTable = [
 
 const identifierStartTable = [];
 
-for (var i = 0; i < 128; i++) {
+for (let i = 0; i < 128; i++) {
   identifierStartTable[i] =
     (i >= 48 && i <= 57) || // 0-9
     i === 36 || // $
@@ -922,7 +922,7 @@ for (var i = 0; i < 128; i++) {
 
 const identifierPartTable = identifierStartTable;
 
-export function Lexer(expression) {
+export function Lexer(this: any, expression) {
   this.input = expression;
   this.char = 1;
   this.from = 1;
@@ -941,7 +941,7 @@ Lexer.prototype = {
 
   tokenize: function() {
     const list = [];
-    var token;
+    let token;
     while ((token = this.next())) {
       list.push(token);
     }
@@ -964,7 +964,7 @@ Lexer.prototype = {
       }
     }
 
-    var match = this.scanStringLiteral();
+    let match = this.scanStringLiteral();
     if (match) {
       return match;
     }
@@ -1007,9 +1007,9 @@ Lexer.prototype = {
    * (true/false) and NullLiteral (null).
    */
   scanIdentifier: function() {
-    var id = '';
-    var index = 0;
-    var type, char;
+    let id = '';
+    let index = 0;
+    let type, char;
 
     // Detects any character in the Unicode categories "Uppercase
     // letter (Lu)", "Lowercase letter (Ll)", "Titlecase letter
@@ -1020,7 +1020,7 @@ Lexer.prototype = {
     // Google's Traceur.
 
     function isUnicodeLetter(code) {
-      for (var i = 0; i < unicodeLetterTable.length; ) {
+      for (let i = 0; i < unicodeLetterTable.length; ) {
         if (code < unicodeLetterTable[i++]) {
           return false;
         }
@@ -1037,7 +1037,7 @@ Lexer.prototype = {
       return /^[0-9a-fA-F]$/.test(str);
     }
 
-    const readUnicodeEscapeSequence = _.bind(function() {
+    const readUnicodeEscapeSequence = _.bind(function(this: any) {
       /*jshint validthis:true */
       index += 1;
 
@@ -1049,7 +1049,7 @@ Lexer.prototype = {
       const ch2 = this.peek(index + 2);
       const ch3 = this.peek(index + 3);
       const ch4 = this.peek(index + 4);
-      var code;
+      let code;
 
       if (isHexDigit(ch1) && isHexDigit(ch2) && isHexDigit(ch3) && isHexDigit(ch4)) {
         code = parseInt(ch1 + ch2 + ch3 + ch4, 16);
@@ -1065,7 +1065,7 @@ Lexer.prototype = {
       return null;
     }, this);
 
-    const getIdentifierStart = _.bind(function() {
+    const getIdentifierStart = _.bind(function(this: any) {
       /*jshint validthis:true */
       const chr = this.peek(index);
       const code = chr.charCodeAt(0);
@@ -1096,7 +1096,7 @@ Lexer.prototype = {
       return null;
     }, this);
 
-    const getIdentifierPart = _.bind(function() {
+    const getIdentifierPart = _.bind(function(this: any) {
       /*jshint validthis:true */
       const chr = this.peek(index);
       const code = chr.charCodeAt(0);
@@ -1168,11 +1168,11 @@ Lexer.prototype = {
    * scanNumericLiteral function in the Esprima parser's source code.
    */
   scanNumericLiteral: function(): any {
-    var index = 0;
-    var value = '';
+    let index = 0;
+    let value = '';
     const length = this.input.length;
-    var char = this.peek(index);
-    var bad;
+    let char = this.peek(index);
+    let bad;
 
     function isDecimalDigit(str) {
       return /^[0-9]$/.test(str);
@@ -1418,7 +1418,7 @@ Lexer.prototype = {
       return null;
     }
 
-    var value = '';
+    let value = '';
 
     this.skip();
 
diff --git a/public/app/plugins/datasource/graphite/parser.ts b/public/app/plugins/datasource/graphite/parser.ts
index 158fa94b6a6..cb394c05a15 100644
--- a/public/app/plugins/datasource/graphite/parser.ts
+++ b/public/app/plugins/datasource/graphite/parser.ts
@@ -1,6 +1,6 @@
 import { Lexer } from './lexer';
 
-export function Parser(expression) {
+export function Parser(this: any, expression) {
   this.expression = expression;
   this.lexer = new Lexer(expression);
   this.tokens = this.lexer.tokenize();
@@ -26,7 +26,7 @@ Parser.prototype = {
 
   curlyBraceSegment: function() {
     if (this.match('identifier', '{') || this.match('{')) {
-      var curlySegment = '';
+      let curlySegment = '';
 
       while (!this.match('') && !this.match('}')) {
         curlySegment += this.consumeToken().value;
diff --git a/public/app/plugins/datasource/graphite/query_ctrl.ts b/public/app/plugins/datasource/graphite/query_ctrl.ts
index a83df9297de..fa908c5e955 100644
--- a/public/app/plugins/datasource/graphite/query_ctrl.ts
+++ b/public/app/plugins/datasource/graphite/query_ctrl.ts
@@ -19,7 +19,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
   supportsTags: boolean;
   paused: boolean;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $injector, private uiSegmentSrv, private templateSrv, $timeout) {
     super($scope, $injector);
     this.supportsTags = this.datasource.supportsTags;
@@ -106,7 +106,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
   }
 
   getAltSegments(index, prefix) {
-    var query = prefix && prefix.length > 0 ? '*' + prefix + '*' : '*';
+    let query = prefix && prefix.length > 0 ? '*' + prefix + '*' : '*';
     if (index > 0) {
       query = this.queryModel.getSegmentPathUpTo(index) + '.' + query;
     }
@@ -291,7 +291,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
       return;
     }
 
-    for (var i = 0; i < this.segments.length; i++) {
+    for (let i = 0; i < this.segments.length; i++) {
       if (this.segments[i].value.indexOf('*') >= 0) {
         func.params[0] = i;
         func.added = false;
diff --git a/public/app/plugins/datasource/influxdb/datasource.ts b/public/app/plugins/datasource/influxdb/datasource.ts
index 07a11343f55..d9fd1a3605d 100644
--- a/public/app/plugins/datasource/influxdb/datasource.ts
+++ b/public/app/plugins/datasource/influxdb/datasource.ts
@@ -40,14 +40,14 @@ export default class InfluxDatasource {
   }
 
   query(options) {
-    var timeFilter = this.getTimeFilter(options);
+    let timeFilter = this.getTimeFilter(options);
     const scopedVars = options.scopedVars;
     const targets = _.cloneDeep(options.targets);
     const queryTargets = [];
-    var queryModel;
-    var i, y;
+    let queryModel;
+    let i, y;
 
-    var allQueries = _.map(targets, target => {
+    let allQueries = _.map(targets, target => {
       if (target.hide) {
         return '';
       }
@@ -95,7 +95,7 @@ export default class InfluxDatasource {
         }
 
         const target = queryTargets[i];
-        var alias = target.alias;
+        let alias = target.alias;
         if (alias) {
           alias = this.templateSrv.replace(target.alias, options.scopedVars);
         }
@@ -132,7 +132,7 @@ export default class InfluxDatasource {
     }
 
     const timeFilter = this.getTimeFilter({ rangeRaw: options.rangeRaw });
-    var query = options.annotation.query.replace('$timeFilter', timeFilter);
+    let query = options.annotation.query.replace('$timeFilter', timeFilter);
     query = this.templateSrv.replace(query, null, 'regex');
 
     return this._seriesQuery(query, options).then(data => {
diff --git a/public/app/plugins/datasource/influxdb/influx_query.ts b/public/app/plugins/datasource/influxdb/influx_query.ts
index 503b341aa5b..e9158739327 100644
--- a/public/app/plugins/datasource/influxdb/influx_query.ts
+++ b/public/app/plugins/datasource/influxdb/influx_query.ts
@@ -125,9 +125,9 @@ export default class InfluxQuery {
   }
 
   private renderTagCondition(tag, index, interpolate) {
-    var str = '';
-    var operator = tag.operator;
-    var value = tag.value;
+    let str = '';
+    let operator = tag.operator;
+    let value = tag.value;
     if (index > 0) {
       str = (tag.condition || 'AND') + ' ';
     }
@@ -156,8 +156,8 @@ export default class InfluxQuery {
   }
 
   getMeasurementAndPolicy(interpolate) {
-    var policy = this.target.policy;
-    var measurement = this.target.measurement || 'measurement';
+    let policy = this.target.policy;
+    let measurement = this.target.measurement || 'measurement';
 
     if (!measurement.match('^/.*/$')) {
       measurement = '"' + measurement + '"';
@@ -199,11 +199,11 @@ export default class InfluxQuery {
       }
     }
 
-    var query = 'SELECT ';
-    var i, y;
+    let query = 'SELECT ';
+    let i, y;
     for (i = 0; i < this.selectModels.length; i++) {
       const parts = this.selectModels[i];
-      var selectText = '';
+      let selectText = '';
       for (y = 0; y < parts.length; y++) {
         const part = parts[y];
         selectText = part.render(selectText);
@@ -226,7 +226,7 @@ export default class InfluxQuery {
 
     query += '$timeFilter';
 
-    var groupBySection = '';
+    let groupBySection = '';
     for (i = 0; i < this.groupByParts.length; i++) {
       const part = this.groupByParts[i];
       if (i > 0) {
diff --git a/public/app/plugins/datasource/influxdb/influx_series.ts b/public/app/plugins/datasource/influxdb/influx_series.ts
index d68d0c26696..a9268979592 100644
--- a/public/app/plugins/datasource/influxdb/influx_series.ts
+++ b/public/app/plugins/datasource/influxdb/influx_series.ts
@@ -14,7 +14,7 @@ export default class InfluxSeries {
 
   getTimeSeries() {
     const output = [];
-    var i, j;
+    let i, j;
 
     if (this.series.length === 0) {
       return output;
@@ -27,7 +27,7 @@ export default class InfluxSeries {
       });
 
       for (j = 1; j < columns; j++) {
-        var seriesName = series.name;
+        let seriesName = series.name;
         const columnName = series.columns[j];
         if (columnName !== 'value') {
           seriesName = seriesName + '.' + columnName;
@@ -86,10 +86,10 @@ export default class InfluxSeries {
     const list = [];
 
     _.each(this.series, series => {
-      var titleCol = null;
-      var timeCol = null;
+      let titleCol = null;
+      let timeCol = null;
       const tagsCol = [];
-      var textCol = null;
+      let textCol = null;
 
       _.each(series.columns, (column, index) => {
         if (column === 'time') {
@@ -143,7 +143,7 @@ export default class InfluxSeries {
 
   getTable() {
     const table = new TableModel();
-    var i, j;
+    let i, j;
 
     if (this.series.length === 0) {
       return table;
diff --git a/public/app/plugins/datasource/influxdb/query_builder.ts b/public/app/plugins/datasource/influxdb/query_builder.ts
index f4ac4373ab6..3d5ce476c69 100644
--- a/public/app/plugins/datasource/influxdb/query_builder.ts
+++ b/public/app/plugins/datasource/influxdb/query_builder.ts
@@ -1,9 +1,9 @@
 import _ from 'lodash';
 
 function renderTagCondition(tag, index) {
-  var str = '';
-  var operator = tag.operator;
-  var value = tag.value;
+  let str = '';
+  let operator = tag.operator;
+  let value = tag.value;
   if (index > 0) {
     str = (tag.condition || 'AND') + ' ';
   }
@@ -28,9 +28,9 @@ export class InfluxQueryBuilder {
   constructor(private target, private database?) {}
 
   buildExploreQuery(type: string, withKey?: string, withMeasurementFilter?: string) {
-    var query;
-    var measurement;
-    var policy;
+    let query;
+    let measurement;
+    let policy;
 
     if (type === 'TAG_KEYS') {
       query = 'SHOW TAG KEYS';
diff --git a/public/app/plugins/datasource/influxdb/query_ctrl.ts b/public/app/plugins/datasource/influxdb/query_ctrl.ts
index 5ef8f2c7d1d..4a9310c63d1 100644
--- a/public/app/plugins/datasource/influxdb/query_ctrl.ts
+++ b/public/app/plugins/datasource/influxdb/query_ctrl.ts
@@ -19,7 +19,7 @@ export class InfluxQueryCtrl extends QueryCtrl {
   measurementSegment: any;
   removeTagFilterSegment: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $injector, private templateSrv, private $q, private uiSegmentSrv) {
     super($scope, $injector);
     this.target = this.target;
@@ -279,7 +279,7 @@ export class InfluxQueryCtrl extends QueryCtrl {
       }
     }
 
-    var query, addTemplateVars;
+    let query, addTemplateVars;
     if (segment.type === 'key' || segment.type === 'plus-button') {
       query = this.queryBuilder.buildExploreQuery('TAG_KEYS');
       addTemplateVars = false;
@@ -343,8 +343,8 @@ export class InfluxQueryCtrl extends QueryCtrl {
 
   rebuildTargetTagConditions() {
     const tags = [];
-    var tagIndex = 0;
-    var tagOperator = '';
+    let tagIndex = 0;
+    let tagOperator = '';
 
     _.each(this.tagSegments, (segment2, index) => {
       if (segment2.type === 'key') {
diff --git a/public/app/plugins/datasource/influxdb/query_part.ts b/public/app/plugins/datasource/influxdb/query_part.ts
index e03ff82d5f0..22cac9bb608 100644
--- a/public/app/plugins/datasource/influxdb/query_part.ts
+++ b/public/app/plugins/datasource/influxdb/query_part.ts
@@ -41,7 +41,7 @@ function fieldRenderer(part, innerExpr) {
 
 function replaceAggregationAddStrategy(selectParts, partModel) {
   // look for existing aggregation
-  for (var i = 0; i < selectParts.length; i++) {
+  for (let i = 0; i < selectParts.length; i++) {
     const part = selectParts[i];
     if (part.def.category === categories.Aggregations) {
       if (part.def.type === partModel.def.type) {
@@ -79,7 +79,7 @@ function replaceAggregationAddStrategy(selectParts, partModel) {
 }
 
 function addTransformationStrategy(selectParts, partModel) {
-  var i;
+  let i;
   // look for index to add transformation
   for (i = 0; i < selectParts.length; i++) {
     const part = selectParts[i];
diff --git a/public/app/plugins/datasource/mssql/datasource.ts b/public/app/plugins/datasource/mssql/datasource.ts
index f30ea4c97fe..fc497b2c274 100644
--- a/public/app/plugins/datasource/mssql/datasource.ts
+++ b/public/app/plugins/datasource/mssql/datasource.ts
@@ -6,7 +6,7 @@ export class MssqlDatasource {
   name: any;
   responseParser: ResponseParser;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(instanceSettings, private backendSrv, private $q, private templateSrv) {
     this.name = instanceSettings.name;
     this.id = instanceSettings.id;
diff --git a/public/app/plugins/datasource/mssql/module.ts b/public/app/plugins/datasource/mssql/module.ts
index a2e1e923bc6..478ecadcb3e 100644
--- a/public/app/plugins/datasource/mssql/module.ts
+++ b/public/app/plugins/datasource/mssql/module.ts
@@ -21,7 +21,7 @@ class MssqlAnnotationsQueryCtrl {
 
   annotation: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor() {
     this.annotation.rawQuery = this.annotation.rawQuery || defaultQuery;
   }
diff --git a/public/app/plugins/datasource/mssql/query_ctrl.ts b/public/app/plugins/datasource/mssql/query_ctrl.ts
index 1b64a571c6c..7598ca292fe 100644
--- a/public/app/plugins/datasource/mssql/query_ctrl.ts
+++ b/public/app/plugins/datasource/mssql/query_ctrl.ts
@@ -33,7 +33,7 @@ export class MssqlQueryCtrl extends QueryCtrl {
   lastQueryError: string;
   showHelp: boolean;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $injector) {
     super($scope, $injector);
 
diff --git a/public/app/plugins/datasource/mysql/datasource.ts b/public/app/plugins/datasource/mysql/datasource.ts
index e41417e155c..eca223f2d6d 100644
--- a/public/app/plugins/datasource/mysql/datasource.ts
+++ b/public/app/plugins/datasource/mysql/datasource.ts
@@ -6,7 +6,7 @@ export class MysqlDatasource {
   name: any;
   responseParser: ResponseParser;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(instanceSettings, private backendSrv, private $q, private templateSrv) {
     this.name = instanceSettings.name;
     this.id = instanceSettings.id;
diff --git a/public/app/plugins/datasource/mysql/module.ts b/public/app/plugins/datasource/mysql/module.ts
index bb5b5bd9056..2d8caf17af4 100644
--- a/public/app/plugins/datasource/mysql/module.ts
+++ b/public/app/plugins/datasource/mysql/module.ts
@@ -20,7 +20,7 @@ class MysqlAnnotationsQueryCtrl {
 
   annotation: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor() {
     this.annotation.rawQuery = this.annotation.rawQuery || defaultQuery;
   }
diff --git a/public/app/plugins/datasource/mysql/query_ctrl.ts b/public/app/plugins/datasource/mysql/query_ctrl.ts
index 1de1fb768ad..ced4d6e8b13 100644
--- a/public/app/plugins/datasource/mysql/query_ctrl.ts
+++ b/public/app/plugins/datasource/mysql/query_ctrl.ts
@@ -31,7 +31,7 @@ export class MysqlQueryCtrl extends QueryCtrl {
   lastQueryError: string;
   showHelp: boolean;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $injector) {
     super($scope, $injector);
 
diff --git a/public/app/plugins/datasource/opentsdb/datasource.ts b/public/app/plugins/datasource/opentsdb/datasource.ts
index 699c5f4dad3..863f4654696 100644
--- a/public/app/plugins/datasource/opentsdb/datasource.ts
+++ b/public/app/plugins/datasource/opentsdb/datasource.ts
@@ -39,15 +39,12 @@ export default class OpenTsDatasource {
     const end = this.convertToTSDBTime(options.rangeRaw.to, true);
     const qs = [];
 
-    _.each(
-      options.targets,
-      function(target) {
-        if (!target.metric) {
-          return;
-        }
-        qs.push(this.convertTargetToQuery(target, options, this.tsdbVersion));
-      }.bind(this)
-    );
+    _.each(options.targets, target => {
+      if (!target.metric) {
+        return;
+      }
+      qs.push(this.convertTargetToQuery(target, options, this.tsdbVersion));
+    });
 
     const queries = _.compact(qs);
 
@@ -75,30 +72,19 @@ export default class OpenTsDatasource {
       return query.hide !== true;
     });
 
-    return this.performTimeSeriesQuery(queries, start, end).then(
-      function(response) {
-        const metricToTargetMapping = this.mapMetricsToTargets(response.data, options, this.tsdbVersion);
-        const result = _.map(
-          response.data,
-          function(metricData, index) {
-            index = metricToTargetMapping[index];
-            if (index === -1) {
-              index = 0;
-            }
-            this._saveTagKeys(metricData);
-
-            return this.transformMetricData(
-              metricData,
-              groupByTags,
-              options.targets[index],
-              options,
-              this.tsdbResolution
-            );
-          }.bind(this)
-        );
-        return { data: result };
-      }.bind(this)
-    );
+    return this.performTimeSeriesQuery(queries, start, end).then(response => {
+      const metricToTargetMapping = this.mapMetricsToTargets(response.data, options, this.tsdbVersion);
+      const result = _.map(response.data, (metricData, index) => {
+        index = metricToTargetMapping[index];
+        if (index === -1) {
+          index = 0;
+        }
+        this._saveTagKeys(metricData);
+
+        return this.transformMetricData(metricData, groupByTags, options.targets[index], options, this.tsdbResolution);
+      });
+      return { data: result };
+    });
   }
 
   annotationQuery(options) {
@@ -114,7 +100,7 @@ export default class OpenTsDatasource {
     return this.performTimeSeriesQuery(queries, start, end).then(
       function(results) {
         if (results.data[0]) {
-          var annotationObject = results.data[0].annotations;
+          let annotationObject = results.data[0].annotations;
           if (options.annotation.isGlobal) {
             annotationObject = results.data[0].globalAnnotations;
           }
@@ -137,7 +123,7 @@ export default class OpenTsDatasource {
 
   targetContainsTemplate(target) {
     if (target.filters && target.filters.length > 0) {
-      for (var i = 0; i < target.filters.length; i++) {
+      for (let i = 0; i < target.filters.length; i++) {
         if (this.templateSrv.variableExists(target.filters[i].filter)) {
           return true;
         }
@@ -156,7 +142,7 @@ export default class OpenTsDatasource {
   }
 
   performTimeSeriesQuery(queries, start, end) {
-    var msResolution = false;
+    let msResolution = false;
     if (this.tsdbResolution === 2) {
       msResolution = true;
     }
@@ -213,7 +199,7 @@ export default class OpenTsDatasource {
       return key.trim();
     });
     const key = keysArray[0];
-    var keysQuery = key + '=*';
+    let keysQuery = key + '=*';
 
     if (keysArray.length > 1) {
       keysQuery += ',' + keysArray.splice(1).join(',');
@@ -278,7 +264,7 @@ export default class OpenTsDatasource {
       return this.$q.when([]);
     }
 
-    var interpolated;
+    let interpolated;
     try {
       interpolated = this.templateSrv.replace(query, {}, 'distributed');
     } catch (err) {
@@ -385,7 +371,7 @@ export default class OpenTsDatasource {
       return this.templateSrv.replace(target.alias, scopedVars);
     }
 
-    var label = md.metric;
+    let label = md.metric;
     const tagData = [];
 
     if (!_.isEmpty(md.tags)) {
@@ -438,7 +424,7 @@ export default class OpenTsDatasource {
     }
 
     if (!target.disableDownsampling) {
-      var interval = this.templateSrv.replace(target.downsampleInterval || options.interval);
+      let interval = this.templateSrv.replace(target.downsampleInterval || options.interval);
 
       if (interval.match(/\.[0-9]+s/)) {
         interval = parseFloat(interval) * 1000 + 'ms';
@@ -479,7 +465,7 @@ export default class OpenTsDatasource {
   }
 
   mapMetricsToTargets(metrics, options, tsdbVersion) {
-    var interpolatedTagValue, arrTagV;
+    let interpolatedTagValue, arrTagV;
     return _.map(metrics, metricData => {
       if (tsdbVersion === 3) {
         return metricData.query.index;
diff --git a/public/app/plugins/datasource/opentsdb/query_ctrl.ts b/public/app/plugins/datasource/opentsdb/query_ctrl.ts
index e00a01ebd9f..4c8a0ed8d12 100644
--- a/public/app/plugins/datasource/opentsdb/query_ctrl.ts
+++ b/public/app/plugins/datasource/opentsdb/query_ctrl.ts
@@ -19,7 +19,7 @@ export class OpenTsQueryCtrl extends QueryCtrl {
   addTagMode: boolean;
   addFilterMode: boolean;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $injector) {
     super($scope, $injector);
 
diff --git a/public/app/plugins/datasource/postgres/config_ctrl.ts b/public/app/plugins/datasource/postgres/config_ctrl.ts
index 7c7745aeaf1..a396b9f9aa4 100644
--- a/public/app/plugins/datasource/postgres/config_ctrl.ts
+++ b/public/app/plugins/datasource/postgres/config_ctrl.ts
@@ -7,7 +7,7 @@ export class PostgresConfigCtrl {
   datasourceSrv: any;
   showTimescaleDBHelp: boolean;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, datasourceSrv) {
     this.datasourceSrv = datasourceSrv;
     this.current.jsonData.sslmode = this.current.jsonData.sslmode || 'verify-full';
@@ -34,8 +34,8 @@ export class PostgresConfigCtrl {
           });
         }
 
-        let major = Math.trunc(version / 100);
-        let minor = version % 100;
+        const major = Math.trunc(version / 100);
+        const minor = version % 100;
         let name = String(major);
         if (version < 1000) {
           name = String(major) + '.' + String(minor);
diff --git a/public/app/plugins/datasource/postgres/datasource.ts b/public/app/plugins/datasource/postgres/datasource.ts
index 918a4859203..6522032b39f 100644
--- a/public/app/plugins/datasource/postgres/datasource.ts
+++ b/public/app/plugins/datasource/postgres/datasource.ts
@@ -9,7 +9,7 @@ export class PostgresDatasource {
   responseParser: ResponseParser;
   queryModel: PostgresQuery;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(instanceSettings, private backendSrv, private $q, private templateSrv, private timeSrv) {
     this.name = instanceSettings.name;
     this.id = instanceSettings.id;
@@ -41,7 +41,7 @@ export class PostgresDatasource {
     const queries = _.filter(options.targets, target => {
       return target.hide !== true;
     }).map(target => {
-      let queryModel = new PostgresQuery(target, this.templateSrv, options.scopedVars);
+      const queryModel = new PostgresQuery(target, this.templateSrv, options.scopedVars);
 
       return {
         refId: target.refId,
@@ -110,7 +110,7 @@ export class PostgresDatasource {
       format: 'table',
     };
 
-    let range = this.timeSrv.timeRange();
+    const range = this.timeSrv.timeRange();
     const data = {
       queries: [interpolatedQuery],
       from: range.from.valueOf().toString(),
diff --git a/public/app/plugins/datasource/postgres/meta_query.ts b/public/app/plugins/datasource/postgres/meta_query.ts
index cd251ca5e49..0c54cc26cad 100644
--- a/public/app/plugins/datasource/postgres/meta_query.ts
+++ b/public/app/plugins/datasource/postgres/meta_query.ts
@@ -25,7 +25,7 @@ export class PostgresMetaQuery {
 
   findMetricTable() {
     // query that returns first table found that has a timestamp(tz) column and a float column
-    let query = `
+    const query = `
 SELECT
 	quote_ident(table_name) as table_name,
 	( SELECT
@@ -74,7 +74,7 @@ LIMIT 1
   }
 
   buildSchemaConstraint() {
-    let query = `
+    const query = `
 table_schema IN (
 	SELECT CASE WHEN trim(unnest) = \'"$user"\' THEN user ELSE trim(unnest) END
   FROM unnest(string_to_array(current_setting(\'search_path\'),\',\'))
@@ -87,7 +87,7 @@ table_schema IN (
 
     // check for schema qualified table
     if (table.includes('.')) {
-      let parts = table.split('.');
+      const parts = table.split('.');
       query = 'table_schema = ' + this.quoteIdentAsLiteral(parts[0]);
       query += ' AND table_name = ' + this.quoteIdentAsLiteral(parts[1]);
       return query;
diff --git a/public/app/plugins/datasource/postgres/module.ts b/public/app/plugins/datasource/postgres/module.ts
index b5b052f12b9..f81cdb7c371 100644
--- a/public/app/plugins/datasource/postgres/module.ts
+++ b/public/app/plugins/datasource/postgres/module.ts
@@ -17,7 +17,7 @@ class PostgresAnnotationsQueryCtrl {
 
   annotation: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor() {
     this.annotation.rawQuery = this.annotation.rawQuery || defaultQuery;
   }
diff --git a/public/app/plugins/datasource/postgres/postgres_query.ts b/public/app/plugins/datasource/postgres/postgres_query.ts
index 3e055f42f03..fd0987f2761 100644
--- a/public/app/plugins/datasource/postgres/postgres_query.ts
+++ b/public/app/plugins/datasource/postgres/postgres_query.ts
@@ -73,12 +73,12 @@ export default class PostgresQuery {
       return this.quoteLiteral(value);
     }
 
-    let escapedValues = _.map(value, this.quoteLiteral);
+    const escapedValues = _.map(value, this.quoteLiteral);
     return escapedValues.join(',');
   }
 
   render(interpolate?) {
-    let target = this.target;
+    const target = this.target;
 
     // new query with no table set yet
     if (!this.target.rawQuery && !('table' in this.target)) {
@@ -101,7 +101,7 @@ export default class PostgresQuery {
   }
 
   buildTimeColumn(alias = true) {
-    let timeGroup = this.hasTimeGroup();
+    const timeGroup = this.hasTimeGroup();
     let query;
     let macro = '$__timeGroup';
 
@@ -139,7 +139,7 @@ export default class PostgresQuery {
 
   buildValueColumns() {
     let query = '';
-    for (let column of this.target.select) {
+    for (const column of this.target.select) {
       query += ',\n  ' + this.buildValueColumn(column);
     }
 
@@ -149,14 +149,14 @@ export default class PostgresQuery {
   buildValueColumn(column) {
     let query = '';
 
-    let columnName = _.find(column, (g: any) => g.type === 'column');
+    const columnName = _.find(column, (g: any) => g.type === 'column');
     query = columnName.params[0];
 
-    let aggregate = _.find(column, (g: any) => g.type === 'aggregate' || g.type === 'percentile');
-    let windows = _.find(column, (g: any) => g.type === 'window' || g.type === 'moving_window');
+    const aggregate = _.find(column, (g: any) => g.type === 'aggregate' || g.type === 'percentile');
+    const windows = _.find(column, (g: any) => g.type === 'window' || g.type === 'moving_window');
 
     if (aggregate) {
-      let func = aggregate.params[0];
+      const func = aggregate.params[0];
       switch (aggregate.type) {
         case 'aggregate':
           if (func === 'first' || func === 'last') {
@@ -172,13 +172,13 @@ export default class PostgresQuery {
     }
 
     if (windows) {
-      let overParts = [];
+      const overParts = [];
       if (this.hasMetricColumn()) {
         overParts.push('PARTITION BY ' + this.target.metricColumn);
       }
       overParts.push('ORDER BY ' + this.buildTimeColumn(false));
 
-      let over = overParts.join(' ');
+      const over = overParts.join(' ');
       let curr: string;
       let prev: string;
       switch (windows.type) {
@@ -211,7 +211,7 @@ export default class PostgresQuery {
       }
     }
 
-    let alias = _.find(column, (g: any) => g.type === 'alias');
+    const alias = _.find(column, (g: any) => g.type === 'alias');
     if (alias) {
       query += ' AS ' + this.quoteIdentifier(alias.params[0]);
     }
@@ -221,7 +221,7 @@ export default class PostgresQuery {
 
   buildWhereClause() {
     let query = '';
-    let conditions = _.map(this.target.where, (tag, index) => {
+    const conditions = _.map(this.target.where, (tag, index) => {
       switch (tag.type) {
         case 'macro':
           return tag.name + '(' + this.target.timeColumn + ')';
@@ -244,7 +244,7 @@ export default class PostgresQuery {
     let groupSection = '';
 
     for (let i = 0; i < this.target.group.length; i++) {
-      let part = this.target.group[i];
+      const part = this.target.group[i];
       if (i > 0) {
         groupSection += ', ';
       }
diff --git a/public/app/plugins/datasource/postgres/query_ctrl.ts b/public/app/plugins/datasource/postgres/query_ctrl.ts
index 6102b0cd562..1cb8bfa5a05 100644
--- a/public/app/plugins/datasource/postgres/query_ctrl.ts
+++ b/public/app/plugins/datasource/postgres/query_ctrl.ts
@@ -39,7 +39,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
   whereParts: SqlPart[];
   groupAdd: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $injector, private templateSrv, private $q, private uiSegmentSrv) {
     super($scope, $injector);
     this.target = this.target;
@@ -119,7 +119,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
 
   buildSelectMenu() {
     this.selectMenu = [];
-    let aggregates = {
+    const aggregates = {
       text: 'Aggregate Functions',
       value: 'aggregate',
       submenu: [
@@ -143,7 +143,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
 
     // ordered set aggregates require postgres 9.4+
     if (this.datasource.jsonData.postgresVersion >= 904) {
-      let aggregates2 = {
+      const aggregates2 = {
         text: 'Ordered-Set Aggregate Functions',
         value: 'percentile',
         submenu: [
@@ -154,7 +154,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
       this.selectMenu.push(aggregates2);
     }
 
-    let windows = {
+    const windows = {
       text: 'Window Functions',
       value: 'window',
       submenu: [
@@ -187,7 +187,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
   }
 
   resetPlusButton(button) {
-    let plusButton = this.uiSegmentSrv.newPlusButton();
+    const plusButton = this.uiSegmentSrv.newPlusButton();
     button.html = plusButton.html;
     button.value = plusButton.value;
   }
@@ -205,21 +205,21 @@ export class PostgresQueryCtrl extends QueryCtrl {
     this.target.group = [];
     this.updateProjection();
 
-    let segment = this.uiSegmentSrv.newSegment('none');
+    const segment = this.uiSegmentSrv.newSegment('none');
     this.metricColumnSegment.html = segment.html;
     this.metricColumnSegment.value = segment.value;
     this.target.metricColumn = 'none';
 
-    let task1 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('time')).then(result => {
+    const task1 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('time')).then(result => {
       // check if time column is still valid
       if (result.length > 0 && !_.find(result, (r: any) => r.text === this.target.timeColumn)) {
-        let segment = this.uiSegmentSrv.newSegment(result[0].text);
+        const segment = this.uiSegmentSrv.newSegment(result[0].text);
         this.timeColumnSegment.html = segment.html;
         this.timeColumnSegment.value = segment.value;
       }
       return this.timeColumnChanged(false);
     });
-    let task2 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('value')).then(result => {
+    const task2 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('value')).then(result => {
       if (result.length > 0) {
         this.target.select = [[{ type: 'column', params: [result[0].text] }]];
         this.updateProjection();
@@ -301,7 +301,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
 
   transformToSegments(config) {
     return results => {
-      let segments = _.map(results, segment => {
+      const segments = _.map(results, segment => {
         return this.uiSegmentSrv.newSegment({
           value: segment.text,
           expandable: segment.expandable,
@@ -309,7 +309,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
       });
 
       if (config.addTemplateVars) {
-        for (let variable of this.templateSrv.variables) {
+        for (const variable of this.templateSrv.variables) {
           let value;
           value = '$' + variable.name;
           if (config.templateQuoter && variable.multi === false) {
@@ -355,7 +355,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
 
     switch (partType) {
       case 'column':
-        let parts = _.map(selectParts, function(part: any) {
+        const parts = _.map(selectParts, function(part: any) {
           return sqlPart.create({ type: part.def.type, params: _.clone(part.params) });
         });
         this.selectParts.push(parts);
@@ -366,7 +366,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
         if (this.target.group.length === 0) {
           this.addGroup('time', '$__interval');
         }
-        let aggIndex = this.findAggregateIndex(selectParts);
+        const aggIndex = this.findAggregateIndex(selectParts);
         if (aggIndex !== -1) {
           // replace current aggregation
           selectParts[aggIndex] = partModel;
@@ -379,12 +379,12 @@ export class PostgresQueryCtrl extends QueryCtrl {
         break;
       case 'moving_window':
       case 'window':
-        let windowIndex = this.findWindowIndex(selectParts);
+        const windowIndex = this.findWindowIndex(selectParts);
         if (windowIndex !== -1) {
           // replace current window function
           selectParts[windowIndex] = partModel;
         } else {
-          let aggIndex = this.findAggregateIndex(selectParts);
+          const aggIndex = this.findAggregateIndex(selectParts);
           if (aggIndex !== -1) {
             selectParts.splice(aggIndex + 1, 0, partModel);
           } else {
@@ -418,11 +418,11 @@ export class PostgresQueryCtrl extends QueryCtrl {
     if (part.def.type === 'column') {
       // remove all parts of column unless its last column
       if (this.selectParts.length > 1) {
-        let modelsIndex = _.indexOf(this.selectParts, selectParts);
+        const modelsIndex = _.indexOf(this.selectParts, selectParts);
         this.selectParts.splice(modelsIndex, 1);
       }
     } else {
-      let partIndex = _.indexOf(selectParts, part);
+      const partIndex = _.indexOf(selectParts, part);
       selectParts.splice(partIndex, 1);
     }
 
@@ -490,7 +490,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
     if (partType === 'time') {
       params = ['$__interval', 'none'];
     }
-    let partModel = sqlPart.create({ type: partType, params: params });
+    const partModel = sqlPart.create({ type: partType, params: params });
 
     if (partType === 'time') {
       // put timeGroup at start
@@ -500,12 +500,12 @@ export class PostgresQueryCtrl extends QueryCtrl {
     }
 
     // add aggregates when adding group by
-    for (let selectParts of this.selectParts) {
+    for (const selectParts of this.selectParts) {
       if (!selectParts.some(part => part.def.type === 'aggregate')) {
-        let aggregate = sqlPart.create({ type: 'aggregate', params: ['avg'] });
+        const aggregate = sqlPart.create({ type: 'aggregate', params: ['avg'] });
         selectParts.splice(1, 0, aggregate);
         if (!selectParts.some(part => part.def.type === 'alias')) {
-          let alias = sqlPart.create({ type: 'alias', params: [selectParts[0].part.params[0]] });
+          const alias = sqlPart.create({ type: 'alias', params: [selectParts[0].part.params[0]] });
           selectParts.push(alias);
         }
       }
@@ -587,7 +587,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
   }
 
   getWhereOptions() {
-    var options = [];
+    const options = [];
     if (this.queryModel.hasUnixEpochTimecolumn()) {
       options.push(this.uiSegmentSrv.newSegment({ type: 'macro', value: '$__unixEpochFilter' }));
     } else {
@@ -600,7 +600,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
   addWhereAction(part, index) {
     switch (this.whereAdd.type) {
       case 'macro': {
-        let partModel = sqlPart.create({ type: 'macro', name: this.whereAdd.value, params: [] });
+        const partModel = sqlPart.create({ type: 'macro', name: this.whereAdd.value, params: [] });
         if (this.whereParts.length >= 1 && this.whereParts[0].def.type === 'macro') {
           // replace current macro
           this.whereParts[0] = partModel;
@@ -623,11 +623,11 @@ export class PostgresQueryCtrl extends QueryCtrl {
     return this.datasource
       .metricFindQuery(this.metaBuilder.buildColumnQuery('group'))
       .then(tags => {
-        var options = [];
+        const options = [];
         if (!this.queryModel.hasTimeGroup()) {
           options.push(this.uiSegmentSrv.newSegment({ type: 'time', value: 'time($__interval,none)' }));
         }
-        for (let tag of tags) {
+        for (const tag of tags) {
           options.push(this.uiSegmentSrv.newSegment({ type: 'column', value: tag.text }));
         }
         return options;
diff --git a/public/app/plugins/datasource/postgres/specs/postgres_query.test.ts b/public/app/plugins/datasource/postgres/specs/postgres_query.test.ts
index 83ba6eb5c74..877bd47618b 100644
--- a/public/app/plugins/datasource/postgres/specs/postgres_query.test.ts
+++ b/public/app/plugins/datasource/postgres/specs/postgres_query.test.ts
@@ -1,23 +1,23 @@
 import PostgresQuery from '../postgres_query';
 
 describe('PostgresQuery', function() {
-  let templateSrv = {
+  const templateSrv = {
     replace: jest.fn(text => text),
   };
 
   describe('When initializing', function() {
     it('should not be in SQL mode', function() {
-      let query = new PostgresQuery({}, templateSrv);
+      const query = new PostgresQuery({}, templateSrv);
       expect(query.target.rawQuery).toBe(false);
     });
     it('should be in SQL mode for pre query builder queries', function() {
-      let query = new PostgresQuery({ rawSql: 'SELECT 1' }, templateSrv);
+      const query = new PostgresQuery({ rawSql: 'SELECT 1' }, templateSrv);
       expect(query.target.rawQuery).toBe(true);
     });
   });
 
   describe('When generating time column SQL', function() {
-    let query = new PostgresQuery({}, templateSrv);
+    const query = new PostgresQuery({}, templateSrv);
 
     query.target.timeColumn = 'time';
     expect(query.buildTimeColumn()).toBe('time AS "time"');
@@ -45,7 +45,7 @@ describe('PostgresQuery', function() {
   });
 
   describe('When generating metric column SQL', function() {
-    let query = new PostgresQuery({}, templateSrv);
+    const query = new PostgresQuery({}, templateSrv);
 
     query.target.metricColumn = 'host';
     expect(query.buildMetricColumn()).toBe('host AS metric');
@@ -54,7 +54,7 @@ describe('PostgresQuery', function() {
   });
 
   describe('When generating value column SQL', function() {
-    let query = new PostgresQuery({}, templateSrv);
+    const query = new PostgresQuery({}, templateSrv);
 
     let column = [{ type: 'column', params: ['value'] }];
     expect(query.buildValueColumn(column)).toBe('value');
@@ -77,7 +77,7 @@ describe('PostgresQuery', function() {
   });
 
   describe('When generating value column SQL with metric column', function() {
-    let query = new PostgresQuery({}, templateSrv);
+    const query = new PostgresQuery({}, templateSrv);
     query.target.metricColumn = 'host';
 
     let column = [{ type: 'column', params: ['value'] }];
@@ -111,7 +111,7 @@ describe('PostgresQuery', function() {
   });
 
   describe('When generating WHERE clause', function() {
-    let query = new PostgresQuery({ where: [] }, templateSrv);
+    const query = new PostgresQuery({ where: [] }, templateSrv);
 
     expect(query.buildWhereClause()).toBe('');
 
@@ -127,7 +127,7 @@ describe('PostgresQuery', function() {
   });
 
   describe('When generating GROUP BY clause', function() {
-    let query = new PostgresQuery({ group: [], metricColumn: 'none' }, templateSrv);
+    const query = new PostgresQuery({ group: [], metricColumn: 'none' }, templateSrv);
 
     expect(query.buildGroupClause()).toBe('');
     query.target.group = [{ type: 'time', params: ['5m'] }];
@@ -137,14 +137,14 @@ describe('PostgresQuery', function() {
   });
 
   describe('When generating complete statement', function() {
-    let target = {
+    const target = {
       timeColumn: 't',
       table: 'table',
       select: [[{ type: 'column', params: ['value'] }]],
       where: [],
     };
     let result = 'SELECT\n  t AS "time",\n  value\nFROM table\nORDER BY 1';
-    let query = new PostgresQuery(target, templateSrv);
+    const query = new PostgresQuery(target, templateSrv);
 
     expect(query.buildQuery()).toBe(result);
 
diff --git a/public/app/plugins/datasource/postgres/sql_part.ts b/public/app/plugins/datasource/postgres/sql_part.ts
index fb132930747..695060f6366 100644
--- a/public/app/plugins/datasource/postgres/sql_part.ts
+++ b/public/app/plugins/datasource/postgres/sql_part.ts
@@ -1,9 +1,9 @@
 import { SqlPartDef, SqlPart } from 'app/core/components/sql_part/sql_part';
 
-let index = [];
+const index = [];
 
 function createPart(part): any {
-  let def = index[part.type];
+  const def = index[part.type];
   if (!def) {
     return null;
   }
diff --git a/public/app/plugins/datasource/prometheus/completer.ts b/public/app/plugins/datasource/prometheus/completer.ts
index 30a11a77961..cb999581cdf 100644
--- a/public/app/plugins/datasource/prometheus/completer.ts
+++ b/public/app/plugins/datasource/prometheus/completer.ts
@@ -294,9 +294,9 @@ export class PromCompleter {
   }
 
   findMetricName(session, row, column) {
-    var metricName = '';
+    let metricName = '';
 
-    var tokens;
+    let tokens;
     const nameLabelNameToken = this.findToken(
       session,
       row,
@@ -323,9 +323,9 @@ export class PromCompleter {
   }
 
   findToken(session, row, column, target, value, guard) {
-    var tokens, idx;
+    let tokens, idx;
     // find index and get column of previous token
-    for (var r = row; r >= 0; r--) {
+    for (let r = row; r >= 0; r--) {
       let c;
       tokens = session.getTokens(r);
       if (r === row) {
diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts
index 8cd1abd9ccf..356322cf369 100644
--- a/public/app/plugins/datasource/prometheus/datasource.ts
+++ b/public/app/plugins/datasource/prometheus/datasource.ts
@@ -109,7 +109,7 @@ export function determineQueryHints(series: any[], datasource?: any): any[] {
     }
 
     // Check for monotony
-    const datapoints: [number, number][] = s.datapoints;
+    const datapoints: number[][] = s.datapoints;
     if (datapoints.length > 1) {
       let increasing = false;
       const monotonic = datapoints.filter(dp => dp[0] !== null).every((dp, index) => {
@@ -384,7 +384,7 @@ export class PrometheusDatasource {
     };
     const range = Math.ceil(end - start);
 
-    var interval = kbn.interval_to_seconds(options.interval);
+    let interval = kbn.interval_to_seconds(options.interval);
     // Minimum interval ("Min step"), if specified for the query. or same as interval otherwise
     const minInterval = kbn.interval_to_seconds(
       this.templateSrv.replace(target.interval, options.scopedVars) || options.interval
@@ -392,7 +392,7 @@ export class PrometheusDatasource {
     const intervalFactor = target.intervalFactor || 1;
     // Adjust the interval to take into account any specified minimum and interval factor plus Prometheus limits
     const adjustedInterval = this.adjustInterval(interval, minInterval, range, intervalFactor);
-    var scopedVars = { ...options.scopedVars, ...this.getRangeScopedVars() };
+    let scopedVars = { ...options.scopedVars, ...this.getRangeScopedVars() };
     // If the interval was adjusted, make a shallow copy of scopedVars with updated interval vars
     if (interval !== adjustedInterval) {
       interval = adjustedInterval;
@@ -507,7 +507,7 @@ export class PrometheusDatasource {
   annotationQuery(options) {
     const annotation = options.annotation;
     const expr = annotation.expr || '';
-    var tagKeys = annotation.tagKeys || '';
+    let tagKeys = annotation.tagKeys || '';
     const titleFormat = annotation.titleFormat || '';
     const textFormat = annotation.textFormat || '';
 
diff --git a/public/app/plugins/datasource/prometheus/metric_find_query.ts b/public/app/plugins/datasource/prometheus/metric_find_query.ts
index 7eccd62eb20..fb55427eb27 100644
--- a/public/app/plugins/datasource/prometheus/metric_find_query.ts
+++ b/public/app/plugins/datasource/prometheus/metric_find_query.ts
@@ -40,7 +40,7 @@ export default class PrometheusMetricFindQuery {
   }
 
   labelValuesQuery(label, metric) {
-    var url;
+    let url;
 
     if (!metric) {
       // return label values globally
@@ -96,7 +96,7 @@ export default class PrometheusMetricFindQuery {
     const end = this.datasource.getPrometheusTime(this.range.to, true);
     return this.datasource.performInstantQuery({ expr: query }, end).then(function(result) {
       return _.map(result.data.data.result, function(metricData) {
-        var text = metricData.metric.__name__ || '';
+        let text = metricData.metric.__name__ || '';
         delete metricData.metric.__name__;
         text +=
           '{' +
diff --git a/public/app/plugins/datasource/prometheus/result_transformer.ts b/public/app/plugins/datasource/prometheus/result_transformer.ts
index c8f2d011c1c..e2e6fcd4878 100644
--- a/public/app/plugins/datasource/prometheus/result_transformer.ts
+++ b/public/app/plugins/datasource/prometheus/result_transformer.ts
@@ -73,7 +73,7 @@ export class ResultTransformer {
 
   transformMetricDataToTable(md, resultCount: number, refId: string) {
     const table = new TableModel();
-    var i, j;
+    let i, j;
     const metricLabels = {};
 
     if (md.length === 0) {
diff --git a/public/app/plugins/datasource/testdata/query_ctrl.ts b/public/app/plugins/datasource/testdata/query_ctrl.ts
index dd5f59c0a5a..7a40d264f64 100644
--- a/public/app/plugins/datasource/testdata/query_ctrl.ts
+++ b/public/app/plugins/datasource/testdata/query_ctrl.ts
@@ -12,7 +12,7 @@ export class TestDataQueryCtrl extends QueryCtrl {
   newPointTime: any;
   selectedPoint: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $injector, private backendSrv) {
     super($scope, $injector);
 
diff --git a/public/app/plugins/panel/gettingstarted/module.ts b/public/app/plugins/panel/gettingstarted/module.ts
index ebefad8af69..84f367a9430 100644
--- a/public/app/plugins/panel/gettingstarted/module.ts
+++ b/public/app/plugins/panel/gettingstarted/module.ts
@@ -8,7 +8,7 @@ class GettingStartedPanelCtrl extends PanelCtrl {
   stepIndex: number;
   steps: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $injector, private backendSrv, datasourceSrv, private $q) {
     super($scope, $injector);
 
diff --git a/public/app/plugins/panel/graph/align_yaxes.ts b/public/app/plugins/panel/graph/align_yaxes.ts
index ac176e7b956..f52138ea40e 100644
--- a/public/app/plugins/panel/graph/align_yaxes.ts
+++ b/public/app/plugins/panel/graph/align_yaxes.ts
@@ -120,7 +120,7 @@ function checkOppositeSides(yLeft, yRight) {
 }
 
 function getRate(yLeft, yRight) {
-  var rateLeft, rateRight, rate;
+  let rateLeft, rateRight, rate;
   if (checkTwoCross(yLeft, yRight)) {
     rateLeft = yRight.min ? yLeft.min / yRight.min : 0;
     rateRight = yRight.max ? yLeft.max / yRight.max : 0;
diff --git a/public/app/plugins/panel/graph/axes_editor.ts b/public/app/plugins/panel/graph/axes_editor.ts
index 4230acb571b..3d2dd4acbc5 100644
--- a/public/app/plugins/panel/graph/axes_editor.ts
+++ b/public/app/plugins/panel/graph/axes_editor.ts
@@ -9,7 +9,7 @@ export class AxesEditorCtrl {
   xAxisStatOptions: any;
   xNameSegment: any;
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor(private $scope, private $q) {
     this.panelCtrl = $scope.ctrl;
     this.panel = this.panelCtrl.panel;
@@ -76,7 +76,7 @@ export class AxesEditorCtrl {
   }
 }
 
-/** @ngInject **/
+/** @ngInject */
 export function axesEditorComponent() {
   'use strict';
   return {
diff --git a/public/app/plugins/panel/graph/data_processor.ts b/public/app/plugins/panel/graph/data_processor.ts
index 2fd21459125..4ea1efe1502 100644
--- a/public/app/plugins/panel/graph/data_processor.ts
+++ b/public/app/plugins/panel/graph/data_processor.ts
@@ -11,7 +11,7 @@ export class DataProcessor {
     }
 
     // auto detect xaxis mode
-    var firstItem;
+    let firstItem;
     if (options.dataList && options.dataList.length > 0) {
       firstItem = options.dataList[0];
       const autoDetectMode = this.getAutoDetectXAxisMode(firstItem);
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts
index 7f9fa0e1693..31adaac0c5f 100755
--- a/public/app/plugins/panel/graph/graph.ts
+++ b/public/app/plugins/panel/graph/graph.ts
@@ -27,11 +27,11 @@ class GraphElement {
   ctrl: GraphCtrl;
   tooltip: any;
   dashboard: any;
-  annotations: Array<object>;
+  annotations: object[];
   panel: any;
   plot: any;
-  sortedSeries: Array<any>;
-  data: Array<any>;
+  sortedSeries: any[];
+  data: any[];
   panelWidth: number;
   eventManager: EventManager;
   thresholdManager: ThresholdManager;
@@ -209,7 +209,7 @@ class GraphElement {
 
     // apply y-axis min/max options
     const yaxis = plot.getYAxes();
-    for (var i = 0; i < yaxis.length; i++) {
+    for (let i = 0; i < yaxis.length; i++) {
       const axis = yaxis[i];
       const panelOptions = this.panel.yaxes[i];
       axis.options.max = axis.options.max !== null ? axis.options.max : panelOptions.max;
@@ -231,7 +231,7 @@ class GraphElement {
   // let's find the smallest one so that bars are correctly rendered.
   // In addition, only take series which are rendered as bars for this.
   getMinTimeStepOfSeries(data) {
-    var min = Number.MAX_VALUE;
+    let min = Number.MAX_VALUE;
 
     for (let i = 0; i < data.length; i++) {
       if (!data[i].stats.timeStep) {
@@ -533,7 +533,7 @@ class GraphElement {
   }
 
   addXTableAxis(options) {
-    var ticks = _.map(this.data, function(series, seriesIndex) {
+    let ticks = _.map(this.data, function(series, seriesIndex) {
       return _.map(series.datapoints, function(point, pointIndex) {
         const tickIndex = seriesIndex * series.datapoints.length + pointIndex;
         return [tickIndex + 1, point[1]];
@@ -611,8 +611,8 @@ class GraphElement {
       axis.max = null;
     }
 
-    var series, i;
-    var max = axis.max,
+    let series, i;
+    let max = axis.max,
       min = axis.min;
 
     for (i = 0; i < data.length; i++) {
@@ -681,7 +681,7 @@ class GraphElement {
   generateTicksForLogScaleYAxis(min, max, logBase) {
     let ticks = [];
 
-    var nextTick;
+    let nextTick;
     for (nextTick = min; nextTick <= max; nextTick *= logBase) {
       ticks.push(nextTick);
     }
@@ -735,7 +735,7 @@ class GraphElement {
   }
 }
 
-/** @ngInject **/
+/** @ngInject */
 function graphDirective(timeSrv, popoverSrv, contextSrv) {
   return {
     restrict: 'A',
diff --git a/public/app/plugins/panel/graph/graph_tooltip.ts b/public/app/plugins/panel/graph/graph_tooltip.ts
index da2d25b1366..1c4b0fbe24f 100644
--- a/public/app/plugins/panel/graph/graph_tooltip.ts
+++ b/public/app/plugins/panel/graph/graph_tooltip.ts
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import { appEvents } from 'app/core/core';
 
-export default function GraphTooltip(elem, dashboard, scope, getSeriesFn) {
+export default function GraphTooltip(this: any, elem, dashboard, scope, getSeriesFn) {
   const self = this;
   const ctrl = scope.ctrl;
   const panel = ctrl.panel;
diff --git a/public/app/plugins/panel/graph/jquery.flot.events.ts b/public/app/plugins/panel/graph/jquery.flot.events.ts
index 41c1468e343..f0600bdcd40 100644
--- a/public/app/plugins/panel/graph/jquery.flot.events.ts
+++ b/public/app/plugins/panel/graph/jquery.flot.events.ts
@@ -420,7 +420,7 @@ export class EventMarkers {
         event: event,
       });
 
-      const mouseenter = function() {
+      const mouseenter = function(this: any) {
         createAnnotationToolip(marker, $(this).data('event'), that._plot);
       };
 
@@ -541,7 +541,7 @@ export class EventMarkers {
       event: event,
     });
 
-    const mouseenter = function() {
+    const mouseenter = function(this: any) {
       createAnnotationToolip(region, $(this).data('event'), that._plot);
     };
 
@@ -596,7 +596,7 @@ export class EventMarkers {
  */
 
 /** @ngInject */
-export function init(plot) {
+export function init(this: any, plot) {
   /*jshint validthis:true */
   const that = this;
   const eventMarkers = new EventMarkers(plot);
diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts
index 48acdcb9793..ef5da3e296a 100644
--- a/public/app/plugins/panel/graph/legend.ts
+++ b/public/app/plugins/panel/graph/legend.ts
@@ -8,13 +8,13 @@ const module = angular.module('grafana.directives');
 module.directive('graphLegend', function(popoverSrv, $timeout) {
   return {
     link: function(scope, elem) {
-      var firstRender = true;
+      let firstRender = true;
       const ctrl = scope.ctrl;
       const panel = ctrl.panel;
-      var data;
-      var seriesList;
-      var i;
-      var legendScrollbar;
+      let data;
+      let seriesList;
+      let i;
+      let legendScrollbar;
       const legendRightDefaultWidth = 10;
       const legendElem = elem.parent();
 
@@ -100,7 +100,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
         if (!panel.legend[statName]) {
           return '';
         }
-        var html = '<th class="pointer" data-stat="' + statName + '">' + statName;
+        let html = '<th class="pointer" data-stat="' + statName + '">' + statName;
 
         if (panel.legend.sort === statName) {
           const cssClass = panel.legend.sortDesc ? 'fa fa-caret-down' : 'fa fa-caret-up';
@@ -138,9 +138,9 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
 
         elem.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
 
-        var tableHeaderElem;
+        let tableHeaderElem;
         if (panel.legend.alignAsTable) {
-          var header = '<tr>';
+          let header = '<tr>';
           header += '<th colspan="2" style="text-align:left"></th>';
           if (panel.legend.values) {
             header += getTableHeaderHtml('min');
@@ -184,7 +184,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
             continue;
           }
 
-          var html = '<div class="graph-legend-series';
+          let html = '<div class="graph-legend-series';
 
           if (series.yaxis === 2) {
             html += ' graph-legend-series--right-y';
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts
index 6467f4e816a..f0751ddd816 100644
--- a/public/app/plugins/panel/graph/module.ts
+++ b/public/app/plugins/panel/graph/module.ts
@@ -288,7 +288,7 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   toggleAxis(info) {
-    var override = _.find(this.panel.seriesOverrides, { alias: info.alias });
+    let override = _.find(this.panel.seriesOverrides, { alias: info.alias });
     if (!override) {
       override = { alias: info.alias };
       this.panel.seriesOverrides.push(override);
diff --git a/public/app/plugins/panel/graph/threshold_manager.ts b/public/app/plugins/panel/graph/threshold_manager.ts
index bad9c43ec95..0a35d282b5e 100644
--- a/public/app/plugins/panel/graph/threshold_manager.ts
+++ b/public/app/plugins/panel/graph/threshold_manager.ts
@@ -13,7 +13,7 @@ export class ThresholdManager {
   constructor(private panelCtrl) {}
 
   getHandleHtml(handleIndex, model, valueStr) {
-    var stateClass = model.colorMode;
+    let stateClass = model.colorMode;
     if (model.colorMode === 'custom') {
       stateClass = 'critical';
     }
@@ -33,8 +33,8 @@ export class ThresholdManager {
     const handleElem = $(evt.currentTarget).parents('.alert-handle-wrapper');
     const handleIndex = $(evt.currentTarget).data('handleIndex');
 
-    var lastY = null;
-    var posTop;
+    let lastY = null;
+    let posTop;
     const plot = this.plot;
     const panelCtrl = this.panelCtrl;
     const model = this.thresholds[handleIndex];
@@ -52,7 +52,7 @@ export class ThresholdManager {
 
     function stopped() {
       // calculate graph level
-      var graphValue = plot.c2p({ left: 0, top: posTop }).y;
+      let graphValue = plot.c2p({ left: 0, top: posTop }).y;
       graphValue = parseInt(graphValue.toFixed(0));
       model.value = graphValue;
 
@@ -86,8 +86,8 @@ export class ThresholdManager {
   renderHandle(handleIndex, defaultHandleTopPos) {
     const model = this.thresholds[handleIndex];
     const value = model.value;
-    var valueStr = value;
-    var handleTopPos = 0;
+    let valueStr = value;
+    let handleTopPos = 0;
 
     // handle no value
     if (!_.isNumber(value)) {
@@ -111,7 +111,7 @@ export class ThresholdManager {
 
   prepare(elem, data) {
     this.hasSecondYAxis = false;
-    for (var i = 0; i < data.length; i++) {
+    for (let i = 0; i < data.length; i++) {
       if (data[i].yaxis > 1) {
         this.hasSecondYAxis = true;
         break;
@@ -158,9 +158,9 @@ export class ThresholdManager {
       return;
     }
 
-    var gtLimit = Infinity;
-    var ltLimit = -Infinity;
-    var i, threshold, other;
+    let gtLimit = Infinity;
+    let ltLimit = -Infinity;
+    let i, threshold, other;
 
     for (i = 0; i < panel.thresholds.length; i++) {
       threshold = panel.thresholds[i];
@@ -168,7 +168,7 @@ export class ThresholdManager {
         continue;
       }
 
-      var limit;
+      let limit;
       switch (threshold.op) {
         case 'gt': {
           limit = gtLimit;
@@ -196,7 +196,7 @@ export class ThresholdManager {
         }
       }
 
-      var fillColor, lineColor;
+      let fillColor, lineColor;
       switch (threshold.colorMode) {
         case 'critical': {
           fillColor = 'rgba(234, 112, 112, 0.12)';
diff --git a/public/app/plugins/panel/heatmap/heatmap_data_converter.ts b/public/app/plugins/panel/heatmap/heatmap_data_converter.ts
index 0b3f83bbe46..86947df7380 100644
--- a/public/app/plugins/panel/heatmap/heatmap_data_converter.ts
+++ b/public/app/plugins/panel/heatmap/heatmap_data_converter.ts
@@ -268,7 +268,7 @@ function pushToXBuckets(buckets, point, bucketNum, seriesName) {
 }
 
 function pushToYBuckets(buckets, bucketNum, value, point, bounds) {
-  var count = 1;
+  let count = 1;
   // Use the 3rd argument as scale/count
   if (point.length > 3) {
     count = parseInt(point[2]);
diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts
index fcbb39f8417..5146df7b513 100644
--- a/public/app/plugins/panel/heatmap/rendering.ts
+++ b/public/app/plugins/panel/heatmap/rendering.ts
@@ -100,7 +100,7 @@ export class HeatmapRenderer {
 
   setElementHeight() {
     try {
-      var height = this.ctrl.height || this.panel.height || this.ctrl.row.height;
+      let height = this.ctrl.height || this.panel.height || this.ctrl.row.height;
       if (_.isString(height)) {
         height = parseInt(height.replace('px', ''), 10);
       }
diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts
index ba2f81c1541..6b244cd577f 100644
--- a/public/app/plugins/panel/singlestat/module.ts
+++ b/public/app/plugins/panel/singlestat/module.ts
@@ -243,7 +243,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     }
 
     const delta = value / 2;
-    var dec = -Math.floor(Math.log(delta) / Math.LN10);
+    let dec = -Math.floor(Math.log(delta) / Math.LN10);
 
     const magn = Math.pow(10, -dec);
     const norm = delta / magn; // norm is between 1.0 and 10.0
@@ -400,7 +400,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     const $timeout = this.$timeout;
     const panel = ctrl.panel;
     const templateSrv = this.templateSrv;
-    var data, linkInfo;
+    let data, linkInfo;
     const $panelContainer = elem.find('.panel-container');
     elem = elem.find('.singlestat-panel');
 
@@ -419,24 +419,24 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     }
 
     function getBigValueHtml() {
-      var body = '<div class="singlestat-panel-value-container">';
+      let body = '<div class="singlestat-panel-value-container">';
 
       if (panel.prefix) {
-        var prefix = panel.prefix;
+        let prefix = panel.prefix;
         if (panel.colorPrefix) {
           prefix = applyColoringThresholds(data.value, panel.prefix);
         }
         body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, prefix);
       }
 
-      var value = data.valueFormatted;
+      let value = data.valueFormatted;
       if (panel.colorValue) {
         value = applyColoringThresholds(data.value, value);
       }
       body += getSpan('singlestat-panel-value', panel.valueFontSize, value);
 
       if (panel.postfix) {
-        var postfix = panel.postfix;
+        let postfix = panel.postfix;
         if (panel.colorPostfix) {
           postfix = applyColoringThresholds(data.value, panel.postfix);
         }
@@ -449,7 +449,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     }
 
     function getValueText() {
-      var result = panel.prefix ? templateSrv.replace(panel.prefix, data.scopedVars) : '';
+      let result = panel.prefix ? templateSrv.replace(panel.prefix, data.scopedVars) : '';
       result += data.valueFormatted;
       result += panel.postfix ? templateSrv.replace(panel.postfix, data.scopedVars) : '';
 
@@ -480,7 +480,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       plotCanvas.css(plotCss);
 
       const thresholds = [];
-      for (var i = 0; i < data.thresholds.length; i++) {
+      for (let i = 0; i < data.thresholds.length; i++) {
         thresholds.push({
           value: data.thresholds[i],
           color: data.colorMap[i],
@@ -720,7 +720,7 @@ function getColorForValue(data, value) {
     return null;
   }
 
-  for (var i = data.thresholds.length; i > 0; i--) {
+  for (let i = data.thresholds.length; i > 0; i--) {
     if (value >= data.thresholds[i - 1]) {
       return data.colorMap[i];
     }
diff --git a/public/app/plugins/panel/table/column_options.ts b/public/app/plugins/panel/table/column_options.ts
index 7c62ade2d1c..205b988f557 100644
--- a/public/app/plugins/panel/table/column_options.ts
+++ b/public/app/plugins/panel/table/column_options.ts
@@ -81,7 +81,7 @@ export class ColumnOptionsCtrl {
 
     const styles = this.panel.styles;
     const stylesCount = styles.length;
-    var indexToInsert = stylesCount;
+    let indexToInsert = stylesCount;
 
     // check if last is a catch all rule, then add it before that one
     if (stylesCount > 0) {
diff --git a/public/app/plugins/panel/table/module.ts b/public/app/plugins/panel/table/module.ts
index 79d38ef0489..68080c0558d 100644
--- a/public/app/plugins/panel/table/module.ts
+++ b/public/app/plugins/panel/table/module.ts
@@ -171,12 +171,12 @@ class TablePanelCtrl extends MetricsPanelCtrl {
   }
 
   link(scope, elem, attrs, ctrl: TablePanelCtrl) {
-    var data;
+    let data;
     const panel = ctrl.panel;
-    var pageCount = 0;
+    let pageCount = 0;
 
     function getTableHeight() {
-      var panelHeight = ctrl.height;
+      let panelHeight = ctrl.height;
 
       if (pageCount > 1) {
         panelHeight -= 26;
@@ -211,7 +211,7 @@ class TablePanelCtrl extends MetricsPanelCtrl {
 
       const paginationList = $('<ul></ul>');
 
-      for (var i = startPage; i < endPage; i++) {
+      for (let i = startPage; i < endPage; i++) {
         const activeClass = i === ctrl.pageIndex ? 'active' : '';
         const pageLinkElem = $(
           '<li><a class="table-panel-page-link pointer ' + activeClass + '">' + (i + 1) + '</a></li>'
diff --git a/public/app/plugins/panel/table/renderer.ts b/public/app/plugins/panel/table/renderer.ts
index 37e69ecf993..d2eb310dddd 100644
--- a/public/app/plugins/panel/table/renderer.ts
+++ b/public/app/plugins/panel/table/renderer.ts
@@ -47,7 +47,7 @@ export class TableRenderer {
     if (!style.thresholds) {
       return null;
     }
-    for (var i = style.thresholds.length; i > 0; i--) {
+    for (let i = style.thresholds.length; i > 0; i--) {
       if (value >= style.thresholds[i - 1]) {
         return style.colors[i];
       }
@@ -91,7 +91,7 @@ export class TableRenderer {
         if (_.isArray(v)) {
           v = v[0];
         }
-        var date = moment(v);
+        let date = moment(v);
         if (this.isUtc) {
           date = date.utc();
         }
@@ -211,9 +211,9 @@ export class TableRenderer {
     value = this.formatColumnValue(columnIndex, value);
 
     const column = this.table.columns[columnIndex];
-    var style = '';
+    let style = '';
     const cellClasses = [];
-    var cellClass = '';
+    let cellClass = '';
 
     if (this.colorState.cell) {
       style = ' style="background-color:' + this.colorState.cell + '"';
@@ -226,7 +226,7 @@ export class TableRenderer {
     // because of the fixed table headers css only solution
     // there is an issue if header cell is wider the cell
     // this hack adds header content to cell (not visible)
-    var columnHtml = '';
+    let columnHtml = '';
     if (addWidthHack) {
       columnHtml = '<div class="table-panel-width-hack">' + this.table.columns[columnIndex].title + '</div>';
     }
@@ -291,15 +291,15 @@ export class TableRenderer {
     const pageSize = this.panel.pageSize || 100;
     const startPos = page * pageSize;
     const endPos = Math.min(startPos + pageSize, this.table.rows.length);
-    var html = '';
+    let html = '';
     const rowClasses = [];
     let rowClass = '';
 
-    for (var y = startPos; y < endPos; y++) {
+    for (let y = startPos; y < endPos; y++) {
       const row = this.table.rows[y];
       let cellHtml = '';
       let rowStyle = '';
-      for (var i = 0; i < this.table.columns.length; i++) {
+      for (let i = 0; i < this.table.columns.length; i++) {
         cellHtml += this.renderCell(i, y, row[i], y === startPos);
       }
 
@@ -322,10 +322,10 @@ export class TableRenderer {
   render_values() {
     const rows = [];
 
-    for (var y = 0; y < this.table.rows.length; y++) {
+    for (let y = 0; y < this.table.rows.length; y++) {
       const row = this.table.rows[y];
       const new_row = [];
-      for (var i = 0; i < this.table.columns.length; i++) {
+      for (let i = 0; i < this.table.columns.length; i++) {
         new_row.push(this.formatColumnValue(i, row[i]));
       }
       rows.push(new_row);
diff --git a/public/app/plugins/panel/table/transformers.ts b/public/app/plugins/panel/table/transformers.ts
index 1b8212ce1af..428fbff05cf 100644
--- a/public/app/plugins/panel/table/transformers.ts
+++ b/public/app/plugins/panel/table/transformers.ts
@@ -13,9 +13,9 @@ transformers['timeseries_to_rows'] = {
   transform: function(data, panel, model) {
     model.columns = [{ text: 'Time', type: 'date' }, { text: 'Metric' }, { text: 'Value' }];
 
-    for (var i = 0; i < data.length; i++) {
+    for (let i = 0; i < data.length; i++) {
       const series = data[i];
-      for (var y = 0; y < series.datapoints.length; y++) {
+      for (let y = 0; y < series.datapoints.length; y++) {
         const dp = series.datapoints[y];
         model.rows.push([dp[1], series.target, dp[0]]);
       }
@@ -38,7 +38,7 @@ transformers['timeseries_to_columns'] = {
       const series = data[i];
       model.columns.push({ text: series.target });
 
-      for (var y = 0; y < series.datapoints.length; y++) {
+      for (let y = 0; y < series.datapoints.length; y++) {
         const dp = series.datapoints[y];
         const timeKey = dp[1].toString();
 
@@ -78,7 +78,7 @@ transformers['timeseries_aggregations'] = {
     ];
   },
   transform: function(data, panel, model) {
-    var i, y;
+    let i, y;
     model.columns.push({ text: 'Metric' });
 
     for (i = 0; i < panel.columns.length; i++) {
@@ -118,7 +118,7 @@ transformers['annotations'] = {
       return;
     }
 
-    for (var i = 0; i < data.annotations.length; i++) {
+    for (let i = 0; i < data.annotations.length; i++) {
       const evt = data.annotations[i];
       model.rows.push([evt.time, evt.title, evt.text, evt.tags]);
     }
@@ -270,7 +270,7 @@ transformers['json'] = {
     }
 
     const names: any = {};
-    for (var i = 0; i < data.length; i++) {
+    for (let i = 0; i < data.length; i++) {
       const series = data[i];
       if (series.type !== 'docs') {
         continue;
@@ -278,7 +278,7 @@ transformers['json'] = {
 
       // only look at 100 docs
       const maxDocs = Math.min(series.datapoints.length, 100);
-      for (var y = 0; y < maxDocs; y++) {
+      for (let y = 0; y < maxDocs; y++) {
         const doc = series.datapoints[y];
         const flattened = flatten(doc, null);
         for (const propName in flattened) {
@@ -292,7 +292,7 @@ transformers['json'] = {
     });
   },
   transform: function(data, panel, model) {
-    var i, y, z;
+    let i, y, z;
 
     for (const column of panel.columns) {
       const tableCol: any = { text: column.text };
diff --git a/public/app/plugins/panel/text/module.ts b/public/app/plugins/panel/text/module.ts
index 684bba124fc..ed446d1699b 100644
--- a/public/app/plugins/panel/text/module.ts
+++ b/public/app/plugins/panel/text/module.ts
@@ -14,7 +14,7 @@ export class TextPanelCtrl extends PanelCtrl {
     content: '# title',
   };
 
-  /** @ngInject **/
+  /** @ngInject */
   constructor($scope, $injector, private templateSrv, private $sce) {
     super($scope, $injector);
 
diff --git a/public/app/routes/dashboard_loaders.ts b/public/app/routes/dashboard_loaders.ts
index d8a66185d96..74c9fe2235a 100644
--- a/public/app/routes/dashboard_loaders.ts
+++ b/public/app/routes/dashboard_loaders.ts
@@ -40,9 +40,8 @@ export class LoadDashboardCtrl {
         }
       }
 
-      if ($routeParams.autofitpanels) {
-        result.meta.autofitpanels = true;
-      }
+      result.meta.autofitpanels = $routeParams.autofitpanels;
+      result.meta.kiosk = $routeParams.kiosk;
 
       $scope.initDashboard(result, $scope);
     });
diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts
index d12711aca5b..55d76dc7239 100644
--- a/public/app/routes/routes.ts
+++ b/public/app/routes/routes.ts
@@ -8,7 +8,7 @@ import FolderPermissions from 'app/containers/ManageDashboards/FolderPermissions
 import TeamPages from 'app/containers/Teams/TeamPages';
 import TeamList from 'app/containers/Teams/TeamList';
 
-/** @ngInject **/
+/** @ngInject */
 export function setupAngularRoutes($routeProvider, $locationProvider) {
   $locationProvider.html5Mode(true);
 
diff --git a/public/app/stores/TeamsStore/TeamsStore.ts b/public/app/stores/TeamsStore/TeamsStore.ts
index f8e101163a2..bc8af218def 100644
--- a/public/app/stores/TeamsStore/TeamsStore.ts
+++ b/public/app/stores/TeamsStore/TeamsStore.ts
@@ -31,7 +31,7 @@ export const TeamModel = types
     groups: types.optional(types.map(TeamGroupModel), {}),
   })
   .views(self => ({
-    get filteredMembers() {
+    get filteredMembers(this: Team) {
       const members = this.members.values();
       const regex = new RegExp(self.search, 'i');
       return members.filter(member => {
@@ -121,7 +121,7 @@ export const TeamsStore = types
     search: types.optional(types.string, ''),
   })
   .views(self => ({
-    get filteredTeams() {
+    get filteredTeams(this: any) {
       const teams = this.map.values();
       const regex = new RegExp(self.search, 'i');
       return teams.filter(team => {
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index 0b7e3a79dcd..fe4bd9e719e 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -23,6 +23,7 @@
     @include navbar-alt-look();
   }
 
+  .navbar-buttons--tv,
   .navbar-button--add-panel,
   .navbar-button--star,
   .navbar-button--save,
@@ -45,6 +46,7 @@
 
   .navbar-button--add-panel,
   .navbar-button--star,
+  .navbar-button--tv,
   .navbar-page-btn .fa-caret-down {
     display: none;
   }
@@ -106,6 +108,10 @@
     display: none;
     margin-right: 0;
   }
+
+  &--zoom {
+    margin-right: 0;
+  }
 }
 
 .navbar__spacer {
@@ -119,6 +125,7 @@
   font-weight: $btn-font-weight;
   padding: 6px 11px;
   line-height: 16px;
+  height: 30px;
   color: $text-muted;
   border: 1px solid $navbar-button-border;
   margin-right: 3px;
@@ -133,7 +140,7 @@
   }
 
   &--add-panel {
-    padding: 3px 10px;
+    padding: 2px 10px;
 
     .gicon {
       font-size: 22px;
@@ -146,7 +153,7 @@
     .fa {
       font-size: 14px;
       position: relative;
-      top: 2px;
+      top: 1px;
     }
   }
 
diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss
index 5e9d037e924..c0f8c72ab4f 100644
--- a/public/sass/components/_view_states.scss
+++ b/public/sass/components/_view_states.scss
@@ -1,42 +1,49 @@
-.page-kiosk-mode {
-  .sidemenu,
-  .navbar {
-    display: none;
-  }
-  .scroll-canvas--dashboard {
-    height: 100%;
-  }
-}
-
-.playlist-active,
-.user-activity-low {
+.view-mode--inactive {
   .react-resizable-handle,
   .add-row-panel-hint,
   .dash-row-menu-container,
-  .navbar-button--refresh,
-  .navbar-buttons--zoom,
   .navbar-buttons--actions,
-  .panel-menu-container,
   .panel-info-corner--info,
   .panel-info-corner--links {
-    opacity: 0;
-  }
-
-  .navbar {
-    box-shadow: none;
-    background: transparent;
+    display: none;
   }
 
   .navbar-page-btn {
-    border-color: transparent;
-    background: transparent;
-    transform: translate3d(-40px, 0, 0);
+    transform: translate3d(-36px, 0, 0);
     i {
       opacity: 0;
     }
   }
 
-  .gf-timepicker-nav-btn {
-    transform: translate3d(40px, 0, 0);
+  .navbar-button--zoom,
+  .navbar-button--refresh {
+    display: none;
+  }
+}
+
+.view-mode--playlist {
+  @extend .view-mode--inactive;
+}
+
+.view-mode--tv {
+  @extend .view-mode--inactive;
+
+  .submenu-controls {
+    display: none;
+  }
+}
+
+.view-mode--kiosk {
+  @extend .view-mode--tv;
+
+  .sidemenu,
+  .navbar {
+    display: none;
+  }
+  .scroll-canvas--dashboard {
+    height: 100%;
+  }
+  .submenu-controls {
+    display: none;
   }
 }
diff --git a/public/test/specs/helpers.ts b/public/test/specs/helpers.ts
index 960ce84f494..f585498d247 100644
--- a/public/test/specs/helpers.ts
+++ b/public/test/specs/helpers.ts
@@ -4,7 +4,7 @@ import * as dateMath from 'app/core/utils/datemath';
 import { angularMocks, sinon } from '../lib/common';
 import { PanelModel } from 'app/features/dashboard/panel_model';
 
-export function ControllerTestContext() {
+export function ControllerTestContext(this: any) {
   const self = this;
 
   this.datasource = {};
@@ -106,7 +106,7 @@ export function ControllerTestContext() {
   };
 }
 
-export function ServiceTestContext() {
+export function ServiceTestContext(this: any) {
   const self = this;
   self.templateSrv = new TemplateSrvStub();
   self.timeSrv = new TimeSrvStub();
@@ -138,11 +138,11 @@ export function ServiceTestContext() {
   };
 }
 
-export function DashboardViewStateStub() {
+export function DashboardViewStateStub(this: any) {
   this.registerPanel = function() {};
 }
 
-export function TimeSrvStub() {
+export function TimeSrvStub(this: any) {
   this.init = sinon.spy();
   this.time = { from: 'now-1h', to: 'now' };
   this.timeRange = function(parse) {
@@ -164,13 +164,13 @@ export function TimeSrvStub() {
   };
 }
 
-export function ContextSrvStub() {
+export function ContextSrvStub(this: any) {
   this.hasRole = function() {
     return true;
   };
 }
 
-export function TemplateSrvStub() {
+export function TemplateSrvStub(this: any) {
   this.variables = [];
   this.templateSettings = { interpolate: /\[\[([\s\S]+?)\]\]/g };
   this.data = {};
diff --git a/public/views/index.template.html b/public/views/index.template.html
index f4c5d183fc8..0a6af599280 100644
--- a/public/views/index.template.html
+++ b/public/views/index.template.html
@@ -11,8 +11,6 @@
 
   <base href="[[.AppSubUrl]]/" />
 
-  <link rel="stylesheet" href="public/build/grafana.[[ .Theme ]].css?v[[ .BuildVersion ]]+[[ .BuildCommit ]]">
-
   <link rel="icon" type="image/png" href="public/img/fav32.png">
   <link rel="mask-icon" href="public/img/grafana_mask_icon.svg" color="#F05A28">
   <link rel="apple-touch-icon" sizes="180x180" href="public/img/apple-touch-icon.png">
@@ -22,9 +20,148 @@
   <meta name="msapplication-config" content="public/img/browserconfig.xml">
 </head>
 
-<body ng-cloak class="theme-[[ .Theme ]]">
-  <grafana-app class="grafana-app">
+<body class="theme-[[ .Theme ]]">
+
+  <style>
+    body {
+      margin: 0;
+      height: 100%;
+      width: 100%;
+      position: absolute;
+    }
+
+    .preloader {
+      height: 100%;
+      flex-direction: column;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .theme-light .preloader {
+      background: linear-gradient(-60deg, #f7f8fa, #f5f6f9 70%, #f7f8fa 98%);
+    }
+
+    .theme-dark .preloader {
+      background: linear-gradient(180deg, #222426 10px, #161719 100px);
+    }
+
+    .preloader__enter {
+      opacity: 0;
+      animation-name: preloader-fade-in;
+      animation-iteration-count: 1;
+      animation-duration: .9s;
+      animation-delay: 1.35s;
+      animation-fill-mode: forwards;
+    }
+
+    .preloader__bounce {
+      text-align: center;
+      animation-name: preloader-bounce;
+      animation-duration: .9s;
+      animation-iteration-count: infinite;
+    }
+
+    .preloader__logo {
+      display: inline-block;
+      animation-name: preloader-squash;
+      animation-duration: .9s;
+      animation-iteration-count: infinite;
+      width: 60px;
+      height: 60px;
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-image: url("data:image/svg+xml,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='351px' height='365px' viewBox='0 0 351 365' style='enable-background:new 0 0 351 365%3b' xml:space='preserve'%3e %3cstyle type='text/css'%3e .st0%7bfill:url(%23SVGID_1_)%3b%7d %3c/style%3e %3cg id='Layer_1_1_'%3e %3c/g%3e %3clinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='175.5' y1='445.4948' x2='175.5' y2='114.0346'%3e %3cstop offset='0' style='stop-color:%23FFF100'/%3e %3cstop offset='1' style='stop-color:%23F05A28'/%3e %3c/linearGradient%3e %3cpath class='st0' d='M342%2c161.2c-0.6-6.1-1.6-13.1-3.6-20.9c-2-7.7-5-16.2-9.4-25c-4.4-8.8-10.1-17.9-17.5-26.8 c-2.9-3.5-6.1-6.9-9.5-10.2c5.1-20.3-6.2-37.9-6.2-37.9c-19.5-1.2-31.9%2c6.1-36.5%2c9.4c-0.8-0.3-1.5-0.7-2.3-1 c-3.3-1.3-6.7-2.6-10.3-3.7c-3.5-1.1-7.1-2.1-10.8-3c-3.7-0.9-7.4-1.6-11.2-2.2c-0.7-0.1-1.3-0.2-2-0.3 c-8.5-27.2-32.9-38.6-32.9-38.6c-27.3%2c17.3-32.4%2c41.5-32.4%2c41.5s-0.1%2c0.5-0.3%2c1.4c-1.5%2c0.4-3%2c0.9-4.5%2c1.3c-2.1%2c0.6-4.2%2c1.4-6.2%2c2.2 c-2.1%2c0.8-4.1%2c1.6-6.2%2c2.5c-4.1%2c1.8-8.2%2c3.8-12.2%2c6c-3.9%2c2.2-7.7%2c4.6-11.4%2c7.1c-0.5-0.2-1-0.4-1-0.4c-37.8-14.4-71.3%2c2.9-71.3%2c2.9 c-3.1%2c40.2%2c15.1%2c65.5%2c18.7%2c70.1c-0.9%2c2.5-1.7%2c5-2.5%2c7.5c-2.8%2c9.1-4.9%2c18.4-6.2%2c28.1c-0.2%2c1.4-0.4%2c2.8-0.5%2c4.2 C18.8%2c192.7%2c8.5%2c228%2c8.5%2c228c29.1%2c33.5%2c63.1%2c35.6%2c63.1%2c35.6c0%2c0%2c0.1-0.1%2c0.1-0.1c4.3%2c7.7%2c9.3%2c15%2c14.9%2c21.9c2.4%2c2.9%2c4.8%2c5.6%2c7.4%2c8.3 c-10.6%2c30.4%2c1.5%2c55.6%2c1.5%2c55.6c32.4%2c1.2%2c53.7-14.2%2c58.2-17.7c3.2%2c1.1%2c6.5%2c2.1%2c9.8%2c2.9c10%2c2.6%2c20.2%2c4.1%2c30.4%2c4.5 c2.5%2c0.1%2c5.1%2c0.2%2c7.6%2c0.1l1.2%2c0l0.8%2c0l1.6%2c0l1.6-0.1l0%2c0.1c15.3%2c21.8%2c42.1%2c24.9%2c42.1%2c24.9c19.1-20.1%2c20.2-40.1%2c20.2-44.4l0%2c0 c0%2c0%2c0-0.1%2c0-0.3c0-0.4%2c0-0.6%2c0-0.6l0%2c0c0-0.3%2c0-0.6%2c0-0.9c4-2.8%2c7.8-5.8%2c11.4-9.1c7.6-6.9%2c14.3-14.8%2c19.9-23.3 c0.5-0.8%2c1-1.6%2c1.5-2.4c21.6%2c1.2%2c36.9-13.4%2c36.9-13.4c-3.6-22.5-16.4-33.5-19.1-35.6l0%2c0c0%2c0-0.1-0.1-0.3-0.2 c-0.2-0.1-0.2-0.2-0.2-0.2c0%2c0%2c0%2c0%2c0%2c0c-0.1-0.1-0.3-0.2-0.5-0.3c0.1-1.4%2c0.2-2.7%2c0.3-4.1c0.2-2.4%2c0.2-4.9%2c0.2-7.3l0-1.8l0-0.9 l0-0.5c0-0.6%2c0-0.4%2c0-0.6l-0.1-1.5l-0.1-2c0-0.7-0.1-1.3-0.2-1.9c-0.1-0.6-0.1-1.3-0.2-1.9l-0.2-1.9l-0.3-1.9 c-0.4-2.5-0.8-4.9-1.4-7.4c-2.3-9.7-6.1-18.9-11-27.2c-5-8.3-11.2-15.6-18.3-21.8c-7-6.2-14.9-11.2-23.1-14.9 c-8.3-3.7-16.9-6.1-25.5-7.2c-4.3-0.6-8.6-0.8-12.9-0.7l-1.6%2c0l-0.4%2c0c-0.1%2c0-0.6%2c0-0.5%2c0l-0.7%2c0l-1.6%2c0.1c-0.6%2c0-1.2%2c0.1-1.7%2c0.1 c-2.2%2c0.2-4.4%2c0.5-6.5%2c0.9c-8.6%2c1.6-16.7%2c4.7-23.8%2c9c-7.1%2c4.3-13.3%2c9.6-18.3%2c15.6c-5%2c6-8.9%2c12.7-11.6%2c19.6c-2.7%2c6.9-4.2%2c14.1-4.6%2c21 c-0.1%2c1.7-0.1%2c3.5-0.1%2c5.2c0%2c0.4%2c0%2c0.9%2c0%2c1.3l0.1%2c1.4c0.1%2c0.8%2c0.1%2c1.7%2c0.2%2c2.5c0.3%2c3.5%2c1%2c6.9%2c1.9%2c10.1c1.9%2c6.5%2c4.9%2c12.4%2c8.6%2c17.4 c3.7%2c5%2c8.2%2c9.1%2c12.9%2c12.4c4.7%2c3.2%2c9.8%2c5.5%2c14.8%2c7c5%2c1.5%2c10%2c2.1%2c14.7%2c2.1c0.6%2c0%2c1.2%2c0%2c1.7%2c0c0.3%2c0%2c0.6%2c0%2c0.9%2c0c0.3%2c0%2c0.6%2c0%2c0.9-0.1 c0.5%2c0%2c1-0.1%2c1.5-0.1c0.1%2c0%2c0.3%2c0%2c0.4-0.1l0.5-0.1c0.3%2c0%2c0.6-0.1%2c0.9-0.1c0.6-0.1%2c1.1-0.2%2c1.7-0.3c0.6-0.1%2c1.1-0.2%2c1.6-0.4 c1.1-0.2%2c2.1-0.6%2c3.1-0.9c2-0.7%2c4-1.5%2c5.7-2.4c1.8-0.9%2c3.4-2%2c5-3c0.4-0.3%2c0.9-0.6%2c1.3-1c1.6-1.3%2c1.9-3.7%2c0.6-5.3 c-1.1-1.4-3.1-1.8-4.7-0.9c-0.4%2c0.2-0.8%2c0.4-1.2%2c0.6c-1.4%2c0.7-2.8%2c1.3-4.3%2c1.8c-1.5%2c0.5-3.1%2c0.9-4.7%2c1.2c-0.8%2c0.1-1.6%2c0.2-2.5%2c0.3 c-0.4%2c0-0.8%2c0.1-1.3%2c0.1c-0.4%2c0-0.9%2c0-1.2%2c0c-0.4%2c0-0.8%2c0-1.2%2c0c-0.5%2c0-1%2c0-1.5-0.1c0%2c0-0.3%2c0-0.1%2c0l-0.2%2c0l-0.3%2c0 c-0.2%2c0-0.5%2c0-0.7-0.1c-0.5-0.1-0.9-0.1-1.4-0.2c-3.7-0.5-7.4-1.6-10.9-3.2c-3.6-1.6-7-3.8-10.1-6.6c-3.1-2.8-5.8-6.1-7.9-9.9 c-2.1-3.8-3.6-8-4.3-12.4c-0.3-2.2-0.5-4.5-0.4-6.7c0-0.6%2c0.1-1.2%2c0.1-1.8c0%2c0.2%2c0-0.1%2c0-0.1l0-0.2l0-0.5c0-0.3%2c0.1-0.6%2c0.1-0.9 c0.1-1.2%2c0.3-2.4%2c0.5-3.6c1.7-9.6%2c6.5-19%2c13.9-26.1c1.9-1.8%2c3.9-3.4%2c6-4.9c2.1-1.5%2c4.4-2.8%2c6.8-3.9c2.4-1.1%2c4.8-2%2c7.4-2.7 c2.5-0.7%2c5.1-1.1%2c7.8-1.4c1.3-0.1%2c2.6-0.2%2c4-0.2c0.4%2c0%2c0.6%2c0%2c0.9%2c0l1.1%2c0l0.7%2c0c0.3%2c0%2c0%2c0%2c0.1%2c0l0.3%2c0l1.1%2c0.1 c2.9%2c0.2%2c5.7%2c0.6%2c8.5%2c1.3c5.6%2c1.2%2c11.1%2c3.3%2c16.2%2c6.1c10.2%2c5.7%2c18.9%2c14.5%2c24.2%2c25.1c2.7%2c5.3%2c4.6%2c11%2c5.5%2c16.9c0.2%2c1.5%2c0.4%2c3%2c0.5%2c4.5 l0.1%2c1.1l0.1%2c1.1c0%2c0.4%2c0%2c0.8%2c0%2c1.1c0%2c0.4%2c0%2c0.8%2c0%2c1.1l0%2c1l0%2c1.1c0%2c0.7-0.1%2c1.9-0.1%2c2.6c-0.1%2c1.6-0.3%2c3.3-0.5%2c4.9 c-0.2%2c1.6-0.5%2c3.2-0.8%2c4.8c-0.3%2c1.6-0.7%2c3.2-1.1%2c4.7c-0.8%2c3.1-1.8%2c6.2-3%2c9.3c-2.4%2c6-5.6%2c11.8-9.4%2c17.1 c-7.7%2c10.6-18.2%2c19.2-30.2%2c24.7c-6%2c2.7-12.3%2c4.7-18.8%2c5.7c-3.2%2c0.6-6.5%2c0.9-9.8%2c1l-0.6%2c0l-0.5%2c0l-1.1%2c0l-1.6%2c0l-0.8%2c0 c0.4%2c0-0.1%2c0-0.1%2c0l-0.3%2c0c-1.8%2c0-3.5-0.1-5.3-0.3c-7-0.5-13.9-1.8-20.7-3.7c-6.7-1.9-13.2-4.6-19.4-7.8 c-12.3-6.6-23.4-15.6-32-26.5c-4.3-5.4-8.1-11.3-11.2-17.4c-3.1-6.1-5.6-12.6-7.4-19.1c-1.8-6.6-2.9-13.3-3.4-20.1l-0.1-1.3l0-0.3 l0-0.3l0-0.6l0-1.1l0-0.3l0-0.4l0-0.8l0-1.6l0-0.3c0%2c0%2c0%2c0.1%2c0-0.1l0-0.6c0-0.8%2c0-1.7%2c0-2.5c0.1-3.3%2c0.4-6.8%2c0.8-10.2 c0.4-3.4%2c1-6.9%2c1.7-10.3c0.7-3.4%2c1.5-6.8%2c2.5-10.2c1.9-6.7%2c4.3-13.2%2c7.1-19.3c5.7-12.2%2c13.1-23.1%2c22-31.8c2.2-2.2%2c4.5-4.2%2c6.9-6.2 c2.4-1.9%2c4.9-3.7%2c7.5-5.4c2.5-1.7%2c5.2-3.2%2c7.9-4.6c1.3-0.7%2c2.7-1.4%2c4.1-2c0.7-0.3%2c1.4-0.6%2c2.1-0.9c0.7-0.3%2c1.4-0.6%2c2.1-0.9 c2.8-1.2%2c5.7-2.2%2c8.7-3.1c0.7-0.2%2c1.5-0.4%2c2.2-0.7c0.7-0.2%2c1.5-0.4%2c2.2-0.6c1.5-0.4%2c3-0.8%2c4.5-1.1c0.7-0.2%2c1.5-0.3%2c2.3-0.5 c0.8-0.2%2c1.5-0.3%2c2.3-0.5c0.8-0.1%2c1.5-0.3%2c2.3-0.4l1.1-0.2l1.2-0.2c0.8-0.1%2c1.5-0.2%2c2.3-0.3c0.9-0.1%2c1.7-0.2%2c2.6-0.3 c0.7-0.1%2c1.9-0.2%2c2.6-0.3c0.5-0.1%2c1.1-0.1%2c1.6-0.2l1.1-0.1l0.5-0.1l0.6%2c0c0.9-0.1%2c1.7-0.1%2c2.6-0.2l1.3-0.1c0%2c0%2c0.5%2c0%2c0.1%2c0l0.3%2c0 l0.6%2c0c0.7%2c0%2c1.5-0.1%2c2.2-0.1c2.9-0.1%2c5.9-0.1%2c8.8%2c0c5.8%2c0.2%2c11.5%2c0.9%2c17%2c1.9c11.1%2c2.1%2c21.5%2c5.6%2c31%2c10.3 c9.5%2c4.6%2c17.9%2c10.3%2c25.3%2c16.5c0.5%2c0.4%2c0.9%2c0.8%2c1.4%2c1.2c0.4%2c0.4%2c0.9%2c0.8%2c1.3%2c1.2c0.9%2c0.8%2c1.7%2c1.6%2c2.6%2c2.4c0.9%2c0.8%2c1.7%2c1.6%2c2.5%2c2.4 c0.8%2c0.8%2c1.6%2c1.6%2c2.4%2c2.5c3.1%2c3.3%2c6%2c6.6%2c8.6%2c10c5.2%2c6.7%2c9.4%2c13.5%2c12.7%2c19.9c0.2%2c0.4%2c0.4%2c0.8%2c0.6%2c1.2c0.2%2c0.4%2c0.4%2c0.8%2c0.6%2c1.2 c0.4%2c0.8%2c0.8%2c1.6%2c1.1%2c2.4c0.4%2c0.8%2c0.7%2c1.5%2c1.1%2c2.3c0.3%2c0.8%2c0.7%2c1.5%2c1%2c2.3c1.2%2c3%2c2.4%2c5.9%2c3.3%2c8.6c1.5%2c4.4%2c2.6%2c8.3%2c3.5%2c11.7 c0.3%2c1.4%2c1.6%2c2.3%2c3%2c2.1c1.5-0.1%2c2.6-1.3%2c2.6-2.8C342.6%2c170.4%2c342.5%2c166.1%2c342%2c161.2z'/%3e %3c/svg%3e");
+    }
+
+    .preloader__text {
+      margin-top: 16px;
+      font-weight: 500;
+      font-size: 14px;
+      font-family: Sans-serif;
+      opacity: 0;
+      animation-name: preloader-fade-in;
+      animation-duration: .9s;
+      animation-delay: 1.8s;
+      animation-fill-mode: forwards;
+    }
+
+    .theme-light .preloader__text {
+      color: #52545c;
+    }
 
+    .theme-dark .preloader__text {
+      color: #d8d9da;
+    }
+
+    @keyframes preloader-fade-in {
+      0% {
+        opacity: 0;
+        /*animation-timing-function: linear;*/
+        animation-timing-function: cubic-bezier(0, 0, 0.5, 1)
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+
+    @keyframes preloader-bounce {
+      from,
+      to {
+        transform: translateY(0px);
+        animation-timing-function: cubic-bezier(0.3, 0.0, 0.1, 1)
+      }
+      50% {
+        transform: translateY(-50px);
+        animation-timing-function: cubic-bezier(.9, 0, .7, 1)
+      }
+    }
+
+    @keyframes preloader-squash {
+      0% {
+        transform: scaleX(1.3) scaleY(.8);
+        animation-timing-function: cubic-bezier(.3, 0, .1, 1);
+        transform-origin: bottom center;
+      }
+      15% {
+        transform: scaleX(.75) scaleY(1.25);
+        animation-timing-function: cubic-bezier(0, 0, .7, .75);
+        transform-origin: bottom center;
+      }
+      55% {
+        transform: scaleX(1.05) scaleY(.95);
+        animation-timing-function: cubic-bezier(.9, 0, 1, 1);
+        transform-origin: top center;
+      }
+      95% {
+        transform: scaleX(.75) scaleY(1.25);
+        animation-timing-function: cubic-bezier(0, 0, 0, 1);
+        transform-origin: bottom center;
+      }
+      100% {
+        transform: scaleX(1.3) scaleY(.8);
+        transform-origin: bottom center;
+        animation-timing-function: cubic-bezier(0, 0, 0.7, 1);
+      }
+    }
+
+    [ng\:cloak],
+    [ng-cloak],
+    .ng-cloak {
+      display: none !important;
+    }
+  </style>
+
+  <div class="preloader">
+    <div class="preloader__enter">
+      <div class="preloader__bounce">
+        <div class="preloader__logo"></div>
+      </div>
+    </div>
+    <div class="preloader__text">Loading Grafana</div>
+  </div>
+
+  <grafana-app class="grafana-app" ng-cloak>
     <sidemenu class="sidemenu"></sidemenu>
 
     <div class="page-alert-list">
@@ -91,6 +228,14 @@
       settings: [[.Settings]],
       navTree: [[.NavTree]]
     };
+
+    // load css async
+    var myCSS = document.createElement("link");
+    myCSS.rel = "stylesheet";
+    myCSS.href = "public/build/grafana.[[ .Theme ]].css?v[[ .BuildVersion ]]+[[ .BuildCommit ]]";
+
+    // insert it at the end of the head in a legacy-friendly manner
+    document.head.insertBefore(myCSS, document.head.childNodes[document.head.childNodes.length - 1].nextSibling);
   </script> [[if .GoogleTagManagerId]]
   <script>
     dataLayer = [{
@@ -115,4 +260,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/tsconfig.json b/tsconfig.json
index 3ef1dd1b769..58b29ba428e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,10 +3,7 @@
     "moduleResolution": "node",
     "outDir": "public/dist",
     "target": "es5",
-    "lib": [
-      "es6",
-      "dom"
-    ],
+    "lib": ["es6", "dom"],
     "rootDir": "public/",
     "jsx": "react",
     "module": "esnext",
@@ -14,30 +11,24 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "importHelpers": true, // importing helper functions from tslib
-    "noEmitHelpers": true, // disable emitting inline helper functions
-    "removeComments": false, // comments are needed by angular injections
+    "importHelpers": true,
+    "noEmitHelpers": true,
+    "removeComments": false,
     "inlineSourceMap": false,
     "sourceMap": true,
     "noEmitOnError": false,
     "emitDecoratorMetadata": false,
     "experimentalDecorators": true,
     "noImplicitReturns": true,
-    "noImplicitThis": false,
+    "noImplicitThis": true,
     "noImplicitUseStrict": false,
     "noImplicitAny": false,
     "noUnusedLocals": true,
     "baseUrl": "public",
     "pretty": true,
     "paths": {
-      "app": [
-        "app"
-      ]
+      "app": ["app"]
     }
   },
-  "include": [
-    "public/app/**/*.ts",
-    "public/app/**/*.tsx",
-    "public/test/**/*.ts"
-  ]
-}
\ No newline at end of file
+  "include": ["public/app/**/*.ts", "public/app/**/*.tsx", "public/test/**/*.ts"]
+}
diff --git a/tslint.json b/tslint.json
index 9a72f9ccebc..0af9d285f64 100644
--- a/tslint.json
+++ b/tslint.json
@@ -1,5 +1,16 @@
 {
   "rules": {
+    "array-type": [true, "array-simple"],
+    "arrow-return-shorthand": true,
+    "ban": [true,
+      {"name": "Array", "message": "tsstyle#array-constructor"}
+    ],
+    "ban-types": [true,
+      ["Object", "Use {} instead."],
+      ["String", "Use 'string' instead."],
+      ["Number", "Use 'number' instead."],
+      ["Boolean", "Use 'boolean' instead."]
+    ],
     "interface-name": [true, "never-prefix"],
     "no-string-throw": true,
     "no-unused-expression": true,
@@ -14,18 +25,13 @@
     "eofline": true,
     "forin": false,
     "indent": [true, "spaces", 2],
+    "jsdoc-format": true,
     "label-position": true,
     "max-line-length": [true, 150],
-    "member-access": false,
+    "member-access": [true, "no-public"],
     "no-arg": true,
     "no-bitwise": false,
-    "no-console": [true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
+    "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
     "no-construct": true,
     "no-debugger": true,
     "no-empty": false,
@@ -35,27 +41,22 @@
     "no-string-literal": false,
     "no-switch-case-fall-through": false,
     "no-trailing-whitespace": true,
-    "no-var-keyword": false,
+    "no-var-keyword": true,
     "object-literal-sort-keys": false,
-    "one-line": [true,
-      "check-open-brace",
-      "check-catch",
-      "check-else"
-    ],
+    "one-line": [true, "check-open-brace", "check-catch", "check-else"],
+    "prefer-const": true,
     "radix": false,
-    "typedef-whitespace": [true, {
-      "call-signature": "nospace",
-      "index-signature": "nospace",
-      "parameter": "nospace",
-      "property-declaration": "nospace",
-      "variable-declaration": "nospace"
-    }],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
     "variable-name": [true, "ban-keywords"],
-    "whitespace": [true,
-      "check-branch",
-      "check-decl",
-      "check-type",
-      "check-preblock"
-    ]
+    "whitespace": [true, "check-branch", "check-decl", "check-type", "check-preblock"]
   }
 }
diff --git a/vendor/github.com/shurcooL/sanitized_anchor_name/LICENSE b/vendor/github.com/shurcooL/sanitized_anchor_name/LICENSE
deleted file mode 100644
index c35c17af980..00000000000
--- a/vendor/github.com/shurcooL/sanitized_anchor_name/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2015 Dmitri Shuralyov
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/vendor/github.com/shurcooL/sanitized_anchor_name/main.go b/vendor/github.com/shurcooL/sanitized_anchor_name/main.go
deleted file mode 100644
index 6a77d124317..00000000000
--- a/vendor/github.com/shurcooL/sanitized_anchor_name/main.go
+++ /dev/null
@@ -1,29 +0,0 @@
-// Package sanitized_anchor_name provides a func to create sanitized anchor names.
-//
-// Its logic can be reused by multiple packages to create interoperable anchor names
-// and links to those anchors.
-//
-// At this time, it does not try to ensure that generated anchor names
-// are unique, that responsibility falls on the caller.
-package sanitized_anchor_name // import "github.com/shurcooL/sanitized_anchor_name"
-
-import "unicode"
-
-// Create returns a sanitized anchor name for the given text.
-func Create(text string) string {
-	var anchorName []rune
-	var futureDash = false
-	for _, r := range text {
-		switch {
-		case unicode.IsLetter(r) || unicode.IsNumber(r):
-			if futureDash && len(anchorName) > 0 {
-				anchorName = append(anchorName, '-')
-			}
-			futureDash = false
-			anchorName = append(anchorName, unicode.ToLower(r))
-		default:
-			futureDash = true
-		}
-	}
-	return string(anchorName)
-}