diff --git a/.circleci/config.yml b/.circleci/config.yml
index c293ea26a9d..60b3ae91ccc 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -206,6 +206,10 @@ jobs:
       - run: docker info
       - run: cp dist/grafana-latest.linux-x64.tar.gz packaging/docker
       - run: cd packaging/docker && ./build-deploy.sh "master-${CIRCLE_SHA1}"
+      - run: rm packaging/docker/grafana-latest.linux-x64.tar.gz
+      - run: cp enterprise-dist/grafana-enterprise-*.linux-amd64.tar.gz packaging/docker/grafana-latest.linux-x64.tar.gz
+      - run: cd packaging/docker && ./build-enterprise.sh "master"
+
 
   grafana-docker-pr:
     docker:
@@ -230,6 +234,9 @@ jobs:
         - run: docker info
         - run: cp dist/grafana-latest.linux-x64.tar.gz packaging/docker
         - run: cd packaging/docker && ./build-deploy.sh "${CIRCLE_TAG}"
+        - run: rm packaging/docker/grafana-latest.linux-x64.tar.gz
+        - run: cp enterprise-dist/grafana-enterprise-*.linux-amd64.tar.gz packaging/docker/grafana-latest.linux-x64.tar.gz
+        - run: cd packaging/docker && ./build-enterprise.sh "${CIRCLE_TAG}"
 
   build-enterprise:
     docker:
@@ -312,39 +319,49 @@ jobs:
 
   deploy-enterprise-master:
     docker:
-      - image: circleci/python:2.7-stretch
+      - image: grafana/grafana-ci-deploy:1.0.0
     steps:
       - attach_workspace:
           at: .
       - run:
-          name: install awscli
-          command: 'sudo pip install awscli'
+          name: gcp credentials
+          command: 'echo ${GCP_GRAFANA_UPLOAD_KEY} > /tmp/gcpkey.json'
+      - run:
+          name: sign in to gcp
+          command: '/opt/google-cloud-sdk/bin/gcloud auth activate-service-account --key-file=/tmp/gcpkey.json'
       - run:
           name: deploy to s3
           command: 'aws s3 sync ./enterprise-dist s3://$ENTERPRISE_BUCKET_NAME/master'
+      - run:
+          name: deploy to gcp
+          command: '/opt/google-cloud-sdk/bin/gsutil cp ./enterprise-dist/* gs://$GCP_BUCKET_NAME/enterprise/master'
+
 
   deploy-enterprise-release:
     docker:
-    - image: circleci/python:2.7-stretch
+    - image: grafana/grafana-ci-deploy:1.0.0
     steps:
-    - attach_workspace:
-        at: .
-    - run:
-        name: install awscli
-        command: 'sudo pip install awscli'
-    - run:
-        name: deploy to s3
-        command: 'aws s3 sync ./enterprise-dist s3://$ENTERPRISE_BUCKET_NAME/release'
+      - attach_workspace:
+         at: .
+      - run:
+          name: gcp credentials
+          command: 'echo ${GCP_GRAFANA_UPLOAD_KEY} > /tmp/gcpkey.json'
+      - run:
+          name: sign in to gcp
+          command: '/opt/google-cloud-sdk/bin/gcloud auth activate-service-account --key-file=/tmp/gcpkey.json'
+      - run:
+          name: deploy to s3
+          command: 'aws s3 sync ./enterprise-dist s3://$ENTERPRISE_BUCKET_NAME/release'
+      - run:
+          name: deploy to gcp
+          command: '/opt/google-cloud-sdk/bin/gsutil cp ./enterprise-dist/* gs://$GCP_BUCKET_NAME/enterprise/release'
 
   deploy-master:
     docker:
-      - image: circleci/python:2.7-stretch
+      - image: grafana/grafana-ci-deploy:1.0.0
     steps:
       - attach_workspace:
           at: .
-      - run:
-          name: install awscli
-          command: 'sudo pip install awscli'
       - run:
           name: deploy to s3
           command: |
@@ -354,6 +371,15 @@ jobs:
       - run:
           name: Trigger Windows build
           command: './scripts/trigger_windows_build.sh ${APPVEYOR_TOKEN} ${CIRCLE_SHA1} master'
+      - run:
+          name: gcp credentials
+          command: 'echo ${GCP_GRAFANA_UPLOAD_KEY} > /tmp/gcpkey.json'
+      - run:
+          name: sign in to gcp
+          command: '/opt/google-cloud-sdk/bin/gcloud auth activate-service-account --key-file=/tmp/gcpkey.json'
+      - run:
+          name: deploy to gcp
+          command: '/opt/google-cloud-sdk/bin/gsutil cp ./dist/* gs://$GCP_BUCKET_NAME/oss/master'
       - run:
           name: Publish to Grafana.com
           command: |
@@ -362,16 +388,22 @@ jobs:
 
   deploy-release:
     docker:
-      - image: circleci/python:2.7-stretch
+      - image: grafana/grafana-ci-deploy:1.0.0
     steps:
       - attach_workspace:
           at: .
-      - run:
-          name: install awscli
-          command: 'sudo pip install awscli'
       - run:
           name: deploy to s3
           command: 'aws s3 sync ./dist s3://$BUCKET_NAME/release'
+      - run:
+          name: gcp credentials
+          command: 'echo ${GCP_GRAFANA_UPLOAD_KEY} > /tmp/gcpkey.json'
+      - run:
+          name: sign in to gcp
+          command: '/opt/google-cloud-sdk/bin/gcloud auth activate-service-account --key-file=/tmp/gcpkey.json'
+      - run:
+          name: deploy to gcp
+          command: '/opt/google-cloud-sdk/bin/gsutil cp ./dist/* gs://R/oss/release'
       - run:
           name: Deploy to Grafana.com
           command: './scripts/build/publish.sh'
@@ -409,6 +441,7 @@ workflows:
       - grafana-docker-master:
           requires:
             - build-all
+            - build-all-enterprise
             - test-backend
             - test-frontend
             - codespell
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 778da9cd499..ea6de0dd43b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,20 +4,28 @@
 
 * **Alerting**: Option to disable OK alert notifications [#12330](https://github.com/grafana/grafana/issues/12330) & [#6696](https://github.com/grafana/grafana/issues/6696), thx [@davewat](https://github.com/davewat)
 * **Postgres/MySQL/MSSQL**: Adds support for configuration of max open/idle connections and connection max lifetime. Also, panels with multiple SQL queries will now be executed concurrently [#11711](https://github.com/grafana/grafana/issues/11711), thx [@connection-reset](https://github.com/connection-reset)
-* **MSSQL**: Add encrypt setting to allow configuration of how data sent between client and server are encrypted [#13629](https://github.com/grafana/grafana/issues/13629), thx [@ramiro](https://github.com/ramiro)
+* **MySQL**: Graphical query builder [#13762](https://github.com/grafana/grafana/issues/13762), thx [svenklemm](https://github.com/svenklemm)
 * **MySQL**: Support connecting thru Unix socket for MySQL datasource [#12342](https://github.com/grafana/grafana/issues/12342), thx [@Yukinoshita-Yukino](https://github.com/Yukinoshita-Yukino)
+* **MSSQL**: Add encrypt setting to allow configuration of how data sent between client and server are encrypted [#13629](https://github.com/grafana/grafana/issues/13629), thx [@ramiro](https://github.com/ramiro)
 * **Stackdriver**: Not possible to authenticate using GCE metadata server [#13669](https://github.com/grafana/grafana/issues/13669)
 
 ### Minor
 
 * **Cloudwatch**: Show all available CloudWatch regions [#12308](https://github.com/grafana/grafana/issues/12308), thx [@mtanda](https://github.com/mtanda)
+* **Postgres**: Add delta window function to postgres query builder [#13925](https://github.com/grafana/grafana/issues/13925), thx [svenklemm](https://github.com/svenklemm)
 * **Units**: New clock time format, to format ms or second values as for example `01h:59m`, [#13635](https://github.com/grafana/grafana/issues/13635), thx [@franciscocpg](https://github.com/franciscocpg)
 * **Datasource Proxy**: Keep trailing slash for datasource proxy requests [#13326](https://github.com/grafana/grafana/pull/13326), thx [@ryantxu](https://github.com/ryantxu)
+* **DingDing**: Can't receive DingDing alert when alert is triggered [#13723](https://github.com/grafana/grafana/issues/13723), thx [@Yukinoshita-Yukino](https://github.com/Yukinoshita-Yukino)
+* **Internal metrics**: Renamed `grafana_info` to `grafana_build_info` and added branch, goversion and revision [#13876](https://github.com/grafana/grafana/pull/13876)
 
 ### Breaking changes
 
 * Postgres/MySQL/MSSQL datasources now per default uses `max open connections` = `unlimited` (earlier 10), `max idle connections` = `2` (earlier 10) and `connection max lifetime` = `4` hours (earlier unlimited)
 
+# 5.3.3 (unreleased)
+
+* **MySQL**: Fix `$__timeFilter()` should respect local time zone [#13769](https://github.com/grafana/grafana/issues/13769)
+
 # 5.3.2 (2018-10-24)
 
 * **InfluxDB/Graphite/Postgres**: Prevent cross site scripting (XSS) in query editor [#13667](https://github.com/grafana/grafana/issues/13667), thx [@svenklemm](https://github.com/svenklemm)
diff --git a/Gruntfile.js b/Gruntfile.js
index 2d5990b5f58..de3e68d4a92 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -9,12 +9,17 @@ module.exports = function (grunt) {
     destDir: 'dist',
     tempDir: 'tmp',
     platform: process.platform.replace('win32', 'windows'),
+    enterprise: false,
   };
 
   if (grunt.option('platform')) {
     config.platform = grunt.option('platform');
   }
 
+  if (grunt.option('enterprise')) {
+    config.enterprise = true;
+  }
+
   if (grunt.option('arch')) {
     config.arch = grunt.option('arch');
   } else {
diff --git a/Makefile b/Makefile
index c9e51d897f3..fcb740d2fac 100644
--- a/Makefile
+++ b/Makefile
@@ -5,8 +5,7 @@ all: deps build
 deps-go:
 	go run build.go setup
 
-deps-js:
-	yarn install --pure-lockfile --no-progress
+deps-js: node_modules
 
 deps: deps-js
 
@@ -43,3 +42,10 @@ test: test-go test-js
 
 run:
 	./bin/grafana-server
+
+clean:
+	rm -rf node_modules
+	rm -rf public/build
+
+node_modules: package.json yarn.lock
+	yarn install --pure-lockfile --no-progress
diff --git a/build.go b/build.go
index 69fbf3bada8..b136754efbc 100644
--- a/build.go
+++ b/build.go
@@ -403,6 +403,10 @@ func gruntBuildArg(task string) []string {
 	if phjsToRelease != "" {
 		args = append(args, fmt.Sprintf("--phjsToRelease=%v", phjsToRelease))
 	}
+	if enterprise {
+		args = append(args, "--enterprise")
+	}
+
 	args = append(args, fmt.Sprintf("--platform=%v", goos))
 
 	return args
@@ -467,6 +471,7 @@ func ldflags() string {
 	b.WriteString(fmt.Sprintf(" -X main.version=%s", version))
 	b.WriteString(fmt.Sprintf(" -X main.commit=%s", getGitSha()))
 	b.WriteString(fmt.Sprintf(" -X main.buildstamp=%d", buildStamp()))
+	b.WriteString(fmt.Sprintf(" -X main.buildBranch=%s", getGitBranch()))
 	return b.String()
 }
 
@@ -514,6 +519,14 @@ func setBuildEnv() {
 	}
 }
 
+func getGitBranch() string {
+	v, err := runError("git", "rev-parse", "--abbrev-ref", "HEAD")
+	if err != nil {
+		return "master"
+	}
+	return string(v)
+}
+
 func getGitSha() string {
 	v, err := runError("git", "rev-parse", "--short", "HEAD")
 	if err != nil {
diff --git a/conf/defaults.ini b/conf/defaults.ini
index 750f06f2f6a..481bb002582 100644
--- a/conf/defaults.ini
+++ b/conf/defaults.ini
@@ -557,3 +557,7 @@ callback_url =
 
 [panels]
 enable_alpha = false
+
+[enterprise]
+license_path =
+
diff --git a/conf/sample.ini b/conf/sample.ini
index e6a03718d19..61eb1d695e8 100644
--- a/conf/sample.ini
+++ b/conf/sample.ini
@@ -475,3 +475,8 @@ log_queries =
 # Options to configure external image rendering server like https://github.com/grafana/grafana-image-renderer
 ;server_url =
 ;callback_url =
+
+[enterprise]
+# Path to a valid Grafana Enterprise license.jwt file
+;license_path =
+
diff --git a/devenv/dev-dashboards/panel_tests_graph.json b/devenv/dev-dashboards/panel_tests_graph.json
index 8a1770f0fa6..ba677764a43 100644
--- a/devenv/dev-dashboards/panel_tests_graph.json
+++ b/devenv/dev-dashboards/panel_tests_graph.json
@@ -927,6 +927,123 @@
       "title": "",
       "type": "text"
     },
+    {
+      "aliasColors": {},
+      "bars": false,
+      "dashLength": 10,
+      "dashes": false,
+      "datasource": "gdev-testdata",
+      "editable": true,
+      "error": false,
+      "fill": 0,
+      "gridPos": {
+        "h": 7,
+        "w": 16,
+        "x": 0,
+        "y": 44
+      },
+      "id": 21,
+      "legend": {
+        "avg": false,
+        "current": false,
+        "max": false,
+        "min": false,
+        "show": true,
+        "total": false,
+        "values": false
+      },
+      "lines": true,
+      "linewidth": 2,
+      "links": [],
+      "nullPointMode": "null",
+      "percentage": false,
+      "pointradius": 5,
+      "points": false,
+      "renderer": "flot",
+      "seriesOverrides": [
+        {
+          "alias": "C-series",
+          "steppedLine": true
+        }
+      ],
+      "spaceLength": 10,
+      "stack": false,
+      "steppedLine": false,
+      "targets": [
+        {
+          "alias": "",
+          "hide": false,
+          "refId": "B",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,null,40,null,90,null,null,100,null,null,100,null,null,80,null",
+          "target": ""
+        },
+        {
+          "alias": "",
+          "hide": false,
+          "refId": "C",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "20,null40,null,null,50,null,70,null,100,null,10,null,30,null",
+          "target": ""
+        }
+      ],
+      "thresholds": [],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Null between points",
+      "tooltip": {
+        "msResolution": false,
+        "shared": true,
+        "sort": 0,
+        "value_type": "cumulative"
+      },
+      "type": "graph",
+      "xaxis": {
+        "buckets": null,
+        "mode": "time",
+        "name": null,
+        "show": true,
+        "values": []
+      },
+      "yaxes": [
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        },
+        {
+          "format": "short",
+          "label": null,
+          "logBase": 1,
+          "max": null,
+          "min": null,
+          "show": true
+        }
+      ],
+      "yaxis": {
+        "align": false,
+        "alignLevel": null
+      }
+    },
+    {
+      "content": "Left is showing null between values for a normal line graph and staircase graph. Orphaned data points should be rendered as points",
+      "editable": true,
+      "error": false,
+      "gridPos": {
+        "h": 7,
+        "w": 8,
+        "x": 16,
+        "y": 44
+      },
+      "id": 22,
+      "links": [],
+      "mode": "markdown",
+      "title": "",
+      "type": "text"
+    },
     {
       "aliasColors": {},
       "bars": false,
@@ -939,7 +1056,7 @@
         "h": 7,
         "w": 24,
         "x": 0,
-        "y": 44
+        "y": 51
       },
       "id": 20,
       "legend": {
@@ -1024,7 +1141,7 @@
         "h": 7,
         "w": 12,
         "x": 0,
-        "y": 51
+        "y": 58
       },
       "id": 16,
       "legend": {
@@ -1127,7 +1244,7 @@
         "h": 7,
         "w": 12,
         "x": 12,
-        "y": 51
+        "y": 58
       },
       "id": 17,
       "legend": {
@@ -1266,7 +1383,7 @@
         "h": 7,
         "w": 12,
         "x": 0,
-        "y": 58
+        "y": 65
       },
       "id": 18,
       "legend": {
@@ -1370,7 +1487,7 @@
         "h": 7,
         "w": 12,
         "x": 12,
-        "y": 58
+        "y": 65
       },
       "id": 19,
       "legend": {
@@ -1554,5 +1671,5 @@
   "timezone": "browser",
   "title": "Panel Tests - Graph",
   "uid": "5SdHCadmz",
-  "version": 3
+  "version": 1
 }
diff --git a/docs/sources/administration/provisioning.md b/docs/sources/administration/provisioning.md
index 8916b2bf6e3..9149aa42130 100644
--- a/docs/sources/administration/provisioning.md
+++ b/docs/sources/administration/provisioning.md
@@ -158,7 +158,7 @@ Since not all datasources have the same configuration settings we only have the
 | timeInterval | string | Prometheus, Elasticsearch, InfluxDB, MySQL, PostgreSQL & MSSQL | Lowest interval/step value that should be used for this data source |
 | esVersion | number | Elasticsearch | Elasticsearch version as a number (2/5/56) |
 | timeField | string | Elasticsearch | Which field that should be used as timestamp |
-| interval | string | Elasticsearch | Index date time format |
+| interval | string | Elasticsearch | Index date time format. nil(No Pattern), 'Hourly', 'Daily', 'Weekly', 'Monthly' or 'Yearly' |
 | authType | string | Cloudwatch | Auth provider. keys/credentials/arn |
 | assumeRoleArn | string | Cloudwatch | ARN of Assume Role |
 | defaultRegion | string | Cloudwatch | AWS region |
diff --git a/docs/sources/alerting/notifications.md b/docs/sources/alerting/notifications.md
index 307af1ee15e..b232ee78f27 100644
--- a/docs/sources/alerting/notifications.md
+++ b/docs/sources/alerting/notifications.md
@@ -140,7 +140,7 @@ In DingTalk PC Client:
 
 6. There will be a Webhook URL in the panel, looks like this: https://oapi.dingtalk.com/robot/send?access_token=xxxxxxxxx. Copy this URL to the grafana Dingtalk setting page and then click "finish".
 
-Dingtalk supports the following "message type": `text`, `link` and `markdown`. Only the `text` message type is supported.
+Dingtalk supports the following "message type": `text`, `link` and `markdown`. Only the `link` message type is supported.
 
 ### Kafka
 
diff --git a/docs/sources/auth/gitlab.md b/docs/sources/auth/gitlab.md
index e3a450f9fc7..56fc3b131a5 100644
--- a/docs/sources/auth/gitlab.md
+++ b/docs/sources/auth/gitlab.md
@@ -100,12 +100,12 @@ display name, especially if the display name contains spaces or special
 characters. Make sure you always use the group or subgroup name as it appears
 in the URL of the group or subgroup.
 
-Here's a complete example with `alloed_sign_up` enabled, and access limited to
+Here's a complete example with `allow_sign_up` enabled, and access limited to
 the `example` and `foo/bar` groups:
 
 ```ini
 [auth.gitlab]
-enabled = false
+enabled = true
 allow_sign_up = true
 client_id = GITLAB_APPLICATION_ID
 client_secret = GITLAB_SECRET
diff --git a/docs/sources/features/datasources/mysql.md b/docs/sources/features/datasources/mysql.md
index 988f632bff3..bc4e4df6cf9 100644
--- a/docs/sources/features/datasources/mysql.md
+++ b/docs/sources/features/datasources/mysql.md
@@ -73,6 +73,58 @@ Example:
 
 You can use wildcards (`*`)  in place of database or table if you want to grant access to more databases and tables.
 
+## Query Editor
+
+> Only available in Grafana v5.4+.
+
+{{< docs-imagebox img="/img/docs/v54/mysql_query_still.png" class="docs-image--no-shadow" animated-gif="/img/docs/v54/mysql_query.gif" >}}
+
+You find the MySQL query editor in the metrics tab in a panel's edit mode. You enter edit mode by clicking the
+panel title, then edit.
+
+The query editor has a link named `Generated SQL` that shows up after a query has been executed, while in panel edit mode. Click on it and it will expand and show the raw interpolated SQL string that was executed.
+
+### Select table, time column and metric column (FROM)
+
+When you enter edit mode for the first time or add a new query Grafana will try to prefill the query builder with the first table that has a timestamp column and a numeric column.
+
+In the FROM field, Grafana will suggest tables that are in the configured database. To select a table or view in another database that your database user has access to you can manually enter a fully qualified name (database.table) like `otherDb.metrics`.
+
+The Time column field refers to the name of the column holding your time values. Selecting a value for the Metric column field is optional. If a value is selected, the Metric column field will be used as the series name.
+
+The metric column suggestions will only contain columns with a text datatype (text, tinytext, mediumtext, longtext, varchar, char).
+If you want to use a column with a different datatype as metric column you may enter the column name with a cast: `CAST(numericColumn as CHAR)`.
+You may also enter arbitrary SQL expressions in the metric column field that evaluate to a text datatype like
+`CONCAT(column1, " ", CAST(numericColumn as CHAR))`.
+
+### Columns and Aggregation functions (SELECT)
+
+In the `SELECT` row you can specify what columns and functions you want to use.
+In the column field you may write arbitrary expressions instead of a column name like `column1 * column2 / column3`.
+
+If you use aggregate functions you need to group your resultset. The editor will automatically add a `GROUP BY time` if you add an aggregate function.
+
+You may add further value columns by clicking the plus button and selecting `Column` from the menu. Multiple value columns will be plotted as separate series in the graph panel.
+
+### Filter data (WHERE)
+To add a filter click the plus icon to the right of the `WHERE` condition. You can remove filters by clicking on
+the filter and selecting `Remove`. A filter for the current selected timerange is automatically added to new queries.
+
+### Group By
+To group by time or any other columns click the plus icon at the end of the GROUP BY row. The suggestion dropdown will only show text columns of your currently selected table but you may manually enter any column.
+You can remove the group by clicking on the item and then selecting `Remove`.
+
+If you add any grouping, all selected columns need to have an aggregate function applied. The query builder will automatically add aggregate functions to all columns without aggregate functions when you add groupings.
+
+#### Gap Filling
+
+Grafana can fill in missing values when you group by time. The time function accepts two arguments. The first argument is the time window that you would like to group by, and the second argument is the value you want Grafana to fill missing items with.
+
+### Text Editor Mode (RAW)
+You can switch to the raw query editor mode by clicking the hamburger icon and selecting `Switch editor mode` or by clicking `Edit SQL` below the query.
+
+> If you use the raw query editor, be sure your query at minimum has `ORDER BY time` and a filter on the returned time range.
+
 ## Macros
 
 To simplify syntax and to allow for dynamic parts, like date range filters, the query can contain macros.
diff --git a/package.json b/package.json
index 9b00853355a..4c817ef6e29 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "grunt-contrib-copy": "~1.0.0",
     "grunt-contrib-cssmin": "~1.0.2",
     "grunt-exec": "^1.0.1",
+    "grunt-newer": "^1.3.0",
     "grunt-notify": "^0.4.5",
     "grunt-postcss": "^0.8.0",
     "grunt-sass": "^2.0.0",
diff --git a/packaging/docker/build-enterprise.sh b/packaging/docker/build-enterprise.sh
new file mode 100755
index 00000000000..2f59e436d95
--- /dev/null
+++ b/packaging/docker/build-enterprise.sh
@@ -0,0 +1,12 @@
+#!/bin/sh
+set -e
+
+_grafana_tag=$1
+_docker_repo=${2:-grafana/grafana-enterprise}
+
+docker build \
+  --tag "${_docker_repo}:${_grafana_tag}"\
+  --no-cache=true \
+  .
+
+docker push "${_docker_repo}:${_grafana_tag}"
diff --git a/packaging/release_process.md b/packaging/release_process.md
deleted file mode 100644
index 6037a9c499c..00000000000
--- a/packaging/release_process.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# New Grafana Release Processes
-
-## Building release packages
-
-1) Update package.json so that it has the right version.
-2) Create a git tag for the release: `git tag -a v3.0.4 -m "3.0.4 release"`
-3) Push branch & tag to github!
-2) Packages from master a built automatically by circle CI for this repo [grafana/grafana-packer](https://github.com/grafana/grafana-packer)
-
-### Non master branch
-
-When building from non master branch create a new branch in repo [grafana/grafana-packer](https://github.com/grafana/grafana-packer)
-and configure circle.yml to deploy that branch as well, https://github.com/grafana/grafana-packer/blob/master/circle.yml#L25,
-you also need to update https://github.com/grafana/grafana-packer/blob/v3.1.x/deploy.sh#L7.
-
-### Windows build
-
-Sign into ci.appveyor.com and the Grafana project's build history page. Builds for windows take a long time (around 20min)
-and fail quite often for random reasons so I usually continue with the release process without a windows build already built.
-
-1) Click on the green build that has the correct version and tag
-2) Click on `DEPLOYMENTS`
-3) Click on `NEW DEPLOYMENT`
-4) Select GrafanaBuildS3
-4) Select the build you want to deploy.
-
-The deployment should be quick (just uploads the release zip file to S3)
-
-
diff --git a/pkg/api/dtos/index.go b/pkg/api/dtos/index.go
index 77004899fc3..bd3ac76eec8 100644
--- a/pkg/api/dtos/index.go
+++ b/pkg/api/dtos/index.go
@@ -14,6 +14,7 @@ type IndexViewData struct {
 	NewGrafanaVersionExists bool
 	NewGrafanaVersion       string
 	AppName                 string
+	AppNameBodyClass        string
 }
 
 type PluginCss struct {
diff --git a/pkg/api/index.go b/pkg/api/index.go
index e61620f9586..fe7c9e79a17 100644
--- a/pkg/api/index.go
+++ b/pkg/api/index.go
@@ -83,6 +83,7 @@ func (hs *HTTPServer) setIndexViewData(c *m.ReqContext) (*dtos.IndexViewData, er
 		NewGrafanaVersion:       plugins.GrafanaLatestVersion,
 		NewGrafanaVersionExists: plugins.GrafanaHasUpdate,
 		AppName:                 setting.ApplicationName,
+		AppNameBodyClass:        getAppNameBodyClass(setting.ApplicationName),
 	}
 
 	if setting.DisableGravatar {
@@ -377,3 +378,14 @@ func (hs *HTTPServer) NotFoundHandler(c *m.ReqContext) {
 
 	c.HTML(404, "index", data)
 }
+
+func getAppNameBodyClass(name string) string {
+	switch name {
+	case setting.APP_NAME:
+		return "app-grafana"
+	case setting.APP_NAME_ENTERPRISE:
+		return "app-enterprise"
+	default:
+		return ""
+	}
+}
diff --git a/pkg/cmd/grafana-server/main.go b/pkg/cmd/grafana-server/main.go
index 06c07a2887c..c7c1ff3aff7 100644
--- a/pkg/cmd/grafana-server/main.go
+++ b/pkg/cmd/grafana-server/main.go
@@ -3,6 +3,8 @@ package main
 import (
 	"flag"
 	"fmt"
+	"net/http"
+	_ "net/http/pprof"
 	"os"
 	"os/signal"
 	"runtime"
@@ -11,16 +13,12 @@ import (
 	"syscall"
 	"time"
 
-	"net/http"
-	_ "net/http/pprof"
-
+	extensions "github.com/grafana/grafana/pkg/extensions"
 	"github.com/grafana/grafana/pkg/log"
 	"github.com/grafana/grafana/pkg/metrics"
-	"github.com/grafana/grafana/pkg/setting"
-
-	extensions "github.com/grafana/grafana/pkg/extensions"
 	_ "github.com/grafana/grafana/pkg/services/alerting/conditions"
 	_ "github.com/grafana/grafana/pkg/services/alerting/notifiers"
+	"github.com/grafana/grafana/pkg/setting"
 	_ "github.com/grafana/grafana/pkg/tsdb/cloudwatch"
 	_ "github.com/grafana/grafana/pkg/tsdb/elasticsearch"
 	_ "github.com/grafana/grafana/pkg/tsdb/graphite"
@@ -35,6 +33,7 @@ import (
 
 var version = "5.0.0"
 var commit = "NA"
+var buildBranch = "master"
 var buildstamp string
 
 var configFile = flag.String("config", "", "path to config file")
@@ -47,7 +46,7 @@ func main() {
 	profilePort := flag.Int("profile-port", 6060, "Define custom port for profiling")
 	flag.Parse()
 	if *v {
-		fmt.Printf("Version %s (commit: %s)\n", version, commit)
+		fmt.Printf("Version %s (commit: %s, branch: %s)\n", version, commit, buildBranch)
 		os.Exit(0)
 	}
 
@@ -78,9 +77,10 @@ func main() {
 	setting.BuildVersion = version
 	setting.BuildCommit = commit
 	setting.BuildStamp = buildstampInt64
+	setting.BuildBranch = buildBranch
 	setting.IsEnterprise = extensions.IsEnterprise
 
-	metrics.M_Grafana_Version.WithLabelValues(version).Set(1)
+	metrics.SetBuildInformation(version, commit, buildBranch)
 
 	server := NewGrafanaServer()
 
diff --git a/pkg/cmd/grafana-server/server.go b/pkg/cmd/grafana-server/server.go
index 8794d7d8338..765b8ddf993 100644
--- a/pkg/cmd/grafana-server/server.go
+++ b/pkg/cmd/grafana-server/server.go
@@ -12,24 +12,16 @@ import (
 	"time"
 
 	"github.com/facebookgo/inject"
+	"github.com/grafana/grafana/pkg/api"
 	"github.com/grafana/grafana/pkg/api/routing"
 	"github.com/grafana/grafana/pkg/bus"
-	"github.com/grafana/grafana/pkg/middleware"
-	"github.com/grafana/grafana/pkg/registry"
-
-	"golang.org/x/sync/errgroup"
-
-	"github.com/grafana/grafana/pkg/api"
+	_ "github.com/grafana/grafana/pkg/extensions"
 	"github.com/grafana/grafana/pkg/log"
 	"github.com/grafana/grafana/pkg/login"
-	"github.com/grafana/grafana/pkg/setting"
-
-	"github.com/grafana/grafana/pkg/social"
-
-	// self registering services
-	_ "github.com/grafana/grafana/pkg/extensions"
 	_ "github.com/grafana/grafana/pkg/metrics"
+	"github.com/grafana/grafana/pkg/middleware"
 	_ "github.com/grafana/grafana/pkg/plugins"
+	"github.com/grafana/grafana/pkg/registry"
 	_ "github.com/grafana/grafana/pkg/services/alerting"
 	_ "github.com/grafana/grafana/pkg/services/cleanup"
 	_ "github.com/grafana/grafana/pkg/services/notifications"
@@ -37,7 +29,10 @@ import (
 	_ "github.com/grafana/grafana/pkg/services/rendering"
 	_ "github.com/grafana/grafana/pkg/services/search"
 	_ "github.com/grafana/grafana/pkg/services/sqlstore"
+	"github.com/grafana/grafana/pkg/setting"
+	"github.com/grafana/grafana/pkg/social" // self registering services
 	_ "github.com/grafana/grafana/pkg/tracing"
+	"golang.org/x/sync/errgroup"
 )
 
 func NewGrafanaServer() *GrafanaServerImpl {
@@ -159,7 +154,7 @@ func (g *GrafanaServerImpl) loadConfiguration() {
 		os.Exit(1)
 	}
 
-	g.log.Info("Starting "+setting.ApplicationName, "version", version, "commit", commit, "compiled", time.Unix(setting.BuildStamp, 0))
+	g.log.Info("Starting "+setting.ApplicationName, "version", version, "commit", commit, "branch", buildBranch, "compiled", time.Unix(setting.BuildStamp, 0))
 	g.cfg.LogConfigSources()
 }
 
diff --git a/pkg/login/ldap.go b/pkg/login/ldap.go
index 4c71ab3cd5f..d4e81d2bd46 100644
--- a/pkg/login/ldap.go
+++ b/pkg/login/ldap.go
@@ -185,7 +185,7 @@ func (a *ldapAuther) GetGrafanaUserFor(ctx *m.ReqContext, ldapUser *LdapUserInfo
 
 		if ldapUser.isMemberOf(group.GroupDN) {
 			extUser.OrgRoles[group.OrgId] = group.OrgRole
-			if extUser.IsGrafanaAdmin == nil || *extUser.IsGrafanaAdmin == false {
+			if extUser.IsGrafanaAdmin == nil || !*extUser.IsGrafanaAdmin {
 				extUser.IsGrafanaAdmin = group.IsGrafanaAdmin
 			}
 		}
diff --git a/pkg/metrics/metrics.go b/pkg/metrics/metrics.go
index 9a514fdb6f3..5709e3e3213 100644
--- a/pkg/metrics/metrics.go
+++ b/pkg/metrics/metrics.go
@@ -58,7 +58,14 @@ var (
 	M_StatActive_Users       prometheus.Gauge
 	M_StatTotal_Orgs         prometheus.Gauge
 	M_StatTotal_Playlists    prometheus.Gauge
-	M_Grafana_Version        *prometheus.GaugeVec
+
+	// M_Grafana_Version is a gauge that contains build info about this binary
+	//
+	// Deprecated: use M_Grafana_Build_Version instead.
+	M_Grafana_Version *prometheus.GaugeVec
+
+	// grafanaBuildVersion is a gauge that contains build info about this binary
+	grafanaBuildVersion *prometheus.GaugeVec
 )
 
 func newCounterVecStartingAtZero(opts prometheus.CounterOpts, labels []string, labelValues ...string) *prometheus.CounterVec {
@@ -293,9 +300,25 @@ func init() {
 
 	M_Grafana_Version = prometheus.NewGaugeVec(prometheus.GaugeOpts{
 		Name:      "info",
-		Help:      "Information about the Grafana",
+		Help:      "Information about the Grafana. This metric is deprecated. please use `grafana_build_info`",
 		Namespace: exporterName,
 	}, []string{"version"})
+
+	grafanaBuildVersion = prometheus.NewGaugeVec(prometheus.GaugeOpts{
+		Name:      "build_info",
+		Help:      "A metric with a constant '1' value labeled by version, revision, branch, and goversion from which Grafana was built.",
+		Namespace: exporterName,
+	}, []string{"version", "revision", "branch", "goversion"})
+}
+
+// SetBuildInformation sets the build information for this binary
+func SetBuildInformation(version, revision, branch string) {
+	// We export this info twice for backwards compability.
+	// Once this have been released for some time we should be able to remote `M_Grafana_Version`
+	// The reason we added a new one is that its common practice in the prometheus community
+	// to name this metric `*_build_info` so its easy to do aggregation on all programs.
+	M_Grafana_Version.WithLabelValues(version).Set(1)
+	grafanaBuildVersion.WithLabelValues(version, revision, branch, runtime.Version()).Set(1)
 }
 
 func initMetricVars() {
@@ -334,7 +357,8 @@ func initMetricVars() {
 		M_StatActive_Users,
 		M_StatTotal_Orgs,
 		M_StatTotal_Playlists,
-		M_Grafana_Version)
+		M_Grafana_Version,
+		grafanaBuildVersion)
 
 }
 
diff --git a/pkg/middleware/middleware.go b/pkg/middleware/middleware.go
index 3e83a60f94b..7b29901c1a3 100644
--- a/pkg/middleware/middleware.go
+++ b/pkg/middleware/middleware.go
@@ -43,12 +43,13 @@ func GetContextHandler() macaron.Handler {
 		// then init session and look for userId in session
 		// then look for api key in session (special case for render calls via api)
 		// then test if anonymous access is enabled
-		if initContextWithRenderAuth(ctx) ||
-			initContextWithApiKey(ctx) ||
-			initContextWithBasicAuth(ctx, orgId) ||
-			initContextWithAuthProxy(ctx, orgId) ||
-			initContextWithUserSessionCookie(ctx, orgId) ||
-			initContextWithAnonymousUser(ctx) {
+		switch {
+		case initContextWithRenderAuth(ctx):
+		case initContextWithApiKey(ctx):
+		case initContextWithBasicAuth(ctx, orgId):
+		case initContextWithAuthProxy(ctx, orgId):
+		case initContextWithUserSessionCookie(ctx, orgId):
+		case initContextWithAnonymousUser(ctx):
 		}
 
 		ctx.Logger = log.New("context", "userId", ctx.UserId, "orgId", ctx.OrgId, "uname", ctx.Login)
diff --git a/pkg/plugins/plugins.go b/pkg/plugins/plugins.go
index 67eb0f51d70..4f15441bb2f 100644
--- a/pkg/plugins/plugins.go
+++ b/pkg/plugins/plugins.go
@@ -121,7 +121,6 @@ func (pm *PluginManager) Run(ctx context.Context) error {
 			pm.checkForUpdates()
 		case <-ctx.Done():
 			run = false
-			break
 		}
 	}
 
diff --git a/pkg/services/alerting/notifiers/dingding.go b/pkg/services/alerting/notifiers/dingding.go
index 738e43af2d2..1ef085c82f1 100644
--- a/pkg/services/alerting/notifiers/dingding.go
+++ b/pkg/services/alerting/notifiers/dingding.go
@@ -57,6 +57,9 @@ func (this *DingDingNotifier) Notify(evalContext *alerting.EvalContext) error {
 	message := evalContext.Rule.Message
 	picUrl := evalContext.ImagePublicUrl
 	title := evalContext.GetNotificationTitle()
+	if message == "" {
+		message = title
+	}
 
 	bodyJSON, err := simplejson.NewJson([]byte(`{
 		"msgtype": "link",
diff --git a/pkg/services/alerting/notifiers/telegram.go b/pkg/services/alerting/notifiers/telegram.go
index 6c47c92972c..4a4a989d873 100644
--- a/pkg/services/alerting/notifiers/telegram.go
+++ b/pkg/services/alerting/notifiers/telegram.go
@@ -14,7 +14,7 @@ import (
 )
 
 const (
-	captionLengthLimit = 200
+	captionLengthLimit = 1024
 )
 
 var (
diff --git a/pkg/services/alerting/notifiers/telegram_test.go b/pkg/services/alerting/notifiers/telegram_test.go
index 911323ae9d1..9906a2ffd95 100644
--- a/pkg/services/alerting/notifiers/telegram_test.go
+++ b/pkg/services/alerting/notifiers/telegram_test.go
@@ -61,7 +61,7 @@ func TestTelegramNotifier(t *testing.T) {
 					})
 
 				caption := generateImageCaption(evalContext, "http://grafa.url/abcdef", "")
-				So(len(caption), ShouldBeLessThanOrEqualTo, 200)
+				So(len(caption), ShouldBeLessThanOrEqualTo, 1024)
 				So(caption, ShouldContainSubstring, "Some kind of message.")
 				So(caption, ShouldContainSubstring, "[OK] This is an alarm")
 				So(caption, ShouldContainSubstring, "http://grafa.url/abcdef")
@@ -78,9 +78,9 @@ func TestTelegramNotifier(t *testing.T) {
 						})
 
 					caption := generateImageCaption(evalContext,
-						"http://grafa.url/abcdefaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+						"http://grafa.url/abcdefaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
 						"foo bar")
-					So(len(caption), ShouldBeLessThanOrEqualTo, 200)
+					So(len(caption), ShouldBeLessThanOrEqualTo, 1024)
 					So(caption, ShouldContainSubstring, "Some kind of message.")
 					So(caption, ShouldContainSubstring, "[OK] This is an alarm")
 					So(caption, ShouldContainSubstring, "foo bar")
@@ -91,31 +91,31 @@ func TestTelegramNotifier(t *testing.T) {
 					evalContext := alerting.NewEvalContext(context.Background(),
 						&alerting.Rule{
 							Name:    "This is an alarm",
-							Message: "Some kind of message that is too long for appending to our pretty little message, this line is actually exactly 197 chars long and I will get there in the end I promise I will. Yes siree that's it.",
+							Message: "Some kind of message that is too long for appending to our pretty little message, this line is actually exactly 197 chars long and I will get there in the end I promise I will. Yes siree that's it. But suddenly Telegram increased the length so now we need some lorem ipsum to fix this test. Here we go: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur molestie cursus. Donec suscipit egestas nisi. Proin ut efficitur ex. Mauris mi augue, volutpat a nisi vel, euismod dictum arcu. Sed quis tempor eros, sed malesuada dolor. Ut orci augue, viverra sit amet blandit quis, faucibus sit amet ex. Duis condimentum efficitur lectus, id dignissim quam tempor id. Morbi sollicitudin rhoncus diam, id tincidunt lectus scelerisque vitae. Etiam imperdiet semper sem, vel eleifend ligula mollis eget. Etiam ultrices fringilla lacus, sit amet pharetra ex blandit quis. Suspendisse in egestas neque, et posuere lectus. Vestibulum eu ex dui. Sed molestie nulla a lobortis scelerisque. Nulla ipsum ex, iaculis vitae vehicula sit amet, fermentum eu eros.",
 							State:   m.AlertStateOK,
 						})
 
 					caption := generateImageCaption(evalContext,
 						"http://grafa.url/foo",
 						"")
-					So(len(caption), ShouldBeLessThanOrEqualTo, 200)
+					So(len(caption), ShouldBeLessThanOrEqualTo, 1024)
 					So(caption, ShouldContainSubstring, "[OK] This is an alarm")
 					So(caption, ShouldNotContainSubstring, "http")
-					So(caption, ShouldContainSubstring, "Some kind of message that is too long for appending to our pretty little message, this line is actually exactly 197 chars long and I will get there in the end I promise ")
+					So(caption, ShouldContainSubstring, "Some kind of message that is too long for appending to our pretty little message, this line is actually exactly 197 chars long and I will get there in the end I promise I will. Yes siree that's it. But suddenly Telegram increased the length so now we need some lorem ipsum to fix this test. Here we go: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur molestie cursus. Donec suscipit egestas nisi. Proin ut efficitur ex. Mauris mi augue, volutpat a nisi vel, euismod dictum arcu. Sed quis tempor eros, sed malesuada dolor. Ut orci augue, viverra sit amet blandit quis, faucibus sit amet ex. Duis condimentum efficitur lectus, id dignissim quam tempor id. Morbi sollicitudin rhoncus diam, id tincidunt lectus scelerisque vitae. Etiam imperdiet semper sem, vel eleifend ligula mollis eget. Etiam ultrices fringilla lacus, sit amet pharetra ex blandit quis. Suspendisse in egestas neque, et posuere lectus. Vestibulum eu ex dui. Sed molestie nulla a lobortis sceleri")
 				})
 
 				Convey("Metrics should be skipped if they don't fit", func() {
 					evalContext := alerting.NewEvalContext(context.Background(),
 						&alerting.Rule{
 							Name:    "This is an alarm",
-							Message: "Some kind of message that is too long for appending to our pretty little message, this line is actually exactly 197 chars long and I will get there in the end I ",
+							Message: "Some kind of message that is too long for appending to our pretty little message, this line is actually exactly 197 chars long and I will get there in the end I promise I will. Yes siree that's it. But suddenly Telegram increased the length so now we need some lorem ipsum to fix this test. Here we go: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur molestie cursus. Donec suscipit egestas nisi. Proin ut efficitur ex. Mauris mi augue, volutpat a nisi vel, euismod dictum arcu. Sed quis tempor eros, sed malesuada dolor. Ut orci augue, viverra sit amet blandit quis, faucibus sit amet ex. Duis condimentum efficitur lectus, id dignissim quam tempor id. Morbi sollicitudin rhoncus diam, id tincidunt lectus scelerisque vitae. Etiam imperdiet semper sem, vel eleifend ligula mollis eget. Etiam ultrices fringilla lacus, sit amet pharetra ex blandit quis. Suspendisse in egestas neque, et posuere lectus. Vestibulum eu ex dui. Sed molestie nulla a lobortis sceleri",
 							State:   m.AlertStateOK,
 						})
 
 					caption := generateImageCaption(evalContext,
 						"http://grafa.url/foo",
 						"foo bar long song")
-					So(len(caption), ShouldBeLessThanOrEqualTo, 200)
+					So(len(caption), ShouldBeLessThanOrEqualTo, 1024)
 					So(caption, ShouldContainSubstring, "[OK] This is an alarm")
 					So(caption, ShouldNotContainSubstring, "http")
 					So(caption, ShouldNotContainSubstring, "foo bar")
diff --git a/pkg/services/alerting/reader.go b/pkg/services/alerting/reader.go
index 627159c286b..2cdbc57b41d 100644
--- a/pkg/services/alerting/reader.go
+++ b/pkg/services/alerting/reader.go
@@ -34,11 +34,8 @@ func NewRuleReader() *DefaultRuleReader {
 func (arr *DefaultRuleReader) initReader() {
 	heartbeat := time.NewTicker(time.Second * 10)
 
-	for {
-		select {
-		case <-heartbeat.C:
-			arr.heartbeat()
-		}
+	for range heartbeat.C {
+		arr.heartbeat()
 	}
 }
 
diff --git a/pkg/setting/setting.go b/pkg/setting/setting.go
index 16158ded002..9e8f6fec9a8 100644
--- a/pkg/setting/setting.go
+++ b/pkg/setting/setting.go
@@ -13,15 +13,12 @@ import (
 	"regexp"
 	"runtime"
 	"strings"
-
-	"gopkg.in/ini.v1"
-
-	"github.com/go-macaron/session"
-
 	"time"
 
+	"github.com/go-macaron/session"
 	"github.com/grafana/grafana/pkg/log"
 	"github.com/grafana/grafana/pkg/util"
+	"gopkg.in/ini.v1"
 )
 
 type Scheme string
@@ -34,9 +31,11 @@ const (
 )
 
 const (
-	DEV  string = "development"
-	PROD string = "production"
-	TEST string = "test"
+	DEV                 = "development"
+	PROD                = "production"
+	TEST                = "test"
+	APP_NAME            = "Grafana"
+	APP_NAME_ENTERPRISE = "Grafana Enterprise"
 )
 
 var (
@@ -49,6 +48,7 @@ var (
 	// build
 	BuildVersion    string
 	BuildCommit     string
+	BuildBranch     string
 	BuildStamp      int64
 	IsEnterprise    bool
 	ApplicationName string
@@ -209,12 +209,10 @@ type Cfg struct {
 	RendererLimitAlerting int
 
 	DisableBruteForceLoginProtection bool
-
-	TempDataLifetime time.Duration
-
-	MetricsEndpointEnabled bool
-
-	EnableAlphaPanels bool
+	TempDataLifetime                 time.Duration
+	MetricsEndpointEnabled           bool
+	EnableAlphaPanels                bool
+	EnterpriseLicensePath            string
 }
 
 type CommandLineArgs struct {
@@ -533,9 +531,9 @@ func (cfg *Cfg) Load(args *CommandLineArgs) error {
 	// Temporary keep global, to make refactor in steps
 	Raw = cfg.Raw
 
-	ApplicationName = "Grafana"
+	ApplicationName = APP_NAME
 	if IsEnterprise {
-		ApplicationName += " Enterprise"
+		ApplicationName = APP_NAME_ENTERPRISE
 	}
 
 	Env = iniFile.Section("").Key("app_mode").MustString("development")
@@ -715,6 +713,10 @@ func (cfg *Cfg) Load(args *CommandLineArgs) error {
 
 	imageUploadingSection := iniFile.Section("external_image_storage")
 	ImageUploadProvider = imageUploadingSection.Key("provider").MustString("")
+
+	enterprise := iniFile.Section("enterprise")
+	cfg.EnterpriseLicensePath = enterprise.Key("license_path").MustString(filepath.Join(cfg.DataPath, "license.jwt"))
+
 	return nil
 }
 
diff --git a/pkg/tsdb/cloudwatch/metric_find_query.go b/pkg/tsdb/cloudwatch/metric_find_query.go
index b74af76f09a..718f9e0d253 100644
--- a/pkg/tsdb/cloudwatch/metric_find_query.go
+++ b/pkg/tsdb/cloudwatch/metric_find_query.go
@@ -35,6 +35,7 @@ type CustomMetricsCache struct {
 
 var customMetricsMetricsMap map[string]map[string]map[string]*CustomMetricsCache
 var customMetricsDimensionsMap map[string]map[string]map[string]*CustomMetricsCache
+var regionCache sync.Map
 
 func init() {
 	metricsMap = map[string][]string{
@@ -233,13 +234,20 @@ func parseMultiSelectValue(input string) []string {
 // Whenever this list is updated, frontend list should also be updated.
 // Please update the region list in public/app/plugins/datasource/cloudwatch/partials/config.html
 func (e *CloudWatchExecutor) handleGetRegions(ctx context.Context, parameters *simplejson.Json, queryContext *tsdb.TsdbQuery) ([]suggestData, error) {
+	dsInfo := e.getDsInfo("default")
+	profile := dsInfo.Profile
+	if cache, ok := regionCache.Load(profile); ok {
+		if cache2, ok2 := cache.([]suggestData); ok2 {
+			return cache2, nil
+		}
+	}
+
 	regions := []string{
 		"ap-northeast-1", "ap-northeast-2", "ap-northeast-3", "ap-south-1", "ap-southeast-1", "ap-southeast-2", "ca-central-1",
 		"eu-central-1", "eu-north-1", "eu-west-1", "eu-west-2", "eu-west-3", "me-south-1", "sa-east-1", "us-east-1", "us-east-2", "us-west-1", "us-west-2",
 		"cn-north-1", "cn-northwest-1", "us-gov-east-1", "us-gov-west-1", "us-isob-east-1", "us-iso-east-1",
 	}
-
-	err := e.ensureClientSession("us-east-1")
+	err := e.ensureClientSession("default")
 	if err != nil {
 		return nil, err
 	}
@@ -269,6 +277,7 @@ func (e *CloudWatchExecutor) handleGetRegions(ctx context.Context, parameters *s
 	for _, region := range regions {
 		result = append(result, suggestData{Text: region, Value: region})
 	}
+	regionCache.Store(profile, result)
 
 	return result, nil
 }
diff --git a/pkg/tsdb/cloudwatch/metric_find_query_test.go b/pkg/tsdb/cloudwatch/metric_find_query_test.go
index e3903e8027e..34c3379b4df 100644
--- a/pkg/tsdb/cloudwatch/metric_find_query_test.go
+++ b/pkg/tsdb/cloudwatch/metric_find_query_test.go
@@ -9,20 +9,26 @@ import (
 	"github.com/aws/aws-sdk-go/service/ec2"
 	"github.com/aws/aws-sdk-go/service/ec2/ec2iface"
 	"github.com/bmizerany/assert"
+	"github.com/grafana/grafana/pkg/components/securejsondata"
 	"github.com/grafana/grafana/pkg/components/simplejson"
+	"github.com/grafana/grafana/pkg/models"
 	"github.com/grafana/grafana/pkg/tsdb"
 	. "github.com/smartystreets/goconvey/convey"
 )
 
 type mockedEc2 struct {
 	ec2iface.EC2API
-	Resp ec2.DescribeInstancesOutput
+	Resp        ec2.DescribeInstancesOutput
+	RespRegions ec2.DescribeRegionsOutput
 }
 
 func (m mockedEc2) DescribeInstancesPages(in *ec2.DescribeInstancesInput, fn func(*ec2.DescribeInstancesOutput, bool) bool) error {
 	fn(&m.Resp, true)
 	return nil
 }
+func (m mockedEc2) DescribeRegions(in *ec2.DescribeRegionsInput) (*ec2.DescribeRegionsOutput, error) {
+	return &m.RespRegions, nil
+}
 
 func TestCloudWatchMetrics(t *testing.T) {
 
@@ -82,6 +88,31 @@ func TestCloudWatchMetrics(t *testing.T) {
 		})
 	})
 
+	Convey("When calling handleGetRegions", t, func() {
+		executor := &CloudWatchExecutor{
+			ec2Svc: mockedEc2{RespRegions: ec2.DescribeRegionsOutput{
+				Regions: []*ec2.Region{
+					{
+						RegionName: aws.String("ap-northeast-2"),
+					},
+				},
+			}},
+		}
+		jsonData := simplejson.New()
+		jsonData.Set("defaultRegion", "default")
+		executor.DataSource = &models.DataSource{
+			JsonData:       jsonData,
+			SecureJsonData: securejsondata.SecureJsonData{},
+		}
+
+		result, _ := executor.handleGetRegions(context.Background(), simplejson.New(), &tsdb.TsdbQuery{})
+
+		Convey("Should return regions", func() {
+			So(result[0].Text, ShouldEqual, "ap-northeast-1")
+			So(result[1].Text, ShouldEqual, "ap-northeast-2")
+		})
+	})
+
 	Convey("When calling handleGetEc2InstanceAttribute", t, func() {
 		executor := &CloudWatchExecutor{
 			ec2Svc: mockedEc2{Resp: ec2.DescribeInstancesOutput{
diff --git a/pkg/tsdb/graphite/graphite.go b/pkg/tsdb/graphite/graphite.go
index 2960ba0edc4..ff0ed8d0620 100644
--- a/pkg/tsdb/graphite/graphite.go
+++ b/pkg/tsdb/graphite/graphite.go
@@ -164,14 +164,12 @@ func formatTimeRange(input string) string {
 
 func fixIntervalFormat(target string) string {
 	rMinute := regexp.MustCompile(`'(\d+)m'`)
-	rMin := regexp.MustCompile("m")
 	target = rMinute.ReplaceAllStringFunc(target, func(m string) string {
-		return rMin.ReplaceAllString(m, "min")
+		return strings.Replace(m, "m", "min", -1)
 	})
 	rMonth := regexp.MustCompile(`'(\d+)M'`)
-	rMon := regexp.MustCompile("M")
 	target = rMonth.ReplaceAllStringFunc(target, func(M string) string {
-		return rMon.ReplaceAllString(M, "mon")
+		return strings.Replace(M, "M", "mon", -1)
 	})
 	return target
 }
diff --git a/pkg/tsdb/mysql/macros.go b/pkg/tsdb/mysql/macros.go
index a037aa9277a..839f805568e 100644
--- a/pkg/tsdb/mysql/macros.go
+++ b/pkg/tsdb/mysql/macros.go
@@ -60,7 +60,7 @@ func (m *mySqlMacroEngine) evaluateMacro(name string, args []string) (string, er
 			return "", fmt.Errorf("missing time column argument for macro %v", name)
 		}
 
-		return fmt.Sprintf("%s BETWEEN '%s' AND '%s'", args[0], m.timeRange.GetFromAsTimeUTC().Format(time.RFC3339), m.timeRange.GetToAsTimeUTC().Format(time.RFC3339)), nil
+		return fmt.Sprintf("%s BETWEEN FROM_UNIXTIME(%d) AND FROM_UNIXTIME(%d)", args[0], m.timeRange.GetFromAsSecondsEpoch(), m.timeRange.GetToAsSecondsEpoch()), nil
 	case "__timeGroup":
 		if len(args) < 2 {
 			return "", fmt.Errorf("macro %v needs time column and interval", name)
diff --git a/pkg/tsdb/mysql/macros_test.go b/pkg/tsdb/mysql/macros_test.go
index 3c9a5a26c94..24bf18873d5 100644
--- a/pkg/tsdb/mysql/macros_test.go
+++ b/pkg/tsdb/mysql/macros_test.go
@@ -60,7 +60,7 @@ func TestMacroEngine(t *testing.T) {
 				sql, err := engine.Interpolate(query, timeRange, "WHERE $__timeFilter(time_column)")
 				So(err, ShouldBeNil)
 
-				So(sql, ShouldEqual, fmt.Sprintf("WHERE time_column BETWEEN '%s' AND '%s'", from.Format(time.RFC3339), to.Format(time.RFC3339)))
+				So(sql, ShouldEqual, fmt.Sprintf("WHERE time_column BETWEEN FROM_UNIXTIME(%d) AND FROM_UNIXTIME(%d)", from.Unix(), to.Unix()))
 			})
 
 			Convey("interpolate __unixEpochFilter function", func() {
@@ -92,7 +92,7 @@ func TestMacroEngine(t *testing.T) {
 				sql, err := engine.Interpolate(query, timeRange, "WHERE $__timeFilter(time_column)")
 				So(err, ShouldBeNil)
 
-				So(sql, ShouldEqual, fmt.Sprintf("WHERE time_column BETWEEN '%s' AND '%s'", from.Format(time.RFC3339), to.Format(time.RFC3339)))
+				So(sql, ShouldEqual, fmt.Sprintf("WHERE time_column BETWEEN FROM_UNIXTIME(%d) AND FROM_UNIXTIME(%d)", from.Unix(), to.Unix()))
 			})
 
 			Convey("interpolate __unixEpochFilter function", func() {
@@ -112,7 +112,7 @@ func TestMacroEngine(t *testing.T) {
 				sql, err := engine.Interpolate(query, timeRange, "WHERE $__timeFilter(time_column)")
 				So(err, ShouldBeNil)
 
-				So(sql, ShouldEqual, fmt.Sprintf("WHERE time_column BETWEEN '%s' AND '%s'", from.Format(time.RFC3339), to.Format(time.RFC3339)))
+				So(sql, ShouldEqual, fmt.Sprintf("WHERE time_column BETWEEN FROM_UNIXTIME(%d) AND FROM_UNIXTIME(%d)", from.Unix(), to.Unix()))
 			})
 
 			Convey("interpolate __unixEpochFilter function", func() {
diff --git a/pkg/tsdb/stackdriver/stackdriver.go b/pkg/tsdb/stackdriver/stackdriver.go
index b33d33fb41c..2ad47cc4b83 100644
--- a/pkg/tsdb/stackdriver/stackdriver.go
+++ b/pkg/tsdb/stackdriver/stackdriver.go
@@ -186,8 +186,7 @@ func reverse(s string) string {
 }
 
 func interpolateFilterWildcards(value string) string {
-	re := regexp.MustCompile("[*]")
-	matches := len(re.FindAllStringIndex(value, -1))
+	matches := strings.Count(value, "*")
 	if matches == 2 && strings.HasSuffix(value, "*") && strings.HasPrefix(value, "*") {
 		value = strings.Replace(value, "*", "", -1)
 		value = fmt.Sprintf(`has_substring("%s")`, value)
diff --git a/public/app/core/actions/appNotification.ts b/public/app/core/actions/appNotification.ts
new file mode 100644
index 00000000000..b79b642eef1
--- /dev/null
+++ b/public/app/core/actions/appNotification.ts
@@ -0,0 +1,28 @@
+import { AppNotification } from 'app/types/';
+
+export enum ActionTypes {
+  AddAppNotification = 'ADD_APP_NOTIFICATION',
+  ClearAppNotification = 'CLEAR_APP_NOTIFICATION',
+}
+
+interface AddAppNotificationAction {
+  type: ActionTypes.AddAppNotification;
+  payload: AppNotification;
+}
+
+interface ClearAppNotificationAction {
+  type: ActionTypes.ClearAppNotification;
+  payload: number;
+}
+
+export type Action = AddAppNotificationAction | ClearAppNotificationAction;
+
+export const clearAppNotification = (appNotificationId: number) => ({
+  type: ActionTypes.ClearAppNotification,
+  payload: appNotificationId,
+});
+
+export const notifyApp = (appNotification: AppNotification) => ({
+  type: ActionTypes.AddAppNotification,
+  payload: appNotification,
+});
diff --git a/public/app/core/actions/index.ts b/public/app/core/actions/index.ts
index 451a13dae99..f7ce2dda945 100644
--- a/public/app/core/actions/index.ts
+++ b/public/app/core/actions/index.ts
@@ -1,4 +1,5 @@
 import { updateLocation } from './location';
 import { updateNavIndex, UpdateNavIndexAction } from './navModel';
+import { notifyApp, clearAppNotification } from './appNotification';
 
-export { updateLocation, updateNavIndex, UpdateNavIndexAction };
+export { updateLocation, updateNavIndex, UpdateNavIndexAction, notifyApp, clearAppNotification };
diff --git a/public/app/core/actions/user.ts b/public/app/core/actions/user.ts
new file mode 100644
index 00000000000..dba0588c058
--- /dev/null
+++ b/public/app/core/actions/user.ts
@@ -0,0 +1,28 @@
+import { ThunkAction } from 'redux-thunk';
+import { getBackendSrv } from '../services/backend_srv';
+import { DashboardAcl, DashboardSearchHit, StoreState } from '../../types';
+
+type ThunkResult<R> = ThunkAction<R, StoreState, undefined, any>;
+
+export type Action = LoadStarredDashboardsAction;
+
+export enum ActionTypes {
+  LoadStarredDashboards = 'LOAD_STARRED_DASHBOARDS',
+}
+
+interface LoadStarredDashboardsAction {
+  type: ActionTypes.LoadStarredDashboards;
+  payload: DashboardSearchHit[];
+}
+
+const starredDashboardsLoaded = (dashboards: DashboardAcl[]) => ({
+  type: ActionTypes.LoadStarredDashboards,
+  payload: dashboards,
+});
+
+export function loadStarredDashboards(): ThunkResult<void> {
+  return async dispatch => {
+    const starredDashboards = await getBackendSrv().search({ starred: true });
+    dispatch(starredDashboardsLoaded(starredDashboards));
+  };
+}
diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index 6974d40aac8..7be28272f11 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -5,10 +5,12 @@ import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
 import { SearchResult } from './components/search/SearchResult';
 import { TagFilter } from './components/TagFilter/TagFilter';
 import { SideMenu } from './components/sidemenu/SideMenu';
+import AppNotificationList from './components/AppNotifications/AppNotificationList';
 
 export function registerAngularDirectives() {
   react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
   react2AngularDirective('sidemenu', SideMenu, []);
+  react2AngularDirective('appNotificationsList', AppNotificationList, []);
   react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']);
   react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);
   react2AngularDirective('searchResult', SearchResult, []);
diff --git a/public/app/core/components/Animations/SlideDown.tsx b/public/app/core/components/Animations/SlideDown.tsx
index 4d515f98f16..70dacd73849 100644
--- a/public/app/core/components/Animations/SlideDown.tsx
+++ b/public/app/core/components/Animations/SlideDown.tsx
@@ -1,15 +1,22 @@
-import React from 'react';
+import React from 'react';
 import Transition from 'react-transition-group/Transition';
 
-const defaultMaxHeight = '200px'; // When animating using max-height we need to use a static value.
+interface Style {
+  transition?: string;
+  overflow?: string;
+}
+
+// When animating using max-height we need to use a static value.
 // If this is not enough, pass in <SlideDown maxHeight="....
+const defaultMaxHeight = '200px';
 const defaultDuration = 200;
-const defaultStyle = {
+
+export const defaultStyle: Style = {
   transition: `max-height ${defaultDuration}ms ease-in-out`,
   overflow: 'hidden',
 };
 
-export default ({ children, in: inProp, maxHeight = defaultMaxHeight }) => {
+export default ({ children, in: inProp, maxHeight = defaultMaxHeight, style = defaultStyle }) => {
   // There are 4 main states a Transition can be in:
   // ENTERING, ENTERED, EXITING, EXITED
   // https://reactcommunity.org/react-transition-group/
@@ -25,7 +32,7 @@ export default ({ children, in: inProp, maxHeight = defaultMaxHeight }) => {
       {state => (
         <div
           style={{
-            ...defaultStyle,
+            ...style,
             ...transitionStyles[state],
           }}
         >
diff --git a/public/app/core/components/AppNotifications/AppNotificationItem.tsx b/public/app/core/components/AppNotifications/AppNotificationItem.tsx
new file mode 100644
index 00000000000..5169c39e7a0
--- /dev/null
+++ b/public/app/core/components/AppNotifications/AppNotificationItem.tsx
@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { AppNotification } from 'app/types';
+
+interface Props {
+  appNotification: AppNotification;
+  onClearNotification: (id) => void;
+}
+
+export default class AppNotificationItem extends Component<Props> {
+  shouldComponentUpdate(nextProps) {
+    return this.props.appNotification.id !== nextProps.appNotification.id;
+  }
+
+  componentDidMount() {
+    const { appNotification, onClearNotification } = this.props;
+    setTimeout(() => {
+      onClearNotification(appNotification.id);
+    }, appNotification.timeout);
+  }
+
+  render() {
+    const { appNotification, onClearNotification } = this.props;
+    return (
+      <div className={`alert-${appNotification.severity} alert`}>
+        <div className="alert-icon">
+          <i className={appNotification.icon} />
+        </div>
+        <div className="alert-body">
+          <div className="alert-title">{appNotification.title}</div>
+          <div className="alert-text">{appNotification.text}</div>
+        </div>
+        <button type="button" className="alert-close" onClick={() => onClearNotification(appNotification.id)}>
+          <i className="fa fa fa-remove" />
+        </button>
+      </div>
+    );
+  }
+}
diff --git a/public/app/core/components/AppNotifications/AppNotificationList.tsx b/public/app/core/components/AppNotifications/AppNotificationList.tsx
new file mode 100644
index 00000000000..c91f8372384
--- /dev/null
+++ b/public/app/core/components/AppNotifications/AppNotificationList.tsx
@@ -0,0 +1,60 @@
+import React, { PureComponent } from 'react';
+import appEvents from 'app/core/app_events';
+import AppNotificationItem from './AppNotificationItem';
+import { notifyApp, clearAppNotification } from 'app/core/actions';
+import { connectWithStore } from 'app/core/utils/connectWithReduxStore';
+import { AppNotification, StoreState } from 'app/types';
+import {
+  createErrorNotification,
+  createSuccessNotification,
+  createWarningNotification,
+} from '../../copy/appNotification';
+
+export interface Props {
+  appNotifications: AppNotification[];
+  notifyApp: typeof notifyApp;
+  clearAppNotification: typeof clearAppNotification;
+}
+
+export class AppNotificationList extends PureComponent<Props> {
+  componentDidMount() {
+    const { notifyApp } = this.props;
+
+    appEvents.on('alert-warning', options => notifyApp(createWarningNotification(options[0], options[1])));
+    appEvents.on('alert-success', options => notifyApp(createSuccessNotification(options[0], options[1])));
+    appEvents.on('alert-error', options => notifyApp(createErrorNotification(options[0], options[1])));
+  }
+
+  onClearAppNotification = id => {
+    this.props.clearAppNotification(id);
+  };
+
+  render() {
+    const { appNotifications } = this.props;
+
+    return (
+      <div>
+        {appNotifications.map((appNotification, index) => {
+          return (
+            <AppNotificationItem
+              key={`${appNotification.id}-${index}`}
+              appNotification={appNotification}
+              onClearNotification={id => this.onClearAppNotification(id)}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state: StoreState) => ({
+  appNotifications: state.appNotifications.appNotifications,
+});
+
+const mapDispatchToProps = {
+  notifyApp,
+  clearAppNotification,
+};
+
+export default connectWithStore(AppNotificationList, mapStateToProps, mapDispatchToProps);
diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
index 4af60f3c839..21700bb4d03 100644
--- a/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
@@ -7,6 +7,7 @@ const model = {
   buttonIcon: 'ga css class',
   buttonLink: 'http://url/to/destination',
   buttonTitle: 'Click me',
+  onClick: jest.fn(),
   proTip: 'This is a tip',
   proTipLink: 'http://url/to/tip/destination',
   proTipLinkTitle: 'Learn more',
diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
index 5ece360e36a..ae0e39cc26d 100644
--- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
@@ -11,6 +11,7 @@ class EmptyListCTA extends Component<Props, any> {
       buttonIcon,
       buttonLink,
       buttonTitle,
+      onClick,
       proTip,
       proTipLink,
       proTipLinkTitle,
@@ -19,7 +20,7 @@ class EmptyListCTA extends Component<Props, any> {
     return (
       <div className="empty-list-cta">
         <div className="empty-list-cta__title">{title}</div>
-        <a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success">
+        <a onClick={onClick} href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success">
           <i className={buttonIcon} />
           {buttonTitle}
         </a>
diff --git a/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap
index 6d47c984d5e..b85660bcc6f 100644
--- a/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap
+++ b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`EmptyListCTA renders correctly 1`] = `
   <a
     className="empty-list-cta__button btn btn-xlarge btn-success"
     href="http://url/to/destination"
+    onClick={[MockFunction]}
   >
     <i
       className="ga css class"
diff --git a/public/app/core/components/Forms/Forms.tsx b/public/app/core/components/Label/Label.tsx
similarity index 83%
rename from public/app/core/components/Forms/Forms.tsx
rename to public/app/core/components/Label/Label.tsx
index 543e1a1d6df..9b8fb6c6e19 100644
--- a/public/app/core/components/Forms/Forms.tsx
+++ b/public/app/core/components/Label/Label.tsx
@@ -5,11 +5,12 @@ interface Props {
   tooltip?: string;
   for?: string;
   children: ReactNode;
+  width?: number;
 }
 
 export const Label: SFC<Props> = props => {
   return (
-    <span className="gf-form-label width-10">
+    <span className={`gf-form-label width-${props.width ? props.width : '10'}`}>
       <span>{props.children}</span>
       {props.tooltip && (
         <Tooltip className="gf-form-help-icon--right-normal" placement="auto" content={props.tooltip}>
diff --git a/public/app/core/components/Picker/SimplePicker.tsx b/public/app/core/components/Picker/SimplePicker.tsx
new file mode 100644
index 00000000000..6c9e8aca199
--- /dev/null
+++ b/public/app/core/components/Picker/SimplePicker.tsx
@@ -0,0 +1,46 @@
+import React, { SFC } from 'react';
+import Select from 'react-select';
+import DescriptionOption from './DescriptionOption';
+import ResetStyles from './ResetStyles';
+
+interface Props {
+  className?: string;
+  defaultValue: any;
+  getOptionLabel: (item: any) => string;
+  getOptionValue: (item: any) => string;
+  onSelected: (item: any) => {} | void;
+  options: any[];
+  placeholder?: string;
+  width: number;
+}
+
+const SimplePicker: SFC<Props> = ({
+  className,
+  defaultValue,
+  getOptionLabel,
+  getOptionValue,
+  onSelected,
+  options,
+  placeholder,
+  width,
+}) => {
+  return (
+    <Select
+      classNamePrefix={`gf-form-select-box`}
+      className={`width-${width} gf-form-input gf-form-input--form-dropdown ${className || ''}`}
+      components={{
+        Option: DescriptionOption,
+      }}
+      defaultValue={defaultValue}
+      getOptionLabel={getOptionLabel}
+      getOptionValue={getOptionValue}
+      isSearchable={false}
+      onChange={onSelected}
+      options={options}
+      placeholder={placeholder || 'Choose'}
+      styles={ResetStyles}
+    />
+  );
+};
+
+export default SimplePicker;
diff --git a/public/app/core/components/Switch/Switch.tsx b/public/app/core/components/Switch/Switch.tsx
new file mode 100644
index 00000000000..ba09267ebd2
--- /dev/null
+++ b/public/app/core/components/Switch/Switch.tsx
@@ -0,0 +1,46 @@
+import React, { PureComponent } from 'react';
+import _ from 'lodash';
+
+export interface Props {
+  label: string;
+  checked: boolean;
+  labelClass?: string;
+  switchClass?: string;
+  onChange: (event) => any;
+}
+
+export interface State {
+  id: any;
+}
+
+export class Switch extends PureComponent<Props, State> {
+  state = {
+    id: _.uniqueId(),
+  };
+
+  internalOnChange = event => {
+    event.stopPropagation();
+    this.props.onChange(event);
+  };
+
+  render() {
+    const { labelClass, switchClass, label, checked } = this.props;
+    const labelId = `check-${this.state.id}`;
+    const labelClassName = `gf-form-label ${labelClass} pointer`;
+    const switchClassName = `gf-form-switch ${switchClass}`;
+
+    return (
+      <div className="gf-form">
+        {label && (
+          <label htmlFor={labelId} className={labelClassName}>
+            {label}
+          </label>
+        )}
+        <div className={switchClassName}>
+          <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
+          <label htmlFor={labelId} />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/core/components/Tooltip/Tooltip.tsx b/public/app/core/components/Tooltip/Tooltip.tsx
index a265c8487d3..62be658f7cf 100644
--- a/public/app/core/components/Tooltip/Tooltip.tsx
+++ b/public/app/core/components/Tooltip/Tooltip.tsx
@@ -1,37 +1,28 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import withTooltip from './withTooltip';
 import { Target } from 'react-popper';
 
-interface TooltipProps {
+interface Props {
   tooltipSetState: (prevState: object) => void;
 }
 
-class Tooltip extends React.Component<TooltipProps, any> {
-  constructor(props) {
-    super(props);
-    this.showTooltip = this.showTooltip.bind(this);
-    this.hideTooltip = this.hideTooltip.bind(this);
-  }
-
-  showTooltip() {
+class Tooltip extends PureComponent<Props> {
+  showTooltip = () => {
     const { tooltipSetState } = this.props;
-    tooltipSetState(prevState => {
-      return {
-        ...prevState,
-        show: true,
-      };
-    });
-  }
 
-  hideTooltip() {
+    tooltipSetState(prevState => ({
+      ...prevState,
+      show: true,
+    }));
+  };
+
+  hideTooltip = () => {
     const { tooltipSetState } = this.props;
-    tooltipSetState(prevState => {
-      return {
-        ...prevState,
-        show: false,
-      };
-    });
-  }
+    tooltipSetState(prevState => ({
+      ...prevState,
+      show: false,
+    }));
+  };
 
   render() {
     return (
diff --git a/public/app/core/components/colorpicker/SeriesColorPicker.tsx b/public/app/core/components/colorpicker/SeriesColorPicker.tsx
index b514899e2e2..d6feaa31965 100644
--- a/public/app/core/components/colorpicker/SeriesColorPicker.tsx
+++ b/public/app/core/components/colorpicker/SeriesColorPicker.tsx
@@ -1,53 +1,84 @@
 import React from 'react';
-import { ColorPickerPopover } from './ColorPickerPopover';
-import { react2AngularDirective } from 'app/core/utils/react2angular';
+import ReactDOM from 'react-dom';
+import Drop from 'tether-drop';
+import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
 
-export interface Props {
-  series: any;
-  onColorChange: (color: string) => void;
-  onToggleAxis: () => void;
+export interface SeriesColorPickerProps {
+  color: string;
+  yaxis?: number;
+  optionalClass?: string;
+  onColorChange: (newColor: string) => void;
+  onToggleAxis?: () => void;
 }
 
-export class SeriesColorPicker extends React.Component<Props, any> {
+export class SeriesColorPicker extends React.Component<SeriesColorPickerProps> {
+  pickerElem: any;
+  colorPickerDrop: any;
+
+  static defaultProps = {
+    optionalClass: '',
+    yaxis: undefined,
+    onToggleAxis: () => {},
+  };
+
   constructor(props) {
     super(props);
-    this.onColorChange = this.onColorChange.bind(this);
-    this.onToggleAxis = this.onToggleAxis.bind(this);
   }
 
-  onColorChange(color) {
-    this.props.onColorChange(color);
+  componentWillUnmount() {
+    this.destroyDrop();
   }
 
-  onToggleAxis() {
-    this.props.onToggleAxis();
-  }
+  onClickToOpen = () => {
+    if (this.colorPickerDrop) {
+      this.destroyDrop();
+    }
 
-  renderAxisSelection() {
-    const leftButtonClass = this.props.series.yaxis === 1 ? 'btn-success' : 'btn-inverse';
-    const rightButtonClass = this.props.series.yaxis === 2 ? 'btn-success' : 'btn-inverse';
-
-    return (
-      <div className="p-b-1">
-        <label className="small p-r-1">Y Axis:</label>
-        <button onClick={this.onToggleAxis} className={'btn btn-small ' + leftButtonClass}>
-          Left
-        </button>
-        <button onClick={this.onToggleAxis} className={'btn btn-small ' + rightButtonClass}>
-          Right
-        </button>
-      </div>
+    const { color, yaxis, onColorChange, onToggleAxis } = this.props;
+    const dropContent = (
+      <SeriesColorPickerPopover color={color} yaxis={yaxis} onColorChange={onColorChange} onToggleAxis={onToggleAxis} />
     );
+    const dropContentElem = document.createElement('div');
+    ReactDOM.render(dropContent, dropContentElem);
+
+    const drop = new Drop({
+      target: this.pickerElem,
+      content: dropContentElem,
+      position: 'top center',
+      classes: 'drop-popover',
+      openOn: 'hover',
+      hoverCloseDelay: 200,
+      remove: true,
+      tetherOptions: {
+        constraints: [{ to: 'scrollParent', attachment: 'none both' }],
+      },
+    });
+
+    drop.on('close', this.closeColorPicker.bind(this));
+
+    this.colorPickerDrop = drop;
+    this.colorPickerDrop.open();
+  };
+
+  closeColorPicker() {
+    setTimeout(() => {
+      this.destroyDrop();
+    }, 100);
+  }
+
+  destroyDrop() {
+    if (this.colorPickerDrop && this.colorPickerDrop.tether) {
+      this.colorPickerDrop.destroy();
+      this.colorPickerDrop = null;
+    }
   }
 
   render() {
+    const { optionalClass, children } = this.props;
     return (
-      <div className="graph-legend-popover">
-        {this.props.series.yaxis && this.renderAxisSelection()}
-        <ColorPickerPopover color={this.props.series.color} onColorSelect={this.onColorChange} />
+      <div className={optionalClass} ref={e => (this.pickerElem = e)} onClick={this.onClickToOpen}>
+        {children}
       </div>
     );
   }
 }
-
-react2AngularDirective('seriesColorPicker', SeriesColorPicker, ['series', 'onColorChange', 'onToggleAxis']);
diff --git a/public/app/core/components/colorpicker/SeriesColorPickerPopover.tsx b/public/app/core/components/colorpicker/SeriesColorPickerPopover.tsx
new file mode 100644
index 00000000000..085d554300d
--- /dev/null
+++ b/public/app/core/components/colorpicker/SeriesColorPickerPopover.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { ColorPickerPopover } from './ColorPickerPopover';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
+
+export interface SeriesColorPickerPopoverProps {
+  color: string;
+  yaxis?: number;
+  onColorChange: (color: string) => void;
+  onToggleAxis?: () => void;
+}
+
+export class SeriesColorPickerPopover extends React.PureComponent<SeriesColorPickerPopoverProps, any> {
+  render() {
+    return (
+      <div className="graph-legend-popover">
+        {this.props.yaxis && <AxisSelector yaxis={this.props.yaxis} onToggleAxis={this.props.onToggleAxis} />}
+        <ColorPickerPopover color={this.props.color} onColorSelect={this.props.onColorChange} />
+      </div>
+    );
+  }
+}
+
+interface AxisSelectorProps {
+  yaxis: number;
+  onToggleAxis: () => void;
+}
+
+interface AxisSelectorState {
+  yaxis: number;
+}
+
+export class AxisSelector extends React.PureComponent<AxisSelectorProps, AxisSelectorState> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      yaxis: this.props.yaxis,
+    };
+    this.onToggleAxis = this.onToggleAxis.bind(this);
+  }
+
+  onToggleAxis() {
+    this.setState({
+      yaxis: this.state.yaxis === 2 ? 1 : 2,
+    });
+    this.props.onToggleAxis();
+  }
+
+  render() {
+    const leftButtonClass = this.state.yaxis === 1 ? 'btn-success' : 'btn-inverse';
+    const rightButtonClass = this.state.yaxis === 2 ? 'btn-success' : 'btn-inverse';
+
+    return (
+      <div className="p-b-1">
+        <label className="small p-r-1">Y Axis:</label>
+        <button onClick={this.onToggleAxis} className={'btn btn-small ' + leftButtonClass}>
+          Left
+        </button>
+        <button onClick={this.onToggleAxis} className={'btn btn-small ' + rightButtonClass}>
+          Right
+        </button>
+      </div>
+    );
+  }
+}
+
+react2AngularDirective('seriesColorPickerPopover', SeriesColorPickerPopover, [
+  'series',
+  'onColorChange',
+  'onToggleAxis',
+]);
diff --git a/public/app/core/copy/appNotification.ts b/public/app/core/copy/appNotification.ts
new file mode 100644
index 00000000000..c34480d7aad
--- /dev/null
+++ b/public/app/core/copy/appNotification.ts
@@ -0,0 +1,46 @@
+import { AppNotification, AppNotificationSeverity, AppNotificationTimeout } from 'app/types';
+
+const defaultSuccessNotification: AppNotification = {
+  title: '',
+  text: '',
+  severity: AppNotificationSeverity.Success,
+  icon: 'fa fa-check',
+  timeout: AppNotificationTimeout.Success,
+};
+
+const defaultWarningNotification: AppNotification = {
+  title: '',
+  text: '',
+  severity: AppNotificationSeverity.Warning,
+  icon: 'fa fa-exclamation',
+  timeout: AppNotificationTimeout.Warning,
+};
+
+const defaultErrorNotification: AppNotification = {
+  title: '',
+  text: '',
+  severity: AppNotificationSeverity.Error,
+  icon: 'fa fa-exclamation-triangle',
+  timeout: AppNotificationTimeout.Error,
+};
+
+export const createSuccessNotification = (title: string, text?: string): AppNotification => ({
+  ...defaultSuccessNotification,
+  title: title,
+  text: text,
+  id: Date.now(),
+});
+
+export const createErrorNotification = (title: string, text?: string): AppNotification => ({
+  ...defaultErrorNotification,
+  title: title,
+  text: text,
+  id: Date.now(),
+});
+
+export const createWarningNotification = (title: string, text?: string): AppNotification => ({
+  ...defaultWarningNotification,
+  title: title,
+  text: text,
+  id: Date.now(),
+});
diff --git a/public/app/core/core.ts b/public/app/core/core.ts
index 18a625d3307..257a2077c97 100644
--- a/public/app/core/core.ts
+++ b/public/app/core/core.ts
@@ -14,7 +14,7 @@ import './components/jsontree/jsontree';
 import './components/code_editor/code_editor';
 import './utils/outline';
 import './components/colorpicker/ColorPicker';
-import './components/colorpicker/SeriesColorPicker';
+import './components/colorpicker/SeriesColorPickerPopover';
 import './components/colorpicker/spectrum_picker';
 import './services/search_srv';
 import './services/ng_react';
diff --git a/public/app/core/logs_model.ts b/public/app/core/logs_model.ts
index 8848a929359..e6f317dbeb7 100644
--- a/public/app/core/logs_model.ts
+++ b/public/app/core/logs_model.ts
@@ -1,3 +1,5 @@
+import _ from 'lodash';
+
 export enum LogLevel {
   crit = 'crit',
   warn = 'warn',
@@ -27,3 +29,15 @@ export interface LogRow {
 export interface LogsModel {
   rows: LogRow[];
 }
+
+export function mergeStreams(streams: LogsModel[], limit?: number): LogsModel {
+  const combinedEntries = streams.reduce((acc, stream) => {
+    return [...acc, ...stream.rows];
+  }, []);
+  const sortedEntries = _.chain(combinedEntries)
+    .sortBy('timestamp')
+    .reverse()
+    .slice(0, limit || combinedEntries.length)
+    .value();
+  return { rows: sortedEntries };
+}
diff --git a/public/app/core/reducers/appNotification.test.ts b/public/app/core/reducers/appNotification.test.ts
new file mode 100644
index 00000000000..183b699f5fc
--- /dev/null
+++ b/public/app/core/reducers/appNotification.test.ts
@@ -0,0 +1,51 @@
+import { appNotificationsReducer } from './appNotification';
+import { ActionTypes } from '../actions/appNotification';
+import { AppNotificationSeverity, AppNotificationTimeout } from 'app/types/';
+
+describe('clear alert', () => {
+  it('should filter alert', () => {
+    const id1 = 1540301236048;
+    const id2 = 1540301248293;
+
+    const initialState = {
+      appNotifications: [
+        {
+          id: id1,
+          severity: AppNotificationSeverity.Success,
+          icon: 'success',
+          title: 'test',
+          text: 'test alert',
+          timeout: AppNotificationTimeout.Success,
+        },
+        {
+          id: id2,
+          severity: AppNotificationSeverity.Warning,
+          icon: 'warning',
+          title: 'test2',
+          text: 'test alert fail 2',
+          timeout: AppNotificationTimeout.Warning,
+        },
+      ],
+    };
+
+    const result = appNotificationsReducer(initialState, {
+      type: ActionTypes.ClearAppNotification,
+      payload: id2,
+    });
+
+    const expectedResult = {
+      appNotifications: [
+        {
+          id: id1,
+          severity: AppNotificationSeverity.Success,
+          icon: 'success',
+          title: 'test',
+          text: 'test alert',
+          timeout: AppNotificationTimeout.Success,
+        },
+      ],
+    };
+
+    expect(result).toEqual(expectedResult);
+  });
+});
diff --git a/public/app/core/reducers/appNotification.ts b/public/app/core/reducers/appNotification.ts
new file mode 100644
index 00000000000..2c8bbbbd84d
--- /dev/null
+++ b/public/app/core/reducers/appNotification.ts
@@ -0,0 +1,19 @@
+import { AppNotification, AppNotificationsState } from 'app/types/';
+import { Action, ActionTypes } from '../actions/appNotification';
+
+export const initialState: AppNotificationsState = {
+  appNotifications: [] as AppNotification[],
+};
+
+export const appNotificationsReducer = (state = initialState, action: Action): AppNotificationsState => {
+  switch (action.type) {
+    case ActionTypes.AddAppNotification:
+      return { ...state, appNotifications: state.appNotifications.concat([action.payload]) };
+    case ActionTypes.ClearAppNotification:
+      return {
+        ...state,
+        appNotifications: state.appNotifications.filter(appNotification => appNotification.id !== action.payload),
+      };
+  }
+  return state;
+};
diff --git a/public/app/core/reducers/index.ts b/public/app/core/reducers/index.ts
index be13528c91c..6455849ab46 100644
--- a/public/app/core/reducers/index.ts
+++ b/public/app/core/reducers/index.ts
@@ -1,7 +1,11 @@
 import { navIndexReducer as navIndex } from './navModel';
 import { locationReducer as location } from './location';
+import { appNotificationsReducer as appNotifications } from './appNotification';
+import { userReducer as user } from './user';
 
 export default {
   navIndex,
   location,
+  appNotifications,
+  user,
 };
diff --git a/public/app/core/reducers/user.ts b/public/app/core/reducers/user.ts
new file mode 100644
index 00000000000..d49395060ce
--- /dev/null
+++ b/public/app/core/reducers/user.ts
@@ -0,0 +1,15 @@
+import { DashboardSearchHit, UserState } from '../../types';
+import { Action, ActionTypes } from '../actions/user';
+
+const initialState: UserState = {
+  starredDashboards: [] as DashboardSearchHit[],
+};
+
+export const userReducer = (state: UserState = initialState, action: Action): UserState => {
+  switch (action.type) {
+    case ActionTypes.LoadStarredDashboards:
+      return { ...state, starredDashboards: action.payload };
+  }
+
+  return state;
+};
diff --git a/public/app/core/services/alert_srv.ts b/public/app/core/services/alert_srv.ts
index 2d447651b75..4995b148abd 100644
--- a/public/app/core/services/alert_srv.ts
+++ b/public/app/core/services/alert_srv.ts
@@ -1,100 +1,12 @@
-import angular from 'angular';
-import _ from 'lodash';
 import coreModule from 'app/core/core_module';
-import appEvents from 'app/core/app_events';
 
 export class AlertSrv {
-  list: any[];
+  constructor() {}
 
-  /** @ngInject */
-  constructor(private $timeout, private $rootScope) {
-    this.list = [];
-  }
-
-  init() {
-    this.$rootScope.onAppEvent(
-      'alert-error',
-      (e, alert) => {
-        this.set(alert[0], alert[1], 'error', 12000);
-      },
-      this.$rootScope
-    );
-
-    this.$rootScope.onAppEvent(
-      'alert-warning',
-      (e, alert) => {
-        this.set(alert[0], alert[1], 'warning', 5000);
-      },
-      this.$rootScope
-    );
-
-    this.$rootScope.onAppEvent(
-      'alert-success',
-      (e, alert) => {
-        this.set(alert[0], alert[1], 'success', 3000);
-      },
-      this.$rootScope
-    );
-
-    appEvents.on('alert-warning', options => this.set(options[0], options[1], 'warning', 5000));
-    appEvents.on('alert-success', options => this.set(options[0], options[1], 'success', 3000));
-    appEvents.on('alert-error', options => this.set(options[0], options[1], 'error', 7000));
-  }
-
-  getIconForSeverity(severity) {
-    switch (severity) {
-      case 'success':
-        return 'fa fa-check';
-      case 'error':
-        return 'fa fa-exclamation-triangle';
-      default:
-        return 'fa fa-exclamation';
-    }
-  }
-
-  set(title, text, severity, timeout) {
-    if (_.isObject(text)) {
-      console.log('alert error', text);
-      if (text.statusText) {
-        text = `HTTP Error (${text.status}) ${text.statusText}`;
-      }
-    }
-
-    const newAlert = {
-      title: title || '',
-      text: text || '',
-      severity: severity || 'info',
-      icon: this.getIconForSeverity(severity),
-    };
-
-    const newAlertJson = angular.toJson(newAlert);
-
-    // remove same alert if it already exists
-    _.remove(this.list, value => {
-      return angular.toJson(value) === newAlertJson;
-    });
-
-    this.list.push(newAlert);
-    if (timeout > 0) {
-      this.$timeout(() => {
-        this.list = _.without(this.list, newAlert);
-      }, timeout);
-    }
-
-    if (!this.$rootScope.$$phase) {
-      this.$rootScope.$digest();
-    }
-
-    return newAlert;
-  }
-
-  clear(alert) {
-    this.list = _.without(this.list, alert);
-  }
-
-  clearAll() {
-    this.list = [];
+  set() {
+    console.log('old depricated alert srv being used');
   }
 }
 
+// this is just added to not break old plugins that might be using it
 coreModule.service('alertSrv', AlertSrv);
diff --git a/public/app/core/services/backend_srv.ts b/public/app/core/services/backend_srv.ts
index 3e8132a695b..144567efeb9 100644
--- a/public/app/core/services/backend_srv.ts
+++ b/public/app/core/services/backend_srv.ts
@@ -9,7 +9,7 @@ export class BackendSrv {
   private noBackendCache: boolean;
 
   /** @ngInject */
-  constructor(private $http, private alertSrv, private $q, private $timeout, private contextSrv) {}
+  constructor(private $http, private $q, private $timeout, private contextSrv) {}
 
   get(url, params?) {
     return this.request({ method: 'GET', url: url, params: params });
@@ -49,14 +49,14 @@ export class BackendSrv {
     }
 
     if (err.status === 422) {
-      this.alertSrv.set('Validation failed', data.message, 'warning', 4000);
+      appEvents.emit('alert-warning', ['Validation failed', data.message]);
       throw data;
     }
 
-    data.severity = 'error';
+    let severity = 'error';
 
     if (err.status < 500) {
-      data.severity = 'warning';
+      severity = 'warning';
     }
 
     if (data.message) {
@@ -66,7 +66,8 @@ export class BackendSrv {
         description = message;
         message = 'Error';
       }
-      this.alertSrv.set(message, description, data.severity, 10000);
+
+      appEvents.emit('alert-' + severity, [message, description]);
     }
 
     throw data;
@@ -93,7 +94,7 @@ export class BackendSrv {
         if (options.method !== 'GET') {
           if (results && results.data.message) {
             if (options.showSuccessAlert !== false) {
-              this.alertSrv.set(results.data.message, '', 'success', 3000);
+              appEvents.emit('alert-success', [results.data.message]);
             }
           }
         }
diff --git a/public/app/core/specs/backend_srv.test.ts b/public/app/core/specs/backend_srv.test.ts
index 2e35b87deb4..a6cb5a7d331 100644
--- a/public/app/core/specs/backend_srv.test.ts
+++ b/public/app/core/specs/backend_srv.test.ts
@@ -9,7 +9,7 @@ describe('backend_srv', () => {
     return Promise.resolve({});
   };
 
-  const _backendSrv = new BackendSrv(_httpBackend, {}, {}, {}, {});
+  const _backendSrv = new BackendSrv(_httpBackend, {}, {}, {});
 
   describe('when handling errors', () => {
     it('should return the http status code', async () => {
diff --git a/public/app/core/table_model.ts b/public/app/core/table_model.ts
index 99395258ba3..91a7cd0c1fb 100644
--- a/public/app/core/table_model.ts
+++ b/public/app/core/table_model.ts
@@ -83,6 +83,10 @@ function areRowsMatching(columns, row, otherRow) {
 export function mergeTablesIntoModel(dst?: TableModel, ...tables: TableModel[]): TableModel {
   const model = dst || new TableModel();
 
+  if (arguments.length === 1) {
+    return model;
+  }
+
   // Single query returns data columns and rows as is
   if (arguments.length === 2) {
     model.columns = [...tables[0].columns];
diff --git a/public/app/core/utils/connectWithReduxStore.tsx b/public/app/core/utils/connectWithReduxStore.tsx
new file mode 100644
index 00000000000..92c61db4e77
--- /dev/null
+++ b/public/app/core/utils/connectWithReduxStore.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { store } from '../../store/configureStore';
+
+export function connectWithStore(WrappedComponent, ...args) {
+  const ConnectedWrappedComponent = connect(...args)(WrappedComponent);
+
+  return props => {
+    return <ConnectedWrappedComponent {...props} store={store} />;
+  };
+}
diff --git a/public/app/core/utils/rangeutil.ts b/public/app/core/utils/rangeutil.ts
index 484dd0e3327..2079aa39006 100644
--- a/public/app/core/utils/rangeutil.ts
+++ b/public/app/core/utils/rangeutil.ts
@@ -1,5 +1,8 @@
 import _ from 'lodash';
 import moment from 'moment';
+
+import { RawTimeRange } from 'app/types/series';
+
 import * as dateMath from './datemath';
 
 const spans = {
@@ -129,7 +132,7 @@ export function describeTextRange(expr: any) {
   return opt;
 }
 
-export function describeTimeRange(range) {
+export function describeTimeRange(range: RawTimeRange): string {
   const option = rangeIndex[range.from.toString() + ' to ' + range.to.toString()];
   if (option) {
     return option.display;
diff --git a/public/app/features/all.ts b/public/app/features/all.ts
index 7f6f84b7676..ccdc7d7a820 100644
--- a/public/app/features/all.ts
+++ b/public/app/features/all.ts
@@ -9,3 +9,6 @@ import './admin';
 import './alerting/NotificationsEditCtrl';
 import './alerting/NotificationsListCtrl';
 import './manage-dashboards';
+import './teams/CreateTeamCtrl';
+import './profile/ProfileCtrl';
+import './profile/ChangePasswordCtrl';
diff --git a/public/app/features/annotations/annotations_srv.ts b/public/app/features/annotations/annotations_srv.ts
index 19850da52d9..4fe6e10b2cf 100644
--- a/public/app/features/annotations/annotations_srv.ts
+++ b/public/app/features/annotations/annotations_srv.ts
@@ -1,25 +1,32 @@
-import './editor_ctrl';
-
+// Libaries
 import angular from 'angular';
 import _ from 'lodash';
+
+// Components
+import './editor_ctrl';
 import coreModule from 'app/core/core_module';
+
+// Utils & Services
 import { makeRegions, dedupAnnotations } from './events_processing';
 
+// Types
+import { DashboardModel } from '../dashboard/dashboard_model';
+
 export class AnnotationsSrv {
   globalAnnotationsPromise: any;
   alertStatesPromise: any;
   datasourcePromises: any;
 
   /** @ngInject */
-  constructor(private $rootScope, private $q, private datasourceSrv, private backendSrv, private timeSrv) {
-    $rootScope.onAppEvent('refresh', this.clearCache.bind(this), $rootScope);
-    $rootScope.onAppEvent('dashboard-initialized', this.clearCache.bind(this), $rootScope);
-  }
+  constructor(private $rootScope, private $q, private datasourceSrv, private backendSrv, private timeSrv) {}
 
-  clearCache() {
-    this.globalAnnotationsPromise = null;
-    this.alertStatesPromise = null;
-    this.datasourcePromises = null;
+  init(dashboard: DashboardModel) {
+    // clear promises on refresh events
+    dashboard.on('refresh', () => {
+      this.globalAnnotationsPromise = null;
+      this.alertStatesPromise = null;
+      this.datasourcePromises = null;
+    });
   }
 
   getAnnotations(options) {
diff --git a/public/app/features/api-keys/ApiKeysPage.test.tsx b/public/app/features/api-keys/ApiKeysPage.test.tsx
index 8bc6e9338fc..54200234ddc 100644
--- a/public/app/features/api-keys/ApiKeysPage.test.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import { shallow } from 'enzyme';
 import { Props, ApiKeysPage } from './ApiKeysPage';
 import { NavModel, ApiKey } from 'app/types';
@@ -14,6 +14,7 @@ const setup = (propOverrides?: object) => {
     deleteApiKey: jest.fn(),
     setSearchQuery: jest.fn(),
     addApiKey: jest.fn(),
+    apiKeysCount: 0,
   };
 
   Object.assign(props, propOverrides);
@@ -28,14 +29,19 @@ const setup = (propOverrides?: object) => {
 };
 
 describe('Render', () => {
-  it('should render component', () => {
-    const { wrapper } = setup();
+  it('should render API keys table if there are any keys', () => {
+    const { wrapper } = setup({
+      apiKeys: getMultipleMockKeys(5),
+      apiKeysCount: 5,
+    });
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render API keys table', () => {
+  it('should render CTA if there are no API keys', () => {
     const { wrapper } = setup({
-      apiKeys: getMultipleMockKeys(5),
+      apiKeys: getMultipleMockKeys(0),
+      apiKeysCount: 0,
       hasFetched: true,
     });
 
diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx
index 6052b0f4fc8..d2aa1f24c57 100644
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/public/app/features/api-keys/ApiKeysPage.tsx
@@ -1,17 +1,19 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import { NavModel, ApiKey, NewApiKey, OrgRole } from 'app/types';
 import { getNavModel } from 'app/core/selectors/navModel';
-import { getApiKeys } from './state/selectors';
+import { getApiKeys, getApiKeysCount } from './state/selectors';
 import { loadApiKeys, deleteApiKey, setSearchQuery, addApiKey } from './state/actions';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import SlideDown from 'app/core/components/Animations/SlideDown';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
+import SlideDown from 'app/core/components/Animations/SlideDown';
 import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
+import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
+import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
 
 export interface Props {
   navModel: NavModel;
@@ -22,6 +24,7 @@ export interface Props {
   deleteApiKey: typeof deleteApiKey;
   setSearchQuery: typeof setSearchQuery;
   addApiKey: typeof addApiKey;
+  apiKeysCount: number;
 }
 
 export interface State {
@@ -82,6 +85,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
       return {
         ...prevState,
         newApiKey: initialApiKeyState,
+        isAdding: false,
       };
     });
   };
@@ -101,115 +105,152 @@ export class ApiKeysPage extends PureComponent<Props, any> {
     });
   };
 
-  renderTable() {
-    const { apiKeys } = this.props;
-
-    return [
-      <h3 key="header" className="page-heading">
-        Existing Keys
-      </h3>,
-      <table key="table" className="filter-table">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Role</th>
-            <th style={{ width: '34px' }} />
-          </tr>
-        </thead>
-        {apiKeys.length > 0 && (
-          <tbody>
-            {apiKeys.map(key => {
-              return (
-                <tr key={key.id}>
-                  <td>{key.name}</td>
-                  <td>{key.role}</td>
-                  <td>
-                    <a onClick={() => this.onDeleteApiKey(key)} className="btn btn-danger btn-mini">
-                      <i className="fa fa-remove" />
-                    </a>
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
+  renderEmptyList() {
+    const { isAdding } = this.state;
+    return (
+      <div className="page-container page-body">
+        {!isAdding && (
+          <EmptyListCTA
+            model={{
+              title: "You haven't added any API Keys yet.",
+              buttonIcon: 'fa fa-plus',
+              buttonLink: '#',
+              onClick: this.onToggleAdding,
+              buttonTitle: ' New API Key',
+              proTip: 'Remember you can provide view-only API access to other applications.',
+              proTipLink: '',
+              proTipLinkTitle: '',
+              proTipTarget: '_blank',
+            }}
+          />
         )}
-      </table>,
-    ];
+        {this.renderAddApiKeyForm()}
+      </div>
+    );
+  }
+
+  renderAddApiKeyForm() {
+    const { newApiKey, isAdding } = this.state;
+
+    return (
+      <SlideDown in={isAdding}>
+        <div className="cta-form">
+          <button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
+            <i className="fa fa-close" />
+          </button>
+          <h5>Add API Key</h5>
+          <form className="gf-form-group" onSubmit={this.onAddApiKey}>
+            <div className="gf-form-inline">
+              <div className="gf-form max-width-21">
+                <span className="gf-form-label">Key name</span>
+                <input
+                  type="text"
+                  className="gf-form-input"
+                  value={newApiKey.name}
+                  placeholder="Name"
+                  onChange={evt => this.onApiKeyStateUpdate(evt, ApiKeyStateProps.Name)}
+                />
+              </div>
+              <div className="gf-form">
+                <span className="gf-form-label">Role</span>
+                <span className="gf-form-select-wrapper">
+                  <select
+                    className="gf-form-input gf-size-auto"
+                    value={newApiKey.role}
+                    onChange={evt => this.onApiKeyStateUpdate(evt, ApiKeyStateProps.Role)}
+                  >
+                    {Object.keys(OrgRole).map(role => {
+                      return (
+                        <option key={role} label={role} value={role}>
+                          {role}
+                        </option>
+                      );
+                    })}
+                  </select>
+                </span>
+              </div>
+              <div className="gf-form">
+                <button className="btn gf-form-btn btn-success">Add</button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </SlideDown>
+    );
+  }
+
+  renderApiKeyList() {
+    const { isAdding } = this.state;
+    const { apiKeys, searchQuery } = this.props;
+
+    return (
+      <div className="page-container page-body">
+        <div className="page-action-bar">
+          <div className="gf-form gf-form--grow">
+            <label className="gf-form--has-input-icon gf-form--grow">
+              <input
+                type="text"
+                className="gf-form-input"
+                placeholder="Search keys"
+                value={searchQuery}
+                onChange={this.onSearchQueryChange}
+              />
+              <i className="gf-form-input-icon fa fa-search" />
+            </label>
+          </div>
+
+          <div className="page-action-bar__spacer" />
+          <button className="btn btn-success pull-right" onClick={this.onToggleAdding} disabled={isAdding}>
+            <i className="fa fa-plus" /> Add API Key
+          </button>
+        </div>
+
+        {this.renderAddApiKeyForm()}
+
+        <h3 className="page-heading">Existing Keys</h3>
+        <table className="filter-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Role</th>
+              <th style={{ width: '34px' }} />
+            </tr>
+          </thead>
+          {apiKeys.length > 0 ? (
+            <tbody>
+              {apiKeys.map(key => {
+                return (
+                  <tr key={key.id}>
+                    <td>{key.name}</td>
+                    <td>{key.role}</td>
+                    <td>
+                      <DeleteButton onConfirmDelete={() => this.onDeleteApiKey(key)} />
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          ) : null}
+        </table>
+      </div>
+    );
   }
 
   render() {
-    const { newApiKey, isAdding } = this.state;
-    const { hasFetched, navModel, searchQuery } = this.props;
+    const { hasFetched, navModel, apiKeysCount } = this.props;
 
     return (
       <div>
         <PageHeader model={navModel} />
-        <div className="page-container page-body">
-          <div className="page-action-bar">
-            <div className="gf-form gf-form--grow">
-              <label className="gf-form--has-input-icon gf-form--grow">
-                <input
-                  type="text"
-                  className="gf-form-input"
-                  placeholder="Search keys"
-                  value={searchQuery}
-                  onChange={this.onSearchQueryChange}
-                />
-                <i className="gf-form-input-icon fa fa-search" />
-              </label>
-            </div>
-
-            <div className="page-action-bar__spacer" />
-            <button className="btn btn-success pull-right" onClick={this.onToggleAdding} disabled={isAdding}>
-              <i className="fa fa-plus" /> Add API Key
-            </button>
-          </div>
-
-          <SlideDown in={isAdding}>
-            <div className="cta-form">
-              <button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
-                <i className="fa fa-close" />
-              </button>
-              <h5>Add API Key</h5>
-              <form className="gf-form-group" onSubmit={this.onAddApiKey}>
-                <div className="gf-form-inline">
-                  <div className="gf-form max-width-21">
-                    <span className="gf-form-label">Key name</span>
-                    <input
-                      type="text"
-                      className="gf-form-input"
-                      value={newApiKey.name}
-                      placeholder="Name"
-                      onChange={evt => this.onApiKeyStateUpdate(evt, ApiKeyStateProps.Name)}
-                    />
-                  </div>
-                  <div className="gf-form">
-                    <span className="gf-form-label">Role</span>
-                    <span className="gf-form-select-wrapper">
-                      <select
-                        className="gf-form-input gf-size-auto"
-                        value={newApiKey.role}
-                        onChange={evt => this.onApiKeyStateUpdate(evt, ApiKeyStateProps.Role)}
-                      >
-                        {Object.keys(OrgRole).map(role => {
-                          return (
-                            <option key={role} label={role} value={role}>
-                              {role}
-                            </option>
-                          );
-                        })}
-                      </select>
-                    </span>
-                  </div>
-                  <div className="gf-form">
-                    <button className="btn gf-form-btn btn-success">Add</button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </SlideDown>
-          {hasFetched ? this.renderTable() : <PageLoader pageName="Api keys" />}
-        </div>
+        {hasFetched ? (
+          apiKeysCount > 0 ? (
+            this.renderApiKeyList()
+          ) : (
+            this.renderEmptyList()
+          )
+        ) : (
+          <PageLoader pageName="Api keys" />
+        )}
       </div>
     );
   }
@@ -220,6 +261,7 @@ function mapStateToProps(state) {
     navModel: getNavModel(state.navIndex, 'apikeys'),
     apiKeys: getApiKeys(state.apiKeys),
     searchQuery: state.apiKeys.searchQuery,
+    apiKeysCount: getApiKeysCount(state.apiKeys),
     hasFetched: state.apiKeys.hasFetched,
   };
 }
diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
index b1cac8469be..7ede9618250 100644
--- a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
+++ b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
@@ -1,276 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Render should render API keys table 1`] = `
+exports[`Render should render API keys table if there are any keys 1`] = `
 <div>
   <PageHeader
     model={Object {}}
   />
-  <div
-    className="page-container page-body"
-  >
-    <div
-      className="page-action-bar"
-    >
-      <div
-        className="gf-form gf-form--grow"
-      >
-        <label
-          className="gf-form--has-input-icon gf-form--grow"
-        >
-          <input
-            className="gf-form-input"
-            onChange={[Function]}
-            placeholder="Search keys"
-            type="text"
-            value=""
-          />
-          <i
-            className="gf-form-input-icon fa fa-search"
-          />
-        </label>
-      </div>
-      <div
-        className="page-action-bar__spacer"
-      />
-      <button
-        className="btn btn-success pull-right"
-        disabled={false}
-        onClick={[Function]}
-      >
-        <i
-          className="fa fa-plus"
-        />
-         Add API Key
-      </button>
-    </div>
-    <Component
-      in={false}
-    >
-      <div
-        className="cta-form"
-      >
-        <button
-          className="cta-form__close btn btn-transparent"
-          onClick={[Function]}
-        >
-          <i
-            className="fa fa-close"
-          />
-        </button>
-        <h5>
-          Add API Key
-        </h5>
-        <form
-          className="gf-form-group"
-          onSubmit={[Function]}
-        >
-          <div
-            className="gf-form-inline"
-          >
-            <div
-              className="gf-form max-width-21"
-            >
-              <span
-                className="gf-form-label"
-              >
-                Key name
-              </span>
-              <input
-                className="gf-form-input"
-                onChange={[Function]}
-                placeholder="Name"
-                type="text"
-                value=""
-              />
-            </div>
-            <div
-              className="gf-form"
-            >
-              <span
-                className="gf-form-label"
-              >
-                Role
-              </span>
-              <span
-                className="gf-form-select-wrapper"
-              >
-                <select
-                  className="gf-form-input gf-size-auto"
-                  onChange={[Function]}
-                  value="Viewer"
-                >
-                  <option
-                    key="Viewer"
-                    label="Viewer"
-                    value="Viewer"
-                  >
-                    Viewer
-                  </option>
-                  <option
-                    key="Editor"
-                    label="Editor"
-                    value="Editor"
-                  >
-                    Editor
-                  </option>
-                  <option
-                    key="Admin"
-                    label="Admin"
-                    value="Admin"
-                  >
-                    Admin
-                  </option>
-                </select>
-              </span>
-            </div>
-            <div
-              className="gf-form"
-            >
-              <button
-                className="btn gf-form-btn btn-success"
-              >
-                Add
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-    </Component>
-    <h3
-      className="page-heading"
-      key="header"
-    >
-      Existing Keys
-    </h3>
-    <table
-      className="filter-table"
-      key="table"
-    >
-      <thead>
-        <tr>
-          <th>
-            Name
-          </th>
-          <th>
-            Role
-          </th>
-          <th
-            style={
-              Object {
-                "width": "34px",
-              }
-            }
-          />
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          key="1"
-        >
-          <td>
-            test-1
-          </td>
-          <td>
-            Viewer
-          </td>
-          <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
-          </td>
-        </tr>
-        <tr
-          key="2"
-        >
-          <td>
-            test-2
-          </td>
-          <td>
-            Viewer
-          </td>
-          <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
-          </td>
-        </tr>
-        <tr
-          key="3"
-        >
-          <td>
-            test-3
-          </td>
-          <td>
-            Viewer
-          </td>
-          <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
-          </td>
-        </tr>
-        <tr
-          key="4"
-        >
-          <td>
-            test-4
-          </td>
-          <td>
-            Viewer
-          </td>
-          <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
-          </td>
-        </tr>
-        <tr
-          key="5"
-        >
-          <td>
-            test-5
-          </td>
-          <td>
-            Viewer
-          </td>
-          <td>
-            <a
-              className="btn btn-danger btn-mini"
-              onClick={[Function]}
-            >
-              <i
-                className="fa fa-remove"
-              />
-            </a>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+  <PageLoader
+    pageName="Api keys"
+  />
 </div>
 `;
 
-exports[`Render should render component 1`] = `
+exports[`Render should render CTA if there are no API keys 1`] = `
 <div>
   <PageHeader
     model={Object {}}
@@ -278,41 +19,21 @@ exports[`Render should render component 1`] = `
   <div
     className="page-container page-body"
   >
-    <div
-      className="page-action-bar"
-    >
-      <div
-        className="gf-form gf-form--grow"
-      >
-        <label
-          className="gf-form--has-input-icon gf-form--grow"
-        >
-          <input
-            className="gf-form-input"
-            onChange={[Function]}
-            placeholder="Search keys"
-            type="text"
-            value=""
-          />
-          <i
-            className="gf-form-input-icon fa fa-search"
-          />
-        </label>
-      </div>
-      <div
-        className="page-action-bar__spacer"
-      />
-      <button
-        className="btn btn-success pull-right"
-        disabled={false}
-        onClick={[Function]}
-      >
-        <i
-          className="fa fa-plus"
-        />
-         Add API Key
-      </button>
-    </div>
+    <EmptyListCTA
+      model={
+        Object {
+          "buttonIcon": "fa fa-plus",
+          "buttonLink": "#",
+          "buttonTitle": " New API Key",
+          "onClick": [Function],
+          "proTip": "Remember you can provide view-only API access to other applications.",
+          "proTipLink": "",
+          "proTipLinkTitle": "",
+          "proTipTarget": "_blank",
+          "title": "You haven't added any API Keys yet.",
+        }
+      }
+    />
     <Component
       in={false}
     >
@@ -406,9 +127,6 @@ exports[`Render should render component 1`] = `
         </form>
       </div>
     </Component>
-    <PageLoader
-      pageName="Api keys"
-    />
   </div>
 </div>
 `;
diff --git a/public/app/features/api-keys/state/selectors.ts b/public/app/features/api-keys/state/selectors.ts
index 8065c252e85..789237ae9a3 100644
--- a/public/app/features/api-keys/state/selectors.ts
+++ b/public/app/features/api-keys/state/selectors.ts
@@ -1,5 +1,7 @@
 import { ApiKeysState } from 'app/types';
 
+export const getApiKeysCount = (state: ApiKeysState) => state.keys.length;
+
 export const getApiKeys = (state: ApiKeysState) => {
   const regex = RegExp(state.searchQuery, 'i');
 
diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts
index c34b9ddaff2..5871a579f3c 100644
--- a/public/app/features/dashboard/dashboard_ctrl.ts
+++ b/public/app/features/dashboard/dashboard_ctrl.ts
@@ -1,6 +1,12 @@
+// Utils
 import config from 'app/core/config';
-
+import appEvents from 'app/core/app_events';
 import coreModule from 'app/core/core_module';
+
+// Services
+import { AnnotationsSrv } from '../annotations/annotations_srv';
+
+// Types
 import { DashboardModel } from './dashboard_model';
 import { PanelModel } from './panel_model';
 
@@ -21,6 +27,7 @@ export class DashboardCtrl {
     private dashboardSrv,
     private unsavedChangesSrv,
     private dashboardViewStateSrv,
+    private annotationsSrv: AnnotationsSrv,
     public playlistSrv
   ) {
     // temp hack due to way dashboards are loaded
@@ -49,6 +56,7 @@ export class DashboardCtrl {
     // init services
     this.timeSrv.init(dashboard);
     this.alertingSrv.init(dashboard, data.alerts);
+    this.annotationsSrv.init(dashboard);
 
     // template values service needs to initialize completely before
     // the rest of the dashboard can load
@@ -72,7 +80,7 @@ export class DashboardCtrl {
         this.keybindingSrv.setupDashboardBindings(this.$scope, dashboard);
         this.setWindowTitleAndTheme();
 
-        this.$scope.appEvent('dashboard-initialized', dashboard);
+        appEvents.emit('dashboard-initialized', dashboard);
       })
       .catch(this.onInitFailed.bind(this, 'Dashboard init failed', true));
   }
diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 1f5fa4cbe12..fe55e64634f 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -21,15 +21,14 @@ function GridWrapper({
   className,
   isResizable,
   isDraggable,
+  isFullscreen,
 }) {
-  if (size.width === 0) {
-    console.log('size is zero!');
-  }
-
   const width = size.width > 0 ? size.width : lastGridWidth;
   if (width !== lastGridWidth) {
-    onWidthChange();
-    lastGridWidth = width;
+    if (!isFullscreen && Math.abs(width - lastGridWidth) > 8) {
+      onWidthChange();
+      lastGridWidth = width;
+    }
   }
 
   return (
@@ -197,6 +196,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
         onDragStop={this.onDragStop}
         onResize={this.onResize}
         onResizeStop={this.onResizeStop}
+        isFullscreen={this.props.dashboard.meta.fullscreen}
       >
         {this.renderPanels()}
       </SizedReactLayoutGrid>
diff --git a/public/app/features/dashboard/panel_model.ts b/public/app/features/dashboard/panel_model.ts
index ebf8a6bb224..d82368d8dd7 100644
--- a/public/app/features/dashboard/panel_model.ts
+++ b/public/app/features/dashboard/panel_model.ts
@@ -133,6 +133,7 @@ export class PanelModel {
   }
 
   destroy() {
+    this.events.emit('panel-teardown');
     this.events.removeAllListeners();
   }
 }
diff --git a/public/app/features/dashboard/permissions/DashboardPermissions.tsx b/public/app/features/dashboard/permissions/DashboardPermissions.tsx
index 5651242a485..c07bef42930 100644
--- a/public/app/features/dashboard/permissions/DashboardPermissions.tsx
+++ b/public/app/features/dashboard/permissions/DashboardPermissions.tsx
@@ -1,5 +1,4 @@
 import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
 import Tooltip from 'app/core/components/Tooltip/Tooltip';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 import { StoreState, FolderInfo } from 'app/types';
@@ -13,7 +12,7 @@ import {
 import PermissionList from 'app/core/components/PermissionList/PermissionList';
 import AddPermission from 'app/core/components/PermissionList/AddPermission';
 import PermissionsInfo from 'app/core/components/PermissionList/PermissionsInfo';
-import { store } from 'app/store/configureStore';
+import { connectWithStore } from '../../../core/utils/connectWithReduxStore';
 
 export interface Props {
   dashboardId: number;
@@ -95,13 +94,6 @@ export class DashboardPermissions extends PureComponent<Props, State> {
   }
 }
 
-function connectWithStore(WrappedComponent, ...args) {
-  const ConnectedWrappedComponent = connect(...args)(WrappedComponent);
-  return props => {
-    return <ConnectedWrappedComponent {...props} store={store} />;
-  };
-}
-
 const mapStateToProps = (state: StoreState) => ({
   permissions: state.dashboard.permissions,
 });
diff --git a/public/app/features/dashboard/state/actions.ts b/public/app/features/dashboard/state/actions.ts
index 749edef58fb..bc35ff31ff0 100644
--- a/public/app/features/dashboard/state/actions.ts
+++ b/public/app/features/dashboard/state/actions.ts
@@ -13,6 +13,7 @@ import {
 
 export enum ActionTypes {
   LoadDashboardPermissions = 'LOAD_DASHBOARD_PERMISSIONS',
+  LoadStarredDashboards = 'LOAD_STARRED_DASHBOARDS',
 }
 
 export interface LoadDashboardPermissionsAction {
@@ -20,7 +21,12 @@ export interface LoadDashboardPermissionsAction {
   payload: DashboardAcl[];
 }
 
-export type Action = LoadDashboardPermissionsAction;
+export interface LoadStarredDashboardsAction {
+  type: ActionTypes.LoadStarredDashboards;
+  payload: DashboardAcl[];
+}
+
+export type Action = LoadDashboardPermissionsAction | LoadStarredDashboardsAction;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, any>;
 
diff --git a/public/app/features/dashboard/state/reducers.test.ts b/public/app/features/dashboard/state/reducers.test.ts
index c5b67f58ac9..ced8866aad8 100644
--- a/public/app/features/dashboard/state/reducers.test.ts
+++ b/public/app/features/dashboard/state/reducers.test.ts
@@ -1,6 +1,6 @@
 import { Action, ActionTypes } from './actions';
 import { OrgRole, PermissionLevel, DashboardState } from 'app/types';
-import { inititalState, dashboardReducer } from './reducers';
+import { initialState, dashboardReducer } from './reducers';
 
 describe('dashboard reducer', () => {
   describe('loadDashboardPermissions', () => {
@@ -14,7 +14,7 @@ describe('dashboard reducer', () => {
           { id: 3, dashboardId: 1, role: OrgRole.Editor, permission: PermissionLevel.Edit },
         ],
       };
-      state = dashboardReducer(inititalState, action);
+      state = dashboardReducer(initialState, action);
     });
 
     it('should add permissions to state', async () => {
diff --git a/public/app/features/dashboard/state/reducers.ts b/public/app/features/dashboard/state/reducers.ts
index 5100529d973..8a79a6c9f77 100644
--- a/public/app/features/dashboard/state/reducers.ts
+++ b/public/app/features/dashboard/state/reducers.ts
@@ -2,11 +2,11 @@ import { DashboardState } from 'app/types';
 import { Action, ActionTypes } from './actions';
 import { processAclItems } from 'app/core/utils/acl';
 
-export const inititalState: DashboardState = {
+export const initialState: DashboardState = {
   permissions: [],
 };
 
-export const dashboardReducer = (state = inititalState, action: Action): DashboardState => {
+export const dashboardReducer = (state = initialState, action: Action): DashboardState => {
   switch (action.type) {
     case ActionTypes.LoadDashboardPermissions:
       return {
diff --git a/public/app/features/dashboard/upload.ts b/public/app/features/dashboard/upload.ts
index 42871327eb6..ec4ad9a03cb 100644
--- a/public/app/features/dashboard/upload.ts
+++ b/public/app/features/dashboard/upload.ts
@@ -11,7 +11,7 @@ const template = `
 `;
 
 /** @ngInject */
-function uploadDashboardDirective(timer, alertSrv, $location) {
+function uploadDashboardDirective(timer, $location) {
   return {
     restrict: 'E',
     template: template,
@@ -59,7 +59,7 @@ function uploadDashboardDirective(timer, alertSrv, $location) {
         // Something
         elem[0].addEventListener('change', file_selected, false);
       } else {
-        alertSrv.set('Oops', 'Sorry, the HTML5 File APIs are not fully supported in this browser.', 'error');
+        appEvents.emit('alert-error', ['Oops', 'The HTML5 File APIs are not fully supported in this browser']);
       }
     },
   };
diff --git a/public/app/features/datasources/settings/BasicSettings.tsx b/public/app/features/datasources/settings/BasicSettings.tsx
index f4c26f1e27f..adaec898dbc 100644
--- a/public/app/features/datasources/settings/BasicSettings.tsx
+++ b/public/app/features/datasources/settings/BasicSettings.tsx
@@ -1,5 +1,5 @@
 import React, { SFC } from 'react';
-import { Label } from '../../../core/components/Forms/Forms';
+import { Label } from 'app/core/components/Label/Label';
 
 export interface Props {
   dataSourceName: string;
diff --git a/public/app/features/explore/ErrorBoundary.tsx b/public/app/features/explore/ErrorBoundary.tsx
new file mode 100644
index 00000000000..959d15eea80
--- /dev/null
+++ b/public/app/features/explore/ErrorBoundary.tsx
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+
+export default class ErrorBoundary extends Component<{}, any> {
+  constructor(props) {
+    super(props);
+    this.state = { error: null, errorInfo: null };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // Catch errors in any components below and re-render with error message
+    this.setState({
+      error: error,
+      errorInfo: errorInfo,
+    });
+  }
+
+  render() {
+    if (this.state.errorInfo) {
+      // Error path
+      return (
+        <div className="explore-container">
+          <h3>An unexpected error happened.</h3>
+          <details style={{ whiteSpace: 'pre-wrap' }}>
+            {this.state.error && this.state.error.toString()}
+            <br />
+            {this.state.errorInfo.componentStack}
+          </details>
+        </div>
+      );
+    }
+    // Normally, just render children
+    return this.props.children;
+  }
+}
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index bac063116f1..af771bad5dd 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -3,15 +3,8 @@ import { hot } from 'react-hot-loader';
 import Select from 'react-select';
 import _ from 'lodash';
 
-import {
-  ExploreState,
-  ExploreUrlState,
-  HistoryItem,
-  Query,
-  QueryTransaction,
-  Range,
-  ResultType,
-} from 'app/types/explore';
+import { ExploreState, ExploreUrlState, HistoryItem, Query, QueryTransaction, ResultType } from 'app/types/explore';
+import { RawTimeRange } from 'app/types/series';
 import kbn from 'app/core/utils/kbn';
 import colors from 'app/core/utils/colors';
 import store from 'app/core/store';
@@ -28,8 +21,11 @@ import QueryRows from './QueryRows';
 import Graph from './Graph';
 import Logs from './Logs';
 import Table from './Table';
+import ErrorBoundary from './ErrorBoundary';
 import TimePicker from './TimePicker';
 import { ensureQueries, generateQueryKey, hasQuery } from './utils/query';
+import { DataSource } from 'app/types/datasources';
+import { mergeStreams } from 'app/core/logs_model';
 
 const MAX_HISTORY_ITEMS = 100;
 
@@ -154,12 +150,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     }
   }
 
-  componentDidCatch(error) {
-    this.setState({ datasourceError: error });
-    console.error(error);
-  }
-
-  async setDatasource(datasource) {
+  async setDatasource(datasource: DataSource) {
     const supportsGraph = datasource.meta.metrics;
     const supportsLogs = datasource.meta.logs;
     const supportsTable = datasource.meta.metrics;
@@ -170,7 +161,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
       const testResult = await datasource.testDatasource();
       datasourceError = testResult.status === 'success' ? null : testResult.message;
     } catch (error) {
-      datasourceError = (error && error.statusText) || error;
+      datasourceError = (error && error.statusText) || 'Network error';
     }
 
     const historyKey = `grafana.explore.history.${datasourceId}`;
@@ -187,8 +178,12 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
       query: this.queryExpressions[i],
     }));
 
+    // Custom components
+    const StartPage = datasource.pluginExports.ExploreStartPage;
+
     this.setState(
       {
+        StartPage,
         datasource,
         datasourceError,
         history,
@@ -278,10 +273,9 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     }
   };
 
-  onChangeTime = nextRange => {
-    const range = {
-      from: nextRange.from,
-      to: nextRange.to,
+  onChangeTime = (nextRange: RawTimeRange) => {
+    const range: RawTimeRange = {
+      ...nextRange,
     };
     this.setState({ range }, () => this.onSubmit());
   };
@@ -342,6 +336,13 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     );
   };
 
+  // Use this in help pages to set page to a single query
+  onClickQuery = query => {
+    const nextQueries = [{ query, key: generateQueryKey() }];
+    this.queryExpressions = nextQueries.map(q => q.query);
+    this.setState({ queries: nextQueries }, this.onSubmit);
+  };
+
   onClickSplit = () => {
     const { onChangeSplit } = this.props;
     if (onChangeSplit) {
@@ -373,9 +374,10 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     this.onModifyQueries({ type: 'ADD_FILTER', key: columnKey, value: rowValue });
   };
 
-  onModifyQueries = (action: object, index?: number) => {
+  onModifyQueries = (action, index?: number) => {
     const { datasource } = this.state;
     if (datasource && datasource.modifyQuery) {
+      const preventSubmit = action.preventSubmit;
       this.setState(
         state => {
           const { queries, queryTransactions } = state;
@@ -391,16 +393,26 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
             nextQueryTransactions = [];
           } else {
             // Modify query only at index
-            nextQueries = [
-              ...queries.slice(0, index),
-              {
-                key: generateQueryKey(index),
-                query: datasource.modifyQuery(this.queryExpressions[index], action),
-              },
-              ...queries.slice(index + 1),
-            ];
-            // Discard transactions related to row query
-            nextQueryTransactions = queryTransactions.filter(qt => qt.rowIndex !== index);
+            nextQueries = queries.map((q, i) => {
+              // Synchronise all queries with local query cache to ensure consistency
+              q.query = this.queryExpressions[i];
+              return i === index
+                ? {
+                    key: generateQueryKey(index),
+                    query: datasource.modifyQuery(q.query, action),
+                  }
+                : q;
+            });
+            nextQueryTransactions = queryTransactions
+              // Consume the hint corresponding to the action
+              .map(qt => {
+                if (qt.hints != null && qt.rowIndex === index) {
+                  qt.hints = qt.hints.filter(hint => hint.fix.action !== action);
+                }
+                return qt;
+              })
+              // Preserve previous row query transaction to keep results visible if next query is incomplete
+              .filter(qt => preventSubmit || qt.rowIndex !== index);
           }
           this.queryExpressions = nextQueries.map(q => q.query);
           return {
@@ -408,7 +420,8 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
             queryTransactions: nextQueryTransactions,
           };
         },
-        () => this.onSubmit()
+        // Accepting certain fixes do not result in a well-formed query which should not be submitted
+        !preventSubmit ? () => this.onSubmit() : null
       );
     }
   };
@@ -459,7 +472,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
   ) {
     const { datasource, range } = this.state;
     const resolution = this.el.offsetWidth;
-    const absoluteRange = {
+    const absoluteRange: RawTimeRange = {
       from: parseDate(range.from, false),
       to: parseDate(range.to, true),
     };
@@ -474,7 +487,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     ];
 
     // Clone range for query request
-    const queryRange: Range = { ...range };
+    const queryRange: RawTimeRange = { ...range };
 
     return {
       interval,
@@ -572,13 +585,28 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     });
   }
 
-  failQueryTransaction(transactionId: string, error: string, datasourceId: string) {
+  failQueryTransaction(transactionId: string, response: any, datasourceId: string) {
     const { datasource } = this.state;
     if (datasource.meta.id !== datasourceId) {
       // Navigated away, queries did not matter
       return;
     }
 
+    console.error(response);
+
+    let error: string | JSX.Element = response;
+    if (response.data) {
+      error = response.data.error;
+      if (response.data.response) {
+        error = (
+          <>
+            <span>{response.data.error}</span>
+            <details>{response.data.response}</details>
+          </>
+        );
+      }
+    }
+
     this.setState(state => {
       // Transaction might have been discarded
       if (!state.queryTransactions.find(qt => qt.id === transactionId)) {
@@ -625,9 +653,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
           this.completeQueryTransaction(transaction.id, results, latency, queries, datasourceId);
           this.setState({ graphRange: transaction.options.range });
         } catch (response) {
-          console.error(response);
-          const queryError = response.data ? response.data.error : response;
-          this.failQueryTransaction(transaction.id, queryError, datasourceId);
+          this.failQueryTransaction(transaction.id, response, datasourceId);
         }
       } else {
         this.discardTransactions(rowIndex);
@@ -657,9 +683,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
           const results = res.data[0];
           this.completeQueryTransaction(transaction.id, results, latency, queries, datasourceId);
         } catch (response) {
-          console.error(response);
-          const queryError = response.data ? response.data.error : response;
-          this.failQueryTransaction(transaction.id, queryError, datasourceId);
+          this.failQueryTransaction(transaction.id, response, datasourceId);
         }
       } else {
         this.discardTransactions(rowIndex);
@@ -685,9 +709,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
           const results = res.data;
           this.completeQueryTransaction(transaction.id, results, latency, queries, datasourceId);
         } catch (response) {
-          console.error(response);
-          const queryError = response.data ? response.data.error : response;
-          this.failQueryTransaction(transaction.id, queryError, datasourceId);
+          this.failQueryTransaction(transaction.id, response, datasourceId);
         }
       } else {
         this.discardTransactions(rowIndex);
@@ -695,11 +717,6 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     });
   }
 
-  request = url => {
-    const { datasource } = this.state;
-    return datasource.metadataRequest(url);
-  };
-
   cloneState(): ExploreState {
     // Copy state, but copy queries including modifications
     return {
@@ -717,6 +734,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
   render() {
     const { position, split } = this.props;
     const {
+      StartPage,
       datasource,
       datasourceError,
       datasourceLoading,
@@ -744,17 +762,20 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     const graphLoading = queryTransactions.some(qt => qt.resultType === 'Graph' && !qt.done);
     const tableLoading = queryTransactions.some(qt => qt.resultType === 'Table' && !qt.done);
     const logsLoading = queryTransactions.some(qt => qt.resultType === 'Logs' && !qt.done);
+    // TODO don't recreate those on each re-render
     const graphResult = _.flatten(
       queryTransactions.filter(qt => qt.resultType === 'Graph' && qt.done && qt.result).map(qt => qt.result)
     );
     const tableResult = mergeTablesIntoModel(
       new TableModel(),
-      ...queryTransactions.filter(qt => qt.resultType === 'Table' && qt.done).map(qt => qt.result)
+      ...queryTransactions.filter(qt => qt.resultType === 'Table' && qt.done && qt.result).map(qt => qt.result)
     );
-    const logsResult = _.flatten(
-      queryTransactions.filter(qt => qt.resultType === 'Logs' && qt.done).map(qt => qt.result)
+    const logsResult = mergeStreams(
+      queryTransactions.filter(qt => qt.resultType === 'Logs' && qt.done && qt.result).map(qt => qt.result)
     );
     const loading = queryTransactions.some(qt => !qt.done);
+    const showStartPages = StartPage && queryTransactions.length === 0;
+    const viewModeCount = [supportsGraph, supportsLogs, supportsTable].filter(m => m).length;
 
     return (
       <div className={exploreClass} ref={this.getRef}>
@@ -831,53 +852,61 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
         {datasource && !datasourceError ? (
           <div className="explore-container">
             <QueryRows
+              datasource={datasource}
               history={history}
               queries={queries}
-              request={this.request}
               onAddQueryRow={this.onAddQueryRow}
               onChangeQuery={this.onChangeQuery}
               onClickHintFix={this.onModifyQueries}
               onExecuteQuery={this.onSubmit}
               onRemoveQueryRow={this.onRemoveQueryRow}
-              supportsLogs={supportsLogs}
               transactions={queryTransactions}
             />
-            <div className="result-options">
-              {supportsGraph ? (
-                <button className={`btn toggle-btn ${graphButtonActive}`} onClick={this.onClickGraphButton}>
-                  Graph
-                </button>
-              ) : null}
-              {supportsTable ? (
-                <button className={`btn toggle-btn ${tableButtonActive}`} onClick={this.onClickTableButton}>
-                  Table
-                </button>
-              ) : null}
-              {supportsLogs ? (
-                <button className={`btn toggle-btn ${logsButtonActive}`} onClick={this.onClickLogsButton}>
-                  Logs
-                </button>
-              ) : null}
-            </div>
-
             <main className="m-t-2">
-              {supportsGraph &&
-                showingGraph && (
-                  <Graph
-                    data={graphResult}
-                    height={graphHeight}
-                    loading={graphLoading}
-                    id={`explore-graph-${position}`}
-                    range={graphRange}
-                    split={split}
-                  />
+              <ErrorBoundary>
+                {showStartPages && <StartPage onClickQuery={this.onClickQuery} />}
+                {!showStartPages && (
+                  <>
+                    {viewModeCount > 1 && (
+                      <div className="result-options">
+                        {supportsGraph ? (
+                          <button className={`btn toggle-btn ${graphButtonActive}`} onClick={this.onClickGraphButton}>
+                            Graph
+                          </button>
+                        ) : null}
+                        {supportsTable ? (
+                          <button className={`btn toggle-btn ${tableButtonActive}`} onClick={this.onClickTableButton}>
+                            Table
+                          </button>
+                        ) : null}
+                        {supportsLogs ? (
+                          <button className={`btn toggle-btn ${logsButtonActive}`} onClick={this.onClickLogsButton}>
+                            Logs
+                          </button>
+                        ) : null}
+                      </div>
+                    )}
+
+                    {supportsGraph &&
+                      showingGraph && (
+                        <Graph
+                          data={graphResult}
+                          height={graphHeight}
+                          loading={graphLoading}
+                          id={`explore-graph-${position}`}
+                          range={graphRange}
+                          split={split}
+                        />
+                      )}
+                    {supportsTable && showingTable ? (
+                      <div className="panel-container m-t-2">
+                        <Table data={tableResult} loading={tableLoading} onClickCell={this.onClickTableCell} />
+                      </div>
+                    ) : null}
+                    {supportsLogs && showingLogs ? <Logs data={logsResult} loading={logsLoading} /> : null}
+                  </>
                 )}
-              {supportsTable && showingTable ? (
-                <div className="panel-container m-t-2">
-                  <Table data={tableResult} loading={tableLoading} onClickCell={this.onClickTableCell} />
-                </div>
-              ) : null}
-              {supportsLogs && showingLogs ? <Logs data={logsResult} loading={logsLoading} /> : null}
+              </ErrorBoundary>
             </main>
           </div>
         ) : null}
diff --git a/public/app/features/explore/Graph.tsx b/public/app/features/explore/Graph.tsx
index d57f8d49a43..bbb055067a2 100644
--- a/public/app/features/explore/Graph.tsx
+++ b/public/app/features/explore/Graph.tsx
@@ -6,7 +6,7 @@ import { withSize } from 'react-sizeme';
 import 'vendor/flot/jquery.flot';
 import 'vendor/flot/jquery.flot.time';
 
-import { Range } from 'app/types/explore';
+import { RawTimeRange } from 'app/types/series';
 import * as dateMath from 'app/core/utils/datemath';
 import TimeSeries from 'app/core/time_series2';
 
@@ -76,7 +76,7 @@ interface GraphProps {
   height?: string; // e.g., '200px'
   id?: string;
   loading?: boolean;
-  range: Range;
+  range: RawTimeRange;
   split?: boolean;
   size?: { width: number; height: number };
 }
@@ -169,7 +169,7 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
 
     return (
       <div className="panel-container">
-        {loading && <div className="explore-graph__loader" />}
+        {loading && <div className="explore-panel__loader" />}
         {this.props.data &&
           this.props.data.length > MAX_NUMBER_OF_TIME_SERIES &&
           !this.state.showAllTimeSeries && (
diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index cc8f9be48fd..278c5ee016d 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@@ -10,37 +10,33 @@ interface LogsProps {
   loading: boolean;
 }
 
-const EXAMPLE_QUERY = '{job="default/prometheus"}';
-
 export default class Logs extends PureComponent<LogsProps, {}> {
   render() {
-    const { className = '', data } = this.props;
+    const { className = '', data, loading = false } = this.props;
     const hasData = data && data.rows && data.rows.length > 0;
     return (
       <div className={`${className} logs`}>
-        {hasData ? (
-          <div className="logs-entries panel-container">
-            {data.rows.map(row => (
-              <Fragment key={row.key}>
-                <div className={row.logLevel ? `logs-row-level logs-row-level-${row.logLevel}` : ''} />
-                <div title={`${row.timestamp} (${row.timeFromNow})`}>{row.timeLocal}</div>
-                <div>
-                  <Highlighter
-                    textToHighlight={row.entry}
-                    searchWords={row.searchWords}
-                    findChunks={findHighlightChunksInText}
-                    highlightClassName="logs-row-match-highlight"
-                  />
-                </div>
-              </Fragment>
-            ))}
+        <div className="panel-container">
+          {loading && <div className="explore-panel__loader" />}
+          <div className="logs-entries">
+            {hasData &&
+              data.rows.map(row => (
+                <Fragment key={row.key}>
+                  <div className={row.logLevel ? `logs-row-level logs-row-level-${row.logLevel}` : ''} />
+                  <div title={`${row.timestamp} (${row.timeFromNow})`}>{row.timeLocal}</div>
+                  <div>
+                    <Highlighter
+                      textToHighlight={row.entry}
+                      searchWords={row.searchWords}
+                      findChunks={findHighlightChunksInText}
+                      highlightClassName="logs-row-match-highlight"
+                    />
+                  </div>
+                </Fragment>
+              ))}
           </div>
-        ) : null}
-        {!hasData ? (
-          <div className="panel-container">
-            Enter a query like <code>{EXAMPLE_QUERY}</code>
-          </div>
-        ) : null}
+          {!loading && !hasData && 'No data was returned.'}
+        </div>
       </div>
     );
   }
diff --git a/public/app/features/explore/PlaceholdersBuffer.test.ts b/public/app/features/explore/PlaceholdersBuffer.test.ts
new file mode 100644
index 00000000000..2ce31e79b05
--- /dev/null
+++ b/public/app/features/explore/PlaceholdersBuffer.test.ts
@@ -0,0 +1,72 @@
+import PlaceholdersBuffer from './PlaceholdersBuffer';
+
+describe('PlaceholdersBuffer', () => {
+  it('does nothing if no placeholders are defined', () => {
+    const text = 'metric';
+    const buffer = new PlaceholdersBuffer(text);
+
+    expect(buffer.hasPlaceholders()).toBe(false);
+    expect(buffer.toString()).toBe(text);
+    expect(buffer.getNextMoveOffset()).toBe(0);
+  });
+
+  it('respects the traversal order of placeholders', () => {
+    const text = 'sum($2 offset $1) by ($3)';
+    const buffer = new PlaceholdersBuffer(text);
+
+    expect(buffer.hasPlaceholders()).toBe(true);
+    expect(buffer.toString()).toBe('sum( offset ) by ()');
+    expect(buffer.getNextMoveOffset()).toBe(12);
+
+    buffer.setNextPlaceholderValue('1h');
+
+    expect(buffer.hasPlaceholders()).toBe(true);
+    expect(buffer.toString()).toBe('sum( offset 1h) by ()');
+    expect(buffer.getNextMoveOffset()).toBe(-10);
+
+    buffer.setNextPlaceholderValue('metric');
+
+    expect(buffer.hasPlaceholders()).toBe(true);
+    expect(buffer.toString()).toBe('sum(metric offset 1h) by ()');
+    expect(buffer.getNextMoveOffset()).toBe(16);
+
+    buffer.setNextPlaceholderValue('label');
+
+    expect(buffer.hasPlaceholders()).toBe(false);
+    expect(buffer.toString()).toBe('sum(metric offset 1h) by (label)');
+    expect(buffer.getNextMoveOffset()).toBe(0);
+  });
+
+  it('respects the traversal order of adjacent placeholders', () => {
+    const text = '$1$3$2$4';
+    const buffer = new PlaceholdersBuffer(text);
+
+    expect(buffer.hasPlaceholders()).toBe(true);
+    expect(buffer.toString()).toBe('');
+    expect(buffer.getNextMoveOffset()).toBe(0);
+
+    buffer.setNextPlaceholderValue('1');
+
+    expect(buffer.hasPlaceholders()).toBe(true);
+    expect(buffer.toString()).toBe('1');
+    expect(buffer.getNextMoveOffset()).toBe(0);
+
+    buffer.setNextPlaceholderValue('2');
+
+    expect(buffer.hasPlaceholders()).toBe(true);
+    expect(buffer.toString()).toBe('12');
+    expect(buffer.getNextMoveOffset()).toBe(-1);
+
+    buffer.setNextPlaceholderValue('3');
+
+    expect(buffer.hasPlaceholders()).toBe(true);
+    expect(buffer.toString()).toBe('132');
+    expect(buffer.getNextMoveOffset()).toBe(1);
+
+    buffer.setNextPlaceholderValue('4');
+
+    expect(buffer.hasPlaceholders()).toBe(false);
+    expect(buffer.toString()).toBe('1324');
+    expect(buffer.getNextMoveOffset()).toBe(0);
+  });
+});
diff --git a/public/app/features/explore/PlaceholdersBuffer.ts b/public/app/features/explore/PlaceholdersBuffer.ts
new file mode 100644
index 00000000000..9a0db18ef04
--- /dev/null
+++ b/public/app/features/explore/PlaceholdersBuffer.ts
@@ -0,0 +1,112 @@
+/**
+ * Provides a stateful means of managing placeholders in text.
+ *
+ * Placeholders are numbers prefixed with the `$` character (e.g. `$1`).
+ * Each number value represents the order in which a placeholder should
+ * receive focus if multiple placeholders exist.
+ *
+ * Example scenario given `sum($3 offset $1) by($2)`:
+ * 1. `sum( offset |) by()`
+ * 2. `sum( offset 1h) by(|)`
+ * 3. `sum(| offset 1h) by (label)`
+ */
+export default class PlaceholdersBuffer {
+  private nextMoveOffset: number;
+  private orders: number[];
+  private parts: string[];
+
+  constructor(text: string) {
+    const result = this.parse(text);
+    const nextPlaceholderIndex = result.orders.length ? result.orders[0] : 0;
+    this.nextMoveOffset = this.getOffsetBetween(result.parts, 0, nextPlaceholderIndex);
+    this.orders = result.orders;
+    this.parts = result.parts;
+  }
+
+  clearPlaceholders() {
+    this.nextMoveOffset = 0;
+    this.orders = [];
+  }
+
+  getNextMoveOffset(): number {
+    return this.nextMoveOffset;
+  }
+
+  hasPlaceholders(): boolean {
+    return this.orders.length > 0;
+  }
+
+  setNextPlaceholderValue(value: string) {
+    if (this.orders.length === 0) {
+      return;
+    }
+    const currentPlaceholderIndex = this.orders[0];
+    this.parts[currentPlaceholderIndex] = value;
+    this.orders = this.orders.slice(1);
+    if (this.orders.length === 0) {
+      this.nextMoveOffset = 0;
+      return;
+    }
+    const nextPlaceholderIndex = this.orders[0];
+    // Case should never happen but handle it gracefully in case
+    if (currentPlaceholderIndex === nextPlaceholderIndex) {
+      this.nextMoveOffset = 0;
+      return;
+    }
+    const backwardMove = currentPlaceholderIndex > nextPlaceholderIndex;
+    const indices = backwardMove
+      ? { start: nextPlaceholderIndex + 1, end: currentPlaceholderIndex + 1 }
+      : { start: currentPlaceholderIndex + 1, end: nextPlaceholderIndex };
+    this.nextMoveOffset = (backwardMove ? -1 : 1) * this.getOffsetBetween(this.parts, indices.start, indices.end);
+  }
+
+  toString(): string {
+    return this.parts.join('');
+  }
+
+  private getOffsetBetween(parts: string[], startIndex: number, endIndex: number) {
+    return parts.slice(startIndex, endIndex).reduce((offset, part) => offset + part.length, 0);
+  }
+
+  private parse(text: string): ParseResult {
+    const placeholderRegExp = /\$(\d+)/g;
+    const parts = [];
+    const orders = [];
+    let textOffset = 0;
+    while (true) {
+      const match = placeholderRegExp.exec(text);
+      if (!match) {
+        break;
+      }
+      const part = text.slice(textOffset, match.index);
+      parts.push(part);
+      // Accounts for placeholders at text boundaries
+      if (part !== '') {
+        parts.push('');
+      }
+      const order = parseInt(match[1], 10);
+      orders.push({ index: parts.length - 1, order });
+      textOffset += part.length + match.length;
+    }
+    // Ensures string serialisation still works if no placeholders were parsed
+    // and also accounts for the remainder of text with placeholders
+    parts.push(text.slice(textOffset));
+    return {
+      // Placeholder values do not necessarily appear sequentially so sort the
+      // indices to traverse in priority order
+      orders: orders.sort((o1, o2) => o1.order - o2.order).map(o => o.index),
+      parts,
+    };
+  }
+}
+
+type ParseResult = {
+  /**
+   * Indices to placeholder items in `parts` in traversal order.
+   */
+  orders: number[];
+  /**
+   * Parts comprising the original text with placeholders occupying distinct items.
+   */
+  parts: string[];
+};
diff --git a/public/app/features/explore/PromQueryField.tsx b/public/app/features/explore/PromQueryField.tsx
deleted file mode 100644
index 442e51af987..00000000000
--- a/public/app/features/explore/PromQueryField.tsx
+++ /dev/null
@@ -1,610 +0,0 @@
-import _ from 'lodash';
-import moment from 'moment';
-import React from 'react';
-import { Value } from 'slate';
-import Cascader from 'rc-cascader';
-import PluginPrism from 'slate-prism';
-import Prism from 'prismjs';
-
-// dom also includes Element polyfills
-import { getNextCharacter, getPreviousCousin } from './utils/dom';
-import PrismPromql, { FUNCTIONS } from './slate-plugins/prism/promql';
-import BracesPlugin from './slate-plugins/braces';
-import RunnerPlugin from './slate-plugins/runner';
-import { processLabels, RATE_RANGES, cleanText, parseSelector } from './utils/prometheus';
-
-import TypeaheadField, {
-  Suggestion,
-  SuggestionGroup,
-  TypeaheadInput,
-  TypeaheadFieldState,
-  TypeaheadOutput,
-} from './QueryField';
-
-const DEFAULT_KEYS = ['job', 'instance'];
-const EMPTY_SELECTOR = '{}';
-const HISTOGRAM_GROUP = '__histograms__';
-const HISTOGRAM_SELECTOR = '{le!=""}'; // Returns all timeseries for histograms
-const HISTORY_ITEM_COUNT = 5;
-const HISTORY_COUNT_CUTOFF = 1000 * 60 * 60 * 24; // 24h
-const METRIC_MARK = 'metric';
-const PRISM_SYNTAX = 'promql';
-export const RECORDING_RULES_GROUP = '__recording_rules__';
-
-export const wrapLabel = (label: string) => ({ label });
-export const setFunctionMove = (suggestion: Suggestion): Suggestion => {
-  suggestion.move = -1;
-  return suggestion;
-};
-
-// Syntax highlighting
-Prism.languages[PRISM_SYNTAX] = PrismPromql;
-function setPrismTokens(language, field, values, alias = 'variable') {
-  Prism.languages[language][field] = {
-    alias,
-    pattern: new RegExp(`(?:^|\\s)(${values.join('|')})(?:$|\\s)`),
-  };
-}
-
-export function addHistoryMetadata(item: Suggestion, history: any[]): Suggestion {
-  const cutoffTs = Date.now() - HISTORY_COUNT_CUTOFF;
-  const historyForItem = history.filter(h => h.ts > cutoffTs && h.query === item.label);
-  const count = historyForItem.length;
-  const recent = historyForItem[0];
-  let hint = `Queried ${count} times in the last 24h.`;
-  if (recent) {
-    const lastQueried = moment(recent.ts).fromNow();
-    hint = `${hint} Last queried ${lastQueried}.`;
-  }
-  return {
-    ...item,
-    documentation: hint,
-  };
-}
-
-export function groupMetricsByPrefix(metrics: string[], delimiter = '_'): CascaderOption[] {
-  // Filter out recording rules and insert as first option
-  const ruleRegex = /:\w+:/;
-  const ruleNames = metrics.filter(metric => ruleRegex.test(metric));
-  const rulesOption = {
-    label: 'Recording rules',
-    value: RECORDING_RULES_GROUP,
-    children: ruleNames
-      .slice()
-      .sort()
-      .map(name => ({ label: name, value: name })),
-  };
-
-  const options = ruleNames.length > 0 ? [rulesOption] : [];
-
-  const metricsOptions = _.chain(metrics)
-    .filter(metric => !ruleRegex.test(metric))
-    .groupBy(metric => metric.split(delimiter)[0])
-    .map((metricsForPrefix: string[], prefix: string): CascaderOption => {
-      const prefixIsMetric = metricsForPrefix.length === 1 && metricsForPrefix[0] === prefix;
-      const children = prefixIsMetric ? [] : metricsForPrefix.sort().map(m => ({ label: m, value: m }));
-      return {
-        children,
-        label: prefix,
-        value: prefix,
-      };
-    })
-    .sortBy('label')
-    .value();
-
-  return [...options, ...metricsOptions];
-}
-
-export function willApplySuggestion(
-  suggestion: string,
-  { typeaheadContext, typeaheadText }: TypeaheadFieldState
-): string {
-  // Modify suggestion based on context
-  switch (typeaheadContext) {
-    case 'context-labels': {
-      const nextChar = getNextCharacter();
-      if (!nextChar || nextChar === '}' || nextChar === ',') {
-        suggestion += '=';
-      }
-      break;
-    }
-
-    case 'context-label-values': {
-      // Always add quotes and remove existing ones instead
-      if (!typeaheadText.match(/^(!?=~?"|")/)) {
-        suggestion = `"${suggestion}`;
-      }
-      if (getNextCharacter() !== '"') {
-        suggestion = `${suggestion}"`;
-      }
-      break;
-    }
-
-    default:
-  }
-  return suggestion;
-}
-
-interface CascaderOption {
-  label: string;
-  value: string;
-  children?: CascaderOption[];
-  disabled?: boolean;
-}
-
-interface PromQueryFieldProps {
-  error?: string;
-  hint?: any;
-  histogramMetrics?: string[];
-  history?: any[];
-  initialQuery?: string | null;
-  labelKeys?: { [index: string]: string[] }; // metric -> [labelKey,...]
-  labelValues?: { [index: string]: { [index: string]: string[] } }; // metric -> labelKey -> [labelValue,...]
-  metrics?: string[];
-  metricsByPrefix?: CascaderOption[];
-  onClickHintFix?: (action: any) => void;
-  onPressEnter?: () => void;
-  onQueryChange?: (value: string, override?: boolean) => void;
-  portalOrigin?: string;
-  request?: (url: string) => any;
-  supportsLogs?: boolean; // To be removed after Logging gets its own query field
-}
-
-interface PromQueryFieldState {
-  histogramMetrics: string[];
-  labelKeys: { [index: string]: string[] }; // metric -> [labelKey,...]
-  labelValues: { [index: string]: { [index: string]: string[] } }; // metric -> labelKey -> [labelValue,...]
-  logLabelOptions: any[];
-  metrics: string[];
-  metricsOptions: any[];
-  metricsByPrefix: CascaderOption[];
-  syntaxLoaded: boolean;
-}
-
-interface PromTypeaheadInput {
-  text: string;
-  prefix: string;
-  wrapperClasses: string[];
-  labelKey?: string;
-  value?: Value;
-}
-
-class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryFieldState> {
-  plugins: any[];
-
-  constructor(props: PromQueryFieldProps, context) {
-    super(props, context);
-
-    this.plugins = [
-      BracesPlugin(),
-      RunnerPlugin({ handler: props.onPressEnter }),
-      PluginPrism({
-        onlyIn: node => node.type === 'code_block',
-        getSyntax: node => 'promql',
-      }),
-    ];
-
-    this.state = {
-      histogramMetrics: props.histogramMetrics || [],
-      labelKeys: props.labelKeys || {},
-      labelValues: props.labelValues || {},
-      logLabelOptions: [],
-      metrics: props.metrics || [],
-      metricsByPrefix: props.metricsByPrefix || [],
-      metricsOptions: [],
-      syntaxLoaded: false,
-    };
-  }
-
-  componentDidMount() {
-    // Temporarily reused by logging
-    const { supportsLogs } = this.props;
-    if (supportsLogs) {
-      this.fetchLogLabels();
-    } else {
-      // Usual actions
-      this.fetchMetricNames();
-      this.fetchHistogramMetrics();
-    }
-  }
-
-  onChangeLogLabels = (values: string[], selectedOptions: CascaderOption[]) => {
-    let query;
-    if (selectedOptions.length === 1) {
-      if (selectedOptions[0].children.length === 0) {
-        query = selectedOptions[0].value;
-      } else {
-        // Ignore click on group
-        return;
-      }
-    } else {
-      const key = selectedOptions[0].value;
-      const value = selectedOptions[1].value;
-      query = `{${key}="${value}"}`;
-    }
-    this.onChangeQuery(query, true);
-  };
-
-  onChangeMetrics = (values: string[], selectedOptions: CascaderOption[]) => {
-    let query;
-    if (selectedOptions.length === 1) {
-      if (selectedOptions[0].children.length === 0) {
-        query = selectedOptions[0].value;
-      } else {
-        // Ignore click on group
-        return;
-      }
-    } else {
-      const prefix = selectedOptions[0].value;
-      const metric = selectedOptions[1].value;
-      if (prefix === HISTOGRAM_GROUP) {
-        query = `histogram_quantile(0.95, sum(rate(${metric}[5m])) by (le))`;
-      } else {
-        query = metric;
-      }
-    }
-    this.onChangeQuery(query, true);
-  };
-
-  onChangeQuery = (value: string, override?: boolean) => {
-    // Send text change to parent
-    const { onQueryChange } = this.props;
-    if (onQueryChange) {
-      onQueryChange(value, override);
-    }
-  };
-
-  onClickHintFix = () => {
-    const { hint, onClickHintFix } = this.props;
-    if (onClickHintFix && hint && hint.fix) {
-      onClickHintFix(hint.fix.action);
-    }
-  };
-
-  onReceiveMetrics = () => {
-    const { histogramMetrics, metrics, metricsByPrefix } = this.state;
-    if (!metrics) {
-      return;
-    }
-
-    // Update global prism config
-    setPrismTokens(PRISM_SYNTAX, METRIC_MARK, metrics);
-
-    // Build metrics tree
-    const histogramOptions = histogramMetrics.map(hm => ({ label: hm, value: hm }));
-    const metricsOptions = [
-      { label: 'Histograms', value: HISTOGRAM_GROUP, children: histogramOptions },
-      ...metricsByPrefix,
-    ];
-
-    this.setState({ metricsOptions, syntaxLoaded: true });
-  };
-
-  onTypeahead = (typeahead: TypeaheadInput): TypeaheadOutput => {
-    const { prefix, text, value, wrapperNode } = typeahead;
-
-    // Get DOM-dependent context
-    const wrapperClasses = Array.from(wrapperNode.classList);
-    const labelKeyNode = getPreviousCousin(wrapperNode, '.attr-name');
-    const labelKey = labelKeyNode && labelKeyNode.textContent;
-    const nextChar = getNextCharacter();
-
-    const result = this.getTypeahead({ text, value, prefix, wrapperClasses, labelKey });
-
-    console.log('handleTypeahead', wrapperClasses, text, prefix, nextChar, labelKey, result.context);
-
-    return result;
-  };
-
-  // Keep this DOM-free for testing
-  getTypeahead({ prefix, wrapperClasses, text }: PromTypeaheadInput): TypeaheadOutput {
-    // Syntax spans have 3 classes by default. More indicate a recognized token
-    const tokenRecognized = wrapperClasses.length > 3;
-    // Determine candidates by CSS context
-    if (_.includes(wrapperClasses, 'context-range')) {
-      // Suggestions for metric[|]
-      return this.getRangeTypeahead();
-    } else if (_.includes(wrapperClasses, 'context-labels')) {
-      // Suggestions for metric{|} and metric{foo=|}, as well as metric-independent label queries like {|}
-      return this.getLabelTypeahead.apply(this, arguments);
-    } else if (_.includes(wrapperClasses, 'context-aggregation')) {
-      return this.getAggregationTypeahead.apply(this, arguments);
-    } else if (
-      // Show default suggestions in a couple of scenarios
-      (prefix && !tokenRecognized) || // Non-empty prefix, but not inside known token
-      (prefix === '' && !text.match(/^[\]})\s]+$/)) || // Empty prefix, but not following a closing brace
-      text.match(/[+\-*/^%]/) // Anything after binary operator
-    ) {
-      return this.getEmptyTypeahead();
-    }
-
-    return {
-      suggestions: [],
-    };
-  }
-
-  getEmptyTypeahead(): TypeaheadOutput {
-    const { history } = this.props;
-    const { metrics } = this.state;
-    const suggestions: SuggestionGroup[] = [];
-
-    if (history && history.length > 0) {
-      const historyItems = _.chain(history)
-        .uniqBy('query')
-        .take(HISTORY_ITEM_COUNT)
-        .map(h => h.query)
-        .map(wrapLabel)
-        .map(item => addHistoryMetadata(item, history))
-        .value();
-
-      suggestions.push({
-        prefixMatch: true,
-        skipSort: true,
-        label: 'History',
-        items: historyItems,
-      });
-    }
-
-    suggestions.push({
-      prefixMatch: true,
-      label: 'Functions',
-      items: FUNCTIONS.map(setFunctionMove),
-    });
-
-    if (metrics) {
-      suggestions.push({
-        label: 'Metrics',
-        items: metrics.map(wrapLabel),
-      });
-    }
-    return { suggestions };
-  }
-
-  getRangeTypeahead(): TypeaheadOutput {
-    return {
-      context: 'context-range',
-      suggestions: [
-        {
-          label: 'Range vector',
-          items: [...RATE_RANGES].map(wrapLabel),
-        },
-      ],
-    };
-  }
-
-  getAggregationTypeahead({ value }: PromTypeaheadInput): TypeaheadOutput {
-    let refresher: Promise<any> = null;
-    const suggestions: SuggestionGroup[] = [];
-
-    // sum(foo{bar="1"}) by (|)
-    const line = value.anchorBlock.getText();
-    const cursorOffset: number = value.anchorOffset;
-    // sum(foo{bar="1"}) by (
-    const leftSide = line.slice(0, cursorOffset);
-    const openParensAggregationIndex = leftSide.lastIndexOf('(');
-    const openParensSelectorIndex = leftSide.slice(0, openParensAggregationIndex).lastIndexOf('(');
-    const closeParensSelectorIndex = leftSide.slice(openParensSelectorIndex).indexOf(')') + openParensSelectorIndex;
-    // foo{bar="1"}
-    const selectorString = leftSide.slice(openParensSelectorIndex + 1, closeParensSelectorIndex);
-    const selector = parseSelector(selectorString, selectorString.length - 2).selector;
-
-    const labelKeys = this.state.labelKeys[selector];
-    if (labelKeys) {
-      suggestions.push({ label: 'Labels', items: labelKeys.map(wrapLabel) });
-    } else {
-      refresher = this.fetchSeriesLabels(selector);
-    }
-
-    return {
-      refresher,
-      suggestions,
-      context: 'context-aggregation',
-    };
-  }
-
-  getLabelTypeahead({ text, wrapperClasses, labelKey, value }: PromTypeaheadInput): TypeaheadOutput {
-    let context: string;
-    let refresher: Promise<any> = null;
-    const suggestions: SuggestionGroup[] = [];
-    const line = value.anchorBlock.getText();
-    const cursorOffset: number = value.anchorOffset;
-
-    // Get normalized selector
-    let selector;
-    let parsedSelector;
-    try {
-      parsedSelector = parseSelector(line, cursorOffset);
-      selector = parsedSelector.selector;
-    } catch {
-      selector = EMPTY_SELECTOR;
-    }
-    const containsMetric = selector.indexOf('__name__=') > -1;
-    const existingKeys = parsedSelector ? parsedSelector.labelKeys : [];
-
-    if ((text && text.match(/^!?=~?/)) || _.includes(wrapperClasses, 'attr-value')) {
-      // Label values
-      if (labelKey && this.state.labelValues[selector] && this.state.labelValues[selector][labelKey]) {
-        const labelValues = this.state.labelValues[selector][labelKey];
-        context = 'context-label-values';
-        suggestions.push({
-          label: `Label values for "${labelKey}"`,
-          items: labelValues.map(wrapLabel),
-        });
-      }
-    } else {
-      // Label keys
-      const labelKeys = this.state.labelKeys[selector] || (containsMetric ? null : DEFAULT_KEYS);
-      if (labelKeys) {
-        const possibleKeys = _.difference(labelKeys, existingKeys);
-        if (possibleKeys.length > 0) {
-          context = 'context-labels';
-          suggestions.push({ label: `Labels`, items: possibleKeys.map(wrapLabel) });
-        }
-      }
-    }
-
-    // Query labels for selector
-    // Temporarily add skip for logging
-    if (selector && !this.state.labelValues[selector] && !this.props.supportsLogs) {
-      if (selector === EMPTY_SELECTOR) {
-        // Query label values for default labels
-        refresher = Promise.all(DEFAULT_KEYS.map(key => this.fetchLabelValues(key)));
-      } else {
-        refresher = this.fetchSeriesLabels(selector, !containsMetric);
-      }
-    }
-
-    return { context, refresher, suggestions };
-  }
-
-  request = url => {
-    if (this.props.request) {
-      return this.props.request(url);
-    }
-    return fetch(url);
-  };
-
-  fetchHistogramMetrics() {
-    this.fetchSeriesLabels(HISTOGRAM_SELECTOR, true, () => {
-      const histogramSeries = this.state.labelValues[HISTOGRAM_SELECTOR];
-      if (histogramSeries && histogramSeries['__name__']) {
-        const histogramMetrics = histogramSeries['__name__'].slice().sort();
-        this.setState({ histogramMetrics }, this.onReceiveMetrics);
-      }
-    });
-  }
-
-  // Temporarily here while reusing this field for logging
-  async fetchLogLabels() {
-    const url = '/api/prom/label';
-    try {
-      const res = await this.request(url);
-      const body = await (res.data || res.json());
-      const labelKeys = body.data.slice().sort();
-      const labelKeysBySelector = {
-        ...this.state.labelKeys,
-        [EMPTY_SELECTOR]: labelKeys,
-      };
-      const labelValuesByKey = {};
-      const logLabelOptions = [];
-      for (const key of labelKeys) {
-        const valuesUrl = `/api/prom/label/${key}/values`;
-        const res = await this.request(valuesUrl);
-        const body = await (res.data || res.json());
-        const values = body.data.slice().sort();
-        labelValuesByKey[key] = values;
-        logLabelOptions.push({
-          label: key,
-          value: key,
-          children: values.map(value => ({ label: value, value })),
-        });
-      }
-      const labelValues = { [EMPTY_SELECTOR]: labelValuesByKey };
-      this.setState({ labelKeys: labelKeysBySelector, labelValues, logLabelOptions });
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  async fetchLabelValues(key: string) {
-    const url = `/api/v1/label/${key}/values`;
-    try {
-      const res = await this.request(url);
-      const body = await (res.data || res.json());
-      const exisingValues = this.state.labelValues[EMPTY_SELECTOR];
-      const values = {
-        ...exisingValues,
-        [key]: body.data,
-      };
-      const labelValues = {
-        ...this.state.labelValues,
-        [EMPTY_SELECTOR]: values,
-      };
-      this.setState({ labelValues });
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  async fetchSeriesLabels(name: string, withName?: boolean, callback?: () => void) {
-    const url = `/api/v1/series?match[]=${name}`;
-    try {
-      const res = await this.request(url);
-      const body = await (res.data || res.json());
-      const { keys, values } = processLabels(body.data, withName);
-      const labelKeys = {
-        ...this.state.labelKeys,
-        [name]: keys,
-      };
-      const labelValues = {
-        ...this.state.labelValues,
-        [name]: values,
-      };
-      this.setState({ labelKeys, labelValues }, callback);
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  async fetchMetricNames() {
-    const url = '/api/v1/label/__name__/values';
-    try {
-      const res = await this.request(url);
-      const body = await (res.data || res.json());
-      const metrics = body.data;
-      const metricsByPrefix = groupMetricsByPrefix(metrics);
-      this.setState({ metrics, metricsByPrefix }, this.onReceiveMetrics);
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  render() {
-    const { error, hint, initialQuery, supportsLogs } = this.props;
-    const { logLabelOptions, metricsOptions, syntaxLoaded } = this.state;
-
-    return (
-      <div className="prom-query-field">
-        <div className="prom-query-field-tools">
-          {supportsLogs ? (
-            <Cascader options={logLabelOptions} onChange={this.onChangeLogLabels}>
-              <button className="btn navbar-button navbar-button--tight">Log labels</button>
-            </Cascader>
-          ) : (
-            <Cascader options={metricsOptions} onChange={this.onChangeMetrics}>
-              <button className="btn navbar-button navbar-button--tight">Metrics</button>
-            </Cascader>
-          )}
-        </div>
-        <div className="prom-query-field-wrapper">
-          <div className="slate-query-field-wrapper">
-            <TypeaheadField
-              additionalPlugins={this.plugins}
-              cleanText={cleanText}
-              initialValue={initialQuery}
-              onTypeahead={this.onTypeahead}
-              onWillApplySuggestion={willApplySuggestion}
-              onValueChanged={this.onChangeQuery}
-              placeholder="Enter a PromQL query"
-              portalOrigin="prometheus"
-              syntaxLoaded={syntaxLoaded}
-            />
-          </div>
-          {error ? <div className="prom-query-field-info text-error">{error}</div> : null}
-          {hint ? (
-            <div className="prom-query-field-info text-warning">
-              {hint.label}{' '}
-              {hint.fix ? (
-                <a className="text-link muted" onClick={this.onClickHintFix}>
-                  {hint.fix.label}
-                </a>
-              ) : null}
-            </div>
-          ) : null}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default PromQueryField;
diff --git a/public/app/features/explore/QueryField.tsx b/public/app/features/explore/QueryField.tsx
index ce0bcd71ed0..73d743fe8e6 100644
--- a/public/app/features/explore/QueryField.tsx
+++ b/public/app/features/explore/QueryField.tsx
@@ -5,96 +5,29 @@ import { Change, Value } from 'slate';
 import { Editor } from 'slate-react';
 import Plain from 'slate-plain-serializer';
 
+import { CompletionItem, CompletionItemGroup, TypeaheadOutput } from 'app/types/explore';
+
 import ClearPlugin from './slate-plugins/clear';
 import NewlinePlugin from './slate-plugins/newline';
 
 import Typeahead from './Typeahead';
 import { makeFragment, makeValue } from './Value';
+import PlaceholdersBuffer from './PlaceholdersBuffer';
 
 export const TYPEAHEAD_DEBOUNCE = 100;
 
-function getSuggestionByIndex(suggestions: SuggestionGroup[], index: number): Suggestion {
+function getSuggestionByIndex(suggestions: CompletionItemGroup[], index: number): CompletionItem {
   // Flatten suggestion groups
   const flattenedSuggestions = suggestions.reduce((acc, g) => acc.concat(g.items), []);
   const correctedIndex = Math.max(index, 0) % flattenedSuggestions.length;
   return flattenedSuggestions[correctedIndex];
 }
 
-function hasSuggestions(suggestions: SuggestionGroup[]): boolean {
+function hasSuggestions(suggestions: CompletionItemGroup[]): boolean {
   return suggestions && suggestions.length > 0;
 }
 
-export interface Suggestion {
-  /**
-   * The label of this completion item. By default
-   * this is also the text that is inserted when selecting
-   * this completion.
-   */
-  label: string;
-  /**
-   * The kind of this completion item. Based on the kind
-   * an icon is chosen by the editor.
-   */
-  kind?: string;
-  /**
-   * A human-readable string with additional information
-   * about this item, like type or symbol information.
-   */
-  detail?: string;
-  /**
-   * A human-readable string, can be Markdown, that represents a doc-comment.
-   */
-  documentation?: string;
-  /**
-   * A string that should be used when comparing this item
-   * with other items. When `falsy` the `label` is used.
-   */
-  sortText?: string;
-  /**
-   * A string that should be used when filtering a set of
-   * completion items. When `falsy` the `label` is used.
-   */
-  filterText?: string;
-  /**
-   * A string or snippet that should be inserted in a document when selecting
-   * this completion. When `falsy` the `label` is used.
-   */
-  insertText?: string;
-  /**
-   * Delete number of characters before the caret position,
-   * by default the letters from the beginning of the word.
-   */
-  deleteBackwards?: number;
-  /**
-   * Number of steps to move after the insertion, can be negative.
-   */
-  move?: number;
-}
-
-export interface SuggestionGroup {
-  /**
-   * Label that will be displayed for all entries of this group.
-   */
-  label: string;
-  /**
-   * List of suggestions of this group.
-   */
-  items: Suggestion[];
-  /**
-   * If true, match only by prefix (and not mid-word).
-   */
-  prefixMatch?: boolean;
-  /**
-   * If true, do not filter items in this group based on the search.
-   */
-  skipFilter?: boolean;
-  /**
-   * If true, do not sort items.
-   */
-  skipSort?: boolean;
-}
-
-interface TypeaheadFieldProps {
+interface QueryFieldProps {
   additionalPlugins?: any[];
   cleanText?: (text: string) => string;
   initialValue: string | null;
@@ -102,15 +35,15 @@ interface TypeaheadFieldProps {
   onFocus?: () => void;
   onTypeahead?: (typeahead: TypeaheadInput) => TypeaheadOutput;
   onValueChanged?: (value: Value) => void;
-  onWillApplySuggestion?: (suggestion: string, state: TypeaheadFieldState) => string;
+  onWillApplySuggestion?: (suggestion: string, state: QueryFieldState) => string;
   placeholder?: string;
   portalOrigin?: string;
   syntax?: string;
   syntaxLoaded?: boolean;
 }
 
-export interface TypeaheadFieldState {
-  suggestions: SuggestionGroup[];
+export interface QueryFieldState {
+  suggestions: CompletionItemGroup[];
   typeaheadContext: string | null;
   typeaheadIndex: number;
   typeaheadPrefix: string;
@@ -127,22 +60,19 @@ export interface TypeaheadInput {
   wrapperNode: Element;
 }
 
-export interface TypeaheadOutput {
-  context?: string;
-  refresher?: Promise<{}>;
-  suggestions: SuggestionGroup[];
-}
-
-class QueryField extends React.PureComponent<TypeaheadFieldProps, TypeaheadFieldState> {
+export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldState> {
   menuEl: HTMLElement | null;
+  placeholdersBuffer: PlaceholdersBuffer;
   plugins: any[];
   resetTimer: any;
 
   constructor(props, context) {
     super(props, context);
 
+    this.placeholdersBuffer = new PlaceholdersBuffer(props.initialValue || '');
+
     // Base plugins
-    this.plugins = [ClearPlugin(), NewlinePlugin(), ...props.additionalPlugins];
+    this.plugins = [ClearPlugin(), NewlinePlugin(), ...props.additionalPlugins].filter(p => p);
 
     this.state = {
       suggestions: [],
@@ -150,7 +80,7 @@ class QueryField extends React.PureComponent<TypeaheadFieldProps, TypeaheadField
       typeaheadIndex: 0,
       typeaheadPrefix: '',
       typeaheadText: '',
-      value: makeValue(props.initialValue || '', props.syntax),
+      value: makeValue(this.placeholdersBuffer.toString(), props.syntax),
     };
   }
 
@@ -172,15 +102,17 @@ class QueryField extends React.PureComponent<TypeaheadFieldProps, TypeaheadField
     }
   }
 
-  componentWillReceiveProps(nextProps: TypeaheadFieldProps) {
+  componentWillReceiveProps(nextProps: QueryFieldProps) {
     if (nextProps.syntaxLoaded && !this.props.syntaxLoaded) {
       // Need a bogus edit to re-render the editor after syntax has fully loaded
-      this.onChange(
-        this.state.value
-          .change()
-          .insertText(' ')
-          .deleteBackward()
-      );
+      const change = this.state.value
+        .change()
+        .insertText(' ')
+        .deleteBackward();
+      if (this.placeholdersBuffer.hasPlaceholders()) {
+        change.move(this.placeholdersBuffer.getNextMoveOffset()).focus();
+      }
+      this.onChange(change);
     }
   }
 
@@ -293,7 +225,7 @@ class QueryField extends React.PureComponent<TypeaheadFieldProps, TypeaheadField
     }
   }, TYPEAHEAD_DEBOUNCE);
 
-  applyTypeahead(change: Change, suggestion: Suggestion): Change {
+  applyTypeahead(change: Change, suggestion: CompletionItem): Change {
     const { cleanText, onWillApplySuggestion, syntax } = this.props;
     const { typeaheadPrefix, typeaheadText } = this.state;
     let suggestionText = suggestion.insertText || suggestion.label;
@@ -363,7 +295,17 @@ class QueryField extends React.PureComponent<TypeaheadFieldProps, TypeaheadField
           }
 
           const suggestion = getSuggestionByIndex(suggestions, typeaheadIndex);
-          this.applyTypeahead(change, suggestion);
+          const nextChange = this.applyTypeahead(change, suggestion);
+
+          const insertTextOperation = nextChange.operations.find(operation => operation.type === 'insert_text');
+          if (insertTextOperation) {
+            const suggestionText = insertTextOperation.text;
+            this.placeholdersBuffer.setNextPlaceholderValue(suggestionText);
+            if (this.placeholdersBuffer.hasPlaceholders()) {
+              nextChange.move(this.placeholdersBuffer.getNextMoveOffset()).focus();
+            }
+          }
+
           return true;
         }
         break;
@@ -410,6 +352,8 @@ class QueryField extends React.PureComponent<TypeaheadFieldProps, TypeaheadField
     // If we dont wait here, menu clicks wont work because the menu
     // will be gone.
     this.resetTimer = setTimeout(this.resetTypeahead, 100);
+    // Disrupting placeholder entry wipes all remaining placeholders needing input
+    this.placeholdersBuffer.clearPlaceholders();
     if (onBlur) {
       onBlur();
     }
@@ -422,7 +366,7 @@ class QueryField extends React.PureComponent<TypeaheadFieldProps, TypeaheadField
     }
   };
 
-  onClickMenu = (item: Suggestion) => {
+  onClickMenu = (item: CompletionItem) => {
     // Manually triggering change
     const change = this.applyTypeahead(this.state.value.change(), item);
     this.onChange(change);
@@ -490,19 +434,21 @@ class QueryField extends React.PureComponent<TypeaheadFieldProps, TypeaheadField
 
   render() {
     return (
-      <div className="slate-query-field">
-        {this.renderMenu()}
-        <Editor
-          autoCorrect={false}
-          onBlur={this.handleBlur}
-          onKeyDown={this.onKeyDown}
-          onChange={this.onChange}
-          onFocus={this.handleFocus}
-          placeholder={this.props.placeholder}
-          plugins={this.plugins}
-          spellCheck={false}
-          value={this.state.value}
-        />
+      <div className="slate-query-field-wrapper">
+        <div className="slate-query-field">
+          {this.renderMenu()}
+          <Editor
+            autoCorrect={false}
+            onBlur={this.handleBlur}
+            onKeyDown={this.onKeyDown}
+            onChange={this.onChange}
+            onFocus={this.handleFocus}
+            placeholder={this.props.placeholder}
+            plugins={this.plugins}
+            spellCheck={false}
+            value={this.state.value}
+          />
+        </div>
       </div>
     );
   }
diff --git a/public/app/features/explore/QueryRows.tsx b/public/app/features/explore/QueryRows.tsx
index 0b0d7085d2d..4aacdb22599 100644
--- a/public/app/features/explore/QueryRows.tsx
+++ b/public/app/features/explore/QueryRows.tsx
@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
 
-import { QueryTransaction } from 'app/types/explore';
+import { QueryTransaction, HistoryItem, Query, QueryHint } from 'app/types/explore';
 
-// TODO make this datasource-plugin-dependent
-import QueryField from './PromQueryField';
-import QueryTransactions from './QueryTransactions';
+import DefaultQueryField from './QueryField';
+import QueryTransactionStatus from './QueryTransactionStatus';
+import { DataSource } from 'app/types';
 
-function getFirstHintFromTransactions(transactions: QueryTransaction[]) {
+function getFirstHintFromTransactions(transactions: QueryTransaction[]): QueryHint {
   const transaction = transactions.find(qt => qt.hints && qt.hints.length > 0);
   if (transaction) {
     return transaction.hints[0];
@@ -14,7 +14,28 @@ function getFirstHintFromTransactions(transactions: QueryTransaction[]) {
   return undefined;
 }
 
-class QueryRow extends PureComponent<any, {}> {
+interface QueryRowEventHandlers {
+  onAddQueryRow: (index: number) => void;
+  onChangeQuery: (value: string, index: number, override?: boolean) => void;
+  onClickHintFix: (action: object, index?: number) => void;
+  onExecuteQuery: () => void;
+  onRemoveQueryRow: (index: number) => void;
+}
+
+interface QueryRowCommonProps {
+  className?: string;
+  datasource: DataSource;
+  history: HistoryItem[];
+  transactions: QueryTransaction[];
+}
+
+type QueryRowProps = QueryRowCommonProps &
+  QueryRowEventHandlers & {
+    index: number;
+    query: string;
+  };
+
+class QueryRow extends PureComponent<QueryRowProps> {
   onChangeQuery = (value, override?: boolean) => {
     const { index, onChangeQuery } = this.props;
     if (onChangeQuery) {
@@ -55,17 +76,19 @@ class QueryRow extends PureComponent<any, {}> {
   };
 
   render() {
-    const { history, query, request, supportsLogs, transactions } = this.props;
-    const transactionWithError = transactions.find(t => t.error);
+    const { datasource, history, query, transactions } = this.props;
+    const transactionWithError = transactions.find(t => t.error !== undefined);
     const hint = getFirstHintFromTransactions(transactions);
     const queryError = transactionWithError ? transactionWithError.error : null;
+    const QueryField = datasource.pluginExports.ExploreQueryField || DefaultQueryField;
     return (
       <div className="query-row">
         <div className="query-row-status">
-          <QueryTransactions transactions={transactions} />
+          <QueryTransactionStatus transactions={transactions} />
         </div>
         <div className="query-row-field">
           <QueryField
+            datasource={datasource}
             error={queryError}
             hint={hint}
             initialQuery={query}
@@ -73,8 +96,6 @@ class QueryRow extends PureComponent<any, {}> {
             onClickHintFix={this.onClickHintFix}
             onPressEnter={this.onPressEnter}
             onQueryChange={this.onChangeQuery}
-            request={request}
-            supportsLogs={supportsLogs}
           />
         </div>
         <div className="query-row-tools">
@@ -93,9 +114,14 @@ class QueryRow extends PureComponent<any, {}> {
   }
 }
 
-export default class QueryRows extends PureComponent<any, {}> {
+type QueryRowsProps = QueryRowCommonProps &
+  QueryRowEventHandlers & {
+    queries: Query[];
+  };
+
+export default class QueryRows extends PureComponent<QueryRowsProps> {
   render() {
-    const { className = '', queries, queryHints, transactions, ...handlers } = this.props;
+    const { className = '', queries, transactions, ...handlers } = this.props;
     return (
       <div className={className}>
         {queries.map((q, index) => (
diff --git a/public/app/features/explore/QueryTransactions.tsx b/public/app/features/explore/QueryTransactionStatus.tsx
similarity index 60%
rename from public/app/features/explore/QueryTransactions.tsx
rename to public/app/features/explore/QueryTransactionStatus.tsx
index 0ce721f14e7..77a50b7d2ca 100644
--- a/public/app/features/explore/QueryTransactions.tsx
+++ b/public/app/features/explore/QueryTransactionStatus.tsx
@@ -1,17 +1,17 @@
 import React, { PureComponent } from 'react';
 
-import { QueryTransaction as QueryTransactionModel } from 'app/types/explore';
+import { QueryTransaction } from 'app/types/explore';
 import ElapsedTime from './ElapsedTime';
 
 function formatLatency(value) {
   return `${(value / 1000).toFixed(1)}s`;
 }
 
-interface QueryTransactionProps {
-  transaction: QueryTransactionModel;
+interface QueryTransactionStatusItemProps {
+  transaction: QueryTransaction;
 }
 
-class QueryTransaction extends PureComponent<QueryTransactionProps> {
+class QueryTransactionStatusItem extends PureComponent<QueryTransactionStatusItemProps> {
   render() {
     const { transaction } = this.props;
     const className = transaction.done ? 'query-transaction' : 'query-transaction query-transaction--loading';
@@ -26,16 +26,16 @@ class QueryTransaction extends PureComponent<QueryTransactionProps> {
   }
 }
 
-interface QueryTransactionsProps {
-  transactions: QueryTransactionModel[];
+interface QueryTransactionStatusProps {
+  transactions: QueryTransaction[];
 }
 
-export default class QueryTransactions extends PureComponent<QueryTransactionsProps> {
+export default class QueryTransactionStatus extends PureComponent<QueryTransactionStatusProps> {
   render() {
     const { transactions } = this.props;
     return (
       <div className="query-transactions">
-        {transactions.map((t, i) => <QueryTransaction key={`${t.query}:${t.resultType}`} transaction={t} />)}
+        {transactions.map((t, i) => <QueryTransactionStatusItem key={`${t.query}:${t.resultType}`} transaction={t} />)}
       </div>
     );
   }
diff --git a/public/app/features/explore/Table.tsx b/public/app/features/explore/Table.tsx
index 0264bd3b4cc..4946a6a505d 100644
--- a/public/app/features/explore/Table.tsx
+++ b/public/app/features/explore/Table.tsx
@@ -21,10 +21,16 @@ function prepareRows(rows, columnNames) {
 export default class Table extends PureComponent<TableProps> {
   getCellProps = (state, rowInfo, column) => {
     return {
-      onClick: () => {
-        const columnKey = column.Header;
-        const rowValue = rowInfo.row[columnKey];
-        this.props.onClickCell(columnKey, rowValue);
+      onClick: (e: React.SyntheticEvent) => {
+        // Only handle click on link, not the cell
+        if (e.target) {
+          const link = e.target as HTMLElement;
+          if (link.className === 'link') {
+            const columnKey = column.Header;
+            const rowValue = rowInfo.row[columnKey];
+            this.props.onClickCell(columnKey, rowValue);
+          }
+        }
       },
     };
   };
diff --git a/public/app/features/explore/TimePicker.test.tsx b/public/app/features/explore/TimePicker.test.tsx
index afe6b092901..cadcfbb668c 100644
--- a/public/app/features/explore/TimePicker.test.tsx
+++ b/public/app/features/explore/TimePicker.test.tsx
@@ -33,8 +33,8 @@ describe('<TimePicker />', () => {
       to: '1000',
     };
     const rangeString = rangeUtil.describeTimeRange({
-      from: parseTime(range.from),
-      to: parseTime(range.to),
+      from: parseTime(range.from, true),
+      to: parseTime(range.to, true),
     });
     const wrapper = shallow(<TimePicker range={range} isUtc isOpen />);
     expect(wrapper.state('fromRaw')).toBe('1970-01-01 00:00:00');
@@ -50,8 +50,8 @@ describe('<TimePicker />', () => {
       to: '4000',
     };
     const rangeString = rangeUtil.describeTimeRange({
-      from: parseTime(range.from),
-      to: parseTime(range.to),
+      from: parseTime(range.from, true),
+      to: parseTime(range.to, true),
     });
 
     const onChangeTime = sinon.spy();
diff --git a/public/app/features/explore/TimePicker.tsx b/public/app/features/explore/TimePicker.tsx
index f9c740073d0..8955fb4aa9b 100644
--- a/public/app/features/explore/TimePicker.tsx
+++ b/public/app/features/explore/TimePicker.tsx
@@ -3,6 +3,7 @@ import moment from 'moment';
 
 import * as dateMath from 'app/core/utils/datemath';
 import * as rangeUtil from 'app/core/utils/rangeutil';
+import { RawTimeRange } from 'app/types/series';
 
 const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 export const DEFAULT_RANGE = {
@@ -10,77 +11,104 @@ export const DEFAULT_RANGE = {
   to: 'now',
 };
 
-export function parseTime(value, isUtc = false, asString = false) {
+/**
+ * Return a human-editable string of either relative (inludes "now") or absolute local time (in the shape of DATE_FORMAT).
+ * @param value Epoch or relative time
+ */
+export function parseTime(value: string, isUtc = false): string {
   if (value.indexOf('now') !== -1) {
     return value;
   }
-  if (!isNaN(value)) {
-    const epoch = parseInt(value, 10);
-    const m = isUtc ? moment.utc(epoch) : moment(epoch);
-    return asString ? m.format(DATE_FORMAT) : m;
+  let time: any = value;
+  // Possible epoch
+  if (!isNaN(time)) {
+    time = parseInt(time, 10);
   }
-  return undefined;
+  time = isUtc ? moment.utc(time) : moment(time);
+  return time.format(DATE_FORMAT);
 }
 
-export default class TimePicker extends PureComponent<any, any> {
+interface TimePickerProps {
+  isOpen?: boolean;
+  isUtc?: boolean;
+  range?: RawTimeRange;
+  onChangeTime?: (Range) => void;
+}
+
+interface TimePickerState {
+  isOpen: boolean;
+  isUtc: boolean;
+  rangeString: string;
+  refreshInterval: string;
+
+  // Input-controlled text, keep these in a shape that is human-editable
+  fromRaw: string;
+  toRaw: string;
+}
+
+export default class TimePicker extends PureComponent<TimePickerProps, TimePickerState> {
   dropdownEl: any;
+
   constructor(props) {
     super(props);
 
-    const fromRaw = props.range ? props.range.from : DEFAULT_RANGE.from;
-    const toRaw = props.range ? props.range.to : DEFAULT_RANGE.to;
+    const from = props.range ? props.range.from : DEFAULT_RANGE.from;
+    const to = props.range ? props.range.to : DEFAULT_RANGE.to;
+
+    // Ensure internal format
+    const fromRaw = parseTime(from, props.isUtc);
+    const toRaw = parseTime(to, props.isUtc);
     const range = {
-      from: parseTime(fromRaw),
-      to: parseTime(toRaw),
+      from: fromRaw,
+      to: toRaw,
     };
+
     this.state = {
-      fromRaw: parseTime(fromRaw, props.isUtc, true),
+      fromRaw,
+      toRaw,
       isOpen: props.isOpen,
       isUtc: props.isUtc,
       rangeString: rangeUtil.describeTimeRange(range),
       refreshInterval: '',
-      toRaw: parseTime(toRaw, props.isUtc, true),
     };
   }
 
-  move(direction) {
+  move(direction: number) {
     const { onChangeTime } = this.props;
     const { fromRaw, toRaw } = this.state;
-    const range = {
-      from: dateMath.parse(fromRaw, false),
-      to: dateMath.parse(toRaw, true),
-    };
+    const from = dateMath.parse(fromRaw, false);
+    const to = dateMath.parse(toRaw, true);
+    const timespan = (to.valueOf() - from.valueOf()) / 2;
 
-    const timespan = (range.to.valueOf() - range.from.valueOf()) / 2;
-    let to, from;
+    let nextTo, nextFrom;
     if (direction === -1) {
-      to = range.to.valueOf() - timespan;
-      from = range.from.valueOf() - timespan;
+      nextTo = to.valueOf() - timespan;
+      nextFrom = from.valueOf() - timespan;
     } else if (direction === 1) {
-      to = range.to.valueOf() + timespan;
-      from = range.from.valueOf() + timespan;
-      if (to > Date.now() && range.to < Date.now()) {
-        to = Date.now();
-        from = range.from.valueOf();
+      nextTo = to.valueOf() + timespan;
+      nextFrom = from.valueOf() + timespan;
+      if (nextTo > Date.now() && to < Date.now()) {
+        nextTo = Date.now();
+        nextFrom = from.valueOf();
       }
     } else {
-      to = range.to.valueOf();
-      from = range.from.valueOf();
+      nextTo = to.valueOf();
+      nextFrom = from.valueOf();
     }
 
-    const rangeString = rangeUtil.describeTimeRange(range);
-    // No need to convert to UTC again
-    to = moment(to);
-    from = moment(from);
+    const nextRange = {
+      from: moment(nextFrom),
+      to: moment(nextTo),
+    };
 
     this.setState(
       {
-        rangeString,
-        fromRaw: from.format(DATE_FORMAT),
-        toRaw: to.format(DATE_FORMAT),
+        rangeString: rangeUtil.describeTimeRange(nextRange),
+        fromRaw: nextRange.from.format(DATE_FORMAT),
+        toRaw: nextRange.to.format(DATE_FORMAT),
       },
       () => {
-        onChangeTime({ to, from });
+        onChangeTime(nextRange);
       }
     );
   }
@@ -99,16 +127,19 @@ export default class TimePicker extends PureComponent<any, any> {
 
   handleClickApply = () => {
     const { onChangeTime } = this.props;
-    const { toRaw, fromRaw } = this.state;
-    const range = {
-      from: dateMath.parse(fromRaw, false),
-      to: dateMath.parse(toRaw, true),
-    };
-    const rangeString = rangeUtil.describeTimeRange(range);
+    let range;
     this.setState(
-      {
-        isOpen: false,
-        rangeString,
+      state => {
+        const { toRaw, fromRaw } = this.state;
+        range = {
+          from: dateMath.parse(fromRaw, false),
+          to: dateMath.parse(toRaw, true),
+        };
+        const rangeString = rangeUtil.describeTimeRange(range);
+        return {
+          isOpen: false,
+          rangeString,
+        };
       },
       () => {
         if (onChangeTime) {
diff --git a/public/app/features/explore/Typeahead.tsx b/public/app/features/explore/Typeahead.tsx
index 0c01cbe01ba..13882e030f6 100644
--- a/public/app/features/explore/Typeahead.tsx
+++ b/public/app/features/explore/Typeahead.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Highlighter from 'react-highlight-words';
 
-import { Suggestion, SuggestionGroup } from './QueryField';
+import { CompletionItem, CompletionItemGroup } from 'app/types/explore';
 
 function scrollIntoView(el: HTMLElement) {
   if (!el || !el.offsetParent) {
@@ -15,12 +15,12 @@ function scrollIntoView(el: HTMLElement) {
 
 interface TypeaheadItemProps {
   isSelected: boolean;
-  item: Suggestion;
+  item: CompletionItem;
   onClickItem: (Suggestion) => void;
   prefix?: string;
 }
 
-class TypeaheadItem extends React.PureComponent<TypeaheadItemProps, {}> {
+class TypeaheadItem extends React.PureComponent<TypeaheadItemProps> {
   el: HTMLElement;
 
   componentDidUpdate(prevProps) {
@@ -53,14 +53,14 @@ class TypeaheadItem extends React.PureComponent<TypeaheadItemProps, {}> {
 }
 
 interface TypeaheadGroupProps {
-  items: Suggestion[];
+  items: CompletionItem[];
   label: string;
-  onClickItem: (Suggestion) => void;
-  selected: Suggestion;
+  onClickItem: (CompletionItem) => void;
+  selected: CompletionItem;
   prefix?: string;
 }
 
-class TypeaheadGroup extends React.PureComponent<TypeaheadGroupProps, {}> {
+class TypeaheadGroup extends React.PureComponent<TypeaheadGroupProps> {
   render() {
     const { items, label, selected, onClickItem, prefix } = this.props;
     return (
@@ -85,13 +85,13 @@ class TypeaheadGroup extends React.PureComponent<TypeaheadGroupProps, {}> {
 }
 
 interface TypeaheadProps {
-  groupedItems: SuggestionGroup[];
+  groupedItems: CompletionItemGroup[];
   menuRef: any;
-  selectedItem: Suggestion | null;
+  selectedItem: CompletionItem | null;
   onClickItem: (Suggestion) => void;
   prefix?: string;
 }
-class Typeahead extends React.PureComponent<TypeaheadProps, {}> {
+class Typeahead extends React.PureComponent<TypeaheadProps> {
   render() {
     const { groupedItems, menuRef, selectedItem, onClickItem, prefix } = this.props;
     return (
diff --git a/public/app/features/explore/Wrapper.tsx b/public/app/features/explore/Wrapper.tsx
index 7e07aafbf6d..de1eee4c662 100644
--- a/public/app/features/explore/Wrapper.tsx
+++ b/public/app/features/explore/Wrapper.tsx
@@ -7,6 +7,7 @@ import { serializeStateToUrlParam, parseUrlState } from 'app/core/utils/explore'
 import { StoreState } from 'app/types';
 import { ExploreState } from 'app/types/explore';
 
+import ErrorBoundary from './ErrorBoundary';
 import Explore from './Explore';
 
 interface WrapperProps {
@@ -61,28 +62,33 @@ export class Wrapper extends Component<WrapperProps, WrapperState> {
     const { split, splitState } = this.state;
     const urlStateLeft = parseUrlState(this.urlStates[STATE_KEY_LEFT]);
     const urlStateRight = parseUrlState(this.urlStates[STATE_KEY_RIGHT]);
+
     return (
       <div className="explore-wrapper">
-        <Explore
-          datasourceSrv={datasourceSrv}
-          onChangeSplit={this.onChangeSplit}
-          onSaveState={this.onSaveState}
-          position="left"
-          split={split}
-          stateKey={STATE_KEY_LEFT}
-          urlState={urlStateLeft}
-        />
-        {split && (
+        <ErrorBoundary>
           <Explore
             datasourceSrv={datasourceSrv}
             onChangeSplit={this.onChangeSplit}
             onSaveState={this.onSaveState}
-            position="right"
+            position="left"
             split={split}
-            splitState={splitState}
-            stateKey={STATE_KEY_RIGHT}
-            urlState={urlStateRight}
+            stateKey={STATE_KEY_LEFT}
+            urlState={urlStateLeft}
           />
+        </ErrorBoundary>
+        {split && (
+          <ErrorBoundary>
+            <Explore
+              datasourceSrv={datasourceSrv}
+              onChangeSplit={this.onChangeSplit}
+              onSaveState={this.onSaveState}
+              position="right"
+              split={split}
+              splitState={splitState}
+              stateKey={STATE_KEY_RIGHT}
+              urlState={urlStateRight}
+            />
+          </ErrorBoundary>
         )}
       </div>
     );
diff --git a/public/app/features/org/new_org_ctrl.ts b/public/app/features/org/NewOrgCtrl.ts
similarity index 100%
rename from public/app/features/org/new_org_ctrl.ts
rename to public/app/features/org/NewOrgCtrl.ts
diff --git a/public/app/features/org/OrgDetailsPage.test.tsx b/public/app/features/org/OrgDetailsPage.test.tsx
new file mode 100644
index 00000000000..2eb45fa368a
--- /dev/null
+++ b/public/app/features/org/OrgDetailsPage.test.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { OrgDetailsPage, Props } from './OrgDetailsPage';
+import { NavModel, Organization, OrganizationPreferences } from '../../types';
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    preferences: {} as OrganizationPreferences,
+    organization: {} as Organization,
+    navModel: {} as NavModel,
+    loadOrganization: jest.fn(),
+    loadOrganizationPreferences: jest.fn(),
+    loadStarredDashboards: jest.fn(),
+    setOrganizationName: jest.fn(),
+    updateOrganization: jest.fn(),
+  };
+
+  Object.assign(props, propOverrides);
+
+  return shallow(<OrgDetailsPage {...props} />);
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const wrapper = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render organization and preferences', () => {
+    const wrapper = setup({
+      organization: {
+        name: 'Cool org',
+        id: 1,
+      },
+      preferences: {
+        homeDashboardId: 1,
+        theme: 'Default',
+        timezone: 'Default',
+      },
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/app/features/org/OrgDetailsPage.tsx b/public/app/features/org/OrgDetailsPage.tsx
new file mode 100644
index 00000000000..86a3fab3268
--- /dev/null
+++ b/public/app/features/org/OrgDetailsPage.tsx
@@ -0,0 +1,85 @@
+import React, { PureComponent } from 'react';
+import { hot } from 'react-hot-loader';
+import { connect } from 'react-redux';
+import PageHeader from '../../core/components/PageHeader/PageHeader';
+import PageLoader from '../../core/components/PageLoader/PageLoader';
+import OrgProfile from './OrgProfile';
+import OrgPreferences from './OrgPreferences';
+import {
+  loadOrganization,
+  loadOrganizationPreferences,
+  setOrganizationName,
+  updateOrganization,
+} from './state/actions';
+import { loadStarredDashboards } from '../../core/actions/user';
+import { NavModel, Organization, OrganizationPreferences, StoreState } from 'app/types';
+import { getNavModel } from '../../core/selectors/navModel';
+
+export interface Props {
+  navModel: NavModel;
+  organization: Organization;
+  preferences: OrganizationPreferences;
+  loadOrganization: typeof loadOrganization;
+  loadOrganizationPreferences: typeof loadOrganizationPreferences;
+  loadStarredDashboards: typeof loadStarredDashboards;
+  setOrganizationName: typeof setOrganizationName;
+  updateOrganization: typeof updateOrganization;
+}
+
+export class OrgDetailsPage extends PureComponent<Props> {
+  async componentDidMount() {
+    await this.props.loadStarredDashboards();
+    await this.props.loadOrganization();
+    await this.props.loadOrganizationPreferences();
+  }
+
+  onOrgNameChange = name => {
+    this.props.setOrganizationName(name);
+  };
+
+  onUpdateOrganization = () => {
+    this.props.updateOrganization();
+  };
+
+  render() {
+    const { navModel, organization, preferences } = this.props;
+
+    return (
+      <div>
+        <PageHeader model={navModel} />
+        <div className="page-container page-body">
+          {Object.keys(organization).length === 0 || Object.keys(preferences).length === 0 ? (
+            <PageLoader pageName="Organization" />
+          ) : (
+            <div>
+              <OrgProfile
+                onOrgNameChange={name => this.onOrgNameChange(name)}
+                onSubmit={this.onUpdateOrganization}
+                orgName={organization.name}
+              />
+              <OrgPreferences />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state: StoreState) {
+  return {
+    navModel: getNavModel(state.navIndex, 'org-settings'),
+    organization: state.organization.organization,
+    preferences: state.organization.preferences,
+  };
+}
+
+const mapDispatchToProps = {
+  loadOrganization,
+  loadOrganizationPreferences,
+  loadStarredDashboards,
+  setOrganizationName,
+  updateOrganization,
+};
+
+export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(OrgDetailsPage));
diff --git a/public/app/features/org/OrgPreferences.test.tsx b/public/app/features/org/OrgPreferences.test.tsx
new file mode 100644
index 00000000000..e79e43d04f2
--- /dev/null
+++ b/public/app/features/org/OrgPreferences.test.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { OrgPreferences, Props } from './OrgPreferences';
+
+const setup = () => {
+  const props: Props = {
+    preferences: {
+      homeDashboardId: 1,
+      timezone: 'UTC',
+      theme: 'Default',
+    },
+    starredDashboards: [{ id: 1, title: 'Standard dashboard', url: '', uri: '', uid: '', type: '', tags: [] }],
+    setOrganizationTimezone: jest.fn(),
+    setOrganizationTheme: jest.fn(),
+    setOrganizationHomeDashboard: jest.fn(),
+    updateOrganizationPreferences: jest.fn(),
+  };
+
+  return shallow(<OrgPreferences {...props} />);
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const wrapper = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/app/features/org/OrgPreferences.tsx b/public/app/features/org/OrgPreferences.tsx
new file mode 100644
index 00000000000..a8133ba4a1c
--- /dev/null
+++ b/public/app/features/org/OrgPreferences.tsx
@@ -0,0 +1,113 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import { Label } from '../../core/components/Label/Label';
+import SimplePicker from '../../core/components/Picker/SimplePicker';
+import { DashboardSearchHit, OrganizationPreferences } from 'app/types';
+import {
+  setOrganizationHomeDashboard,
+  setOrganizationTheme,
+  setOrganizationTimezone,
+  updateOrganizationPreferences,
+} from './state/actions';
+
+export interface Props {
+  preferences: OrganizationPreferences;
+  starredDashboards: DashboardSearchHit[];
+  setOrganizationHomeDashboard: typeof setOrganizationHomeDashboard;
+  setOrganizationTheme: typeof setOrganizationTheme;
+  setOrganizationTimezone: typeof setOrganizationTimezone;
+  updateOrganizationPreferences: typeof updateOrganizationPreferences;
+}
+
+const themes = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }];
+
+const timezones = [
+  { value: '', text: 'Default' },
+  { value: 'browser', text: 'Local browser time' },
+  { value: 'utc', text: 'UTC' },
+];
+
+export class OrgPreferences extends PureComponent<Props> {
+  onSubmitForm = event => {
+    event.preventDefault();
+    this.props.updateOrganizationPreferences();
+  };
+
+  render() {
+    const {
+      preferences,
+      starredDashboards,
+      setOrganizationHomeDashboard,
+      setOrganizationTimezone,
+      setOrganizationTheme,
+    } = this.props;
+
+    starredDashboards.unshift({ id: 0, title: 'Default', tags: [], type: '', uid: '', uri: '', url: '' });
+
+    return (
+      <form className="section gf-form-group" onSubmit={this.onSubmitForm}>
+        <h3 className="page-heading">Preferences</h3>
+        <div className="gf-form">
+          <span className="gf-form-label width-11">UI Theme</span>
+          <SimplePicker
+            defaultValue={themes.find(theme => theme.value === preferences.theme)}
+            options={themes}
+            getOptionValue={i => i.value}
+            getOptionLabel={i => i.text}
+            onSelected={theme => setOrganizationTheme(theme.value)}
+            width={20}
+          />
+        </div>
+        <div className="gf-form">
+          <Label
+            width={11}
+            tooltip="Not finding dashboard you want? Star it first, then it should appear in this select box."
+          >
+            Home Dashboard
+          </Label>
+          <SimplePicker
+            defaultValue={starredDashboards.find(dashboard => dashboard.id === preferences.homeDashboardId)}
+            getOptionValue={i => i.id}
+            getOptionLabel={i => i.title}
+            onSelected={(dashboard: DashboardSearchHit) => setOrganizationHomeDashboard(dashboard.id)}
+            options={starredDashboards}
+            placeholder="Chose default dashboard"
+            width={20}
+          />
+        </div>
+        <div className="gf-form">
+          <label className="gf-form-label width-11">Timezone</label>
+          <SimplePicker
+            defaultValue={timezones.find(timezone => timezone.value === preferences.timezone)}
+            getOptionValue={i => i.value}
+            getOptionLabel={i => i.text}
+            onSelected={timezone => setOrganizationTimezone(timezone.value)}
+            options={timezones}
+            width={20}
+          />
+        </div>
+        <div className="gf-form-button-row">
+          <button type="submit" className="btn btn-success">
+            Save
+          </button>
+        </div>
+      </form>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    preferences: state.organization.preferences,
+    starredDashboards: state.user.starredDashboards,
+  };
+}
+
+const mapDispatchToProps = {
+  setOrganizationHomeDashboard,
+  setOrganizationTimezone,
+  setOrganizationTheme,
+  updateOrganizationPreferences,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(OrgPreferences);
diff --git a/public/app/features/org/OrgProfile.test.tsx b/public/app/features/org/OrgProfile.test.tsx
new file mode 100644
index 00000000000..d101eded13e
--- /dev/null
+++ b/public/app/features/org/OrgProfile.test.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import OrgProfile, { Props } from './OrgProfile';
+
+const setup = () => {
+  const props: Props = {
+    orgName: 'Main org',
+    onSubmit: jest.fn(),
+    onOrgNameChange: jest.fn(),
+  };
+
+  return shallow(<OrgProfile {...props} />);
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const wrapper = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/app/features/org/OrgProfile.tsx b/public/app/features/org/OrgProfile.tsx
new file mode 100644
index 00000000000..22dfa7bb1ce
--- /dev/null
+++ b/public/app/features/org/OrgProfile.tsx
@@ -0,0 +1,44 @@
+import React, { SFC } from 'react';
+
+export interface Props {
+  orgName: string;
+  onSubmit: () => void;
+  onOrgNameChange: (orgName: string) => void;
+}
+
+const OrgProfile: SFC<Props> = ({ onSubmit, onOrgNameChange, orgName }) => {
+  return (
+    <div>
+      <h3 className="page-sub-heading">Organization profile</h3>
+      <form
+        name="orgForm"
+        className="gf-form-group"
+        onSubmit={event => {
+          event.preventDefault();
+          onSubmit();
+        }}
+      >
+        <div className="gf-form-inline">
+          <div className="gf-form max-width-28">
+            <span className="gf-form-label">Organization name</span>
+            <input
+              className="gf-form-input"
+              type="text"
+              onChange={event => {
+                onOrgNameChange(event.target.value);
+              }}
+              value={orgName}
+            />
+          </div>
+        </div>
+        <div className="gf-form-button-row">
+          <button type="submit" className="btn btn-success">
+            Save
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default OrgProfile;
diff --git a/public/app/features/org/select_org_ctrl.ts b/public/app/features/org/SelectOrgCtrl.ts
similarity index 100%
rename from public/app/features/org/select_org_ctrl.ts
rename to public/app/features/org/SelectOrgCtrl.ts
diff --git a/public/app/features/org/user_invite_ctrl.ts b/public/app/features/org/UserInviteCtrl.ts
similarity index 100%
rename from public/app/features/org/user_invite_ctrl.ts
rename to public/app/features/org/UserInviteCtrl.ts
diff --git a/public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap b/public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap
new file mode 100644
index 00000000000..28806d2bf1d
--- /dev/null
+++ b/public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <PageLoader
+      pageName="Organization"
+    />
+  </div>
+</div>
+`;
+
+exports[`Render should render organization and preferences 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <div>
+      <OrgProfile
+        onOrgNameChange={[Function]}
+        onSubmit={[Function]}
+        orgName="Cool org"
+      />
+      <Connect(OrgPreferences) />
+    </div>
+  </div>
+</div>
+`;
diff --git a/public/app/features/org/__snapshots__/OrgPreferences.test.tsx.snap b/public/app/features/org/__snapshots__/OrgPreferences.test.tsx.snap
new file mode 100644
index 00000000000..06bf464a4a0
--- /dev/null
+++ b/public/app/features/org/__snapshots__/OrgPreferences.test.tsx.snap
@@ -0,0 +1,136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<form
+  className="section gf-form-group"
+  onSubmit={[Function]}
+>
+  <h3
+    className="page-heading"
+  >
+    Preferences
+  </h3>
+  <div
+    className="gf-form"
+  >
+    <span
+      className="gf-form-label width-11"
+    >
+      UI Theme
+    </span>
+    <SimplePicker
+      getOptionLabel={[Function]}
+      getOptionValue={[Function]}
+      onSelected={[Function]}
+      options={
+        Array [
+          Object {
+            "text": "Default",
+            "value": "",
+          },
+          Object {
+            "text": "Dark",
+            "value": "dark",
+          },
+          Object {
+            "text": "Light",
+            "value": "light",
+          },
+        ]
+      }
+      width={20}
+    />
+  </div>
+  <div
+    className="gf-form"
+  >
+    <Component
+      tooltip="Not finding dashboard you want? Star it first, then it should appear in this select box."
+      width={11}
+    >
+      Home Dashboard
+    </Component>
+    <SimplePicker
+      defaultValue={
+        Object {
+          "id": 1,
+          "tags": Array [],
+          "title": "Standard dashboard",
+          "type": "",
+          "uid": "",
+          "uri": "",
+          "url": "",
+        }
+      }
+      getOptionLabel={[Function]}
+      getOptionValue={[Function]}
+      onSelected={[Function]}
+      options={
+        Array [
+          Object {
+            "id": 0,
+            "tags": Array [],
+            "title": "Default",
+            "type": "",
+            "uid": "",
+            "uri": "",
+            "url": "",
+          },
+          Object {
+            "id": 1,
+            "tags": Array [],
+            "title": "Standard dashboard",
+            "type": "",
+            "uid": "",
+            "uri": "",
+            "url": "",
+          },
+        ]
+      }
+      placeholder="Chose default dashboard"
+      width={20}
+    />
+  </div>
+  <div
+    className="gf-form"
+  >
+    <label
+      className="gf-form-label width-11"
+    >
+      Timezone
+    </label>
+    <SimplePicker
+      getOptionLabel={[Function]}
+      getOptionValue={[Function]}
+      onSelected={[Function]}
+      options={
+        Array [
+          Object {
+            "text": "Default",
+            "value": "",
+          },
+          Object {
+            "text": "Local browser time",
+            "value": "browser",
+          },
+          Object {
+            "text": "UTC",
+            "value": "utc",
+          },
+        ]
+      }
+      width={20}
+    />
+  </div>
+  <div
+    className="gf-form-button-row"
+  >
+    <button
+      className="btn btn-success"
+      type="submit"
+    >
+      Save
+    </button>
+  </div>
+</form>
+`;
diff --git a/public/app/features/org/__snapshots__/OrgProfile.test.tsx.snap b/public/app/features/org/__snapshots__/OrgProfile.test.tsx.snap
new file mode 100644
index 00000000000..b49b63e4532
--- /dev/null
+++ b/public/app/features/org/__snapshots__/OrgProfile.test.tsx.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<div>
+  <h3
+    className="page-sub-heading"
+  >
+    Organization profile
+  </h3>
+  <form
+    className="gf-form-group"
+    name="orgForm"
+    onSubmit={[Function]}
+  >
+    <div
+      className="gf-form-inline"
+    >
+      <div
+        className="gf-form max-width-28"
+      >
+        <span
+          className="gf-form-label"
+        >
+          Organization name
+        </span>
+        <input
+          className="gf-form-input"
+          onChange={[Function]}
+          type="text"
+          value="Main org"
+        />
+      </div>
+    </div>
+    <div
+      className="gf-form-button-row"
+    >
+      <button
+        className="btn btn-success"
+        type="submit"
+      >
+        Save
+      </button>
+    </div>
+  </form>
+</div>
+`;
diff --git a/public/app/features/org/all.ts b/public/app/features/org/all.ts
index 9cbcec8de0d..c905853cf49 100644
--- a/public/app/features/org/all.ts
+++ b/public/app/features/org/all.ts
@@ -1,8 +1,3 @@
-import './profile_ctrl';
-import './select_org_ctrl';
-import './change_password_ctrl';
-import './new_org_ctrl';
-import './user_invite_ctrl';
-import './create_team_ctrl';
-import './org_details_ctrl';
-import './prefs_control';
+import './SelectOrgCtrl';
+import './NewOrgCtrl';
+import './UserInviteCtrl';
diff --git a/public/app/features/org/org_details_ctrl.ts b/public/app/features/org/org_details_ctrl.ts
deleted file mode 100644
index 1d4a92c6e8b..00000000000
--- a/public/app/features/org/org_details_ctrl.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import angular from 'angular';
-
-export class OrgDetailsCtrl {
-  /** @ngInject */
-  constructor($scope, $http, backendSrv, contextSrv, navModelSrv) {
-    $scope.init = () => {
-      $scope.getOrgInfo();
-      $scope.navModel = navModelSrv.getNav('cfg', 'org-settings', 0);
-    };
-
-    $scope.getOrgInfo = () => {
-      backendSrv.get('/api/org').then(org => {
-        $scope.org = org;
-        $scope.address = org.address;
-        contextSrv.user.orgName = org.name;
-      });
-    };
-
-    $scope.update = () => {
-      if (!$scope.orgForm.$valid) {
-        return;
-      }
-      const data = { name: $scope.org.name };
-      backendSrv.put('/api/org', data).then($scope.getOrgInfo);
-    };
-
-    $scope.updateAddress = () => {
-      if (!$scope.addressForm.$valid) {
-        return;
-      }
-      backendSrv.put('/api/org/address', $scope.address).then($scope.getOrgInfo);
-    };
-
-    $scope.init();
-  }
-}
-
-angular.module('grafana.controllers').controller('OrgDetailsCtrl', OrgDetailsCtrl);
diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html
deleted file mode 100644
index f5a49e3d3ee..00000000000
--- a/public/app/features/org/partials/orgDetails.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<page-header model="navModel"></page-header>
-
-<div class="page-container page-body">
-  <h3 class="page-sub-heading">Organization profile</h3>
-
-  <form name="orgForm" class="gf-form-group">
-    <div class="gf-form-inline">
-      <div class="gf-form max-width-28">
-        <span class="gf-form-label">Organization name</span>
-        <input class="gf-form-input" type="text" required ng-model="org.name">
-      </div>
-    </div>
-
-    <div class="gf-form-button-row">
-      <button type="submit" class="btn btn-success" ng-click="update()">Save</button>
-    </div>
-  </form>
-  <prefs-control mode="org"></prefs-control>
-</div>
-
-
diff --git a/public/app/features/org/prefs_control.ts b/public/app/features/org/prefs_control.ts
deleted file mode 100644
index 74dde250eec..00000000000
--- a/public/app/features/org/prefs_control.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import config from 'app/core/config';
-import coreModule from 'app/core/core_module';
-
-export class PrefsControlCtrl {
-  prefs: any;
-  oldTheme: any;
-  prefsForm: any;
-  mode: string;
-
-  timezones: any = [
-    { value: '', text: 'Default' },
-    { value: 'browser', text: 'Local browser time' },
-    { value: 'utc', text: 'UTC' },
-  ];
-  themes: any = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }];
-
-  /** @ngInject */
-  constructor(private backendSrv, private $location) {}
-
-  $onInit() {
-    return this.backendSrv.get(`/api/${this.mode}/preferences`).then(prefs => {
-      this.prefs = prefs;
-      this.oldTheme = prefs.theme;
-    });
-  }
-
-  updatePrefs() {
-    if (!this.prefsForm.$valid) {
-      return;
-    }
-
-    const cmd = {
-      theme: this.prefs.theme,
-      timezone: this.prefs.timezone,
-      homeDashboardId: this.prefs.homeDashboardId,
-    };
-
-    this.backendSrv.put(`/api/${this.mode}/preferences`, cmd).then(() => {
-      window.location.href = config.appSubUrl + this.$location.path();
-    });
-  }
-}
-
-const template = `
-<form name="ctrl.prefsForm" class="section gf-form-group">
-  <h3 class="page-heading">Preferences</h3>
-
-  <div class="gf-form">
-    <span class="gf-form-label width-11">UI Theme</span>
-    <div class="gf-form-select-wrapper max-width-20">
-      <select class="gf-form-input" ng-model="ctrl.prefs.theme" ng-options="f.value as f.text for f in ctrl.themes"></select>
-    </div>
-  </div>
-
-  <div class="gf-form">
-    <span class="gf-form-label width-11">
-      Home Dashboard
-      <info-popover mode="right-normal">
-        Not finding dashboard you want? Star it first, then it should appear in this select box.
-      </info-popover>
-    </span>
-    <dashboard-selector class="gf-form-select-wrapper max-width-20" model="ctrl.prefs.homeDashboardId">
-    </dashboard-selector>
-  </div>
-
-  <div class="gf-form">
-    <label class="gf-form-label width-11">Timezone</label>
-    <div class="gf-form-select-wrapper max-width-20">
-      <select class="gf-form-input" ng-model="ctrl.prefs.timezone" ng-options="f.value as f.text for f in ctrl.timezones"></select>
-    </div>
-  </div>
-
-  <div class="gf-form-button-row">
-    <button type="submit" class="btn btn-success" ng-click="ctrl.updatePrefs()">Save</button>
-  </div>
-</form>
-`;
-
-export function prefsControlDirective() {
-  return {
-    restrict: 'E',
-    controller: PrefsControlCtrl,
-    bindToController: true,
-    controllerAs: 'ctrl',
-    template: template,
-    scope: {
-      mode: '@',
-    },
-  };
-}
-
-coreModule.directive('prefsControl', prefsControlDirective);
diff --git a/public/app/features/org/state/actions.ts b/public/app/features/org/state/actions.ts
new file mode 100644
index 00000000000..4df9083c323
--- /dev/null
+++ b/public/app/features/org/state/actions.ts
@@ -0,0 +1,118 @@
+import { ThunkAction } from 'redux-thunk';
+import { Organization, OrganizationPreferences, StoreState } from 'app/types';
+import { getBackendSrv } from '../../../core/services/backend_srv';
+
+type ThunkResult<R> = ThunkAction<R, StoreState, undefined, any>;
+
+export enum ActionTypes {
+  LoadOrganization = 'LOAD_ORGANISATION',
+  LoadPreferences = 'LOAD_PREFERENCES',
+  SetOrganizationName = 'SET_ORGANIZATION_NAME',
+  SetOrganizationTheme = 'SET_ORGANIZATION_THEME',
+  SetOrganizationHomeDashboard = 'SET_ORGANIZATION_HOME_DASHBOARD',
+  SetOrganizationTimezone = 'SET_ORGANIZATION_TIMEZONE',
+}
+
+interface LoadOrganizationAction {
+  type: ActionTypes.LoadOrganization;
+  payload: Organization;
+}
+
+interface LoadPreferencesAction {
+  type: ActionTypes.LoadPreferences;
+  payload: OrganizationPreferences;
+}
+
+interface SetOrganizationNameAction {
+  type: ActionTypes.SetOrganizationName;
+  payload: string;
+}
+
+interface SetOrganizationThemeAction {
+  type: ActionTypes.SetOrganizationTheme;
+  payload: string;
+}
+
+interface SetOrganizationHomeDashboardAction {
+  type: ActionTypes.SetOrganizationHomeDashboard;
+  payload: number;
+}
+
+interface SetOrganizationTimezoneAction {
+  type: ActionTypes.SetOrganizationTimezone;
+  payload: string;
+}
+
+const organisationLoaded = (organisation: Organization) => ({
+  type: ActionTypes.LoadOrganization,
+  payload: organisation,
+});
+
+const preferencesLoaded = (preferences: OrganizationPreferences) => ({
+  type: ActionTypes.LoadPreferences,
+  payload: preferences,
+});
+
+export const setOrganizationName = (orgName: string) => ({
+  type: ActionTypes.SetOrganizationName,
+  payload: orgName,
+});
+
+export const setOrganizationTheme = (theme: string) => ({
+  type: ActionTypes.SetOrganizationTheme,
+  payload: theme,
+});
+
+export const setOrganizationHomeDashboard = (id: number) => ({
+  type: ActionTypes.SetOrganizationHomeDashboard,
+  payload: id,
+});
+
+export const setOrganizationTimezone = (timezone: string) => ({
+  type: ActionTypes.SetOrganizationTimezone,
+  payload: timezone,
+});
+
+export type Action =
+  | LoadOrganizationAction
+  | LoadPreferencesAction
+  | SetOrganizationNameAction
+  | SetOrganizationThemeAction
+  | SetOrganizationHomeDashboardAction
+  | SetOrganizationTimezoneAction;
+
+export function loadOrganization(): ThunkResult<void> {
+  return async dispatch => {
+    const organisationResponse = await getBackendSrv().get('/api/org');
+    dispatch(organisationLoaded(organisationResponse));
+
+    return organisationResponse;
+  };
+}
+
+export function loadOrganizationPreferences(): ThunkResult<void> {
+  return async dispatch => {
+    const preferencesResponse = await getBackendSrv().get('/api/org/preferences');
+    dispatch(preferencesLoaded(preferencesResponse));
+  };
+}
+
+export function updateOrganization() {
+  return async (dispatch, getStore) => {
+    const organization = getStore().organization.organization;
+
+    await getBackendSrv().put('/api/org', { name: organization.name });
+
+    dispatch(loadOrganization());
+  };
+}
+
+export function updateOrganizationPreferences() {
+  return async (dispatch, getStore) => {
+    const preferences = getStore().organization.preferences;
+
+    await getBackendSrv().put('/api/org/preferences', preferences);
+
+    window.location.reload();
+  };
+}
diff --git a/public/app/features/org/state/reducers.ts b/public/app/features/org/state/reducers.ts
new file mode 100644
index 00000000000..b79f915a731
--- /dev/null
+++ b/public/app/features/org/state/reducers.ts
@@ -0,0 +1,35 @@
+import { Organization, OrganizationPreferences, OrganizationState } from 'app/types';
+import { Action, ActionTypes } from './actions';
+
+const initialState: OrganizationState = {
+  organization: {} as Organization,
+  preferences: {} as OrganizationPreferences,
+};
+
+const organizationReducer = (state = initialState, action: Action): OrganizationState => {
+  switch (action.type) {
+    case ActionTypes.LoadOrganization:
+      return { ...state, organization: action.payload };
+
+    case ActionTypes.LoadPreferences:
+      return { ...state, preferences: action.payload };
+
+    case ActionTypes.SetOrganizationName:
+      return { ...state, organization: { ...state.organization, name: action.payload } };
+
+    case ActionTypes.SetOrganizationTheme:
+      return { ...state, preferences: { ...state.preferences, theme: action.payload } };
+
+    case ActionTypes.SetOrganizationHomeDashboard:
+      return { ...state, preferences: { ...state.preferences, homeDashboardId: action.payload } };
+
+    case ActionTypes.SetOrganizationTimezone:
+      return { ...state, preferences: { ...state.preferences, timezone: action.payload } };
+  }
+
+  return state;
+};
+
+export default {
+  organization: organizationReducer,
+};
diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts
index 5e216f6b34d..08605132e82 100644
--- a/public/app/features/panel/panel_ctrl.ts
+++ b/public/app/features/panel/panel_ctrl.ts
@@ -48,11 +48,6 @@ export class PanelCtrl {
     }
 
     $scope.$on('component-did-mount', () => this.panelDidMount());
-
-    $scope.$on('$destroy', () => {
-      this.events.emit('panel-teardown');
-      this.events.removeAllListeners();
-    });
   }
 
   panelDidMount() {
diff --git a/public/app/features/panel/solo_panel_ctrl.ts b/public/app/features/panel/solo_panel_ctrl.ts
index 15d35188d6d..a8bf5371913 100644
--- a/public/app/features/panel/solo_panel_ctrl.ts
+++ b/public/app/features/panel/solo_panel_ctrl.ts
@@ -14,7 +14,7 @@ export class SoloPanelCtrl {
       const params = $location.search();
       panelId = parseInt(params.panelId, 10);
 
-      $scope.onAppEvent('dashboard-initialized', $scope.initPanelScope);
+      appEvents.on('dashboard-initialized', $scope.initPanelScope);
 
       // if no uid, redirect to new route based on slug
       if (!($routeParams.type === 'script' || $routeParams.type === 'snapshot') && !$routeParams.uid) {
diff --git a/public/app/features/plugins/datasource_srv.ts b/public/app/features/plugins/datasource_srv.ts
index 71a417a882f..fed455472c9 100644
--- a/public/app/features/plugins/datasource_srv.ts
+++ b/public/app/features/plugins/datasource_srv.ts
@@ -8,9 +8,10 @@ import { importPluginModule } from './plugin_loader';
 
 // Types
 import { DataSourceApi } from 'app/types/series';
+import { DataSource } from 'app/types';
 
 export class DatasourceSrv {
-  datasources: any;
+  datasources: { [name: string]: DataSource };
 
   /** @ngInject */
   constructor(private $q, private $injector, private $rootScope, private templateSrv) {
@@ -61,9 +62,10 @@ export class DatasourceSrv {
           throw new Error('Plugin module is missing Datasource constructor');
         }
 
-        const instance = this.$injector.instantiate(plugin.Datasource, { instanceSettings: dsConfig });
+        const instance: DataSource = this.$injector.instantiate(plugin.Datasource, { instanceSettings: dsConfig });
         instance.meta = pluginDef;
         instance.name = name;
+        instance.pluginExports = plugin;
         this.datasources[name] = instance;
         deferred.resolve(instance);
       })
diff --git a/public/app/features/org/change_password_ctrl.ts b/public/app/features/profile/ChangePasswordCtrl.ts
similarity index 100%
rename from public/app/features/org/change_password_ctrl.ts
rename to public/app/features/profile/ChangePasswordCtrl.ts
diff --git a/public/app/features/org/profile_ctrl.ts b/public/app/features/profile/ProfileCtrl.ts
similarity index 100%
rename from public/app/features/org/profile_ctrl.ts
rename to public/app/features/profile/ProfileCtrl.ts
diff --git a/public/app/features/org/partials/change_password.html b/public/app/features/profile/partials/change_password.html
similarity index 100%
rename from public/app/features/org/partials/change_password.html
rename to public/app/features/profile/partials/change_password.html
diff --git a/public/app/features/org/partials/profile.html b/public/app/features/profile/partials/profile.html
similarity index 100%
rename from public/app/features/org/partials/profile.html
rename to public/app/features/profile/partials/profile.html
diff --git a/public/app/features/org/create_team_ctrl.ts b/public/app/features/teams/CreateTeamCtrl.ts
similarity index 100%
rename from public/app/features/org/create_team_ctrl.ts
rename to public/app/features/teams/CreateTeamCtrl.ts
diff --git a/public/app/features/teams/TeamMembers.tsx b/public/app/features/teams/TeamMembers.tsx
index 2534a08ed15..da57bfbdfd3 100644
--- a/public/app/features/teams/TeamMembers.tsx
+++ b/public/app/features/teams/TeamMembers.tsx
@@ -74,7 +74,7 @@ export class TeamMembers extends PureComponent<Props, State> {
         </td>
         <td>{member.login}</td>
         <td>{member.email}</td>
-        {syncEnabled ? this.renderLabels(member.labels) : ''}
+        {syncEnabled ? this.renderLabels(member.labels) : null}
         <td className="text-right">
           <DeleteButton onConfirmDelete={() => this.onRemoveMember(member)} />
         </td>
diff --git a/public/app/features/teams/TeamSettings.tsx b/public/app/features/teams/TeamSettings.tsx
index ef9a5ae0b70..45977de95bf 100644
--- a/public/app/features/teams/TeamSettings.tsx
+++ b/public/app/features/teams/TeamSettings.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Label } from 'app/core/components/Forms/Forms';
+import { Label } from 'app/core/components/Label/Label';
 import { Team } from '../../types';
 import { updateTeam } from './state/actions';
 import { getRouteParamsId } from '../../core/selectors/location';
diff --git a/public/app/features/org/partials/create_team.html b/public/app/features/teams/partials/create_team.html
similarity index 100%
rename from public/app/features/org/partials/create_team.html
rename to public/app/features/teams/partials/create_team.html
diff --git a/public/app/features/templating/specs/template_srv.test.ts b/public/app/features/templating/specs/template_srv.test.ts
index d279029d64d..7805341d1a2 100644
--- a/public/app/features/templating/specs/template_srv.test.ts
+++ b/public/app/features/templating/specs/template_srv.test.ts
@@ -286,10 +286,40 @@ describe('templateSrv', () => {
       initTemplateSrv([{ type: 'query', name: 'test', current: { value: 'oogle' } }]);
     });
 
-    it('should return true if exists', () => {
+    it('should return true if $test exists', () => {
       const result = _templateSrv.variableExists('$test');
       expect(result).toBe(true);
     });
+
+    it('should return true if $test exists in string', () => {
+      const result = _templateSrv.variableExists('something $test something');
+      expect(result).toBe(true);
+    });
+
+    it('should return true if [[test]] exists in string', () => {
+      const result = _templateSrv.variableExists('something [[test]] something');
+      expect(result).toBe(true);
+    });
+
+    it('should return true if [[test:csv]] exists in string', () => {
+      const result = _templateSrv.variableExists('something [[test:csv]] something');
+      expect(result).toBe(true);
+    });
+
+    it('should return true if ${test} exists in string', () => {
+      const result = _templateSrv.variableExists('something ${test} something');
+      expect(result).toBe(true);
+    });
+
+    it('should return true if ${test:raw} exists in string', () => {
+      const result = _templateSrv.variableExists('something ${test:raw} something');
+      expect(result).toBe(true);
+    });
+
+    it('should return null if there are no variables in string', () => {
+      const result = _templateSrv.variableExists('string without variables');
+      expect(result).toBe(null);
+    });
   });
 
   describe('can highlight variables in string', () => {
diff --git a/public/app/features/templating/template_srv.ts b/public/app/features/templating/template_srv.ts
index 61326ad63ec..0db7b8e77e0 100644
--- a/public/app/features/templating/template_srv.ts
+++ b/public/app/features/templating/template_srv.ts
@@ -136,7 +136,8 @@ export class TemplateSrv {
     if (!match) {
       return null;
     }
-    return match[1] || match[2];
+    const variableName = match.slice(1).find(match => match !== undefined);
+    return variableName;
   }
 
   variableExists(expression) {
diff --git a/public/app/partials/login.html b/public/app/partials/login.html
index 260de80e389..a2bc8173766 100644
--- a/public/app/partials/login.html
+++ b/public/app/partials/login.html
@@ -2,7 +2,7 @@
   <div class="login-content">
     <div class="login-branding">
       <img class="logo-icon" src="public/img/grafana_icon.svg" alt="Grafana" />
-      <i class="icon-gf icon-gf-grafana_wordmark"></i>
+      <div class="logo-wordmark" />
     </div>
     <div class="login-outer-box">
       <div class="login-inner-box" id="login-view">
diff --git a/public/app/plugins/datasource/cloudwatch/datasource.ts b/public/app/plugins/datasource/cloudwatch/datasource.ts
index b4f739f934c..3eb8eff2d09 100644
--- a/public/app/plugins/datasource/cloudwatch/datasource.ts
+++ b/public/app/plugins/datasource/cloudwatch/datasource.ts
@@ -37,6 +37,9 @@ export default class CloudWatchDatasource {
       item.namespace = this.templateSrv.replace(item.namespace, options.scopedVars);
       item.metricName = this.templateSrv.replace(item.metricName, options.scopedVars);
       item.dimensions = this.convertDimensionFormat(item.dimensions, options.scopedVars);
+      item.statistics = item.statistics.map(s => {
+        return this.templateSrv.replace(s, options.scopedVars);
+      });
       item.period = String(this.getPeriod(item, options)); // use string format for period in graph query, and alerting
       item.id = this.templateSrv.replace(item.id, options.scopedVars);
       item.expression = this.templateSrv.replace(item.expression, options.scopedVars);
diff --git a/public/app/plugins/datasource/logging/components/LoggingCheatSheet.tsx b/public/app/plugins/datasource/logging/components/LoggingCheatSheet.tsx
new file mode 100644
index 00000000000..a7af48b6eda
--- /dev/null
+++ b/public/app/plugins/datasource/logging/components/LoggingCheatSheet.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+const CHEAT_SHEET_ITEMS = [
+  {
+    title: 'Logs From a Job',
+    expression: '{job="default/prometheus"}',
+    label: 'Returns all log lines emitted by instances of this job.',
+  },
+  {
+    title: 'Search For Text',
+    expression: '{app="cassandra"} Maximum memory usage',
+    label: 'Returns all log lines for the selector and highlights the given text in the results.',
+  },
+];
+
+export default (props: any) => (
+  <div>
+    <h1>Logging Cheat Sheet</h1>
+    {CHEAT_SHEET_ITEMS.map(item => (
+      <div className="cheat-sheet-item" key={item.expression}>
+        <div className="cheat-sheet-item__title">{item.title}</div>
+        <div className="cheat-sheet-item__expression" onClick={e => props.onClickQuery(item.expression)}>
+          <code>{item.expression}</code>
+        </div>
+        <div className="cheat-sheet-item__label">{item.label}</div>
+      </div>
+    ))}
+  </div>
+);
diff --git a/public/app/plugins/datasource/logging/components/LoggingQueryField.tsx b/public/app/plugins/datasource/logging/components/LoggingQueryField.tsx
new file mode 100644
index 00000000000..82ebc444c62
--- /dev/null
+++ b/public/app/plugins/datasource/logging/components/LoggingQueryField.tsx
@@ -0,0 +1,227 @@
+import _ from 'lodash';
+import React from 'react';
+import Cascader from 'rc-cascader';
+import PluginPrism from 'slate-prism';
+import Prism from 'prismjs';
+
+import { TypeaheadOutput } from 'app/types/explore';
+
+// dom also includes Element polyfills
+import { getNextCharacter, getPreviousCousin } from 'app/features/explore/utils/dom';
+import BracesPlugin from 'app/features/explore/slate-plugins/braces';
+import RunnerPlugin from 'app/features/explore/slate-plugins/runner';
+import TypeaheadField, { TypeaheadInput, QueryFieldState } from 'app/features/explore/QueryField';
+
+const PRISM_SYNTAX = 'promql';
+
+export function willApplySuggestion(suggestion: string, { typeaheadContext, typeaheadText }: QueryFieldState): string {
+  // Modify suggestion based on context
+  switch (typeaheadContext) {
+    case 'context-labels': {
+      const nextChar = getNextCharacter();
+      if (!nextChar || nextChar === '}' || nextChar === ',') {
+        suggestion += '=';
+      }
+      break;
+    }
+
+    case 'context-label-values': {
+      // Always add quotes and remove existing ones instead
+      if (!typeaheadText.match(/^(!?=~?"|")/)) {
+        suggestion = `"${suggestion}`;
+      }
+      if (getNextCharacter() !== '"') {
+        suggestion = `${suggestion}"`;
+      }
+      break;
+    }
+
+    default:
+  }
+  return suggestion;
+}
+
+interface CascaderOption {
+  label: string;
+  value: string;
+  children?: CascaderOption[];
+  disabled?: boolean;
+}
+
+interface LoggingQueryFieldProps {
+  datasource: any;
+  error?: string | JSX.Element;
+  hint?: any;
+  history?: any[];
+  initialQuery?: string | null;
+  onClickHintFix?: (action: any) => void;
+  onPressEnter?: () => void;
+  onQueryChange?: (value: string, override?: boolean) => void;
+}
+
+interface LoggingQueryFieldState {
+  logLabelOptions: any[];
+  syntaxLoaded: boolean;
+}
+
+class LoggingQueryField extends React.PureComponent<LoggingQueryFieldProps, LoggingQueryFieldState> {
+  plugins: any[];
+  languageProvider: any;
+
+  constructor(props: LoggingQueryFieldProps, context) {
+    super(props, context);
+
+    if (props.datasource.languageProvider) {
+      this.languageProvider = props.datasource.languageProvider;
+    }
+
+    this.plugins = [
+      BracesPlugin(),
+      RunnerPlugin({ handler: props.onPressEnter }),
+      PluginPrism({
+        onlyIn: node => node.type === 'code_block',
+        getSyntax: node => 'promql',
+      }),
+    ];
+
+    this.state = {
+      logLabelOptions: [],
+      syntaxLoaded: false,
+    };
+  }
+
+  componentDidMount() {
+    if (this.languageProvider) {
+      this.languageProvider
+        .start()
+        .then(remaining => {
+          remaining.map(task => task.then(this.onReceiveMetrics).catch(() => {}));
+        })
+        .then(() => this.onReceiveMetrics());
+    }
+  }
+
+  loadOptions = (selectedOptions: CascaderOption[]) => {
+    const targetOption = selectedOptions[selectedOptions.length - 1];
+
+    this.setState(state => {
+      const nextOptions = state.logLabelOptions.map(option => {
+        if (option.value === targetOption.value) {
+          return {
+            ...option,
+            loading: true,
+          };
+        }
+        return option;
+      });
+      return { logLabelOptions: nextOptions };
+    });
+
+    this.languageProvider
+      .fetchLabelValues(targetOption.value)
+      .then(this.onReceiveMetrics)
+      .catch(() => {});
+  };
+
+  onChangeLogLabels = (values: string[], selectedOptions: CascaderOption[]) => {
+    if (selectedOptions.length === 2) {
+      const key = selectedOptions[0].value;
+      const value = selectedOptions[1].value;
+      const query = `{${key}="${value}"}`;
+      this.onChangeQuery(query, true);
+    }
+  };
+
+  onChangeQuery = (value: string, override?: boolean) => {
+    // Send text change to parent
+    const { onQueryChange } = this.props;
+    if (onQueryChange) {
+      onQueryChange(value, override);
+    }
+  };
+
+  onClickHintFix = () => {
+    const { hint, onClickHintFix } = this.props;
+    if (onClickHintFix && hint && hint.fix) {
+      onClickHintFix(hint.fix.action);
+    }
+  };
+
+  onReceiveMetrics = () => {
+    Prism.languages[PRISM_SYNTAX] = this.languageProvider.getSyntax();
+    const { logLabelOptions } = this.languageProvider;
+    this.setState({
+      logLabelOptions,
+      syntaxLoaded: true,
+    });
+  };
+
+  onTypeahead = (typeahead: TypeaheadInput): TypeaheadOutput => {
+    if (!this.languageProvider) {
+      return { suggestions: [] };
+    }
+
+    const { history } = this.props;
+    const { prefix, text, value, wrapperNode } = typeahead;
+
+    // Get DOM-dependent context
+    const wrapperClasses = Array.from(wrapperNode.classList);
+    const labelKeyNode = getPreviousCousin(wrapperNode, '.attr-name');
+    const labelKey = labelKeyNode && labelKeyNode.textContent;
+    const nextChar = getNextCharacter();
+
+    const result = this.languageProvider.provideCompletionItems(
+      { text, value, prefix, wrapperClasses, labelKey },
+      { history }
+    );
+
+    console.log('handleTypeahead', wrapperClasses, text, prefix, nextChar, labelKey, result.context);
+
+    return result;
+  };
+
+  render() {
+    const { error, hint, initialQuery } = this.props;
+    const { logLabelOptions, syntaxLoaded } = this.state;
+    const cleanText = this.languageProvider ? this.languageProvider.cleanText : undefined;
+    const chooserText = syntaxLoaded ? 'Log labels' : 'Loading labels...';
+
+    return (
+      <div className="prom-query-field">
+        <div className="prom-query-field-tools">
+          <Cascader options={logLabelOptions} onChange={this.onChangeLogLabels} loadData={this.loadOptions}>
+            <button className="btn navbar-button navbar-button--tight" disabled={!syntaxLoaded}>
+              {chooserText}
+            </button>
+          </Cascader>
+        </div>
+        <div className="prom-query-field-wrapper">
+          <TypeaheadField
+            additionalPlugins={this.plugins}
+            cleanText={cleanText}
+            initialValue={initialQuery}
+            onTypeahead={this.onTypeahead}
+            onWillApplySuggestion={willApplySuggestion}
+            onValueChanged={this.onChangeQuery}
+            placeholder="Enter a PromQL query"
+            portalOrigin="prometheus"
+            syntaxLoaded={syntaxLoaded}
+          />
+          {error ? <div className="prom-query-field-info text-error">{error}</div> : null}
+          {hint ? (
+            <div className="prom-query-field-info text-warning">
+              {hint.label}{' '}
+              {hint.fix ? (
+                <a className="text-link muted" onClick={this.onClickHintFix}>
+                  {hint.fix.label}
+                </a>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default LoggingQueryField;
diff --git a/public/app/plugins/datasource/logging/components/LoggingStartPage.tsx b/public/app/plugins/datasource/logging/components/LoggingStartPage.tsx
new file mode 100644
index 00000000000..89262999637
--- /dev/null
+++ b/public/app/plugins/datasource/logging/components/LoggingStartPage.tsx
@@ -0,0 +1,60 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+
+import LoggingCheatSheet from './LoggingCheatSheet';
+
+const TAB_MENU_ITEMS = [
+  {
+    text: 'Start',
+    id: 'start',
+    icon: 'fa fa-rocket',
+  },
+];
+
+export default class LoggingStartPage extends PureComponent<any, { active: string }> {
+  state = {
+    active: 'start',
+  };
+
+  onClickTab = active => {
+    this.setState({ active });
+  };
+
+  render() {
+    const { active } = this.state;
+    const customCss = '';
+
+    return (
+      <div style={{ margin: '45px 0', border: '1px solid #ddd', borderRadius: 5 }}>
+        <div className="page-header-canvas">
+          <div className="page-container">
+            <div className="page-header">
+              <nav>
+                <ul className={`gf-tabs ${customCss}`}>
+                  {TAB_MENU_ITEMS.map((tab, idx) => {
+                    const tabClasses = classNames({
+                      'gf-tabs-link': true,
+                      active: tab.id === active,
+                    });
+
+                    return (
+                      <li className="gf-tabs-item" key={tab.id}>
+                        <a className={tabClasses} onClick={() => this.onClickTab(tab.id)}>
+                          <i className={tab.icon} />
+                          {tab.text}
+                        </a>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </nav>
+            </div>
+          </div>
+        </div>
+        <div className="page-container page-body">
+          {active === 'start' && <LoggingCheatSheet onClickQuery={this.props.onClickQuery} />}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/logging/datasource.ts b/public/app/plugins/datasource/logging/datasource.ts
index 22edba5807a..2cc4e970233 100644
--- a/public/app/plugins/datasource/logging/datasource.ts
+++ b/public/app/plugins/datasource/logging/datasource.ts
@@ -2,6 +2,7 @@ import _ from 'lodash';
 
 import * as dateMath from 'app/core/utils/datemath';
 
+import LanguageProvider from './language_provider';
 import { processStreams } from './result_transformer';
 
 const DEFAULT_LIMIT = 100;
@@ -48,8 +49,12 @@ function serializeParams(data: any) {
 }
 
 export default class LoggingDatasource {
+  languageProvider: LanguageProvider;
+
   /** @ngInject */
-  constructor(private instanceSettings, private backendSrv, private templateSrv) {}
+  constructor(private instanceSettings, private backendSrv, private templateSrv) {
+    this.languageProvider = new LanguageProvider(this);
+  }
 
   _request(apiUrl: string, data?, options?: any) {
     const baseUrl = this.instanceSettings.url;
diff --git a/public/app/plugins/datasource/logging/language_provider.ts b/public/app/plugins/datasource/logging/language_provider.ts
new file mode 100644
index 00000000000..32f4f8a0cd7
--- /dev/null
+++ b/public/app/plugins/datasource/logging/language_provider.ts
@@ -0,0 +1,215 @@
+import _ from 'lodash';
+import moment from 'moment';
+
+import {
+  CompletionItem,
+  CompletionItemGroup,
+  LanguageProvider,
+  TypeaheadInput,
+  TypeaheadOutput,
+} from 'app/types/explore';
+
+import { parseSelector } from 'app/plugins/datasource/prometheus/language_utils';
+import PromqlSyntax from 'app/plugins/datasource/prometheus/promql';
+
+const DEFAULT_KEYS = ['job', 'namespace'];
+const EMPTY_SELECTOR = '{}';
+const HISTORY_ITEM_COUNT = 10;
+const HISTORY_COUNT_CUTOFF = 1000 * 60 * 60 * 24; // 24h
+
+const wrapLabel = (label: string) => ({ label });
+
+export function addHistoryMetadata(item: CompletionItem, history: any[]): CompletionItem {
+  const cutoffTs = Date.now() - HISTORY_COUNT_CUTOFF;
+  const historyForItem = history.filter(h => h.ts > cutoffTs && h.query === item.label);
+  const count = historyForItem.length;
+  const recent = historyForItem[0];
+  let hint = `Queried ${count} times in the last 24h.`;
+  if (recent) {
+    const lastQueried = moment(recent.ts).fromNow();
+    hint = `${hint} Last queried ${lastQueried}.`;
+  }
+  return {
+    ...item,
+    documentation: hint,
+  };
+}
+
+export default class LoggingLanguageProvider extends LanguageProvider {
+  labelKeys?: { [index: string]: string[] }; // metric -> [labelKey,...]
+  labelValues?: { [index: string]: { [index: string]: string[] } }; // metric -> labelKey -> [labelValue,...]
+  logLabelOptions: any[];
+  started: boolean;
+
+  constructor(datasource: any, initialValues?: any) {
+    super();
+
+    this.datasource = datasource;
+    this.labelKeys = {};
+    this.labelValues = {};
+    this.started = false;
+
+    Object.assign(this, initialValues);
+  }
+  // Strip syntax chars
+  cleanText = s => s.replace(/[{}[\]="(),!~+\-*/^%]/g, '').trim();
+
+  getSyntax() {
+    return PromqlSyntax;
+  }
+
+  request = url => {
+    return this.datasource.metadataRequest(url);
+  };
+
+  start = () => {
+    if (!this.started) {
+      this.started = true;
+      return this.fetchLogLabels();
+    }
+    return Promise.resolve([]);
+  };
+
+  // Keep this DOM-free for testing
+  provideCompletionItems({ prefix, wrapperClasses, text }: TypeaheadInput, context?: any): TypeaheadOutput {
+    // Syntax spans have 3 classes by default. More indicate a recognized token
+    const tokenRecognized = wrapperClasses.length > 3;
+    // Determine candidates by CSS context
+    if (_.includes(wrapperClasses, 'context-labels')) {
+      // Suggestions for metric{|} and metric{foo=|}, as well as metric-independent label queries like {|}
+      return this.getLabelCompletionItems.apply(this, arguments);
+    } else if (
+      // Show default suggestions in a couple of scenarios
+      (prefix && !tokenRecognized) || // Non-empty prefix, but not inside known token
+      (prefix === '' && !text.match(/^[\]})\s]+$/)) || // Empty prefix, but not following a closing brace
+      text.match(/[+\-*/^%]/) // Anything after binary operator
+    ) {
+      return this.getEmptyCompletionItems(context || {});
+    }
+
+    return {
+      suggestions: [],
+    };
+  }
+
+  getEmptyCompletionItems(context: any): TypeaheadOutput {
+    const { history } = context;
+    const suggestions: CompletionItemGroup[] = [];
+
+    if (history && history.length > 0) {
+      const historyItems = _.chain(history)
+        .uniqBy('query')
+        .take(HISTORY_ITEM_COUNT)
+        .map(h => h.query)
+        .map(wrapLabel)
+        .map(item => addHistoryMetadata(item, history))
+        .value();
+
+      suggestions.push({
+        prefixMatch: true,
+        skipSort: true,
+        label: 'History',
+        items: historyItems,
+      });
+    }
+
+    return { suggestions };
+  }
+
+  getLabelCompletionItems({ text, wrapperClasses, labelKey, value }: TypeaheadInput): TypeaheadOutput {
+    let context: string;
+    let refresher: Promise<any> = null;
+    const suggestions: CompletionItemGroup[] = [];
+    const line = value.anchorBlock.getText();
+    const cursorOffset: number = value.anchorOffset;
+
+    // Use EMPTY_SELECTOR until series API is implemented for facetting
+    const selector = EMPTY_SELECTOR;
+    let parsedSelector;
+    try {
+      parsedSelector = parseSelector(line, cursorOffset);
+    } catch {}
+    const existingKeys = parsedSelector ? parsedSelector.labelKeys : [];
+
+    if ((text && text.match(/^!?=~?/)) || _.includes(wrapperClasses, 'attr-value')) {
+      // Label values
+      if (labelKey && this.labelValues[selector]) {
+        const labelValues = this.labelValues[selector][labelKey];
+        if (labelValues) {
+          context = 'context-label-values';
+          suggestions.push({
+            label: `Label values for "${labelKey}"`,
+            items: labelValues.map(wrapLabel),
+          });
+        } else {
+          refresher = this.fetchLabelValues(labelKey);
+        }
+      }
+    } else {
+      // Label keys
+      const labelKeys = this.labelKeys[selector] || DEFAULT_KEYS;
+      if (labelKeys) {
+        const possibleKeys = _.difference(labelKeys, existingKeys);
+        if (possibleKeys.length > 0) {
+          context = 'context-labels';
+          suggestions.push({ label: `Labels`, items: possibleKeys.map(wrapLabel) });
+        }
+      }
+    }
+
+    return { context, refresher, suggestions };
+  }
+
+  async fetchLogLabels() {
+    const url = '/api/prom/label';
+    try {
+      const res = await this.request(url);
+      const body = await (res.data || res.json());
+      const labelKeys = body.data.slice().sort();
+      this.labelKeys = {
+        ...this.labelKeys,
+        [EMPTY_SELECTOR]: labelKeys,
+      };
+      this.logLabelOptions = labelKeys.map(key => ({ label: key, value: key, isLeaf: false }));
+
+      // Pre-load values for default labels
+      return labelKeys.filter(key => DEFAULT_KEYS.indexOf(key) > -1).map(key => this.fetchLabelValues(key));
+    } catch (e) {
+      console.error(e);
+    }
+    return [];
+  }
+
+  async fetchLabelValues(key: string) {
+    const url = `/api/prom/label/${key}/values`;
+    try {
+      const res = await this.request(url);
+      const body = await (res.data || res.json());
+      const values = body.data.slice().sort();
+
+      // Add to label options
+      this.logLabelOptions = this.logLabelOptions.map(keyOption => {
+        if (keyOption.value === key) {
+          return {
+            ...keyOption,
+            children: values.map(value => ({ label: value, value })),
+          };
+        }
+        return keyOption;
+      });
+
+      // Add to key map
+      const exisingValues = this.labelValues[EMPTY_SELECTOR];
+      const nextValues = {
+        ...exisingValues,
+        [key]: values,
+      };
+      this.labelValues = {
+        ...this.labelValues,
+        [EMPTY_SELECTOR]: nextValues,
+      };
+    } catch (e) {
+      console.error(e);
+    }
+  }
+}
diff --git a/public/app/plugins/datasource/logging/module.ts b/public/app/plugins/datasource/logging/module.ts
index 5e3ffb3282a..da00edbf40f 100644
--- a/public/app/plugins/datasource/logging/module.ts
+++ b/public/app/plugins/datasource/logging/module.ts
@@ -1,7 +1,15 @@
 import Datasource from './datasource';
 
+import LoggingStartPage from './components/LoggingStartPage';
+import LoggingQueryField from './components/LoggingQueryField';
+
 export class LoggingConfigCtrl {
   static templateUrl = 'partials/config.html';
 }
 
-export { Datasource, LoggingConfigCtrl as ConfigCtrl };
+export {
+  Datasource,
+  LoggingConfigCtrl as ConfigCtrl,
+  LoggingQueryField as ExploreQueryField,
+  LoggingStartPage as ExploreStartPage,
+};
diff --git a/public/app/plugins/datasource/mysql/datasource.ts b/public/app/plugins/datasource/mysql/datasource.ts
index 4705bfbb6c9..f0381d53b70 100644
--- a/public/app/plugins/datasource/mysql/datasource.ts
+++ b/public/app/plugins/datasource/mysql/datasource.ts
@@ -1,24 +1,27 @@
 import _ from 'lodash';
 import ResponseParser from './response_parser';
+import MysqlQuery from 'app/plugins/datasource/mysql/mysql_query';
 
 export class MysqlDatasource {
   id: any;
   name: any;
   responseParser: ResponseParser;
+  queryModel: MysqlQuery;
   interval: string;
 
   /** @ngInject */
-  constructor(instanceSettings, private backendSrv, private $q, private templateSrv) {
+  constructor(instanceSettings, private backendSrv, private $q, private templateSrv, private timeSrv) {
     this.name = instanceSettings.name;
     this.id = instanceSettings.id;
     this.responseParser = new ResponseParser(this.$q);
+    this.queryModel = new MysqlQuery({});
     this.interval = (instanceSettings.jsonData || {}).timeInterval;
   }
 
-  interpolateVariable(value, variable) {
+  interpolateVariable = (value, variable) => {
     if (typeof value === 'string') {
       if (variable.multi || variable.includeAll) {
-        return "'" + value.replace(/'/g, `''`) + "'";
+        return this.queryModel.quoteLiteral(value);
       } else {
         return value;
       }
@@ -28,27 +31,25 @@ export class MysqlDatasource {
       return value;
     }
 
-    const quotedValues = _.map(value, val => {
-      if (typeof value === 'number') {
-        return value;
-      }
-
-      return "'" + val.replace(/'/g, `''`) + "'";
+    const quotedValues = _.map(value, v => {
+      return this.queryModel.quoteLiteral(v);
     });
     return quotedValues.join(',');
-  }
+  };
 
   query(options) {
-    const queries = _.filter(options.targets, item => {
-      return item.hide !== true;
-    }).map(item => {
+    const queries = _.filter(options.targets, target => {
+      return target.hide !== true;
+    }).map(target => {
+      const queryModel = new MysqlQuery(target, this.templateSrv, options.scopedVars);
+
       return {
-        refId: item.refId,
+        refId: target.refId,
         intervalMs: options.intervalMs,
         maxDataPoints: options.maxDataPoints,
         datasourceId: this.id,
-        rawSql: this.templateSrv.replace(item.rawSql, options.scopedVars, this.interpolateVariable),
-        format: item.format,
+        rawSql: queryModel.render(this.interpolateVariable),
+        format: target.format,
       };
     });
 
@@ -109,8 +110,11 @@ export class MysqlDatasource {
       format: 'table',
     };
 
+    const range = this.timeSrv.timeRange();
     const data = {
       queries: [interpolatedQuery],
+      from: range.from.valueOf().toString(),
+      to: range.to.valueOf().toString(),
     };
 
     if (optionalOptions && optionalOptions.range && optionalOptions.range.from) {
diff --git a/public/app/plugins/datasource/mysql/meta_query.ts b/public/app/plugins/datasource/mysql/meta_query.ts
new file mode 100644
index 00000000000..e5f8ad73ebe
--- /dev/null
+++ b/public/app/plugins/datasource/mysql/meta_query.ts
@@ -0,0 +1,142 @@
+export class MysqlMetaQuery {
+  constructor(private target, private queryModel) {}
+
+  getOperators(datatype: string) {
+    switch (datatype) {
+      case 'double':
+      case 'float': {
+        return ['=', '!=', '<', '<=', '>', '>='];
+      }
+      case 'text':
+      case 'tinytext':
+      case 'mediumtext':
+      case 'longtext':
+      case 'varchar':
+      case 'char': {
+        return ['=', '!=', '<', '<=', '>', '>=', 'IN', 'NOT IN', 'LIKE', 'NOT LIKE'];
+      }
+      default: {
+        return ['=', '!=', '<', '<=', '>', '>=', 'IN', 'NOT IN'];
+      }
+    }
+  }
+
+  // quote identifier as literal to use in metadata queries
+  quoteIdentAsLiteral(value) {
+    return this.queryModel.quoteLiteral(this.queryModel.unquoteIdentifier(value));
+  }
+
+  findMetricTable() {
+    // query that returns first table found that has a timestamp(tz) column and a float column
+    const query = `
+  SELECT
+    table_name as table_name,
+    ( SELECT
+        column_name as column_name
+      FROM information_schema.columns c
+      WHERE
+        c.table_schema = t.table_schema AND
+        c.table_name = t.table_name AND
+        c.data_type IN ('timestamp', 'datetime')
+      ORDER BY ordinal_position LIMIT 1
+    ) AS time_column,
+    ( SELECT
+        column_name AS column_name
+      FROM information_schema.columns c
+      WHERE
+        c.table_schema = t.table_schema AND
+        c.table_name = t.table_name AND
+        c.data_type IN('float', 'int', 'bigint')
+      ORDER BY ordinal_position LIMIT 1
+    ) AS value_column
+  FROM information_schema.tables t
+  WHERE
+    t.table_schema = database() AND
+    EXISTS
+    ( SELECT 1
+      FROM information_schema.columns c
+      WHERE
+        c.table_schema = t.table_schema AND
+        c.table_name = t.table_name AND
+        c.data_type IN ('timestamp', 'datetime')
+    ) AND
+    EXISTS
+    ( SELECT 1
+      FROM information_schema.columns c
+      WHERE
+        c.table_schema = t.table_schema AND
+        c.table_name = t.table_name AND
+        c.data_type IN('float', 'int', 'bigint')
+    )
+  LIMIT 1
+;`;
+    return query;
+  }
+
+  buildTableConstraint(table: string) {
+    let query = '';
+
+    // check for schema qualified table
+    if (table.includes('.')) {
+      const parts = table.split('.');
+      query = 'table_schema = ' + this.quoteIdentAsLiteral(parts[0]);
+      query += ' AND table_name = ' + this.quoteIdentAsLiteral(parts[1]);
+      return query;
+    } else {
+      query = 'table_schema = database() AND table_name = ' + this.quoteIdentAsLiteral(table);
+
+      return query;
+    }
+  }
+
+  buildTableQuery() {
+    return 'SELECT table_name FROM information_schema.tables WHERE table_schema = database() ORDER BY table_name';
+  }
+
+  buildColumnQuery(type?: string) {
+    let query = 'SELECT column_name FROM information_schema.columns WHERE ';
+    query += this.buildTableConstraint(this.target.table);
+
+    switch (type) {
+      case 'time': {
+        query += " AND data_type IN ('timestamp','datetime','bigint','int','double','float')";
+        break;
+      }
+      case 'metric': {
+        query += " AND data_type IN ('text','tinytext','mediumtext','longtext','varchar','char')";
+        break;
+      }
+      case 'value': {
+        query += " AND data_type IN ('bigint','int','smallint','mediumint','tinyint','double','decimal','float')";
+        query += ' AND column_name <> ' + this.quoteIdentAsLiteral(this.target.timeColumn);
+        break;
+      }
+      case 'group': {
+        query += " AND data_type IN ('text','tinytext','mediumtext','longtext','varchar','char')";
+        break;
+      }
+    }
+
+    query += ' ORDER BY column_name';
+
+    return query;
+  }
+
+  buildValueQuery(column: string) {
+    let query = 'SELECT DISTINCT QUOTE(' + column + ')';
+    query += ' FROM ' + this.target.table;
+    query += ' WHERE $__timeFilter(' + this.target.timeColumn + ')';
+    query += ' ORDER BY 1 LIMIT 100';
+    return query;
+  }
+
+  buildDatatypeQuery(column: string) {
+    let query = `
+SELECT data_type
+FROM information_schema.columns
+WHERE `;
+    query += ' table_name = ' + this.quoteIdentAsLiteral(this.target.table);
+    query += ' AND column_name = ' + this.quoteIdentAsLiteral(column);
+    return query;
+  }
+}
diff --git a/public/app/plugins/datasource/mysql/mysql_query.ts b/public/app/plugins/datasource/mysql/mysql_query.ts
new file mode 100644
index 00000000000..e636d66e6fd
--- /dev/null
+++ b/public/app/plugins/datasource/mysql/mysql_query.ts
@@ -0,0 +1,233 @@
+import _ from 'lodash';
+
+export default class MysqlQuery {
+  target: any;
+  templateSrv: any;
+  scopedVars: any;
+
+  /** @ngInject */
+  constructor(target, templateSrv?, scopedVars?) {
+    this.target = target;
+    this.templateSrv = templateSrv;
+    this.scopedVars = scopedVars;
+
+    target.format = target.format || 'time_series';
+    target.timeColumn = target.timeColumn || 'time';
+    target.metricColumn = target.metricColumn || 'none';
+
+    target.group = target.group || [];
+    target.where = target.where || [{ type: 'macro', name: '$__timeFilter', params: [] }];
+    target.select = target.select || [[{ type: 'column', params: ['value'] }]];
+
+    // handle pre query gui panels gracefully
+    if (!('rawQuery' in this.target)) {
+      if ('rawSql' in target) {
+        // pre query gui panel
+        target.rawQuery = true;
+      } else {
+        // new panel
+        target.rawQuery = false;
+      }
+    }
+
+    // give interpolateQueryStr access to this
+    this.interpolateQueryStr = this.interpolateQueryStr.bind(this);
+  }
+
+  // remove identifier quoting from identifier to use in metadata queries
+  unquoteIdentifier(value) {
+    if (value[0] === '"' && value[value.length - 1] === '"') {
+      return value.substring(1, value.length - 1).replace(/""/g, '"');
+    } else {
+      return value;
+    }
+  }
+
+  quoteIdentifier(value) {
+    return '"' + value.replace(/"/g, '""') + '"';
+  }
+
+  quoteLiteral(value) {
+    return "'" + value.replace(/'/g, "''") + "'";
+  }
+
+  escapeLiteral(value) {
+    return value.replace(/'/g, "''");
+  }
+
+  hasTimeGroup() {
+    return _.find(this.target.group, (g: any) => g.type === 'time');
+  }
+
+  hasMetricColumn() {
+    return this.target.metricColumn !== 'none';
+  }
+
+  interpolateQueryStr(value, variable, defaultFormatFn) {
+    // if no multi or include all do not regexEscape
+    if (!variable.multi && !variable.includeAll) {
+      return this.escapeLiteral(value);
+    }
+
+    if (typeof value === 'string') {
+      return this.quoteLiteral(value);
+    }
+
+    const escapedValues = _.map(value, this.quoteLiteral);
+    return escapedValues.join(',');
+  }
+
+  render(interpolate?) {
+    const target = this.target;
+
+    // new query with no table set yet
+    if (!this.target.rawQuery && !('table' in this.target)) {
+      return '';
+    }
+
+    if (!target.rawQuery) {
+      target.rawSql = this.buildQuery();
+    }
+
+    if (interpolate) {
+      return this.templateSrv.replace(target.rawSql, this.scopedVars, this.interpolateQueryStr);
+    } else {
+      return target.rawSql;
+    }
+  }
+
+  hasUnixEpochTimecolumn() {
+    return ['int', 'bigint', 'double'].indexOf(this.target.timeColumnType) > -1;
+  }
+
+  buildTimeColumn(alias = true) {
+    const timeGroup = this.hasTimeGroup();
+    let query;
+    let macro = '$__timeGroup';
+
+    if (timeGroup) {
+      let args;
+      if (timeGroup.params.length > 1 && timeGroup.params[1] !== 'none') {
+        args = timeGroup.params.join(',');
+      } else {
+        args = timeGroup.params[0];
+      }
+      if (this.hasUnixEpochTimecolumn()) {
+        macro = '$__unixEpochGroup';
+      }
+      if (alias) {
+        macro += 'Alias';
+      }
+      query = macro + '(' + this.target.timeColumn + ',' + args + ')';
+    } else {
+      query = this.target.timeColumn;
+      if (alias) {
+        query += ' AS "time"';
+      }
+    }
+
+    return query;
+  }
+
+  buildMetricColumn() {
+    if (this.hasMetricColumn()) {
+      return this.target.metricColumn + ' AS metric';
+    }
+
+    return '';
+  }
+
+  buildValueColumns() {
+    let query = '';
+    for (const column of this.target.select) {
+      query += ',\n  ' + this.buildValueColumn(column);
+    }
+
+    return query;
+  }
+
+  buildValueColumn(column) {
+    let query = '';
+
+    const columnName = _.find(column, (g: any) => g.type === 'column');
+    query = columnName.params[0];
+
+    const aggregate = _.find(column, (g: any) => g.type === 'aggregate');
+
+    if (aggregate) {
+      const func = aggregate.params[0];
+      query = func + '(' + query + ')';
+    }
+
+    const alias = _.find(column, (g: any) => g.type === 'alias');
+    if (alias) {
+      query += ' AS ' + this.quoteIdentifier(alias.params[0]);
+    }
+
+    return query;
+  }
+
+  buildWhereClause() {
+    let query = '';
+    const conditions = _.map(this.target.where, (tag, index) => {
+      switch (tag.type) {
+        case 'macro':
+          return tag.name + '(' + this.target.timeColumn + ')';
+          break;
+        case 'expression':
+          return tag.params.join(' ');
+          break;
+      }
+    });
+
+    if (conditions.length > 0) {
+      query = '\nWHERE\n  ' + conditions.join(' AND\n  ');
+    }
+
+    return query;
+  }
+
+  buildGroupClause() {
+    let query = '';
+    let groupSection = '';
+
+    for (let i = 0; i < this.target.group.length; i++) {
+      const part = this.target.group[i];
+      if (i > 0) {
+        groupSection += ', ';
+      }
+      if (part.type === 'time') {
+        groupSection += '1';
+      } else {
+        groupSection += part.params[0];
+      }
+    }
+
+    if (groupSection.length) {
+      query = '\nGROUP BY ' + groupSection;
+      if (this.hasMetricColumn()) {
+        query += ',2';
+      }
+    }
+    return query;
+  }
+
+  buildQuery() {
+    let query = 'SELECT';
+
+    query += '\n  ' + this.buildTimeColumn();
+    if (this.hasMetricColumn()) {
+      query += ',\n  ' + this.buildMetricColumn();
+    }
+    query += this.buildValueColumns();
+
+    query += '\nFROM ' + this.target.table;
+
+    query += this.buildWhereClause();
+    query += this.buildGroupClause();
+
+    query += '\nORDER BY ' + this.buildTimeColumn(false);
+
+    return query;
+  }
+}
diff --git a/public/app/plugins/datasource/mysql/partials/query.editor.html b/public/app/plugins/datasource/mysql/partials/query.editor.html
index 1cc21adb22e..f857244b438 100644
--- a/public/app/plugins/datasource/mysql/partials/query.editor.html
+++ b/public/app/plugins/datasource/mysql/partials/query.editor.html
@@ -1,43 +1,141 @@
-<query-editor-row query-ctrl="ctrl" can-collapse="false">
-	<div class="gf-form-inline">
-		<div class="gf-form gf-form--grow">
-			<code-editor content="ctrl.target.rawSql" datasource="ctrl.datasource" on-change="ctrl.panelCtrl.refresh()" data-mode="sql">
-			</code-editor>
-		</div>
-	</div>
+<query-editor-row query-ctrl="ctrl" has-text-edit-mode="true">
+
+  <div ng-if="ctrl.target.rawQuery">
+    <div class="gf-form-inline">
+      <div class="gf-form gf-form--grow">
+        <code-editor content="ctrl.target.rawSql" datasource="ctrl.datasource" on-change="ctrl.panelCtrl.refresh()" data-mode="sql">
+        </code-editor>
+      </div>
+    </div>
+  </div>
+
+  <div ng-if="!ctrl.target.rawQuery">
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-6">FROM</label>
+        <metric-segment segment="ctrl.tableSegment" get-options="ctrl.getTableSegments()" on-change="ctrl.tableChanged()"></metric-segment>
+
+        <label class="gf-form-label query-keyword width-7">Time column</label>
+        <metric-segment segment="ctrl.timeColumnSegment" get-options="ctrl.getTimeColumnSegments()" on-change="ctrl.timeColumnChanged()"></metric-segment>
+
+        <label class="gf-form-label query-keyword width-9">
+          Metric column
+          <info-popover mode="right-normal">Column to be used as metric name for the value column.</info-popover>
+        </label>
+        <metric-segment segment="ctrl.metricColumnSegment" get-options="ctrl.getMetricColumnSegments()" on-change="ctrl.metricColumnChanged()"></metric-segment>
+      </div>
+
+      <div class="gf-form gf-form--grow">
+        <div class="gf-form-label gf-form-label--grow"></div>
+      </div>
+
+    </div>
+
+    <div class="gf-form-inline" ng-repeat="selectParts in ctrl.selectParts">
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-6">
+          <span ng-show="$index === 0">SELECT</span>&nbsp;
+        </label>
+      </div>
+
+      <div class="gf-form" ng-repeat="part in selectParts">
+        <sql-part-editor class="gf-form-label sql-part" part="part" handle-event="ctrl.handleSelectPartEvent(selectParts, part, $event)">
+        </sql-part-editor>
+      </div>
+
+      <div class="gf-form">
+        <label class="dropdown"
+                dropdown-typeahead="ctrl.selectMenu"
+                dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
+        </label>
+      </div>
+
+      <div class="gf-form gf-form--grow">
+        <div class="gf-form-label gf-form-label--grow"></div>
+      </div>
+    </div>
+
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-6">WHERE</label>
+      </div>
+
+      <div class="gf-form" ng-repeat="part in ctrl.whereParts">
+        <sql-part-editor class="gf-form-label sql-part" part="part" handle-event="ctrl.handleWherePartEvent(ctrl.whereParts, part, $event, $index)">
+        </sql-part-editor>
+      </div>
+
+      <div class="gf-form">
+        <metric-segment segment="ctrl.whereAdd" get-options="ctrl.getWhereOptions()" on-change="ctrl.addWhereAction(part, $index)"></metric-segment>
+      </div>
+
+      <div class="gf-form gf-form--grow">
+        <div class="gf-form-label gf-form-label--grow"></div>
+      </div>
+
+    </div>
+
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-6">
+          <span>GROUP BY</span>
+        </label>
+
+        <sql-part-editor  ng-repeat="part in ctrl.groupParts"
+                            part="part" class="gf-form-label sql-part"
+                            handle-event="ctrl.handleGroupPartEvent(part, $index, $event)">
+        </sql-part-editor>
+      </div>
+
+      <div class="gf-form">
+        <metric-segment segment="ctrl.groupAdd" get-options="ctrl.getGroupOptions()" on-change="ctrl.addGroupAction(part, $index)"></metric-segment>
+      </div>
+
+      <div class="gf-form gf-form--grow">
+        <div class="gf-form-label gf-form-label--grow"></div>
+      </div>
+    </div>
+
+  </div>
 
   <div class="gf-form-inline">
     <div class="gf-form">
-			<label class="gf-form-label query-keyword">Format as</label>
-			<div class="gf-form-select-wrapper">
-				<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
-			</div>
-		</div>
-		<div class="gf-form">
-      <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
+      <label class="gf-form-label query-keyword">Format as</label>
+      <div class="gf-form-select-wrapper">
+        <select class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label query-keyword pointer" ng-click="ctrl.toggleEditorMode()" ng-show="ctrl.panelCtrl.panel.type !== 'table'">
+        <span ng-show="ctrl.target.rawQuery">Query Builder</span>
+        <span ng-hide="ctrl.target.rawQuery">Edit SQL</span>
+      </label>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label query-keyword pointer" ng-click="ctrl.showHelp = !ctrl.showHelp">
         Show Help
         <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
         <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
       </label>
-		</div>
-		<div class="gf-form" ng-show="ctrl.lastQueryMeta">
-      <label class="gf-form-label query-keyword" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
+    </div>
+    <div class="gf-form" ng-show="ctrl.lastQueryMeta">
+      <label class="gf-form-label query-keyword pointer" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
         Generated SQL
         <i class="fa fa-caret-down" ng-show="ctrl.showLastQuerySQL"></i>
         <i class="fa fa-caret-right" ng-hide="ctrl.showLastQuerySQL"></i>
       </label>
-		</div>
-		<div class="gf-form gf-form--grow">
-			<div class="gf-form-label gf-form-label--grow"></div>
-		</div>
-	</div>
+    </div>
+    <div class="gf-form gf-form--grow">
+      <div class="gf-form-label gf-form-label--grow"></div>
+    </div>
+  </div>
 
-	<div class="gf-form" ng-show="ctrl.showLastQuerySQL">
-		<pre class="gf-form-pre">{{ctrl.lastQueryMeta.sql}}</pre>
-	</div>
+  <div class="gf-form" ng-show="ctrl.showLastQuerySQL">
+    <pre class="gf-form-pre">{{ctrl.lastQueryMeta.sql}}</pre>
+  </div>
 
-	<div class="gf-form"  ng-show="ctrl.showHelp">
-		<pre class="gf-form-pre alert alert-info">Time series:
+  <div class="gf-form"  ng-show="ctrl.showHelp">
+    <pre class="gf-form-pre alert alert-info">Time series:
 - return column named time or time_sec (in UTC), as a unix time stamp or any sql native date data type. You can use the macros below.
 - return column(s) with numeric datatype as values
 Optional:
@@ -64,7 +162,7 @@ Macros:
 
 Example of group by and order by with $__timeGroup:
 SELECT
-  $__timeGroup(timestamp_col, '1h') AS time,
+  $__timeGroupAlias(timestamp_col, '1h'),
   sum(value_double) as value
 FROM yourtable
 GROUP BY 1
@@ -75,13 +173,13 @@ Or build your own conditionals using these macros which just return the values:
 - $__timeTo() -&gt;  '2017-04-21T05:01:17Z'
 - $__unixEpochFrom() -&gt;  1492750877
 - $__unixEpochTo() -&gt;  1492750877
-		</pre>
-	</div>
+    </pre>
+  </div>
 
-	</div>
+  </div>
 
-	<div class="gf-form" ng-show="ctrl.lastQueryError">
-		<pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
-	</div>
+  <div class="gf-form" ng-show="ctrl.lastQueryError">
+    <pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
+  </div>
 
 </query-editor-row>
diff --git a/public/app/plugins/datasource/mysql/query_ctrl.ts b/public/app/plugins/datasource/mysql/query_ctrl.ts
index ced4d6e8b13..8161404a126 100644
--- a/public/app/plugins/datasource/mysql/query_ctrl.ts
+++ b/public/app/plugins/datasource/mysql/query_ctrl.ts
@@ -1,12 +1,10 @@
 import _ from 'lodash';
+import appEvents from 'app/core/app_events';
+import { MysqlMetaQuery } from './meta_query';
 import { QueryCtrl } from 'app/plugins/sdk';
-
-export interface MysqlQuery {
-  refId: string;
-  format: string;
-  alias: string;
-  rawSql: string;
-}
+import { SqlPart } from 'app/core/components/sql_part/sql_part';
+import MysqlQuery from './mysql_query';
+import sqlPart from './sql_part';
 
 export interface QueryMeta {
   sql: string;
@@ -26,17 +24,31 @@ export class MysqlQueryCtrl extends QueryCtrl {
 
   showLastQuerySQL: boolean;
   formats: any[];
-  target: MysqlQuery;
   lastQueryMeta: QueryMeta;
   lastQueryError: string;
   showHelp: boolean;
 
+  queryModel: MysqlQuery;
+  metaBuilder: MysqlMetaQuery;
+  tableSegment: any;
+  whereAdd: any;
+  timeColumnSegment: any;
+  metricColumnSegment: any;
+  selectMenu: any[];
+  selectParts: SqlPart[][];
+  groupParts: SqlPart[];
+  whereParts: SqlPart[];
+  groupAdd: any;
+
   /** @ngInject */
-  constructor($scope, $injector) {
+  constructor($scope, $injector, private templateSrv, private $q, private uiSegmentSrv) {
     super($scope, $injector);
 
-    this.target.format = this.target.format || 'time_series';
-    this.target.alias = '';
+    this.target = this.target;
+    this.queryModel = new MysqlQuery(this.target, templateSrv, this.panel.scopedVars);
+    this.metaBuilder = new MysqlMetaQuery(this.target, this.queryModel);
+    this.updateProjection();
+
     this.formats = [{ text: 'Time series', value: 'time_series' }, { text: 'Table', value: 'table' }];
 
     if (!this.target.rawSql) {
@@ -44,15 +56,199 @@ export class MysqlQueryCtrl extends QueryCtrl {
       if (this.panelCtrl.panel.type === 'table') {
         this.target.format = 'table';
         this.target.rawSql = 'SELECT 1';
+        this.target.rawQuery = true;
       } else {
         this.target.rawSql = defaultQuery;
+        this.datasource.metricFindQuery(this.metaBuilder.findMetricTable()).then(result => {
+          if (result.length > 0) {
+            this.target.table = result[0].text;
+            let segment = this.uiSegmentSrv.newSegment(this.target.table);
+            this.tableSegment.html = segment.html;
+            this.tableSegment.value = segment.value;
+
+            this.target.timeColumn = result[1].text;
+            segment = this.uiSegmentSrv.newSegment(this.target.timeColumn);
+            this.timeColumnSegment.html = segment.html;
+            this.timeColumnSegment.value = segment.value;
+
+            this.target.timeColumnType = 'timestamp';
+            this.target.select = [[{ type: 'column', params: [result[2].text] }]];
+            this.updateProjection();
+            this.panelCtrl.refresh();
+          }
+        });
       }
     }
 
+    if (!this.target.table) {
+      this.tableSegment = uiSegmentSrv.newSegment({ value: 'select table', fake: true });
+    } else {
+      this.tableSegment = uiSegmentSrv.newSegment(this.target.table);
+    }
+
+    this.timeColumnSegment = uiSegmentSrv.newSegment(this.target.timeColumn);
+    this.metricColumnSegment = uiSegmentSrv.newSegment(this.target.metricColumn);
+
+    this.buildSelectMenu();
+    this.whereAdd = this.uiSegmentSrv.newPlusButton();
+    this.groupAdd = this.uiSegmentSrv.newPlusButton();
+
     this.panelCtrl.events.on('data-received', this.onDataReceived.bind(this), $scope);
     this.panelCtrl.events.on('data-error', this.onDataError.bind(this), $scope);
   }
 
+  updateProjection() {
+    this.selectParts = _.map(this.target.select, (parts: any) => {
+      return _.map(parts, sqlPart.create).filter(n => n);
+    });
+    this.whereParts = _.map(this.target.where, sqlPart.create).filter(n => n);
+    this.groupParts = _.map(this.target.group, sqlPart.create).filter(n => n);
+  }
+
+  updatePersistedParts() {
+    this.target.select = _.map(this.selectParts, selectParts => {
+      return _.map(selectParts, (part: any) => {
+        return { type: part.def.type, datatype: part.datatype, params: part.params };
+      });
+    });
+    this.target.where = _.map(this.whereParts, (part: any) => {
+      return { type: part.def.type, datatype: part.datatype, name: part.name, params: part.params };
+    });
+    this.target.group = _.map(this.groupParts, (part: any) => {
+      return { type: part.def.type, datatype: part.datatype, params: part.params };
+    });
+  }
+
+  buildSelectMenu() {
+    this.selectMenu = [];
+    const aggregates = {
+      text: 'Aggregate Functions',
+      value: 'aggregate',
+      submenu: [
+        { text: 'Average', value: 'avg' },
+        { text: 'Count', value: 'count' },
+        { text: 'Maximum', value: 'max' },
+        { text: 'Minimum', value: 'min' },
+        { text: 'Sum', value: 'sum' },
+        { text: 'Standard deviation', value: 'stddev' },
+        { text: 'Variance', value: 'variance' },
+      ],
+    };
+
+    this.selectMenu.push(aggregates);
+    this.selectMenu.push({ text: 'Alias', value: 'alias' });
+    this.selectMenu.push({ text: 'Column', value: 'column' });
+  }
+
+  toggleEditorMode() {
+    if (this.target.rawQuery) {
+      appEvents.emit('confirm-modal', {
+        title: 'Warning',
+        text2: 'Switching to query builder may overwrite your raw SQL.',
+        icon: 'fa-exclamation',
+        yesText: 'Switch',
+        onConfirm: () => {
+          this.target.rawQuery = !this.target.rawQuery;
+        },
+      });
+    } else {
+      this.target.rawQuery = !this.target.rawQuery;
+    }
+  }
+
+  resetPlusButton(button) {
+    const plusButton = this.uiSegmentSrv.newPlusButton();
+    button.html = plusButton.html;
+    button.value = plusButton.value;
+  }
+
+  getTableSegments() {
+    return this.datasource
+      .metricFindQuery(this.metaBuilder.buildTableQuery())
+      .then(this.transformToSegments({}))
+      .catch(this.handleQueryError.bind(this));
+  }
+
+  tableChanged() {
+    this.target.table = this.tableSegment.value;
+    this.target.where = [];
+    this.target.group = [];
+    this.updateProjection();
+
+    const segment = this.uiSegmentSrv.newSegment('none');
+    this.metricColumnSegment.html = segment.html;
+    this.metricColumnSegment.value = segment.value;
+    this.target.metricColumn = 'none';
+
+    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)) {
+        const segment = this.uiSegmentSrv.newSegment(result[0].text);
+        this.timeColumnSegment.html = segment.html;
+        this.timeColumnSegment.value = segment.value;
+      }
+      return this.timeColumnChanged(false);
+    });
+    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();
+      }
+    });
+
+    this.$q.all([task1, task2]).then(() => {
+      this.panelCtrl.refresh();
+    });
+  }
+
+  getTimeColumnSegments() {
+    return this.datasource
+      .metricFindQuery(this.metaBuilder.buildColumnQuery('time'))
+      .then(this.transformToSegments({}))
+      .catch(this.handleQueryError.bind(this));
+  }
+
+  timeColumnChanged(refresh?: boolean) {
+    this.target.timeColumn = this.timeColumnSegment.value;
+    return this.datasource.metricFindQuery(this.metaBuilder.buildDatatypeQuery(this.target.timeColumn)).then(result => {
+      if (result.length === 1) {
+        if (this.target.timeColumnType !== result[0].text) {
+          this.target.timeColumnType = result[0].text;
+        }
+        let partModel;
+        if (this.queryModel.hasUnixEpochTimecolumn()) {
+          partModel = sqlPart.create({ type: 'macro', name: '$__unixEpochFilter', params: [] });
+        } else {
+          partModel = sqlPart.create({ type: 'macro', name: '$__timeFilter', params: [] });
+        }
+
+        if (this.whereParts.length >= 1 && this.whereParts[0].def.type === 'macro') {
+          // replace current macro
+          this.whereParts[0] = partModel;
+        } else {
+          this.whereParts.splice(0, 0, partModel);
+        }
+      }
+
+      this.updatePersistedParts();
+      if (refresh !== false) {
+        this.panelCtrl.refresh();
+      }
+    });
+  }
+
+  getMetricColumnSegments() {
+    return this.datasource
+      .metricFindQuery(this.metaBuilder.buildColumnQuery('metric'))
+      .then(this.transformToSegments({ addNone: true }))
+      .catch(this.handleQueryError.bind(this));
+  }
+
+  metricColumnChanged() {
+    this.target.metricColumn = this.metricColumnSegment.value;
+    this.panelCtrl.refresh();
+  }
+
   onDataReceived(dataList) {
     this.lastQueryMeta = null;
     this.lastQueryError = null;
@@ -72,4 +268,356 @@ export class MysqlQueryCtrl extends QueryCtrl {
       }
     }
   }
+
+  transformToSegments(config) {
+    return results => {
+      const segments = _.map(results, segment => {
+        return this.uiSegmentSrv.newSegment({
+          value: segment.text,
+          expandable: segment.expandable,
+        });
+      });
+
+      if (config.addTemplateVars) {
+        for (const variable of this.templateSrv.variables) {
+          let value;
+          value = '$' + variable.name;
+          if (config.templateQuoter && variable.multi === false) {
+            value = config.templateQuoter(value);
+          }
+
+          segments.unshift(
+            this.uiSegmentSrv.newSegment({
+              type: 'template',
+              value: value,
+              expandable: true,
+            })
+          );
+        }
+      }
+
+      if (config.addNone) {
+        segments.unshift(this.uiSegmentSrv.newSegment({ type: 'template', value: 'none', expandable: true }));
+      }
+
+      return segments;
+    };
+  }
+
+  findAggregateIndex(selectParts) {
+    return _.findIndex(selectParts, (p: any) => p.def.type === 'aggregate' || p.def.type === 'percentile');
+  }
+
+  findWindowIndex(selectParts) {
+    return _.findIndex(selectParts, (p: any) => p.def.type === 'window' || p.def.type === 'moving_window');
+  }
+
+  addSelectPart(selectParts, item, subItem) {
+    let partType = item.value;
+    if (subItem && subItem.type) {
+      partType = subItem.type;
+    }
+    let partModel = sqlPart.create({ type: partType });
+    if (subItem) {
+      partModel.params[0] = subItem.value;
+    }
+    let addAlias = false;
+
+    switch (partType) {
+      case 'column':
+        const parts = _.map(selectParts, (part: any) => {
+          return sqlPart.create({ type: part.def.type, params: _.clone(part.params) });
+        });
+        this.selectParts.push(parts);
+        break;
+      case 'percentile':
+      case 'aggregate':
+        // add group by if no group by yet
+        if (this.target.group.length === 0) {
+          this.addGroup('time', '$__interval');
+        }
+        const aggIndex = this.findAggregateIndex(selectParts);
+        if (aggIndex !== -1) {
+          // replace current aggregation
+          selectParts[aggIndex] = partModel;
+        } else {
+          selectParts.splice(1, 0, partModel);
+        }
+        if (!_.find(selectParts, (p: any) => p.def.type === 'alias')) {
+          addAlias = true;
+        }
+        break;
+      case 'moving_window':
+      case 'window':
+        const windowIndex = this.findWindowIndex(selectParts);
+        if (windowIndex !== -1) {
+          // replace current window function
+          selectParts[windowIndex] = partModel;
+        } else {
+          const aggIndex = this.findAggregateIndex(selectParts);
+          if (aggIndex !== -1) {
+            selectParts.splice(aggIndex + 1, 0, partModel);
+          } else {
+            selectParts.splice(1, 0, partModel);
+          }
+        }
+        if (!_.find(selectParts, (p: any) => p.def.type === 'alias')) {
+          addAlias = true;
+        }
+        break;
+      case 'alias':
+        addAlias = true;
+        break;
+    }
+
+    if (addAlias) {
+      // set initial alias name to column name
+      partModel = sqlPart.create({ type: 'alias', params: [selectParts[0].params[0].replace(/"/g, '')] });
+      if (selectParts[selectParts.length - 1].def.type === 'alias') {
+        selectParts[selectParts.length - 1] = partModel;
+      } else {
+        selectParts.push(partModel);
+      }
+    }
+
+    this.updatePersistedParts();
+    this.panelCtrl.refresh();
+  }
+
+  removeSelectPart(selectParts, part) {
+    if (part.def.type === 'column') {
+      // remove all parts of column unless its last column
+      if (this.selectParts.length > 1) {
+        const modelsIndex = _.indexOf(this.selectParts, selectParts);
+        this.selectParts.splice(modelsIndex, 1);
+      }
+    } else {
+      const partIndex = _.indexOf(selectParts, part);
+      selectParts.splice(partIndex, 1);
+    }
+
+    this.updatePersistedParts();
+  }
+
+  handleSelectPartEvent(selectParts, part, evt) {
+    switch (evt.name) {
+      case 'get-param-options': {
+        switch (part.def.type) {
+          // case 'aggregate':
+          //   return this.datasource
+          //     .metricFindQuery(this.metaBuilder.buildAggregateQuery())
+          //     .then(this.transformToSegments({}))
+          //     .catch(this.handleQueryError.bind(this));
+          case 'column':
+            return this.datasource
+              .metricFindQuery(this.metaBuilder.buildColumnQuery('value'))
+              .then(this.transformToSegments({}))
+              .catch(this.handleQueryError.bind(this));
+        }
+      }
+      case 'part-param-changed': {
+        this.updatePersistedParts();
+        this.panelCtrl.refresh();
+        break;
+      }
+      case 'action': {
+        this.removeSelectPart(selectParts, part);
+        this.panelCtrl.refresh();
+        break;
+      }
+      case 'get-part-actions': {
+        return this.$q.when([{ text: 'Remove', value: 'remove-part' }]);
+      }
+    }
+  }
+
+  handleGroupPartEvent(part, index, evt) {
+    switch (evt.name) {
+      case 'get-param-options': {
+        return this.datasource
+          .metricFindQuery(this.metaBuilder.buildColumnQuery())
+          .then(this.transformToSegments({}))
+          .catch(this.handleQueryError.bind(this));
+      }
+      case 'part-param-changed': {
+        this.updatePersistedParts();
+        this.panelCtrl.refresh();
+        break;
+      }
+      case 'action': {
+        this.removeGroup(part, index);
+        this.panelCtrl.refresh();
+        break;
+      }
+      case 'get-part-actions': {
+        return this.$q.when([{ text: 'Remove', value: 'remove-part' }]);
+      }
+    }
+  }
+
+  addGroup(partType, value) {
+    let params = [value];
+    if (partType === 'time') {
+      params = ['$__interval', 'none'];
+    }
+    const partModel = sqlPart.create({ type: partType, params: params });
+
+    if (partType === 'time') {
+      // put timeGroup at start
+      this.groupParts.splice(0, 0, partModel);
+    } else {
+      this.groupParts.push(partModel);
+    }
+
+    // add aggregates when adding group by
+    for (const selectParts of this.selectParts) {
+      if (!selectParts.some(part => part.def.type === 'aggregate')) {
+        const aggregate = sqlPart.create({ type: 'aggregate', params: ['avg'] });
+        selectParts.splice(1, 0, aggregate);
+        if (!selectParts.some(part => part.def.type === 'alias')) {
+          const alias = sqlPart.create({ type: 'alias', params: [selectParts[0].part.params[0]] });
+          selectParts.push(alias);
+        }
+      }
+    }
+
+    this.updatePersistedParts();
+  }
+
+  removeGroup(part, index) {
+    if (part.def.type === 'time') {
+      // remove aggregations
+      this.selectParts = _.map(this.selectParts, (s: any) => {
+        return _.filter(s, (part: any) => {
+          if (part.def.type === 'aggregate' || part.def.type === 'percentile') {
+            return false;
+          }
+          return true;
+        });
+      });
+    }
+
+    this.groupParts.splice(index, 1);
+    this.updatePersistedParts();
+  }
+
+  handleWherePartEvent(whereParts, part, evt, index) {
+    switch (evt.name) {
+      case 'get-param-options': {
+        switch (evt.param.name) {
+          case 'left':
+            return this.datasource
+              .metricFindQuery(this.metaBuilder.buildColumnQuery())
+              .then(this.transformToSegments({}))
+              .catch(this.handleQueryError.bind(this));
+          case 'right':
+            if (['int', 'bigint', 'double', 'datetime'].indexOf(part.datatype) > -1) {
+              // don't do value lookups for numerical fields
+              return this.$q.when([]);
+            } else {
+              return this.datasource
+                .metricFindQuery(this.metaBuilder.buildValueQuery(part.params[0]))
+                .then(
+                  this.transformToSegments({
+                    addTemplateVars: true,
+                    templateQuoter: (v: string) => {
+                      return this.queryModel.quoteLiteral(v);
+                    },
+                  })
+                )
+                .catch(this.handleQueryError.bind(this));
+            }
+          case 'op':
+            return this.$q.when(this.uiSegmentSrv.newOperators(this.metaBuilder.getOperators(part.datatype)));
+          default:
+            return this.$q.when([]);
+        }
+      }
+      case 'part-param-changed': {
+        this.updatePersistedParts();
+        this.datasource.metricFindQuery(this.metaBuilder.buildDatatypeQuery(part.params[0])).then((d: any) => {
+          if (d.length === 1) {
+            part.datatype = d[0].text;
+          }
+        });
+        this.panelCtrl.refresh();
+        break;
+      }
+      case 'action': {
+        // remove element
+        whereParts.splice(index, 1);
+        this.updatePersistedParts();
+        this.panelCtrl.refresh();
+        break;
+      }
+      case 'get-part-actions': {
+        return this.$q.when([{ text: 'Remove', value: 'remove-part' }]);
+      }
+    }
+  }
+
+  getWhereOptions() {
+    const options = [];
+    if (this.queryModel.hasUnixEpochTimecolumn()) {
+      options.push(this.uiSegmentSrv.newSegment({ type: 'macro', value: '$__unixEpochFilter' }));
+    } else {
+      options.push(this.uiSegmentSrv.newSegment({ type: 'macro', value: '$__timeFilter' }));
+    }
+    options.push(this.uiSegmentSrv.newSegment({ type: 'expression', value: 'Expression' }));
+    return this.$q.when(options);
+  }
+
+  addWhereAction(part, index) {
+    switch (this.whereAdd.type) {
+      case 'macro': {
+        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;
+        } else {
+          this.whereParts.splice(0, 0, partModel);
+        }
+        break;
+      }
+      default: {
+        this.whereParts.push(sqlPart.create({ type: 'expression', params: ['value', '=', 'value'] }));
+      }
+    }
+
+    this.updatePersistedParts();
+    this.resetPlusButton(this.whereAdd);
+    this.panelCtrl.refresh();
+  }
+
+  getGroupOptions() {
+    return this.datasource
+      .metricFindQuery(this.metaBuilder.buildColumnQuery('group'))
+      .then(tags => {
+        const options = [];
+        if (!this.queryModel.hasTimeGroup()) {
+          options.push(this.uiSegmentSrv.newSegment({ type: 'time', value: 'time($__interval,none)' }));
+        }
+        for (const tag of tags) {
+          options.push(this.uiSegmentSrv.newSegment({ type: 'column', value: tag.text }));
+        }
+        return options;
+      })
+      .catch(this.handleQueryError.bind(this));
+  }
+
+  addGroupAction() {
+    switch (this.groupAdd.value) {
+      default: {
+        this.addGroup(this.groupAdd.type, this.groupAdd.value);
+      }
+    }
+
+    this.resetPlusButton(this.groupAdd);
+    this.panelCtrl.refresh();
+  }
+
+  handleQueryError(err) {
+    this.error = err.message || 'Failed to issue metric query';
+    return [];
+  }
 }
diff --git a/public/app/plugins/datasource/mysql/specs/datasource.test.ts b/public/app/plugins/datasource/mysql/specs/datasource.test.ts
index 2cd9b189ec0..f3fbcd93333 100644
--- a/public/app/plugins/datasource/mysql/specs/datasource.test.ts
+++ b/public/app/plugins/datasource/mysql/specs/datasource.test.ts
@@ -9,12 +9,23 @@ describe('MySQLDatasource', () => {
     replace: jest.fn(text => text),
   };
 
+  const raw = {
+    from: moment.utc('2018-04-25 10:00'),
+    to: moment.utc('2018-04-25 11:00'),
+  };
   const ctx = {
     backendSrv,
+    timeSrvMock: {
+      timeRange: () => ({
+        from: raw.from,
+        to: raw.to,
+        raw: raw,
+      }),
+    },
   } as any;
 
   beforeEach(() => {
-    ctx.ds = new MysqlDatasource(instanceSettings, backendSrv, {}, templateSrv);
+    ctx.ds = new MysqlDatasource(instanceSettings, backendSrv, {}, templateSrv, ctx.timeSrvMock);
   });
 
   describe('When performing annotationQuery', () => {
diff --git a/public/app/plugins/datasource/mysql/sql_part.ts b/public/app/plugins/datasource/mysql/sql_part.ts
new file mode 100644
index 00000000000..e7984ef1346
--- /dev/null
+++ b/public/app/plugins/datasource/mysql/sql_part.ts
@@ -0,0 +1,86 @@
+import { SqlPartDef, SqlPart } from 'app/core/components/sql_part/sql_part';
+
+const index = [];
+
+function createPart(part): any {
+  const def = index[part.type];
+  if (!def) {
+    return null;
+  }
+
+  return new SqlPart(part, def);
+}
+
+function register(options: any) {
+  index[options.type] = new SqlPartDef(options);
+}
+
+register({
+  type: 'column',
+  style: 'label',
+  params: [{ type: 'column', dynamicLookup: true }],
+  defaultParams: ['value'],
+});
+
+register({
+  type: 'expression',
+  style: 'expression',
+  label: 'Expr:',
+  params: [
+    { name: 'left', type: 'string', dynamicLookup: true },
+    { name: 'op', type: 'string', dynamicLookup: true },
+    { name: 'right', type: 'string', dynamicLookup: true },
+  ],
+  defaultParams: ['value', '=', 'value'],
+});
+
+register({
+  type: 'macro',
+  style: 'label',
+  label: 'Macro:',
+  params: [],
+  defaultParams: [],
+});
+
+register({
+  type: 'aggregate',
+  style: 'label',
+  params: [
+    {
+      name: 'name',
+      type: 'string',
+      options: ['avg', 'count', 'min', 'max', 'sum', 'stddev', 'variance'],
+    },
+  ],
+  defaultParams: ['avg'],
+});
+
+register({
+  type: 'alias',
+  style: 'label',
+  params: [{ name: 'name', type: 'string', quote: 'double' }],
+  defaultParams: ['alias'],
+});
+
+register({
+  type: 'time',
+  style: 'function',
+  label: 'time',
+  params: [
+    {
+      name: 'interval',
+      type: 'interval',
+      options: ['$__interval', '1s', '10s', '1m', '5m', '10m', '15m', '1h'],
+    },
+    {
+      name: 'fill',
+      type: 'string',
+      options: ['none', 'NULL', 'previous', '0'],
+    },
+  ],
+  defaultParams: ['$__interval', 'none'],
+});
+
+export default {
+  create: createPart,
+};
diff --git a/public/app/plugins/datasource/postgres/postgres_query.ts b/public/app/plugins/datasource/postgres/postgres_query.ts
index 89518bb15e0..e315f1fecd2 100644
--- a/public/app/plugins/datasource/postgres/postgres_query.ts
+++ b/public/app/plugins/datasource/postgres/postgres_query.ts
@@ -184,6 +184,11 @@ export default class PostgresQuery {
       switch (windows.type) {
         case 'window':
           switch (windows.params[0]) {
+            case 'delta':
+              curr = query;
+              prev = 'lag(' + curr + ') OVER (' + over + ')';
+              query = curr + ' - ' + prev;
+              break;
             case 'increase':
               curr = query;
               prev = 'lag(' + curr + ') OVER (' + over + ')';
diff --git a/public/app/plugins/datasource/postgres/query_ctrl.ts b/public/app/plugins/datasource/postgres/query_ctrl.ts
index 9343a260a9e..aa66a1594cb 100644
--- a/public/app/plugins/datasource/postgres/query_ctrl.ts
+++ b/public/app/plugins/datasource/postgres/query_ctrl.ts
@@ -158,6 +158,7 @@ export class PostgresQueryCtrl extends QueryCtrl {
       text: 'Window Functions',
       value: 'window',
       submenu: [
+        { text: 'Delta', value: 'delta' },
         { text: 'Increase', value: 'increase' },
         { text: 'Rate', value: 'rate' },
         { text: 'Sum', value: 'sum' },
diff --git a/public/app/plugins/datasource/postgres/sql_part.ts b/public/app/plugins/datasource/postgres/sql_part.ts
index 695060f6366..f8caaf0e39e 100644
--- a/public/app/plugins/datasource/postgres/sql_part.ts
+++ b/public/app/plugins/datasource/postgres/sql_part.ts
@@ -107,7 +107,7 @@ register({
     {
       name: 'function',
       type: 'string',
-      options: ['increase', 'rate', 'sum'],
+      options: ['delta', 'increase', 'rate', 'sum'],
     },
   ],
   defaultParams: ['increase'],
diff --git a/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx b/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
new file mode 100644
index 00000000000..a2d3a03d794
--- /dev/null
+++ b/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const CHEAT_SHEET_ITEMS = [
+  {
+    title: 'Request Rate',
+    expression: 'rate(http_request_total[5m])',
+    label:
+      'Given an HTTP request counter, this query calculates the per-second average request rate over the last 5 minutes.',
+  },
+  {
+    title: '95th Percentile of Request Latencies',
+    expression: 'histogram_quantile(0.95, sum(rate(prometheus_http_request_duration_seconds_bucket[5m])) by (le))',
+    label: 'Calculates the 95th percentile of HTTP request rate over 5 minute windows.',
+  },
+  {
+    title: 'Alerts Firing',
+    expression: 'sort_desc(sum(sum_over_time(ALERTS{alertstate="firing"}[24h])) by (alertname))',
+    label: 'Sums up the alerts that have been firing over the last 24 hours.',
+  },
+];
+
+export default (props: any) => (
+  <div>
+    <h1>PromQL Cheat Sheet</h1>
+    {CHEAT_SHEET_ITEMS.map(item => (
+      <div className="cheat-sheet-item" key={item.expression}>
+        <div className="cheat-sheet-item__title">{item.title}</div>
+        <div className="cheat-sheet-item__expression" onClick={e => props.onClickQuery(item.expression)}>
+          <code>{item.expression}</code>
+        </div>
+        <div className="cheat-sheet-item__label">{item.label}</div>
+      </div>
+    ))}
+  </div>
+);
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx
new file mode 100644
index 00000000000..bc7eb301be1
--- /dev/null
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.test.tsx
@@ -0,0 +1,41 @@
+import { groupMetricsByPrefix, RECORDING_RULES_GROUP } from './PromQueryField';
+
+describe('groupMetricsByPrefix()', () => {
+  it('returns an empty group for no metrics', () => {
+    expect(groupMetricsByPrefix([])).toEqual([]);
+  });
+
+  it('returns options grouped by prefix', () => {
+    expect(groupMetricsByPrefix(['foo_metric'])).toMatchObject([
+      {
+        value: 'foo',
+        children: [
+          {
+            value: 'foo_metric',
+          },
+        ],
+      },
+    ]);
+  });
+
+  it('returns options without prefix as toplevel option', () => {
+    expect(groupMetricsByPrefix(['metric'])).toMatchObject([
+      {
+        value: 'metric',
+      },
+    ]);
+  });
+
+  it('returns recording rules grouped separately', () => {
+    expect(groupMetricsByPrefix([':foo_metric:'])).toMatchObject([
+      {
+        value: RECORDING_RULES_GROUP,
+        children: [
+          {
+            value: ':foo_metric:',
+          },
+        ],
+      },
+    ]);
+  });
+});
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
new file mode 100644
index 00000000000..649b17ad8cf
--- /dev/null
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
@@ -0,0 +1,273 @@
+import _ from 'lodash';
+import React from 'react';
+import Cascader from 'rc-cascader';
+import PluginPrism from 'slate-prism';
+import Prism from 'prismjs';
+
+import { TypeaheadOutput } from 'app/types/explore';
+
+// dom also includes Element polyfills
+import { getNextCharacter, getPreviousCousin } from 'app/features/explore/utils/dom';
+import BracesPlugin from 'app/features/explore/slate-plugins/braces';
+import RunnerPlugin from 'app/features/explore/slate-plugins/runner';
+import TypeaheadField, { TypeaheadInput, QueryFieldState } from 'app/features/explore/QueryField';
+
+const HISTOGRAM_GROUP = '__histograms__';
+const METRIC_MARK = 'metric';
+const PRISM_SYNTAX = 'promql';
+export const RECORDING_RULES_GROUP = '__recording_rules__';
+
+export function groupMetricsByPrefix(metrics: string[], delimiter = '_'): CascaderOption[] {
+  // Filter out recording rules and insert as first option
+  const ruleRegex = /:\w+:/;
+  const ruleNames = metrics.filter(metric => ruleRegex.test(metric));
+  const rulesOption = {
+    label: 'Recording rules',
+    value: RECORDING_RULES_GROUP,
+    children: ruleNames
+      .slice()
+      .sort()
+      .map(name => ({ label: name, value: name })),
+  };
+
+  const options = ruleNames.length > 0 ? [rulesOption] : [];
+
+  const metricsOptions = _.chain(metrics)
+    .filter(metric => !ruleRegex.test(metric))
+    .groupBy(metric => metric.split(delimiter)[0])
+    .map((metricsForPrefix: string[], prefix: string): CascaderOption => {
+      const prefixIsMetric = metricsForPrefix.length === 1 && metricsForPrefix[0] === prefix;
+      const children = prefixIsMetric ? [] : metricsForPrefix.sort().map(m => ({ label: m, value: m }));
+      return {
+        children,
+        label: prefix,
+        value: prefix,
+      };
+    })
+    .sortBy('label')
+    .value();
+
+  return [...options, ...metricsOptions];
+}
+
+export function willApplySuggestion(suggestion: string, { typeaheadContext, typeaheadText }: QueryFieldState): string {
+  // Modify suggestion based on context
+  switch (typeaheadContext) {
+    case 'context-labels': {
+      const nextChar = getNextCharacter();
+      if (!nextChar || nextChar === '}' || nextChar === ',') {
+        suggestion += '=';
+      }
+      break;
+    }
+
+    case 'context-label-values': {
+      // Always add quotes and remove existing ones instead
+      if (!typeaheadText.match(/^(!?=~?"|")/)) {
+        suggestion = `"${suggestion}`;
+      }
+      if (getNextCharacter() !== '"') {
+        suggestion = `${suggestion}"`;
+      }
+      break;
+    }
+
+    default:
+  }
+  return suggestion;
+}
+
+interface CascaderOption {
+  label: string;
+  value: string;
+  children?: CascaderOption[];
+  disabled?: boolean;
+}
+
+interface PromQueryFieldProps {
+  datasource: any;
+  error?: string | JSX.Element;
+  hint?: any;
+  history?: any[];
+  initialQuery?: string | null;
+  metricsByPrefix?: CascaderOption[];
+  onClickHintFix?: (action: any) => void;
+  onPressEnter?: () => void;
+  onQueryChange?: (value: string, override?: boolean) => void;
+}
+
+interface PromQueryFieldState {
+  metricsOptions: any[];
+  metricsByPrefix: CascaderOption[];
+  syntaxLoaded: boolean;
+}
+
+class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryFieldState> {
+  plugins: any[];
+  languageProvider: any;
+
+  constructor(props: PromQueryFieldProps, context) {
+    super(props, context);
+
+    if (props.datasource.languageProvider) {
+      this.languageProvider = props.datasource.languageProvider;
+    }
+
+    this.plugins = [
+      BracesPlugin(),
+      RunnerPlugin({ handler: props.onPressEnter }),
+      PluginPrism({
+        onlyIn: node => node.type === 'code_block',
+        getSyntax: node => 'promql',
+      }),
+    ];
+
+    this.state = {
+      metricsByPrefix: [],
+      metricsOptions: [],
+      syntaxLoaded: false,
+    };
+  }
+
+  componentDidMount() {
+    if (this.languageProvider) {
+      this.languageProvider
+        .start()
+        .then(remaining => {
+          remaining.map(task => task.then(this.onReceiveMetrics).catch(() => {}));
+        })
+        .then(() => this.onReceiveMetrics());
+    }
+  }
+
+  onChangeMetrics = (values: string[], selectedOptions: CascaderOption[]) => {
+    let query;
+    if (selectedOptions.length === 1) {
+      if (selectedOptions[0].children.length === 0) {
+        query = selectedOptions[0].value;
+      } else {
+        // Ignore click on group
+        return;
+      }
+    } else {
+      const prefix = selectedOptions[0].value;
+      const metric = selectedOptions[1].value;
+      if (prefix === HISTOGRAM_GROUP) {
+        query = `histogram_quantile(0.95, sum(rate(${metric}[5m])) by (le))`;
+      } else {
+        query = metric;
+      }
+    }
+    this.onChangeQuery(query, true);
+  };
+
+  onChangeQuery = (value: string, override?: boolean) => {
+    // Send text change to parent
+    const { onQueryChange } = this.props;
+    if (onQueryChange) {
+      onQueryChange(value, override);
+    }
+  };
+
+  onClickHintFix = () => {
+    const { hint, onClickHintFix } = this.props;
+    if (onClickHintFix && hint && hint.fix) {
+      onClickHintFix(hint.fix.action);
+    }
+  };
+
+  onReceiveMetrics = () => {
+    const { histogramMetrics, metrics } = this.languageProvider;
+    if (!metrics) {
+      return;
+    }
+
+    Prism.languages[PRISM_SYNTAX] = this.languageProvider.getSyntax();
+    Prism.languages[PRISM_SYNTAX][METRIC_MARK] = {
+      alias: 'variable',
+      pattern: new RegExp(`(?:^|\\s)(${metrics.join('|')})(?:$|\\s)`),
+    };
+
+    // Build metrics tree
+    const metricsByPrefix = groupMetricsByPrefix(metrics);
+    const histogramOptions = histogramMetrics.map(hm => ({ label: hm, value: hm }));
+    const metricsOptions =
+      histogramMetrics.length > 0
+        ? [
+            { label: 'Histograms', value: HISTOGRAM_GROUP, children: histogramOptions, isLeaf: false },
+            ...metricsByPrefix,
+          ]
+        : metricsByPrefix;
+
+    this.setState({ metricsOptions, syntaxLoaded: true });
+  };
+
+  onTypeahead = (typeahead: TypeaheadInput): TypeaheadOutput => {
+    if (!this.languageProvider) {
+      return { suggestions: [] };
+    }
+
+    const { history } = this.props;
+    const { prefix, text, value, wrapperNode } = typeahead;
+
+    // Get DOM-dependent context
+    const wrapperClasses = Array.from(wrapperNode.classList);
+    const labelKeyNode = getPreviousCousin(wrapperNode, '.attr-name');
+    const labelKey = labelKeyNode && labelKeyNode.textContent;
+    const nextChar = getNextCharacter();
+
+    const result = this.languageProvider.provideCompletionItems(
+      { text, value, prefix, wrapperClasses, labelKey },
+      { history }
+    );
+
+    console.log('handleTypeahead', wrapperClasses, text, prefix, nextChar, labelKey, result.context);
+
+    return result;
+  };
+
+  render() {
+    const { error, hint, initialQuery } = this.props;
+    const { metricsOptions, syntaxLoaded } = this.state;
+    const cleanText = this.languageProvider ? this.languageProvider.cleanText : undefined;
+    const chooserText = syntaxLoaded ? 'Metrics' : 'Loading matrics...';
+
+    return (
+      <div className="prom-query-field">
+        <div className="prom-query-field-tools">
+          <Cascader options={metricsOptions} onChange={this.onChangeMetrics}>
+            <button className="btn navbar-button navbar-button--tight" disabled={!syntaxLoaded}>
+              {chooserText}
+            </button>
+          </Cascader>
+        </div>
+        <div className="prom-query-field-wrapper">
+          <TypeaheadField
+            additionalPlugins={this.plugins}
+            cleanText={cleanText}
+            initialValue={initialQuery}
+            onTypeahead={this.onTypeahead}
+            onWillApplySuggestion={willApplySuggestion}
+            onValueChanged={this.onChangeQuery}
+            placeholder="Enter a PromQL query"
+            portalOrigin="prometheus"
+            syntaxLoaded={syntaxLoaded}
+          />
+          {error ? <div className="prom-query-field-info text-error">{error}</div> : null}
+          {hint ? (
+            <div className="prom-query-field-info text-warning">
+              {hint.label}{' '}
+              {hint.fix ? (
+                <a className="text-link muted" onClick={this.onClickHintFix}>
+                  {hint.fix.label}
+                </a>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default PromQueryField;
diff --git a/public/app/plugins/datasource/prometheus/components/PromStart.tsx b/public/app/plugins/datasource/prometheus/components/PromStart.tsx
new file mode 100644
index 00000000000..548360b342d
--- /dev/null
+++ b/public/app/plugins/datasource/prometheus/components/PromStart.tsx
@@ -0,0 +1,60 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+
+import PromCheatSheet from './PromCheatSheet';
+
+const TAB_MENU_ITEMS = [
+  {
+    text: 'Start',
+    id: 'start',
+    icon: 'fa fa-rocket',
+  },
+];
+
+export default class PromStart extends PureComponent<any, { active: string }> {
+  state = {
+    active: 'start',
+  };
+
+  onClickTab = active => {
+    this.setState({ active });
+  };
+
+  render() {
+    const { active } = this.state;
+    const customCss = '';
+
+    return (
+      <div style={{ margin: '45px 0', border: '1px solid #ddd', borderRadius: 5 }}>
+        <div className="page-header-canvas">
+          <div className="page-container">
+            <div className="page-header">
+              <nav>
+                <ul className={`gf-tabs ${customCss}`}>
+                  {TAB_MENU_ITEMS.map((tab, idx) => {
+                    const tabClasses = classNames({
+                      'gf-tabs-link': true,
+                      active: tab.id === active,
+                    });
+
+                    return (
+                      <li className="gf-tabs-item" key={tab.id}>
+                        <a className={tabClasses} onClick={() => this.onClickTab(tab.id)}>
+                          <i className={tab.icon} />
+                          {tab.text}
+                        </a>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </nav>
+            </div>
+          </div>
+        </div>
+        <div className="page-container page-body">
+          {active === 'start' && <PromCheatSheet onClickQuery={this.props.onClickQuery} />}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/prometheus/dashboards/grafana_stats.json b/public/app/plugins/datasource/prometheus/dashboards/grafana_stats.json
index aa9384a907d..47975d83d9c 100644
--- a/public/app/plugins/datasource/prometheus/dashboards/grafana_stats.json
+++ b/public/app/plugins/datasource/prometheus/dashboards/grafana_stats.json
@@ -753,7 +753,7 @@
             "steppedLine": false,
             "targets": [
               {
-                "expr": "increase(grafana_alerting_result_total[1m])",
+                "expr": "increase(grafana_alerting_active_alerts[1m])",
                 "format": "time_series",
                 "intervalFactor": 3,
                 "legendFormat": "{{state}}",
@@ -764,7 +764,7 @@
             "thresholds": [],
             "timeFrom": null,
             "timeShift": null,
-            "title": "Grafana alert results",
+            "title": "Grafana active alerts",
             "tooltip": {
               "shared": true,
               "sort": 0,
@@ -1049,4 +1049,4 @@
       ]
     },
     "timezone": ""
-  }
\ No newline at end of file
+  }
diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts
index 89f88a946c2..8514b6ca7d4 100644
--- a/public/app/plugins/datasource/prometheus/datasource.ts
+++ b/public/app/plugins/datasource/prometheus/datasource.ts
@@ -5,6 +5,7 @@ import kbn from 'app/core/utils/kbn';
 import * as dateMath from 'app/core/utils/datemath';
 import PrometheusMetricFindQuery from './metric_find_query';
 import { ResultTransformer } from './result_transformer';
+import PrometheusLanguageProvider from './language_provider';
 import { BackendSrv } from 'app/core/services/backend_srv';
 
 import addLabelToQuery from './add_label_to_query';
@@ -60,6 +61,7 @@ export class PrometheusDatasource {
   interval: string;
   queryTimeout: string;
   httpMethod: string;
+  languageProvider: PrometheusLanguageProvider;
   resultTransformer: ResultTransformer;
 
   /** @ngInject */
@@ -76,6 +78,7 @@ export class PrometheusDatasource {
     this.httpMethod = instanceSettings.jsonData.httpMethod || 'GET';
     this.resultTransformer = new ResultTransformer(templateSrv);
     this.ruleMappings = {};
+    this.languageProvider = new PrometheusLanguageProvider(this);
   }
 
   init() {
@@ -461,6 +464,9 @@ export class PrometheusDatasource {
       case 'ADD_RATE': {
         return `rate(${query}[5m])`;
       }
+      case 'ADD_SUM': {
+        return `sum(${query.trim()}) by ($1)`;
+      }
       case 'EXPAND_RULES': {
         const mapping = action.mapping;
         if (mapping) {
diff --git a/public/app/plugins/datasource/prometheus/language_provider.ts b/public/app/plugins/datasource/prometheus/language_provider.ts
new file mode 100644
index 00000000000..5f97ebfa7b5
--- /dev/null
+++ b/public/app/plugins/datasource/prometheus/language_provider.ts
@@ -0,0 +1,311 @@
+import _ from 'lodash';
+import moment from 'moment';
+
+import {
+  CompletionItem,
+  CompletionItemGroup,
+  LanguageProvider,
+  TypeaheadInput,
+  TypeaheadOutput,
+} from 'app/types/explore';
+
+import { parseSelector, processLabels, RATE_RANGES } from './language_utils';
+import PromqlSyntax, { FUNCTIONS } from './promql';
+
+const DEFAULT_KEYS = ['job', 'instance'];
+const EMPTY_SELECTOR = '{}';
+const HISTOGRAM_SELECTOR = '{le!=""}'; // Returns all timeseries for histograms
+const HISTORY_ITEM_COUNT = 5;
+const HISTORY_COUNT_CUTOFF = 1000 * 60 * 60 * 24; // 24h
+
+const wrapLabel = (label: string) => ({ label });
+
+const setFunctionMove = (suggestion: CompletionItem): CompletionItem => {
+  suggestion.move = -1;
+  return suggestion;
+};
+
+export function addHistoryMetadata(item: CompletionItem, history: any[]): CompletionItem {
+  const cutoffTs = Date.now() - HISTORY_COUNT_CUTOFF;
+  const historyForItem = history.filter(h => h.ts > cutoffTs && h.query === item.label);
+  const count = historyForItem.length;
+  const recent = historyForItem[0];
+  let hint = `Queried ${count} times in the last 24h.`;
+  if (recent) {
+    const lastQueried = moment(recent.ts).fromNow();
+    hint = `${hint} Last queried ${lastQueried}.`;
+  }
+  return {
+    ...item,
+    documentation: hint,
+  };
+}
+
+export default class PromQlLanguageProvider extends LanguageProvider {
+  histogramMetrics?: string[];
+  labelKeys?: { [index: string]: string[] }; // metric -> [labelKey,...]
+  labelValues?: { [index: string]: { [index: string]: string[] } }; // metric -> labelKey -> [labelValue,...]
+  metrics?: string[];
+  started: boolean;
+
+  constructor(datasource: any, initialValues?: any) {
+    super();
+
+    this.datasource = datasource;
+    this.histogramMetrics = [];
+    this.labelKeys = {};
+    this.labelValues = {};
+    this.metrics = [];
+    this.started = false;
+
+    Object.assign(this, initialValues);
+  }
+  // Strip syntax chars
+  cleanText = s => s.replace(/[{}[\]="(),!~+\-*/^%]/g, '').trim();
+
+  getSyntax() {
+    return PromqlSyntax;
+  }
+
+  request = url => {
+    return this.datasource.metadataRequest(url);
+  };
+
+  start = () => {
+    if (!this.started) {
+      this.started = true;
+      return this.fetchMetricNames().then(() => [this.fetchHistogramMetrics()]);
+    }
+    return Promise.resolve([]);
+  };
+
+  // Keep this DOM-free for testing
+  provideCompletionItems({ prefix, wrapperClasses, text }: TypeaheadInput, context?: any): TypeaheadOutput {
+    // Syntax spans have 3 classes by default. More indicate a recognized token
+    const tokenRecognized = wrapperClasses.length > 3;
+    // Determine candidates by CSS context
+    if (_.includes(wrapperClasses, 'context-range')) {
+      // Suggestions for metric[|]
+      return this.getRangeCompletionItems();
+    } else if (_.includes(wrapperClasses, 'context-labels')) {
+      // Suggestions for metric{|} and metric{foo=|}, as well as metric-independent label queries like {|}
+      return this.getLabelCompletionItems.apply(this, arguments);
+    } else if (_.includes(wrapperClasses, 'context-aggregation')) {
+      return this.getAggregationCompletionItems.apply(this, arguments);
+    } else if (
+      // Show default suggestions in a couple of scenarios
+      (prefix && !tokenRecognized) || // Non-empty prefix, but not inside known token
+      (prefix === '' && !text.match(/^[\]})\s]+$/)) || // Empty prefix, but not following a closing brace
+      text.match(/[+\-*/^%]/) // Anything after binary operator
+    ) {
+      return this.getEmptyCompletionItems(context || {});
+    }
+
+    return {
+      suggestions: [],
+    };
+  }
+
+  getEmptyCompletionItems(context: any): TypeaheadOutput {
+    const { history } = context;
+    const { metrics } = this;
+    const suggestions: CompletionItemGroup[] = [];
+
+    if (history && history.length > 0) {
+      const historyItems = _.chain(history)
+        .uniqBy('query')
+        .take(HISTORY_ITEM_COUNT)
+        .map(h => h.query)
+        .map(wrapLabel)
+        .map(item => addHistoryMetadata(item, history))
+        .value();
+
+      suggestions.push({
+        prefixMatch: true,
+        skipSort: true,
+        label: 'History',
+        items: historyItems,
+      });
+    }
+
+    suggestions.push({
+      prefixMatch: true,
+      label: 'Functions',
+      items: FUNCTIONS.map(setFunctionMove),
+    });
+
+    if (metrics) {
+      suggestions.push({
+        label: 'Metrics',
+        items: metrics.map(wrapLabel),
+      });
+    }
+    return { suggestions };
+  }
+
+  getRangeCompletionItems(): TypeaheadOutput {
+    return {
+      context: 'context-range',
+      suggestions: [
+        {
+          label: 'Range vector',
+          items: [...RATE_RANGES].map(wrapLabel),
+        },
+      ],
+    };
+  }
+
+  getAggregationCompletionItems({ value }: TypeaheadInput): TypeaheadOutput {
+    let refresher: Promise<any> = null;
+    const suggestions: CompletionItemGroup[] = [];
+
+    // Stitch all query lines together to support multi-line queries
+    let queryOffset;
+    const queryText = value.document.getBlocks().reduce((text, block) => {
+      const blockText = block.getText();
+      if (value.anchorBlock.key === block.key) {
+        // Newline characters are not accounted for but this is irrelevant
+        // for the purpose of extracting the selector string
+        queryOffset = value.anchorOffset + text.length;
+      }
+      text += blockText;
+      return text;
+    }, '');
+
+    const leftSide = queryText.slice(0, queryOffset);
+    const openParensAggregationIndex = leftSide.lastIndexOf('(');
+    const openParensSelectorIndex = leftSide.slice(0, openParensAggregationIndex).lastIndexOf('(');
+    const closeParensSelectorIndex = leftSide.slice(openParensSelectorIndex).indexOf(')') + openParensSelectorIndex;
+
+    let selectorString = leftSide.slice(openParensSelectorIndex + 1, closeParensSelectorIndex);
+
+    // Range vector syntax not accounted for by subsequent parse so discard it if present
+    selectorString = selectorString.replace(/\[[^\]]+\]$/, '');
+
+    const selector = parseSelector(selectorString, selectorString.length - 2).selector;
+
+    const labelKeys = this.labelKeys[selector];
+    if (labelKeys) {
+      suggestions.push({ label: 'Labels', items: labelKeys.map(wrapLabel) });
+    } else {
+      refresher = this.fetchSeriesLabels(selector);
+    }
+
+    return {
+      refresher,
+      suggestions,
+      context: 'context-aggregation',
+    };
+  }
+
+  getLabelCompletionItems({ text, wrapperClasses, labelKey, value }: TypeaheadInput): TypeaheadOutput {
+    let context: string;
+    let refresher: Promise<any> = null;
+    const suggestions: CompletionItemGroup[] = [];
+    const line = value.anchorBlock.getText();
+    const cursorOffset: number = value.anchorOffset;
+
+    // Get normalized selector
+    let selector;
+    let parsedSelector;
+    try {
+      parsedSelector = parseSelector(line, cursorOffset);
+      selector = parsedSelector.selector;
+    } catch {
+      selector = EMPTY_SELECTOR;
+    }
+    const containsMetric = selector.indexOf('__name__=') > -1;
+    const existingKeys = parsedSelector ? parsedSelector.labelKeys : [];
+
+    if ((text && text.match(/^!?=~?/)) || _.includes(wrapperClasses, 'attr-value')) {
+      // Label values
+      if (labelKey && this.labelValues[selector] && this.labelValues[selector][labelKey]) {
+        const labelValues = this.labelValues[selector][labelKey];
+        context = 'context-label-values';
+        suggestions.push({
+          label: `Label values for "${labelKey}"`,
+          items: labelValues.map(wrapLabel),
+        });
+      }
+    } else {
+      // Label keys
+      const labelKeys = this.labelKeys[selector] || (containsMetric ? null : DEFAULT_KEYS);
+      if (labelKeys) {
+        const possibleKeys = _.difference(labelKeys, existingKeys);
+        if (possibleKeys.length > 0) {
+          context = 'context-labels';
+          suggestions.push({ label: `Labels`, items: possibleKeys.map(wrapLabel) });
+        }
+      }
+    }
+
+    // Query labels for selector
+    if (selector && !this.labelValues[selector]) {
+      if (selector === EMPTY_SELECTOR) {
+        // Query label values for default labels
+        refresher = Promise.all(DEFAULT_KEYS.map(key => this.fetchLabelValues(key)));
+      } else {
+        refresher = this.fetchSeriesLabels(selector, !containsMetric);
+      }
+    }
+
+    return { context, refresher, suggestions };
+  }
+
+  async fetchMetricNames() {
+    const url = '/api/v1/label/__name__/values';
+    try {
+      const res = await this.request(url);
+      const body = await (res.data || res.json());
+      this.metrics = body.data;
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  async fetchHistogramMetrics() {
+    await this.fetchSeriesLabels(HISTOGRAM_SELECTOR, true);
+    const histogramSeries = this.labelValues[HISTOGRAM_SELECTOR];
+    if (histogramSeries && histogramSeries['__name__']) {
+      this.histogramMetrics = histogramSeries['__name__'].slice().sort();
+    }
+  }
+
+  async fetchLabelValues(key: string) {
+    const url = `/api/v1/label/${key}/values`;
+    try {
+      const res = await this.request(url);
+      const body = await (res.data || res.json());
+      const exisingValues = this.labelValues[EMPTY_SELECTOR];
+      const values = {
+        ...exisingValues,
+        [key]: body.data,
+      };
+      this.labelValues = {
+        ...this.labelValues,
+        [EMPTY_SELECTOR]: values,
+      };
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  async fetchSeriesLabels(name: string, withName?: boolean) {
+    const url = `/api/v1/series?match[]=${name}`;
+    try {
+      const res = await this.request(url);
+      const body = await (res.data || res.json());
+      const { keys, values } = processLabels(body.data, withName);
+      this.labelKeys = {
+        ...this.labelKeys,
+        [name]: keys,
+      };
+      this.labelValues = {
+        ...this.labelValues,
+        [name]: values,
+      };
+    } catch (e) {
+      console.error(e);
+    }
+  }
+}
diff --git a/public/app/features/explore/utils/prometheus.ts b/public/app/plugins/datasource/prometheus/language_utils.ts
similarity index 96%
rename from public/app/features/explore/utils/prometheus.ts
rename to public/app/plugins/datasource/prometheus/language_utils.ts
index 170c5ec8cc5..5995c427cd1 100644
--- a/public/app/features/explore/utils/prometheus.ts
+++ b/public/app/plugins/datasource/prometheus/language_utils.ts
@@ -23,9 +23,6 @@ export function processLabels(labels, withName = false) {
   return { values, keys: Object.keys(values) };
 }
 
-// Strip syntax chars
-export const cleanText = s => s.replace(/[{}[\]="(),!~+\-*/^%]/g, '').trim();
-
 // const cleanSelectorRegexp = /\{(\w+="[^"\n]*?")(,\w+="[^"\n]*?")*\}/;
 const selectorRegexp = /\{[^}]*?\}/;
 const labelRegexp = /\b(\w+)(!?=~?)("[^"\n]*?")/g;
diff --git a/public/app/plugins/datasource/prometheus/module.ts b/public/app/plugins/datasource/prometheus/module.ts
index d7e0b8ebe2c..814f6fbe60a 100644
--- a/public/app/plugins/datasource/prometheus/module.ts
+++ b/public/app/plugins/datasource/prometheus/module.ts
@@ -2,6 +2,9 @@ import { PrometheusDatasource } from './datasource';
 import { PrometheusQueryCtrl } from './query_ctrl';
 import { PrometheusConfigCtrl } from './config_ctrl';
 
+import PrometheusStartPage from './components/PromStart';
+import PromQueryField from './components/PromQueryField';
+
 class PrometheusAnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';
 }
@@ -11,4 +14,6 @@ export {
   PrometheusQueryCtrl as QueryCtrl,
   PrometheusConfigCtrl as ConfigCtrl,
   PrometheusAnnotationsQueryCtrl as AnnotationsQueryCtrl,
+  PromQueryField as ExploreQueryField,
+  PrometheusStartPage as ExploreStartPage,
 };
diff --git a/public/app/features/explore/slate-plugins/prism/promql.ts b/public/app/plugins/datasource/prometheus/promql.ts
similarity index 100%
rename from public/app/features/explore/slate-plugins/prism/promql.ts
rename to public/app/plugins/datasource/prometheus/promql.ts
diff --git a/public/app/plugins/datasource/prometheus/query_hints.ts b/public/app/plugins/datasource/prometheus/query_hints.ts
index cfd04c766ba..ea505832468 100644
--- a/public/app/plugins/datasource/prometheus/query_hints.ts
+++ b/public/app/plugins/datasource/prometheus/query_hints.ts
@@ -1,6 +1,13 @@
 import _ from 'lodash';
 
-export function getQueryHints(query: string, series?: any[], datasource?: any): any[] {
+import { QueryHint } from 'app/types/explore';
+
+/**
+ * Number of time series results needed before starting to suggest sum aggregation hints
+ */
+export const SUM_HINT_THRESHOLD_COUNT = 20;
+
+export function getQueryHints(query: string, series?: any[], datasource?: any): QueryHint[] {
   const hints = [];
 
   // ..._bucket metric needs a histogram_quantile()
@@ -88,5 +95,24 @@ export function getQueryHints(query: string, series?: any[], datasource?: any):
       });
     }
   }
+
+  if (series.length >= SUM_HINT_THRESHOLD_COUNT) {
+    const simpleMetric = query.trim().match(/^\w+$/);
+    if (simpleMetric) {
+      hints.push({
+        type: 'ADD_SUM',
+        label: 'Many time series results returned.',
+        fix: {
+          label: 'Consider aggregating with sum().',
+          action: {
+            type: 'ADD_SUM',
+            query: query,
+            preventSubmit: true,
+          },
+        },
+      });
+    }
+  }
+
   return hints.length > 0 ? hints : null;
 }
diff --git a/public/app/features/explore/PromQueryField.test.tsx b/public/app/plugins/datasource/prometheus/specs/language_provider.test.ts
similarity index 54%
rename from public/app/features/explore/PromQueryField.test.tsx
rename to public/app/plugins/datasource/prometheus/specs/language_provider.test.ts
index 802bb695f2c..20e148efd57 100644
--- a/public/app/features/explore/PromQueryField.test.tsx
+++ b/public/app/plugins/datasource/prometheus/specs/language_provider.test.ts
@@ -1,20 +1,15 @@
-import React from 'react';
-import Enzyme, { shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
 import Plain from 'slate-plain-serializer';
 
-import PromQueryField, { groupMetricsByPrefix, RECORDING_RULES_GROUP } from './PromQueryField';
+import LanguageProvider from '../language_provider';
 
-Enzyme.configure({ adapter: new Adapter() });
-
-describe('PromQueryField typeahead handling', () => {
-  const defaultProps = {
-    request: () => ({ data: { data: [] } }),
+describe('Language completion provider', () => {
+  const datasource = {
+    metadataRequest: () => ({ data: { data: [] } }),
   };
 
   it('returns default suggestions on emtpty context', () => {
-    const instance = shallow(<PromQueryField {...defaultProps} />).instance() as PromQueryField;
-    const result = instance.getTypeahead({ text: '', prefix: '', wrapperClasses: [] });
+    const instance = new LanguageProvider(datasource);
+    const result = instance.provideCompletionItems({ text: '', prefix: '', wrapperClasses: [] });
     expect(result.context).toBeUndefined();
     expect(result.refresher).toBeUndefined();
     expect(result.suggestions.length).toEqual(2);
@@ -22,8 +17,8 @@ describe('PromQueryField typeahead handling', () => {
 
   describe('range suggestions', () => {
     it('returns range suggestions in range context', () => {
-      const instance = shallow(<PromQueryField {...defaultProps} />).instance() as PromQueryField;
-      const result = instance.getTypeahead({ text: '1', prefix: '1', wrapperClasses: ['context-range'] });
+      const instance = new LanguageProvider(datasource);
+      const result = instance.provideCompletionItems({ text: '1', prefix: '1', wrapperClasses: ['context-range'] });
       expect(result.context).toBe('context-range');
       expect(result.refresher).toBeUndefined();
       expect(result.suggestions).toEqual([
@@ -37,20 +32,16 @@ describe('PromQueryField typeahead handling', () => {
 
   describe('metric suggestions', () => {
     it('returns metrics suggestions by default', () => {
-      const instance = shallow(
-        <PromQueryField {...defaultProps} metrics={['foo', 'bar']} />
-      ).instance() as PromQueryField;
-      const result = instance.getTypeahead({ text: 'a', prefix: 'a', wrapperClasses: [] });
+      const instance = new LanguageProvider(datasource, { metrics: ['foo', 'bar'] });
+      const result = instance.provideCompletionItems({ text: 'a', prefix: 'a', wrapperClasses: [] });
       expect(result.context).toBeUndefined();
       expect(result.refresher).toBeUndefined();
       expect(result.suggestions.length).toEqual(2);
     });
 
     it('returns default suggestions after a binary operator', () => {
-      const instance = shallow(
-        <PromQueryField {...defaultProps} metrics={['foo', 'bar']} />
-      ).instance() as PromQueryField;
-      const result = instance.getTypeahead({ text: '*', prefix: '', wrapperClasses: [] });
+      const instance = new LanguageProvider(datasource, { metrics: ['foo', 'bar'] });
+      const result = instance.provideCompletionItems({ text: '*', prefix: '', wrapperClasses: [] });
       expect(result.context).toBeUndefined();
       expect(result.refresher).toBeUndefined();
       expect(result.suggestions.length).toEqual(2);
@@ -59,13 +50,13 @@ describe('PromQueryField typeahead handling', () => {
 
   describe('label suggestions', () => {
     it('returns default label suggestions on label context and no metric', () => {
-      const instance = shallow(<PromQueryField {...defaultProps} />).instance() as PromQueryField;
+      const instance = new LanguageProvider(datasource);
       const value = Plain.deserialize('{}');
       const range = value.selection.merge({
         anchorOffset: 1,
       });
       const valueWithSelection = value.change().select(range).value;
-      const result = instance.getTypeahead({
+      const result = instance.provideCompletionItems({
         text: '',
         prefix: '',
         wrapperClasses: ['context-labels'],
@@ -76,15 +67,13 @@ describe('PromQueryField typeahead handling', () => {
     });
 
     it('returns label suggestions on label context and metric', () => {
-      const instance = shallow(
-        <PromQueryField {...defaultProps} labelKeys={{ '{__name__="metric"}': ['bar'] }} />
-      ).instance() as PromQueryField;
+      const instance = new LanguageProvider(datasource, { labelKeys: { '{__name__="metric"}': ['bar'] } });
       const value = Plain.deserialize('metric{}');
       const range = value.selection.merge({
         anchorOffset: 7,
       });
       const valueWithSelection = value.change().select(range).value;
-      const result = instance.getTypeahead({
+      const result = instance.provideCompletionItems({
         text: '',
         prefix: '',
         wrapperClasses: ['context-labels'],
@@ -95,18 +84,15 @@ describe('PromQueryField typeahead handling', () => {
     });
 
     it('returns label suggestions on label context but leaves out labels that already exist', () => {
-      const instance = shallow(
-        <PromQueryField
-          {...defaultProps}
-          labelKeys={{ '{job1="foo",job2!="foo",job3=~"foo"}': ['bar', 'job1', 'job2', 'job3'] }}
-        />
-      ).instance() as PromQueryField;
+      const instance = new LanguageProvider(datasource, {
+        labelKeys: { '{job1="foo",job2!="foo",job3=~"foo"}': ['bar', 'job1', 'job2', 'job3'] },
+      });
       const value = Plain.deserialize('{job1="foo",job2!="foo",job3=~"foo",}');
       const range = value.selection.merge({
         anchorOffset: 36,
       });
       const valueWithSelection = value.change().select(range).value;
-      const result = instance.getTypeahead({
+      const result = instance.provideCompletionItems({
         text: '',
         prefix: '',
         wrapperClasses: ['context-labels'],
@@ -117,17 +103,14 @@ describe('PromQueryField typeahead handling', () => {
     });
 
     it('returns label value suggestions inside a label value context after a negated matching operator', () => {
-      const instance = shallow(
-        <PromQueryField
-          {...defaultProps}
-          labelKeys={{ '{}': ['label'] }}
-          labelValues={{ '{}': { label: ['a', 'b', 'c'] } }}
-        />
-      ).instance() as PromQueryField;
+      const instance = new LanguageProvider(datasource, {
+        labelKeys: { '{}': ['label'] },
+        labelValues: { '{}': { label: ['a', 'b', 'c'] } },
+      });
       const value = Plain.deserialize('{label!=}');
       const range = value.selection.merge({ anchorOffset: 8 });
       const valueWithSelection = value.change().select(range).value;
-      const result = instance.getTypeahead({
+      const result = instance.provideCompletionItems({
         text: '!=',
         prefix: '',
         wrapperClasses: ['context-labels'],
@@ -144,15 +127,13 @@ describe('PromQueryField typeahead handling', () => {
     });
 
     it('returns a refresher on label context and unavailable metric', () => {
-      const instance = shallow(
-        <PromQueryField {...defaultProps} labelKeys={{ '{__name__="foo"}': ['bar'] }} />
-      ).instance() as PromQueryField;
+      const instance = new LanguageProvider(datasource, { labelKeys: { '{__name__="foo"}': ['bar'] } });
       const value = Plain.deserialize('metric{}');
       const range = value.selection.merge({
         anchorOffset: 7,
       });
       const valueWithSelection = value.change().select(range).value;
-      const result = instance.getTypeahead({
+      const result = instance.provideCompletionItems({
         text: '',
         prefix: '',
         wrapperClasses: ['context-labels'],
@@ -164,19 +145,16 @@ describe('PromQueryField typeahead handling', () => {
     });
 
     it('returns label values on label context when given a metric and a label key', () => {
-      const instance = shallow(
-        <PromQueryField
-          {...defaultProps}
-          labelKeys={{ '{__name__="metric"}': ['bar'] }}
-          labelValues={{ '{__name__="metric"}': { bar: ['baz'] } }}
-        />
-      ).instance() as PromQueryField;
+      const instance = new LanguageProvider(datasource, {
+        labelKeys: { '{__name__="metric"}': ['bar'] },
+        labelValues: { '{__name__="metric"}': { bar: ['baz'] } },
+      });
       const value = Plain.deserialize('metric{bar=ba}');
       const range = value.selection.merge({
         anchorOffset: 13,
       });
       const valueWithSelection = value.change().select(range).value;
-      const result = instance.getTypeahead({
+      const result = instance.provideCompletionItems({
         text: '=ba',
         prefix: 'ba',
         wrapperClasses: ['context-labels'],
@@ -188,15 +166,13 @@ describe('PromQueryField typeahead handling', () => {
     });
 
     it('returns label suggestions on aggregation context and metric w/ selector', () => {
-      const instance = shallow(
-        <PromQueryField {...defaultProps} labelKeys={{ '{__name__="metric",foo="xx"}': ['bar'] }} />
-      ).instance() as PromQueryField;
+      const instance = new LanguageProvider(datasource, { labelKeys: { '{__name__="metric",foo="xx"}': ['bar'] } });
       const value = Plain.deserialize('sum(metric{foo="xx"}) by ()');
       const range = value.selection.merge({
         anchorOffset: 26,
       });
       const valueWithSelection = value.change().select(range).value;
-      const result = instance.getTypeahead({
+      const result = instance.provideCompletionItems({
         text: '',
         prefix: '',
         wrapperClasses: ['context-aggregation'],
@@ -207,15 +183,13 @@ describe('PromQueryField typeahead handling', () => {
     });
 
     it('returns label suggestions on aggregation context and metric w/o selector', () => {
-      const instance = shallow(
-        <PromQueryField {...defaultProps} labelKeys={{ '{__name__="metric"}': ['bar'] }} />
-      ).instance() as PromQueryField;
+      const instance = new LanguageProvider(datasource, { labelKeys: { '{__name__="metric"}': ['bar'] } });
       const value = Plain.deserialize('sum(metric) by ()');
       const range = value.selection.merge({
         anchorOffset: 16,
       });
       const valueWithSelection = value.change().select(range).value;
-      const result = instance.getTypeahead({
+      const result = instance.provideCompletionItems({
         text: '',
         prefix: '',
         wrapperClasses: ['context-aggregation'],
@@ -224,45 +198,76 @@ describe('PromQueryField typeahead handling', () => {
       expect(result.context).toBe('context-aggregation');
       expect(result.suggestions).toEqual([{ items: [{ label: 'bar' }], label: 'Labels' }]);
     });
-  });
-});
-
-describe('groupMetricsByPrefix()', () => {
-  it('returns an empty group for no metrics', () => {
-    expect(groupMetricsByPrefix([])).toEqual([]);
-  });
-
-  it('returns options grouped by prefix', () => {
-    expect(groupMetricsByPrefix(['foo_metric'])).toMatchObject([
-      {
-        value: 'foo',
-        children: [
-          {
-            value: 'foo_metric',
-          },
-        ],
-      },
-    ]);
-  });
-
-  it('returns options without prefix as toplevel option', () => {
-    expect(groupMetricsByPrefix(['metric'])).toMatchObject([
-      {
-        value: 'metric',
-      },
-    ]);
-  });
-
-  it('returns recording rules grouped separately', () => {
-    expect(groupMetricsByPrefix([':foo_metric:'])).toMatchObject([
-      {
-        value: RECORDING_RULES_GROUP,
-        children: [
-          {
-            value: ':foo_metric:',
-          },
-        ],
-      },
-    ]);
+
+    it('returns label suggestions inside a multi-line aggregation context', () => {
+      const instance = new LanguageProvider(datasource, {
+        labelKeys: { '{__name__="metric"}': ['label1', 'label2', 'label3'] },
+      });
+      const value = Plain.deserialize('sum(\nmetric\n)\nby ()');
+      const aggregationTextBlock = value.document.getBlocksAsArray()[3];
+      const range = value.selection.moveToStartOf(aggregationTextBlock).merge({ anchorOffset: 4 });
+      const valueWithSelection = value.change().select(range).value;
+      const result = instance.provideCompletionItems({
+        text: '',
+        prefix: '',
+        wrapperClasses: ['context-aggregation'],
+        value: valueWithSelection,
+      });
+      expect(result.context).toBe('context-aggregation');
+      expect(result.suggestions).toEqual([
+        {
+          items: [{ label: 'label1' }, { label: 'label2' }, { label: 'label3' }],
+          label: 'Labels',
+        },
+      ]);
+    });
+
+    it('returns label suggestions inside an aggregation context with a range vector', () => {
+      const instance = new LanguageProvider(datasource, {
+        labelKeys: { '{__name__="metric"}': ['label1', 'label2', 'label3'] },
+      });
+      const value = Plain.deserialize('sum(rate(metric[1h])) by ()');
+      const range = value.selection.merge({
+        anchorOffset: 26,
+      });
+      const valueWithSelection = value.change().select(range).value;
+      const result = instance.provideCompletionItems({
+        text: '',
+        prefix: '',
+        wrapperClasses: ['context-aggregation'],
+        value: valueWithSelection,
+      });
+      expect(result.context).toBe('context-aggregation');
+      expect(result.suggestions).toEqual([
+        {
+          items: [{ label: 'label1' }, { label: 'label2' }, { label: 'label3' }],
+          label: 'Labels',
+        },
+      ]);
+    });
+
+    it('returns label suggestions inside an aggregation context with a range vector and label', () => {
+      const instance = new LanguageProvider(datasource, {
+        labelKeys: { '{__name__="metric",label1="value"}': ['label1', 'label2', 'label3'] },
+      });
+      const value = Plain.deserialize('sum(rate(metric{label1="value"}[1h])) by ()');
+      const range = value.selection.merge({
+        anchorOffset: 42,
+      });
+      const valueWithSelection = value.change().select(range).value;
+      const result = instance.provideCompletionItems({
+        text: '',
+        prefix: '',
+        wrapperClasses: ['context-aggregation'],
+        value: valueWithSelection,
+      });
+      expect(result.context).toBe('context-aggregation');
+      expect(result.suggestions).toEqual([
+        {
+          items: [{ label: 'label1' }, { label: 'label2' }, { label: 'label3' }],
+          label: 'Labels',
+        },
+      ]);
+    });
   });
 });
diff --git a/public/app/features/explore/utils/prometheus.test.ts b/public/app/plugins/datasource/prometheus/specs/language_utils.test.ts
similarity index 97%
rename from public/app/features/explore/utils/prometheus.test.ts
rename to public/app/plugins/datasource/prometheus/specs/language_utils.test.ts
index 4e84deaa7e8..748217e21b7 100644
--- a/public/app/features/explore/utils/prometheus.test.ts
+++ b/public/app/plugins/datasource/prometheus/specs/language_utils.test.ts
@@ -1,4 +1,4 @@
-import { parseSelector } from './prometheus';
+import { parseSelector } from '../language_utils';
 
 describe('parseSelector()', () => {
   let parsed;
diff --git a/public/app/plugins/datasource/prometheus/specs/query_hints.test.ts b/public/app/plugins/datasource/prometheus/specs/query_hints.test.ts
index 7eba54536fe..3b782d3dd09 100644
--- a/public/app/plugins/datasource/prometheus/specs/query_hints.test.ts
+++ b/public/app/plugins/datasource/prometheus/specs/query_hints.test.ts
@@ -1,4 +1,4 @@
-import { getQueryHints } from '../query_hints';
+import { getQueryHints, SUM_HINT_THRESHOLD_COUNT } from '../query_hints';
 
 describe('getQueryHints()', () => {
   it('returns no hints for no series', () => {
@@ -79,4 +79,25 @@ describe('getQueryHints()', () => {
       },
     });
   });
+
+  it('returns a sum hint when many time series results are returned for a simple metric', () => {
+    const seriesCount = SUM_HINT_THRESHOLD_COUNT;
+    const series = Array.from({ length: seriesCount }, _ => ({
+      datapoints: [[0, 0], [0, 0]],
+    }));
+    const hints = getQueryHints('metric', series);
+    expect(hints.length).toBe(1);
+    expect(hints[0]).toMatchObject({
+      type: 'ADD_SUM',
+      label: 'Many time series results returned.',
+      fix: {
+        label: 'Consider aggregating with sum().',
+        action: {
+          type: 'ADD_SUM',
+          query: 'metric',
+          preventSubmit: true,
+        },
+      },
+    });
+  });
 });
diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts
index 4a81eb8a619..034333cbb86 100644
--- a/public/app/plugins/datasource/stackdriver/datasource.ts
+++ b/public/app/plugins/datasource/stackdriver/datasource.ts
@@ -114,7 +114,6 @@ export default class StackdriverDatasource {
         if (!queryRes.series) {
           return;
         }
-        this.projectName = queryRes.meta.defaultProject;
         const unit = this.resolvePanelUnitFromTargets(options.targets);
         queryRes.series.forEach(series => {
           let timeSerie: any = {
diff --git a/public/app/plugins/panel/graph/Legend/Legend.tsx b/public/app/plugins/panel/graph/Legend/Legend.tsx
new file mode 100644
index 00000000000..7af61fde4e9
--- /dev/null
+++ b/public/app/plugins/panel/graph/Legend/Legend.tsx
@@ -0,0 +1,321 @@
+import _ from 'lodash';
+import React, { PureComponent } from 'react';
+import { TimeSeries } from 'app/core/core';
+import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
+import { LegendItem, LEGEND_STATS } from './LegendSeriesItem';
+
+interface LegendProps {
+  seriesList: TimeSeries[];
+  optionalClass?: string;
+}
+
+interface LegendEventHandlers {
+  onToggleSeries?: (hiddenSeries) => void;
+  onToggleSort?: (sortBy, sortDesc) => void;
+  onToggleAxis?: (series: TimeSeries) => void;
+  onColorChange?: (series: TimeSeries, color: string) => void;
+}
+
+interface LegendComponentEventHandlers {
+  onToggleSeries?: (series, event) => void;
+  onToggleSort?: (sortBy, sortDesc) => void;
+  onToggleAxis?: (series: TimeSeries) => void;
+  onColorChange?: (series: TimeSeries, color: string) => void;
+}
+
+interface LegendDisplayProps {
+  hiddenSeries: any;
+  hideEmpty?: boolean;
+  hideZero?: boolean;
+  alignAsTable?: boolean;
+  rightSide?: boolean;
+  sideWidth?: number;
+}
+
+interface LegendValuesProps {
+  values?: boolean;
+  min?: boolean;
+  max?: boolean;
+  avg?: boolean;
+  current?: boolean;
+  total?: boolean;
+}
+
+interface LegendSortProps {
+  sort?: 'min' | 'max' | 'avg' | 'current' | 'total';
+  sortDesc?: boolean;
+}
+
+export type GraphLegendProps = LegendProps &
+  LegendDisplayProps &
+  LegendValuesProps &
+  LegendSortProps &
+  LegendEventHandlers;
+export type LegendComponentProps = LegendProps &
+  LegendDisplayProps &
+  LegendValuesProps &
+  LegendSortProps &
+  LegendComponentEventHandlers;
+
+interface LegendState {
+  hiddenSeries: { [seriesAlias: string]: boolean };
+}
+
+export class GraphLegend extends PureComponent<GraphLegendProps, LegendState> {
+  static defaultProps: Partial<GraphLegendProps> = {
+    values: false,
+    min: false,
+    max: false,
+    avg: false,
+    current: false,
+    total: false,
+    alignAsTable: false,
+    rightSide: false,
+    sort: undefined,
+    sortDesc: false,
+    optionalClass: '',
+    onToggleSeries: () => {},
+    onToggleSort: () => {},
+    onToggleAxis: () => {},
+    onColorChange: () => {},
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      hiddenSeries: this.props.hiddenSeries,
+    };
+  }
+
+  sortLegend() {
+    let seriesList = [...this.props.seriesList] || [];
+    if (this.props.sort) {
+      seriesList = _.sortBy(seriesList, series => {
+        let sort = series.stats[this.props.sort];
+        if (sort === null) {
+          sort = -Infinity;
+        }
+        return sort;
+      });
+      if (this.props.sortDesc) {
+        seriesList = seriesList.reverse();
+      }
+    }
+    return seriesList;
+  }
+
+  onToggleSeries = (series, event) => {
+    let hiddenSeries = { ...this.state.hiddenSeries };
+    if (event.ctrlKey || event.metaKey || event.shiftKey) {
+      if (hiddenSeries[series.alias]) {
+        delete hiddenSeries[series.alias];
+      } else {
+        hiddenSeries[series.alias] = true;
+      }
+    } else {
+      hiddenSeries = this.toggleSeriesExclusiveMode(series);
+    }
+    this.setState({ hiddenSeries: hiddenSeries });
+    this.props.onToggleSeries(hiddenSeries);
+  };
+
+  toggleSeriesExclusiveMode(series) {
+    const hiddenSeries = { ...this.state.hiddenSeries };
+
+    if (hiddenSeries[series.alias]) {
+      delete hiddenSeries[series.alias];
+    }
+
+    // check if every other series is hidden
+    const alreadyExclusive = this.props.seriesList.every(value => {
+      if (value.alias === series.alias) {
+        return true;
+      }
+
+      return hiddenSeries[value.alias];
+    });
+
+    if (alreadyExclusive) {
+      // remove all hidden series
+      this.props.seriesList.forEach(value => {
+        delete hiddenSeries[value.alias];
+      });
+    } else {
+      // hide all but this serie
+      this.props.seriesList.forEach(value => {
+        if (value.alias === series.alias) {
+          return;
+        }
+
+        hiddenSeries[value.alias] = true;
+      });
+    }
+
+    return hiddenSeries;
+  }
+
+  render() {
+    const {
+      optionalClass,
+      rightSide,
+      sideWidth,
+      sort,
+      sortDesc,
+      hideEmpty,
+      hideZero,
+      values,
+      min,
+      max,
+      avg,
+      current,
+      total,
+    } = this.props;
+    const seriesValuesProps = { values, min, max, avg, current, total };
+    const hiddenSeries = this.state.hiddenSeries;
+    const seriesHideProps = { hideEmpty, hideZero };
+    const sortProps = { sort, sortDesc };
+    const seriesList = this.sortLegend().filter(series => !series.hideFromLegend(seriesHideProps));
+    const legendClass = `${this.props.alignAsTable ? 'graph-legend-table' : ''} ${optionalClass}`;
+
+    // Set min-width if side style and there is a value, otherwise remove the CSS property
+    // Set width so it works with IE11
+    const width: any = rightSide && sideWidth ? sideWidth : undefined;
+    const ieWidth: any = rightSide && sideWidth ? sideWidth - 1 : undefined;
+    const legendStyle: React.CSSProperties = {
+      minWidth: width,
+      width: ieWidth,
+    };
+
+    const legendProps: LegendComponentProps = {
+      seriesList: seriesList,
+      hiddenSeries: hiddenSeries,
+      onToggleSeries: this.onToggleSeries,
+      onToggleAxis: this.props.onToggleAxis,
+      onToggleSort: this.props.onToggleSort,
+      onColorChange: this.props.onColorChange,
+      ...seriesValuesProps,
+      ...sortProps,
+    };
+
+    return (
+      <div className={`graph-legend-content ${legendClass}`} style={legendStyle}>
+        {this.props.alignAsTable ? <LegendTable {...legendProps} /> : <LegendSeriesList {...legendProps} />}
+      </div>
+    );
+  }
+}
+
+class LegendSeriesList extends PureComponent<LegendComponentProps> {
+  render() {
+    const { seriesList, hiddenSeries, values, min, max, avg, current, total } = this.props;
+    const seriesValuesProps = { values, min, max, avg, current, total };
+    return seriesList.map((series, i) => (
+      <LegendItem
+        // This trick required because TimeSeries.id is not unique (it's just TimeSeries.alias).
+        // In future would be good to make id unique across the series list.
+        key={`${series.id}-${i}`}
+        series={series}
+        hidden={hiddenSeries[series.alias]}
+        {...seriesValuesProps}
+        onLabelClick={this.props.onToggleSeries}
+        onColorChange={this.props.onColorChange}
+        onToggleAxis={this.props.onToggleAxis}
+      />
+    ));
+  }
+}
+
+class LegendTable extends PureComponent<Partial<LegendComponentProps>> {
+  onToggleSort = stat => {
+    let sortDesc = this.props.sortDesc;
+    let sortBy = this.props.sort;
+    if (stat !== sortBy) {
+      sortDesc = null;
+    }
+
+    // if already sort ascending, disable sorting
+    if (sortDesc === false) {
+      sortBy = null;
+      sortDesc = null;
+    } else {
+      sortDesc = !sortDesc;
+      sortBy = stat;
+    }
+    this.props.onToggleSort(sortBy, sortDesc);
+  };
+
+  render() {
+    const seriesList = this.props.seriesList;
+    const { values, min, max, avg, current, total, sort, sortDesc, hiddenSeries } = this.props;
+    const seriesValuesProps = { values, min, max, avg, current, total };
+    return (
+      <table>
+        <colgroup>
+          <col style={{ width: '100%' }} />
+        </colgroup>
+        <thead>
+          <tr>
+            <th style={{ textAlign: 'left' }} />
+            {LEGEND_STATS.map(
+              statName =>
+                seriesValuesProps[statName] && (
+                  <LegendTableHeaderItem
+                    key={statName}
+                    statName={statName}
+                    sort={sort}
+                    sortDesc={sortDesc}
+                    onClick={this.onToggleSort}
+                  />
+                )
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {seriesList.map((series, i) => (
+            <LegendItem
+              key={`${series.id}-${i}`}
+              asTable={true}
+              series={series}
+              hidden={hiddenSeries[series.alias]}
+              onLabelClick={this.props.onToggleSeries}
+              onColorChange={this.props.onColorChange}
+              onToggleAxis={this.props.onToggleAxis}
+              {...seriesValuesProps}
+            />
+          ))}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+interface LegendTableHeaderProps {
+  statName: string;
+  onClick?: (statName: string) => void;
+}
+
+class LegendTableHeaderItem extends PureComponent<LegendTableHeaderProps & LegendSortProps> {
+  onClick = () => this.props.onClick(this.props.statName);
+
+  render() {
+    const { statName, sort, sortDesc } = this.props;
+    return (
+      <th className="pointer" onClick={this.onClick}>
+        {statName}
+        {sort === statName && <span className={sortDesc ? 'fa fa-caret-down' : 'fa fa-caret-up'} />}
+      </th>
+    );
+  }
+}
+
+export class Legend extends PureComponent<GraphLegendProps> {
+  render() {
+    return (
+      <CustomScrollbar>
+        <GraphLegend {...this.props} />
+      </CustomScrollbar>
+    );
+  }
+}
+
+export default Legend;
diff --git a/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx b/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
new file mode 100644
index 00000000000..2105687d8e1
--- /dev/null
+++ b/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx
@@ -0,0 +1,196 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import { TimeSeries } from 'app/core/core';
+import { SeriesColorPicker } from 'app/core/components/colorpicker/SeriesColorPicker';
+
+export const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total'];
+
+export interface LegendLabelProps {
+  series: TimeSeries;
+  asTable?: boolean;
+  hidden?: boolean;
+  onLabelClick?: (series, event) => void;
+  onColorChange?: (series, color: string) => void;
+  onToggleAxis?: (series) => void;
+}
+
+export interface LegendValuesProps {
+  values?: boolean;
+  min?: boolean;
+  max?: boolean;
+  avg?: boolean;
+  current?: boolean;
+  total?: boolean;
+}
+
+type LegendItemProps = LegendLabelProps & LegendValuesProps;
+
+interface LegendItemState {
+  yaxis: number;
+}
+
+export class LegendItem extends PureComponent<LegendItemProps, LegendItemState> {
+  static defaultProps = {
+    asTable: false,
+    hidden: false,
+    onLabelClick: () => {},
+    onColorChange: () => {},
+    onToggleAxis: () => {},
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      yaxis: this.props.series.yaxis,
+    };
+  }
+
+  onLabelClick = e => this.props.onLabelClick(this.props.series, e);
+
+  onToggleAxis = () => {
+    const yaxis = this.state.yaxis === 2 ? 1 : 2;
+    const info = { alias: this.props.series.alias, yaxis: yaxis };
+    this.setState({ yaxis: yaxis });
+    this.props.onToggleAxis(info);
+  };
+
+  onColorChange = color => {
+    this.props.onColorChange(this.props.series, color);
+    // Because of PureComponent nature it makes only shallow props comparison and changing of series.color doesn't run
+    // component re-render. In this case we can't rely on color, selected by user, because it may be overwritten
+    // by series overrides. So we need to use forceUpdate() to make sure we have proper series color.
+    this.forceUpdate();
+  };
+
+  renderLegendValues() {
+    const { series, asTable } = this.props;
+    const legendValueItems = [];
+    for (const valueName of LEGEND_STATS) {
+      if (this.props[valueName]) {
+        const valueFormatted = series.formatValue(series.stats[valueName]);
+        legendValueItems.push(
+          <LegendValue key={valueName} valueName={valueName} value={valueFormatted} asTable={asTable} />
+        );
+      }
+    }
+    return legendValueItems;
+  }
+
+  render() {
+    const { series, values, asTable, hidden } = this.props;
+    const seriesOptionClasses = classNames({
+      'graph-legend-series-hidden': hidden,
+      'graph-legend-series--right-y': series.yaxis === 2,
+    });
+    const valueItems = values ? this.renderLegendValues() : [];
+    const seriesLabel = (
+      <LegendSeriesLabel
+        label={series.alias}
+        color={series.color}
+        yaxis={this.state.yaxis}
+        onLabelClick={this.onLabelClick}
+        onColorChange={this.onColorChange}
+        onToggleAxis={this.onToggleAxis}
+      />
+    );
+
+    if (asTable) {
+      return (
+        <tr className={`graph-legend-series ${seriesOptionClasses}`}>
+          <td>{seriesLabel}</td>
+          {valueItems}
+        </tr>
+      );
+    } else {
+      return (
+        <div className={`graph-legend-series ${seriesOptionClasses}`}>
+          {seriesLabel}
+          {valueItems}
+        </div>
+      );
+    }
+  }
+}
+
+interface LegendSeriesLabelProps {
+  label: string;
+  color: string;
+  yaxis?: number;
+  onLabelClick?: (event) => void;
+}
+
+class LegendSeriesLabel extends PureComponent<LegendSeriesLabelProps & LegendSeriesIconProps> {
+  static defaultProps = {
+    yaxis: undefined,
+    onLabelClick: () => {},
+  };
+
+  render() {
+    const { label, color, yaxis } = this.props;
+    const { onColorChange, onToggleAxis } = this.props;
+    return [
+      <LegendSeriesIcon
+        key="icon"
+        color={color}
+        yaxis={yaxis}
+        onColorChange={onColorChange}
+        onToggleAxis={onToggleAxis}
+      />,
+      <a className="graph-legend-alias pointer" title={label} key="label" onClick={e => this.props.onLabelClick(e)}>
+        {label}
+      </a>,
+    ];
+  }
+}
+
+interface LegendSeriesIconProps {
+  color: string;
+  yaxis?: number;
+  onColorChange?: (color: string) => void;
+  onToggleAxis?: () => void;
+}
+
+interface LegendSeriesIconState {
+  color: string;
+}
+
+function SeriesIcon(props) {
+  return <i className="fa fa-minus pointer" style={{ color: props.color }} />;
+}
+
+class LegendSeriesIcon extends PureComponent<LegendSeriesIconProps, LegendSeriesIconState> {
+  static defaultProps = {
+    yaxis: undefined,
+    onColorChange: () => {},
+    onToggleAxis: () => {},
+  };
+
+  render() {
+    return (
+      <SeriesColorPicker
+        optionalClass="graph-legend-icon"
+        yaxis={this.props.yaxis}
+        color={this.props.color}
+        onColorChange={this.props.onColorChange}
+        onToggleAxis={this.props.onToggleAxis}
+      >
+        <SeriesIcon color={this.props.color} />
+      </SeriesColorPicker>
+    );
+  }
+}
+
+interface LegendValueProps {
+  value: string;
+  valueName: string;
+  asTable?: boolean;
+}
+
+function LegendValue(props: LegendValueProps) {
+  const value = props.value;
+  const valueName = props.valueName;
+  if (props.asTable) {
+    return <td className={`graph-legend-value ${valueName}`}>{value}</td>;
+  }
+  return <div className={`graph-legend-value ${valueName}`}>{value}</div>;
+}
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts
index 7a8e24539f7..01afd0716e6 100755
--- a/public/app/plugins/panel/graph/graph.ts
+++ b/public/app/plugins/panel/graph/graph.ts
@@ -20,6 +20,9 @@ import { EventManager } from 'app/features/annotations/all';
 import { convertToHistogramData } from './histogram';
 import { alignYLevel } from './align_yaxes';
 import config from 'app/core/config';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Legend, GraphLegendProps } from './Legend/Legend';
 
 import { GraphCtrl } from './module';
 
@@ -35,6 +38,7 @@ class GraphElement {
   panelWidth: number;
   eventManager: EventManager;
   thresholdManager: ThresholdManager;
+  legendElem: HTMLElement;
 
   constructor(private scope, private elem, private timeSrv) {
     this.ctrl = scope.ctrl;
@@ -50,7 +54,7 @@ class GraphElement {
     });
 
     // panel events
-    this.ctrl.events.on('panel-teardown', this.onPanelteardown.bind(this));
+    this.ctrl.events.on('panel-teardown', this.onPanelTeardown.bind(this));
 
     /**
      * Split graph rendering into two parts.
@@ -63,13 +67,14 @@ class GraphElement {
 
     // global events
     appEvents.on('graph-hover', this.onGraphHover.bind(this), scope);
-
     appEvents.on('graph-hover-clear', this.onGraphHoverClear.bind(this), scope);
-
     this.elem.bind('plotselected', this.onPlotSelected.bind(this));
-
     this.elem.bind('plotclick', this.onPlotClick.bind(this));
-    scope.$on('$destroy', this.onScopeDestroy.bind(this));
+
+    // get graph legend element
+    if (this.elem && this.elem.parent) {
+      this.legendElem = this.elem.parent().find('.graph-legend')[0];
+    }
   }
 
   onRender(renderData) {
@@ -82,7 +87,26 @@ class GraphElement {
     const graphHeight = this.elem.height();
     updateLegendValues(this.data, this.panel, graphHeight);
 
-    this.ctrl.events.emit('render-legend');
+    const { values, min, max, avg, current, total } = this.panel.legend;
+    const { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero } = this.panel.legend;
+    const legendOptions = { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero };
+    const valueOptions = { values, min, max, avg, current, total };
+    const legendProps: GraphLegendProps = {
+      seriesList: this.data,
+      hiddenSeries: this.ctrl.hiddenSeries,
+      ...legendOptions,
+      ...valueOptions,
+      onToggleSeries: this.ctrl.onToggleSeries,
+      onToggleSort: this.ctrl.onToggleSort,
+      onColorChange: this.ctrl.onColorChange,
+      onToggleAxis: this.ctrl.onToggleAxis,
+    };
+    const legendReactElem = React.createElement(Legend, legendProps);
+    ReactDOM.render(legendReactElem, this.legendElem, () => this.onLegendRenderingComplete());
+  }
+
+  onLegendRenderingComplete() {
+    this.render_panel();
   }
 
   onGraphHover(evt) {
@@ -99,17 +123,19 @@ class GraphElement {
     this.tooltip.show(evt.pos);
   }
 
-  onPanelteardown() {
+  onPanelTeardown() {
     this.thresholdManager = null;
 
     if (this.plot) {
       this.plot.destroy();
       this.plot = null;
     }
-  }
 
-  onLegendRenderingComplete() {
-    this.render_panel();
+    this.tooltip.destroy();
+    this.elem.off();
+    this.elem.remove();
+
+    ReactDOM.unmountComponentAtNode(this.legendElem);
   }
 
   onGraphHoverClear(event, info) {
@@ -157,12 +183,6 @@ class GraphElement {
     }
   }
 
-  onScopeDestroy() {
-    this.tooltip.destroy();
-    this.elem.off();
-    this.elem.remove();
-  }
-
   shouldAbortRender() {
     if (!this.data) {
       return true;
diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts
deleted file mode 100644
index db4dfdefa1c..00000000000
--- a/public/app/plugins/panel/graph/legend.ts
+++ /dev/null
@@ -1,306 +0,0 @@
-import _ from 'lodash';
-import $ from 'jquery';
-import baron from 'baron';
-import coreModule from 'app/core/core_module';
-
-/** @ngInject */
-function graphLegendDirective(popoverSrv, $timeout) {
-  return {
-    link: (scope, elem) => {
-      let firstRender = true;
-      const ctrl = scope.ctrl;
-      const panel = ctrl.panel;
-      let data;
-      let seriesList;
-      let i;
-      let legendScrollbar;
-      const legendRightDefaultWidth = 10;
-      const legendElem = elem.parent();
-
-      scope.$on('$destroy', () => {
-        destroyScrollbar();
-      });
-
-      ctrl.events.on('render-legend', () => {
-        data = ctrl.seriesList;
-        if (data) {
-          render();
-        }
-        ctrl.events.emit('legend-rendering-complete');
-      });
-
-      function getSeriesIndexForElement(el) {
-        return el.parents('[data-series-index]').data('series-index');
-      }
-
-      function openColorSelector(e) {
-        // if we clicked inside poup container ignore click
-        if ($(e.target).parents('.popover').length) {
-          return;
-        }
-
-        const el = $(e.currentTarget).find('.fa-minus');
-        const index = getSeriesIndexForElement(el);
-        const series = seriesList[index];
-
-        $timeout(() => {
-          popoverSrv.show({
-            element: el[0],
-            position: 'bottom left',
-            targetAttachment: 'top left',
-            template:
-              '<series-color-picker series="series" onToggleAxis="toggleAxis" onColorChange="colorSelected">' +
-              '</series-color-picker>',
-            openOn: 'hover',
-            model: {
-              series: series,
-              toggleAxis: () => {
-                ctrl.toggleAxis(series);
-              },
-              colorSelected: color => {
-                ctrl.changeSeriesColor(series, color);
-              },
-            },
-          });
-        });
-      }
-
-      function toggleSeries(e) {
-        const el = $(e.currentTarget);
-        const index = getSeriesIndexForElement(el);
-        const seriesInfo = seriesList[index];
-        const scrollPosition = legendScrollbar.scroller.scrollTop;
-        ctrl.toggleSeries(seriesInfo, e);
-        legendScrollbar.scroller.scrollTop = scrollPosition;
-      }
-
-      function sortLegend(e) {
-        const el = $(e.currentTarget);
-        const stat = el.data('stat');
-
-        if (stat !== panel.legend.sort) {
-          panel.legend.sortDesc = null;
-        }
-
-        // if already sort ascending, disable sorting
-        if (panel.legend.sortDesc === false) {
-          panel.legend.sort = null;
-          panel.legend.sortDesc = null;
-          ctrl.render();
-          return;
-        }
-
-        panel.legend.sortDesc = !panel.legend.sortDesc;
-        panel.legend.sort = stat;
-        ctrl.render();
-      }
-
-      function getTableHeaderHtml(statName) {
-        if (!panel.legend[statName]) {
-          return '';
-        }
-        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';
-          html += ' <span class="' + cssClass + '"></span>';
-        }
-
-        return html + '</th>';
-      }
-
-      function render() {
-        const legendWidth = legendElem.width();
-        if (!ctrl.panel.legend.show) {
-          elem.empty();
-          firstRender = true;
-          return;
-        }
-
-        if (firstRender) {
-          elem.on('click', '.graph-legend-icon', openColorSelector);
-          elem.on('click', '.graph-legend-alias', toggleSeries);
-          elem.on('click', 'th', sortLegend);
-          firstRender = false;
-        }
-
-        seriesList = data;
-
-        elem.empty();
-
-        // Set min-width if side style and there is a value, otherwise remove the CSS property
-        // Set width so it works with IE11
-        const width: any = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth + 'px' : '';
-        const ieWidth: any = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth - 1 + 'px' : '';
-        legendElem.css('min-width', width);
-        legendElem.css('width', ieWidth);
-
-        elem.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
-
-        let tableHeaderElem;
-        if (panel.legend.alignAsTable) {
-          let header = '<tr>';
-          header += '<th colspan="2" style="text-align:left"></th>';
-          if (panel.legend.values) {
-            header += getTableHeaderHtml('min');
-            header += getTableHeaderHtml('max');
-            header += getTableHeaderHtml('avg');
-            header += getTableHeaderHtml('current');
-            header += getTableHeaderHtml('total');
-          }
-          header += '</tr>';
-          tableHeaderElem = $(header);
-        }
-
-        if (panel.legend.sort) {
-          seriesList = _.sortBy(seriesList, series => {
-            let sort = series.stats[panel.legend.sort];
-            if (sort === null) {
-              sort = -Infinity;
-            }
-            return sort;
-          });
-          if (panel.legend.sortDesc) {
-            seriesList = seriesList.reverse();
-          }
-        }
-
-        // render first time for getting proper legend height
-        if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) {
-          renderLegendElement(tableHeaderElem);
-          elem.empty();
-        }
-
-        renderLegendElement(tableHeaderElem);
-      }
-
-      function renderSeriesLegendElements() {
-        const seriesElements = [];
-        for (i = 0; i < seriesList.length; i++) {
-          const series = seriesList[i];
-
-          if (series.hideFromLegend(panel.legend)) {
-            continue;
-          }
-
-          let html = '<div class="graph-legend-series';
-
-          if (series.yaxis === 2) {
-            html += ' graph-legend-series--right-y';
-          }
-          if (ctrl.hiddenSeries[series.alias]) {
-            html += ' graph-legend-series-hidden';
-          }
-          html += '" data-series-index="' + i + '">';
-          html += '<div class="graph-legend-icon">';
-          html += '<i class="fa fa-minus pointer" style="color:' + series.color + '"></i>';
-          html += '</div>';
-
-          html +=
-            '<a class="graph-legend-alias pointer" title="' + series.aliasEscaped + '">' + series.aliasEscaped + '</a>';
-
-          if (panel.legend.values) {
-            const avg = series.formatValue(series.stats.avg);
-            const current = series.formatValue(series.stats.current);
-            const min = series.formatValue(series.stats.min);
-            const max = series.formatValue(series.stats.max);
-            const total = series.formatValue(series.stats.total);
-
-            if (panel.legend.min) {
-              html += '<div class="graph-legend-value min">' + min + '</div>';
-            }
-            if (panel.legend.max) {
-              html += '<div class="graph-legend-value max">' + max + '</div>';
-            }
-            if (panel.legend.avg) {
-              html += '<div class="graph-legend-value avg">' + avg + '</div>';
-            }
-            if (panel.legend.current) {
-              html += '<div class="graph-legend-value current">' + current + '</div>';
-            }
-            if (panel.legend.total) {
-              html += '<div class="graph-legend-value total">' + total + '</div>';
-            }
-          }
-
-          html += '</div>';
-          seriesElements.push($(html));
-        }
-        return seriesElements;
-      }
-
-      function renderLegendElement(tableHeaderElem) {
-        const legendWidth = elem.width();
-
-        const seriesElements = renderSeriesLegendElements();
-
-        if (panel.legend.alignAsTable) {
-          const tbodyElem = $('<tbody></tbody>');
-          tbodyElem.append(tableHeaderElem);
-          tbodyElem.append(seriesElements);
-          elem.append(tbodyElem);
-          tbodyElem.wrap('<div class="graph-legend-scroll"></div>');
-        } else {
-          elem.append('<div class="graph-legend-scroll"></div>');
-          elem.find('.graph-legend-scroll').append(seriesElements);
-        }
-
-        if (!panel.legend.rightSide || (panel.legend.rightSide && legendWidth !== legendRightDefaultWidth)) {
-          addScrollbar();
-        } else {
-          destroyScrollbar();
-        }
-      }
-
-      function addScrollbar() {
-        const scrollRootClass = 'baron baron__root';
-        const scrollerClass = 'baron__scroller';
-        const scrollBarHTML = `
-          <div class="baron__track">
-            <div class="baron__bar"></div>
-          </div>
-        `;
-
-        const scrollRoot = elem;
-        const scroller = elem.find('.graph-legend-scroll');
-
-        // clear existing scroll bar track to prevent duplication
-        scrollRoot.find('.baron__track').remove();
-
-        scrollRoot.addClass(scrollRootClass);
-        $(scrollBarHTML).appendTo(scrollRoot);
-        scroller.addClass(scrollerClass);
-
-        const scrollbarParams = {
-          root: scrollRoot[0],
-          scroller: scroller[0],
-          bar: '.baron__bar',
-          track: '.baron__track',
-          barOnCls: '_scrollbar',
-          scrollingCls: '_scrolling',
-        };
-
-        if (!legendScrollbar) {
-          legendScrollbar = baron(scrollbarParams);
-        } else {
-          destroyScrollbar();
-          legendScrollbar = baron(scrollbarParams);
-        }
-
-        // #11830 - compensates for Firefox scrollbar calculation error in the baron framework
-        scroller[0].style.marginRight = '-' + (scroller[0].offsetWidth - scroller[0].clientWidth) + 'px';
-
-        legendScrollbar.scroll();
-      }
-
-      function destroyScrollbar() {
-        if (legendScrollbar) {
-          legendScrollbar.dispose();
-          legendScrollbar = undefined;
-        }
-      }
-    },
-  };
-}
-
-coreModule.directive('graphLegend', graphLegendDirective);
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts
index 5878473b4e6..a6c5190d937 100644
--- a/public/app/plugins/panel/graph/module.ts
+++ b/public/app/plugins/panel/graph/module.ts
@@ -1,5 +1,4 @@
 import './graph';
-import './legend';
 import './series_overrides_ctrl';
 import './thresholds_form';
 
@@ -244,67 +243,32 @@ class GraphCtrl extends MetricsPanelCtrl {
     }
   }
 
-  changeSeriesColor(series, color) {
+  onColorChange = (series, color) => {
     series.setColor(color);
     this.panel.aliasColors[series.alias] = series.color;
     this.render();
-  }
+  };
 
-  toggleSeries(serie, event) {
-    if (event.ctrlKey || event.metaKey || event.shiftKey) {
-      if (this.hiddenSeries[serie.alias]) {
-        delete this.hiddenSeries[serie.alias];
-      } else {
-        this.hiddenSeries[serie.alias] = true;
-      }
-    } else {
-      this.toggleSeriesExclusiveMode(serie);
-    }
+  onToggleSeries = hiddenSeries => {
+    this.hiddenSeries = hiddenSeries;
     this.render();
-  }
+  };
 
-  toggleSeriesExclusiveMode(serie) {
-    const hidden = this.hiddenSeries;
+  onToggleSort = (sortBy, sortDesc) => {
+    this.panel.legend.sort = sortBy;
+    this.panel.legend.sortDesc = sortDesc;
+    this.render();
+  };
 
-    if (hidden[serie.alias]) {
-      delete hidden[serie.alias];
-    }
-
-    // check if every other series is hidden
-    const alreadyExclusive = _.every(this.seriesList, value => {
-      if (value.alias === serie.alias) {
-        return true;
-      }
-
-      return hidden[value.alias];
-    });
-
-    if (alreadyExclusive) {
-      // remove all hidden series
-      _.each(this.seriesList, value => {
-        delete this.hiddenSeries[value.alias];
-      });
-    } else {
-      // hide all but this serie
-      _.each(this.seriesList, value => {
-        if (value.alias === serie.alias) {
-          return;
-        }
-
-        this.hiddenSeries[value.alias] = true;
-      });
-    }
-  }
-
-  toggleAxis(info) {
+  onToggleAxis = info => {
     let override = _.find(this.panel.seriesOverrides, { alias: info.alias });
     if (!override) {
       override = { alias: info.alias };
       this.panel.seriesOverrides.push(override);
     }
-    info.yaxis = override.yaxis = info.yaxis === 2 ? 1 : 2;
+    override.yaxis = info.yaxis;
     this.render();
-  }
+  };
 
   addSeriesOverride(override) {
     this.panel.seriesOverrides.push(override || {});
diff --git a/public/app/plugins/panel/graph/series_overrides_ctrl.ts b/public/app/plugins/panel/graph/series_overrides_ctrl.ts
index 540d19fb47a..934fd835347 100644
--- a/public/app/plugins/panel/graph/series_overrides_ctrl.ts
+++ b/public/app/plugins/panel/graph/series_overrides_ctrl.ts
@@ -53,7 +53,7 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
       element: $element.find('.dropdown')[0],
       position: 'top center',
       openOn: 'click',
-      template: '<series-color-picker series="series" onColorChange="colorSelected" />',
+      template: '<series-color-picker-popover series="series" onColorChange="colorSelected" />',
       model: {
         autoClose: true,
         colorSelected: $scope.colorSelected,
diff --git a/public/app/plugins/panel/graph2/module.tsx b/public/app/plugins/panel/graph2/module.tsx
index c2b8c355440..4011458bea9 100644
--- a/public/app/plugins/panel/graph2/module.tsx
+++ b/public/app/plugins/panel/graph2/module.tsx
@@ -5,6 +5,7 @@ import React, { PureComponent } from 'react';
 // Components
 import Graph from 'app/viz/Graph';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
+import { Switch } from 'app/core/components/Switch/Switch';
 
 // Types
 import { PanelProps, NullValueMode } from 'app/types';
@@ -35,8 +36,15 @@ export class Graph2 extends PureComponent<Props> {
 }
 
 export class TextOptions extends PureComponent<any> {
+  onChange = () => {};
+
   render() {
-    return <p>Text2 Options component</p>;
+    return (
+      <div className="section gf-form-group">
+        <h5 className="section-heading">Draw Modes</h5>
+        <Switch label="Lines" checked={true} onChange={this.onChange} />
+      </div>
+    );
   }
 }
 
diff --git a/public/app/plugins/panel/graph2/plugin.json b/public/app/plugins/panel/graph2/plugin.json
index b519a57fae4..2e674ab3557 100644
--- a/public/app/plugins/panel/graph2/plugin.json
+++ b/public/app/plugins/panel/graph2/plugin.json
@@ -3,6 +3,8 @@
   "name": "React Graph",
   "id": "graph2",
 
+  "state": "alpha",
+
   "info": {
     "author": {
       "name": "Grafana Project",
diff --git a/public/app/plugins/panel/singlestat/img/icn-singlestat-panel.svg b/public/app/plugins/panel/singlestat/img/icn-singlestat-panel.svg
index a1e15d4d58d..746687d360f 100644
--- a/public/app/plugins/panel/singlestat/img/icn-singlestat-panel.svg
+++ b/public/app/plugins/panel/singlestat/img/icn-singlestat-panel.svg
@@ -1,33 +1,83 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg 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="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.26;fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_2_);}
+	.st2{fill:url(#SVGID_3_);}
+	.st3{fill:url(#SVGID_4_);}
+	.st4{fill:url(#SVGID_5_);}
+	.st5{fill:none;stroke:url(#SVGID_6_);stroke-miterlimit:10;}
+</style>
 <g>
-	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="32.3342" y1="95.7019" x2="32.3342" y2="5.2695">
-		<stop  offset="0" style="stop-color:#FFDE17"/>
-		<stop  offset="0.0803" style="stop-color:#FFD210"/>
-		<stop  offset="0.1774" style="stop-color:#FEC90D"/>
-		<stop  offset="0.2809" style="stop-color:#FDC70C"/>
-		<stop  offset="0.6685" style="stop-color:#F3903F"/>
-		<stop  offset="0.8876" style="stop-color:#ED683C"/>
-		<stop  offset="1" style="stop-color:#E93E3A"/>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="65.6698" x2="50" y2="93.5681">
+		<stop  offset="0" style="stop-color:#FFF23A"/>
+		<stop  offset="4.010540e-02" style="stop-color:#FEE62D"/>
+		<stop  offset="0.1171" style="stop-color:#FED41A"/>
+		<stop  offset="0.1964" style="stop-color:#FDC90F"/>
+		<stop  offset="0.2809" style="stop-color:#FDC60B"/>
+		<stop  offset="0.6685" style="stop-color:#F28F3F"/>
+		<stop  offset="0.8876" style="stop-color:#ED693C"/>
+		<stop  offset="1" style="stop-color:#E83E39"/>
 	</linearGradient>
-	<path style="fill:url(#SVGID_1_);" d="M48.173,57.757V39.825c0-1.302,1.055-2.357,2.357-2.357h9.691
-		c0.897,0,1.346-1.084,0.712-1.718L34.112,0.737c-0.982-0.982-2.574-0.982-3.556,0L3.735,35.75
-		c-0.634,0.634-0.185,1.718,0.712,1.718h9.691c1.302,0,2.357,1.055,2.357,2.357v17.932c0,0.958,0.776,1.734,1.734,1.734h28.21
-		C47.397,59.491,48.173,58.715,48.173,57.757z"/>
-	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="67.6658" y1="94.1706" x2="67.6658" y2="3.7383">
-		<stop  offset="0" style="stop-color:#FFDE17"/>
-		<stop  offset="0.0803" style="stop-color:#FFD210"/>
-		<stop  offset="0.1774" style="stop-color:#FEC90D"/>
-		<stop  offset="0.2809" style="stop-color:#FDC70C"/>
-		<stop  offset="0.6685" style="stop-color:#F3903F"/>
-		<stop  offset="0.8876" style="stop-color:#ED683C"/>
-		<stop  offset="1" style="stop-color:#E93E3A"/>
+	<path class="st0" d="M97.6,83.8H2.4c-1.3,0-2.4-1.1-2.4-2.4v-1.8l17-1l19.2-4.3l16.3-1.6l16.5,0l15.8-4.7l15.1-3v16.3
+		C100,82.8,98.9,83.8,97.6,83.8z"/>
+	<g>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="19.098" y1="76.0776" x2="19.098" y2="27.8027">
+			<stop  offset="0" style="stop-color:#FFF23A"/>
+			<stop  offset="4.010540e-02" style="stop-color:#FEE62D"/>
+			<stop  offset="0.1171" style="stop-color:#FED41A"/>
+			<stop  offset="0.1964" style="stop-color:#FDC90F"/>
+			<stop  offset="0.2809" style="stop-color:#FDC60B"/>
+			<stop  offset="0.6685" style="stop-color:#F28F3F"/>
+			<stop  offset="0.8876" style="stop-color:#ED693C"/>
+			<stop  offset="1" style="stop-color:#E83E39"/>
+		</linearGradient>
+		<path class="st1" d="M19.6,64.3V38.9l-5.2,3.9l-3.5-6l9.4-6.9h6.8v34.4H19.6z"/>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="42.412" y1="76.0776" x2="42.412" y2="27.8027">
+			<stop  offset="0" style="stop-color:#FFF23A"/>
+			<stop  offset="4.010540e-02" style="stop-color:#FEE62D"/>
+			<stop  offset="0.1171" style="stop-color:#FED41A"/>
+			<stop  offset="0.1964" style="stop-color:#FDC90F"/>
+			<stop  offset="0.2809" style="stop-color:#FDC60B"/>
+			<stop  offset="0.6685" style="stop-color:#F28F3F"/>
+			<stop  offset="0.8876" style="stop-color:#ED693C"/>
+			<stop  offset="1" style="stop-color:#E83E39"/>
+		</linearGradient>
+		<path class="st2" d="M53.1,39.4c0,1.1-0.1,2.2-0.4,3.2c-0.3,1-0.7,1.9-1.2,2.8c-0.5,0.9-1,1.7-1.7,2.5c-0.6,0.8-1.2,1.6-1.9,2.3
+			l-6.4,7.4h11.1v6.7H32.3v-6.9l10.5-12c0.8-1,1.5-2,2-3c0.5-1,0.7-2,0.7-2.9c0-1-0.2-1.9-0.7-2.6c-0.5-0.7-1.2-1.1-2.2-1.1
+			c-0.9,0-1.7,0.4-2.3,1.1c-0.6,0.8-1,1.9-1.1,3.3l-7.3-0.7c0.4-3.5,1.6-6.1,3.6-7.9c2-1.7,4.5-2.6,7.4-2.6c1.6,0,3,0.2,4.3,0.7
+			c1.3,0.5,2.3,1.2,3.2,2c0.9,0.9,1.6,1.9,2.1,3.2C52.8,36.4,53.1,37.8,53.1,39.4z"/>
+		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="60.3739" y1="76.0776" x2="60.3739" y2="27.8027">
+			<stop  offset="0" style="stop-color:#FFF23A"/>
+			<stop  offset="4.010540e-02" style="stop-color:#FEE62D"/>
+			<stop  offset="0.1171" style="stop-color:#FED41A"/>
+			<stop  offset="0.1964" style="stop-color:#FDC90F"/>
+			<stop  offset="0.2809" style="stop-color:#FDC60B"/>
+			<stop  offset="0.6685" style="stop-color:#F28F3F"/>
+			<stop  offset="0.8876" style="stop-color:#ED693C"/>
+			<stop  offset="1" style="stop-color:#E83E39"/>
+		</linearGradient>
+		<path class="st3" d="M64.5,60.4c0,1.2-0.4,2.3-1.2,3.1c-0.8,0.8-1.8,1.3-3,1.3c-1.2,0-2.2-0.4-3-1.3c-0.8-0.8-1.1-1.9-1.1-3.1
+			c0-1.2,0.4-2.2,1.1-3.1c0.8-0.9,1.8-1.3,3-1.3c1.2,0,2.2,0.4,3,1.3C64.1,58.1,64.5,59.2,64.5,60.4z"/>
+		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="77.5234" y1="76.0776" x2="77.5234" y2="27.8027">
+			<stop  offset="0" style="stop-color:#FFF23A"/>
+			<stop  offset="4.010540e-02" style="stop-color:#FEE62D"/>
+			<stop  offset="0.1171" style="stop-color:#FED41A"/>
+			<stop  offset="0.1964" style="stop-color:#FDC90F"/>
+			<stop  offset="0.2809" style="stop-color:#FDC60B"/>
+			<stop  offset="0.6685" style="stop-color:#F28F3F"/>
+			<stop  offset="0.8876" style="stop-color:#ED693C"/>
+			<stop  offset="1" style="stop-color:#E83E39"/>
+		</linearGradient>
+		<path class="st4" d="M85.5,57.4v6.9h-6.9v-6.9H66v-6.6l10.1-20.9h9.4V51H89v6.4H85.5z M78.8,37.5L78.8,37.5l-6,13.5h6V37.5z"/>
+	</g>
+	<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-2.852199e-02" y1="72.3985" x2="100.0976" y2="72.3985">
+		<stop  offset="0" style="stop-color:#F28F3F"/>
+		<stop  offset="1" style="stop-color:#F28F3F"/>
 	</linearGradient>
-	<path style="fill:url(#SVGID_2_);" d="M95.553,62.532h-9.691c-1.302,0-2.357-1.055-2.357-2.357V42.243
-		c0-0.958-0.776-1.734-1.734-1.734h-28.21c-0.958,0-1.734,0.776-1.734,1.734v17.932c0,1.302-1.055,2.357-2.357,2.357h-9.691
-		c-0.897,0-1.346,1.084-0.712,1.718l26.821,35.013c0.982,0.982,2.574,0.982,3.556,0L96.265,64.25
-		C96.898,63.616,96.45,62.532,95.553,62.532z"/>
+	<polyline class="st5" points="0,79.7 17,78.7 36.2,74.4 52.5,72.8 69,72.9 84.9,68.1 100,65.1 	"/>
 </g>
 </svg>
diff --git a/public/app/plugins/panel/table/column_options.ts b/public/app/plugins/panel/table/column_options.ts
index ca6d271643b..4c810d9987d 100644
--- a/public/app/plugins/panel/table/column_options.ts
+++ b/public/app/plugins/panel/table/column_options.ts
@@ -41,6 +41,7 @@ export class ColumnOptionsCtrl {
       { text: 'YYYY-MM-DD HH:mm:ss.SSS', value: 'YYYY-MM-DD HH:mm:ss.SSS' },
       { text: 'MM/DD/YY h:mm:ss a', value: 'MM/DD/YY h:mm:ss a' },
       { text: 'MMMM D, YYYY LT', value: 'MMMM D, YYYY LT' },
+      { text: 'YYYY-MM-DD', value: 'YYYY-MM-DD' },
     ];
     this.mappingTypes = [{ text: 'Value to text', value: 1 }, { text: 'Range to text', value: 2 }];
 
diff --git a/public/app/routes/GrafanaCtrl.ts b/public/app/routes/GrafanaCtrl.ts
index 5dfa8622614..75a34ac01c0 100644
--- a/public/app/routes/GrafanaCtrl.ts
+++ b/public/app/routes/GrafanaCtrl.ts
@@ -17,7 +17,6 @@ export class GrafanaCtrl {
   /** @ngInject */
   constructor(
     $scope,
-    alertSrv,
     utilSrv,
     $rootScope,
     $controller,
@@ -41,11 +40,8 @@ export class GrafanaCtrl {
       $scope._ = _;
 
       profiler.init(config, $rootScope);
-      alertSrv.init();
       utilSrv.init();
       bridgeSrv.init();
-
-      $scope.dashAlerts = alertSrv;
     };
 
     $rootScope.colors = colors;
diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts
index af2d528afe9..d3b3488f1fe 100644
--- a/public/app/routes/routes.ts
+++ b/public/app/routes/routes.ts
@@ -15,6 +15,7 @@ import NewDataSourcePage from '../features/datasources/NewDataSourcePage';
 import UsersListPage from 'app/features/users/UsersListPage';
 import DataSourceDashboards from 'app/features/datasources/DataSourceDashboards';
 import DataSourceSettings from '../features/datasources/settings/DataSourceSettings';
+import OrgDetailsPage from '../features/org/OrgDetailsPage';
 
 /** @ngInject */
 export function setupAngularRoutes($routeProvider, $locationProvider) {
@@ -133,8 +134,10 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       },
     })
     .when('/org', {
-      templateUrl: 'public/app/features/org/partials/orgDetails.html',
-      controller: 'OrgDetailsCtrl',
+      template: '<react-container />',
+      resolve: {
+        component: () => OrgDetailsPage,
+      },
     })
     .when('/org/new', {
       templateUrl: 'public/app/features/org/partials/newOrg.html',
@@ -166,7 +169,7 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       },
     })
     .when('/org/teams/new', {
-      templateUrl: 'public/app/features/org/partials/create_team.html',
+      templateUrl: 'public/app/features/teams/partials/create_team.html',
       controller: 'CreateTeamCtrl',
       controllerAs: 'ctrl',
     })
@@ -178,12 +181,12 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       },
     })
     .when('/profile', {
-      templateUrl: 'public/app/features/org/partials/profile.html',
+      templateUrl: 'public/app/features/profile/partials/profile.html',
       controller: 'ProfileCtrl',
       controllerAs: 'ctrl',
     })
     .when('/profile/password', {
-      templateUrl: 'public/app/features/org/partials/change_password.html',
+      templateUrl: 'public/app/features/profile/partials/change_password.html',
       controller: 'ChangePasswordCtrl',
     })
     .when('/profile/select-org', {
diff --git a/public/app/store/configureStore.ts b/public/app/store/configureStore.ts
index ccd027a0b6d..e6d86eaa9c6 100644
--- a/public/app/store/configureStore.ts
+++ b/public/app/store/configureStore.ts
@@ -10,6 +10,7 @@ import dashboardReducers from 'app/features/dashboard/state/reducers';
 import pluginReducers from 'app/features/plugins/state/reducers';
 import dataSourcesReducers from 'app/features/datasources/state/reducers';
 import usersReducers from 'app/features/users/state/reducers';
+import organizationReducers from 'app/features/org/state/reducers';
 
 const rootReducers = {
   ...sharedReducers,
@@ -21,6 +22,7 @@ const rootReducers = {
   ...pluginReducers,
   ...dataSourcesReducers,
   ...usersReducers,
+  ...organizationReducers,
 };
 
 export let store;
diff --git a/public/app/types/appNotifications.ts b/public/app/types/appNotifications.ts
new file mode 100644
index 00000000000..81e6cfd55e1
--- /dev/null
+++ b/public/app/types/appNotifications.ts
@@ -0,0 +1,25 @@
+export interface AppNotification {
+  id?: number;
+  severity: AppNotificationSeverity;
+  icon: string;
+  title: string;
+  text: string;
+  timeout: AppNotificationTimeout;
+}
+
+export enum AppNotificationSeverity {
+  Success = 'success',
+  Warning = 'warning',
+  Error = 'error',
+  Info = 'info',
+}
+
+export enum AppNotificationTimeout {
+  Warning = 5000,
+  Success = 3000,
+  Error = 7000,
+}
+
+export interface AppNotificationsState {
+  appNotifications: AppNotification[];
+}
diff --git a/public/app/types/datasources.ts b/public/app/types/datasources.ts
index d98dcb3e839..970ef4f11c8 100644
--- a/public/app/types/datasources.ts
+++ b/public/app/types/datasources.ts
@@ -1,5 +1,5 @@
 import { LayoutMode } from '../core/components/LayoutSelector/LayoutSelector';
-import { Plugin } from './plugins';
+import { Plugin, PluginExports, PluginMeta } from './plugins';
 
 export interface DataSource {
   id: number;
@@ -19,6 +19,10 @@ export interface DataSource {
   jsonData: { authType: string; defaultRegion: string };
   readOnly: boolean;
   withCredentials: boolean;
+  meta?: PluginMeta;
+  pluginExports?: PluginExports;
+  init?: () => void;
+  testDatasource?: () => Promise<any>;
 }
 
 export interface DataSourcesState {
diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts
index 918dd4e4483..a96d6c084fb 100644
--- a/public/app/types/explore.ts
+++ b/public/app/types/explore.ts
@@ -1,3 +1,77 @@
+import { Value } from 'slate';
+
+import { RawTimeRange } from './series';
+
+export interface CompletionItem {
+  /**
+   * The label of this completion item. By default
+   * this is also the text that is inserted when selecting
+   * this completion.
+   */
+  label: string;
+  /**
+   * The kind of this completion item. Based on the kind
+   * an icon is chosen by the editor.
+   */
+  kind?: string;
+  /**
+   * A human-readable string with additional information
+   * about this item, like type or symbol information.
+   */
+  detail?: string;
+  /**
+   * A human-readable string, can be Markdown, that represents a doc-comment.
+   */
+  documentation?: string;
+  /**
+   * A string that should be used when comparing this item
+   * with other items. When `falsy` the `label` is used.
+   */
+  sortText?: string;
+  /**
+   * A string that should be used when filtering a set of
+   * completion items. When `falsy` the `label` is used.
+   */
+  filterText?: string;
+  /**
+   * A string or snippet that should be inserted in a document when selecting
+   * this completion. When `falsy` the `label` is used.
+   */
+  insertText?: string;
+  /**
+   * Delete number of characters before the caret position,
+   * by default the letters from the beginning of the word.
+   */
+  deleteBackwards?: number;
+  /**
+   * Number of steps to move after the insertion, can be negative.
+   */
+  move?: number;
+}
+
+export interface CompletionItemGroup {
+  /**
+   * Label that will be displayed for all entries of this group.
+   */
+  label: string;
+  /**
+   * List of suggestions of this group.
+   */
+  items: CompletionItem[];
+  /**
+   * If true, match only by prefix (and not mid-word).
+   */
+  prefixMatch?: boolean;
+  /**
+   * If true, do not filter items in this group based on the search.
+   */
+  skipFilter?: boolean;
+  /**
+   * If true, do not sort items.
+   */
+  skipSort?: boolean;
+}
+
 interface ExploreDatasource {
   value: string;
   label: string;
@@ -8,9 +82,28 @@ export interface HistoryItem {
   query: string;
 }
 
-export interface Range {
-  from: string;
-  to: string;
+export abstract class LanguageProvider {
+  datasource: any;
+  request: (url) => Promise<any>;
+  /**
+   * Returns a promise that resolves with a task list when main syntax is loaded.
+   * Task list consists of secondary promises that load more detailed language features.
+   */
+  start: () => Promise<any[]>;
+}
+
+export interface TypeaheadInput {
+  text: string;
+  prefix: string;
+  wrapperClasses: string[];
+  labelKey?: string;
+  value?: Value;
+}
+
+export interface TypeaheadOutput {
+  context?: string;
+  refresher?: Promise<{}>;
+  suggestions: CompletionItemGroup[];
 }
 
 export interface Query {
@@ -18,11 +111,29 @@ export interface Query {
   key?: string;
 }
 
+export interface QueryFix {
+  type: string;
+  label: string;
+  action?: QueryFixAction;
+}
+
+export interface QueryFixAction {
+  type: string;
+  query?: string;
+  preventSubmit?: boolean;
+}
+
+export interface QueryHint {
+  type: string;
+  label: string;
+  fix?: QueryFix;
+}
+
 export interface QueryTransaction {
   id: string;
   done: boolean;
-  error?: string;
-  hints?: any[];
+  error?: string | JSX.Element;
+  hints?: QueryHint[];
   latency: number;
   options: any;
   query: string;
@@ -39,13 +150,14 @@ export interface TextMatch {
 }
 
 export interface ExploreState {
+  StartPage?: any;
   datasource: any;
   datasourceError: any;
   datasourceLoading: boolean | null;
   datasourceMissing: boolean;
   datasourceName?: string;
   exploreDatasources: ExploreDatasource[];
-  graphRange: Range;
+  graphRange: RawTimeRange;
   history: HistoryItem[];
   /**
    * Initial rows of queries to push down the tree.
@@ -57,7 +169,7 @@ export interface ExploreState {
    * Hints gathered for the query row.
    */
   queryTransactions: QueryTransaction[];
-  range: Range;
+  range: RawTimeRange;
   showingGraph: boolean;
   showingLogs: boolean;
   showingTable: boolean;
@@ -69,7 +181,7 @@ export interface ExploreState {
 export interface ExploreUrlState {
   datasource: string;
   queries: Query[];
-  range: Range;
+  range: RawTimeRange;
 }
 
 export type ResultType = 'Graph' | 'Logs' | 'Table';
diff --git a/public/app/types/index.ts b/public/app/types/index.ts
index 27c1644e6ab..c51622682d4 100644
--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
@@ -6,7 +6,7 @@ import { FolderDTO, FolderState, FolderInfo } from './folders';
 import { DashboardState } from './dashboard';
 import { DashboardAcl, OrgRole, PermissionLevel } from './acl';
 import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
-import { Invitee, OrgUser, User, UsersState } from './user';
+import { Invitee, OrgUser, User, UsersState, UserState } from './user';
 import { DataSource, DataSourcesState } from './datasources';
 import {
   TimeRange,
@@ -22,6 +22,14 @@ import {
 } from './series';
 import { PanelProps } from './panel';
 import { PluginDashboard, PluginMeta, Plugin, PluginsState } from './plugins';
+import { Organization, OrganizationPreferences, OrganizationState } from './organization';
+import {
+  AppNotification,
+  AppNotificationSeverity,
+  AppNotificationsState,
+  AppNotificationTimeout,
+} from './appNotifications';
+import { DashboardSearchHit } from './search';
 
 export {
   Team,
@@ -70,6 +78,15 @@ export {
   DataQueryResponse,
   DataQueryOptions,
   PluginDashboard,
+  Organization,
+  OrganizationState,
+  OrganizationPreferences,
+  AppNotification,
+  AppNotificationsState,
+  AppNotificationSeverity,
+  AppNotificationTimeout,
+  DashboardSearchHit,
+  UserState,
 };
 
 export interface StoreState {
@@ -82,4 +99,7 @@ export interface StoreState {
   dashboard: DashboardState;
   dataSources: DataSourcesState;
   users: UsersState;
+  organization: OrganizationState;
+  appNotifications: AppNotificationsState;
+  user: UserState;
 }
diff --git a/public/app/types/organization.ts b/public/app/types/organization.ts
new file mode 100644
index 00000000000..52cb130e082
--- /dev/null
+++ b/public/app/types/organization.ts
@@ -0,0 +1,15 @@
+export interface Organization {
+  name: string;
+  id: number;
+}
+
+export interface OrganizationPreferences {
+  homeDashboardId: number;
+  theme: string;
+  timezone: string;
+}
+
+export interface OrganizationState {
+  organization: Organization;
+  preferences: OrganizationPreferences;
+}
diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts
index de640906407..0364ef883ff 100644
--- a/public/app/types/plugins.ts
+++ b/public/app/types/plugins.ts
@@ -6,6 +6,8 @@ export interface PluginExports {
   ConfigCtrl?: any;
   AnnotationsQueryCtrl?: any;
   PanelOptions?: any;
+  ExploreQueryField?: any;
+  ExploreStartPage?: any;
 }
 
 export interface PanelPlugin {
@@ -25,6 +27,12 @@ export interface PluginMeta {
   name: string;
   info: PluginMetaInfo;
   includes: PluginInclude[];
+
+  // Datasource-specific
+  metrics?: boolean;
+  logs?: boolean;
+  explore?: boolean;
+  annotations?: boolean;
 }
 
 export interface PluginInclude {
diff --git a/public/app/types/search.ts b/public/app/types/search.ts
new file mode 100644
index 00000000000..e5e17288de1
--- /dev/null
+++ b/public/app/types/search.ts
@@ -0,0 +1,9 @@
+export interface DashboardSearchHit {
+  id: number;
+  tags: string[];
+  title: string;
+  type: string;
+  uid: string;
+  uri: string;
+  url: string;
+}
diff --git a/public/app/types/user.ts b/public/app/types/user.ts
index c0b7b135ff8..37c80074dca 100644
--- a/public/app/types/user.ts
+++ b/public/app/types/user.ts
@@ -1,4 +1,6 @@
-export interface OrgUser {
+import { DashboardSearchHit } from './search';
+
+export interface OrgUser {
   avatarUrl: string;
   email: string;
   lastSeenAt: string;
@@ -43,3 +45,7 @@ export interface UsersState {
   externalUserMngInfo: string;
   hasFetched: boolean;
 }
+
+export interface UserState {
+  starredDashboards: DashboardSearchHit[];
+}
diff --git a/public/img/grafana_enterprise_typelogo.svg b/public/img/grafana_enterprise_typelogo.svg
new file mode 100644
index 00000000000..30ee925787e
--- /dev/null
+++ b/public/img/grafana_enterprise_typelogo.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg 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="168px" height="63.6px" viewBox="0 0 168 63.6" style="enable-background:new 0 0 168 63.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E6E7E8;}
+</style>
+<g>
+	<path class="st0" d="M34.1,18.9c-0.4,9.3-7.7,16.6-16.9,16.6c-9.7,0-16.8-7.8-16.8-17.3c0-9.5,7.8-17.3,17.3-17.3
+		c4.3,0,8.5,1.8,12,5.2l-2.8,3.4c-2.7-2.3-6-4-9.2-4C10.7,5.5,5,11.2,5,18.2c0,7.1,5.4,12.7,12.2,12.7c6.2,0,11-4.5,12-10.3h-14
+		v-4.1h18.9V18.9z"/>
+	<path class="st0" d="M50.2,16.6h-2.6c-2.8,0-5.2,2.3-5.2,5.2v13.4h-4.6v-23h3.8v1.9c1.2-1.2,3.2-1.9,5.4-1.9h5L50.2,16.6z"/>
+	<path class="st0" d="M75.3,35.2h-3.9v-2.9c-3,3-7.8,4.4-12.6,2.3c-3.6-1.6-6.2-4.8-7-8.7c-1.4-7.4,4.4-14,11.7-14
+		c3.1,0,5.8,1.2,7.9,3.3v-2.9h4V35.2z M70.6,25.4c1.1-4.7-2.5-8.9-7.1-8.9c-4,0-7.2,3.3-7.2,7.2c0,4.5,3.9,7.9,8.5,7.2
+		C67.6,30.3,69.9,28.2,70.6,25.4z"/>
+	<path class="st0" d="M84.5,10.9v1.3h7.3v4h-7.3v19H80V11.1C80,6,83.6,3,88.2,3h5.5l-1.8,4.3h-3.7C86.1,7.3,84.5,8.9,84.5,10.9z"/>
+	<path class="st0" d="M116.2,35.2h-3.9v-2.9c-3,3-7.8,4.4-12.6,2.3c-3.6-1.6-6.2-4.8-7-8.7c-1.4-7.4,4.4-14,11.7-14
+		c3.1,0,5.8,1.2,7.9,3.3v-2.9h4V35.2z M111.5,25.4c1.1-4.7-2.5-8.9-7.1-8.9c-4,0-7.2,3.3-7.2,7.2c0,4.5,3.9,7.9,8.5,7.2
+		C108.6,30.3,110.9,28.2,111.5,25.4z"/>
+	<path class="st0" d="M140.8,21.6v13.6h-4.6V21.6c0-2.9-2.3-5.2-5.2-5.2c-2.9,0-5.2,2.3-5.2,5.2v13.6h-4.6v-23h3.8v2
+		c1.7-1.5,3.9-2.3,6.2-2.3C136.6,11.8,140.8,16.2,140.8,21.6z"/>
+	<path class="st0" d="M167.9,35.2h-3.9v-2.9c-3,3-7.8,4.4-12.6,2.3c-3.6-1.6-6.2-4.8-7-8.7c-1.4-7.4,4.4-14,11.7-14
+		c3.1,0,5.8,1.2,7.9,3.3v-2.9h4V35.2z M163.1,25.4c1.1-4.7-2.5-8.9-7.1-8.9c-4,0-7.2,3.3-7.2,7.2c0,4.5,3.9,7.9,8.5,7.2
+		C160.2,30.3,162.5,28.2,163.1,25.4z"/>
+</g>
+<g>
+	<path class="st0" d="M31.7,51.9c0.4,2.4,2.3,4.1,4.5,4.1c1.7,0,3.2-1,4.1-1.9l1.1,1.3c-1.4,1.7-3.4,2.4-5.2,2.4
+		c-3.8,0-6.4-3.2-6.4-6.6c0-3.6,2.8-6.2,6.2-6.2c3.6,0,6.3,2.8,6.3,7H31.7z M40.5,50.5c-0.3-2.2-2.2-3.9-4.4-3.9c-2,0-4,1.4-4.4,3.9
+		H40.5z"/>
+	<path class="st0" d="M55.4,50.1v7.5h-1.7v-7.5c0-1.9-1.6-3.5-3.5-3.5c-1.9,0-3.5,1.6-3.5,3.5v7.5H45V45.2h1.5v1.3
+		c0.9-0.9,2.3-1.5,3.7-1.5C53.1,45,55.4,47.3,55.4,50.1z"/>
+	<path class="st0" d="M58.4,53.5V41.2h1.7v3.9h4.3v1.5h-4.3v6.8c0,1.3,1,2.3,2.3,2.3h2v1.7h-2C60.1,57.6,58.4,55.9,58.4,53.5z"/>
+	<path class="st0" d="M67.6,51.9c0.4,2.4,2.3,4.1,4.5,4.1c1.7,0,3.2-1,4.1-1.9l1.1,1.3c-1.4,1.7-3.4,2.4-5.2,2.4
+		c-3.8,0-6.4-3.2-6.4-6.6c0-3.6,2.8-6.2,6.2-6.2c3.6,0,6.3,2.8,6.3,7H67.6z M76.4,50.5c-0.3-2.2-2.2-3.9-4.4-3.9c-2,0-4,1.4-4.4,3.9
+		H76.4z"/>
+	<path class="st0" d="M87.4,46.8h-1.3c-1.9,0-3.4,1.2-3.4,3.1v7.6h-1.7V45.2h1.5v1.3c0.6-0.8,1.9-1.3,3.3-1.3h1.6V46.8z"/>
+	<path class="st0" d="M91.2,55.8v6.8h-1.7V45.2H91v2.1c1.2-1.4,2.9-2.3,4.9-2.3c3.6,0,6.4,2.9,6.4,6.4c0,3.6-2.9,6.4-6.4,6.4
+		C94.1,57.8,92.4,57,91.2,55.8z M91.2,51.4c0,2.6,2.1,4.7,4.7,4.7c2.6,0,4.7-2.1,4.7-4.7s-2.1-4.6-4.7-4.6
+		C93.3,46.7,91.2,48.8,91.2,51.4z"/>
+	<path class="st0" d="M111.5,46.8h-1.3c-1.9,0-3.4,1.2-3.4,3.1v7.6H105V45.2h1.5v1.3c0.6-0.8,1.9-1.3,3.3-1.3h1.6V46.8z"/>
+	<path class="st0" d="M115.8,42.8c0,0.7-0.5,1.1-1.2,1.1c-0.6,0-1.1-0.5-1.1-1.1c0-0.6,0.5-1.1,1.1-1.1
+		C115.3,41.6,115.8,42.2,115.8,42.8z M115.5,57.6h-1.8V45.2h1.8V57.6z"/>
+	<path class="st0" d="M125.7,46l-0.8,1.3c-0.4-0.3-1.4-0.9-2.6-0.9c-1.3,0-2.4,0.6-2.4,1.7c0,1.1,1.3,1.5,2.5,2c2,0.7,3.8,2.1,3.8,4
+		c0,2-1.8,3.6-4,3.6c-1.3,0-2.8-0.5-4-1.1l0.7-1.6c0.8,0.5,2,0.9,3.1,0.9c1.6,0,2.4-1,2.4-2c0-1.1-0.9-1.7-2.9-2.4
+		c-1.4-0.5-3.3-1.3-3.3-3.3c0-2,1.7-3.3,4-3.3C123.8,45,124.9,45.5,125.7,46z"/>
+	<path class="st0" d="M130.1,51.9c0.4,2.4,2.3,4.1,4.5,4.1c1.7,0,3.2-1,4.1-1.9l1.1,1.3c-1.4,1.7-3.4,2.4-5.2,2.4
+		c-3.8,0-6.4-3.2-6.4-6.6c0-3.6,2.8-6.2,6.2-6.2c3.6,0,6.3,2.8,6.3,7H130.1z M138.8,50.5c-0.3-2.2-2.2-3.9-4.4-3.9
+		c-2,0-4,1.4-4.4,3.9H138.8z"/>
+</g>
+</svg>
diff --git a/public/img/grafana_typelogo.svg b/public/img/grafana_typelogo.svg
new file mode 100644
index 00000000000..bfceac7a78d
--- /dev/null
+++ b/public/img/grafana_typelogo.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg 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="168px" height="36.6px" viewBox="0 0 168 36.6" style="enable-background:new 0 0 168 36.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E6E7E8;}
+</style>
+<g>
+	<path class="st0" d="M34.1,18.9c-0.4,9.3-7.7,16.6-16.9,16.6c-9.7,0-16.8-7.8-16.8-17.3c0-9.5,7.8-17.3,17.3-17.3
+		c4.3,0,8.5,1.8,12,5.2l-2.8,3.4c-2.7-2.3-6-4-9.2-4C10.7,5.5,5,11.2,5,18.2c0,7.1,5.4,12.7,12.2,12.7c6.2,0,11-4.5,12-10.3h-14
+		v-4.1h18.9V18.9z"/>
+	<path class="st0" d="M50.2,16.6h-2.6c-2.8,0-5.2,2.3-5.2,5.2v13.4h-4.6v-23h3.8v1.9c1.2-1.2,3.2-1.9,5.4-1.9h5L50.2,16.6z"/>
+	<path class="st0" d="M75.3,35.2h-3.9v-2.9c-3,3-7.8,4.4-12.6,2.3c-3.6-1.6-6.2-4.8-7-8.7c-1.4-7.4,4.4-14,11.7-14
+		c3.1,0,5.8,1.2,7.9,3.3v-2.9h4V35.2z M70.6,25.4c1.1-4.7-2.5-8.9-7.1-8.9c-4,0-7.2,3.3-7.2,7.2c0,4.5,3.9,7.9,8.5,7.2
+		C67.6,30.3,69.9,28.2,70.6,25.4z"/>
+	<path class="st0" d="M84.5,10.9v1.3h7.3v4h-7.3v19H80V11.1C80,6,83.6,3,88.2,3h5.5l-1.8,4.3h-3.7C86.1,7.3,84.5,8.9,84.5,10.9z"/>
+	<path class="st0" d="M116.2,35.2h-3.9v-2.9c-3,3-7.8,4.4-12.6,2.3c-3.6-1.6-6.2-4.8-7-8.7c-1.4-7.4,4.4-14,11.7-14
+		c3.1,0,5.8,1.2,7.9,3.3v-2.9h4V35.2z M111.5,25.4c1.1-4.7-2.5-8.9-7.1-8.9c-4,0-7.2,3.3-7.2,7.2c0,4.5,3.9,7.9,8.5,7.2
+		C108.6,30.3,110.9,28.2,111.5,25.4z"/>
+	<path class="st0" d="M140.8,21.6v13.6h-4.6V21.6c0-2.9-2.3-5.2-5.2-5.2c-2.9,0-5.2,2.3-5.2,5.2v13.6h-4.6v-23h3.8v2
+		c1.7-1.5,3.9-2.3,6.2-2.3C136.6,11.8,140.8,16.2,140.8,21.6z"/>
+	<path class="st0" d="M167.9,35.2h-3.9v-2.9c-3,3-7.8,4.4-12.6,2.3c-3.6-1.6-6.2-4.8-7-8.7c-1.4-7.4,4.4-14,11.7-14
+		c3.1,0,5.8,1.2,7.9,3.3v-2.9h4V35.2z M163.1,25.4c1.1-4.7-2.5-8.9-7.1-8.9c-4,0-7.2,3.3-7.2,7.2c0,4.5,3.9,7.9,8.5,7.2
+		C160.2,30.3,162.5,28.2,163.1,25.4z"/>
+</g>
+</svg>
diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss
index 991b0f30aa1..cfe74d03bb1 100644
--- a/public/sass/_old_responsive.scss
+++ b/public/sass/_old_responsive.scss
@@ -10,6 +10,7 @@
   max-width: 120px;
 }
 
+.navbar-buttons--tv,
 .navbar-buttons--actions {
   display: none;
 }
@@ -35,6 +36,7 @@
 }
 
 @include media-breakpoint-up(md) {
+  .navbar-buttons--tv,
   .navbar-buttons--actions {
     display: flex;
   }
diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss
index 3420dcfdfaf..710c4d1ec0f 100644
--- a/public/sass/components/_alerts.scss
+++ b/public/sass/components/_alerts.scss
@@ -7,13 +7,13 @@
 
 .alert {
   padding: 1.25rem 2rem 1.25rem 1.5rem;
-  margin-bottom: $line-height-base;
+  margin-bottom: $panel-margin / 2;
   text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
   background: $alert-error-bg;
   position: relative;
   color: $white;
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-  border-radius: 2px;
+  border-radius: $border-radius;
   display: flex;
   flex-direction: row;
 }
diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss
index 3c30f5a5798..9bc99c30d1d 100644
--- a/public/sass/components/_footer.scss
+++ b/public/sass/components/_footer.scss
@@ -40,15 +40,15 @@
 
 .login-page {
   .footer {
+    bottom: $spacer;
+    position: absolute;
     padding: 1rem 0 1rem 0;
   }
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(sm) {
   .login-page {
     .footer {
-      bottom: $spacer;
-      position: absolute;
       padding: 5rem 0 1rem 0;
     }
   }
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss
index 63d9169a4f8..9f7a9575b61 100644
--- a/public/sass/components/_panel_graph.scss
+++ b/public/sass/components/_panel_graph.scss
@@ -14,7 +14,7 @@
 
       .graph-legend-series {
         display: block;
-        padding-left: 0px;
+        padding-left: 4px;
       }
 
       .graph-legend-table .graph-legend-series {
@@ -28,6 +28,7 @@
   position: relative;
   cursor: crosshair;
   flex-grow: 1;
+  min-height: 65%;
 }
 
 .datapoints-warning {
@@ -46,15 +47,12 @@
 .graph-legend {
   display: flex;
   flex: 0 1 auto;
-  max-height: 30%;
+  max-height: 35%;
   margin: 0;
   text-align: center;
   padding-top: 6px;
   position: relative;
 
-  // fix for Firefox (white stripe on the right of scrollbar)
-  width: calc(100% - 1px);
-
   .popover-content {
     padding: 0;
   }
@@ -62,15 +60,6 @@
 
 .graph-legend-content {
   position: relative;
-
-  // fix for Firefox (white stripe on the right of scrollbar)
-  width: calc(100% - 1px);
-}
-
-.graph-legend-scroll {
-  position: relative;
-  overflow: auto !important;
-  padding: 1px;
 }
 
 .graph-legend-icon {
@@ -82,8 +71,8 @@
 .graph-legend-icon,
 .graph-legend-alias,
 .graph-legend-value {
+  display: inline;
   cursor: pointer;
-  float: left;
   white-space: nowrap;
   font-size: 85%;
   text-align: left;
@@ -120,6 +109,11 @@
   }
 }
 
+// Don't move series to the right if legend is on the right as well
+.graph-panel--legend-right .graph-legend-series--right-y {
+  float: left;
+}
+
 .graph-legend-value {
   padding-left: 6px;
 }
@@ -128,7 +122,8 @@
 .body--phantomjs {
   .graph-panel--legend-right {
     .graph-legend {
-      display: inline-block;
+      display: block;
+      max-width: min-content;
     }
 
     .graph-panel__chart {
@@ -138,24 +133,14 @@
     .graph-legend-table {
       display: table;
       width: auto;
-
-      .graph-legend-scroll {
-        display: table;
-      }
     }
   }
 }
 
 .graph-legend-table {
-  tbody {
-    display: block;
-    position: relative;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-bottom: 1px;
-    padding-right: 5px;
-    padding-left: 5px;
-  }
+  padding-bottom: 1px;
+  padding-right: 5px;
+  padding-left: 5px;
 
   .graph-legend-series {
     display: table-row;
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index d9ab29cc91c..795766a22de 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -21,6 +21,9 @@ div.flot-text {
   height: 100%;
 
   &--solo {
+    position: fixed;
+    bottom: 0;
+    right: 0;
     margin: 0;
     .panel-container {
       border: none;
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index a3f60f2006b..b70b058879c 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -52,7 +52,7 @@
   }
 
   .result-options {
-    margin-top: 2 * $panel-margin;
+    margin: 2 * $panel-margin 0;
   }
 
   .time-series-disclaimer {
@@ -87,7 +87,7 @@
     flex-wrap: wrap;
   }
 
-  .explore-graph__loader {
+  .explore-panel__loader {
     height: 2px;
     position: relative;
     overflow: hidden;
@@ -95,7 +95,7 @@
     margin: $panel-margin / 2;
   }
 
-  .explore-graph__loader:after {
+  .explore-panel__loader:after {
     content: ' ';
     display: block;
     width: 25%;
@@ -219,7 +219,13 @@
     }
 
     .logs-row-match-highlight {
-      background-color: lighten($blue, 20%);
+      // Undoing mark styling
+      background: inherit;
+      padding: inherit;
+
+      color: $typeahead-selected-color;
+      border-bottom: 1px solid $typeahead-selected-color;
+      background-color: lighten($typeahead-selected-color, 60%);
     }
 
     .logs-row-level {
@@ -258,6 +264,11 @@
 
   .prom-query-field-info {
     margin: 0.25em 0.5em 0.5em;
+    display: flex;
+
+    details {
+      margin-left: 1em;
+    }
   }
 }
 
@@ -317,3 +328,29 @@
 .ReactTable .rt-tr .rt-td:last-child {
   text-align: right;
 }
+
+// React-component cascade fix: show "loading" even though item can expand
+
+.rc-cascader-menu-item-loading:after {
+  position: absolute;
+  right: 12px;
+  content: 'loading';
+  color: #767980;
+  font-style: italic;
+}
+
+// TODO Experimental
+
+.cheat-sheet-item {
+  margin: 2*$panel-margin 0;
+  width: 50%;
+}
+
+.cheat-sheet-item__title {
+  font-size: $font-size-h3;
+}
+
+.cheat-sheet-item__expression {
+  margin: $panel-margin/2 0;
+  cursor: pointer;
+}
diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss
index 8e5c8f33e37..4baff47b2a8 100644
--- a/public/sass/pages/_login.scss
+++ b/public/sass/pages/_login.scss
@@ -1,7 +1,7 @@
 $login-border: #8daac5;
 
 .login {
-  min-height: 85vh;
+  min-height: 100vh;
   background-position: center;
   background-repeat: no-repeat;
   min-width: 100%;
@@ -97,6 +97,7 @@ select:-webkit-autofill:focus {
 
 .login-content {
   max-width: 700px;
+  width: 100%;
   display: flex;
   align-items: stretch;
   flex-direction: column;
@@ -120,18 +121,29 @@ select:-webkit-autofill:focus {
     width: 70px;
     margin-bottom: 15px;
   }
+}
 
-  .icon-gf-grafana_wordmark {
-    color: darken($white, 11%);
-    position: relative;
-    font-size: 2rem;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+.app-grafana {
+  .logo-wordmark {
+    background: url('../img/grafana_typelogo.svg') top center no-repeat;
+    width: 100%;
+    height: 70px;
+  }
+}
+
+.app-enterprise {
+  .logo-wordmark {
+    background: url('../img/grafana_enterprise_typelogo.svg') top center no-repeat;
+    width: 100%;
+    height: 70px;
   }
 }
 
 .login-outer-box {
   display: flex;
   overflow-y: hidden;
+  align-items: center;
+  justify-content: center;
 }
 
 .login-inner-box {
@@ -143,6 +155,7 @@ select:-webkit-autofill:focus {
   justify-content: center;
   flex-grow: 1;
   max-width: 415px;
+  width: 100%;
   transform: tranlate(0px, 0px);
   transition: 0.25s ease;
 
@@ -324,23 +337,19 @@ select:-webkit-autofill:focus {
 }
 
 @include media-breakpoint-up(sm) {
-  .login-content {
-    flex-direction: row;
-  }
-
   .login-branding {
-    width: 35%;
-    padding: 4rem 2rem;
-    border-right: 1px solid $login-border;
+    padding: 1rem;
 
     .logo-icon {
       width: 80px;
     }
   }
+}
 
-  .login-inner-box {
-    width: 65%;
-    padding: 1rem 2rem;
+@include media-breakpoint-up(md) {
+  .login-content {
+    flex-direction: row;
+    flex: 1 0 100%;
   }
 
   .login-divider {
@@ -348,29 +357,16 @@ select:-webkit-autofill:focus {
       width: 110px;
     }
   }
-}
-
-@include media-breakpoint-up(md) {
-  .login {
-    min-height: 100vh;
-  }
-
-  .login-content {
-    flex: 1 0 100%;
-  }
 
   .login-branding {
     width: 45%;
-    padding: 2rem 4rem;
+    padding: 2rem;
     flex-grow: 1;
+    border-right: 1px solid $login-border;
 
     .logo-icon {
       width: 130px;
     }
-
-    .icon-gf-grafana_wordmark {
-      font-size: 3.2rem;
-    }
   }
 
   .login-inner-box {
@@ -386,9 +382,7 @@ select:-webkit-autofill:focus {
     padding-top: 0;
     padding-left: 10px;
   }
-}
 
-@include media-breakpoint-up(lg) {
   .login-form-input {
     min-width: 300px;
   }
diff --git a/public/vendor/flot/jquery.flot.js b/public/vendor/flot/jquery.flot.js
index 4a85b08c8d7..daa3ac6bb8e 100644
--- a/public/vendor/flot/jquery.flot.js
+++ b/public/vendor/flot/jquery.flot.js
@@ -2271,9 +2271,51 @@ Licensed under the MIT license.
             });
         }
 
+        function drawOrphanedPoints(series) {
+            /* Filters series data for points with no neighbors before or after
+             * and plots single 0.5 radius points for them so that they are displayed.  
+             */
+            var abandonedPoints = [];
+            var beforeX = null;
+            var afterX = null;
+            var datapoints = series.datapoints;
+            // find any points with no neighbors before or after
+            var emptyPoints = [];
+            for (var j = 0; j < datapoints.pointsize - 2; j++) {
+                emptyPoints.push(0);
+            }
+            for (var i = 0; i < datapoints.points.length; i += datapoints.pointsize) {
+                var x = datapoints.points[i], y = datapoints.points[i + 1];
+                if (i === datapoints.points.length - datapoints.pointsize) {
+                    afterX = null;
+                } else {
+                    afterX = datapoints.points[i + datapoints.pointsize];
+                }
+                if (x !== null && y !== null && beforeX === null && afterX === null) {
+                    abandonedPoints.push(x);
+                    abandonedPoints.push(y);
+                    abandonedPoints.push.apply(abandonedPoints, emptyPoints);
+                }
+                beforeX = x;
+
+            }
+            var olddatapoints = datapoints.points
+            datapoints.points = abandonedPoints;
+ 
+            series.points.radius = series.lines.lineWidth/2;
+            // plot the orphan points with a radius of lineWidth/2
+            drawSeriesPoints(series);
+            // reset old info
+            datapoints.points = olddatapoints;
+        }
+
         function drawSeries(series) {
             if (series.lines.show)
                 drawSeriesLines(series);
+                if (!series.points.show && !series.bars.show) {
+                    // not necessary if user wants points displayed for everything
+                    drawOrphanedPoints(series);
+                }
             if (series.bars.show)
                 drawSeriesBars(series);
             if (series.points.show)
diff --git a/public/views/index.template.html b/public/views/index.template.html
index c39d5e08321..1f6e511784d 100644
--- a/public/views/index.template.html
+++ b/public/views/index.template.html
@@ -14,22 +14,18 @@
   <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">
+
+  <link rel="stylesheet" href="public/build/grafana.[[ .Theme ]].css?v[[ .BuildVersion ]]+[[ .BuildCommit ]]">
+
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="msapplication-TileColor" content="#2b5797">
   <meta name="msapplication-config" content="public/img/browserconfig.xml">
 </head>
 
-<body class="theme-[[ .Theme ]]">
+<body class="theme-[[ .Theme ]] [[.AppNameBodyClass]]">
 
   <style>
-    body {
-      margin: 0;
-      height: 100%;
-      width: 100%;
-      position: absolute;
-    }
-
     .preloader {
       height: 100%;
       flex-direction: column;
@@ -38,14 +34,6 @@
       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;
@@ -200,21 +188,8 @@
 
   <grafana-app class="grafana-app" ng-cloak>
     <sidemenu class="sidemenu"></sidemenu>
+    <app-notifications-list class="page-alert-list"></app-notifications-list>
 
-    <div class="page-alert-list">
-      <div ng-repeat='alert in dashAlerts.list' class="alert-{{alert.severity}} alert">
-        <div class="alert-icon">
-          <i class="{{alert.icon}}"></i>
-        </div>
-        <div class="alert-body">
-          <div class="alert-title">{{alert.title}}</div>
-          <div class="alert-text" ng-bind='alert.text'></div>
-        </div>
-        <button type="button" class="alert-close" ng-click="dashAlerts.clear(alert)">
-          <i class="fa fa fa-remove"></i>
-        </button>
-      </div>
-    </div>
 
     <div class="main-view">
       <div class="scroll-canvas" page-scrollbar>
@@ -266,14 +241,7 @@
       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);
-    // switch loader to show all has loaded
+		// In case the js files fails to load the code below will show an info message.
     window.onload = function() {
       var preloader = document.getElementsByClassName("preloader");
       if (preloader.length) {
diff --git a/scripts/build/build-all.sh b/scripts/build/build-all.sh
index 64e51ca6259..f194109ec0d 100755
--- a/scripts/build/build-all.sh
+++ b/scripts/build/build-all.sh
@@ -76,7 +76,7 @@ if [ -d '/tmp/phantomjs/windows' ]; then
   cp /tmp/phantomjs/windows/phantomjs.exe tools/phantomjs/phantomjs.exe
   rm tools/phantomjs/phantomjs
 else
-    echo 'PhantomJS binaries for darwin missing!'
+    echo 'PhantomJS binaries for Windows missing!'
 fi
 go run build.go -goos windows -pkg-arch amd64 ${OPT} package-only
 
diff --git a/scripts/build/ci-deploy/Dockerfile b/scripts/build/ci-deploy/Dockerfile
new file mode 100644
index 00000000000..deef612e761
--- /dev/null
+++ b/scripts/build/ci-deploy/Dockerfile
@@ -0,0 +1,5 @@
+FROM circleci/python:2.7-stretch
+
+RUN sudo pip install awscli && \
+  curl https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-sdk-222.0.0-linux-x86_64.tar.gz | \
+  sudo tar xvzf - -C /opt
diff --git a/scripts/build/ci-deploy/build-deploy.sh b/scripts/build/ci-deploy/build-deploy.sh
new file mode 100755
index 00000000000..c9ce805b30b
--- /dev/null
+++ b/scripts/build/ci-deploy/build-deploy.sh
@@ -0,0 +1,7 @@
+#!/bin/bash
+
+_version="1.0.0"
+_tag="grafana/grafana-ci-deploy:${_version}"
+
+docker build -t $_tag .
+docker push $_tag
diff --git a/scripts/build/publish.go b/scripts/build/publish.go
index ab9cbebf6bb..d5b19877724 100644
--- a/scripts/build/publish.go
+++ b/scripts/build/publish.go
@@ -22,13 +22,13 @@ var versionRe = regexp.MustCompile(`grafana-(.*)(\.|_)(arm64|armhfp|aarch64|armv
 var debVersionRe = regexp.MustCompile(`grafana_(.*)_(arm64|armv7|armhf|amd64)\.deb`)
 var builds = []build{}
 var architectureMapping = map[string]string{
-	"armv7":"armv7",
-	"armhfp":"armv7",
-	"armhf":"armv7",
-	"arm64":"arm64",
-	"aarch64":"arm64",
-	"amd64":"amd64",
-	"x86_64":"amd64",
+	"armv7":   "armv7",
+	"armhfp":  "armv7",
+	"armhf":   "armv7",
+	"arm64":   "arm64",
+	"aarch64": "arm64",
+	"amd64":   "amd64",
+	"x86_64":  "amd64",
 }
 
 func main() {
@@ -78,7 +78,7 @@ func mapPackage(path string, name string, shaBytes []byte) (build, error) {
 	if len(result) > 0 {
 		version = string(result[1])
 		log.Printf("Version detected: %v", version)
-	} else if (len(debResult) > 0) {
+	} else if len(debResult) > 0 {
 		version = string(debResult[1])
 	} else {
 		return build{}, fmt.Errorf("Unable to figure out version from '%v'", name)
@@ -124,6 +124,9 @@ func mapPackage(path string, name string, shaBytes []byte) (build, error) {
 }
 
 func packageWalker(path string, f os.FileInfo, err error) error {
+	if err != nil {
+		log.Printf("error: %v", err)
+	}
 	if f.Name() == "dist" || strings.Contains(f.Name(), "sha256") || strings.Contains(f.Name(), "latest") {
 		return nil
 	}
@@ -134,7 +137,6 @@ func packageWalker(path string, f os.FileInfo, err error) error {
 	}
 
 	build, err := mapPackage(path, f.Name(), shaBytes)
-
 	if err != nil {
 		log.Printf("Could not map metadata from package: %v", err)
 		return nil
diff --git a/scripts/grunt/default_task.js b/scripts/grunt/default_task.js
index bfa4080da4c..7b975aac977 100644
--- a/scripts/grunt/default_task.js
+++ b/scripts/grunt/default_task.js
@@ -17,8 +17,8 @@ module.exports = function (grunt) {
 
   grunt.registerTask('precommit', [
     'sasslint',
-    'exec:tslint',
-    'exec:tsc',
+    'newer:exec:tslint',
+    'newer:exec:tsc',
     'no-only-tests'
   ]);
 
diff --git a/scripts/grunt/options/compress.js b/scripts/grunt/options/compress.js
index 4dc77ec82f8..943a42bb571 100644
--- a/scripts/grunt/options/compress.js
+++ b/scripts/grunt/options/compress.js
@@ -4,7 +4,7 @@ module.exports = function(config) {
   var task = {
     release: {
       options: {
-        archive: '<%= destDir %>/<%= pkg.name %>-<%= pkg.version %>.<%= platform %>-<%= arch %>.tar.gz'
+        archive: '<%= destDir %>/<%= pkg.name %><%= enterprise ? "-enterprise" : ""  %>-<%= pkg.version %>.<%= platform %>-<%= arch %>.tar.gz'
       },
       files : [
         {
@@ -23,7 +23,7 @@ module.exports = function(config) {
   };
 
   if (config.platform === 'windows') {
-    task.release.options.archive = '<%= destDir %>/<%= pkg.name %>-<%= pkg.version %>.<%= platform %>-<%= arch %>.zip';
+    task.release.options.archive = '<%= destDir %>/<%= pkg.name %><%= enterprise ? "-enterprise" : ""  %>-<%= pkg.version %>.<%= platform %>-<%= arch %>.zip';
   }
 
   return task;
diff --git a/scripts/grunt/options/exec.js b/scripts/grunt/options/exec.js
index d01a993be67..3b60c5c3be6 100644
--- a/scripts/grunt/options/exec.js
+++ b/scripts/grunt/options/exec.js
@@ -2,8 +2,14 @@ module.exports = function (config, grunt) {
   'use strict';
 
   return {
-    tslint: 'node ./node_modules/tslint/lib/tslintCli.js -c tslint.json --project ./tsconfig.json',
-    tsc: 'yarn tsc --noEmit',
+    tslint: {
+      command: 'node ./node_modules/tslint/lib/tslintCli.js -c tslint.json --project ./tsconfig.json',
+      src: ['public/app/**/*.ts*'],
+    },
+    tsc: {
+      command: 'yarn tsc --noEmit',
+      src: ['public/app/**/*.ts*'],
+    },
     jest: 'node ./node_modules/jest-cli/bin/jest.js --maxWorkers 2',
     webpack: 'node ./node_modules/webpack/bin/webpack.js --config scripts/webpack/webpack.prod.js',
   };
diff --git a/scripts/webpack/webpack.common.js b/scripts/webpack/webpack.common.js
index d367016c4fb..dc4a7f363a2 100644
--- a/scripts/webpack/webpack.common.js
+++ b/scripts/webpack/webpack.common.js
@@ -16,7 +16,7 @@ module.exports = {
     publicPath: "public/build/",
   },
   resolve: {
-    extensions: ['.ts', '.tsx', '.es6', '.js', '.json'],
+    extensions: ['.ts', '.tsx', '.es6', '.js', '.json', '.svg'],
     alias: {
     },
     modules: [
diff --git a/yarn.lock b/yarn.lock
index 5c5156b9970..4c7bbdd130c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5971,6 +5971,14 @@ grunt-legacy-util@~1.0.0:
     underscore.string "~3.2.3"
     which "~1.2.1"
 
+grunt-newer@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/grunt-newer/-/grunt-newer-1.3.0.tgz#83ccb7a1dda7cbd8ab23b059024ebe614ad2f342"
+  integrity sha1-g8y3od2ny9irI7BZAk6+YUrS80I=
+  dependencies:
+    async "^1.5.2"
+    rimraf "^2.5.2"
+
 grunt-notify@^0.4.5:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/grunt-notify/-/grunt-notify-0.4.5.tgz#05293990616110db6bc0ad15e6c0592ffe18ac31"