diff --git a/.circleci/config.yml b/.circleci/config.yml
index 3dd8f800b94..dba6c5f8bd0 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -19,7 +19,7 @@ version: 2
 jobs:
   mysql-integration-test:
     docker:
-      - image: circleci/golang:1.11
+      - image: circleci/golang:1.11.4
       - image: circleci/mysql:5.6-ram
         environment:
           MYSQL_ROOT_PASSWORD: rootpass
@@ -39,7 +39,7 @@ jobs:
 
   postgres-integration-test:
     docker:
-      - image: circleci/golang:1.11
+      - image: circleci/golang:1.11.4
       - image: circleci/postgres:9.3-ram
         environment:
           POSTGRES_USER: grafanatest
@@ -74,7 +74,7 @@ jobs:
 
   gometalinter:
     docker:
-      - image: circleci/golang:1.11
+      - image: circleci/golang:1.11.4
         environment:
           # we need CGO because of go-sqlite3
           CGO_ENABLED: 1
@@ -117,7 +117,7 @@ jobs:
 
   test-backend:
     docker:
-      - image: circleci/golang:1.11
+      - image: circleci/golang:1.11.4
     working_directory: /go/src/github.com/grafana/grafana
     steps:
       - checkout
@@ -175,7 +175,7 @@ jobs:
 
   build:
     docker:
-     - image: grafana/build-container:1.2.1
+     - image: grafana/build-container:1.2.2
     working_directory: /go/src/github.com/grafana/grafana
     steps:
       - checkout
diff --git a/.gitignore b/.gitignore
index 05ae4907e89..d599f762840 100644
--- a/.gitignore
+++ b/.gitignore
@@ -76,3 +76,4 @@ debug.test
 /devenv/bulk_alerting_dashboards/*.json
 
 /scripts/build/release_publisher/release_publisher
+*.patch
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 69b78a30f68..5b420dcc374 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ### New Features
 * **Alerting**: Adds support for Google Hangouts Chat notifications [#11221](https://github.com/grafana/grafana/issues/11221), thx [@PatrickSchuster](https://github.com/PatrickSchuster)
+* **Snapshots**: Enable deletion of public snapshot [#14109](https://github.com/grafana/grafana/issues/14109)
 
 ### Minor
 
@@ -11,6 +12,13 @@
 * **Dataproxy**: Override incoming Authorization header [#13815](https://github.com/grafana/grafana/issues/13815), thx [@kornholi](https://github.com/kornholi)
 * **Admin**: Fix prevent removing last grafana admin permissions [#11067](https://github.com/grafana/grafana/issues/11067), thx [@danielbh](https://github.com/danielbh)
 * **Templating**: Escaping "Custom" template variables [#13754](https://github.com/grafana/grafana/issues/13754), thx [@IntegersOfK](https://github.com/IntegersOfK)
+* **Admin**: When multiple user invitations, all links are the same as the first user who was invited [#14483](https://github.com/grafana/grafana/issues/14483)
+* **LDAP**: Upgrade go-ldap to v3 [#14548](https://github.com/grafana/grafana/issues/14548)
+* **Proxy whitelist**: Add CIDR capability to auth_proxy whitelist [#14546](https://github.com/grafana/grafana/issues/14546), thx [@jacobrichard](https://github.com/jacobrichard)
+* **OAuth**: Support OAuth providers that are not RFC6749 compliant [#14562](https://github.com/grafana/grafana/issues/14562), thx [@tdabasinskas](https://github.com/tdabasinskas)
+
+### Bug fixes
+* **Search**: Fix for issue with scrolling the "tags filter" dropdown, fixes [#14486](https://github.com/grafana/grafana/issues/14486)
 
 # 5.4.2 (2018-12-13)
 
diff --git a/Dockerfile b/Dockerfile
index 65260e1a6a8..c3af89b6092 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,5 +1,5 @@
 # Golang build container
-FROM golang:1.11
+FROM golang:1.11.4
 
 WORKDIR $GOPATH/src/github.com/grafana/grafana
 
diff --git a/Gopkg.lock b/Gopkg.lock
index 1e06d4cbc5d..d7795cbd6ba 100644
--- a/Gopkg.lock
+++ b/Gopkg.lock
@@ -2,39 +2,30 @@
 
 
 [[projects]]
-  digest = "1:f8ad8a53fa865a70efbe215b0ca34735523f50ea39e0efde319ab6fc80089b44"
   name = "cloud.google.com/go"
   packages = ["compute/metadata"]
-  pruneopts = "NUT"
   revision = "056a55f54a6cc77b440b31a56a5e7c3982d32811"
   version = "v0.22.0"
 
 [[projects]]
-  digest = "1:167b6f65a6656de568092189ae791253939f076df60231fdd64588ac703892a1"
   name = "github.com/BurntSushi/toml"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "b26d9c308763d68093482582cea63d69be07a0f0"
   version = "v0.3.0"
 
 [[projects]]
   branch = "master"
-  digest = "1:7d23e6e1889b8bb4bbb37a564708fdab4497ce232c3a99d66406c975b642a6ff"
   name = "github.com/Unknwon/com"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "7677a1d7c1137cd3dd5ba7a076d0c898a1ef4520"
 
 [[projects]]
   branch = "master"
-  digest = "1:1610787cd9726e29d8fecc2a80e43e4fced008a1f560fec6688fc4d946f17835"
   name = "github.com/VividCortex/mysqlerr"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "6c6b55f8796f578c870b7e19bafb16103bc40095"
 
 [[projects]]
-  digest = "1:58294d68772aab5a8941b7d5d228eff7cccf63f895e914bc9bc38fda80471ea5"
   name = "github.com/aws/aws-sdk-go"
   packages = [
     "aws",
@@ -70,523 +61,399 @@
     "service/ec2",
     "service/ec2/ec2iface",
     "service/s3",
-    "service/sts",
+    "service/sts"
   ]
-  pruneopts = "NUT"
   revision = "fde4ded7becdeae4d26bf1212916aabba79349b4"
   version = "v1.14.12"
 
 [[projects]]
   branch = "master"
-  digest = "1:79cad073c7be02632d3fa52f62486848b089f560db1e94536de83a408c0f4726"
   name = "github.com/benbjohnson/clock"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "7dc76406b6d3c05b5f71a86293cbcf3c4ea03b19"
 
 [[projects]]
   branch = "master"
-  digest = "1:707ebe952a8b3d00b343c01536c79c73771d100f63ec6babeaed5c79e2b8a8dd"
   name = "github.com/beorn7/perks"
   packages = ["quantile"]
-  pruneopts = "NUT"
   revision = "3a771d992973f24aa725d07868b467d1ddfceafb"
 
 [[projects]]
   branch = "master"
-  digest = "1:433a2ff0ef4e2f8634614aab3174783c5ff80120b487712db96cc3712f409583"
   name = "github.com/bmizerany/assert"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "b7ed37b82869576c289d7d97fb2bbd8b64a0cb28"
 
 [[projects]]
   branch = "master"
-  digest = "1:d8f9145c361920507a4f85ffb7f70b96beaedacba2ce8c00aa663adb08689d3e"
   name = "github.com/bradfitz/gomemcache"
   packages = ["memcache"]
-  pruneopts = "NUT"
   revision = "1952afaa557dc08e8e0d89eafab110fb501c1a2b"
 
 [[projects]]
   branch = "master"
-  digest = "1:8ecb89af7dfe3ac401bdb0c9390b134ef96a97e85f732d2b0604fb7b3977839f"
   name = "github.com/codahale/hdrhistogram"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "3a0bb77429bd3a61596f5e8a3172445844342120"
 
 [[projects]]
-  digest = "1:5dba68a1600a235630e208cb7196b24e58fcbb77bb7a6bec08fcd23f081b0a58"
   name = "github.com/codegangsta/cli"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "cfb38830724cc34fedffe9a2a29fb54fa9169cd1"
   version = "v1.20.0"
 
 [[projects]]
-  digest = "1:a2c1d0e43bd3baaa071d1b9ed72c27d78169b2b269f71c105ac4ba34b1be4a39"
   name = "github.com/davecgh/go-spew"
   packages = ["spew"]
-  pruneopts = "NUT"
   revision = "346938d642f2ec3594ed81d874461961cd0faa76"
   version = "v1.1.0"
 
 [[projects]]
-  digest = "1:1b318d2dd6cea8a1a8d8ec70348852303bd3e491df74e8bca6e32eb5a4d06970"
   name = "github.com/denisenkom/go-mssqldb"
   packages = [
     ".",
-    "internal/cp",
+    "internal/cp"
   ]
-  pruneopts = "NUT"
   revision = "270bc3860bb94dd3a3ffd047377d746c5e276726"
 
 [[projects]]
   branch = "master"
-  digest = "1:2da5f11ad66ff01a27a5c3dba4620b7eee2327be75b32c9ee9f87c9a8001ecbf"
   name = "github.com/facebookgo/inject"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "cc1aa653e50f6a9893bcaef89e673e5b24e1e97b"
 
 [[projects]]
   branch = "master"
-  digest = "1:1108df7f658c90db041e0d6174d55be689aaeb0585913b9c3c7aab51a3a6b2b1"
   name = "github.com/facebookgo/structtag"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "217e25fb96916cc60332e399c9aa63f5c422ceed"
 
 [[projects]]
-  digest = "1:ade392a843b2035effb4b4a2efa2c3bab3eb29b992e98bacf9c898b0ecb54e45"
   name = "github.com/fatih/color"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "5b77d2a35fb0ede96d138fc9a99f5c9b6aef11b4"
   version = "v1.7.0"
 
 [[projects]]
-  digest = "1:e05711632e1515319b014e8fe4cbe1d30ab024c473403f60cf0fdeb4c586a474"
   name = "github.com/go-ini/ini"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "6529cf7c58879c08d927016dde4477f18a0634cb"
   version = "v1.36.0"
 
-[[projects]]
-  digest = "1:7e1c00b9959544fa1ccca7cf0407a5b29ac6d5201059c4fac6f599cb99bfd24d"
-  name = "github.com/go-ldap/ldap"
-  packages = ["."]
-  pruneopts = "NUT"
-  revision = "bb7a9ca6e4fbc2129e3db588a34bc970ffe811a9"
-  version = "v2.5.1"
-
 [[projects]]
   branch = "master"
-  digest = "1:682a0aca743a1a4a36697f3d7f86c0ed403c4e3a780db9935f633242855eac9c"
   name = "github.com/go-macaron/binding"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "ac54ee249c27dca7e76fad851a4a04b73bd1b183"
 
 [[projects]]
   branch = "master"
-  digest = "1:6326b27f8e0c8e135c8674ddbc619fae879664ac832e8e6fa6a23ce0d279ed4d"
   name = "github.com/go-macaron/gzip"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "cad1c6580a07c56f5f6bc52d66002a05985c5854"
 
 [[projects]]
   branch = "master"
-  digest = "1:fb8711b648d1ff03104fc1d9593a13cb1d5120be7ba2b01641c14ccae286a9e3"
   name = "github.com/go-macaron/inject"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "d8a0b8677191f4380287cfebd08e462217bac7ad"
 
 [[projects]]
   branch = "master"
-  digest = "1:21577aafe885f088e8086a3415f154c63c0b7ce956a6994df2ac5776bc01b7e3"
   name = "github.com/go-macaron/session"
   packages = [
     ".",
     "memcache",
     "postgres",
-    "redis",
+    "redis"
   ]
-  pruneopts = "NUT"
   revision = "068d408f9c54c7fa7fcc5e2bdd3241ab21280c9e"
 
 [[projects]]
-  digest = "1:fddd4bada6100d6fc49a9f32f18ba5718db45a58e4b00aa6377e1cfbf06af34f"
   name = "github.com/go-sql-driver/mysql"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "2cc627ac8defc45d65066ae98f898166f580f9a4"
 
 [[projects]]
-  digest = "1:a1efdbc2762667c8a41cbf02b19a0549c846bf2c1d08cad4f445e3344089f1f0"
   name = "github.com/go-stack/stack"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "259ab82a6cad3992b4e21ff5cac294ccb06474bc"
   version = "v1.7.0"
 
 [[projects]]
-  digest = "1:b9d4f09cdaaa9e7dca5ed0b501ca5519eb2168dd01fc5d174c54edfe42a7d5ed"
   name = "github.com/go-xorm/builder"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "bad0a612f0d6277b953910822ab5dfb30dd18237"
   version = "v0.2.0"
 
 [[projects]]
-  digest = "1:30fb106b0cd6d64ea6fccded579c8f7d788460092f885fcc8f3edd02fc2085a4"
   name = "github.com/go-xorm/core"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "da1adaf7a28ca792961721a34e6e04945200c890"
   version = "v0.5.7"
 
 [[projects]]
-  digest = "1:007d1354e4f44e6a393337e7623bcf911dfe75d6ef30fb767a6a0b65d302f5ed"
   name = "github.com/go-xorm/xorm"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "1933dd69e294c0a26c0266637067f24dbb25770c"
   version = "v0.6.4"
 
 [[projects]]
   branch = "master"
-  digest = "1:ffbb19fb66f140b5ea059428d1f84246a055d1bc3d9456c1e5c3d143611f03d0"
   name = "github.com/golang/protobuf"
   packages = [
     "proto",
     "ptypes",
     "ptypes/any",
     "ptypes/duration",
-    "ptypes/timestamp",
+    "ptypes/timestamp"
   ]
-  pruneopts = "NUT"
   revision = "927b65914520a8b7d44f5c9057611cfec6b2e2d0"
 
 [[projects]]
   branch = "master"
-  digest = "1:f14d1b50e0075fb00177f12a96dd7addf93d1e2883c25befd17285b779549795"
   name = "github.com/gopherjs/gopherjs"
   packages = ["js"]
-  pruneopts = "NUT"
   revision = "8dffc02ea1cb8398bb73f30424697c60fcf8d4c5"
 
 [[projects]]
-  digest = "1:3b708ebf63bfa9ba3313bedb8526bc0bb284e51474e65e958481476a9d4a12aa"
   name = "github.com/gorilla/websocket"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "ea4d1f681babbce9545c9c5f3d5194a789c89f5b"
   version = "v1.2.0"
 
 [[projects]]
-  digest = "1:4e771d1c6e15ca4516ad971c34205c822b5cff2747179679d7b321e4e1bfe431"
   name = "github.com/gosimple/slug"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "e9f42fa127660e552d0ad2b589868d403a9be7c6"
   version = "v1.1.1"
 
 [[projects]]
   branch = "master"
-  digest = "1:08e53c69cd267ef7d71eeae5d953153d0d2bc1b8e0b498731fe9acaead7001b6"
   name = "github.com/grafana/grafana-plugin-model"
   packages = [
     "go/datasource",
-    "go/renderer",
+    "go/renderer"
   ]
-  pruneopts = "NUT"
   revision = "84176c64269d8060f99e750ee8aba6f062753336"
 
 [[projects]]
   branch = "master"
-  digest = "1:58ba5285227b0f635652cd4aa82c4cfd00b590191eadd823462f0c9f64e3ae07"
   name = "github.com/hashicorp/go-hclog"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "69ff559dc25f3b435631604f573a5fa1efdb6433"
 
 [[projects]]
-  digest = "1:532090ffc3b05a7e4c0229dd2698d79149f2e0683df993224a8b202f607fb605"
   name = "github.com/hashicorp/go-plugin"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "e8d22c780116115ae5624720c9af0c97afe4f551"
 
 [[projects]]
   branch = "master"
-  digest = "1:8925116d1edcd85fc0c014e1aa69ce12892489b48ee633a605c46d893b8c151f"
   name = "github.com/hashicorp/go-version"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "23480c0665776210b5fbbac6eaaee40e3e6a96b7"
 
 [[projects]]
   branch = "master"
-  digest = "1:8deb0c5545c824dfeb0ac77ab8eb67a3d541eab76df5c85ce93064ef02d44cd0"
   name = "github.com/hashicorp/yamux"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "7221087c3d281fda5f794e28c2ea4c6e4d5c4558"
 
 [[projects]]
-  digest = "1:efbe016b6d198cf44f1db0ed2fbdf1b36ebf1f6956cc9b76d6affa96f022d368"
   name = "github.com/inconshreveable/log15"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "0decfc6c20d9ca0ad143b0e89dcaa20f810b4fb3"
   version = "v2.13"
 
 [[projects]]
-  digest = "1:ac6d01547ec4f7f673311b4663909269bfb8249952de3279799289467837c3cc"
   name = "github.com/jmespath/go-jmespath"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "0b12d6b5"
 
 [[projects]]
-  digest = "1:6ddab442e52381bab82fb6c07ef3f4b565ff7ec4b8fae96d8dd4b8573a460597"
   name = "github.com/jtolds/gls"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "77f18212c9c7edc9bd6a33d383a7b545ce62f064"
   version = "v4.2.1"
 
 [[projects]]
-  digest = "1:1da1796a71eb70f1e3e085984d044f67840bb0326816ec8276231aa87b1b9fc3"
   name = "github.com/klauspost/compress"
   packages = [
     "flate",
-    "gzip",
+    "gzip"
   ]
-  pruneopts = "NUT"
   revision = "6c8db69c4b49dd4df1fff66996cf556176d0b9bf"
   version = "v1.2.1"
 
 [[projects]]
-  digest = "1:5e55a8699c9ff7aba1e4c8952aeda209685d88d4cb63a8766c338e333b8e65d6"
   name = "github.com/klauspost/cpuid"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "ae7887de9fa5d2db4eaa8174a7eff2c1ac00f2da"
   version = "v1.1"
 
 [[projects]]
-  digest = "1:b95da1293525625ef6f07be79d537b9bf2ecd7901efcf9a92193edafbd55b9ef"
   name = "github.com/klauspost/crc32"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "cb6bfca970f6908083f26f39a79009d608efd5cd"
   version = "v1.1"
 
 [[projects]]
-  digest = "1:7b21c7fc5551b46d1308b4ffa9e9e49b66c7a8b0ba88c0130474b0e7a20d859f"
   name = "github.com/kr/pretty"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "73f6ac0b30a98e433b289500d779f50c1a6f0712"
   version = "v0.1.0"
 
 [[projects]]
-  digest = "1:c3a7836b5904db0f8b609595b619916a6831cb35b8b714aec39f96d00c6155d8"
   name = "github.com/kr/text"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "e2ffdb16a802fe2bb95e2e35ff34f0e53aeef34f"
   version = "v0.1.0"
 
 [[projects]]
   branch = "master"
-  digest = "1:7a1e592f0349d56fac8ce47f28469e4e7f4ce637cb26f40c88da9dff25db1c98"
   name = "github.com/lib/pq"
   packages = [
     ".",
-    "oid",
+    "oid"
   ]
-  pruneopts = "NUT"
   revision = "d34b9ff171c21ad295489235aec8b6626023cd04"
 
 [[projects]]
-  digest = "1:08c231ec84231a7e23d67e4b58f975e1423695a32467a362ee55a803f9de8061"
   name = "github.com/mattn/go-colorable"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "167de6bfdfba052fa6b2d3664c8f5272e23c9072"
   version = "v0.0.9"
 
 [[projects]]
-  digest = "1:bc4f7eec3b7be8c6cb1f0af6c1e3333d5bb71072951aaaae2f05067b0803f287"
   name = "github.com/mattn/go-isatty"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "0360b2af4f38e8d38c7fce2a9f4e702702d73a39"
   version = "v0.0.3"
 
 [[projects]]
-  digest = "1:536979f1c56397dbf91c2785159b37dec37e35d3bffa3cd1cfe66d25f51f8088"
   name = "github.com/mattn/go-sqlite3"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "323a32be5a2421b8c7087225079c6c900ec397cd"
   version = "v1.7.0"
 
 [[projects]]
-  digest = "1:5985ef4caf91ece5d54817c11ea25f182697534f8ae6521eadcd628c142ac4b6"
   name = "github.com/matttproud/golang_protobuf_extensions"
   packages = ["pbutil"]
-  pruneopts = "NUT"
   revision = "3247c84500bff8d9fb6d579d800f20b3e091582c"
   version = "v1.0.0"
 
 [[projects]]
   branch = "master"
-  digest = "1:18b773b92ac82a451c1276bd2776c1e55ce057ee202691ab33c8d6690efcc048"
   name = "github.com/mitchellh/go-testing-interface"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "a61a99592b77c9ba629d254a693acffaeb4b7e28"
 
 [[projects]]
-  digest = "1:3b517122f3aad1ecce45a630ea912b3092b4729f25532a911d0cb2935a1f9352"
   name = "github.com/oklog/run"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "4dadeb3030eda0273a12382bb2348ffc7c9d1a39"
   version = "v1.0.0"
 
 [[projects]]
-  digest = "1:7da29c22bcc5c2ffb308324377dc00b5084650348c2799e573ed226d8cc9faf0"
   name = "github.com/opentracing/opentracing-go"
   packages = [
     ".",
     "ext",
-    "log",
+    "log"
   ]
-  pruneopts = "NUT"
   revision = "1949ddbfd147afd4d964a9f00b24eb291e0e7c38"
   version = "v1.0.2"
 
 [[projects]]
-  digest = "1:748946761cf99c8b73cef5a3c0ee3e040859dd713a20cece0d0e0dc04e6ceca7"
   name = "github.com/patrickmn/go-cache"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "a3647f8e31d79543b2d0f0ae2fe5c379d72cedc0"
   version = "v2.1.0"
 
 [[projects]]
-  digest = "1:5cf3f025cbee5951a4ee961de067c8a89fc95a5adabead774f82822efabab121"
   name = "github.com/pkg/errors"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "645ef00459ed84a119197bfb8d8205042c6df63d"
   version = "v0.8.0"
 
 [[projects]]
-  digest = "1:4759bed95e3a52febc18c071db28790a5c6e9e106ee201a37add6f6a056f8f9c"
   name = "github.com/prometheus/client_golang"
   packages = [
     "api",
     "api/prometheus/v1",
     "prometheus",
-    "prometheus/promhttp",
+    "prometheus/promhttp"
   ]
-  pruneopts = "NUT"
   revision = "967789050ba94deca04a5e84cce8ad472ce313c1"
   version = "v0.9.0-pre1"
 
 [[projects]]
   branch = "master"
-  digest = "1:32d10bdfa8f09ecf13598324dba86ab891f11db3c538b6a34d1c3b5b99d7c36b"
   name = "github.com/prometheus/client_model"
   packages = ["go"]
-  pruneopts = "NUT"
   revision = "99fa1f4be8e564e8a6b613da7fa6f46c9edafc6c"
 
 [[projects]]
   branch = "master"
-  digest = "1:768b555b86742de2f28beb37f1dedce9a75f91f871d75b5717c96399c1a78c08"
   name = "github.com/prometheus/common"
   packages = [
     "expfmt",
     "internal/bitbucket.org/ww/goautoneg",
-    "model",
+    "model"
   ]
-  pruneopts = "NUT"
   revision = "d811d2e9bf898806ecfb6ef6296774b13ffc314c"
 
 [[projects]]
   branch = "master"
-  digest = "1:c4a213a8d73fbb0b13f717ba7996116602ef18ecb42b91d77405877914cb0349"
   name = "github.com/prometheus/procfs"
   packages = [
     ".",
     "internal/util",
     "nfs",
-    "xfs",
+    "xfs"
   ]
-  pruneopts = "NUT"
   revision = "8b1c2da0d56deffdbb9e48d4414b4e674bd8083e"
 
 [[projects]]
   branch = "master"
-  digest = "1:16e2136a67ec44aa2d1d6b0fd65394b3c4a8b2a1b6730c77967f7b7b06b179b2"
   name = "github.com/rainycape/unidecode"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "cb7f23ec59bec0d61b19c56cd88cee3d0cc1870c"
 
 [[projects]]
-  digest = "1:d917313f309bda80d27274d53985bc65651f81a5b66b820749ac7f8ef061fd04"
   name = "github.com/sergi/go-diff"
   packages = ["diffmatchpatch"]
-  pruneopts = "NUT"
   revision = "1744e2970ca51c86172c8190fadad617561ed6e7"
   version = "v1.0.0"
 
 [[projects]]
-  digest = "1:1f0b284a6858827de4c27c66b49b2b25df3e16b031c2b57b7892273131e7dd2b"
   name = "github.com/smartystreets/assertions"
   packages = [
     ".",
     "internal/go-render/render",
-    "internal/oglematchers",
+    "internal/oglematchers"
   ]
-  pruneopts = "NUT"
   revision = "7678a5452ebea5b7090a6b163f844c133f523da2"
   version = "1.8.3"
 
 [[projects]]
-  digest = "1:7efd0b2309cdd6468029fa30c808c50a820c9344df07e1a4bbdaf18f282907aa"
   name = "github.com/smartystreets/goconvey"
   packages = [
     "convey",
     "convey/gotest",
-    "convey/reporting",
+    "convey/reporting"
   ]
-  pruneopts = "NUT"
   revision = "9e8dc3f972df6c8fcc0375ef492c24d0bb204857"
   version = "1.6.3"
 
 [[projects]]
   branch = "master"
-  digest = "1:a66add8dd963bfc72649017c1b321198f596cb4958cb1a11ff91a1be8691020b"
   name = "github.com/teris-io/shortid"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "771a37caa5cf0c81f585d7b6df4dfc77e0615b5c"
 
 [[projects]]
-  digest = "1:3d48c38e0eca8c66df62379c5ae7a83fb5cd839b94f241354c07ba077da7bc45"
   name = "github.com/uber/jaeger-client-go"
   packages = [
     ".",
@@ -604,55 +471,45 @@
     "thrift-gen/jaeger",
     "thrift-gen/sampling",
     "thrift-gen/zipkincore",
-    "utils",
+    "utils"
   ]
-  pruneopts = "NUT"
   revision = "b043381d944715b469fd6b37addfd30145ca1758"
   version = "v2.14.0"
 
 [[projects]]
-  digest = "1:0f09db8429e19d57c8346ad76fbbc679341fa86073d3b8fb5ac919f0357d8f4c"
   name = "github.com/uber/jaeger-lib"
   packages = ["metrics"]
-  pruneopts = "NUT"
   revision = "ed3a127ec5fef7ae9ea95b01b542c47fbd999ce5"
   version = "v1.5.0"
 
 [[projects]]
-  digest = "1:4c7d12ad3ef47bb03892a52e2609dc9a9cff93136ca9c7d31c00b79fcbc23c7b"
   name = "github.com/yudai/gojsondiff"
   packages = [
     ".",
-    "formatter",
+    "formatter"
   ]
-  pruneopts = "NUT"
   revision = "7b1b7adf999dab73a6eb02669c3d82dbb27a3dd6"
   version = "1.0.0"
 
 [[projects]]
   branch = "master"
-  digest = "1:e50cbf8eba568d59b71e08c22c2a77809ed4646ae06ef4abb32b3d3d3fdb1a77"
   name = "github.com/yudai/golcs"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "ecda9a501e8220fae3b4b600c3db4b0ba22cfc68"
 
 [[projects]]
   branch = "master"
-  digest = "1:758f363e0dff33cf00b234be2efb12f919d79b42d5ae3909ff9eb69ef2c3cca5"
   name = "golang.org/x/crypto"
   packages = [
     "ed25519",
     "ed25519/internal/edwards25519",
     "md4",
-    "pbkdf2",
+    "pbkdf2"
   ]
-  pruneopts = "NUT"
   revision = "1a580b3eff7814fc9b40602fd35256c63b50f491"
 
 [[projects]]
   branch = "master"
-  digest = "1:0b3fee9c4472022a0982ee0d81e08b3cc3e595f50befd7a4b358b48540d9d8c5"
   name = "golang.org/x/net"
   packages = [
     "context",
@@ -662,43 +519,35 @@
     "http2/hpack",
     "idna",
     "internal/timeseries",
-    "trace",
+    "trace"
   ]
-  pruneopts = "NUT"
   revision = "2491c5de3490fced2f6cff376127c667efeed857"
 
 [[projects]]
   branch = "master"
-  digest = "1:46bd4e66bfce5e77f08fc2e8dcacc3676e679241ce83d9c150ff0397d686dd44"
   name = "golang.org/x/oauth2"
   packages = [
     ".",
     "google",
     "internal",
     "jws",
-    "jwt",
+    "jwt"
   ]
-  pruneopts = "NUT"
   revision = "cdc340f7c179dbbfa4afd43b7614e8fcadde4269"
 
 [[projects]]
   branch = "master"
-  digest = "1:39ebcc2b11457b703ae9ee2e8cca0f68df21969c6102cb3b705f76cca0ea0239"
   name = "golang.org/x/sync"
   packages = ["errgroup"]
-  pruneopts = "NUT"
   revision = "1d60e4601c6fd243af51cc01ddf169918a5407ca"
 
 [[projects]]
   branch = "master"
-  digest = "1:ec21c5bf0572488865b93e30ffd9132afbf85bec0b20c2d6cbcf349cf2031ed5"
   name = "golang.org/x/sys"
   packages = ["unix"]
-  pruneopts = "NUT"
   revision = "7c87d13f8e835d2fb3a70a2912c811ed0c1d241b"
 
 [[projects]]
-  digest = "1:e7071ed636b5422cc51c0e3a6cebc229d6c9fffc528814b519a980641422d619"
   name = "golang.org/x/text"
   packages = [
     "collate",
@@ -714,14 +563,12 @@
     "unicode/bidi",
     "unicode/cldr",
     "unicode/norm",
-    "unicode/rangetable",
+    "unicode/rangetable"
   ]
-  pruneopts = "NUT"
   revision = "f21a4dfb5e38f5895301dc265a8def02365cc3d0"
   version = "v0.3.0"
 
 [[projects]]
-  digest = "1:dbd5568923513ee74aa626d027e2a8a352cf8f35df41d19f4e34491d1858c38b"
   name = "google.golang.org/appengine"
   packages = [
     ".",
@@ -734,22 +581,18 @@
     "internal/modules",
     "internal/remote_api",
     "internal/urlfetch",
-    "urlfetch",
+    "urlfetch"
   ]
-  pruneopts = "NUT"
   revision = "150dc57a1b433e64154302bdc40b6bb8aefa313a"
   version = "v1.0.0"
 
 [[projects]]
   branch = "master"
-  digest = "1:3c24554c312721e98fa6b76403e7100cf974eb46b1255ea7fc6471db9a9ce498"
   name = "google.golang.org/genproto"
   packages = ["googleapis/rpc/status"]
-  pruneopts = "NUT"
   revision = "7bb2a897381c9c5ab2aeb8614f758d7766af68ff"
 
 [[projects]]
-  digest = "1:840b77b6eb539b830bb760b6e30b688ed2ff484bd83466fce2395835ed9367fe"
   name = "google.golang.org/grpc"
   packages = [
     ".",
@@ -776,167 +619,78 @@
     "stats",
     "status",
     "tap",
-    "transport",
+    "transport"
   ]
-  pruneopts = "NUT"
   revision = "1e2570b1b19ade82d8dbb31bba4e65e9f9ef5b34"
   version = "v1.11.1"
 
 [[projects]]
   branch = "v3"
-  digest = "1:1244a9b3856f70d5ffb74bbfd780fc9d47f93f2049fa265c6fb602878f507bf8"
   name = "gopkg.in/alexcesaro/quotedprintable.v3"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "2caba252f4dc53eaf6b553000885530023f54623"
 
 [[projects]]
-  digest = "1:aea6e9483c167cc6fdf1274c442558c5dda8fd3373372be04d98c79100868da1"
   name = "gopkg.in/asn1-ber.v1"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "379148ca0225df7a432012b8df0355c2a2063ac0"
   version = "v1.2"
 
 [[projects]]
-  digest = "1:24bfc2e8bf971485cb5ba0f0e5b08a1b806cca5828134df76b32d1ea50f2ab49"
   name = "gopkg.in/bufio.v1"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "567b2bfa514e796916c4747494d6ff5132a1dfce"
   version = "v1"
 
 [[projects]]
-  digest = "1:e05711632e1515319b014e8fe4cbe1d30ab024c473403f60cf0fdeb4c586a474"
   name = "gopkg.in/ini.v1"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "6529cf7c58879c08d927016dde4477f18a0634cb"
   version = "v1.36.0"
 
 [[projects]]
-  digest = "1:3b0cf3a465fd07f76e5fc1a9d0783c662dac0de9fc73d713ebe162768fd87b5f"
+  name = "gopkg.in/ldap.v3"
+  packages = ["."]
+  revision = "5c2c0f997205c29de14cb6c35996370c2c5dfab1"
+  version = "v3"
+
+[[projects]]
   name = "gopkg.in/macaron.v1"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "c1be95e6d21e769e44e1ec33cec9da5837861c10"
   version = "v1.3.1"
 
 [[projects]]
   branch = "v2"
-  digest = "1:d52332f9e9f2c6343652e13aa3fd40cfd03353520c9a48d90f21215d3012d50f"
   name = "gopkg.in/mail.v2"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "5bc5c8bb07bd8d2803831fbaf8cbd630fcde2c68"
 
 [[projects]]
-  digest = "1:00126f697efdcab42f07c89ac8bf0095fb2328aef6464e070055154088cea859"
   name = "gopkg.in/redis.v2"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "e6179049628164864e6e84e973cfb56335748dea"
   version = "v2.3.2"
 
 [[projects]]
-  digest = "1:a50fabe7a46692dc7c656310add3d517abe7914df02afd151ef84da884605dc8"
   name = "gopkg.in/square/go-jose.v2"
   packages = [
     ".",
     "cipher",
-    "json",
+    "json"
   ]
-  pruneopts = "NUT"
   revision = "ef984e69dd356202fd4e4910d4d9c24468bdf0b8"
   version = "v2.1.9"
 
 [[projects]]
   branch = "v2"
-  digest = "1:7c95b35057a0ff2e19f707173cc1a947fa43a6eb5c4d300d196ece0334046082"
   name = "gopkg.in/yaml.v2"
   packages = ["."]
-  pruneopts = "NUT"
   revision = "5420a8b6744d3b0345ab293f6fcba19c978f1183"
 
 [solve-meta]
   analyzer-name = "dep"
   analyzer-version = 1
-  input-imports = [
-    "github.com/BurntSushi/toml",
-    "github.com/Unknwon/com",
-    "github.com/VividCortex/mysqlerr",
-    "github.com/aws/aws-sdk-go/aws",
-    "github.com/aws/aws-sdk-go/aws/awserr",
-    "github.com/aws/aws-sdk-go/aws/awsutil",
-    "github.com/aws/aws-sdk-go/aws/credentials",
-    "github.com/aws/aws-sdk-go/aws/credentials/ec2rolecreds",
-    "github.com/aws/aws-sdk-go/aws/credentials/endpointcreds",
-    "github.com/aws/aws-sdk-go/aws/defaults",
-    "github.com/aws/aws-sdk-go/aws/ec2metadata",
-    "github.com/aws/aws-sdk-go/aws/endpoints",
-    "github.com/aws/aws-sdk-go/aws/request",
-    "github.com/aws/aws-sdk-go/aws/session",
-    "github.com/aws/aws-sdk-go/service/cloudwatch",
-    "github.com/aws/aws-sdk-go/service/ec2",
-    "github.com/aws/aws-sdk-go/service/ec2/ec2iface",
-    "github.com/aws/aws-sdk-go/service/s3",
-    "github.com/aws/aws-sdk-go/service/sts",
-    "github.com/benbjohnson/clock",
-    "github.com/bmizerany/assert",
-    "github.com/codegangsta/cli",
-    "github.com/davecgh/go-spew/spew",
-    "github.com/denisenkom/go-mssqldb",
-    "github.com/facebookgo/inject",
-    "github.com/fatih/color",
-    "github.com/go-ldap/ldap",
-    "github.com/go-macaron/binding",
-    "github.com/go-macaron/gzip",
-    "github.com/go-macaron/session",
-    "github.com/go-macaron/session/memcache",
-    "github.com/go-macaron/session/postgres",
-    "github.com/go-macaron/session/redis",
-    "github.com/go-sql-driver/mysql",
-    "github.com/go-stack/stack",
-    "github.com/go-xorm/core",
-    "github.com/go-xorm/xorm",
-    "github.com/gorilla/websocket",
-    "github.com/gosimple/slug",
-    "github.com/grafana/grafana-plugin-model/go/datasource",
-    "github.com/grafana/grafana-plugin-model/go/renderer",
-    "github.com/hashicorp/go-hclog",
-    "github.com/hashicorp/go-plugin",
-    "github.com/hashicorp/go-version",
-    "github.com/inconshreveable/log15",
-    "github.com/lib/pq",
-    "github.com/mattn/go-isatty",
-    "github.com/mattn/go-sqlite3",
-    "github.com/opentracing/opentracing-go",
-    "github.com/opentracing/opentracing-go/ext",
-    "github.com/opentracing/opentracing-go/log",
-    "github.com/patrickmn/go-cache",
-    "github.com/pkg/errors",
-    "github.com/prometheus/client_golang/api",
-    "github.com/prometheus/client_golang/api/prometheus/v1",
-    "github.com/prometheus/client_golang/prometheus",
-    "github.com/prometheus/client_golang/prometheus/promhttp",
-    "github.com/prometheus/client_model/go",
-    "github.com/prometheus/common/expfmt",
-    "github.com/prometheus/common/model",
-    "github.com/smartystreets/goconvey/convey",
-    "github.com/teris-io/shortid",
-    "github.com/uber/jaeger-client-go/config",
-    "github.com/yudai/gojsondiff",
-    "github.com/yudai/gojsondiff/formatter",
-    "golang.org/x/net/context/ctxhttp",
-    "golang.org/x/oauth2",
-    "golang.org/x/oauth2/google",
-    "golang.org/x/oauth2/jwt",
-    "golang.org/x/sync/errgroup",
-    "gopkg.in/ini.v1",
-    "gopkg.in/macaron.v1",
-    "gopkg.in/mail.v2",
-    "gopkg.in/square/go-jose.v2",
-    "gopkg.in/yaml.v2",
-  ]
+  inputs-digest = "88f0eb826b9c154ba46ea3bb64767707d86db75449ec75199eb2b8cf2b337fd4"
   solver-name = "gps-cdcl"
   solver-version = 1
diff --git a/Gopkg.toml b/Gopkg.toml
index e3cbdeabb5d..83e6890b0f4 100644
--- a/Gopkg.toml
+++ b/Gopkg.toml
@@ -58,10 +58,6 @@ ignored = [
   name = "github.com/fatih/color"
   version = "1.5.0"
 
-[[constraint]]
-  name = "github.com/go-ldap/ldap"
-  version = "2.5.1"
-
 [[constraint]]
   branch = "master"
   name = "github.com/go-macaron/binding"
@@ -211,3 +207,7 @@ ignored = [
 [[constraint]]
   name = "gopkg.in/square/go-jose.v2"
   version = "2.1.9"
+
+[[constraint]]
+  name = "gopkg.in/ldap.v3"
+  version = "3.0.0"
diff --git a/README.md b/README.md
index 269c525e983..1ce4ffbe109 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ the latest master builds [here](https://grafana.com/grafana/download)
 ### Dependencies
 
 - Go (Latest Stable)
-- NodeJS LTS
+- Node.js LTS
 
 ### Building the backend
 ```bash
@@ -37,7 +37,7 @@ go run build.go build
 
 ### Building frontend assets
 
-For this you need nodejs (v.6+).
+For this you need Node.js (LTS version).
 
 To build the assets, rebuild on file change, and serve them by Grafana's webserver (http://localhost:3000):
 ```bash
@@ -90,7 +90,7 @@ Choose this option to build on platforms other than linux/amd64 and/or not have
 
 The resulting image will be tagged as `grafana/grafana:dev`
 
-Notice: If you are using Docker for MacOS, be sure to let limit of Memory bigger than 2 GiB (at docker -> Perferences -> Advanced), otherwize you may faild at `grunt build`
+Notice: If you are using Docker for MacOS, be sure to let limit of Memory bigger than 2 GiB (at docker -> Preferences -> Advanced), otherwize you may faild at `grunt build`
 
 ### Dev config
 
diff --git a/appveyor.yml b/appveyor.yml
index 4bbd3668e19..5f97784dd38 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -7,7 +7,7 @@ clone_folder: c:\gopath\src\github.com\grafana\grafana
 environment:
   nodejs_version: "8"
   GOPATH: C:\gopath
-  GOVERSION: 1.11
+  GOVERSION: 1.11.4
 
 install:
   - rmdir c:\go /s /q
diff --git a/conf/defaults.ini b/conf/defaults.ini
index 2ef2ad7942a..97c87edb8b2 100644
--- a/conf/defaults.ini
+++ b/conf/defaults.ini
@@ -335,6 +335,7 @@ tls_skip_verify_insecure = false
 tls_client_cert =
 tls_client_key =
 tls_client_ca =
+send_client_credentials_via_post = false
 
 #################################### Basic Auth ##########################
 [auth.basic]
diff --git a/conf/sample.ini b/conf/sample.ini
index ba65727dc4b..473e4e8450c 100644
--- a/conf/sample.ini
+++ b/conf/sample.ini
@@ -284,6 +284,10 @@ log_queries =
 ;tls_client_key =
 ;tls_client_ca =
 
+; Set to true to enable sending client_id and client_secret via POST body instead of Basic authentication HTTP header
+; This might be required if the OAuth provider is not RFC6749 compliant, only supporting credentials passed via POST payload
+;send_client_credentials_via_post = false
+
 #################################### Grafana.com Auth ####################
 [auth.grafana_com]
 ;enabled = false
diff --git a/docs/sources/auth/generic-oauth.md b/docs/sources/auth/generic-oauth.md
index 6fa6531fc98..c3c44426ba7 100644
--- a/docs/sources/auth/generic-oauth.md
+++ b/docs/sources/auth/generic-oauth.md
@@ -17,7 +17,7 @@ can find examples using Okta, BitBucket, OneLogin and Azure.
 
 This callback URL must match the full HTTP address that you use in your browser to access Grafana, but with the prefix path of `/login/generic_oauth`.
 
-You may have to set the `root_url` option of `[server]` for the callback URL to be 
+You may have to set the `root_url` option of `[server]` for the callback URL to be
 correct. For example in case you are serving Grafana behind a proxy.
 
 Example config:
@@ -209,6 +209,17 @@ allowed_organizations =
     token_url = https://<your domain>.my.centrify.com/OAuth2/Token/<Application ID>
     ```
 
+## Set up OAuth2 with non-compliant providers
+
+Some OAuth2 providers might not support `client_id` and `client_secret` passed via Basic Authentication HTTP header, which
+results in `invalid_client` error. To allow Grafana to authenticate via these type of providers, the client identifiers must be
+send via POST body, which can be enabled via the following settings:
+
+    ```bash
+    [auth.generic_oauth]
+    send_client_credentials_via_post = true
+    ```
+
 <hr>
 
 
diff --git a/docs/sources/auth/github.md b/docs/sources/auth/github.md
index b4ffc0fc2d4..22a10044d93 100644
--- a/docs/sources/auth/github.md
+++ b/docs/sources/auth/github.md
@@ -1,5 +1,5 @@
 +++
-title = "Google OAuth2 Authentication"
+title = "GitHub OAuth2 Authentication"
 description = "Grafana OAuthentication Guide "
 keywords = ["grafana", "configuration", "documentation", "oauth"]
 type = "docs"
diff --git a/docs/sources/auth/gitlab.md b/docs/sources/auth/gitlab.md
index 56fc3b131a5..541aed3fd1f 100644
--- a/docs/sources/auth/gitlab.md
+++ b/docs/sources/auth/gitlab.md
@@ -1,5 +1,5 @@
 +++
-title = "Google OAuth2 Authentication"
+title = "GitLab OAuth2 Authentication"
 description = "Grafana OAuthentication Guide "
 keywords = ["grafana", "configuration", "documentation", "oauth"]
 type = "docs"
diff --git a/package.json b/package.json
index d8ea4c036d4..d374cd524b4 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,9 @@
     "@types/enzyme": "^3.1.13",
     "@types/jest": "^23.3.2",
     "@types/node": "^8.0.31",
-    "@types/react": "^16.4.14",
+    "@types/react": "^16.7.6",
     "@types/react-custom-scrollbars": "^4.0.5",
-    "@types/react-dom": "^16.0.7",
+    "@types/react-dom": "^16.0.9",
     "@types/react-select": "^2.0.4",
     "angular-mocks": "1.6.6",
     "autoprefixer": "^6.4.0",
@@ -148,17 +148,18 @@
     "prismjs": "^1.6.0",
     "prop-types": "^15.6.2",
     "rc-cascader": "^0.14.0",
-    "react": "^16.5.0",
+    "react": "^16.6.3",
     "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "^16.5.0",
+    "react-dom": "^16.6.3",
     "react-grid-layout": "0.16.6",
+    "react-popper": "^1.3.0",
     "react-highlight-words": "0.11.0",
-    "react-popper": "^0.7.5",
     "react-redux": "^5.0.7",
-    "react-select": "2.1.0",
+    "@torkelo/react-select": "2.1.1",
     "react-sizeme": "^2.3.6",
     "react-table": "^6.8.6",
     "react-transition-group": "^2.2.1",
+    "react-virtualized": "^9.21.0",
     "redux": "^4.0.0",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
@@ -175,6 +176,7 @@
     "tslint-react": "^3.6.0"
   },
   "resolutions": {
-    "caniuse-db": "1.0.30000772"
+    "caniuse-db": "1.0.30000772",
+    "**/@types/react": "16.7.6"
   }
 }
diff --git a/packaging/publish/publish_both.sh b/packaging/publish/publish_both.sh
index b1d480567e9..b86c20011e0 100755
--- a/packaging/publish/publish_both.sh
+++ b/packaging/publish/publish_both.sh
@@ -1,17 +1,17 @@
 #! /usr/bin/env bash
-version=5.4.1
+version=5.4.2
 
-wget https://dl.grafana.com/oss/release/grafana_${version}_amd64.deb
+# wget https://dl.grafana.com/oss/release/grafana_${version}_amd64.deb
+#
+# package_cloud push grafana/stable/debian/jessie grafana_${version}_amd64.deb
+# package_cloud push grafana/stable/debian/wheezy grafana_${version}_amd64.deb
+# package_cloud push grafana/stable/debian/stretch grafana_${version}_amd64.deb
+#
+# package_cloud push grafana/testing/debian/jessie grafana_${version}_amd64.deb
+# package_cloud push grafana/testing/debian/wheezy grafana_${version}_amd64.deb --verbose
+# package_cloud push grafana/testing/debian/stretch grafana_${version}_amd64.deb --verbose
 
-package_cloud push grafana/stable/debian/jessie grafana_${version}_amd64.deb
-package_cloud push grafana/stable/debian/wheezy grafana_${version}_amd64.deb
-package_cloud push grafana/stable/debian/stretch grafana_${version}_amd64.deb
-
-package_cloud push grafana/testing/debian/jessie grafana_${version}_amd64.deb
-package_cloud push grafana/testing/debian/wheezy grafana_${version}_amd64.deb --verbose
-package_cloud push grafana/testing/debian/stretch grafana_${version}_amd64.deb --verbose
-
-wget https://dl.grafana.com/release/grafana-${version}-1.x86_64.rpm
+wget https://dl.grafana.com/oss/release/grafana-${version}-1.x86_64.rpm
 
 package_cloud push grafana/testing/el/6 grafana-${version}-1.x86_64.rpm --verbose
 package_cloud push grafana/testing/el/7 grafana-${version}-1.x86_64.rpm --verbose
diff --git a/pkg/api/dashboard_snapshot.go b/pkg/api/dashboard_snapshot.go
index e4e9c9d040f..ca7e78a58cd 100644
--- a/pkg/api/dashboard_snapshot.go
+++ b/pkg/api/dashboard_snapshot.go
@@ -1,10 +1,15 @@
 package api
 
 import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"net/http"
 	"time"
 
 	"github.com/grafana/grafana/pkg/api/dtos"
 	"github.com/grafana/grafana/pkg/bus"
+	"github.com/grafana/grafana/pkg/components/simplejson"
 	"github.com/grafana/grafana/pkg/metrics"
 	m "github.com/grafana/grafana/pkg/models"
 	"github.com/grafana/grafana/pkg/services/guardian"
@@ -12,6 +17,11 @@ import (
 	"github.com/grafana/grafana/pkg/util"
 )
 
+var client = &http.Client{
+	Timeout:   time.Second * 5,
+	Transport: &http.Transport{Proxy: http.ProxyFromEnvironment},
+}
+
 func GetSharingOptions(c *m.ReqContext) {
 	c.JSON(200, util.DynMap{
 		"externalSnapshotURL":  setting.ExternalSnapshotUrl,
@@ -20,26 +30,79 @@ func GetSharingOptions(c *m.ReqContext) {
 	})
 }
 
+type CreateExternalSnapshotResponse struct {
+	Key       string `json:"key"`
+	DeleteKey string `json:"deleteKey"`
+	Url       string `json:"url"`
+	DeleteUrl string `json:"deleteUrl"`
+}
+
+func createExternalDashboardSnapshot(cmd m.CreateDashboardSnapshotCommand) (*CreateExternalSnapshotResponse, error) {
+	var createSnapshotResponse CreateExternalSnapshotResponse
+	message := map[string]interface{}{
+		"name":      cmd.Name,
+		"expires":   cmd.Expires,
+		"dashboard": cmd.Dashboard,
+	}
+
+	messageBytes, err := simplejson.NewFromAny(message).Encode()
+	if err != nil {
+		return nil, err
+	}
+
+	response, err := client.Post(setting.ExternalSnapshotUrl+"/api/snapshots", "application/json", bytes.NewBuffer(messageBytes))
+	if err != nil {
+		return nil, err
+	}
+	defer response.Body.Close()
+
+	if response.StatusCode != 200 {
+		return nil, fmt.Errorf("Create external snapshot response status code %d", response.StatusCode)
+	}
+
+	if err := json.NewDecoder(response.Body).Decode(&createSnapshotResponse); err != nil {
+		return nil, err
+	}
+
+	return &createSnapshotResponse, nil
+}
+
+// POST /api/snapshots
 func CreateDashboardSnapshot(c *m.ReqContext, cmd m.CreateDashboardSnapshotCommand) {
 	if cmd.Name == "" {
 		cmd.Name = "Unnamed snapshot"
 	}
 
+	var url string
+	cmd.ExternalUrl = ""
+	cmd.OrgId = c.OrgId
+	cmd.UserId = c.UserId
+
 	if cmd.External {
-		// external snapshot ref requires key and delete key
-		if cmd.Key == "" || cmd.DeleteKey == "" {
-			c.JsonApiErr(400, "Missing key and delete key for external snapshot", nil)
+		if !setting.ExternalEnabled {
+			c.JsonApiErr(403, "External dashboard creation is disabled", nil)
 			return
 		}
 
-		cmd.OrgId = -1
-		cmd.UserId = -1
+		response, err := createExternalDashboardSnapshot(cmd)
+		if err != nil {
+			c.JsonApiErr(500, "Failed to create external snaphost", err)
+			return
+		}
+
+		url = response.Url
+		cmd.Key = response.Key
+		cmd.DeleteKey = response.DeleteKey
+		cmd.ExternalUrl = response.Url
+		cmd.ExternalDeleteUrl = response.DeleteUrl
+		cmd.Dashboard = simplejson.New()
+
 		metrics.M_Api_Dashboard_Snapshot_External.Inc()
 	} else {
 		cmd.Key = util.GetRandomString(32)
 		cmd.DeleteKey = util.GetRandomString(32)
-		cmd.OrgId = c.OrgId
-		cmd.UserId = c.UserId
+		url = setting.ToAbsUrl("dashboard/snapshot/" + cmd.Key)
+
 		metrics.M_Api_Dashboard_Snapshot_Create.Inc()
 	}
 
@@ -51,7 +114,7 @@ func CreateDashboardSnapshot(c *m.ReqContext, cmd m.CreateDashboardSnapshotComma
 	c.JSON(200, util.DynMap{
 		"key":       cmd.Key,
 		"deleteKey": cmd.DeleteKey,
-		"url":       setting.ToAbsUrl("dashboard/snapshot/" + cmd.Key),
+		"url":       url,
 		"deleteUrl": setting.ToAbsUrl("api/snapshots-delete/" + cmd.DeleteKey),
 	})
 }
@@ -91,6 +154,33 @@ func GetDashboardSnapshot(c *m.ReqContext) {
 	c.JSON(200, dto)
 }
 
+func deleteExternalDashboardSnapshot(externalUrl string) error {
+	response, err := client.Get(externalUrl)
+	if err != nil {
+		return err
+	}
+	defer response.Body.Close()
+
+	if response.StatusCode == 200 {
+		return nil
+	}
+
+	// Gracefully ignore "snapshot not found" errors as they could have already
+	// been removed either via the cleanup script or by request.
+	if response.StatusCode == 500 {
+		var respJson map[string]interface{}
+		if err := json.NewDecoder(response.Body).Decode(&respJson); err != nil {
+			return err
+		}
+
+		if respJson["message"] == "Failed to get dashboard snapshot" {
+			return nil
+		}
+	}
+
+	return fmt.Errorf("Unexpected response when deleting external snapshot. Status code: %d", response.StatusCode)
+}
+
 // GET /api/snapshots-delete/:deleteKey
 func DeleteDashboardSnapshotByDeleteKey(c *m.ReqContext) Response {
 	key := c.Params(":deleteKey")
@@ -102,6 +192,13 @@ func DeleteDashboardSnapshotByDeleteKey(c *m.ReqContext) Response {
 		return Error(500, "Failed to get dashboard snapshot", err)
 	}
 
+	if query.Result.External {
+		err := deleteExternalDashboardSnapshot(query.Result.ExternalDeleteUrl)
+		if err != nil {
+			return Error(500, "Failed to delete external dashboard", err)
+		}
+	}
+
 	cmd := &m.DeleteDashboardSnapshotCommand{DeleteKey: query.Result.DeleteKey}
 
 	if err := bus.Dispatch(cmd); err != nil {
@@ -138,6 +235,13 @@ func DeleteDashboardSnapshot(c *m.ReqContext) Response {
 		return Error(403, "Access denied to this snapshot", nil)
 	}
 
+	if query.Result.External {
+		err := deleteExternalDashboardSnapshot(query.Result.ExternalDeleteUrl)
+		if err != nil {
+			return Error(500, "Failed to delete external dashboard", err)
+		}
+	}
+
 	cmd := &m.DeleteDashboardSnapshotCommand{DeleteKey: query.Result.DeleteKey}
 
 	if err := bus.Dispatch(cmd); err != nil {
diff --git a/pkg/api/dashboard_snapshot_test.go b/pkg/api/dashboard_snapshot_test.go
index e58f2c4712d..a24d0f38d85 100644
--- a/pkg/api/dashboard_snapshot_test.go
+++ b/pkg/api/dashboard_snapshot_test.go
@@ -1,6 +1,9 @@
 package api
 
 import (
+	"fmt"
+	"net/http"
+	"net/http/httptest"
 	"testing"
 	"time"
 
@@ -13,13 +16,17 @@ import (
 
 func TestDashboardSnapshotApiEndpoint(t *testing.T) {
 	Convey("Given a single snapshot", t, func() {
+		var externalRequest *http.Request
 		jsonModel, _ := simplejson.NewJson([]byte(`{"id":100}`))
 
 		mockSnapshotResult := &m.DashboardSnapshot{
 			Id:        1,
+			Key:       "12345",
+			DeleteKey: "54321",
 			Dashboard: jsonModel,
 			Expires:   time.Now().Add(time.Duration(1000) * time.Second),
 			UserId:    999999,
+			External:  true,
 		}
 
 		bus.AddHandler("test", func(query *m.GetDashboardSnapshotQuery) error {
@@ -45,13 +52,25 @@ func TestDashboardSnapshotApiEndpoint(t *testing.T) {
 			return nil
 		})
 
+		setupRemoteServer := func(fn func(http.ResponseWriter, *http.Request)) *httptest.Server {
+			return httptest.NewServer(http.HandlerFunc(func(rw http.ResponseWriter, r *http.Request) {
+				fn(rw, r)
+			}))
+		}
+
 		Convey("When user has editor role and is not in the ACL", func() {
 			Convey("Should not be able to delete snapshot", func() {
 				loggedInUserScenarioWithRole("When calling DELETE on", "DELETE", "/api/snapshots/12345", "/api/snapshots/:key", m.ROLE_EDITOR, func(sc *scenarioContext) {
+					ts := setupRemoteServer(func(rw http.ResponseWriter, req *http.Request) {
+						externalRequest = req
+					})
+
+					mockSnapshotResult.ExternalDeleteUrl = ts.URL
 					sc.handlerFunc = DeleteDashboardSnapshot
 					sc.fakeReqWithParams("DELETE", sc.url, map[string]string{"key": "12345"}).exec()
 
 					So(sc.resp.Code, ShouldEqual, 403)
+					So(externalRequest, ShouldBeNil)
 				})
 			})
 		})
@@ -59,6 +78,12 @@ func TestDashboardSnapshotApiEndpoint(t *testing.T) {
 		Convey("When user is anonymous", func() {
 			Convey("Should be able to delete snapshot by deleteKey", func() {
 				anonymousUserScenario("When calling GET on", "GET", "/api/snapshots-delete/12345", "/api/snapshots-delete/:deleteKey", func(sc *scenarioContext) {
+					ts := setupRemoteServer(func(rw http.ResponseWriter, req *http.Request) {
+						rw.WriteHeader(200)
+						externalRequest = req
+					})
+
+					mockSnapshotResult.ExternalDeleteUrl = ts.URL
 					sc.handlerFunc = DeleteDashboardSnapshotByDeleteKey
 					sc.fakeReqWithParams("GET", sc.url, map[string]string{"deleteKey": "12345"}).exec()
 
@@ -67,6 +92,10 @@ func TestDashboardSnapshotApiEndpoint(t *testing.T) {
 					So(err, ShouldBeNil)
 
 					So(respJSON.Get("message").MustString(), ShouldStartWith, "Snapshot deleted")
+
+					So(externalRequest.Method, ShouldEqual, http.MethodGet)
+					So(fmt.Sprintf("http://%s", externalRequest.Host), ShouldEqual, ts.URL)
+					So(externalRequest.URL.EscapedPath(), ShouldEqual, "/")
 				})
 			})
 		})
@@ -79,6 +108,12 @@ func TestDashboardSnapshotApiEndpoint(t *testing.T) {
 
 			Convey("Should be able to delete a snapshot", func() {
 				loggedInUserScenarioWithRole("When calling DELETE on", "DELETE", "/api/snapshots/12345", "/api/snapshots/:key", m.ROLE_EDITOR, func(sc *scenarioContext) {
+					ts := setupRemoteServer(func(rw http.ResponseWriter, req *http.Request) {
+						rw.WriteHeader(200)
+						externalRequest = req
+					})
+
+					mockSnapshotResult.ExternalDeleteUrl = ts.URL
 					sc.handlerFunc = DeleteDashboardSnapshot
 					sc.fakeReqWithParams("DELETE", sc.url, map[string]string{"key": "12345"}).exec()
 
@@ -87,6 +122,8 @@ func TestDashboardSnapshotApiEndpoint(t *testing.T) {
 					So(err, ShouldBeNil)
 
 					So(respJSON.Get("message").MustString(), ShouldStartWith, "Snapshot deleted")
+					So(fmt.Sprintf("http://%s", externalRequest.Host), ShouldEqual, ts.URL)
+					So(externalRequest.URL.EscapedPath(), ShouldEqual, "/")
 				})
 			})
 		})
@@ -94,6 +131,7 @@ func TestDashboardSnapshotApiEndpoint(t *testing.T) {
 		Convey("When user is editor and is the creator of the snapshot", func() {
 			aclMockResp = []*m.DashboardAclInfoDTO{}
 			mockSnapshotResult.UserId = TestUserID
+			mockSnapshotResult.External = false
 
 			Convey("Should be able to delete a snapshot", func() {
 				loggedInUserScenarioWithRole("When calling DELETE on", "DELETE", "/api/snapshots/12345", "/api/snapshots/:key", m.ROLE_EDITOR, func(sc *scenarioContext) {
@@ -108,5 +146,54 @@ func TestDashboardSnapshotApiEndpoint(t *testing.T) {
 				})
 			})
 		})
+
+		Convey("When deleting an external snapshot", func() {
+			aclMockResp = []*m.DashboardAclInfoDTO{}
+			mockSnapshotResult.UserId = TestUserID
+
+			Convey("Should gracefully delete local snapshot when remote snapshot has already been removed", func() {
+				loggedInUserScenarioWithRole("When calling DELETE on", "DELETE", "/api/snapshots/12345", "/api/snapshots/:key", m.ROLE_EDITOR, func(sc *scenarioContext) {
+					ts := setupRemoteServer(func(rw http.ResponseWriter, req *http.Request) {
+						rw.Write([]byte(`{"message":"Failed to get dashboard snapshot"}`))
+						rw.WriteHeader(500)
+					})
+
+					mockSnapshotResult.ExternalDeleteUrl = ts.URL
+					sc.handlerFunc = DeleteDashboardSnapshot
+					sc.fakeReqWithParams("DELETE", sc.url, map[string]string{"key": "12345"}).exec()
+
+					So(sc.resp.Code, ShouldEqual, 200)
+				})
+			})
+
+			Convey("Should fail to delete local snapshot when an unexpected 500 error occurs", func() {
+				loggedInUserScenarioWithRole("When calling DELETE on", "DELETE", "/api/snapshots/12345", "/api/snapshots/:key", m.ROLE_EDITOR, func(sc *scenarioContext) {
+					ts := setupRemoteServer(func(rw http.ResponseWriter, req *http.Request) {
+						rw.WriteHeader(500)
+						rw.Write([]byte(`{"message":"Unexpected"}`))
+					})
+
+					mockSnapshotResult.ExternalDeleteUrl = ts.URL
+					sc.handlerFunc = DeleteDashboardSnapshot
+					sc.fakeReqWithParams("DELETE", sc.url, map[string]string{"key": "12345"}).exec()
+
+					So(sc.resp.Code, ShouldEqual, 500)
+				})
+			})
+
+			Convey("Should fail to delete local snapshot when an unexpected remote error occurs", func() {
+				loggedInUserScenarioWithRole("When calling DELETE on", "DELETE", "/api/snapshots/12345", "/api/snapshots/:key", m.ROLE_EDITOR, func(sc *scenarioContext) {
+					ts := setupRemoteServer(func(rw http.ResponseWriter, req *http.Request) {
+						rw.WriteHeader(404)
+					})
+
+					mockSnapshotResult.ExternalDeleteUrl = ts.URL
+					sc.handlerFunc = DeleteDashboardSnapshot
+					sc.fakeReqWithParams("DELETE", sc.url, map[string]string{"key": "12345"}).exec()
+
+					So(sc.resp.Code, ShouldEqual, 500)
+				})
+			})
+		})
 	})
 }
diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go
index 65affe83e98..8f5457cf271 100644
--- a/pkg/api/frontendsettings.go
+++ b/pkg/api/frontendsettings.go
@@ -186,16 +186,18 @@ func getPanelSort(id string) int {
 		sort = 1
 	case "singlestat":
 		sort = 2
-	case "table":
+	case "gauge":
 		sort = 3
-	case "text":
+	case "table":
 		sort = 4
-	case "heatmap":
+	case "text":
 		sort = 5
-	case "alertlist":
+	case "heatmap":
 		sort = 6
-	case "dashlist":
+	case "alertlist":
 		sort = 7
+	case "dashlist":
+		sort = 8
 	}
 	return sort
 }
diff --git a/pkg/api/plugins.go b/pkg/api/plugins.go
index 455420e4688..0d54f0707a6 100644
--- a/pkg/api/plugins.go
+++ b/pkg/api/plugins.go
@@ -164,6 +164,14 @@ func GetPluginMarkdown(c *m.ReqContext) Response {
 		return Error(500, "Could not get markdown file", err)
 	}
 
+	// fallback try readme
+	if len(content) == 0 {
+		content, err = plugins.GetPluginMarkdown(pluginID, "readme")
+		if err != nil {
+			return Error(501, "Could not get markdown file", err)
+		}
+	}
+
 	resp := Respond(200, content)
 	resp.Header("Content-Type", "text/plain; charset=utf-8")
 	return resp
diff --git a/pkg/cmd/grafana-server/server.go b/pkg/cmd/grafana-server/server.go
index d9fd1e62ce7..4781361b9b9 100644
--- a/pkg/cmd/grafana-server/server.go
+++ b/pkg/cmd/grafana-server/server.go
@@ -28,6 +28,7 @@ import (
 
 	// self registering services
 	_ "github.com/grafana/grafana/pkg/extensions"
+	_ "github.com/grafana/grafana/pkg/infra/serverlock"
 	_ "github.com/grafana/grafana/pkg/metrics"
 	_ "github.com/grafana/grafana/pkg/plugins"
 	_ "github.com/grafana/grafana/pkg/services/alerting"
diff --git a/pkg/infra/serverlock/model.go b/pkg/infra/serverlock/model.go
new file mode 100644
index 00000000000..7e0ea7814b1
--- /dev/null
+++ b/pkg/infra/serverlock/model.go
@@ -0,0 +1,8 @@
+package serverlock
+
+type serverLock struct {
+	Id            int64
+	OperationUid  string
+	LastExecution int64
+	Version       int64
+}
diff --git a/pkg/infra/serverlock/serverlock.go b/pkg/infra/serverlock/serverlock.go
new file mode 100644
index 00000000000..824fa0484b2
--- /dev/null
+++ b/pkg/infra/serverlock/serverlock.go
@@ -0,0 +1,116 @@
+package serverlock
+
+import (
+	"context"
+	"time"
+
+	"github.com/grafana/grafana/pkg/log"
+	"github.com/grafana/grafana/pkg/registry"
+	"github.com/grafana/grafana/pkg/services/sqlstore"
+)
+
+func init() {
+	registry.RegisterService(&ServerLockService{})
+}
+
+// ServerLockService allows servers in HA mode to claim a lock
+// and execute an function if the server was granted the lock
+type ServerLockService struct {
+	SQLStore *sqlstore.SqlStore `inject:""`
+	log      log.Logger
+}
+
+// Init this service
+func (sl *ServerLockService) Init() error {
+	sl.log = log.New("infra.lockservice")
+	return nil
+}
+
+// LockAndExecute try to create a lock for this server and only executes the
+// `fn` function when successful. This should not be used at low internal. But services
+// that needs to be run once every ex 10m.
+func (sl *ServerLockService) LockAndExecute(ctx context.Context, actionName string, maxInterval time.Duration, fn func()) error {
+	// gets or creates a lockable row
+	rowLock, err := sl.getOrCreate(ctx, actionName)
+	if err != nil {
+		return err
+	}
+
+	// avoid execution if last lock happened less than `maxInterval` ago
+	if rowLock.LastExecution != 0 {
+		lastExeuctionTime := time.Unix(rowLock.LastExecution, 0)
+		if lastExeuctionTime.Unix() > time.Now().Add(-maxInterval).Unix() {
+			return nil
+		}
+	}
+
+	// try to get lock based on rowLow version
+	acquiredLock, err := sl.acquireLock(ctx, rowLock)
+	if err != nil {
+		return err
+	}
+
+	if acquiredLock {
+		fn()
+	}
+
+	return nil
+}
+
+func (sl *ServerLockService) acquireLock(ctx context.Context, serverLock *serverLock) (bool, error) {
+	var result bool
+
+	err := sl.SQLStore.WithDbSession(ctx, func(dbSession *sqlstore.DBSession) error {
+		newVersion := serverLock.Version + 1
+		sql := `UPDATE server_lock SET
+			version = ?,
+			last_execution = ?
+		WHERE
+			id = ? AND version = ?`
+
+		res, err := dbSession.Exec(sql, newVersion, time.Now().Unix(), serverLock.Id, serverLock.Version)
+		if err != nil {
+			return err
+		}
+
+		affected, err := res.RowsAffected()
+		result = affected == 1
+
+		return err
+	})
+
+	return result, err
+}
+
+func (sl *ServerLockService) getOrCreate(ctx context.Context, actionName string) (*serverLock, error) {
+	var result *serverLock
+
+	err := sl.SQLStore.WithTransactionalDbSession(ctx, func(dbSession *sqlstore.DBSession) error {
+		lockRows := []*serverLock{}
+		err := dbSession.Where("operation_uid = ?", actionName).Find(&lockRows)
+		if err != nil {
+			return err
+		}
+
+		if len(lockRows) > 0 {
+			result = lockRows[0]
+			return nil
+		}
+
+		lockRow := &serverLock{
+			OperationUid:  actionName,
+			LastExecution: 0,
+		}
+
+		_, err = dbSession.Insert(lockRow)
+		if err != nil {
+			return err
+		}
+
+		result = lockRow
+
+		return nil
+	})
+
+	return result, err
+}
diff --git a/pkg/infra/serverlock/serverlock_integration_test.go b/pkg/infra/serverlock/serverlock_integration_test.go
new file mode 100644
index 00000000000..8bcd9c2ca25
--- /dev/null
+++ b/pkg/infra/serverlock/serverlock_integration_test.go
@@ -0,0 +1,40 @@
+// +build integration
+
+package serverlock
+
+import (
+	"context"
+	"testing"
+	"time"
+
+	. "github.com/smartystreets/goconvey/convey"
+)
+
+func TestServerLok(t *testing.T) {
+	sl := createTestableServerLock(t)
+
+	Convey("Server lock integration tests", t, func() {
+		counter := 0
+		var err error
+		incCounter := func() { counter++ }
+		atInterval := time.Second * 1
+		ctx := context.Background()
+
+		//this time `fn` should be executed
+		So(sl.LockAndExecute(ctx, "test-operation", atInterval, incCounter), ShouldBeNil)
+
+		//this should not execute `fn`
+		So(sl.LockAndExecute(ctx, "test-operation", atInterval, incCounter), ShouldBeNil)
+		So(sl.LockAndExecute(ctx, "test-operation", atInterval, incCounter), ShouldBeNil)
+		So(sl.LockAndExecute(ctx, "test-operation", atInterval, incCounter), ShouldBeNil)
+		So(sl.LockAndExecute(ctx, "test-operation", atInterval, incCounter), ShouldBeNil)
+
+		// wait 5 second.
+		<-time.After(atInterval * 2)
+
+		// now `fn` should be executed again
+		err = sl.LockAndExecute(ctx, "test-operation", atInterval, incCounter)
+		So(err, ShouldBeNil)
+		So(counter, ShouldEqual, 2)
+	})
+}
diff --git a/pkg/infra/serverlock/serverlock_test.go b/pkg/infra/serverlock/serverlock_test.go
new file mode 100644
index 00000000000..ccd1c252090
--- /dev/null
+++ b/pkg/infra/serverlock/serverlock_test.go
@@ -0,0 +1,55 @@
+package serverlock
+
+import (
+	"context"
+	"testing"
+
+	"github.com/grafana/grafana/pkg/log"
+	"github.com/grafana/grafana/pkg/services/sqlstore"
+	. "github.com/smartystreets/goconvey/convey"
+)
+
+func createTestableServerLock(t *testing.T) *ServerLockService {
+	t.Helper()
+
+	sqlstore := sqlstore.InitTestDB(t)
+
+	return &ServerLockService{
+		SQLStore: sqlstore,
+		log:      log.New("test-logger"),
+	}
+}
+
+func TestServerLock(t *testing.T) {
+	Convey("Server lock", t, func() {
+		sl := createTestableServerLock(t)
+		operationUID := "test-operation"
+
+		first, err := sl.getOrCreate(context.Background(), operationUID)
+		So(err, ShouldBeNil)
+
+		lastExecution := first.LastExecution
+		Convey("trying to create three new row locks", func() {
+			for i := 0; i < 3; i++ {
+				first, err = sl.getOrCreate(context.Background(), operationUID)
+				So(err, ShouldBeNil)
+				So(first.OperationUid, ShouldEqual, operationUID)
+				So(first.Id, ShouldEqual, 1)
+			}
+
+			Convey("Should not create new since lock already exist", func() {
+				So(lastExecution, ShouldEqual, first.LastExecution)
+			})
+		})
+
+		Convey("Should be able to create lock on first row", func() {
+			gotLock, err := sl.acquireLock(context.Background(), first)
+			So(err, ShouldBeNil)
+			So(gotLock, ShouldBeTrue)
+
+			gotLock, err = sl.acquireLock(context.Background(), first)
+			So(err, ShouldBeNil)
+			So(gotLock, ShouldBeFalse)
+		})
+	})
+}
diff --git a/pkg/login/ldap.go b/pkg/login/ldap.go
index d4e81d2bd46..218f7321e65 100644
--- a/pkg/login/ldap.go
+++ b/pkg/login/ldap.go
@@ -9,11 +9,11 @@ import (
 	"strings"
 
 	"github.com/davecgh/go-spew/spew"
-	"github.com/go-ldap/ldap"
 	"github.com/grafana/grafana/pkg/bus"
 	"github.com/grafana/grafana/pkg/log"
 	m "github.com/grafana/grafana/pkg/models"
 	"github.com/grafana/grafana/pkg/setting"
+	"gopkg.in/ldap.v3"
 )
 
 type ILdapConn interface {
diff --git a/pkg/login/ldap_test.go b/pkg/login/ldap_test.go
index 1cf98bd1e14..f1cf44dc554 100644
--- a/pkg/login/ldap_test.go
+++ b/pkg/login/ldap_test.go
@@ -5,10 +5,10 @@ import (
 	"crypto/tls"
 	"testing"
 
-	"github.com/go-ldap/ldap"
 	"github.com/grafana/grafana/pkg/bus"
 	m "github.com/grafana/grafana/pkg/models"
 	. "github.com/smartystreets/goconvey/convey"
+	"gopkg.in/ldap.v3"
 )
 
 func TestLdapAuther(t *testing.T) {
diff --git a/pkg/middleware/auth_proxy.go b/pkg/middleware/auth_proxy.go
index 29bd305b336..fc109ac707f 100644
--- a/pkg/middleware/auth_proxy.go
+++ b/pkg/middleware/auth_proxy.go
@@ -198,17 +198,31 @@ func checkAuthenticationProxy(remoteAddr string, proxyHeaderValue string) error
 	}
 
 	proxies := strings.Split(setting.AuthProxyWhitelist, ",")
-	sourceIP, _, err := net.SplitHostPort(remoteAddr)
-	if err != nil {
-		return err
+	var proxyObjs []*net.IPNet
+	for _, proxy := range proxies {
+		proxyObjs = append(proxyObjs, coerceProxyAddress(proxy))
 	}
 
-	// Compare allowed IP addresses to actual address
-	for _, proxyIP := range proxies {
-		if sourceIP == strings.TrimSpace(proxyIP) {
+	sourceIP, _, _ := net.SplitHostPort(remoteAddr)
+	sourceObj := net.ParseIP(sourceIP)
+
+	for _, proxyObj := range proxyObjs {
+		if proxyObj.Contains(sourceObj) {
 			return nil
 		}
 	}
-
 	return fmt.Errorf("Request for user (%s) from %s is not from the authentication proxy", proxyHeaderValue, sourceIP)
 }
+
+func coerceProxyAddress(proxyAddr string) *net.IPNet {
+	proxyAddr = strings.TrimSpace(proxyAddr)
+	if !strings.Contains(proxyAddr, "/") {
+		proxyAddr = strings.Join([]string{proxyAddr, "32"}, "/")
+	}
+
+	_, network, err := net.ParseCIDR(proxyAddr)
+	if err != nil {
+		fmt.Println(err)
+	}
+	return network
+}
diff --git a/pkg/middleware/middleware_test.go b/pkg/middleware/middleware_test.go
index e9a3c8059f8..b9a8afce6c6 100644
--- a/pkg/middleware/middleware_test.go
+++ b/pkg/middleware/middleware_test.go
@@ -271,6 +271,23 @@ func TestMiddlewareContext(t *testing.T) {
 			})
 		})
 
+		middlewareScenario("When auth_proxy is enabled and IPv4 request RemoteAddr is not within trusted CIDR block", func(sc *scenarioContext) {
+			setting.AuthProxyEnabled = true
+			setting.AuthProxyHeaderName = "X-WEBAUTH-USER"
+			setting.AuthProxyHeaderProperty = "username"
+			setting.AuthProxyWhitelist = "192.168.1.0/24, 2001::0/120"
+
+			sc.fakeReq("GET", "/")
+			sc.req.Header.Add("X-WEBAUTH-USER", "torkelo")
+			sc.req.RemoteAddr = "192.168.3.1:12345"
+			sc.exec()
+
+			Convey("should return 407 status code", func() {
+				So(sc.resp.Code, ShouldEqual, 407)
+				So(sc.resp.Body.String(), ShouldContainSubstring, "Request for user (torkelo) from 192.168.3.1 is not from the authentication proxy")
+			})
+		})
+
 		middlewareScenario("When auth_proxy is enabled and IPv6 request RemoteAddr is not trusted", func(sc *scenarioContext) {
 			setting.AuthProxyEnabled = true
 			setting.AuthProxyHeaderName = "X-WEBAUTH-USER"
@@ -288,6 +305,23 @@ func TestMiddlewareContext(t *testing.T) {
 			})
 		})
 
+		middlewareScenario("When auth_proxy is enabled and IPv6 request RemoteAddr is not within trusted CIDR block", func(sc *scenarioContext) {
+			setting.AuthProxyEnabled = true
+			setting.AuthProxyHeaderName = "X-WEBAUTH-USER"
+			setting.AuthProxyHeaderProperty = "username"
+			setting.AuthProxyWhitelist = "192.168.1.0/24, 2001::0/120"
+
+			sc.fakeReq("GET", "/")
+			sc.req.Header.Add("X-WEBAUTH-USER", "torkelo")
+			sc.req.RemoteAddr = "[2001:23]:12345"
+			sc.exec()
+
+			Convey("should return 407 status code", func() {
+				So(sc.resp.Code, ShouldEqual, 407)
+				So(sc.resp.Body.String(), ShouldContainSubstring, "Request for user (torkelo) from 2001:23 is not from the authentication proxy")
+			})
+		})
+
 		middlewareScenario("When auth_proxy is enabled and request RemoteAddr is trusted", func(sc *scenarioContext) {
 			setting.AuthProxyEnabled = true
 			setting.AuthProxyHeaderName = "X-WEBAUTH-USER"
@@ -316,6 +350,62 @@ func TestMiddlewareContext(t *testing.T) {
 			})
 		})
 
+		middlewareScenario("When auth_proxy is enabled and IPv4 request RemoteAddr is within trusted CIDR block", func(sc *scenarioContext) {
+			setting.AuthProxyEnabled = true
+			setting.AuthProxyHeaderName = "X-WEBAUTH-USER"
+			setting.AuthProxyHeaderProperty = "username"
+			setting.AuthProxyWhitelist = "192.168.1.0/24, 2001::0/120"
+
+			bus.AddHandler("test", func(query *m.GetSignedInUserQuery) error {
+				query.Result = &m.SignedInUser{OrgId: 4, UserId: 33}
+				return nil
+			})
+
+			bus.AddHandler("test", func(cmd *m.UpsertUserCommand) error {
+				cmd.Result = &m.User{Id: 33}
+				return nil
+			})
+
+			sc.fakeReq("GET", "/")
+			sc.req.Header.Add("X-WEBAUTH-USER", "torkelo")
+			sc.req.RemoteAddr = "192.168.1.10:12345"
+			sc.exec()
+
+			Convey("Should init context with user info", func() {
+				So(sc.context.IsSignedIn, ShouldBeTrue)
+				So(sc.context.UserId, ShouldEqual, 33)
+				So(sc.context.OrgId, ShouldEqual, 4)
+			})
+		})
+
+		middlewareScenario("When auth_proxy is enabled and IPv6 request RemoteAddr is within trusted CIDR block", func(sc *scenarioContext) {
+			setting.AuthProxyEnabled = true
+			setting.AuthProxyHeaderName = "X-WEBAUTH-USER"
+			setting.AuthProxyHeaderProperty = "username"
+			setting.AuthProxyWhitelist = "192.168.1.0/24, 2001::0/120"
+
+			bus.AddHandler("test", func(query *m.GetSignedInUserQuery) error {
+				query.Result = &m.SignedInUser{OrgId: 4, UserId: 33}
+				return nil
+			})
+
+			bus.AddHandler("test", func(cmd *m.UpsertUserCommand) error {
+				cmd.Result = &m.User{Id: 33}
+				return nil
+			})
+
+			sc.fakeReq("GET", "/")
+			sc.req.Header.Add("X-WEBAUTH-USER", "torkelo")
+			sc.req.RemoteAddr = "[2001::23]:12345"
+			sc.exec()
+
+			Convey("Should init context with user info", func() {
+				So(sc.context.IsSignedIn, ShouldBeTrue)
+				So(sc.context.UserId, ShouldEqual, 33)
+				So(sc.context.OrgId, ShouldEqual, 4)
+			})
+		})
+
 		middlewareScenario("When session exists for previous user, create a new session", func(sc *scenarioContext) {
 			setting.AuthProxyEnabled = true
 			setting.AuthProxyHeaderName = "X-WEBAUTH-USER"
diff --git a/pkg/models/dashboard_snapshot.go b/pkg/models/dashboard_snapshot.go
index 3024ba94122..e8db0372758 100644
--- a/pkg/models/dashboard_snapshot.go
+++ b/pkg/models/dashboard_snapshot.go
@@ -8,14 +8,15 @@ import (
 
 // DashboardSnapshot model
 type DashboardSnapshot struct {
-	Id          int64
-	Name        string
-	Key         string
-	DeleteKey   string
-	OrgId       int64
-	UserId      int64
-	External    bool
-	ExternalUrl string
+	Id                int64
+	Name              string
+	Key               string
+	DeleteKey         string
+	OrgId             int64
+	UserId            int64
+	External          bool
+	ExternalUrl       string
+	ExternalDeleteUrl string
 
 	Expires time.Time
 	Created time.Time
@@ -48,7 +49,10 @@ type CreateDashboardSnapshotCommand struct {
 	Expires   int64            `json:"expires"`
 
 	// these are passed when storing an external snapshot ref
-	External  bool   `json:"external"`
+	External          bool   `json:"external"`
+	ExternalUrl       string `json:"-"`
+	ExternalDeleteUrl string `json:"-"`
+
 	Key       string `json:"key"`
 	DeleteKey string `json:"deleteKey"`
 
diff --git a/pkg/plugins/datasource_plugin.go b/pkg/plugins/datasource_plugin.go
index ff44805e35f..dd4ae6972aa 100644
--- a/pkg/plugins/datasource_plugin.go
+++ b/pkg/plugins/datasource_plugin.go
@@ -3,10 +3,8 @@ package plugins
 import (
 	"context"
 	"encoding/json"
-	"os"
 	"os/exec"
 	"path"
-	"path/filepath"
 	"time"
 
 	"github.com/grafana/grafana-plugin-model/go/datasource"
@@ -24,11 +22,11 @@ type DataSourcePlugin struct {
 	Metrics      bool              `json:"metrics"`
 	Alerting     bool              `json:"alerting"`
 	Explore      bool              `json:"explore"`
+	Table        bool              `json:"tables"`
 	Logs         bool              `json:"logs"`
 	QueryOptions map[string]bool   `json:"queryOptions,omitempty"`
 	BuiltIn      bool              `json:"builtIn,omitempty"`
 	Mixed        bool              `json:"mixed,omitempty"`
-	HasQueryHelp bool              `json:"hasQueryHelp,omitempty"`
 	Routes       []*AppPluginRoute `json:"routes"`
 
 	Backend    bool   `json:"backend,omitempty"`
@@ -47,15 +45,6 @@ func (p *DataSourcePlugin) Load(decoder *json.Decoder, pluginDir string) error {
 		return err
 	}
 
-	// look for help markdown
-	helpPath := filepath.Join(p.PluginDir, "QUERY_HELP.md")
-	if _, err := os.Stat(helpPath); os.IsNotExist(err) {
-		helpPath = filepath.Join(p.PluginDir, "query_help.md")
-	}
-	if _, err := os.Stat(helpPath); err == nil {
-		p.HasQueryHelp = true
-	}
-
 	DataSources[p.Id] = p
 	return nil
 }
diff --git a/pkg/services/alerting/notifier.go b/pkg/services/alerting/notifier.go
index 9ce50eadd6b..75c68615750 100644
--- a/pkg/services/alerting/notifier.go
+++ b/pkg/services/alerting/notifier.go
@@ -166,7 +166,7 @@ func (n *notificationService) getNeededNotifiers(orgId int64, notificationIds []
 
 	var result notifierStateSlice
 	for _, notification := range query.Result {
-		not, err := n.createNotifierFor(notification)
+		not, err := InitNotifier(notification)
 		if err != nil {
 			n.log.Error("Could not create notifier", "notifier", notification.Id, "error", err)
 			continue
@@ -195,7 +195,8 @@ func (n *notificationService) getNeededNotifiers(orgId int64, notificationIds []
 	return result, nil
 }
 
-func (n *notificationService) createNotifierFor(model *m.AlertNotification) (Notifier, error) {
+// InitNotifier instantiate a new notifier based on the model
+func InitNotifier(model *m.AlertNotification) (Notifier, error) {
 	notifierPlugin, found := notifierFactories[model.Type]
 	if !found {
 		return nil, errors.New("Unsupported notification type")
@@ -208,6 +209,7 @@ type NotifierFactory func(notification *m.AlertNotification) (Notifier, error)
 
 var notifierFactories = make(map[string]*NotifierPlugin)
 
+// RegisterNotifier register an notifier
 func RegisterNotifier(plugin *NotifierPlugin) {
 	notifierFactories[plugin.Type] = plugin
 }
diff --git a/pkg/services/alerting/test_notification.go b/pkg/services/alerting/test_notification.go
index 8aa1b80aa22..b6e59f694c8 100644
--- a/pkg/services/alerting/test_notification.go
+++ b/pkg/services/alerting/test_notification.go
@@ -32,7 +32,7 @@ func handleNotificationTestCommand(cmd *NotificationTestCommand) error {
 		Settings: cmd.Settings,
 	}
 
-	notifiers, err := notifier.createNotifierFor(model)
+	notifiers, err := InitNotifier(model)
 
 	if err != nil {
 		log.Error2("Failed to create notifier", "error", err.Error())
diff --git a/pkg/services/cleanup/cleanup.go b/pkg/services/cleanup/cleanup.go
index c15ae8ef36c..63d829bccec 100644
--- a/pkg/services/cleanup/cleanup.go
+++ b/pkg/services/cleanup/cleanup.go
@@ -8,6 +8,7 @@ import (
 	"time"
 
 	"github.com/grafana/grafana/pkg/bus"
+	"github.com/grafana/grafana/pkg/infra/serverlock"
 	"github.com/grafana/grafana/pkg/log"
 	m "github.com/grafana/grafana/pkg/models"
 	"github.com/grafana/grafana/pkg/registry"
@@ -15,8 +16,9 @@ import (
 )
 
 type CleanUpService struct {
-	log log.Logger
-	Cfg *setting.Cfg `inject:""`
+	log               log.Logger
+	Cfg               *setting.Cfg                  `inject:""`
+	ServerLockService *serverlock.ServerLockService `inject:""`
 }
 
 func init() {
@@ -38,7 +40,10 @@ func (srv *CleanUpService) Run(ctx context.Context) error {
 			srv.cleanUpTmpFiles()
 			srv.deleteExpiredSnapshots()
 			srv.deleteExpiredDashboardVersions()
-			srv.deleteOldLoginAttempts()
+			srv.ServerLockService.LockAndExecute(ctx, "delete old login attempts", time.Minute*10, func() {
+				srv.deleteOldLoginAttempts()
+			})
+
 		case <-ctx.Done():
 			return ctx.Err()
 		}
diff --git a/pkg/services/sqlstore/dashboard_snapshot.go b/pkg/services/sqlstore/dashboard_snapshot.go
index 2e2ea8a4783..d0af676a305 100644
--- a/pkg/services/sqlstore/dashboard_snapshot.go
+++ b/pkg/services/sqlstore/dashboard_snapshot.go
@@ -47,16 +47,18 @@ func CreateDashboardSnapshot(cmd *m.CreateDashboardSnapshotCommand) error {
 		}
 
 		snapshot := &m.DashboardSnapshot{
-			Name:      cmd.Name,
-			Key:       cmd.Key,
-			DeleteKey: cmd.DeleteKey,
-			OrgId:     cmd.OrgId,
-			UserId:    cmd.UserId,
-			External:  cmd.External,
-			Dashboard: cmd.Dashboard,
-			Expires:   expires,
-			Created:   time.Now(),
-			Updated:   time.Now(),
+			Name:              cmd.Name,
+			Key:               cmd.Key,
+			DeleteKey:         cmd.DeleteKey,
+			OrgId:             cmd.OrgId,
+			UserId:            cmd.UserId,
+			External:          cmd.External,
+			ExternalUrl:       cmd.ExternalUrl,
+			ExternalDeleteUrl: cmd.ExternalDeleteUrl,
+			Dashboard:         cmd.Dashboard,
+			Expires:           expires,
+			Created:           time.Now(),
+			Updated:           time.Now(),
 		}
 
 		_, err := sess.Insert(snapshot)
diff --git a/pkg/services/sqlstore/datasource.go b/pkg/services/sqlstore/datasource.go
index 7f70e5c25fc..ccab1106880 100644
--- a/pkg/services/sqlstore/datasource.go
+++ b/pkg/services/sqlstore/datasource.go
@@ -53,14 +53,14 @@ func GetDataSourceByName(query *m.GetDataSourceByNameQuery) error {
 }
 
 func GetDataSources(query *m.GetDataSourcesQuery) error {
-	sess := x.Limit(1000, 0).Where("org_id=?", query.OrgId).Asc("name")
+	sess := x.Limit(5000, 0).Where("org_id=?", query.OrgId).Asc("name")
 
 	query.Result = make([]*m.DataSource, 0)
 	return sess.Find(&query.Result)
 }
 
 func GetAllDataSources(query *m.GetAllDataSourcesQuery) error {
-	sess := x.Limit(1000, 0).Asc("name")
+	sess := x.Limit(5000, 0).Asc("name")
 
 	query.Result = make([]*m.DataSource, 0)
 	return sess.Find(&query.Result)
diff --git a/pkg/services/sqlstore/migrations/dashboard_snapshot_mig.go b/pkg/services/sqlstore/migrations/dashboard_snapshot_mig.go
index b880497cd23..be0bc80134c 100644
--- a/pkg/services/sqlstore/migrations/dashboard_snapshot_mig.go
+++ b/pkg/services/sqlstore/migrations/dashboard_snapshot_mig.go
@@ -60,4 +60,8 @@ func addDashboardSnapshotMigrations(mg *Migrator) {
 		{Name: "external_url", Type: DB_NVarchar, Length: 255, Nullable: false},
 		{Name: "dashboard", Type: DB_MediumText, Nullable: false},
 	}))
+
+	mg.AddMigration("Add column external_delete_url to dashboard_snapshots table", NewAddColumnMigration(snapshotV5, &Column{
+		Name: "external_delete_url", Type: DB_NVarchar, Length: 255, Nullable: true,
+	}))
 }
diff --git a/pkg/services/sqlstore/migrations/migrations.go b/pkg/services/sqlstore/migrations/migrations.go
index 58ac6256f41..36cd8e5ed62 100644
--- a/pkg/services/sqlstore/migrations/migrations.go
+++ b/pkg/services/sqlstore/migrations/migrations.go
@@ -31,6 +31,7 @@ func AddMigrations(mg *Migrator) {
 	addTagMigration(mg)
 	addLoginAttemptMigrations(mg)
 	addUserAuthMigrations(mg)
+	addServerlockMigrations(mg)
 }
 
 func addMigrationLogMigrations(mg *Migrator) {
diff --git a/pkg/services/sqlstore/migrations/serverlock_migrations.go b/pkg/services/sqlstore/migrations/serverlock_migrations.go
new file mode 100644
index 00000000000..bc817a90665
--- /dev/null
+++ b/pkg/services/sqlstore/migrations/serverlock_migrations.go
@@ -0,0 +1,22 @@
+package migrations
+
+import "github.com/grafana/grafana/pkg/services/sqlstore/migrator"
+
+func addServerlockMigrations(mg *migrator.Migrator) {
+	serverLock := migrator.Table{
+		Name: "server_lock",
+		Columns: []*migrator.Column{
+			{Name: "id", Type: migrator.DB_BigInt, IsPrimaryKey: true, IsAutoIncrement: true},
+			{Name: "operation_uid", Type: migrator.DB_NVarchar, Length: 100},
+			{Name: "version", Type: migrator.DB_BigInt},
+			{Name: "last_execution", Type: migrator.DB_BigInt, Nullable: false},
+		},
+		Indices: []*migrator.Index{
+			{Cols: []string{"operation_uid"}, Type: migrator.UniqueIndex},
+		},
+	}
+
+	mg.AddMigration("create server_lock table", migrator.NewAddTableMigration(serverLock))
+
+	mg.AddMigration("add index server_lock.operation_uid", migrator.NewAddIndexMigration(serverLock, serverLock.Indices[0]))
+}
diff --git a/pkg/services/sqlstore/user.go b/pkg/services/sqlstore/user.go
index a3ccb93b30c..312877751c9 100644
--- a/pkg/services/sqlstore/user.go
+++ b/pkg/services/sqlstore/user.go
@@ -345,8 +345,12 @@ func GetUserOrgList(query *m.GetUserOrgListQuery) error {
 	return err
 }
 
+func newSignedInUserCacheKey(orgID, userID int64) string {
+	return fmt.Sprintf("signed-in-user-%d-%d", userID, orgID)
+}
+
 func (ss *SqlStore) GetSignedInUserWithCache(query *m.GetSignedInUserQuery) error {
-	cacheKey := fmt.Sprintf("signed-in-user-%d-%d", query.UserId, query.OrgId)
+	cacheKey := newSignedInUserCacheKey(query.OrgId, query.UserId)
 	if cached, found := ss.CacheService.Get(cacheKey); found {
 		query.Result = cached.(*m.SignedInUser)
 		return nil
@@ -357,6 +361,7 @@ func (ss *SqlStore) GetSignedInUserWithCache(query *m.GetSignedInUserQuery) erro
 		return err
 	}
 
+	cacheKey = newSignedInUserCacheKey(query.Result.OrgId, query.UserId)
 	ss.CacheService.Set(cacheKey, query.Result, time.Second*5)
 	return nil
 }
diff --git a/pkg/services/sqlstore/user_test.go b/pkg/services/sqlstore/user_test.go
index 627f2ab1ca5..526c17a8256 100644
--- a/pkg/services/sqlstore/user_test.go
+++ b/pkg/services/sqlstore/user_test.go
@@ -13,7 +13,7 @@ import (
 func TestUserDataAccess(t *testing.T) {
 
 	Convey("Testing DB", t, func() {
-		InitTestDB(t)
+		ss := InitTestDB(t)
 
 		Convey("Creating a user", func() {
 			cmd := &m.CreateUserCommand{
@@ -153,6 +153,27 @@ func TestUserDataAccess(t *testing.T) {
 						So(prefsQuery.Result.UserId, ShouldEqual, 0)
 					})
 				})
+
+				Convey("when retreiving signed in user for orgId=0 result should return active org id", func() {
+					ss.CacheService.Flush()
+
+					query := &m.GetSignedInUserQuery{OrgId: users[1].OrgId, UserId: users[1].Id}
+					err := ss.GetSignedInUserWithCache(query)
+					So(err, ShouldBeNil)
+					So(query.Result, ShouldNotBeNil)
+					So(query.OrgId, ShouldEqual, users[1].OrgId)
+					err = SetUsingOrg(&m.SetUsingOrgCommand{UserId: users[1].Id, OrgId: users[0].OrgId})
+					So(err, ShouldBeNil)
+					query = &m.GetSignedInUserQuery{OrgId: 0, UserId: users[1].Id}
+					err = ss.GetSignedInUserWithCache(query)
+					So(err, ShouldBeNil)
+					So(query.Result, ShouldNotBeNil)
+					So(query.Result.OrgId, ShouldEqual, users[0].OrgId)
+
+					cacheKey := newSignedInUserCacheKey(query.Result.OrgId, query.UserId)
+					_, found := ss.CacheService.Get(cacheKey)
+					So(found, ShouldBeTrue)
+				})
 			})
 		})
 
diff --git a/pkg/setting/setting_oauth.go b/pkg/setting/setting_oauth.go
index 93b1ab6f101..f0a3beccb44 100644
--- a/pkg/setting/setting_oauth.go
+++ b/pkg/setting/setting_oauth.go
@@ -1,20 +1,21 @@
 package setting
 
 type OAuthInfo struct {
-	ClientId, ClientSecret string
-	Scopes                 []string
-	AuthUrl, TokenUrl      string
-	Enabled                bool
-	EmailAttributeName     string
-	AllowedDomains         []string
-	HostedDomain           string
-	ApiUrl                 string
-	AllowSignup            bool
-	Name                   string
-	TlsClientCert          string
-	TlsClientKey           string
-	TlsClientCa            string
-	TlsSkipVerify          bool
+	ClientId, ClientSecret       string
+	Scopes                       []string
+	AuthUrl, TokenUrl            string
+	Enabled                      bool
+	EmailAttributeName           string
+	AllowedDomains               []string
+	HostedDomain                 string
+	ApiUrl                       string
+	AllowSignup                  bool
+	Name                         string
+	TlsClientCert                string
+	TlsClientKey                 string
+	TlsClientCa                  string
+	TlsSkipVerify                bool
+	SendClientCredentialsViaPost bool
 }
 
 type OAuther struct {
diff --git a/pkg/social/social.go b/pkg/social/social.go
index 8918507f3b9..60099a028d6 100644
--- a/pkg/social/social.go
+++ b/pkg/social/social.go
@@ -63,28 +63,34 @@ func NewOAuthService() {
 	for _, name := range allOauthes {
 		sec := setting.Raw.Section("auth." + name)
 		info := &setting.OAuthInfo{
-			ClientId:           sec.Key("client_id").String(),
-			ClientSecret:       sec.Key("client_secret").String(),
-			Scopes:             util.SplitString(sec.Key("scopes").String()),
-			AuthUrl:            sec.Key("auth_url").String(),
-			TokenUrl:           sec.Key("token_url").String(),
-			ApiUrl:             sec.Key("api_url").String(),
-			Enabled:            sec.Key("enabled").MustBool(),
-			EmailAttributeName: sec.Key("email_attribute_name").String(),
-			AllowedDomains:     util.SplitString(sec.Key("allowed_domains").String()),
-			HostedDomain:       sec.Key("hosted_domain").String(),
-			AllowSignup:        sec.Key("allow_sign_up").MustBool(),
-			Name:               sec.Key("name").MustString(name),
-			TlsClientCert:      sec.Key("tls_client_cert").String(),
-			TlsClientKey:       sec.Key("tls_client_key").String(),
-			TlsClientCa:        sec.Key("tls_client_ca").String(),
-			TlsSkipVerify:      sec.Key("tls_skip_verify_insecure").MustBool(),
+			ClientId:                     sec.Key("client_id").String(),
+			ClientSecret:                 sec.Key("client_secret").String(),
+			Scopes:                       util.SplitString(sec.Key("scopes").String()),
+			AuthUrl:                      sec.Key("auth_url").String(),
+			TokenUrl:                     sec.Key("token_url").String(),
+			ApiUrl:                       sec.Key("api_url").String(),
+			Enabled:                      sec.Key("enabled").MustBool(),
+			EmailAttributeName:           sec.Key("email_attribute_name").String(),
+			AllowedDomains:               util.SplitString(sec.Key("allowed_domains").String()),
+			HostedDomain:                 sec.Key("hosted_domain").String(),
+			AllowSignup:                  sec.Key("allow_sign_up").MustBool(),
+			Name:                         sec.Key("name").MustString(name),
+			TlsClientCert:                sec.Key("tls_client_cert").String(),
+			TlsClientKey:                 sec.Key("tls_client_key").String(),
+			TlsClientCa:                  sec.Key("tls_client_ca").String(),
+			TlsSkipVerify:                sec.Key("tls_skip_verify_insecure").MustBool(),
+			SendClientCredentialsViaPost: sec.Key("send_client_credentials_via_post").MustBool(),
 		}
 
 		if !info.Enabled {
 			continue
 		}
 
+		// handle the clients that do not properly support Basic auth headers and require passing client_id/client_secret via POST payload
+		if info.SendClientCredentialsViaPost {
+			oauth2.RegisterBrokenAuthHeaderProvider(info.TokenUrl)
+		}
+
 		if name == "grafananet" {
 			name = grafanaCom
 		}
diff --git a/public/app/core/components/Animations/FadeIn.tsx b/public/app/core/components/Animations/FadeIn.tsx
new file mode 100644
index 00000000000..e12f22486f1
--- /dev/null
+++ b/public/app/core/components/Animations/FadeIn.tsx
@@ -0,0 +1,38 @@
+import React, { SFC } from 'react';
+import Transition from 'react-transition-group/Transition';
+
+interface Props {
+  duration: number;
+  children: JSX.Element;
+  in: boolean;
+  unmountOnExit?: boolean;
+}
+
+export const FadeIn: SFC<Props> = props => {
+  const defaultStyle = {
+    transition: `opacity ${props.duration}ms linear`,
+    opacity: 0,
+  };
+
+  const transitionStyles = {
+    exited: { opacity: 0, display: 'none' },
+    entering: { opacity: 0 },
+    entered: { opacity: 1 },
+    exiting: { opacity: 0 },
+  };
+
+  return (
+    <Transition in={props.in} timeout={props.duration} unmountOnExit={props.unmountOnExit || false}>
+      {state => (
+        <div
+          style={{
+            ...defaultStyle,
+            ...transitionStyles[state],
+          }}
+        >
+          {props.children}
+        </div>
+      )}
+    </Transition>
+  );
+};
diff --git a/public/app/core/components/Animations/SlideDown.tsx b/public/app/core/components/Animations/SlideDown.tsx
index 70dacd73849..6e8995298dc 100644
--- a/public/app/core/components/Animations/SlideDown.tsx
+++ b/public/app/core/components/Animations/SlideDown.tsx
@@ -23,7 +23,7 @@ export default ({ children, in: inProp, maxHeight = defaultMaxHeight, style = de
   const transitionStyles = {
     exited: { maxHeight: 0 },
     entering: { maxHeight: maxHeight },
-    entered: { maxHeight: maxHeight, overflow: 'visible' },
+    entered: { maxHeight: 'unset', overflow: 'visible' },
     exiting: { maxHeight: 0 },
   };
 
diff --git a/public/app/core/components/AppNotifications/AppNotificationItem.tsx b/public/app/core/components/AppNotifications/AppNotificationItem.tsx
index 5169c39e7a0..6b4b268eb13 100644
--- a/public/app/core/components/AppNotifications/AppNotificationItem.tsx
+++ b/public/app/core/components/AppNotifications/AppNotificationItem.tsx
@@ -20,6 +20,7 @@ export default class AppNotificationItem extends Component<Props> {
 
   render() {
     const { appNotification, onClearNotification } = this.props;
+
     return (
       <div className={`alert-${appNotification.severity} alert`}>
         <div className="alert-icon">
diff --git a/public/app/core/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx b/public/app/core/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
new file mode 100644
index 00000000000..63191862ebb
--- /dev/null
+++ b/public/app/core/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx
@@ -0,0 +1,36 @@
+import { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+
+export interface Props {
+  onClick: () => void;
+}
+
+interface State {
+  hasEventListener: boolean;
+}
+
+export class ClickOutsideWrapper extends PureComponent<Props, State> {
+  state = {
+    hasEventListener: false,
+  };
+
+  componentDidMount() {
+    window.addEventListener('click', this.onOutsideClick, false);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('click', this.onOutsideClick, false);
+  }
+
+  onOutsideClick = event => {
+    const domNode = ReactDOM.findDOMNode(this) as Element;
+
+    if (!domNode || !domNode.contains(event.target)) {
+      this.props.onClick();
+    }
+  };
+
+  render() {
+    return this.props.children;
+  }
+}
diff --git a/public/app/core/components/CopyToClipboard/CopyToClipboard.tsx b/public/app/core/components/CopyToClipboard/CopyToClipboard.tsx
new file mode 100644
index 00000000000..ea63de58b47
--- /dev/null
+++ b/public/app/core/components/CopyToClipboard/CopyToClipboard.tsx
@@ -0,0 +1,67 @@
+import React, { PureComponent, ReactNode } from 'react';
+import ClipboardJS from 'clipboard';
+
+interface Props {
+  text: () => string;
+  elType?: string;
+  onSuccess?: (evt: any) => void;
+  onError?: (evt: any) => void;
+  className?: string;
+  children?: ReactNode;
+}
+
+export class CopyToClipboard extends PureComponent<Props> {
+  clipboardjs: any;
+  myRef: any;
+
+  constructor(props) {
+    super(props);
+    this.myRef = React.createRef();
+  }
+
+  componentDidMount() {
+    const { text, onSuccess, onError } = this.props;
+
+    this.clipboardjs = new ClipboardJS(this.myRef.current, {
+      text: text,
+    });
+
+    if (onSuccess) {
+      this.clipboardjs.on('success', evt => {
+        evt.clearSelection();
+        onSuccess(evt);
+      });
+    }
+
+    if (onError) {
+      this.clipboardjs.on('error', evt => {
+        console.error('Action:', evt.action);
+        console.error('Trigger:', evt.trigger);
+        onError(evt);
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.clipboardjs) {
+      this.clipboardjs.destroy();
+    }
+  }
+
+  getElementType = () => {
+    return this.props.elType || 'button';
+  };
+
+  render() {
+    const { elType, text, children, onError, onSuccess, ...restProps } = this.props;
+
+    return React.createElement(
+      this.getElementType(),
+      {
+        ref: this.myRef,
+        ...restProps,
+      },
+      this.props.children
+    );
+  }
+}
diff --git a/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx b/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
index 9b9a9c4d02a..590c11c0615 100644
--- a/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx
@@ -28,8 +28,8 @@ class CustomScrollbar extends PureComponent<Props> {
       <Scrollbars
         className={customClassName}
         autoHeight={true}
-        autoHeightMin={'100%'}
-        autoHeightMax={'100%'}
+        autoHeightMin={'inherit'}
+        autoHeightMax={'inherit'}
         renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
         renderTrackVertical={props => <div {...props} className="track-vertical" />}
         renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
diff --git a/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap b/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
index 37d8cea45be..310eb714af9 100644
--- a/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
+++ b/public/app/core/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
@@ -6,8 +6,8 @@ exports[`CustomScrollbar renders correctly 1`] = `
   style={
     Object {
       "height": "auto",
-      "maxHeight": "100%",
-      "minHeight": "100%",
+      "maxHeight": "inherit",
+      "minHeight": "inherit",
       "overflow": "hidden",
       "position": "relative",
       "width": "100%",
@@ -23,8 +23,8 @@ exports[`CustomScrollbar renders correctly 1`] = `
         "left": undefined,
         "marginBottom": 0,
         "marginRight": 0,
-        "maxHeight": "calc(100% + 0px)",
-        "minHeight": "calc(100% + 0px)",
+        "maxHeight": "calc(inherit + 0px)",
+        "minHeight": "calc(inherit + 0px)",
         "overflow": "scroll",
         "position": "relative",
         "right": undefined,
diff --git a/public/app/core/components/Form/Element.tsx b/public/app/core/components/Form/Element.tsx
new file mode 100644
index 00000000000..997d7f0e717
--- /dev/null
+++ b/public/app/core/components/Form/Element.tsx
@@ -0,0 +1,43 @@
+import React, { PureComponent, ReactNode, ReactElement } from 'react';
+import { Label } from './Label';
+import { uniqueId } from 'lodash';
+
+interface Props {
+  label?: ReactNode;
+  labelClassName?: string;
+  id?: string;
+  children: ReactElement<any>;
+}
+
+export class Element extends PureComponent<Props> {
+  elementId: string = this.props.id || uniqueId('form-element-');
+
+  get elementLabel() {
+    const { label, labelClassName } = this.props;
+
+    if (label) {
+      return (
+        <Label htmlFor={this.elementId} className={labelClassName}>
+          {label}
+        </Label>
+      );
+    }
+
+    return null;
+  }
+
+  get children() {
+    const { children } = this.props;
+
+    return React.cloneElement(children, { id: this.elementId });
+  }
+
+  render() {
+    return (
+      <div className="our-custom-wrapper-class">
+        {this.elementLabel}
+        {this.children}
+      </div>
+    );
+  }
+}
diff --git a/public/app/core/components/Form/Input.test.tsx b/public/app/core/components/Form/Input.test.tsx
new file mode 100644
index 00000000000..9e903208e80
--- /dev/null
+++ b/public/app/core/components/Form/Input.test.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import { Input, EventsWithValidation } from './Input';
+import { ValidationEvents } from 'app/types';
+
+const TEST_ERROR_MESSAGE = 'Value must be empty or less than 3 chars';
+const testBlurValidation: ValidationEvents = {
+  [EventsWithValidation.onBlur]: [
+    {
+      rule: (value: string) => {
+        if (!value || value.length < 3) {
+          return true;
+        }
+        return false;
+      },
+      errorMessage: TEST_ERROR_MESSAGE,
+    },
+  ],
+};
+
+describe('Input', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(<Input />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should validate with error onBlur', () => {
+    const wrapper = shallow(<Input validationEvents={testBlurValidation} />);
+    const evt = {
+      persist: jest.fn,
+      target: {
+        value: 'I can not be more than 2 chars',
+      },
+    };
+
+    wrapper.find('input').simulate('blur', evt);
+    expect(wrapper.state('error')).toBe(TEST_ERROR_MESSAGE);
+  });
+
+  it('should validate without error onBlur', () => {
+    const wrapper = shallow(<Input validationEvents={testBlurValidation} />);
+    const evt = {
+      persist: jest.fn,
+      target: {
+        value: 'Hi',
+      },
+    };
+
+    wrapper.find('input').simulate('blur', evt);
+    expect(wrapper.state('error')).toBe(null);
+  });
+});
diff --git a/public/app/core/components/Form/Input.tsx b/public/app/core/components/Form/Input.tsx
new file mode 100644
index 00000000000..7940f3b1104
--- /dev/null
+++ b/public/app/core/components/Form/Input.tsx
@@ -0,0 +1,94 @@
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import { ValidationEvents, ValidationRule } from 'app/types';
+import { validate, hasValidationEvent } from 'app/core/utils/validate';
+
+export enum InputStatus {
+  Invalid = 'invalid',
+  Valid = 'valid',
+}
+
+export enum InputTypes {
+  Text = 'text',
+  Number = 'number',
+  Password = 'password',
+  Email = 'email',
+}
+
+export enum EventsWithValidation {
+  onBlur = 'onBlur',
+  onFocus = 'onFocus',
+  onChange = 'onChange',
+}
+
+interface Props extends React.HTMLProps<HTMLInputElement> {
+  validationEvents?: ValidationEvents;
+  hideErrorMessage?: boolean;
+
+  // Override event props and append status as argument
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>, status?: InputStatus) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>, status?: InputStatus) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, status?: InputStatus) => void;
+}
+
+export class Input extends PureComponent<Props> {
+  static defaultProps = {
+    className: '',
+  };
+
+  state = {
+    error: null,
+  };
+
+  get status() {
+    return this.state.error ? InputStatus.Invalid : InputStatus.Valid;
+  }
+
+  get isInvalid() {
+    return this.status === InputStatus.Invalid;
+  }
+
+  validatorAsync = (validationRules: ValidationRule[]) => {
+    return evt => {
+      const errors = validate(evt.target.value, validationRules);
+      this.setState(prevState => {
+        return {
+          ...prevState,
+          error: errors ? errors[0] : null,
+        };
+      });
+    };
+  };
+
+  populateEventPropsWithStatus = (restProps, validationEvents: ValidationEvents) => {
+    const inputElementProps = { ...restProps };
+    Object.keys(EventsWithValidation).forEach((eventName: EventsWithValidation) => {
+      if (hasValidationEvent(eventName, validationEvents) || restProps[eventName]) {
+        inputElementProps[eventName] = async evt => {
+          evt.persist(); // Needed for async. https://reactjs.org/docs/events.html#event-pooling
+          if (hasValidationEvent(eventName, validationEvents)) {
+            await this.validatorAsync(validationEvents[eventName]).apply(this, [evt]);
+          }
+          if (restProps[eventName]) {
+            restProps[eventName].apply(null, [evt, this.status]);
+          }
+        };
+      }
+    });
+    return inputElementProps;
+  };
+
+  render() {
+    const { validationEvents, className, hideErrorMessage, ...restProps } = this.props;
+    const { error } = this.state;
+    const inputClassName = classNames('gf-form-input', { invalid: this.isInvalid }, className);
+    const inputElementProps = this.populateEventPropsWithStatus(restProps, validationEvents);
+
+    return (
+      <div className="our-custom-wrapper-class">
+        <input {...inputElementProps} className={inputClassName} />
+        {error && !hideErrorMessage && <span>{error}</span>}
+      </div>
+    );
+  }
+}
diff --git a/public/app/core/components/Form/Label.tsx b/public/app/core/components/Form/Label.tsx
new file mode 100644
index 00000000000..385a1b325be
--- /dev/null
+++ b/public/app/core/components/Form/Label.tsx
@@ -0,0 +1,19 @@
+import React, { PureComponent, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  htmlFor?: string;
+  className?: string;
+}
+
+export class Label extends PureComponent<Props> {
+  render() {
+    const { children, htmlFor, className } = this.props;
+
+    return (
+      <label className={`custom-label-class ${className || ''}`} htmlFor={htmlFor}>
+        {children}
+      </label>
+    );
+  }
+}
diff --git a/public/app/core/components/Form/__snapshots__/Input.test.tsx.snap b/public/app/core/components/Form/__snapshots__/Input.test.tsx.snap
new file mode 100644
index 00000000000..249d6b0be8d
--- /dev/null
+++ b/public/app/core/components/Form/__snapshots__/Input.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input renders correctly 1`] = `
+<div
+  className="our-custom-wrapper-class"
+>
+  <input
+    className="gf-form-input"
+  />
+</div>
+`;
diff --git a/public/app/core/components/Form/index.ts b/public/app/core/components/Form/index.ts
new file mode 100644
index 00000000000..e4c8197aaa9
--- /dev/null
+++ b/public/app/core/components/Form/index.ts
@@ -0,0 +1,3 @@
+export { Element } from './Element';
+export { Input } from './Input';
+export { Label } from './Label';
diff --git a/public/app/core/components/JSONFormatter/JSONFormatter.tsx b/public/app/core/components/JSONFormatter/JSONFormatter.tsx
new file mode 100644
index 00000000000..73c055de94b
--- /dev/null
+++ b/public/app/core/components/JSONFormatter/JSONFormatter.tsx
@@ -0,0 +1,51 @@
+import React, { PureComponent, createRef } from 'react';
+// import JSONFormatterJS, { JSONFormatterConfiguration } from 'json-formatter-js';
+import { JsonExplorer } from 'app/core/core'; // We have made some monkey-patching of json-formatter-js so we can't switch right now
+
+interface Props {
+  className?: string;
+  json: {};
+  config?: any;
+  open?: number;
+  onDidRender?: (formattedJson: any) => void;
+}
+
+export class JSONFormatter extends PureComponent<Props> {
+  private wrapperRef = createRef<HTMLDivElement>();
+
+  static defaultProps = {
+    open: 3,
+    config: {
+      animateOpen: true,
+    },
+  };
+
+  componentDidMount() {
+    this.renderJson();
+  }
+
+  componentDidUpdate() {
+    this.renderJson();
+  }
+
+  renderJson = () => {
+    const { json, config, open, onDidRender } = this.props;
+    const wrapperEl = this.wrapperRef.current;
+    const formatter = new JsonExplorer(json, open, config);
+    const hasChildren: boolean = wrapperEl.hasChildNodes();
+    if (hasChildren) {
+      wrapperEl.replaceChild(formatter.render(), wrapperEl.lastChild);
+    } else {
+      wrapperEl.appendChild(formatter.render());
+    }
+
+    if (onDidRender) {
+      onDidRender(formatter.json);
+    }
+  };
+
+  render() {
+    const { className } = this.props;
+    return <div className={className} ref={this.wrapperRef} />;
+  }
+}
diff --git a/public/app/core/components/Label/Label.tsx b/public/app/core/components/Label/Label.tsx
index 9b8fb6c6e19..362c3c577f7 100644
--- a/public/app/core/components/Label/Label.tsx
+++ b/public/app/core/components/Label/Label.tsx
@@ -6,6 +6,7 @@ interface Props {
   for?: string;
   children: ReactNode;
   width?: number;
+  className?: string;
 }
 
 export const Label: SFC<Props> = props => {
diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx
index d6da7c68544..749bef680bf 100644
--- a/public/app/core/components/PermissionList/AddPermission.tsx
+++ b/public/app/core/components/PermissionList/AddPermission.tsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import { UserPicker } from 'app/core/components/Picker/UserPicker';
-import { TeamPicker, Team } from 'app/core/components/Picker/TeamPicker';
-import DescriptionPicker, { OptionWithDescription } from 'app/core/components/Picker/DescriptionPicker';
+import { UserPicker } from 'app/core/components/Select/UserPicker';
+import { TeamPicker, Team } from 'app/core/components/Select/TeamPicker';
+import { Select, SelectOptionItem } from 'app/core/components/Select/Select';
 import { User } from 'app/types';
 import {
   dashboardPermissionLevels,
@@ -61,7 +61,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
     this.setState({ teamId: team && !Array.isArray(team) ? team.id : 0 });
   };
 
-  onPermissionChanged = (permission: OptionWithDescription) => {
+  onPermissionChanged = (permission: SelectOptionItem) => {
     this.setState({ permission: permission.value });
   };
 
@@ -121,11 +121,11 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
             ) : null}
 
             <div className="gf-form">
-              <DescriptionPicker
-                optionsWithDesc={dashboardPermissionLevels}
-                onSelected={this.onPermissionChanged}
-                disabled={false}
-                className={'gf-form-select-box__control--menu-right'}
+              <Select
+                isSearchable={false}
+                options={dashboardPermissionLevels}
+                onChange={this.onPermissionChanged}
+                className="gf-form-select-box__control--menu-right"
               />
             </div>
 
diff --git a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
index ff679f67ae2..d3f9ddbb1fb 100644
--- a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
+import Select from 'app/core/components/Select/Select';
 import { dashboardPermissionLevels } from 'app/types/acl';
 
 export interface Props {
@@ -9,6 +9,7 @@ export interface Props {
 export default class DisabledPermissionListItem extends Component<Props, any> {
   render() {
     const { item } = this.props;
+    const currentPermissionLevel = dashboardPermissionLevels.find(dp => dp.value === item.permission);
 
     return (
       <tr className="gf-form-disabled">
@@ -23,12 +24,12 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
         <td className="query-keyword">Can</td>
         <td>
           <div className="gf-form">
-            <DescriptionPicker
-              optionsWithDesc={dashboardPermissionLevels}
-              onSelected={() => {}}
-              disabled={true}
-              className={'gf-form-select-box__control--menu-right'}
-              value={item.permission}
+            <Select
+              options={dashboardPermissionLevels}
+              onChange={() => {}}
+              isDisabled={true}
+              className="gf-form-select-box__control--menu-right"
+              value={currentPermissionLevel}
             />
           </div>
         </td>
diff --git a/public/app/core/components/PermissionList/PermissionListItem.tsx b/public/app/core/components/PermissionList/PermissionListItem.tsx
index 56b6114d236..e726667cfbb 100644
--- a/public/app/core/components/PermissionList/PermissionListItem.tsx
+++ b/public/app/core/components/PermissionList/PermissionListItem.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
+import { Select } from 'app/core/components/Select/Select';
 import { dashboardPermissionLevels, DashboardAcl, PermissionLevel } from 'app/types/acl';
 import { FolderInfo } from 'app/types';
 
@@ -50,6 +50,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
   render() {
     const { item, folderInfo } = this.props;
     const inheritedFromRoot = item.dashboardId === -1 && !item.inherited;
+    const currentPermissionLevel = dashboardPermissionLevels.find(dp => dp.value === item.permission);
 
     return (
       <tr className={setClassNameHelper(item.inherited)}>
@@ -74,12 +75,13 @@ export default class PermissionsListItem extends PureComponent<Props> {
         <td className="query-keyword">Can</td>
         <td>
           <div className="gf-form">
-            <DescriptionPicker
-              optionsWithDesc={dashboardPermissionLevels}
-              onSelected={this.onPermissionChanged}
-              disabled={item.inherited}
-              className={'gf-form-select-box__control--menu-right'}
-              value={item.permission}
+            <Select
+              isSearchable={false}
+              options={dashboardPermissionLevels}
+              onChange={this.onPermissionChanged}
+              isDisabled={item.inherited}
+              className="gf-form-select-box__control--menu-right"
+              value={currentPermissionLevel}
             />
           </div>
         </td>
diff --git a/public/app/core/components/Picker/DescriptionOption.tsx b/public/app/core/components/Picker/DescriptionOption.tsx
deleted file mode 100644
index 9ddf13f7532..00000000000
--- a/public/app/core/components/Picker/DescriptionOption.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-import { OptionProps } from 'react-select/lib/components/Option';
-
-// https://github.com/JedWatson/react-select/issues/3038
-interface ExtendedOptionProps extends OptionProps<any> {
-  data: any;
-}
-
-export const Option = (props: ExtendedOptionProps) => {
-  const { children, isSelected, data, className } = props;
-  return (
-    <components.Option {...props}>
-      <div className={`description-picker-option__button btn btn-link ${className}`}>
-        {isSelected && <i className="fa fa-check pull-right" aria-hidden="true" />}
-        <div className="gf-form">{children}</div>
-        <div className="gf-form">
-          <div className="muted width-17">{data.description}</div>
-        </div>
-      </div>
-    </components.Option>
-  );
-};
-
-export default Option;
diff --git a/public/app/core/components/Picker/DescriptionPicker.tsx b/public/app/core/components/Picker/DescriptionPicker.tsx
deleted file mode 100644
index a917e3977f5..00000000000
--- a/public/app/core/components/Picker/DescriptionPicker.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { Component } from 'react';
-import Select from 'react-select';
-import DescriptionOption from './DescriptionOption';
-import IndicatorsContainer from './IndicatorsContainer';
-import ResetStyles from './ResetStyles';
-import NoOptionsMessage from './NoOptionsMessage';
-
-export interface OptionWithDescription {
-  value: any;
-  label: string;
-  description: string;
-}
-
-export interface Props {
-  optionsWithDesc: OptionWithDescription[];
-  onSelected: (permission) => void;
-  disabled: boolean;
-  className?: string;
-  value?: any;
-}
-
-const getSelectedOption = (optionsWithDesc, value) => optionsWithDesc.find(option => option.value === value);
-
-class DescriptionPicker extends Component<Props, any> {
-  render() {
-    const { optionsWithDesc, onSelected, disabled, className, value } = this.props;
-    const selectedOption = getSelectedOption(optionsWithDesc, value);
-    return (
-      <div className="permissions-picker">
-        <Select
-          placeholder="Choose"
-          classNamePrefix={`gf-form-select-box`}
-          className={`width-7 gf-form-input gf-form-input--form-dropdown ${className || ''}`}
-          options={optionsWithDesc}
-          components={{
-            Option: DescriptionOption,
-            IndicatorsContainer,
-            NoOptionsMessage,
-          }}
-          styles={ResetStyles}
-          isDisabled={disabled}
-          onChange={onSelected}
-          getOptionValue={i => i.value}
-          getOptionLabel={i => i.label}
-          value={selectedOption}
-        />
-      </div>
-    );
-  }
-}
-
-export default DescriptionPicker;
diff --git a/public/app/core/components/Picker/NoOptionsMessage.tsx b/public/app/core/components/Picker/NoOptionsMessage.tsx
deleted file mode 100644
index 1d2ad4a179e..00000000000
--- a/public/app/core/components/Picker/NoOptionsMessage.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-import { OptionProps } from 'react-select/lib/components/Option';
-
-export interface Props {
-  children: Element;
-}
-
-export const PickerOption = (props: OptionProps<any>) => {
-  const { children, className } = props;
-  return (
-    <components.Option {...props}>
-      <div className={`description-picker-option__button btn btn-link ${className}`}>{children}</div>
-    </components.Option>
-  );
-};
-
-export default PickerOption;
diff --git a/public/app/core/components/Picker/PickerOption.tsx b/public/app/core/components/Picker/PickerOption.tsx
deleted file mode 100644
index 98bb5dc566e..00000000000
--- a/public/app/core/components/Picker/PickerOption.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-import { OptionProps } from 'react-select/lib/components/Option';
-
-// https://github.com/JedWatson/react-select/issues/3038
-interface ExtendedOptionProps extends OptionProps<any> {
-  data: any;
-}
-
-export const PickerOption = (props: ExtendedOptionProps) => {
-  const { children, data, className } = props;
-  return (
-    <components.Option {...props}>
-      <div className={`description-picker-option__button btn btn-link ${className}`}>
-        {data.avatarUrl && <img src={data.avatarUrl} alt={data.label} className="user-picker-option__avatar" />}
-        {children}
-      </div>
-    </components.Option>
-  );
-};
-
-export default PickerOption;
diff --git a/public/app/core/components/Picker/SimplePicker.tsx b/public/app/core/components/Picker/SimplePicker.tsx
deleted file mode 100644
index 817cd14150f..00000000000
--- a/public/app/core/components/Picker/SimplePicker.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-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;
-  value: any;
-}
-
-const SimplePicker: SFC<Props> = ({
-  className,
-  defaultValue,
-  getOptionLabel,
-  getOptionValue,
-  onSelected,
-  options,
-  placeholder,
-  width,
-  value,
-}) => {
-  return (
-    <Select
-      classNamePrefix={`gf-form-select-box`}
-      className={`width-${width} gf-form-input gf-form-input--form-dropdown ${className || ''}`}
-      components={{
-        Option: DescriptionOption,
-      }}
-      defaultValue={defaultValue}
-      value={value}
-      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/Picker/__snapshots__/PickerOption.test.tsx.snap b/public/app/core/components/Picker/__snapshots__/PickerOption.test.tsx.snap
deleted file mode 100644
index b376ab24934..00000000000
--- a/public/app/core/components/Picker/__snapshots__/PickerOption.test.tsx.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PickerOption renders correctly 1`] = `
-<div>
-  <div
-    className="description-picker-option__button btn btn-link class-for-user-picker"
-  >
-    <img
-      alt="User picker label"
-      className="user-picker-option__avatar"
-      src="url/to/avatar"
-    />
-    Model title
-  </div>
-</div>
-`;
-  
\ No newline at end of file
diff --git a/public/app/core/components/PluginHelp/PluginHelp.tsx b/public/app/core/components/PluginHelp/PluginHelp.tsx
new file mode 100644
index 00000000000..c37498afc45
--- /dev/null
+++ b/public/app/core/components/PluginHelp/PluginHelp.tsx
@@ -0,0 +1,83 @@
+import React, { PureComponent } from 'react';
+import Remarkable from 'remarkable';
+import { getBackendSrv } from '../../services/backend_srv';
+
+interface Props {
+  plugin: {
+    name: string;
+    id: string;
+  };
+  type: string;
+}
+
+interface State {
+  isError: boolean;
+  isLoading: boolean;
+  help: string;
+}
+
+export class PluginHelp extends PureComponent<Props, State> {
+  state = {
+    isError: false,
+    isLoading: false,
+    help: '',
+  };
+
+  componentDidMount(): void {
+    this.loadHelp();
+  }
+
+  constructPlaceholderInfo() {
+    return 'No plugin help or readme markdown file was found';
+  }
+
+  loadHelp = () => {
+    const { plugin, type } = this.props;
+    this.setState({ isLoading: true });
+
+    getBackendSrv()
+      .get(`/api/plugins/${plugin.id}/markdown/${type}`)
+      .then(response => {
+        const markdown = new Remarkable();
+        const helpHtml = markdown.render(response);
+
+        if (response === '' && type === 'help') {
+          this.setState({
+            isError: false,
+            isLoading: false,
+            help: this.constructPlaceholderInfo(),
+          });
+        } else {
+          this.setState({
+            isError: false,
+            isLoading: false,
+            help: helpHtml,
+          });
+        }
+      })
+      .catch(() => {
+        this.setState({
+          isError: true,
+          isLoading: false,
+        });
+      });
+  };
+
+  render() {
+    const { type } = this.props;
+    const { isError, isLoading, help } = this.state;
+
+    if (isLoading) {
+      return <h2>Loading help...</h2>;
+    }
+
+    if (isError) {
+      return <h3>'Error occurred when loading help'</h3>;
+    }
+
+    if (type === 'panel_help' && help === '') {
+    }
+
+    return <div className="markdown-html" dangerouslySetInnerHTML={{ __html: help }} />;
+  }
+}
diff --git a/public/app/core/components/Portal/Portal.tsx b/public/app/core/components/Portal/Portal.tsx
new file mode 100644
index 00000000000..25d54a64209
--- /dev/null
+++ b/public/app/core/components/Portal/Portal.tsx
@@ -0,0 +1,35 @@
+import { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+
+interface Props {
+  className?: string;
+  root?: HTMLElement;
+}
+
+export default class BodyPortal extends PureComponent<Props> {
+  node: HTMLElement = document.createElement('div');
+  portalRoot: HTMLElement;
+
+  constructor(props) {
+    super(props);
+    const {
+      className,
+      root = document.body
+    } = this.props;
+
+    if (className) {
+      this.node.classList.add(className);
+    }
+
+    this.portalRoot = root;
+    this.portalRoot.appendChild(this.node);
+  }
+
+  componentWillUnmount() {
+    this.portalRoot.removeChild(this.node);
+  }
+
+  render() {
+    return ReactDOM.createPortal(this.props.children, this.node);
+  }
+}
diff --git a/public/app/core/components/Select/DataSourcePicker.tsx b/public/app/core/components/Select/DataSourcePicker.tsx
new file mode 100644
index 00000000000..1a9081038c0
--- /dev/null
+++ b/public/app/core/components/Select/DataSourcePicker.tsx
@@ -0,0 +1,72 @@
+// Libraries
+import React, { PureComponent } from 'react';
+import _ from 'lodash';
+
+// Components
+import Select from './Select';
+
+// Types
+import { DataSourceSelectItem } from 'app/types';
+
+export interface Props {
+  onChange: (ds: DataSourceSelectItem) => void;
+  datasources: DataSourceSelectItem[];
+  current: DataSourceSelectItem;
+  onBlur?: () => void;
+  autoFocus?: boolean;
+}
+
+export class DataSourcePicker extends PureComponent<Props> {
+  static defaultProps = {
+    autoFocus: false,
+  };
+
+  searchInput: HTMLElement;
+
+  constructor(props) {
+    super(props);
+  }
+
+  onChange = item => {
+    const ds = this.props.datasources.find(ds => ds.name === item.value);
+    this.props.onChange(ds);
+  };
+
+  render() {
+    const { datasources, current, autoFocus, onBlur } = this.props;
+
+    const options = datasources.map(ds => ({
+      value: ds.name,
+      label: ds.name,
+      imgUrl: ds.meta.info.logos.small,
+    }));
+
+    const value = current && {
+      label: current.name,
+      value: current.name,
+      imgUrl: current.meta.info.logos.small,
+    };
+
+    return (
+      <div className="gf-form-inline">
+        <Select
+          className="ds-picker"
+          isMulti={false}
+          isClearable={false}
+          backspaceRemovesValue={false}
+          onChange={this.onChange}
+          options={options}
+          autoFocus={autoFocus}
+          onBlur={onBlur}
+          openMenuOnFocus={true}
+          maxMenuHeight={500}
+          placeholder="Select datasource"
+          noOptionsMessage={() => 'No datasources found'}
+          value={value}
+        />
+      </div>
+    );
+  }
+}
+
+export default DataSourcePicker;
diff --git a/public/app/core/components/Picker/IndicatorsContainer.tsx b/public/app/core/components/Select/IndicatorsContainer.tsx
similarity index 82%
rename from public/app/core/components/Picker/IndicatorsContainer.tsx
rename to public/app/core/components/Select/IndicatorsContainer.tsx
index a0998fe95b8..d4de51a2cef 100644
--- a/public/app/core/components/Picker/IndicatorsContainer.tsx
+++ b/public/app/core/components/Select/IndicatorsContainer.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { components } from 'react-select';
+import React from 'react';
+import { components } from '@torkelo/react-select';
 
 export const IndicatorsContainer = props => {
   const isOpen = props.selectProps.menuIsOpen;
diff --git a/public/app/core/components/Select/NoOptionsMessage.tsx b/public/app/core/components/Select/NoOptionsMessage.tsx
new file mode 100644
index 00000000000..5fe229340a4
--- /dev/null
+++ b/public/app/core/components/Select/NoOptionsMessage.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { components } from '@torkelo/react-select';
+import { OptionProps } from '@torkelo/react-select/lib/components/Option';
+
+export interface Props {
+  children: Element;
+}
+
+export const NoOptionsMessage = (props: OptionProps<any>) => {
+  const { children } = props;
+  return (
+    <components.Option {...props}>
+      <div className="gf-form-select-box__desc-option">
+        <div className="gf-form-select-box__desc-option__body">{children}</div>
+      </div>
+    </components.Option>
+  );
+};
+
+export default NoOptionsMessage;
diff --git a/public/app/core/components/Select/OptionGroup.tsx b/public/app/core/components/Select/OptionGroup.tsx
new file mode 100644
index 00000000000..a001f58c681
--- /dev/null
+++ b/public/app/core/components/Select/OptionGroup.tsx
@@ -0,0 +1,53 @@
+import React, { PureComponent } from 'react';
+import { GroupProps } from 'react-select/lib/components/Group';
+
+interface ExtendedGroupProps extends GroupProps<any> {
+  data: any;
+}
+
+interface State {
+  expanded: boolean;
+}
+
+export default class OptionGroup extends PureComponent<ExtendedGroupProps, State> {
+  state = {
+    expanded: false,
+  };
+
+  componentDidMount() {
+    if (this.props.selectProps) {
+      const value = this.props.selectProps.value[this.props.selectProps.value.length - 1];
+
+      if (value && this.props.options.some(option => option.value === value)) {
+        this.setState({ expanded: true });
+      }
+    }
+  }
+
+  componentDidUpdate(nextProps) {
+    if (nextProps.selectProps.inputValue !== '') {
+      this.setState({ expanded: true });
+    }
+  }
+
+  onToggleChildren = () => {
+    this.setState(prevState => ({
+      expanded: !prevState.expanded,
+    }));
+  };
+
+  render() {
+    const { children, label } = this.props;
+    const { expanded } = this.state;
+
+    return (
+      <div className="gf-form-select-box__option-group">
+        <div className="gf-form-select-box__option-group__header" onClick={this.onToggleChildren}>
+          <span className="flex-grow">{label}</span>
+          <i className={`fa ${expanded ? 'fa-caret-left' : 'fa-caret-down'}`} />{' '}
+        </div>
+        {expanded && children}
+      </div>
+    );
+  }
+}
diff --git a/public/app/core/components/Picker/PickerOption.test.tsx b/public/app/core/components/Select/PickerOption.test.tsx
similarity index 92%
rename from public/app/core/components/Picker/PickerOption.test.tsx
rename to public/app/core/components/Select/PickerOption.test.tsx
index 7ebcac354e8..6b4aedcfcc0 100644
--- a/public/app/core/components/Picker/PickerOption.test.tsx
+++ b/public/app/core/components/Select/PickerOption.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react';
 import renderer from 'react-test-renderer';
 import PickerOption from './PickerOption';
 
@@ -24,7 +24,7 @@ const model = {
   children: 'Model title',
   data: {
     title: 'Model title',
-    avatarUrl: 'url/to/avatar',
+    imgUrl: 'url/to/avatar',
     label: 'User picker label',
   },
   className: 'class-for-user-picker',
diff --git a/public/app/core/components/Select/PickerOption.tsx b/public/app/core/components/Select/PickerOption.tsx
new file mode 100644
index 00000000000..d263f6f832b
--- /dev/null
+++ b/public/app/core/components/Select/PickerOption.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { components } from '@torkelo/react-select';
+import { OptionProps } from 'react-select/lib/components/Option';
+
+// https://github.com/JedWatson/react-select/issues/3038
+interface ExtendedOptionProps extends OptionProps<any> {
+  data: {
+    description?: string;
+    imgUrl?: string;
+  };
+}
+
+export const Option = (props: ExtendedOptionProps) => {
+  const { children, isSelected, data } = props;
+
+  return (
+    <components.Option {...props}>
+      <div className="gf-form-select-box__desc-option">
+        {data.imgUrl && <img className="gf-form-select-box__desc-option__img" src={data.imgUrl} />}
+        <div className="gf-form-select-box__desc-option__body">
+          <div>{children}</div>
+          {data.description && <div className="gf-form-select-box__desc-option__desc">{data.description}</div>}
+        </div>
+        {isSelected && <i className="fa fa-check" aria-hidden="true" />}
+      </div>
+    </components.Option>
+  );
+};
+
+// was not able to type this without typescript error
+export const SingleValue = props => {
+  const { children, data } = props;
+
+  return (
+    <components.SingleValue {...props}>
+      <div className="gf-form-select-box__img-value">
+        {data.imgUrl && <img className="gf-form-select-box__desc-option__img" src={data.imgUrl} />}
+        {children}
+      </div>
+    </components.SingleValue>
+  );
+};
+
+export default Option;
diff --git a/public/app/core/components/Picker/ResetStyles.tsx b/public/app/core/components/Select/ResetStyles.tsx
similarity index 85%
rename from public/app/core/components/Picker/ResetStyles.tsx
rename to public/app/core/components/Select/ResetStyles.tsx
index 2a235b2892a..c34abb544ab 100644
--- a/public/app/core/components/Picker/ResetStyles.tsx
+++ b/public/app/core/components/Select/ResetStyles.tsx
@@ -1,4 +1,4 @@
-export default {
+export default {
   clearIndicator: () => ({}),
   container: () => ({}),
   control: () => ({}),
@@ -11,7 +11,9 @@
   loadingIndicator: () => ({}),
   loadingMessage: () => ({}),
   menu: () => ({}),
-  menuList: () => ({}),
+  menuList: ({ maxHeight }: { maxHeight: number }) => ({
+    maxHeight,
+  }),
   multiValue: () => ({}),
   multiValueLabel: () => ({}),
   multiValueRemove: () => ({}),
diff --git a/public/app/core/components/Select/Select.tsx b/public/app/core/components/Select/Select.tsx
new file mode 100644
index 00000000000..893eb1a6655
--- /dev/null
+++ b/public/app/core/components/Select/Select.tsx
@@ -0,0 +1,232 @@
+// Libraries
+import classNames from 'classnames';
+import React, { PureComponent } from 'react';
+import { default as ReactSelect } from '@torkelo/react-select';
+import { default as ReactAsyncSelect } from '@torkelo/react-select/lib/Async';
+import { components } from '@torkelo/react-select';
+
+// Components
+import { Option, SingleValue } from './PickerOption';
+import OptionGroup from './OptionGroup';
+import IndicatorsContainer from './IndicatorsContainer';
+import NoOptionsMessage from './NoOptionsMessage';
+import ResetStyles from './ResetStyles';
+import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
+
+export interface SelectOptionItem {
+  label?: string;
+  value?: any;
+  imgUrl?: string;
+  description?: string;
+  [key: string]: any;
+}
+
+interface CommonProps {
+  defaultValue?: any;
+  getOptionLabel?: (item: SelectOptionItem) => string;
+  getOptionValue?: (item: SelectOptionItem) => string;
+  onChange: (item: SelectOptionItem) => {} | void;
+  placeholder?: string;
+  width?: number;
+  value?: SelectOptionItem;
+  className?: string;
+  isDisabled?: boolean;
+  isSearchable?: boolean;
+  isClearable?: boolean;
+  autoFocus?: boolean;
+  openMenuOnFocus?: boolean;
+  onBlur?: () => void;
+  maxMenuHeight?: number;
+  isLoading: boolean;
+  noOptionsMessage?: () => string;
+  isMulti?: boolean;
+  backspaceRemovesValue: boolean;
+}
+
+interface SelectProps {
+  options: SelectOptionItem[];
+}
+
+interface AsyncProps {
+  defaultOptions: boolean;
+  loadOptions: (query: string) => Promise<SelectOptionItem[]>;
+  loadingMessage?: () => string;
+}
+
+export const MenuList = props => {
+  return (
+    <components.MenuList {...props}>
+      <CustomScrollbar autoHide={false}>{props.children}</CustomScrollbar>
+    </components.MenuList>
+  );
+};
+
+export class Select extends PureComponent<CommonProps & SelectProps> {
+  static defaultProps = {
+    width: null,
+    className: '',
+    isDisabled: false,
+    isSearchable: true,
+    isClearable: false,
+    isMulti: false,
+    openMenuOnFocus: false,
+    autoFocus: false,
+    isLoading: false,
+    backspaceRemovesValue: true,
+    maxMenuHeight: 300,
+  };
+
+  render() {
+    const {
+      defaultValue,
+      getOptionLabel,
+      getOptionValue,
+      onChange,
+      options,
+      placeholder,
+      width,
+      value,
+      className,
+      isDisabled,
+      isLoading,
+      isSearchable,
+      isClearable,
+      backspaceRemovesValue,
+      isMulti,
+      autoFocus,
+      openMenuOnFocus,
+      onBlur,
+      maxMenuHeight,
+      noOptionsMessage,
+    } = this.props;
+
+    let widthClass = '';
+    if (width) {
+      widthClass = 'width-' + width;
+    }
+
+    const selectClassNames = classNames('gf-form-input', 'gf-form-input--form-dropdown', widthClass, className);
+
+    return (
+      <ReactSelect
+        classNamePrefix="gf-form-select-box"
+        className={selectClassNames}
+        components={{
+          Option,
+          SingleValue,
+          IndicatorsContainer,
+          MenuList,
+          Group: OptionGroup,
+        }}
+        defaultValue={defaultValue}
+        value={value}
+        getOptionLabel={getOptionLabel}
+        getOptionValue={getOptionValue}
+        menuShouldScrollIntoView={false}
+        isSearchable={isSearchable}
+        onChange={onChange}
+        options={options}
+        placeholder={placeholder || 'Choose'}
+        styles={ResetStyles}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        isClearable={isClearable}
+        autoFocus={autoFocus}
+        onBlur={onBlur}
+        openMenuOnFocus={openMenuOnFocus}
+        maxMenuHeight={maxMenuHeight}
+        noOptionsMessage={noOptionsMessage}
+        isMulti={isMulti}
+        backspaceRemovesValue={backspaceRemovesValue}
+      />
+    );
+  }
+}
+
+export class AsyncSelect extends PureComponent<CommonProps & AsyncProps> {
+  static defaultProps = {
+    width: null,
+    className: '',
+    components: {},
+    loadingMessage: () => 'Loading...',
+    isDisabled: false,
+    isClearable: false,
+    isMulti: false,
+    isSearchable: true,
+    backspaceRemovesValue: true,
+    autoFocus: false,
+    openMenuOnFocus: false,
+    maxMenuHeight: 300,
+  };
+
+  render() {
+    const {
+      defaultValue,
+      getOptionLabel,
+      getOptionValue,
+      onChange,
+      placeholder,
+      width,
+      value,
+      className,
+      loadOptions,
+      defaultOptions,
+      isLoading,
+      loadingMessage,
+      noOptionsMessage,
+      isDisabled,
+      isSearchable,
+      isClearable,
+      backspaceRemovesValue,
+      autoFocus,
+      onBlur,
+      openMenuOnFocus,
+      maxMenuHeight,
+      isMulti,
+    } = this.props;
+
+    let widthClass = '';
+    if (width) {
+      widthClass = 'width-' + width;
+    }
+
+    const selectClassNames = classNames('gf-form-input', 'gf-form-input--form-dropdown', widthClass, className);
+
+    return (
+      <ReactAsyncSelect
+        classNamePrefix="gf-form-select-box"
+        className={selectClassNames}
+        components={{
+          Option,
+          SingleValue,
+          IndicatorsContainer,
+          NoOptionsMessage,
+        }}
+        defaultValue={defaultValue}
+        value={value}
+        getOptionLabel={getOptionLabel}
+        getOptionValue={getOptionValue}
+        menuShouldScrollIntoView={false}
+        onChange={onChange}
+        loadOptions={loadOptions}
+        isLoading={isLoading}
+        defaultOptions={defaultOptions}
+        placeholder={placeholder || 'Choose'}
+        styles={ResetStyles}
+        loadingMessage={loadingMessage}
+        noOptionsMessage={noOptionsMessage}
+        isDisabled={isDisabled}
+        isSearchable={isSearchable}
+        isClearable={isClearable}
+        autoFocus={autoFocus}
+        onBlur={onBlur}
+        openMenuOnFocus={openMenuOnFocus}
+        maxMenuHeight={maxMenuHeight}
+        isMulti={isMulti}
+        backspaceRemovesValue={backspaceRemovesValue}
+      />
+    );
+  }
+}
+
+export default Select;
diff --git a/public/app/core/components/Picker/TeamPicker.test.tsx b/public/app/core/components/Select/TeamPicker.test.tsx
similarity index 100%
rename from public/app/core/components/Picker/TeamPicker.test.tsx
rename to public/app/core/components/Select/TeamPicker.test.tsx
diff --git a/public/app/core/components/Picker/TeamPicker.tsx b/public/app/core/components/Select/TeamPicker.tsx
similarity index 68%
rename from public/app/core/components/Picker/TeamPicker.tsx
rename to public/app/core/components/Select/TeamPicker.tsx
index f44717acd28..bc608318806 100644
--- a/public/app/core/components/Picker/TeamPicker.tsx
+++ b/public/app/core/components/Select/TeamPicker.tsx
@@ -1,11 +1,8 @@
 import React, { Component } from 'react';
-import AsyncSelect from 'react-select/lib/Async';
-import PickerOption from './PickerOption';
+import _ from 'lodash';
+import { AsyncSelect } from './Select';
 import { debounce } from 'lodash';
 import { getBackendSrv } from 'app/core/services/backend_srv';
-import ResetStyles from './ResetStyles';
-import IndicatorsContainer from './IndicatorsContainer';
-import NoOptionsMessage from './NoOptionsMessage';
 
 export interface Team {
   id: number;
@@ -41,13 +38,18 @@ export class TeamPicker extends Component<Props, State> {
     const backendSrv = getBackendSrv();
     this.setState({ isLoading: true });
 
+    if (_.isNil(query)) {
+      query = '';
+    }
+
     return backendSrv.get(`/api/teams/search?perpage=10&page=1&query=${query}`).then(result => {
       const teams = result.teams.map(team => {
         return {
           id: team.id,
+          value: team.id,
           label: team.name,
           name: team.name,
-          avatarUrl: team.avatarUrl,
+          imgUrl: team.avatarUrl,
         };
       });
 
@@ -62,24 +64,13 @@ export class TeamPicker extends Component<Props, State> {
     return (
       <div className="user-picker">
         <AsyncSelect
-          classNamePrefix={`gf-form-select-box`}
-          isMulti={false}
           isLoading={isLoading}
           defaultOptions={true}
           loadOptions={this.debouncedSearch}
           onChange={onSelected}
-          className={`gf-form-input gf-form-input--form-dropdown ${className || ''}`}
-          styles={ResetStyles}
-          components={{
-            Option: PickerOption,
-            IndicatorsContainer,
-            NoOptionsMessage,
-          }}
+          className={className}
           placeholder="Select a team"
-          loadingMessage={() => 'Loading...'}
           noOptionsMessage={() => 'No teams found'}
-          getOptionValue={i => i.id}
-          getOptionLabel={i => i.label}
         />
       </div>
     );
diff --git a/public/app/core/components/Select/UnitPicker.tsx b/public/app/core/components/Select/UnitPicker.tsx
new file mode 100644
index 00000000000..75885cbbb84
--- /dev/null
+++ b/public/app/core/components/Select/UnitPicker.tsx
@@ -0,0 +1,51 @@
+import React, { PureComponent } from 'react';
+import Select from './Select';
+import kbn from 'app/core/utils/kbn';
+
+interface Props {
+  onChange: (item: any) => void;
+  defaultValue?: string;
+  width?: number;
+}
+
+export default class UnitPicker extends PureComponent<Props> {
+  static defaultProps = {
+    width: 12,
+  };
+
+  render() {
+    const { defaultValue, onChange, width } = this.props;
+
+    const unitGroups = kbn.getUnitFormats();
+
+    // Need to transform the data structure to work well with Select
+    const groupOptions = unitGroups.map(group => {
+      const options = group.submenu.map(unit => {
+        return {
+          label: unit.text,
+          value: unit.value,
+        };
+      });
+
+      return {
+        label: group.text,
+        options,
+      };
+    });
+
+    const value = groupOptions.map(group => {
+      return group.options.find(option => option.value === defaultValue);
+    });
+
+    return (
+      <Select
+        width={width}
+        defaultValue={value}
+        isSearchable={true}
+        options={groupOptions}
+        placeholder="Choose"
+        onChange={onChange}
+      />
+    );
+  }
+}
diff --git a/public/app/core/components/Picker/UserPicker.test.tsx b/public/app/core/components/Select/UserPicker.test.tsx
similarity index 100%
rename from public/app/core/components/Picker/UserPicker.test.tsx
rename to public/app/core/components/Select/UserPicker.test.tsx
diff --git a/public/app/core/components/Picker/UserPicker.tsx b/public/app/core/components/Select/UserPicker.tsx
similarity index 68%
rename from public/app/core/components/Picker/UserPicker.tsx
rename to public/app/core/components/Select/UserPicker.tsx
index f80a3fc135f..8496d707105 100644
--- a/public/app/core/components/Picker/UserPicker.tsx
+++ b/public/app/core/components/Select/UserPicker.tsx
@@ -1,12 +1,16 @@
+// Libraries
 import React, { Component } from 'react';
-import AsyncSelect from 'react-select/lib/Async';
-import PickerOption from './PickerOption';
+import _ from 'lodash';
+
+// Components
+import { AsyncSelect } from './Select';
+
+// Utils & Services
 import { debounce } from 'lodash';
 import { getBackendSrv } from 'app/core/services/backend_srv';
+
+// Types
 import { User } from 'app/types';
-import ResetStyles from './ResetStyles';
-import IndicatorsContainer from './IndicatorsContainer';
-import NoOptionsMessage from './NoOptionsMessage';
 
 export interface Props {
   onSelected: (user: User) => void;
@@ -35,13 +39,18 @@ export class UserPicker extends Component<Props, State> {
     const backendSrv = getBackendSrv();
     this.setState({ isLoading: true });
 
+    if (_.isNil(query)) {
+      query = '';
+    }
+
     return backendSrv
       .get(`/api/org/users?query=${query}&limit=10`)
       .then(result => {
         return result.map(user => ({
           id: user.userId,
+          value: user.userId,
           label: user.login === user.email ? user.login : `${user.login} - ${user.email}`,
-          avatarUrl: user.avatarUrl,
+          imgUrl: user.avatarUrl,
           login: user.login,
         }));
       })
@@ -57,24 +66,13 @@ export class UserPicker extends Component<Props, State> {
     return (
       <div className="user-picker">
         <AsyncSelect
-          classNamePrefix={`gf-form-select-box`}
-          isMulti={false}
+          className={className}
           isLoading={isLoading}
           defaultOptions={true}
           loadOptions={this.debouncedSearch}
           onChange={onSelected}
-          className={`gf-form-input gf-form-input--form-dropdown ${className || ''}`}
-          styles={ResetStyles}
-          components={{
-            Option: PickerOption,
-            IndicatorsContainer,
-            NoOptionsMessage,
-          }}
           placeholder="Select user"
-          loadingMessage={() => 'Loading...'}
           noOptionsMessage={() => 'No users found'}
-          getOptionValue={i => i.id}
-          getOptionLabel={i => i.label}
         />
       </div>
     );
diff --git a/public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap b/public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap
new file mode 100644
index 00000000000..2136c22b1c6
--- /dev/null
+++ b/public/app/core/components/Select/__snapshots__/PickerOption.test.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PickerOption renders correctly 1`] = `
+<div>
+  <div
+    className="gf-form-select-box__desc-option"
+  >
+    <img
+      className="gf-form-select-box__desc-option__img"
+      src="url/to/avatar"
+    />
+    <div
+      className="gf-form-select-box__desc-option__body"
+    >
+      <div>
+        Model title
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/TeamPicker.test.tsx.snap
similarity index 66%
rename from public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap
rename to public/app/core/components/Select/__snapshots__/TeamPicker.test.tsx.snap
index 011811f21ad..f0bcfc6ba54 100644
--- a/public/app/core/components/Picker/__snapshots__/TeamPicker.test.tsx.snap
+++ b/public/app/core/components/Select/__snapshots__/TeamPicker.test.tsx.snap
@@ -57,35 +57,6 @@ exports[`TeamPicker renders correctly 1`] = `
                 }
               }
               tabIndex="0"
-              theme={
-                Object {
-                  "borderRadius": 4,
-                  "colors": Object {
-                    "danger": "#DE350B",
-                    "dangerLight": "#FFBDAD",
-                    "neutral0": "hsl(0, 0%, 100%)",
-                    "neutral10": "hsl(0, 0%, 90%)",
-                    "neutral20": "hsl(0, 0%, 80%)",
-                    "neutral30": "hsl(0, 0%, 70%)",
-                    "neutral40": "hsl(0, 0%, 60%)",
-                    "neutral5": "hsl(0, 0%, 95%)",
-                    "neutral50": "hsl(0, 0%, 50%)",
-                    "neutral60": "hsl(0, 0%, 40%)",
-                    "neutral70": "hsl(0, 0%, 30%)",
-                    "neutral80": "hsl(0, 0%, 20%)",
-                    "neutral90": "hsl(0, 0%, 10%)",
-                    "primary": "#2684FF",
-                    "primary25": "#DEEBFF",
-                    "primary50": "#B2D4FF",
-                    "primary75": "#4C9AFF",
-                  },
-                  "spacing": Object {
-                    "baseUnit": 4,
-                    "controlHeight": 38,
-                    "menuGutter": 8,
-                  },
-                }
-              }
               type="text"
               value=""
             />
diff --git a/public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap
similarity index 66%
rename from public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap
rename to public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap
index 3e23bd435b1..37a485747dd 100644
--- a/public/app/core/components/Picker/__snapshots__/UserPicker.test.tsx.snap
+++ b/public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap
@@ -57,35 +57,6 @@ exports[`UserPicker renders correctly 1`] = `
                 }
               }
               tabIndex="0"
-              theme={
-                Object {
-                  "borderRadius": 4,
-                  "colors": Object {
-                    "danger": "#DE350B",
-                    "dangerLight": "#FFBDAD",
-                    "neutral0": "hsl(0, 0%, 100%)",
-                    "neutral10": "hsl(0, 0%, 90%)",
-                    "neutral20": "hsl(0, 0%, 80%)",
-                    "neutral30": "hsl(0, 0%, 70%)",
-                    "neutral40": "hsl(0, 0%, 60%)",
-                    "neutral5": "hsl(0, 0%, 95%)",
-                    "neutral50": "hsl(0, 0%, 50%)",
-                    "neutral60": "hsl(0, 0%, 40%)",
-                    "neutral70": "hsl(0, 0%, 30%)",
-                    "neutral80": "hsl(0, 0%, 20%)",
-                    "neutral90": "hsl(0, 0%, 10%)",
-                    "primary": "#2684FF",
-                    "primary25": "#DEEBFF",
-                    "primary50": "#B2D4FF",
-                    "primary75": "#4C9AFF",
-                  },
-                  "spacing": Object {
-                    "baseUnit": 4,
-                    "controlHeight": 38,
-                    "menuGutter": 8,
-                  },
-                }
-              }
               type="text"
               value=""
             />
diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
index 098cbe16ab8..d41626d9a2f 100644
--- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx
+++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 
 import { Label } from 'app/core/components/Label/Label';
-import SimplePicker from 'app/core/components/Picker/SimplePicker';
+import Select from 'app/core/components/Select/Select';
 import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
 
 import { DashboardSearchHit } from 'app/types';
@@ -17,12 +17,12 @@ export interface State {
   dashboards: DashboardSearchHit[];
 }
 
-const themes = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }];
+const themes = [{ value: '', label: 'Default' }, { value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }];
 
 const timezones = [
-  { value: '', text: 'Default' },
-  { value: 'browser', text: 'Local browser time' },
-  { value: 'utc', text: 'UTC' },
+  { value: '', label: 'Default' },
+  { value: 'browser', label: 'Local browser time' },
+  { value: 'utc', label: 'UTC' },
 ];
 
 export class SharedPreferences extends PureComponent<Props, State> {
@@ -91,12 +91,11 @@ export class SharedPreferences extends PureComponent<Props, State> {
         <h3 className="page-heading">Preferences</h3>
         <div className="gf-form">
           <span className="gf-form-label width-11">UI Theme</span>
-          <SimplePicker
+          <Select
+            isSearchable={false}
             value={themes.find(item => item.value === theme)}
             options={themes}
-            getOptionValue={i => i.value}
-            getOptionLabel={i => i.text}
-            onSelected={theme => this.onThemeChanged(theme.value)}
+            onChange={theme => this.onThemeChanged(theme.value)}
             width={20}
           />
         </div>
@@ -107,11 +106,11 @@ export class SharedPreferences extends PureComponent<Props, State> {
           >
             Home Dashboard
           </Label>
-          <SimplePicker
+          <Select
             value={dashboards.find(dashboard => dashboard.id === homeDashboardId)}
             getOptionValue={i => i.id}
             getOptionLabel={i => i.title}
-            onSelected={(dashboard: DashboardSearchHit) => this.onHomeDashboardChanged(dashboard.id)}
+            onChange={(dashboard: DashboardSearchHit) => this.onHomeDashboardChanged(dashboard.id)}
             options={dashboards}
             placeholder="Chose default dashboard"
             width={20}
@@ -119,11 +118,10 @@ export class SharedPreferences extends PureComponent<Props, State> {
         </div>
         <div className="gf-form">
           <label className="gf-form-label width-11">Timezone</label>
-          <SimplePicker
+          <Select
+            isSearchable={false}
             value={timezones.find(item => item.value === timezone)}
-            getOptionValue={i => i.value}
-            getOptionLabel={i => i.text}
-            onSelected={timezone => this.onTimeZoneChanged(timezone.value)}
+            onChange={timezone => this.onTimeZoneChanged(timezone.value)}
             options={timezones}
             width={20}
           />
diff --git a/public/app/core/components/Switch/Switch.tsx b/public/app/core/components/Switch/Switch.tsx
index a4bb73a291b..d53a3d68878 100644
--- a/public/app/core/components/Switch/Switch.tsx
+++ b/public/app/core/components/Switch/Switch.tsx
@@ -5,8 +5,8 @@ export interface Props {
   label: string;
   checked: boolean;
   labelClass?: string;
-  small?: boolean;
   switchClass?: string;
+  transparent?: boolean;
   onChange: (event) => any;
 }
 
@@ -25,27 +25,20 @@ export class Switch extends PureComponent<Props, State> {
   };
 
   render() {
-    const { labelClass = '', switchClass = '', label, checked, small } = this.props;
+    const { labelClass = '', switchClass = '', label, checked, transparent } = this.props;
+
     const labelId = `check-${this.state.id}`;
-    let labelClassName = `gf-form-label ${labelClass} pointer`;
-    let switchClassName = `gf-form-switch ${switchClass}`;
-    if (small) {
-      labelClassName += ' gf-form-label--small';
-      switchClassName += ' gf-form-switch--small';
-    }
+    const labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`;
+    const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
 
     return (
-      <div className="gf-form">
-        {label && (
-          <label htmlFor={labelId} className={labelClassName}>
-            {label}
-          </label>
-        )}
+      <label htmlFor={labelId} className="gf-form gf-form-switch-container">
+        {label && <div className={labelClassName}>{label}</div>}
         <div className={switchClassName}>
           <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
-          <label htmlFor={labelId} />
+          <span className="gf-form-switch__slider" />
         </div>
-      </div>
+      </label>
     );
   }
 }
diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx
index 004221657ef..4b2de6b1b16 100644
--- a/public/app/core/components/TagFilter/TagFilter.tsx
+++ b/public/app/core/components/TagFilter/TagFilter.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import AsyncSelect from 'react-select/lib/Async';
+import AsyncSelect from '@torkelo/react-select/lib/Async';
+
 import { TagOption } from './TagOption';
 import { TagBadge } from './TagBadge';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
-import { components } from 'react-select';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
+import IndicatorsContainer from 'app/core/components/Select/IndicatorsContainer';
+import NoOptionsMessage from 'app/core/components/Select/NoOptionsMessage';
+import { components } from '@torkelo/react-select';
+import ResetStyles from 'app/core/components/Select/ResetStyles';
 
 export interface Props {
   tags: string[];
diff --git a/public/app/core/components/TagFilter/TagOption.tsx b/public/app/core/components/TagFilter/TagOption.tsx
index e4e91f93c00..9db15aaca0b 100644
--- a/public/app/core/components/TagFilter/TagOption.tsx
+++ b/public/app/core/components/TagFilter/TagOption.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { components } from 'react-select';
+import { components } from '@torkelo/react-select';
 import { OptionProps } from 'react-select/lib/components/Option';
 import { TagBadge } from './TagBadge';
 
diff --git a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index 077d8772393..872f2f28bb8 100644
--- a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -1,43 +1,20 @@
-import React, { SFC, ReactNode, PureComponent, ReactElement } from 'react';
+import React, { SFC, ReactNode, PureComponent } from 'react';
+import Tooltip from 'app/core/components/Tooltip/Tooltip';
 
 interface ToggleButtonGroupProps {
-  onChange: (value) => void;
-  value?: any;
   label?: string;
-  render: (props) => void;
+  children: JSX.Element[];
+  transparent?: boolean;
 }
 
 export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
-  getValues() {
-    const { children } = this.props;
-    return React.Children.toArray(children).map((c: ReactElement<any>) => c.props.value);
-  }
-
-  smallChildren() {
-    const { children } = this.props;
-    return React.Children.toArray(children).every((c: ReactElement<any>) => c.props.className.includes('small'));
-  }
-
-  handleToggle(toggleValue) {
-    const { value, onChange } = this.props;
-    if (value && value === toggleValue) {
-      return;
-    }
-    onChange(toggleValue);
-  }
-
   render() {
-    const { value, label } = this.props;
-    const values = this.getValues();
-    const selectedValue = value || values[0];
-    const labelClassName = `gf-form-label ${this.smallChildren() ? 'small' : ''}`;
+    const { children, label, transparent } = this.props;
 
     return (
       <div className="gf-form">
-        <div className="toggle-button-group">
-          {label && <label className={labelClassName}>{label}</label>}
-          {this.props.render({ selectedValue, onChange: this.handleToggle.bind(this) })}
-        </div>
+        {label && <label className={`gf-form-label ${transparent ? 'gf-form-label--transparent' : ''}`}>{label}</label>}
+        <div className={`toggle-button-group ${transparent ? 'toggle-button-group--transparent' : ''}`}>{children}</div>
       </div>
     );
   }
@@ -49,15 +26,15 @@ interface ToggleButtonProps {
   value: any;
   className?: string;
   children: ReactNode;
-  title?: string;
+  tooltip?: string;
 }
 
 export const ToggleButton: SFC<ToggleButtonProps> = ({
   children,
   selected,
   className = '',
-  title = null,
-  value,
+  value = null,
+  tooltip,
   onChange,
 }) => {
   const handleChange = event => {
@@ -68,9 +45,15 @@ export const ToggleButton: SFC<ToggleButtonProps> = ({
   };
 
   const btnClassName = `btn ${className} ${selected ? 'active' : ''}`;
-  return (
-    <button className={btnClassName} onClick={handleChange} title={title}>
+  const button = (
+    <button className={btnClassName} onClick={handleChange}>
       <span>{children}</span>
     </button>
   );
+
+  if (tooltip) {
+    return <Tooltip content={tooltip}>{button}</Tooltip>;
+  } else {
+    return button;
+  }
 };
diff --git a/public/app/core/components/Tooltip/Popover.tsx b/public/app/core/components/Tooltip/Popover.tsx
index ee86d07fb53..62397243c1c 100644
--- a/public/app/core/components/Tooltip/Popover.tsx
+++ b/public/app/core/components/Tooltip/Popover.tsx
@@ -1,34 +1,19 @@
-import React from 'react';
-import withTooltip from './withTooltip';
-import { Target } from 'react-popper';
-
-interface PopoverProps {
-  tooltipSetState: (prevState: object) => void;
-}
-
-class Popover extends React.Component<PopoverProps, any> {
-  constructor(props) {
-    super(props);
-    this.toggleTooltip = this.toggleTooltip.bind(this);
-  }
-
-  toggleTooltip() {
-    const { tooltipSetState } = this.props;
-    tooltipSetState(prevState => {
-      return {
-        ...prevState,
-        show: !prevState.show,
-      };
-    });
-  }
+import React, { PureComponent } from 'react';
+import Popper from './Popper';
+import withPopper, { UsingPopperProps } from './withPopper';
 
+class Popover extends PureComponent<UsingPopperProps> {
   render() {
+    const { children, hidePopper, showPopper, className, ...restProps } = this.props;
+
+    const togglePopper = restProps.show ? hidePopper : showPopper;
+
     return (
-      <Target className="popper__target" onClick={this.toggleTooltip}>
-        {this.props.children}
-      </Target>
+      <div className={`popper__manager ${className}`} onClick={togglePopper}>
+        <Popper {...restProps}>{children}</Popper>
+      </div>
     );
   }
 }
 
-export default withTooltip(Popover);
+export default withPopper(Popover);
diff --git a/public/app/core/components/Tooltip/Popper.tsx b/public/app/core/components/Tooltip/Popper.tsx
new file mode 100644
index 00000000000..36cf0fe837e
--- /dev/null
+++ b/public/app/core/components/Tooltip/Popper.tsx
@@ -0,0 +1,72 @@
+import React, { PureComponent } from 'react';
+import Portal from 'app/core/components/Portal/Portal';
+import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
+import Transition from 'react-transition-group/Transition';
+
+const defaultTransitionStyles = {
+  transition: 'opacity 200ms linear',
+  opacity: 0,
+};
+
+const transitionStyles = {
+  exited: { opacity: 0 },
+  entering: { opacity: 0 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 0 },
+};
+
+interface Props {
+  renderContent: (content: any) => any;
+  show: boolean;
+  placement?: any;
+  content: string | ((props: any) => JSX.Element);
+  refClassName?: string;
+}
+
+class Popper extends PureComponent<Props> {
+  render() {
+    const { children, renderContent, show, placement, refClassName } = this.props;
+    const { content } = this.props;
+
+    return (
+      <Manager>
+        <Reference>
+          {({ ref }) => (
+            <div className={`popper_ref ${refClassName || ''}`} ref={ref}>
+              {children}
+            </div>
+          )}
+        </Reference>
+        <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
+          {transitionState => (
+            <Portal>
+              <ReactPopper placement={placement}>
+                {({ ref, style, placement, arrowProps }) => {
+                  return (
+                    <div
+                      ref={ref}
+                      style={{
+                        ...style,
+                        ...defaultTransitionStyles,
+                        ...transitionStyles[transitionState],
+                      }}
+                      data-placement={placement}
+                      className="popper"
+                    >
+                      <div className="popper__background">
+                        {renderContent(content)}
+                        <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
+                      </div>
+                    </div>
+                  );
+                }}
+              </ReactPopper>
+            </Portal>
+          )}
+        </Transition>
+      </Manager>
+    );
+  }
+}
+
+export default Popper;
diff --git a/public/app/core/components/Tooltip/Tooltip.tsx b/public/app/core/components/Tooltip/Tooltip.tsx
index 62be658f7cf..795da94a03c 100644
--- a/public/app/core/components/Tooltip/Tooltip.tsx
+++ b/public/app/core/components/Tooltip/Tooltip.tsx
@@ -1,36 +1,17 @@
 import React, { PureComponent } from 'react';
-import withTooltip from './withTooltip';
-import { Target } from 'react-popper';
-
-interface Props {
-  tooltipSetState: (prevState: object) => void;
-}
-
-class Tooltip extends PureComponent<Props> {
-  showTooltip = () => {
-    const { tooltipSetState } = this.props;
-
-    tooltipSetState(prevState => ({
-      ...prevState,
-      show: true,
-    }));
-  };
-
-  hideTooltip = () => {
-    const { tooltipSetState } = this.props;
-    tooltipSetState(prevState => ({
-      ...prevState,
-      show: false,
-    }));
-  };
+import Popper from './Popper';
+import withPopper, { UsingPopperProps } from './withPopper';
 
+class Tooltip extends PureComponent<UsingPopperProps> {
   render() {
+    const { children, hidePopper, showPopper, className, ...restProps } = this.props;
+
     return (
-      <Target className="popper__target" onMouseOver={this.showTooltip} onMouseOut={this.hideTooltip}>
-        {this.props.children}
-      </Target>
+      <div className={`popper__manager ${className}`} onMouseEnter={showPopper} onMouseLeave={hidePopper}>
+        <Popper {...restProps}>{children}</Popper>
+      </div>
     );
   }
 }
 
-export default withTooltip(Tooltip);
+export default withPopper(Tooltip);
diff --git a/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap b/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
index 12ec960a017..b36a4fe9af9 100644
--- a/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
+++ b/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`Popover renders correctly 1`] = `
 <div
   className="popper__manager test-class"
+  onClick={[Function]}
 >
   <div
-    className="popper__target"
-    onClick={[Function]}
+    className="popper_ref "
   >
     <button>
       Button with Popover
diff --git a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index 0ec9bdd86fe..c7d680049f4 100644
--- a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -3,11 +3,11 @@
 exports[`Tooltip renders correctly 1`] = `
 <div
   className="popper__manager test-class"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
 >
   <div
-    className="popper__target"
-    onMouseOut={[Function]}
-    onMouseOver={[Function]}
+    className="popper_ref "
   >
     <a
       href="http://www.grafana.com"
diff --git a/public/app/core/components/Tooltip/withPopper.tsx b/public/app/core/components/Tooltip/withPopper.tsx
new file mode 100644
index 00000000000..4ba05937531
--- /dev/null
+++ b/public/app/core/components/Tooltip/withPopper.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+
+export interface UsingPopperProps {
+  showPopper: (prevState: object) => void;
+  hidePopper: (prevState: object) => void;
+  renderContent: (content: any) => any;
+  show: boolean;
+  placement?: string;
+  content: string | ((props: any) => JSX.Element);
+  className?: string;
+  refClassName?: string;
+}
+
+interface Props {
+  placement?: string;
+  className?: string;
+  refClassName?: string;
+  content: string | ((props: any) => JSX.Element);
+}
+
+interface State {
+  placement: string;
+  show: boolean;
+}
+
+export default function withPopper(WrappedComponent) {
+  return class extends React.Component<Props, State> {
+    constructor(props) {
+      super(props);
+      this.setState = this.setState.bind(this);
+      this.state = {
+        placement: this.props.placement || 'auto',
+        show: false,
+      };
+    }
+
+    componentWillReceiveProps(nextProps) {
+      if (nextProps.placement && nextProps.placement !== this.state.placement) {
+        this.setState(prevState => {
+          return {
+            ...prevState,
+            placement: nextProps.placement,
+          };
+        });
+      }
+    }
+
+    showPopper = () => {
+      this.setState(prevState => ({
+        ...prevState,
+        show: true,
+      }));
+    };
+
+    hidePopper = () => {
+      this.setState(prevState => ({
+        ...prevState,
+        show: false,
+      }));
+    };
+
+    renderContent(content) {
+      if (typeof content === 'function') {
+        // If it's a function we assume it's a React component
+        const ReactComponent = content;
+        return <ReactComponent />;
+      }
+      return content;
+    }
+
+    render() {
+      const { show, placement } = this.state;
+      const className = this.props.className || '';
+
+      return (
+        <WrappedComponent
+          {...this.props}
+          showPopper={this.showPopper}
+          hidePopper={this.hidePopper}
+          renderContent={this.renderContent}
+          show={show}
+          placement={placement}
+          className={className}
+        />
+      );
+    }
+  };
+}
diff --git a/public/app/core/components/Tooltip/withTooltip.tsx b/public/app/core/components/Tooltip/withTooltip.tsx
deleted file mode 100644
index a09de67622e..00000000000
--- a/public/app/core/components/Tooltip/withTooltip.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import { Manager, Popper, Arrow } from 'react-popper';
-
-interface IwithTooltipProps {
-  placement?: string;
-  content: string | ((props: any) => JSX.Element);
-  className?: string;
-}
-
-export default function withTooltip(WrappedComponent) {
-  return class extends React.Component<IwithTooltipProps, any> {
-    constructor(props) {
-      super(props);
-
-      this.setState = this.setState.bind(this);
-      this.state = {
-        placement: this.props.placement || 'auto',
-        show: false,
-      };
-    }
-
-    componentWillReceiveProps(nextProps) {
-      if (nextProps.placement && nextProps.placement !== this.state.placement) {
-        this.setState(prevState => {
-          return {
-            ...prevState,
-            placement: nextProps.placement,
-          };
-        });
-      }
-    }
-
-    renderContent(content) {
-      if (typeof content === 'function') {
-        // If it's a function we assume it's a React component
-        const ReactComponent = content;
-        return <ReactComponent />;
-      }
-      return content;
-    }
-
-    render() {
-      const { content, className } = this.props;
-
-      return (
-        <Manager className={`popper__manager ${className || ''}`}>
-          <WrappedComponent {...this.props} tooltipSetState={this.setState} />
-          {this.state.show ? (
-            <Popper placement={this.state.placement} className="popper">
-              {this.renderContent(content)}
-              <Arrow className="popper__arrow" />
-            </Popper>
-          ) : null}
-        </Manager>
-      );
-    }
-  };
-}
diff --git a/public/app/core/components/code_editor/code_editor.ts b/public/app/core/components/code_editor/code_editor.ts
index 50ff55f3083..ca9023e8657 100644
--- a/public/app/core/components/code_editor/code_editor.ts
+++ b/public/app/core/components/code_editor/code_editor.ts
@@ -50,7 +50,7 @@ const DEFAULT_THEME_LIGHT = 'ace/theme/textmate';
 const DEFAULT_MODE = 'text';
 const DEFAULT_MAX_LINES = 10;
 const DEFAULT_TAB_SIZE = 2;
-const DEFAULT_BEHAVIOURS = true;
+const DEFAULT_BEHAVIORS = true;
 const DEFAULT_SNIPPETS = true;
 
 const editorTemplate = `<div></div>`;
@@ -61,7 +61,7 @@ function link(scope, elem, attrs) {
   const maxLines = attrs.maxLines || DEFAULT_MAX_LINES;
   const showGutter = attrs.showGutter !== undefined;
   const tabSize = attrs.tabSize || DEFAULT_TAB_SIZE;
-  const behavioursEnabled = attrs.behavioursEnabled ? attrs.behavioursEnabled === 'true' : DEFAULT_BEHAVIOURS;
+  const behavioursEnabled = attrs.behavioursEnabled ? attrs.behavioursEnabled === 'true' : DEFAULT_BEHAVIORS;
   const snippetsEnabled = attrs.snippetsEnabled ? attrs.snippetsEnabled === 'true' : DEFAULT_SNIPPETS;
 
   // Initialize editor
@@ -84,7 +84,7 @@ function link(scope, elem, attrs) {
   // disable depreacation warning
   codeEditor.$blockScrolling = Infinity;
   // Padding hacks
-  (codeEditor.renderer as any).setScrollMargin(15, 15);
+  (codeEditor.renderer as any).setScrollMargin(10, 10);
   codeEditor.renderer.setPadding(10);
 
   setThemeMode();
diff --git a/public/app/core/components/colorpicker/ColorPicker.tsx b/public/app/core/components/colorpicker/ColorPicker.tsx
index 6e5083b6d6b..9541001b0a8 100644
--- a/public/app/core/components/colorpicker/ColorPicker.tsx
+++ b/public/app/core/components/colorpicker/ColorPicker.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import $ from 'jquery';
 import Drop from 'tether-drop';
 import { ColorPickerPopover } from './ColorPickerPopover';
 import { react2AngularDirective } from 'app/core/utils/react2angular';
@@ -11,29 +10,17 @@ export interface Props {
 }
 
 export class ColorPicker extends React.Component<Props, any> {
-  pickerElem: any;
+  pickerElem: HTMLElement;
   colorPickerDrop: any;
 
-  constructor(props) {
-    super(props);
-    this.openColorPicker = this.openColorPicker.bind(this);
-    this.closeColorPicker = this.closeColorPicker.bind(this);
-    this.setPickerElem = this.setPickerElem.bind(this);
-    this.onColorSelect = this.onColorSelect.bind(this);
-  }
-
-  setPickerElem(elem) {
-    this.pickerElem = $(elem);
-  }
-
-  openColorPicker() {
+  openColorPicker = () => {
     const dropContent = <ColorPickerPopover color={this.props.color} onColorSelect={this.onColorSelect} />;
 
     const dropContentElem = document.createElement('div');
     ReactDOM.render(dropContent, dropContentElem);
 
     const drop = new Drop({
-      target: this.pickerElem[0],
+      target: this.pickerElem,
       content: dropContentElem,
       position: 'top center',
       classes: 'drop-popover',
@@ -48,23 +35,23 @@ export class ColorPicker extends React.Component<Props, any> {
 
     this.colorPickerDrop = drop;
     this.colorPickerDrop.open();
-  }
+  };
 
-  closeColorPicker() {
+  closeColorPicker = () => {
     setTimeout(() => {
       if (this.colorPickerDrop && this.colorPickerDrop.tether) {
         this.colorPickerDrop.destroy();
       }
     }, 100);
-  }
+  };
 
-  onColorSelect(color) {
+  onColorSelect = color => {
     this.props.onChange(color);
-  }
+  };
 
   render() {
     return (
-      <div className="sp-replacer sp-light" onClick={this.openColorPicker} ref={this.setPickerElem}>
+      <div className="sp-replacer sp-light" onClick={this.openColorPicker} ref={element => (this.pickerElem = element)}>
         <div className="sp-preview">
           <div className="sp-preview-inner" style={{ backgroundColor: this.props.color }} />
         </div>
diff --git a/public/app/core/components/json_explorer/helpers.ts b/public/app/core/components/json_explorer/helpers.ts
index c039d818281..65e7502a810 100644
--- a/public/app/core/components/json_explorer/helpers.ts
+++ b/public/app/core/components/json_explorer/helpers.ts
@@ -1,5 +1,5 @@
 // Based on work https://github.com/mohsen1/json-formatter-js
-// Licence MIT, Copyright (c) 2015 Mohsen Azimi
+// License MIT, Copyright (c) 2015 Mohsen Azimi
 
 /*
  * Escapes `"` characters from string
diff --git a/public/app/core/components/json_explorer/json_explorer.ts b/public/app/core/components/json_explorer/json_explorer.ts
index 9a344d3195b..228154f9884 100644
--- a/public/app/core/components/json_explorer/json_explorer.ts
+++ b/public/app/core/components/json_explorer/json_explorer.ts
@@ -1,5 +1,5 @@
 // Based on work https://github.com/mohsen1/json-formatter-js
-// Licence MIT, Copyright (c) 2015 Mohsen Azimi
+// License MIT, Copyright (c) 2015 Mohsen Azimi
 
 import { isObject, getObjectName, getType, getValuePreview, cssClass, createElement } from './helpers';
 
diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.html b/public/app/core/components/manage_dashboards/manage_dashboards.html
index 92946b866a1..6fbd65afaf5 100644
--- a/public/app/core/components/manage_dashboards/manage_dashboards.html
+++ b/public/app/core/components/manage_dashboards/manage_dashboards.html
@@ -64,10 +64,10 @@
 
   <div class="search-results" ng-show="ctrl.sections.length > 0">
     <div class="search-results-filter-row">
-      <gf-form-switch
+      <gf-form-checkbox
         on-change="ctrl.onSelectAllChanged()"
         checked="ctrl.selectAllChecked"
-        switch-class="gf-form-switch--transparent gf-form-switch--search-result-filter-row__checkbox"
+        switch-class="gf-form-checkbox--transparent"
       />
       <div class="search-results-filter-row__filters">
         <div class="gf-form-select-wrapper" ng-show="!(ctrl.canMove || ctrl.canDelete)">
diff --git a/public/app/core/components/search/search_results.html b/public/app/core/components/search/search_results.html
index 45258ded652..92850e0ea5d 100644
--- a/public/app/core/components/search/search_results.html
+++ b/public/app/core/components/search/search_results.html
@@ -1,12 +1,12 @@
 <div ng-repeat="section in ctrl.results" class="search-section">
   <div class="search-section__header pointer" ng-hide="section.hideHeader" ng-class="{'selected': section.selected}" ng-click="ctrl.toggleFolderExpand(section)">
-    <div ng-click="ctrl.toggleSelection(section, $event)">
-      <gf-form-switch
+    <div ng-click="ctrl.toggleSelection(section, $event)" class="center-vh">
+      <gf-form-checkbox
          ng-show="ctrl.editable"
          on-change="ctrl.selectionChanged($event)"
          checked="section.checked"
-         switch-class="gf-form-switch--transparent gf-form-switch--search-result__section">
-      </gf-form-switch>
+         switch-class="gf-form-checkbox--transparent">
+      </gf-form-checkbox>
     </div>
     <i class="search-section__header__icon" ng-class="section.icon"></i>
     <span class="search-section__header__text">{{::section.title}}</span>
@@ -21,13 +21,13 @@
 
   <div ng-if="section.expanded">
     <a ng-repeat="item in section.items" class="search-item search-item--indent" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}" >
-      <div ng-click="ctrl.toggleSelection(item, $event)">
-        <gf-form-switch
+      <div ng-click="ctrl.toggleSelection(item, $event)" class="center-vh">
+        <gf-form-checkbox
            ng-show="ctrl.editable"
            on-change="ctrl.selectionChanged()"
            checked="item.checked"
-           switch-class="gf-form-switch--transparent gf-form-switch--search-result__item">
-        </gf-form-switch>
+           switch-class="gf-form-checkbox--transparent">
+        </gf-form-checkbox>
       </div>
       <span class="search-item__icon">
         <i class="gicon mini gicon-dashboard-list"></i>
diff --git a/public/app/core/components/sidemenu/BottomNavLinks.test.tsx b/public/app/core/components/sidemenu/BottomNavLinks.test.tsx
index 8eaed4ca264..b52e5311dc5 100644
--- a/public/app/core/components/sidemenu/BottomNavLinks.test.tsx
+++ b/public/app/core/components/sidemenu/BottomNavLinks.test.tsx
@@ -36,7 +36,7 @@ describe('Render', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render organisation switcher', () => {
+  it('should render organization switcher', () => {
     const wrapper = setup({
       link: {
         showOrgSwitcher: true,
diff --git a/public/app/core/components/sidemenu/__snapshots__/BottomNavLinks.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/BottomNavLinks.test.tsx.snap
index f3181b617ad..ae8c9c753aa 100644
--- a/public/app/core/components/sidemenu/__snapshots__/BottomNavLinks.test.tsx.snap
+++ b/public/app/core/components/sidemenu/__snapshots__/BottomNavLinks.test.tsx.snap
@@ -73,7 +73,7 @@ exports[`Render should render component 1`] = `
 </div>
 `;
 
-exports[`Render should render organisation switcher 1`] = `
+exports[`Render should render organization switcher 1`] = `
 <div
   className="sidemenu-item dropdown dropup"
 >
diff --git a/public/app/core/components/switch.ts b/public/app/core/components/switch.ts
index d8c1da4e345..4a1d3ff804f 100644
--- a/public/app/core/components/switch.ts
+++ b/public/app/core/components/switch.ts
@@ -1,16 +1,33 @@
 import coreModule from 'app/core/core_module';
 
 const template = `
-<label for="check-{{ctrl.id}}" class="gf-form-label {{ctrl.labelClass}} pointer" ng-show="ctrl.label">
-  {{ctrl.label}}
-  <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
-    {{ctrl.tooltip}}
-  </info-popover>
+<label for="check-{{ctrl.id}}" class="gf-form-switch-container">
+  <div class="gf-form-label {{ctrl.labelClass}}" ng-show="ctrl.label">
+    {{ctrl.label}}
+    <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
+      {{ctrl.tooltip}}
+    </info-popover>
+  </div>
+  <div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
+    <input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
+    <span class="gf-form-switch__slider"></span>
+  </div>
+</label>
+`;
+
+const checkboxTemplate = `
+<label for="check-{{ctrl.id}}" class="gf-form-switch-container">
+   <div class="gf-form-label {{ctrl.labelClass}}" ng-show="ctrl.label">
+    {{ctrl.label}}
+    <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
+      {{ctrl.tooltip}}
+    </info-popover>
+  </div>
+  <div class="gf-form-checkbox {{ctrl.switchClass}}" ng-if="ctrl.show">
+    <input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
+    <span class="gf-form-switch__checkbox"></span>
+  </div>
 </label>
-<div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
-  <input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
-  <label for="check-{{ctrl.id}}" data-on="Yes" data-off="No"></label>
-</div>
 `;
 
 export class SwitchCtrl {
@@ -51,4 +68,23 @@ export function switchDirective() {
   };
 }
 
+export function checkboxDirective() {
+  return {
+    restrict: 'E',
+    controller: SwitchCtrl,
+    controllerAs: 'ctrl',
+    bindToController: true,
+    scope: {
+      checked: '=',
+      label: '@',
+      labelClass: '@',
+      tooltip: '@',
+      switchClass: '@',
+      onChange: '&',
+    },
+    template: checkboxTemplate,
+  };
+}
+
 coreModule.directive('gfFormSwitch', switchDirective);
+coreModule.directive('gfFormCheckbox', checkboxDirective);
diff --git a/public/app/core/constants.ts b/public/app/core/constants.ts
index 00981156614..7d295b27726 100644
--- a/public/app/core/constants.ts
+++ b/public/app/core/constants.ts
@@ -11,3 +11,7 @@ export const LS_PANEL_COPY_KEY = 'panel-copy';
 
 export const DASHBOARD_TOOLBAR_HEIGHT = 55;
 export const DASHBOARD_TOP_PADDING = 20;
+
+export const PANEL_HEADER_HEIGHT = 27;
+export const PANEL_BORDER = 2;
+export const PANEL_OPTIONS_KEY_PREFIX = 'options-';
diff --git a/public/app/core/directives/dash_class.ts b/public/app/core/directives/dash_class.ts
index 37124eb7d4b..1fb93d29cf3 100644
--- a/public/app/core/directives/dash_class.ts
+++ b/public/app/core/directives/dash_class.ts
@@ -1,3 +1,4 @@
+import $ from 'jquery';
 import _ from 'lodash';
 import coreModule from '../core_module';
 
@@ -5,18 +6,20 @@ import coreModule from '../core_module';
 function dashClass($timeout) {
   return {
     link: ($scope, elem) => {
+      const body = $('body');
+
       $scope.ctrl.dashboard.events.on('view-mode-changed', panel => {
         console.log('view-mode-changed', panel.fullscreen);
         if (panel.fullscreen) {
-          elem.addClass('panel-in-fullscreen');
+          body.addClass('panel-in-fullscreen');
         } else {
           $timeout(() => {
-            elem.removeClass('panel-in-fullscreen');
+            body.removeClass('panel-in-fullscreen');
           });
         }
       });
 
-      elem.toggleClass('panel-in-fullscreen', $scope.ctrl.dashboard.meta.fullscreen === true);
+      body.toggleClass('panel-in-fullscreen', $scope.ctrl.dashboard.meta.fullscreen === true);
 
       $scope.$watch('ctrl.dashboardViewState.state.editview', newValue => {
         if (newValue) {
diff --git a/public/app/core/directives/dropdown_typeahead.ts b/public/app/core/directives/dropdown_typeahead.ts
index cdba0f3e3c2..a4bed4fe2b7 100644
--- a/public/app/core/directives/dropdown_typeahead.ts
+++ b/public/app/core/directives/dropdown_typeahead.ts
@@ -12,7 +12,7 @@ export function dropdownTypeahead($compile) {
   const buttonTemplate =
     '<a class="gf-form-label tight-form-func dropdown-toggle"' +
     ' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
-    ' data-placement="top"><i class="fa fa-plus"></i></a>';
+    ' ><i class="fa fa-plus"></i></a>';
 
   return {
     scope: {
@@ -130,7 +130,7 @@ export function dropdownTypeahead2($compile) {
   const buttonTemplate =
     '<a class="gf-form-input dropdown-toggle"' +
     ' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
-    ' data-placement="top"><i class="fa fa-plus"></i></a>';
+    ' ><i class="fa fa-plus"></i></a>';
 
   return {
     scope: {
diff --git a/public/app/core/reducers/location.ts b/public/app/core/reducers/location.ts
index c9fe478dd9d..a42bd813782 100644
--- a/public/app/core/reducers/location.ts
+++ b/public/app/core/reducers/location.ts
@@ -18,6 +18,7 @@ export const locationReducer = (state = initialState, action: Action): LocationS
 
       if (action.payload.partial) {
         query = _.defaults(query, state.query);
+        query = _.omitBy(query, _.isNull);
       }
 
       return {
diff --git a/public/app/core/services/AngularLoader.ts b/public/app/core/services/AngularLoader.ts
index e3a7dec4351..54dd9a35767 100644
--- a/public/app/core/services/AngularLoader.ts
+++ b/public/app/core/services/AngularLoader.ts
@@ -4,6 +4,8 @@ import _ from 'lodash';
 
 export interface AngularComponent {
   destroy();
+  digest();
+  getScope();
 }
 
 export class AngularLoader {
@@ -24,6 +26,12 @@ export class AngularLoader {
         scope.$destroy();
         compiledElem.remove();
       },
+      digest: () => {
+        scope.$digest();
+      },
+      getScope: () => {
+        return scope;
+      },
     };
   }
 }
diff --git a/public/app/core/services/backend_srv.ts b/public/app/core/services/backend_srv.ts
index 144567efeb9..854169ad4b0 100644
--- a/public/app/core/services/backend_srv.ts
+++ b/public/app/core/services/backend_srv.ts
@@ -5,7 +5,7 @@ import { DashboardModel } from 'app/features/dashboard/dashboard_model';
 
 export class BackendSrv {
   private inFlightRequests = {};
-  private HTTP_REQUEST_CANCELLED = -1;
+  private HTTP_REQUEST_CANCELED = -1;
   private noBackendCache: boolean;
 
   /** @ngInject */
@@ -178,7 +178,7 @@ export class BackendSrv {
         return response;
       })
       .catch(err => {
-        if (err.status === this.HTTP_REQUEST_CANCELLED) {
+        if (err.status === this.HTTP_REQUEST_CANCELED) {
           throw { err, cancelled: true };
         }
 
diff --git a/public/app/core/services/bridge_srv.ts b/public/app/core/services/bridge_srv.ts
index 1c91673495d..37f71946364 100644
--- a/public/app/core/services/bridge_srv.ts
+++ b/public/app/core/services/bridge_srv.ts
@@ -1,6 +1,6 @@
 import coreModule from 'app/core/core_module';
 import appEvents from 'app/core/app_events';
-import { store } from 'app/store/configureStore';
+import { store } from 'app/store/store';
 import locationUtil from 'app/core/utils/location_util';
 import { updateLocation } from 'app/core/actions';
 
diff --git a/public/app/core/services/search_srv.ts b/public/app/core/services/search_srv.ts
index aa5e146530b..22d33921ebd 100644
--- a/public/app/core/services/search_srv.ts
+++ b/public/app/core/services/search_srv.ts
@@ -31,7 +31,7 @@ export class SearchSrv {
   }
 
   private queryForRecentDashboards() {
-    const dashIds = _.take(impressionSrv.getDashboardOpened(), 5);
+    const dashIds = _.take(impressionSrv.getDashboardOpened(), 30);
     if (dashIds.length === 0) {
       return Promise.resolve([]);
     }
@@ -70,7 +70,7 @@ export class SearchSrv {
       return Promise.resolve();
     }
 
-    return this.backendSrv.search({ starred: true, limit: 5 }).then(result => {
+    return this.backendSrv.search({ starred: true, limit: 30 }).then(result => {
       if (result.length > 0) {
         sections['starred'] = {
           title: 'Starred',
diff --git a/public/app/core/services/timer.ts b/public/app/core/services/timer.ts
index 8052b3f2e2c..8234b6288d4 100644
--- a/public/app/core/services/timer.ts
+++ b/public/app/core/services/timer.ts
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import coreModule from 'app/core/core_module';
 
 // This service really just tracks a list of $timeout promises to give us a
-// method for cancelling them all when we need to
+// method for canceling them all when we need to
 export class Timer {
   timers = [];
 
diff --git a/public/app/core/specs/file_export.test.ts b/public/app/core/specs/file_export.test.ts
index 52ec4ccea19..98f5a5be742 100644
--- a/public/app/core/specs/file_export.test.ts
+++ b/public/app/core/specs/file_export.test.ts
@@ -73,6 +73,7 @@ describe('file_export', () => {
         ],
         rows: [
           [123, 'some_string', 1.234, true],
+          [1000, 'some_string', 1.234567891, true],
           [0o765, 'some string with " in the middle', 1e-2, false],
           [0o765, 'some string with "" in the middle', 1e-2, false],
           [0o765, 'some string with """ in the middle', 1e-2, false],
@@ -89,6 +90,7 @@ describe('file_export', () => {
       const expectedText =
         '"integer_value";"string_value";"float_value";"boolean_value"\r\n' +
         '123;"some_string";1.234;true\r\n' +
+        '1000;"some_string";1.234567891;true\r\n' +
         '501;"some string with "" in the middle";0.01;false\r\n' +
         '501;"some string with """" in the middle";0.01;false\r\n' +
         '501;"some string with """""" in the middle";0.01;false\r\n' +
diff --git a/public/app/core/table_model.ts b/public/app/core/table_model.ts
index 91a7cd0c1fb..fa7170bed13 100644
--- a/public/app/core/table_model.ts
+++ b/public/app/core/table_model.ts
@@ -40,7 +40,7 @@ export default class TableModel {
     this.rows.sort((a, b) => {
       a = a[options.col];
       b = b[options.col];
-      // Sort null or undefined seperately from comparable values
+      // Sort null or undefined separately from comparable values
       return +(a == null) - +(b == null) || +(a > b) || -(a < b);
     });
 
@@ -86,11 +86,10 @@ export function mergeTablesIntoModel(dst?: TableModel, ...tables: 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];
-    model.rows = [...tables[0].rows];
+    model.columns = tables[0].hasOwnProperty('columns') ? [...tables[0].columns] : [];
+    model.rows = tables[0].hasOwnProperty('rows') ? [...tables[0].rows] : [];
     return model;
   }
 
diff --git a/public/app/core/utils/connectWithReduxStore.tsx b/public/app/core/utils/connectWithReduxStore.tsx
index 92c61db4e77..be91958f8cd 100644
--- a/public/app/core/utils/connectWithReduxStore.tsx
+++ b/public/app/core/utils/connectWithReduxStore.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { store } from '../../store/configureStore';
+import { store } from '../../store/store';
 
 export function connectWithStore(WrappedComponent, ...args) {
   const ConnectedWrappedComponent = connect(...args)(WrappedComponent);
diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts
index 26b6a527d95..f978ec1ef8c 100644
--- a/public/app/core/utils/explore.ts
+++ b/public/app/core/utils/explore.ts
@@ -57,12 +57,19 @@ export async function getExploreUrl(
     }
   }
 
-  if (exploreDatasource && exploreDatasource.meta.explore) {
+  if (panelDatasource) {
     const range = timeSrv.timeRangeForUrl();
-    const state = {
-      ...exploreDatasource.getExploreState(exploreTargets),
-      range,
-    };
+    let state: Partial<ExploreUrlState> = { range };
+    if (exploreDatasource.getExploreState) {
+      state = { ...state, ...exploreDatasource.getExploreState(exploreTargets) };
+    } else {
+      state = {
+        ...state,
+        datasource: panelDatasource.name,
+        queries: exploreTargets.map(t => ({ ...t, datasource: panelDatasource.name })),
+      };
+    }
+
     const exploreState = JSON.stringify(state);
     url = renderUrl('/explore', { state: exploreState });
   }
@@ -151,7 +158,9 @@ export function calculateResultsFromQueryTransactions(
   );
   const tableResult = mergeTablesIntoModel(
     new TableModel(),
-    ...queryTransactions.filter(qt => qt.resultType === 'Table' && qt.done && qt.result).map(qt => qt.result)
+    ...queryTransactions
+      .filter(qt => qt.resultType === 'Table' && qt.done && qt.result && qt.result.columns && qt.result.rows)
+      .map(qt => qt.result)
   );
   const logsResult =
     datasource && datasource.mergeStreams
diff --git a/public/app/core/utils/file_export.ts b/public/app/core/utils/file_export.ts
index 4fbdea0f953..1f999da72a5 100644
--- a/public/app/core/utils/file_export.ts
+++ b/public/app/core/utils/file_export.ts
@@ -41,10 +41,8 @@ function formatSpecialHeader(useExcelHeader) {
 function formatRow(row, addEndRowDelimiter = true) {
   let text = '';
   for (let i = 0; i < row.length; i += 1) {
-    if (isBoolean(row[i]) || isNullOrUndefined(row[i])) {
+    if (isBoolean(row[i]) || isNumber(row[i]) || isNullOrUndefined(row[i])) {
       text += row[i];
-    } else if (isNumber(row[i])) {
-      text += row[i].toLocaleString();
     } else {
       text += `${QUOTE}${csvEscaped(htmlUnescaped(htmlDecoded(row[i])))}${QUOTE}`;
     }
diff --git a/public/app/core/utils/kbn.ts b/public/app/core/utils/kbn.ts
index e0b98cb803c..b8539ea5013 100644
--- a/public/app/core/utils/kbn.ts
+++ b/public/app/core/utils/kbn.ts
@@ -405,7 +405,8 @@ kbn.valueFormats.percentunit = (size, decimals) => {
 };
 
 /* Formats the value to hex. Uses float if specified decimals are not 0.
- * There are two options, one with 0x, and one without */
+ * There are two submenu
+ * , one with 0x, and one without */
 
 kbn.valueFormats.hex = (value, decimals) => {
   if (value == null) {
@@ -483,6 +484,14 @@ kbn.valueFormats.Mbits = kbn.formatBuilders.decimalSIPrefix('bps', 2);
 kbn.valueFormats.GBs = kbn.formatBuilders.decimalSIPrefix('Bs', 3);
 kbn.valueFormats.Gbits = kbn.formatBuilders.decimalSIPrefix('bps', 3);
 
+// Floating Point Operations per Second
+kbn.valueFormats.flops = kbn.formatBuilders.decimalSIPrefix('FLOP/s');
+kbn.valueFormats.mflops = kbn.formatBuilders.decimalSIPrefix('FLOP/s', 2);
+kbn.valueFormats.gflops = kbn.formatBuilders.decimalSIPrefix('FLOP/s', 3);
+kbn.valueFormats.tflops = kbn.formatBuilders.decimalSIPrefix('FLOP/s', 4);
+kbn.valueFormats.pflops = kbn.formatBuilders.decimalSIPrefix('FLOP/s', 5);
+kbn.valueFormats.eflops = kbn.formatBuilders.decimalSIPrefix('FLOP/s', 6);
+
 // Hash Rate
 kbn.valueFormats.Hs = kbn.formatBuilders.decimalSIPrefix('H/s');
 kbn.valueFormats.KHs = kbn.formatBuilders.decimalSIPrefix('H/s', 1);
@@ -1018,6 +1027,17 @@ kbn.getUnitFormats = () => {
         { text: 'exahashes/sec', value: 'EHs' },
       ],
     },
+    {
+      text: 'computation throughput',
+      submenu: [
+        { text: 'FLOP/s', value: 'flops' },
+        { text: 'MFLOP/s', value: 'mflops' },
+        { text: 'GFLOP/s', value: 'gflops' },
+        { text: 'TFLOP/s', value: 'tflops' },
+        { text: 'PFLOP/s', value: 'pflops' },
+        { text: 'EFLOP/s', value: 'eflops' },
+      ],
+    },
     {
       text: 'throughput',
       submenu: [
@@ -1084,7 +1104,7 @@ kbn.getUnitFormats = () => {
         { text: 'Watt (W)', value: 'watt' },
         { text: 'Kilowatt (kW)', value: 'kwatt' },
         { text: 'Milliwatt (mW)', value: 'mwatt' },
-        { text: 'Watt per square metre (W/m²)', value: 'Wm2' },
+        { text: 'Watt per square meter (W/m²)', value: 'Wm2' },
         { text: 'Volt-ampere (VA)', value: 'voltamp' },
         { text: 'Kilovolt-ampere (kVA)', value: 'kvoltamp' },
         { text: 'Volt-ampere reactive (var)', value: 'voltampreact' },
@@ -1181,14 +1201,14 @@ kbn.getUnitFormats = () => {
       submenu: [
         { text: 'parts-per-million (ppm)', value: 'ppm' },
         { text: 'parts-per-billion (ppb)', value: 'conppb' },
-        { text: 'nanogram per cubic metre (ng/m³)', value: 'conngm3' },
-        { text: 'nanogram per normal cubic metre (ng/Nm³)', value: 'conngNm3' },
-        { text: 'microgram per cubic metre (μg/m³)', value: 'conμgm3' },
-        { text: 'microgram per normal cubic metre (μg/Nm³)', value: 'conμgNm3' },
-        { text: 'milligram per cubic metre (mg/m³)', value: 'conmgm3' },
-        { text: 'milligram per normal cubic metre (mg/Nm³)', value: 'conmgNm3' },
-        { text: 'gram per cubic metre (g/m³)', value: 'congm3' },
-        { text: 'gram per normal cubic metre (g/Nm³)', value: 'congNm3' },
+        { text: 'nanogram per cubic meter (ng/m³)', value: 'conngm3' },
+        { text: 'nanogram per normal cubic meter (ng/Nm³)', value: 'conngNm3' },
+        { text: 'microgram per cubic meter (μg/m³)', value: 'conμgm3' },
+        { text: 'microgram per normal cubic meter (μg/Nm³)', value: 'conμgNm3' },
+        { text: 'milligram per cubic meter (mg/m³)', value: 'conmgm3' },
+        { text: 'milligram per normal cubic meter (mg/Nm³)', value: 'conmgNm3' },
+        { text: 'gram per cubic meter (g/m³)', value: 'congm3' },
+        { text: 'gram per normal cubic meter (g/Nm³)', value: 'congNm3' },
       ],
     },
   ];
diff --git a/public/app/core/utils/rangeutil.ts b/public/app/core/utils/rangeutil.ts
index 2079aa39006..0150e80f1ed 100644
--- a/public/app/core/utils/rangeutil.ts
+++ b/public/app/core/utils/rangeutil.ts
@@ -159,3 +159,12 @@ export function describeTimeRange(range: RawTimeRange): string {
 
   return range.from.toString() + ' to ' + range.to.toString();
 }
+
+export const isValidTimeSpan = (value: string) => {
+  if (value.indexOf('$') === 0 || value.indexOf('+$') === 0) {
+    return true;
+  }
+
+  const info = describeTextRange(value);
+  return info.invalid !== true;
+};
diff --git a/public/app/core/utils/validate.ts b/public/app/core/utils/validate.ts
new file mode 100644
index 00000000000..c6663882808
--- /dev/null
+++ b/public/app/core/utils/validate.ts
@@ -0,0 +1,16 @@
+import { ValidationRule, ValidationEvents } from 'app/types';
+import { EventsWithValidation } from 'app/core/components/Form/Input';
+
+export const validate = (value: string, validationRules: ValidationRule[]) => {
+  const errors = validationRules.reduce((acc, currRule) => {
+    if (!currRule.rule(value)) {
+      return acc.concat(currRule.errorMessage);
+    }
+    return acc;
+  }, []);
+  return errors.length > 0 ? errors : null;
+};
+
+export const hasValidationEvent = (event: EventsWithValidation, validationEvents: ValidationEvents) => {
+  return validationEvents && validationEvents[event];
+};
diff --git a/public/app/features/alerting/AlertTabCtrl.ts b/public/app/features/alerting/AlertTabCtrl.ts
index ef68ddcf4a5..6d87c159d02 100644
--- a/public/app/features/alerting/AlertTabCtrl.ts
+++ b/public/app/features/alerting/AlertTabCtrl.ts
@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import coreModule from 'app/core/core_module';
 import { ThresholdMapper } from './state/ThresholdMapper';
 import { QueryPart } from 'app/core/components/query_part/query_part';
 import alertDef from './state/alertDef';
@@ -261,7 +262,7 @@ export class AlertTabCtrl {
       this.datasourceSrv.get(datasourceName).then(ds => {
         if (!ds.meta.alerting) {
           this.error = 'The datasource does not support alerting queries';
-        } else if (ds.targetContainsTemplate(foundTarget)) {
+        } else if (ds.targetContainsTemplate && ds.targetContainsTemplate(foundTarget)) {
           this.error = 'Template variables are not supported in alert queries';
         } else {
           this.error = '';
@@ -430,3 +431,5 @@ export function alertTab() {
     controller: AlertTabCtrl,
   };
 }
+
+coreModule.directive('alertTab', alertTab);
diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html
index 2ebe2b53a76..0e4e48a89a9 100644
--- a/public/app/features/alerting/partials/alert_tab.html
+++ b/public/app/features/alerting/partials/alert_tab.html
@@ -1,187 +1,191 @@
-<div class="edit-tab-with-sidemenu" ng-if="ctrl.alert">
-  <aside class="edit-sidemenu-aside">
-    <ul class="edit-sidemenu">
-      <li ng-class="{active: ctrl.subTabIndex === 0}">
-        <a ng-click="ctrl.changeTabIndex(0)">Alert Config</a>
-      </li>
-      <li ng-class="{active: ctrl.subTabIndex === 1}">
-        <a ng-click="ctrl.changeTabIndex(1)">
-          Notifications <span class="muted">({{ctrl.alertNotifications.length}})</span>
-        </a>
-      </li>
-      <li ng-class="{active: ctrl.subTabIndex === 2}">
-        <a ng-click="ctrl.changeTabIndex(2)">State history</a>
-      </li>
-      <li>
-        <a ng-click="ctrl.delete()">Delete</a>
-      </li>
-    </ul>
-  </aside>
+<div class="panel-option-section__body" ng-if="ctrl.alert">
+	<div class="edit-tab-with-sidemenu">
+		<aside class="edit-sidemenu-aside">
+			<ul class="edit-sidemenu">
+				<li ng-class="{active: ctrl.subTabIndex === 0}">
+					<a ng-click="ctrl.changeTabIndex(0)">Alert Config</a>
+				</li>
+				<li ng-class="{active: ctrl.subTabIndex === 1}">
+					<a ng-click="ctrl.changeTabIndex(1)">
+						Notifications <span class="muted">({{ctrl.alertNotifications.length}})</span>
+					</a>
+				</li>
+				<li ng-class="{active: ctrl.subTabIndex === 2}">
+					<a ng-click="ctrl.changeTabIndex(2)">State history</a>
+				</li>
+				<li>
+					<a ng-click="ctrl.delete()">Delete</a>
+				</li>
+			</ul>
+		</aside>
 
-  <div class="edit-tab-content">
-    <div ng-if="ctrl.subTabIndex === 0">
-      <div class="alert alert-error m-b-2" ng-show="ctrl.error">
-        <i class="fa fa-warning"></i> {{ctrl.error}}
-      </div>
+		<div class="edit-tab-content">
+			<div ng-if="ctrl.subTabIndex === 0">
+				<div class="alert alert-error m-b-2" ng-show="ctrl.error">
+					<i class="fa fa-warning"></i> {{ctrl.error}}
+				</div>
 
-      <div class="gf-form-group">
-        <h5 class="section-heading">Alert Config</h5>
-        <div class="gf-form">
-          <span class="gf-form-label width-6">Name</span>
-          <input type="text" class="gf-form-input width-20" ng-model="ctrl.alert.name">
-        </div>
-        <div class="gf-form-inline">
-          <div class="gf-form">
-            <span class="gf-form-label width-9">Evaluate every</span>
-            <input class="gf-form-input max-width-6" type="text" ng-model="ctrl.alert.frequency">
-          </div>
-          <div class="gf-form max-width-11">
-            <label class="gf-form-label width-5">For</label>
-            <input type="text" class="gf-form-input max-width-6" ng-model="ctrl.alert.for" spellcheck='false' placeholder="5m">
-            <info-popover mode="right-absolute">
-                If an alert rule has a configured For and the query violates the configured threshold it will first go from OK to Pending. 
-                Going from OK to Pending Grafana will not send any notifications. Once the alert rule has been firing for more than For duration, it will change to Alerting and send alert notifications. 
-            </info-popover>
-          </div>
-        </div>
-      </div>
+				<div class="gf-form-group">
+					<h5 class="section-heading">Alert Config</h5>
+					<div class="gf-form">
+						<span class="gf-form-label width-6">Name</span>
+						<input type="text" class="gf-form-input width-20" ng-model="ctrl.alert.name">
+					</div>
+					<div class="gf-form-inline">
+						<div class="gf-form">
+							<span class="gf-form-label width-9">Evaluate every</span>
+							<input class="gf-form-input max-width-6" type="text" ng-model="ctrl.alert.frequency">
+						</div>
+						<div class="gf-form max-width-11">
+							<label class="gf-form-label width-5">For</label>
+							<input type="text" class="gf-form-input max-width-6" ng-model="ctrl.alert.for" spellcheck='false' placeholder="5m">
+							<info-popover mode="right-absolute">
+									If an alert rule has a configured For and the query violates the configured threshold it will first go from OK to Pending.
+									Going from OK to Pending Grafana will not send any notifications. Once the alert rule has been firing for more than For duration, it will change to Alerting and send alert notifications.
+							</info-popover>
+						</div>
+					</div>
+				</div>
 
-      <div class="gf-form-group">
-        <h5 class="section-heading">Conditions</h5>
-        <div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
-          <div class="gf-form">
-            <metric-segment-model css-class="query-keyword width-5" ng-if="$index" property="conditionModel.operator.type" options="ctrl.evalOperators" custom="false"></metric-segment-model>
-            <span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span>
-          </div>
-                <div class="gf-form">
-            <query-part-editor class="gf-form-label query-part width-9" part="conditionModel.reducerPart" handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)">
-            </query-part-editor>
-                  <span class="gf-form-label query-keyword">OF</span>
-          </div>
-          <div class="gf-form">
-            <query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart" handle-event="ctrl.handleQueryPartEvent(conditionModel, $event)">
-            </query-part-editor>
-          </div>
-          <div class="gf-form">
-            <metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-keyword" on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model>
-            <input class="gf-form-input max-width-9" type="number" step="any" ng-hide="conditionModel.evaluator.params.length === 0" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.evaluatorParamsChanged()">
-            <label class="gf-form-label query-keyword" ng-show="conditionModel.evaluator.params.length === 2">TO</label>
-            <input class="gf-form-input max-width-9" type="number" step="any" ng-if="conditionModel.evaluator.params.length === 2" ng-model="conditionModel.evaluator.params[1]" ng-change="ctrl.evaluatorParamsChanged()">
-          </div>
-          <div class="gf-form">
-            <label class="gf-form-label">
-              <a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)">
-                <i class="fa fa-trash"></i>
-              </a>
-            </label>
-          </div>
-        </div>
+				<div class="gf-form-group">
+					<h5 class="section-heading">Conditions</h5>
+					<div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
+						<div class="gf-form">
+							<metric-segment-model css-class="query-keyword width-5" ng-if="$index" property="conditionModel.operator.type" options="ctrl.evalOperators" custom="false"></metric-segment-model>
+							<span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span>
+						</div>
+									<div class="gf-form">
+							<query-part-editor class="gf-form-label query-part width-9" part="conditionModel.reducerPart" handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)">
+							</query-part-editor>
+										<span class="gf-form-label query-keyword">OF</span>
+						</div>
+						<div class="gf-form">
+							<query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart" handle-event="ctrl.handleQueryPartEvent(conditionModel, $event)">
+							</query-part-editor>
+						</div>
+						<div class="gf-form">
+							<metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-keyword" on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model>
+							<input class="gf-form-input max-width-9" type="number" step="any" ng-hide="conditionModel.evaluator.params.length === 0" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.evaluatorParamsChanged()">
+							<label class="gf-form-label query-keyword" ng-show="conditionModel.evaluator.params.length === 2">TO</label>
+							<input class="gf-form-input max-width-9" type="number" step="any" ng-if="conditionModel.evaluator.params.length === 2" ng-model="conditionModel.evaluator.params[1]" ng-change="ctrl.evaluatorParamsChanged()">
+						</div>
+						<div class="gf-form">
+							<label class="gf-form-label">
+								<a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)">
+									<i class="fa fa-trash"></i>
+								</a>
+							</label>
+						</div>
+					</div>
 
-        <div class="gf-form">
-          <label class="gf-form-label dropdown">
-            <a class="pointer dropdown-toggle" data-toggle="dropdown">
-              <i class="fa fa-plus"></i>
-            </a>
-            <ul class="dropdown-menu" role="menu">
-              <li ng-repeat="ct in ctrl.conditionTypes" role="menuitem">
-                <a ng-click="ctrl.addCondition(ct.value);">{{ct.text}}</a>
-              </li>
-            </ul>
-          </label>
-        </div>
-      </div>
+					<div class="gf-form">
+						<label class="gf-form-label dropdown">
+							<a class="pointer dropdown-toggle" data-toggle="dropdown">
+								<i class="fa fa-plus"></i>
+							</a>
+							<ul class="dropdown-menu" role="menu">
+								<li ng-repeat="ct in ctrl.conditionTypes" role="menuitem">
+									<a ng-click="ctrl.addCondition(ct.value);">{{ct.text}}</a>
+								</li>
+							</ul>
+						</label>
+					</div>
+				</div>
 
-      <div class="gf-form-group">
-        <div class="gf-form">
-                <span class="gf-form-label width-18">If no data or all values are null</span>
-                <span class="gf-form-label query-keyword">SET STATE TO</span>
-          <div class="gf-form-select-wrapper">
-            <select class="gf-form-input" ng-model="ctrl.alert.noDataState" ng-options="f.value as f.text for f in ctrl.noDataModes">
-            </select>
-          </div>
-        </div>
+				<div class="gf-form-group">
+					<div class="gf-form">
+									<span class="gf-form-label width-18">If no data or all values are null</span>
+									<span class="gf-form-label query-keyword">SET STATE TO</span>
+						<div class="gf-form-select-wrapper">
+							<select class="gf-form-input" ng-model="ctrl.alert.noDataState" ng-options="f.value as f.text for f in ctrl.noDataModes">
+							</select>
+						</div>
+					</div>
 
-        <div class="gf-form">
-                <span class="gf-form-label width-18">If execution error or timeout</span>
-                <span class="gf-form-label query-keyword">SET STATE TO</span>
-          <div class="gf-form-select-wrapper">
-            <select class="gf-form-input" ng-model="ctrl.alert.executionErrorState" ng-options="f.value as f.text for f in ctrl.executionErrorModes">
-            </select>
-          </div>
-        </div>
+					<div class="gf-form">
+									<span class="gf-form-label width-18">If execution error or timeout</span>
+									<span class="gf-form-label query-keyword">SET STATE TO</span>
+						<div class="gf-form-select-wrapper">
+							<select class="gf-form-input" ng-model="ctrl.alert.executionErrorState" ng-options="f.value as f.text for f in ctrl.executionErrorModes">
+							</select>
+						</div>
+					</div>
 
-        <div class="gf-form-button-row">
-          <button class="btn btn-inverse" ng-click="ctrl.test()">
-            Test Rule
-          </button>
-        </div>
-      </div>
+					<div class="gf-form-button-row">
+						<button class="btn btn-inverse" ng-click="ctrl.test()">
+							Test Rule
+						</button>
+					</div>
+				</div>
 
-      <div class="gf-form-group" ng-if="ctrl.testing">
-        Evaluating rule <i class="fa fa-spinner fa-spin"></i>
-      </div>
+				<div class="gf-form-group" ng-if="ctrl.testing">
+					Evaluating rule <i class="fa fa-spinner fa-spin"></i>
+				</div>
 
-      <div class="gf-form-group" ng-if="ctrl.testResult">
-        <json-tree root-name="result" object="ctrl.testResult" start-expanded="true"></json-tree>
-      </div>
-    </div>
+				<div class="gf-form-group" ng-if="ctrl.testResult">
+					<json-tree root-name="result" object="ctrl.testResult" start-expanded="true"></json-tree>
+				</div>
+			</div>
 
-    <div class="gf-form-group" ng-if="ctrl.subTabIndex === 1">
-      <h5 class="section-heading">Notifications</h5>
-      <div class="gf-form-inline">
-        <div class="gf-form max-width-30">
-          <span class="gf-form-label width-8">Send to</span>
-          <span class="gf-form-label" ng-repeat="nc in ctrl.alertNotifications" ng-style="{'background-color': nc.bgColor }">
-            <i class="{{nc.iconClass}}"></i>&nbsp;{{nc.name}}&nbsp;
-            <i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification($index)" ng-if="nc.isDefault === false"></i>
-          </span>
-          <metric-segment segment="ctrl.addNotificationSegment" get-options="ctrl.getNotifications()" on-change="ctrl.notificationAdded()"></metric-segment>
-        </div>
-      </div>
-      <div class="gf-form gf-form--v-stretch">
-        <span class="gf-form-label width-8">Message</span>
-        <textarea class="gf-form-input" rows="10" ng-model="ctrl.alert.message"  placeholder="Notification message details..."></textarea>
-      </div>
-    </div>
+			<div class="gf-form-group" ng-if="ctrl.subTabIndex === 1">
+				<h5 class="section-heading">Notifications</h5>
+				<div class="gf-form-inline">
+					<div class="gf-form max-width-30">
+						<span class="gf-form-label width-8">Send to</span>
+						<span class="gf-form-label" ng-repeat="nc in ctrl.alertNotifications" ng-style="{'background-color': nc.bgColor }">
+							<i class="{{nc.iconClass}}"></i>&nbsp;{{nc.name}}&nbsp;
+							<i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification($index)" ng-if="nc.isDefault === false"></i>
+						</span>
+						<metric-segment segment="ctrl.addNotificationSegment" get-options="ctrl.getNotifications()" on-change="ctrl.notificationAdded()"></metric-segment>
+					</div>
+				</div>
+				<div class="gf-form gf-form--v-stretch">
+					<span class="gf-form-label width-8">Message</span>
+					<textarea class="gf-form-input" rows="10" ng-model="ctrl.alert.message"  placeholder="Notification message details..."></textarea>
+				</div>
+			</div>
 
-    <div class="gf-form-group" style="max-width: 720px;" ng-if="ctrl.subTabIndex === 2">
-      <button class="btn btn-mini btn-danger pull-right" ng-click="ctrl.clearHistory()"><i class="fa fa-trash"></i>&nbsp;Clear history</button>
-          <h5 class="section-heading" style="whitespace: nowrap">
-        State history <span class="muted small">(last 50 state changes)</span>
-      </h5>
+			<div class="gf-form-group" style="max-width: 720px;" ng-if="ctrl.subTabIndex === 2">
+				<button class="btn btn-mini btn-danger pull-right" ng-click="ctrl.clearHistory()"><i class="fa fa-trash"></i>&nbsp;Clear history</button>
+						<h5 class="section-heading" style="whitespace: nowrap">
+					State history <span class="muted small">(last 50 state changes)</span>
+				</h5>
 
-      <div ng-show="ctrl.alertHistory.length === 0">
-        <br>
-        <i>No state changes recorded</i>
-      </div>
+				<div ng-show="ctrl.alertHistory.length === 0">
+					<br>
+					<i>No state changes recorded</i>
+				</div>
 
-      <ol class="alert-rule-list" >
-        <li class="alert-rule-item" ng-repeat="al in ctrl.alertHistory">
-          <div class="alert-rule-item__icon {{al.stateModel.stateClass}}">
-            <i class="{{al.stateModel.iconClass}}"></i>
-          </div>
-          <div class="alert-rule-item__body">
-            <div class="alert-rule-item__header">
-              <div class="alert-rule-item__text">
-                <span class="{{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
-              </div>
-            </div>
-            <span class="alert-list-info">{{al.info}}</span>
-          </div>
-          <div class="alert-rule-item__time">
-            <span>{{al.time}}</span>
-          </div>
-        </li>
-      </ol>
-    </div>
-  </div>
+				<ol class="alert-rule-list" >
+					<li class="alert-rule-item" ng-repeat="al in ctrl.alertHistory">
+						<div class="alert-rule-item__icon {{al.stateModel.stateClass}}">
+							<i class="{{al.stateModel.iconClass}}"></i>
+						</div>
+						<div class="alert-rule-item__body">
+							<div class="alert-rule-item__header">
+								<div class="alert-rule-item__text">
+									<span class="{{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
+								</div>
+							</div>
+							<span class="alert-list-info">{{al.info}}</span>
+						</div>
+						<div class="alert-rule-item__time">
+							<span>{{al.time}}</span>
+						</div>
+					</li>
+				</ol>
+			</div>
+		</div>
+	</div>
 </div>
 
-<div class="gf-form-group" ng-if="!ctrl.alert">
-  <div class="gf-form-button-row">
-    <button class="btn btn-inverse" ng-click="ctrl.enable()">
-      <i class="icon-gf icon-gf-alert"></i>
-      Create Alert
-    </button>
-  </div>
+<div class="gf-form-group p-t-4 p-b-4" ng-if="!ctrl.alert">
+	<div class="empty-list-cta">
+		<div class="empty-list-cta__title">Panel has no alert rule defined</div>
+			<button class="empty-list-cta__button btn btn-xlarge btn-success" ng-click="ctrl.enable()">
+				<i class="icon-gf icon-gf-alert"></i>
+				Create Alert
+			</button>
+		</div>
+	</div>
 </div>
diff --git a/public/app/features/dashboard/dashboard_migration.ts b/public/app/features/dashboard/dashboard_migration.ts
index 5f1deae6e14..abd12ab4b13 100644
--- a/public/app/features/dashboard/dashboard_migration.ts
+++ b/public/app/features/dashboard/dashboard_migration.ts
@@ -143,7 +143,7 @@ export class DashboardMigrator {
       panelUpgrades.push(panel => {
         _.each(panel.targets, target => {
           if (!target.refId) {
-            target.refId = this.dashboard.getNextQueryLetter(panel);
+            target.refId = panel.getNextQueryLetter && panel.getNextQueryLetter();
           }
         });
       });
diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts
index 18a16d5c1d4..6f98bc5a17a 100644
--- a/public/app/features/dashboard/dashboard_model.ts
+++ b/public/app/features/dashboard/dashboard_model.ts
@@ -806,16 +806,6 @@ export class DashboardModel {
     return this.timezone === 'browser' ? moment(date).fromNow() : moment.utc(date).fromNow();
   }
 
-  getNextQueryLetter(panel) {
-    const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-
-    return _.find(letters, refId => {
-      return _.every(panel.targets, other => {
-        return other.refId !== refId;
-      });
-    });
-  }
-
   isTimezoneUtc() {
     return this.getTimezone() === 'utc';
   }
diff --git a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
index 68cee112f42..95d03152b14 100644
--- a/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
 import _ from 'lodash';
-import classNames from 'classnames';
 import config from 'app/core/config';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
-import ScrollBar from 'app/core/components/ScrollBar/ScrollBar';
 import store from 'app/core/store';
 import { LS_PANEL_COPY_KEY } from 'app/core/constants';
-import Highlighter from 'react-highlight-words';
+import { updateLocation } from 'app/core/actions';
+import { store as reduxStore } from 'app/store/store';
 
 export interface AddPanelPanelProps {
   panel: PanelModel;
@@ -15,64 +14,25 @@ export interface AddPanelPanelProps {
 }
 
 export interface AddPanelPanelState {
-  filter: string;
-  panelPlugins: any[];
   copiedPanelPlugins: any[];
-  tab: string;
 }
 
 export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelPanelState> {
-  private scrollbar: ScrollBar;
-
   constructor(props) {
     super(props);
     this.handleCloseAddPanel = this.handleCloseAddPanel.bind(this);
-    this.renderPanelItem = this.renderPanelItem.bind(this);
-    this.panelSizeChanged = this.panelSizeChanged.bind(this);
 
     this.state = {
-      panelPlugins: this.getPanelPlugins(''),
-      copiedPanelPlugins: this.getCopiedPanelPlugins(''),
-      filter: '',
-      tab: 'Add',
+      copiedPanelPlugins: this.getCopiedPanelPlugins(),
     };
   }
 
-  componentDidMount() {
-    this.props.panel.events.on('panel-size-changed', this.panelSizeChanged);
-  }
-
-  componentWillUnmount() {
-    this.props.panel.events.off('panel-size-changed', this.panelSizeChanged);
-  }
-
-  panelSizeChanged() {
-    setTimeout(() => {
-      this.scrollbar.update();
-    });
-  }
-
-  getPanelPlugins(filter) {
-    let panels = _.chain(config.panels)
-      .filter({ hideFromList: false })
-      .map(item => item)
-      .value();
-
-    // add special row type
-    panels.push({ id: 'row', name: 'Row', sort: 8, info: { logos: { small: 'public/img/icn-row.svg' } } });
-
-    panels = this.filterPanels(panels, filter);
-
-    // add sort by sort property
-    return _.sortBy(panels, 'sort');
-  }
-
-  getCopiedPanelPlugins(filter) {
+  getCopiedPanelPlugins() {
     const panels = _.chain(config.panels)
       .filter({ hideFromList: false })
       .map(item => item)
       .value();
-    let copiedPanels = [];
+    const copiedPanels = [];
 
     const copiedPanelJson = store.get(LS_PANEL_COPY_KEY);
     if (copiedPanelJson) {
@@ -86,13 +46,52 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
         copiedPanels.push(pluginCopy);
       }
     }
-
-    copiedPanels = this.filterPanels(copiedPanels, filter);
-
     return _.sortBy(copiedPanels, 'sort');
   }
 
-  onAddPanel = panelPluginInfo => {
+  handleCloseAddPanel(evt) {
+    evt.preventDefault();
+    this.props.dashboard.removePanel(this.props.dashboard.panels[0]);
+  }
+
+  copyButton(panel) {
+    return (
+      <button className="btn-inverse btn" onClick={() => this.onPasteCopiedPanel(panel)} title={panel.name}>
+        Paste copied Panel
+      </button>
+    );
+  }
+
+  moveToEdit(panel) {
+    reduxStore.dispatch(
+      updateLocation({
+        query: {
+          panelId: panel.id,
+          edit: true,
+          fullscreen: true,
+        },
+        partial: true,
+      })
+    );
+  }
+
+  onCreateNewPanel = () => {
+    const dashboard = this.props.dashboard;
+    const { gridPos } = this.props.panel;
+
+    const newPanel: any = {
+      type: 'graph',
+      title: 'Panel Title',
+      gridPos: { x: gridPos.x, y: gridPos.y, w: gridPos.w, h: gridPos.h },
+    };
+
+    dashboard.addPanel(newPanel);
+    dashboard.removePanel(this.props.panel);
+
+    this.moveToEdit(newPanel);
+  };
+
+  onPasteCopiedPanel = panelPluginInfo => {
     const dashboard = this.props.dashboard;
     const { gridPos } = this.props.panel;
 
@@ -102,16 +101,9 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
       gridPos: { x: gridPos.x, y: gridPos.y, w: gridPos.w, h: gridPos.h },
     };
 
-    if (panelPluginInfo.id === 'row') {
-      newPanel.title = 'Row title';
-      newPanel.gridPos = { x: 0, y: 0 };
-    }
-
     // apply panel template / defaults
     if (panelPluginInfo.defaults) {
       _.defaults(newPanel, panelPluginInfo.defaults);
-      newPanel.gridPos.w = panelPluginInfo.defaults.gridPos.w;
-      newPanel.gridPos.h = panelPluginInfo.defaults.gridPos.h;
       newPanel.title = panelPluginInfo.defaults.title;
       store.delete(LS_PANEL_COPY_KEY);
     }
@@ -120,133 +112,44 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
     dashboard.removePanel(this.props.panel);
   };
 
-  handleCloseAddPanel(evt) {
-    evt.preventDefault();
-    this.props.dashboard.removePanel(this.props.dashboard.panels[0]);
-  }
+  onCreateNewRow = () => {
+    const dashboard = this.props.dashboard;
 
-  renderText(text: string) {
-    const searchWords = this.state.filter.split('');
-    return <Highlighter highlightClassName="highlight-search-match" textToHighlight={text} searchWords={searchWords} />;
-  }
+    const newRow: any = {
+      type: 'row',
+      title: 'Row title',
+      gridPos: { x: 0, y: 0 },
+    };
 
-  renderPanelItem(panel, index) {
-    return (
-      <div key={index} className="add-panel__item" onClick={() => this.onAddPanel(panel)} title={panel.name}>
-        <img className="add-panel__item-img" src={panel.info.logos.small} />
-        <div className="add-panel__item-name">{this.renderText(panel.name)}</div>
-      </div>
-    );
-  }
-
-  noCopiedPanelPlugins() {
-    return <div className="add-panel__no-panels">No copied panels yet.</div>;
-  }
-
-  filterChange(evt) {
-    this.setState({
-      filter: evt.target.value,
-      panelPlugins: this.getPanelPlugins(evt.target.value),
-      copiedPanelPlugins: this.getCopiedPanelPlugins(evt.target.value),
-    });
-  }
-
-  filterKeyPress(evt) {
-    if (evt.key === 'Enter') {
-      const panel = _.head(this.state.panelPlugins);
-      if (panel) {
-        this.onAddPanel(panel);
-      }
-    }
-  }
-
-  filterPanels(panels, filter) {
-    const regex = new RegExp(filter, 'i');
-    return panels.filter(panel => {
-      return regex.test(panel.name);
-    });
-  }
-
-  openCopy() {
-    this.setState({
-      tab: 'Copy',
-      filter: '',
-      panelPlugins: this.getPanelPlugins(''),
-      copiedPanelPlugins: this.getCopiedPanelPlugins(''),
-    });
-  }
-
-  openAdd() {
-    this.setState({
-      tab: 'Add',
-      filter: '',
-      panelPlugins: this.getPanelPlugins(''),
-      copiedPanelPlugins: this.getCopiedPanelPlugins(''),
-    });
-  }
+    dashboard.addPanel(newRow);
+    dashboard.removePanel(this.props.panel);
+  };
 
   render() {
-    const addClass = classNames({
-      'active active--panel': this.state.tab === 'Add',
-      '': this.state.tab === 'Copy',
-    });
+    let addCopyButton;
 
-    const copyClass = classNames({
-      '': this.state.tab === 'Add',
-      'active active--panel': this.state.tab === 'Copy',
-    });
-
-    let panelTab;
-
-    if (this.state.tab === 'Add') {
-      panelTab = this.state.panelPlugins.map(this.renderPanelItem);
-    } else if (this.state.tab === 'Copy') {
-      if (this.state.copiedPanelPlugins.length > 0) {
-        panelTab = this.state.copiedPanelPlugins.map(this.renderPanelItem);
-      } else {
-        panelTab = this.noCopiedPanelPlugins();
-      }
+    if (this.state.copiedPanelPlugins.length === 1) {
+      addCopyButton = this.copyButton(this.state.copiedPanelPlugins[0]);
     }
 
     return (
       <div className="panel-container add-panel-container">
         <div className="add-panel">
-          <div className="add-panel__header">
+          <div className="add-panel__header grid-drag-handle">
             <i className="gicon gicon-add-panel" />
-            <span className="add-panel__title">New Panel</span>
-            <ul className="gf-tabs">
-              <li className="gf-tabs-item">
-                <div className={'gf-tabs-link pointer ' + addClass} onClick={this.openAdd.bind(this)}>
-                  Add
-                </div>
-              </li>
-              <li className="gf-tabs-item">
-                <div className={'gf-tabs-link pointer ' + copyClass} onClick={this.openCopy.bind(this)}>
-                  Paste
-                </div>
-              </li>
-            </ul>
             <button className="add-panel__close" onClick={this.handleCloseAddPanel}>
               <i className="fa fa-close" />
             </button>
           </div>
-          <ScrollBar ref={element => (this.scrollbar = element)} className="add-panel__items">
-            <div className="add-panel__searchbar">
-              <label className="gf-form gf-form--grow gf-form--has-input-icon">
-                <input
-                  type="text"
-                  autoFocus
-                  className="gf-form-input gf-form--grow"
-                  placeholder="Panel Search Filter"
-                  value={this.state.filter}
-                  onChange={this.filterChange.bind(this)}
-                  onKeyPress={this.filterKeyPress.bind(this)}
-                />
-                <i className="gf-form-input-icon fa fa-search" />
-              </label>
-            </div>
-            {panelTab}
-          </ScrollBar>
+          <div className="add-panel-btn-container">
+            <button className="btn-success btn btn-large" onClick={this.onCreateNewPanel}>
+              Edit Panel
+            </button>
+            {addCopyButton}
+            <button className="btn-inverse btn" onClick={this.onCreateNewRow}>
+              Add Row
+            </button>
+          </div>
         </div>
       </div>
     );
diff --git a/public/app/features/dashboard/dashgrid/AlertTab.tsx b/public/app/features/dashboard/dashgrid/AlertTab.tsx
new file mode 100644
index 00000000000..7df7864c758
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/AlertTab.tsx
@@ -0,0 +1,72 @@
+import React, { PureComponent } from 'react';
+
+import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+import { EditorTabBody } from './EditorTabBody';
+import 'app/features/alerting/AlertTabCtrl';
+
+interface Props {
+  angularPanel?: AngularComponent;
+}
+
+export class AlertTab extends PureComponent<Props> {
+  element: any;
+  component: AngularComponent;
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    if (this.shouldLoadAlertTab()) {
+      this.loadAlertTab();
+    }
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (this.shouldLoadAlertTab()) {
+      this.loadAlertTab();
+    }
+  }
+
+  shouldLoadAlertTab() {
+    return this.props.angularPanel && this.element;
+  }
+
+  componentWillUnmount() {
+    if (this.component) {
+      this.component.destroy();
+    }
+  }
+
+  loadAlertTab() {
+    const { angularPanel } = this.props;
+
+    const scope = angularPanel.getScope();
+
+    // When full page reloading in edit mode the angular panel has on fully compiled & instantiated yet
+    if (!scope.$$childHead) {
+      setTimeout(() => {
+        this.forceUpdate();
+      });
+      return;
+    }
+
+    const panelCtrl = scope.$$childHead.ctrl;
+    const loader = getAngularLoader();
+    const template = '<alert-tab />';
+
+    const scopeProps = {
+      ctrl: panelCtrl,
+    };
+
+    this.component = loader.load(this.element, scopeProps, template);
+  }
+
+  render() {
+    return (
+      <EditorTabBody heading="Alert" toolbarItems={[]}>
+        <div ref={element => (this.element = element)} />
+      </EditorTabBody>
+    );
+  }
+}
diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 12b4809f51a..a401505b787 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { hot } from 'react-hot-loader';
 import ReactGridLayout from 'react-grid-layout';
 import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants';
 import { DashboardPanel } from './DashboardPanel';
@@ -8,6 +9,7 @@ import classNames from 'classnames';
 import sizeMe from 'react-sizeme';
 
 let lastGridWidth = 1200;
+let ignoreNextWidthChange = false;
 
 function GridWrapper({
   size,
@@ -24,8 +26,12 @@ function GridWrapper({
   isFullscreen,
 }) {
   const width = size.width > 0 ? size.width : lastGridWidth;
+
+  // logic to ignore width changes (optimization)
   if (width !== lastGridWidth) {
-    if (!isFullscreen && Math.abs(width - lastGridWidth) > 8) {
+    if (ignoreNextWidthChange) {
+      ignoreNextWidthChange = false;
+    } else if (!isFullscreen && Math.abs(width - lastGridWidth) > 8) {
       onWidthChange();
       lastGridWidth = width;
     }
@@ -39,7 +45,7 @@ function GridWrapper({
       isResizable={isResizable}
       measureBeforeMount={false}
       containerPadding={[0, 0]}
-      useCSSTransforms={true}
+      useCSSTransforms={false}
       margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}
       cols={GRID_COLUMN_COUNT}
       rowHeight={GRID_CELL_HEIGHT}
@@ -61,7 +67,7 @@ export interface DashboardGridProps {
   dashboard: DashboardModel;
 }
 
-export class DashboardGrid extends React.Component<DashboardGridProps, any> {
+export class DashboardGrid extends React.Component<DashboardGridProps> {
   gridToPanelMap: any;
   panelMap: { [id: string]: PanelModel };
 
@@ -73,8 +79,6 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     this.onDragStop = this.onDragStop.bind(this);
     this.onWidthChange = this.onWidthChange.bind(this);
 
-    this.state = { animated: false };
-
     // subscribe to dashboard events
     const dashboard = this.props.dashboard;
     dashboard.on('panel-added', this.triggerForceUpdate.bind(this));
@@ -138,7 +142,8 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
   }
 
   onViewModeChanged(payload) {
-    this.setState({ animated: !payload.fullscreen });
+    ignoreNextWidthChange = true;
+    this.forceUpdate();
   }
 
   updateGridPos(item, layout) {
@@ -162,17 +167,11 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     this.updateGridPos(newItem, layout);
   }
 
-  componentDidMount() {
-    setTimeout(() => {
-      this.setState({ animated: true });
-    });
-  }
-
   renderPanels() {
     const panelElements = [];
 
     for (const panel of this.props.dashboard.panels) {
-      const panelClasses = classNames({ panel: true, 'panel--fullscreen': panel.fullscreen });
+      const panelClasses = classNames({ 'react-grid-item--fullscreen': panel.fullscreen });
       panelElements.push(
         <div key={panel.id.toString()} className={panelClasses} id={`panel-${panel.id}`}>
           <DashboardPanel
@@ -191,7 +190,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
   render() {
     return (
       <SizedReactLayoutGrid
-        className={classNames({ layout: true, animated: this.state.animated })}
+        className={classNames({ layout: true })}
         layout={this.buildLayout()}
         isResizable={this.props.dashboard.meta.canEdit}
         isDraggable={this.props.dashboard.meta.canEdit}
@@ -207,3 +206,5 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     );
   }
 }
+
+export default hot(module)(DashboardGrid);
diff --git a/public/app/features/dashboard/dashgrid/DashboardGridDirective.ts b/public/app/features/dashboard/dashgrid/DashboardGridDirective.ts
index a8e4b0dcae9..bb81c936b3e 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGridDirective.ts
+++ b/public/app/features/dashboard/dashgrid/DashboardGridDirective.ts
@@ -1,4 +1,4 @@
 import { react2AngularDirective } from 'app/core/utils/react2angular';
-import { DashboardGrid } from './DashboardGrid';
+import DashboardGrid from './DashboardGrid';
 
 react2AngularDirective('dashboardGrid', DashboardGrid, [['dashboard', { watchDepth: 'reference' }]]);
diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
index 6853ade474b..481dd2d5e19 100644
--- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
@@ -1,15 +1,21 @@
 import React, { PureComponent } from 'react';
 import config from 'app/core/config';
-import { PanelModel } from '../panel_model';
-import { DashboardModel } from '../dashboard_model';
+import classNames from 'classnames';
+
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
-import { DashboardRow } from './DashboardRow';
-import { AddPanelPanel } from './AddPanelPanel';
 import { importPluginModule } from 'app/features/plugins/plugin_loader';
-import { PluginExports, PanelPlugin } from 'app/types/plugins';
+
+import { AddPanelPanel } from './AddPanelPanel';
+import { getPanelPluginNotFound } from './PanelPluginNotFound';
+import { DashboardRow } from './DashboardRow';
 import { PanelChrome } from './PanelChrome';
 import { PanelEditor } from './PanelEditor';
 
+import { PanelModel } from '../panel_model';
+import { DashboardModel } from '../dashboard_model';
+import { PanelPlugin } from 'app/types';
+import { PanelResizer } from './PanelResizer';
+
 export interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
@@ -18,28 +24,28 @@ export interface Props {
 }
 
 export interface State {
-  pluginExports: PluginExports;
+  plugin: PanelPlugin;
+  angularPanel: AngularComponent;
 }
 
 export class DashboardPanel extends PureComponent<Props, State> {
-  element: any;
-  angularPanel: AngularComponent;
-  pluginInfo: any;
+  element: HTMLElement;
   specialPanels = {};
 
   constructor(props) {
     super(props);
 
     this.state = {
-      pluginExports: null,
+      plugin: null,
+      angularPanel: null,
     };
 
     this.specialPanels['row'] = this.renderRow.bind(this);
     this.specialPanels['add-panel'] = this.renderAddPanel.bind(this);
   }
 
-  isSpecial() {
-    return this.specialPanels[this.props.panel.type];
+  isSpecial(pluginId: string) {
+    return this.specialPanels[pluginId];
   }
 
   renderRow() {
@@ -51,60 +57,60 @@ export class DashboardPanel extends PureComponent<Props, State> {
   }
 
   onPluginTypeChanged = (plugin: PanelPlugin) => {
-    this.props.panel.changeType(plugin.id);
-    this.loadPlugin();
+    this.loadPlugin(plugin.id);
   };
 
-  onAngularPluginTypeChanged = () => {
-    this.loadPlugin();
-  };
-
-  loadPlugin() {
-    if (this.isSpecial()) {
+  async loadPlugin(pluginId: string) {
+    if (this.isSpecial(pluginId)) {
       return;
     }
 
-    // handle plugin loading & changing of plugin type
-    if (!this.pluginInfo || this.pluginInfo.id !== this.props.panel.type) {
-      this.pluginInfo = config.panels[this.props.panel.type];
+    const { panel } = this.props;
 
-      if (this.pluginInfo.exports) {
-        this.cleanUpAngularPanel();
-        this.setState({ pluginExports: this.pluginInfo.exports });
+    // handle plugin loading & changing of plugin type
+    if (!this.state.plugin || this.state.plugin.id !== pluginId) {
+      const plugin = config.panels[pluginId] || getPanelPluginNotFound(pluginId);
+
+      // remember if this is from an angular panel
+      const fromAngularPanel = this.state.angularPanel != null;
+
+      // unmount angular panel
+      this.cleanUpAngularPanel();
+
+      if (panel.type !== pluginId) {
+        this.props.panel.changeType(pluginId, fromAngularPanel);
+      }
+
+      if (plugin.exports) {
+        this.setState({ plugin: plugin, angularPanel: null });
       } else {
-        importPluginModule(this.pluginInfo.module).then(pluginExports => {
-          this.cleanUpAngularPanel();
-          // cache plugin exports (saves a promise async cycle next time)
-          this.pluginInfo.exports = pluginExports;
-          // update panel state
-          this.setState({ pluginExports: pluginExports });
-        });
+        plugin.exports = await importPluginModule(plugin.module);
+        this.setState({ plugin: plugin, angularPanel: null });
       }
     }
   }
 
   componentDidMount() {
-    this.loadPlugin();
+    this.loadPlugin(this.props.panel.type);
   }
 
   componentDidUpdate() {
-    this.loadPlugin();
-
-    // handle angular plugin loading
-    if (!this.element || this.angularPanel) {
+    if (!this.element || this.state.angularPanel) {
       return;
     }
 
     const loader = getAngularLoader();
     const template = '<plugin-component type="panel" class="panel-height-helper"></plugin-component>';
     const scopeProps = { panel: this.props.panel, dashboard: this.props.dashboard };
-    this.angularPanel = loader.load(this.element, scopeProps, template);
+    const angularPanel = loader.load(this.element, scopeProps, template);
+
+    this.setState({ angularPanel });
   }
 
   cleanUpAngularPanel() {
-    if (this.angularPanel) {
-      this.angularPanel.destroy();
-      this.angularPanel = null;
+    if (this.state.angularPanel) {
+      this.state.angularPanel.destroy();
+      this.element = null;
     }
   }
 
@@ -112,50 +118,72 @@ export class DashboardPanel extends PureComponent<Props, State> {
     this.cleanUpAngularPanel();
   }
 
+  onMouseEnter = () => {
+    this.props.dashboard.setPanelFocus(this.props.panel.id);
+  };
+
+  onMouseLeave = () => {
+    this.props.dashboard.setPanelFocus(0);
+  };
+
   renderReactPanel() {
-    const { pluginExports } = this.state;
-    const containerClass = this.props.isEditing ? 'panel-editor-container' : 'panel-height-helper';
-    const panelWrapperClass = this.props.isEditing ? 'panel-editor-container__panel' : 'panel-height-helper';
-    // this might look strange with these classes that change when edit, but
-    // I want to try to keep markup (parents) for panel the same in edit mode to avoide unmount / new mount of panel
+    const { dashboard, panel } = this.props;
+    const { plugin } = this.state;
+
+    return <PanelChrome plugin={plugin} panel={panel} dashboard={dashboard} />;
+  }
+
+  renderAngularPanel() {
+    return <div ref={element => (this.element = element)} className="panel-height-helper" />;
+  }
+
+  render() {
+    const { panel, dashboard, isFullscreen, isEditing } = this.props;
+    const { plugin, angularPanel } = this.state;
+
+    if (this.isSpecial(panel.type)) {
+      return this.specialPanels[panel.type]();
+    }
+
+    // if we have not loaded plugin exports yet, wait
+    if (!plugin || !plugin.exports) {
+      return null;
+    }
+
+    const containerClass = classNames({ 'panel-editor-container': isEditing, 'panel-height-helper': !isEditing });
+    const panelWrapperClass = classNames({
+      'panel-wrapper': true,
+      'panel-wrapper--edit': isEditing,
+      'panel-wrapper--view': isFullscreen && !isEditing,
+    });
+
     return (
       <div className={containerClass}>
-        <div className={panelWrapperClass}>
-          <PanelChrome
-            component={pluginExports.PanelComponent}
-            panel={this.props.panel}
-            dashboard={this.props.dashboard}
+        <PanelResizer
+          isEditing={!!isEditing}
+          panel={panel}
+          render={(panelHeight: number | 'inherit') => (
+            <div
+              className={panelWrapperClass}
+              onMouseEnter={this.onMouseEnter}
+              onMouseLeave={this.onMouseLeave}
+              style={{ height: panelHeight }}
+            >
+              {plugin.exports.Panel && this.renderReactPanel()}
+              {plugin.exports.PanelCtrl && this.renderAngularPanel()}
+            </div>
+          )}
+        />
+        {panel.isEditing && (
+          <PanelEditor
+            panel={panel}
+            plugin={plugin}
+            dashboard={dashboard}
+            angularPanel={angularPanel}
+            onTypeChanged={this.onPluginTypeChanged}
           />
-        </div>
-        {this.props.panel.isEditing && (
-          <div className="panel-editor-container__editor">
-            <PanelEditor
-              panel={this.props.panel}
-              panelType={this.props.panel.type}
-              dashboard={this.props.dashboard}
-              onTypeChanged={this.onPluginTypeChanged}
-              pluginExports={pluginExports}
-            />
-          </div>
         )}
       </div>
     );
   }
-
-  render() {
-    if (this.isSpecial()) {
-      return this.specialPanels[this.props.panel.type]();
-    }
-
-    if (!this.state.pluginExports) {
-      return null;
-    }
-
-    if (this.state.pluginExports.PanelComponent) {
-      return this.renderReactPanel();
-    }
-
-    // legacy angular rendering
-    return <div ref={element => (this.element = element)} className="panel-height-helper" />;
-  }
 }
diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx
index d0122363668..9926410f40d 100644
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx
@@ -2,7 +2,10 @@
 import React, { Component } from 'react';
 
 // Services
-import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { getDatasourceSrv, DatasourceSrv } from 'app/features/plugins/datasource_srv';
+
+// Utils
+import kbn from 'app/core/utils/kbn';
 
 // Types
 import { TimeRange, LoadingState, DataQueryOptions, DataQueryResponse, TimeSeries } from 'app/types';
@@ -19,7 +22,10 @@ export interface Props {
   dashboardId?: number;
   isVisible?: boolean;
   timeRange?: TimeRange;
+  widthPixels: number;
   refreshCounter: number;
+  minInterval?: string;
+  maxDataPoints?: number;
   children: (r: RenderProps) => JSX.Element;
 }
 
@@ -36,6 +42,9 @@ export class DataPanel extends Component<Props, State> {
     dashboardId: 1,
   };
 
+  dataSourceSrv: DatasourceSrv = getDatasourceSrv();
+  isUnmounted = false;
+
   constructor(props: Props) {
     super(props);
 
@@ -49,7 +58,11 @@ export class DataPanel extends Component<Props, State> {
   }
 
   componentDidMount() {
-    console.log('DataPanel mount');
+    this.issueQueries();
+  }
+
+  componentWillUnmount() {
+    this.isUnmounted = true;
   }
 
   async componentDidUpdate(prevProps: Props) {
@@ -61,11 +74,11 @@ export class DataPanel extends Component<Props, State> {
   }
 
   hasPropsChanged(prevProps: Props) {
-    return this.props.refreshCounter !== prevProps.refreshCounter || this.props.isVisible !== prevProps.isVisible;
+    return this.props.refreshCounter !== prevProps.refreshCounter;
   }
 
-  issueQueries = async () => {
-    const { isVisible, queries, datasource, panelId, dashboardId, timeRange } = this.props;
+  private issueQueries = async () => {
+    const { isVisible, queries, datasource, panelId, dashboardId, timeRange, widthPixels, maxDataPoints } = this.props;
 
     if (!isVisible) {
       return;
@@ -79,8 +92,11 @@ export class DataPanel extends Component<Props, State> {
     this.setState({ loading: LoadingState.Loading });
 
     try {
-      const dataSourceSrv = getDatasourceSrv();
-      const ds = await dataSourceSrv.get(datasource);
+      const ds = await this.dataSourceSrv.get(datasource);
+
+      // TODO interpolate variables
+      const minInterval = this.props.minInterval || ds.interval;
+      const intervalRes = kbn.calculateInterval(timeRange, widthPixels, minInterval);
 
       const queryOptions: DataQueryOptions = {
         timezone: 'browser',
@@ -88,10 +104,10 @@ export class DataPanel extends Component<Props, State> {
         dashboardId: dashboardId,
         range: timeRange,
         rangeRaw: timeRange.raw,
-        interval: '1s',
-        intervalMs: 60000,
+        interval: intervalRes.interval,
+        intervalMs: intervalRes.intervalMs,
         targets: queries,
-        maxDataPoints: 500,
+        maxDataPoints: maxDataPoints || widthPixels,
         scopedVars: {},
         cacheTimeout: null,
       };
@@ -100,6 +116,10 @@ export class DataPanel extends Component<Props, State> {
       const resp = await ds.query(queryOptions);
       console.log('Issuing DataPanel query Resp', resp);
 
+      if (this.isUnmounted) {
+        return;
+      }
+
       this.setState({
         loading: LoadingState.Done,
         response: resp,
@@ -112,21 +132,26 @@ export class DataPanel extends Component<Props, State> {
   };
 
   render() {
+    const { queries } = this.props;
     const { response, loading, isFirstLoad } = this.state;
-    console.log('data panel render');
+
     const timeSeries = response.data;
 
-    if (isFirstLoad && (loading === LoadingState.Loading || loading === LoadingState.NotStarted)) {
+    if (isFirstLoad && loading === LoadingState.Loading) {
+      return this.renderLoadingSpinner();
+    }
+
+    if (!queries.length) {
       return (
-        <div className="loading">
-          <p>Loading</p>
+        <div className="panel-empty">
+          <p>Add a query to get some data!</p>
         </div>
       );
     }
 
     return (
       <>
-        {this.loadingSpinner}
+        {this.renderLoadingSpinner()}
         {this.props.children({
           timeSeries,
           loading,
@@ -135,12 +160,12 @@ export class DataPanel extends Component<Props, State> {
     );
   }
 
-  private get loadingSpinner(): JSX.Element {
+  private renderLoadingSpinner(): JSX.Element {
     const { loading } = this.state;
 
     if (loading === LoadingState.Loading) {
       return (
-        <div className="panel__loading">
+        <div className="panel-loading">
           <i className="fa fa-spinner fa-spin" />
         </div>
       );
diff --git a/public/app/features/dashboard/dashgrid/DataSourceOption.tsx b/public/app/features/dashboard/dashgrid/DataSourceOption.tsx
new file mode 100644
index 00000000000..0adfc4abe16
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/DataSourceOption.tsx
@@ -0,0 +1,31 @@
+import React, { SFC } from 'react';
+import Tooltip from 'app/core/components/Tooltip/Tooltip';
+
+interface Props {
+  label: string;
+  placeholder?: string;
+  name?: string;
+  value?: string;
+  onChange?: (evt: any) => void;
+  tooltipInfo?: any;
+}
+
+export const DataSourceOptions: SFC<Props> = ({ label, placeholder, name, value, onChange, tooltipInfo }) => {
+  const dsOption = (
+    <div className="gf-form gf-form--flex-end">
+      <label className="gf-form-label">{label}</label>
+      <input
+        type="text"
+        className="gf-form-input width-6"
+        placeholder={placeholder}
+        name={name}
+        spellCheck={false}
+        onBlur={evt => onChange(evt.target.value)}
+      />
+    </div>
+  );
+
+  return tooltipInfo ? <Tooltip content={tooltipInfo}>{dsOption}</Tooltip> : dsOption;
+};
+
+export default DataSourceOptions;
diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
new file mode 100644
index 00000000000..7606d327405
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx
@@ -0,0 +1,133 @@
+// Libraries
+import React, { PureComponent } from 'react';
+
+// Components
+import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
+import { FadeIn } from 'app/core/components/Animations/FadeIn';
+import { PanelOptionSection } from './PanelOptionSection';
+
+interface Props {
+  children: JSX.Element;
+  heading: string;
+  renderToolbar?: () => JSX.Element;
+  toolbarItems?: EditorToolBarView[];
+}
+
+export interface EditorToolBarView {
+  title?: string;
+  heading?: string;
+  imgSrc?: string;
+  icon?: string;
+  disabled?: boolean;
+  onClick?: () => void;
+  render: (closeFunction?: any) => JSX.Element | JSX.Element[];
+}
+
+interface State {
+  openView?: EditorToolBarView;
+  isOpen: boolean;
+  fadeIn: boolean;
+}
+
+export class EditorTabBody extends PureComponent<Props, State> {
+  static defaultProps = {
+    toolbarItems: [],
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      openView: null,
+      fadeIn: false,
+      isOpen: false,
+    };
+  }
+
+  componentDidMount() {
+    this.setState({ fadeIn: true });
+  }
+
+  onToggleToolBarView = (item: EditorToolBarView) => {
+    this.setState({
+      openView: item,
+      isOpen: !this.state.isOpen,
+    });
+  };
+
+  onCloseOpenView = () => {
+    this.setState({ isOpen: false });
+  };
+
+  static getDerivedStateFromProps(props, state) {
+    if (state.openView) {
+      const activeToolbarItem = props.toolbarItems.find(
+        item => item.title === state.openView.title && item.icon === state.openView.icon
+      );
+      if (activeToolbarItem) {
+        return {
+          ...state,
+          openView: activeToolbarItem,
+        };
+      }
+    }
+    return state;
+  }
+
+  renderButton(view: EditorToolBarView) {
+    const onClick = () => {
+      if (view.onClick) {
+        view.onClick();
+      }
+      this.onToggleToolBarView(view);
+    };
+
+    return (
+      <div className="nav-buttons" key={view.title + view.icon}>
+        <button className="btn navbar-button" onClick={onClick} disabled={view.disabled}>
+          {view.icon && <i className={view.icon} />} {view.title}
+        </button>
+      </div>
+    );
+  }
+
+  renderOpenView(view: EditorToolBarView) {
+    return (
+      <PanelOptionSection title={view.title || view.heading} onClose={this.onCloseOpenView}>
+        {view.render()}
+      </PanelOptionSection>
+    );
+  }
+
+  render() {
+    const { children, renderToolbar, heading, toolbarItems } = this.props;
+    const { openView, fadeIn, isOpen } = this.state;
+
+    return (
+      <>
+        <div className="toolbar">
+          <div className="toolbar__heading">{heading}</div>
+          {renderToolbar && renderToolbar()}
+          {toolbarItems.length > 0 && (
+            <>
+              <div className="gf-form--grow" />
+              {toolbarItems.map(item => this.renderButton(item))}
+            </>
+          )}
+        </div>
+        <div className="panel-editor__scroll">
+          <CustomScrollbar autoHide={false}>
+            <div className="panel-editor__content">
+              <FadeIn in={isOpen} duration={200} unmountOnExit={true}>
+                {openView && this.renderOpenView(openView)}
+              </FadeIn>
+              <FadeIn in={fadeIn} duration={50}>
+                {children}
+              </FadeIn>
+            </div>
+          </CustomScrollbar>
+        </div>
+      </>
+    );
+  }
+}
diff --git a/public/app/features/dashboard/dashgrid/GeneralTab.tsx b/public/app/features/dashboard/dashgrid/GeneralTab.tsx
new file mode 100644
index 00000000000..91e236c8b31
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/GeneralTab.tsx
@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react';
+
+import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+import { EditorTabBody } from './EditorTabBody';
+
+import { PanelModel } from '../panel_model';
+import './../../panel/GeneralTabCtrl';
+
+interface Props {
+  panel: PanelModel;
+}
+
+export class GeneralTab extends PureComponent<Props> {
+  element: any;
+  component: AngularComponent;
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    if (!this.element) {
+      return;
+    }
+
+    const { panel } = this.props;
+
+    const loader = getAngularLoader();
+    const template = '<panel-general-tab />';
+    const scopeProps = {
+      ctrl: {
+        panel: panel,
+      },
+    };
+
+    this.component = loader.load(this.element, scopeProps, template);
+  }
+
+  componentWillUnmount() {
+    if (this.component) {
+      this.component.destroy();
+    }
+  }
+
+  render() {
+    return (
+      <EditorTabBody heading="Panel Options" toolbarItems={[]}>
+        <div ref={element => (this.element = element)} />
+      </EditorTabBody>
+    );
+  }
+}
diff --git a/public/app/features/dashboard/dashgrid/KeyboardNavigation.tsx b/public/app/features/dashboard/dashgrid/KeyboardNavigation.tsx
new file mode 100644
index 00000000000..dab8371c925
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/KeyboardNavigation.tsx
@@ -0,0 +1,71 @@
+import React, { KeyboardEvent, Component } from 'react';
+
+interface State {
+  selected: number;
+}
+
+export interface KeyboardNavigationProps {
+  onKeyDown: (evt: KeyboardEvent<EventTarget>, maxSelectedIndex: number, onEnterAction: () => void) => void;
+  onMouseEnter: (select: number) => void;
+  selected: number;
+}
+
+interface Props {
+  render: (injectProps: any) => void;
+}
+
+class KeyboardNavigation extends Component<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selected: 0,
+    };
+  }
+
+  goToNext = (maxSelectedIndex: number) => {
+    const nextIndex = this.state.selected >= maxSelectedIndex ? 0 : this.state.selected + 1;
+    this.setState({
+      selected: nextIndex,
+    });
+  };
+
+  goToPrev = (maxSelectedIndex: number) => {
+    const nextIndex = this.state.selected <= 0 ? maxSelectedIndex : this.state.selected - 1;
+    this.setState({
+      selected: nextIndex,
+    });
+  };
+
+  onKeyDown = (evt: KeyboardEvent, maxSelectedIndex: number, onEnterAction: any) => {
+    if (evt.key === 'ArrowDown') {
+      evt.preventDefault();
+      this.goToNext(maxSelectedIndex);
+    }
+    if (evt.key === 'ArrowUp') {
+      evt.preventDefault();
+      this.goToPrev(maxSelectedIndex);
+    }
+    if (evt.key === 'Enter' && onEnterAction) {
+      onEnterAction();
+    }
+  };
+
+  onMouseEnter = (mouseEnterIndex: number) => {
+    this.setState({
+      selected: mouseEnterIndex,
+    });
+  };
+
+  render() {
+    const injectProps = {
+      onKeyDown: this.onKeyDown,
+      onMouseEnter: this.onMouseEnter,
+      selected: this.state.selected,
+    };
+
+    return <>{this.props.render({ ...injectProps })}</>;
+  }
+}
+
+export default KeyboardNavigation;
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index f6fc9028726..5df6f20fc23 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -1,31 +1,39 @@
 // Libraries
-import React, { ComponentClass, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
+import { AutoSizer } from 'react-virtualized';
 
 // Services
-import { getTimeSrv } from '../time_srv';
+import { getTimeSrv, TimeSrv } from '../time_srv';
 
 // Components
 import { PanelHeader } from './PanelHeader/PanelHeader';
 import { DataPanel } from './DataPanel';
 
+// Utils
+import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
+import { PANEL_HEADER_HEIGHT } from 'app/core/constants';
+
 // Types
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
-import { TimeRange, PanelProps } from 'app/types';
+import { PanelPlugin, TimeRange } from 'app/types';
 
 export interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
-  component: ComponentClass<PanelProps>;
+  plugin: PanelPlugin;
 }
 
 export interface State {
   refreshCounter: number;
   renderCounter: number;
+  timeInfo?: string;
   timeRange?: TimeRange;
 }
 
 export class PanelChrome extends PureComponent<Props, State> {
+  timeSrv: TimeSrv = getTimeSrv();
+
   constructor(props) {
     super(props);
 
@@ -46,22 +54,25 @@ export class PanelChrome extends PureComponent<Props, State> {
   }
 
   onRefresh = () => {
-    const timeSrv = getTimeSrv();
-    const timeRange = timeSrv.timeRange();
+    console.log('onRefresh');
+    if (!this.isVisible) {
+      return;
+    }
 
-    this.setState(prevState => ({
-      ...prevState,
+    const { panel } = this.props;
+    const timeData = applyPanelTimeOverrides(panel, this.timeSrv.timeRange());
+
+    this.setState({
       refreshCounter: this.state.refreshCounter + 1,
-      timeRange: timeRange,
-    }));
+      timeRange: timeData.timeRange,
+      timeInfo: timeData.timeInfo,
+    });
   };
 
   onRender = () => {
-    console.log('onRender');
-    this.setState(prevState => ({
-      ...prevState,
+    this.setState({
       renderCounter: this.state.renderCounter + 1,
-    }));
+    });
   };
 
   get isVisible() {
@@ -69,39 +80,60 @@ export class PanelChrome extends PureComponent<Props, State> {
   }
 
   render() {
-    const { panel, dashboard } = this.props;
-    const { refreshCounter, timeRange, renderCounter } = this.state;
+    const { panel, dashboard, plugin } = this.props;
+    const { refreshCounter, timeRange, timeInfo, renderCounter } = this.state;
 
-    const { datasource, targets } = panel;
-    const PanelComponent = this.props.component;
+    const { datasource, targets, transparent } = panel;
+    const PanelComponent = plugin.exports.Panel;
+    const containerClassNames = `panel-container panel-container--absolute ${transparent ? 'panel-transparent' : ''}`;
 
-    console.log('panelChrome render');
     return (
-      <div className="panel-container">
-        <PanelHeader panel={panel} dashboard={dashboard} />
-        <div className="panel-content">
-          <DataPanel
-            datasource={datasource}
-            queries={targets}
-            timeRange={timeRange}
-            isVisible={this.isVisible}
-            refreshCounter={refreshCounter}
-          >
-            {({ loading, timeSeries }) => {
-              console.log('panelcrome inner render');
-              return (
-                <PanelComponent
-                  loading={loading}
-                  timeSeries={timeSeries}
-                  timeRange={timeRange}
-                  options={panel.getOptions()}
-                  renderCounter={renderCounter}
-                />
-              );
-            }}
-          </DataPanel>
-        </div>
-      </div>
+      <AutoSizer>
+        {({ width, height }) => {
+          if (width === 0) {
+            return null;
+          }
+
+          return (
+            <div className={containerClassNames}>
+              <PanelHeader
+                panel={panel}
+                dashboard={dashboard}
+                timeInfo={timeInfo}
+                title={panel.title}
+                description={panel.description}
+                scopedVars={panel.scopedVars}
+                links={panel.links}
+              />
+
+              <DataPanel
+                datasource={datasource}
+                queries={targets}
+                timeRange={timeRange}
+                isVisible={this.isVisible}
+                widthPixels={width}
+                refreshCounter={refreshCounter}
+              >
+                {({ loading, timeSeries }) => {
+                  return (
+                    <div className="panel-content">
+                      <PanelComponent
+                        loading={loading}
+                        timeSeries={timeSeries}
+                        timeRange={timeRange}
+                        options={panel.getOptions(plugin.exports.PanelDefaults)}
+                        width={width}
+                        height={height - PANEL_HEADER_HEIGHT}
+                        renderCounter={renderCounter}
+                      />
+                    </div>
+                  );
+                }}
+              </DataPanel>
+            </div>
+          );
+        }}
+      </AutoSizer>
     );
   }
 }
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index 371ed22fff7..a746d6c4b91 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
@@ -2,73 +2,37 @@ import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 
 import { QueriesTab } from './QueriesTab';
-import { VizTypePicker } from './VizTypePicker';
+import { VisualizationTab } from './VisualizationTab';
+import { GeneralTab } from './GeneralTab';
+import { AlertTab } from './AlertTab';
 
-import { store } from 'app/store/configureStore';
+import config from 'app/core/config';
+import { store } from 'app/store/store';
 import { updateLocation } from 'app/core/actions';
+import { AngularComponent } from 'app/core/services/AngularLoader';
 
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
-import { PanelPlugin, PluginExports } from 'app/types/plugins';
+import { PanelPlugin } from 'app/types/plugins';
+
+import Tooltip from 'app/core/components/Tooltip/Tooltip';
 
 interface PanelEditorProps {
   panel: PanelModel;
   dashboard: DashboardModel;
-  panelType: string;
-  pluginExports: PluginExports;
+  plugin: PanelPlugin;
+  angularPanel?: AngularComponent;
   onTypeChanged: (newType: PanelPlugin) => void;
 }
 
 interface PanelEditorTab {
   id: string;
   text: string;
-  icon: string;
 }
 
 export class PanelEditor extends PureComponent<PanelEditorProps> {
-  tabs: PanelEditorTab[];
-
   constructor(props) {
     super(props);
-
-    this.tabs = [
-      { id: 'queries', text: 'Queries', icon: 'fa fa-database' },
-      { id: 'visualization', text: 'Visualization', icon: 'fa fa-line-chart' },
-    ];
-  }
-
-  renderQueriesTab() {
-    return <QueriesTab panel={this.props.panel} dashboard={this.props.dashboard} />;
-  }
-
-  renderPanelOptions() {
-    const { pluginExports, panel } = this.props;
-
-    if (pluginExports.PanelOptionsComponent) {
-      const OptionsComponent = pluginExports.PanelOptionsComponent;
-      return <OptionsComponent options={panel.getOptions()} onChange={this.onPanelOptionsChanged} />;
-    } else {
-      return <p>Visualization has no options</p>;
-    }
-  }
-
-  onPanelOptionsChanged = (options: any) => {
-    this.props.panel.updateOptions(options);
-    this.forceUpdate();
-  };
-
-  renderVizTab() {
-    return (
-      <div className="viz-editor">
-        <div className="viz-editor-col1">
-          <VizTypePicker currentType={this.props.panel.type} onTypeChanged={this.props.onTypeChanged} />
-        </div>
-        <div className="viz-editor-col2">
-          <h5 className="page-heading">Options</h5>
-          {this.renderPanelOptions()}
-        </div>
-      </div>
-    );
   }
 
   onChangeTab = (tab: PanelEditorTab) => {
@@ -81,28 +45,79 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
     this.forceUpdate();
   };
 
+  renderCurrentTab(activeTab: string) {
+    const { panel, dashboard, onTypeChanged, plugin, angularPanel } = this.props;
+
+    switch (activeTab) {
+      case 'advanced':
+        return <GeneralTab panel={panel} />;
+      case 'queries':
+        return <QueriesTab panel={panel} dashboard={dashboard} />;
+      case 'alert':
+        return <AlertTab angularPanel={angularPanel} />;
+      case 'visualization':
+        return (
+          <VisualizationTab
+            panel={panel}
+            dashboard={dashboard}
+            plugin={plugin}
+            onTypeChanged={onTypeChanged}
+            angularPanel={angularPanel}
+          />
+        );
+      default:
+        return null;
+    }
+  }
+
   render() {
-    const { location } = store.getState();
-    const activeTab = location.query.tab || 'queries';
+    const { plugin } = this.props;
+    let activeTab = store.getState().location.query.tab || 'queries';
+
+    const tabs: PanelEditorTab[] = [
+      { id: 'queries', text: 'Queries' },
+      { id: 'visualization', text: 'Visualization' },
+      { id: 'advanced', text: 'Panel Options' },
+    ];
+
+    // handle panels that do not have queries tab
+    if (plugin.exports.PanelCtrl) {
+      if (!plugin.exports.PanelCtrl.prototype.onDataReceived) {
+        // remove queries tab
+        tabs.shift();
+        // switch tab
+        if (activeTab === 'queries') {
+          activeTab = 'visualization';
+        }
+      }
+    }
+
+    if (config.alertingEnabled && plugin.id === 'graph') {
+      tabs.push({
+        id: 'alert',
+        text: 'Alert',
+      });
+    }
 
     return (
-      <div className="tabbed-view tabbed-view--new">
-        <div className="tabbed-view-header">
-          <ul className="gf-tabs">
-            {this.tabs.map(tab => {
-              return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
-            })}
-          </ul>
+      <div className="panel-editor-container__editor">
+        {
+          // <div className="panel-editor__close">
+          //   <i className="fa fa-arrow-left" />
+          // </div>
+          // <div className="panel-editor-resizer">
+          //   <div className="panel-editor-resizer__handle">
+          //     <div className="panel-editor-resizer__handle-dots" />
+          //   </div>
+          // </div>
+        }
 
-          <button className="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
-            <i className="fa fa-remove" />
-          </button>
-        </div>
-
-        <div className="tabbed-view-body">
-          {activeTab === 'queries' && this.renderQueriesTab()}
-          {activeTab === 'visualization' && this.renderVizTab()}
+        <div className="panel-editor-tabs">
+          {tabs.map(tab => {
+            return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
+          })}
         </div>
+        <div className="panel-editor__right">{this.renderCurrentTab(activeTab)}</div>
       </div>
     );
   }
@@ -116,15 +131,17 @@ interface TabItemParams {
 
 function TabItem({ tab, activeTab, onClick }: TabItemParams) {
   const tabClasses = classNames({
-    'gf-tabs-link': true,
+    'panel-editor-tabs__link': true,
     active: activeTab === tab.id,
   });
 
   return (
-    <li className="gf-tabs-item" key={tab.id}>
-      <a className={tabClasses} onClick={() => onClick(tab)}>
-        <i className={tab.icon} /> {tab.text}
+    <div className="panel-editor-tabs__item" onClick={() => onClick(tab)}>
+      <a className={tabClasses}>
+        <Tooltip content={`${tab.text}`} className="popper__manager--block" placement="auto">
+          <i className={`gicon gicon-${tab.id}${activeTab === tab.id ? '-active' : ''}`} />
+        </Tooltip>
       </a>
-    </li>
+    </div>
   );
 }
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index ab3081ba21e..8b7afd7d09e 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -1,51 +1,88 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import classNames from 'classnames';
 
+import PanelHeaderCorner from './PanelHeaderCorner';
 import { PanelHeaderMenu } from './PanelHeaderMenu';
 
 import { DashboardModel } from 'app/features/dashboard/dashboard_model';
 import { PanelModel } from 'app/features/dashboard/panel_model';
+import { ClickOutsideWrapper } from 'app/core/components/ClickOutsideWrapper/ClickOutsideWrapper';
 
 export interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
+  timeInfo: string;
+  title?: string;
+  description?: string;
+  scopedVars?: string;
+  links?: [];
 }
 
-export class PanelHeader extends PureComponent<Props> {
+interface State {
+  panelMenuOpen: boolean;
+}
+
+export class PanelHeader extends Component<Props, State> {
+  state = {
+    panelMenuOpen: false,
+  };
+
+  onMenuToggle = event => {
+    event.stopPropagation();
+
+    this.setState(prevState => ({
+      panelMenuOpen: !prevState.panelMenuOpen,
+    }));
+  };
+
+  closeMenu = () => {
+    this.setState({
+      panelMenuOpen: false,
+    });
+  };
+
   render() {
     const isFullscreen = false;
     const isLoading = false;
     const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
-    const { panel, dashboard } = this.props;
-
+    const { panel, dashboard, timeInfo } = this.props;
     return (
-      <div className={panelHeaderClass}>
-        <span className="panel-info-corner">
-          <i className="fa" />
-          <span className="panel-info-corner-inner" />
-        </span>
-
-        {isLoading && (
-          <span className="panel-loading">
-            <i className="fa fa-spinner fa-spin" />
-          </span>
-        )}
-
-        <div className="panel-title-container">
-          <div className="panel-title">
-            <span className="icon-gf panel-alert-icon" />
-            <span className="panel-title-text" data-toggle="dropdown">
-              {panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
+      <>
+        <PanelHeaderCorner
+          panel={panel}
+          title={panel.title}
+          description={panel.description}
+          scopedVars={panel.scopedVars}
+          links={panel.links}
+        />
+        <div className={panelHeaderClass}>
+          {isLoading && (
+            <span className="panel-loading">
+              <i className="fa fa-spinner fa-spin" />
             </span>
+          )}
+          <div className="panel-title-container" onClick={this.onMenuToggle}>
+            <div className="panel-title">
+              <span className="icon-gf panel-alert-icon" />
+              <span className="panel-title-text">
+                {panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
+              </span>
 
-            <PanelHeaderMenu panel={panel} dashboard={dashboard} />
+              {this.state.panelMenuOpen && (
+                <ClickOutsideWrapper onClick={this.closeMenu}>
+                  <PanelHeaderMenu panel={panel} dashboard={dashboard} />
+                </ClickOutsideWrapper>
+              )}
 
-            <span className="panel-time-info">
-              <i className="fa fa-clock-o" /> 4m
-            </span>
+              {timeInfo && (
+                <span className="panel-time-info">
+                  <i className="fa fa-clock-o" /> {timeInfo}
+                </span>
+              )}
+            </div>
           </div>
         </div>
-      </div>
+      </>
     );
   }
 }
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
new file mode 100644
index 00000000000..331e469a60d
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import { PanelModel } from 'app/features/dashboard/panel_model';
+import Tooltip from 'app/core/components/Tooltip/Tooltip';
+import templateSrv from 'app/features/templating/template_srv';
+import { LinkSrv } from 'app/features/dashboard/panellinks/link_srv';
+import { getTimeSrv, TimeSrv } from 'app/features/dashboard/time_srv';
+import Remarkable from 'remarkable';
+
+enum InfoModes {
+  Error = 'Error',
+  Info = 'Info',
+  Links = 'Links',
+}
+
+interface Props {
+  panel: PanelModel;
+  title?: string;
+  description?: string;
+  scopedVars?: string;
+  links?: [];
+}
+
+export class PanelHeaderCorner extends Component<Props> {
+  timeSrv: TimeSrv = getTimeSrv();
+
+  getInfoMode = () => {
+    const { panel } = this.props;
+    if (!!panel.description) {
+      return InfoModes.Info;
+    }
+    if (panel.links && panel.links.length) {
+      return InfoModes.Links;
+    }
+
+    return undefined;
+  };
+
+  getInfoContent = (): JSX.Element => {
+    const { panel } = this.props;
+    const markdown = panel.description;
+    const linkSrv = new LinkSrv(templateSrv, this.timeSrv);
+    const interpolatedMarkdown = templateSrv.replace(markdown, panel.scopedVars);
+    const remarkableInterpolatedMarkdown = new Remarkable().render(interpolatedMarkdown);
+
+    const html = (
+      <div className="markdown-html">
+        <div dangerouslySetInnerHTML={{ __html: remarkableInterpolatedMarkdown }} />
+        {panel.links &&
+          panel.links.length > 0 && (
+            <ul className="text-left">
+              {panel.links.map((link, idx) => {
+                const info = linkSrv.getPanelLinkAnchorInfo(link, panel.scopedVars);
+                return (
+                  <li key={idx}>
+                    <a className="panel-menu-link" href={info.href} target={info.target}>
+                      {info.title}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+      </div>
+    );
+
+    return html;
+  };
+
+  render() {
+    const infoMode: InfoModes | undefined = this.getInfoMode();
+
+    if (!infoMode) {
+      return null;
+    }
+
+    return (
+      <>
+        {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (
+          <Tooltip
+            content={this.getInfoContent}
+            className="popper__manager--block"
+            refClassName={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
+            placement="bottom-start"
+          >
+            <i className="fa" />
+            <span className="panel-info-corner-inner" />
+          </Tooltip>
+        ) : null}
+      </>
+    );
+  }
+}
+
+export default PanelHeaderCorner;
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx
index 8eb6b31bf27..cde540c0509 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx
@@ -35,6 +35,7 @@ export class PanelHeaderMenu extends PureComponent<Props> {
   render() {
     const { dashboard, panel } = this.props;
     const menu = getPanelMenu(dashboard, panel);
-    return <div className="panel-menu-container dropdown">{this.renderItems(menu)}</div>;
+
+    return <div className="panel-menu-container dropdown open">{this.renderItems(menu)}</div>;
   }
 }
diff --git a/public/app/features/dashboard/dashgrid/PanelOptionSection.tsx b/public/app/features/dashboard/dashgrid/PanelOptionSection.tsx
new file mode 100644
index 00000000000..f38d99d2237
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/PanelOptionSection.tsx
@@ -0,0 +1,26 @@
+// Libraries
+import React, { SFC } from 'react';
+
+interface Props {
+  title?: string;
+  onClose?: () => void;
+  children: JSX.Element | JSX.Element[];
+}
+
+export const PanelOptionSection: SFC<Props> = props => {
+  return (
+    <div className="panel-option-section">
+      {props.title && (
+        <div className="panel-option-section__header">
+          {props.title}
+          {props.onClose && (
+            <button className="btn btn-link" onClick={props.onClose}>
+              <i className="fa fa-remove" />
+            </button>
+          )}
+        </div>
+      )}
+      <div className="panel-option-section__body">{props.children}</div>
+    </div>
+  );
+};
diff --git a/public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx b/public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx
new file mode 100644
index 00000000000..82008b10d2f
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx
@@ -0,0 +1,64 @@
+import _ from 'lodash';
+import React, { PureComponent } from 'react';
+import { PanelPlugin, PanelProps } from 'app/types';
+
+interface Props {
+  pluginId: string;
+}
+
+class PanelPluginNotFound extends PureComponent<Props> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const style = {
+      display: 'flex',
+      alignItems: 'center',
+      textAlign: 'center' as 'center',
+      height: '100%',
+    };
+
+    return (
+      <div style={style}>
+        <div className="alert alert-error" style={{ margin: '0 auto' }}>
+          Panel plugin with id {this.props.pluginId} could not be found
+        </div>
+      </div>
+    );
+  }
+}
+
+export function getPanelPluginNotFound(id: string): PanelPlugin {
+  const NotFound = class NotFound extends PureComponent<PanelProps> {
+    render() {
+      return <PanelPluginNotFound pluginId={id} />;
+    }
+  };
+
+  return {
+    id: id,
+    name: id,
+    sort: 100,
+    module: '',
+    baseUrl: '',
+    info: {
+      author: {
+        name: '',
+      },
+      description: '',
+      links: [],
+      logos: {
+        large: '',
+        small: '',
+      },
+      screenshots: [],
+      updated: '',
+      version: '',
+    },
+
+    exports: {
+      Panel: NotFound,
+    },
+  };
+}
diff --git a/public/app/features/dashboard/dashgrid/PanelResizer.tsx b/public/app/features/dashboard/dashgrid/PanelResizer.tsx
new file mode 100644
index 00000000000..7d52076b54b
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/PanelResizer.tsx
@@ -0,0 +1,81 @@
+import React, { PureComponent } from 'react';
+import { throttle } from 'lodash';
+import Draggable from 'react-draggable';
+
+import { PanelModel } from '../panel_model';
+
+interface Props {
+  isEditing: boolean;
+  render: (height: number | 'inherit') => JSX.Element;
+  panel: PanelModel;
+}
+
+interface State {
+  editorHeight: number;
+}
+
+export class PanelResizer extends PureComponent<Props, State> {
+  initialHeight: number = Math.floor(document.documentElement.scrollHeight * 0.4);
+  prevEditorHeight: number;
+  throttledChangeHeight: (height: number) => void;
+  throttledResizeDone: () => void;
+
+  constructor(props) {
+    super(props);
+    const { panel } = this.props;
+
+    this.state = {
+      editorHeight: this.initialHeight,
+    };
+
+    this.throttledChangeHeight = throttle(this.changeHeight, 20, { trailing: true });
+    this.throttledResizeDone = throttle(() => {
+      panel.resizeDone();
+    }, 50);
+  }
+
+  get largestHeight() {
+    return document.documentElement.scrollHeight * 0.9;
+  }
+  get smallestHeight() {
+    return 100;
+  }
+
+  changeHeight = height => {
+    const sh = this.smallestHeight;
+    const lh = this.largestHeight;
+    height = height < sh ? sh : height;
+    height = height > lh ? lh : height;
+
+    this.prevEditorHeight = this.state.editorHeight;
+    this.setState({
+      editorHeight: height,
+    });
+  };
+
+  onDrag = (evt, data) => {
+    const newHeight = this.state.editorHeight + data.y;
+    this.throttledChangeHeight(newHeight);
+    this.throttledResizeDone();
+  };
+
+  render() {
+    const { render, isEditing } = this.props;
+    const { editorHeight } = this.state;
+
+    return (
+      <>
+        {render(isEditing ? editorHeight : 'inherit')}
+        {isEditing && (
+          <div className="panel-editor-container__resizer">
+            <Draggable axis="y" grid={[100, 1]} onDrag={this.onDrag} position={{ x: 0, y: 0 }}>
+              <div className="panel-editor-resizer">
+                <div className="panel-editor-resizer__handle" />
+              </div>
+            </Draggable>
+          </div>
+        )}
+      </>
+    );
+  }
+}
diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
index f13f212826a..9ad0bb3cadd 100644
--- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx
+++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx
@@ -1,24 +1,79 @@
 // Libraries
-import React, { PureComponent } from 'react';
+import React, { SFC, PureComponent } from 'react';
+import _ from 'lodash';
 
-// Services & utils
+// Components
+import './../../panel/metrics_tab';
+import { EditorTabBody } from './EditorTabBody';
+import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
+import { QueryInspector } from './QueryInspector';
+import { QueryOptions } from './QueryOptions';
+import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
+import { PanelOptionSection } from './PanelOptionSection';
+
+// Services
+import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+import config from 'app/core/config';
 
 // Types
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
+import { DataSourceSelectItem, DataQuery } from 'app/types';
+import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 
 interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
 }
 
-export class QueriesTab extends PureComponent<Props> {
-  element: any;
+interface State {
+  currentDS: DataSourceSelectItem;
+  helpContent: JSX.Element;
+  isLoadingHelp: boolean;
+  isPickerOpen: boolean;
+  isAddingMixed: boolean;
+}
+
+interface LoadingPlaceholderProps {
+  text: string;
+}
+
+const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => <h2>{text}</h2>;
+
+export class QueriesTab extends PureComponent<Props, State> {
+  element: HTMLElement;
   component: AngularComponent;
+  datasources: DataSourceSelectItem[] = getDatasourceSrv().getMetricSources();
+  backendSrv: BackendSrv = getBackendSrv();
 
   constructor(props) {
     super(props);
+    const { panel } = props;
+
+    this.state = {
+      currentDS: this.datasources.find(datasource => datasource.value === panel.datasource),
+      isLoadingHelp: false,
+      helpContent: null,
+      isPickerOpen: false,
+      isAddingMixed: false,
+    };
+  }
+
+  getAngularQueryComponentScope(): AngularQueryComponentScope {
+    const { panel, dashboard } = this.props;
+
+    return {
+      panel: panel,
+      dashboard: dashboard,
+      refresh: () => panel.refresh(),
+      render: () => panel.render,
+      addQuery: this.onAddQuery,
+      moveQuery: this.onMoveQuery,
+      removeQuery: this.onRemoveQuery,
+      events: panel.events,
+    };
   }
 
   componentDidMount() {
@@ -26,16 +81,10 @@ export class QueriesTab extends PureComponent<Props> {
       return;
     }
 
-    const { panel, dashboard } = this.props;
-
     const loader = getAngularLoader();
     const template = '<metrics-tab />';
     const scopeProps = {
-      ctrl: {
-        panel: panel,
-        dashboard: dashboard,
-        refresh: () => panel.refresh(),
-      },
+      ctrl: this.getAngularQueryComponentScope(),
     };
 
     this.component = loader.load(this.element, scopeProps, template);
@@ -47,7 +96,157 @@ export class QueriesTab extends PureComponent<Props> {
     }
   }
 
+  onChangeDataSource = datasource => {
+    const { panel } = this.props;
+    const { currentDS } = this.state;
+
+    // switching to mixed
+    if (datasource.meta.mixed) {
+      panel.targets.forEach(target => {
+        target.datasource = panel.datasource;
+        if (!target.datasource) {
+          target.datasource = config.defaultDatasource;
+        }
+      });
+    } else if (currentDS) {
+      // if switching from mixed
+      if (currentDS.meta.mixed) {
+        for (const target of panel.targets) {
+          delete target.datasource;
+        }
+      } else if (currentDS.meta.id !== datasource.meta.id) {
+        // we are changing data source type, clear queries
+        panel.targets = [{ refId: 'A' }];
+      }
+    }
+
+    panel.datasource = datasource.value;
+    panel.refresh();
+
+    this.setState({
+      currentDS: datasource,
+    });
+  };
+
+  renderQueryInspector = () => {
+    const { panel } = this.props;
+    return <QueryInspector panel={panel} LoadingPlaceholder={LoadingPlaceholder} />;
+  };
+
+  renderHelp = () => {
+    return <PluginHelp plugin={this.state.currentDS.meta} type="query_help" />;
+  };
+
+  onAddQuery = (query?: Partial<DataQuery>) => {
+    this.props.panel.addQuery(query);
+    this.forceUpdate();
+  };
+
+  onAddQueryClick = () => {
+    if (this.state.currentDS.meta.mixed) {
+      this.setState({ isAddingMixed: true });
+      return;
+    }
+
+    this.props.panel.addQuery();
+    this.component.digest();
+    this.forceUpdate();
+  };
+
+  onRemoveQuery = (query: DataQuery) => {
+    const { panel } = this.props;
+
+    const index = _.indexOf(panel.targets, query);
+    panel.targets.splice(index, 1);
+    panel.refresh();
+
+    this.forceUpdate();
+  };
+
+  onMoveQuery = (query: DataQuery, direction: number) => {
+    const { panel } = this.props;
+
+    const index = _.indexOf(panel.targets, query);
+    _.move(panel.targets, index, index + direction);
+
+    this.forceUpdate();
+  };
+
+  renderToolbar = () => {
+    const { currentDS } = this.state;
+
+    return <DataSourcePicker datasources={this.datasources} onChange={this.onChangeDataSource} current={currentDS} />;
+  };
+
+  renderMixedPicker = () => {
+    return (
+      <DataSourcePicker
+        datasources={this.datasources}
+        onChange={this.onAddMixedQuery}
+        current={null}
+        autoFocus={true}
+        onBlur={this.onMixedPickerBlur}
+      />
+    );
+  };
+
+  onAddMixedQuery = datasource => {
+    this.onAddQuery({ datasource: datasource.name });
+    this.component.digest();
+    this.setState({ isAddingMixed: false });
+  };
+
+  onMixedPickerBlur = () => {
+    this.setState({ isAddingMixed: false });
+  };
+
   render() {
-    return <div ref={element => (this.element = element)} className="panel-height-helper" />;
+    const { panel } = this.props;
+    const { currentDS, isAddingMixed } = this.state;
+
+    const queryInspector = {
+      title: 'Query Inspector',
+      render: this.renderQueryInspector,
+    };
+
+    const dsHelp = {
+      heading: 'Help',
+      icon: 'fa fa-question',
+      render: this.renderHelp,
+    };
+
+    return (
+      <EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
+        <>
+          <PanelOptionSection>
+            <div className="query-editor-rows">
+              <div ref={element => (this.element = element)} />
+
+              <div className="gf-form-query">
+                <div className="gf-form gf-form-query-letter-cell">
+                  <label className="gf-form-label">
+                    <span className="gf-form-query-letter-cell-carret muted">
+                      <i className="fa fa-caret-down" />
+                    </span>{' '}
+                    <span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
+                  </label>
+                </div>
+                <div className="gf-form">
+                  {!isAddingMixed && (
+                    <button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
+                      Add Query
+                    </button>
+                  )}
+                  {isAddingMixed && this.renderMixedPicker()}
+                </div>
+              </div>
+            </div>
+          </PanelOptionSection>
+          <PanelOptionSection>
+            <QueryOptions panel={panel} datasource={currentDS} />
+          </PanelOptionSection>
+        </>
+      </EditorTabBody>
+    );
   }
 }
diff --git a/public/app/features/dashboard/dashgrid/QueryInspector.tsx b/public/app/features/dashboard/dashgrid/QueryInspector.tsx
new file mode 100644
index 00000000000..090bc220bc0
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/QueryInspector.tsx
@@ -0,0 +1,220 @@
+import React, { PureComponent } from 'react';
+import { JSONFormatter } from 'app/core/components/JSONFormatter/JSONFormatter';
+import appEvents from 'app/core/app_events';
+import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
+
+interface DsQuery {
+  isLoading: boolean;
+  response: {};
+}
+
+interface Props {
+  panel: any;
+  LoadingPlaceholder: any;
+}
+
+interface State {
+  allNodesExpanded: boolean;
+  isMocking: boolean;
+  mockedResponse: string;
+  dsQuery: DsQuery;
+}
+
+export class QueryInspector extends PureComponent<Props, State> {
+  formattedJson: any;
+  clipboard: any;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      allNodesExpanded: null,
+      isMocking: false,
+      mockedResponse: '',
+      dsQuery: {
+        isLoading: false,
+        response: {},
+      },
+    };
+  }
+
+  componentDidMount() {
+    const { panel } = this.props;
+    panel.events.on('refresh', this.onPanelRefresh);
+    appEvents.on('ds-request-response', this.onDataSourceResponse);
+    panel.refresh();
+  }
+
+  componentWillUnmount() {
+    const { panel } = this.props;
+    appEvents.off('ds-request-response', this.onDataSourceResponse);
+    panel.events.off('refresh', this.onPanelRefresh);
+  }
+
+  handleMocking(response) {
+    const { mockedResponse } = this.state;
+    let mockedData;
+    try {
+      mockedData = JSON.parse(mockedResponse);
+    } catch (err) {
+      appEvents.emit('alert-error', ['R: Failed to parse mocked response']);
+      return;
+    }
+
+    response.data = mockedData;
+  }
+
+  onPanelRefresh = () => {
+    this.setState(prevState => ({
+      ...prevState,
+      dsQuery: {
+        isLoading: true,
+        response: {},
+      },
+    }));
+  };
+
+  onDataSourceResponse = (response: any = {}) => {
+    if (this.state.isMocking) {
+      this.handleMocking(response);
+      return;
+    }
+
+    response = { ...response }; // clone - dont modify the response
+
+    if (response.headers) {
+      delete response.headers;
+    }
+
+    if (response.config) {
+      response.request = response.config;
+      delete response.config;
+      delete response.request.transformRequest;
+      delete response.request.transformResponse;
+      delete response.request.paramSerializer;
+      delete response.request.jsonpCallbackParam;
+      delete response.request.headers;
+      delete response.request.requestId;
+      delete response.request.inspect;
+      delete response.request.retry;
+      delete response.request.timeout;
+    }
+
+    if (response.data) {
+      response.response = response.data;
+
+      delete response.data;
+      delete response.status;
+      delete response.statusText;
+      delete response.$$config;
+    }
+    this.setState(prevState => ({
+      ...prevState,
+      dsQuery: {
+        isLoading: false,
+        response: response,
+      },
+    }));
+  };
+
+  setFormattedJson = formattedJson => {
+    this.formattedJson = formattedJson;
+  };
+
+  getTextForClipboard = () => {
+    return JSON.stringify(this.formattedJson, null, 2);
+  };
+
+  onClipboardSuccess = () => {
+    appEvents.emit('alert-success', ['Content copied to clipboard']);
+  };
+
+  onToggleExpand = () => {
+    this.setState(prevState => ({
+      ...prevState,
+      allNodesExpanded: !this.state.allNodesExpanded,
+    }));
+  };
+
+  onToggleMocking = () => {
+    this.setState(prevState => ({
+      ...prevState,
+      isMocking: !this.state.isMocking,
+    }));
+  };
+
+  getNrOfOpenNodes = () => {
+    if (this.state.allNodesExpanded === null) {
+      return 3; // 3 is default, ie when state is null
+    } else if (this.state.allNodesExpanded) {
+      return 20;
+    }
+    return 1;
+  };
+
+  setMockedResponse = evt => {
+    const mockedResponse = evt.target.value;
+    this.setState(prevState => ({
+      ...prevState,
+      mockedResponse,
+    }));
+  };
+
+  renderExpandCollapse = () => {
+    const { allNodesExpanded } = this.state;
+
+    const collapse = (
+      <>
+        <i className="fa fa-minus-square-o" /> Collapse All
+      </>
+    );
+    const expand = (
+      <>
+        <i className="fa fa-plus-square-o" /> Expand All
+      </>
+    );
+    return allNodesExpanded ? collapse : expand;
+  };
+
+  render() {
+    const { response, isLoading } = this.state.dsQuery;
+    const { LoadingPlaceholder } = this.props;
+    const { isMocking } = this.state;
+    const openNodes = this.getNrOfOpenNodes();
+
+    if (isLoading) {
+      return <LoadingPlaceholder text="Loading query inspector..." />;
+    }
+
+    return (
+      <>
+        <div className="pull-right">
+          <button className="btn btn-transparent btn-p-x-0 m-r-1" onClick={this.onToggleExpand}>
+            {this.renderExpandCollapse()}
+          </button>
+          <CopyToClipboard
+            className="btn btn-transparent btn-p-x-0"
+            text={this.getTextForClipboard}
+            onSuccess={this.onClipboardSuccess}
+          >
+            <i className="fa fa-clipboard" /> Copy to Clipboard
+          </CopyToClipboard>
+        </div>
+
+        {!isMocking && <JSONFormatter json={response} open={openNodes} onDidRender={this.setFormattedJson} />}
+        {isMocking && (
+          <div className="query-troubleshooter__body">
+            <div className="gf-form p-l-1 gf-form--v-stretch">
+              <textarea
+                className="gf-form-input"
+                style={{ width: '95%' }}
+                rows={10}
+                onInput={this.setMockedResponse}
+                placeholder="JSON"
+              />
+            </div>
+          </div>
+        )}
+      </>
+    );
+  }
+}
diff --git a/public/app/features/dashboard/dashgrid/QueryOptions.tsx b/public/app/features/dashboard/dashgrid/QueryOptions.tsx
new file mode 100644
index 00000000000..dd084418c40
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/QueryOptions.tsx
@@ -0,0 +1,199 @@
+// Libraries
+import React, { PureComponent } from 'react';
+
+// Utils
+import { isValidTimeSpan } from 'app/core/utils/rangeutil';
+
+// Components
+import { Switch } from 'app/core/components/Switch/Switch';
+import { Input } from 'app/core/components/Form';
+import { EventsWithValidation } from 'app/core/components/Form/Input';
+import { InputStatus } from 'app/core/components/Form/Input';
+import DataSourceOption from './DataSourceOption';
+
+// Types
+import { PanelModel } from '../panel_model';
+import { ValidationEvents, DataSourceSelectItem } from 'app/types';
+
+const timeRangeValidationEvents: ValidationEvents = {
+  [EventsWithValidation.onBlur]: [
+    {
+      rule: value => {
+        if (!value) {
+          return true;
+        }
+        return isValidTimeSpan(value);
+      },
+      errorMessage: 'Not a valid timespan',
+    },
+  ],
+};
+
+const emptyToNull = (value: string) => {
+  return value === '' ? null : value;
+};
+
+interface Props {
+  panel: PanelModel;
+  datasource: DataSourceSelectItem;
+}
+
+interface State {
+  relativeTime: string;
+  timeShift: string;
+}
+
+export class QueryOptions extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      relativeTime: props.panel.timeFrom || '',
+      timeShift: props.panel.timeShift || '',
+    };
+  }
+
+  onRelativeTimeChange = event => {
+    this.setState({
+      relativeTime: event.target.value,
+    });
+  };
+
+  onTimeShiftChange = event => {
+    this.setState({
+      timeShift: event.target.value,
+    });
+  };
+
+  onOverrideTime = (evt, status: InputStatus) => {
+    const { value } = evt.target;
+    const { panel } = this.props;
+    const emptyToNullValue = emptyToNull(value);
+    if (status === InputStatus.Valid && panel.timeFrom !== emptyToNullValue) {
+      panel.timeFrom = emptyToNullValue;
+      panel.refresh();
+    }
+  };
+
+  onTimeShift = (evt, status: InputStatus) => {
+    const { value } = evt.target;
+    const { panel } = this.props;
+    const emptyToNullValue = emptyToNull(value);
+    if (status === InputStatus.Valid && panel.timeShift !== emptyToNullValue) {
+      panel.timeShift = emptyToNullValue;
+      panel.refresh();
+    }
+  };
+
+  onToggleTimeOverride = () => {
+    const { panel } = this.props;
+    panel.hideTimeOverride = !panel.hideTimeOverride;
+    panel.refresh();
+  };
+
+  renderOptions() {
+    const { datasource, panel } = this.props;
+    const { queryOptions } = datasource.meta;
+
+    if (!queryOptions) {
+      return null;
+    }
+
+    const onChangeFn = (panelKey: string) => {
+      return (value: string | number) => {
+        panel[panelKey] = value;
+        panel.refresh();
+      };
+    };
+
+    const allOptions = {
+      cacheTimeout: {
+        label: 'Cache timeout',
+        placeholder: '60',
+        name: 'cacheTimeout',
+        value: panel.cacheTimeout,
+        tooltipInfo: (
+          <>
+            If your time series store has a query cache this option can override the default cache timeout. Specify a
+            numeric value in seconds.
+          </>
+        ),
+      },
+      maxDataPoints: {
+        label: 'Max data points',
+        placeholder: 'auto',
+        name: 'maxDataPoints',
+        value: panel.maxDataPoints,
+        tooltipInfo: (
+          <>
+            The maximum data points the query should return. For graphs this is automatically set to one data point per
+            pixel.
+          </>
+        ),
+      },
+      minInterval: {
+        label: 'Min time interval',
+        placeholder: '0',
+        name: 'minInterval',
+        value: panel.interval,
+        panelKey: 'interval',
+        tooltipInfo: (
+          <>
+            A lower limit for the auto group by time interval. Recommended to be set to write frequency, for example{' '}
+            <code>1m</code> if your data is written every minute. Access auto interval via variable{' '}
+            <code>$__interval</code> for time range string and <code>$__interval_ms</code> for numeric variable that can
+            be used in math expressions.
+          </>
+        ),
+      },
+    };
+
+    return Object.keys(queryOptions).map(key => {
+      const options = allOptions[key];
+      return <DataSourceOption key={key} {...options} onChange={onChangeFn(allOptions[key].panelKey || key)} />;
+    });
+  }
+
+  render() {
+    const hideTimeOverride = this.props.panel.hideTimeOverride;
+    const { relativeTime, timeShift } = this.state;
+
+    return (
+      <div className="gf-form-inline">
+        {this.renderOptions()}
+
+        <div className="gf-form">
+          <span className="gf-form-label">Relative time</span>
+          <Input
+            type="text"
+            className="width-6"
+            placeholder="1h"
+            onChange={this.onRelativeTimeChange}
+            onBlur={this.onOverrideTime}
+            validationEvents={timeRangeValidationEvents}
+            hideErrorMessage={true}
+            value={relativeTime}
+          />
+        </div>
+
+        <div className="gf-form">
+          <span className="gf-form-label">Time shift</span>
+          <Input
+            type="text"
+            className="width-6"
+            placeholder="1h"
+            onChange={this.onTimeShiftChange}
+            onBlur={this.onTimeShift}
+            validationEvents={timeRangeValidationEvents}
+            hideErrorMessage={true}
+            value={timeShift}
+          />
+        </div>
+
+        <div className="gf-form-inline">
+          <Switch label="Hide time info" checked={hideTimeOverride} onChange={this.onToggleTimeOverride} />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
new file mode 100644
index 00000000000..42d9bf6a6eb
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
@@ -0,0 +1,231 @@
+// Libraries
+import React, { PureComponent } from 'react';
+
+// Utils & Services
+import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+
+// Components
+import { EditorTabBody } from './EditorTabBody';
+import { VizTypePicker } from './VizTypePicker';
+import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
+import { FadeIn } from 'app/core/components/Animations/FadeIn';
+import { PanelOptionSection } from './PanelOptionSection';
+
+// Types
+import { PanelModel } from '../panel_model';
+import { DashboardModel } from '../dashboard_model';
+import { PanelPlugin } from 'app/types/plugins';
+
+interface Props {
+  panel: PanelModel;
+  dashboard: DashboardModel;
+  plugin: PanelPlugin;
+  angularPanel?: AngularComponent;
+  onTypeChanged: (newType: PanelPlugin) => void;
+}
+
+interface State {
+  isVizPickerOpen: boolean;
+  searchQuery: string;
+}
+
+export class VisualizationTab extends PureComponent<Props, State> {
+  element: HTMLElement;
+  angularOptions: AngularComponent;
+  searchInput: HTMLElement;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isVizPickerOpen: false,
+      searchQuery: '',
+    };
+  }
+
+  getPanelDefaultOptions = () => {
+    const { panel, plugin } = this.props;
+
+    if (plugin.exports.PanelDefaults) {
+      return panel.getOptions(plugin.exports.PanelDefaults.options);
+    }
+
+    return panel.getOptions(plugin.exports.PanelDefaults);
+  };
+
+  renderPanelOptions() {
+    const { plugin, angularPanel } = this.props;
+    const { PanelOptions } = plugin.exports;
+
+    if (angularPanel) {
+      return <div ref={element => (this.element = element)} />;
+    }
+
+    return (
+      <PanelOptionSection>
+        {PanelOptions ? (
+          <PanelOptions options={this.getPanelDefaultOptions()} onChange={this.onPanelOptionsChanged} />
+        ) : (
+          <p>Visualization has no options</p>
+        )}
+      </PanelOptionSection>
+    );
+  }
+
+  componentDidMount() {
+    if (this.shouldLoadAngularOptions()) {
+      this.loadAngularOptions();
+    }
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (this.props.plugin !== prevProps.plugin) {
+      this.cleanUpAngularOptions();
+    }
+
+    if (this.shouldLoadAngularOptions()) {
+      this.loadAngularOptions();
+    }
+  }
+
+  shouldLoadAngularOptions() {
+    return this.props.angularPanel && this.element && !this.angularOptions;
+  }
+
+  loadAngularOptions() {
+    const { angularPanel } = this.props;
+
+    const scope = angularPanel.getScope();
+
+    // When full page reloading in edit mode the angular panel has on fully compiled & instantiated yet
+    if (!scope.$$childHead) {
+      setTimeout(() => {
+        this.forceUpdate();
+      });
+      return;
+    }
+
+    const panelCtrl = scope.$$childHead.ctrl;
+    panelCtrl.initEditMode();
+
+    let template = '';
+    for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
+      template +=
+        `
+      <div class="panel-option-section" ng-cloak>` +
+        (i > 0 ? `<div class="panel-option-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
+        `<div class="panel-option-section__body">
+          <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
+        </div>
+      </div>
+      `;
+    }
+
+    const loader = getAngularLoader();
+    const scopeProps = { ctrl: panelCtrl };
+
+    this.angularOptions = loader.load(this.element, scopeProps, template);
+  }
+
+  componentWillUnmount() {
+    this.cleanUpAngularOptions();
+  }
+
+  cleanUpAngularOptions() {
+    if (this.angularOptions) {
+      this.angularOptions.destroy();
+      this.angularOptions = null;
+    }
+  }
+
+  onPanelOptionsChanged = (options: any) => {
+    this.props.panel.updateOptions(options);
+    this.forceUpdate();
+  };
+
+  onOpenVizPicker = () => {
+    this.setState({ isVizPickerOpen: true });
+  };
+
+  onCloseVizPicker = () => {
+    this.setState({ isVizPickerOpen: false });
+  };
+
+  onSearchQueryChange = evt => {
+    const value = evt.target.value;
+    this.setState({
+      searchQuery: value,
+    });
+  };
+
+  renderToolbar = (): JSX.Element => {
+    const { plugin } = this.props;
+    const { searchQuery } = this.state;
+
+    if (this.state.isVizPickerOpen) {
+      return (
+        <>
+          <label className="gf-form--has-input-icon">
+            <input
+              type="text"
+              className="gf-form-input width-13"
+              placeholder=""
+              onChange={this.onSearchQueryChange}
+              value={searchQuery}
+              ref={elem => elem && elem.focus()}
+            />
+            <i className="gf-form-input-icon fa fa-search" />
+          </label>
+          <button className="btn btn-link toolbar__close" onClick={this.onCloseVizPicker}>
+            <i className="fa fa-chevron-up" />
+          </button>
+        </>
+      );
+    } else {
+      return (
+        <div className="toolbar__main" onClick={this.onOpenVizPicker}>
+          <img className="toolbar__main-image" src={plugin.info.logos.small} />
+          <div className="toolbar__main-name">{plugin.name}</div>
+          <i className="fa fa-caret-down" />
+        </div>
+      );
+    }
+  };
+
+  onTypeChanged = (plugin: PanelPlugin) => {
+    if (plugin.id === this.props.plugin.id) {
+      this.setState({ isVizPickerOpen: false });
+    } else {
+      this.props.onTypeChanged(plugin);
+    }
+  };
+
+  renderHelp = () => <PluginHelp plugin={this.props.plugin} type="help" />;
+
+  render() {
+    const { plugin } = this.props;
+    const { isVizPickerOpen, searchQuery } = this.state;
+
+    const pluginHelp = {
+      heading: 'Help',
+      icon: 'fa fa-question',
+      render: this.renderHelp,
+    };
+
+    return (
+      <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[pluginHelp]}>
+        <>
+          <FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
+            <VizTypePicker
+              current={plugin}
+              onTypeChanged={this.onTypeChanged}
+              searchQuery={searchQuery}
+              onClose={this.onCloseVizPicker}
+            />
+          </FadeIn>
+          {this.renderPanelOptions()}
+        </>
+      </EditorTabBody>
+    );
+  }
+}
diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
index 9402133df34..f0dd7d0f2c7 100644
--- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
+++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx
@@ -1,29 +1,31 @@
 import React, { PureComponent } from 'react';
-import classNames from 'classnames';
-import config from 'app/core/config';
-import { PanelPlugin } from 'app/types/plugins';
-import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
 import _ from 'lodash';
 
-interface Props {
-  currentType: string;
+import config from 'app/core/config';
+import { PanelPlugin } from 'app/types/plugins';
+import VizTypePickerPlugin from './VizTypePickerPlugin';
+
+export interface Props {
+  current: PanelPlugin;
   onTypeChanged: (newType: PanelPlugin) => void;
+  searchQuery: string;
+  onClose: () => void;
 }
 
-interface State {
-  pluginList: PanelPlugin[];
-}
+export class VizTypePicker extends PureComponent<Props> {
+  searchInput: HTMLElement;
+  pluginList = this.getPanelPlugins('');
 
-export class VizTypePicker extends PureComponent<Props, State> {
   constructor(props) {
     super(props);
-
-    this.state = {
-      pluginList: this.getPanelPlugins(''),
-    };
   }
 
-  getPanelPlugins(filter) {
+  get maxSelectedIndex() {
+    const filteredPluginList = this.getFilteredPluginList();
+    return filteredPluginList.length - 1;
+  }
+
+  getPanelPlugins(filter): PanelPlugin[] {
     const panels = _.chain(config.panels)
       .filter({ hideFromList: false })
       .map(item => item)
@@ -33,35 +35,39 @@ export class VizTypePicker extends PureComponent<Props, State> {
     return _.sortBy(panels, 'sort');
   }
 
-  renderVizPlugin = (plugin, index) => {
-    const cssClass = classNames({
-      'viz-picker__item': true,
-      'viz-picker__item--selected': plugin.id === this.props.currentType,
-    });
+  renderVizPlugin = (plugin: PanelPlugin, index: number) => {
+    const { onTypeChanged } = this.props;
+    const isCurrent = plugin.id === this.props.current.id;
 
     return (
-      <div key={index} className={cssClass} onClick={() => this.props.onTypeChanged(plugin)} title={plugin.name}>
-        <img className="viz-picker__item-img" src={plugin.info.logos.small} />
-        <div className="viz-picker__item-name">{plugin.name}</div>
-      </div>
+      <VizTypePickerPlugin
+        key={plugin.id}
+        isCurrent={isCurrent}
+        plugin={plugin}
+        onClick={() => onTypeChanged(plugin)}
+      />
     );
   };
 
+  getFilteredPluginList = (): PanelPlugin[] => {
+    const { searchQuery } = this.props;
+    const regex = new RegExp(searchQuery, 'i');
+    const pluginList = this.pluginList;
+
+    const filtered = pluginList.filter(item => {
+      return regex.test(item.name);
+    });
+
+    return filtered;
+  };
+
   render() {
+    const filteredPluginList = this.getFilteredPluginList();
+
     return (
       <div className="viz-picker">
-        <div className="viz-picker__search">
-          <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 type" />
-              <i className="gf-form-input-icon fa fa-search" />
-            </label>
-          </div>
-        </div>
-        <div className="viz-picker__items">
-          <CustomScrollbar>
-            <div className="scroll-margin-helper">{this.state.pluginList.map(this.renderVizPlugin)}</div>
-          </CustomScrollbar>
+        <div className="viz-picker-list">
+          {filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))}
         </div>
       </div>
     );
diff --git a/public/app/features/dashboard/dashgrid/VizTypePickerPlugin.tsx b/public/app/features/dashboard/dashgrid/VizTypePickerPlugin.tsx
new file mode 100644
index 00000000000..430cf7c7ee3
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/VizTypePickerPlugin.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import classNames from 'classnames';
+import { PanelPlugin } from 'app/types/plugins';
+
+interface Props {
+  isCurrent: boolean;
+  plugin: PanelPlugin;
+  onClick: () => void;
+}
+
+const VizTypePickerPlugin = React.memo(
+  ({ isCurrent, plugin, onClick }: Props) => {
+    const cssClass = classNames({
+      'viz-picker__item': true,
+      'viz-picker__item--current': isCurrent,
+    });
+
+    return (
+      <div className={cssClass} onClick={onClick} title={plugin.name}>
+        <div className="viz-picker__item-name">{plugin.name}</div>
+        <img className="viz-picker__item-img" src={plugin.info.logos.small} />
+      </div>
+    );
+  },
+  (prevProps, nextProps) => {
+    if (prevProps.isCurrent === nextProps.isCurrent) {
+      return true;
+    }
+    return false;
+  }
+);
+
+export default VizTypePickerPlugin;
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts
index 7312d6db784..1c83b2d0bdb 100644
--- a/public/app/features/dashboard/dashnav/dashnav.ts
+++ b/public/app/features/dashboard/dashnav/dashnav.ts
@@ -74,6 +74,11 @@ export class DashNavCtrl {
   }
 
   showSearch() {
+    if (this.dashboard.meta.fullscreen) {
+      this.close();
+      return;
+    }
+
     appEvents.emit('show-dash-search');
   }
 
@@ -86,7 +91,7 @@ export class DashNavCtrl {
 
     this.dashboard.addPanel({
       type: 'add-panel',
-      gridPos: { x: 0, y: 0, w: 12, h: 9 },
+      gridPos: { x: 0, y: 0, w: 12, h: 8 },
       title: 'Panel Title',
     });
   }
diff --git a/public/app/features/dashboard/history/history.html b/public/app/features/dashboard/history/history.html
index 48caddeb90e..5a053c46cc6 100644
--- a/public/app/features/dashboard/history/history.html
+++ b/public/app/features/dashboard/history/history.html
@@ -30,8 +30,8 @@
         <tbody>
           <tr ng-repeat="revision in ctrl.revisions">
             <td class="filter-table__switch-cell" bs-tooltip="!revision.checked && ctrl.canCompare ? 'You can only compare 2 versions at a time' : ''" data-placement="right">
-              <gf-form-switch switch-class="gf-form-switch--table-cell" checked="revision.checked" on-change="ctrl.revisionSelectionChanged()" ng-disabled="!revision.checked && ctrl.canCompare">
-              </gf-form-switch>
+              <gf-form-checkbox switch-class="gf-form-switch--table-cell" checked="revision.checked" on-change="ctrl.revisionSelectionChanged()" ng-disabled="!revision.checked && ctrl.canCompare">
+              </gf-form-checkbox>
             </td>
             <td class="text-center">{{revision.version}}</td>
             <td>{{revision.createdDateString}}</td>
diff --git a/public/app/features/dashboard/panel_model.ts b/public/app/features/dashboard/panel_model.ts
index 737841be7e8..2d5a70b47dd 100644
--- a/public/app/features/dashboard/panel_model.ts
+++ b/public/app/features/dashboard/panel_model.ts
@@ -1,5 +1,7 @@
 import { Emitter } from 'app/core/utils/emitter';
 import _ from 'lodash';
+import { PANEL_OPTIONS_KEY_PREFIX } from 'app/core/constants';
+import { DataQuery } from 'app/types';
 
 export interface GridPos {
   x: number;
@@ -14,12 +16,53 @@ const notPersistedProperties: { [str: string]: boolean } = {
   fullscreen: true,
   isEditing: true,
   hasRefreshed: true,
+  cachedPluginOptions: true,
+};
+
+// For angular panels we need to clean up properties when changing type
+// To make sure the change happens without strange bugs happening when panels use same
+// named property with different type / value expectations
+// This is not required for react panels
+
+const mustKeepProps: { [str: string]: boolean } = {
+  id: true,
+  gridPos: true,
+  type: true,
+  title: true,
+  scopedVars: true,
+  repeat: true,
+  repeatIteration: true,
+  repeatPanelId: true,
+  repeatDirection: true,
+  repeatedByRow: true,
+  minSpan: true,
+  collapsed: true,
+  panels: true,
+  targets: true,
+  datasource: true,
+  timeFrom: true,
+  timeShift: true,
+  hideTimeOverride: true,
+  maxDataPoints: true,
+  interval: true,
+  description: true,
+  links: true,
+  fullscreen: true,
+  isEditing: true,
+  hasRefreshed: true,
+  events: true,
+  cacheTimeout: true,
+  nullPointMode: true,
+  cachedPluginOptions: true,
+  transparent: true,
 };
 
 const defaults: any = {
   gridPos: { x: 0, y: 0, h: 3, w: 6 },
   datasource: null,
   targets: [{}],
+  cachedPluginOptions: {},
+  transparent: false,
 };
 
 export class PanelModel {
@@ -42,11 +85,26 @@ export class PanelModel {
   datasource: string;
   thresholds?: any;
 
+  snapshotData?: any;
+  timeFrom?: any;
+  timeShift?: any;
+  hideTimeOverride?: any;
+
+  maxDataPoints?: number;
+  interval?: string;
+  description?: string;
+  links?: [];
+  transparent: boolean;
+
   // non persisted
   fullscreen: boolean;
   isEditing: boolean;
   hasRefreshed: boolean;
   events: Emitter;
+  cacheTimeout?: any;
+
+  // cache props between plugins
+  cachedPluginOptions?: any;
 
   constructor(model) {
     this.events = new Emitter();
@@ -60,8 +118,8 @@ export class PanelModel {
     _.defaultsDeep(this, _.cloneDeep(defaults));
   }
 
-  getOptions() {
-    return this[this.getOptionsKey()] || {};
+  getOptions(panelDefaults) {
+    return _.defaultsDeep(this[this.getOptionsKey()] || {}, panelDefaults);
   }
 
   updateOptions(options: object) {
@@ -72,7 +130,7 @@ export class PanelModel {
   }
 
   private getOptionsKey() {
-    return this.type + 'Options';
+    return PANEL_OPTIONS_KEY_PREFIX + this.type;
   }
 
   getSaveModel() {
@@ -136,11 +194,66 @@ export class PanelModel {
     this.events.emit('panel-initialized');
   }
 
-  changeType(pluginId: string) {
+  private getOptionsToRemember() {
+    return Object.keys(this).reduce((acc, property) => {
+      if (notPersistedProperties[property] || mustKeepProps[property]) {
+        return acc;
+      }
+      return {
+        ...acc,
+        [property]: this[property],
+      };
+    }, {});
+  }
+
+  private saveCurrentPanelOptions() {
+    this.cachedPluginOptions[this.type] = this.getOptionsToRemember();
+  }
+
+  private restorePanelOptions(pluginId: string) {
+    const prevOptions = this.cachedPluginOptions[pluginId] || {};
+
+    Object.keys(prevOptions).map(property => {
+      this[property] = prevOptions[property];
+    });
+  }
+
+  changeType(pluginId: string, fromAngularPanel: boolean) {
+    this.saveCurrentPanelOptions();
     this.type = pluginId;
 
-    delete this.thresholds;
-    delete this.alert;
+    // for angular panels only we need to remove all events and let angular panels do some cleanup
+    if (fromAngularPanel) {
+      this.destroy();
+
+      for (const key of _.keys(this)) {
+        if (mustKeepProps[key]) {
+          continue;
+        }
+
+        delete this[key];
+      }
+    }
+
+    this.restorePanelOptions(pluginId);
+  }
+
+  addQuery(query?: Partial<DataQuery>) {
+    query = query || { refId: 'A' };
+    query.refId = this.getNextQueryLetter();
+    query.isNew = true;
+
+    this.targets.push(query);
+  }
+
+  getNextQueryLetter(): string {
+    const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+    return _.find(letters, refId => {
+      return _.every(this.targets, other => {
+        return other.refId !== refId;
+      });
+    });
   }
 
   destroy() {
diff --git a/public/app/features/dashboard/panellinks/link_srv.ts b/public/app/features/dashboard/panellinks/link_srv.ts
index f9ad40c50da..d6b2cd3636b 100644
--- a/public/app/features/dashboard/panellinks/link_srv.ts
+++ b/public/app/features/dashboard/panellinks/link_srv.ts
@@ -73,6 +73,7 @@ export class LinkSrv {
 
   getPanelLinkAnchorInfo(link, scopedVars) {
     const info: any = {};
+    info.target = link.targetBlank ? '_blank' : '';
     if (link.type === 'absolute') {
       info.target = link.targetBlank ? '_blank' : '_self';
       info.href = this.templateSrv.replace(link.url || '', scopedVars);
@@ -80,11 +81,9 @@ export class LinkSrv {
     } else if (link.url) {
       info.href = link.url;
       info.title = this.templateSrv.replace(link.title || '', scopedVars);
-      info.target = link.targetBlank ? '_blank' : '';
     } else if (link.dashUri) {
       info.href = 'dashboard/' + link.dashUri + '?';
       info.title = this.templateSrv.replace(link.title || '', scopedVars);
-      info.target = link.targetBlank ? '_blank' : '';
     } else {
       info.title = this.templateSrv.replace(link.title || '', scopedVars);
       const slug = kbn.slugifyForUrl(link.dashboard || '');
diff --git a/public/app/features/dashboard/panellinks/module.html b/public/app/features/dashboard/panellinks/module.html
index 96d9b785a1b..0dcb0ef3ed6 100644
--- a/public/app/features/dashboard/panellinks/module.html
+++ b/public/app/features/dashboard/panellinks/module.html
@@ -1,8 +1,4 @@
 <div class="editor-row">
-	<h5 class="section-heading">
-		Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
-	</h5>
-
 	<div class="gf-form-group" ng-repeat="link in panel.links">
 		<div class="section">
 			<div class="gf-form max-width-25">
diff --git a/public/app/features/dashboard/share_snapshot_ctrl.ts b/public/app/features/dashboard/share_snapshot_ctrl.ts
index ac09d63054d..7dcf0469e77 100644
--- a/public/app/features/dashboard/share_snapshot_ctrl.ts
+++ b/public/app/features/dashboard/share_snapshot_ctrl.ts
@@ -27,7 +27,6 @@ export class ShareSnapshotCtrl {
 
     $scope.init = () => {
       backendSrv.get('/api/snapshot/shared-options').then(options => {
-        $scope.externalUrl = options['externalSnapshotURL'];
         $scope.sharingButtonText = options['externalSnapshotName'];
         $scope.externalEnabled = options['externalEnabled'];
       });
@@ -61,30 +60,14 @@ export class ShareSnapshotCtrl {
         dashboard: dash,
         name: dash.title,
         expires: $scope.snapshot.expires,
+        external: external,
       };
 
-      const postUrl = external ? $scope.externalUrl + $scope.apiUrl : $scope.apiUrl;
-
-      backendSrv.post(postUrl, cmdData).then(
+      backendSrv.post($scope.apiUrl, cmdData).then(
         results => {
           $scope.loading = false;
-
-          if (external) {
-            $scope.deleteUrl = results.deleteUrl;
-            $scope.snapshotUrl = results.url;
-            $scope.saveExternalSnapshotRef(cmdData, results);
-          } else {
-            const url = $location.url();
-            let baseUrl = $location.absUrl();
-
-            if (url !== '/') {
-              baseUrl = baseUrl.replace(url, '') + '/';
-            }
-
-            $scope.snapshotUrl = baseUrl + 'dashboard/snapshot/' + results.key;
-            $scope.deleteUrl = baseUrl + 'api/snapshots-delete/' + results.deleteKey;
-          }
-
+          $scope.deleteUrl = results.deleteUrl;
+          $scope.snapshotUrl = results.url;
           $scope.step = 2;
         },
         () => {
@@ -161,14 +144,6 @@ export class ShareSnapshotCtrl {
         $scope.step = 3;
       });
     };
-
-    $scope.saveExternalSnapshotRef = (cmdData, results) => {
-      // save external in local instance as well
-      cmdData.external = true;
-      cmdData.key = results.key;
-      cmdData.deleteKey = results.deleteKey;
-      backendSrv.post('/api/snapshots/', cmdData);
-    };
   }
 }
 
diff --git a/public/app/features/dashboard/specs/AddPanelPanel.test.tsx b/public/app/features/dashboard/specs/AddPanelPanel.test.tsx
deleted file mode 100644
index c5f66fed32a..00000000000
--- a/public/app/features/dashboard/specs/AddPanelPanel.test.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react';
-import { AddPanelPanel } from './../dashgrid/AddPanelPanel';
-import { PanelModel } from '../panel_model';
-import { shallow } from 'enzyme';
-import config from '../../../core/config';
-
-jest.mock('app/core/store', () => ({
-  get: key => {
-    return null;
-  },
-  delete: key => {
-    return null;
-  },
-}));
-
-describe('AddPanelPanel', () => {
-  let wrapper, dashboardMock, panel;
-
-  beforeEach(() => {
-    config.panels = [
-      {
-        id: 'singlestat',
-        hideFromList: false,
-        name: 'Singlestat',
-        sort: 2,
-        module: '',
-        baseUrl: '',
-        meta: {},
-        info: {
-          logos: {
-            small: '',
-          },
-        },
-      },
-      {
-        id: 'hidden',
-        hideFromList: true,
-        name: 'Hidden',
-        sort: 100,
-        meta: {},
-        module: '',
-        baseUrl: '',
-        info: {
-          logos: {
-            small: '',
-          },
-        },
-      },
-      {
-        id: 'graph',
-        hideFromList: false,
-        name: 'Graph',
-        sort: 1,
-        meta: {},
-        module: '',
-        baseUrl: '',
-        info: {
-          logos: {
-            small: '',
-          },
-        },
-      },
-      {
-        id: 'alexander_zabbix',
-        hideFromList: false,
-        name: 'Zabbix',
-        sort: 100,
-        meta: {},
-        module: '',
-        baseUrl: '',
-        info: {
-          logos: {
-            small: '',
-          },
-        },
-      },
-      {
-        id: 'piechart',
-        hideFromList: false,
-        name: 'Piechart',
-        sort: 100,
-        meta: {},
-        module: '',
-        baseUrl: '',
-        info: {
-          logos: {
-            small: '',
-          },
-        },
-      },
-    ];
-
-    dashboardMock = { toggleRow: jest.fn() };
-
-    panel = new PanelModel({ collapsed: false });
-    wrapper = shallow(<AddPanelPanel panel={panel} dashboard={dashboardMock} />);
-  });
-
-  it('should fetch all panels sorted with core plugins first', () => {
-    //console.log(wrapper.debug());
-    //console.log(wrapper.find('.add-panel__item').get(0).props.title);
-    expect(wrapper.find('.add-panel__item').get(1).props.title).toBe('Singlestat');
-    expect(wrapper.find('.add-panel__item').get(4).props.title).toBe('Piechart');
-  });
-
-  it('should filter', () => {
-    wrapper.find('input').simulate('change', { target: { value: 'p' } });
-
-    expect(wrapper.find('.add-panel__item').get(1).props.title).toBe('Piechart');
-    expect(wrapper.find('.add-panel__item').get(0).props.title).toBe('Graph');
-  });
-});
diff --git a/public/app/features/dashboard/specs/panel_model.test.ts b/public/app/features/dashboard/specs/panel_model.test.ts
new file mode 100644
index 00000000000..36bb8d6297e
--- /dev/null
+++ b/public/app/features/dashboard/specs/panel_model.test.ts
@@ -0,0 +1,54 @@
+import _ from 'lodash';
+import { PanelModel } from '../panel_model';
+
+describe('PanelModel', () => {
+  describe('when creating new panel model', () => {
+    let model;
+
+    beforeEach(() => {
+      model = new PanelModel({
+        type: 'table',
+        showColumns: true,
+      });
+    });
+
+    it('should apply defaults', () => {
+      expect(model.gridPos.h).toBe(3);
+    });
+
+    it('should set model props on instance', () => {
+      expect(model.showColumns).toBe(true);
+    });
+
+    it('getSaveModel should remove defaults', () => {
+      const saveModel = model.getSaveModel();
+      expect(saveModel.gridPos).toBe(undefined);
+    });
+
+    it('getSaveModel should remove nonPersistedProperties', () => {
+      const saveModel = model.getSaveModel();
+      expect(saveModel.events).toBe(undefined);
+    });
+
+    describe('when changing panel type', () => {
+      beforeEach(() => {
+        model.changeType('graph', true);
+        model.alert = { id: 2 };
+      });
+
+      it('should remove table properties but keep core props', () => {
+        expect(model.showColumns).toBe(undefined);
+      });
+
+      it('should restore table properties when changing back', () => {
+        model.changeType('table', true);
+        expect(model.showColumns).toBe(true);
+      });
+
+      it('should remove alert rule when changing type that does not support it', () => {
+        model.changeType('table', true);
+        expect(model.alert).toBe(undefined);
+      });
+    });
+  });
+});
diff --git a/public/app/features/dashboard/state/actions.ts b/public/app/features/dashboard/state/actions.ts
index bc35ff31ff0..4dcf0a925b7 100644
--- a/public/app/features/dashboard/state/actions.ts
+++ b/public/app/features/dashboard/state/actions.ts
@@ -67,7 +67,7 @@ export function updateDashboardPermission(
 
       const updated = toUpdateItem(item);
 
-      // if this is the item we want to update, update it's permisssion
+      // if this is the item we want to update, update it's permission
       if (itemToUpdate === item) {
         updated.permission = level;
       }
diff --git a/public/app/features/dashboard/time_srv.ts b/public/app/features/dashboard/time_srv.ts
index 03b4a408125..ac717de15c9 100644
--- a/public/app/features/dashboard/time_srv.ts
+++ b/public/app/features/dashboard/time_srv.ts
@@ -20,7 +20,7 @@ export class TimeSrv {
   private autoRefreshBlocked: boolean;
 
   /** @ngInject */
-  constructor(private $rootScope, private $timeout, private $location, private timer, private contextSrv) {
+  constructor($rootScope, private $timeout, private $location, private timer, private contextSrv) {
     // default time
     this.time = { from: '6h', to: 'now' };
 
@@ -189,7 +189,6 @@ export class TimeSrv {
       this.$location.search(urlParams);
     }
 
-    this.$rootScope.appEvent('time-range-changed', this.time);
     this.$timeout(this.refreshDashboard.bind(this), 0);
   }
 
diff --git a/public/app/features/dashboard/timepicker/timepicker.html b/public/app/features/dashboard/timepicker/timepicker.html
index 3e38881d480..168d2036a7f 100644
--- a/public/app/features/dashboard/timepicker/timepicker.html
+++ b/public/app/features/dashboard/timepicker/timepicker.html
@@ -24,60 +24,67 @@
 </div>
 
 <div ng-if="ctrl.isOpen" class="gf-timepicker-dropdown">
-  <form name="timeForm" class="gf-timepicker-absolute-section">
-    <h3 class="section-heading">Custom range</h3>
-
-    <label class="small">From:</label>
-    <div class="gf-form-inline">
-      <div class="gf-form max-width-28">
-        <input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.from" input-datetime>
-      </div>
-      <div class="gf-form">
-        <button class="btn gf-form-btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
-          <i class="fa fa-calendar"></i>
-        </button>
-      </div>
+  <div class="popover-box">
+    <div class="popover-box__header">
+      <span class="popover-box__title">Quick ranges</span>
     </div>
-
-    <div ng-if="openFromPicker">
-      <datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteFromChanged()"></datepicker>
+    <div class="popover-box__body gf-timepicker-relative-section">
+      <ul ng-repeat="group in ctrl.timeOptions">
+        <li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
+          <a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
+        </li>
+      </ul>
     </div>
+  </div>
 
-
-    <label class="small">To:</label>
-    <div class="gf-form-inline">
-      <div class="gf-form max-width-28">
-        <input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.to" input-datetime>
-      </div>
-      <div class="gf-form">
-        <button class="btn gf-form-btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
-          <i class="fa fa-calendar"></i>
-        </button>
-      </div>
+  <div class="popover-box">
+    <div class="popover-box__header">
+      <span class="popover-box__title">Custom range</span>
     </div>
-
-    <div ng-if="openToPicker">
-      <datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteToChanged()"></datepicker>
-    </div>
-
-    <label class="small">Refreshing every:</label>
-    <div class="gf-form-inline">
-      <div class="gf-form max-width-28">
-        <select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
+    <form name="timeForm" class="popover-box__body gf-timepicker-absolute-section">
+      <label class="small">From:</label>
+      <div class="gf-form-inline">
+        <div class="gf-form max-width-28">
+          <input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.from" input-datetime>
+        </div>
+        <div class="gf-form">
+          <button class="btn gf-form-btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
+            <i class="fa fa-calendar"></i>
+          </button>
+        </div>
       </div>
-      <div class="gf-form">
-        <button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
-      </div>
-    </div>
-  </form>
 
-  <div class="gf-timepicker-relative-section">
-    <h3 class="section-heading">Quick ranges</h3>
-    <ul ng-repeat="group in ctrl.timeOptions">
-      <li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
-        <a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
-      </li>
-    </ul>
+      <div ng-if="openFromPicker">
+        <datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteFromChanged()"></datepicker>
+      </div>
+
+
+      <label class="small">To:</label>
+      <div class="gf-form-inline">
+        <div class="gf-form max-width-28">
+          <input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.to" input-datetime>
+        </div>
+        <div class="gf-form">
+          <button class="btn gf-form-btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
+            <i class="fa fa-calendar"></i>
+          </button>
+        </div>
+      </div>
+
+      <div ng-if="openToPicker">
+        <datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteToChanged()"></datepicker>
+      </div>
+
+      <label class="small">Refreshing every:</label>
+      <div class="gf-form-inline">
+        <div class="gf-form max-width-28">
+          <select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
+        </div>
+        <div class="gf-form">
+          <button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
+        </div>
+      </div>
+    </form>
   </div>
 </div>
 
diff --git a/public/app/features/dashboard/utils/getPanelMenu.ts b/public/app/features/dashboard/utils/getPanelMenu.ts
index 709eef3be38..07ce54108f3 100644
--- a/public/app/features/dashboard/utils/getPanelMenu.ts
+++ b/public/app/features/dashboard/utils/getPanelMenu.ts
@@ -1,5 +1,5 @@
 import { updateLocation } from 'app/core/actions';
-import { store } from 'app/store/configureStore';
+import { store } from 'app/store/store';
 
 import { removePanel, duplicatePanel, copyPanel, editPanelJson, sharePanel } from 'app/features/dashboard/utils/panel';
 import { PanelModel } from 'app/features/dashboard/panel_model';
@@ -12,7 +12,7 @@ export const getPanelMenu = (dashboard: DashboardModel, panel: PanelModel) => {
       updateLocation({
         query: {
           panelId: panel.id,
-          edit: false,
+          edit: null,
           fullscreen: true,
         },
         partial: true,
diff --git a/public/app/features/dashboard/utils/panel.ts b/public/app/features/dashboard/utils/panel.ts
index 151c1ea8d61..0b0f127e2aa 100644
--- a/public/app/features/dashboard/utils/panel.ts
+++ b/public/app/features/dashboard/utils/panel.ts
@@ -1,7 +1,21 @@
-import appEvents from 'app/core/app_events';
+// Store
+import store from 'app/core/store';
+
+// Models
 import { DashboardModel } from 'app/features/dashboard/dashboard_model';
 import { PanelModel } from 'app/features/dashboard/panel_model';
-import store from 'app/core/store';
+import { TimeRange } from 'app/types/series';
+
+// Utils
+import { isString as _isString } from 'lodash';
+import * as rangeUtil from 'app/core/utils/rangeutil';
+import * as dateMath from 'app/core/utils/datemath';
+import appEvents from 'app/core/app_events';
+
+// Services
+import templateSrv from 'app/features/templating/template_srv';
+
+// Constants
 import { LS_PANEL_COPY_KEY } from 'app/core/constants';
 
 export const removePanel = (dashboard: DashboardModel, panel: PanelModel, ask: boolean) => {
@@ -84,3 +98,70 @@ export const toggleLegend = (panel: PanelModel) => {
   // panel.legend.show = !panel.legend.show;
   refreshPanel(panel);
 };
+
+export interface TimeOverrideResult {
+  timeRange: TimeRange;
+  timeInfo: string;
+}
+
+export function applyPanelTimeOverrides(panel: PanelModel, timeRange: TimeRange): TimeOverrideResult {
+  const newTimeData = {
+    timeInfo: '',
+    timeRange: timeRange,
+  };
+
+  if (panel.timeFrom) {
+    const timeFromInterpolated = templateSrv.replace(panel.timeFrom, panel.scopedVars);
+    const timeFromInfo = rangeUtil.describeTextRange(timeFromInterpolated);
+    if (timeFromInfo.invalid) {
+      newTimeData.timeInfo = 'invalid time override';
+      return newTimeData;
+    }
+
+    if (_isString(timeRange.raw.from)) {
+      const timeFromDate = dateMath.parse(timeFromInfo.from);
+      newTimeData.timeInfo = timeFromInfo.display;
+      newTimeData.timeRange = {
+        from: timeFromDate,
+        to: dateMath.parse(timeFromInfo.to),
+        raw: {
+          from: timeFromInfo.from,
+          to: timeFromInfo.to,
+        },
+      };
+    }
+  }
+
+  if (panel.timeShift) {
+    const timeShiftInterpolated = templateSrv.replace(panel.timeShift, panel.scopedVars);
+    const timeShiftInfo = rangeUtil.describeTextRange(timeShiftInterpolated);
+    if (timeShiftInfo.invalid) {
+      newTimeData.timeInfo = 'invalid timeshift';
+      return newTimeData;
+    }
+
+    const timeShift = '-' + timeShiftInterpolated;
+    newTimeData.timeInfo += ' timeshift ' + timeShift;
+    newTimeData.timeRange = {
+      from: dateMath.parseDateMath(timeShift, timeRange.from, false),
+      to: dateMath.parseDateMath(timeShift, timeRange.to, true),
+      raw: {
+        from: timeRange.from,
+        to: timeRange.to,
+      },
+    };
+  }
+
+  if (panel.hideTimeOverride) {
+    newTimeData.timeInfo = '';
+  }
+
+  return newTimeData;
+}
+
+export function getResolution(panel: PanelModel): number {
+  const htmlEl = document.getElementsByTagName('html')[0];
+  const width = htmlEl.getBoundingClientRect().width; // https://stackoverflow.com/a/21454625
+
+  return panel.maxDataPoints ? panel.maxDataPoints : Math.ceil(width * (panel.gridPos.w / 24));
+}
diff --git a/public/app/features/datasources/DataSourceSettings.tsx b/public/app/features/datasources/DataSourceSettings.tsx
deleted file mode 100644
index f7d641d34b0..00000000000
--- a/public/app/features/datasources/DataSourceSettings.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
-import { DataSource, Plugin } from 'app/types';
-
-export interface Props {
-  dataSource: DataSource;
-  dataSourceMeta: Plugin;
-}
-interface State {
-  name: string;
-}
-
-enum DataSourceStates {
-  Alpha = 'alpha',
-  Beta = 'beta',
-}
-
-export class DataSourceSettings extends PureComponent<Props, State> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      name: props.dataSource.name,
-    };
-  }
-
-  onNameChange = event => {
-    this.setState({
-      name: event.target.value,
-    });
-  };
-
-  onSubmit = event => {
-    event.preventDefault();
-    console.log(event);
-  };
-
-  onDelete = event => {
-    console.log(event);
-  };
-
-  isReadyOnly() {
-    return this.props.dataSource.readOnly === true;
-  }
-
-  shouldRenderInfoBox() {
-    const { state } = this.props.dataSourceMeta;
-
-    return state === DataSourceStates.Alpha || state === DataSourceStates.Beta;
-  }
-
-  getInfoText() {
-    const { dataSourceMeta } = this.props;
-
-    switch (dataSourceMeta.state) {
-      case DataSourceStates.Alpha:
-        return (
-          'This plugin is marked as being in alpha state, which means it is in early development phase and updates' +
-          ' will include breaking changes.'
-        );
-
-      case DataSourceStates.Beta:
-        return (
-          'This plugin is marked as being in a beta development state. This means it is in currently in active' +
-          ' development and could be missing important features.'
-        );
-    }
-
-    return null;
-  }
-
-  render() {
-    const { name } = this.state;
-
-    return (
-      <div>
-        <h3 className="page-sub-heading">Settings</h3>
-        <form onSubmit={this.onSubmit}>
-          <div className="gf-form-group">
-            <div className="gf-form-inline">
-              <div className="gf-form max-width-30">
-                <span className="gf-form-label width-10">Name</span>
-                <input
-                  className="gf-form-input max-width-23"
-                  type="text"
-                  value={name}
-                  placeholder="name"
-                  onChange={this.onNameChange}
-                  required
-                />
-              </div>
-            </div>
-          </div>
-          {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
-          {this.isReadyOnly() && (
-            <div className="grafana-info-box span8">
-              This datasource was added by config and cannot be modified using the UI. Please contact your server admin
-              to update this datasource.
-            </div>
-          )}
-          <div className="gf-form-button-row">
-            <button type="submit" className="btn btn-success" disabled={this.isReadyOnly()} onClick={this.onSubmit}>
-              Save &amp; Test
-            </button>
-            <button type="submit" className="btn btn-danger" disabled={this.isReadyOnly()} onClick={this.onDelete}>
-              Delete
-            </button>
-            <a className="btn btn-inverse" href="datasources">
-              Back
-            </a>
-          </div>
-        </form>
-      </div>
-    );
-  }
-}
-
-function mapStateToProps(state) {
-  return {
-    dataSource: state.dataSources.dataSource,
-    dataSourceMeta: state.dataSources.dataSourceMeta,
-  };
-}
-
-export default connect(mapStateToProps)(DataSourceSettings);
diff --git a/public/app/features/datasources/__mocks__/dataSourcesMocks.ts b/public/app/features/datasources/__mocks__/dataSourcesMocks.ts
index 97819a18c82..755d8eef74a 100644
--- a/public/app/features/datasources/__mocks__/dataSourcesMocks.ts
+++ b/public/app/features/datasources/__mocks__/dataSourcesMocks.ts
@@ -29,6 +29,9 @@ export const getMockDataSource = (): DataSource => {
   return {
     access: '',
     basicAuth: false,
+    basicAuthUser: '',
+    basicAuthPassword: '',
+    withCredentials: false,
     database: '',
     id: 13,
     isDefault: false,
diff --git a/public/app/features/datasources/settings/BasicSettings.test.tsx b/public/app/features/datasources/settings/BasicSettings.test.tsx
new file mode 100644
index 00000000000..0194adc9007
--- /dev/null
+++ b/public/app/features/datasources/settings/BasicSettings.test.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import BasicSettings, { Props } from './BasicSettings';
+
+const setup = () => {
+  const props: Props = {
+    dataSourceName: 'Graphite',
+    isDefault: false,
+    onDefaultChange: jest.fn(),
+    onNameChange: jest.fn(),
+  };
+
+  return shallow(<BasicSettings {...props} />);
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const wrapper = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/app/features/datasources/settings/BasicSettings.tsx b/public/app/features/datasources/settings/BasicSettings.tsx
new file mode 100644
index 00000000000..569e0909c4d
--- /dev/null
+++ b/public/app/features/datasources/settings/BasicSettings.tsx
@@ -0,0 +1,40 @@
+import React, { SFC } from 'react';
+import { Label } from 'app/core/components/Label/Label';
+import { Switch } from '../../../core/components/Switch/Switch';
+
+export interface Props {
+  dataSourceName: string;
+  isDefault: boolean;
+  onNameChange: (name: string) => void;
+  onDefaultChange: (value: boolean) => void;
+}
+
+const BasicSettings: SFC<Props> = ({ dataSourceName, isDefault, onDefaultChange, onNameChange }) => {
+  return (
+    <div className="gf-form-group">
+      <div className="gf-form-inline">
+        <div className="gf-form max-width-30" style={{ marginRight: '3px' }}>
+          <Label
+            tooltip={
+              'The name is used when you select the data source in panels. The Default data source is' +
+              'preselected in new panels.'
+            }
+          >
+            Name
+          </Label>
+          <input
+            className="gf-form-input max-width-23"
+            type="text"
+            value={dataSourceName}
+            placeholder="Name"
+            onChange={event => onNameChange(event.target.value)}
+            required
+          />
+        </div>
+        <Switch label="Default" checked={isDefault} onChange={event => onDefaultChange(event.target.checked)} />
+      </div>
+    </div>
+  );
+};
+
+export default BasicSettings;
diff --git a/public/app/features/datasources/settings/ButtonRow.test.tsx b/public/app/features/datasources/settings/ButtonRow.test.tsx
new file mode 100644
index 00000000000..0acab8941ff
--- /dev/null
+++ b/public/app/features/datasources/settings/ButtonRow.test.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ButtonRow, { Props } from './ButtonRow';
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    isReadOnly: true,
+    onSubmit: jest.fn(),
+    onDelete: jest.fn(),
+  };
+
+  Object.assign(props, propOverrides);
+
+  return shallow(<ButtonRow {...props} />);
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const wrapper = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render with buttons enabled', () => {
+    const wrapper = setup({
+      isReadOnly: false,
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/app/features/datasources/settings/ButtonRow.tsx b/public/app/features/datasources/settings/ButtonRow.tsx
new file mode 100644
index 00000000000..cb70b29c706
--- /dev/null
+++ b/public/app/features/datasources/settings/ButtonRow.tsx
@@ -0,0 +1,25 @@
+import React, { SFC } from 'react';
+
+export interface Props {
+  isReadOnly: boolean;
+  onDelete: () => void;
+  onSubmit: (event) => void;
+}
+
+const ButtonRow: SFC<Props> = ({ isReadOnly, onDelete, onSubmit }) => {
+  return (
+    <div className="gf-form-button-row">
+      <button type="submit" className="btn btn-success" disabled={isReadOnly} onClick={event => onSubmit(event)}>
+        Save &amp; Test
+      </button>
+      <button type="submit" className="btn btn-danger" disabled={isReadOnly} onClick={onDelete}>
+        Delete
+      </button>
+      <a className="btn btn-inverse" href="/datasources">
+        Back
+      </a>
+    </div>
+  );
+};
+
+export default ButtonRow;
diff --git a/public/app/features/datasources/settings/DataSourceSettings.test.tsx b/public/app/features/datasources/settings/DataSourceSettings.test.tsx
new file mode 100644
index 00000000000..d6c934aa6a4
--- /dev/null
+++ b/public/app/features/datasources/settings/DataSourceSettings.test.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DataSourceSettings, Props } from './DataSourceSettings';
+import { DataSource, NavModel } from '../../../types';
+import { getMockDataSource } from '../__mocks__/dataSourcesMocks';
+import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks';
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    navModel: {} as NavModel,
+    dataSource: getMockDataSource(),
+    dataSourceMeta: getMockPlugin(),
+    pageId: 1,
+    deleteDataSource: jest.fn(),
+    loadDataSource: jest.fn(),
+    setDataSourceName: jest.fn(),
+    updateDataSource: jest.fn(),
+    setIsDefault: jest.fn(),
+  };
+
+  Object.assign(props, propOverrides);
+
+  return shallow(<DataSourceSettings {...props} />);
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const wrapper = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render loader', () => {
+    const wrapper = setup({
+      dataSource: {} as DataSource,
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render beta info text', () => {
+    const wrapper = setup({
+      dataSourceMeta: { ...getMockPlugin(), state: 'beta' },
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render alpha info text', () => {
+    const wrapper = setup({
+      dataSourceMeta: { ...getMockPlugin(), state: 'alpha' },
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render is ready only message', () => {
+    const wrapper = setup({
+      dataSource: { ...getMockDataSource(), readOnly: true },
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/app/features/datasources/settings/DataSourceSettings.tsx b/public/app/features/datasources/settings/DataSourceSettings.tsx
new file mode 100644
index 00000000000..5786bd1db57
--- /dev/null
+++ b/public/app/features/datasources/settings/DataSourceSettings.tsx
@@ -0,0 +1,249 @@
+import React, { PureComponent } from 'react';
+import { hot } from 'react-hot-loader';
+import { connect } from 'react-redux';
+
+import PageHeader from 'app/core/components/PageHeader/PageHeader';
+import PageLoader from 'app/core/components/PageLoader/PageLoader';
+import PluginSettings from './PluginSettings';
+import BasicSettings from './BasicSettings';
+import ButtonRow from './ButtonRow';
+
+import appEvents from 'app/core/app_events';
+import { getBackendSrv } from 'app/core/services/backend_srv';
+import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+
+import { getDataSource, getDataSourceMeta } from '../state/selectors';
+import { deleteDataSource, loadDataSource, setDataSourceName, setIsDefault, updateDataSource } from '../state/actions';
+import { getNavModel } from 'app/core/selectors/navModel';
+import { getRouteParamsId } from 'app/core/selectors/location';
+
+import { DataSource, NavModel, Plugin } from 'app/types/';
+import { getDataSourceLoadingNav } from '../state/navModel';
+
+export interface Props {
+  navModel: NavModel;
+  dataSource: DataSource;
+  dataSourceMeta: Plugin;
+  pageId: number;
+  deleteDataSource: typeof deleteDataSource;
+  loadDataSource: typeof loadDataSource;
+  setDataSourceName: typeof setDataSourceName;
+  updateDataSource: typeof updateDataSource;
+  setIsDefault: typeof setIsDefault;
+}
+
+interface State {
+  dataSource: DataSource;
+  isTesting?: boolean;
+  testingMessage?: string;
+  testingStatus?: string;
+}
+
+enum DataSourceStates {
+  Alpha = 'alpha',
+  Beta = 'beta',
+}
+
+export class DataSourceSettings extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      dataSource: {} as DataSource,
+    };
+  }
+
+  async componentDidMount() {
+    const { loadDataSource, pageId } = this.props;
+
+    await loadDataSource(pageId);
+  }
+
+  onSubmit = async event => {
+    event.preventDefault();
+
+    await this.props.updateDataSource({ ...this.state.dataSource, name: this.props.dataSource.name });
+
+    this.testDataSource();
+  };
+
+  onDelete = () => {
+    appEvents.emit('confirm-modal', {
+      title: 'Delete',
+      text: 'Are you sure you want to delete this data source?',
+      yesText: 'Delete',
+      icon: 'fa-trash',
+      onConfirm: () => {
+        this.confirmDelete();
+      },
+    });
+  };
+
+  confirmDelete = () => {
+    this.props.deleteDataSource();
+  };
+
+  onModelChange = dataSource => {
+    this.setState({
+      dataSource: dataSource,
+    });
+  };
+
+  isReadOnly() {
+    return this.props.dataSource.readOnly === true;
+  }
+
+  shouldRenderInfoBox() {
+    const { state } = this.props.dataSourceMeta;
+
+    return state === DataSourceStates.Alpha || state === DataSourceStates.Beta;
+  }
+
+  getInfoText() {
+    const { dataSourceMeta } = this.props;
+
+    switch (dataSourceMeta.state) {
+      case DataSourceStates.Alpha:
+        return (
+          'This plugin is marked as being in alpha state, which means it is in early development phase and updates' +
+          ' will include breaking changes.'
+        );
+
+      case DataSourceStates.Beta:
+        return (
+          'This plugin is marked as being in a beta development state. This means it is in currently in active' +
+          ' development and could be missing important features.'
+        );
+    }
+
+    return null;
+  }
+
+  renderIsReadOnlyMessage() {
+    return (
+      <div className="grafana-info-box span8">
+        This datasource was added by config and cannot be modified using the UI. Please contact your server admin to
+        update this datasource.
+      </div>
+    );
+  }
+
+  async testDataSource() {
+    const dsApi = await getDatasourceSrv().get(this.state.dataSource.name);
+
+    if (!dsApi.testDatasource) {
+      return;
+    }
+
+    this.setState({ isTesting: true, testingMessage: 'Testing...', testingStatus: 'info' });
+
+    getBackendSrv().withNoBackendCache(async () => {
+      try {
+        const result = await dsApi.testDatasource();
+
+        this.setState({
+          isTesting: false,
+          testingStatus: result.status,
+          testingMessage: result.message,
+        });
+      } catch (err) {
+        let message = '';
+
+        if (err.statusText) {
+          message = 'HTTP Error ' + err.statusText;
+        } else {
+          message = err.message;
+        }
+
+        this.setState({
+          isTesting: false,
+          testingStatus: 'error',
+          testingMessage: message,
+        });
+      }
+    });
+  }
+
+  render() {
+    const { dataSource, dataSourceMeta, navModel, setDataSourceName, setIsDefault } = this.props;
+    const { testingMessage, testingStatus } = this.state;
+
+    return (
+      <div>
+        <PageHeader model={navModel} />
+        {Object.keys(dataSource).length === 0 ? (
+          <PageLoader pageName="Data source settings" />
+        ) : (
+          <div className="page-container page-body">
+            <div>
+              <form onSubmit={this.onSubmit}>
+                {this.isReadOnly() && this.renderIsReadOnlyMessage()}
+                {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
+
+                <BasicSettings
+                  dataSourceName={dataSource.name}
+                  isDefault={dataSource.isDefault}
+                  onDefaultChange={state => setIsDefault(state)}
+                  onNameChange={name => setDataSourceName(name)}
+                />
+
+                {dataSourceMeta.module && (
+                  <PluginSettings
+                    dataSource={dataSource}
+                    dataSourceMeta={dataSourceMeta}
+                    onModelChange={this.onModelChange}
+                  />
+                )}
+
+                <div className="gf-form-group section">
+                  {testingMessage && (
+                    <div className={`alert-${testingStatus} alert`}>
+                      <div className="alert-icon">
+                        {testingStatus === 'error' ? (
+                          <i className="fa fa-exclamation-triangle" />
+                        ) : (
+                          <i className="fa fa-check" />
+                        )}
+                      </div>
+                      <div className="alert-body">
+                        <div className="alert-title">{testingMessage}</div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                <ButtonRow
+                  onSubmit={event => this.onSubmit(event)}
+                  isReadOnly={this.isReadOnly()}
+                  onDelete={this.onDelete}
+                />
+              </form>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  const pageId = getRouteParamsId(state.location);
+  const dataSource = getDataSource(state.dataSources, pageId);
+
+  return {
+    navModel: getNavModel(state.navIndex, `datasource-settings-${pageId}`, getDataSourceLoadingNav('settings')),
+    dataSource: getDataSource(state.dataSources, pageId),
+    dataSourceMeta: getDataSourceMeta(state.dataSources, dataSource.type),
+    pageId: pageId,
+  };
+}
+
+const mapDispatchToProps = {
+  deleteDataSource,
+  loadDataSource,
+  setDataSourceName,
+  updateDataSource,
+  setIsDefault,
+};
+
+export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceSettings));
diff --git a/public/app/features/datasources/settings/PluginSettings.tsx b/public/app/features/datasources/settings/PluginSettings.tsx
new file mode 100644
index 00000000000..e0b742985cc
--- /dev/null
+++ b/public/app/features/datasources/settings/PluginSettings.tsx
@@ -0,0 +1,63 @@
+import React, { PureComponent } from 'react';
+import _ from 'lodash';
+import { DataSource, Plugin } from 'app/types/';
+import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+
+export interface Props {
+  dataSource: DataSource;
+  dataSourceMeta: Plugin;
+  onModelChange: (dataSource: DataSource) => void;
+}
+
+export class PluginSettings extends PureComponent<Props> {
+  element: any;
+  component: AngularComponent;
+  scopeProps: {
+    ctrl: { datasourceMeta: Plugin; current: DataSource };
+    onModelChanged: (dataSource: DataSource) => void;
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.scopeProps = {
+      ctrl: { datasourceMeta: props.dataSourceMeta, current: _.cloneDeep(props.dataSource) },
+      onModelChanged: this.onModelChanged,
+    };
+  }
+
+  componentDidMount() {
+    if (!this.element) {
+      return;
+    }
+
+    const loader = getAngularLoader();
+    const template = '<plugin-component type="datasource-config-ctrl" />';
+
+    this.component = loader.load(this.element, this.scopeProps, template);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.dataSource !== prevProps.dataSource) {
+      this.scopeProps.ctrl.current = _.cloneDeep(this.props.dataSource);
+
+      this.component.digest();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.component) {
+      this.component.destroy();
+    }
+  }
+
+  onModelChanged = (dataSource: DataSource) => {
+    this.props.onModelChange(dataSource);
+  };
+
+  render() {
+    return <div ref={element => (this.element = element)} />;
+  }
+}
+
+export default PluginSettings;
diff --git a/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap
new file mode 100644
index 00000000000..65d4b5ab953
--- /dev/null
+++ b/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<div
+  className="gf-form-group"
+>
+  <div
+    className="gf-form-inline"
+  >
+    <div
+      className="gf-form max-width-30"
+      style={
+        Object {
+          "marginRight": "3px",
+        }
+      }
+    >
+      <Component
+        tooltip="The name is used when you select the data source in panels. The Default data source ispreselected in new panels."
+      >
+        Name
+      </Component>
+      <input
+        className="gf-form-input max-width-23"
+        onChange={[Function]}
+        placeholder="Name"
+        required={true}
+        type="text"
+        value="Graphite"
+      />
+    </div>
+    <Switch
+      checked={false}
+      label="Default"
+      onChange={[Function]}
+    />
+  </div>
+</div>
+`;
diff --git a/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
new file mode 100644
index 00000000000..bd190f60b03
--- /dev/null
+++ b/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<div
+  className="gf-form-button-row"
+>
+  <button
+    className="btn btn-success"
+    disabled={true}
+    onClick={[Function]}
+    type="submit"
+  >
+    Save & Test
+  </button>
+  <button
+    className="btn btn-danger"
+    disabled={true}
+    onClick={[MockFunction]}
+    type="submit"
+  >
+    Delete
+  </button>
+  <a
+    className="btn btn-inverse"
+    href="/datasources"
+  >
+    Back
+  </a>
+</div>
+`;
+
+exports[`Render should render with buttons enabled 1`] = `
+<div
+  className="gf-form-button-row"
+>
+  <button
+    className="btn btn-success"
+    disabled={false}
+    onClick={[Function]}
+    type="submit"
+  >
+    Save & Test
+  </button>
+  <button
+    className="btn btn-danger"
+    disabled={false}
+    onClick={[MockFunction]}
+    type="submit"
+  >
+    Delete
+  </button>
+  <a
+    className="btn btn-inverse"
+    href="/datasources"
+  >
+    Back
+  </a>
+</div>
+`;
diff --git a/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap
new file mode 100644
index 00000000000..bcd8237ff39
--- /dev/null
+++ b/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap
@@ -0,0 +1,415 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render alpha info text 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <div>
+      <form
+        onSubmit={[Function]}
+      >
+        <div
+          className="grafana-info-box"
+        >
+          This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes.
+        </div>
+        <BasicSettings
+          dataSourceName="gdev-cloudwatch"
+          isDefault={false}
+          onDefaultChange={[Function]}
+          onNameChange={[Function]}
+        />
+        <PluginSettings
+          dataSource={
+            Object {
+              "access": "",
+              "basicAuth": false,
+              "basicAuthPassword": "",
+              "basicAuthUser": "",
+              "database": "",
+              "id": 13,
+              "isDefault": false,
+              "jsonData": Object {
+                "authType": "credentials",
+                "defaultRegion": "eu-west-2",
+              },
+              "name": "gdev-cloudwatch",
+              "orgId": 1,
+              "password": "",
+              "readOnly": false,
+              "type": "cloudwatch",
+              "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+              "url": "",
+              "user": "",
+              "withCredentials": false,
+            }
+          }
+          dataSourceMeta={
+            Object {
+              "defaultNavUrl": "some/url",
+              "enabled": false,
+              "hasUpdate": false,
+              "id": "1",
+              "info": Object {
+                "author": Object {
+                  "name": "Grafana Labs",
+                  "url": "url/to/GrafanaLabs",
+                },
+                "description": "pretty decent plugin",
+                "links": Array [
+                  Object {
+                    "name": "project",
+                    "url": "one link",
+                  },
+                ],
+                "logos": Object {
+                  "large": "large/logo",
+                  "small": "small/logo",
+                },
+                "screenshots": Array [
+                  Object {
+                    "path": "screenshot",
+                  },
+                ],
+                "updated": "2018-09-26",
+                "version": "1",
+              },
+              "latestVersion": "1",
+              "module": Object {},
+              "name": "pretty cool plugin 1",
+              "pinned": false,
+              "state": "alpha",
+              "type": "",
+            }
+          }
+          onModelChange={[Function]}
+        />
+        <div
+          className="gf-form-group section"
+        />
+        <ButtonRow
+          isReadOnly={false}
+          onDelete={[Function]}
+          onSubmit={[Function]}
+        />
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render should render beta info text 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <div>
+      <form
+        onSubmit={[Function]}
+      >
+        <div
+          className="grafana-info-box"
+        >
+          This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features.
+        </div>
+        <BasicSettings
+          dataSourceName="gdev-cloudwatch"
+          isDefault={false}
+          onDefaultChange={[Function]}
+          onNameChange={[Function]}
+        />
+        <PluginSettings
+          dataSource={
+            Object {
+              "access": "",
+              "basicAuth": false,
+              "basicAuthPassword": "",
+              "basicAuthUser": "",
+              "database": "",
+              "id": 13,
+              "isDefault": false,
+              "jsonData": Object {
+                "authType": "credentials",
+                "defaultRegion": "eu-west-2",
+              },
+              "name": "gdev-cloudwatch",
+              "orgId": 1,
+              "password": "",
+              "readOnly": false,
+              "type": "cloudwatch",
+              "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+              "url": "",
+              "user": "",
+              "withCredentials": false,
+            }
+          }
+          dataSourceMeta={
+            Object {
+              "defaultNavUrl": "some/url",
+              "enabled": false,
+              "hasUpdate": false,
+              "id": "1",
+              "info": Object {
+                "author": Object {
+                  "name": "Grafana Labs",
+                  "url": "url/to/GrafanaLabs",
+                },
+                "description": "pretty decent plugin",
+                "links": Array [
+                  Object {
+                    "name": "project",
+                    "url": "one link",
+                  },
+                ],
+                "logos": Object {
+                  "large": "large/logo",
+                  "small": "small/logo",
+                },
+                "screenshots": Array [
+                  Object {
+                    "path": "screenshot",
+                  },
+                ],
+                "updated": "2018-09-26",
+                "version": "1",
+              },
+              "latestVersion": "1",
+              "module": Object {},
+              "name": "pretty cool plugin 1",
+              "pinned": false,
+              "state": "beta",
+              "type": "",
+            }
+          }
+          onModelChange={[Function]}
+        />
+        <div
+          className="gf-form-group section"
+        />
+        <ButtonRow
+          isReadOnly={false}
+          onDelete={[Function]}
+          onSubmit={[Function]}
+        />
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render should render component 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <div>
+      <form
+        onSubmit={[Function]}
+      >
+        <BasicSettings
+          dataSourceName="gdev-cloudwatch"
+          isDefault={false}
+          onDefaultChange={[Function]}
+          onNameChange={[Function]}
+        />
+        <PluginSettings
+          dataSource={
+            Object {
+              "access": "",
+              "basicAuth": false,
+              "basicAuthPassword": "",
+              "basicAuthUser": "",
+              "database": "",
+              "id": 13,
+              "isDefault": false,
+              "jsonData": Object {
+                "authType": "credentials",
+                "defaultRegion": "eu-west-2",
+              },
+              "name": "gdev-cloudwatch",
+              "orgId": 1,
+              "password": "",
+              "readOnly": false,
+              "type": "cloudwatch",
+              "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+              "url": "",
+              "user": "",
+              "withCredentials": false,
+            }
+          }
+          dataSourceMeta={
+            Object {
+              "defaultNavUrl": "some/url",
+              "enabled": false,
+              "hasUpdate": false,
+              "id": "1",
+              "info": Object {
+                "author": Object {
+                  "name": "Grafana Labs",
+                  "url": "url/to/GrafanaLabs",
+                },
+                "description": "pretty decent plugin",
+                "links": Array [
+                  Object {
+                    "name": "project",
+                    "url": "one link",
+                  },
+                ],
+                "logos": Object {
+                  "large": "large/logo",
+                  "small": "small/logo",
+                },
+                "screenshots": Array [
+                  Object {
+                    "path": "screenshot",
+                  },
+                ],
+                "updated": "2018-09-26",
+                "version": "1",
+              },
+              "latestVersion": "1",
+              "module": Object {},
+              "name": "pretty cool plugin 1",
+              "pinned": false,
+              "state": "",
+              "type": "",
+            }
+          }
+          onModelChange={[Function]}
+        />
+        <div
+          className="gf-form-group section"
+        />
+        <ButtonRow
+          isReadOnly={false}
+          onDelete={[Function]}
+          onSubmit={[Function]}
+        />
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render should render is ready only message 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <div>
+      <form
+        onSubmit={[Function]}
+      >
+        <div
+          className="grafana-info-box span8"
+        >
+          This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+        </div>
+        <BasicSettings
+          dataSourceName="gdev-cloudwatch"
+          isDefault={false}
+          onDefaultChange={[Function]}
+          onNameChange={[Function]}
+        />
+        <PluginSettings
+          dataSource={
+            Object {
+              "access": "",
+              "basicAuth": false,
+              "basicAuthPassword": "",
+              "basicAuthUser": "",
+              "database": "",
+              "id": 13,
+              "isDefault": false,
+              "jsonData": Object {
+                "authType": "credentials",
+                "defaultRegion": "eu-west-2",
+              },
+              "name": "gdev-cloudwatch",
+              "orgId": 1,
+              "password": "",
+              "readOnly": true,
+              "type": "cloudwatch",
+              "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+              "url": "",
+              "user": "",
+              "withCredentials": false,
+            }
+          }
+          dataSourceMeta={
+            Object {
+              "defaultNavUrl": "some/url",
+              "enabled": false,
+              "hasUpdate": false,
+              "id": "1",
+              "info": Object {
+                "author": Object {
+                  "name": "Grafana Labs",
+                  "url": "url/to/GrafanaLabs",
+                },
+                "description": "pretty decent plugin",
+                "links": Array [
+                  Object {
+                    "name": "project",
+                    "url": "one link",
+                  },
+                ],
+                "logos": Object {
+                  "large": "large/logo",
+                  "small": "small/logo",
+                },
+                "screenshots": Array [
+                  Object {
+                    "path": "screenshot",
+                  },
+                ],
+                "updated": "2018-09-26",
+                "version": "1",
+              },
+              "latestVersion": "1",
+              "module": Object {},
+              "name": "pretty cool plugin 1",
+              "pinned": false,
+              "state": "",
+              "type": "",
+            }
+          }
+          onModelChange={[Function]}
+        />
+        <div
+          className="gf-form-group section"
+        />
+        <ButtonRow
+          isReadOnly={true}
+          onDelete={[Function]}
+          onSubmit={[Function]}
+        />
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render should render loader 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <PageLoader
+    pageName="Data source settings"
+  />
+</div>
+`;
diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts
index 50296db9031..fa9d47eb6a1 100644
--- a/public/app/features/datasources/state/actions.ts
+++ b/public/app/features/datasources/state/actions.ts
@@ -1,10 +1,12 @@
 import { ThunkAction } from 'redux-thunk';
-import { DataSource, Plugin, StoreState } from 'app/types';
-import { getBackendSrv } from '../../../core/services/backend_srv';
-import { LayoutMode } from '../../../core/components/LayoutSelector/LayoutSelector';
-import { updateLocation, updateNavIndex, UpdateNavIndexAction } from '../../../core/actions';
-import { UpdateLocationAction } from '../../../core/actions/location';
+import config from '../../../core/config';
+import { getBackendSrv } from 'app/core/services/backend_srv';
+import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
+import { updateLocation, updateNavIndex, UpdateNavIndexAction } from 'app/core/actions';
+import { UpdateLocationAction } from 'app/core/actions/location';
 import { buildNavModel } from './navModel';
+import { DataSource, Plugin, StoreState } from 'app/types';
 
 export enum ActionTypes {
   LoadDataSources = 'LOAD_DATA_SOURCES',
@@ -14,43 +16,55 @@ export enum ActionTypes {
   SetDataSourcesSearchQuery = 'SET_DATA_SOURCES_SEARCH_QUERY',
   SetDataSourcesLayoutMode = 'SET_DATA_SOURCES_LAYOUT_MODE',
   SetDataSourceTypeSearchQuery = 'SET_DATA_SOURCE_TYPE_SEARCH_QUERY',
+  SetDataSourceName = 'SET_DATA_SOURCE_NAME',
+  SetIsDefault = 'SET_IS_DEFAULT',
 }
 
-export interface LoadDataSourcesAction {
+interface LoadDataSourcesAction {
   type: ActionTypes.LoadDataSources;
   payload: DataSource[];
 }
 
-export interface SetDataSourcesSearchQueryAction {
+interface SetDataSourcesSearchQueryAction {
   type: ActionTypes.SetDataSourcesSearchQuery;
   payload: string;
 }
 
-export interface SetDataSourcesLayoutModeAction {
+interface SetDataSourcesLayoutModeAction {
   type: ActionTypes.SetDataSourcesLayoutMode;
   payload: LayoutMode;
 }
 
-export interface LoadDataSourceTypesAction {
+interface LoadDataSourceTypesAction {
   type: ActionTypes.LoadDataSourceTypes;
   payload: Plugin[];
 }
 
-export interface SetDataSourceTypeSearchQueryAction {
+interface SetDataSourceTypeSearchQueryAction {
   type: ActionTypes.SetDataSourceTypeSearchQuery;
   payload: string;
 }
 
-export interface LoadDataSourceAction {
+interface LoadDataSourceAction {
   type: ActionTypes.LoadDataSource;
   payload: DataSource;
 }
 
-export interface LoadDataSourceMetaAction {
+interface LoadDataSourceMetaAction {
   type: ActionTypes.LoadDataSourceMeta;
   payload: Plugin;
 }
 
+interface SetDataSourceNameAction {
+  type: ActionTypes.SetDataSourceName;
+  payload: string;
+}
+
+interface SetIsDefaultAction {
+  type: ActionTypes.SetIsDefault;
+  payload: boolean;
+}
+
 const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({
   type: ActionTypes.LoadDataSources,
   payload: dataSources,
@@ -86,6 +100,16 @@ export const setDataSourceTypeSearchQuery = (query: string): SetDataSourceTypeSe
   payload: query,
 });
 
+export const setDataSourceName = (name: string) => ({
+  type: ActionTypes.SetDataSourceName,
+  payload: name,
+});
+
+export const setIsDefault = (state: boolean) => ({
+  type: ActionTypes.SetIsDefault,
+  payload: state,
+});
+
 export type Action =
   | LoadDataSourcesAction
   | SetDataSourcesSearchQueryAction
@@ -95,7 +119,9 @@ export type Action =
   | SetDataSourceTypeSearchQueryAction
   | LoadDataSourceAction
   | UpdateNavIndexAction
-  | LoadDataSourceMetaAction;
+  | LoadDataSourceMetaAction
+  | SetDataSourceNameAction
+  | SetIsDefaultAction;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
 
@@ -145,6 +171,23 @@ export function loadDataSourceTypes(): ThunkResult<void> {
   };
 }
 
+export function updateDataSource(dataSource: DataSource): ThunkResult<void> {
+  return async dispatch => {
+    await getBackendSrv().put(`/api/datasources/${dataSource.id}`, dataSource);
+    await updateFrontendSettings();
+    return dispatch(loadDataSource(dataSource.id));
+  };
+}
+
+export function deleteDataSource(): ThunkResult<void> {
+  return async (dispatch, getStore) => {
+    const dataSource = getStore().dataSources.dataSource;
+
+    await getBackendSrv().delete(`/api/datasources/${dataSource.id}`);
+    dispatch(updateLocation({ path: '/datasources' }));
+  };
+}
+
 export function nameExits(dataSources, name) {
   return (
     dataSources.filter(dataSource => {
@@ -173,6 +216,16 @@ export function findNewName(dataSources, name) {
   return name;
 }
 
+function updateFrontendSettings() {
+  return getBackendSrv()
+    .get('/api/frontend/settings')
+    .then(settings => {
+      config.datasources = settings.datasources;
+      config.defaultDatasource = settings.defaultDatasource;
+      getDatasourceSrv().init();
+    });
+}
+
 function nameHasSuffix(name) {
   return name.endsWith('-', name.length - 1);
 }
diff --git a/public/app/features/datasources/state/navModel.ts b/public/app/features/datasources/state/navModel.ts
index e0b6b39588e..19fc422e3b8 100644
--- a/public/app/features/datasources/state/navModel.ts
+++ b/public/app/features/datasources/state/navModel.ts
@@ -48,6 +48,9 @@ export function getDataSourceLoadingNav(pageName: string): NavModel {
     {
       access: '',
       basicAuth: false,
+      basicAuthUser: '',
+      basicAuthPassword: '',
+      withCredentials: false,
       database: '',
       id: 1,
       isDefault: false,
@@ -70,12 +73,12 @@ export function getDataSourceLoadingNav(pageName: string): NavModel {
           url: '',
         },
         description: '',
-        links: [''],
+        links: [{ name: '', url: '' }],
         logos: {
           large: '',
           small: '',
         },
-        screenshots: '',
+        screenshots: [],
         updated: '',
         version: '',
       },
diff --git a/public/app/features/datasources/state/reducers.ts b/public/app/features/datasources/state/reducers.ts
index 7e235f5ea0a..e8625aac0d2 100644
--- a/public/app/features/datasources/state/reducers.ts
+++ b/public/app/features/datasources/state/reducers.ts
@@ -10,8 +10,8 @@ const initialState: DataSourcesState = {
   dataSourcesCount: 0,
   dataSourceTypes: [] as Plugin[],
   dataSourceTypeSearchQuery: '',
-  dataSourceMeta: {} as Plugin,
   hasFetched: false,
+  dataSourceMeta: {} as Plugin,
 };
 
 export const dataSourcesReducer = (state = initialState, action: Action): DataSourcesState => {
@@ -36,6 +36,12 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo
 
     case ActionTypes.LoadDataSourceMeta:
       return { ...state, dataSourceMeta: action.payload };
+
+    case ActionTypes.SetDataSourceName:
+      return { ...state, dataSource: { ...state.dataSource, name: action.payload } };
+
+    case ActionTypes.SetIsDefault:
+      return { ...state, dataSource: { ...state.dataSource, isDefault: action.payload } };
   }
 
   return state;
diff --git a/public/app/features/datasources/state/selectors.ts b/public/app/features/datasources/state/selectors.ts
index eef176eb49a..2466e465d1d 100644
--- a/public/app/features/datasources/state/selectors.ts
+++ b/public/app/features/datasources/state/selectors.ts
@@ -20,7 +20,15 @@ export const getDataSource = (state, dataSourceId): DataSource | null => {
   if (state.dataSource.id === parseInt(dataSourceId, 10)) {
     return state.dataSource;
   }
-  return null;
+  return {} as DataSource;
+};
+
+export const getDataSourceMeta = (state, type): Plugin => {
+  if (state.dataSourceMeta.id === type) {
+    return state.dataSourceMeta;
+  }
+
+  return {} as Plugin;
 };
 
 export const getDataSourcesSearchQuery = state => state.searchQuery;
diff --git a/public/app/features/explore/Error.tsx b/public/app/features/explore/Error.tsx
new file mode 100644
index 00000000000..2bfd366b3c9
--- /dev/null
+++ b/public/app/features/explore/Error.tsx
@@ -0,0 +1,21 @@
+import React, { SFC } from 'react';
+
+interface Props {
+  message: any;
+}
+
+export const Alert: SFC<Props> = props => {
+  const { message } = props;
+  return (
+    <div className="gf-form-group section">
+      <div className="alert-error alert">
+        <div className="alert-icon">
+          <i className="fa fa-exclamation-triangle" />
+        </div>
+        <div className="alert-body">
+          <div className="alert-title">{message}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 4a9c67a2338..e8897c6926a 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { hot } from 'react-hot-loader';
-import Select from 'react-select';
 import _ from 'lodash';
 
 import { DataSource } from 'app/types/datasources';
@@ -12,7 +11,7 @@ import {
   QueryHintGetter,
   QueryHint,
 } from 'app/types/explore';
-import { RawTimeRange, DataQuery } from 'app/types/series';
+import { TimeRange, DataQuery } from 'app/types/series';
 import store from 'app/core/store';
 import {
   DEFAULT_RANGE,
@@ -25,12 +24,11 @@ import {
   makeTimeSeriesList,
   updateHistory,
 } from 'app/core/utils/explore';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import PickerOption from 'app/core/components/Picker/PickerOption';
-import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
-import NoOptionsMessage from 'app/core/components/Picker/NoOptionsMessage';
+import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 import TableModel from 'app/core/table_model';
 import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { Emitter } from 'app/core/utils/emitter';
+import * as dateMath from 'app/core/utils/datemath';
 
 import Panel from './Panel';
 import QueryRows from './QueryRows';
@@ -38,6 +36,7 @@ import Graph from './Graph';
 import Logs from './Logs';
 import Table from './Table';
 import ErrorBoundary from './ErrorBoundary';
+import { Alert } from './Error';
 import TimePicker, { parseTime } from './TimePicker';
 
 interface ExploreProps {
@@ -68,9 +67,9 @@ interface ExploreProps {
  * contain one empty DataQuery. While the user modifies the DataQuery, the
  * modifications are being tracked in `this.modifiedQueries`, which need to be
  * used whenever a query is sent to the datasource to reflect what the user sees
- * on the screen. Query rows can be initialized or reset using `initialQueries`,
- * by giving the respective row a new key. This wipes the old row and its state.
- * This property is also used to govern how many query rows there are (minimum 1).
+ * on the screen. Query"react-popper": "^0.7.5", rows can be initialized or reset using `initialQueries`,
+ * by giving the respec"react-popper": "^0.7.5",tive row a new key. This wipes the old row and its state.
+ * This property is als"react-popper": "^0.7.5",o used to govern how many query rows there are (minimum 1).
  *
  * This flow makes sure that a query row can be arbitrarily complex without the
  * fear of being wiped or re-initialized via props. The query row is free to keep
@@ -89,6 +88,7 @@ interface ExploreProps {
  */
 export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
   el: any;
+  exploreEvents: Emitter;
   /**
    * Current query expressions of the rows including their modifications, used for running queries.
    * Not kept in component state to prevent edit-render roundtrips.
@@ -144,6 +144,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
       };
     }
     this.modifiedQueries = initialQueries.slice();
+    this.exploreEvents = new Emitter();
     this.timepickerRef = React.createRef();
   }
 
@@ -153,10 +154,12 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     if (!datasourceSrv) {
       throw new Error('No datasource service passed as props.');
     }
-    const datasources = datasourceSrv.getExploreSources();
+
+    const datasources = datasourceSrv.getExternal();
     const exploreDatasources = datasources.map(ds => ({
       value: ds.name,
-      label: ds.name,
+      name: ds.name,
+      meta: ds.meta,
     }));
 
     if (datasources.length > 0) {
@@ -168,9 +171,6 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
       } else {
         datasource = await datasourceSrv.get();
       }
-      if (!datasource.meta.explore) {
-        datasource = await datasourceSrv.get(datasources[0].name);
-      }
       await this.setDatasource(datasource);
     } else {
       this.setState({ datasourceMissing: true });
@@ -178,6 +178,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
   }
 
   componentWillUnmount() {
+    this.exploreEvents.removeAllListeners();
     clearTimeout(this.scanTimer);
   }
 
@@ -186,7 +187,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
 
     const supportsGraph = datasource.meta.metrics;
     const supportsLogs = datasource.meta.logs;
-    const supportsTable = datasource.meta.metrics;
+    const supportsTable = datasource.meta.tables;
     const datasourceId = datasource.meta.id;
     let datasourceError = null;
 
@@ -348,8 +349,8 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     }
   };
 
-  onChangeTime = (nextRange: RawTimeRange, scanning?: boolean) => {
-    const range: RawTimeRange = {
+  onChangeTime = (nextRange: TimeRange, scanning?: boolean) => {
+    const range: TimeRange = {
       ...nextRange,
     };
     if (this.state.scanning && !scanning) {
@@ -481,7 +482,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
           } else {
             // Modify query only at index
             nextQueries = initialQueries.map((query, i) => {
-              // Synchronise all queries with local query cache to ensure consistency
+              // Synchronize all queries with local query cache to ensure consistency
               // TODO still needed?
               return i === index
                 ? {
@@ -605,18 +606,29 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     ];
 
     // Clone range for query request
-    const queryRange: RawTimeRange = { ...range };
-
-    // Datasource is using `panelId + query.refId` for cancellation logic.
+    // const queryRange: RawTimeRange = { ...range };
+    // const { from, to, raw } = this.timeSrv.timeRange();
+    // Most datasource is using `panelId + query.refId` for cancellation logic.
     // Using `format` here because it relates to the view panel that the request is for.
-    const panelId = queryOptions.format;
+    // However, some datasources don't use `panelId + query.refId`, but only `panelId`.
+    // Therefore panel id has to be unique.
+    const panelId = `${queryOptions.format}-${query.key}`;
 
     return {
       interval,
       intervalMs,
       panelId,
       targets: configuredQueries, // Datasources rely on DataQueries being passed under the targets key.
-      range: queryRange,
+      range: {
+        from: dateMath.parse(range.from, false),
+        to: dateMath.parse(range.to, true),
+        raw: range,
+      },
+      rangeRaw: range,
+      scopedVars: {
+        __interval: { text: interval, value: interval },
+        __interval_ms: { text: intervalMs, value: intervalMs },
+      },
     };
   }
 
@@ -802,16 +814,18 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     }
     const { datasource } = this.state;
     const datasourceId = datasource.meta.id;
-    // Run all queries concurrently
+    // Run all queries concurrentlyso
     queries.forEach(async (query, rowIndex) => {
       const transaction = this.startQueryTransaction(query, rowIndex, resultType, queryOptions);
       try {
         const now = Date.now();
         const res = await datasource.query(transaction.options);
+        this.exploreEvents.emit('data-received', res.data || []);
         const latency = Date.now() - now;
         const results = resultGetter ? resultGetter(res.data) : res.data;
         this.completeQueryTransaction(transaction.id, results, latency, queries, datasourceId);
       } catch (response) {
+        this.exploreEvents.emit('data-error', response);
         this.failQueryTransaction(transaction.id, response, datasourceId);
       }
     });
@@ -871,7 +885,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
     } = this.state;
     const graphHeight = showingGraph && showingTable ? '200px' : '400px';
     const exploreClass = split ? 'explore explore-split' : 'explore';
-    const selectedDatasource = datasource ? exploreDatasources.find(d => d.label === datasource.name) : undefined;
+    const selectedDatasource = datasource ? exploreDatasources.find(d => d.name === datasource.name) : undefined;
     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);
@@ -896,24 +910,10 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
           )}
           {!datasourceMissing ? (
             <div className="navbar-buttons">
-              <Select
-                classNamePrefix={`gf-form-select-box`}
-                isMulti={false}
-                isLoading={datasourceLoading}
-                isClearable={false}
-                className="gf-form-input gf-form-input--form-dropdown datasource-picker"
+              <DataSourcePicker
                 onChange={this.onChangeDatasource}
-                options={exploreDatasources}
-                styles={ResetStyles}
-                placeholder="Select datasource"
-                loadingMessage={() => 'Loading datasources...'}
-                noOptionsMessage={() => 'No datasources found'}
-                value={selectedDatasource}
-                components={{
-                  Option: PickerOption,
-                  IndicatorsContainer,
-                  NoOptionsMessage,
-                }}
+                datasources={exploreDatasources}
+                current={selectedDatasource}
               />
             </div>
           ) : null}
@@ -932,22 +932,22 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
             </button>
           </div>
           <div className="navbar-buttons relative">
-            <button className="btn navbar-button--primary" onClick={this.onSubmit}>
+            <button className="btn navbar-button navbar-button--primary" onClick={this.onSubmit}>
               Run Query{' '}
               {loading ? <i className="fa fa-spinner fa-spin run-icon" /> : <i className="fa fa-level-down run-icon" />}
             </button>
           </div>
         </div>
-
         {datasourceLoading ? <div className="explore-container">Loading datasource...</div> : null}
-
         {datasourceMissing ? (
           <div className="explore-container">Please add a datasource that supports Explore (e.g., Prometheus).</div>
         ) : null}
 
-        {datasourceError ? (
-          <div className="explore-container">Error connecting to datasource. [{datasourceError}]</div>
-        ) : null}
+        {datasourceError && (
+          <div className="explore-container">
+            <Alert message={`Error connecting to datasource: ${datasourceError}`} />
+          </div>
+        )}
 
         {datasource && !datasourceError ? (
           <div className="explore-container">
@@ -961,6 +961,8 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
               onExecuteQuery={this.onSubmit}
               onRemoveQueryRow={this.onRemoveQueryRow}
               transactions={queryTransactions}
+              exploreEvents={this.exploreEvents}
+              range={range}
             />
             <main className="m-t-2">
               <ErrorBoundary>
diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index 5afd1076db5..2119f5a96b7 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@@ -408,42 +408,37 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
         </div>
         <div className="logs-panel-options">
           <div className="logs-panel-controls">
-            <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} small />
-            <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} small />
-            <Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} small />
-            <ToggleButtonGroup
-              label="Dedup"
-              onChange={this.onChangeDedup}
-              value={dedup}
-              render={({ selectedValue, onChange }) =>
-                Object.keys(LogsDedupStrategy).map((dedupType, i) => (
-                  <ToggleButton
-                    className="btn-small"
-                    key={i}
-                    value={dedupType}
-                    onChange={onChange}
-                    title={LogsDedupDescription[dedupType] || null}
-                    selected={selectedValue === dedupType}
-                  >
-                    {dedupType}
-                  </ToggleButton>
-                ))
-              }
-            />
-            {hasData &&
-              meta && (
-                <div className="logs-panel-meta">
-                  {meta.map(item => (
-                    <div className="logs-panel-meta__item" key={item.label}>
-                      <span className="logs-panel-meta__label">{item.label}:</span>
-                      <span className="logs-panel-meta__value">{renderMetaItem(item.value, item.kind)}</span>
-                    </div>
-                  ))}
-                </div>
-              )}
+            <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} transparent />
+            <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} transparent />
+            <Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} transparent />
+            <ToggleButtonGroup label="Dedup" transparent={true}>
+              {Object.keys(LogsDedupStrategy).map((dedupType, i) => (
+                <ToggleButton
+                  key={i}
+                  value={dedupType}
+                  onChange={this.onChangeDedup}
+                  selected={dedup === dedupType}
+                  tooltip={LogsDedupDescription[dedupType]}
+                >
+                  {dedupType}
+                </ToggleButton>
+              ))}
+            </ToggleButtonGroup>
           </div>
         </div>
 
+        {hasData &&
+          meta && (
+            <div className="logs-panel-meta">
+              {meta.map(item => (
+                <div className="logs-panel-meta__item" key={item.label}>
+                  <span className="logs-panel-meta__label">{item.label}:</span>
+                  <span className="logs-panel-meta__value">{renderMetaItem(item.value, item.kind)}</span>
+                </div>
+              ))}
+            </div>
+          )}
+
         <div className="logs-rows">
           {hasData &&
             !deferLogs &&
diff --git a/public/app/features/explore/PlaceholdersBuffer.ts b/public/app/features/explore/PlaceholdersBuffer.ts
index 9a0db18ef04..461331daab4 100644
--- a/public/app/features/explore/PlaceholdersBuffer.ts
+++ b/public/app/features/explore/PlaceholdersBuffer.ts
@@ -88,7 +88,7 @@ export default class PlaceholdersBuffer {
       orders.push({ index: parts.length - 1, order });
       textOffset += part.length + match.length;
     }
-    // Ensures string serialisation still works if no placeholders were parsed
+    // Ensures string serialization still works if no placeholders were parsed
     // and also accounts for the remainder of text with placeholders
     parts.push(text.slice(textOffset));
     return {
diff --git a/public/app/features/explore/QueryEditor.tsx b/public/app/features/explore/QueryEditor.tsx
new file mode 100644
index 00000000000..7ad659ec784
--- /dev/null
+++ b/public/app/features/explore/QueryEditor.tsx
@@ -0,0 +1,78 @@
+import React, { PureComponent } from 'react';
+import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+import { Emitter } from 'app/core/utils/emitter';
+import { getIntervals } from 'app/core/utils/explore';
+import { DataQuery } from 'app/types';
+import { RawTimeRange } from 'app/types/series';
+import { getTimeSrv } from 'app/features/dashboard/time_srv';
+import 'app/features/plugins/plugin_loader';
+
+interface QueryEditorProps {
+  datasource: any;
+  error?: string | JSX.Element;
+  onExecuteQuery?: () => void;
+  onQueryChange?: (value: DataQuery, override?: boolean) => void;
+  initialQuery: DataQuery;
+  exploreEvents: Emitter;
+  range: RawTimeRange;
+}
+
+export default class QueryEditor extends PureComponent<QueryEditorProps, any> {
+  element: any;
+  component: AngularComponent;
+
+  async componentDidMount() {
+    if (!this.element) {
+      return;
+    }
+
+    const { datasource, initialQuery, exploreEvents, range } = this.props;
+    this.initTimeSrv(range);
+
+    const loader = getAngularLoader();
+    const template = '<plugin-component type="query-ctrl"> </plugin-component>';
+    const target = { datasource: datasource.name, ...initialQuery };
+    const scopeProps = {
+      target,
+      ctrl: {
+        refresh: () => {
+          this.props.onQueryChange(target, false);
+          this.props.onExecuteQuery();
+        },
+        events: exploreEvents,
+        panel: {
+          datasource,
+          targets: [target],
+        },
+        dashboard: {
+          getNextQueryLetter: x => '',
+        },
+        hideEditorRowActions: true,
+        ...getIntervals(range, datasource, null), // Possible to get resolution?
+      },
+    };
+
+    this.component = loader.load(this.element, scopeProps, template);
+    this.props.onQueryChange(target, false);
+  }
+
+  componentWillUnmount() {
+    if (this.component) {
+      this.component.destroy();
+    }
+  }
+
+  initTimeSrv(range) {
+    const timeSrv = getTimeSrv();
+    timeSrv.init({
+      time: range,
+      refresh: false,
+      getTimezone: () => 'utc',
+      timeRangeUpdated: () => console.log('refreshDashboard!'),
+    });
+  }
+
+  render() {
+    return <div ref={element => (this.element = element)} style={{ width: '100%' }} />;
+  }
+}
diff --git a/public/app/features/explore/QueryRows.tsx b/public/app/features/explore/QueryRows.tsx
index 52c705c469c..45a8c48ca22 100644
--- a/public/app/features/explore/QueryRows.tsx
+++ b/public/app/features/explore/QueryRows.tsx
@@ -1,10 +1,13 @@
 import React, { PureComponent } from 'react';
 
 import { QueryTransaction, HistoryItem, QueryHint } from 'app/types/explore';
+import { Emitter } from 'app/core/utils/emitter';
 
-import DefaultQueryField from './QueryField';
+// import DefaultQueryField from './QueryField';
+import QueryEditor from './QueryEditor';
 import QueryTransactionStatus from './QueryTransactionStatus';
 import { DataSource, DataQuery } from 'app/types';
+import { RawTimeRange } from 'app/types/series';
 
 function getFirstHintFromTransactions(transactions: QueryTransaction[]): QueryHint {
   const transaction = transactions.find(qt => qt.hints && qt.hints.length > 0);
@@ -27,6 +30,8 @@ interface QueryRowCommonProps {
   datasource: DataSource;
   history: HistoryItem[];
   transactions: QueryTransaction[];
+  exploreEvents: Emitter;
+  range: RawTimeRange;
 }
 
 type QueryRowProps = QueryRowCommonProps &
@@ -36,6 +41,11 @@ type QueryRowProps = QueryRowCommonProps &
   };
 
 class QueryRow extends PureComponent<QueryRowProps> {
+  onExecuteQuery = () => {
+    const { onExecuteQuery } = this.props;
+    onExecuteQuery();
+  };
+
   onChangeQuery = (value: DataQuery, override?: boolean) => {
     const { index, onChangeQuery } = this.props;
     if (onChangeQuery) {
@@ -76,27 +86,39 @@ class QueryRow extends PureComponent<QueryRowProps> {
   };
 
   render() {
-    const { datasource, history, initialQuery, transactions } = this.props;
+    const { datasource, history, initialQuery, transactions, exploreEvents, range } = 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;
+    const QueryField = datasource.pluginExports.ExploreQueryField;
     return (
       <div className="query-row">
         <div className="query-row-status">
           <QueryTransactionStatus transactions={transactions} />
         </div>
         <div className="query-row-field">
-          <QueryField
-            datasource={datasource}
-            error={queryError}
-            hint={hint}
-            initialQuery={initialQuery}
-            history={history}
-            onClickHintFix={this.onClickHintFix}
-            onPressEnter={this.onPressEnter}
-            onQueryChange={this.onChangeQuery}
-          />
+          {QueryField ? (
+            <QueryField
+              datasource={datasource}
+              error={queryError}
+              hint={hint}
+              initialQuery={initialQuery}
+              history={history}
+              onClickHintFix={this.onClickHintFix}
+              onPressEnter={this.onPressEnter}
+              onQueryChange={this.onChangeQuery}
+            />
+          ) : (
+            <QueryEditor
+              datasource={datasource}
+              error={queryError}
+              onQueryChange={this.onChangeQuery}
+              onExecuteQuery={this.onExecuteQuery}
+              initialQuery={initialQuery}
+              exploreEvents={exploreEvents}
+              range={range}
+            />
+          )}
         </div>
         <div className="query-row-tools">
           <button className="btn navbar-button navbar-button--tight" onClick={this.onClickClearButton}>
diff --git a/public/app/features/explore/TimePicker.tsx b/public/app/features/explore/TimePicker.tsx
index 20dc76811e4..b99618d257a 100644
--- a/public/app/features/explore/TimePicker.tsx
+++ b/public/app/features/explore/TimePicker.tsx
@@ -3,7 +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';
+import { RawTimeRange, TimeRange } from 'app/types/series';
 
 const DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 export const DEFAULT_RANGE = {
@@ -78,7 +78,7 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
       initialRange: DEFAULT_RANGE,
       refreshInterval: '',
     };
-  }
+  } //Temp solution... How do detect if ds supports table format?
 
   static getDerivedStateFromProps(props, state) {
     if (state.initialRange && state.initialRange === props.range) {
@@ -134,6 +134,12 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
       to: moment(nextTo),
     };
 
+    const nextTimeRange: TimeRange = {
+      raw: nextRange,
+      from: nextRange.from,
+      to: nextRange.to,
+    };
+
     this.setState(
       {
         rangeString: rangeUtil.describeTimeRange(nextRange),
@@ -141,7 +147,7 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
         toRaw: nextRange.to.format(DATE_FORMAT),
       },
       () => {
-        onChangeTime(nextRange, scanning);
+        onChangeTime(nextTimeRange, scanning);
       }
     );
 
@@ -226,60 +232,60 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
     const timeOptions = this.getTimeOptions();
     return (
       <div ref={this.dropdownRef} className="gf-timepicker-dropdown">
-        <div className="gf-timepicker-absolute-section">
-          <h3 className="section-heading">Custom range</h3>
-
-          <label className="small">From:</label>
-          <div className="gf-form-inline">
-            <div className="gf-form max-width-28">
-              <input
-                type="text"
-                className="gf-form-input input-large timepicker-from"
-                value={fromRaw}
-                onChange={this.handleChangeFrom}
-              />
-            </div>
+        <div className="popover-box">
+          <div className="popover-box__header">
+            <span className="popover-box__title">Quick ranges</span>
           </div>
-
-          <label className="small">To:</label>
-          <div className="gf-form-inline">
-            <div className="gf-form max-width-28">
-              <input
-                type="text"
-                className="gf-form-input input-large timepicker-to"
-                value={toRaw}
-                onChange={this.handleChangeTo}
-              />
-            </div>
-          </div>
-
-          {/* <label className="small">Refreshing every:</label>
-          <div className="gf-form-inline">
-            <div className="gf-form max-width-28">
-              <select className="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
-            </div>
-          </div> */}
-          <div className="gf-form">
-            <button className="btn gf-form-btn btn-secondary" onClick={this.handleClickApply}>
-              Apply
-            </button>
+          <div className="popover-box__body gf-timepicker-relative-section">
+            {Object.keys(timeOptions).map(section => {
+              const group = timeOptions[section];
+              return (
+                <ul key={section}>
+                  {group.map(option => (
+                    <li className={option.active ? 'active' : ''} key={option.display}>
+                      <a onClick={() => this.handleClickRelativeOption(option)}>{option.display}</a>
+                    </li>
+                  ))}
+                </ul>
+              );
+            })}
           </div>
         </div>
 
-        <div className="gf-timepicker-relative-section">
-          <h3 className="section-heading">Quick ranges</h3>
-          {Object.keys(timeOptions).map(section => {
-            const group = timeOptions[section];
-            return (
-              <ul key={section}>
-                {group.map(option => (
-                  <li className={option.active ? 'active' : ''} key={option.display}>
-                    <a onClick={() => this.handleClickRelativeOption(option)}>{option.display}</a>
-                  </li>
-                ))}
-              </ul>
-            );
-          })}
+        <div className="popover-box">
+          <div className="popover-box__header">
+            <span className="popover-box__title">Custom range</span>
+          </div>
+          <div className="popover-box__body gf-timepicker-absolute-section">
+            <label className="small">From:</label>
+            <div className="gf-form-inline">
+              <div className="gf-form max-width-28">
+                <input
+                  type="text"
+                  className="gf-form-input input-large timepicker-from"
+                  value={fromRaw}
+                  onChange={this.handleChangeFrom}
+                />
+              </div>
+            </div>
+
+            <label className="small">To:</label>
+            <div className="gf-form-inline">
+              <div className="gf-form max-width-28">
+                <input
+                  type="text"
+                  className="gf-form-input input-large timepicker-to"
+                  value={toRaw}
+                  onChange={this.handleChangeTo}
+                />
+              </div>
+            </div>
+            <div className="gf-form">
+              <button className="btn gf-form-btn btn-secondary" onClick={this.handleClickApply}>
+                Apply
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     );
diff --git a/public/app/features/folders/state/actions.ts b/public/app/features/folders/state/actions.ts
index cd02915e586..a7adc71e2d8 100644
--- a/public/app/features/folders/state/actions.ts
+++ b/public/app/features/folders/state/actions.ts
@@ -112,7 +112,7 @@ export function updateFolderPermission(itemToUpdate: DashboardAcl, level: Permis
 
       const updated = toUpdateItem(item);
 
-      // if this is the item we want to update, update it's permisssion
+      // if this is the item we want to update, update it's permission
       if (itemToUpdate === item) {
         updated.permission = level;
       }
diff --git a/public/app/features/manage-dashboards/SnapshotListCtrl.ts b/public/app/features/manage-dashboards/SnapshotListCtrl.ts
index 2ff53e7aed5..4d6dc006d47 100644
--- a/public/app/features/manage-dashboards/SnapshotListCtrl.ts
+++ b/public/app/features/manage-dashboards/SnapshotListCtrl.ts
@@ -5,10 +5,14 @@ export class SnapshotListCtrl {
   snapshots: any;
 
   /** @ngInject */
-  constructor(private $rootScope, private backendSrv, navModelSrv) {
+  constructor(private $rootScope, private backendSrv, navModelSrv, private $location) {
     this.navModel = navModelSrv.getNav('dashboards', 'snapshots', 0);
     this.backendSrv.get('/api/dashboard/snapshots').then(result => {
-      this.snapshots = result;
+      const baseUrl = this.$location.absUrl().replace($location.url(), '');
+      this.snapshots = result.map(snapshot => ({
+        ...snapshot,
+        url: snapshot.externalUrl || `${baseUrl}/dashboard/snapshot/${snapshot.key}`,
+      }));
     });
   }
 
diff --git a/public/app/features/manage-dashboards/partials/snapshot_list.html b/public/app/features/manage-dashboards/partials/snapshot_list.html
index 8775b527ae1..f646194088d 100644
--- a/public/app/features/manage-dashboards/partials/snapshot_list.html
+++ b/public/app/features/manage-dashboards/partials/snapshot_list.html
@@ -6,17 +6,21 @@
       <th><strong>Name</strong></th>
       <th><strong>Snapshot url</strong></th>
       <th style="width: 70px"></th>
+      <th style="width: 30px"></th>
       <th style="width: 25px"></th>
 		</thead>
 		<tr ng-repeat="snapshot in ctrl.snapshots">
       <td>
-				<a href="dashboard/snapshot/{{snapshot.key}}">{{snapshot.name}}</a>
+        <a href="{{snapshot.url}}">{{snapshot.name}}</a>
       </td>
       <td >
-        <a href="dashboard/snapshot/{{snapshot.key}}">dashboard/snapshot/{{snapshot.key}}</a>
+        <a href="{{snapshot.url}}">{{snapshot.url}}</a>
+      </td>
+      <td>
+        <span class="query-keyword" ng-if="snapshot.external">External</span>
       </td>
       <td class="text-center">
-        <a href="dashboard/snapshot/{{snapshot.key}}" class="btn btn-inverse btn-mini">
+        <a href="{{snapshot.url}}" class="btn btn-inverse btn-mini">
           <i class="fa fa-eye"></i>
           View
         </a>
diff --git a/public/app/features/org/state/actions.ts b/public/app/features/org/state/actions.ts
index aeec8297ea6..52793698a45 100644
--- a/public/app/features/org/state/actions.ts
+++ b/public/app/features/org/state/actions.ts
@@ -5,7 +5,7 @@ import { getBackendSrv } from 'app/core/services/backend_srv';
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, any>;
 
 export enum ActionTypes {
-  LoadOrganization = 'LOAD_ORGANISATION',
+  LoadOrganization = 'LOAD_ORGANIZATION',
   SetOrganizationName = 'SET_ORGANIZATION_NAME',
 }
 
@@ -19,9 +19,9 @@ interface SetOrganizationNameAction {
   payload: string;
 }
 
-const organisationLoaded = (organisation: Organization) => ({
+const organizationLoaded = (organization: Organization) => ({
   type: ActionTypes.LoadOrganization,
-  payload: organisation,
+  payload: organization,
 });
 
 export const setOrganizationName = (orgName: string) => ({
@@ -33,10 +33,10 @@ export type Action = LoadOrganizationAction | SetOrganizationNameAction;
 
 export function loadOrganization(): ThunkResult<void> {
   return async dispatch => {
-    const organisationResponse = await getBackendSrv().get('/api/org');
-    dispatch(organisationLoaded(organisationResponse));
+    const organizationResponse = await getBackendSrv().get('/api/org');
+    dispatch(organizationLoaded(organizationResponse));
 
-    return organisationResponse;
+    return organizationResponse;
   };
 }
 
diff --git a/public/app/features/panel/GeneralTabCtrl.ts b/public/app/features/panel/GeneralTabCtrl.ts
new file mode 100644
index 00000000000..75edd72027b
--- /dev/null
+++ b/public/app/features/panel/GeneralTabCtrl.ts
@@ -0,0 +1,46 @@
+import coreModule from 'app/core/core_module';
+
+const obj2string = obj => {
+  return Object.keys(obj)
+    .reduce((acc, curr) => acc.concat(curr + '=' + obj[curr]), [])
+    .join();
+};
+
+export class GeneralTabCtrl {
+  panelCtrl: any;
+
+  /** @ngInject */
+  constructor($scope) {
+    this.panelCtrl = $scope.ctrl;
+
+    const updatePanel = () => {
+      console.log('panel.render()');
+      this.panelCtrl.panel.render();
+    };
+
+    const generateValueFromPanel = scope => {
+      const { panel } = scope.ctrl;
+      const panelPropsToTrack = ['title', 'description', 'transparent', 'repeat', 'repeatDirection', 'minSpan'];
+      const panelPropsString = panelPropsToTrack
+        .map(prop => prop + '=' + (panel[prop] && panel[prop].toString ? panel[prop].toString() : panel[prop]))
+        .join();
+      const panelLinks = panel.links;
+      const panelLinksString = panelLinks.map(obj2string).join();
+      return panelPropsString + panelLinksString;
+    };
+
+    $scope.$watch(generateValueFromPanel, updatePanel, true);
+  }
+}
+
+/** @ngInject */
+export function generalTab() {
+  'use strict';
+  return {
+    restrict: 'E',
+    templateUrl: 'public/app/features/panel/partials/general_tab.html',
+    controller: GeneralTabCtrl,
+  };
+}
+
+coreModule.directive('panelGeneralTab', generalTab);
diff --git a/public/app/features/panel/all.ts b/public/app/features/panel/all.ts
index bdf1a097352..d461b491897 100644
--- a/public/app/features/panel/all.ts
+++ b/public/app/features/panel/all.ts
@@ -4,4 +4,3 @@ import './solo_panel_ctrl';
 import './query_ctrl';
 import './panel_editor_tab';
 import './query_editor_row';
-import './query_troubleshooter';
diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts
index e517c48bb59..5557b477b8f 100644
--- a/public/app/features/panel/metrics_panel_ctrl.ts
+++ b/public/app/features/panel/metrics_panel_ctrl.ts
@@ -1,13 +1,11 @@
-import $ from 'jquery';
 import _ from 'lodash';
 
-import config from 'app/core/config';
 import kbn from 'app/core/utils/kbn';
+import config from 'app/core/config';
+
 import { PanelCtrl } from 'app/features/panel/panel_ctrl';
-import * as rangeUtil from 'app/core/utils/rangeutil';
-import * as dateMath from 'app/core/utils/datemath';
 import { getExploreUrl } from 'app/core/utils/explore';
-import { metricsTabDirective } from './metrics_tab';
+import { applyPanelTimeOverrides, getResolution } from 'app/features/dashboard/utils/panel';
 
 class MetricsPanelCtrl extends PanelCtrl {
   scope: any;
@@ -28,13 +26,10 @@ class MetricsPanelCtrl extends PanelCtrl {
   dataStream: any;
   dataSubscription: any;
   dataList: any;
-  nextRefId: string;
 
   constructor($scope, $injector) {
     super($scope, $injector);
 
-    // make metrics tab the default
-    this.editorTabIndex = 1;
     this.$q = $injector.get('$q');
     this.contextSrv = $injector.get('contextSrv');
     this.datasourceSrv = $injector.get('datasourceSrv');
@@ -44,7 +39,6 @@ class MetricsPanelCtrl extends PanelCtrl {
     this.panel.datasource = this.panel.datasource || null;
 
     this.events.on('refresh', this.onMetricsPanelRefresh.bind(this));
-    this.events.on('init-edit-mode', this.onInitMetricsPanelEditMode.bind(this));
     this.events.on('panel-teardown', this.onPanelTearDown.bind(this));
   }
 
@@ -55,11 +49,6 @@ class MetricsPanelCtrl extends PanelCtrl {
     }
   }
 
-  private onInitMetricsPanelEditMode() {
-    this.addEditorTab('Metrics', metricsTabDirective, 1, 'fa fa-database');
-    this.addEditorTab('Time range', 'public/app/features/panel/partials/panelTime.html');
-  }
-
   private onMetricsPanelRefresh() {
     // ignore fetching data if another panel is in fullscreen
     if (this.otherPanelInFullscreenMode()) {
@@ -99,7 +88,7 @@ class MetricsPanelCtrl extends PanelCtrl {
       .then(this.issueQueries.bind(this))
       .then(this.handleQueryResult.bind(this))
       .catch(err => {
-        // if cancelled  keep loading set to true
+        // if canceled  keep loading set to true
         if (err.cancelled) {
           console.log('Panel request cancelled', err);
           return;
@@ -134,14 +123,11 @@ class MetricsPanelCtrl extends PanelCtrl {
   updateTimeRange(datasource?) {
     this.datasource = datasource || this.datasource;
     this.range = this.timeSrv.timeRange();
+    this.resolution = getResolution(this.panel);
 
-    this.applyPanelTimeOverrides();
-
-    if (this.panel.maxDataPoints) {
-      this.resolution = this.panel.maxDataPoints;
-    } else {
-      this.resolution = Math.ceil($(window).width() * (this.panel.gridPos.w / 24));
-    }
+    const newTimeData = applyPanelTimeOverrides(this.panel, this.range);
+    this.timeInfo = newTimeData.timeInfo;
+    this.range = newTimeData.timeRange;
 
     this.calculateInterval();
 
@@ -163,48 +149,6 @@ class MetricsPanelCtrl extends PanelCtrl {
     this.intervalMs = res.intervalMs;
   }
 
-  applyPanelTimeOverrides() {
-    this.timeInfo = '';
-
-    // check panel time overrrides
-    if (this.panel.timeFrom) {
-      const timeFromInterpolated = this.templateSrv.replace(this.panel.timeFrom, this.panel.scopedVars);
-      const timeFromInfo = rangeUtil.describeTextRange(timeFromInterpolated);
-      if (timeFromInfo.invalid) {
-        this.timeInfo = 'invalid time override';
-        return;
-      }
-
-      if (_.isString(this.range.raw.from)) {
-        const timeFromDate = dateMath.parse(timeFromInfo.from);
-        this.timeInfo = timeFromInfo.display;
-        this.range.from = timeFromDate;
-        this.range.to = dateMath.parse(timeFromInfo.to);
-        this.range.raw.from = timeFromInfo.from;
-        this.range.raw.to = timeFromInfo.to;
-      }
-    }
-
-    if (this.panel.timeShift) {
-      const timeShiftInterpolated = this.templateSrv.replace(this.panel.timeShift, this.panel.scopedVars);
-      const timeShiftInfo = rangeUtil.describeTextRange(timeShiftInterpolated);
-      if (timeShiftInfo.invalid) {
-        this.timeInfo = 'invalid timeshift';
-        return;
-      }
-
-      const timeShift = '-' + timeShiftInterpolated;
-      this.timeInfo += ' timeshift ' + timeShift;
-      this.range.from = dateMath.parseDateMath(timeShift, this.range.from, false);
-      this.range.to = dateMath.parseDateMath(timeShift, this.range.to, true);
-      this.range.raw = { from: this.range.from, to: this.range.to };
-    }
-
-    if (this.panel.hideTimeOverride) {
-      this.timeInfo = '';
-    }
-  }
-
   issueQueries(datasource) {
     this.datasource = datasource;
 
@@ -287,12 +231,7 @@ class MetricsPanelCtrl extends PanelCtrl {
 
   getAdditionalMenuItems() {
     const items = [];
-    if (
-      config.exploreEnabled &&
-      this.contextSrv.isEditor &&
-      this.datasource &&
-      (this.datasource.meta.explore || this.datasource.meta.id === 'mixed')
-    ) {
+    if (config.exploreEnabled && this.contextSrv.isEditor && this.datasource) {
       items.push({
         text: 'Explore',
         click: 'ctrl.explore();',
@@ -309,25 +248,6 @@ class MetricsPanelCtrl extends PanelCtrl {
       this.$timeout(() => this.$location.url(url));
     }
   }
-
-  addQuery(target) {
-    target.refId = this.dashboard.getNextQueryLetter(this.panel);
-
-    this.panel.targets.push(target);
-    this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
-  }
-
-  removeQuery(target) {
-    const index = _.indexOf(this.panel.targets, target);
-    this.panel.targets.splice(index, 1);
-    this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
-    this.refresh();
-  }
-
-  moveQuery(target, direction) {
-    const index = _.indexOf(this.panel.targets, target);
-    _.move(this.panel.targets, index, index + direction);
-  }
 }
 
 export { MetricsPanelCtrl };
diff --git a/public/app/features/panel/metrics_tab.ts b/public/app/features/panel/metrics_tab.ts
index e7fb8258bf9..70b3571e30d 100644
--- a/public/app/features/panel/metrics_tab.ts
+++ b/public/app/features/panel/metrics_tab.ts
@@ -1,150 +1,24 @@
 // Libraries
 import _ from 'lodash';
-import Remarkable from 'remarkable';
 
 // Services & utils
 import coreModule from 'app/core/core_module';
-import config from 'app/core/config';
+import { Emitter } from 'app/core/utils/emitter';
 
 // Types
 import { DashboardModel } from '../dashboard/dashboard_model';
+import { PanelModel } from '../dashboard/panel_model';
+import { DataQuery } from 'app/types';
 
-export class MetricsTabCtrl {
-  dsName: string;
-  panel: any;
-  panelCtrl: any;
-  datasources: any[];
-  datasourceInstance: any;
-  nextRefId: string;
+export interface AngularQueryComponentScope {
+  panel: PanelModel;
   dashboard: DashboardModel;
-  panelDsValue: any;
-  addQueryDropdown: any;
-  queryTroubleshooterOpen: boolean;
-  helpOpen: boolean;
-  optionsOpen: boolean;
-  hasQueryHelp: boolean;
-  helpHtml: string;
-  queryOptions: any;
-
-  /** @ngInject */
-  constructor($scope, private $sce, datasourceSrv, private backendSrv) {
-    this.panelCtrl = $scope.ctrl;
-    $scope.ctrl = this;
-
-    this.panel = this.panelCtrl.panel;
-    this.panel.datasource = this.panel.datasource || null;
-    this.panel.targets = this.panel.targets || [{}];
-
-    this.dashboard = this.panelCtrl.dashboard;
-    this.datasources = datasourceSrv.getMetricSources();
-    this.panelDsValue = this.panelCtrl.panel.datasource;
-
-    for (const ds of this.datasources) {
-      if (ds.value === this.panelDsValue) {
-        this.datasourceInstance = ds;
-      }
-    }
-
-    this.addQueryDropdown = { text: 'Add Query', value: null, fake: true };
-
-    // update next ref id
-    this.panelCtrl.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
-    this.updateDatasourceOptions();
-  }
-
-  updateDatasourceOptions() {
-    if (this.datasourceInstance) {
-      this.hasQueryHelp = this.datasourceInstance.meta.hasQueryHelp;
-      this.queryOptions = this.datasourceInstance.meta.queryOptions;
-    }
-  }
-
-  getOptions(includeBuiltin) {
-    return Promise.resolve(
-      this.datasources
-        .filter(value => {
-          return includeBuiltin || !value.meta.builtIn;
-        })
-        .map(ds => {
-          return { value: ds.value, text: ds.name, datasource: ds };
-        })
-    );
-  }
-
-  datasourceChanged(option) {
-    if (!option) {
-      return;
-    }
-
-    this.setDatasource(option.datasource);
-    this.updateDatasourceOptions();
-  }
-
-  setDatasource(datasource) {
-    // switching to mixed
-    if (datasource.meta.mixed) {
-      _.each(this.panel.targets, target => {
-        target.datasource = this.panel.datasource;
-        if (!target.datasource) {
-          target.datasource = config.defaultDatasource;
-        }
-      });
-    } else if (this.datasourceInstance) {
-      // if switching from mixed
-      if (this.datasourceInstance.meta.mixed) {
-        _.each(this.panel.targets, target => {
-          delete target.datasource;
-        });
-      } else if (this.datasourceInstance.meta.id !== datasource.meta.id) {
-        // we are changing data source type, clear queries
-        this.panel.targets = [{ refId: 'A' }];
-        this.panelCtrl.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
-      }
-    }
-
-    this.datasourceInstance = datasource;
-    this.panel.datasource = datasource.value;
-    this.panel.refresh();
-  }
-
-  addMixedQuery(option) {
-    if (!option) {
-      return;
-    }
-
-    this.panelCtrl.addQuery({
-      isNew: true,
-      datasource: option.datasource.name,
-    });
-    this.addQueryDropdown = { text: 'Add Query', value: null, fake: true };
-  }
-
-  addQuery() {
-    this.panelCtrl.addQuery({ isNew: true });
-  }
-
-  toggleHelp() {
-    this.optionsOpen = false;
-    this.queryTroubleshooterOpen = false;
-    this.helpOpen = !this.helpOpen;
-
-    this.backendSrv.get(`/api/plugins/${this.datasourceInstance.meta.id}/markdown/query_help`).then(res => {
-      const md = new Remarkable();
-      this.helpHtml = this.$sce.trustAsHtml(md.render(res));
-    });
-  }
-
-  toggleOptions() {
-    this.helpOpen = false;
-    this.queryTroubleshooterOpen = false;
-    this.optionsOpen = !this.optionsOpen;
-  }
-
-  toggleQueryTroubleshooter() {
-    this.helpOpen = false;
-    this.optionsOpen = false;
-    this.queryTroubleshooterOpen = !this.queryTroubleshooterOpen;
-  }
+  events: Emitter;
+  refresh: () => void;
+  render: () => void;
+  removeQuery: (query: DataQuery) => void;
+  addQuery: (query?: DataQuery) => void;
+  moveQuery: (query: DataQuery, direction: number) => void;
 }
 
 /** @ngInject */
@@ -154,7 +28,6 @@ export function metricsTabDirective() {
     restrict: 'E',
     scope: true,
     templateUrl: 'public/app/features/panel/partials/metrics_tab.html',
-    controller: MetricsTabCtrl,
   };
 }
 
diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts
index 92932142690..2bd43ee2a29 100644
--- a/public/app/features/panel/panel_ctrl.ts
+++ b/public/app/features/panel/panel_ctrl.ts
@@ -1,26 +1,23 @@
-import config from 'app/core/config';
 import _ from 'lodash';
 import $ from 'jquery';
+import Remarkable from 'remarkable';
+
+import config from 'app/core/config';
 import { profiler } from 'app/core/core';
+import { Emitter } from 'app/core/core';
 import {
   duplicatePanel,
   copyPanel as copyPanelUtil,
   editPanelJson as editPanelJsonUtil,
   sharePanel as sharePanelUtil,
 } from 'app/features/dashboard/utils/panel';
-import Remarkable from 'remarkable';
-import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
 
-const TITLE_HEIGHT = 27;
-const PANEL_BORDER = 2;
-
-import { Emitter } from 'app/core/core';
+import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants';
 
 export class PanelCtrl {
   panel: any;
   error: any;
   dashboard: any;
-  editorTabIndex: number;
   pluginName: string;
   pluginId: string;
   editorTabs: any;
@@ -41,7 +38,7 @@ export class PanelCtrl {
     this.$location = $injector.get('$location');
     this.$scope = $scope;
     this.$timeout = $injector.get('$timeout');
-    this.editorTabIndex = 0;
+    this.editorTabs = [];
     this.events = this.panel.events;
     this.timing = {};
 
@@ -92,29 +89,12 @@ export class PanelCtrl {
   }
 
   initEditMode() {
-    this.editorTabs = [];
-    this.addEditorTab('General', 'public/app/partials/panelgeneral.html');
-
-    this.editModeInitiated = true;
-    this.events.emit('init-edit-mode', null);
-
-    const urlTab = (this.$injector.get('$routeParams').tab || '').toLowerCase();
-    if (urlTab) {
-      this.editorTabs.forEach((tab, i) => {
-        if (tab.title.toLowerCase() === urlTab) {
-          this.editorTabIndex = i;
-        }
-      });
+    if (!this.editModeInitiated) {
+      this.editModeInitiated = true;
+      this.events.emit('init-edit-mode', null);
     }
   }
 
-  changeTab(newIndex) {
-    this.editorTabIndex = newIndex;
-    const route = this.$injector.get('$route');
-    route.current.params.tab = this.editorTabs[newIndex].title.toLowerCase();
-    route.updateParams();
-  }
-
   addEditorTab(title, directiveFn, index?, icon?) {
     const editorTab = { title, directiveFn, icon };
 
@@ -231,12 +211,7 @@ export class PanelCtrl {
       this.containerHeight = $(window).height();
     }
 
-    // hacky solution
-    if (this.panel.isEditing && !this.editModeInitiated) {
-      this.initEditMode();
-    }
-
-    this.height = this.containerHeight - (PANEL_BORDER + TITLE_HEIGHT);
+    this.height = this.containerHeight - (PANEL_BORDER + PANEL_HEADER_HEIGHT);
   }
 
   render(payload?) {
diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts
index 61c2be2adea..f503aa4386d 100644
--- a/public/app/features/panel/panel_directive.ts
+++ b/public/app/features/panel/panel_directive.ts
@@ -6,54 +6,22 @@ import baron from 'baron';
 const module = angular.module('grafana.directives');
 
 const panelTemplate = `
-  <div ng-class="{'panel-editor-container': ctrl.panel.isEditing, 'panel-height-helper': !ctrl.panel.isEditing}">
-    <div ng-class="{'panel-editor-container__panel': ctrl.panel.isEditing, 'panel-height-helper': !ctrl.panel.isEditing}">
-      <div class="panel-container">
-        <div class="panel-header" ng-class="{'grid-drag-handle': !ctrl.panel.fullscreen}">
-          <span class="panel-info-corner">
-            <i class="fa"></i>
-            <span class="panel-info-corner-inner"></span>
-          </span>
+  <div class="panel-container">
+      <div class="panel-header" ng-class="{'grid-drag-handle': !ctrl.panel.fullscreen}">
+        <span class="panel-info-corner">
+          <i class="fa"></i>
+          <span class="panel-info-corner-inner"></span>
+        </span>
 
-          <span class="panel-loading" ng-show="ctrl.loading">
-            <i class="fa fa-spinner fa-spin"></i>
-          </span>
+        <span class="panel-loading" ng-show="ctrl.loading">
+          <i class="fa fa-spinner fa-spin"></i>
+        </span>
 
-          <panel-header class="panel-title-container" panel-ctrl="ctrl"></panel-header>
-        </div>
-
-        <div class="panel-content">
-          <ng-transclude class="panel-height-helper"></ng-transclude>
-        </div>
+        <panel-header class="panel-title-container" panel-ctrl="ctrl"></panel-header>
       </div>
-    </div>
 
-    <div ng-if="ctrl.panel.isEditing" ng-class="{'panel-editor-container__editor': ctrl.panel.isEditing,
-                                                 'panel-height-helper': !ctrl.panel.isEditing}">
-      <div class="tabbed-view tabbed-view--new">
-        <div class="tabbed-view-header">
-          <h3 class="tabbed-view-panel-title">
-            {{ctrl.pluginName}}
-          </h3>
-
-          <ul class="gf-tabs">
-            <li class="gf-tabs-item" ng-repeat="tab in ::ctrl.editorTabs">
-              <a class="gf-tabs-link" ng-click="ctrl.changeTab($index)" ng-class="{active: ctrl.editorTabIndex === $index}">
-                {{::tab.title}}
-              </a>
-            </li>
-          </ul>
-
-          <button class="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
-            <i class="fa fa-remove"></i>
-          </button>
-        </div>
-
-        <div class="tabbed-view-body">
-          <div ng-repeat="tab in ctrl.editorTabs" ng-if="ctrl.editorTabIndex === $index" class="panel-height-helper">
-            <panel-editor-tab editor-tab="tab" ctrl="ctrl" index="$index"></panel-editor-tab>
-          </div>
-        </div>
+      <div class="panel-content">
+        <ng-transclude class="panel-height-helper"></ng-transclude>
       </div>
     </div>
   </div>
diff --git a/public/app/features/panel/panel_editor_tab.ts b/public/app/features/panel/panel_editor_tab.ts
index f7e1c48a323..52d427c54bf 100644
--- a/public/app/features/panel/panel_editor_tab.ts
+++ b/public/app/features/panel/panel_editor_tab.ts
@@ -9,11 +9,15 @@ function panelEditorTab(dynamicDirectiveSrv) {
     scope: {
       ctrl: '=',
       editorTab: '=',
-      index: '=',
     },
     directive: scope => {
       const pluginId = scope.ctrl.pluginId;
-      const tabName = scope.editorTab.title.toLowerCase().replace(' ', '-');
+      const tabName = scope.editorTab.title
+        .toLowerCase()
+        .replace(' ', '-')
+        .replace('&', '')
+        .replace(' ', '')
+        .replace(' ', '-');
 
       if (directiveCache[pluginId]) {
         if (directiveCache[pluginId][tabName]) {
diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts
index 1d29d04ad98..e844a73cfa9 100644
--- a/public/app/features/panel/panel_header.ts
+++ b/public/app/features/panel/panel_header.ts
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import { coreModule } from 'app/core/core';
 
 const template = `
@@ -93,40 +92,13 @@ function panelHeader($compile) {
         }
       });
 
-      elem.find('.panel-menu-toggle').click(() => {
-        togglePanelStackPosition();
-      });
-
       function togglePanelMenu(e) {
         if (!isDragged) {
           e.stopPropagation();
-          togglePanelStackPosition();
           elem.find('[data-toggle=dropdown]').dropdown('toggle');
         }
       }
 
-      /**
-       * Hack for adding special class 'dropdown-menu-open' to the panel.
-       * This class sets z-index for panel and prevents menu overlapping.
-       */
-      function togglePanelStackPosition() {
-        const menuOpenClass = 'dropdown-menu-open';
-        const panelGridClass = '.react-grid-item.panel';
-
-        let panelElem = elem
-          .find('[data-toggle=dropdown]')
-          .parentsUntil('.panel')
-          .parent();
-        const menuElem = elem.find('[data-toggle=dropdown]').parent();
-        panelElem = panelElem && panelElem.length ? panelElem[0] : undefined;
-        if (panelElem) {
-          panelElem = $(panelElem);
-          $(panelGridClass).removeClass(menuOpenClass);
-          const state = !menuElem.hasClass('open');
-          panelElem.toggleClass(menuOpenClass, state);
-        }
-      }
-
       let mouseX, mouseY;
       elem.mousedown(e => {
         mouseX = e.pageX;
diff --git a/public/app/features/panel/partials/general_tab.html b/public/app/features/panel/partials/general_tab.html
new file mode 100644
index 00000000000..7a4f1f7e17f
--- /dev/null
+++ b/public/app/features/panel/partials/general_tab.html
@@ -0,0 +1,49 @@
+<div class="panel-option-section">
+  <!-- <div class="panel&#45;option&#45;section__header">Information</div> -->
+  <div class="panel-option-section__body">
+    <div class="section">
+      <div class="gf-form">
+        <span class="gf-form-label width-7">Title</span>
+        <input type="text" class="gf-form-input width-25" ng-model='ctrl.panel.title' ng-model-onblur></input>
+      </div>
+      <gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
+    </div>
+    <div class="section">
+      <div class="gf-form gf-form--v-stretch">
+        <span class="gf-form-label width-7">Description</span>
+        <textarea class="gf-form-input width-25" rows="5" ng-model="ctrl.panel.description" ng-model-onblur placeholder="Panel description, supports markdown & links"></textarea>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="panel-option-section">
+  <div class="panel-option-section__header">Repeating</div>
+  <div class="panel-option-section__body">
+    <div class="section">
+      <div class="gf-form">
+        <span class="gf-form-label width-9">Repat</span>
+        <dash-repeat-option panel="ctrl.panel"></dash-repeat-option>
+      </div>
+      <div class="gf-form" ng-show="ctrl.panel.repeat">
+        <span class="gf-form-label width-9">Direction</span>
+        <select class="gf-form-input" ng-model="ctrl.panel.repeatDirection" ng-options="f.value as f.text for f in [{value: 'v', text: 'Vertical'}, {value: 'h', text: 'Horizontal'}]">
+          <option value=""></option>
+        </select>
+      </div>
+      <div class="gf-form" ng-show="ctrl.panel.repeat && ctrl.panel.repeatDirection == 'h'">
+        <span class="gf-form-label width-9">Min width</span>
+        <select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]">
+          <option value=""></option>
+        </select>
+      </div>
+      </div>
+  </div>
+</div>
+
+<div class="panel-option-section">
+  <div class="panel-option-section__header">Drildown Links</div>
+  <div class="panel-option-section__body">
+    <panel-links-editor panel="ctrl.panel"></panel-links-editor>
+  </div>
+</div>
diff --git a/public/app/features/panel/partials/metrics_tab.html b/public/app/features/panel/partials/metrics_tab.html
index 815a99d6b74..5e9f23ba2ef 100644
--- a/public/app/features/panel/partials/metrics_tab.html
+++ b/public/app/features/panel/partials/metrics_tab.html
@@ -1,75 +1,3 @@
-<div class="gf-form-group">
-  <div class="gf-form-inline">
-    <div class="gf-form">
-      <label class="gf-form-label">Data Source</label>
-      <gf-form-dropdown model="ctrl.panelDsValue" css-class="gf-size-auto"
-                        lookup-text="true"
-                        get-options="ctrl.getOptions(true)"
-                        on-change="ctrl.datasourceChanged($option)">
-      </gf-form-dropdown>
-		</div>
-
-		<div class="gf-form gf-form--grow">
-			<label class="gf-form-label gf-form-label--grow"></label>
-		</div>
-		<div class="gf-form" ng-if="ctrl.queryOptions">
-			<a class="gf-form-label" ng-click="ctrl.toggleOptions()">
-				<i class="fa fa-fw fa-caret-right" ng-hide="ctrl.optionsOpen"></i><i class="fa fa-fw fa-caret-down" ng-show="ctrl.optionsOpen"></i>Options
-			</a>
-		</div>
-		<div class="gf-form" ng-if="ctrl.hasQueryHelp">
-			<button class="gf-form-label" ng-click="ctrl.toggleHelp()">
-				<i class="fa fa-fw fa-caret-right" ng-hide="ctrl.helpOpen"></i><i class="fa fa-fw fa-caret-down" ng-show="ctrl.helpOpen"></i>Help
-			</button>
-		</div>
-		<div class="gf-form">
-			<button class="gf-form-label" ng-click="ctrl.toggleQueryTroubleshooter()" bs-tooltip="'Display query request & response'">
-				<i class="fa fa-fw fa-caret-right" ng-hide="ctrl.queryTroubleshooterOpen"></i><i class="fa fa-fw fa-caret-down" ng-show="ctrl.queryTroubleshooterOpen"></i>Query Inspector
-			</button>
-		</div>
-	</div>
-
-	<div>
-		<div ng-if="ctrl.optionsOpen">
-			<div class="gf-form gf-form--flex-end" ng-if="ctrl.queryOptions.minInterval">
-				<label class="gf-form-label">Min time interval</label>
-				<input type="text" class="gf-form-input width-6" placeholder="{{ctrl.panelCtrl.interval}}" ng-model="ctrl.panel.interval" spellcheck="false" ng-model-onblur ng-change="ctrl.panelCtrl.refresh()" />
-				<info-popover mode="right-absolute">
-					A lower limit for the auto group by time interval. Recommended to be set to write frequency,
-					for example <code>1m</code> if your data is written every minute. Access auto interval via variable <code>$__interval</code> for time range
-					string and <code>$__interval_ms</code> for numeric variable that can be used in math expressions.
-				</info-popover>
-			</div>
-			<div class="gf-form gf-form--flex-end" ng-if="ctrl.queryOptions.cacheTimeout">
-				<label class="gf-form-label width-9">Cache timeout</label>
-				<input  type="text" class="gf-form-input width-6" placeholder="60" ng-model="ctrl.panel.cacheTimeout" ng-model-onblur ng-change="ctrl.panelCtrl.refresh()" spellcheck="false" />
-				<info-popover mode="right-absolute">
-					If your time series store has a query cache this option can override the default
-					cache timeout. Specify a numeric value in seconds.
-				</info-popover>
-			</div>
-			<div class="gf-form gf-form--flex-end" ng-if="ctrl.queryOptions.maxDataPoints">
-				<label class="gf-form-label width-9">Max data points</label>
-				<input type="text" class="gf-form-input width-6" placeholder="auto" ng-model-onblur ng-change="ctrl.panelCtrl.refresh()" ng-model="ctrl.panel.maxDataPoints" spellcheck="false"  />
-				<info-popover mode="right-absolute">
-					The maximum data points the query should return. For graphs this
-					is automatically set to one data point per pixel.
-				</info-popover>
-			</div>
-		</div>
-
-		<div class="grafana-info-box" ng-if="ctrl.helpOpen">
-			<div class="markdown-html" ng-bind-html="ctrl.helpHtml"></div>
-			<a class="grafana-info-box__close" ng-click="ctrl.toggleHelp()">
-				<i class="fa fa-chevron-up"></i>
-			</a>
-		</div>
-
-		<query-troubleshooter panel-ctrl="ctrl.panelCtrl" is-open="ctrl.queryTroubleshooterOpen"></query-troubleshooter>
-	</div>
-</div>
-
-<div class="query-editor-rows gf-form-group" ng-if="ctrl.datasourceInstance">
 	<div ng-repeat="target in ctrl.panel.targets" ng-class="{'gf-form-disabled': target.hide}">
 		<rebuild-on-change property="ctrl.panel.datasource || target.datasource" show-null="true">
 			<plugin-component type="query-ctrl">
@@ -77,21 +5,20 @@
 		</rebuild-on-change>
 	</div>
 
-	<div class="gf-form-query">
-		<div class="gf-form gf-form-query-letter-cell">
-			<label class="gf-form-label">
-				<span class="gf-form-query-letter-cell-carret">
-					<i class="fa fa-caret-down"></i>
-				</span>
-				<span class="gf-form-query-letter-cell-letter">{{ctrl.panelCtrl.nextRefId}}</span>
-			</label>
-			<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.datasourceInstance.meta.mixed">
-				Add Query
-			</button>
-			<div class="dropdown" ng-if="ctrl.datasourceInstance.meta.mixed">
-				<gf-form-dropdown model="ctrl.addQueryDropdown" get-options="ctrl.getOptions(false)" on-change="ctrl.addMixedQuery($option)">
-				</gf-form-dropdown>
-			</div>
-		</div>
-	</div>
-</div>
+	<!-- <div class="gf&#45;form&#45;query"> -->
+	<!-- 	<div class="gf&#45;form gf&#45;form&#45;query&#45;letter&#45;cell"> -->
+	<!-- 		<label class="gf&#45;form&#45;label"> -->
+	<!-- 			<span class="gf&#45;form&#45;query&#45;letter&#45;cell&#45;carret"> -->
+	<!-- 				<i class="fa fa&#45;caret&#45;down"></i> -->
+	<!-- 			</span> -->
+	<!-- 			<span class="gf&#45;form&#45;query&#45;letter&#45;cell&#45;letter">{{ctrl.nextRefId}}</span> -->
+	<!-- 		</label> -->
+	<!-- 		<button class="btn btn&#45;secondary gf&#45;form&#45;btn" ng&#45;click="ctrl.addQuery()" ng&#45;hide="ctrl.datasourceInstance.meta.mixed"> -->
+	<!-- 			Add Query -->
+	<!-- 		</button> -->
+	<!-- 		<div class="dropdown" ng&#45;if="ctrl.datasourceInstance.meta.mixed"> -->
+	<!-- 			<gf&#45;form&#45;dropdown model="ctrl.addQueryDropdown" get&#45;options="ctrl.getOptions(false)" on&#45;change="ctrl.addMixedQuery($option)"> -->
+	<!-- 			</gf&#45;form&#45;dropdown> -->
+	<!-- 		</div> -->
+	<!-- 	</div> -->
+	<!-- </div> -->
diff --git a/public/app/features/panel/partials/query_editor_row.html b/public/app/features/panel/partials/query_editor_row.html
index 4cdc04da512..34a86813d1d 100644
--- a/public/app/features/panel/partials/query_editor_row.html
+++ b/public/app/features/panel/partials/query_editor_row.html
@@ -1,59 +1,44 @@
-
 <div class="gf-form-query">
-	<div class="gf-form gf-form-query-letter-cell">
+  <div ng-if="!ctrl.hideEditorRowActions" class="gf-form gf-form-query-letter-cell">
     <label class="gf-form-label">
       <a class="pointer" tabindex="1" ng-click="ctrl.toggleCollapse()">
-        <span  ng-class="{muted: !ctrl.canCollapse}" class="gf-form-query-letter-cell-carret">
+        <span ng-class="{muted: !ctrl.canCollapse}" class="gf-form-query-letter-cell-carret">
           <i class="fa fa-caret-down" ng-hide="ctrl.collapsed"></i>
           <i class="fa fa-caret-right" ng-show="ctrl.collapsed"></i>
         </span>
-        <span class="gf-form-query-letter-cell-letter">{{ctrl.target.refId}}</span>
-        <em class="gf-form-query-letter-cell-ds" ng-show="ctrl.target.datasource">({{ctrl.target.datasource}})</em>
+        <span class="gf-form-query-letter-cell-letter">{{ ctrl.target.refId }}</span>
+        <em class="gf-form-query-letter-cell-ds" ng-show="ctrl.target.datasource">({{ ctrl.target.datasource }})</em>
       </a>
-		</label>
+    </label>
   </div>
 
-	<div class="gf-form-query-content gf-form-query-content--collapsed" ng-if="ctrl.collapsed">
-		<div class="gf-form">
-			<label class="gf-form-label pointer gf-form-label--grow" ng-click="ctrl.toggleCollapse()">
-				{{ctrl.collapsedText}}
-			</label>
-		</div>
-	</div>
+  <div class="gf-form-query-content gf-form-query-content--collapsed" ng-if="ctrl.collapsed">
+    <div class="gf-form">
+      <label class="gf-form-label pointer gf-form-label--grow" ng-click="ctrl.toggleCollapse()">
+        {{ ctrl.collapsedText }}
+      </label>
+    </div>
+  </div>
 
-	<div ng-transclude class="gf-form-query-content" ng-if="!ctrl.collapsed">
-	</div>
+  <div ng-transclude class="gf-form-query-content" ng-if="!ctrl.collapsed"></div>
 
-	<div class="gf-form">
-		<label class="gf-form-label dropdown">
-			<a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1">
-				<i class="fa fa-bars"></i>
-			</a>
-			<ul class="dropdown-menu pull-right" role="menu">
-				<li role="menuitem" ng-if="ctrl.hasTextEditMode">
-					<a tabindex="1" ng-click="ctrl.toggleEditorMode()">Toggle Edit Mode</a>
-				</li>
-				<li role="menuitem">
-					<a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a>
-				</li>
-				<li role="menuitem">
-					<a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a>
-				</li>
-				<li role="menuitem">
-					<a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a>
-				</li>
-			</ul>
-		</label>
+  <div ng-if="!ctrl.hideEditorRowActions" class="gf-form">
+    <label class="gf-form-label dropdown">
+      <a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1"> <i class="fa fa-bars"></i> </a>
+      <ul class="dropdown-menu pull-right" role="menu">
+        <li role="menuitem" ng-if="ctrl.hasTextEditMode">
+          <a tabindex="1" ng-click="ctrl.toggleEditorMode()">Toggle Edit Mode</a>
+        </li>
+        <li role="menuitem"><a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a></li>
+        <li role="menuitem"><a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a></li>
+        <li role="menuitem"><a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a></li>
+      </ul>
+    </label>
     <label class="gf-form-label">
-			<a ng-click="ctrl.toggleHideQuery()" role="menuitem">
-				<i class="fa fa-eye"></i>
-			</a>
-		</label>
-		<label class="gf-form-label">
-			<a class="pointer" tabindex="1" ng-click="ctrl.removeQuery(ctrl.target)">
-				<i class="fa fa-trash"></i>
-			</a>
-		</label>
-	</div>
+      <a ng-click="ctrl.toggleHideQuery()" role="menuitem"> <i class="fa fa-eye"></i> </a>
+    </label>
+    <label class="gf-form-label">
+      <a class="pointer" tabindex="1" ng-click="ctrl.removeQuery(ctrl.target)"> <i class="fa fa-trash"></i> </a>
+    </label>
+  </div>
 </div>
-
diff --git a/public/app/features/panel/query_editor_row.ts b/public/app/features/panel/query_editor_row.ts
index fb4c4a5cde6..a44c1e8be6d 100644
--- a/public/app/features/panel/query_editor_row.ts
+++ b/public/app/features/panel/query_editor_row.ts
@@ -11,14 +11,16 @@ export class QueryRowCtrl {
   panelCtrl: any;
   panel: any;
   collapsed: any;
+  hideEditorRowActions: boolean;
 
   constructor() {
     this.panelCtrl = this.queryCtrl.panelCtrl;
     this.target = this.queryCtrl.target;
     this.panel = this.panelCtrl.panel;
+    this.hideEditorRowActions = this.panelCtrl.hideEditorRowActions;
 
     if (!this.target.refId) {
-      this.target.refId = this.panelCtrl.dashboard.getNextQueryLetter(this.panel);
+      this.target.refId = this.panel.getNextQueryLetter();
     }
 
     this.toggleCollapse(true);
diff --git a/public/app/features/panel/query_troubleshooter.ts b/public/app/features/panel/query_troubleshooter.ts
deleted file mode 100644
index c19efd4d065..00000000000
--- a/public/app/features/panel/query_troubleshooter.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-import _ from 'lodash';
-import appEvents from 'app/core/app_events';
-import { coreModule, JsonExplorer } from 'app/core/core';
-
-const template = `
-<div class="query-troubleshooter" ng-if="ctrl.isOpen">
-  <div class="query-troubleshooter__header">
-    <a class="pointer" ng-click="ctrl.toggleMocking()">Mock Response</a>
-    <a class="pointer" ng-click="ctrl.toggleExpand()" ng-hide="ctrl.allNodesExpanded">
-      <i class="fa fa-plus-square-o"></i> Expand All
-    </a>
-    <a class="pointer" ng-click="ctrl.toggleExpand()" ng-show="ctrl.allNodesExpanded">
-      <i class="fa fa-minus-square-o"></i> Collapse All
-    </a>
-    <a class="pointer" clipboard-button="ctrl.getClipboardText()"><i class="fa fa-clipboard"></i> Copy to Clipboard</a>
-  </div>
-  <div class="query-troubleshooter__body" ng-hide="ctrl.isMocking">
-    <i class="fa fa-spinner fa-spin" ng-show="ctrl.isLoading"></i>
-    <div class="query-troubleshooter-json"></div>
-  </div>
-  <div class="query-troubleshooter__body" ng-show="ctrl.isMocking">
-    <div class="gf-form p-l-1 gf-form--v-stretch">
-			<textarea class="gf-form-input" style="width: 95%" rows="10" ng-model="ctrl.mockedResponse"  placeholder="JSON"></textarea>
-    </div>
-  </div>
-</div>
-`;
-
-export class QueryTroubleshooterCtrl {
-  isOpen: any;
-  isLoading: boolean;
-  showResponse: boolean;
-  panelCtrl: any;
-  renderJsonExplorer: (data) => void;
-  onRequestErrorEventListener: any;
-  onRequestResponseEventListener: any;
-  hasError: boolean;
-  allNodesExpanded: boolean;
-  isMocking: boolean;
-  mockedResponse: string;
-  jsonExplorer: JsonExplorer;
-
-  /** @ngInject */
-  constructor($scope, private $timeout) {
-    this.onRequestErrorEventListener = this.onRequestError.bind(this);
-    this.onRequestResponseEventListener = this.onRequestResponse.bind(this);
-
-    appEvents.on('ds-request-response', this.onRequestResponseEventListener);
-    appEvents.on('ds-request-error', this.onRequestErrorEventListener);
-
-    $scope.$on('$destroy', this.removeEventsListeners.bind(this));
-    $scope.$watch('ctrl.isOpen', this.stateChanged.bind(this));
-  }
-
-  removeEventsListeners() {
-    appEvents.off('ds-request-response', this.onRequestResponseEventListener);
-    appEvents.off('ds-request-error', this.onRequestErrorEventListener);
-  }
-
-  toggleMocking() {
-    this.isMocking = !this.isMocking;
-  }
-
-  onRequestError(err) {
-    // ignore if closed
-    if (!this.isOpen) {
-      return;
-    }
-
-    this.isOpen = true;
-    this.hasError = true;
-    this.onRequestResponse(err);
-  }
-
-  stateChanged() {
-    if (this.isOpen) {
-      this.panelCtrl.refresh();
-      this.isLoading = true;
-    }
-  }
-
-  getClipboardText(): string {
-    if (this.jsonExplorer) {
-      return JSON.stringify(this.jsonExplorer.json, null, 2);
-    }
-    return '';
-  }
-
-  handleMocking(data) {
-    let mockedData;
-    try {
-      mockedData = JSON.parse(this.mockedResponse);
-    } catch (err) {
-      appEvents.emit('alert-error', ['Failed to parse mocked response']);
-      return;
-    }
-
-    data.data = mockedData;
-  }
-
-  onRequestResponse(data) {
-    // ignore if closed
-    if (!this.isOpen) {
-      return;
-    }
-
-    if (this.isMocking) {
-      this.handleMocking(data);
-      return;
-    }
-
-    this.isLoading = false;
-    data = _.cloneDeep(data);
-
-    if (data.headers) {
-      delete data.headers;
-    }
-
-    if (data.config) {
-      data.request = data.config;
-      delete data.config;
-      delete data.request.transformRequest;
-      delete data.request.transformResponse;
-      delete data.request.paramSerializer;
-      delete data.request.jsonpCallbackParam;
-      delete data.request.headers;
-      delete data.request.requestId;
-      delete data.request.inspect;
-      delete data.request.retry;
-      delete data.request.timeout;
-    }
-
-    if (data.data) {
-      data.response = data.data;
-
-      if (data.status === 200) {
-        // if we are in error state, assume we automatically opened
-        // and auto close it again
-        if (this.hasError) {
-          this.hasError = false;
-          this.isOpen = false;
-        }
-      }
-
-      delete data.data;
-      delete data.status;
-      delete data.statusText;
-      delete data.$$config;
-    }
-
-    this.$timeout(_.partial(this.renderJsonExplorer, data));
-  }
-
-  toggleExpand(depth) {
-    if (this.jsonExplorer) {
-      this.allNodesExpanded = !this.allNodesExpanded;
-      this.jsonExplorer.openAtDepth(this.allNodesExpanded ? 20 : 1);
-    }
-  }
-}
-
-export function queryTroubleshooter() {
-  return {
-    restrict: 'E',
-    template: template,
-    controller: QueryTroubleshooterCtrl,
-    bindToController: true,
-    controllerAs: 'ctrl',
-    scope: {
-      panelCtrl: '=',
-      isOpen: '=',
-    },
-    link: (scope, elem, attrs, ctrl) => {
-      ctrl.renderJsonExplorer = data => {
-        const jsonElem = elem.find('.query-troubleshooter-json');
-
-        ctrl.jsonExplorer = new JsonExplorer(data, 3, {
-          animateOpen: true,
-        });
-
-        const html = ctrl.jsonExplorer.render(true);
-        jsonElem.html(html);
-      };
-    },
-  };
-}
-
-coreModule.directive('queryTroubleshooter', queryTroubleshooter);
diff --git a/public/app/features/panel/viz_tab.ts b/public/app/features/panel/viz_tab.ts
deleted file mode 100644
index b80b84a341a..00000000000
--- a/public/app/features/panel/viz_tab.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import coreModule from 'app/core/core_module';
-import { DashboardModel } from '../dashboard/dashboard_model';
-import { VizTypePicker } from '../dashboard/dashgrid/VizTypePicker';
-import { react2AngularDirective } from 'app/core/utils/react2angular';
-import { PanelPlugin } from 'app/types/plugins';
-
-export class VizTabCtrl {
-  panelCtrl: any;
-  dashboard: DashboardModel;
-
-  /** @ngInject */
-  constructor($scope) {
-    this.panelCtrl = $scope.ctrl;
-    this.dashboard = this.panelCtrl.dashboard;
-
-    $scope.ctrl = this;
-  }
-
-  onTypeChanged = (plugin: PanelPlugin) => {};
-}
-
-const template = `
-<div class="gf-form-group ">
-  <div class="gf-form-query">
-    <div class="gf-form">
-      <label class="gf-form-label">
-        <img src="public/app/plugins/panel/graph/img/icn-graph-panel.svg" style="width: 16px; height: 16px" />
-        Graph
-        <i class="fa fa-caret-down" />
-      </label>
-		</div>
-
-		<div class="gf-form gf-form--grow">
-			<label class="gf-form-label gf-form-label--grow"></label>
-		</div>
-	</div>
-
-	<br />
-	<br />
-
-  <div class="query-editor-rows gf-form-group">
-	  <div ng-repeat="tab in ctrl.panelCtrl.optionTabs">
-	    <div class="gf-form-query">
-		    <div class="gf-form gf-form-query-letter-cell">
-			    <label class="gf-form-label">
-				    <span class="gf-form-query-letter-cell-carret">
-					    <i class="fa fa-caret-down"></i>
-				    </span>
-				    <span class="gf-form-query-letter-cell-letter">{{tab.title}}</span>
-          </label>
-			  </div>
-        <div class="gf-form gf-form--grow">
-			    <label class="gf-form-label gf-form-label--grow"></label>
-		    </div>
-			</div>
-		</div>
-	</div>
-</div>`;
-
-/** @ngInject */
-export function vizTabDirective() {
-  'use strict';
-  return {
-    restrict: 'E',
-    template: template,
-    controller: VizTabCtrl,
-  };
-}
-
-react2AngularDirective('vizTypePicker', VizTypePicker, ['currentType', ['onTypeChanged', { watchDepth: 'reference' }]]);
-coreModule.directive('vizTab', vizTabDirective);
diff --git a/public/app/features/plugins/__mocks__/pluginMocks.ts b/public/app/features/plugins/__mocks__/pluginMocks.ts
index d8dd67d5b61..b922840cb43 100644
--- a/public/app/features/plugins/__mocks__/pluginMocks.ts
+++ b/public/app/features/plugins/__mocks__/pluginMocks.ts
@@ -1,4 +1,4 @@
-import { Plugin } from 'app/types';
+import { Plugin, PanelPlugin } from 'app/types';
 
 export const getMockPlugins = (amount: number): Plugin[] => {
   const plugins = [];
@@ -17,7 +17,7 @@ export const getMockPlugins = (amount: number): Plugin[] => {
         description: 'pretty decent plugin',
         links: ['one link'],
         logos: { small: 'small/logo', large: 'large/logo' },
-        screenshots: `screenshot/${i}`,
+        screenshots: [{ path: `screenshot/${i}` }],
         updated: '2018-09-26',
         version: '1',
       },
@@ -26,12 +26,38 @@ export const getMockPlugins = (amount: number): Plugin[] => {
       pinned: false,
       state: '',
       type: '',
+      module: {},
     });
   }
 
   return plugins;
 };
 
+export const getPanelPlugin = (options: { id: string; sort?: number; hideFromList?: boolean }): PanelPlugin => {
+  return {
+    id: options.id,
+    name: options.id,
+    sort: options.sort || 1,
+    info: {
+      author: {
+        name: options.id + 'name',
+      },
+      description: '',
+      links: [],
+      logos: {
+        large: '',
+        small: '',
+      },
+      screenshots: [],
+      updated: '',
+      version: '',
+    },
+    hideFromList: options.hideFromList === true,
+    module: '',
+    baseUrl: '',
+  };
+};
+
 export const getMockPlugin = () => {
   return {
     defaultNavUrl: 'some/url',
@@ -44,9 +70,9 @@ export const getMockPlugin = () => {
         url: 'url/to/GrafanaLabs',
       },
       description: 'pretty decent plugin',
-      links: ['one link'],
+      links: [{ name: 'project', url: 'one link' }],
       logos: { small: 'small/logo', large: 'large/logo' },
-      screenshots: 'screenshot/1',
+      screenshots: [{ path: `screenshot` }],
       updated: '2018-09-26',
       version: '1',
     },
@@ -55,5 +81,6 @@ export const getMockPlugin = () => {
     pinned: false,
     state: '',
     type: '',
+    module: {},
   };
 };
diff --git a/public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap b/public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap
index 176304b7b11..160c02c6e8e 100644
--- a/public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap
+++ b/public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap
@@ -28,11 +28,16 @@ exports[`Render should render component 1`] = `
               "large": "large/logo",
               "small": "small/logo",
             },
-            "screenshots": "screenshot/0",
+            "screenshots": Array [
+              Object {
+                "path": "screenshot/0",
+              },
+            ],
             "updated": "2018-09-26",
             "version": "1",
           },
           "latestVersion": "1.0",
+          "module": Object {},
           "name": "pretty cool plugin-0",
           "pinned": false,
           "state": "",
@@ -61,11 +66,16 @@ exports[`Render should render component 1`] = `
               "large": "large/logo",
               "small": "small/logo",
             },
-            "screenshots": "screenshot/1",
+            "screenshots": Array [
+              Object {
+                "path": "screenshot/1",
+              },
+            ],
             "updated": "2018-09-26",
             "version": "1",
           },
           "latestVersion": "1.1",
+          "module": Object {},
           "name": "pretty cool plugin-1",
           "pinned": false,
           "state": "",
@@ -94,11 +104,16 @@ exports[`Render should render component 1`] = `
               "large": "large/logo",
               "small": "small/logo",
             },
-            "screenshots": "screenshot/2",
+            "screenshots": Array [
+              Object {
+                "path": "screenshot/2",
+              },
+            ],
             "updated": "2018-09-26",
             "version": "1",
           },
           "latestVersion": "1.2",
+          "module": Object {},
           "name": "pretty cool plugin-2",
           "pinned": false,
           "state": "",
@@ -127,11 +142,16 @@ exports[`Render should render component 1`] = `
               "large": "large/logo",
               "small": "small/logo",
             },
-            "screenshots": "screenshot/3",
+            "screenshots": Array [
+              Object {
+                "path": "screenshot/3",
+              },
+            ],
             "updated": "2018-09-26",
             "version": "1",
           },
           "latestVersion": "1.3",
+          "module": Object {},
           "name": "pretty cool plugin-3",
           "pinned": false,
           "state": "",
@@ -160,11 +180,16 @@ exports[`Render should render component 1`] = `
               "large": "large/logo",
               "small": "small/logo",
             },
-            "screenshots": "screenshot/4",
+            "screenshots": Array [
+              Object {
+                "path": "screenshot/4",
+              },
+            ],
             "updated": "2018-09-26",
             "version": "1",
           },
           "latestVersion": "1.4",
+          "module": Object {},
           "name": "pretty cool plugin-4",
           "pinned": false,
           "state": "",
@@ -193,11 +218,16 @@ exports[`Render should render component 1`] = `
               "large": "large/logo",
               "small": "small/logo",
             },
-            "screenshots": "screenshot/5",
+            "screenshots": Array [
+              Object {
+                "path": "screenshot/5",
+              },
+            ],
             "updated": "2018-09-26",
             "version": "1",
           },
           "latestVersion": "1.5",
+          "module": Object {},
           "name": "pretty cool plugin-5",
           "pinned": false,
           "state": "",
diff --git a/public/app/features/plugins/datasource_srv.ts b/public/app/features/plugins/datasource_srv.ts
index f7bd6b4d1ee..0d68cbc71ba 100644
--- a/public/app/features/plugins/datasource_srv.ts
+++ b/public/app/features/plugins/datasource_srv.ts
@@ -1,14 +1,11 @@
-// Libraries
 import _ from 'lodash';
 import coreModule from 'app/core/core_module';
 
-// Utils
 import config from 'app/core/config';
 import { importPluginModule } from './plugin_loader';
 
-// Types
 import { DataSourceApi } from 'app/types/series';
-import { DataSource } from 'app/types';
+import { DataSource, DataSourceSelectItem } from 'app/types';
 
 export class DatasourceSrv {
   datasources: { [name: string]: DataSource };
@@ -77,7 +74,13 @@ export class DatasourceSrv {
   }
 
   getAll() {
-    return config.datasources;
+    const { datasources } = config;
+    return Object.keys(datasources).map(name => datasources[name]);
+  }
+
+  getExternal() {
+    const datasources = this.getAll().filter(ds => !ds.meta.builtIn);
+    return _.sortBy(datasources, ['name']);
   }
 
   getAnnotationSources() {
@@ -94,16 +97,8 @@ export class DatasourceSrv {
     return sources;
   }
 
-  getExploreSources() {
-    const { datasources } = config;
-    const es = Object.keys(datasources)
-      .map(name => datasources[name])
-      .filter(ds => ds.meta && ds.meta.explore);
-    return _.sortBy(es, ['name']);
-  }
-
-  getMetricSources(options) {
-    const metricSources = [];
+  getMetricSources(options?) {
+    const metricSources: DataSourceSelectItem[] = [];
 
     _.each(config.datasources, (value, key) => {
       if (value.meta && value.meta.metrics) {
diff --git a/public/app/features/plugins/ds_dashboards_ctrl.ts b/public/app/features/plugins/ds_dashboards_ctrl.ts
index a0324215453..71639702e41 100644
--- a/public/app/features/plugins/ds_dashboards_ctrl.ts
+++ b/public/app/features/plugins/ds_dashboards_ctrl.ts
@@ -1,5 +1,5 @@
 import { coreModule } from 'app/core/core';
-import { store } from 'app/store/configureStore';
+import { store } from 'app/store/store';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { buildNavModel } from './state/navModel';
 
diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts
index 1dec41f05e8..d8e9f7d8e53 100644
--- a/public/app/features/plugins/ds_edit_ctrl.ts
+++ b/public/app/features/plugins/ds_edit_ctrl.ts
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import config from 'app/core/config';
 import { coreModule, appEvents } from 'app/core/core';
-import { store } from 'app/store/configureStore';
+import { store } from 'app/store/store';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { buildNavModel } from './state/navModel';
 
diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html
deleted file mode 100644
index 0b83e69c7d2..00000000000
--- a/public/app/features/plugins/partials/ds_edit.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<page-header model="ctrl.navModel"></page-header>
-
-<div class="page-container page-body">
-  <h3 class="page-sub-heading">Settings</h3>
-
-  <form name="ctrl.editForm" ng-if="ctrl.current">
-    <div class="gf-form-group">
-      <div class="gf-form-inline">
-        <div class="gf-form max-width-30">
-          <span class="gf-form-label width-10">Name</span>
-          <input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
-          <info-popover offset="0px -135px" mode="right-absolute">
-            The name is used when you select the data source in panels.
-            The <em>Default</em> data source is preselected in new
-            panels.
-          </info-popover>
-        </div>
-        <gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
-      </div>
-    </div>
-
-    <div class="grafana-info-box" ng-if="ctrl.datasourceMeta.state === 'alpha'">
-      This plugin is marked as being in alpha state, which means it is in early development phase and
-      updates will include breaking changes.
-    </div>
-
-		<div class="grafana-info-box" ng-if="ctrl.datasourceMeta.state === 'beta'">
-      This plugin is marked as being in a beta development state. This means it is in currently in active development and could be
-      missing important features.
-    </div>
-
-    <rebuild-on-change property="ctrl.datasourceMeta.id">
-      <plugin-component type="datasource-config-ctrl">
-      </plugin-component>
-    </rebuild-on-change>
-
-    <div ng-if="ctrl.hasDashboards">
-      <h3 class="section-heading">Bundled Plugin Dashboards</h3>
-      <div class="section">
-        <dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
-      </div>
-    </div>
-
-    <div ng-if="ctrl.testing" class="gf-form-group section">
-      <h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
-      <div class="alert-{{ctrl.testing.status}} alert" ng-show="ctrl.testing.done">
-        <div class="alert-icon">
-          <i class="fa fa-exclamation-triangle" ng-show="ctrl.testing.status === 'error'"></i>
-          <i class="fa fa-check" ng-show="ctrl.testing.status !== 'error'"></i>
-        </div>
-        <div class="alert-body">
-          <div class="alert-title">{{ctrl.testing.message}}</div>
-        </div>
-      </div>
-    </div>
-
-		<div class="grafana-info-box span8" ng-if="ctrl.current.readOnly">
-			This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
-		</div>
-
-		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success" ng-disabled="ctrl.current.readOnly"  ng-click="ctrl.saveChanges()">Save &amp; Test</button>
-			<button type="submit" class="btn btn-danger" ng-disabled="ctrl.current.readOnly"  ng-show="!ctrl.isNew" ng-click="ctrl.delete()">Delete</button>
-			<a class="btn btn-inverse" href="datasources">Back</a>
-		</div>
-
-		<br />
-		<br />
-		<br />
-
-	</form>
-</div>
diff --git a/public/app/features/plugins/partials/ds_http_settings.html b/public/app/features/plugins/partials/ds_http_settings.html
index 17aedd48afd..521e2d3cdc6 100644
--- a/public/app/features/plugins/partials/ds_http_settings.html
+++ b/public/app/features/plugins/partials/ds_http_settings.html
@@ -71,15 +71,21 @@
 	<h3 class="page-heading">Auth</h3>
 	<div class="gf-form-group">
 		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-10" switch-class="max-width-6"></gf-form-switch>
-			<gf-form-switch class="gf-form" label="With Credentials" tooltip="Whether credentials such as cookies or auth headers should be sent with cross-site requests." checked="current.withCredentials" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
+			<gf-form-checkbox class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-10" switch-class="max-width-6"></gf-form-checkbox>
+			<gf-form-checkbox class="gf-form" label="With Credentials" tooltip="Whether credentials such as cookies or auth
+			  headers should be sent with cross-site requests." checked="current.withCredentials" label-class="width-11"
+			  switch-class="max-width-6"></gf-form-checkbox>
 		</div>
 		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="TLS Client Auth" label-class="width-10" checked="current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-switch>
-			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="With CA Cert" tooltip="Needed for verifing self-signed TLS Certs" checked="current.jsonData.tlsAuthWithCACert" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
+			<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="TLS Client Auth" label-class="width-10"
+			  checked="current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-checkbox>
+			<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="With CA Cert" tooltip="Needed for
+			  verifing self-signed TLS Certs" checked="current.jsonData.tlsAuthWithCACert" label-class="width-11"
+			  switch-class="max-width-6"></gf-form-checkbox>
 		</div>
 		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="Skip TLS Verify" label-class="width-10" checked="current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-switch>
+			<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="Skip TLS Verify" label-class="width-10"
+			  checked="current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-checkbox>
 		</div>
 	</div>
 
diff --git a/public/app/features/plugins/plugin_component.ts b/public/app/features/plugins/plugin_component.ts
index 142eb942a30..7092608085d 100644
--- a/public/app/features/plugins/plugin_component.ts
+++ b/public/app/features/plugins/plugin_component.ts
@@ -5,8 +5,6 @@ import config from 'app/core/config';
 import coreModule from 'app/core/core_module';
 import { importPluginModule } from './plugin_loader';
 
-import { UnknownPanelCtrl } from 'app/plugins/panel/unknown/module';
-
 /** @ngInject */
 function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $templateCache, $timeout) {
   function getTemplate(component) {
@@ -69,7 +67,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
     };
 
     const panelInfo = config.panels[scope.panel.type];
-    let panelCtrlPromise = Promise.resolve(UnknownPanelCtrl);
+    let panelCtrlPromise = Promise.resolve(null);
     if (panelInfo) {
       panelCtrlPromise = importPluginModule(panelInfo.module).then(panelModule => {
         return panelModule.PanelCtrl;
@@ -95,7 +93,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
 
       PanelCtrl.templatePromise = getTemplate(PanelCtrl).then(template => {
         PanelCtrl.templateUrl = null;
-        PanelCtrl.template = `<grafana-panel ctrl="ctrl" class="panel-editor-container">${template}</grafana-panel>`;
+        PanelCtrl.template = `<grafana-panel ctrl="ctrl" class="panel-height-helper">${template}</grafana-panel>`;
         return componentInfo;
       });
 
@@ -118,7 +116,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
               bindings: { target: '=', panelCtrl: '=', datasource: '=' },
               attrs: {
                 target: 'target',
-                'panel-ctrl': 'ctrl.panelCtrl',
+                'panel-ctrl': 'ctrl',
                 datasource: 'datasource',
               },
               Component: dsModule.QueryCtrl,
@@ -149,6 +147,14 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
             return { notFound: true };
           }
 
+          scope.$watch(
+            'ctrl.current',
+            () => {
+              scope.onModelChanged(scope.ctrl.current);
+            },
+            true
+          );
+
           return {
             baseUrl: dsMeta.baseUrl,
             name: 'ds-config-' + dsMeta.id,
diff --git a/public/app/features/plugins/specs/datasource_srv.test.ts b/public/app/features/plugins/specs/datasource_srv.test.ts
index a8d0807c765..51b83efb3f5 100644
--- a/public/app/features/plugins/specs/datasource_srv.test.ts
+++ b/public/app/features/plugins/specs/datasource_srv.test.ts
@@ -18,29 +18,29 @@ const templateSrv = {
 describe('datasource_srv', () => {
   const _datasourceSrv = new DatasourceSrv({}, {}, {}, templateSrv);
 
-  describe('when loading explore sources', () => {
+  describe('when loading external datasources', () => {
     beforeEach(() => {
       config.datasources = {
-        explore1: {
-          name: 'explore1',
-          meta: { explore: true, metrics: true },
+        buildInDs: {
+          name: 'buildIn',
+          meta: { builtIn: true },
         },
-        explore2: {
-          name: 'explore2',
-          meta: { explore: true, metrics: false },
+        nonBuildIn: {
+          name: 'external1',
+          meta: { builtIn: false },
         },
         nonExplore: {
-          name: 'nonExplore',
-          meta: { explore: false, metrics: true },
+          name: 'external2',
+          meta: {},
         },
       };
     });
 
     it('should return list of explore sources', () => {
-      const exploreSources = _datasourceSrv.getExploreSources();
-      expect(exploreSources.length).toBe(2);
-      expect(exploreSources[0].name).toBe('explore1');
-      expect(exploreSources[1].name).toBe('explore2');
+      const externalSources = _datasourceSrv.getExternal();
+      expect(externalSources.length).toBe(2);
+      expect(externalSources[0].name).toBe('external1');
+      expect(externalSources[1].name).toBe('external2');
     });
   });
 
diff --git a/public/app/features/teams/TeamMembers.tsx b/public/app/features/teams/TeamMembers.tsx
index 433702fa0d5..0e20f4be664 100644
--- a/public/app/features/teams/TeamMembers.tsx
+++ b/public/app/features/teams/TeamMembers.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import SlideDown from 'app/core/components/Animations/SlideDown';
-import { UserPicker } from 'app/core/components/Picker/UserPicker';
+import { UserPicker } from 'app/core/components/Select/UserPicker';
 import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
 import { TeamMember, User } from 'app/types';
diff --git a/public/app/features/templating/specs/variable_srv_init.test.ts b/public/app/features/templating/specs/variable_srv_init.test.ts
index bda5b6aa577..0df6209bfdc 100644
--- a/public/app/features/templating/specs/variable_srv_init.test.ts
+++ b/public/app/features/templating/specs/variable_srv_init.test.ts
@@ -77,8 +77,8 @@ describe('VariableSrv init', function(this: any) {
           {
             name: 'apps',
             type: type,
-            current: { text: 'test', value: 'test' },
-            options: [{ text: 'test', value: 'test' }],
+            current: { text: 'Test', value: 'test' },
+            options: [{ text: 'Test', value: 'test' }],
           },
         ];
         scenario.urlParams['var-apps'] = 'new';
@@ -161,11 +161,11 @@ describe('VariableSrv init', function(this: any) {
           name: 'apps',
           type: 'query',
           multi: true,
-          current: { text: 'val1', value: 'val1' },
+          current: { text: 'Val1', value: 'val1' },
           options: [
-            { text: 'val1', value: 'val1' },
-            { text: 'val2', value: 'val2' },
-            { text: 'val3', value: 'val3', selected: true },
+            { text: 'Val1', value: 'val1' },
+            { text: 'Val2', value: 'val2' },
+            { text: 'Val3', value: 'val3', selected: true },
           ],
         },
       ];
@@ -177,7 +177,7 @@ describe('VariableSrv init', function(this: any) {
       expect(variable.current.value.length).toBe(2);
       expect(variable.current.value[0]).toBe('val2');
       expect(variable.current.value[1]).toBe('val1');
-      expect(variable.current.text).toBe('val2 + val1');
+      expect(variable.current.text).toBe('Val2 + Val1');
       expect(variable.options[0].selected).toBe(true);
       expect(variable.options[1].selected).toBe(true);
     });
@@ -188,6 +188,30 @@ describe('VariableSrv init', function(this: any) {
     });
   });
 
+  describeInitScenario(
+    'when template variable is present in url multiple times and variables have no text',
+    scenario => {
+      scenario.setup(() => {
+        scenario.variables = [
+          {
+            name: 'apps',
+            type: 'query',
+            multi: true,
+          },
+        ];
+        scenario.urlParams['var-apps'] = ['val1', 'val2'];
+      });
+
+      it('should display concatenated values in text', () => {
+        const variable = ctx.variableSrv.variables[0];
+        expect(variable.current.value.length).toBe(2);
+        expect(variable.current.value[0]).toBe('val1');
+        expect(variable.current.value[1]).toBe('val2');
+        expect(variable.current.text).toBe('val1 + val2');
+      });
+    }
+  );
+
   describeInitScenario('when template variable is present in url multiple times using key/values', scenario => {
     scenario.setup(() => {
       scenario.variables = [
diff --git a/public/app/features/templating/template_srv.ts b/public/app/features/templating/template_srv.ts
index 485d244e9ae..74da017bb93 100644
--- a/public/app/features/templating/template_srv.ts
+++ b/public/app/features/templating/template_srv.ts
@@ -17,6 +17,7 @@ export class TemplateSrv {
   constructor() {
     this.builtIns['__interval'] = { text: '1s', value: '1s' };
     this.builtIns['__interval_ms'] = { text: '100', value: '100' };
+    this.variables = [];
   }
 
   init(variables) {
diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts
index a676f9c2848..bc0362f0678 100644
--- a/public/app/features/templating/variable_srv.ts
+++ b/public/app/features/templating/variable_srv.ts
@@ -237,8 +237,10 @@ export class VariableSrv {
   setOptionAsCurrent(variable, option) {
     variable.current = _.cloneDeep(option);
 
-    if (_.isArray(variable.current.text)) {
+    if (_.isArray(variable.current.text) && variable.current.text.length > 0) {
       variable.current.text = variable.current.text.join(' + ');
+    } else if (_.isArray(variable.current.value) && variable.current.value[0] !== '$__all') {
+      variable.current.text = variable.current.value.join(' + ');
     }
 
     this.selectOptionsForCurrentValue(variable);
diff --git a/public/app/features/users/InviteeRow.tsx b/public/app/features/users/InviteeRow.tsx
new file mode 100644
index 00000000000..d75ffb790f3
--- /dev/null
+++ b/public/app/features/users/InviteeRow.tsx
@@ -0,0 +1,57 @@
+import React, { createRef, PureComponent } from 'react';
+import { connect } from 'react-redux';
+import { Invitee } from 'app/types';
+import { revokeInvite } from './state/actions';
+
+export interface Props {
+  invitee: Invitee;
+  revokeInvite: typeof revokeInvite;
+}
+
+class InviteeRow extends PureComponent<Props> {
+  private copyUrlRef = createRef<HTMLTextAreaElement>();
+
+  copyToClipboard = () => {
+    const node = this.copyUrlRef.current;
+
+    if (node) {
+      node.select();
+      document.execCommand('copy');
+    }
+  };
+
+  render() {
+    const { invitee, revokeInvite } = this.props;
+    return (
+      <tr>
+        <td>{invitee.email}</td>
+        <td>{invitee.name}</td>
+        <td className="text-right">
+          <button className="btn btn-inverse btn-mini" onClick={this.copyToClipboard}>
+            <textarea
+              readOnly={true}
+              value={invitee.url}
+              style={{ position: 'absolute', right: -1000 }}
+              ref={this.copyUrlRef}
+            />
+            <i className="fa fa-clipboard" /> Copy Invite
+          </button>
+          &nbsp;
+        </td>
+        <td>
+          <button className="btn btn-danger btn-mini" onClick={() => revokeInvite(invitee.code)}>
+            <i className="fa fa-remove" />
+          </button>
+        </td>
+      </tr>
+    );
+  }
+}
+
+const mapDispatchToProps = {
+  revokeInvite,
+};
+
+export default connect(() => {
+  return {};
+}, mapDispatchToProps)(InviteeRow);
diff --git a/public/app/features/users/InviteesTable.test.tsx b/public/app/features/users/InviteesTable.test.tsx
index e40ad033c57..ad464f81a2f 100644
--- a/public/app/features/users/InviteesTable.test.tsx
+++ b/public/app/features/users/InviteesTable.test.tsx
@@ -7,7 +7,6 @@ import { getMockInvitees } from './__mocks__/userMocks';
 const setup = (propOverrides?: object) => {
   const props: Props = {
     invitees: [] as Invitee[],
-    onRevokeInvite: jest.fn(),
   };
 
   Object.assign(props, propOverrides);
diff --git a/public/app/features/users/InviteesTable.tsx b/public/app/features/users/InviteesTable.tsx
index 2521fbd09e2..fa5fd087a2f 100644
--- a/public/app/features/users/InviteesTable.tsx
+++ b/public/app/features/users/InviteesTable.tsx
@@ -1,25 +1,14 @@
-import React, { createRef, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { Invitee } from 'app/types';
+import InviteeRow from './InviteeRow';
 
 export interface Props {
   invitees: Invitee[];
-  onRevokeInvite: (code: string) => void;
 }
 
 export default class InviteesTable extends PureComponent<Props> {
-  private copyUrlRef = createRef<HTMLTextAreaElement>();
-
-  copyToClipboard = () => {
-    const node = this.copyUrlRef.current;
-
-    if (node) {
-      node.select();
-      document.execCommand('copy');
-    }
-  };
-
   render() {
-    const { invitees, onRevokeInvite } = this.props;
+    const { invitees } = this.props;
 
     return (
       <table className="filter-table form-inline">
@@ -33,29 +22,7 @@ export default class InviteesTable extends PureComponent<Props> {
         </thead>
         <tbody>
           {invitees.map((invitee, index) => {
-            return (
-              <tr key={`${invitee.id}-${index}`}>
-                <td>{invitee.email}</td>
-                <td>{invitee.name}</td>
-                <td className="text-right">
-                  <button className="btn btn-inverse btn-mini" onClick={this.copyToClipboard}>
-                    <textarea
-                      readOnly={true}
-                      value={invitee.url}
-                      style={{ position: 'absolute', right: -1000 }}
-                      ref={this.copyUrlRef}
-                    />
-                    <i className="fa fa-clipboard" /> Copy Invite
-                  </button>
-                  &nbsp;
-                </td>
-                <td>
-                  <button className="btn btn-danger btn-mini" onClick={() => onRevokeInvite(invitee.code)}>
-                    <i className="fa fa-remove" />
-                  </button>
-                </td>
-              </tr>
-            );
+            return <InviteeRow key={`${invitee.id}-${index}`} invitee={invitee} />;
           })}
         </tbody>
       </table>
diff --git a/public/app/features/users/UsersListPage.test.tsx b/public/app/features/users/UsersListPage.test.tsx
index b6cd85182ee..d2b1a19afe1 100644
--- a/public/app/features/users/UsersListPage.test.tsx
+++ b/public/app/features/users/UsersListPage.test.tsx
@@ -16,7 +16,6 @@ const setup = (propOverrides?: object) => {
     invitees: [] as Invitee[],
     searchQuery: '',
     externalUserMngInfo: '',
-    revokeInvite: jest.fn(),
     loadInvitees: jest.fn(),
     loadUsers: jest.fn(),
     updateUser: jest.fn(),
diff --git a/public/app/features/users/UsersListPage.tsx b/public/app/features/users/UsersListPage.tsx
index 234fc6cc1d1..ff0ac8f1239 100644
--- a/public/app/features/users/UsersListPage.tsx
+++ b/public/app/features/users/UsersListPage.tsx
@@ -9,7 +9,7 @@ import UsersTable from './UsersTable';
 import InviteesTable from './InviteesTable';
 import { Invitee, NavModel, OrgUser } from 'app/types';
 import appEvents from 'app/core/app_events';
-import { loadUsers, loadInvitees, revokeInvite, setUsersSearchQuery, updateUser, removeUser } from './state/actions';
+import { loadUsers, loadInvitees, setUsersSearchQuery, updateUser, removeUser } from './state/actions';
 import { getNavModel } from '../../core/selectors/navModel';
 import { getInvitees, getUsers, getUsersSearchQuery } from './state/selectors';
 
@@ -25,7 +25,6 @@ export interface Props {
   setUsersSearchQuery: typeof setUsersSearchQuery;
   updateUser: typeof updateUser;
   removeUser: typeof removeUser;
-  revokeInvite: typeof revokeInvite;
 }
 
 export interface State {
@@ -79,10 +78,6 @@ export class UsersListPage extends PureComponent<Props, State> {
     });
   };
 
-  onRevokeInvite = code => {
-    this.props.revokeInvite(code);
-  };
-
   onShowInvites = () => {
     this.setState(prevState => ({
       showInvites: !prevState.showInvites,
@@ -93,7 +88,7 @@ export class UsersListPage extends PureComponent<Props, State> {
     const { invitees, users } = this.props;
 
     if (this.state.showInvites) {
-      return <InviteesTable invitees={invitees} onRevokeInvite={code => this.onRevokeInvite(code)} />;
+      return <InviteesTable invitees={invitees} />;
     } else {
       return (
         <UsersTable
@@ -141,7 +136,6 @@ const mapDispatchToProps = {
   setUsersSearchQuery,
   updateUser,
   removeUser,
-  revokeInvite,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(UsersListPage));
diff --git a/public/app/features/users/__mocks__/userMocks.ts b/public/app/features/users/__mocks__/userMocks.ts
index ce299484c13..ef38aab8dd5 100644
--- a/public/app/features/users/__mocks__/userMocks.ts
+++ b/public/app/features/users/__mocks__/userMocks.ts
@@ -48,7 +48,7 @@ export const getMockInvitees = (amount: number) => {
       orgId: 1,
       role: 'viewer',
       status: 'not accepted',
-      url: `localhost/invite/$${i}`,
+      url: `localhost/invite/${i}`,
     });
   }
 
diff --git a/public/app/features/users/__snapshots__/InviteesTable.test.tsx.snap b/public/app/features/users/__snapshots__/InviteesTable.test.tsx.snap
index 57622bbd9eb..a32dbdf371d 100644
--- a/public/app/features/users/__snapshots__/InviteesTable.test.tsx.snap
+++ b/public/app/features/users/__snapshots__/InviteesTable.test.tsx.snap
@@ -49,270 +49,132 @@ exports[`Render should render invitees 1`] = `
     </tr>
   </thead>
   <tbody>
-    <tr
+    <Connect(InviteeRow)
+      invitee={
+        Object {
+          "code": "asdfasdfsadf-0",
+          "createdOn": "2018-10-02",
+          "email": "invitee-0@test.com",
+          "emailSent": true,
+          "emailSentOn": "2018-10-02",
+          "id": 0,
+          "invitedByEmail": "admin@grafana.com",
+          "invitedByLogin": "admin",
+          "invitedByName": "admin",
+          "name": "invitee-0",
+          "orgId": 1,
+          "role": "viewer",
+          "status": "not accepted",
+          "url": "localhost/invite/0",
+        }
+      }
       key="0-0"
-    >
-      <td>
-        invitee-0@test.com
-      </td>
-      <td>
-        invitee-0
-      </td>
-      <td
-        className="text-right"
-      >
-        <button
-          className="btn btn-inverse btn-mini"
-          onClick={[Function]}
-        >
-          <textarea
-            readOnly={true}
-            style={
-              Object {
-                "position": "absolute",
-                "right": -1000,
-              }
-            }
-            value="localhost/invite/$0"
-          />
-          <i
-            className="fa fa-clipboard"
-          />
-           Copy Invite
-        </button>
-         
-      </td>
-      <td>
-        <button
-          className="btn btn-danger btn-mini"
-          onClick={[Function]}
-        >
-          <i
-            className="fa fa-remove"
-          />
-        </button>
-      </td>
-    </tr>
-    <tr
+    />
+    <Connect(InviteeRow)
+      invitee={
+        Object {
+          "code": "asdfasdfsadf-1",
+          "createdOn": "2018-10-02",
+          "email": "invitee-1@test.com",
+          "emailSent": true,
+          "emailSentOn": "2018-10-02",
+          "id": 1,
+          "invitedByEmail": "admin@grafana.com",
+          "invitedByLogin": "admin",
+          "invitedByName": "admin",
+          "name": "invitee-1",
+          "orgId": 1,
+          "role": "viewer",
+          "status": "not accepted",
+          "url": "localhost/invite/1",
+        }
+      }
       key="1-1"
-    >
-      <td>
-        invitee-1@test.com
-      </td>
-      <td>
-        invitee-1
-      </td>
-      <td
-        className="text-right"
-      >
-        <button
-          className="btn btn-inverse btn-mini"
-          onClick={[Function]}
-        >
-          <textarea
-            readOnly={true}
-            style={
-              Object {
-                "position": "absolute",
-                "right": -1000,
-              }
-            }
-            value="localhost/invite/$1"
-          />
-          <i
-            className="fa fa-clipboard"
-          />
-           Copy Invite
-        </button>
-         
-      </td>
-      <td>
-        <button
-          className="btn btn-danger btn-mini"
-          onClick={[Function]}
-        >
-          <i
-            className="fa fa-remove"
-          />
-        </button>
-      </td>
-    </tr>
-    <tr
+    />
+    <Connect(InviteeRow)
+      invitee={
+        Object {
+          "code": "asdfasdfsadf-2",
+          "createdOn": "2018-10-02",
+          "email": "invitee-2@test.com",
+          "emailSent": true,
+          "emailSentOn": "2018-10-02",
+          "id": 2,
+          "invitedByEmail": "admin@grafana.com",
+          "invitedByLogin": "admin",
+          "invitedByName": "admin",
+          "name": "invitee-2",
+          "orgId": 1,
+          "role": "viewer",
+          "status": "not accepted",
+          "url": "localhost/invite/2",
+        }
+      }
       key="2-2"
-    >
-      <td>
-        invitee-2@test.com
-      </td>
-      <td>
-        invitee-2
-      </td>
-      <td
-        className="text-right"
-      >
-        <button
-          className="btn btn-inverse btn-mini"
-          onClick={[Function]}
-        >
-          <textarea
-            readOnly={true}
-            style={
-              Object {
-                "position": "absolute",
-                "right": -1000,
-              }
-            }
-            value="localhost/invite/$2"
-          />
-          <i
-            className="fa fa-clipboard"
-          />
-           Copy Invite
-        </button>
-         
-      </td>
-      <td>
-        <button
-          className="btn btn-danger btn-mini"
-          onClick={[Function]}
-        >
-          <i
-            className="fa fa-remove"
-          />
-        </button>
-      </td>
-    </tr>
-    <tr
+    />
+    <Connect(InviteeRow)
+      invitee={
+        Object {
+          "code": "asdfasdfsadf-3",
+          "createdOn": "2018-10-02",
+          "email": "invitee-3@test.com",
+          "emailSent": true,
+          "emailSentOn": "2018-10-02",
+          "id": 3,
+          "invitedByEmail": "admin@grafana.com",
+          "invitedByLogin": "admin",
+          "invitedByName": "admin",
+          "name": "invitee-3",
+          "orgId": 1,
+          "role": "viewer",
+          "status": "not accepted",
+          "url": "localhost/invite/3",
+        }
+      }
       key="3-3"
-    >
-      <td>
-        invitee-3@test.com
-      </td>
-      <td>
-        invitee-3
-      </td>
-      <td
-        className="text-right"
-      >
-        <button
-          className="btn btn-inverse btn-mini"
-          onClick={[Function]}
-        >
-          <textarea
-            readOnly={true}
-            style={
-              Object {
-                "position": "absolute",
-                "right": -1000,
-              }
-            }
-            value="localhost/invite/$3"
-          />
-          <i
-            className="fa fa-clipboard"
-          />
-           Copy Invite
-        </button>
-         
-      </td>
-      <td>
-        <button
-          className="btn btn-danger btn-mini"
-          onClick={[Function]}
-        >
-          <i
-            className="fa fa-remove"
-          />
-        </button>
-      </td>
-    </tr>
-    <tr
+    />
+    <Connect(InviteeRow)
+      invitee={
+        Object {
+          "code": "asdfasdfsadf-4",
+          "createdOn": "2018-10-02",
+          "email": "invitee-4@test.com",
+          "emailSent": true,
+          "emailSentOn": "2018-10-02",
+          "id": 4,
+          "invitedByEmail": "admin@grafana.com",
+          "invitedByLogin": "admin",
+          "invitedByName": "admin",
+          "name": "invitee-4",
+          "orgId": 1,
+          "role": "viewer",
+          "status": "not accepted",
+          "url": "localhost/invite/4",
+        }
+      }
       key="4-4"
-    >
-      <td>
-        invitee-4@test.com
-      </td>
-      <td>
-        invitee-4
-      </td>
-      <td
-        className="text-right"
-      >
-        <button
-          className="btn btn-inverse btn-mini"
-          onClick={[Function]}
-        >
-          <textarea
-            readOnly={true}
-            style={
-              Object {
-                "position": "absolute",
-                "right": -1000,
-              }
-            }
-            value="localhost/invite/$4"
-          />
-          <i
-            className="fa fa-clipboard"
-          />
-           Copy Invite
-        </button>
-         
-      </td>
-      <td>
-        <button
-          className="btn btn-danger btn-mini"
-          onClick={[Function]}
-        >
-          <i
-            className="fa fa-remove"
-          />
-        </button>
-      </td>
-    </tr>
-    <tr
+    />
+    <Connect(InviteeRow)
+      invitee={
+        Object {
+          "code": "asdfasdfsadf-5",
+          "createdOn": "2018-10-02",
+          "email": "invitee-5@test.com",
+          "emailSent": true,
+          "emailSentOn": "2018-10-02",
+          "id": 5,
+          "invitedByEmail": "admin@grafana.com",
+          "invitedByLogin": "admin",
+          "invitedByName": "admin",
+          "name": "invitee-5",
+          "orgId": 1,
+          "role": "viewer",
+          "status": "not accepted",
+          "url": "localhost/invite/5",
+        }
+      }
       key="5-5"
-    >
-      <td>
-        invitee-5@test.com
-      </td>
-      <td>
-        invitee-5
-      </td>
-      <td
-        className="text-right"
-      >
-        <button
-          className="btn btn-inverse btn-mini"
-          onClick={[Function]}
-        >
-          <textarea
-            readOnly={true}
-            style={
-              Object {
-                "position": "absolute",
-                "right": -1000,
-              }
-            }
-            value="localhost/invite/$5"
-          />
-          <i
-            className="fa fa-clipboard"
-          />
-           Copy Invite
-        </button>
-         
-      </td>
-      <td>
-        <button
-          className="btn btn-danger btn-mini"
-          onClick={[Function]}
-        >
-          <i
-            className="fa fa-remove"
-          />
-        </button>
-      </td>
-    </tr>
+    />
   </tbody>
 </table>
 `;
diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html
deleted file mode 100644
index 797c252331c..00000000000
--- a/public/app/partials/panelgeneral.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<div class="editor-row">
-	<div class="section gf-form-group">
-		<h5 class="section-heading">Info</h5>
-		<div class="gf-form">
-			<span class="gf-form-label width-7">Title</span>
-			<input type="text" class="gf-form-input width-25" ng-model='ctrl.panel.title'></input>
-		</div>
-		<div class="gf-form gf-form--v-stretch">
-			<span class="gf-form-label width-7">Description</span>
-			<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.panel.description"  placeholder="Panel description, supports markdown & links"></textarea>
-		</div>
-    <gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
-	</div>
-
-  <div class="section gf-form-group">
-    <h5 class="section-heading">Repeat</h5>
-		<div class="gf-form">
-			<span class="gf-form-label width-9">For each value of</span>
-			<dash-repeat-option panel="ctrl.panel"></dash-repeat-option>
-		</div>
-    <div class="gf-form" ng-show="ctrl.panel.repeat">
-			<span class="gf-form-label width-9">Direction</span>
-			<select class="gf-form-input" ng-model="ctrl.panel.repeatDirection" ng-options="f.value as f.text for f in [{value: 'v', text: 'Vertical'}, {value: 'h', text: 'Horizontal'}]">
-				<option value=""></option>
-			</select>
-		</div>
-		<div class="gf-form" ng-show="ctrl.panel.repeat && ctrl.panel.repeatDirection == 'h'">
-			<span class="gf-form-label width-9">Min width</span>
-			<select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]">
-				<option value=""></option>
-			</select>
-		</div>
-	</div>
-
-	<panel-links-editor panel="ctrl.panel"></panel-links-editor>
-
-
diff --git a/public/app/plugins/datasource/cloudwatch/datasource.ts b/public/app/plugins/datasource/cloudwatch/datasource.ts
index 3eb8eff2d09..d9fb3450524 100644
--- a/public/app/plugins/datasource/cloudwatch/datasource.ts
+++ b/public/app/plugins/datasource/cloudwatch/datasource.ts
@@ -362,14 +362,9 @@ export default class CloudWatchDatasource {
     const metricName = 'EstimatedCharges';
     const dimensions = {};
 
-    return this.getDimensionValues(region, namespace, metricName, 'ServiceName', dimensions).then(
-      () => {
-        return { status: 'success', message: 'Data source is working' };
-      },
-      err => {
-        return { status: 'error', message: err.message };
-      }
-    );
+    return this.getDimensionValues(region, namespace, metricName, 'ServiceName', dimensions).then(() => {
+      return { status: 'success', message: 'Data source is working' };
+    });
   }
 
   awsRequest(url, data) {
diff --git a/public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts b/public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts
index ba5a39688b3..33948ef2345 100644
--- a/public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts
+++ b/public/app/plugins/datasource/cloudwatch/query_parameter_ctrl.ts
@@ -2,21 +2,6 @@ import angular from 'angular';
 import coreModule from 'app/core/core_module';
 import _ from 'lodash';
 
-export class CloudWatchQueryParameter {
-  constructor() {
-    return {
-      templateUrl: 'public/app/plugins/datasource/cloudwatch/partials/query.parameter.html',
-      controller: 'CloudWatchQueryParameterCtrl',
-      restrict: 'E',
-      scope: {
-        target: '=',
-        datasource: '=',
-        onChange: '&',
-      },
-    };
-  }
-}
-
 export class CloudWatchQueryParameterCtrl {
   /** @ngInject */
   constructor($scope, templateSrv, uiSegmentSrv, datasourceSrv, $q) {
@@ -240,5 +225,17 @@ export class CloudWatchQueryParameterCtrl {
   }
 }
 
-coreModule.directive('cloudwatchQueryParameter', CloudWatchQueryParameter);
-coreModule.controller('CloudWatchQueryParameterCtrl', CloudWatchQueryParameterCtrl);
+export function cloudWatchQueryParameter() {
+  return {
+    templateUrl: 'public/app/plugins/datasource/cloudwatch/partials/query.parameter.html',
+    controller: CloudWatchQueryParameterCtrl,
+    restrict: 'E',
+    scope: {
+      target: '=',
+      datasource: '=',
+      onChange: '&',
+    },
+  };
+}
+
+coreModule.directive('cloudwatchQueryParameter', cloudWatchQueryParameter);
diff --git a/public/app/plugins/datasource/elasticsearch/config_ctrl.ts b/public/app/plugins/datasource/elasticsearch/config_ctrl.ts
index fad3a6895ae..8a90d2dc3bd 100644
--- a/public/app/plugins/datasource/elasticsearch/config_ctrl.ts
+++ b/public/app/plugins/datasource/elasticsearch/config_ctrl.ts
@@ -28,13 +28,15 @@ export class ElasticConfigCtrl {
   ];
 
   indexPatternTypeChanged() {
-    if (!this.current.database ||
-        this.current.database.length === 0 ||
-        this.current.database.startsWith('[logstash-]')) {
-        const def = _.find(this.indexPatternTypes, {
-          value: this.current.jsonData.interval,
-        });
-        this.current.database = def.example || 'es-index-name';
+    if (
+      !this.current.database ||
+      this.current.database.length === 0 ||
+      this.current.database.startsWith('[logstash-]')
+    ) {
+      const def = _.find(this.indexPatternTypes, {
+        value: this.current.jsonData.interval,
+      });
+      this.current.database = def.example || 'es-index-name';
     }
   }
 }
diff --git a/public/app/plugins/datasource/graphite/plugin.json b/public/app/plugins/datasource/graphite/plugin.json
index 1448242ed05..3066d80c9a9 100644
--- a/public/app/plugins/datasource/graphite/plugin.json
+++ b/public/app/plugins/datasource/graphite/plugin.json
@@ -3,13 +3,12 @@
   "type": "datasource",
   "id": "graphite",
 
-  "includes": [
-    {"type": "dashboard", "name": "Graphite Carbon Metrics", "path": "dashboards/carbon_metrics.json"}
-  ],
+  "includes": [{ "type": "dashboard", "name": "Graphite Carbon Metrics", "path": "dashboards/carbon_metrics.json" }],
 
   "metrics": true,
   "alerting": true,
   "annotations": true,
+  "tables": false,
 
   "queryOptions": {
     "maxDataPoints": true,
@@ -27,8 +26,11 @@
       "large": "img/graphite_logo.png"
     },
     "links": [
-      {"name": "Graphite", "url": "https://graphiteapp.org/"},
-      {"name": "Graphite 1.1 Release", "url": "https://grafana.com/blog/2018/01/11/graphite-1.1-teaching-an-old-dog-new-tricks/"}
+      { "name": "Graphite", "url": "https://graphiteapp.org/" },
+      {
+        "name": "Graphite 1.1 Release",
+        "url": "https://grafana.com/blog/2018/01/11/graphite-1.1-teaching-an-old-dog-new-tricks/"
+      }
     ],
     "version": "5.0.0"
   }
diff --git a/public/app/plugins/datasource/influxdb/plugin.json b/public/app/plugins/datasource/influxdb/plugin.json
index 973c4ac52cd..ab8f36c29cb 100644
--- a/public/app/plugins/datasource/influxdb/plugin.json
+++ b/public/app/plugins/datasource/influxdb/plugin.json
@@ -7,6 +7,7 @@
   "metrics": true,
   "annotations": true,
   "alerting": true,
+  "tables": true,
 
   "queryOptions": {
     "minInterval": true
diff --git a/public/app/plugins/datasource/loki/plugin.json b/public/app/plugins/datasource/loki/plugin.json
index 86b26a6a589..64462a08415 100644
--- a/public/app/plugins/datasource/loki/plugin.json
+++ b/public/app/plugins/datasource/loki/plugin.json
@@ -7,6 +7,7 @@
   "annotations": false,
   "logs": true,
   "explore": true,
+  "tables": false,
   "info": {
     "description": "Loki Logging Data Source for Grafana",
     "author": {
diff --git a/public/app/plugins/datasource/loki/result_transformer.test.ts b/public/app/plugins/datasource/loki/result_transformer.test.ts
index 182292261a8..c23a370ab81 100644
--- a/public/app/plugins/datasource/loki/result_transformer.test.ts
+++ b/public/app/plugins/datasource/loki/result_transformer.test.ts
@@ -35,7 +35,7 @@ describe('getLoglevel()', () => {
 });
 
 describe('parseLabels()', () => {
-  it('returns no labels on emtpy labels string', () => {
+  it('returns no labels on empty labels string', () => {
     expect(parseLabels('')).toEqual({});
     expect(parseLabels('{}')).toEqual({});
   });
@@ -46,7 +46,7 @@ describe('parseLabels()', () => {
 });
 
 describe('formatLabels()', () => {
-  it('returns no labels on emtpy label set', () => {
+  it('returns no labels on empty label set', () => {
     expect(formatLabels({})).toEqual('');
     expect(formatLabels({}, 'foo')).toEqual('foo');
   });
diff --git a/public/app/plugins/datasource/mssql/plugin.json b/public/app/plugins/datasource/mssql/plugin.json
index a3df148bc2b..80d70daada4 100644
--- a/public/app/plugins/datasource/mssql/plugin.json
+++ b/public/app/plugins/datasource/mssql/plugin.json
@@ -18,9 +18,9 @@
   "alerting": true,
   "annotations": true,
   "metrics": true,
+  "tables": true,
 
   "queryOptions": {
     "minInterval": true
   }
-
 }
diff --git a/public/app/plugins/datasource/mysql/plugin.json b/public/app/plugins/datasource/mysql/plugin.json
index f3a8efe267e..b03e48f4cec 100644
--- a/public/app/plugins/datasource/mysql/plugin.json
+++ b/public/app/plugins/datasource/mysql/plugin.json
@@ -19,9 +19,9 @@
   "alerting": true,
   "annotations": true,
   "metrics": true,
+  "tables": true,
 
   "queryOptions": {
     "minInterval": true
   }
-
 }
diff --git a/public/app/plugins/datasource/opentsdb/plugin.json b/public/app/plugins/datasource/opentsdb/plugin.json
index 571c311cbcb..711ecd8512a 100644
--- a/public/app/plugins/datasource/opentsdb/plugin.json
+++ b/public/app/plugins/datasource/opentsdb/plugin.json
@@ -7,6 +7,7 @@
   "defaultMatchFormat": "pipe",
   "annotations": true,
   "alerting": true,
+  "tables": false,
 
   "info": {
     "description": "OpenTSDB Data Source for Grafana",
diff --git a/public/app/plugins/datasource/postgres/plugin.json b/public/app/plugins/datasource/postgres/plugin.json
index f236aa01b06..e90e3e9e7cd 100644
--- a/public/app/plugins/datasource/postgres/plugin.json
+++ b/public/app/plugins/datasource/postgres/plugin.json
@@ -19,9 +19,9 @@
   "alerting": true,
   "annotations": true,
   "metrics": true,
+  "tables": true,
 
   "queryOptions": {
     "minInterval": true
   }
-
 }
diff --git a/public/app/plugins/datasource/prometheus/partials/query.editor.html b/public/app/plugins/datasource/prometheus/partials/query.editor.html
index 11a857f37e7..f63beeedbd3 100644
--- a/public/app/plugins/datasource/prometheus/partials/query.editor.html
+++ b/public/app/plugins/datasource/prometheus/partials/query.editor.html
@@ -8,8 +8,8 @@
   </div>
 
   <div class="gf-form-inline">
-    <div class="gf-form max-width-26">
-      <label class="gf-form-label width-8">Legend format</label>
+    <div class="gf-form">
+      <label class="gf-form-label">Legend</label>
       <input type="text" class="gf-form-input" ng-model="ctrl.target.legendFormat" spellcheck='false' placeholder="legend format"
         data-min-length=0 data-items=1000 ng-model-onblur ng-change="ctrl.refreshMetricData()">
       </input>
@@ -39,23 +39,19 @@
       </div>
     </div>
 
-    <div class="gf-form">
-      <label class="gf-form-label width-6">Format as</label>
+    <div class="gf-form gf-form--grow">
+      <label class="gf-form-label width-5">Format</label>
       <div class="gf-form-select-wrapper width-8">
         <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>
       <gf-form-switch class="gf-form" label="Instant" label-class="width-5" checked="ctrl.target.instant" on-change="ctrl.refresh()">
       </gf-form-switch>
-      <label class="gf-form-label">
+      <label class="gf-form-label gf-form-label--grow">
         <a href="{{ctrl.linkToPrometheus}}" target="_blank" bs-tooltip="'Link to Graph in Prometheus'">
           <i class="fa fa-share-square-o"></i>
         </a>
       </label>
     </div>
-
-    <div class="gf-form gf-form--grow">
-      <div class="gf-form-label gf-form-label--grow"></div>
-    </div>
   </div>
-</query-editor-row>
\ No newline at end of file
+</query-editor-row>
diff --git a/public/app/plugins/datasource/prometheus/plugin.json b/public/app/plugins/datasource/prometheus/plugin.json
index 2b723fd0b9d..f5ea3b7f224 100644
--- a/public/app/plugins/datasource/prometheus/plugin.json
+++ b/public/app/plugins/datasource/prometheus/plugin.json
@@ -23,6 +23,7 @@
   "alerting": true,
   "annotations": true,
   "explore": true,
+  "tables": true,
   "queryOptions": {
     "minInterval": true
   },
@@ -44,4 +45,4 @@
     ],
     "version": "5.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/public/app/plugins/datasource/stackdriver/plugin.json b/public/app/plugins/datasource/stackdriver/plugin.json
index 2ec44ae4ca5..d92127502c7 100644
--- a/public/app/plugins/datasource/stackdriver/plugin.json
+++ b/public/app/plugins/datasource/stackdriver/plugin.json
@@ -5,6 +5,7 @@
   "metrics": true,
   "alerting": true,
   "annotations": true,
+  "tables": false,
   "state": "beta",
   "queryOptions": {
     "maxDataPoints": true,
diff --git a/public/app/plugins/datasource/testdata/datasource.ts b/public/app/plugins/datasource/testdata/datasource.ts
index 0197626cd0b..989209792fb 100644
--- a/public/app/plugins/datasource/testdata/datasource.ts
+++ b/public/app/plugins/datasource/testdata/datasource.ts
@@ -84,6 +84,13 @@ class TestDataDatasource {
     }
     return this.$q.when(events);
   }
+
+  testDatasource() {
+    return Promise.resolve({
+      status: 'success',
+      message: 'Data source is working',
+    });
+  }
 }
 
 export { TestDataDatasource };
diff --git a/public/app/plugins/panel/dashlist/module.ts b/public/app/plugins/panel/dashlist/module.ts
index 1b260107587..ba6f1a8b4f4 100644
--- a/public/app/plugins/panel/dashlist/module.ts
+++ b/public/app/plugins/panel/dashlist/module.ts
@@ -60,7 +60,6 @@ class DashListCtrl extends PanelCtrl {
   }
 
   onInitEditMode() {
-    this.editorTabIndex = 1;
     this.modes = ['starred', 'search', 'recently viewed'];
     this.addEditorTab('Options', 'public/app/plugins/panel/dashlist/editor.html');
   }
diff --git a/public/app/plugins/panel/gauge/GaugeOptions.tsx b/public/app/plugins/panel/gauge/GaugeOptions.tsx
new file mode 100644
index 00000000000..655e9b0a65d
--- /dev/null
+++ b/public/app/plugins/panel/gauge/GaugeOptions.tsx
@@ -0,0 +1,46 @@
+import React, { PureComponent } from 'react';
+import { Switch } from 'app/core/components/Switch/Switch';
+import { OptionModuleProps } from './module';
+import { Label } from '../../../core/components/Label/Label';
+
+export default class GaugeOptions extends PureComponent<OptionModuleProps> {
+  onToggleThresholdLabels = () =>
+    this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
+
+  onToggleThresholdMarkers = () =>
+    this.props.onChange({ ...this.props.options, showThresholdMarkers: !this.props.options.showThresholdMarkers });
+
+  onMinValueChange = ({ target }) => this.props.onChange({ ...this.props.options, minValue: target.value });
+
+  onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value });
+
+  render() {
+    const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = this.props.options;
+
+    return (
+      <div className="section gf-form-group">
+        <h5 className="section-heading">Gauge</h5>
+        <div className="gf-form">
+          <Label width={8}>Min value</Label>
+          <input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} value={minValue} />
+        </div>
+        <div className="gf-form">
+          <Label width={8}>Max value</Label>
+          <input type="text" className="gf-form-input width-12" onChange={this.onMaxValueChange} value={maxValue} />
+        </div>
+        <Switch
+          label="Show labels"
+          labelClass="width-8"
+          checked={showThresholdLabels}
+          onChange={this.onToggleThresholdLabels}
+        />
+        <Switch
+          label="Show markers"
+          labelClass="width-8"
+          checked={showThresholdMarkers}
+          onChange={this.onToggleThresholdMarkers}
+        />
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/panel/gauge/MappingRow.tsx b/public/app/plugins/panel/gauge/MappingRow.tsx
new file mode 100644
index 00000000000..35d0b2e638c
--- /dev/null
+++ b/public/app/plugins/panel/gauge/MappingRow.tsx
@@ -0,0 +1,146 @@
+import React, { PureComponent } from 'react';
+import { Label } from 'app/core/components/Label/Label';
+import { Select } from 'app/core/components/Select/Select';
+import { MappingType, RangeMap, ValueMap } from 'app/types';
+
+interface Props {
+  mapping: ValueMap | RangeMap;
+  updateMapping: (mapping) => void;
+  removeMapping: () => void;
+}
+
+interface State {
+  from: string;
+  id: number;
+  operator: string;
+  text: string;
+  to: string;
+  type: MappingType;
+  value: string;
+}
+
+const mappingOptions = [
+  { value: MappingType.ValueToText, label: 'Value' },
+  { value: MappingType.RangeToText, label: 'Range' },
+];
+
+export default class MappingRow extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      ...props.mapping,
+    };
+  }
+
+  onMappingValueChange = event => {
+    this.setState({ value: event.target.value });
+  };
+
+  onMappingFromChange = event => {
+    this.setState({ from: event.target.value });
+  };
+
+  onMappingToChange = event => {
+    this.setState({ to: event.target.value });
+  };
+
+  onMappingTextChange = event => {
+    this.setState({ text: event.target.value });
+  };
+
+  onMappingTypeChange = mappingType => {
+    this.setState({ type: mappingType });
+  };
+
+  updateMapping = () => {
+    this.props.updateMapping({ ...this.state });
+  };
+
+  renderRow() {
+    const { from, text, to, type, value } = this.state;
+
+    if (type === MappingType.RangeToText) {
+      return (
+        <>
+          <div className="gf-form">
+            <Label width={4}>From</Label>
+            <input
+              className="gf-form-input width-8"
+              value={from}
+              onBlur={this.updateMapping}
+              onChange={this.onMappingFromChange}
+            />
+          </div>
+          <div className="gf-form">
+            <Label width={4}>To</Label>
+            <input
+              className="gf-form-input width-8"
+              value={to}
+              onBlur={this.updateMapping}
+              onChange={this.onMappingToChange}
+            />
+          </div>
+          <div className="gf-form">
+            <Label width={4}>Text</Label>
+            <input
+              className="gf-form-input width-10"
+              value={text}
+              onBlur={this.updateMapping}
+              onChange={this.onMappingTextChange}
+            />
+          </div>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <div className="gf-form">
+          <Label width={4}>Value</Label>
+          <input
+            className="gf-form-input width-8"
+            onBlur={this.updateMapping}
+            onChange={this.onMappingValueChange}
+            value={value}
+          />
+        </div>
+        <div className="gf-form gf-form--grow">
+          <Label width={4}>Text</Label>
+          <input
+            className="gf-form-input"
+            onBlur={this.updateMapping}
+            value={text}
+            onChange={this.onMappingTextChange}
+          />
+        </div>
+      </>
+    );
+  }
+
+  render() {
+    const { type } = this.state;
+
+    return (
+      <div className="gf-form-inline">
+        <div className="gf-form">
+          <Label width={5}>Type</Label>
+          <Select
+            placeholder="Choose type"
+            isSearchable={false}
+            options={mappingOptions}
+            value={mappingOptions.find(o => o.value === type)}
+            onChange={type => this.onMappingTypeChange(type.value)}
+            width={7}
+          />
+        </div>
+        {this.renderRow()}
+        <div className="gf-form">
+          <button onClick={this.props.removeMapping} className="gf-form-label gf-form-label--btn">
+            <i className="fa fa-times" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/panel/gauge/Threshold.test.tsx b/public/app/plugins/panel/gauge/Threshold.test.tsx
new file mode 100644
index 00000000000..3b2becd9859
--- /dev/null
+++ b/public/app/plugins/panel/gauge/Threshold.test.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Thresholds from './Thresholds';
+import { defaultProps, OptionsProps } from './module';
+import { BasicGaugeColor, PanelOptionsProps } from 'app/types';
+
+const setup = (propOverrides?: object) => {
+  const props: PanelOptionsProps<OptionsProps> = {
+    onChange: jest.fn(),
+    options: {
+      ...defaultProps.options,
+      thresholds: [],
+    },
+  };
+
+  Object.assign(props, propOverrides);
+
+  return shallow(<Thresholds {...props} />).instance() as Thresholds;
+};
+
+describe('Add threshold', () => {
+  it('should add threshold', () => {
+    const instance = setup();
+
+    instance.onAddThreshold(0);
+
+    expect(instance.state.thresholds).toEqual([{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }]);
+  });
+
+  it('should add another threshold above a first', () => {
+    const instance = setup({
+      options: {
+        ...defaultProps.options,
+        thresholds: [{ index: 0, value: 50, color: 'rgb(127, 115, 64)' }],
+      },
+    });
+
+    instance.onAddThreshold(1);
+
+    expect(instance.state.thresholds).toEqual([
+      { index: 1, value: 75, color: 'rgb(170, 95, 61)' },
+      { index: 0, value: 50, color: 'rgb(127, 115, 64)' },
+    ]);
+  });
+});
+
+describe('change threshold value', () => {
+  it('should update value and resort rows', () => {
+    const instance = setup();
+    const mockThresholds = [
+      { index: 0, value: 50, color: 'rgba(237, 129, 40, 0.89)' },
+      { index: 1, value: 75, color: 'rgba(237, 129, 40, 0.89)' },
+    ];
+
+    instance.state = {
+      baseColor: BasicGaugeColor.Green,
+      thresholds: mockThresholds,
+    };
+
+    const mockEvent = { target: { value: 78 } };
+
+    instance.onChangeThresholdValue(mockEvent, mockThresholds[0]);
+
+    expect(instance.state.thresholds).toEqual([
+      { index: 0, value: 78, color: 'rgba(237, 129, 40, 0.89)' },
+      { index: 1, value: 75, color: 'rgba(237, 129, 40, 0.89)' },
+    ]);
+  });
+});
diff --git a/public/app/plugins/panel/gauge/Thresholds.tsx b/public/app/plugins/panel/gauge/Thresholds.tsx
new file mode 100644
index 00000000000..dd0dcc1e33b
--- /dev/null
+++ b/public/app/plugins/panel/gauge/Thresholds.tsx
@@ -0,0 +1,227 @@
+import React, { PureComponent } from 'react';
+import tinycolor from 'tinycolor2';
+import { ColorPicker } from 'app/core/components/colorpicker/ColorPicker';
+import { OptionModuleProps } from './module';
+import { BasicGaugeColor, Threshold } from 'app/types';
+
+interface State {
+  thresholds: Threshold[];
+  baseColor: string;
+}
+
+export default class Thresholds extends PureComponent<OptionModuleProps, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      thresholds: props.options.thresholds,
+      baseColor: props.options.baseColor,
+    };
+  }
+
+  onAddThreshold = index => {
+    const { maxValue, minValue } = this.props.options;
+    const { thresholds } = this.state;
+
+    const newThresholds = thresholds.map(threshold => {
+      if (threshold.index >= index) {
+        threshold = { ...threshold, index: threshold.index + 1 };
+      }
+
+      return threshold;
+    });
+
+    // Setting value to a value between the previous thresholds
+    let value;
+
+    if (index === 0 && thresholds.length === 0) {
+      value = maxValue - (maxValue - minValue) / 2;
+    } else if (index === 0 && thresholds.length > 0) {
+      value = newThresholds[index + 1].value - (newThresholds[index + 1].value - minValue) / 2;
+    } else if (index > newThresholds[newThresholds.length - 1].index) {
+      value = maxValue - (maxValue - newThresholds[index - 1].value) / 2;
+    }
+
+    // Set a color that lies between the previous thresholds
+    let color;
+    if (index === 0 && thresholds.length === 0) {
+      color = tinycolor.mix(BasicGaugeColor.Green, BasicGaugeColor.Red, 50).toRgbString();
+    } else {
+      color = tinycolor.mix(thresholds[index - 1].color, BasicGaugeColor.Red, 50).toRgbString();
+    }
+
+    this.setState(
+      {
+        thresholds: this.sortThresholds([...newThresholds, { index: index, value: value, color: color }]),
+      },
+      () => this.updateGauge()
+    );
+  };
+
+  onRemoveThreshold = threshold => {
+    this.setState(
+      prevState => ({
+        thresholds: prevState.thresholds.filter(t => t !== threshold),
+      }),
+      () => this.updateGauge()
+    );
+  };
+
+  onChangeThresholdValue = (event, threshold) => {
+    const { thresholds } = this.state;
+
+    const newThresholds = thresholds.map(t => {
+      if (t === threshold) {
+        t = { ...t, value: event.target.value };
+      }
+
+      return t;
+    });
+
+    this.setState({
+      thresholds: newThresholds,
+    });
+  };
+
+  onChangeThresholdColor = (threshold, color) => {
+    const { thresholds } = this.state;
+
+    const newThresholds = thresholds.map(t => {
+      if (t === threshold) {
+        t = { ...t, color: color };
+      }
+
+      return t;
+    });
+
+    this.setState(
+      {
+        thresholds: newThresholds,
+      },
+      () => this.updateGauge()
+    );
+  };
+
+  onChangeBaseColor = color => this.props.onChange({ ...this.props.options, baseColor: color });
+  onBlur = () => {
+    this.setState(prevState => ({
+      thresholds: this.sortThresholds(prevState.thresholds),
+    }));
+
+    this.updateGauge();
+  };
+
+  updateGauge = () => {
+    this.props.onChange({ ...this.props.options, thresholds: this.state.thresholds });
+  };
+
+  sortThresholds = thresholds => {
+    return thresholds.sort((t1, t2) => {
+      return t2.value - t1.value;
+    });
+  };
+
+  renderThresholds() {
+    const { thresholds } = this.state;
+
+    return thresholds.map((threshold, index) => {
+      return (
+        <div className="threshold-row" key={`${threshold.index}-${index}`}>
+          <div className="threshold-row-inner">
+            <div className="threshold-row-color">
+              {threshold.color && (
+                <div className="threshold-row-color-inner">
+                  <ColorPicker
+                    color={threshold.color}
+                    onChange={color => this.onChangeThresholdColor(threshold, color)}
+                  />
+                </div>
+              )}
+            </div>
+            <input
+              className="threshold-row-input"
+              type="text"
+              onChange={event => this.onChangeThresholdValue(event, threshold)}
+              value={threshold.value}
+              onBlur={this.onBlur}
+            />
+            <div onClick={() => this.onRemoveThreshold(threshold)} className="threshold-row-remove">
+              <i className="fa fa-times" />
+            </div>
+          </div>
+        </div>
+      );
+    });
+  }
+
+  renderIndicator() {
+    const { thresholds } = this.state;
+
+    return thresholds.map((t, i) => {
+      return (
+        <div key={`${t.value}-${i}`} className="indicator-section">
+          <div
+            onClick={() => this.onAddThreshold(t.index + 1)}
+            style={{
+              height: '50%',
+              backgroundColor: t.color,
+            }}
+          />
+          <div
+            onClick={() => this.onAddThreshold(t.index)}
+            style={{
+              height: '50%',
+              backgroundColor: t.color,
+            }}
+          />
+        </div>
+      );
+    });
+  }
+
+  renderBaseIndicator() {
+    return (
+      <div className="indicator-section" style={{ height: '100%' }}>
+        <div
+          onClick={() => this.onAddThreshold(0)}
+          style={{ height: '100%', backgroundColor: this.props.options.baseColor }}
+        />
+      </div>
+    );
+  }
+
+  renderBase() {
+    const { baseColor } = this.props.options;
+
+    return (
+      <div className="threshold-row threshold-row-base">
+        <div className="threshold-row-inner threshold-row-inner--base">
+          <div className="threshold-row-color">
+            <div className="threshold-row-color-inner">
+              <ColorPicker color={baseColor} onChange={color => this.onChangeBaseColor(color)} />
+            </div>
+          </div>
+          <div className="threshold-row-label">Base</div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className="section gf-form-group">
+        <h5 className="section-heading">Thresholds</h5>
+        <div className="thresholds">
+          <div className="color-indicators">
+            {this.renderIndicator()}
+            {this.renderBaseIndicator()}
+          </div>
+          <div className="threshold-rows">
+            {this.renderThresholds()}
+            {this.renderBase()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/panel/gauge/ValueMappings.test.tsx b/public/app/plugins/panel/gauge/ValueMappings.test.tsx
new file mode 100644
index 00000000000..fd9f56343b1
--- /dev/null
+++ b/public/app/plugins/panel/gauge/ValueMappings.test.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ValueMappings from './ValueMappings';
+import { defaultProps, OptionModuleProps } from './module';
+import { MappingType } from 'app/types';
+
+const setup = (propOverrides?: object) => {
+  const props: OptionModuleProps = {
+    onChange: jest.fn(),
+    options: {
+      ...defaultProps.options,
+      mappings: [
+        { id: 1, operator: '', type: MappingType.ValueToText, value: '20', text: 'Ok' },
+        { id: 2, operator: '', type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' },
+      ],
+    },
+  };
+
+  Object.assign(props, propOverrides);
+
+  const wrapper = shallow(<ValueMappings {...props} />);
+
+  const instance = wrapper.instance() as ValueMappings;
+
+  return {
+    instance,
+    wrapper,
+  };
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const { wrapper } = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe('On remove mapping', () => {
+  it('Should remove mapping with id 0', () => {
+    const { instance } = setup();
+    instance.onRemoveMapping(1);
+
+    expect(instance.state.mappings).toEqual([
+      { id: 2, operator: '', type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' },
+    ]);
+  });
+
+  it('should remove mapping with id 1', () => {
+    const { instance } = setup();
+    instance.onRemoveMapping(2);
+
+    expect(instance.state.mappings).toEqual([
+      { id: 1, operator: '', type: MappingType.ValueToText, value: '20', text: 'Ok' },
+    ]);
+  });
+});
+
+describe('Next id to add', () => {
+  it('should be 4', () => {
+    const { instance } = setup();
+
+    instance.addMapping();
+
+    expect(instance.state.nextIdToAdd).toEqual(4);
+  });
+
+  it('should default to 1', () => {
+    const { instance } = setup({ options: { ...defaultProps.options } });
+
+    expect(instance.state.nextIdToAdd).toEqual(1);
+  });
+});
diff --git a/public/app/plugins/panel/gauge/ValueMappings.tsx b/public/app/plugins/panel/gauge/ValueMappings.tsx
new file mode 100644
index 00000000000..2197002a135
--- /dev/null
+++ b/public/app/plugins/panel/gauge/ValueMappings.tsx
@@ -0,0 +1,100 @@
+import React, { PureComponent } from 'react';
+import MappingRow from './MappingRow';
+import { OptionModuleProps } from './module';
+import { MappingType, RangeMap, ValueMap } from 'app/types';
+
+interface State {
+  mappings: Array<ValueMap | RangeMap>;
+  nextIdToAdd: number;
+}
+
+export default class ValueMappings extends PureComponent<OptionModuleProps, State> {
+  constructor(props) {
+    super(props);
+
+    const mappings = props.options.mappings;
+
+    this.state = {
+      mappings: mappings || [],
+      nextIdToAdd: mappings.length > 0 ? this.getMaxIdFromMappings(mappings) : 1,
+    };
+  }
+
+  getMaxIdFromMappings(mappings) {
+    return Math.max.apply(null, mappings.map(mapping => mapping.id).map(m => m)) + 1;
+  }
+
+  addMapping = () =>
+    this.setState(prevState => ({
+      mappings: [
+        ...prevState.mappings,
+        {
+          id: prevState.nextIdToAdd,
+          operator: '',
+          value: '',
+          text: '',
+          type: MappingType.ValueToText,
+          from: '',
+          to: '',
+        },
+      ],
+      nextIdToAdd: prevState.nextIdToAdd + 1,
+    }));
+
+  onRemoveMapping = id => {
+    this.setState(
+      prevState => ({
+        mappings: prevState.mappings.filter(m => {
+          return m.id !== id;
+        }),
+      }),
+      () => {
+        this.props.onChange({ ...this.props.options, mappings: this.state.mappings });
+      }
+    );
+  };
+
+  updateGauge = mapping => {
+    this.setState(
+      prevState => ({
+        mappings: prevState.mappings.map(m => {
+          if (m.id === mapping.id) {
+            return { ...mapping };
+          }
+
+          return m;
+        }),
+      }),
+      () => {
+        this.props.onChange({ ...this.props.options, mappings: this.state.mappings });
+      }
+    );
+  };
+
+  render() {
+    const { mappings } = this.state;
+
+    return (
+      <div className="section gf-form-group">
+        <h5 className="section-heading">Value mappings</h5>
+        <div>
+          {mappings.length > 0 &&
+            mappings.map((mapping, index) => (
+              <MappingRow
+                key={`${mapping.text}-${index}`}
+                mapping={mapping}
+                updateMapping={this.updateGauge}
+                removeMapping={() => this.onRemoveMapping(mapping.id)}
+              />
+            ))}
+        </div>
+        <div className="add-mapping-row" onClick={this.addMapping}>
+          <div className="add-mapping-row-icon">
+            <i className="fa fa-plus" />
+          </div>
+          <div className="add-mapping-row-label">Add mapping</div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/panel/gauge/ValueOptions.tsx b/public/app/plugins/panel/gauge/ValueOptions.tsx
new file mode 100644
index 00000000000..445d6517c5a
--- /dev/null
+++ b/public/app/plugins/panel/gauge/ValueOptions.tsx
@@ -0,0 +1,78 @@
+import React, { PureComponent } from 'react';
+import { Label } from 'app/core/components/Label/Label';
+import Select from 'app/core/components/Select/Select';
+import UnitPicker from 'app/core/components/Select/UnitPicker';
+import { OptionModuleProps } from './module';
+
+const statOptions = [
+  { value: 'min', label: 'Min' },
+  { value: 'max', label: 'Max' },
+  { value: 'avg', label: 'Average' },
+  { value: 'current', label: 'Current' },
+  { value: 'total', label: 'Total' },
+  { value: 'name', label: 'Name' },
+  { value: 'first', label: 'First' },
+  { value: 'delta', label: 'Delta' },
+  { value: 'diff', label: 'Difference' },
+  { value: 'range', label: 'Range' },
+  { value: 'last_time', label: 'Time of last point' },
+];
+
+const labelWidth = 6;
+
+export default class ValueOptions extends PureComponent<OptionModuleProps> {
+  onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
+
+  onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });
+
+  onDecimalChange = event => {
+    if (!isNaN(event.target.value)) {
+      this.props.onChange({ ...this.props.options, decimals: event.target.value });
+    }
+  };
+
+  onPrefixChange = event => this.props.onChange({ ...this.props.options, prefix: event.target.value });
+
+  onSuffixChange = event => this.props.onChange({ ...this.props.options, suffix: event.target.value });
+
+  render() {
+    const { stat, unit, decimals, prefix, suffix } = this.props.options;
+
+    return (
+      <div className="section gf-form-group">
+        <h5 className="section-heading">Value</h5>
+        <div className="gf-form">
+          <Label width={labelWidth}>Stat</Label>
+          <Select
+            width={12}
+            options={statOptions}
+            onChange={this.onStatChange}
+            value={statOptions.find(option => option.value === stat)}
+          />
+        </div>
+        <div className="gf-form">
+          <Label width={labelWidth}>Unit</Label>
+          <UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
+        </div>
+        <div className="gf-form">
+          <Label width={labelWidth}>Decimals</Label>
+          <input
+            className="gf-form-input width-12"
+            type="number"
+            placeholder="auto"
+            value={decimals || ''}
+            onChange={this.onDecimalChange}
+          />
+        </div>
+        <div className="gf-form">
+          <Label width={labelWidth}>Prefix</Label>
+          <input className="gf-form-input width-12" type="text" value={prefix || ''} onChange={this.onPrefixChange} />
+        </div>
+        <div className="gf-form">
+          <Label width={labelWidth}>Suffix</Label>
+          <input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap b/public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap
new file mode 100644
index 00000000000..8a05cb7e91b
--- /dev/null
+++ b/public/app/plugins/panel/gauge/__snapshots__/ValueMappings.test.tsx.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<div
+  className="section gf-form-group"
+>
+  <h5
+    className="section-heading"
+  >
+    Value mappings
+  </h5>
+  <div>
+    <MappingRow
+      key="Ok-0"
+      mapping={
+        Object {
+          "id": 1,
+          "operator": "",
+          "text": "Ok",
+          "type": 1,
+          "value": "20",
+        }
+      }
+      removeMapping={[Function]}
+      updateMapping={[Function]}
+    />
+    <MappingRow
+      key="Meh-1"
+      mapping={
+        Object {
+          "from": "21",
+          "id": 2,
+          "operator": "",
+          "text": "Meh",
+          "to": "30",
+          "type": 2,
+        }
+      }
+      removeMapping={[Function]}
+      updateMapping={[Function]}
+    />
+  </div>
+  <div
+    className="add-mapping-row"
+    onClick={[Function]}
+  >
+    <div
+      className="add-mapping-row-icon"
+    >
+      <i
+        className="fa fa-plus"
+      />
+    </div>
+    <div
+      className="add-mapping-row-label"
+    >
+      Add mapping
+    </div>
+  </div>
+</div>
+`;
diff --git a/public/app/plugins/panel/gauge/img/icon_gauge.svg b/public/app/plugins/panel/gauge/img/icon_gauge.svg
new file mode 100644
index 00000000000..f8997d4a017
--- /dev/null
+++ b/public/app/plugins/panel/gauge/img/icon_gauge.svg
@@ -0,0 +1,38 @@
+<?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{fill:#F16222;}
+	.st1{fill:#FAAD18;}
+	.st2{fill:#F68C1E;}
+	.st3{fill:#4D4D4D;}
+	.st4{fill:#EBBD1D;}
+	.st5{fill:#009A5E;}
+	.st6{fill:#90B83E;}
+	.st7{fill:#C4C02F;}
+	.st8{fill:#47A848;}
+</style>
+<g>
+	<path class="st0" d="M39.8,80.7h-7.5l9-24.5H30.8v-6.1h18v5.2L39.8,80.7z"/>
+	<path class="st0" d="M59.4,70.1c-1.4,0-2.5-0.3-3.5-0.8c-1-0.5-1.9-1.2-2.5-2.1c-0.7-0.9-1.2-1.9-1.5-3.1c-0.3-1.2-0.5-2.5-0.5-3.9
+		c0-1.8,0.3-3.3,0.8-4.6c0.5-1.3,1.2-2.5,2.1-3.4c0.9-0.9,2-1.6,3.2-2.1c1.2-0.5,2.5-0.7,4-0.7c1.4,0,2.7,0.2,4,0.7
+		c1.2,0.5,2.3,1.2,3.2,2.1c0.9,0.9,1.6,2,2.1,3.4c0.5,1.3,0.8,2.9,0.8,4.6c0,1.9-0.2,3.6-0.7,5.1c-0.5,1.5-1.1,2.9-1.9,4.3
+		l-5.8,11.1H55l6-10.8l0,0c-0.1,0.1-0.4,0.2-0.7,0.2C59.9,70,59.6,70.1,59.4,70.1z M58,60.3c0,1.5,0.3,2.7,0.9,3.6
+		c0.6,0.9,1.4,1.4,2.4,1.4c1,0,1.8-0.5,2.4-1.4c0.6-0.9,1-2.1,1-3.6c0-1.5-0.3-2.7-1-3.6c-0.6-0.9-1.4-1.4-2.4-1.4
+		c-1,0-1.8,0.5-2.4,1.4C58.3,57.6,58,58.8,58,60.3z"/>
+	<path class="st1" d="M68.9,18.6c-5.5-2.3-11.5-3.6-17.8-3.7v9.9c4.9,0.1,9.7,1.2,14,2.9L68.9,18.6z"/>
+	<path class="st2" d="M78.8,37l7-7c-4.2-4.3-9.2-7.8-14.7-10.4l-3.8,9.1C71.6,30.8,75.5,33.6,78.8,37z"/>
+	<path class="st0" d="M96.6,46.8c-2.2-5.6-5.4-10.7-9.3-15.1l-7,7c3,3.5,5.5,7.5,7.2,11.9L96.6,46.8z"/>
+	<path class="st3" d="M90.2,66.2h9.8c0-0.4,0-0.8,0-1.3c0-5.6-0.9-11-2.6-16l-9.1,3.8c1.2,3.9,1.9,8,1.9,12.3
+		C90.2,65.4,90.2,65.8,90.2,66.2z"/>
+	<path class="st4" d="M48.9,14.9c-6.3,0.1-12.3,1.4-17.8,3.7l3.8,9.1c4.3-1.8,9.1-2.8,14-2.9V14.9z"/>
+	<path class="st5" d="M0.1,68.5C0.5,74.3,2,79.9,4.2,85.1l9-3.7c-1.8-4-2.9-8.3-3.3-12.8H0.1z"/>
+	<path class="st6" d="M12.7,31.6c-3.9,4.4-7.1,9.5-9.3,15.1l9.1,3.8c1.7-4.4,4.1-8.4,7.2-11.9L12.7,31.6z"/>
+	<path class="st3" d="M95.8,85.1c2.3-5.1,3.7-10.7,4.1-16.6H90c-0.4,4.5-1.5,8.9-3.3,12.8L95.8,85.1z"/>
+	<path class="st7" d="M32.8,28.7L29,19.6c-5.5,2.6-10.5,6.1-14.7,10.4l7,7C24.5,33.6,28.4,30.8,32.8,28.7z"/>
+	<path class="st8" d="M11.7,52.7l-9.1-3.8C0.9,54,0,59.3,0,64.9c0,0.4,0,0.8,0,1.3h9.8c0-0.4,0-0.8,0-1.2
+		C9.8,60.7,10.5,56.6,11.7,52.7z"/>
+</g>
+</svg>
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 48dc4d809f3..152e7c20b5e 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -1,23 +1,90 @@
 import React, { PureComponent } from 'react';
 import Gauge from 'app/viz/Gauge';
-import { NullValueMode, PanelProps } from 'app/types';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
+import ValueOptions from './ValueOptions';
+import GaugeOptions from './GaugeOptions';
+import Thresholds from './Thresholds';
+import ValueMappings from './ValueMappings';
+import {
+  BasicGaugeColor,
+  NullValueMode,
+  PanelOptionsProps,
+  PanelProps,
+  RangeMap,
+  Threshold,
+  ValueMap,
+} from 'app/types';
 
-export interface Options {}
+export interface OptionsProps {
+  baseColor: string;
+  decimals: number;
+  mappings: Array<RangeMap | ValueMap>;
+  maxValue: number;
+  minValue: number;
+  prefix: string;
+  showThresholdLabels: boolean;
+  showThresholdMarkers: boolean;
+  stat: string;
+  suffix: string;
+  thresholds: Threshold[];
+  unit: string;
+}
 
-interface Props extends PanelProps<Options> {}
+export interface OptionModuleProps {
+  onChange: (item: any) => void;
+  options: OptionsProps;
+}
 
-export class GaugePanel extends PureComponent<Props> {
+export const defaultProps = {
+  options: {
+    baseColor: BasicGaugeColor.Green,
+    minValue: 0,
+    maxValue: 100,
+    prefix: '',
+    showThresholdMarkers: true,
+    showThresholdLabels: false,
+    suffix: '',
+    decimals: 0,
+    stat: '',
+    unit: '',
+    mappings: [],
+    thresholds: [],
+  },
+};
+
+interface Props extends PanelProps<OptionsProps> {}
+
+class GaugePanel extends PureComponent<Props> {
   render() {
-    const { timeSeries } = this.props;
+    const { timeSeries, width, height } = this.props;
 
     const vmSeries = getTimeSeriesVMs({
       timeSeries: timeSeries,
       nullValueMode: NullValueMode.Ignore,
     });
 
-    return <Gauge maxValue={100} minValue={0} timeSeries={vmSeries} thresholds={[0, 100]} />;
+    return <Gauge timeSeries={vmSeries} {...this.props.options} width={width} height={height} />;
   }
 }
 
-export { GaugePanel as PanelComponent };
+class Options extends PureComponent<PanelOptionsProps<OptionsProps>> {
+  static defaultProps = defaultProps;
+
+  render() {
+    const { onChange, options } = this.props;
+    return (
+      <div>
+        <div className="form-section">
+          <ValueOptions onChange={onChange} options={options} />
+          <GaugeOptions onChange={onChange} options={options} />
+          <Thresholds onChange={onChange} options={options} />
+        </div>
+        <div className="form-section">
+          <ValueMappings onChange={onChange} options={options} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export { GaugePanel as Panel, Options as PanelOptions, defaultProps as PanelDefaults };
diff --git a/public/app/plugins/panel/gauge/plugin.json b/public/app/plugins/panel/gauge/plugin.json
index 1fff76fdd3b..c3fea3387d2 100644
--- a/public/app/plugins/panel/gauge/plugin.json
+++ b/public/app/plugins/panel/gauge/plugin.json
@@ -11,8 +11,8 @@
       "url": "https://grafana.com"
     },
     "logos": {
-
+      "small": "img/icon_gauge.svg",
+      "large": "img/icon_gauge.svg"
     }
   }
 }
-
diff --git a/public/app/plugins/panel/graph/README.md b/public/app/plugins/panel/graph/README.md
index 2dc8682f0e3..e1184beb8e7 100644
--- a/public/app/plugins/panel/graph/README.md
+++ b/public/app/plugins/panel/graph/README.md
@@ -1,7 +1,7 @@
-# Graph Panel -  Native Plugin
+# Graph Panel
 
-The Graph is the main graph panel and is **included** with Grafana. It provides a very rich set of graphing options.
+This is the main Graph panel and is **included** with Grafana. It provides a very rich set of graphing options.
 
-Read more about it here:
+For full reference documentation:
 
-[http://docs.grafana.org/reference/graph/](http://docs.grafana.org/reference/graph/)
\ No newline at end of file
+[http://docs.grafana.org/reference/graph/](http://docs.grafana.org/reference/graph/)
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts
index ff248d68201..86a6fd1dfd2 100755
--- a/public/app/plugins/panel/graph/graph.ts
+++ b/public/app/plugins/panel/graph/graph.ts
@@ -737,7 +737,7 @@ class GraphElement {
     if (min && max && ticks) {
       const range = max - min;
       const secPerTick = range / ticks / 1000;
-      // Need have 10 milisecond margin on the day range
+      // Need have 10 millisecond margin on the day range
       // As sometimes last 24 hour dashboard evaluates to more than 86400000
       const oneDay = 86400010;
       const oneYear = 31536000000;
diff --git a/public/app/plugins/panel/graph/jquery.flot.events.ts b/public/app/plugins/panel/graph/jquery.flot.events.ts
index ed2b2dab92a..a5d7f658ccf 100644
--- a/public/app/plugins/panel/graph/jquery.flot.events.ts
+++ b/public/app/plugins/panel/graph/jquery.flot.events.ts
@@ -54,7 +54,7 @@ export function createEditPopover(element, event, plot) {
   const eventManager = plot.getOptions().events.manager;
   if (eventManager.editorOpen) {
     // update marker element to attach to (needed in case of legend on the right
-    // when there is a double render pass and the inital marker element is removed)
+    // when there is a double render pass and the initial marker element is removed)
     markerElementToAttachTo = element;
     return;
   }
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts
index 8f63765c66d..75e82115ca1 100644
--- a/public/app/plugins/panel/graph/module.ts
+++ b/public/app/plugins/panel/graph/module.ts
@@ -5,8 +5,8 @@ import './time_regions_form';
 
 import template from './template';
 import _ from 'lodash';
-import config from 'app/core/config';
-import { MetricsPanelCtrl, alertTab } from 'app/plugins/sdk';
+
+import { MetricsPanelCtrl } from 'app/plugins/sdk';
 import { DataProcessor } from './data_processor';
 import { axesEditorComponent } from './axes_editor';
 
@@ -71,11 +71,11 @@ class GraphCtrl extends MetricsPanelCtrl {
     // length of a dash
     dashLength: 10,
     // length of space between two dashes
-    spaceLength: 10,
+    paceLength: 10,
     // show hide points
     points: false,
     // point radius in pixels
-    pointradius: 5,
+    pointradius: 2,
     // show hide bars
     bars: false,
     // enable/disable stacking
@@ -135,14 +135,10 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   onInitEditMode() {
-    this.addEditorTab('Axes', axesEditorComponent, 2);
-    this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html', 3);
-    this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html', 4);
-
-    if (config.alertingEnabled) {
-      this.addEditorTab('Alert', alertTab, 5);
-    }
-
+    this.addEditorTab('Display options', 'public/app/plugins/panel/graph/tab_display.html');
+    this.addEditorTab('Axes', axesEditorComponent);
+    this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html');
+    this.addEditorTab('Thresholds & Time Regions', 'public/app/plugins/panel/graph/tab_thresholds_time_regions.html');
     this.subTabIndex = 0;
   }
 
diff --git a/public/app/plugins/panel/graph/tab_display.html b/public/app/plugins/panel/graph/tab_display.html
index d407f30ffc8..976b9bcc940 100644
--- a/public/app/plugins/panel/graph/tab_display.html
+++ b/public/app/plugins/panel/graph/tab_display.html
@@ -1,28 +1,5 @@
-<div class="edit-tab-with-sidemenu">
-	<aside class="edit-sidemenu-aside">
-		<ul class="edit-sidemenu">
-			<li ng-class="{active: ctrl.subTabIndex === 0}">
-				<a ng-click="ctrl.subTabIndex = 0">Draw options</a>
-			</li>
-			<li ng-class="{active: ctrl.subTabIndex === 1}">
-				<a ng-click="ctrl.subTabIndex = 1">
-					Series overrides <span class="muted">({{ctrl.panel.seriesOverrides.length}})</span>
-				</a>
-			</li>
-			<li ng-class="{active: ctrl.subTabIndex === 2}">
-				<a ng-click="ctrl.subTabIndex = 2">
-					Thresholds <span class="muted">({{ctrl.panel.thresholds.length}})</span>
-				</a>
-			</li>
-			<li ng-class="{active: ctrl.subTabIndex === 3}">
-				<a ng-click="ctrl.subTabIndex = 3">
-					Time regions <span class="muted">({{ctrl.panel.timeRegions.length}})</span>
-				</a>
-			</li>
-		</ul>
-	</aside>
 
-	<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 0">
+	<div class="editor-row">
 		<div class="section gf-form-group">
 			<h5 class="section-heading">Draw Modes</h5>
 			<gf-form-switch class="gf-form" label="Bars" label-class="width-5" checked="ctrl.panel.bars" on-change="ctrl.render()"></gf-form-switch>
@@ -45,10 +22,10 @@
 			</div>
 			<gf-form-switch ng-disabled="!ctrl.panel.lines" class="gf-form" label="Staircase" label-class="width-8" checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
 			</gf-form-switch>
-			<div class="gf-form">
+			<div class="gf-form" ng-if="ctrl.panel.points">
 				<label class="gf-form-label width-8">Point Radius</label>
 				<div class="gf-form-select-wrapper max-width-5">
-					<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [0.5,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()" ng-disabled="!ctrl.panel.points"></select>
+					<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [0.5,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
 				</div>
 			</div>
 		</div>
@@ -89,9 +66,7 @@
 		</div>
 	</div>
 
-	<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 1">
-		<div class="gf-form-group">
-			<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
+		<div>
 			<div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
 				<div class="gf-form">
 					<label class="gf-form-label">alias or regex</label>
@@ -126,19 +101,10 @@
 					</label>
 				</div>
 			</div>
+			<div class="gf-form-button-row">
+				<button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
+					<i class="fa fa-plus"></i>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
+				</button>
+			</div>
 		</div>
 
-		<button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
-			<i class="fa fa-plus"></i>&nbsp;Add override
-		</button>
-	</div>
-
-	<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 2">
-		<graph-threshold-form panel-ctrl="ctrl"></graph-threshold-form>
-	</div>
-
-	<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 3">
-		<graph-time-region-form panel-ctrl="ctrl"></graph-time-region-form>
-	</div>
-
-</div>
diff --git a/public/app/plugins/panel/graph/tab_thresholds_time_regions.html b/public/app/plugins/panel/graph/tab_thresholds_time_regions.html
new file mode 100644
index 00000000000..1ee603f5d36
--- /dev/null
+++ b/public/app/plugins/panel/graph/tab_thresholds_time_regions.html
@@ -0,0 +1,2 @@
+<graph-threshold-form panel-ctrl="ctrl"></graph-threshold-form>
+<graph-time-region-form panel-ctrl="ctrl"></graph-time-region-form>
\ No newline at end of file
diff --git a/public/app/plugins/panel/graph/thresholds_form.html b/public/app/plugins/panel/graph/thresholds_form.html
index 81877150a47..99e2f530c8d 100644
--- a/public/app/plugins/panel/graph/thresholds_form.html
+++ b/public/app/plugins/panel/graph/thresholds_form.html
@@ -1,5 +1,4 @@
 <div class="gf-form-group">
-  <h5>Thresholds</h5>
   <p class="muted" ng-show="ctrl.disabled">
     Visual thresholds options <strong>disabled.</strong>
     Visit the Alert tab update your thresholds. <br>
diff --git a/public/app/plugins/panel/graph/time_regions_form.html b/public/app/plugins/panel/graph/time_regions_form.html
index 7292c53ec80..3330085e3a8 100644
--- a/public/app/plugins/panel/graph/time_regions_form.html
+++ b/public/app/plugins/panel/graph/time_regions_form.html
@@ -1,5 +1,4 @@
 <div class="gf-form-group">
-  <h5>Time regions <tip>All configured time regions refers to UTC time</tip></h5>
   <div class="gf-form-inline" ng-repeat="timeRegion in ctrl.panel.timeRegions">
     <div class="gf-form">
       <label class="gf-form-label">T{{$index+1}}</label>
@@ -58,7 +57,7 @@
 
   <div class="gf-form-button-row">
     <button class="btn btn-inverse" ng-click="ctrl.addTimeRegion()">
-      <i class="fa fa-plus"></i>&nbsp;Add time region
+      <i class="fa fa-plus"></i>&nbsp;Add time region<tip>All configured time regions refers to UTC time</tip>
     </button>
   </div>
 </div>
\ No newline at end of file
diff --git a/public/app/plugins/panel/graph2/GraphOptions.tsx b/public/app/plugins/panel/graph2/GraphOptions.tsx
new file mode 100644
index 00000000000..e87c03da634
--- /dev/null
+++ b/public/app/plugins/panel/graph2/GraphOptions.tsx
@@ -0,0 +1,45 @@
+//// Libraries
+import _ from 'lodash';
+import React, { PureComponent } from 'react';
+
+// Components
+import { Switch } from 'app/core/components/Switch/Switch';
+
+// Types
+import { PanelOptionsProps } from 'app/types';
+import { Options } from './types';
+
+export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
+  onToggleLines = () => {
+    this.props.onChange({ ...this.props.options, showLines: !this.props.options.showLines });
+  };
+
+  onToggleBars = () => {
+    this.props.onChange({ ...this.props.options, showBars: !this.props.options.showBars });
+  };
+
+  onTogglePoints = () => {
+    this.props.onChange({ ...this.props.options, showPoints: !this.props.options.showPoints });
+  };
+
+  render() {
+    const { showBars, showPoints, showLines } = this.props.options;
+
+    return (
+      <div>
+        <div className="section gf-form-group">
+          <h5 className="section-heading">Draw Modes</h5>
+          <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
+          <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
+          <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
+        </div>
+        <div className="section gf-form-group">
+          <h5 className="section-heading">Test Options</h5>
+          <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
+          <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
+          <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/panel/graph2/GraphPanel.tsx b/public/app/plugins/panel/graph2/GraphPanel.tsx
new file mode 100644
index 00000000000..a7ef45e5428
--- /dev/null
+++ b/public/app/plugins/panel/graph2/GraphPanel.tsx
@@ -0,0 +1,43 @@
+// Libraries
+import _ from 'lodash';
+import React, { PureComponent } from 'react';
+
+// Components
+import Graph from 'app/viz/Graph';
+
+// Services & Utils
+import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
+
+// Types
+import { PanelProps, NullValueMode } from 'app/types';
+import { Options } from './types';
+
+interface Props extends PanelProps<Options> {}
+
+export class GraphPanel extends PureComponent<Props> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { timeSeries, timeRange, width, height } = this.props;
+    const { showLines, showBars, showPoints } = this.props.options;
+
+    const vmSeries = getTimeSeriesVMs({
+      timeSeries: timeSeries,
+      nullValueMode: NullValueMode.Ignore,
+    });
+
+    return (
+      <Graph
+        timeSeries={vmSeries}
+        timeRange={timeRange}
+        showLines={showLines}
+        showPoints={showPoints}
+        showBars={showBars}
+        width={width}
+        height={height}
+      />
+    );
+  }
+}
diff --git a/public/app/plugins/panel/text2/img/icn-graph-panel.svg b/public/app/plugins/panel/graph2/img/icn-graph-panel.svg
similarity index 100%
rename from public/app/plugins/panel/text2/img/icn-graph-panel.svg
rename to public/app/plugins/panel/graph2/img/icn-graph-panel.svg
diff --git a/public/app/plugins/panel/graph2/module.tsx b/public/app/plugins/panel/graph2/module.tsx
index b132d3374f1..ba761ca92cb 100644
--- a/public/app/plugins/panel/graph2/module.tsx
+++ b/public/app/plugins/panel/graph2/module.tsx
@@ -1,75 +1,4 @@
-import _ from 'lodash';
-import React, { PureComponent } from 'react';
+import { GraphPanel } from './GraphPanel';
+import { GraphOptions } from './GraphOptions';
 
-import Graph from 'app/viz/Graph';
-import { Switch } from 'app/core/components/Switch/Switch';
-
-import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
-import { PanelProps, PanelOptionsProps, NullValueMode } from 'app/types';
-
-interface Options {
-  showBars: boolean;
-  showLines: boolean;
-  showPoints: boolean;
-
-  onChange: (options: Options) => void;
-}
-
-interface Props extends PanelProps<Options> {}
-
-export class Graph2 extends PureComponent<Props> {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { timeSeries, timeRange } = this.props;
-    const { showLines, showBars, showPoints } = this.props.options;
-
-    const vmSeries = getTimeSeriesVMs({
-      timeSeries: timeSeries,
-      nullValueMode: NullValueMode.Ignore,
-    });
-
-    return (
-      <Graph
-        timeSeries={vmSeries}
-        timeRange={timeRange}
-        showLines={showLines}
-        showPoints={showPoints}
-        showBars={showBars}
-      />
-    );
-  }
-}
-
-export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
-  onToggleLines = () => {
-    this.props.onChange({ ...this.props.options, showLines: !this.props.options.showLines });
-  };
-
-  onToggleBars = () => {
-    this.props.onChange({ ...this.props.options, showBars: !this.props.options.showBars });
-  };
-
-  onTogglePoints = () => {
-    this.props.onChange({ ...this.props.options, showPoints: !this.props.options.showPoints });
-  };
-
-  render() {
-    const { showBars, showPoints, showLines } = this.props.options;
-
-    return (
-      <div>
-        <div className="section gf-form-group">
-          <h5 className="page-heading">Draw Modes</h5>
-          <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
-          <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
-          <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
-        </div>
-      </div>
-    );
-  }
-}
-
-export { Graph2 as PanelComponent, GraphOptions as PanelOptionsComponent };
+export { GraphPanel as Panel, GraphOptions as PanelOptions };
diff --git a/public/app/plugins/panel/graph2/plugin.json b/public/app/plugins/panel/graph2/plugin.json
index 2e674ab3557..9cb6a1f78a4 100644
--- a/public/app/plugins/panel/graph2/plugin.json
+++ b/public/app/plugins/panel/graph2/plugin.json
@@ -11,8 +11,8 @@
       "url": "https://grafana.com"
     },
     "logos": {
-      "small": "img/icn-text-panel.svg",
-      "large": "img/icn-text-panel.svg"
+      "small": "img/icn-graph-panel.svg",
+      "large": "img/icn-graph-panel.svg"
     }
   }
 }
diff --git a/public/app/plugins/panel/graph2/types.ts b/public/app/plugins/panel/graph2/types.ts
new file mode 100644
index 00000000000..b9baaa09cd7
--- /dev/null
+++ b/public/app/plugins/panel/graph2/types.ts
@@ -0,0 +1,5 @@
+export interface Options {
+  showBars: boolean;
+  showLines: boolean;
+  showPoints: boolean;
+}
diff --git a/public/app/plugins/panel/pluginlist/module.ts b/public/app/plugins/panel/pluginlist/module.ts
index eeac352f799..55ca160652d 100644
--- a/public/app/plugins/panel/pluginlist/module.ts
+++ b/public/app/plugins/panel/pluginlist/module.ts
@@ -29,7 +29,6 @@ class PluginListCtrl extends PanelCtrl {
   }
 
   onInitEditMode() {
-    this.editorTabIndex = 1;
     this.addEditorTab('Options', 'public/app/plugins/panel/pluginlist/editor.html');
   }
 
diff --git a/public/app/plugins/panel/table/column_options.html b/public/app/plugins/panel/table/column_options.html
index 6f9adb4ae0f..2bba3b8b520 100644
--- a/public/app/plugins/panel/table/column_options.html
+++ b/public/app/plugins/panel/table/column_options.html
@@ -1,200 +1,193 @@
-<div class="edit-tab-with-sidemenu">
-  <aside class="edit-sidemenu-aside">
-    <ul class="edit-sidemenu">
-      <li ng-repeat="style in editor.panel.styles" ng-class="{active: editor.activeStyleIndex === $index}">
-        <a ng-click="editor.activeStyleIndex = $index">{{style.pattern || 'New rule'}}</a>
-      </li>
-      <li>
-        <a class="pointer" ng-click="editor.addColumnStyle()">
-          <i class="fa fa-plus"></i>&nbsp;Add
-        </a>
-      </li>
-    </ul>
-  </aside>
-
-  <div class="edit-tab-content" ng-repeat="style in editor.panel.styles" ng-if="editor.activeStyleIndex === $index">
-
-    <div class="section gf-form-group">
-      <h5 class="section-heading">Options</h5>
-      <div class="gf-form-inline">
-        <div class="gf-form">
-          <label class="gf-form-label width-13">Apply to columns named</label>
-          <input type="text" placeholder="Name or regex" class="gf-form-input width-13" ng-model="style.pattern" bs-tooltip="'Specify regex using /my.*regex/ syntax'"
+<div class="edit-tab-content" ng-repeat="style in editor.panel.styles">
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Options</h5>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-12">Apply to columns named</label>
+        <input type="text" placeholder="Name or regex" class="gf-form-input width-13" ng-model="style.pattern" bs-tooltip="'Specify regex using /my.*regex/ syntax'"
             bs-typeahead="editor.getColumnNames" ng-blur="editor.render()" data-min-length=0 data-items=100 ng-model-onblur
             data-placement="right">
-        </div>
       </div>
-      <div class="gf-form" ng-if="style.type !== 'hidden'">
-        <label class="gf-form-label width-13">Column Header</label>
-        <input type="text" class="gf-form-input width-13" ng-model="style.alias" ng-change="editor.render()" ng-model-onblur placeholder="Override header label">
-      </div>
-      <gf-form-switch class="gf-form" label-class="width-13" label="Render value as link" checked="style.link" change="editor.render()"></gf-form-switch>
     </div>
+    <div class="gf-form" ng-if="style.type !== 'hidden'">
+      <label class="gf-form-label width-12">Column Header</label>
+      <input type="text" class="gf-form-input width-12" ng-model="style.alias" ng-change="editor.render()" ng-model-onblur placeholder="Override header label">
+    </div>
+    <gf-form-switch class="gf-form" label-class="width-12" label="Render value as link" checked="style.link" change="editor.render()"></gf-form-switch>
+  </div>
 
-    <div class="section gf-form-group">
-      <h5 class="section-heading">Type</h5>
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Type</h5>
 
-      <div class="gf-form">
-        <label class="gf-form-label width-11">Type</label>
-        <div class="gf-form-select-wrapper width-16">
-          <select class="gf-form-input" ng-model="style.type" ng-options="c.value as c.text for c in editor.columnTypes" ng-change="editor.render()"></select>
-        </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-10">Type</label>
+      <div class="gf-form-select-wrapper width-16">
+        <select class="gf-form-input" ng-model="style.type" ng-options="c.value as c.text for c in editor.columnTypes" ng-change="editor.render()"></select>
       </div>
-      <div class="gf-form" ng-if="style.type === 'date'">
-        <label class="gf-form-label width-11">Date Format</label>
-        <gf-form-dropdown model="style.dateFormat" css-class="gf-form-input width-16" lookup-text="true"
+    </div>
+    <div class="gf-form" ng-if="style.type === 'date'">
+      <label class="gf-form-label width-10">Date Format</label>
+      <gf-form-dropdown model="style.dateFormat" css-class="gf-form-input width-16" lookup-text="true"
         	get-options="editor.dateFormats" on-change="editor.render()" allow-custom="true">
-        </gf-form-dropdown>
-      </div>
+      </gf-form-dropdown>
+    </div>
 
-      <div ng-if="style.type === 'string'">
-        <gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="Sanitize HTML" checked="style.sanitize"
+    <div ng-if="style.type === 'string'">
+      <gf-form-switch class="gf-form" label-class="width-10" ng-if="style.type === 'string'" label="Sanitize HTML" checked="style.sanitize"
           change="editor.render()"></gf-form-switch>
-      </div>
-      <div ng-if="style.type === 'string'">
-        <gf-form-switch class="gf-form" label-class="width-11" ng-if="style.type === 'string'" label="Preserve Formatting" checked="style.preserveFormat"
+    </div>
+    <div ng-if="style.type === 'string'">
+      <gf-form-switch class="gf-form" label-class="width-10" ng-if="style.type === 'string'" label="Preserve Formatting" checked="style.preserveFormat"
           change="editor.render()"></gf-form-switch>
-      </div>
+    </div>
 
-      <div ng-if="style.type === 'number'">
-        <div class="gf-form">
-          <label class="gf-form-label width-11">Unit</label>
-          <div class="gf-form-dropdown-typeahead width-16" ng-model="style.unit" dropdown-typeahead2="editor.unitFormats" dropdown-typeahead-on-select="editor.setUnitFormat(style, $subItem)"></div>
-        </div>
-        <div class="gf-form">
-          <label class="gf-form-label width-11">Decimals</label>
-          <input type="number" class="gf-form-input width-4" data-placement="right" ng-model="style.decimals" ng-change="editor.render()"
+    <div ng-if="style.type === 'number'">
+      <div class="gf-form">
+        <label class="gf-form-label width-10">Unit</label>
+        <div class="gf-form-dropdown-typeahead width-16" ng-model="style.unit" dropdown-typeahead2="editor.unitFormats" dropdown-typeahead-on-select="editor.setUnitFormat(style, $subItem)"></div>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label width-10">Decimals</label>
+        <input type="number" class="gf-form-input width-4" data-placement="right" ng-model="style.decimals" ng-change="editor.render()"
             ng-model-onblur>
-        </div>
       </div>
     </div>
+  </div>
 
-    <div class="section gf-form-group" ng-if="style.type === 'string'">
-      <h5 class="section-heading">Value Mappings</h5>
-      <div class="editor-row">
-        <div class="gf-form-group">
-          <div class="gf-form">
-            <span class="gf-form-label">
-              Type
-            </span>
-            <div class="gf-form-select-wrapper">
-              <select class="gf-form-input" ng-model="style.mappingType"
+  <div class="section gf-form-group" ng-if="style.type === 'string'">
+    <h5 class="section-heading">Value Mappings</h5>
+    <div class="editor-row">
+      <div class="gf-form-group">
+        <div class="gf-form">
+          <span class="gf-form-label">
+            Type
+          </span>
+          <div class="gf-form-select-wrapper">
+            <select class="gf-form-input" ng-model="style.mappingType"
                       ng-options="c.value as c.text for c in editor.mappingTypes" ng-change="editor.render()"></select>
-            </div>
-          </div>
-          <div class="gf-form-group" ng-if="style.mappingType==1">
-            <div class="gf-form" ng-repeat="map in style.valueMaps">
-              <span class="gf-form-label">
-                <i class="fa fa-remove pointer" ng-click="editor.removeValueMap(style, $index)"></i>
-              </span>
-              <input type="text" class="gf-form-input max-width-6" ng-model="map.value" placeholder="Value" ng-blur="editor.render()">
-              <label class="gf-form-label">
-                <i class="fa fa-arrow-right"></i>
-              </label>
-              <input type="text" class="gf-form-input max-width-8" ng-model="map.text" placeholder="Text" ng-blur="editor.render()">
-            </div>
-            <div class="gf-form">
-              <label class="gf-form-label">
-                <a class="pointer" ng-click="editor.addValueMap(style)"><i class="fa fa-plus"></i></a>
-              </label>
-            </div>
-          </div>
-          <div class="gf-form-group" ng-if="style.mappingType==2">
-            <div class="gf-form" ng-repeat="rangeMap in style.rangeMaps">
-              <span class="gf-form-label">
-                <i class="fa fa-remove pointer" ng-click="editor.removeRangeMap(style, $index)"></i>
-              </span>
-              <span class="gf-form-label">From</span>
-              <input type="text" ng-model="rangeMap.from" class="gf-form-input max-width-6" ng-blur="editor.render()">
-              <span class="gf-form-label">To</span>
-              <input type="text" ng-model="rangeMap.to" class="gf-form-input max-width-6" ng-blur="editor.render()">
-              <span class="gf-form-label">Text</span>
-              <input type="text" ng-model="rangeMap.text" class="gf-form-input max-width-8" ng-blur="editor.render()">
-            </div>
-            <div class="gf-form">
-              <label class="gf-form-label">
-                <a class="pointer" ng-click="editor.addRangeMap(style)"><i class="fa fa-plus"></i></a>
-              </label>
-            </div>
           </div>
         </div>
-      </div>
-    </div>
-
-    <div class="section gf-form-group" ng-if="['number', 'string'].indexOf(style.type) !== -1">
-      <h5 class="section-heading">Thresholds</h5>
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Thresholds
-          <tip>Comma separated values</tip>
-        </label>
-        <input type="text" class="gf-form-input width-10" ng-model="style.thresholds" placeholder="50,80" ng-blur="editor.render()"
-          array-join>
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Color Mode</label>
-        <div class="gf-form-select-wrapper width-10">
-          <select class="gf-form-input" ng-model="style.colorMode" ng-options="c.value as c.text for c in editor.colorModes" ng-change="editor.render()"></select>
-        </div>
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Colors</label>
-        <span class="gf-form-label">
-          <color-picker color="style.colors[0]" onChange="editor.onColorChange($index, 0)"></color-picker>
-        </span>
-        <span class="gf-form-label">
-          <color-picker color="style.colors[1]" onChange="editor.onColorChange($index, 1)"></color-picker>
-        </span>
-        <span class="gf-form-label">
-          <color-picker color="style.colors[2]" onChange="editor.onColorChange($index, 2)"></color-picker>
-        </span>
-        <div class="gf-form-label">
-          <a class="pointer" ng-click="editor.invertColorOrder($index)">Invert</a>
-        </div>
-      </div>
-    </div>
-
-    <div class="section gf-form-group" ng-if="style.link">
-      <h5 class="section-heading">Link</h5>
-      <div class="gf-form">
-        <label class="gf-form-label width-9">
-          Url
-          <info-popover mode="right-normal">
-            <p>Specify an URL (relative or absolute)</p>
-            <span>
-              Use special variables to specify cell values:
-              <br>
-              <em>${__cell}</em> refers to current cell value
-              <br>
-              <em>${__cell_n}</em> refers to Nth column value in current row. Column indexes are started from 0. For instance,
-              <em>${__cell_1}</em> refers to second column's value.
-              <br>
-              <em>${__cell:raw}</em> syntax. By default values are URI encoded. If the value is a complete URL you can disable all encoding using
+        <div class="gf-form-group" ng-if="style.mappingType==1">
+          <div class="gf-form" ng-repeat="map in style.valueMaps">
+            <span class="gf-form-label">
+              <i class="fa fa-remove pointer" ng-click="editor.removeValueMap(style, $index)"></i>
             </span>
-          </info-popover>
-        </label>
-        <input type="text" class="gf-form-input width-29" ng-model="style.linkUrl" ng-blur="editor.render()" ng-model-onblur data-placement="right">
+            <input type="text" class="gf-form-input max-width-6" ng-model="map.value" placeholder="Value" ng-blur="editor.render()">
+            <label class="gf-form-label">
+              <i class="fa fa-arrow-right"></i>
+            </label>
+            <input type="text" class="gf-form-input max-width-8" ng-model="map.text" placeholder="Text" ng-blur="editor.render()">
+          </div>
+          <div class="gf-form">
+            <label class="gf-form-label">
+              <a class="pointer" ng-click="editor.addValueMap(style)"><i class="fa fa-plus"></i></a>
+            </label>
+          </div>
+        </div>
+        <div class="gf-form-group" ng-if="style.mappingType==2">
+          <div class="gf-form" ng-repeat="rangeMap in style.rangeMaps">
+            <span class="gf-form-label">
+              <i class="fa fa-remove pointer" ng-click="editor.removeRangeMap(style, $index)"></i>
+            </span>
+            <span class="gf-form-label">From</span>
+            <input type="text" ng-model="rangeMap.from" class="gf-form-input max-width-6" ng-blur="editor.render()">
+            <span class="gf-form-label">To</span>
+            <input type="text" ng-model="rangeMap.to" class="gf-form-input max-width-6" ng-blur="editor.render()">
+            <span class="gf-form-label">Text</span>
+            <input type="text" ng-model="rangeMap.text" class="gf-form-input max-width-8" ng-blur="editor.render()">
+          </div>
+          <div class="gf-form">
+            <label class="gf-form-label">
+              <a class="pointer" ng-click="editor.addRangeMap(style)"><i class="fa fa-plus"></i></a>
+            </label>
+          </div>
+        </div>
       </div>
-      <div class="gf-form">
-        <label class="gf-form-label width-9">
-          Tooltip
-          <info-popover mode="right-normal">
-            <p>Specify text for link tooltip.</p>
-            <span>
+    </div>
+  </div>
+
+  <div class="section gf-form-group" ng-if="['number', 'string'].indexOf(style.type) !== -1">
+    <h5 class="section-heading">Thresholds</h5>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Thresholds
+        <tip>Comma separated values</tip>
+      </label>
+      <input type="text" class="gf-form-input width-10" ng-model="style.thresholds" placeholder="50,80" ng-blur="editor.render()"
+        array-join>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Color Mode</label>
+      <div class="gf-form-select-wrapper width-10">
+        <select class="gf-form-input" ng-model="style.colorMode" ng-options="c.value as c.text for c in editor.colorModes" ng-change="editor.render()"></select>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Colors</label>
+      <span class="gf-form-label">
+        <color-picker color="style.colors[0]" onChange="editor.onColorChange($index, 0)"></color-picker>
+      </span>
+      <span class="gf-form-label">
+        <color-picker color="style.colors[1]" onChange="editor.onColorChange($index, 1)"></color-picker>
+      </span>
+      <span class="gf-form-label">
+        <color-picker color="style.colors[2]" onChange="editor.onColorChange($index, 2)"></color-picker>
+      </span>
+      <div class="gf-form-label">
+        <a class="pointer" ng-click="editor.invertColorOrder($index)">Invert</a>
+      </div>
+    </div>
+  </div>
+
+  <div class="section gf-form-group" ng-if="style.link">
+    <h5 class="section-heading">Link</h5>
+    <div class="gf-form">
+      <label class="gf-form-label width-9">
+        Url
+        <info-popover mode="right-normal">
+          <p>Specify an URL (relative or absolute)</p>
+          <span>
+            Use special variables to specify cell values:
+            <br>
+            <em>${__cell}</em> refers to current cell value
+            <br>
+            <em>${__cell_n}</em> refers to Nth column value in current row. Column indexes are started from 0. For instance,
+            <em>${__cell_1}</em> refers to second column's value.
+            <br>
+            <em>${__cell:raw}</em> syntax. By default values are URI encoded. If the value is a complete URL you can disable all encoding using
+          </span>
+        </info-popover>
+      </label>
+      <input type="text" class="gf-form-input width-29" ng-model="style.linkUrl" ng-blur="editor.render()" ng-model-onblur data-placement="right">
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-9">
+        Tooltip
+        <info-popover mode="right-normal">
+          <p>Specify text for link tooltip.</p>
+          <span>
               This title appears when user hovers pointer over the cell with link. Use the same variables as for URL.
-            </span>
-          </info-popover></label>
-        <input type="text" class="gf-form-input width-29" ng-model="style.linkTooltip" ng-blur="editor.render()" ng-model-onblur
+          </span>
+        </info-popover>
+      </label>
+      <input type="text" class="gf-form-input width-29" ng-model="style.linkTooltip" ng-blur="editor.render()" ng-model-onblur
           data-placement="right">
-      </div>
-      <gf-form-switch class="gf-form" label-class="width-9" label="Open in new tab" checked="style.linkTargetBlank"></gf-form-switch>
     </div>
+    <gf-form-switch class="gf-form" label-class="width-9" label="Open in new tab" checked="style.linkTargetBlank"></gf-form-switch>
+  </div>
 
-    <div class="clearfix"></div>
-
+  <div class="clearfix"></div>
+  <div class="gf-form-group">
     <button class="btn btn-danger btn-small" ng-click="editor.removeColumnStyle(style)">
       <i class="fa fa-trash"></i> Remove Rule
     </button>
-    <br />
-    <br />
-
   </div>
+
+  <hr>
+</div>
+
+<div class="gf-form-button-row">
+  <button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
+    <i class="fa fa-plus"></i>&nbsp;Add column style
+  </button>
+</div>
+
diff --git a/public/app/plugins/panel/table/module.ts b/public/app/plugins/panel/table/module.ts
index 193a9b47c54..a1366662955 100644
--- a/public/app/plugins/panel/table/module.ts
+++ b/public/app/plugins/panel/table/module.ts
@@ -154,11 +154,6 @@ class TablePanelCtrl extends MetricsPanelCtrl {
     this.render();
   }
 
-  moveQuery(target, direction) {
-    super.moveQuery(target, direction);
-    super.refresh();
-  }
-
   exportCsv() {
     const scope = this.$scope.$new(true);
     scope.tableData = this.renderer.render_values();
diff --git a/public/app/plugins/panel/table/renderer.ts b/public/app/plugins/panel/table/renderer.ts
index 524aa06343b..e4cc54e9c40 100644
--- a/public/app/plugins/panel/table/renderer.ts
+++ b/public/app/plugins/panel/table/renderer.ts
@@ -91,7 +91,14 @@ export class TableRenderer {
         if (_.isArray(v)) {
           v = v[0];
         }
+
+        // if is an epoch (numeric string and len > 12)
+        if (_.isString(v) && !isNaN(v) && v.length > 12) {
+          v = parseInt(v, 10);
+        }
+
         let date = moment(v);
+
         if (this.isUtc) {
           date = date.utc();
         }
diff --git a/public/app/plugins/panel/table/specs/renderer.test.ts b/public/app/plugins/panel/table/specs/renderer.test.ts
index f29c69e4acd..f9ccc574c91 100644
--- a/public/app/plugins/panel/table/specs/renderer.test.ts
+++ b/public/app/plugins/panel/table/specs/renderer.test.ts
@@ -186,6 +186,21 @@ describe('when rendering table', () => {
       expect(html).toBe('<td>2014-01-01T06:06:06Z</td>');
     });
 
+    it('time column with epoch as string should be formatted', () => {
+      const html = renderer.renderCell(0, 0, '1388556366666');
+      expect(html).toBe('<td>2014-01-01T06:06:06Z</td>');
+    });
+
+    it('time column with RFC2822 date as string should be formatted', () => {
+      const html = renderer.renderCell(0, 0, 'Sat, 01 Dec 2018 01:00:00 GMT');
+      expect(html).toBe('<td>2018-12-01T01:00:00Z</td>');
+    });
+
+    it('time column with ISO date as string should be formatted', () => {
+      const html = renderer.renderCell(0, 0, '2018-12-01T01:00:00Z');
+      expect(html).toBe('<td>2018-12-01T01:00:00Z</td>');
+    });
+
     it('undefined time column should be rendered as -', () => {
       const html = renderer.renderCell(0, 0, undefined);
       expect(html).toBe('<td>-</td>');
diff --git a/public/app/plugins/panel/text/editor.html b/public/app/plugins/panel/text/editor.html
index bae36a1ea2a..2105f0b4674 100644
--- a/public/app/plugins/panel/text/editor.html
+++ b/public/app/plugins/panel/text/editor.html
@@ -1,23 +1,15 @@
-<div class="gf-form-group">
-	<div class="gf-form-inline">
-		<div class="gf-form">
-			<span class="gf-form-label">Mode</span>
-			<span class="gf-form-select-wrapper">
-				<select class="gf-form-input" ng-model="ctrl.panel.mode" ng-options="f for f in ['html','markdown']"></select>
-			</span>
-		</div>
+<div class="gf-form-inline">
+	<div class="gf-form">
+		<span class="gf-form-label">Mode</span>
+		<span class="gf-form-select-wrapper">
+			<select class="gf-form-input" ng-model="ctrl.panel.mode" ng-options="f for f in ['html','markdown']"></select>
+		</span>
 	</div>
 </div>
 
-<h3 class="page-heading">Content</h3>
-
-<span ng-show="ctrl.panel.mode == 'markdown'">
-	(This area uses <a target="_blank" href="http://en.wikipedia.org/wiki/Markdown">Markdown</a>. HTML is not supported)
-</span>
-
 <div class="gf-form-inline">
 	<div class="gf-form gf-form--grow">
-		<code-editor content="ctrl.panel.content" on-change="ctrl.render()" data-mode="markdown" data-max-lines=20 code-editor-focus="true">
+		<code-editor content="ctrl.panel.content" on-change="ctrl.render()" data-mode="markdown" data-max-lines=20>
 		</code-editor>
 	</div>
 </div>
diff --git a/public/app/plugins/panel/text/module.ts b/public/app/plugins/panel/text/module.ts
index ed446d1699b..08ab4cd2b96 100644
--- a/public/app/plugins/panel/text/module.ts
+++ b/public/app/plugins/panel/text/module.ts
@@ -2,6 +2,15 @@ import _ from 'lodash';
 import { PanelCtrl } from 'app/plugins/sdk';
 import Remarkable from 'remarkable';
 
+const defaultContent = `
+# Title
+
+For markdown syntax help: [commonmark.org/help](https://commonmark.org/help/)
+
+
+
+`;
+
 export class TextPanelCtrl extends PanelCtrl {
   static templateUrl = `public/app/plugins/panel/text/module.html`;
   static scrollable = true;
@@ -11,7 +20,7 @@ export class TextPanelCtrl extends PanelCtrl {
   // Set and populate defaults
   panelDefaults = {
     mode: 'markdown', // 'html', 'markdown', 'text'
-    content: '# title',
+    content: defaultContent,
   };
 
   /** @ngInject */
@@ -34,7 +43,6 @@ export class TextPanelCtrl extends PanelCtrl {
 
   onInitEditMode() {
     this.addEditorTab('Options', 'public/app/plugins/panel/text/editor.html');
-    this.editorTabIndex = 1;
 
     if (this.panel.mode === 'text') {
       this.panel.mode = 'markdown';
diff --git a/public/app/plugins/panel/graph2/img/icn-text-panel.svg b/public/app/plugins/panel/text2/img/icn-text-panel.svg
similarity index 100%
rename from public/app/plugins/panel/graph2/img/icn-text-panel.svg
rename to public/app/plugins/panel/text2/img/icn-text-panel.svg
diff --git a/public/app/plugins/panel/text2/module.tsx b/public/app/plugins/panel/text2/module.tsx
index b10dc8b545e..aaca23ccbf0 100644
--- a/public/app/plugins/panel/text2/module.tsx
+++ b/public/app/plugins/panel/text2/module.tsx
@@ -11,4 +11,4 @@ export class Text2 extends PureComponent<PanelProps> {
   }
 }
 
-export { Text2 as PanelComponent };
+export { Text2 as Panel };
diff --git a/public/app/plugins/panel/text2/plugin.json b/public/app/plugins/panel/text2/plugin.json
index b1133f65e36..53885dbd0f4 100644
--- a/public/app/plugins/panel/text2/plugin.json
+++ b/public/app/plugins/panel/text2/plugin.json
@@ -11,8 +11,8 @@
       "url": "https://grafana.com"
     },
     "logos": {
-      "small": "img/icn-graph-panel.svg",
-      "large": "img/icn-graph-panel.svg"
+      "small": "img/icn-text-panel.svg",
+      "large": "img/icn-text-panel.svg"
     }
   }
 }
diff --git a/public/app/plugins/panel/unknown/module.html b/public/app/plugins/panel/unknown/module.html
deleted file mode 100644
index 02c4dc97fc1..00000000000
--- a/public/app/plugins/panel/unknown/module.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="text-center" style="padding-top: 2rem">
-	Unknown panel type: <strong>{{ctrl.panel.type}}</strong>
-</div>
-
-
diff --git a/public/app/plugins/panel/unknown/module.ts b/public/app/plugins/panel/unknown/module.ts
deleted file mode 100644
index d7229913bc5..00000000000
--- a/public/app/plugins/panel/unknown/module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { PanelCtrl } from 'app/features/panel/panel_ctrl';
-
-export class UnknownPanelCtrl extends PanelCtrl {
-  static templateUrl = 'public/app/plugins/panel/unknown/module.html';
-
-  /** @ngInject */
-  constructor($scope, $injector) {
-    super($scope, $injector);
-  }
-}
diff --git a/public/app/routes/ReactContainer.tsx b/public/app/routes/ReactContainer.tsx
index ed4d2d21827..807608e6960 100644
--- a/public/app/routes/ReactContainer.tsx
+++ b/public/app/routes/ReactContainer.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
 import coreModule from 'app/core/core_module';
-import { store } from 'app/store/configureStore';
+import { store } from 'app/store/store';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { ContextSrv } from 'app/core/services/context_srv';
diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts
index 6770011278f..d3b3488f1fe 100644
--- a/public/app/routes/routes.ts
+++ b/public/app/routes/routes.ts
@@ -14,6 +14,7 @@ import DataSourcesListPage from 'app/features/datasources/DataSourcesListPage';
 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 */
@@ -74,10 +75,11 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
         component: () => DataSourcesListPage,
       },
     })
-    .when('/datasources/edit/:id', {
-      templateUrl: 'public/app/features/plugins/partials/ds_edit.html',
-      controller: 'DataSourceEditCtrl',
-      controllerAs: 'ctrl',
+    .when('/datasources/edit/:id/', {
+      template: '<react-container />',
+      resolve: {
+        component: () => DataSourceSettings,
+      },
     })
     .when('/datasources/edit/:id/dashboards', {
       template: '<react-container />',
diff --git a/public/app/store/configureStore.ts b/public/app/store/configureStore.ts
index e6d86eaa9c6..943aff80a70 100644
--- a/public/app/store/configureStore.ts
+++ b/public/app/store/configureStore.ts
@@ -11,6 +11,7 @@ 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';
+import { setStore } from './store';
 
 const rootReducers = {
   ...sharedReducers,
@@ -25,8 +26,6 @@ const rootReducers = {
   ...organizationReducers,
 };
 
-export let store;
-
 export function addRootReducer(reducers) {
   Object.assign(rootReducers, ...reducers);
 }
@@ -38,8 +37,8 @@ export function configureStore() {
 
   if (process.env.NODE_ENV !== 'production') {
     // DEV builds we had the logger middleware
-    store = createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk, createLogger())));
+    setStore(createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk, createLogger()))));
   } else {
-    store = createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk)));
+    setStore(createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk))));
   }
 }
diff --git a/public/app/store/store.ts b/public/app/store/store.ts
new file mode 100644
index 00000000000..c8134ae77f3
--- /dev/null
+++ b/public/app/store/store.ts
@@ -0,0 +1,5 @@
+export let store;
+
+export function setStore(newStore) {
+  store = newStore;
+}
diff --git a/public/app/types/datasources.ts b/public/app/types/datasources.ts
index 705d1f36a54..5670d762d77 100644
--- a/public/app/types/datasources.ts
+++ b/public/app/types/datasources.ts
@@ -13,13 +13,23 @@ export interface DataSource {
   user: string;
   database: string;
   basicAuth: boolean;
+  basicAuthPassword: string;
+  basicAuthUser: string;
   isDefault: boolean;
   jsonData: { authType: string; defaultRegion: string };
   readOnly: boolean;
+  withCredentials: boolean;
   meta?: PluginMeta;
   pluginExports?: PluginExports;
 }
 
+export interface DataSourceSelectItem {
+  name: string;
+  value: string | null;
+  meta: PluginMeta;
+  sort: string;
+}
+
 export interface DataSourcesState {
   dataSources: DataSource[];
   searchQuery: string;
diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts
index 5152e26af39..80d55eedb60 100644
--- a/public/app/types/explore.ts
+++ b/public/app/types/explore.ts
@@ -3,6 +3,7 @@ import { Value } from 'slate';
 import { DataQuery, RawTimeRange } from './series';
 import TableModel from 'app/core/table_model';
 import { LogsModel } from 'app/core/logs_model';
+import { DataSourceSelectItem } from 'app/types/datasources';
 
 export interface CompletionItem {
   /**
@@ -74,11 +75,6 @@ export interface CompletionItemGroup {
   skipSort?: boolean;
 }
 
-interface ExploreDatasource {
-  value: string;
-  label: string;
-}
-
 export interface HistoryItem {
   ts: number;
   query: DataQuery;
@@ -159,7 +155,7 @@ export interface ExploreState {
   datasourceLoading: boolean | null;
   datasourceMissing: boolean;
   datasourceName?: string;
-  exploreDatasources: ExploreDatasource[];
+  exploreDatasources: DataSourceSelectItem[];
   graphInterval: number; // in ms
   graphResult?: any[];
   history: HistoryItem[];
diff --git a/public/app/types/form.ts b/public/app/types/form.ts
new file mode 100644
index 00000000000..95026c30be9
--- /dev/null
+++ b/public/app/types/form.ts
@@ -0,0 +1,8 @@
+export interface ValidationRule {
+  rule: (valueToValidate: string) => boolean;
+  errorMessage: string;
+}
+
+export interface ValidationEvents {
+  [eventName: string]: ValidationRule[];
+}
diff --git a/public/app/types/index.ts b/public/app/types/index.ts
index 30af6549097..f2a5f807645 100644
--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
@@ -7,7 +7,7 @@ import { DashboardState } from './dashboard';
 import { DashboardAcl, OrgRole, PermissionLevel } from './acl';
 import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
 import { Invitee, OrgUser, User, UsersState, UserState } from './user';
-import { DataSource, DataSourcesState } from './datasources';
+import { DataSource, DataSourceSelectItem, DataSourcesState } from './datasources';
 import {
   TimeRange,
   LoadingState,
@@ -21,8 +21,8 @@ import {
   DataQueryOptions,
   IntervalValues,
 } from './series';
-import { PanelProps, PanelOptionsProps } from './panel';
-import { PluginDashboard, PluginMeta, Plugin, PluginsState } from './plugins';
+import { BasicGaugeColor, MappingType, PanelProps, PanelOptionsProps, RangeMap, Threshold, ValueMap } from './panel';
+import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins';
 import { Organization, OrganizationState } from './organization';
 import {
   AppNotification,
@@ -31,7 +31,7 @@ import {
   AppNotificationTimeout,
 } from './appNotifications';
 import { DashboardSearchHit } from './search';
-
+import { ValidationEvents, ValidationRule } from './form';
 export {
   Team,
   TeamsState,
@@ -56,6 +56,7 @@ export {
   OrgRole,
   PermissionLevel,
   DataSource,
+  DataSourceSelectItem,
   PluginMeta,
   ApiKey,
   ApiKeysState,
@@ -69,6 +70,7 @@ export {
   UsersState,
   TimeRange,
   LoadingState,
+  PanelPlugin,
   PanelProps,
   PanelOptionsProps,
   TimeSeries,
@@ -88,7 +90,14 @@ export {
   AppNotificationTimeout,
   DashboardSearchHit,
   UserState,
+  Threshold,
+  ValidationEvents,
+  ValidationRule,
+  ValueMap,
+  RangeMap,
   IntervalValues,
+  MappingType,
+  BasicGaugeColor,
 };
 
 export interface StoreState {
diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts
index e82c3711b06..af371e16573 100644
--- a/public/app/types/panel.ts
+++ b/public/app/types/panel.ts
@@ -6,6 +6,8 @@ export interface PanelProps<T = any> {
   loading: LoadingState;
   options: T;
   renderCounter: number;
+  width: number;
+  height: number;
 }
 
 export interface PanelOptionsProps<T = any> {
@@ -13,6 +15,11 @@ export interface PanelOptionsProps<T = any> {
   onChange: (options: T) => void;
 }
 
+export interface PanelSize {
+  width: number;
+  height: number;
+}
+
 export interface PanelMenuItem {
   type?: 'submenu' | 'divider';
   text?: string;
@@ -21,3 +28,35 @@ export interface PanelMenuItem {
   shortcut?: string;
   subMenu?: PanelMenuItem[];
 }
+
+export interface Threshold {
+  index: number;
+  value: number;
+  color?: string;
+}
+
+export enum MappingType {
+  ValueToText = 1,
+  RangeToText = 2,
+}
+
+export enum BasicGaugeColor {
+  Green = '#299c46',
+  Red = '#d44a3a',
+}
+
+interface BaseMap {
+  id: number;
+  operator: string;
+  text: string;
+  type: MappingType;
+}
+
+export interface ValueMap extends BaseMap {
+  value: string;
+}
+
+export interface RangeMap extends BaseMap {
+  from: string;
+  to: string;
+}
diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts
index 9e3264be70c..a3519e5b5cc 100644
--- a/public/app/types/plugins.ts
+++ b/public/app/types/plugins.ts
@@ -12,15 +12,15 @@ export interface PluginExports {
 
   // Panel plugin
   PanelCtrl?;
-  PanelComponent?: ComponentClass<PanelProps>;
-  PanelOptionsComponent: ComponentClass<PanelOptionsProps>;
+  Panel?: ComponentClass<PanelProps>;
+  PanelOptions?: ComponentClass<PanelOptionsProps>;
+  PanelDefaults?: any;
 }
 
 export interface PanelPlugin {
   id: string;
   name: string;
-  meta: any;
-  hideFromList: boolean;
+  hideFromList?: boolean;
   module: string;
   baseUrl: string;
   info: any;
@@ -28,6 +28,12 @@ export interface PanelPlugin {
   exports?: PluginExports;
 }
 
+interface PluginMetaQueryOptions {
+  cacheTimeout?: boolean;
+  maxDataPoints?: boolean;
+  minInterval?: boolean;
+}
+
 export interface PluginMeta {
   id: string;
   name: string;
@@ -36,9 +42,13 @@ export interface PluginMeta {
 
   // Datasource-specific
   metrics?: boolean;
+  tables?: boolean;
   logs?: boolean;
   explore?: boolean;
   annotations?: boolean;
+  mixed?: boolean;
+  hasQueryHelp?: boolean;
+  queryOptions?: PluginMetaQueryOptions;
 }
 
 export interface PluginInclude {
@@ -47,18 +57,23 @@ export interface PluginInclude {
   path: string;
 }
 
+interface PluginMetaInfoLink {
+  name: string;
+  url: string;
+}
+
 export interface PluginMetaInfo {
   author: {
     name: string;
-    url: string;
+    url?: string;
   };
   description: string;
-  links: string[];
+  links: PluginMetaInfoLink[];
   logos: {
     large: string;
     small: string;
   };
-  screenshots: string;
+  screenshots: any[];
   updated: string;
   version: string;
 }
@@ -74,6 +89,7 @@ export interface Plugin {
   pinned: boolean;
   state: string;
   type: string;
+  module: any;
 }
 
 export interface PluginDashboard {
diff --git a/public/app/types/series.ts b/public/app/types/series.ts
index 7d7d00b1a60..a9585a2c842 100644
--- a/public/app/types/series.ts
+++ b/public/app/types/series.ts
@@ -68,6 +68,7 @@ export enum NullValueMode {
 /** View model projection of many time series */
 export interface TimeSeriesVMs {
   [index: number]: TimeSeriesVM;
+  length: number;
 }
 
 export interface DataQueryResponse {
@@ -103,18 +104,19 @@ export interface DataSourceApi {
    * Imports queries from a different datasource
    */
   importQueries?(queries: DataQuery[], originMeta: PluginMeta): Promise<DataQuery[]>;
+
   /**
    * Initializes a datasource after instantiation
    */
   init?: () => void;
 
   /**
-   *  Main data query method
+   * Main metrics / data query action
    */
   query(options: DataQueryOptions): Promise<DataQueryResponse>;
 
   /**
-   *  test data source
+   * Test & verify datasource settings & connection details
    */
-  testDatasource?: () => Promise<any>;
+  testDatasource(): Promise<any>;
 }
diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx
index 5e90fd870db..9907ddf575f 100644
--- a/public/app/viz/Gauge.tsx
+++ b/public/app/viz/Gauge.tsx
@@ -1,64 +1,155 @@
 import React, { PureComponent } from 'react';
 import $ from 'jquery';
-import { withSize } from 'react-sizeme';
-import { TimeSeriesVMs } from 'app/types';
+import { BasicGaugeColor, MappingType, RangeMap, Threshold, TimeSeriesVMs, ValueMap } from 'app/types';
 import config from '../core/config';
+import kbn from '../core/utils/kbn';
 
 interface Props {
-  timeSeries: TimeSeriesVMs;
-  minValue: number;
+  baseColor: string;
+  decimals: number;
+  height: number;
+  mappings: Array<RangeMap | ValueMap>;
   maxValue: number;
-  showThresholdMarkers?: boolean;
-  thresholds?: number[];
-  showThresholdLables?: boolean;
-  size?: { width: number; height: number };
+  minValue: number;
+  prefix: string;
+  timeSeries: TimeSeriesVMs;
+  thresholds: Threshold[];
+  showThresholdMarkers: boolean;
+  showThresholdLabels: boolean;
+  stat: string;
+  suffix: string;
+  unit: string;
+  width: number;
 }
 
-const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
-
 export class Gauge extends PureComponent<Props> {
-  parentElement: any;
   canvasElement: any;
 
   static defaultProps = {
-    minValue: 0,
+    baseColor: BasicGaugeColor.Green,
     maxValue: 100,
+    mappings: [],
+    minValue: 0,
+    prefix: '',
     showThresholdMarkers: true,
-    showThresholdLables: false,
+    showThresholdLabels: false,
+    suffix: '',
     thresholds: [],
+    unit: 'none',
+    stat: 'avg',
   };
 
   componentDidMount() {
     this.draw();
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate() {
     this.draw();
   }
 
+  formatWithMappings(mappings, value) {
+    const valueMaps = mappings.filter(m => m.type === MappingType.ValueToText);
+    const rangeMaps = mappings.filter(m => m.type === MappingType.RangeToText);
+
+    const valueMap = valueMaps.map(mapping => {
+      if (mapping.value && value === mapping.value) {
+        return mapping.text;
+      }
+    })[0];
+
+    const rangeMap = rangeMaps.map(mapping => {
+      if (mapping.from && mapping.to && value > mapping.from && value < mapping.to) {
+        return mapping.text;
+      }
+    })[0];
+
+    return {
+      rangeMap,
+      valueMap,
+    };
+  }
+
+  formatValue(value) {
+    const { decimals, mappings, prefix, suffix, unit } = this.props;
+
+    const formatFunc = kbn.valueFormats[unit];
+    const formattedValue = formatFunc(value, decimals);
+
+    if (mappings.length > 0) {
+      const { rangeMap, valueMap } = this.formatWithMappings(mappings, formattedValue);
+
+      if (valueMap) {
+        return valueMap;
+      } else if (rangeMap) {
+        return rangeMap;
+      }
+    }
+
+    if (isNaN(value)) {
+      return '-';
+    }
+
+    return `${prefix} ${formattedValue} ${suffix}`;
+  }
+
+  getFontColor(value) {
+    const { baseColor, maxValue, thresholds } = this.props;
+
+    const atThreshold = thresholds.filter(threshold => value <= threshold.value);
+
+    if (atThreshold.length > 0) {
+      return atThreshold[0].color;
+    } else if (value <= maxValue) {
+      return BasicGaugeColor.Red;
+    }
+
+    return baseColor;
+  }
+
   draw() {
-    const { maxValue, minValue, showThresholdLables, size, showThresholdMarkers, timeSeries, thresholds } = this.props;
+    const {
+      baseColor,
+      maxValue,
+      minValue,
+      timeSeries,
+      showThresholdLabels,
+      showThresholdMarkers,
+      thresholds,
+      width,
+      height,
+      stat,
+    } = this.props;
+
+    let value: string | number = '';
+
+    if (timeSeries[0]) {
+      value = timeSeries[0].stats[stat];
+    } else {
+      value = 'N/A';
+    }
 
-    const width = size.width;
-    const height = size.height;
     const dimension = Math.min(width, height * 1.3);
-
     const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
-    const fontColor = config.bootData.user.lightTheme ? 'rgb(38,38,38)' : 'rgb(230,230,230)';
     const fontScale = parseInt('80', 10) / 100;
     const fontSize = Math.min(dimension / 5, 100) * fontScale;
-    const gaugeWidth = Math.min(dimension / 6, 60);
+    const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
+    const gaugeWidth = Math.min(dimension / 6, 60) / gaugeWidthReduceRatio;
     const thresholdMarkersWidth = gaugeWidth / 5;
     const thresholdLabelFontSize = fontSize / 2.5;
 
-    const formattedThresholds = [];
-
-    thresholds.forEach((threshold, index) => {
-      formattedThresholds.push({
-        value: threshold,
-        color: colors[index],
-      });
-    });
+    const formattedThresholds = [
+      { value: minValue, color: BasicGaugeColor.Green },
+      ...thresholds.map((threshold, index) => {
+        return {
+          value: threshold.value,
+          color: index === 0 ? threshold.color : thresholds[index].color,
+        };
+      }),
+      {
+        value: maxValue,
+        color: thresholds.length > 0 ? BasicGaugeColor.Red : baseColor,
+      },
+    ];
 
     const options = {
       series: {
@@ -78,7 +169,7 @@ export class Gauge extends PureComponent<Props> {
           threshold: {
             values: formattedThresholds,
             label: {
-              show: showThresholdLables,
+              show: showThresholdLabels,
               margin: thresholdMarkersWidth + 1,
               font: { size: thresholdLabelFontSize },
             },
@@ -86,9 +177,9 @@ export class Gauge extends PureComponent<Props> {
             width: thresholdMarkersWidth,
           },
           value: {
-            color: fontColor,
+            color: this.getFontColor(value),
             formatter: () => {
-              return Math.round(timeSeries[0].stats.avg);
+              return this.formatValue(value);
             },
             font: {
               size: fontSize,
@@ -101,7 +192,7 @@ export class Gauge extends PureComponent<Props> {
     };
 
     const plotSeries = {
-      data: [[0, timeSeries[0].stats.avg]],
+      data: [[0, value]],
     };
 
     try {
@@ -112,10 +203,10 @@ export class Gauge extends PureComponent<Props> {
   }
 
   render() {
-    const { height, width } = this.props.size;
+    const { height, width } = this.props;
 
     return (
-      <div className="singlestat-panel" ref={element => (this.parentElement = element)}>
+      <div className="singlestat-panel">
         <div
           style={{
             height: `${height * 0.9}px`,
@@ -130,4 +221,4 @@ export class Gauge extends PureComponent<Props> {
   }
 }
 
-export default withSize({ monitorHeight: true })(Gauge);
+export default Gauge;
diff --git a/public/app/viz/GaugeOptions.tsx b/public/app/viz/GaugeOptions.tsx
deleted file mode 100644
index 031855e1c78..00000000000
--- a/public/app/viz/GaugeOptions.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { PureComponent } from 'react';
-import { PanelOptionsProps } from '../types';
-
-interface Props {}
-
-export class GaugeOptions extends PureComponent<PanelOptionsProps<Props>> {
-  render() {
-    return (
-      <div>
-        <div className="section gf-form-group">
-          <h5 className="page-heading">Draw Modes</h5>
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/public/app/viz/Graph.tsx b/public/app/viz/Graph.tsx
index 566080fbc92..bdababb3e50 100644
--- a/public/app/viz/Graph.tsx
+++ b/public/app/viz/Graph.tsx
@@ -1,7 +1,6 @@
 // Libraries
 import $ from 'jquery';
 import React, { PureComponent } from 'react';
-import { withSize } from 'react-sizeme';
 import 'vendor/flot/jquery.flot';
 import 'vendor/flot/jquery.flot.time';
 
@@ -14,7 +13,8 @@ interface GraphProps {
   showLines?: boolean;
   showPoints?: boolean;
   showBars?: boolean;
-  size?: { width: number; height: number };
+  width: number;
+  height: number;
 }
 
 export class Graph extends PureComponent<GraphProps> {
@@ -24,16 +24,10 @@ export class Graph extends PureComponent<GraphProps> {
     showBars: false,
   };
 
-  element: any;
+  element: HTMLElement;
 
-  componentDidUpdate(prevProps: GraphProps) {
-    if (
-      prevProps.timeSeries !== this.props.timeSeries ||
-      prevProps.timeRange !== this.props.timeRange ||
-      prevProps.size !== this.props.size
-    ) {
-      this.draw();
-    }
+  componentDidUpdate() {
+    this.draw();
   }
 
   componentDidMount() {
@@ -41,13 +35,13 @@ export class Graph extends PureComponent<GraphProps> {
   }
 
   draw() {
-    const { size, timeSeries, timeRange, showLines, showBars, showPoints } = this.props;
+    const { width, timeSeries, timeRange, showLines, showBars, showPoints } = this.props;
 
-    if (!size) {
+    if (!width) {
       return;
     }
 
-    const ticks = (size.width || 0) / 100;
+    const ticks = width / 100;
     const min = timeRange.from.valueOf();
     const max = timeRange.to.valueOf();
 
@@ -98,6 +92,7 @@ export class Graph extends PureComponent<GraphProps> {
     };
 
     try {
+      console.log('Graph render');
       $.plot(this.element, timeSeries, flotOptions);
     } catch (err) {
       console.log('Graph rendering error', err, flotOptions, timeSeries);
@@ -139,4 +134,4 @@ function time_format(ticks, min, max) {
   return '%H:%M';
 }
 
-export default withSize()(Graph);
+export default Graph;
diff --git a/public/dashboards/home.json b/public/dashboards/home.json
index ff69bb6f856..55cf7242aa6 100644
--- a/public/dashboards/home.json
+++ b/public/dashboards/home.json
@@ -31,7 +31,7 @@
       "folderId": 0,
       "headings": true,
       "id": 3,
-      "limit": 4,
+      "limit": 30,
       "links": [],
       "query": "",
       "recent": true,
diff --git a/public/img/icons_dark_theme/icon_advanced.svg b/public/img/icons_dark_theme/icon_advanced.svg
new file mode 100644
index 00000000000..5fd18a86dd5
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_advanced.svg
@@ -0,0 +1,33 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0A0A0C;}
+	.st1{fill:#E3E2E2;}
+</style>
+<g>
+	<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z"/>
+	<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+		S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+	<g>
+		<path class="st1" d="M58.2,51.9c1.2-2.9,1-6.4-1-9.1c-1.5-2.1-3.7-3.3-6.1-3.7c-1.2-0.2-2.5-0.1-3.7,0.2l4,5.5
+			c1.1,1.5,0.8,3.7-0.8,4.8c-0.8,0.6-1.7,0.8-2.6,0.6c-0.9-0.1-1.7-0.6-2.2-1.4l-4-5.5c-2,3.1-1.9,7.2,0.4,10.4
+			c1.5,2.1,3.7,3.3,6.1,3.7c0.8,0.1,1.5,0.1,2.3,0.1l12.8,17.6c0.8,1.1,1.9,1.7,3.1,1.9s2.5-0.1,3.5-0.9c2.1-1.5,2.6-4.5,1-6.6
+			L58.2,51.9z M67.9,71c1,0.2,1.7,1.1,1.5,2.1c-0.2,1-1.1,1.7-2.1,1.5s-1.7-1.1-1.5-2.1C65.9,71.6,66.9,70.9,67.9,71z"/>
+		<path class="st1" d="M61.5,50.9c0,0.1-0.1,0.3-0.1,0.4C61.4,51.2,61.4,51.1,61.5,50.9z"/>
+		<path class="st1" d="M59.9,41.6c0.1,0.1,0.1,0.2,0.2,0.3C60,41.9,60,41.7,59.9,41.6z"/>
+		<path class="st1" d="M61.6,50.1c0,0.2-0.1,0.5-0.1,0.7c0.2-0.8,0.3-1.7,0.3-2.6c0-2.3-0.6-4.4-1.7-6.2
+			C61.5,44.3,62.1,47.2,61.6,50.1z"/>
+		<path class="st1" d="M59.7,41.3C59.7,41.4,59.7,41.4,59.7,41.3C59.7,41.4,59.7,41.4,59.7,41.3z"/>
+		<path class="st1" d="M73.4,59.1l1.9-5.7l-6.4-3c0.1-0.7,0.1-1.5,0.1-2.2c0-0.7,0-1.4-0.1-2.1l6.4-3l-1.9-5.7l-6.9,1.3
+			c-0.7-1.3-1.6-2.4-2.5-3.5l3.4-6.2l-4.9-3.5l-4.8,5.1c-1.3-0.6-2.7-1.1-4.1-1.4l-0.9-7h-6l-0.9,7c-1.4,0.3-2.8,0.7-4.1,1.3
+			l-4.8-5.1L32,28.9l3.4,6.2c-1,1.1-1.8,2.2-2.5,3.5L26,37.2L24.1,43l6.4,3c-0.1,0.7-0.1,1.5-0.1,2.2c0,0.7,0,1.4,0.1,2.1l-6.4,3
+			l1.9,5.7l6.9-1.3c0.7,1.3,1.6,2.4,2.5,3.5L32,67.3l4.9,3.5l4.8-5.1c1.3,0.6,2.7,1.1,4.1,1.4l0.9,7h6l0.9-7c0.2,0,0.4-0.1,0.6-0.1
+			l-4.8-6.6c-0.5,0-1.1-0.1-1.6-0.1c-6.7-1-11.2-7.3-10.2-14c1-6.7,7.3-11.2,14-10.2c3.5,0.5,6.4,2.5,8.2,5.2c0,0,0,0,0.1,0.1
+			c0.1,0.1,0.1,0.2,0.1,0.2c0.1,0.1,0.1,0.2,0.2,0.3c0,0,0,0,0,0c1.1,1.8,1.7,3.9,1.7,6.2c0,0.9-0.1,1.8-0.3,2.6c0,0,0,0.1,0,0.1
+			c0,0.1-0.1,0.3-0.1,0.4c0,0.1,0,0.1-0.1,0.2l4.9,6.7c0.1-0.1,0.2-0.3,0.3-0.4L73.4,59.1z"/>
+	</g>
+</g>
+</svg>
diff --git a/public/img/icons_dark_theme/icon_advanced_active.svg b/public/img/icons_dark_theme/icon_advanced_active.svg
new file mode 100644
index 00000000000..80672a2595b
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_advanced_active.svg
@@ -0,0 +1,69 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#0A0A0C;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+	.st4{fill:url(#SVGID_4_);}
+	.st5{fill:url(#SVGID_5_);}
+	.st6{fill:url(#SVGID_6_);}
+	.st7{fill:url(#SVGID_7_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.4,49.4C94.4,25,74.6,5.1,50.2,5.1S5.9,25,5.9,49.4s19.9,44.3,44.3,44.3S94.4,73.8,94.4,49.4z"/>
+	<g>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="56.3802" y1="134.9514" x2="56.3802" y2="30.9934">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st2" d="M58.4,51.3c1.2-2.9,1-6.4-1-9.1c-1.5-2.1-3.7-3.3-6.1-3.7c-1.2-0.2-2.5-0.1-3.7,0.2l4,5.5
+			c1.1,1.5,0.8,3.7-0.8,4.8c-0.8,0.6-1.7,0.8-2.6,0.6c-0.9-0.1-1.7-0.6-2.2-1.4l-4-5.5c-2,3.1-1.9,7.2,0.4,10.4
+			c1.5,2.1,3.7,3.3,6.1,3.7c0.8,0.1,1.5,0.1,2.3,0.1l12.8,17.6c0.8,1.1,1.9,1.7,3.1,1.9s2.5-0.1,3.5-0.9c2.1-1.5,2.6-4.5,1-6.6
+			L58.4,51.3z M68.1,70.4c1,0.2,1.7,1.1,1.5,2.1c-0.2,1-1.1,1.7-2.1,1.5S65.8,73,66,72C66.1,70.9,67.1,70.3,68.1,70.4z"/>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="61.6059" y1="134.9514" x2="61.6059" y2="30.9934">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st3" d="M61.7,50.3c0,0.1-0.1,0.3-0.1,0.4C61.6,50.6,61.6,50.4,61.7,50.3z"/>
+		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="60.1683" y1="134.9514" x2="60.1683" y2="30.9934">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st4" d="M60.1,41c0.1,0.1,0.1,0.2,0.2,0.3C60.2,41.2,60.1,41.1,60.1,41z"/>
+		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="61.1232" y1="134.9514" x2="61.1232" y2="30.9934">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st5" d="M61.8,49.5c0,0.2-0.1,0.5-0.1,0.7c0.2-0.8,0.3-1.7,0.3-2.6c0-2.3-0.6-4.4-1.7-6.2
+			C61.7,43.7,62.3,46.5,61.8,49.5z"/>
+		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="59.8929" y1="134.9514" x2="59.8929" y2="30.9934">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st6" d="M59.9,40.7C59.9,40.7,59.9,40.8,59.9,40.7C59.9,40.8,59.9,40.7,59.9,40.7z"/>
+		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="49.8648" y1="134.9514" x2="49.8648" y2="30.9934">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st7" d="M73.6,58.5l1.9-5.7l-6.4-3c0.1-0.7,0.1-1.5,0.1-2.2c0-0.7,0-1.4-0.1-2.1l6.4-3l-1.9-5.7L66.7,38
+			c-0.7-1.3-1.6-2.4-2.5-3.5l3.4-6.2l-4.9-3.5l-4.8,5.1c-1.3-0.6-2.7-1.1-4.1-1.4l-0.9-7h-6l-0.9,7c-1.4,0.3-2.8,0.7-4.1,1.3
+			l-4.8-5.1l-4.9,3.5l3.4,6.2c-1,1.1-1.8,2.2-2.5,3.5l-6.9-1.3l-1.9,5.7l6.4,3c-0.1,0.7-0.1,1.5-0.1,2.2c0,0.7,0,1.4,0.1,2.1l-6.4,3
+			l1.9,5.7l6.9-1.3c0.7,1.3,1.6,2.4,2.5,3.5l-3.4,6.2l4.9,3.5l4.8-5.1c1.3,0.6,2.7,1.1,4.1,1.4l0.9,7h6l0.9-7c0.2,0,0.4-0.1,0.6-0.1
+			l-4.8-6.6c-0.5,0-1.1-0.1-1.6-0.1c-6.7-1-11.2-7.3-10.2-14c1-6.7,7.3-11.2,14-10.2c3.5,0.5,6.4,2.5,8.2,5.2c0,0,0,0,0.1,0.1
+			c0.1,0.1,0.1,0.2,0.1,0.2c0.1,0.1,0.1,0.2,0.2,0.3c0,0,0,0,0,0c1.1,1.8,1.7,3.9,1.7,6.2c0,0.9-0.1,1.8-0.3,2.6c0,0,0,0.1,0,0.1
+			c0,0.1-0.1,0.3-0.1,0.4c0,0.1,0,0.1-0.1,0.2l4.9,6.7c0.1-0.1,0.2-0.3,0.3-0.4L73.6,58.5z"/>
+	</g>
+</g>
+</svg>
diff --git a/public/img/icons_dark_theme/icon_alerting.svg b/public/img/icons_dark_theme/icon_alerting.svg
new file mode 100644
index 00000000000..aa483576f2c
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_alerting.svg
@@ -0,0 +1,26 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0A0A0C;}
+	.st1{fill:#E3E2E2;}
+</style>
+<g>
+	<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z"/>
+	<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+		S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+	<g>
+		<g>
+			<g>
+				<path class="st1" d="M49.3,77.8c4,0,7.3-3.3,7.3-7.3H42C42,74.5,45.3,77.8,49.3,77.8z"/>
+			</g>
+		</g>
+		<g>
+			<path class="st1" d="M68.2,59v-9.2c0-11.3-5.9-20.8-14-23.5c0-2.7-2.2-4.9-4.9-4.9c-2.7,0-4.9,2.2-4.9,4.9
+				c-8.1,2.8-14,12.3-14,23.5V59c-2.2,0-4,1.8-4,4s1.8,4,4,4v0h0.1h37.8h0.1v0c2.2,0,4-1.8,4-4S70.4,59.1,68.2,59z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/public/img/icons_dark_theme/icon_alerting_active.svg b/public/img/icons_dark_theme/icon_alerting_active.svg
new file mode 100644
index 00000000000..5c70638f64c
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_alerting_active.svg
@@ -0,0 +1,43 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#0A0A0C;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.4,49.5c0-24.4-19.9-44.3-44.3-44.3S5.8,25.1,5.8,49.5s19.9,44.3,44.3,44.3S94.4,73.9,94.4,49.5z"/>
+	<g>
+		<g>
+			<g>
+				<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.3811" y1="132.2195" x2="49.3811" y2="36.6876">
+					<stop  offset="0" style="stop-color:#FFF100"/>
+					<stop  offset="1" style="stop-color:#F05A28"/>
+				</linearGradient>
+				<path class="st2" d="M49.4,77.3c4,0,7.3-3.3,7.3-7.3H42.1C42.1,74.1,45.4,77.3,49.4,77.3z"/>
+			</g>
+		</g>
+		<g>
+			<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="49.3811" y1="132.2195" x2="49.3811" y2="36.6876">
+				<stop  offset="0" style="stop-color:#FFF100"/>
+				<stop  offset="1" style="stop-color:#F05A28"/>
+			</linearGradient>
+			<path class="st3" d="M68.3,58.6v-9.2c0-11.3-5.9-20.8-14-23.5c0-2.7-2.2-4.9-4.9-4.9c-2.7,0-4.9,2.2-4.9,4.9
+				c-8.1,2.8-14,12.3-14,23.5v9.2c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4v0h0.1h37.8h0.1v0c2.2,0,4-1.8,4-4
+				C72.3,60.4,70.5,58.6,68.3,58.6z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/public/img/icons_dark_theme/icon_query.svg b/public/img/icons_dark_theme/icon_query.svg
new file mode 100644
index 00000000000..fab09779936
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_query.svg
@@ -0,0 +1,25 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0A0A0C;}
+	.st1{fill:#E3E2E2;}
+</style>
+<g>
+	<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z M49.1,73.7
+		c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3s20.9-3.4,25.3-8.3c0.2,0.6,0.4,1.3,0.4,2
+		C74.8,68,63.1,73.7,49.1,73.7z M49.1,62.5c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3
+		s20.9-3.4,25.3-8.3c0.2,0.6,0.4,1.3,0.4,2C74.8,56.9,63.1,62.5,49.1,62.5z M49.1,51.3c-13.9,0-25.7-5.6-25.7-12.3
+		c0-6.7,11.8-12.3,25.7-12.3S74.8,32.4,74.8,39C74.8,45.7,63.1,51.3,49.1,51.3z"/>
+	<path class="st1" d="M49.1,67.7c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3S74.8,68,74.8,61.4
+		c0-0.7-0.1-1.3-0.4-2C70.1,64.4,60.5,67.7,49.1,67.7z"/>
+	<path class="st1" d="M49.1,56.5c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3s25.7-5.6,25.7-12.3
+		c0-0.7-0.1-1.3-0.4-2C70.1,53.2,60.5,56.5,49.1,56.5z"/>
+	<path class="st1" d="M49.1,26.7c-13.9,0-25.7,5.6-25.7,12.3c0,6.7,11.8,12.3,25.7,12.3S74.8,45.7,74.8,39
+		C74.8,32.4,63.1,26.7,49.1,26.7z"/>
+	<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+		S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+</g>
+</svg>
diff --git a/public/img/icons_dark_theme/icon_query_active.svg b/public/img/icons_dark_theme/icon_query_active.svg
new file mode 100644
index 00000000000..ed8141b51bf
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_query_active.svg
@@ -0,0 +1,46 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#0A0A0C;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+	.st4{fill:url(#SVGID_4_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.4,50c0-24.4-19.9-44.3-44.3-44.3S5.9,25.6,5.9,50s19.9,44.3,44.3,44.3S94.4,74.4,94.4,50z M49.3,73.7
+		c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3s20.9-3.4,25.3-8.3c0.2,0.6,0.4,1.3,0.4,2
+		C75,68,63.2,73.7,49.3,73.7z M49.3,62.5c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3s20.9-3.4,25.3-8.3
+		c0.2,0.6,0.4,1.3,0.4,2C75,56.9,63.2,62.5,49.3,62.5z M49.3,51.3c-13.9,0-25.7-5.6-25.7-12.3c0-6.7,11.8-12.3,25.7-12.3
+		S75,32.4,75,39C75,45.7,63.2,51.3,49.3,51.3z"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.2981" y1="130.777" x2="49.2981" y2="18.669">
+		<stop  offset="0" style="stop-color:#FFF100"/>
+		<stop  offset="1" style="stop-color:#F05A28"/>
+	</linearGradient>
+	<path class="st2" d="M49.3,67.7c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3S75,68,75,61.4
+		c0-0.7-0.1-1.3-0.4-2C70.2,64.4,60.7,67.7,49.3,67.7z"/>
+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="49.2981" y1="130.7753" x2="49.2981" y2="18.6673">
+		<stop  offset="0" style="stop-color:#FFF100"/>
+		<stop  offset="1" style="stop-color:#F05A28"/>
+	</linearGradient>
+	<path class="st3" d="M49.3,56.5c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3S75,56.9,75,50.2
+		c0-0.7-0.1-1.3-0.4-2C70.2,53.2,60.7,56.5,49.3,56.5z"/>
+	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="49.2981" y1="130.7753" x2="49.2981" y2="18.6673">
+		<stop  offset="0" style="stop-color:#FFF100"/>
+		<stop  offset="1" style="stop-color:#F05A28"/>
+	</linearGradient>
+	<path class="st4" d="M49.3,26.7c-13.9,0-25.7,5.6-25.7,12.3c0,6.7,11.8,12.3,25.7,12.3S75,45.7,75,39C75,32.4,63.2,26.7,49.3,26.7z
+		"/>
+</g>
+</svg>
diff --git a/public/img/icons_dark_theme/icon_visualize.svg b/public/img/icons_dark_theme/icon_visualize.svg
new file mode 100644
index 00000000000..2941f256ae8
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_visualize.svg
@@ -0,0 +1,20 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0A0A0C;}
+	.st1{fill:#E3E2E2;}
+</style>
+<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z"/>
+<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+	S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+<g>
+	<path class="st1" d="M77.6,66.3H25.2V30.9c0-1.5-1.2-2.8-2.8-2.8s-2.8,1.2-2.8,2.8v38.1c0,1.5,1.2,2.8,2.8,2.8h55.2
+		c1.5,0,2.8-1.2,2.8-2.8S79.1,66.3,77.6,66.3z"/>
+	<g>
+		<polygon class="st1" points="77.5,63.6 77.8,49.5 62.7,28.8 46.8,50 35.6,39.2 27.9,43.6 27.9,63.6 		"/>
+	</g>
+</g>
+</svg>
diff --git a/public/img/icons_dark_theme/icon_visualize_active.svg b/public/img/icons_dark_theme/icon_visualize_active.svg
new file mode 100644
index 00000000000..43207ebaae4
--- /dev/null
+++ b/public/img/icons_dark_theme/icon_visualize_active.svg
@@ -0,0 +1,38 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#0A0A0C;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.1,50c0-24.4-19.9-44.3-44.3-44.3S5.6,25.6,5.6,50s19.9,44.3,44.3,44.3S94.1,74.4,94.1,50z"/>
+	<g>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="50.6946" y1="113.8319" x2="50.6946" y2="21.7994">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st2" d="M78.3,65.9H25.9V30.5c0-1.5-1.2-2.8-2.8-2.8c-1.5,0-2.8,1.2-2.8,2.8v38.1c0,1.5,1.2,2.8,2.8,2.8h55.2
+			c1.5,0,2.8-1.2,2.8-2.8S79.8,65.9,78.3,65.9z"/>
+		<g>
+			<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="53.553" y1="113.8319" x2="53.553" y2="21.7994">
+				<stop  offset="0" style="stop-color:#FFF100"/>
+				<stop  offset="1" style="stop-color:#F05A28"/>
+			</linearGradient>
+			<polygon class="st3" points="78.2,63.1 78.5,49 63.4,28.3 47.5,49.5 36.3,38.7 28.6,43.1 28.6,63.1 			"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/public/img/icons_light_theme/icon_advanced.svg b/public/img/icons_light_theme/icon_advanced.svg
new file mode 100644
index 00000000000..574a958f829
--- /dev/null
+++ b/public/img/icons_light_theme/icon_advanced.svg
@@ -0,0 +1,33 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#52545c;}
+</style>
+<g>
+	<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z"/>
+	<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+		S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+	<g>
+		<path class="st1" d="M58.2,51.9c1.2-2.9,1-6.4-1-9.1c-1.5-2.1-3.7-3.3-6.1-3.7c-1.2-0.2-2.5-0.1-3.7,0.2l4,5.5
+			c1.1,1.5,0.8,3.7-0.8,4.8c-0.8,0.6-1.7,0.8-2.6,0.6c-0.9-0.1-1.7-0.6-2.2-1.4l-4-5.5c-2,3.1-1.9,7.2,0.4,10.4
+			c1.5,2.1,3.7,3.3,6.1,3.7c0.8,0.1,1.5,0.1,2.3,0.1l12.8,17.6c0.8,1.1,1.9,1.7,3.1,1.9s2.5-0.1,3.5-0.9c2.1-1.5,2.6-4.5,1-6.6
+			L58.2,51.9z M67.9,71c1,0.2,1.7,1.1,1.5,2.1c-0.2,1-1.1,1.7-2.1,1.5s-1.7-1.1-1.5-2.1C65.9,71.6,66.9,70.9,67.9,71z"/>
+		<path class="st1" d="M61.5,50.9c0,0.1-0.1,0.3-0.1,0.4C61.4,51.2,61.4,51.1,61.5,50.9z"/>
+		<path class="st1" d="M59.9,41.6c0.1,0.1,0.1,0.2,0.2,0.3C60,41.9,60,41.7,59.9,41.6z"/>
+		<path class="st1" d="M61.6,50.1c0,0.2-0.1,0.5-0.1,0.7c0.2-0.8,0.3-1.7,0.3-2.6c0-2.3-0.6-4.4-1.7-6.2
+			C61.5,44.3,62.1,47.2,61.6,50.1z"/>
+		<path class="st1" d="M59.7,41.3C59.7,41.4,59.7,41.4,59.7,41.3C59.7,41.4,59.7,41.4,59.7,41.3z"/>
+		<path class="st1" d="M73.4,59.1l1.9-5.7l-6.4-3c0.1-0.7,0.1-1.5,0.1-2.2c0-0.7,0-1.4-0.1-2.1l6.4-3l-1.9-5.7l-6.9,1.3
+			c-0.7-1.3-1.6-2.4-2.5-3.5l3.4-6.2l-4.9-3.5l-4.8,5.1c-1.3-0.6-2.7-1.1-4.1-1.4l-0.9-7h-6l-0.9,7c-1.4,0.3-2.8,0.7-4.1,1.3
+			l-4.8-5.1L32,28.9l3.4,6.2c-1,1.1-1.8,2.2-2.5,3.5L26,37.2L24.1,43l6.4,3c-0.1,0.7-0.1,1.5-0.1,2.2c0,0.7,0,1.4,0.1,2.1l-6.4,3
+			l1.9,5.7l6.9-1.3c0.7,1.3,1.6,2.4,2.5,3.5L32,67.3l4.9,3.5l4.8-5.1c1.3,0.6,2.7,1.1,4.1,1.4l0.9,7h6l0.9-7c0.2,0,0.4-0.1,0.6-0.1
+			l-4.8-6.6c-0.5,0-1.1-0.1-1.6-0.1c-6.7-1-11.2-7.3-10.2-14c1-6.7,7.3-11.2,14-10.2c3.5,0.5,6.4,2.5,8.2,5.2c0,0,0,0,0.1,0.1
+			c0.1,0.1,0.1,0.2,0.1,0.2c0.1,0.1,0.1,0.2,0.2,0.3c0,0,0,0,0,0c1.1,1.8,1.7,3.9,1.7,6.2c0,0.9-0.1,1.8-0.3,2.6c0,0,0,0.1,0,0.1
+			c0,0.1-0.1,0.3-0.1,0.4c0,0.1,0,0.1-0.1,0.2l4.9,6.7c0.1-0.1,0.2-0.3,0.3-0.4L73.4,59.1z"/>
+	</g>
+</g>
+</svg>
diff --git a/public/img/icons_light_theme/icon_advanced_active.svg b/public/img/icons_light_theme/icon_advanced_active.svg
new file mode 100644
index 00000000000..7185429fffb
--- /dev/null
+++ b/public/img/icons_light_theme/icon_advanced_active.svg
@@ -0,0 +1,70 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+	.st4{fill:url(#SVGID_4_);}
+	.st5{fill:url(#SVGID_5_);}
+	.st6{fill:url(#SVGID_6_);}
+	.st7{fill:url(#SVGID_7_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FBB017"/>
+			<stop  offset="1" style="stop-color:#EF4E28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.3,50.1C94.3,25.7,74.4,5.8,50,5.8S5.8,25.7,5.8,50.1S25.6,94.3,50,94.3S94.3,74.5,94.3,50.1z"/>
+	<g>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="56.209" y1="135.6298" x2="56.209" y2="31.6718">
+			<stop  offset="0" style="stop-color:#FBB017"/>
+			<stop  offset="1" style="stop-color:#EF4E28"/>
+		</linearGradient>
+		<path class="st2" d="M58.2,52c1.2-2.9,1-6.4-1-9.1c-1.5-2.1-3.7-3.3-6.1-3.7c-1.2-0.2-2.5-0.1-3.7,0.2l4,5.5
+			c1.1,1.5,0.8,3.7-0.8,4.8c-0.8,0.6-1.7,0.8-2.6,0.6c-0.9-0.1-1.7-0.6-2.2-1.4l-4-5.5c-2,3.1-1.9,7.2,0.4,10.4
+			c1.5,2.1,3.7,3.3,6.1,3.7c0.8,0.1,1.5,0.1,2.3,0.1l12.8,17.6c0.8,1.1,1.9,1.7,3.1,1.9c1.2,0.2,2.5-0.1,3.5-0.9
+			c2.1-1.5,2.6-4.5,1-6.6L58.2,52z M67.9,71.1c1,0.2,1.7,1.1,1.5,2.1c-0.2,1-1.1,1.7-2.1,1.5c-1-0.2-1.7-1.1-1.5-2.1
+			C65.9,71.6,66.9,70.9,67.9,71.1z"/>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="61.4347" y1="135.6298" x2="61.4347" y2="31.6718">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st3" d="M61.5,51c0,0.1-0.1,0.3-0.1,0.4C61.4,51.2,61.5,51.1,61.5,51z"/>
+		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="59.9971" y1="135.6298" x2="59.9971" y2="31.6718">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st4" d="M59.9,41.7c0.1,0.1,0.1,0.2,0.2,0.3C60,41.9,60,41.8,59.9,41.7z"/>
+		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="60.952" y1="135.6298" x2="60.952" y2="31.6718">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st5" d="M61.7,50.1c0,0.2-0.1,0.5-0.1,0.7c0.2-0.8,0.3-1.7,0.3-2.6c0-2.3-0.6-4.4-1.7-6.2
+			C61.5,44.4,62.1,47.2,61.7,50.1z"/>
+		<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="59.7217" y1="135.6298" x2="59.7217" y2="31.6718">
+			<stop  offset="0" style="stop-color:#FFF100"/>
+			<stop  offset="1" style="stop-color:#F05A28"/>
+		</linearGradient>
+		<path class="st6" d="M59.7,41.4C59.7,41.4,59.7,41.4,59.7,41.4C59.7,41.4,59.7,41.4,59.7,41.4z"/>
+		<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="49.6936" y1="135.6298" x2="49.6936" y2="31.6718">
+			<stop  offset="0" style="stop-color:#FBB017"/>
+			<stop  offset="1" style="stop-color:#EF4E28"/>
+		</linearGradient>
+		<path class="st7" d="M73.4,59.2l1.9-5.7l-6.4-3c0.1-0.7,0.1-1.5,0.1-2.2c0-0.7,0-1.4-0.1-2.1l6.4-3l-1.9-5.7l-6.9,1.3
+			c-0.7-1.3-1.6-2.4-2.5-3.5l3.4-6.2l-4.9-3.5l-4.8,5.1c-1.3-0.6-2.7-1.1-4.1-1.4l-0.9-7h-6l-0.9,7c-1.4,0.3-2.8,0.7-4.1,1.3
+			l-4.8-5.1L32,29l3.4,6.2c-1,1.1-1.8,2.2-2.5,3.5L26,37.3L24.1,43l6.4,3c-0.1,0.7-0.1,1.5-0.1,2.2c0,0.7,0,1.4,0.1,2.1l-6.4,3
+			l1.9,5.7l6.9-1.3c0.7,1.3,1.6,2.4,2.5,3.5L32,67.4l4.9,3.5l4.8-5.1c1.3,0.6,2.7,1.1,4.1,1.4l0.9,7h6l0.9-7c0.2,0,0.4-0.1,0.6-0.1
+			l-4.8-6.6c-0.5,0-1.1-0.1-1.6-0.1c-6.7-1-11.2-7.3-10.2-14c1-6.7,7.3-11.2,14-10.2c3.5,0.5,6.4,2.5,8.2,5.2c0,0,0,0,0.1,0.1
+			c0.1,0.1,0.1,0.2,0.1,0.2c0.1,0.1,0.1,0.2,0.2,0.3c0,0,0,0,0,0c1.1,1.8,1.7,3.9,1.7,6.2c0,0.9-0.1,1.8-0.3,2.6c0,0,0,0.1,0,0.1
+			c0,0.1-0.1,0.3-0.1,0.4c0,0.1,0,0.1-0.1,0.2l4.9,6.7c0.1-0.1,0.2-0.3,0.3-0.4L73.4,59.2z"/>
+	</g>
+</g>
+</svg>
diff --git a/public/img/icons_light_theme/icon_alerting.svg b/public/img/icons_light_theme/icon_alerting.svg
new file mode 100644
index 00000000000..273cf099c75
--- /dev/null
+++ b/public/img/icons_light_theme/icon_alerting.svg
@@ -0,0 +1,26 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#52545c;}
+</style>
+<g>
+	<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z"/>
+	<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+		S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+	<g>
+		<g>
+			<g>
+				<path class="st1" d="M49.3,77.8c4,0,7.3-3.3,7.3-7.3H42C42,74.5,45.3,77.8,49.3,77.8z"/>
+			</g>
+		</g>
+		<g>
+			<path class="st1" d="M68.2,59v-9.2c0-11.3-5.9-20.8-14-23.5c0-2.7-2.2-4.9-4.9-4.9c-2.7,0-4.9,2.2-4.9,4.9
+				c-8.1,2.8-14,12.3-14,23.5V59c-2.2,0-4,1.8-4,4s1.8,4,4,4v0h0.1h37.8h0.1v0c2.2,0,4-1.8,4-4S70.4,59.1,68.2,59z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/public/img/icons_light_theme/icon_alerting_active.svg b/public/img/icons_light_theme/icon_alerting_active.svg
new file mode 100644
index 00000000000..6e6f11b5843
--- /dev/null
+++ b/public/img/icons_light_theme/icon_alerting_active.svg
@@ -0,0 +1,43 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FBB017"/>
+			<stop  offset="1" style="stop-color:#EF4E28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.4,49.5c0-24.4-19.9-44.3-44.3-44.3S5.8,25.1,5.8,49.5s19.9,44.3,44.3,44.3S94.4,73.9,94.4,49.5z"/>
+	<g>
+		<g>
+			<g>
+				<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.3811" y1="132.2195" x2="49.3811" y2="36.6876">
+					<stop  offset="0" style="stop-color:#FBB017"/>
+					<stop  offset="1" style="stop-color:#EF4E28"/>
+				</linearGradient>
+				<path class="st2" d="M49.4,77.3c4,0,7.3-3.3,7.3-7.3H42.1C42.1,74.1,45.4,77.3,49.4,77.3z"/>
+			</g>
+		</g>
+		<g>
+			<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="49.3811" y1="132.2195" x2="49.3811" y2="36.6876">
+				<stop  offset="0" style="stop-color:#FBB017"/>
+				<stop  offset="1" style="stop-color:#EF4E28"/>
+			</linearGradient>
+			<path class="st3" d="M68.3,58.6v-9.2c0-11.3-5.9-20.8-14-23.5c0-2.7-2.2-4.9-4.9-4.9c-2.7,0-4.9,2.2-4.9,4.9
+				c-8.1,2.8-14,12.3-14,23.5v9.2c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4v0h0.1h37.8h0.1v0c2.2,0,4-1.8,4-4
+				C72.3,60.4,70.5,58.6,68.3,58.6z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/public/img/icons_light_theme/icon_query.svg b/public/img/icons_light_theme/icon_query.svg
new file mode 100644
index 00000000000..fcb369e7da1
--- /dev/null
+++ b/public/img/icons_light_theme/icon_query.svg
@@ -0,0 +1,25 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#52545c;}
+</style>
+<g>
+	<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z M49.1,73.7
+		c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3s20.9-3.4,25.3-8.3c0.2,0.6,0.4,1.3,0.4,2
+		C74.8,68,63.1,73.7,49.1,73.7z M49.1,62.5c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3
+		s20.9-3.4,25.3-8.3c0.2,0.6,0.4,1.3,0.4,2C74.8,56.9,63.1,62.5,49.1,62.5z M49.1,51.3c-13.9,0-25.7-5.6-25.7-12.3
+		c0-6.7,11.8-12.3,25.7-12.3S74.8,32.4,74.8,39C74.8,45.7,63.1,51.3,49.1,51.3z"/>
+	<path class="st1" d="M49.1,67.7c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3S74.8,68,74.8,61.4
+		c0-0.7-0.1-1.3-0.4-2C70.1,64.4,60.5,67.7,49.1,67.7z"/>
+	<path class="st1" d="M49.1,56.5c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3s25.7-5.6,25.7-12.3
+		c0-0.7-0.1-1.3-0.4-2C70.1,53.2,60.5,56.5,49.1,56.5z"/>
+	<path class="st1" d="M49.1,26.7c-13.9,0-25.7,5.6-25.7,12.3c0,6.7,11.8,12.3,25.7,12.3S74.8,45.7,74.8,39
+		C74.8,32.4,63.1,26.7,49.1,26.7z"/>
+	<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+		S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+</g>
+</svg>
diff --git a/public/img/icons_light_theme/icon_query_active.svg b/public/img/icons_light_theme/icon_query_active.svg
new file mode 100644
index 00000000000..eef8e6a9ab7
--- /dev/null
+++ b/public/img/icons_light_theme/icon_query_active.svg
@@ -0,0 +1,46 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+	.st4{fill:url(#SVGID_4_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FBB017"/>
+			<stop  offset="1" style="stop-color:#EF4E28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.4,50c0-24.4-19.9-44.3-44.3-44.3S5.9,25.6,5.9,50s19.9,44.3,44.3,44.3S94.4,74.4,94.4,50z M49.3,73.7
+		c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3s20.9-3.4,25.3-8.3c0.2,0.6,0.4,1.3,0.4,2
+		C75,68,63.2,73.7,49.3,73.7z M49.3,62.5c-13.9,0-25.7-5.6-25.7-12.3c0-0.7,0.1-1.3,0.4-2c4.4,5,14,8.3,25.3,8.3s20.9-3.4,25.3-8.3
+		c0.2,0.6,0.4,1.3,0.4,2C75,56.9,63.2,62.5,49.3,62.5z M49.3,51.3c-13.9,0-25.7-5.6-25.7-12.3c0-6.7,11.8-12.3,25.7-12.3
+		S75,32.4,75,39C75,45.7,63.2,51.3,49.3,51.3z"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="49.2981" y1="130.777" x2="49.2981" y2="18.669">
+		<stop  offset="0" style="stop-color:#FBB017"/>
+		<stop  offset="1" style="stop-color:#EF4E28"/>
+	</linearGradient>
+	<path class="st2" d="M49.3,67.7c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3S75,68,75,61.4
+		c0-0.7-0.1-1.3-0.4-2C70.2,64.4,60.7,67.7,49.3,67.7z"/>
+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="49.2981" y1="130.7753" x2="49.2981" y2="18.6673">
+		<stop  offset="0" style="stop-color:#FBB017"/>
+		<stop  offset="1" style="stop-color:#EF4E28"/>
+	</linearGradient>
+	<path class="st3" d="M49.3,56.5c-11.4,0-20.9-3.4-25.3-8.3c-0.2,0.6-0.4,1.3-0.4,2c0,6.7,11.8,12.3,25.7,12.3S75,56.9,75,50.2
+		c0-0.7-0.1-1.3-0.4-2C70.2,53.2,60.7,56.5,49.3,56.5z"/>
+	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="49.2981" y1="130.7753" x2="49.2981" y2="18.6673">
+		<stop  offset="0" style="stop-color:#FBB017"/>
+		<stop  offset="1" style="stop-color:#EF4E28"/>
+	</linearGradient>
+	<path class="st4" d="M49.3,26.7c-13.9,0-25.7,5.6-25.7,12.3c0,6.7,11.8,12.3,25.7,12.3S75,45.7,75,39C75,32.4,63.2,26.7,49.3,26.7z
+		"/>
+</g>
+</svg>
diff --git a/public/img/icons_light_theme/icon_visualize.svg b/public/img/icons_light_theme/icon_visualize.svg
new file mode 100644
index 00000000000..8ddef23864d
--- /dev/null
+++ b/public/img/icons_light_theme/icon_visualize.svg
@@ -0,0 +1,22 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#52545c;}
+</style>
+<g>
+	<path class="st0" d="M94.3,50C94.3,25.6,74.4,5.7,50,5.7S5.7,25.6,5.7,50S25.6,94.3,50,94.3S94.3,74.4,94.3,50z"/>
+	<path class="st1" d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50c27.6,0,50-22.4,50-50S77.6,0,50,0z M5.7,50C5.7,25.6,25.6,5.7,50,5.7
+		S94.3,25.6,94.3,50S74.4,94.3,50,94.3S5.7,74.4,5.7,50z"/>
+	<g>
+		<path class="st1" d="M78,65.8H25.6V30.4c0-1.5-1.2-2.8-2.8-2.8c-1.5,0-2.8,1.2-2.8,2.8v38.1c0,1.5,1.2,2.8,2.8,2.8H78
+			c1.5,0,2.8-1.2,2.8-2.8C80.7,67.1,79.5,65.8,78,65.8z"/>
+		<g>
+			<polygon class="st1" points="77.9,63.1 78.2,49 63.1,28.3 47.2,49.5 36,38.7 28.3,43.1 28.3,63.1 			"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/public/img/icons_light_theme/icon_visualize_active.svg b/public/img/icons_light_theme/icon_visualize_active.svg
new file mode 100644
index 00000000000..c9a14925d97
--- /dev/null
+++ b/public/img/icons_light_theme/icon_visualize_active.svg
@@ -0,0 +1,38 @@
+<?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="121px" height="100px" viewBox="0 0 121 100" style="enable-background:new 0 0 121 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:url(#SVGID_2_);}
+	.st3{fill:url(#SVGID_3_);}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="60.5" y1="130.7753" x2="60.5" y2="18.6673">
+			<stop  offset="0" style="stop-color:#FBB017"/>
+			<stop  offset="1" style="stop-color:#EF4E28"/>
+		</linearGradient>
+		<path class="st0" d="M120.8,50L87.2,16.4C78.1,6.3,64.9,0,50.2,0c-27.6,0-50,22.4-50,50s22.4,50,50,50c14.4,0,27.5-6.1,36.6-15.9
+			c0.1-0.1,0.1-0.1,0.2-0.2L120.8,50z"/>
+	</g>
+	<path class="st1" d="M94.1,50c0-24.4-19.9-44.3-44.3-44.3S5.6,25.6,5.6,50s19.9,44.3,44.3,44.3S94.1,74.4,94.1,50z"/>
+	<g>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="50.2576" y1="115.6711" x2="50.2576" y2="19.8747">
+			<stop  offset="0" style="stop-color:#FBB017"/>
+			<stop  offset="1" style="stop-color:#EF4E28"/>
+		</linearGradient>
+		<path class="st2" d="M77.8,65.9H25.4V30.5c0-1.5-1.2-2.8-2.8-2.8c-1.5,0-2.8,1.2-2.8,2.8v38.1c0,1.5,1.2,2.8,2.8,2.8h55.2
+			c1.5,0,2.8-1.2,2.8-2.8S79.4,65.9,77.8,65.9z"/>
+		<g>
+			<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="53.116" y1="115.6711" x2="53.116" y2="19.8747">
+				<stop  offset="0" style="stop-color:#FBB017"/>
+				<stop  offset="1" style="stop-color:#EF4E28"/>
+			</linearGradient>
+			<polygon class="st3" points="77.7,63.1 78,49 62.9,28.3 47.1,49.5 35.8,38.7 28.2,43.1 28.2,63.1 			"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/public/img/panel-tabs/alert-selected.svg b/public/img/panel-tabs/alert-selected.svg
new file mode 100644
index 00000000000..482b3c16e73
--- /dev/null
+++ b/public/img/panel-tabs/alert-selected.svg
@@ -0,0 +1,9 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="22" cy="22" r="20" fill="#09090B" stroke="#8E8E8E" stroke-width="4"/>
+<line x1="12.5925" y1="28.1482" x2="31.4073" y2="28.1482" stroke="#8E8E8E" stroke-width="4" stroke-linecap="round"/>
+<ellipse cx="22.0001" cy="20.3704" rx="8.96296" ry="9.77778" fill="#8E8E8E"/>
+<circle cx="22.0001" cy="30.1482" r="2.44444" fill="#8E8E8E"/>
+<line x1="18.7407" y1="30.463" x2="25.2592" y2="30.463" stroke="#09090B"/>
+<rect x="13.0371" y="20.3704" width="17.9259" height="6.51852" fill="#8E8E8E"/>
+<ellipse cx="22.0001" cy="11.0001" rx="0.814815" ry="1.22222" fill="#8E8E8E"/>
+</svg>
diff --git a/public/img/panel-tabs/alert.svg b/public/img/panel-tabs/alert.svg
new file mode 100644
index 00000000000..482b3c16e73
--- /dev/null
+++ b/public/img/panel-tabs/alert.svg
@@ -0,0 +1,9 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="22" cy="22" r="20" fill="#09090B" stroke="#8E8E8E" stroke-width="4"/>
+<line x1="12.5925" y1="28.1482" x2="31.4073" y2="28.1482" stroke="#8E8E8E" stroke-width="4" stroke-linecap="round"/>
+<ellipse cx="22.0001" cy="20.3704" rx="8.96296" ry="9.77778" fill="#8E8E8E"/>
+<circle cx="22.0001" cy="30.1482" r="2.44444" fill="#8E8E8E"/>
+<line x1="18.7407" y1="30.463" x2="25.2592" y2="30.463" stroke="#09090B"/>
+<rect x="13.0371" y="20.3704" width="17.9259" height="6.51852" fill="#8E8E8E"/>
+<ellipse cx="22.0001" cy="11.0001" rx="0.814815" ry="1.22222" fill="#8E8E8E"/>
+</svg>
diff --git a/public/img/panel-tabs/general-selected.svg b/public/img/panel-tabs/general-selected.svg
new file mode 100644
index 00000000000..d200bbc367b
--- /dev/null
+++ b/public/img/panel-tabs/general-selected.svg
@@ -0,0 +1,31 @@
+<svg width="65" height="54" viewBox="0 0 65 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="27" cy="27" r="25" fill="#09090B" stroke="url(#paint0_linear)" stroke-width="4"/>
+<ellipse cx="27" cy="33" rx="14" ry="6" fill="url(#paint1_linear)"/>
+<ellipse cx="27" cy="30" rx="14" ry="6" fill="#09090B"/>
+<ellipse cx="27" cy="27" rx="14" ry="6" fill="url(#paint2_linear)"/>
+<ellipse cx="27" cy="24" rx="14" ry="6" fill="#09090B"/>
+<ellipse cx="27" cy="21" rx="14" ry="6" fill="url(#paint3_linear)"/>
+<path d="M52 37L65 26.9999L52 17L52 37Z" fill="url(#paint4_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="27" y1="0" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#EB7B18"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="27" y1="2.01165e-07" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#FEBC11"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="27" y1="1.40816e-06" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#FEBC11"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="27" y1="-6.03497e-07" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#FEBC11"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="57" y1="54" x2="57" y2="7.55191e-06" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EB7B18"/>
+<stop offset="1" stop-color="#D44A3A"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/img/panel-tabs/general.svg b/public/img/panel-tabs/general.svg
new file mode 100644
index 00000000000..994b8512bc9
--- /dev/null
+++ b/public/img/panel-tabs/general.svg
@@ -0,0 +1,8 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="22" cy="22" r="20" fill="#09090B" stroke="#8E8E8E" stroke-width="4"/>
+<ellipse cx="21.9999" cy="26.8889" rx="11.4074" ry="4.88889" fill="#8E8E8E"/>
+<ellipse cx="21.9999" cy="24.4444" rx="11.4074" ry="4.88889" fill="#09090B"/>
+<ellipse cx="21.9999" cy="22" rx="11.4074" ry="4.88889" fill="#8E8E8E"/>
+<ellipse cx="21.9999" cy="19.5555" rx="11.4074" ry="4.88889" fill="#09090B"/>
+<ellipse cx="21.9999" cy="17.1111" rx="11.4074" ry="4.88889" fill="#8E8E8E"/>
+</svg>
diff --git a/public/img/panel-tabs/queries-selected.svg b/public/img/panel-tabs/queries-selected.svg
new file mode 100644
index 00000000000..d200bbc367b
--- /dev/null
+++ b/public/img/panel-tabs/queries-selected.svg
@@ -0,0 +1,31 @@
+<svg width="65" height="54" viewBox="0 0 65 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="27" cy="27" r="25" fill="#09090B" stroke="url(#paint0_linear)" stroke-width="4"/>
+<ellipse cx="27" cy="33" rx="14" ry="6" fill="url(#paint1_linear)"/>
+<ellipse cx="27" cy="30" rx="14" ry="6" fill="#09090B"/>
+<ellipse cx="27" cy="27" rx="14" ry="6" fill="url(#paint2_linear)"/>
+<ellipse cx="27" cy="24" rx="14" ry="6" fill="#09090B"/>
+<ellipse cx="27" cy="21" rx="14" ry="6" fill="url(#paint3_linear)"/>
+<path d="M52 37L65 26.9999L52 17L52 37Z" fill="url(#paint4_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="27" y1="0" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#EB7B18"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="27" y1="2.01165e-07" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#FEBC11"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="27" y1="1.40816e-06" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#FEBC11"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="27" y1="-6.03497e-07" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#FEBC11"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="57" y1="54" x2="57" y2="7.55191e-06" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EB7B18"/>
+<stop offset="1" stop-color="#D44A3A"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/img/panel-tabs/queries.svg b/public/img/panel-tabs/queries.svg
new file mode 100644
index 00000000000..994b8512bc9
--- /dev/null
+++ b/public/img/panel-tabs/queries.svg
@@ -0,0 +1,8 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="22" cy="22" r="20" fill="#09090B" stroke="#8E8E8E" stroke-width="4"/>
+<ellipse cx="21.9999" cy="26.8889" rx="11.4074" ry="4.88889" fill="#8E8E8E"/>
+<ellipse cx="21.9999" cy="24.4444" rx="11.4074" ry="4.88889" fill="#09090B"/>
+<ellipse cx="21.9999" cy="22" rx="11.4074" ry="4.88889" fill="#8E8E8E"/>
+<ellipse cx="21.9999" cy="19.5555" rx="11.4074" ry="4.88889" fill="#09090B"/>
+<ellipse cx="21.9999" cy="17.1111" rx="11.4074" ry="4.88889" fill="#8E8E8E"/>
+</svg>
diff --git a/public/img/panel-tabs/visualization-selected.svg b/public/img/panel-tabs/visualization-selected.svg
new file mode 100644
index 00000000000..b7b5fd96aed
--- /dev/null
+++ b/public/img/panel-tabs/visualization-selected.svg
@@ -0,0 +1,34 @@
+<svg width="65" height="54" viewBox="0 0 65 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="27" cy="27" r="25" fill="#09090B" stroke="url(#paint0_linear)" stroke-width="4"/>
+<path d="M39 21L35 17H39V21Z" fill="url(#paint1_linear)"/>
+<line x1="14" y1="15" x2="14" y2="39" stroke="url(#paint2_linear)" stroke-width="2"/>
+<line x1="41" y1="38" x2="14" y2="38" stroke="url(#paint3_linear)" stroke-width="2"/>
+<path d="M37 19L28 27L25 24L16 33" stroke="url(#paint4_linear)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M52 37L65 26.9999L52 17L52 37Z" fill="url(#paint5_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="27" y1="0" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#EB7B18"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="37" y1="-9.62518e-07" x2="37" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#EB7B18"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="13" y1="53.5" x2="13" y2="1.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EB7B18"/>
+<stop offset="1" stop-color="#D44A3A"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="27" y1="7.21113e-07" x2="27.5" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#EB7B18"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="27" y1="-4.4462e-08" x2="27" y2="54" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D44A3A"/>
+<stop offset="1" stop-color="#EB7B18"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="57" y1="54" x2="57" y2="7.55191e-06" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EB7B18"/>
+<stop offset="1" stop-color="#D44A3A"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/img/panel-tabs/visualization.svg b/public/img/panel-tabs/visualization.svg
new file mode 100644
index 00000000000..d2cdd81401f
--- /dev/null
+++ b/public/img/panel-tabs/visualization.svg
@@ -0,0 +1,7 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="22" cy="22" r="20" fill="#09090B" stroke="#8E8E8E" stroke-width="4"/>
+<path d="M31.7778 17.1111L28.5186 13.8518H31.7778V17.1111Z" fill="#8E8E8E"/>
+<line x1="11" y1="12" x2="11" y2="32" stroke="#8E8E8E" stroke-width="2"/>
+<line x1="33" y1="31" x2="11" y2="31" stroke="#8E8E8E" stroke-width="2"/>
+<path d="M30.1482 15.4814L22.8149 22L20.3704 19.5555L13.0371 26.8889" stroke="#8E8E8E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index dac8efcccf0..bc6b024f643 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -96,13 +96,15 @@
 @import 'components/empty_list_cta';
 @import 'components/popper';
 @import 'components/form_select_box';
-@import 'components/user-picker';
-@import 'components/description-picker';
-@import 'components/viz_editor';
+@import 'components/panel_editor';
+@import 'components/toolbar';
 @import 'components/delete_button';
 @import 'components/add_data_source.scss';
 @import 'components/page_loader';
+@import 'components/thresholds';
 @import 'components/toggle_button_group';
+@import 'components/value-mappings';
+@import 'components/popover-box';
 
 // PAGES
 @import 'pages/login';
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index f38349f48f4..70db51a0fb2 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -78,7 +78,9 @@ $brand-gradient: linear-gradient(
   rgba(255, 68, 0, 0.7) 99%,
   rgba(255, 68, 0, 0.7) 100%
 );
+
 $page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px);
+$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909);
 
 // Links
 // -------------------------
@@ -93,7 +95,7 @@ $headings-color: darken($white, 11%);
 $abbr-border-color: $gray-3 !default;
 $text-muted: $text-color-weak;
 
-$hr-border-color: rgba(0, 0, 0, 0.1) !default;
+$hr-border-color: $dark-4;
 
 // Panel
 // -------------------------
@@ -111,7 +113,6 @@ $divider-border-color: #555;
 
 // Graphite Target Editor
 $tight-form-bg: $dark-3;
-
 $tight-form-func-bg: #333334;
 $tight-form-func-highlight-bg: #444445;
 
@@ -129,6 +130,7 @@ $list-item-bg: $card-background;
 $list-item-hover-bg: lighten($gray-blue, 2%);
 $list-item-link-color: $text-color;
 $list-item-shadow: $card-shadow;
+
 $empty-list-cta-bg: $gray-blue;
 
 // Scrollbars
@@ -153,8 +155,8 @@ $table-bg-hover: $dark-3;
 $btn-primary-bg: #ff6600;
 $btn-primary-bg-hl: #bc3e06;
 
-$btn-secondary-bg: $blue-dark;
 $btn-secondary-bg-hl: lighten($blue-dark, 5%);
+$btn-secondary-bg: $blue-dark;
 
 $btn-success-bg: $green;
 $btn-success-bg-hl: darken($green, 6%);
@@ -235,6 +237,7 @@ $horizontalComponentOffset: 180px;
 // -------------------------
 
 $navbarHeight: 55px;
+
 $navbarBackground: $panel-bg;
 $navbarBorder: 1px solid $dark-3;
 $navbarShadow: 0 0 20px black;
@@ -267,6 +270,9 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $black;
 // -------------------------
 $tab-border-color: $dark-4;
 
+// Toolbar
+$toolbar-bg: $input-black;
+
 // Pagination
 // -------------------------
 
@@ -351,5 +357,50 @@ $diff-json-icon: $gray-7;
 //Submenu
 $variable-option-bg: $blue-dark;
 
+//Switch Slider
+// -------------------------
+$switch-bg: $input-bg;
+$switch-slider-color: $dark-2;
+$switch-slider-off-bg: $gray-1;
+$switch-slider-on-bg: linear-gradient(90deg, $orange, $red);
+$switch-slider-shadow: 0 0 3px black;
+
+//Checkbox
+// -------------------------
+$checkbox-bg: $dark-1;
+$checkbox-border: 1px solid $gray-1;
+$checkbox-checked-bg: linear-gradient(0deg, $orange, $red);
+$checkbox-color: $dark-1;
+
+//Panel Edit
+// -------------------------
+$panel-editor-shadow: 0 0 20px black;
+$panel-editor-border: 1px solid $dark-3;
+$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
+$panel-editor-toolbar-view-bg: $input-black;
+$panel-editor-viz-item-shadow: 0 0 8px $dark-5;
+$panel-editor-viz-item-border: 1px solid $dark-5;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $blue;
+$panel-editor-viz-item-border-hover: 1px solid $blue;
+$panel-editor-viz-item-bg: $input-black;
+$panel-editor-tabs-line-color: #e3e3e3;
+$panel-editor-viz-item-bg-hover: darken($blue, 47%);
+$panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
+
+$panel-option-section-border: 1px solid $dark-3;
+$panel-option-section-header-bg: linear-gradient(0deg, $gray-blue, $dark-1);
+
+$panel-grid-placeholder-bg: darken($blue, 47%);
+$panel-grid-placeholder-shadow: 0 0 4px $blue;
+
 // logs
 $logs-color-unkown: $gray-2;
+
+// toggle-group
+$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red);
+$button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
+$button-toggle-group-btn-seperator-border: 1px solid $page-bg;
+
+$vertical-resize-handle-bg: $dark-5;
+$vertical-resize-handle-dots: $gray-1;
+$vertical-resize-handle-dots-hover: $gray-2;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index d76cfce85af..6afd087a849 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -31,6 +31,7 @@ $white: #fff;
 // Accent colors
 // -------------------------
 $blue: #0083b3;
+$blue-dark: #005f81;
 $blue-light: #00a8e6;
 $green: #3aa655;
 $red: #d44939;
@@ -76,6 +77,8 @@ $textShadow: none;
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
 $page-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
+//$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px);
+$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
 
 // Links
 // -------------------------
@@ -214,6 +217,9 @@ $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1;
 // -------------------------
 $tab-border-color: $gray-5;
 
+// Toolbar
+$toolbar-bg: white;
+
 // search
 $search-shadow: 0 5px 30px 0 $gray-4;
 $search-filter-box-bg: $gray-7;
@@ -360,5 +366,50 @@ $diff-json-icon: $gray-4;
 //Submenu
 $variable-option-bg: $blue-light;
 
+//Switch Slider
+// -------------------------
+$switch-bg: $white;
+$switch-slider-color: $gray-7;
+$switch-slider-off-bg: $gray-5;
+$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red);
+$switch-slider-shadow: 0 0 3px $dark-5;
+
+//Checkbox
+// -------------------------
+$checkbox-bg: $gray-6;
+$checkbox-border: 1px solid $gray-3;
+$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red);
+$checkbox-color: $gray-7;
+
+//Panel Edit
+// -------------------------
+$panel-editor-shadow: 0px 0px 8px $gray-3;
+$panel-editor-border: 1px solid $dark-4;
+$panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
+$panel-editor-toolbar-view-bg: $white;
+$panel-editor-viz-item-shadow: 0 0 4px $gray-3;
+$panel-editor-viz-item-border: 1px solid $gray-3;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
+$panel-editor-viz-item-border-hover: 1px solid $blue-light;
+$panel-editor-viz-item-bg: $white;
+$panel-editor-tabs-line-color: $dark-5;
+$panel-editor-viz-item-bg-hover: lighten($blue, 62%);
+$panel-editor-viz-item-bg-hover-active: lighten($orange, 34%);
+
+$panel-option-section-border: 1px solid $gray-6;
+$panel-option-section-header-bg: linear-gradient(0deg, $gray-6, $gray-7);
+
+$panel-grid-placeholder-bg: lighten($blue, 62%);
+$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
+
 // logs
 $logs-color-unkown: $gray-5;
+
+// toggle-group
+$button-toggle-group-btn-active-bg: $brand-primary;
+$button-toggle-group-btn-active-shadow: inset 0 0 4px $white;
+$button-toggle-group-btn-seperator-border: 1px solid $gray-6;
+
+$vertical-resize-handle-bg: $gray-4;
+$vertical-resize-handle-dots: $gray-3;
+$vertical-resize-handle-dots-hover: $gray-2;
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss
index 841f06156ac..111ee870658 100644
--- a/public/sass/_variables.scss
+++ b/public/sass/_variables.scss
@@ -138,6 +138,7 @@ $input-padding-y-lg: 10px !default;
 $input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
 
 $gf-form-margin: 0.2rem;
+$gf-form-input-height: 35px;
 
 $cursor-disabled: not-allowed !default;
 
diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss
index bf66d4dc68d..3105e98fe35 100644
--- a/public/sass/base/_icons.scss
+++ b/public/sass/base/_icons.scss
@@ -211,3 +211,37 @@
   min-width: 20px;
   padding-right: 5px;
 }
+
+.panel-editor-tabs {
+  .gicon-advanced-active {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_advanced_active.svg');
+  }
+
+  .gicon-advanced {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_advanced.svg');
+  }
+
+  .gicon-alert-active {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_alerting_active.svg');
+  }
+
+  .gicon-alert {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_alerting.svg');
+  }
+
+  .gicon-queries-active {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_query_active.svg');
+  }
+
+  .gicon-queries {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_query.svg');
+  }
+
+  .gicon-visualization-active {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_visualize_active.svg');
+  }
+
+  .gicon-visualization {
+    background-image: url('../img/icons_#{$theme-name}_theme/icon_visualize.svg');
+  }
+}
diff --git a/public/sass/base/_reboot.scss b/public/sass/base/_reboot.scss
index e34bdfdb9ed..8aac8bc815e 100644
--- a/public/sass/base/_reboot.scss
+++ b/public/sass/base/_reboot.scss
@@ -87,7 +87,7 @@ body {
 // might still respond to pointer events.
 //
 // Credit: https://github.com/suitcss/base
-[tabindex="-1"]:focus {
+[tabindex='-1']:focus {
   outline: none !important;
 }
 
@@ -171,7 +171,7 @@ a {
   }
 
   &:focus {
-    @include tab-focus();
+    @include no-focus();
   }
 }
 
@@ -214,7 +214,7 @@ img {
 // for traditionally non-focusable elements with role="button"
 // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
-[role="button"] {
+[role='button'] {
   cursor: pointer;
 }
 
@@ -231,7 +231,7 @@ img {
 a,
 area,
 button,
-[role="button"],
+[role='button'],
 input,
 label,
 select,
@@ -320,7 +320,7 @@ legend {
   //  border: 0;
 }
 
-input[type="search"] {
+input[type='search'] {
   // This overrides the extra rounded corners on search inputs in iOS so that our
   // `.form-control` class can properly style them. Note that this cannot simply
   // be added to `.form-control` as it's not specific enough. For details, see
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index 916c141a5ec..4e032d7b9d1 100644
--- a/public/sass/components/_buttons.scss
+++ b/public/sass/components/_buttons.scss
@@ -23,7 +23,7 @@
   &.active {
     &:focus,
     &.focus {
-      @include tab-focus();
+      @include no-focus();
     }
   }
 
@@ -78,6 +78,7 @@
 
 .btn-link {
   color: $btn-link-color;
+  background: transparent;
 }
 
 // Set the backgrounds
@@ -120,8 +121,8 @@
 // Info appears as a neutral blue
 .btn-secondary {
   @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
+  // Inverse appears as dark gray
 }
-// Inverse appears as dark gray
 .btn-inverse {
   @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
   //background: $card-background;
@@ -172,6 +173,12 @@
   padding-right: 20px;
 }
 
+// No horizontal padding
+.btn-p-x-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 // External services
 // Usage:
 // <div class="btn btn-service btn-service--facebook">Button text</div>
diff --git a/public/sass/components/_code_editor.scss b/public/sass/components/_code_editor.scss
index 79203e7898c..4f50495789d 100644
--- a/public/sass/components/_code_editor.scss
+++ b/public/sass/components/_code_editor.scss
@@ -12,6 +12,10 @@
     @include border-radius($input-border-radius-sm);
     border: $input-btn-border-width solid $input-border-color;
   }
+
+  .ace_content {
+    z-index: 0;
+  }
 }
 
 .ace_editor.ace_autocomplete {
diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss
index da1f140d252..eeb01c86ab9 100644
--- a/public/sass/components/_dashboard_grid.scss
+++ b/public/sass/components/_dashboard_grid.scss
@@ -6,17 +6,23 @@
     height: 100% !important;
   }
 
+  .dashboard-container--has-submenu {
+    .react-grid-layout {
+      height: calc(100% - 50px) !important;
+    }
+  }
+
   .react-grid-item {
     display: none !important;
     transition-property: none !important;
-  }
 
-  .panel--fullscreen {
-    display: block !important;
-    position: unset !important;
-    width: 100% !important;
-    height: 100% !important;
-    transform: translate(0px, 0px) !important;
+    &--fullscreen {
+      display: block !important;
+      position: unset !important;
+      width: 100% !important;
+      height: 100% !important;
+      transform: translate(0px, 0px) !important;
+    }
   }
 
   // Disable grid interaction indicators in fullscreen panels
@@ -44,12 +50,8 @@
   }
 
   .react-grid-item {
-    display: none;
-    transition-property: none !important;
-  }
-
-  .panel {
     display: block !important;
+    transition-property: none !important;
     position: unset !important;
     width: 100% !important;
     transform: translate(0px, 0px) !important;
@@ -57,6 +59,13 @@
   }
 }
 
+.react-grid-item.react-grid-placeholder {
+  box-shadow: $panel-grid-placeholder-shadow;
+  background: $panel-grid-placeholder-bg;
+  z-index: 0;
+  opacity: unset;
+}
+
 .theme-dark {
   .react-grid-item > .react-resizable-handle::after {
     border-right: 2px solid $gray-1;
@@ -79,10 +88,10 @@
 }
 
 // Disable animation on initial rendering and enable it when component has been mounted.
-.react-grid-item.cssTransforms.panel {
+.react-grid-item.cssTransforms {
   transition-property: none;
 }
 
-.animated .react-grid-item.cssTransforms.panel {
+.animated .react-grid-item.cssTransforms {
   transition-property: transform;
 }
diff --git a/public/sass/components/_dashboard_list.scss b/public/sass/components/_dashboard_list.scss
index 51603862db7..03b0e58dd4e 100644
--- a/public/sass/components/_dashboard_list.scss
+++ b/public/sass/components/_dashboard_list.scss
@@ -12,6 +12,7 @@
   height: 35px;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 
   .gf-form-button-row {
     padding-top: 0;
diff --git a/public/sass/components/_description-picker.scss b/public/sass/components/_description-picker.scss
deleted file mode 100644
index 30ca80cf18d..00000000000
--- a/public/sass/components/_description-picker.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.description-picker-option__button {
-  position: relative;
-  text-align: left;
-  width: 100%;
-  display: block;
-  border-radius: 0;
-  white-space: normal;
-  i.fa-check {
-    padding-left: 2px;
-  }
-}
diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index 166baeb2f8f..a83ca95d038 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -47,28 +47,43 @@ $select-input-bg-disabled: $input-bg-disabled;
 
 .gf-form-select-box__input {
   padding-left: 5px;
+  input {
+    line-height: inherit;
+  }
 }
 
 .gf-form-select-box__menu {
-  background: $dropdownBackground;
+  background: $input-bg;
+  box-shadow: $menu-dropdown-shadow;
   position: absolute;
-  z-index: 2;
+  z-index: $zindex-dropdown;
+  min-width: 100%;
+}
+
+.gf-form-select-box__menu-list {
+  overflow-y: auto;
+  max-height: 300px;
 }
 
 .tag-filter .gf-form-select-box__menu {
   width: 100%;
 }
 
+/* .gf-form-select-box__single-value { */
+/* } */
+
 .gf-form-select-box__multi-value {
   display: inline;
 }
 
 .gf-form-select-box__option {
   border-left: 2px solid transparent;
+  white-space: nowrap;
+  background-color: $input-bg;
 
   &.gf-form-select-box__option--is-focused {
     color: $dropdownLinkColorHover;
-    background-color: $dropdownLinkBackgroundHover;
+    background: $menu-dropdown-hover-bg;
     @include left-brand-border-gradient();
   }
 
@@ -85,7 +100,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 
 .gf-form-select-box__value-container {
   display: table-cell;
-  padding: 8px 10px;
+  padding: 6px 10px;
   > div {
     display: inline-block;
   }
@@ -102,7 +117,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 .gf-form-select-box__select-arrow {
   border-color: $input-color-select-arrow transparent transparent;
   border-style: solid;
-  border-width: 5px 5px 2.5px;
+  border-width: 4px 4px 2.5px;
   display: inline-block;
   height: 0;
   width: 0;
@@ -111,13 +126,15 @@ $select-input-bg-disabled: $input-bg-disabled;
   &.gf-form-select-box__select-arrow--reversed {
     border-color: transparent transparent $input-color-select-arrow;
     top: -2px;
-    border-width: 0 5px 5px;
+    border-width: 0 4px 4px;
   }
 }
+
 .gf-form-input--form-dropdown {
   padding: 0;
   border: 0;
   overflow: visible;
+  position: relative;
 }
 
 .gf-form--has-input-icon {
@@ -125,3 +142,48 @@ $select-input-bg-disabled: $input-bg-disabled;
     padding-left: 30px;
   }
 }
+
+.gf-form-select-box__desc-option {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  justify-items: center;
+  cursor: pointer;
+  padding: 7px 10px;
+  width: 100%;
+}
+
+.gf-form-select-box__desc-option__body {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding-right: 10px;
+  font-weight: 500;
+}
+
+.gf-form-select-box__desc-option__desc {
+  font-weight: normal;
+  font-size: $font-size-sm;
+  color: $text-muted;
+}
+
+.gf-form-select-box__desc-option__img {
+  width: 16px;
+  margin-right: 10px;
+}
+
+.gf-form-select-box__option-group__header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  justify-items: center;
+  cursor: pointer;
+  padding: 7px 10px;
+  width: 100%;
+  border-bottom: 1px solid $hr-border-color;
+  text-transform: capitalize;
+
+  .fa {
+    padding-right: 2px;
+  }
+}
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss
index e2d5296c3aa..e86b901bb79 100644
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@@ -102,6 +102,7 @@ $input-border: 1px solid $input-border-color;
 
   background-color: $input-label-bg;
   display: block;
+  height: $gf-form-input-height;
 
   border: $input-btn-border-width solid $input-label-border-color;
   border-right: none;
@@ -109,16 +110,26 @@ $input-border: 1px solid $input-border-color;
 
   &--grow {
     flex-grow: 1;
-    min-height: 2.6rem;
   }
 
   &--error {
     color: $critical;
   }
 
-  &--small {
-    padding: ($input-padding-y / 2) ($input-padding-x / 2);
-    font-size: $font-size-xs;
+  &--transparent {
+    background-color: transparent;
+    border: 0;
+    text-align: right;
+    padding-left: 0px;
+  }
+
+  &--btn {
+    border-right: $input-btn-border-width solid $input-label-border-color;
+    border-radius: $border-radius;
+
+    &:hover {
+      background: $list-item-hover-bg;
+    }
   }
 
   &:disabled {
@@ -140,19 +151,6 @@ $input-border: 1px solid $input-border-color;
   @include border-radius($label-border-radius-sm);
 }
 
-.gf-form-checkbox {
-  flex-shrink: 0;
-  padding: $input-padding-y $input-padding-x;
-  line-height: $input-line-height;
-
-  .checkbox-label {
-    display: inline;
-    cursor: pointer;
-    padding: $input-padding-y 0.4rem;
-    line-height: $input-line-height;
-  }
-}
-
 .gf-form-textarea {
   max-width: 650px;
 }
@@ -160,6 +158,7 @@ $input-border: 1px solid $input-border-color;
 .gf-form-input {
   display: block;
   width: 100%;
+  height: $gf-form-input-height;
   padding: $input-padding-y $input-padding-x;
   font-size: $font-size-md;
   line-height: $input-line-height;
@@ -178,6 +177,7 @@ $input-border: 1px solid $input-border-color;
   @at-root textarea#{&} {
     overflow: auto;
     white-space: pre-wrap;
+    height: auto;
   }
 
   // Unstyle the caret on `<select>`s in IE10+.
@@ -343,9 +343,6 @@ $input-border: 1px solid $input-border-color;
 .gf-form-dropdown-typeahead {
   margin-right: $gf-form-margin;
   position: relative;
-  background-color: $input-bg;
-  border: $input-border;
-  border-radius: $input-border-radius;
 
   &::after {
     position: absolute;
@@ -358,10 +355,6 @@ $input-border: 1px solid $input-border-color;
     pointer-events: none;
     font-size: 11px;
   }
-
-  .gf-form-input {
-    border: none;
-  }
 }
 
 .gf-form-help-icon {
@@ -413,7 +406,27 @@ select.gf-form-input ~ .gf-form-help-icon {
 }
 
 .cta-form__close {
+  background: transparent;
+  padding: 4px 8px 4px 9px;
+  border: none;
   position: absolute;
   right: 0;
-  top: 0;
+  top: -2px;
+  font-size: $font-size-md;
+
+  &:hover {
+    color: $text-color-strong;
+  }
+}
+
+.cta-form__bar {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  margin-bottom: 20px;
+}
+
+.cta-form__bar-header {
+  font-size: $font-size-h4;
+  padding-right: 20px;
 }
diff --git a/public/sass/components/_json_explorer.scss b/public/sass/components/_json_explorer.scss
index 2b1be8bd4f5..4c183c26b4e 100644
--- a/public/sass/components/_json_explorer.scss
+++ b/public/sass/components/_json_explorer.scss
@@ -21,10 +21,10 @@
         display: none;
       }
       &.json-formatter-object::after {
-        content: "No properties";
+        content: 'No properties';
       }
       &.json-formatter-array::after {
-        content: "[]";
+        content: '[]';
       }
     }
   }
@@ -33,7 +33,9 @@
     color: $json-explorer-string-color;
     white-space: normal;
     word-wrap: break-word;
+    word-break: break-all;
   }
+
   .json-formatter-number {
     color: $json-explorer-number-color;
   }
@@ -87,7 +89,7 @@
     &::after {
       display: inline-block;
       transition: transform $json-explorer-rotate-time ease-in;
-      content: "►";
+      content: '►';
     }
   }
 
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index fe4bd9e719e..b3733b694fc 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -3,7 +3,7 @@
   padding-left: 40px;
   z-index: $zindex-navbar-fixed;
   height: $navbarHeight;
-  padding-right: $spacer;
+  padding-right: 20px;
   display: flex;
   flex-grow: 1;
   border-bottom: 1px solid transparent;
@@ -41,7 +41,7 @@
 
 .panel-in-fullscreen {
   .navbar {
-    @include navbar-alt-look();
+    padding-left: 15px;
   }
 
   .navbar-button--add-panel,
@@ -98,7 +98,7 @@
 }
 
 .navbar-buttons {
-  height: $navbarHeight;
+  // height: $navbarHeight;
   display: flex;
   align-items: center;
   justify-content: flex-end;
diff --git a/public/sass/components/_panel_add_panel.scss b/public/sass/components/_panel_add_panel.scss
index 263b181262e..86921fb43f3 100644
--- a/public/sass/components/_panel_add_panel.scss
+++ b/public/sass/components/_panel_add_panel.scss
@@ -4,24 +4,26 @@
 
 .add-panel {
   height: 100%;
-
-  .baron__root {
-    height: calc(100% - 43px);
-  }
 }
 
 .add-panel__header {
+  top: 0;
+  position: absolute;
   padding: 0 15px;
   display: flex;
   align-items: center;
-  background: $page-header-bg;
-  box-shadow: $page-header-shadow;
-  border-bottom: 1px solid $page-header-border-color;
+  width: 100%;
+  cursor: move;
 
   .gicon {
     font-size: 30px;
     margin-right: $spacer;
   }
+
+  &:hover {
+    transition: background-color 0.1s ease-in-out;
+    background-color: $panel-header-hover-bg;
+  }
 }
 
 .add-panel__close {
@@ -32,68 +34,14 @@
   margin-right: -10px;
 }
 
-.add-panel__title {
-  font-size: $font-size-md;
-  margin-right: $spacer*2;
-}
-
-.add-panel__sub-title {
-  font-style: italic;
-  color: $text-muted;
-  position: relative;
-  top: 1px;
-}
-
-.add-panel__items {
-  padding: 3px 8px;
+.add-panel-btn-container {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  overflow: auto;
+  justify-content: center;
+  align-items: center;
   height: 100%;
-  align-content: flex-start;
-  justify-content: space-around;
-  position: relative;
-}
+  flex-direction: column;
 
-.add-panel__item {
-  background: $card-background;
-  box-shadow: $card-shadow;
-
-  border-radius: 3px;
-  padding: $spacer/3 $spacer;
-  width: 31%;
-  height: 60px;
-  text-align: center;
-  margin: $gf-form-margin;
-  cursor: pointer;
-
-  &.active,
-  &:hover {
-    background: $card-background-hover;
+  .btn {
+    margin-bottom: 10px;
   }
 }
-
-.add-panel__item-name {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  font-size: $font-size-sm;
-}
-
-.add-panel__item-img {
-  height: calc(100% - 15px);
-}
-
-.add-panel__searchbar {
-  width: 100%;
-  margin-bottom: 10px;
-  margin-top: 7px;
-}
-
-.add-panel__no-panels {
-  color: $text-color-weak;
-  font-style: italic;
-  width: 100%;
-  padding: 3px 8px;
-}
diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss
new file mode 100644
index 00000000000..871bc0a6747
--- /dev/null
+++ b/public/sass/components/_panel_editor.scss
@@ -0,0 +1,258 @@
+.panel-editor-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.panel-wrapper {
+  height: 100%;
+
+  &--edit {
+    height: 40%;
+    margin: 0 $dashboard-padding;
+  }
+
+  &--view {
+    flex: 1 1 0;
+    height: 80%;
+    margin: 0 $dashboard-padding;
+    padding-top: $dashboard-padding;
+  }
+}
+
+.panel-editor-container__editor {
+  margin-top: $panel-margin*2;
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 0;
+  position: relative;
+}
+
+.panel-editor__right {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  background: $input-bg;
+  margin: 0 20px 0 84px;
+  border-radius: 3px;
+  box-shadow: $panel-editor-shadow;
+}
+
+.panel-editor__close {
+  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl);
+  position: absolute;
+  left: 11px;
+  top: 5px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+
+  i {
+    flex-grow: 1;
+    text-align: center;
+    font-size: 20px;
+  }
+}
+
+.panel-editor__scroll {
+  flex-grow: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.panel-editor__content {
+  padding: 15px;
+}
+
+.panel-in-fullscreen {
+  .sidemenu {
+    display: none;
+  }
+
+  .dashboard-container {
+    padding: 0;
+  }
+
+  .submenu-controls {
+    padding: 0 $dashboard-padding $panel-margin $dashboard-padding;
+  }
+
+  .panel-editor-container__panel {
+    margin: 0 $dashboard-padding;
+  }
+}
+
+.panel-editor-container__resizer {
+  position: relative;
+  margin-top: -3px;
+}
+
+.panel-editor-resizer__handle {
+  position: relative;
+  display: block;
+  background: $vertical-resize-handle-bg;
+  width: 150px;
+  margin-left: -75px;
+  height: 6px;
+  cursor: ns-resize;
+  border-radius: 3px;
+  margin: 0 auto;
+
+  &::before {
+    content: ' ';
+    position: absolute;
+    left: 10px;
+    right: 10px;
+    top: 2px;
+    border-top: 2px dotted $vertical-resize-handle-dots;
+  }
+
+  &:hover::before {
+    border-color: $vertical-resize-handle-dots-hover;
+  }
+}
+
+.viz-picker {
+  padding: 0px 20px;
+  position: relative;
+}
+
+.viz-picker-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.viz-picker__item {
+  background: $panel-editor-viz-item-bg;
+  border: $panel-editor-viz-item-border;
+  border-radius: 3px;
+  height: 100px;
+  width: 145px;
+  flex-shrink: 0;
+  flex-direction: column;
+  text-align: center;
+  cursor: pointer;
+  display: flex;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 6px;
+  transition: transform 1 ease;
+
+  &--current {
+    box-shadow: 0 0 6px $orange;
+    border: 1px solid $orange;
+  }
+
+  &:hover {
+    box-shadow: $panel-editor-viz-item-shadow-hover;
+    background: $panel-editor-viz-item-bg-hover;
+    border: $panel-editor-viz-item-border-hover;
+  }
+}
+
+.viz-picker__item-name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: $font-size-sm;
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  height: 23px;
+  font-weight: 500;
+}
+
+.viz-picker__item-img {
+  height: 55px;
+}
+
+.panel-editor-tabs {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 44px;
+  left: 20px;
+  align-items: flex-start;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 10px;
+    bottom: 10px;
+    left: 21px;
+    width: 2px;
+    background: $panel-editor-tabs-line-color;
+  }
+}
+
+.panel-editor-tabs__item {
+  margin-bottom: 25px;
+  position: relative;
+  z-index: 1;
+  text-align: center;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.panel-editor-tabs__link {
+  display: inline-block;
+
+  &.active {
+    position: relative;
+  }
+
+  .gicon {
+    height: 44px;
+    width: 53px;
+    margin-right: 5px;
+    transition: transform 0.1s ease 0.1s;
+
+    &:hover {
+      filter: $panel-editor-side-menu-shadow;
+      transform: translate(-2px, -2px);
+      transform: scale(1.1);
+    }
+  }
+}
+
+.ds-picker {
+  position: relative;
+  min-width: 200px;
+}
+
+.panel-option-section {
+  margin-bottom: 10px;
+  border: $panel-option-section-border;
+  border-radius: $border-radius;
+}
+
+.panel-option-section__header {
+  padding: 4px 20px;
+  font-size: 1.1rem;
+  background: $panel-option-section-header-bg;
+  position: relative;
+
+  .btn {
+    position: absolute;
+    right: 0;
+    top: 0px;
+  }
+}
+
+.panel-option-section__body {
+  padding: 20px;
+  background: $page-bg;
+
+  &--queries {
+    min-height: 200px;
+  }
+}
diff --git a/public/sass/components/_panel_gettingstarted.scss b/public/sass/components/_panel_gettingstarted.scss
index 1fb3eda1834..f46c4569589 100644
--- a/public/sass/components/_panel_gettingstarted.scss
+++ b/public/sass/components/_panel_gettingstarted.scss
@@ -1,4 +1,4 @@
-// Colours
+// Colors
 $progress-color-dark: $panel-bg !default;
 $progress-color: $panel-bg !default;
 $progress-color-light: $panel-bg !default;
diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss
index 453925feb66..7b4244902f1 100644
--- a/public/sass/components/_panel_logs.scss
+++ b/public/sass/components/_panel_logs.scss
@@ -1,15 +1,20 @@
 $column-horizontal-spacing: 10px;
 
-.logs-panel-controls {
+.logs-panel-options {
   display: flex;
   background-color: $page-bg;
   padding: $panel-padding;
   padding-top: 10px;
   border-radius: $border-radius;
-  margin: 2*$panel-margin 0;
+  margin: 2*$panel-margin 0 $panel-margin;
   border: $panel-border;
+  flex-direction: column;
+}
+
+.logs-panel-controls {
+  display: flex;
   justify-items: flex-start;
-  align-items: flex-start;
+  align-items: center;
   flex-wrap: wrap;
 
   > * {
@@ -26,10 +31,14 @@ $column-horizontal-spacing: 10px;
 .logs-panel-meta {
   flex: 1;
   color: $text-color-weak;
+  margin-bottom: 10px;
+  min-width: 30%;
+  display: flex;
 }
 
 .logs-panel-meta__item {
   margin-right: 1em;
+  display: flex;
 }
 
 .logs-panel-meta__label {
diff --git a/public/sass/components/_popover-box.scss b/public/sass/components/_popover-box.scss
new file mode 100644
index 00000000000..6f0b3fb4310
--- /dev/null
+++ b/public/sass/components/_popover-box.scss
@@ -0,0 +1,31 @@
+.popover-box {
+  background-color: $popover-bg;
+  color: $popover-color;
+  border: 1px solid $popover-border-color;
+  border-radius: $border-radius;
+  max-width: 500px;
+}
+
+.popover-box__header {
+  background-color: $popover-border-color;
+  padding: 6px 10px;
+  display: flex;
+}
+
+.popover-box__title {
+  font-weight: $font-weight-semi-bold;
+  padding-right: $spacer;
+  overflow: hidden;
+  display: inline-block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+}
+
+.popover-box__body {
+  padding: 20px 10px 10px 10px;
+}
+
+.popover-box__close {
+  cursor: pointer;
+}
diff --git a/public/sass/components/_popper.scss b/public/sass/components/_popper.scss
index 0b28d5b21f4..d869d52b92f 100644
--- a/public/sass/components/_popper.scss
+++ b/public/sass/components/_popper.scss
@@ -1,12 +1,10 @@
+$popper-margin-from-ref: 5px;
+
 .popper {
   position: absolute;
   z-index: $zindex-tooltip;
-  background: $tooltipBackground;
   color: $tooltipColor;
   max-width: 400px;
-  border-radius: 3px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  padding: 10px;
   text-align: center;
 }
 
@@ -15,17 +13,24 @@
   height: 0;
   border-style: solid;
   position: absolute;
-  margin: 5px;
+  margin: 0px;
 }
 
 .popper .popper__arrow {
   border-color: $tooltipBackground;
 }
 
-.popper[data-placement^='top'] {
-  margin-bottom: 5px;
+.popper__background {
+  background: $tooltipBackground;
+  border-radius: $border-radius;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  padding: 10px;
 }
 
+// Top
+.popper[data-placement^='top'] {
+  padding-bottom: $popper-margin-from-ref;
+}
 .popper[data-placement^='top'] .popper__arrow {
   border-width: 5px 5px 0 5px;
   border-left-color: transparent;
@@ -33,42 +38,63 @@
   border-bottom-color: transparent;
   bottom: -5px;
   left: calc(50% - 5px);
-  margin-top: 0;
-  margin-bottom: 0;
+  padding-top: 5px;
 }
 
+// Bottom
 .popper[data-placement^='bottom'] {
-  margin-top: 5px;
+  padding-top: $popper-margin-from-ref;
 }
-
 .popper[data-placement^='bottom'] .popper__arrow {
   border-width: 0 5px 5px 5px;
   border-left-color: transparent;
   border-right-color: transparent;
   border-top-color: transparent;
-  top: -5px;
+  top: 0;
   left: calc(50% - 5px);
-  margin-top: 0;
-  margin-bottom: 0;
 }
+
+.popper[data-placement^='bottom-start'] {
+  padding-top: $popper-margin-from-ref;
+}
+.popper[data-placement^='bottom-start'] .popper__arrow {
+  border-width: 0 5px 5px 5px;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  top: 0;
+  left: 5px;
+}
+
+.popper[data-placement^='bottom-end'] {
+  padding-top: $popper-margin-from-ref;
+}
+.popper[data-placement^='bottom-end'] .popper__arrow {
+  border-width: 0 5px 5px 5px;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  top: 0;
+  left: calc(100% - 5px);
+}
+
+// Right
 .popper[data-placement^='right'] {
-  margin-left: 5px;
+  padding-left: $popper-margin-from-ref;
 }
 .popper[data-placement^='right'] .popper__arrow {
   border-width: 5px 5px 5px 0;
   border-left-color: transparent;
   border-top-color: transparent;
   border-bottom-color: transparent;
-  left: -5px;
+  left: 0;
   top: calc(50% - 5px);
-  margin-left: 0;
-  margin-right: 0;
 }
 
+// Left
 .popper[data-placement^='left'] {
-  margin-right: 5px;
+  padding-right: $popper-margin-from-ref;
 }
-
 .popper[data-placement^='left'] .popper__arrow {
   border-width: 5px 0 5px 5px;
   border-top-color: transparent;
@@ -76,11 +102,13 @@
   border-bottom-color: transparent;
   right: -5px;
   top: calc(50% - 5px);
-  margin-left: 0;
-  margin-right: 0;
 }
 
 .popper__target,
 .popper__manager {
   display: inline-block;
 }
+
+.popper__manager--block {
+  display: block;
+}
diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss
index 40cee199062..8b876624294 100644
--- a/public/sass/components/_query_editor.scss
+++ b/public/sass/components/_query_editor.scss
@@ -13,6 +13,10 @@
   color: $orange;
 }
 
+.query-editor-rows {
+  margin: 20px 0;
+}
+
 .gf-form-query {
   display: flex;
   flex-direction: row;
@@ -55,6 +59,8 @@
 }
 
 .gf-form-query-letter-cell {
+  flex-shrink: 0;
+
   .gf-form-query-letter-cell-carret {
     display: inline-block;
     width: 0.7rem;
diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss
index 00bd5f7c94c..5dbb4518d52 100644
--- a/public/sass/components/_scrollbar.scss
+++ b/public/sass/components/_scrollbar.scss
@@ -106,78 +106,78 @@
   opacity: 0.9;
 }
 
-// Scrollbars
+// // Scrollbars
+// //
+//
+// ::-webkit-scrollbar {
+//   width: 8px;
+//   height: 8px;
+// }
+//
+// ::-webkit-scrollbar:hover {
+//   height: 8px;
+// }
+//
+// ::-webkit-scrollbar-button:start:decrement,
+// ::-webkit-scrollbar-button:end:increment {
+//   display: none;
+// }
+// ::-webkit-scrollbar-button:horizontal:decrement {
+//   display: none;
+// }
+// ::-webkit-scrollbar-button:horizontal:increment {
+//   display: none;
+// }
+// ::-webkit-scrollbar-button:vertical:decrement {
+//   display: none;
+// }
+// ::-webkit-scrollbar-button:vertical:increment {
+//   display: none;
+// }
+// ::-webkit-scrollbar-button:horizontal:decrement:active {
+//   background-image: none;
+// }
+// ::-webkit-scrollbar-button:horizontal:increment:active {
+//   background-image: none;
+// }
+// ::-webkit-scrollbar-button:vertical:decrement:active {
+//   background-image: none;
+// }
+// ::-webkit-scrollbar-button:vertical:increment:active {
+//   background-image: none;
+// }
+// ::-webkit-scrollbar-track-piece {
+//   background-color: transparent;
+// }
+//
+// ::-webkit-scrollbar-thumb:vertical {
+//   height: 50px;
+//   background: -webkit-gradient(
+//     linear,
+//     left top,
+//     right top,
+//     color-stop(0%, $scrollbarBackground),
+//     color-stop(100%, $scrollbarBackground2)
+//   );
+//   border: 1px solid $scrollbarBorder;
+//   border-top: 1px solid $scrollbarBorder;
+//   border-left: 1px solid $scrollbarBorder;
+// }
+//
+// ::-webkit-scrollbar-thumb:horizontal {
+//   width: 50px;
+//   background: -webkit-gradient(
+//     linear,
+//     left top,
+//     left bottom,
+//     color-stop(0%, $scrollbarBackground),
+//     color-stop(100%, $scrollbarBackground2)
+//   );
+//   border: 1px solid $scrollbarBorder;
+//   border-top: 1px solid $scrollbarBorder;
+//   border-left: 1px solid $scrollbarBorder;
+// }
 //
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar:hover {
-  height: 8px;
-}
-
-::-webkit-scrollbar-button:start:decrement,
-::-webkit-scrollbar-button:end:increment {
-  display: none;
-}
-::-webkit-scrollbar-button:horizontal:decrement {
-  display: none;
-}
-::-webkit-scrollbar-button:horizontal:increment {
-  display: none;
-}
-::-webkit-scrollbar-button:vertical:decrement {
-  display: none;
-}
-::-webkit-scrollbar-button:vertical:increment {
-  display: none;
-}
-::-webkit-scrollbar-button:horizontal:decrement:active {
-  background-image: none;
-}
-::-webkit-scrollbar-button:horizontal:increment:active {
-  background-image: none;
-}
-::-webkit-scrollbar-button:vertical:decrement:active {
-  background-image: none;
-}
-::-webkit-scrollbar-button:vertical:increment:active {
-  background-image: none;
-}
-::-webkit-scrollbar-track-piece {
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb:vertical {
-  height: 50px;
-  background: -webkit-gradient(
-    linear,
-    left top,
-    right top,
-    color-stop(0%, $scrollbarBackground),
-    color-stop(100%, $scrollbarBackground2)
-  );
-  border: 1px solid $scrollbarBorder;
-  border-top: 1px solid $scrollbarBorder;
-  border-left: 1px solid $scrollbarBorder;
-}
-
-::-webkit-scrollbar-thumb:horizontal {
-  width: 50px;
-  background: -webkit-gradient(
-    linear,
-    left top,
-    left bottom,
-    color-stop(0%, $scrollbarBackground),
-    color-stop(100%, $scrollbarBackground2)
-  );
-  border: 1px solid $scrollbarBorder;
-  border-top: 1px solid $scrollbarBorder;
-  border-left: 1px solid $scrollbarBorder;
-}
-
 // Baron styles
 
 .baron {
diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss
index 1efd275bfad..a6844b9e66b 100644
--- a/public/sass/components/_submenu.scss
+++ b/public/sass/components/_submenu.scss
@@ -4,8 +4,7 @@
   flex-wrap: wrap;
   align-content: flex-start;
   align-items: flex-start;
-
-  margin: 0 0 $panel-margin 0;
+  padding: 0 0 $panel-margin 0;
 }
 
 .annotation-disabled,
diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss
index c368d8ead67..ab100a8c752 100644
--- a/public/sass/components/_switch.scss
+++ b/public/sass/components/_switch.scss
@@ -2,175 +2,135 @@
   SWITCH 3 - YES NO
 ============================================================ */
 
+gf-form-switch[disabled] {
+  .gf-form-switch,
+  .gf-form-switch-container {
+    cursor: default;
+    pointer-events: none !important;
+    .gf-form-label {
+      color: $text-color-weak;
+    }
+  }
+}
+
+.gf-form-switch-container {
+  display: flex;
+  cursor: pointer;
+}
+
 .gf-form-switch {
   position: relative;
-  max-width: 4.5rem;
-  flex-grow: 1;
-  min-width: 4rem;
-  margin-right: $gf-form-margin;
+  display: inline-block;
+  width: 60px;
+  height: $gf-form-input-height;
+  background: $switch-bg;
+  border: 1px solid $input-border-color;
+  border-left: none;
+  border-radius: $input-border-radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   input {
-    position: absolute;
-    margin-left: -9999px;
-    visibility: hidden;
-    display: none;
+    opacity: 0;
+    width: 0;
+    height: 0;
   }
 
-  input + label {
-    display: block;
+  &--transparent {
+    background: transparent;
+    border: 0;
+    width: 40px;
+  }
+}
+
+/* The slider */
+.gf-form-switch__slider {
+  background: $switch-slider-off-bg;
+  border-radius: 8px;
+  height: 16px;
+  width: 29px;
+  display: block;
+  position: relative;
+
+  &::before {
+    position: absolute;
+    content: '';
+    height: 12px;
+    width: 12px;
+    left: 1px;
+    top: 2px;
+    background: $switch-slider-color;
+    transition: 0.4s;
+    border-radius: 50%;
+    box-shadow: $switch-slider-shadow;
+  }
+}
+
+input:checked + .gf-form-switch__slider {
+  background: $switch-slider-on-bg;
+}
+
+input:checked + .gf-form-switch__slider::before {
+  transform: translateX(14px);
+}
+
+.gf-form-checkbox {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: $gf-form-input-height;
+  background: $switch-bg;
+  border: 1px solid $input-border-color;
+  border-left: none;
+  border-radius: $input-border-radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  &--transparent {
+    background: transparent;
+    border: none;
+    width: 23px;
+    height: auto;
     position: relative;
-    cursor: pointer;
-    outline: none;
-    user-select: none;
-    width: 100%;
-    height: 37px;
-    background: $input-bg;
-    border: 1px solid $input-border-color;
-    border-left: none;
-    border-radius: $input-border-radius;
-  }
-
-  input + label::before,
-  input + label::after {
-    @include buttonBackground($input-bg, $input-bg);
-
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    color: #fff;
-    text-align: center;
-    font-size: 150%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  &:hover {
-    input + label::before {
-      @include buttonBackground($input-bg, lighten($input-bg, 5%));
-      color: $text-color;
-      text-shadow: $text-shadow-faint;
-    }
-
-    input + label::after {
-      @include buttonBackground($input-bg, lighten($input-bg, 5%));
-      color: lighten($orange, 10%);
-      text-shadow: $text-shadow-strong;
-    }
-  }
-
-  input + label::before {
-    font-family: 'FontAwesome';
-    content: '\f096'; // square-o
-    color: $text-color-weak;
-    transition: transform 0.4s;
-    backface-visibility: hidden;
-    text-shadow: $text-shadow-faint;
-  }
-
-  input + label::after {
-    content: '\f046'; // check-square-o
-    color: $orange;
-    text-shadow: $text-shadow-strong;
-
-    font-family: 'FontAwesome';
-    transition: transform 0.4s;
-    transform: rotateY(180deg);
-    backface-visibility: hidden;
-  }
-
-  input:checked + label::before {
-    transform: rotateY(180deg);
-  }
-
-  input:checked + label::after {
-    transform: rotateY(0);
-  }
-
-  &--small {
-    max-width: 2rem;
-    min-width: 1.5rem;
-
-    input + label {
-      height: 25px;
-    }
-
-    input + label::before,
-    input + label::after {
-      font-size: $font-size-sm;
-    }
+    padding-left: 8px;
   }
 
   &--table-cell {
-    margin-bottom: 0;
-    margin-right: 0;
-
-    input + label {
-      height: 3.6rem;
-    }
-  }
-}
-
-.gf-form-switch--transparent {
-  input + label {
+    width: 20px;
     background: transparent;
+    height: auto;
     border: none;
-  }
-
-  input + label::before,
-  input + label::after {
-    background: transparent;
-    border: none;
-  }
-
-  &:hover {
-    input + label::before {
-      background: transparent;
-    }
-
-    input + label::after {
-      background: transparent;
-    }
+    position: relative;
+    top: -5px;
   }
 }
 
-.gf-form-switch--search-result__section {
-  min-width: 3.05rem;
-  margin-right: -0.3rem;
-
-  input + label {
-    height: 1.7rem;
-  }
+.gf-form-switch__checkbox {
+  height: 16px;
+  width: 16px;
+  border-radius: 3px;
+  border: $checkbox-border;
+  background: $checkbox-bg;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.gf-form-switch--search-result__item {
-  min-width: 2.7rem;
-
-  input + label {
-    height: 2.7rem;
-  }
+input:checked + .gf-form-switch__checkbox::before {
+  font-family: 'FontAwesome';
+  content: '\f00c';
+  color: $checkbox-color;
 }
 
-.gf-form-switch--search-result-filter-row__checkbox {
-  min-width: 3.75rem;
-
-  input + label {
-    height: 2.5rem;
-  }
-}
-
-gf-form-switch[disabled] {
-  .gf-form-label,
-  .gf-form-switch input + label {
-    cursor: default;
-    pointer-events: none !important;
-    &::before,
-    &::after {
-      color: $text-color-faint;
-      text-shadow: none;
-    }
-  }
+input:checked + .gf-form-switch__checkbox {
+  background: $checkbox-checked-bg;
+  border: none;
 }
diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss
index 87b43a31142..ef21d54f71c 100644
--- a/public/sass/components/_tabbed_view.scss
+++ b/public/sass/components/_tabbed_view.scss
@@ -2,9 +2,10 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  flex-grow: 1;
 
   &.tabbed-view--new {
-    padding: 25px 0 0 0;
+    padding: 0 0 0 0;
     height: 100%;
   }
 }
@@ -12,13 +13,14 @@
 .tabbed-view-header {
   box-shadow: $page-header-shadow;
   border-bottom: 1px solid $page-header-border-color;
+  padding: 0 $dashboard-padding;
   @include clearfix();
 }
 
 .tabbed-view-title {
   float: left;
   padding-top: 0.5rem;
-  margin: 0 $spacer*3 0 $spacer*1;
+  margin: 0 $spacer*3 0 0;
 }
 
 .tabbed-view-panel-title {
@@ -56,6 +58,6 @@
 }
 
 .section-heading {
-  font-size: 1.1rem;
+  font-size: $font-size-md;
   margin-bottom: 0.6rem;
 }
diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss
index eb3c8ce13f5..ea557b985a7 100644
--- a/public/sass/components/_tabs.scss
+++ b/public/sass/components/_tabs.scss
@@ -53,6 +53,7 @@
       background-image: linear-gradient(to right, #ffd500 0%, #ff4400 99%, #ff4400 100%);
     }
   }
+
   &.active--panel {
     background: $panel-bg !important;
   }
diff --git a/public/sass/components/_thresholds.scss b/public/sass/components/_thresholds.scss
new file mode 100644
index 00000000000..ff89a6b6ea6
--- /dev/null
+++ b/public/sass/components/_thresholds.scss
@@ -0,0 +1,103 @@
+.thresholds {
+  display: flex;
+}
+
+.threshold-rows {
+  margin-left: 5px;
+}
+
+.threshold-row {
+  display: flex;
+  align-items: center;
+  margin-top: 3px;
+  padding: 5px;
+
+  &::before {
+    font-family: 'FontAwesome';
+    content: '\f0d9';
+    color: $input-label-border-color;
+  }
+}
+
+.threshold-row-inner {
+  border: 1px solid $input-label-border-color;
+  border-radius: $border-radius;
+  display: flex;
+  overflow: hidden;
+  height: 37px;
+
+  &--base {
+    width: auto;
+  }
+}
+
+.threshold-row-color {
+  width: 36px;
+  border-right: 1px solid $input-label-border-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $input-bg;
+}
+
+.threshold-row-color-inner {
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+}
+
+.threshold-row-input {
+  padding: 8px 10px;
+  width: 150px;
+}
+
+.threshold-row-label {
+  background-color: $input-label-bg;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.threshold-row-add-label {
+  align-items: center;
+  display: flex;
+  padding: 5px 8px;
+}
+
+.threshold-row-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 37px;
+  width: 37px;
+  cursor: pointer;
+}
+
+.threshold-row-add {
+  border-right: $border-width solid $input-label-border-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  background-color: $green;
+}
+
+.threshold-row-label {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.indicator-section {
+  width: 100%;
+  height: 50px;
+  cursor: pointer;
+}
+
+.color-indicators {
+  width: 15px;
+  border-bottom-left-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+  overflow: hidden;
+}
diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss
index e12835d31c1..f3a2079f749 100644
--- a/public/sass/components/_timepicker.scss
+++ b/public/sass/components/_timepicker.scss
@@ -13,22 +13,28 @@
 }
 
 .gf-timepicker-dropdown {
-  position: absolute;
-  top: $navbarHeight;
-  right: 0;
-  padding: 10px 20px;
   background-color: $page-bg;
   border-radius: 0 0 0 4px;
   box-shadow: $search-shadow;
-}
+  z-index: $zindex-dropdown;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  right: 20px;
+  top: $navbarHeight;
+  width: 550px;
 
-.gf-timepicker-absolute-section {
-  width: 290px;
-  float: left;
-  padding: 0 10px;
-  select {
-    width: 183px;
-    margin-bottom: 0;
+  .popover-box {
+    max-width: 100%;
+
+    &:first-child {
+      border-radius: $border-radius $border-radius 0 0;
+      border-bottom: 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 $border-radius $border-radius;
+    }
   }
 }
 
@@ -47,9 +53,9 @@
 }
 
 .gf-timepicker-relative-section {
-  padding: 0 20px 0 30px;
   min-height: 237px;
   float: left;
+
   ul {
     list-style: none;
     float: left;
diff --git a/public/sass/components/_toggle_button_group.scss b/public/sass/components/_toggle_button_group.scss
index ed701a489a9..ae1bb621d16 100644
--- a/public/sass/components/_toggle_button_group.scss
+++ b/public/sass/components/_toggle_button_group.scss
@@ -1,24 +1,21 @@
 .toggle-button-group {
   display: flex;
 
-  .gf-form-label {
-    background-color: $input-label-bg;
-    &:first-child {
-      border-radius: $border-radius 0 0 $border-radius;
-      margin: 0;
-    }
-    &.small {
-      padding: ($input-padding-y / 2) ($input-padding-x / 2);
-      font-size: $font-size-xs;
-    }
-  }
-
   .btn {
-    background-color: $typeahead-selected-bg;
+    @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
+
+    padding: 7px 10px;
+    font-weight: $font-weight-semi-bold;
+    font-size: $font-size-sm;
     border-radius: 0;
-    color: $text-color;
+    border-right: $button-toggle-group-btn-seperator-border;
+
     &.active {
-      background-color: $input-bg;
+      background: $button-toggle-group-btn-active-bg;
+      box-shadow: $button-toggle-group-btn-active-shadow;
+      border-right: 0;
+      color: $white;
+
       &:hover {
         cursor: default;
       }
diff --git a/public/sass/components/_toolbar.scss b/public/sass/components/_toolbar.scss
new file mode 100644
index 00000000000..5f557f89cad
--- /dev/null
+++ b/public/sass/components/_toolbar.scss
@@ -0,0 +1,49 @@
+.toolbar {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  padding: 3px 20px 3px 20px;
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+  background: $toolbar-bg;
+  border-radius: 3px;
+  height: 44px;
+}
+
+.toolbar__heading {
+  font-size: $font-size-lg;
+  padding-right: 20px;
+}
+
+.toolbar__main {
+  padding: 0 $input-padding-x;
+  font-size: $font-size-md;
+  line-height: $input-line-height;
+  color: $input-color;
+  background-color: $input-bg;
+  height: $gf-form-input-height;
+  border: $input-border;
+  border-radius: $input-border-radius;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  .fa {
+    margin-left: 20px;
+    display: inline-block;
+    position: relative;
+  }
+}
+
+.toolbar__main-image {
+  margin-right: 10px;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+
+.toolbar__close {
+  flex-grow: 1;
+  text-align: left;
+}
diff --git a/public/sass/components/_user-picker.scss b/public/sass/components/_user-picker.scss
deleted file mode 100644
index 35a2a242746..00000000000
--- a/public/sass/components/_user-picker.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.user-picker-option__button {
-  position: relative;
-  text-align: left;
-  width: 100%;
-  display: block;
-  border-radius: 0;
-}
-.user-picker-option__avatar {
-  width: 20px;
-  display: inline-block;
-  margin-right: 10px;
-}
diff --git a/public/sass/components/_value-mappings.scss b/public/sass/components/_value-mappings.scss
new file mode 100644
index 00000000000..1d62b191763
--- /dev/null
+++ b/public/sass/components/_value-mappings.scss
@@ -0,0 +1,29 @@
+.mapping-row {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.add-mapping-row {
+  display: flex;
+  overflow: hidden;
+  height: 37px;
+  cursor: pointer;
+  border-radius: $border-radius;
+  width: 200px;
+}
+
+.add-mapping-row-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  background-color: $green;
+}
+
+.add-mapping-row-label {
+  align-items: center;
+  display: flex;
+  padding: 5px 8px;
+  background-color: $input-label-bg;
+  width: calc(100% - 36px);
+}
diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss
deleted file mode 100644
index 048e513cfbb..00000000000
--- a/public/sass/components/_viz_editor.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-.viz-editor {
-  display: flex;
-  height: 100%;
-}
-
-.viz-editor-col1 {
-  width: 210px;
-  height: 100%;
-  margin-right: 40px;
-}
-
-.viz-editor-col2 {
-  flex-grow: 1;
-}
-
-.viz-picker {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.viz-picker__search {
-  flex-grow: 0;
-}
-
-.viz-picker__items {
-  flex-grow: 1;
-  height: calc(100% - 50px);
-}
-
-.viz-picker__item {
-  background: $card-background;
-  box-shadow: $card-shadow;
-
-  border-radius: 3px;
-  padding: $spacer;
-  width: 100%;
-  height: 60px;
-  text-align: center;
-  margin-bottom: 6px;
-  cursor: pointer;
-  display: flex;
-  flex-shrink: 0;
-  border: 1px solid transparent;
-  @include left-brand-border;
-
-  &:hover {
-    background: $card-background-hover;
-  }
-
-  &--selected {
-    // border: 1px solid $orange;
-    @include left-brand-border-gradient();
-
-    .viz-picker__item-name {
-      color: $text-color;
-    }
-
-    .viz-picker__item-img {
-      filter: saturate(100%);
-    }
-  }
-}
-
-.viz-picker__item-name {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  font-size: $font-size-h5;
-  display: flex;
-  flex-direction: column;
-  align-self: center;
-  padding-left: $spacer;
-  font-size: $font-size-md;
-  color: $text-muted;
-}
-
-.viz-picker__item-img {
-  height: 100%;
-  filter: saturate(30%);
-}
diff --git a/public/sass/components/edit_sidemenu.scss b/public/sass/components/edit_sidemenu.scss
index 87d90f18162..4fc6795c068 100644
--- a/public/sass/components/edit_sidemenu.scss
+++ b/public/sass/components/edit_sidemenu.scss
@@ -28,6 +28,10 @@
   }
 }
 
+.column-styles-heading {
+  border-bottom: 1px solid $gray-1;
+}
+
 @include media-breakpoint-down(sm) {
   .edit-tab-with-sidemenu {
     flex-direction: column;
diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss
index 312248086fa..a17c1c67d7b 100644
--- a/public/sass/layout/_page.scss
+++ b/public/sass/layout/_page.scss
@@ -14,6 +14,12 @@
   background: $page-gradient;
 }
 
+.panel-in-fullscreen {
+  .main-view {
+    background: $edit-gradient;
+  }
+}
+
 .page-container {
   margin-left: auto;
   margin-right: auto;
diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss
index f3be6af56ba..b6b028b7c87 100644
--- a/public/sass/mixins/_mixins.scss
+++ b/public/sass/mixins/_mixins.scss
@@ -1,6 +1,6 @@
 @mixin clearfix() {
   &::after {
-    content: "";
+    content: '';
     display: table;
     clear: both;
   }
@@ -19,6 +19,10 @@
   outline-offset: -2px;
 }
 
+@mixin no-focus() {
+  outline: none;
+}
+
 // Center-align a block level element
 // ----------------------------------
 @mixin center-block() {
@@ -265,20 +269,10 @@
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
 #translucent {
   @mixin background($color: $white, $alpha: 1) {
-    background-color: hsla(
-      hue($color),
-      saturation($color),
-      lightness($color),
-      $alpha
-    );
+    background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
   }
   @mixin border($color: $white, $alpha: 1) {
-    border-color: hsla(
-      hue($color),
-      saturation($color),
-      lightness($color),
-      $alpha
-    );
+    border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
     @include background-clip(padding-box);
   }
 }
@@ -294,66 +288,37 @@
 // Gradients
 @mixin gradient-horizontal($startColor: #555, $endColor: #333) {
   background-color: $endColor;
-  background-image: linear-gradient(
-    to right,
-    $startColor,
-    $endColor
-  ); // Standard, IE10
+  background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
   background-repeat: repeat-x;
 }
 
 @mixin gradient-vertical($startColor: #555, $endColor: #333) {
   background-color: mix($startColor, $endColor, 60%);
-  background-image: linear-gradient(
-    to bottom,
-    $startColor,
-    $endColor
-  ); // Standard, IE10
+  background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
   background-repeat: repeat-x;
 }
 
 @mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
   background-color: $endColor;
   background-repeat: repeat-x;
-  background-image: linear-gradient(
-    $deg,
-    $startColor,
-    $endColor
-  ); // Standard, IE10
+  background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
 }
 
 @mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
   background-color: mix($midColor, $endColor, 80%);
-  background-image: linear-gradient(
-    to right,
-    $startColor,
-    $midColor $colorStop,
-    $endColor
-  );
+  background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor);
   background-repeat: no-repeat;
 }
 
 @mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
   background-color: mix($midColor, $endColor, 80%);
-  background-image: linear-gradient(
-    $startColor,
-    $midColor $colorStop,
-    $endColor
-  );
+  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
   background-repeat: no-repeat;
 }
 
 @mixin gradient-radial($innerColor: #555, $outerColor: #333) {
   background-color: $outerColor;
-  background-image: -webkit-gradient(
-    radial,
-    center center,
-    0,
-    center center,
-    460,
-    from($innerColor),
-    to($outerColor)
-  );
+  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
   background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
   background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
   background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
@@ -380,11 +345,7 @@
 
 @mixin left-brand-border-gradient() {
   border: none;
-  border-image: linear-gradient(
-    rgba(255, 213, 0, 1) 0%,
-    rgba(255, 68, 0, 1) 99%,
-    rgba(255, 68, 0, 1) 100%
-  );
+  border-image: linear-gradient(rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
   border-image-slice: 1;
   border-style: solid;
   border-top: 0;
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index 0a578901bbd..589012bff3f 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@@ -3,10 +3,6 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-
-  &--has-submenu {
-    height: calc(100% - 50px);
-  }
 }
 
 .template-variable {
@@ -44,26 +40,13 @@ div.flot-text {
   height: 100%;
 }
 
-.panel-editor-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.panel-editor-container__panel {
-  height: 35%;
-}
-
-.panel-editor-container__editor {
-  height: 65%;
-}
-
 .panel-container {
   background-color: $panel-bg;
   border: $panel-border;
   position: relative;
   border-radius: 3px;
   height: 100%;
+  width: 100%;
 
   &.panel-transparent {
     background-color: transparent;
@@ -81,6 +64,10 @@ div.flot-text {
   &--is-editing {
     height: auto;
   }
+
+  &--absolute {
+    position: absolute;
+  }
 }
 
 .panel-content {
@@ -164,6 +151,20 @@ div.flot-text {
   color: $text-color-weak;
 }
 
+.panel-empty {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  p {
+    text-align: center;
+    color: $text-muted;
+    font-size: $font-size-lg;
+    width: 100%;
+  }
+}
+
 .panel-header {
   &:hover {
     transition: background-color 0.1s ease-in-out;
diff --git a/public/sass/utils/_utils.scss b/public/sass/utils/_utils.scss
index 3121a6f0c00..ce59c68a23f 100644
--- a/public/sass/utils/_utils.scss
+++ b/public/sass/utils/_utils.scss
@@ -78,3 +78,18 @@ button.close {
 .d-inline-block {
   display: inline-block;
 }
+
+.absolute {
+  position: absolute;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.center-vh {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+}
diff --git a/public/sass/utils/_validation.scss b/public/sass/utils/_validation.scss
index 86b7c008bfd..657d1f0414b 100644
--- a/public/sass/utils/_validation.scss
+++ b/public/sass/utils/_validation.scss
@@ -1,7 +1,11 @@
-input[type="text"].ng-dirty.ng-invalid {
+input[type='text'].ng-dirty.ng-invalid {
 }
 
 input.validation-error,
 input.ng-dirty.ng-invalid {
   box-shadow: inset 0 0px 5px $red;
 }
+
+input.invalid {
+  box-shadow: inset 0 0px 5px $red;
+}
diff --git a/public/vendor/flot/jquery.flot.gauge.js b/public/vendor/flot/jquery.flot.gauge.js
index db1cb1ffe24..d256a5db7ed 100644
--- a/public/vendor/flot/jquery.flot.gauge.js
+++ b/public/vendor/flot/jquery.flot.gauge.js
@@ -588,6 +588,7 @@
             if (!exists) {
                 span = $("<span></span>")
                 span.attr("id", id);
+                span.attr("class", "flot-temp-elem");
                 placeholder.append(span);
             }
 
diff --git a/public/vendor/flot/jquery.flot.js b/public/vendor/flot/jquery.flot.js
index 8e0d7a1420f..25507d63089 100644
--- a/public/vendor/flot/jquery.flot.js
+++ b/public/vendor/flot/jquery.flot.js
@@ -931,13 +931,13 @@ Licensed under the MIT license.
             var res = {}, i, axis;
             for (i = 0; i < xaxes.length; ++i) {
                 axis = xaxes[i];
-                if (axis && axis.used)
+                if (axis)
                     res["x" + axis.n] = axis.c2p(pos.left);
             }
 
             for (i = 0; i < yaxes.length; ++i) {
                 axis = yaxes[i];
-                if (axis && axis.used)
+                if (axis)
                     res["y" + axis.n] = axis.c2p(pos.top);
             }
 
diff --git a/scripts/circle-test-backend.sh b/scripts/circle-test-backend.sh
index d25506b9bc7..7f1e67dd5bb 100755
--- a/scripts/circle-test-backend.sh
+++ b/scripts/circle-test-backend.sh
@@ -19,5 +19,5 @@ exit_if_fail time go install ./pkg/cmd/grafana-server
 echo "running go test"
 set -e
 time for d in $(go list ./pkg/...); do
-  exit_if_fail go test -covermode=atomic $d
+  exit_if_fail go test -tags=integration -covermode=atomic $d
 done
diff --git a/scripts/webpack/webpack.hot.js b/scripts/webpack/webpack.hot.js
index 2b23fe88015..ca08ff1e726 100644
--- a/scripts/webpack/webpack.hot.js
+++ b/scripts/webpack/webpack.hot.js
@@ -78,6 +78,12 @@ module.exports = merge(common, {
         use: [
           'style-loader', // creates style nodes from JS strings
           'css-loader', // translates CSS into CommonJS
+          {
+            loader: 'postcss-loader',
+            options: {
+              config: { path: __dirname + '/postcss.config.js' },
+            },
+          },
           'sass-loader', // compiles Sass to CSS
         ],
       },
diff --git a/vendor/github.com/go-ldap/ldap/atomic_value.go b/vendor/github.com/go-ldap/ldap/atomic_value.go
deleted file mode 100644
index bccf7573e0e..00000000000
--- a/vendor/github.com/go-ldap/ldap/atomic_value.go
+++ /dev/null
@@ -1,13 +0,0 @@
-// +build go1.4
-
-package ldap
-
-import (
-	"sync/atomic"
-)
-
-// For compilers that support it, we just use the underlying sync/atomic.Value
-// type.
-type atomicValue struct {
-	atomic.Value
-}
diff --git a/vendor/github.com/go-ldap/ldap/atomic_value_go13.go b/vendor/github.com/go-ldap/ldap/atomic_value_go13.go
deleted file mode 100644
index 04920bb2600..00000000000
--- a/vendor/github.com/go-ldap/ldap/atomic_value_go13.go
+++ /dev/null
@@ -1,28 +0,0 @@
-// +build !go1.4
-
-package ldap
-
-import (
-	"sync"
-)
-
-// This is a helper type that emulates the use of the "sync/atomic.Value"
-// struct that's available in Go 1.4 and up.
-type atomicValue struct {
-	value interface{}
-	lock  sync.RWMutex
-}
-
-func (av *atomicValue) Store(val interface{}) {
-	av.lock.Lock()
-	av.value = val
-	av.lock.Unlock()
-}
-
-func (av *atomicValue) Load() interface{} {
-	av.lock.RLock()
-	ret := av.value
-	av.lock.RUnlock()
-
-	return ret
-}
diff --git a/vendor/github.com/go-ldap/ldap/error.go b/vendor/github.com/go-ldap/ldap/error.go
deleted file mode 100644
index 4cccb537fdd..00000000000
--- a/vendor/github.com/go-ldap/ldap/error.go
+++ /dev/null
@@ -1,155 +0,0 @@
-package ldap
-
-import (
-	"fmt"
-
-	"gopkg.in/asn1-ber.v1"
-)
-
-// LDAP Result Codes
-const (
-	LDAPResultSuccess                      = 0
-	LDAPResultOperationsError              = 1
-	LDAPResultProtocolError                = 2
-	LDAPResultTimeLimitExceeded            = 3
-	LDAPResultSizeLimitExceeded            = 4
-	LDAPResultCompareFalse                 = 5
-	LDAPResultCompareTrue                  = 6
-	LDAPResultAuthMethodNotSupported       = 7
-	LDAPResultStrongAuthRequired           = 8
-	LDAPResultReferral                     = 10
-	LDAPResultAdminLimitExceeded           = 11
-	LDAPResultUnavailableCriticalExtension = 12
-	LDAPResultConfidentialityRequired      = 13
-	LDAPResultSaslBindInProgress           = 14
-	LDAPResultNoSuchAttribute              = 16
-	LDAPResultUndefinedAttributeType       = 17
-	LDAPResultInappropriateMatching        = 18
-	LDAPResultConstraintViolation          = 19
-	LDAPResultAttributeOrValueExists       = 20
-	LDAPResultInvalidAttributeSyntax       = 21
-	LDAPResultNoSuchObject                 = 32
-	LDAPResultAliasProblem                 = 33
-	LDAPResultInvalidDNSyntax              = 34
-	LDAPResultAliasDereferencingProblem    = 36
-	LDAPResultInappropriateAuthentication  = 48
-	LDAPResultInvalidCredentials           = 49
-	LDAPResultInsufficientAccessRights     = 50
-	LDAPResultBusy                         = 51
-	LDAPResultUnavailable                  = 52
-	LDAPResultUnwillingToPerform           = 53
-	LDAPResultLoopDetect                   = 54
-	LDAPResultNamingViolation              = 64
-	LDAPResultObjectClassViolation         = 65
-	LDAPResultNotAllowedOnNonLeaf          = 66
-	LDAPResultNotAllowedOnRDN              = 67
-	LDAPResultEntryAlreadyExists           = 68
-	LDAPResultObjectClassModsProhibited    = 69
-	LDAPResultAffectsMultipleDSAs          = 71
-	LDAPResultOther                        = 80
-
-	ErrorNetwork            = 200
-	ErrorFilterCompile      = 201
-	ErrorFilterDecompile    = 202
-	ErrorDebugging          = 203
-	ErrorUnexpectedMessage  = 204
-	ErrorUnexpectedResponse = 205
-)
-
-// LDAPResultCodeMap contains string descriptions for LDAP error codes
-var LDAPResultCodeMap = map[uint8]string{
-	LDAPResultSuccess:                      "Success",
-	LDAPResultOperationsError:              "Operations Error",
-	LDAPResultProtocolError:                "Protocol Error",
-	LDAPResultTimeLimitExceeded:            "Time Limit Exceeded",
-	LDAPResultSizeLimitExceeded:            "Size Limit Exceeded",
-	LDAPResultCompareFalse:                 "Compare False",
-	LDAPResultCompareTrue:                  "Compare True",
-	LDAPResultAuthMethodNotSupported:       "Auth Method Not Supported",
-	LDAPResultStrongAuthRequired:           "Strong Auth Required",
-	LDAPResultReferral:                     "Referral",
-	LDAPResultAdminLimitExceeded:           "Admin Limit Exceeded",
-	LDAPResultUnavailableCriticalExtension: "Unavailable Critical Extension",
-	LDAPResultConfidentialityRequired:      "Confidentiality Required",
-	LDAPResultSaslBindInProgress:           "Sasl Bind In Progress",
-	LDAPResultNoSuchAttribute:              "No Such Attribute",
-	LDAPResultUndefinedAttributeType:       "Undefined Attribute Type",
-	LDAPResultInappropriateMatching:        "Inappropriate Matching",
-	LDAPResultConstraintViolation:          "Constraint Violation",
-	LDAPResultAttributeOrValueExists:       "Attribute Or Value Exists",
-	LDAPResultInvalidAttributeSyntax:       "Invalid Attribute Syntax",
-	LDAPResultNoSuchObject:                 "No Such Object",
-	LDAPResultAliasProblem:                 "Alias Problem",
-	LDAPResultInvalidDNSyntax:              "Invalid DN Syntax",
-	LDAPResultAliasDereferencingProblem:    "Alias Dereferencing Problem",
-	LDAPResultInappropriateAuthentication:  "Inappropriate Authentication",
-	LDAPResultInvalidCredentials:           "Invalid Credentials",
-	LDAPResultInsufficientAccessRights:     "Insufficient Access Rights",
-	LDAPResultBusy:                         "Busy",
-	LDAPResultUnavailable:                  "Unavailable",
-	LDAPResultUnwillingToPerform:           "Unwilling To Perform",
-	LDAPResultLoopDetect:                   "Loop Detect",
-	LDAPResultNamingViolation:              "Naming Violation",
-	LDAPResultObjectClassViolation:         "Object Class Violation",
-	LDAPResultNotAllowedOnNonLeaf:          "Not Allowed On Non Leaf",
-	LDAPResultNotAllowedOnRDN:              "Not Allowed On RDN",
-	LDAPResultEntryAlreadyExists:           "Entry Already Exists",
-	LDAPResultObjectClassModsProhibited:    "Object Class Mods Prohibited",
-	LDAPResultAffectsMultipleDSAs:          "Affects Multiple DSAs",
-	LDAPResultOther:                        "Other",
-
-	ErrorNetwork:            "Network Error",
-	ErrorFilterCompile:      "Filter Compile Error",
-	ErrorFilterDecompile:    "Filter Decompile Error",
-	ErrorDebugging:          "Debugging Error",
-	ErrorUnexpectedMessage:  "Unexpected Message",
-	ErrorUnexpectedResponse: "Unexpected Response",
-}
-
-func getLDAPResultCode(packet *ber.Packet) (code uint8, description string) {
-	if packet == nil {
-		return ErrorUnexpectedResponse, "Empty packet"
-	} else if len(packet.Children) >= 2 {
-		response := packet.Children[1]
-		if response == nil {
-			return ErrorUnexpectedResponse, "Empty response in packet"
-		}
-		if response.ClassType == ber.ClassApplication && response.TagType == ber.TypeConstructed && len(response.Children) >= 3 {
-			// Children[1].Children[2] is the diagnosticMessage which is guaranteed to exist as seen here: https://tools.ietf.org/html/rfc4511#section-4.1.9
-			return uint8(response.Children[0].Value.(int64)), response.Children[2].Value.(string)
-		}
-	}
-
-	return ErrorNetwork, "Invalid packet format"
-}
-
-// Error holds LDAP error information
-type Error struct {
-	// Err is the underlying error
-	Err error
-	// ResultCode is the LDAP error code
-	ResultCode uint8
-}
-
-func (e *Error) Error() string {
-	return fmt.Sprintf("LDAP Result Code %d %q: %s", e.ResultCode, LDAPResultCodeMap[e.ResultCode], e.Err.Error())
-}
-
-// NewError creates an LDAP error with the given code and underlying error
-func NewError(resultCode uint8, err error) error {
-	return &Error{ResultCode: resultCode, Err: err}
-}
-
-// IsErrorWithCode returns true if the given error is an LDAP error with the given result code
-func IsErrorWithCode(err error, desiredResultCode uint8) bool {
-	if err == nil {
-		return false
-	}
-
-	serverError, ok := err.(*Error)
-	if !ok {
-		return false
-	}
-
-	return serverError.ResultCode == desiredResultCode
-}
diff --git a/vendor/github.com/go-ldap/ldap/LICENSE b/vendor/gopkg.in/ldap.v3/LICENSE
similarity index 100%
rename from vendor/github.com/go-ldap/ldap/LICENSE
rename to vendor/gopkg.in/ldap.v3/LICENSE
diff --git a/vendor/github.com/go-ldap/ldap/add.go b/vendor/gopkg.in/ldap.v3/add.go
similarity index 90%
rename from vendor/github.com/go-ldap/ldap/add.go
rename to vendor/gopkg.in/ldap.v3/add.go
index 0e5f6cdba11..19bce1b75b3 100644
--- a/vendor/github.com/go-ldap/ldap/add.go
+++ b/vendor/gopkg.in/ldap.v3/add.go
@@ -41,6 +41,8 @@ type AddRequest struct {
 	DN string
 	// Attributes list the attributes of the new entry
 	Attributes []Attribute
+	// Controls hold optional controls to send with the request
+	Controls []Control
 }
 
 func (a AddRequest) encode() *ber.Packet {
@@ -60,9 +62,10 @@ func (a *AddRequest) Attribute(attrType string, attrVals []string) {
 }
 
 // NewAddRequest returns an AddRequest for the given DN, with no attributes
-func NewAddRequest(dn string) *AddRequest {
+func NewAddRequest(dn string, controls []Control) *AddRequest {
 	return &AddRequest{
-		DN: dn,
+		DN:       dn,
+		Controls: controls,
 	}
 
 }
@@ -72,6 +75,9 @@ func (l *Conn) Add(addRequest *AddRequest) error {
 	packet := ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagSequence, nil, "LDAP Request")
 	packet.AppendChild(ber.NewInteger(ber.ClassUniversal, ber.TypePrimitive, ber.TagInteger, l.nextMessageID(), "MessageID"))
 	packet.AppendChild(addRequest.encode())
+	if len(addRequest.Controls) > 0 {
+		packet.AppendChild(encodeControls(addRequest.Controls))
+	}
 
 	l.Debug.PrintPacket(packet)
 
@@ -100,9 +106,9 @@ func (l *Conn) Add(addRequest *AddRequest) error {
 	}
 
 	if packet.Children[1].Tag == ApplicationAddResponse {
-		resultCode, resultDescription := getLDAPResultCode(packet)
-		if resultCode != 0 {
-			return NewError(resultCode, errors.New(resultDescription))
+		err := GetLDAPError(packet)
+		if err != nil {
+			return err
 		}
 	} else {
 		log.Printf("Unexpected Response: %d", packet.Children[1].Tag)
diff --git a/vendor/github.com/go-ldap/ldap/bind.go b/vendor/gopkg.in/ldap.v3/bind.go
similarity index 54%
rename from vendor/github.com/go-ldap/ldap/bind.go
rename to vendor/gopkg.in/ldap.v3/bind.go
index 26b3cc7270d..59c3f5ef591 100644
--- a/vendor/github.com/go-ldap/ldap/bind.go
+++ b/vendor/gopkg.in/ldap.v3/bind.go
@@ -1,11 +1,8 @@
-// Copyright 2011 The Go Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
 package ldap
 
 import (
 	"errors"
+	"fmt"
 
 	"gopkg.in/asn1-ber.v1"
 )
@@ -18,6 +15,9 @@ type SimpleBindRequest struct {
 	Password string
 	// Controls are optional controls to send with the bind request
 	Controls []Control
+	// AllowEmptyPassword sets whether the client allows binding with an empty password
+	// (normally used for unauthenticated bind).
+	AllowEmptyPassword bool
 }
 
 // SimpleBindResult contains the response from the server
@@ -28,9 +28,10 @@ type SimpleBindResult struct {
 // NewSimpleBindRequest returns a bind request
 func NewSimpleBindRequest(username string, password string, controls []Control) *SimpleBindRequest {
 	return &SimpleBindRequest{
-		Username: username,
-		Password: password,
-		Controls: controls,
+		Username:           username,
+		Password:           password,
+		Controls:           controls,
+		AllowEmptyPassword: false,
 	}
 }
 
@@ -40,17 +41,22 @@ func (bindRequest *SimpleBindRequest) encode() *ber.Packet {
 	request.AppendChild(ber.NewString(ber.ClassUniversal, ber.TypePrimitive, ber.TagOctetString, bindRequest.Username, "User Name"))
 	request.AppendChild(ber.NewString(ber.ClassContext, ber.TypePrimitive, 0, bindRequest.Password, "Password"))
 
-	request.AppendChild(encodeControls(bindRequest.Controls))
-
 	return request
 }
 
 // SimpleBind performs the simple bind operation defined in the given request
 func (l *Conn) SimpleBind(simpleBindRequest *SimpleBindRequest) (*SimpleBindResult, error) {
+	if simpleBindRequest.Password == "" && !simpleBindRequest.AllowEmptyPassword {
+		return nil, NewError(ErrorEmptyPassword, errors.New("ldap: empty password not allowed by the client"))
+	}
+
 	packet := ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagSequence, nil, "LDAP Request")
 	packet.AppendChild(ber.NewInteger(ber.ClassUniversal, ber.TypePrimitive, ber.TagInteger, l.nextMessageID(), "MessageID"))
 	encodedBindRequest := simpleBindRequest.encode()
 	packet.AppendChild(encodedBindRequest)
+	if len(simpleBindRequest.Controls) > 0 {
+		packet.AppendChild(encodeControls(simpleBindRequest.Controls))
+	}
 
 	if l.Debug {
 		ber.PrintPacket(packet)
@@ -73,7 +79,7 @@ func (l *Conn) SimpleBind(simpleBindRequest *SimpleBindRequest) (*SimpleBindResu
 	}
 
 	if l.Debug {
-		if err := addLDAPDescriptions(packet); err != nil {
+		if err = addLDAPDescriptions(packet); err != nil {
 			return nil, err
 		}
 		ber.PrintPacket(packet)
@@ -85,59 +91,45 @@ func (l *Conn) SimpleBind(simpleBindRequest *SimpleBindRequest) (*SimpleBindResu
 
 	if len(packet.Children) == 3 {
 		for _, child := range packet.Children[2].Children {
-			result.Controls = append(result.Controls, DecodeControl(child))
+			decodedChild, decodeErr := DecodeControl(child)
+			if decodeErr != nil {
+				return nil, fmt.Errorf("failed to decode child control: %s", decodeErr)
+			}
+			result.Controls = append(result.Controls, decodedChild)
 		}
 	}
 
-	resultCode, resultDescription := getLDAPResultCode(packet)
-	if resultCode != 0 {
-		return result, NewError(resultCode, errors.New(resultDescription))
-	}
-
-	return result, nil
+	err = GetLDAPError(packet)
+	return result, err
 }
 
-// Bind performs a bind with the given username and password
+// Bind performs a bind with the given username and password.
+//
+// It does not allow unauthenticated bind (i.e. empty password). Use the UnauthenticatedBind method
+// for that.
 func (l *Conn) Bind(username, password string) error {
-	packet := ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagSequence, nil, "LDAP Request")
-	packet.AppendChild(ber.NewInteger(ber.ClassUniversal, ber.TypePrimitive, ber.TagInteger, l.nextMessageID(), "MessageID"))
-	bindRequest := ber.Encode(ber.ClassApplication, ber.TypeConstructed, ApplicationBindRequest, nil, "Bind Request")
-	bindRequest.AppendChild(ber.NewInteger(ber.ClassUniversal, ber.TypePrimitive, ber.TagInteger, 3, "Version"))
-	bindRequest.AppendChild(ber.NewString(ber.ClassUniversal, ber.TypePrimitive, ber.TagOctetString, username, "User Name"))
-	bindRequest.AppendChild(ber.NewString(ber.ClassContext, ber.TypePrimitive, 0, password, "Password"))
-	packet.AppendChild(bindRequest)
-
-	if l.Debug {
-		ber.PrintPacket(packet)
+	req := &SimpleBindRequest{
+		Username:           username,
+		Password:           password,
+		AllowEmptyPassword: false,
 	}
+	_, err := l.SimpleBind(req)
+	return err
+}
 
-	msgCtx, err := l.sendMessage(packet)
-	if err != nil {
-		return err
+// UnauthenticatedBind performs an unauthenticated bind.
+//
+// A username may be provided for trace (e.g. logging) purpose only, but it is normally not
+// authenticated or otherwise validated by the LDAP server.
+//
+// See https://tools.ietf.org/html/rfc4513#section-5.1.2 .
+// See https://tools.ietf.org/html/rfc4513#section-6.3.1 .
+func (l *Conn) UnauthenticatedBind(username string) error {
+	req := &SimpleBindRequest{
+		Username:           username,
+		Password:           "",
+		AllowEmptyPassword: true,
 	}
-	defer l.finishMessage(msgCtx)
-
-	packetResponse, ok := <-msgCtx.responses
-	if !ok {
-		return NewError(ErrorNetwork, errors.New("ldap: response channel closed"))
-	}
-	packet, err = packetResponse.ReadPacket()
-	l.Debug.Printf("%d: got response %p", msgCtx.id, packet)
-	if err != nil {
-		return err
-	}
-
-	if l.Debug {
-		if err := addLDAPDescriptions(packet); err != nil {
-			return err
-		}
-		ber.PrintPacket(packet)
-	}
-
-	resultCode, resultDescription := getLDAPResultCode(packet)
-	if resultCode != 0 {
-		return NewError(resultCode, errors.New(resultDescription))
-	}
-
-	return nil
+	_, err := l.SimpleBind(req)
+	return err
 }
diff --git a/vendor/github.com/go-ldap/ldap/client.go b/vendor/gopkg.in/ldap.v3/client.go
similarity index 93%
rename from vendor/github.com/go-ldap/ldap/client.go
rename to vendor/gopkg.in/ldap.v3/client.go
index 055b27b5fc4..c7f41f6f901 100644
--- a/vendor/github.com/go-ldap/ldap/client.go
+++ b/vendor/gopkg.in/ldap.v3/client.go
@@ -18,6 +18,7 @@ type Client interface {
 	Add(addRequest *AddRequest) error
 	Del(delRequest *DelRequest) error
 	Modify(modifyRequest *ModifyRequest) error
+	ModifyDN(modifyDNRequest *ModifyDNRequest) error
 
 	Compare(dn, attribute, value string) (bool, error)
 	PasswordModify(passwordModifyRequest *PasswordModifyRequest) (*PasswordModifyResult, error)
diff --git a/vendor/github.com/go-ldap/ldap/compare.go b/vendor/gopkg.in/ldap.v3/compare.go
similarity index 80%
rename from vendor/github.com/go-ldap/ldap/compare.go
rename to vendor/gopkg.in/ldap.v3/compare.go
index cc6d2af5e5d..5b5013cbedc 100644
--- a/vendor/github.com/go-ldap/ldap/compare.go
+++ b/vendor/gopkg.in/ldap.v3/compare.go
@@ -1,7 +1,3 @@
-// Copyright 2014 The Go Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-//
 // File contains Compare functionality
 //
 // https://tools.ietf.org/html/rfc4511
@@ -41,7 +37,7 @@ func (l *Conn) Compare(dn, attribute, value string) (bool, error) {
 
 	ava := ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagSequence, nil, "AttributeValueAssertion")
 	ava.AppendChild(ber.NewString(ber.ClassUniversal, ber.TypePrimitive, ber.TagOctetString, attribute, "AttributeDesc"))
-	ava.AppendChild(ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagOctetString, value, "AssertionValue"))
+	ava.AppendChild(ber.Encode(ber.ClassUniversal, ber.TypePrimitive, ber.TagOctetString, value, "AssertionValue"))
 	request.AppendChild(ava)
 	packet.AppendChild(request)
 
@@ -72,14 +68,16 @@ func (l *Conn) Compare(dn, attribute, value string) (bool, error) {
 	}
 
 	if packet.Children[1].Tag == ApplicationCompareResponse {
-		resultCode, resultDescription := getLDAPResultCode(packet)
-		if resultCode == LDAPResultCompareTrue {
+		err := GetLDAPError(packet)
+
+		switch {
+		case IsErrorWithCode(err, LDAPResultCompareTrue):
 			return true, nil
-		} else if resultCode == LDAPResultCompareFalse {
+		case IsErrorWithCode(err, LDAPResultCompareFalse):
 			return false, nil
-		} else {
-			return false, NewError(resultCode, errors.New(resultDescription))
+		default:
+			return false, err
 		}
 	}
-	return false, fmt.Errorf("Unexpected Response: %d", packet.Children[1].Tag)
+	return false, fmt.Errorf("unexpected Response: %d", packet.Children[1].Tag)
 }
diff --git a/vendor/github.com/go-ldap/ldap/conn.go b/vendor/gopkg.in/ldap.v3/conn.go
similarity index 90%
rename from vendor/github.com/go-ldap/ldap/conn.go
rename to vendor/gopkg.in/ldap.v3/conn.go
index eb28eb4726a..50d8c3f822d 100644
--- a/vendor/github.com/go-ldap/ldap/conn.go
+++ b/vendor/gopkg.in/ldap.v3/conn.go
@@ -1,7 +1,3 @@
-// Copyright 2011 The Go Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
 package ldap
 
 import (
@@ -10,6 +6,7 @@ import (
 	"fmt"
 	"log"
 	"net"
+	"net/url"
 	"sync"
 	"sync/atomic"
 	"time"
@@ -30,6 +27,13 @@ const (
 	MessageTimeout = 4
 )
 
+const (
+	// DefaultLdapPort default ldap port for pure TCP connection
+	DefaultLdapPort = "389"
+	// DefaultLdapsPort default ldap port for SSL connection
+	DefaultLdapsPort = "636"
+)
+
 // PacketResponse contains the packet or error encountered reading a response
 type PacketResponse struct {
 	// Packet is the packet read from the server
@@ -84,7 +88,7 @@ type Conn struct {
 	conn                net.Conn
 	isTLS               bool
 	closing             uint32
-	closeErr            atomicValue
+	closeErr            atomic.Value
 	isStartingTLS       bool
 	Debug               debugging
 	chanConfirm         chan struct{}
@@ -121,22 +125,51 @@ func Dial(network, addr string) (*Conn, error) {
 // DialTLS connects to the given address on the given network using tls.Dial
 // and then returns a new Conn for the connection.
 func DialTLS(network, addr string, config *tls.Config) (*Conn, error) {
-	dc, err := net.DialTimeout(network, addr, DefaultTimeout)
+	c, err := tls.DialWithDialer(&net.Dialer{Timeout: DefaultTimeout}, network, addr, config)
 	if err != nil {
 		return nil, NewError(ErrorNetwork, err)
 	}
-	c := tls.Client(dc, config)
-	err = c.Handshake()
-	if err != nil {
-		// Handshake error, close the established connection before we return an error
-		dc.Close()
-		return nil, NewError(ErrorNetwork, err)
-	}
 	conn := NewConn(c, true)
 	conn.Start()
 	return conn, nil
 }
 
+// DialURL connects to the given ldap URL vie TCP using tls.Dial or net.Dial if ldaps://
+// or ldap:// specified as protocol. On success a new Conn for the connection
+// is returned.
+func DialURL(addr string) (*Conn, error) {
+
+	lurl, err := url.Parse(addr)
+	if err != nil {
+		return nil, NewError(ErrorNetwork, err)
+	}
+
+	host, port, err := net.SplitHostPort(lurl.Host)
+	if err != nil {
+		// we asume that error is due to missing port
+		host = lurl.Host
+		port = ""
+	}
+
+	switch lurl.Scheme {
+	case "ldap":
+		if port == "" {
+			port = DefaultLdapPort
+		}
+		return Dial("tcp", net.JoinHostPort(host, port))
+	case "ldaps":
+		if port == "" {
+			port = DefaultLdapsPort
+		}
+		tlsConf := &tls.Config{
+			ServerName: host,
+		}
+		return DialTLS("tcp", net.JoinHostPort(host, port), tlsConf)
+	}
+
+	return nil, NewError(ErrorNetwork, fmt.Errorf("Unknown scheme '%s'", lurl.Scheme))
+}
+
 // NewConn returns a new Conn using conn for network I/O.
 func NewConn(conn net.Conn, isTLS bool) *Conn {
 	return &Conn{
@@ -242,18 +275,18 @@ func (l *Conn) StartTLS(config *tls.Config) error {
 		ber.PrintPacket(packet)
 	}
 
-	if resultCode, message := getLDAPResultCode(packet); resultCode == LDAPResultSuccess {
+	if err := GetLDAPError(packet); err == nil {
 		conn := tls.Client(l.conn, config)
 
-		if err := conn.Handshake(); err != nil {
+		if connErr := conn.Handshake(); connErr != nil {
 			l.Close()
-			return NewError(ErrorNetwork, fmt.Errorf("TLS handshake failed (%v)", err))
+			return NewError(ErrorNetwork, fmt.Errorf("TLS handshake failed (%v)", connErr))
 		}
 
 		l.isTLS = true
 		l.conn = conn
 	} else {
-		return NewError(resultCode, fmt.Errorf("ldap: cannot StartTLS (%s)", message))
+		return err
 	}
 	go l.reader()
 
diff --git a/vendor/github.com/go-ldap/ldap/control.go b/vendor/gopkg.in/ldap.v3/control.go
similarity index 75%
rename from vendor/github.com/go-ldap/ldap/control.go
rename to vendor/gopkg.in/ldap.v3/control.go
index 342f325ca61..4439a865d9c 100644
--- a/vendor/github.com/go-ldap/ldap/control.go
+++ b/vendor/gopkg.in/ldap.v3/control.go
@@ -1,7 +1,3 @@
-// Copyright 2011 The Go Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
 package ldap
 
 import (
@@ -22,13 +18,20 @@ const (
 	ControlTypeVChuPasswordWarning = "2.16.840.1.113730.3.4.5"
 	// ControlTypeManageDsaIT - https://tools.ietf.org/html/rfc3296
 	ControlTypeManageDsaIT = "2.16.840.1.113730.3.4.2"
+
+	// ControlTypeMicrosoftNotification - https://msdn.microsoft.com/en-us/library/aa366983(v=vs.85).aspx
+	ControlTypeMicrosoftNotification = "1.2.840.113556.1.4.528"
+	// ControlTypeMicrosoftShowDeleted - https://msdn.microsoft.com/en-us/library/aa366989(v=vs.85).aspx
+	ControlTypeMicrosoftShowDeleted = "1.2.840.113556.1.4.417"
 )
 
 // ControlTypeMap maps controls to text descriptions
 var ControlTypeMap = map[string]string{
-	ControlTypePaging:               "Paging",
-	ControlTypeBeheraPasswordPolicy: "Password Policy - Behera Draft",
-	ControlTypeManageDsaIT:          "Manage DSA IT",
+	ControlTypePaging:                "Paging",
+	ControlTypeBeheraPasswordPolicy:  "Password Policy - Behera Draft",
+	ControlTypeManageDsaIT:           "Manage DSA IT",
+	ControlTypeMicrosoftNotification: "Change Notification - Microsoft",
+	ControlTypeMicrosoftShowDeleted:  "Show Deleted Objects - Microsoft",
 }
 
 // Control defines an interface controls provide to encode and describe themselves
@@ -242,6 +245,64 @@ func NewControlManageDsaIT(Criticality bool) *ControlManageDsaIT {
 	return &ControlManageDsaIT{Criticality: Criticality}
 }
 
+// ControlMicrosoftNotification implements the control described in https://msdn.microsoft.com/en-us/library/aa366983(v=vs.85).aspx
+type ControlMicrosoftNotification struct{}
+
+// GetControlType returns the OID
+func (c *ControlMicrosoftNotification) GetControlType() string {
+	return ControlTypeMicrosoftNotification
+}
+
+// Encode returns the ber packet representation
+func (c *ControlMicrosoftNotification) Encode() *ber.Packet {
+	packet := ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagSequence, nil, "Control")
+	packet.AppendChild(ber.NewString(ber.ClassUniversal, ber.TypePrimitive, ber.TagOctetString, ControlTypeMicrosoftNotification, "Control Type ("+ControlTypeMap[ControlTypeMicrosoftNotification]+")"))
+
+	return packet
+}
+
+// String returns a human-readable description
+func (c *ControlMicrosoftNotification) String() string {
+	return fmt.Sprintf(
+		"Control Type: %s (%q)",
+		ControlTypeMap[ControlTypeMicrosoftNotification],
+		ControlTypeMicrosoftNotification)
+}
+
+// NewControlMicrosoftNotification returns a ControlMicrosoftNotification control
+func NewControlMicrosoftNotification() *ControlMicrosoftNotification {
+	return &ControlMicrosoftNotification{}
+}
+
+// ControlMicrosoftShowDeleted implements the control described in https://msdn.microsoft.com/en-us/library/aa366989(v=vs.85).aspx
+type ControlMicrosoftShowDeleted struct{}
+
+// GetControlType returns the OID
+func (c *ControlMicrosoftShowDeleted) GetControlType() string {
+	return ControlTypeMicrosoftShowDeleted
+}
+
+// Encode returns the ber packet representation
+func (c *ControlMicrosoftShowDeleted) Encode() *ber.Packet {
+	packet := ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagSequence, nil, "Control")
+	packet.AppendChild(ber.NewString(ber.ClassUniversal, ber.TypePrimitive, ber.TagOctetString, ControlTypeMicrosoftShowDeleted, "Control Type ("+ControlTypeMap[ControlTypeMicrosoftShowDeleted]+")"))
+
+	return packet
+}
+
+// String returns a human-readable description
+func (c *ControlMicrosoftShowDeleted) String() string {
+	return fmt.Sprintf(
+		"Control Type: %s (%q)",
+		ControlTypeMap[ControlTypeMicrosoftShowDeleted],
+		ControlTypeMicrosoftShowDeleted)
+}
+
+// NewControlMicrosoftShowDeleted returns a ControlMicrosoftShowDeleted control
+func NewControlMicrosoftShowDeleted() *ControlMicrosoftShowDeleted {
+	return &ControlMicrosoftShowDeleted{}
+}
+
 // FindControl returns the first control of the given type in the list, or nil
 func FindControl(controls []Control, controlType string) Control {
 	for _, c := range controls {
@@ -253,7 +314,7 @@ func FindControl(controls []Control, controlType string) Control {
 }
 
 // DecodeControl returns a control read from the given packet, or nil if no recognized control can be made
-func DecodeControl(packet *ber.Packet) Control {
+func DecodeControl(packet *ber.Packet) (Control, error) {
 	var (
 		ControlType = ""
 		Criticality = false
@@ -263,7 +324,7 @@ func DecodeControl(packet *ber.Packet) Control {
 	switch len(packet.Children) {
 	case 0:
 		// at least one child is required for control type
-		return nil
+		return nil, fmt.Errorf("at least one child is required for control type")
 
 	case 1:
 		// just type, no criticality or value
@@ -296,17 +357,20 @@ func DecodeControl(packet *ber.Packet) Control {
 
 	default:
 		// more than 3 children is invalid
-		return nil
+		return nil, fmt.Errorf("more than 3 children is invalid for controls")
 	}
 
 	switch ControlType {
 	case ControlTypeManageDsaIT:
-		return NewControlManageDsaIT(Criticality)
+		return NewControlManageDsaIT(Criticality), nil
 	case ControlTypePaging:
 		value.Description += " (Paging)"
 		c := new(ControlPaging)
 		if value.Value != nil {
-			valueChildren := ber.DecodePacket(value.Data.Bytes())
+			valueChildren, err := ber.DecodePacketErr(value.Data.Bytes())
+			if err != nil {
+				return nil, fmt.Errorf("failed to decode data bytes: %s", err)
+			}
 			value.Data.Truncate(0)
 			value.Value = nil
 			value.AppendChild(valueChildren)
@@ -318,12 +382,15 @@ func DecodeControl(packet *ber.Packet) Control {
 		c.PagingSize = uint32(value.Children[0].Value.(int64))
 		c.Cookie = value.Children[1].Data.Bytes()
 		value.Children[1].Value = c.Cookie
-		return c
+		return c, nil
 	case ControlTypeBeheraPasswordPolicy:
 		value.Description += " (Password Policy - Behera)"
 		c := NewControlBeheraPasswordPolicy()
 		if value.Value != nil {
-			valueChildren := ber.DecodePacket(value.Data.Bytes())
+			valueChildren, err := ber.DecodePacketErr(value.Data.Bytes())
+			if err != nil {
+				return nil, fmt.Errorf("failed to decode data bytes: %s", err)
+			}
 			value.Data.Truncate(0)
 			value.Value = nil
 			value.AppendChild(valueChildren)
@@ -335,7 +402,10 @@ func DecodeControl(packet *ber.Packet) Control {
 			if child.Tag == 0 {
 				//Warning
 				warningPacket := child.Children[0]
-				packet := ber.DecodePacket(warningPacket.Data.Bytes())
+				packet, err := ber.DecodePacketErr(warningPacket.Data.Bytes())
+				if err != nil {
+					return nil, fmt.Errorf("failed to decode data bytes: %s", err)
+				}
 				val, ok := packet.Value.(int64)
 				if ok {
 					if warningPacket.Tag == 0 {
@@ -350,7 +420,10 @@ func DecodeControl(packet *ber.Packet) Control {
 				}
 			} else if child.Tag == 1 {
 				// Error
-				packet := ber.DecodePacket(child.Data.Bytes())
+				packet, err := ber.DecodePacketErr(child.Data.Bytes())
+				if err != nil {
+					return nil, fmt.Errorf("failed to decode data bytes: %s", err)
+				}
 				val, ok := packet.Value.(int8)
 				if !ok {
 					// what to do?
@@ -361,22 +434,26 @@ func DecodeControl(packet *ber.Packet) Control {
 				c.ErrorString = BeheraPasswordPolicyErrorMap[c.Error]
 			}
 		}
-		return c
+		return c, nil
 	case ControlTypeVChuPasswordMustChange:
 		c := &ControlVChuPasswordMustChange{MustChange: true}
-		return c
+		return c, nil
 	case ControlTypeVChuPasswordWarning:
 		c := &ControlVChuPasswordWarning{Expire: -1}
 		expireStr := ber.DecodeString(value.Data.Bytes())
 
 		expire, err := strconv.ParseInt(expireStr, 10, 64)
 		if err != nil {
-			return nil
+			return nil, fmt.Errorf("failed to parse value as int: %s", err)
 		}
 		c.Expire = expire
 		value.Value = c.Expire
 
-		return c
+		return c, nil
+	case ControlTypeMicrosoftNotification:
+		return NewControlMicrosoftNotification(), nil
+	case ControlTypeMicrosoftShowDeleted:
+		return NewControlMicrosoftShowDeleted(), nil
 	default:
 		c := new(ControlString)
 		c.ControlType = ControlType
@@ -384,7 +461,7 @@ func DecodeControl(packet *ber.Packet) Control {
 		if value != nil {
 			c.ControlValue = value.Value.(string)
 		}
-		return c
+		return c, nil
 	}
 }
 
diff --git a/vendor/github.com/go-ldap/ldap/debug.go b/vendor/gopkg.in/ldap.v3/debug.go
similarity index 100%
rename from vendor/github.com/go-ldap/ldap/debug.go
rename to vendor/gopkg.in/ldap.v3/debug.go
diff --git a/vendor/github.com/go-ldap/ldap/del.go b/vendor/gopkg.in/ldap.v3/del.go
similarity index 91%
rename from vendor/github.com/go-ldap/ldap/del.go
rename to vendor/gopkg.in/ldap.v3/del.go
index 4fd63dc3f25..6f78beb18e5 100644
--- a/vendor/github.com/go-ldap/ldap/del.go
+++ b/vendor/gopkg.in/ldap.v3/del.go
@@ -40,7 +40,7 @@ func (l *Conn) Del(delRequest *DelRequest) error {
 	packet := ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagSequence, nil, "LDAP Request")
 	packet.AppendChild(ber.NewInteger(ber.ClassUniversal, ber.TypePrimitive, ber.TagInteger, l.nextMessageID(), "MessageID"))
 	packet.AppendChild(delRequest.encode())
-	if delRequest.Controls != nil {
+	if len(delRequest.Controls) > 0 {
 		packet.AppendChild(encodeControls(delRequest.Controls))
 	}
 
@@ -71,9 +71,9 @@ func (l *Conn) Del(delRequest *DelRequest) error {
 	}
 
 	if packet.Children[1].Tag == ApplicationDelResponse {
-		resultCode, resultDescription := getLDAPResultCode(packet)
-		if resultCode != 0 {
-			return NewError(resultCode, errors.New(resultDescription))
+		err := GetLDAPError(packet)
+		if err != nil {
+			return err
 		}
 	} else {
 		log.Printf("Unexpected Response: %d", packet.Children[1].Tag)
diff --git a/vendor/github.com/go-ldap/ldap/dn.go b/vendor/gopkg.in/ldap.v3/dn.go
similarity index 91%
rename from vendor/github.com/go-ldap/ldap/dn.go
rename to vendor/gopkg.in/ldap.v3/dn.go
index 34e9023af93..f89e73a9a6e 100644
--- a/vendor/github.com/go-ldap/ldap/dn.go
+++ b/vendor/gopkg.in/ldap.v3/dn.go
@@ -1,7 +1,3 @@
-// Copyright 2015 The Go Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-//
 // File contains DN parsing functionality
 //
 // https://tools.ietf.org/html/rfc4514
@@ -94,7 +90,8 @@ func ParseDN(str string) (*DN, error) {
 
 	for i := 0; i < len(str); i++ {
 		char := str[i]
-		if escaping {
+		switch {
+		case escaping:
 			unescapedTrailingSpaces = 0
 			escaping = false
 			switch char {
@@ -104,22 +101,22 @@ func ParseDN(str string) (*DN, error) {
 			}
 			// Not a special character, assume hex encoded octet
 			if len(str) == i+1 {
-				return nil, errors.New("Got corrupted escaped character")
+				return nil, errors.New("got corrupted escaped character")
 			}
 
 			dst := []byte{0}
 			n, err := enchex.Decode([]byte(dst), []byte(str[i:i+2]))
 			if err != nil {
-				return nil, fmt.Errorf("Failed to decode escaped character: %s", err)
+				return nil, fmt.Errorf("failed to decode escaped character: %s", err)
 			} else if n != 1 {
-				return nil, fmt.Errorf("Expected 1 byte when un-escaping, got %d", n)
+				return nil, fmt.Errorf("expected 1 byte when un-escaping, got %d", n)
 			}
 			buffer.WriteByte(dst[0])
 			i++
-		} else if char == '\\' {
+		case char == '\\':
 			unescapedTrailingSpaces = 0
 			escaping = true
-		} else if char == '=' {
+		case char == '=':
 			attribute.Type = stringFromBuffer()
 			// Special case: If the first character in the value is # the
 			// following data is BER encoded so we can just fast forward
@@ -135,13 +132,16 @@ func ParseDN(str string) (*DN, error) {
 				}
 				rawBER, err := enchex.DecodeString(data)
 				if err != nil {
-					return nil, fmt.Errorf("Failed to decode BER encoding: %s", err)
+					return nil, fmt.Errorf("failed to decode BER encoding: %s", err)
+				}
+				packet, err := ber.DecodePacketErr(rawBER)
+				if err != nil {
+					return nil, fmt.Errorf("failed to decode BER packet: %s", err)
 				}
-				packet := ber.DecodePacket(rawBER)
 				buffer.WriteString(packet.Data.String())
 				i += len(data) - 1
 			}
-		} else if char == ',' || char == '+' {
+		case char == ',' || char == '+':
 			// We're done with this RDN or value, push it
 			if len(attribute.Type) == 0 {
 				return nil, errors.New("incomplete type, value pair")
@@ -154,10 +154,10 @@ func ParseDN(str string) (*DN, error) {
 				rdn = new(RelativeDN)
 				rdn.Attributes = make([]*AttributeTypeAndValue, 0)
 			}
-		} else if char == ' ' && buffer.Len() == 0 {
+		case char == ' ' && buffer.Len() == 0:
 			// ignore unescaped leading spaces
 			continue
-		} else {
+		default:
 			if char == ' ' {
 				// Track unescaped spaces in case they are trailing and we need to remove them
 				unescapedTrailingSpaces++
diff --git a/vendor/github.com/go-ldap/ldap/doc.go b/vendor/gopkg.in/ldap.v3/doc.go
similarity index 100%
rename from vendor/github.com/go-ldap/ldap/doc.go
rename to vendor/gopkg.in/ldap.v3/doc.go
diff --git a/vendor/gopkg.in/ldap.v3/error.go b/vendor/gopkg.in/ldap.v3/error.go
new file mode 100644
index 00000000000..50ed8ab3fe7
--- /dev/null
+++ b/vendor/gopkg.in/ldap.v3/error.go
@@ -0,0 +1,234 @@
+package ldap
+
+import (
+	"fmt"
+
+	"gopkg.in/asn1-ber.v1"
+)
+
+// LDAP Result Codes
+const (
+	LDAPResultSuccess                            = 0
+	LDAPResultOperationsError                    = 1
+	LDAPResultProtocolError                      = 2
+	LDAPResultTimeLimitExceeded                  = 3
+	LDAPResultSizeLimitExceeded                  = 4
+	LDAPResultCompareFalse                       = 5
+	LDAPResultCompareTrue                        = 6
+	LDAPResultAuthMethodNotSupported             = 7
+	LDAPResultStrongAuthRequired                 = 8
+	LDAPResultReferral                           = 10
+	LDAPResultAdminLimitExceeded                 = 11
+	LDAPResultUnavailableCriticalExtension       = 12
+	LDAPResultConfidentialityRequired            = 13
+	LDAPResultSaslBindInProgress                 = 14
+	LDAPResultNoSuchAttribute                    = 16
+	LDAPResultUndefinedAttributeType             = 17
+	LDAPResultInappropriateMatching              = 18
+	LDAPResultConstraintViolation                = 19
+	LDAPResultAttributeOrValueExists             = 20
+	LDAPResultInvalidAttributeSyntax             = 21
+	LDAPResultNoSuchObject                       = 32
+	LDAPResultAliasProblem                       = 33
+	LDAPResultInvalidDNSyntax                    = 34
+	LDAPResultIsLeaf                             = 35
+	LDAPResultAliasDereferencingProblem          = 36
+	LDAPResultInappropriateAuthentication        = 48
+	LDAPResultInvalidCredentials                 = 49
+	LDAPResultInsufficientAccessRights           = 50
+	LDAPResultBusy                               = 51
+	LDAPResultUnavailable                        = 52
+	LDAPResultUnwillingToPerform                 = 53
+	LDAPResultLoopDetect                         = 54
+	LDAPResultSortControlMissing                 = 60
+	LDAPResultOffsetRangeError                   = 61
+	LDAPResultNamingViolation                    = 64
+	LDAPResultObjectClassViolation               = 65
+	LDAPResultNotAllowedOnNonLeaf                = 66
+	LDAPResultNotAllowedOnRDN                    = 67
+	LDAPResultEntryAlreadyExists                 = 68
+	LDAPResultObjectClassModsProhibited          = 69
+	LDAPResultResultsTooLarge                    = 70
+	LDAPResultAffectsMultipleDSAs                = 71
+	LDAPResultVirtualListViewErrorOrControlError = 76
+	LDAPResultOther                              = 80
+	LDAPResultServerDown                         = 81
+	LDAPResultLocalError                         = 82
+	LDAPResultEncodingError                      = 83
+	LDAPResultDecodingError                      = 84
+	LDAPResultTimeout                            = 85
+	LDAPResultAuthUnknown                        = 86
+	LDAPResultFilterError                        = 87
+	LDAPResultUserCanceled                       = 88
+	LDAPResultParamError                         = 89
+	LDAPResultNoMemory                           = 90
+	LDAPResultConnectError                       = 91
+	LDAPResultNotSupported                       = 92
+	LDAPResultControlNotFound                    = 93
+	LDAPResultNoResultsReturned                  = 94
+	LDAPResultMoreResultsToReturn                = 95
+	LDAPResultClientLoop                         = 96
+	LDAPResultReferralLimitExceeded              = 97
+	LDAPResultInvalidResponse                    = 100
+	LDAPResultAmbiguousResponse                  = 101
+	LDAPResultTLSNotSupported                    = 112
+	LDAPResultIntermediateResponse               = 113
+	LDAPResultUnknownType                        = 114
+	LDAPResultCanceled                           = 118
+	LDAPResultNoSuchOperation                    = 119
+	LDAPResultTooLate                            = 120
+	LDAPResultCannotCancel                       = 121
+	LDAPResultAssertionFailed                    = 122
+	LDAPResultAuthorizationDenied                = 123
+	LDAPResultSyncRefreshRequired                = 4096
+
+	ErrorNetwork            = 200
+	ErrorFilterCompile      = 201
+	ErrorFilterDecompile    = 202
+	ErrorDebugging          = 203
+	ErrorUnexpectedMessage  = 204
+	ErrorUnexpectedResponse = 205
+	ErrorEmptyPassword      = 206
+)
+
+// LDAPResultCodeMap contains string descriptions for LDAP error codes
+var LDAPResultCodeMap = map[uint16]string{
+	LDAPResultSuccess:                            "Success",
+	LDAPResultOperationsError:                    "Operations Error",
+	LDAPResultProtocolError:                      "Protocol Error",
+	LDAPResultTimeLimitExceeded:                  "Time Limit Exceeded",
+	LDAPResultSizeLimitExceeded:                  "Size Limit Exceeded",
+	LDAPResultCompareFalse:                       "Compare False",
+	LDAPResultCompareTrue:                        "Compare True",
+	LDAPResultAuthMethodNotSupported:             "Auth Method Not Supported",
+	LDAPResultStrongAuthRequired:                 "Strong Auth Required",
+	LDAPResultReferral:                           "Referral",
+	LDAPResultAdminLimitExceeded:                 "Admin Limit Exceeded",
+	LDAPResultUnavailableCriticalExtension:       "Unavailable Critical Extension",
+	LDAPResultConfidentialityRequired:            "Confidentiality Required",
+	LDAPResultSaslBindInProgress:                 "Sasl Bind In Progress",
+	LDAPResultNoSuchAttribute:                    "No Such Attribute",
+	LDAPResultUndefinedAttributeType:             "Undefined Attribute Type",
+	LDAPResultInappropriateMatching:              "Inappropriate Matching",
+	LDAPResultConstraintViolation:                "Constraint Violation",
+	LDAPResultAttributeOrValueExists:             "Attribute Or Value Exists",
+	LDAPResultInvalidAttributeSyntax:             "Invalid Attribute Syntax",
+	LDAPResultNoSuchObject:                       "No Such Object",
+	LDAPResultAliasProblem:                       "Alias Problem",
+	LDAPResultInvalidDNSyntax:                    "Invalid DN Syntax",
+	LDAPResultIsLeaf:                             "Is Leaf",
+	LDAPResultAliasDereferencingProblem:          "Alias Dereferencing Problem",
+	LDAPResultInappropriateAuthentication:        "Inappropriate Authentication",
+	LDAPResultInvalidCredentials:                 "Invalid Credentials",
+	LDAPResultInsufficientAccessRights:           "Insufficient Access Rights",
+	LDAPResultBusy:                               "Busy",
+	LDAPResultUnavailable:                        "Unavailable",
+	LDAPResultUnwillingToPerform:                 "Unwilling To Perform",
+	LDAPResultLoopDetect:                         "Loop Detect",
+	LDAPResultSortControlMissing:                 "Sort Control Missing",
+	LDAPResultOffsetRangeError:                   "Result Offset Range Error",
+	LDAPResultNamingViolation:                    "Naming Violation",
+	LDAPResultObjectClassViolation:               "Object Class Violation",
+	LDAPResultResultsTooLarge:                    "Results Too Large",
+	LDAPResultNotAllowedOnNonLeaf:                "Not Allowed On Non Leaf",
+	LDAPResultNotAllowedOnRDN:                    "Not Allowed On RDN",
+	LDAPResultEntryAlreadyExists:                 "Entry Already Exists",
+	LDAPResultObjectClassModsProhibited:          "Object Class Mods Prohibited",
+	LDAPResultAffectsMultipleDSAs:                "Affects Multiple DSAs",
+	LDAPResultVirtualListViewErrorOrControlError: "Failed because of a problem related to the virtual list view",
+	LDAPResultOther:                              "Other",
+	LDAPResultServerDown:                         "Cannot establish a connection",
+	LDAPResultLocalError:                         "An error occurred",
+	LDAPResultEncodingError:                      "LDAP encountered an error while encoding",
+	LDAPResultDecodingError:                      "LDAP encountered an error while decoding",
+	LDAPResultTimeout:                            "LDAP timeout while waiting for a response from the server",
+	LDAPResultAuthUnknown:                        "The auth method requested in a bind request is unknown",
+	LDAPResultFilterError:                        "An error occurred while encoding the given search filter",
+	LDAPResultUserCanceled:                       "The user canceled the operation",
+	LDAPResultParamError:                         "An invalid parameter was specified",
+	LDAPResultNoMemory:                           "Out of memory error",
+	LDAPResultConnectError:                       "A connection to the server could not be established",
+	LDAPResultNotSupported:                       "An attempt has been made to use a feature not supported LDAP",
+	LDAPResultControlNotFound:                    "The controls required to perform the requested operation were not found",
+	LDAPResultNoResultsReturned:                  "No results were returned from the server",
+	LDAPResultMoreResultsToReturn:                "There are more results in the chain of results",
+	LDAPResultClientLoop:                         "A loop has been detected. For example when following referrals",
+	LDAPResultReferralLimitExceeded:              "The referral hop limit has been exceeded",
+	LDAPResultCanceled:                           "Operation was canceled",
+	LDAPResultNoSuchOperation:                    "Server has no knowledge of the operation requested for cancellation",
+	LDAPResultTooLate:                            "Too late to cancel the outstanding operation",
+	LDAPResultCannotCancel:                       "The identified operation does not support cancellation or the cancel operation cannot be performed",
+	LDAPResultAssertionFailed:                    "An assertion control given in the LDAP operation evaluated to false causing the operation to not be performed",
+	LDAPResultSyncRefreshRequired:                "Refresh Required",
+	LDAPResultInvalidResponse:                    "Invalid Response",
+	LDAPResultAmbiguousResponse:                  "Ambiguous Response",
+	LDAPResultTLSNotSupported:                    "Tls Not Supported",
+	LDAPResultIntermediateResponse:               "Intermediate Response",
+	LDAPResultUnknownType:                        "Unknown Type",
+	LDAPResultAuthorizationDenied:                "Authorization Denied",
+
+	ErrorNetwork:            "Network Error",
+	ErrorFilterCompile:      "Filter Compile Error",
+	ErrorFilterDecompile:    "Filter Decompile Error",
+	ErrorDebugging:          "Debugging Error",
+	ErrorUnexpectedMessage:  "Unexpected Message",
+	ErrorUnexpectedResponse: "Unexpected Response",
+	ErrorEmptyPassword:      "Empty password not allowed by the client",
+}
+
+// Error holds LDAP error information
+type Error struct {
+	// Err is the underlying error
+	Err error
+	// ResultCode is the LDAP error code
+	ResultCode uint16
+	// MatchedDN is the matchedDN returned if any
+	MatchedDN string
+}
+
+func (e *Error) Error() string {
+	return fmt.Sprintf("LDAP Result Code %d %q: %s", e.ResultCode, LDAPResultCodeMap[e.ResultCode], e.Err.Error())
+}
+
+// GetLDAPError creates an Error out of a BER packet representing a LDAPResult
+// The return is an error object. It can be casted to a Error structure.
+// This function returns nil if resultCode in the LDAPResult sequence is success(0).
+func GetLDAPError(packet *ber.Packet) error {
+	if packet == nil {
+		return &Error{ResultCode: ErrorUnexpectedResponse, Err: fmt.Errorf("Empty packet")}
+	} else if len(packet.Children) >= 2 {
+		response := packet.Children[1]
+		if response == nil {
+			return &Error{ResultCode: ErrorUnexpectedResponse, Err: fmt.Errorf("Empty response in packet")}
+		}
+		if response.ClassType == ber.ClassApplication && response.TagType == ber.TypeConstructed && len(response.Children) >= 3 {
+			resultCode := uint16(response.Children[0].Value.(int64))
+			if resultCode == 0 { // No error
+				return nil
+			}
+			return &Error{ResultCode: resultCode, MatchedDN: response.Children[1].Value.(string),
+				Err: fmt.Errorf(response.Children[2].Value.(string))}
+		}
+	}
+
+	return &Error{ResultCode: ErrorNetwork, Err: fmt.Errorf("Invalid packet format")}
+}
+
+// NewError creates an LDAP error with the given code and underlying error
+func NewError(resultCode uint16, err error) error {
+	return &Error{ResultCode: resultCode, Err: err}
+}
+
+// IsErrorWithCode returns true if the given error is an LDAP error with the given result code
+func IsErrorWithCode(err error, desiredResultCode uint16) bool {
+	if err == nil {
+		return false
+	}
+
+	serverError, ok := err.(*Error)
+	if !ok {
+		return false
+	}
+
+	return serverError.ResultCode == desiredResultCode
+}
diff --git a/vendor/github.com/go-ldap/ldap/filter.go b/vendor/gopkg.in/ldap.v3/filter.go
similarity index 98%
rename from vendor/github.com/go-ldap/ldap/filter.go
rename to vendor/gopkg.in/ldap.v3/filter.go
index 3858a2865c0..4cc4207bec2 100644
--- a/vendor/github.com/go-ldap/ldap/filter.go
+++ b/vendor/gopkg.in/ldap.v3/filter.go
@@ -1,7 +1,3 @@
-// Copyright 2011 The Go Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
 package ldap
 
 import (
diff --git a/vendor/github.com/go-ldap/ldap/ldap.go b/vendor/gopkg.in/ldap.v3/ldap.go
similarity index 82%
rename from vendor/github.com/go-ldap/ldap/ldap.go
rename to vendor/gopkg.in/ldap.v3/ldap.go
index 49692475697..d7666676fe5 100644
--- a/vendor/github.com/go-ldap/ldap/ldap.go
+++ b/vendor/gopkg.in/ldap.v3/ldap.go
@@ -1,11 +1,8 @@
-// Copyright 2011 The Go Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
 package ldap
 
 import (
 	"errors"
+	"fmt"
 	"io/ioutil"
 	"os"
 
@@ -101,13 +98,13 @@ func addLDAPDescriptions(packet *ber.Packet) (err error) {
 
 	switch application {
 	case ApplicationBindRequest:
-		addRequestDescriptions(packet)
+		err = addRequestDescriptions(packet)
 	case ApplicationBindResponse:
-		addDefaultLDAPResponseDescriptions(packet)
+		err = addDefaultLDAPResponseDescriptions(packet)
 	case ApplicationUnbindRequest:
-		addRequestDescriptions(packet)
+		err = addRequestDescriptions(packet)
 	case ApplicationSearchRequest:
-		addRequestDescriptions(packet)
+		err = addRequestDescriptions(packet)
 	case ApplicationSearchResultEntry:
 		packet.Children[1].Children[0].Description = "Object Name"
 		packet.Children[1].Children[1].Description = "Attributes"
@@ -120,37 +117,37 @@ func addLDAPDescriptions(packet *ber.Packet) (err error) {
 			}
 		}
 		if len(packet.Children) == 3 {
-			addControlDescriptions(packet.Children[2])
+			err = addControlDescriptions(packet.Children[2])
 		}
 	case ApplicationSearchResultDone:
-		addDefaultLDAPResponseDescriptions(packet)
+		err = addDefaultLDAPResponseDescriptions(packet)
 	case ApplicationModifyRequest:
-		addRequestDescriptions(packet)
+		err = addRequestDescriptions(packet)
 	case ApplicationModifyResponse:
 	case ApplicationAddRequest:
-		addRequestDescriptions(packet)
+		err = addRequestDescriptions(packet)
 	case ApplicationAddResponse:
 	case ApplicationDelRequest:
-		addRequestDescriptions(packet)
+		err = addRequestDescriptions(packet)
 	case ApplicationDelResponse:
 	case ApplicationModifyDNRequest:
-		addRequestDescriptions(packet)
+		err = addRequestDescriptions(packet)
 	case ApplicationModifyDNResponse:
 	case ApplicationCompareRequest:
-		addRequestDescriptions(packet)
+		err = addRequestDescriptions(packet)
 	case ApplicationCompareResponse:
 	case ApplicationAbandonRequest:
-		addRequestDescriptions(packet)
+		err = addRequestDescriptions(packet)
 	case ApplicationSearchResultReference:
 	case ApplicationExtendedRequest:
-		addRequestDescriptions(packet)
+		err = addRequestDescriptions(packet)
 	case ApplicationExtendedResponse:
 	}
 
-	return nil
+	return err
 }
 
-func addControlDescriptions(packet *ber.Packet) {
+func addControlDescriptions(packet *ber.Packet) error {
 	packet.Description = "Controls"
 	for _, child := range packet.Children {
 		var value *ber.Packet
@@ -159,7 +156,7 @@ func addControlDescriptions(packet *ber.Packet) {
 		switch len(child.Children) {
 		case 0:
 			// at least one child is required for control type
-			continue
+			return fmt.Errorf("at least one child is required for control type")
 
 		case 1:
 			// just type, no criticality or value
@@ -188,8 +185,9 @@ func addControlDescriptions(packet *ber.Packet) {
 
 		default:
 			// more than 3 children is invalid
-			continue
+			return fmt.Errorf("more than 3 children for control packet found")
 		}
+
 		if value == nil {
 			continue
 		}
@@ -197,7 +195,10 @@ func addControlDescriptions(packet *ber.Packet) {
 		case ControlTypePaging:
 			value.Description += " (Paging)"
 			if value.Value != nil {
-				valueChildren := ber.DecodePacket(value.Data.Bytes())
+				valueChildren, err := ber.DecodePacketErr(value.Data.Bytes())
+				if err != nil {
+					return fmt.Errorf("failed to decode data bytes: %s", err)
+				}
 				value.Data.Truncate(0)
 				value.Value = nil
 				valueChildren.Children[1].Value = valueChildren.Children[1].Data.Bytes()
@@ -210,7 +211,10 @@ func addControlDescriptions(packet *ber.Packet) {
 		case ControlTypeBeheraPasswordPolicy:
 			value.Description += " (Password Policy - Behera Draft)"
 			if value.Value != nil {
-				valueChildren := ber.DecodePacket(value.Data.Bytes())
+				valueChildren, err := ber.DecodePacketErr(value.Data.Bytes())
+				if err != nil {
+					return fmt.Errorf("failed to decode data bytes: %s", err)
+				}
 				value.Data.Truncate(0)
 				value.Value = nil
 				value.AppendChild(valueChildren)
@@ -220,7 +224,10 @@ func addControlDescriptions(packet *ber.Packet) {
 				if child.Tag == 0 {
 					//Warning
 					warningPacket := child.Children[0]
-					packet := ber.DecodePacket(warningPacket.Data.Bytes())
+					packet, err := ber.DecodePacketErr(warningPacket.Data.Bytes())
+					if err != nil {
+						return fmt.Errorf("failed to decode data bytes: %s", err)
+					}
 					val, ok := packet.Value.(int64)
 					if ok {
 						if warningPacket.Tag == 0 {
@@ -235,7 +242,10 @@ func addControlDescriptions(packet *ber.Packet) {
 					}
 				} else if child.Tag == 1 {
 					// Error
-					packet := ber.DecodePacket(child.Data.Bytes())
+					packet, err := ber.DecodePacketErr(child.Data.Bytes())
+					if err != nil {
+						return fmt.Errorf("failed to decode data bytes: %s", err)
+					}
 					val, ok := packet.Value.(int8)
 					if !ok {
 						val = -1
@@ -246,28 +256,31 @@ func addControlDescriptions(packet *ber.Packet) {
 			}
 		}
 	}
+	return nil
 }
 
-func addRequestDescriptions(packet *ber.Packet) {
+func addRequestDescriptions(packet *ber.Packet) error {
 	packet.Description = "LDAP Request"
 	packet.Children[0].Description = "Message ID"
 	packet.Children[1].Description = ApplicationMap[uint8(packet.Children[1].Tag)]
 	if len(packet.Children) == 3 {
-		addControlDescriptions(packet.Children[2])
+		return addControlDescriptions(packet.Children[2])
 	}
+	return nil
 }
 
-func addDefaultLDAPResponseDescriptions(packet *ber.Packet) {
-	resultCode, _ := getLDAPResultCode(packet)
-	packet.Children[1].Children[0].Description = "Result Code (" + LDAPResultCodeMap[resultCode] + ")"
-	packet.Children[1].Children[1].Description = "Matched DN"
+func addDefaultLDAPResponseDescriptions(packet *ber.Packet) error {
+	err := GetLDAPError(packet)
+	packet.Children[1].Children[0].Description = "Result Code (" + LDAPResultCodeMap[err.(*Error).ResultCode] + ")"
+	packet.Children[1].Children[1].Description = "Matched DN (" + err.(*Error).MatchedDN + ")"
 	packet.Children[1].Children[2].Description = "Error Message"
 	if len(packet.Children[1].Children) > 3 {
 		packet.Children[1].Children[3].Description = "Referral"
 	}
 	if len(packet.Children) == 3 {
-		addControlDescriptions(packet.Children[2])
+		return addControlDescriptions(packet.Children[2])
 	}
+	return nil
 }
 
 // DebugBinaryFile reads and prints packets from the given filename
@@ -277,8 +290,13 @@ func DebugBinaryFile(fileName string) error {
 		return NewError(ErrorDebugging, err)
 	}
 	ber.PrintBytes(os.Stdout, file, "")
-	packet := ber.DecodePacket(file)
-	addLDAPDescriptions(packet)
+	packet, err := ber.DecodePacketErr(file)
+	if err != nil {
+		return fmt.Errorf("failed to decode packet: %s", err)
+	}
+	if err := addLDAPDescriptions(packet); err != nil {
+		return err
+	}
 	ber.PrintPacket(packet)
 
 	return nil
diff --git a/vendor/gopkg.in/ldap.v3/moddn.go b/vendor/gopkg.in/ldap.v3/moddn.go
new file mode 100644
index 00000000000..803279d262a
--- /dev/null
+++ b/vendor/gopkg.in/ldap.v3/moddn.go
@@ -0,0 +1,104 @@
+// Package ldap - moddn.go contains ModifyDN functionality
+//
+// https://tools.ietf.org/html/rfc4511
+// ModifyDNRequest ::= [APPLICATION 12] SEQUENCE {
+//      entry           LDAPDN,
+//      newrdn          RelativeLDAPDN,
+//      deleteoldrdn    BOOLEAN,
+//      newSuperior     [0] LDAPDN OPTIONAL }
+//
+//
+package ldap
+
+import (
+	"errors"
+	"log"
+
+	"gopkg.in/asn1-ber.v1"
+)
+
+// ModifyDNRequest holds the request to modify a DN
+type ModifyDNRequest struct {
+	DN           string
+	NewRDN       string
+	DeleteOldRDN bool
+	NewSuperior  string
+}
+
+// NewModifyDNRequest creates a new request which can be passed to ModifyDN().
+//
+// To move an object in the tree, set the "newSup" to the new parent entry DN. Use an
+// empty string for just changing the object's RDN.
+//
+// For moving the object without renaming, the "rdn" must be the first
+// RDN of the given DN.
+//
+// A call like
+//   mdnReq := NewModifyDNRequest("uid=someone,dc=example,dc=org", "uid=newname", true, "")
+// will setup the request to just rename uid=someone,dc=example,dc=org to
+// uid=newname,dc=example,dc=org.
+func NewModifyDNRequest(dn string, rdn string, delOld bool, newSup string) *ModifyDNRequest {
+	return &ModifyDNRequest{
+		DN:           dn,
+		NewRDN:       rdn,
+		DeleteOldRDN: delOld,
+		NewSuperior:  newSup,
+	}
+}
+
+func (m ModifyDNRequest) encode() *ber.Packet {
+	request := ber.Encode(ber.ClassApplication, ber.TypeConstructed, ApplicationModifyDNRequest, nil, "Modify DN Request")
+	request.AppendChild(ber.NewString(ber.ClassUniversal, ber.TypePrimitive, ber.TagOctetString, m.DN, "DN"))
+	request.AppendChild(ber.NewString(ber.ClassUniversal, ber.TypePrimitive, ber.TagOctetString, m.NewRDN, "New RDN"))
+	request.AppendChild(ber.NewBoolean(ber.ClassUniversal, ber.TypePrimitive, ber.TagBoolean, m.DeleteOldRDN, "Delete old RDN"))
+	if m.NewSuperior != "" {
+		request.AppendChild(ber.NewString(ber.ClassContext, ber.TypePrimitive, 0, m.NewSuperior, "New Superior"))
+	}
+	return request
+}
+
+// ModifyDN renames the given DN and optionally move to another base (when the "newSup" argument
+// to NewModifyDNRequest() is not "").
+func (l *Conn) ModifyDN(m *ModifyDNRequest) error {
+	packet := ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagSequence, nil, "LDAP Request")
+	packet.AppendChild(ber.NewInteger(ber.ClassUniversal, ber.TypePrimitive, ber.TagInteger, l.nextMessageID(), "MessageID"))
+	packet.AppendChild(m.encode())
+
+	l.Debug.PrintPacket(packet)
+
+	msgCtx, err := l.sendMessage(packet)
+	if err != nil {
+		return err
+	}
+	defer l.finishMessage(msgCtx)
+
+	l.Debug.Printf("%d: waiting for response", msgCtx.id)
+	packetResponse, ok := <-msgCtx.responses
+	if !ok {
+		return NewError(ErrorNetwork, errors.New("ldap: channel closed"))
+	}
+	packet, err = packetResponse.ReadPacket()
+	l.Debug.Printf("%d: got response %p", msgCtx.id, packet)
+	if err != nil {
+		return err
+	}
+
+	if l.Debug {
+		if err := addLDAPDescriptions(packet); err != nil {
+			return err
+		}
+		ber.PrintPacket(packet)
+	}
+
+	if packet.Children[1].Tag == ApplicationModifyDNResponse {
+		err := GetLDAPError(packet)
+		if err != nil {
+			return err
+		}
+	} else {
+		log.Printf("Unexpected Response: %d", packet.Children[1].Tag)
+	}
+
+	l.Debug.Printf("%d: returning", msgCtx.id)
+	return nil
+}
diff --git a/vendor/github.com/go-ldap/ldap/modify.go b/vendor/gopkg.in/ldap.v3/modify.go
similarity index 63%
rename from vendor/github.com/go-ldap/ldap/modify.go
rename to vendor/gopkg.in/ldap.v3/modify.go
index e4ab6cefc7e..d83e6221fdd 100644
--- a/vendor/github.com/go-ldap/ldap/modify.go
+++ b/vendor/gopkg.in/ldap.v3/modify.go
@@ -1,7 +1,3 @@
-// Copyright 2014 The Go Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-//
 // File contains Modify functionality
 //
 // https://tools.ietf.org/html/rfc4511
@@ -62,54 +58,56 @@ func (p *PartialAttribute) encode() *ber.Packet {
 	return seq
 }
 
+// Change for a ModifyRequest as defined in https://tools.ietf.org/html/rfc4511
+type Change struct {
+	// Operation is the type of change to be made
+	Operation uint
+	// Modification is the attribute to be modified
+	Modification PartialAttribute
+}
+
+func (c *Change) encode() *ber.Packet {
+	change := ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagSequence, nil, "Change")
+	change.AppendChild(ber.NewInteger(ber.ClassUniversal, ber.TypePrimitive, ber.TagEnumerated, uint64(c.Operation), "Operation"))
+	change.AppendChild(c.Modification.encode())
+	return change
+}
+
 // ModifyRequest as defined in https://tools.ietf.org/html/rfc4511
 type ModifyRequest struct {
 	// DN is the distinguishedName of the directory entry to modify
 	DN string
-	// AddAttributes contain the attributes to add
-	AddAttributes []PartialAttribute
-	// DeleteAttributes contain the attributes to delete
-	DeleteAttributes []PartialAttribute
-	// ReplaceAttributes contain the attributes to replace
-	ReplaceAttributes []PartialAttribute
+	// Changes contain the attributes to modify
+	Changes []Change
+	// Controls hold optional controls to send with the request
+	Controls []Control
 }
 
-// Add inserts the given attribute to the list of attributes to add
+// Add appends the given attribute to the list of changes to be made
 func (m *ModifyRequest) Add(attrType string, attrVals []string) {
-	m.AddAttributes = append(m.AddAttributes, PartialAttribute{Type: attrType, Vals: attrVals})
+	m.appendChange(AddAttribute, attrType, attrVals)
 }
 
-// Delete inserts the given attribute to the list of attributes to delete
+// Delete appends the given attribute to the list of changes to be made
 func (m *ModifyRequest) Delete(attrType string, attrVals []string) {
-	m.DeleteAttributes = append(m.DeleteAttributes, PartialAttribute{Type: attrType, Vals: attrVals})
+	m.appendChange(DeleteAttribute, attrType, attrVals)
 }
 
-// Replace inserts the given attribute to the list of attributes to replace
+// Replace appends the given attribute to the list of changes to be made
 func (m *ModifyRequest) Replace(attrType string, attrVals []string) {
-	m.ReplaceAttributes = append(m.ReplaceAttributes, PartialAttribute{Type: attrType, Vals: attrVals})
+	m.appendChange(ReplaceAttribute, attrType, attrVals)
+}
+
+func (m *ModifyRequest) appendChange(operation uint, attrType string, attrVals []string) {
+	m.Changes = append(m.Changes, Change{operation, PartialAttribute{Type: attrType, Vals: attrVals}})
 }
 
 func (m ModifyRequest) encode() *ber.Packet {
 	request := ber.Encode(ber.ClassApplication, ber.TypeConstructed, ApplicationModifyRequest, nil, "Modify Request")
 	request.AppendChild(ber.NewString(ber.ClassUniversal, ber.TypePrimitive, ber.TagOctetString, m.DN, "DN"))
 	changes := ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagSequence, nil, "Changes")
-	for _, attribute := range m.AddAttributes {
-		change := ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagSequence, nil, "Change")
-		change.AppendChild(ber.NewInteger(ber.ClassUniversal, ber.TypePrimitive, ber.TagEnumerated, uint64(AddAttribute), "Operation"))
-		change.AppendChild(attribute.encode())
-		changes.AppendChild(change)
-	}
-	for _, attribute := range m.DeleteAttributes {
-		change := ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagSequence, nil, "Change")
-		change.AppendChild(ber.NewInteger(ber.ClassUniversal, ber.TypePrimitive, ber.TagEnumerated, uint64(DeleteAttribute), "Operation"))
-		change.AppendChild(attribute.encode())
-		changes.AppendChild(change)
-	}
-	for _, attribute := range m.ReplaceAttributes {
-		change := ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagSequence, nil, "Change")
-		change.AppendChild(ber.NewInteger(ber.ClassUniversal, ber.TypePrimitive, ber.TagEnumerated, uint64(ReplaceAttribute), "Operation"))
-		change.AppendChild(attribute.encode())
-		changes.AppendChild(change)
+	for _, change := range m.Changes {
+		changes.AppendChild(change.encode())
 	}
 	request.AppendChild(changes)
 	return request
@@ -118,9 +116,11 @@ func (m ModifyRequest) encode() *ber.Packet {
 // NewModifyRequest creates a modify request for the given DN
 func NewModifyRequest(
 	dn string,
+	controls []Control,
 ) *ModifyRequest {
 	return &ModifyRequest{
-		DN: dn,
+		DN:       dn,
+		Controls: controls,
 	}
 }
 
@@ -129,6 +129,9 @@ func (l *Conn) Modify(modifyRequest *ModifyRequest) error {
 	packet := ber.Encode(ber.ClassUniversal, ber.TypeConstructed, ber.TagSequence, nil, "LDAP Request")
 	packet.AppendChild(ber.NewInteger(ber.ClassUniversal, ber.TypePrimitive, ber.TagInteger, l.nextMessageID(), "MessageID"))
 	packet.AppendChild(modifyRequest.encode())
+	if len(modifyRequest.Controls) > 0 {
+		packet.AppendChild(encodeControls(modifyRequest.Controls))
+	}
 
 	l.Debug.PrintPacket(packet)
 
@@ -157,9 +160,9 @@ func (l *Conn) Modify(modifyRequest *ModifyRequest) error {
 	}
 
 	if packet.Children[1].Tag == ApplicationModifyResponse {
-		resultCode, resultDescription := getLDAPResultCode(packet)
-		if resultCode != 0 {
-			return NewError(resultCode, errors.New(resultDescription))
+		err := GetLDAPError(packet)
+		if err != nil {
+			return err
 		}
 	} else {
 		log.Printf("Unexpected Response: %d", packet.Children[1].Tag)
diff --git a/vendor/github.com/go-ldap/ldap/passwdmodify.go b/vendor/gopkg.in/ldap.v3/passwdmodify.go
similarity index 92%
rename from vendor/github.com/go-ldap/ldap/passwdmodify.go
rename to vendor/gopkg.in/ldap.v3/passwdmodify.go
index 7d8246fd189..06bc21db135 100644
--- a/vendor/github.com/go-ldap/ldap/passwdmodify.go
+++ b/vendor/gopkg.in/ldap.v3/passwdmodify.go
@@ -32,6 +32,8 @@ type PasswordModifyRequest struct {
 type PasswordModifyResult struct {
 	// GeneratedPassword holds a password generated by the server, if present
 	GeneratedPassword string
+	// Referral are the returned referral
+	Referral string
 }
 
 func (r *PasswordModifyRequest) encode() (*ber.Packet, error) {
@@ -124,12 +126,19 @@ func (l *Conn) PasswordModify(passwordModifyRequest *PasswordModifyRequest) (*Pa
 	}
 
 	if packet.Children[1].Tag == ApplicationExtendedResponse {
-		resultCode, resultDescription := getLDAPResultCode(packet)
-		if resultCode != 0 {
-			return nil, NewError(resultCode, errors.New(resultDescription))
+		err := GetLDAPError(packet)
+		if err != nil {
+			if IsErrorWithCode(err, LDAPResultReferral) {
+				for _, child := range packet.Children[1].Children {
+					if child.Tag == 3 {
+						result.Referral = child.Children[0].Value.(string)
+					}
+				}
+			}
+			return result, err
 		}
 	} else {
-		return nil, NewError(ErrorUnexpectedResponse, fmt.Errorf("Unexpected Response: %d", packet.Children[1].Tag))
+		return nil, NewError(ErrorUnexpectedResponse, fmt.Errorf("unexpected Response: %d", packet.Children[1].Tag))
 	}
 
 	extendedResponse := packet.Children[1]
diff --git a/vendor/github.com/go-ldap/ldap/search.go b/vendor/gopkg.in/ldap.v3/search.go
similarity index 96%
rename from vendor/github.com/go-ldap/ldap/search.go
rename to vendor/gopkg.in/ldap.v3/search.go
index 2a99894c94b..3aa6dac0c26 100644
--- a/vendor/github.com/go-ldap/ldap/search.go
+++ b/vendor/gopkg.in/ldap.v3/search.go
@@ -1,7 +1,3 @@
-// Copyright 2011 The Go Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-//
 // File contains Search functionality
 //
 // https://tools.ietf.org/html/rfc4511
@@ -313,10 +309,10 @@ func (l *Conn) SearchWithPaging(searchRequest *SearchRequest, pagingSize uint32)
 	} else {
 		castControl, ok := control.(*ControlPaging)
 		if !ok {
-			return nil, fmt.Errorf("Expected paging control to be of type *ControlPaging, got %v", control)
+			return nil, fmt.Errorf("expected paging control to be of type *ControlPaging, got %v", control)
 		}
 		if castControl.PagingSize != pagingSize {
-			return nil, fmt.Errorf("Paging size given in search request (%d) conflicts with size given in search call (%d)", castControl.PagingSize, pagingSize)
+			return nil, fmt.Errorf("paging size given in search request (%d) conflicts with size given in search call (%d)", castControl.PagingSize, pagingSize)
 		}
 		pagingControl = castControl
 	}
@@ -379,7 +375,7 @@ func (l *Conn) Search(searchRequest *SearchRequest) (*SearchResult, error) {
 	}
 	packet.AppendChild(encodedSearchRequest)
 	// encode search controls
-	if searchRequest.Controls != nil {
+	if len(searchRequest.Controls) > 0 {
 		packet.AppendChild(encodeControls(searchRequest.Controls))
 	}
 
@@ -431,13 +427,17 @@ func (l *Conn) Search(searchRequest *SearchRequest) (*SearchResult, error) {
 			}
 			result.Entries = append(result.Entries, entry)
 		case 5:
-			resultCode, resultDescription := getLDAPResultCode(packet)
-			if resultCode != 0 {
-				return result, NewError(resultCode, errors.New(resultDescription))
+			err := GetLDAPError(packet)
+			if err != nil {
+				return nil, err
 			}
 			if len(packet.Children) == 3 {
 				for _, child := range packet.Children[2].Children {
-					result.Controls = append(result.Controls, DecodeControl(child))
+					decodedChild, err := DecodeControl(child)
+					if err != nil {
+						return nil, fmt.Errorf("failed to decode child control: %s", err)
+					}
+					result.Controls = append(result.Controls, decodedChild)
 				}
 			}
 			foundSearchResultDone = true
diff --git a/yarn.lock b/yarn.lock
index 8346f282241..9bc6c7dcd63 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -653,6 +653,13 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.1.0"
 
+"@babel/runtime@^7.1.2":
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.1.5.tgz#4170907641cf1f61508f563ece3725150cc6fe39"
+  integrity sha512-xKnPpXG/pvK1B90JkwwxSGii90rQGKtzcMt2gI5G6+M0REXaq6rOHsGC2ay6/d0Uje7zzvSzjEzfR3ENhFlrfA==
+  dependencies:
+    regenerator-runtime "^0.12.0"
+
 "@babel/template@^7.1.0", "@babel/template@^7.1.2":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.1.2.tgz#090484a574fef5a2d2d7726a674eceda5c5b5644"
@@ -779,6 +786,19 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
   integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
 
+"@torkelo/react-select@2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@torkelo/react-select/-/react-select-2.1.1.tgz#0ca7027b4429816178df81e33ad0894699e262f1"
+  integrity sha512-dt+S8Myn+1Wo/UJ/kQJzDa7ztd7dpL4ueT0eMFqsGRdvMobl9xathBUZu5YMNpz7byFltrYJaPMotnPHd13rtg==
+  dependencies:
+    classnames "^2.2.5"
+    emotion "^9.1.2"
+    memoize-one "^4.0.0"
+    prop-types "^15.6.0"
+    raf "^3.4.0"
+    react-input-autosize "^2.2.1"
+    react-transition-group "^2.2.1"
+
 "@types/cheerio@*":
   version "0.22.9"
   resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.9.tgz#b5990152604c2ada749b7f88cab3476f21f39d7b"
@@ -1031,7 +1051,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@*", "@types/react-dom@^16.0.7":
+"@types/react-dom@*":
   version "16.0.8"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.8.tgz#6e1366ed629cadf55860cbfcc25db533f5d2fa7d"
   integrity sha512-WF/KAOia7pskV+J8f+UlNuFeCRkJuJAkyyeYPPtNe6suw0y7cWyUP/DPdPXsGUwQEkv2qlLVSrgVaoCm/PmO0Q==
@@ -1039,6 +1059,14 @@
     "@types/node" "*"
     "@types/react" "*"
 
+"@types/react-dom@^16.0.9":
+  version "16.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.9.tgz#73ceb7abe6703822eab6600e65c5c52efd07fb91"
+  integrity sha512-4Z0bW+75zeQgsEg7RaNuS1k9MKhci7oQqZXxrV5KUGIyXZHHAAL3KA4rjhdH8o6foZ5xsRMSqkoM5A3yRVPR5w==
+  dependencies:
+    "@types/node" "*"
+    "@types/react" "*"
+
 "@types/react-select@^2.0.4":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-2.0.4.tgz#232c735539412acdc163751157c0a1c7d8aca40b"
@@ -1055,10 +1083,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.4.14":
-  version "16.4.16"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.16.tgz#99f91b1200ae8c2062030402006d3b3c3a177043"
-  integrity sha512-lxyoipLWweAnLnSsV4Ho2NAZTKKmxeYgkTQ6PaDiPDU9JJBUY2zJVVGiK1smzYv8+ZgbqEmcm5xM74GCpunSEA==
+"@types/react@*", "@types/react@16.7.6", "@types/react@^16.1.0", "@types/react@^16.7.6":
+  version "16.7.6"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.6.tgz#80e4bab0d0731ad3ae51f320c4b08bdca5f03040"
+  integrity sha512-QBUfzftr/8eg/q3ZRgf/GaDP6rTYc7ZNem+g4oZM38C9vXyV8AWRWaTQuW5yCoZTsfHrN7b3DeEiUnqH9SrnpA==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
@@ -1697,7 +1725,7 @@ arrify@^1.0.0, arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
-asap@^2.0.0:
+asap@^2.0.0, asap@~2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -2526,7 +2554,7 @@ babel-register@^6.26.0, babel-register@^6.9.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@6.x, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@6.x, babel-runtime@6.x.x, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -3317,7 +3345,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@2.x, classnames@^2.2.5, classnames@^2.2.6:
+classnames@2.x, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -3834,6 +3862,11 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
 core-js@^2.0.0, core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0, core-js@^2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
@@ -3929,6 +3962,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-context@^0.2.1:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
+  integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 cross-spawn@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
@@ -4856,6 +4897,13 @@ dom-css@^2.0.0:
     prefix-style "2.0.1"
     to-camel-case "1.0.0"
 
+"dom-helpers@^2.4.0 || ^3.0.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-helpers@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
@@ -5774,6 +5822,19 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
+fbjs@^0.8.0:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 fd-slicer@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
@@ -6756,6 +6817,11 @@ grunt@1.0.1:
     path-is-absolute "~1.0.0"
     rimraf "~2.2.8"
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
+
 gzip-size@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-1.0.0.tgz#66cf8b101047227b95bace6ea1da0c177ed5c22f"
@@ -7936,6 +8002,14 @@ isomorphic-base64@^1.0.2:
   resolved "https://registry.yarnpkg.com/isomorphic-base64/-/isomorphic-base64-1.0.2.tgz#f426aae82569ba8a4ec5ca73ad21a44ab1ee7803"
   integrity sha1-9Caq6CVpuopOxcpzrSGkSrHueAM=
 
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -9144,7 +9218,7 @@ longest@^1.0.1:
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9910,6 +9984,14 @@ node-fetch-npm@^2.0.2:
     json-parse-better-errors "^1.0.0"
     safe-buffer "^5.1.1"
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-forge@0.7.5:
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
@@ -11089,10 +11171,10 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
-popper.js@^1.12.5:
-  version "1.14.4"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6"
-  integrity sha1-juwdj/AqWjoVLdQ0FKFce3n9abY=
+popper.js@^1.14.4:
+  version "1.14.5"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.5.tgz#98abcce7c7c34c4ee47fcbc6b3da8af2c0a127bc"
+  integrity sha512-fs4Sd8bZLgEzrk8aS7Em1qh+wcawtE87kRUJQhK6+LndyV1HerX7+LURzAylVaTyWIn5NTB/lyjnWqw/AZ6Yrw==
 
 portfinder@^1.0.9:
   version "1.0.17"
@@ -11659,6 +11741,13 @@ promise-retry@^1.1.1:
     err-code "^1.0.0"
     retry "^0.10.0"
 
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
 prompts@^0.1.9:
   version "0.1.14"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-0.1.14.tgz#a8e15c612c5c9ec8f8111847df3337c9cbd443b2"
@@ -11976,15 +12065,15 @@ react-custom-scrollbars@^4.2.1:
     prop-types "^15.5.10"
     raf "^3.1.0"
 
-react-dom@^16.5.0:
-  version "16.5.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.2.tgz#b69ee47aa20bab5327b2b9d7c1fe2a30f2cfa9d7"
-  integrity sha512-RC8LDw8feuZOHVgzEf7f+cxBr/DnKdqp56VU0lAs1f4UfKc4cU8wU4fTq/mgnvynLQo8OtlPC19NUFh/zjZPuA==
+react-dom@^16.6.3:
+  version "16.6.3"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0"
+  integrity sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    schedule "^0.5.0"
+    scheduler "^0.11.2"
 
 react-draggable@3.x, "react-draggable@^2.2.6 || ^3.0.3":
   version "3.0.5"
@@ -12047,13 +12136,18 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-popper@^0.7.5:
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.7.5.tgz#71c25946f291db381231281f6b95729e8b801596"
-  integrity sha512-ya9dhhGCf74JTOB2uyksEHhIGw7w9tNZRUJF73lEq2h4H5JT6MBa4PdT4G+sx6fZwq+xKZAL/sVNAIuojPn7Dg==
+react-popper@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.0.tgz#e769199bbe1273611957892f9950ef1d42c3f7ce"
+  integrity sha512-Dbn9kwgFzNFRi8yz/i4Qp7d1hkCYhWX6uJOFz0+PoNNm9uJMnFAqSPNgUUCV49L6p5zz5mKtMiudbgIqjAe1uw==
   dependencies:
-    popper.js "^1.12.5"
-    prop-types "^15.5.10"
+    "@types/react" "^16.1.0"
+    babel-runtime "6.x.x"
+    create-react-context "^0.2.1"
+    popper.js "^1.14.4"
+    prop-types "^15.6.1"
+    typed-styles "^0.0.5"
+    warning "^3.0.0"
 
 react-portal@^3.1.0:
   version "3.2.0"
@@ -12082,19 +12176,6 @@ react-resizable@1.x:
     prop-types "15.x"
     react-draggable "^2.2.6 || ^3.0.3"
 
-react-select@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-2.1.0.tgz#95977a763b14f2fc42255a510acd73bef9561f7d"
-  integrity sha512-3SdRAKX64hNzDF/DT1J1Ei3fIoQlLMkMJuB3yOY6oOYwl2A9SFJMsqXLgsveiu7UGrdo+4lyZi3mSqvw8qeGMA==
-  dependencies:
-    classnames "^2.2.5"
-    emotion "^9.1.2"
-    memoize-one "^4.0.0"
-    prop-types "^15.6.0"
-    raf "^3.4.0"
-    react-input-autosize "^2.2.1"
-    react-transition-group "^2.2.1"
-
 react-sizeme@^2.3.6:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.5.2.tgz#e7041390cfb895ed15d896aa91d76e147e3b70b5"
@@ -12133,15 +12214,27 @@ react-transition-group@^2.2.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react@^16.5.0:
-  version "16.5.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42"
-  integrity sha512-FDCSVd3DjVTmbEAjUNX6FgfAmQ+ypJfHUsqUJOYNCBUp1h8lqmtC+0mXJ+JjsWx4KAVTkk1vKd1hLQPvEviSuw==
+react-virtualized@^9.21.0:
+  version "9.21.0"
+  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.0.tgz#8267c40ffb48db35b242a36dea85edcf280a6506"
+  integrity sha512-duKD2HvO33mqld4EtQKm9H9H0p+xce1c++2D5xn59Ma7P8VT7CprfAe5hwjd1OGkyhqzOZiTMlTal7LxjH5yBQ==
+  dependencies:
+    babel-runtime "^6.26.0"
+    classnames "^2.2.3"
+    dom-helpers "^2.4.0 || ^3.0.0"
+    loose-envify "^1.3.0"
+    prop-types "^15.6.0"
+    react-lifecycles-compat "^3.0.4"
+
+react@^16.6.3:
+  version "16.6.3"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"
+  integrity sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    schedule "^0.5.0"
+    scheduler "^0.11.2"
 
 read-chunk@^2.1.0:
   version "2.1.0"
@@ -12408,6 +12501,11 @@ regenerator-runtime@^0.11.0, regenerator-runtime@^0.11.1:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.12.0:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
+  integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
+
 regenerator-transform@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
@@ -12967,6 +13065,14 @@ schedule@^0.5.0:
   dependencies:
     object-assign "^4.1.1"
 
+scheduler@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.2.tgz#a8db5399d06eba5abac51b705b7151d2319d33d3"
+  integrity sha512-+WCP3s3wOaW4S7C1tl3TEXp4l9lJn0ZK8G3W3WKRWmw77Z2cIFUW2MiNTMHn5sCjxN+t7N43HAOOgMjyAg5hlg==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.4.0, schema-utils@^0.4.4, schema-utils@^0.4.5:
   version "0.4.7"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
@@ -13121,7 +13227,7 @@ set-value@^2.0.0:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.4:
+setimmediate@^1.0.4, setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -14423,6 +14529,11 @@ type-of@^2.0.1:
   resolved "https://registry.yarnpkg.com/type-of/-/type-of-2.0.1.tgz#e72a1741896568e9f628378d816d6912f7f23972"
   integrity sha1-5yoXQYllaOn2KDeNgW1pEvfyOXI=
 
+typed-styles@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.5.tgz#a60df245d482a9b1adf9c06c078d0f06085ed1cf"
+  integrity sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw==
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -14433,6 +14544,11 @@ typescript@^3.0.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.1.tgz#3362ba9dd1e482ebb2355b02dfe8bcd19a2c7c96"
   integrity sha512-Veu0w4dTc/9wlWNf2jeRInNodKlcdLgemvPsrNpfu5Pq39sgfFjvIIgTsvUHCoLBnMhPoUA+tFxsXjU6VexVRQ==
 
+ua-parser-js@^0.7.18:
+  version "0.7.19"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"
+  integrity sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==
+
 uglify-es@^3.3.4:
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
@@ -14870,6 +14986,13 @@ walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
+  dependencies:
+    loose-envify "^1.0.0"
+
 warning@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.2.tgz#aa6876480872116fa3e11d434b0d0d8d91e44607"
@@ -15104,6 +15227,11 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.24"
 
+whatwg-fetch@>=0.10.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
+  integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
+
 whatwg-mimetype@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.2.0.tgz#a3d58ef10b76009b042d03e25591ece89b88d171"