Merge remote-tracking branch 'upstream/master'

.bra.toml

@@ -1,7 +1,7 @@
 [run]
 init_cmds = [
   ["go", "build", "-o", "./bin/grafana-server", "./pkg/cmd/grafana-server"],
-	["./bin/grafana-server"]
+	["./bin/grafana-server", "cfg:app_mode=development"]
 ]
 watch_all = true
 watch_dirs = [
@@ -9,9 +9,9 @@ watch_dirs = [
 	"$WORKDIR/public/views",
 	"$WORKDIR/conf",
 ]
-watch_exts = [".go", ".ini", ".toml", ".html"]
+watch_exts = [".go", ".ini", ".toml"]
 build_delay = 1500
 cmds = [
   ["go", "build", "-o", "./bin/grafana-server", "./pkg/cmd/grafana-server"],
-	["./bin/grafana-server"]
+	["./bin/grafana-server", "cfg:app_mode=development"]
 ]

.gitignore

@@ -4,6 +4,8 @@ coverage/
 .aws-config.json
 awsconfig
 /dist
+/public/build
+/public/views/index.html
 /emails/dist
 /public_gen
 /public/vendor/npm

.jshintrc

@@ -1,6 +1,6 @@
 {
   "browser": true,
-
+  "esversion": 6,
   "bitwise":false,
   "curly": true,
   "eqnull": true,

CHANGELOG.md

@@ -17,14 +17,23 @@
 * **Unit types**: New date & time unit types added, useful in singlestat to show dates & times. [#3678](https://github.com/grafana/grafana/issues/3678), [#6710](https://github.com/grafana/grafana/issues/6710), [#2764](https://github.com/grafana/grafana/issues/6710)
 * **CLI**: Make it possible to install plugins from any url [#5873](https://github.com/grafana/grafana/issues/5873)
 * **Prometheus**: Add support for instant queries [#5765](https://github.com/grafana/grafana/issues/5765), thx [@mtanda](https://github.com/mtanda)
+* **Cloudwatch**: Add support for alerting using the cloudwatch datasource [#8050](https://github.com/grafana/grafana/pull/8050), thx [@mtanda](https://github.com/mtanda)
+* **Pagerduty**: Include triggering series in pagerduty notification [#8479](https://github.com/grafana/grafana/issues/8479), thx [@rickymoorhouse](https://github.com/rickymoorhouse)
+* **Timezone**: Time ranges like Today & Yesterday now work correctly when timezone setting is set to UTC [#8916](https://github.com/grafana/grafana/issues/8916), thx [@ctide](https://github.com/ctide)
 
 ## Minor
 * **SMTP**: Make it possible to set specific EHLO for smtp client. [#9319](https://github.com/grafana/grafana/issues/9319)
 * **Dataproxy**: Allow grafan to renegotiate tls connection [#9250](https://github.com/grafana/grafana/issues/9250)
+* **HTTP**: set net.Dialer.DualStack to true for all http clients [#9367](https://github.com/grafana/grafana/pull/9367)
+* **Alerting**: Add diff and percent diff as series reducers [#9386](https://github.com/grafana/grafana/pull/9386), thx [@shanhuhai5739](https://github.com/shanhuhai5739)
+* **Slack**: Allow images to be uploaded to slack when Token is precent [#7175](https://github.com/grafana/grafana/issues/7175), thx [@xginn8](https://github.com/xginn8)
+
+## Tech
+* **Go**: Grafana is now built using golang 1.9
 
 # 4.5.2 (2017-09-22)
 
-## Fixes 
+## Fixes
 * **Graphite**: Fix for issues with jsonData & graphiteVersion null errors [#9258](https://github.com/grafana/grafana/issues/9258)
 * **Graphite**: Fix for Grafana internal metrics to Graphite sending NaN values [#9279](https://github.com/grafana/grafana/issues/9279)
 * **HTTP API**: Fix for HEAD method requests [#9307](https://github.com/grafana/grafana/issues/9307)
@@ -37,7 +46,7 @@
 * **MySQL**: Fixed issue with query editor not showing [#9247](https://github.com/grafana/grafana/issues/9247)
 
 ## Breaking changes
-* **Metrics**: The metric structure for internal metrics about Grafana published to graphite has changed. This might break dashboards for internal metrics. 
+* **Metrics**: The metric structure for internal metrics about Grafana published to graphite has changed. This might break dashboards for internal metrics.
 
 # 4.5.0 (2017-09-14)
 
@@ -66,7 +75,7 @@
 ### Breaking change
 
 * **InfluxDB/Elasticsearch**: The panel & data source option named "Group by time interval" is now named "Min time interval" and does now always define a lower limit for the auto group by time. Without having to use `>` prefix (that prefix still works). This should in theory have close to zero actual impact on existing dashboards. It does mean that if you used this setting to define a hard group by time interval of, say "1d", if you zoomed to a time range wide enough the time range could increase above the "1d" range as the setting is now always considered a lower limit.
-* **Elasticsearch**: Elasticsearch metric queries without date histogram now return table formated data making table panel much easier to use for this use case. Should not break/change existing dashboards with stock panels but external panel plugins can be affected. 
+* **Elasticsearch**: Elasticsearch metric queries without date histogram now return table formated data making table panel much easier to use for this use case. Should not break/change existing dashboards with stock panels but external panel plugins can be affected.
 
 ## Changes
 

Gruntfile.js

@@ -31,7 +31,7 @@ module.exports = function (grunt) {
   require('load-grunt-tasks')(grunt);
 
   // load task definitions
-  grunt.loadTasks('tasks');
+  grunt.loadTasks('./scripts/grunt');
 
   // Utility function to load plugin settings into config
   function loadConfig(config,path) {
@@ -46,7 +46,7 @@ module.exports = function (grunt) {
   }
 
   // Merge that object with what with whatever we have here
-  loadConfig(config,'./tasks/options/');
+  loadConfig(config,'./scripts/grunt/options/');
   // pass the config to grunt
   grunt.initConfig(config);
 };

README.md

@@ -24,7 +24,7 @@ the latest master builds [here](https://grafana.com/grafana/download)
 
 ### Dependencies
 
-- Go 1.8.1
+- Go 1.9
 - NodeJS LTS
 
 ### Building the backend
@@ -37,8 +37,7 @@ go run build.go build
 
 ### Building frontend assets
 
-To build less to css for the frontend you will need a recent version of **node (v6+)**,
-npm (v2.5.0) and grunt (v0.4.5). Run the following:
+For this you need nodejs (v.6+).
 
 ```bash
 npm install -g yarn
@@ -46,13 +45,24 @@ yarn install --pure-lockfile
 npm run build
 ```
 
-To build the frontend assets only on changes:
+To rebuild frontend assets (typesript, sass etc) as you change them start the watcher via.
 
 ```bash
-npm run dev
+npm run watch
+```
+
+Run tests
+```bash
+npm run test
+```
+
+Run tests in watch mode
+```bash
+npm run watch-test
 ```
 
 ### Recompile backend on source change
+
 To rebuild on source change.
 ```bash
 go get github.com/Unknwon/bra
@@ -69,6 +79,8 @@ You only need to add the options you want to override. Config files are applied
 1. grafana.ini
 1. custom.ini
 
+In your custom.ini uncomment (remove the leading `;`) sign. And set `app_mode = development`.
+
 ## Contribute
 If you have any idea for an improvement or found a bug do not hesitate to open an issue.
 And if you have time clone this repo and submit a pull request and help me make Grafana

appveyor.yml

@@ -7,7 +7,7 @@ clone_folder: c:\gopath\src\github.com\grafana\grafana
 environment:
   nodejs_version: "6"
   GOPATH: c:\gopath
-  GOVERSION: 1.8
+  GOVERSION: 1.9
 
 install:
   - rmdir c:\go /s /q

circle.yml

@@ -9,7 +9,7 @@ machine:
     GOPATH: "/home/ubuntu/.go_workspace"
     ORG_PATH: "github.com/grafana"
     REPO_PATH: "${ORG_PATH}/grafana"
-    GODIST: "go1.8.linux-amd64.tar.gz"
+    GODIST: "go1.9.linux-amd64.tar.gz"
   post:
     - mkdir -p ~/download
     - mkdir -p ~/docker

docs/sources/alerting/notifications.md

@@ -48,12 +48,15 @@ external image destination if available or fallback to attaching the image in th
 
 To set up slack you need to configure an incoming webhook url at slack. You can follow their guide for how
 to do that https://api.slack.com/incoming-webhooks If you want to include screenshots of the firing alerts
-in the slack messages you have to configure the [external image destination](#external-image-store) in Grafana.
+in the slack messages you have to configure either the [external image destination](#external-image-store) in Grafana,
+or a bot integration via Slack Apps. Follow Slack's guide to set up a bot integration and use the token provided
+https://api.slack.com/bot-users, which starts with "xoxb".
 
 Setting | Description
 ---------- | -----------
 Recipient | allows you to override the slack recipient.
 Mention | make it possible to include a mention in the slack notification sent by Grafana. Ex @here or @channel
+Token | If provided, Grafana will upload the generated image via Slack's file.upload API method, not the external image destination.
 
 ### PagerDuty
 

docs/sources/features/panels/alertlist.md

@@ -0,0 +1,27 @@
++++
+title = "Alert List"
+keywords = ["grafana", "alert list", "documentation", "panel", "alertlist"]
+type = "docs"
+aliases = ["/reference/alertlist/"]
+[menu.docs]
+name = "Alert list"
+parent = "panels"
+weight = 4
++++
+
+
+# Alert List Panel
+
+{{< docs-imagebox img="/img/docs/v45/alert-list-panel.png" max-width="850px" >}}
+
+The alert list panel allows you to display your dashbords alerts. The list can be configured to show current state or recent state changes. You can read  more about alerts [here](http://docs.grafana.org/alerting/rules).
+
+## Alert List Options
+
+{{< docs-imagebox img="/img/docs/v45/alert-list-options.png" max-width="600px" class="docs-image--no-shadow docs-image--right">}}
+
+1. **Show**: Lets you choose between current state or recent state changes.
+2. **Max Items**: Max items set the maximum of items in a list.
+3. **Sort Order**: Lets you sort your list alphabeticaly(asc/desc) or by importance.
+4. **Alerts From** This Dashboard`: Shows alerts only from the dashboard the alert list is in.
+5. **State Filter**: Here you can filter your list by one or more parameters.

docs/sources/features/panels/dashlist.md

@@ -12,7 +12,7 @@ weight = 4
 
 # Dashboard List Panel
 
-{{< docs-imagebox img="/img/docs/v45/dashboard-list-panels.png" max-width= "800px" >}}
+{{< docs-imagebox img="/img/docs/v45/dashboard-list-panels.png" max-width="850px">}}
 
 The dashboard list panel allows you to display dynamic links to other dashboards. The list can be configured to use starred dashboards, recently viewed dashboards, a search query and/or dashboard tags.
 
@@ -20,15 +20,17 @@ The dashboard list panel allows you to display dynamic links to other dashboards
 
 ## Dashboard List Options
 
-{{< docs-imagebox img="/img/docs/v45/dashboard-list-options.png" max-width="600px" class="docs-image--no-shadow">}}
+{{< docs-imagebox img="/img/docs/v45/dashboard-list-options.png" class="docs-image--no-shadow docs-image--right">}}
 
-1. `Starred`: The starred dashboard selection displays starred dashboards in alphabetical order.
-2. `Recently Viewed`: The recently viewed dashboard selection displays recently viewed dashboards in alphabetical order.
-3. `Search`: The search dashboard selection displays dashboards by search query or tag(s).
-4. `Show Headings`: When show headings is ticked the choosen list selection(Starred, Recently Viewed, Search) is shown as a heading.
-5. `Max Items`: Max items set the maximum of items in a list.
-6. `Query`: Here is where you enter your query you want to search by. Queries are case-insensitive, and partial values are accepted.
-7. `Tags`: Here is where you enter your tag(s) you want to search by. Note that existing tags will not appear as you type, and *are* case sensitive. To see a list of existing tags, you can always return to the dashboard, open the Dashboard Picker at the top and click `tags` link in the search bar.
+1. **Starred**: The starred dashboard selection displays starred dashboards in alphabetical order.
+2. **Recently Viewed**: The recently viewed dashboard selection displays recently viewed dashboards in alphabetical order.
+3. **Search**: The search dashboard selection displays dashboards by search query or tag(s).
+4. **Show Headings**: When show headings is ticked the choosen list selection(Starred, Recently Viewed, Search) is shown as a heading.
+5. **Max Items**: Max items set the maximum of items in a list.
+6. **Query**: Here is where you enter your query you want to search by. Queries are case-insensitive, and partial values are accepted.
+7. **Tags**: Here is where you enter your tag(s) you want to search by. Note that existing tags will not appear as you type, and *are* case sensitive. To see a list of existing tags, you can always return to the dashboard, open the Dashboard Picker at the top and click `tags` link in the search bar.
+
+<div class="clearfix"></div>
 
 > When multiple tags and strings appear, the dashboard list will display those matching ALL conditions.
 

docs/sources/features/panels/graph.md

@@ -11,11 +11,12 @@ weight = 1
 
 # Graph Panel
 
-The main panel in Grafana is simply named Graph. It provides a very rich set of graphing options.
+{{< docs-imagebox img="/img/docs/v45/graph_overview.png" class="docs-image--no-shadow" max-width="850px" >}}
 
-{{< docs-imagebox img="/img/docs/v45/graph_overview.png" class="docs-image--no-shadow" max-width= "900px" >}}
+The main panel in Grafana is simply named Graph. It provides a very rich set of graphing options.
 
-1. Clicking the title for a panel exposes a menu.  The `edit` option opens additional configuration options for the panel.
+1. Clicking the title for a panel exposes a menu.  The `edit` option opens additional configuration
+options for the panel.
 2. Click to open color & axis selection.
 3. Click to only show this series. Shift/Ctrl + click to hide series.
 
@@ -27,9 +28,9 @@ The general tab allows customization of a panel's appearance and menu options.
 
 ### General Options
 
-- ``Title`` - The panel title on the dashboard
-- ``Span`` - The panel width in columns
-- ``Height`` - The panel contents height in pixels
+- **Title** - The panel title on the dashboard
+- **Span** - The panel width in columns
+- **Height** - The panel contents height in pixels
 
 ### Drilldown / detail link
 
@@ -55,44 +56,46 @@ options.
 
 {{< docs-imagebox img="/img/docs/v43/graph_axes_grid_options.png"  max-width= "900px" >}}
 
-The Axes tab controls the display of axes, grids and legend.  The ``Left Y`` and ``Right Y`` can be customized using:
+The Axes tab controls the display of axes, grids and legend.  The **Left Y** and **Right Y** can be customized using:
 
-- ``Unit`` - The display unit for the Y value
-- ``Grid Max`` - The maximum Y value. (default auto)
-- ``Grid Min`` - The minimum Y value. (default auto)
-- ``Label`` - The Y axis label (default "")
+- **Unit** - The display unit for the Y value
+- **Scale** -
+- **Y-Min** - The minimum Y value. (default auto)
+- **Y-Max** - The maximum Y value. (default auto)
+- **Label** - The Y axis label (default "")
 
-Axes can also be hidden by unchecking the appropriate box from `Show Axis`.
+Axes can also be hidden by unchecking the appropriate box from **Show**.
 
 ### X-Axis Mode
 
 There are three options:
 
-- The default option is `Time` and means the x-axis represents time and that the data is grouped by time (for example, by hour or by minute).
+- The default option is **Time** and means the x-axis represents time and that the data is grouped by time (for example, by hour or by minute).
 
-- The `Series` option means that the data is grouped by series and not by time. The y-axis still represents the value.
+- The **Series** option means that the data is grouped by series and not by time. The y-axis still represents the value.
 
-    <img src="/img/docs/v4/x_axis_mode_series.png" class="no-shadow">
+    {{< docs-imagebox img="/img/docs/v45/graph-x-axis-mode-series.png" max-width="700px">}}
 
-- The `Histogram` option converts the graph into a histogram. A Histogram is a kind of bar chart that groups numbers into ranges, often called buckets or bins. Taller bars show that more data falls in that range. Histograms and buckets are described in more detail [here](http://docs.grafana.org/features/panels/heatmap/#histograms-and-buckets).
+- The **Histogram** option converts the graph into a histogram. A Histogram is a kind of bar chart that groups numbers into ranges, often called buckets or bins. Taller bars show that more data falls in that range. Histograms and buckets are described in more detail [here](http://docs.grafana.org/features/panels/heatmap/#histograms-and-buckets).
 
     <img src="/img/docs/v43/heatmap_histogram.png" class="no-shadow">
 
 ### Legend
 
-The legend hand be hidden by checking the ``Show`` checkbox.  If it's shown, it can be
-displayed as a table of values by checking the ``Table`` checkbox.  Series with no
-values can be hidden from the legend using the ``Hide empty`` checkbox.
+The legend hand be hidden by checking the **Show** checkbox.  If it's shown, it can be
+displayed as a table of values by checking the **Table** checkbox.  Series with no
+values can be hidden from the legend using the **Hide empty** checkbox.
 
 ### Legend Values
 
 Additional values can be shown along-side the legend names:
-- ``Total`` - Sum of all values returned from metric query
-- ``Current`` - Last value returned from the metric query
-- ``Min`` - Minimum of all values returned from metric query
-- ``Max`` - Maximum of all values returned from the metric query
-- ``Avg`` - Average of all values returned from metric query
-- ``Decimals`` - Controls how many decimals are displayed for legend values (and graph hover tooltips)
+
+- **Total** - Sum of all values returned from metric query
+- **Current** - Last value returned from the metric query
+- **Min** - Minimum of all values returned from metric query
+- **Max** - Maximum of all values returned from the metric query
+- **Avg** - Average of all values returned from metric query
+- **Decimals** - Controls how many decimals are displayed for legend values (and graph hover tooltips)
 
 The legend values are calculated client side by Grafana and depend on what type of
 aggregation or point consolidation your metric query is using. All the above legend values cannot
@@ -114,23 +117,23 @@ the graph crosses a particular threshold.
 
 ### Chart Options
 
-- ``Bar`` - Display values as a bar chart
-- ``Lines`` - Display values as a line graph
-- ``Points`` - Display points for values
+- **Bar** - Display values as a bar chart
+- **Lines** - Display values as a line graph
+- **Points** - Display points for values
 
 ### Line Options
 
-- ``Line Fill`` - Amount of color fill for a series. 0 is none.
-- ``Line Width`` - The width of the line for a series.
-- ``Null point mode`` - How null values are displayed
-- ``Staircase line`` - Draws adjacent points as staircase
+- **Line Fill** - Amount of color fill for a series. 0 is none.
+- **Line Width** - The width of the line for a series.
+- **Null point mode** - How null values are displayed
+- **Staircase line** - Draws adjacent points as staircase
 
 ### Multiple Series
 
 If there are multiple series, they can be displayed as a group.
 
-- ``Stack`` - Each series is stacked on top of another
-- ``Percent`` - Each series is drawn as a percentage of the total of all series
+- **Stack** - Each series is stacked on top of another
+- **Percent** - Each series is drawn as a percentage of the total of all series
 
 If you have stack enabled, you can select what the mouse hover feature should show.
 
@@ -139,12 +142,12 @@ If you have stack enabled, you can select what the mouse hover feature should sh
 
 ### Rendering
 
-- ``Flot`` - Render the graphs in the browser using Flot (default)
-- ``Graphite PNG`` - Render the graph on the server using graphite's render API.
+- **Flot** - Render the graphs in the browser using Flot (default)
+- **Graphite PNG** - Render the graph on the server using graphite's render API.
 
 ### Tooltip
 
-- ``All series`` - Show all series on the same tooltip and a x crosshairs to help follow all series
+- **All series** - Show all series on the same tooltip and a x crosshairs to help follow all series
 
 ### Series Specific Overrides
 

docs/sources/features/panels/singlestat.md

@@ -12,30 +12,30 @@ weight = 2
 
 # Singlestat Panel
 
-{{< docs-imagebox img="/img/docs/v45/singlestat-panel.png" max-width="900px" >}}
+{{< docs-imagebox img="/img/docs/v45/singlestat-panel.png" class="docs-image--no-shadow" max-width="900px" >}}
 
 The Singlestat Panel allows you to show the one main summary stat of a SINGLE series. It reduces the series into a single number (by looking at the max, min, average, or sum of values in the series). Singlestat also provides thresholds to color the stat or the Panel background. It can also translate the single number into a text value, and show a sparkline summary of the series.
 
 ### Singlestat Panel Configuration
 
-The singlestat panel has a normal query editor to allow you define your exact metric queries like many other Panels. Through the Options tab, you can access the Singlestat-specific functionality.
-
-{{< docs-imagebox img="/img/docs/v45/singlestat-value-options.png" class="docs-image--no-shadow" max-width= "900px" >}}
-
-1. `Stats`: The Stats field let you set the function (min, max, average, current, total, first, delta, range) that your entire query is reduced into a single value with. This reduces the entire query into a single summary value that is displayed.
-   * `min` - The smallest value in the series
-   * `max` - The largest value in the series
-   * `avg` - The average of all the non-null values in the series
-   * `current` - The last value in the series. If the series ends on null the previous value will be used.
-   * `total` - The sum of all the non-null values in the series
-   * `first` - The first value in the series
-   * `delta` - The total incremental increase (of a counter) in the series. An attempt is made to account for counter resets, but this will only be accurate for single instance metrics. Used to show total counter increase in time series.
-   * `diff` - The difference betwen 'current' (last value) and 'first'.
-   * `range` - The difference between 'min' and 'max'. Useful the show the range of change for a gauge.
-2. `Prefix/Postfix`: The Prefix/Postfix fields let you define a custom label to appear *before/after* the value. The `$__name` variable can be used here to use the series name or alias from the metric query.
-3. `Units`: Units are appended to the the Singlestat  within the panel, and will respect the color and threshold settings for the value.
-4. `Decimals`: The Decimal field allows you to override the automatic decimal precision, and set it explicitly.
-5. `Font Size`: You can use this section to select the font size of the different texts in the Singlestat Panel, i.e. prefix, value and postfix.
+The singlestat panel has a normal query editor to allow you define your exact metric queries like many other Panels. In the Options tab, you can access the Singlestat-specific functionality.
+
+{{< docs-imagebox img="/img/docs/v45/singlestat-value-options.png" class="docs-image--no-shadow" max-width="900px" >}}
+
+1. **Stats**: The Stats field let you set the function (min, max, average, current, total, first, delta, range) that your entire query is reduced into a single value with. This reduces the entire query into a single summary value that is displayed.
+   * **min** - The smallest value in the series
+   * **max** - The largest value in the series
+   * **avg** - The average of all the non-null values in the series
+   * **current** - The last value in the series. If the series ends on null the previous value will be used.
+   * **total** - The sum of all the non-null values in the series
+   * **first** - The first value in the series
+   * **delta** - The total incremental increase (of a counter) in the series. An attempt is made to account for counter resets, but this will only be accurate for single instance metrics. Used to show total counter increase in time series.
+   * **diff** - The difference betwen 'current' (last value) and 'first'.
+   * **range** - The difference between 'min' and 'max'. Useful the show the range of change for a gauge.
+2. **Prefix/Postfix**: The Prefix/Postfix fields let you define a custom label to appear *before/after* the value. The `$__name` variable can be used here to use the series name or alias from the metric query.
+3. **Units**: Units are appended to the the Singlestat  within the panel, and will respect the color and threshold settings for the value.
+4. **Decimals**: The Decimal field allows you to override the automatic decimal precision, and set it explicitly.
+5. **Font Size**: You can use this section to select the font size of the different texts in the Singlestat Panel, i.e. prefix, value and postfix.
 
 ### Coloring
 
@@ -43,11 +43,11 @@ The coloring options of the Singlestat Panel config allow you to dynamically cha
 
 {{< docs-imagebox img="/img/docs/v45/singlestat-color-options.png" max-width="500px" class="docs-image--right docs-image--no-shadow">}}
 
-1. `Background`: This checkbox applies the configured thresholds and colors to the entirety of the Singlestat Panel background.
-2. `Thresholds`: Change the background and value colors dynamically within the panel, depending on the Singlestat value. The threshold field accepts **2 comma-separated** values which represent 3 ranges that correspond to the three colors directly to the right. For example: if the thresholds are 70, 90 then the first color represents < 70, the second color represents between 70 and 90 and the third color represents > 90.
-3. `Colors`: Select a color and opacity
-4. `Value`: This checkbox applies the configured thresholds and colors to the summary stat.
-5. `Invert order`: This link toggles the threshold color order.</br>For example: Green, Orange, Red (<img class="no-shadow" src="/img/docs(v1/gyr.png">) will become Red, Orange, Green (<img class="no-shadow" src="/img/docs/v1/ryg.png">).
+1. **Background**: This checkbox applies the configured thresholds and colors to the entirety of the Singlestat Panel background.
+2. **Thresholds**: Change the background and value colors dynamically within the panel, depending on the Singlestat value. The threshold field accepts **2 comma-separated** values which represent 3 ranges that correspond to the three colors directly to the right. For example: if the thresholds are 70, 90 then the first color represents < 70, the second color represents between 70 and 90 and the third color represents > 90.
+3. **Colors**: Select a color and opacity
+4. **Value**: This checkbox applies the configured thresholds and colors to the summary stat.
+5. **Invert order**: This link toggles the threshold color order.</br>For example: Green, Orange, Red (<img class="no-shadow" src="/img/docs(v1/gyr.png">) will become Red, Orange, Green (<img class="no-shadow" src="/img/docs/v1/ryg.png">).
 
 ### Spark Lines
 
@@ -55,10 +55,10 @@ Sparklines are a great way of seeing the historical data related to the summary
 
 {{< docs-imagebox img="/img/docs/v45/singlestat-spark-options.png" max-width="500px" class="docs-image--right docs-image--no-shadow">}}
 
-1. `Show`: The show checkbox will toggle whether the spark line is shown in the Panel. When unselected, only the Singlestat value will appear.
-2. `Full Height`: Check if you want the sparklines to take up the full panel height, or uncheck if they should be below the main Singlestat value.
-3. `Line Color`: This color selection applies to the color of the sparkline itself.
-4. `Fill Color`: This color selection applies to the area below the sparkline.
+1. **Show**: The show checkbox will toggle whether the spark line is shown in the Panel. When unselected, only the Singlestat value will appear.
+2. **Full Height**: Check if you want the sparklines to take up the full panel height, or uncheck if they should be below the main Singlestat value.
+3. **Line Color**: This color selection applies to the color of the sparkline itself.
+4. **Fill Color**: This color selection applies to the area below the sparkline.
 
 <div class="clearfix"></div>
 
@@ -70,10 +70,10 @@ Gauges gives a clear picture of how high a value is in it's context. It's a grea
 
 {{< docs-imagebox img="/img/docs/v45/singlestat-gauge-options.png" max-width="500px" class="docs-image--right docs-image--no-shadow">}}
 
-1. `Show`: The show checkbox will toggle wether the gauge is shown in the panel. When unselected, only the Singlestat value will appear.
-2. `Min/Max`: This sets the start and end point for the gauge.
-3. `Threshold Labels`: Check if you want to show the threshold labels. Thresholds are set in the color options.
-4. `Threshold Markers`: Check if you want to have a second meter showing the thresholds.
+1. **Show**: The show checkbox will toggle wether the gauge is shown in the panel. When unselected, only the Singlestat value will appear.
+2. **Min/Max**: This sets the start and end point for the gauge.
+3. **Threshold Labels**: Check if you want to show the threshold labels. Thresholds are set in the color options.
+4. **Threshold Markers**: Check if you want to have a second meter showing the thresholds.
 
 <div class="clearfix"></div>
 

docs/sources/features/panels/table_panel.md

@@ -25,8 +25,8 @@ The table panel has many ways to manipulate your data for optimal presentation.
 {{< docs-imagebox img="/img/docs/v45/table_options.png" class="docs-image--no-shadow" max-width= "500px" >}}
 
 
-1. `Data`: Control how your query is transformed into a table.
-2. `Paging`: Table display options.
+1. **Data**: Control how your query is transformed into a table.
+2. **Paging**: Table display options.
 
 
 ## Data to Table
@@ -43,20 +43,20 @@ you want in the table. Only applicable for some transforms.
 
 {{< docs-imagebox img="/img/docs/v45/table_ts_to_rows.png"  >}}
 
-In the most simple mode you can turn time series to rows. This means you get a `Time`, `Metric` and a `Value` column. Where `Metric` is the name of the time series.
+In the most simple mode you can turn time series to rows. This means you get a **Time**, **Metric** and a **Value** column. Where **Metric** is the name of the time series.
 
 ### Time series to columns
 
 {{< docs-imagebox img="/img/docs/v45/table_ts_to_columns.png" >}}
 
 
-This transform allows you to take multiple time series and group them by time. Which will result in the primary column being `Time` and a column for each time series.
+This transform allows you to take multiple time series and group them by time. Which will result in the primary column being **Time** and a column for each time series.
 
 ### Time series aggregations
 
 {{< docs-imagebox img="/img/docs/v45/table_ts_to_aggregations.png" >}}
 
-This table transformation will lay out your table into rows by metric, allowing columns of `Avg`, `Min`, `Max`, `Total`, `Current` and `Count`. More than one column can be added.
+This table transformation will lay out your table into rows by metric, allowing columns of **Avg**, **Min**, **Max**, **Total**, **Current** and **Count**. More than one column can be added.
 
 ### Annotations
 
@@ -70,7 +70,7 @@ mode then any queries you have in the metrics tab will be ignored.
 
 {{< docs-imagebox img="/img/docs/v45/table_json_data.png" max-width="500px" >}}
 
-If you have an Elasticsearch **Raw Document** query or an Elasticsearch query without a `date histogram` use this
+If you have an Elasticsearch **Raw Document** query or an Elasticsearch query without a **date histogram** use this
 transform mode and pick the columns using the **Columns** section.
 
 
@@ -80,9 +80,9 @@ transform mode and pick the columns using the **Columns** section.
 
 {{< docs-imagebox img="/img/docs/v45/table_paging.png" class="docs-image--no-shadow docs-image--right" max-width="350px" >}}
 
-1. `Pagination (Page Size)`: The table display fields allow you to control The `Pagination` (page size) is the threshold at which the table rows will be broken into pages. For example, if your table had 95 records with a pagination value of 10, your table would be split across 9 pages.
-2. `Scroll`: The `scroll bar` checkbox toggles the ability to scroll within the panel, when unchecked, the panel height will grow to display all rows.
-3. `Font Size`: The `font size` field allows you to increase or decrease the size for the panel, relative to the default font size.
+1. **Rows Per Page**: The table display fields allow you to control how many rows per page there should be. For example, if your table had 95 records with a rows per page value of 10, your table would be split across 10 pages.
+2. **Scroll**: The scroll bar checkbox toggles the ability to scroll within the panel, when unchecked, the panel height will grow to display all rows.
+3. **Font Size**: The font size field allows you to increase or decrease the size for the panel, relative to the default font size.
 
 
 ## Column Styles
@@ -91,9 +91,9 @@ The column styles allow you control how dates and numbers are formatted.
 
 {{< docs-imagebox img="/img/docs/v45/table_column_styles.png" class="docs-image--no-shadow" >}}
 
-1. `Name or regex`: The Name or Regex field controls what columns the rule should be applied to. The regex or name filter will be matched against the column name not against column values.
-2. `Column Header`: Title for the column, when using a Regex the title can include replacement strings like `$1`.
-3.  `Add column style rule`: Add new column rule.
-4. `Thresholds` and `Coloring`: Specify color mode and thresholds limits.
-5. `Type`: The three supported types of types are `Number`, `String` and `Date`. `Unit` and `Decimals`: Specify unit and decimal precision for numbers.`Format`: Specify date format for dates.
+1. **Name or regex**: The Name or Regex field controls what columns the rule should be applied to. The regex or name filter will be matched against the column name not against column values.
+2. **Column Header**: Title for the column, when using a Regex the title can include replacement strings like `$1`.
+3. **Add column style rule**: Add new column rule.
+4. **Thresholds and Coloring**: Specify color mode and thresholds limits.
+5. **Type**: The three supported types of types are **Number**, **String** and **Date**. **Unit** and **Decimals**: Specify unit and decimal precision for numbers. **Format**: Specify date format for dates.
 

docs/sources/features/panels/text.md

@@ -0,0 +1,23 @@
++++
+title = "Text"
+keywords = ["grafana", "text", "documentation", "panel"]
+type = "docs"
+aliases = ["/reference/alertlist/"]
+[menu.docs]
+name = "Text"
+parent = "panels"
+weight = 4
++++
+
+
+# Text Panel
+
+The text panel lets you make information and description panels etc. for your dashboards. There are three modes you can write in: markdown, HTML or text.
+
+## Text Options
+
+{{< docs-imagebox img="/img/docs/v45/text-options.png" max-width="600px" class="docs-image--no-shadow">}}
+
+1. **Mode**: Here you can choose between markdown, HTML or text.
+2. **Content**: Here you write your content.
+

docs/sources/project/building_from_source.md

@@ -13,7 +13,7 @@ dev environment. Grafana ships with its own required backend server; also comple
 
 ## Dependencies
 
-- [Go 1.8.1](https://golang.org/dl/)
+- [Go 1.9](https://golang.org/dl/)
 - [NodeJS LTS](https://nodejs.org/download/)
 - [Git](https://git-scm.com/downloads)
 
@@ -27,7 +27,7 @@ go get github.com/grafana/grafana
 
 On Windows use setx instead of export and then restart your command prompt:
 ```
-setx GOPATH %cd% 
+setx GOPATH %cd%
 ```
 
 You may see an error such as: `package github.com/grafana/grafana: no buildable Go source files`. This is just a warning, and you can proceed with the directions.
@@ -43,35 +43,25 @@ go run build.go build              # (or 'go build ./pkg/cmd/grafana-server')
 The Grafana backend includes Sqlite3 which requires GCC to compile. So in order to compile Grafana on windows you need
 to install GCC. We recommend [TDM-GCC](http://tdm-gcc.tdragon.net/download).
 
-[node-gyp](https://github.com/nodejs/node-gyp#installation) is the Node.js native addon build tool and it requires extra dependencies to be installed on Windows. In a command prompt which is run as administrator, run: 
+[node-gyp](https://github.com/nodejs/node-gyp#installation) is the Node.js native addon build tool and it requires extra dependencies to be installed on Windows. In a command prompt which is run as administrator, run:
 
 ```
 npm --add-python-to-path='true' --debug install --global windows-build-tools
 ```
 
-## Build the Front-end Assets
+## Build the Frontend Assets
 
-To build less to css for the frontend you will need a recent version of node (v0.12.0),
-npm (v2.5.0) and grunt (v0.4.5). Run the following:
+For this you need nodejs (v.6+).
 
 ```
 npm install -g yarn
 yarn install --pure-lockfile
-npm install -g grunt-cli
-grunt
+npm run build
 ```
 
-## Recompile backend on source change
-To rebuild on source change
-```
-go get github.com/Unknwon/bra
-bra run
-```
-
-If the `bra run` command does not work, make sure that the bin directory in your Go workspace directory is in the path. $GOPATH/bin (or %GOPATH%\bin in Windows) is in your path.
-
 ## Running Grafana Locally
 You can run a local instance of Grafana by running:
+
 ```
 ./bin/grafana-server
 ```
@@ -81,16 +71,21 @@ If you built it with `go build .`, run `./grafana`
 
 Open grafana in your browser (default [http://localhost:3000](http://localhost:3000)) and login with admin user (default user/pass = admin/admin).
 
-## Developing for Grafana
-To add features, customize your config, etc, you'll need to rebuild on source change.
+## Developing Grafana
+
+To add features, customize your config, etc, you'll need to rebuild the backend when you change the source code. We use a tool named `bra` that
+does this.
+
 ```
 go get github.com/Unknwon/bra
 
 bra run
 ```
-You'll also need to run `grunt watch` to watch for changes to the front-end.
+
+You'll also need to run `npm run watch` to watch for changes to the front-end (typescript, html, sass)
 
 ## Creating optimized release packages
+
 This step builds linux packages and requires that fpm is installed. Install fpm via `gem install fpm`.
 
 ```
@@ -105,6 +100,10 @@ You only need to add the options you want to override. Config files are applied
 1. grafana.ini
 2. custom.ini
 
+### Set app_mode to development
+
+In your custom.ini uncomment (remove the leading `;`) sign. And set `app_mode = development`.
+
 Learn more about Grafana config options in the [Configuration section](/installation/configuration/)
 
 ## Create a pull requests
@@ -119,7 +118,7 @@ Please contribute to the Grafana project and submit a pull request! Build new fe
 
 **Problem**: When running `bra run` for the first time you get an error that it is not a recognized command.
 
-**Solution**: Add the bin directory in your Go workspace directory to the path. Per default this is `$HOME/go/bin` on Linux and `%USERPROFILE%\go\bin` on Windows or `$GOPATH/bin` (`%GOPATH%\bin` on Windows) if you have set your own workspace directory. 
+**Solution**: Add the bin directory in your Go workspace directory to the path. Per default this is `$HOME/go/bin` on Linux and `%USERPROFILE%\go\bin` on Windows or `$GOPATH/bin` (`%GOPATH%\bin` on Windows) if you have set your own workspace directory.
 <br><br>
 
 **Problem**: When executing a `go get` command on Windows and you get an error about the git repository not existing.

karma.conf.js

@@ -1,23 +1,30 @@
+var webpack = require('webpack');
+var path = require('path');
+var webpackTestConfig = require('./scripts/webpack/webpack.test.js');
+
 module.exports = function(config) {
+
   'use strict';
 
   config.set({
-    basePath: __dirname + '/public_gen',
-
     frameworks: ['mocha', 'expect', 'sinon'],
 
     // list of files / patterns to load in the browser
     files: [
-      'vendor/npm/es6-shim/es6-shim.js',
-      'vendor/npm/systemjs/dist/system.src.js',
-      'test/test-main.js',
-
-      {pattern: '**/*.js', included: false},
+      { pattern: 'public/test/index.ts', watched: false }
     ],
 
+    preprocessors: {
+      'public/test/index.ts': ['webpack', 'sourcemap'],
+    },
+
+    webpack: webpackTestConfig,
+    webpackServer: {
+      noInfo: true, // please don't spam the console when running in karma!
+    },
+
     // list of files to exclude
     exclude: [],
-
     reporters: ['dots'],
     port: 9876,
     colors: true,
@@ -26,9 +33,8 @@ module.exports = function(config) {
     browsers: ['PhantomJS'],
     captureTimeout: 20000,
     singleRun: true,
-    autoWatchBatchDelay: 1000,
-    browserNoActivityTimeout: 60000,
-
+    // autoWatchBatchDelay: 1000,
+    // browserNoActivityTimeout: 60000,
   });
 
 };

package.json

@@ -10,14 +10,29 @@
     "url": "http://github.com/grafana/grafana.git"
   },
   "devDependencies": {
+    "@types/d3": "^4.10.1",
+    "@types/enzyme": "^2.8.9",
+    "@types/node": "^8.0.31",
     "@types/react": "^16.0.5",
     "@types/react-dom": "^15.5.4",
+    "angular-mocks": "^1.6.6",
     "autoprefixer": "^6.4.0",
+    "awesome-typescript-loader": "^3.2.3",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "css-loader": "^0.28.7",
+    "enzyme": "^3.0.0",
+    "enzyme-adapter-react-16": "^1.0.0",
     "es6-promise": "^3.0.2",
-    "es6-shim": "^0.35.1",
+    "es6-shim": "^0.35.3",
     "expect.js": "~0.2.0",
+    "expose-loader": "^0.7.3",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
+    "gaze": "^1.1.2",
     "glob": "~7.0.0",
-    "grunt": "^0.4.5",
+    "grunt": "1.0.1",
     "grunt-angular-templates": "^1.1.0",
     "grunt-cli": "~1.2.0",
     "grunt-contrib-clean": "~1.0.0",
@@ -25,72 +40,88 @@
     "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-copy": "~1.0.0",
     "grunt-contrib-cssmin": "~1.0.2",
-    "grunt-contrib-htmlmin": "~2.0.0",
     "grunt-contrib-jshint": "~1.1.0",
-    "grunt-contrib-uglify": "~2.0.0",
-    "grunt-contrib-watch": "^1.0.0",
     "grunt-exec": "^1.0.1",
-    "grunt-filerev": "^2.3.1",
+    "grunt-jscs": "3.0.1",
     "grunt-karma": "~2.0.0",
-    "grunt-ng-annotate": "^3.0.0",
     "grunt-notify": "^0.4.5",
     "grunt-postcss": "^0.8.0",
     "grunt-sass": "^2.0.0",
-    "grunt-string-replace": "~1.3.1",
-    "grunt-systemjs-builder": "^0.2.7",
+    "grunt-sass-lint": "^0.2.2",
     "grunt-usemin": "3.1.1",
+    "grunt-webpack": "^3.0.2",
+    "html-loader": "^0.5.1",
+    "html-webpack-plugin": "^2.30.1",
+    "husky": "^0.14.3",
     "jshint-stylish": "~2.2.1",
-    "karma": "1.3.0",
-    "karma-chrome-launcher": "~2.0.0",
+    "json-loader": "^0.5.7",
+    "karma": "1.7.0",
+    "karma-chrome-launcher": "~2.2.0",
     "karma-coverage": "1.1.1",
     "karma-expect": "~1.1.3",
     "karma-mocha": "~1.3.0",
-    "karma-phantomjs-launcher": "1.0.2",
+    "karma-phantomjs-launcher": "1.0.4",
+    "karma-sinon": "^1.0.5",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^2.0.4",
+    "lint-staged": "^4.2.3",
     "load-grunt-tasks": "3.5.2",
-    "mocha": "3.2.0",
-    "phantomjs-prebuilt": "^2.1.14",
-    "reflect-metadata": "0.1.8",
-    "rxjs": "^5.4.3",
+    "mocha": "3.5.0",
+    "ng-annotate-loader": "^0.6.1",
+    "ng-annotate-webpack-plugin": "^0.2.1-pre",
+    "ngtemplate-loader": "^2.0.1",
+    "npm": "^5.4.2",
+    "phantomjs-prebuilt": "^2.1.15",
+    "postcss-browser-reporter": "^0.5.0",
+    "postcss-loader": "^2.0.6",
+    "postcss-reporter": "^5.0.0",
+    "prettier": "1.7.3",
+    "react-test-renderer": "^16.0.0",
     "sass-lint": "^1.10.2",
-    "systemjs": "0.19.41",
+    "sass-loader": "^6.0.6",
+    "sinon": "1.17.6",
+    "systemjs": "0.20.19",
+    "systemjs-plugin-css": "^0.1.36",
+    "ts-loader": "^2.3.7",
+    "tslint": "^5.7.0",
+    "tslint-loader": "^3.5.3",
+    "typescript": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-cleanup-plugin": "^0.5.1",
+    "webpack-merge": "^4.1.0",
     "zone.js": "^0.7.2"
   },
   "scripts": {
-    "build": "./node_modules/grunt-cli/bin/grunt",
-    "test": "./node_modules/grunt-cli/bin/grunt test",
-    "dev": "./node_modules/grunt-cli/bin/grunt && ./node_modules/grunt-cli/bin/grunt watch"
+    "dev": "./node_modules/.bin/webpack --progress --colors --config scripts/webpack/webpack.dev.js",
+    "watch": "./node_modules/.bin/webpack --progress --colors --watch --config scripts/webpack/webpack.dev.js",
+    "build": "./node_modules/.bin/grunt build",
+    "test": "./node_modules/.bin/grunt test",
+    "lint" : "./node_modules/.bin/tslint -c tslint.json --project ./tsconfig.json --type-check",
+    "watch-test": "./node_modules/grunt-cli/bin/grunt karma:dev"
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@types/enzyme": "^2.8.8",
-    "ace-builds": "^1.2.8",
     "angular": "^1.6.6",
     "angular-bindonce": "^0.3.1",
-    "angular-mocks": "^1.6.6",
     "angular-native-dragdrop": "^1.2.2",
     "angular-route": "^1.6.6",
     "angular-sanitize": "^1.6.6",
+    "babel-polyfill": "^6.26.0",
+    "brace": "^0.10.0",
     "clipboard": "^1.7.1",
-    "eventemitter3": "^2.0.2",
-    "gaze": "^1.1.2",
-    "grunt-jscs": "3.0.1",
-    "grunt-sass-lint": "^0.2.2",
-    "grunt-sync": "^0.6.2",
+    "eventemitter3": "^2.0.3",
+    "file-saver": "^1.3.3",
     "jquery": "^3.2.1",
-    "karma-sinon": "^1.0.5",
     "lodash": "^4.17.4",
+    "moment": "^2.18.1",
     "mousetrap": "^1.6.0",
     "ngreact": "^0.4.1",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.6.1",
+    "react": "^16.0.0",
+    "rxjs": "^5.4.3",
+    "react-dom": "^16.0.0",
     "remarkable": "^1.7.1",
-    "sinon": "1.17.6",
-    "systemjs-builder": "^0.15.34",
     "tether": "^1.4.0",
-    "tether-drop": "https://github.com/torkelo/drop",
-    "tslint": "^5.7.0",
-    "typescript": "^2.5.2",
-    "virtual-scroll": "^1.1.1"
+    "tether-drop": "https://github.com/torkelo/drop"
   }
 }

pkg/api/app_routes.go

@@ -25,6 +25,7 @@ var pluginProxyTransport = &http.Transport{
 	Dial: (&net.Dialer{
 		Timeout:   30 * time.Second,
 		KeepAlive: 30 * time.Second,
+		DualStack: true,
 	}).Dial,
 	TLSHandshakeTimeout: 10 * time.Second,
 }

pkg/api/cloudwatch/cloudwatch.go

@@ -1,516 +0,0 @@
-package cloudwatch
-
-import (
-	"encoding/json"
-	"errors"
-	"fmt"
-	"io/ioutil"
-	"os"
-	"strings"
-	"sync"
-	"time"
-
-	"github.com/aws/aws-sdk-go/aws"
-	"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/ec2metadata"
-	"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/sts"
-	"github.com/grafana/grafana/pkg/metrics"
-	"github.com/grafana/grafana/pkg/middleware"
-	m "github.com/grafana/grafana/pkg/models"
-)
-
-type actionHandler func(*cwRequest, *middleware.Context)
-
-var actionHandlers map[string]actionHandler
-
-type cwRequest struct {
-	Region     string `json:"region"`
-	Action     string `json:"action"`
-	Body       []byte `json:"-"`
-	DataSource *m.DataSource
-}
-
-type datasourceInfo struct {
-	Profile       string
-	Region        string
-	AuthType      string
-	AssumeRoleArn string
-	Namespace     string
-
-	AccessKey string
-	SecretKey string
-}
-
-func (req *cwRequest) GetDatasourceInfo() *datasourceInfo {
-	authType := req.DataSource.JsonData.Get("authType").MustString()
-	assumeRoleArn := req.DataSource.JsonData.Get("assumeRoleArn").MustString()
-	accessKey := ""
-	secretKey := ""
-
-	for key, value := range req.DataSource.SecureJsonData.Decrypt() {
-		if key == "accessKey" {
-			accessKey = value
-		}
-		if key == "secretKey" {
-			secretKey = value
-		}
-	}
-
-	return &datasourceInfo{
-		AuthType:      authType,
-		AssumeRoleArn: assumeRoleArn,
-		Region:        req.Region,
-		Profile:       req.DataSource.Database,
-		AccessKey:     accessKey,
-		SecretKey:     secretKey,
-	}
-}
-
-func init() {
-	actionHandlers = map[string]actionHandler{
-		"GetMetricStatistics":     handleGetMetricStatistics,
-		"ListMetrics":             handleListMetrics,
-		"DescribeAlarms":          handleDescribeAlarms,
-		"DescribeAlarmsForMetric": handleDescribeAlarmsForMetric,
-		"DescribeAlarmHistory":    handleDescribeAlarmHistory,
-		"DescribeInstances":       handleDescribeInstances,
-		"__GetRegions":            handleGetRegions,
-		"__GetNamespaces":         handleGetNamespaces,
-		"__GetMetrics":            handleGetMetrics,
-		"__GetDimensions":         handleGetDimensions,
-	}
-}
-
-type cache struct {
-	credential *credentials.Credentials
-	expiration *time.Time
-}
-
-var awsCredentialCache map[string]cache = make(map[string]cache)
-var credentialCacheLock sync.RWMutex
-
-func getCredentials(dsInfo *datasourceInfo) (*credentials.Credentials, error) {
-	cacheKey := dsInfo.Profile + ":" + dsInfo.AssumeRoleArn
-	credentialCacheLock.RLock()
-	if _, ok := awsCredentialCache[cacheKey]; ok {
-		if awsCredentialCache[cacheKey].expiration != nil &&
-			(*awsCredentialCache[cacheKey].expiration).After(time.Now().UTC()) {
-			result := awsCredentialCache[cacheKey].credential
-			credentialCacheLock.RUnlock()
-			return result, nil
-		}
-	}
-	credentialCacheLock.RUnlock()
-
-	accessKeyId := ""
-	secretAccessKey := ""
-	sessionToken := ""
-	var expiration *time.Time
-	expiration = nil
-	if dsInfo.AuthType == "arn" && strings.Index(dsInfo.AssumeRoleArn, "arn:aws:iam:") == 0 {
-		params := &sts.AssumeRoleInput{
-			RoleArn:         aws.String(dsInfo.AssumeRoleArn),
-			RoleSessionName: aws.String("GrafanaSession"),
-			DurationSeconds: aws.Int64(900),
-		}
-
-		stsSess, err := session.NewSession()
-		if err != nil {
-			return nil, err
-		}
-		stsCreds := credentials.NewChainCredentials(
-			[]credentials.Provider{
-				&credentials.EnvProvider{},
-				&credentials.SharedCredentialsProvider{Filename: "", Profile: dsInfo.Profile},
-				remoteCredProvider(stsSess),
-			})
-		stsConfig := &aws.Config{
-			Region:      aws.String(dsInfo.Region),
-			Credentials: stsCreds,
-		}
-
-		sess, err := session.NewSession(stsConfig)
-		if err != nil {
-			return nil, err
-		}
-		svc := sts.New(sess, stsConfig)
-		resp, err := svc.AssumeRole(params)
-		if err != nil {
-			return nil, err
-		}
-		if resp.Credentials != nil {
-			accessKeyId = *resp.Credentials.AccessKeyId
-			secretAccessKey = *resp.Credentials.SecretAccessKey
-			sessionToken = *resp.Credentials.SessionToken
-			expiration = resp.Credentials.Expiration
-		}
-	}
-
-	sess, err := session.NewSession()
-	if err != nil {
-		return nil, err
-	}
-	creds := credentials.NewChainCredentials(
-		[]credentials.Provider{
-			&credentials.StaticProvider{Value: credentials.Value{
-				AccessKeyID:     accessKeyId,
-				SecretAccessKey: secretAccessKey,
-				SessionToken:    sessionToken,
-			}},
-			&credentials.EnvProvider{},
-			&credentials.StaticProvider{Value: credentials.Value{
-				AccessKeyID:     dsInfo.AccessKey,
-				SecretAccessKey: dsInfo.SecretKey,
-			}},
-			&credentials.SharedCredentialsProvider{Filename: "", Profile: dsInfo.Profile},
-			remoteCredProvider(sess),
-		})
-
-	credentialCacheLock.Lock()
-	awsCredentialCache[cacheKey] = cache{
-		credential: creds,
-		expiration: expiration,
-	}
-	credentialCacheLock.Unlock()
-
-	return creds, nil
-}
-
-func remoteCredProvider(sess *session.Session) credentials.Provider {
-	ecsCredURI := os.Getenv("AWS_CONTAINER_CREDENTIALS_RELATIVE_URI")
-
-	if len(ecsCredURI) > 0 {
-		return ecsCredProvider(sess, ecsCredURI)
-	}
-	return ec2RoleProvider(sess)
-}
-
-func ecsCredProvider(sess *session.Session, uri string) credentials.Provider {
-	const host = `169.254.170.2`
-
-	c := ec2metadata.New(sess)
-	return endpointcreds.NewProviderClient(
-		c.Client.Config,
-		c.Client.Handlers,
-		fmt.Sprintf("http://%s%s", host, uri),
-		func(p *endpointcreds.Provider) { p.ExpiryWindow = 5 * time.Minute })
-}
-
-func ec2RoleProvider(sess *session.Session) credentials.Provider {
-	return &ec2rolecreds.EC2RoleProvider{Client: ec2metadata.New(sess), ExpiryWindow: 5 * time.Minute}
-}
-
-func getAwsConfig(req *cwRequest) (*aws.Config, error) {
-	creds, err := getCredentials(req.GetDatasourceInfo())
-	if err != nil {
-		return nil, err
-	}
-
-	cfg := &aws.Config{
-		Region:      aws.String(req.Region),
-		Credentials: creds,
-	}
-	return cfg, nil
-}
-
-func handleGetMetricStatistics(req *cwRequest, c *middleware.Context) {
-	cfg, err := getAwsConfig(req)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-	sess, err := session.NewSession(cfg)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-	svc := cloudwatch.New(sess, cfg)
-
-	reqParam := &struct {
-		Parameters struct {
-			Namespace          string                  `json:"namespace"`
-			MetricName         string                  `json:"metricName"`
-			Dimensions         []*cloudwatch.Dimension `json:"dimensions"`
-			Statistics         []*string               `json:"statistics"`
-			ExtendedStatistics []*string               `json:"extendedStatistics"`
-			StartTime          int64                   `json:"startTime"`
-			EndTime            int64                   `json:"endTime"`
-			Period             int64                   `json:"period"`
-		} `json:"parameters"`
-	}{}
-	json.Unmarshal(req.Body, reqParam)
-
-	params := &cloudwatch.GetMetricStatisticsInput{
-		Namespace:  aws.String(reqParam.Parameters.Namespace),
-		MetricName: aws.String(reqParam.Parameters.MetricName),
-		Dimensions: reqParam.Parameters.Dimensions,
-		StartTime:  aws.Time(time.Unix(reqParam.Parameters.StartTime, 0)),
-		EndTime:    aws.Time(time.Unix(reqParam.Parameters.EndTime, 0)),
-		Period:     aws.Int64(reqParam.Parameters.Period),
-	}
-	if len(reqParam.Parameters.Statistics) != 0 {
-		params.Statistics = reqParam.Parameters.Statistics
-	}
-	if len(reqParam.Parameters.ExtendedStatistics) != 0 {
-		params.ExtendedStatistics = reqParam.Parameters.ExtendedStatistics
-	}
-
-	resp, err := svc.GetMetricStatistics(params)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-	metrics.M_Aws_CloudWatch_GetMetricStatistics.Inc()
-
-	c.JSON(200, resp)
-}
-
-func handleListMetrics(req *cwRequest, c *middleware.Context) {
-	cfg, err := getAwsConfig(req)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-	sess, err := session.NewSession(cfg)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-	svc := cloudwatch.New(sess, cfg)
-
-	reqParam := &struct {
-		Parameters struct {
-			Namespace  string                        `json:"namespace"`
-			MetricName string                        `json:"metricName"`
-			Dimensions []*cloudwatch.DimensionFilter `json:"dimensions"`
-		} `json:"parameters"`
-	}{}
-	json.Unmarshal(req.Body, reqParam)
-
-	params := &cloudwatch.ListMetricsInput{
-		Namespace:  aws.String(reqParam.Parameters.Namespace),
-		MetricName: aws.String(reqParam.Parameters.MetricName),
-		Dimensions: reqParam.Parameters.Dimensions,
-	}
-
-	var resp cloudwatch.ListMetricsOutput
-	err = svc.ListMetricsPages(params,
-		func(page *cloudwatch.ListMetricsOutput, lastPage bool) bool {
-			metrics.M_Aws_CloudWatch_ListMetrics.Inc()
-			metrics, _ := awsutil.ValuesAtPath(page, "Metrics")
-			for _, metric := range metrics {
-				resp.Metrics = append(resp.Metrics, metric.(*cloudwatch.Metric))
-			}
-			return !lastPage
-		})
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-
-	c.JSON(200, resp)
-}
-
-func handleDescribeAlarms(req *cwRequest, c *middleware.Context) {
-	cfg, err := getAwsConfig(req)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-	sess, err := session.NewSession(cfg)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-	svc := cloudwatch.New(sess, cfg)
-
-	reqParam := &struct {
-		Parameters struct {
-			ActionPrefix    string    `json:"actionPrefix"`
-			AlarmNamePrefix string    `json:"alarmNamePrefix"`
-			AlarmNames      []*string `json:"alarmNames"`
-			StateValue      string    `json:"stateValue"`
-		} `json:"parameters"`
-	}{}
-	json.Unmarshal(req.Body, reqParam)
-
-	params := &cloudwatch.DescribeAlarmsInput{
-		MaxRecords: aws.Int64(100),
-	}
-	if reqParam.Parameters.ActionPrefix != "" {
-		params.ActionPrefix = aws.String(reqParam.Parameters.ActionPrefix)
-	}
-	if reqParam.Parameters.AlarmNamePrefix != "" {
-		params.AlarmNamePrefix = aws.String(reqParam.Parameters.AlarmNamePrefix)
-	}
-	if len(reqParam.Parameters.AlarmNames) != 0 {
-		params.AlarmNames = reqParam.Parameters.AlarmNames
-	}
-	if reqParam.Parameters.StateValue != "" {
-		params.StateValue = aws.String(reqParam.Parameters.StateValue)
-	}
-
-	resp, err := svc.DescribeAlarms(params)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-
-	c.JSON(200, resp)
-}
-
-func handleDescribeAlarmsForMetric(req *cwRequest, c *middleware.Context) {
-	cfg, err := getAwsConfig(req)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-	sess, err := session.NewSession(cfg)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-	svc := cloudwatch.New(sess, cfg)
-
-	reqParam := &struct {
-		Parameters struct {
-			Namespace         string                  `json:"namespace"`
-			MetricName        string                  `json:"metricName"`
-			Dimensions        []*cloudwatch.Dimension `json:"dimensions"`
-			Statistic         string                  `json:"statistic"`
-			ExtendedStatistic string                  `json:"extendedStatistic"`
-			Period            int64                   `json:"period"`
-		} `json:"parameters"`
-	}{}
-	json.Unmarshal(req.Body, reqParam)
-
-	params := &cloudwatch.DescribeAlarmsForMetricInput{
-		Namespace:  aws.String(reqParam.Parameters.Namespace),
-		MetricName: aws.String(reqParam.Parameters.MetricName),
-		Period:     aws.Int64(reqParam.Parameters.Period),
-	}
-	if len(reqParam.Parameters.Dimensions) != 0 {
-		params.Dimensions = reqParam.Parameters.Dimensions
-	}
-	if reqParam.Parameters.Statistic != "" {
-		params.Statistic = aws.String(reqParam.Parameters.Statistic)
-	}
-	if reqParam.Parameters.ExtendedStatistic != "" {
-		params.ExtendedStatistic = aws.String(reqParam.Parameters.ExtendedStatistic)
-	}
-
-	resp, err := svc.DescribeAlarmsForMetric(params)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-
-	c.JSON(200, resp)
-}
-
-func handleDescribeAlarmHistory(req *cwRequest, c *middleware.Context) {
-	cfg, err := getAwsConfig(req)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-	sess, err := session.NewSession(cfg)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-	svc := cloudwatch.New(sess, cfg)
-
-	reqParam := &struct {
-		Parameters struct {
-			AlarmName       string `json:"alarmName"`
-			HistoryItemType string `json:"historyItemType"`
-			StartDate       int64  `json:"startDate"`
-			EndDate         int64  `json:"endDate"`
-		} `json:"parameters"`
-	}{}
-	json.Unmarshal(req.Body, reqParam)
-
-	params := &cloudwatch.DescribeAlarmHistoryInput{
-		AlarmName: aws.String(reqParam.Parameters.AlarmName),
-		StartDate: aws.Time(time.Unix(reqParam.Parameters.StartDate, 0)),
-		EndDate:   aws.Time(time.Unix(reqParam.Parameters.EndDate, 0)),
-	}
-	if reqParam.Parameters.HistoryItemType != "" {
-		params.HistoryItemType = aws.String(reqParam.Parameters.HistoryItemType)
-	}
-
-	resp, err := svc.DescribeAlarmHistory(params)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-
-	c.JSON(200, resp)
-}
-
-func handleDescribeInstances(req *cwRequest, c *middleware.Context) {
-	cfg, err := getAwsConfig(req)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-	sess, err := session.NewSession(cfg)
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-	svc := ec2.New(sess, cfg)
-
-	reqParam := &struct {
-		Parameters struct {
-			Filters     []*ec2.Filter `json:"filters"`
-			InstanceIds []*string     `json:"instanceIds"`
-		} `json:"parameters"`
-	}{}
-	json.Unmarshal(req.Body, reqParam)
-
-	params := &ec2.DescribeInstancesInput{}
-	if len(reqParam.Parameters.Filters) > 0 {
-		params.Filters = reqParam.Parameters.Filters
-	}
-	if len(reqParam.Parameters.InstanceIds) > 0 {
-		params.InstanceIds = reqParam.Parameters.InstanceIds
-	}
-
-	var resp ec2.DescribeInstancesOutput
-	err = svc.DescribeInstancesPages(params,
-		func(page *ec2.DescribeInstancesOutput, lastPage bool) bool {
-			reservations, _ := awsutil.ValuesAtPath(page, "Reservations")
-			for _, reservation := range reservations {
-				resp.Reservations = append(resp.Reservations, reservation.(*ec2.Reservation))
-			}
-			return !lastPage
-		})
-	if err != nil {
-		c.JsonApiErr(500, "Unable to call AWS API", err)
-		return
-	}
-
-	c.JSON(200, resp)
-}
-
-func HandleRequest(c *middleware.Context, ds *m.DataSource) {
-	var req cwRequest
-	req.Body, _ = ioutil.ReadAll(c.Req.Request.Body)
-	req.DataSource = ds
-	json.Unmarshal(req.Body, &req)
-
-	if handler, found := actionHandlers[req.Action]; !found {
-		c.JsonApiErr(500, "Unexpected AWS Action", errors.New(req.Action))
-		return
-	} else {
-		handler(&req, c)
-	}
-}

pkg/api/grafana_com_proxy.go

@@ -19,6 +19,7 @@ var grafanaComProxyTransport = &http.Transport{
 	Dial: (&net.Dialer{
 		Timeout:   30 * time.Second,
 		KeepAlive: 30 * time.Second,
+		DualStack: true,
 	}).Dial,
 	TLSHandshakeTimeout: 10 * time.Second,
 }

pkg/api/pluginproxy/ds_proxy.go

@@ -17,7 +17,6 @@ import (
 
 	"github.com/opentracing/opentracing-go"
 
-	"github.com/grafana/grafana/pkg/api/cloudwatch"
 	"github.com/grafana/grafana/pkg/log"
 	"github.com/grafana/grafana/pkg/middleware"
 	m "github.com/grafana/grafana/pkg/models"
@@ -63,11 +62,6 @@ func NewDataSourceProxy(ds *m.DataSource, plugin *plugins.DataSourcePlugin, ctx
 }
 
 func (proxy *DataSourceProxy) HandleRequest() {
-	if proxy.ds.Type == m.DS_CLOUDWATCH {
-		cloudwatch.HandleRequest(proxy.ctx, proxy.ds)
-		return
-	}
-
 	if err := proxy.validateRequest(); err != nil {
 		proxy.ctx.JsonApiErr(403, err.Error(), nil)
 		return

pkg/cmd/grafana-cli/services/services.go

@@ -30,6 +30,7 @@ func Init(version string) {
 		DialContext: (&net.Dialer{
 			Timeout:   30 * time.Second,
 			KeepAlive: 30 * time.Second,
+			DualStack: true,
 		}).DialContext,
 		MaxIdleConns:          100,
 		IdleConnTimeout:       90 * time.Second,

pkg/cmd/grafana-server/main.go

@@ -21,6 +21,7 @@ import (
 
 	_ "github.com/grafana/grafana/pkg/services/alerting/conditions"
 	_ "github.com/grafana/grafana/pkg/services/alerting/notifiers"
+	_ "github.com/grafana/grafana/pkg/tsdb/cloudwatch"
 	_ "github.com/grafana/grafana/pkg/tsdb/graphite"
 	_ "github.com/grafana/grafana/pkg/tsdb/influxdb"
 	_ "github.com/grafana/grafana/pkg/tsdb/mysql"

pkg/components/imguploader/webdavuploader.go

@@ -24,7 +24,8 @@ type WebdavUploader struct {
 var netTransport = &http.Transport{
 	Proxy: http.ProxyFromEnvironment,
 	Dial: (&net.Dialer{
-		Timeout: 60 * time.Second,
+		Timeout:   60 * time.Second,
+		DualStack: true,
 	}).Dial,
 	TLSHandshakeTimeout: 5 * time.Second,
 }

pkg/models/datasource_cache.go

@@ -54,6 +54,7 @@ func (ds *DataSource) GetHttpTransport() (*http.Transport, error) {
 		Dial: (&net.Dialer{
 			Timeout:   30 * time.Second,
 			KeepAlive: 30 * time.Second,
+			DualStack: true,
 		}).Dial,
 		TLSHandshakeTimeout:   10 * time.Second,
 		ExpectContinueTimeout: 1 * time.Second,

pkg/services/alerting/conditions/reducer.go

@@ -94,6 +94,53 @@ func (s *SimpleReducer) Reduce(series *tsdb.TimeSeries) null.Float {
 				value = (values[(length/2)-1] + values[length/2]) / 2
 			}
 		}
+	case "diff":
+		var (
+			points = series.Points
+			first  float64
+			i      int
+		)
+		// get the newest point
+		for i = len(points) - 1; i >= 0; i-- {
+			if points[i][0].Valid {
+				allNull = false
+				first = points[i][0].Float64
+				break
+			}
+		}
+		// get other points
+		points = points[0:i]
+		for i := len(points) - 1; i >= 0; i-- {
+			if points[i][0].Valid {
+				allNull = false
+				value = first - points[i][0].Float64
+				break
+			}
+		}
+	case "percent_diff":
+		var (
+			points = series.Points
+			first  float64
+			i      int
+		)
+		// get the newest point
+		for i = len(points) - 1; i >= 0; i-- {
+			if points[i][0].Valid {
+				allNull = false
+				first = points[i][0].Float64
+				break
+			}
+		}
+		// get other points
+		points = points[0:i]
+		for i := len(points) - 1; i >= 0; i-- {
+			if points[i][0].Valid {
+				allNull = false
+				val := (first - points[i][0].Float64) / points[i][0].Float64 * 100
+				value = math.Abs(val)
+				break
+			}
+		}
 	}
 
 	if allNull {

pkg/services/alerting/conditions/reducer_test.go

@@ -80,6 +80,17 @@ func TestSimpleReducer(t *testing.T) {
 
 			So(reducer.Reduce(series).Float64, ShouldEqual, float64(3))
 		})
+
+		Convey("diff", func() {
+			result := testReducer("diff", 30, 40)
+			So(result, ShouldEqual, float64(10))
+		})
+
+		Convey("percent_diff", func() {
+			result := testReducer("percent_diff", 30, 40)
+			So(result, ShouldEqual, float64(33.33333333333333))
+		})
+
 	})
 }
 

pkg/services/alerting/notifiers/pagerduty.go

@@ -3,6 +3,8 @@ package notifiers
 import (
 	"strconv"
 
+	"fmt"
+
 	"github.com/grafana/grafana/pkg/bus"
 	"github.com/grafana/grafana/pkg/components/simplejson"
 	"github.com/grafana/grafana/pkg/log"
@@ -72,6 +74,10 @@ func (this *PagerdutyNotifier) Notify(evalContext *alerting.EvalContext) error {
 	if evalContext.Rule.State == m.AlertStateOK {
 		eventType = "resolve"
 	}
+	customData := "Triggered metrics:\n\n"
+	for _, evt := range evalContext.EvalMatches {
+		customData = customData + fmt.Sprintf("%s: %v\n", evt.Metric, evt.Value)
+	}
 
 	this.log.Info("Notifying Pagerduty", "event_type", eventType)
 
@@ -79,6 +85,7 @@ func (this *PagerdutyNotifier) Notify(evalContext *alerting.EvalContext) error {
 	bodyJSON.Set("service_key", this.Key)
 	bodyJSON.Set("description", evalContext.Rule.Name+" - "+evalContext.Rule.Message)
 	bodyJSON.Set("client", "Grafana")
+	bodyJSON.Set("details", customData)
 	bodyJSON.Set("event_type", eventType)
 	bodyJSON.Set("incident_key", "alertId-"+strconv.FormatInt(evalContext.Rule.Id, 10))
 

pkg/services/alerting/notifiers/slack.go

@@ -1,7 +1,11 @@
 package notifiers
 
 import (
+	"bytes"
 	"encoding/json"
+	"io"
+	"mime/multipart"
+	"os"
 	"time"
 
 	"github.com/grafana/grafana/pkg/bus"
@@ -15,7 +19,7 @@ func init() {
 	alerting.RegisterNotifier(&alerting.NotifierPlugin{
 		Type:        "slack",
 		Name:        "Slack",
-		Description: "Sends notifications using Grafana server configured STMP settings",
+		Description: "Sends notifications to Slack via Slack Webhooks",
 		Factory:     NewSlackNotifier,
 		OptionsTemplate: `
       <h3 class="page-heading">Slack settings</h3>
@@ -45,6 +49,17 @@ func init() {
           Mention a user or a group using @ when notifying in a channel
         </info-popover>
       </div>
+      <div class="gf-form max-width-30">
+        <span class="gf-form-label width-6">Token</span>
+        <input type="text"
+          class="gf-form-input max-width-30"
+          ng-model="ctrl.model.settings.token"
+          data-placement="right">
+        </input>
+        <info-popover mode="right-absolute">
+          Provide a bot token to use the Slack file.upload API (starts with "xoxb")
+        </info-popover>
+      </div>
     `,
 	})
 
@@ -58,12 +73,16 @@ func NewSlackNotifier(model *m.AlertNotification) (alerting.Notifier, error) {
 
 	recipient := model.Settings.Get("recipient").MustString()
 	mention := model.Settings.Get("mention").MustString()
+	token := model.Settings.Get("token").MustString()
+	uploadImage := model.Settings.Get("uploadImage").MustBool(true)
 
 	return &SlackNotifier{
 		NotifierBase: NewNotifierBase(model.Id, model.IsDefault, model.Name, model.Type, model.Settings),
 		Url:          url,
 		Recipient:    recipient,
 		Mention:      mention,
+		Token:        token,
+		Upload:       uploadImage,
 		log:          log.New("alerting.notifier.slack"),
 	}, nil
 }
@@ -73,6 +92,8 @@ type SlackNotifier struct {
 	Url       string
 	Recipient string
 	Mention   string
+	Token     string
+	Upload    bool
 	log       log.Logger
 }
 
@@ -110,6 +131,11 @@ func (this *SlackNotifier) Notify(evalContext *alerting.EvalContext) error {
 	if evalContext.Rule.State != m.AlertStateOK { //dont add message when going back to alert state ok.
 		message += " " + evalContext.Rule.Message
 	}
+	image_url := ""
+	// default to file.upload API method if a token is provided
+	if this.Token == "" {
+		image_url = evalContext.ImagePublicUrl
+	}
 
 	body := map[string]interface{}{
 		"attachments": []map[string]interface{}{
@@ -120,7 +146,7 @@ func (this *SlackNotifier) Notify(evalContext *alerting.EvalContext) error {
 				"title_link":  ruleUrl,
 				"text":        message,
 				"fields":      fields,
-				"image_url":   evalContext.ImagePublicUrl,
+				"image_url":   image_url,
 				"footer":      "Grafana v" + setting.BuildVersion,
 				"footer_icon": "https://grafana.com/assets/img/fav32.png",
 				"ts":          time.Now().Unix(),
@@ -133,14 +159,75 @@ func (this *SlackNotifier) Notify(evalContext *alerting.EvalContext) error {
 	if this.Recipient != "" {
 		body["channel"] = this.Recipient
 	}
-
 	data, _ := json.Marshal(&body)
 	cmd := &m.SendWebhookSync{Url: this.Url, Body: string(data)}
-
 	if err := bus.DispatchCtx(evalContext.Ctx, cmd); err != nil {
 		this.log.Error("Failed to send slack notification", "error", err, "webhook", this.Name)
 		return err
 	}
+	if this.Token != "" && this.UploadImage {
+		err = SlackFileUpload(evalContext, this.log, "https://slack.com/api/files.upload", this.Recipient, this.Token)
+		if err != nil {
+			return err
+		}
+	}
+	return nil
+}
 
+func SlackFileUpload(evalContext *alerting.EvalContext, log log.Logger, url string, recipient string, token string) error {
+	if evalContext.ImageOnDiskPath == "" {
+		evalContext.ImageOnDiskPath = "public/img/mixed_styles.png"
+	}
+	log.Info("Uploading to slack via file.upload API")
+	headers, uploadBody, err := GenerateSlackBody(evalContext.ImageOnDiskPath, token, recipient)
+	if err != nil {
+		return err
+	}
+	cmd := &m.SendWebhookSync{Url: url, Body: uploadBody.String(), HttpHeader: headers, HttpMethod: "POST"}
+	if err := bus.DispatchCtx(evalContext.Ctx, cmd); err != nil {
+		log.Error("Failed to upload slack image", "error", err, "webhook", "file.upload")
+		return err
+	}
+	if err != nil {
+		return err
+	}
 	return nil
 }
+
+func GenerateSlackBody(file string, token string, recipient string) (map[string]string, bytes.Buffer, error) {
+	// Slack requires all POSTs to files.upload to present
+	// an "application/x-www-form-urlencoded" encoded querystring
+	// See https://api.slack.com/methods/files.upload
+	var b bytes.Buffer
+	w := multipart.NewWriter(&b)
+	// Add the generated image file
+	f, err := os.Open(file)
+	if err != nil {
+		return nil, b, err
+	}
+	defer f.Close()
+	fw, err := w.CreateFormFile("file", file)
+	if err != nil {
+		return nil, b, err
+	}
+	_, err = io.Copy(fw, f)
+	if err != nil {
+		return nil, b, err
+	}
+	// Add the authorization token
+	err = w.WriteField("token", token)
+	if err != nil {
+		return nil, b, err
+	}
+	// Add the channel(s) to POST to
+	err = w.WriteField("channels", recipient)
+	if err != nil {
+		return nil, b, err
+	}
+	w.Close()
+	headers := map[string]string{
+		"Content-Type":  w.FormDataContentType(),
+		"Authorization": "auth_token=\"" + token + "\"",
+	}
+	return headers, b, nil
+}

pkg/services/alerting/notifiers/slack_test.go

@@ -48,14 +48,16 @@ func TestSlackNotifier(t *testing.T) {
 				So(slackNotifier.Url, ShouldEqual, "http://google.com")
 				So(slackNotifier.Recipient, ShouldEqual, "")
 				So(slackNotifier.Mention, ShouldEqual, "")
+				So(slackNotifier.Token, ShouldEqual, "")
 			})
 
-			Convey("from settings with Recipient and Mention", func() {
+			Convey("from settings with Recipient, Mention, and Token", func() {
 				json := `
 				{
           "url": "http://google.com",
           "recipient": "#ds-opentsdb",
-          "mention": "@carl"
+          "mention": "@carl",
+          "token": "xoxb-XXXXXXXX-XXXXXXXX-XXXXXXXXXX"
 				}`
 
 				settingsJSON, _ := simplejson.NewJson([]byte(json))
@@ -74,6 +76,7 @@ func TestSlackNotifier(t *testing.T) {
 				So(slackNotifier.Url, ShouldEqual, "http://google.com")
 				So(slackNotifier.Recipient, ShouldEqual, "#ds-opentsdb")
 				So(slackNotifier.Mention, ShouldEqual, "@carl")
+				So(slackNotifier.Token, ShouldEqual, "xoxb-XXXXXXXX-XXXXXXXX-XXXXXXXXXX")
 			})
 
 		})

pkg/services/notifications/webhook.go

@@ -27,7 +27,8 @@ type Webhook struct {
 var netTransport = &http.Transport{
 	Proxy: http.ProxyFromEnvironment,
 	Dial: (&net.Dialer{
-		Timeout: 30 * time.Second,
+		Timeout:   30 * time.Second,
+		DualStack: true,
 	}).Dial,
 	TLSHandshakeTimeout: 5 * time.Second,
 }

pkg/setting/setting.go

@@ -264,12 +264,16 @@ func applyCommandLineDefaultProperties(props map[string]string) {
 
 func applyCommandLineProperties(props map[string]string) {
 	for _, section := range Cfg.Sections() {
+		sectionName := section.Name() + "."
+		if section.Name() == ini.DEFAULT_SECTION {
+			sectionName = ""
+		}
 		for _, key := range section.Keys() {
-			keyString := fmt.Sprintf("%s.%s", section.Name(), key.Name())
+			keyString := sectionName + key.Name()
 			value, exists := props[keyString]
 			if exists {
-				key.SetValue(value)
 				appliedCommandLineProperties = append(appliedCommandLineProperties, fmt.Sprintf("%s=%s", keyString, value))
+				key.SetValue(value)
 			}
 		}
 	}
@@ -449,16 +453,11 @@ func validateStaticRootPath() error {
 		return nil
 	}
 
-	if _, err := os.Stat(path.Join(StaticRootPath, "css")); err == nil {
-		return nil
-	}
-
-	if _, err := os.Stat(StaticRootPath + "_gen/css"); err == nil {
-		StaticRootPath = StaticRootPath + "_gen"
-		return nil
+	if _, err := os.Stat(path.Join(StaticRootPath, "build")); err != nil {
+		logger.Error("Failed to detect generated javascript files in public/build")
 	}
 
-	return fmt.Errorf("Failed to detect generated css or javascript files in static root (%s), have you executed default grunt task?", StaticRootPath)
+	return nil
 }
 
 func NewConfigContext(args *CommandLineArgs) error {
@@ -656,4 +655,5 @@ func LogConfigurationInfo() {
 	logger.Info("Path Data", "path", DataPath)
 	logger.Info("Path Logs", "path", LogsPath)
 	logger.Info("Path Plugins", "path", PluginsPath)
+	logger.Info("App mode " + Env)
 }

pkg/tracing/tracing.go

@@ -80,8 +80,8 @@ func internalInit(settings *TracingSettings) (io.Closer, error) {
 		return nil, err
 	}
 
-	logger.Info("Initialized jaeger tracer", "address", settings.Address)
 	opentracing.InitGlobalTracer(tracer)
+	logger.Info("Initializing Jaeger tracer", "address", settings.Address)
 	return closer, nil
 }
 

pkg/tsdb/cloudwatch/annotation_query.go

@@ -0,0 +1,220 @@
+package cloudwatch
+
+import (
+	"context"
+	"errors"
+	"time"
+
+	"github.com/aws/aws-sdk-go/aws"
+	"github.com/aws/aws-sdk-go/service/cloudwatch"
+	"github.com/grafana/grafana/pkg/components/simplejson"
+	"github.com/grafana/grafana/pkg/tsdb"
+)
+
+func (e *CloudWatchExecutor) executeAnnotationQuery(ctx context.Context, queryContext *tsdb.TsdbQuery) (*tsdb.Response, error) {
+	result := &tsdb.Response{
+		Results: make(map[string]*tsdb.QueryResult),
+	}
+	firstQuery := queryContext.Queries[0]
+	queryResult := &tsdb.QueryResult{Meta: simplejson.New(), RefId: firstQuery.RefId}
+
+	parameters := firstQuery.Model
+	usePrefixMatch := parameters.Get("prefixMatching").MustBool(false)
+	region := parameters.Get("region").MustString("")
+	namespace := parameters.Get("namespace").MustString("")
+	metricName := parameters.Get("metricName").MustString("")
+	dimensions := parameters.Get("dimensions").MustMap()
+	statistics, extendedStatistics, err := parseStatistics(parameters)
+	if err != nil {
+		return nil, err
+	}
+	period := int64(parameters.Get("period").MustInt(0))
+	if period == 0 && !usePrefixMatch {
+		period = 300
+	}
+	actionPrefix := parameters.Get("actionPrefix").MustString("")
+	alarmNamePrefix := parameters.Get("alarmNamePrefix").MustString("")
+
+	svc, err := e.getClient(region)
+	if err != nil {
+		return nil, err
+	}
+
+	var alarmNames []*string
+	if usePrefixMatch {
+		params := &cloudwatch.DescribeAlarmsInput{
+			MaxRecords:      aws.Int64(100),
+			ActionPrefix:    aws.String(actionPrefix),
+			AlarmNamePrefix: aws.String(alarmNamePrefix),
+		}
+		resp, err := svc.DescribeAlarms(params)
+		if err != nil {
+			return nil, errors.New("Failed to call cloudwatch:DescribeAlarms")
+		}
+		alarmNames = filterAlarms(resp, namespace, metricName, dimensions, statistics, extendedStatistics, period)
+	} else {
+		if region == "" || namespace == "" || metricName == "" || len(statistics) == 0 {
+			return result, nil
+		}
+
+		var qd []*cloudwatch.Dimension
+		for k, v := range dimensions {
+			if vv, ok := v.(string); ok {
+				qd = append(qd, &cloudwatch.Dimension{
+					Name:  aws.String(k),
+					Value: aws.String(vv),
+				})
+			}
+		}
+		for _, s := range statistics {
+			params := &cloudwatch.DescribeAlarmsForMetricInput{
+				Namespace:  aws.String(namespace),
+				MetricName: aws.String(metricName),
+				Dimensions: qd,
+				Statistic:  aws.String(s),
+				Period:     aws.Int64(int64(period)),
+			}
+			resp, err := svc.DescribeAlarmsForMetric(params)
+			if err != nil {
+				return nil, errors.New("Failed to call cloudwatch:DescribeAlarmsForMetric")
+			}
+			for _, alarm := range resp.MetricAlarms {
+				alarmNames = append(alarmNames, alarm.AlarmName)
+			}
+		}
+		for _, s := range extendedStatistics {
+			params := &cloudwatch.DescribeAlarmsForMetricInput{
+				Namespace:         aws.String(namespace),
+				MetricName:        aws.String(metricName),
+				Dimensions:        qd,
+				ExtendedStatistic: aws.String(s),
+				Period:            aws.Int64(int64(period)),
+			}
+			resp, err := svc.DescribeAlarmsForMetric(params)
+			if err != nil {
+				return nil, errors.New("Failed to call cloudwatch:DescribeAlarmsForMetric")
+			}
+			for _, alarm := range resp.MetricAlarms {
+				alarmNames = append(alarmNames, alarm.AlarmName)
+			}
+		}
+	}
+
+	startTime, err := queryContext.TimeRange.ParseFrom()
+	if err != nil {
+		return nil, err
+	}
+	endTime, err := queryContext.TimeRange.ParseTo()
+	if err != nil {
+		return nil, err
+	}
+
+	annotations := make([]map[string]string, 0)
+	for _, alarmName := range alarmNames {
+		params := &cloudwatch.DescribeAlarmHistoryInput{
+			AlarmName:  alarmName,
+			StartDate:  aws.Time(startTime),
+			EndDate:    aws.Time(endTime),
+			MaxRecords: aws.Int64(100),
+		}
+		resp, err := svc.DescribeAlarmHistory(params)
+		if err != nil {
+			return nil, errors.New("Failed to call cloudwatch:DescribeAlarmHistory")
+		}
+		for _, history := range resp.AlarmHistoryItems {
+			annotation := make(map[string]string)
+			annotation["time"] = history.Timestamp.UTC().Format(time.RFC3339)
+			annotation["title"] = *history.AlarmName
+			annotation["tags"] = *history.HistoryItemType
+			annotation["text"] = *history.HistorySummary
+			annotations = append(annotations, annotation)
+		}
+	}
+
+	transformAnnotationToTable(annotations, queryResult)
+	result.Results[firstQuery.RefId] = queryResult
+	return result, err
+}
+
+func transformAnnotationToTable(data []map[string]string, result *tsdb.QueryResult) {
+	table := &tsdb.Table{
+		Columns: make([]tsdb.TableColumn, 4),
+		Rows:    make([]tsdb.RowValues, 0),
+	}
+	table.Columns[0].Text = "time"
+	table.Columns[1].Text = "title"
+	table.Columns[2].Text = "tags"
+	table.Columns[3].Text = "text"
+
+	for _, r := range data {
+		values := make([]interface{}, 4)
+		values[0] = r["time"]
+		values[1] = r["title"]
+		values[2] = r["tags"]
+		values[3] = r["text"]
+		table.Rows = append(table.Rows, values)
+	}
+	result.Tables = append(result.Tables, table)
+	result.Meta.Set("rowCount", len(data))
+}
+
+func filterAlarms(alarms *cloudwatch.DescribeAlarmsOutput, namespace string, metricName string, dimensions map[string]interface{}, statistics []string, extendedStatistics []string, period int64) []*string {
+	alarmNames := make([]*string, 0)
+
+	for _, alarm := range alarms.MetricAlarms {
+		if namespace != "" && *alarm.Namespace != namespace {
+			continue
+		}
+		if metricName != "" && *alarm.MetricName != metricName {
+			continue
+		}
+
+		match := true
+		if len(dimensions) == 0 {
+			// all match
+		} else if len(alarm.Dimensions) != len(dimensions) {
+			match = false
+		} else {
+			for _, d := range alarm.Dimensions {
+				if _, ok := dimensions[*d.Name]; !ok {
+					match = false
+				}
+			}
+		}
+		if !match {
+			continue
+		}
+
+		if len(statistics) != 0 {
+			found := false
+			for _, s := range statistics {
+				if *alarm.Statistic == s {
+					found = true
+				}
+			}
+			if !found {
+				continue
+			}
+		}
+
+		if len(extendedStatistics) != 0 {
+			found := false
+			for _, s := range extendedStatistics {
+				if *alarm.Statistic == s {
+					found = true
+				}
+			}
+			if !found {
+				continue
+			}
+		}
+
+		if period != 0 && *alarm.Period != period {
+			continue
+		}
+
+		alarmNames = append(alarmNames, alarm.AlarmName)
+	}
+
+	return alarmNames
+}

pkg/tsdb/cloudwatch/cloudwatch.go

@@ -0,0 +1,361 @@
+package cloudwatch
+
+import (
+	"context"
+	"errors"
+	"regexp"
+	"sort"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/grafana/grafana/pkg/log"
+	"github.com/grafana/grafana/pkg/models"
+	"github.com/grafana/grafana/pkg/setting"
+	"github.com/grafana/grafana/pkg/tsdb"
+
+	"github.com/aws/aws-sdk-go/aws"
+	"github.com/aws/aws-sdk-go/aws/request"
+	"github.com/aws/aws-sdk-go/service/cloudwatch"
+	"github.com/grafana/grafana/pkg/components/null"
+	"github.com/grafana/grafana/pkg/components/simplejson"
+	"github.com/grafana/grafana/pkg/metrics"
+)
+
+type CloudWatchExecutor struct {
+	*models.DataSource
+}
+
+type DatasourceInfo struct {
+	Profile       string
+	Region        string
+	AuthType      string
+	AssumeRoleArn string
+	Namespace     string
+
+	AccessKey string
+	SecretKey string
+}
+
+func NewCloudWatchExecutor(dsInfo *models.DataSource) (tsdb.TsdbQueryEndpoint, error) {
+	return &CloudWatchExecutor{}, nil
+}
+
+var (
+	plog               log.Logger
+	standardStatistics map[string]bool
+	aliasFormat        *regexp.Regexp
+)
+
+func init() {
+	plog = log.New("tsdb.cloudwatch")
+	tsdb.RegisterTsdbQueryEndpoint("cloudwatch", NewCloudWatchExecutor)
+	standardStatistics = map[string]bool{
+		"Average":     true,
+		"Maximum":     true,
+		"Minimum":     true,
+		"Sum":         true,
+		"SampleCount": true,
+	}
+	aliasFormat = regexp.MustCompile(`\{\{\s*(.+?)\s*\}\}`)
+}
+
+func (e *CloudWatchExecutor) Query(ctx context.Context, dsInfo *models.DataSource, queryContext *tsdb.TsdbQuery) (*tsdb.Response, error) {
+	var result *tsdb.Response
+	e.DataSource = dsInfo
+	queryType := queryContext.Queries[0].Model.Get("type").MustString("")
+	var err error
+
+	switch queryType {
+	case "metricFindQuery":
+		result, err = e.executeMetricFindQuery(ctx, queryContext)
+		break
+	case "annotationQuery":
+		result, err = e.executeAnnotationQuery(ctx, queryContext)
+		break
+	case "timeSeriesQuery":
+		fallthrough
+	default:
+		result, err = e.executeTimeSeriesQuery(ctx, queryContext)
+		break
+	}
+
+	return result, err
+}
+
+func (e *CloudWatchExecutor) executeTimeSeriesQuery(ctx context.Context, queryContext *tsdb.TsdbQuery) (*tsdb.Response, error) {
+	result := &tsdb.Response{
+		Results: make(map[string]*tsdb.QueryResult),
+	}
+
+	errCh := make(chan error, 1)
+	resCh := make(chan *tsdb.QueryResult, 1)
+
+	currentlyExecuting := 0
+	for i, model := range queryContext.Queries {
+		queryType := model.Model.Get("type").MustString()
+		if queryType != "timeSeriesQuery" && queryType != "" {
+			continue
+		}
+		currentlyExecuting++
+		go func(refId string, index int) {
+			queryRes, err := e.executeQuery(ctx, queryContext.Queries[index].Model, queryContext)
+			currentlyExecuting--
+			if err != nil {
+				errCh <- err
+			} else {
+				queryRes.RefId = refId
+				resCh <- queryRes
+			}
+		}(model.RefId, i)
+	}
+
+	for currentlyExecuting != 0 {
+		select {
+		case res := <-resCh:
+			result.Results[res.RefId] = res
+		case err := <-errCh:
+			return result, err
+		case <-ctx.Done():
+			return result, ctx.Err()
+		}
+	}
+
+	return result, nil
+}
+
+func (e *CloudWatchExecutor) executeQuery(ctx context.Context, parameters *simplejson.Json, queryContext *tsdb.TsdbQuery) (*tsdb.QueryResult, error) {
+	query, err := parseQuery(parameters)
+	if err != nil {
+		return nil, err
+	}
+
+	client, err := e.getClient(query.Region)
+	if err != nil {
+		return nil, err
+	}
+
+	startTime, err := queryContext.TimeRange.ParseFrom()
+	if err != nil {
+		return nil, err
+	}
+
+	endTime, err := queryContext.TimeRange.ParseTo()
+	if err != nil {
+		return nil, err
+	}
+
+	params := &cloudwatch.GetMetricStatisticsInput{
+		Namespace:  aws.String(query.Namespace),
+		MetricName: aws.String(query.MetricName),
+		Dimensions: query.Dimensions,
+		Period:     aws.Int64(int64(query.Period)),
+		StartTime:  aws.Time(startTime),
+		EndTime:    aws.Time(endTime),
+	}
+	if len(query.Statistics) > 0 {
+		params.Statistics = query.Statistics
+	}
+	if len(query.ExtendedStatistics) > 0 {
+		params.ExtendedStatistics = query.ExtendedStatistics
+	}
+
+	if setting.Env == setting.DEV {
+		plog.Debug("CloudWatch query", "raw query", params)
+	}
+
+	resp, err := client.GetMetricStatisticsWithContext(ctx, params, request.WithResponseReadTimeout(10*time.Second))
+	if err != nil {
+		return nil, err
+	}
+	metrics.M_Aws_CloudWatch_GetMetricStatistics.Inc()
+
+	queryRes, err := parseResponse(resp, query)
+	if err != nil {
+		return nil, err
+	}
+
+	return queryRes, nil
+}
+
+func parseDimensions(model *simplejson.Json) ([]*cloudwatch.Dimension, error) {
+	var result []*cloudwatch.Dimension
+
+	for k, v := range model.Get("dimensions").MustMap() {
+		kk := k
+		if vv, ok := v.(string); ok {
+			result = append(result, &cloudwatch.Dimension{
+				Name:  &kk,
+				Value: &vv,
+			})
+		} else {
+			return nil, errors.New("failed to parse")
+		}
+	}
+
+	sort.Slice(result, func(i, j int) bool {
+		return *result[i].Name < *result[j].Name
+	})
+	return result, nil
+}
+
+func parseStatistics(model *simplejson.Json) ([]string, []string, error) {
+	var statistics []string
+	var extendedStatistics []string
+
+	for _, s := range model.Get("statistics").MustArray() {
+		if ss, ok := s.(string); ok {
+			if _, isStandard := standardStatistics[ss]; isStandard {
+				statistics = append(statistics, ss)
+			} else {
+				extendedStatistics = append(extendedStatistics, ss)
+			}
+		} else {
+			return nil, nil, errors.New("failed to parse")
+		}
+	}
+
+	return statistics, extendedStatistics, nil
+}
+
+func parseQuery(model *simplejson.Json) (*CloudWatchQuery, error) {
+	region, err := model.Get("region").String()
+	if err != nil {
+		return nil, err
+	}
+
+	namespace, err := model.Get("namespace").String()
+	if err != nil {
+		return nil, err
+	}
+
+	metricName, err := model.Get("metricName").String()
+	if err != nil {
+		return nil, err
+	}
+
+	dimensions, err := parseDimensions(model)
+	if err != nil {
+		return nil, err
+	}
+
+	statistics, extendedStatistics, err := parseStatistics(model)
+	if err != nil {
+		return nil, err
+	}
+
+	p := model.Get("period").MustString("")
+	if p == "" {
+		if namespace == "AWS/EC2" {
+			p = "300"
+		} else {
+			p = "60"
+		}
+	}
+
+	period := 300
+	if regexp.MustCompile(`^\d+$`).Match([]byte(p)) {
+		period, err = strconv.Atoi(p)
+		if err != nil {
+			return nil, err
+		}
+	} else {
+		d, err := time.ParseDuration(p)
+		if err != nil {
+			return nil, err
+		}
+		period = int(d.Seconds())
+	}
+
+	alias := model.Get("alias").MustString("{{metric}}_{{stat}}")
+
+	return &CloudWatchQuery{
+		Region:             region,
+		Namespace:          namespace,
+		MetricName:         metricName,
+		Dimensions:         dimensions,
+		Statistics:         aws.StringSlice(statistics),
+		ExtendedStatistics: aws.StringSlice(extendedStatistics),
+		Period:             period,
+		Alias:              alias,
+	}, nil
+}
+
+func formatAlias(query *CloudWatchQuery, stat string, dimensions map[string]string) string {
+	data := map[string]string{}
+	data["region"] = query.Region
+	data["namespace"] = query.Namespace
+	data["metric"] = query.MetricName
+	data["stat"] = stat
+	for k, v := range dimensions {
+		data[k] = v
+	}
+
+	result := aliasFormat.ReplaceAllFunc([]byte(query.Alias), func(in []byte) []byte {
+		labelName := strings.Replace(string(in), "{{", "", 1)
+		labelName = strings.Replace(labelName, "}}", "", 1)
+		labelName = strings.TrimSpace(labelName)
+		if val, exists := data[labelName]; exists {
+			return []byte(val)
+		}
+
+		return in
+	})
+
+	return string(result)
+}
+
+func parseResponse(resp *cloudwatch.GetMetricStatisticsOutput, query *CloudWatchQuery) (*tsdb.QueryResult, error) {
+	queryRes := tsdb.NewQueryResult()
+
+	var value float64
+	for _, s := range append(query.Statistics, query.ExtendedStatistics...) {
+		series := tsdb.TimeSeries{
+			Tags: map[string]string{},
+		}
+		for _, d := range query.Dimensions {
+			series.Tags[*d.Name] = *d.Value
+		}
+		series.Name = formatAlias(query, *s, series.Tags)
+
+		lastTimestamp := make(map[string]time.Time)
+		sort.Slice(resp.Datapoints, func(i, j int) bool {
+			return (*resp.Datapoints[i].Timestamp).Before(*resp.Datapoints[j].Timestamp)
+		})
+		for _, v := range resp.Datapoints {
+			switch *s {
+			case "Average":
+				value = *v.Average
+			case "Maximum":
+				value = *v.Maximum
+			case "Minimum":
+				value = *v.Minimum
+			case "Sum":
+				value = *v.Sum
+			case "SampleCount":
+				value = *v.SampleCount
+			default:
+				if strings.Index(*s, "p") == 0 && v.ExtendedStatistics[*s] != nil {
+					value = *v.ExtendedStatistics[*s]
+				}
+			}
+
+			// terminate gap of data points
+			timestamp := *v.Timestamp
+			if _, ok := lastTimestamp[*s]; ok {
+				nextTimestampFromLast := lastTimestamp[*s].Add(time.Duration(query.Period) * time.Second)
+				for timestamp.After(nextTimestampFromLast) {
+					series.Points = append(series.Points, tsdb.NewTimePoint(null.FloatFromPtr(nil), float64(nextTimestampFromLast.Unix()*1000)))
+					nextTimestampFromLast = nextTimestampFromLast.Add(time.Duration(query.Period) * time.Second)
+				}
+			}
+			lastTimestamp[*s] = timestamp
+
+			series.Points = append(series.Points, tsdb.NewTimePoint(null.FloatFrom(value), float64(timestamp.Unix()*1000)))
+		}
+
+		queryRes.Series = append(queryRes.Series, &series)
+	}
+
+	return queryRes, nil
+}

pkg/tsdb/cloudwatch/cloudwatch_test.go

@@ -0,0 +1,181 @@
+package cloudwatch
+
+import (
+	"testing"
+	"time"
+
+	"github.com/aws/aws-sdk-go/aws"
+	"github.com/aws/aws-sdk-go/service/cloudwatch"
+	"github.com/grafana/grafana/pkg/components/null"
+	"github.com/grafana/grafana/pkg/components/simplejson"
+	. "github.com/smartystreets/goconvey/convey"
+)
+
+func TestCloudWatch(t *testing.T) {
+	Convey("CloudWatch", t, func() {
+
+		Convey("can parse cloudwatch json model", func() {
+			json := `
+				{
+					"region": "us-east-1",
+					"namespace": "AWS/ApplicationELB",
+					"metricName": "TargetResponseTime",
+					"dimensions": {
+						"LoadBalancer": "lb",
+						"TargetGroup": "tg"
+					},
+					"statistics": [
+						"Average",
+						"Maximum",
+						"p50.00",
+						"p90.00"
+					],
+					"period": "60",
+					"alias": "{{metric}}_{{stat}}"
+				}
+			`
+			modelJson, err := simplejson.NewJson([]byte(json))
+			So(err, ShouldBeNil)
+
+			res, err := parseQuery(modelJson)
+			So(err, ShouldBeNil)
+			So(res.Region, ShouldEqual, "us-east-1")
+			So(res.Namespace, ShouldEqual, "AWS/ApplicationELB")
+			So(res.MetricName, ShouldEqual, "TargetResponseTime")
+			So(len(res.Dimensions), ShouldEqual, 2)
+			So(*res.Dimensions[0].Name, ShouldEqual, "LoadBalancer")
+			So(*res.Dimensions[0].Value, ShouldEqual, "lb")
+			So(*res.Dimensions[1].Name, ShouldEqual, "TargetGroup")
+			So(*res.Dimensions[1].Value, ShouldEqual, "tg")
+			So(len(res.Statistics), ShouldEqual, 2)
+			So(*res.Statistics[0], ShouldEqual, "Average")
+			So(*res.Statistics[1], ShouldEqual, "Maximum")
+			So(len(res.ExtendedStatistics), ShouldEqual, 2)
+			So(*res.ExtendedStatistics[0], ShouldEqual, "p50.00")
+			So(*res.ExtendedStatistics[1], ShouldEqual, "p90.00")
+			So(res.Period, ShouldEqual, 60)
+			So(res.Alias, ShouldEqual, "{{metric}}_{{stat}}")
+		})
+
+		Convey("can parse cloudwatch response", func() {
+			timestamp := time.Unix(0, 0)
+			resp := &cloudwatch.GetMetricStatisticsOutput{
+				Label: aws.String("TargetResponseTime"),
+				Datapoints: []*cloudwatch.Datapoint{
+					{
+						Timestamp: aws.Time(timestamp),
+						Average:   aws.Float64(10.0),
+						Maximum:   aws.Float64(20.0),
+						ExtendedStatistics: map[string]*float64{
+							"p50.00": aws.Float64(30.0),
+							"p90.00": aws.Float64(40.0),
+						},
+					},
+				},
+			}
+			query := &CloudWatchQuery{
+				Region:     "us-east-1",
+				Namespace:  "AWS/ApplicationELB",
+				MetricName: "TargetResponseTime",
+				Dimensions: []*cloudwatch.Dimension{
+					{
+						Name:  aws.String("LoadBalancer"),
+						Value: aws.String("lb"),
+					},
+					{
+						Name:  aws.String("TargetGroup"),
+						Value: aws.String("tg"),
+					},
+				},
+				Statistics:         []*string{aws.String("Average"), aws.String("Maximum")},
+				ExtendedStatistics: []*string{aws.String("p50.00"), aws.String("p90.00")},
+				Period:             60,
+				Alias:              "{{namespace}}_{{metric}}_{{stat}}",
+			}
+
+			queryRes, err := parseResponse(resp, query)
+			So(err, ShouldBeNil)
+			So(queryRes.Series[0].Name, ShouldEqual, "AWS/ApplicationELB_TargetResponseTime_Average")
+			So(queryRes.Series[0].Tags["LoadBalancer"], ShouldEqual, "lb")
+			So(queryRes.Series[0].Tags["TargetGroup"], ShouldEqual, "tg")
+			So(queryRes.Series[0].Points[0][0].String(), ShouldEqual, null.FloatFrom(10.0).String())
+			So(queryRes.Series[1].Points[0][0].String(), ShouldEqual, null.FloatFrom(20.0).String())
+			So(queryRes.Series[2].Points[0][0].String(), ShouldEqual, null.FloatFrom(30.0).String())
+			So(queryRes.Series[3].Points[0][0].String(), ShouldEqual, null.FloatFrom(40.0).String())
+		})
+
+		Convey("terminate gap of data points", func() {
+			timestamp := time.Unix(0, 0)
+			resp := &cloudwatch.GetMetricStatisticsOutput{
+				Label: aws.String("TargetResponseTime"),
+				Datapoints: []*cloudwatch.Datapoint{
+					{
+						Timestamp: aws.Time(timestamp),
+						Average:   aws.Float64(10.0),
+						Maximum:   aws.Float64(20.0),
+						ExtendedStatistics: map[string]*float64{
+							"p50.00": aws.Float64(30.0),
+							"p90.00": aws.Float64(40.0),
+						},
+					},
+					{
+						Timestamp: aws.Time(timestamp.Add(60 * time.Second)),
+						Average:   aws.Float64(20.0),
+						Maximum:   aws.Float64(30.0),
+						ExtendedStatistics: map[string]*float64{
+							"p50.00": aws.Float64(40.0),
+							"p90.00": aws.Float64(50.0),
+						},
+					},
+					{
+						Timestamp: aws.Time(timestamp.Add(180 * time.Second)),
+						Average:   aws.Float64(30.0),
+						Maximum:   aws.Float64(40.0),
+						ExtendedStatistics: map[string]*float64{
+							"p50.00": aws.Float64(50.0),
+							"p90.00": aws.Float64(60.0),
+						},
+					},
+				},
+			}
+			query := &CloudWatchQuery{
+				Region:     "us-east-1",
+				Namespace:  "AWS/ApplicationELB",
+				MetricName: "TargetResponseTime",
+				Dimensions: []*cloudwatch.Dimension{
+					{
+						Name:  aws.String("LoadBalancer"),
+						Value: aws.String("lb"),
+					},
+					{
+						Name:  aws.String("TargetGroup"),
+						Value: aws.String("tg"),
+					},
+				},
+				Statistics:         []*string{aws.String("Average"), aws.String("Maximum")},
+				ExtendedStatistics: []*string{aws.String("p50.00"), aws.String("p90.00")},
+				Period:             60,
+				Alias:              "{{namespace}}_{{metric}}_{{stat}}",
+			}
+
+			queryRes, err := parseResponse(resp, query)
+			So(err, ShouldBeNil)
+			So(queryRes.Series[0].Points[0][0].String(), ShouldEqual, null.FloatFrom(10.0).String())
+			So(queryRes.Series[1].Points[0][0].String(), ShouldEqual, null.FloatFrom(20.0).String())
+			So(queryRes.Series[2].Points[0][0].String(), ShouldEqual, null.FloatFrom(30.0).String())
+			So(queryRes.Series[3].Points[0][0].String(), ShouldEqual, null.FloatFrom(40.0).String())
+			So(queryRes.Series[0].Points[1][0].String(), ShouldEqual, null.FloatFrom(20.0).String())
+			So(queryRes.Series[1].Points[1][0].String(), ShouldEqual, null.FloatFrom(30.0).String())
+			So(queryRes.Series[2].Points[1][0].String(), ShouldEqual, null.FloatFrom(40.0).String())
+			So(queryRes.Series[3].Points[1][0].String(), ShouldEqual, null.FloatFrom(50.0).String())
+			So(queryRes.Series[0].Points[2][0].String(), ShouldEqual, null.FloatFromPtr(nil).String())
+			So(queryRes.Series[1].Points[2][0].String(), ShouldEqual, null.FloatFromPtr(nil).String())
+			So(queryRes.Series[2].Points[2][0].String(), ShouldEqual, null.FloatFromPtr(nil).String())
+			So(queryRes.Series[3].Points[2][0].String(), ShouldEqual, null.FloatFromPtr(nil).String())
+			So(queryRes.Series[0].Points[3][0].String(), ShouldEqual, null.FloatFrom(30.0).String())
+			So(queryRes.Series[1].Points[3][0].String(), ShouldEqual, null.FloatFrom(40.0).String())
+			So(queryRes.Series[2].Points[3][0].String(), ShouldEqual, null.FloatFrom(50.0).String())
+			So(queryRes.Series[3].Points[3][0].String(), ShouldEqual, null.FloatFrom(60.0).String())
+		})
+	})
+}

pkg/tsdb/cloudwatch/credentials.go

@@ -0,0 +1,196 @@
+package cloudwatch
+
+import (
+	"fmt"
+	"os"
+	"strings"
+	"sync"
+	"time"
+
+	"github.com/aws/aws-sdk-go/aws"
+	"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/ec2metadata"
+	"github.com/aws/aws-sdk-go/aws/session"
+	"github.com/aws/aws-sdk-go/service/cloudwatch"
+	"github.com/aws/aws-sdk-go/service/sts"
+)
+
+type cache struct {
+	credential *credentials.Credentials
+	expiration *time.Time
+}
+
+var awsCredentialCache map[string]cache = make(map[string]cache)
+var credentialCacheLock sync.RWMutex
+
+func GetCredentials(dsInfo *DatasourceInfo) (*credentials.Credentials, error) {
+	cacheKey := dsInfo.AccessKey + ":" + dsInfo.Profile + ":" + dsInfo.AssumeRoleArn
+	credentialCacheLock.RLock()
+	if _, ok := awsCredentialCache[cacheKey]; ok {
+		if awsCredentialCache[cacheKey].expiration != nil &&
+			(*awsCredentialCache[cacheKey].expiration).After(time.Now().UTC()) {
+			result := awsCredentialCache[cacheKey].credential
+			credentialCacheLock.RUnlock()
+			return result, nil
+		}
+	}
+	credentialCacheLock.RUnlock()
+
+	accessKeyId := ""
+	secretAccessKey := ""
+	sessionToken := ""
+	var expiration *time.Time
+	expiration = nil
+	if dsInfo.AuthType == "arn" && strings.Index(dsInfo.AssumeRoleArn, "arn:aws:iam:") == 0 {
+		params := &sts.AssumeRoleInput{
+			RoleArn:         aws.String(dsInfo.AssumeRoleArn),
+			RoleSessionName: aws.String("GrafanaSession"),
+			DurationSeconds: aws.Int64(900),
+		}
+
+		stsSess, err := session.NewSession()
+		if err != nil {
+			return nil, err
+		}
+		stsCreds := credentials.NewChainCredentials(
+			[]credentials.Provider{
+				&credentials.EnvProvider{},
+				&credentials.SharedCredentialsProvider{Filename: "", Profile: dsInfo.Profile},
+				remoteCredProvider(stsSess),
+			})
+		stsConfig := &aws.Config{
+			Region:      aws.String(dsInfo.Region),
+			Credentials: stsCreds,
+		}
+
+		sess, err := session.NewSession(stsConfig)
+		if err != nil {
+			return nil, err
+		}
+		svc := sts.New(sess, stsConfig)
+		resp, err := svc.AssumeRole(params)
+		if err != nil {
+			return nil, err
+		}
+		if resp.Credentials != nil {
+			accessKeyId = *resp.Credentials.AccessKeyId
+			secretAccessKey = *resp.Credentials.SecretAccessKey
+			sessionToken = *resp.Credentials.SessionToken
+			expiration = resp.Credentials.Expiration
+		}
+	} else {
+		now := time.Now()
+		e := now.Add(5 * time.Minute)
+		expiration = &e
+	}
+
+	sess, err := session.NewSession()
+	if err != nil {
+		return nil, err
+	}
+	creds := credentials.NewChainCredentials(
+		[]credentials.Provider{
+			&credentials.StaticProvider{Value: credentials.Value{
+				AccessKeyID:     accessKeyId,
+				SecretAccessKey: secretAccessKey,
+				SessionToken:    sessionToken,
+			}},
+			&credentials.EnvProvider{},
+			&credentials.StaticProvider{Value: credentials.Value{
+				AccessKeyID:     dsInfo.AccessKey,
+				SecretAccessKey: dsInfo.SecretKey,
+			}},
+			&credentials.SharedCredentialsProvider{Filename: "", Profile: dsInfo.Profile},
+			remoteCredProvider(sess),
+		})
+
+	credentialCacheLock.Lock()
+	awsCredentialCache[cacheKey] = cache{
+		credential: creds,
+		expiration: expiration,
+	}
+	credentialCacheLock.Unlock()
+
+	return creds, nil
+}
+
+func remoteCredProvider(sess *session.Session) credentials.Provider {
+	ecsCredURI := os.Getenv("AWS_CONTAINER_CREDENTIALS_RELATIVE_URI")
+
+	if len(ecsCredURI) > 0 {
+		return ecsCredProvider(sess, ecsCredURI)
+	}
+	return ec2RoleProvider(sess)
+}
+
+func ecsCredProvider(sess *session.Session, uri string) credentials.Provider {
+	const host = `169.254.170.2`
+
+	c := ec2metadata.New(sess)
+	return endpointcreds.NewProviderClient(
+		c.Client.Config,
+		c.Client.Handlers,
+		fmt.Sprintf("http://%s%s", host, uri),
+		func(p *endpointcreds.Provider) { p.ExpiryWindow = 5 * time.Minute })
+}
+
+func ec2RoleProvider(sess *session.Session) credentials.Provider {
+	return &ec2rolecreds.EC2RoleProvider{Client: ec2metadata.New(sess), ExpiryWindow: 5 * time.Minute}
+}
+
+func (e *CloudWatchExecutor) getDsInfo(region string) *DatasourceInfo {
+	authType := e.DataSource.JsonData.Get("authType").MustString()
+	assumeRoleArn := e.DataSource.JsonData.Get("assumeRoleArn").MustString()
+	accessKey := ""
+	secretKey := ""
+	for key, value := range e.DataSource.SecureJsonData.Decrypt() {
+		if key == "accessKey" {
+			accessKey = value
+		}
+		if key == "secretKey" {
+			secretKey = value
+		}
+	}
+
+	datasourceInfo := &DatasourceInfo{
+		Region:        region,
+		Profile:       e.DataSource.Database,
+		AuthType:      authType,
+		AssumeRoleArn: assumeRoleArn,
+		AccessKey:     accessKey,
+		SecretKey:     secretKey,
+	}
+
+	return datasourceInfo
+}
+
+func (e *CloudWatchExecutor) getAwsConfig(dsInfo *DatasourceInfo) (*aws.Config, error) {
+	creds, err := GetCredentials(dsInfo)
+	if err != nil {
+		return nil, err
+	}
+
+	cfg := &aws.Config{
+		Region:      aws.String(dsInfo.Region),
+		Credentials: creds,
+	}
+	return cfg, nil
+}
+
+func (e *CloudWatchExecutor) getClient(region string) (*cloudwatch.CloudWatch, error) {
+	datasourceInfo := e.getDsInfo(region)
+	cfg, err := e.getAwsConfig(datasourceInfo)
+	if err != nil {
+		return nil, err
+	}
+
+	sess, err := session.NewSession(cfg)
+	if err != nil {
+		return nil, err
+	}
+
+	client := cloudwatch.New(sess, cfg)
+	return client, nil
+}

pkg/api/cloudwatch/metrics.go → pkg/tsdb/cloudwatch/metric_find_query.go

@@ -1,7 +1,9 @@
 package cloudwatch
 
 import (
-	"encoding/json"
+	"context"
+	"errors"
+	"reflect"
 	"sort"
 	"strings"
 	"sync"
@@ -11,14 +13,20 @@ import (
 	"github.com/aws/aws-sdk-go/aws/awsutil"
 	"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/grafana/grafana/pkg/components/simplejson"
 	"github.com/grafana/grafana/pkg/metrics"
-	"github.com/grafana/grafana/pkg/middleware"
-	"github.com/grafana/grafana/pkg/util"
+	"github.com/grafana/grafana/pkg/tsdb"
 )
 
 var metricsMap map[string][]string
 var dimensionsMap map[string][]string
 
+type suggestData struct {
+	Text  string
+	Value string
+}
+
 type CustomMetricsCache struct {
 	Expire time.Time
 	Cache  []string
@@ -144,117 +152,355 @@ func init() {
 	customMetricsDimensionsMap = make(map[string]map[string]map[string]*CustomMetricsCache)
 }
 
+func (e *CloudWatchExecutor) executeMetricFindQuery(ctx context.Context, queryContext *tsdb.TsdbQuery) (*tsdb.Response, error) {
+	result := &tsdb.Response{
+		Results: make(map[string]*tsdb.QueryResult),
+	}
+	firstQuery := queryContext.Queries[0]
+	queryResult := &tsdb.QueryResult{Meta: simplejson.New(), RefId: firstQuery.RefId}
+
+	parameters := firstQuery.Model
+	subType := firstQuery.Model.Get("subtype").MustString()
+	var data []suggestData
+	var err error
+	switch subType {
+	case "regions":
+		data, err = e.handleGetRegions(ctx, parameters, queryContext)
+		break
+	case "namespaces":
+		data, err = e.handleGetNamespaces(ctx, parameters, queryContext)
+		break
+	case "metrics":
+		data, err = e.handleGetMetrics(ctx, parameters, queryContext)
+		break
+	case "dimension_keys":
+		data, err = e.handleGetDimensions(ctx, parameters, queryContext)
+		break
+	case "dimension_values":
+		data, err = e.handleGetDimensionValues(ctx, parameters, queryContext)
+		break
+	case "ebs_volume_ids":
+		data, err = e.handleGetEbsVolumeIds(ctx, parameters, queryContext)
+		break
+	case "ec2_instance_attribute":
+		data, err = e.handleGetEc2InstanceAttribute(ctx, parameters, queryContext)
+		break
+	}
+
+	transformToTable(data, queryResult)
+	result.Results[firstQuery.RefId] = queryResult
+	return result, err
+}
+
+func transformToTable(data []suggestData, result *tsdb.QueryResult) {
+	table := &tsdb.Table{
+		Columns: make([]tsdb.TableColumn, 2),
+		Rows:    make([]tsdb.RowValues, 0),
+	}
+	table.Columns[0].Text = "text"
+	table.Columns[1].Text = "value"
+
+	for _, r := range data {
+		values := make([]interface{}, 2)
+		values[0] = r.Text
+		values[1] = r.Value
+		table.Rows = append(table.Rows, values)
+	}
+	result.Tables = append(result.Tables, table)
+	result.Meta.Set("rowCount", len(data))
+}
+
 // Whenever this list is updated, frontend list should also be updated.
 // Please update the region list in public/app/plugins/datasource/cloudwatch/partials/config.html
-func handleGetRegions(req *cwRequest, c *middleware.Context) {
+func (e *CloudWatchExecutor) handleGetRegions(ctx context.Context, parameters *simplejson.Json, queryContext *tsdb.TsdbQuery) ([]suggestData, error) {
 	regions := []string{
 		"ap-northeast-1", "ap-northeast-2", "ap-southeast-1", "ap-southeast-2", "ap-south-1", "ca-central-1", "cn-north-1",
 		"eu-central-1", "eu-west-1", "eu-west-2", "sa-east-1", "us-east-1", "us-east-2", "us-gov-west-1", "us-west-1", "us-west-2",
 	}
 
-	result := []interface{}{}
+	result := make([]suggestData, 0)
 	for _, region := range regions {
-		result = append(result, util.DynMap{"text": region, "value": region})
+		result = append(result, suggestData{Text: region, Value: region})
 	}
 
-	c.JSON(200, result)
+	return result, nil
 }
 
-func handleGetNamespaces(req *cwRequest, c *middleware.Context) {
+func (e *CloudWatchExecutor) handleGetNamespaces(ctx context.Context, parameters *simplejson.Json, queryContext *tsdb.TsdbQuery) ([]suggestData, error) {
 	keys := []string{}
 	for key := range metricsMap {
 		keys = append(keys, key)
 	}
 
-	customNamespaces := req.DataSource.JsonData.Get("customMetricsNamespaces").MustString()
+	customNamespaces := e.DataSource.JsonData.Get("customMetricsNamespaces").MustString()
 	if customNamespaces != "" {
 		keys = append(keys, strings.Split(customNamespaces, ",")...)
 	}
 
 	sort.Sort(sort.StringSlice(keys))
 
-	result := []interface{}{}
+	result := make([]suggestData, 0)
 	for _, key := range keys {
-		result = append(result, util.DynMap{"text": key, "value": key})
+		result = append(result, suggestData{Text: key, Value: key})
 	}
 
-	c.JSON(200, result)
+	return result, nil
 }
 
-func handleGetMetrics(req *cwRequest, c *middleware.Context) {
-	reqParam := &struct {
-		Parameters struct {
-			Namespace string `json:"namespace"`
-		} `json:"parameters"`
-	}{}
-
-	json.Unmarshal(req.Body, reqParam)
+func (e *CloudWatchExecutor) handleGetMetrics(ctx context.Context, parameters *simplejson.Json, queryContext *tsdb.TsdbQuery) ([]suggestData, error) {
+	region := parameters.Get("region").MustString()
+	namespace := parameters.Get("namespace").MustString()
 
 	var namespaceMetrics []string
-	if !isCustomMetrics(reqParam.Parameters.Namespace) {
+	if !isCustomMetrics(namespace) {
 		var exists bool
-		if namespaceMetrics, exists = metricsMap[reqParam.Parameters.Namespace]; !exists {
-			c.JsonApiErr(404, "Unable to find namespace "+reqParam.Parameters.Namespace, nil)
-			return
+		if namespaceMetrics, exists = metricsMap[namespace]; !exists {
+			return nil, errors.New("Unable to find namespace " + namespace)
 		}
 	} else {
 		var err error
-		cwData := req.GetDatasourceInfo()
-		cwData.Namespace = reqParam.Parameters.Namespace
+		dsInfo := e.getDsInfo(region)
+		dsInfo.Namespace = namespace
 
-		if namespaceMetrics, err = getMetricsForCustomMetrics(cwData, getAllMetrics); err != nil {
-			c.JsonApiErr(500, "Unable to call AWS API", err)
-			return
+		if namespaceMetrics, err = getMetricsForCustomMetrics(dsInfo, getAllMetrics); err != nil {
+			return nil, errors.New("Unable to call AWS API")
 		}
 	}
 	sort.Sort(sort.StringSlice(namespaceMetrics))
 
-	result := []interface{}{}
+	result := make([]suggestData, 0)
 	for _, name := range namespaceMetrics {
-		result = append(result, util.DynMap{"text": name, "value": name})
+		result = append(result, suggestData{Text: name, Value: name})
 	}
 
-	c.JSON(200, result)
+	return result, nil
 }
 
-func handleGetDimensions(req *cwRequest, c *middleware.Context) {
-	reqParam := &struct {
-		Parameters struct {
-			Namespace string `json:"namespace"`
-		} `json:"parameters"`
-	}{}
-
-	json.Unmarshal(req.Body, reqParam)
+func (e *CloudWatchExecutor) handleGetDimensions(ctx context.Context, parameters *simplejson.Json, queryContext *tsdb.TsdbQuery) ([]suggestData, error) {
+	region := parameters.Get("region").MustString()
+	namespace := parameters.Get("namespace").MustString()
 
 	var dimensionValues []string
-	if !isCustomMetrics(reqParam.Parameters.Namespace) {
+	if !isCustomMetrics(namespace) {
 		var exists bool
-		if dimensionValues, exists = dimensionsMap[reqParam.Parameters.Namespace]; !exists {
-			c.JsonApiErr(404, "Unable to find dimension "+reqParam.Parameters.Namespace, nil)
-			return
+		if dimensionValues, exists = dimensionsMap[namespace]; !exists {
+			return nil, errors.New("Unable to find dimension " + namespace)
 		}
 	} else {
 		var err error
-		dsInfo := req.GetDatasourceInfo()
-		dsInfo.Namespace = reqParam.Parameters.Namespace
+		dsInfo := e.getDsInfo(region)
+		dsInfo.Namespace = namespace
 
 		if dimensionValues, err = getDimensionsForCustomMetrics(dsInfo, getAllMetrics); err != nil {
-			c.JsonApiErr(500, "Unable to call AWS API", err)
-			return
+			return nil, errors.New("Unable to call AWS API")
 		}
 	}
 	sort.Sort(sort.StringSlice(dimensionValues))
 
-	result := []interface{}{}
+	result := make([]suggestData, 0)
 	for _, name := range dimensionValues {
-		result = append(result, util.DynMap{"text": name, "value": name})
+		result = append(result, suggestData{Text: name, Value: name})
+	}
+
+	return result, nil
+}
+
+func (e *CloudWatchExecutor) handleGetDimensionValues(ctx context.Context, parameters *simplejson.Json, queryContext *tsdb.TsdbQuery) ([]suggestData, error) {
+	region := parameters.Get("region").MustString()
+	namespace := parameters.Get("namespace").MustString()
+	metricName := parameters.Get("metricName").MustString()
+	dimensionKey := parameters.Get("dimensionKey").MustString()
+	dimensionsJson := parameters.Get("dimensions").MustMap()
+
+	var dimensions []*cloudwatch.DimensionFilter
+	for k, v := range dimensionsJson {
+		if vv, ok := v.(string); ok {
+			dimensions = append(dimensions, &cloudwatch.DimensionFilter{
+				Name:  aws.String(k),
+				Value: aws.String(vv),
+			})
+		}
+	}
+
+	metrics, err := e.cloudwatchListMetrics(region, namespace, metricName, dimensions)
+	if err != nil {
+		return nil, err
+	}
+
+	result := make([]suggestData, 0)
+	dupCheck := make(map[string]bool)
+	for _, metric := range metrics.Metrics {
+		for _, dim := range metric.Dimensions {
+			if *dim.Name == dimensionKey {
+				if _, exists := dupCheck[*dim.Value]; exists {
+					continue
+				}
+				dupCheck[*dim.Value] = true
+				result = append(result, suggestData{Text: *dim.Value, Value: *dim.Value})
+			}
+		}
+	}
+
+	sort.Slice(result, func(i, j int) bool {
+		return result[i].Text < result[j].Text
+	})
+
+	return result, nil
+}
+
+func (e *CloudWatchExecutor) handleGetEbsVolumeIds(ctx context.Context, parameters *simplejson.Json, queryContext *tsdb.TsdbQuery) ([]suggestData, error) {
+	region := parameters.Get("region").MustString()
+	instanceId := parameters.Get("instanceId").MustString()
+
+	instanceIds := []*string{aws.String(instanceId)}
+	instances, err := e.ec2DescribeInstances(region, nil, instanceIds)
+	if err != nil {
+		return nil, err
+	}
+
+	result := make([]suggestData, 0)
+	for _, mapping := range instances.Reservations[0].Instances[0].BlockDeviceMappings {
+		result = append(result, suggestData{Text: *mapping.Ebs.VolumeId, Value: *mapping.Ebs.VolumeId})
+	}
+
+	return result, nil
+}
+
+func (e *CloudWatchExecutor) handleGetEc2InstanceAttribute(ctx context.Context, parameters *simplejson.Json, queryContext *tsdb.TsdbQuery) ([]suggestData, error) {
+	region := parameters.Get("region").MustString()
+	attributeName := parameters.Get("attributeName").MustString()
+	filterJson := parameters.Get("filters").MustMap()
+
+	var filters []*ec2.Filter
+	for k, v := range filterJson {
+		if vv, ok := v.([]string); ok {
+			var vvvv []*string
+			for _, vvv := range vv {
+				vvvv = append(vvvv, &vvv)
+			}
+			filters = append(filters, &ec2.Filter{
+				Name:   aws.String(k),
+				Values: vvvv,
+			})
+		}
+	}
+
+	instances, err := e.ec2DescribeInstances(region, filters, nil)
+	if err != nil {
+		return nil, err
+	}
+
+	result := make([]suggestData, 0)
+	dupCheck := make(map[string]bool)
+	for _, reservation := range instances.Reservations {
+		for _, instance := range reservation.Instances {
+			tags := make(map[string]string)
+			for _, tag := range instance.Tags {
+				tags[*tag.Key] = *tag.Value
+			}
+
+			var data string
+			if strings.Index(attributeName, "Tags.") == 0 {
+				tagName := attributeName[5:]
+				data = tags[tagName]
+			} else {
+				attributePath := strings.Split(attributeName, ".")
+				v := reflect.ValueOf(instance)
+				for _, key := range attributePath {
+					if v.Kind() == reflect.Ptr {
+						v = v.Elem()
+					}
+					if v.Kind() != reflect.Struct {
+						return nil, errors.New("invalid attribute path")
+					}
+					v = v.FieldByName(key)
+				}
+				if attr, ok := v.Interface().(*string); ok {
+					data = *attr
+				} else {
+					return nil, errors.New("invalid attribute path")
+				}
+			}
+
+			if _, exists := dupCheck[data]; exists {
+				continue
+			}
+			dupCheck[data] = true
+			result = append(result, suggestData{Text: data, Value: data})
+		}
+	}
+
+	sort.Slice(result, func(i, j int) bool {
+		return result[i].Text < result[j].Text
+	})
+
+	return result, nil
+}
+
+func (e *CloudWatchExecutor) cloudwatchListMetrics(region string, namespace string, metricName string, dimensions []*cloudwatch.DimensionFilter) (*cloudwatch.ListMetricsOutput, error) {
+	svc, err := e.getClient(region)
+	if err != nil {
+		return nil, err
+	}
+
+	params := &cloudwatch.ListMetricsInput{
+		Namespace:  aws.String(namespace),
+		MetricName: aws.String(metricName),
+		Dimensions: dimensions,
+	}
+
+	var resp cloudwatch.ListMetricsOutput
+	err = svc.ListMetricsPages(params,
+		func(page *cloudwatch.ListMetricsOutput, lastPage bool) bool {
+			metrics.M_Aws_CloudWatch_ListMetrics.Inc()
+			metrics, _ := awsutil.ValuesAtPath(page, "Metrics")
+			for _, metric := range metrics {
+				resp.Metrics = append(resp.Metrics, metric.(*cloudwatch.Metric))
+			}
+			return !lastPage
+		})
+	if err != nil {
+		return nil, errors.New("Failed to call cloudwatch:ListMetrics")
+	}
+
+	return &resp, nil
+}
+
+func (e *CloudWatchExecutor) ec2DescribeInstances(region string, filters []*ec2.Filter, instanceIds []*string) (*ec2.DescribeInstancesOutput, error) {
+	dsInfo := e.getDsInfo(region)
+	cfg, err := e.getAwsConfig(dsInfo)
+	if err != nil {
+		return nil, errors.New("Failed to call ec2:DescribeInstances")
+	}
+	sess, err := session.NewSession(cfg)
+	if err != nil {
+		return nil, errors.New("Failed to call ec2:DescribeInstances")
+	}
+	svc := ec2.New(sess, cfg)
+
+	params := &ec2.DescribeInstancesInput{
+		Filters:     filters,
+		InstanceIds: instanceIds,
+	}
+
+	var resp ec2.DescribeInstancesOutput
+	err = svc.DescribeInstancesPages(params,
+		func(page *ec2.DescribeInstancesOutput, lastPage bool) bool {
+			reservations, _ := awsutil.ValuesAtPath(page, "Reservations")
+			for _, reservation := range reservations {
+				resp.Reservations = append(resp.Reservations, reservation.(*ec2.Reservation))
+			}
+			return !lastPage
+		})
+	if err != nil {
+		return nil, errors.New("Failed to call ec2:DescribeInstances")
 	}
 
-	c.JSON(200, result)
+	return &resp, nil
 }
 
-func getAllMetrics(cwData *datasourceInfo) (cloudwatch.ListMetricsOutput, error) {
-	creds, err := getCredentials(cwData)
+func getAllMetrics(cwData *DatasourceInfo) (cloudwatch.ListMetricsOutput, error) {
+	creds, err := GetCredentials(cwData)
 	if err != nil {
 		return cloudwatch.ListMetricsOutput{}, err
 	}
@@ -291,7 +537,7 @@ func getAllMetrics(cwData *datasourceInfo) (cloudwatch.ListMetricsOutput, error)
 
 var metricsCacheLock sync.Mutex
 
-func getMetricsForCustomMetrics(dsInfo *datasourceInfo, getAllMetrics func(*datasourceInfo) (cloudwatch.ListMetricsOutput, error)) ([]string, error) {
+func getMetricsForCustomMetrics(dsInfo *DatasourceInfo, getAllMetrics func(*DatasourceInfo) (cloudwatch.ListMetricsOutput, error)) ([]string, error) {
 	metricsCacheLock.Lock()
 	defer metricsCacheLock.Unlock()
 
@@ -328,7 +574,7 @@ func getMetricsForCustomMetrics(dsInfo *datasourceInfo, getAllMetrics func(*data
 
 var dimensionsCacheLock sync.Mutex
 
-func getDimensionsForCustomMetrics(dsInfo *datasourceInfo, getAllMetrics func(*datasourceInfo) (cloudwatch.ListMetricsOutput, error)) ([]string, error) {
+func getDimensionsForCustomMetrics(dsInfo *DatasourceInfo, getAllMetrics func(*DatasourceInfo) (cloudwatch.ListMetricsOutput, error)) ([]string, error) {
 	dimensionsCacheLock.Lock()
 	defer dimensionsCacheLock.Unlock()
 

pkg/api/cloudwatch/metrics_test.go → pkg/tsdb/cloudwatch/metric_find_query_test.go

@@ -11,13 +11,13 @@ import (
 func TestCloudWatchMetrics(t *testing.T) {
 
 	Convey("When calling getMetricsForCustomMetrics", t, func() {
-		dsInfo := &datasourceInfo{
+		dsInfo := &DatasourceInfo{
 			Region:        "us-east-1",
 			Namespace:     "Foo",
 			Profile:       "default",
 			AssumeRoleArn: "",
 		}
-		f := func(dsInfo *datasourceInfo) (cloudwatch.ListMetricsOutput, error) {
+		f := func(dsInfo *DatasourceInfo) (cloudwatch.ListMetricsOutput, error) {
 			return cloudwatch.ListMetricsOutput{
 				Metrics: []*cloudwatch.Metric{
 					{
@@ -39,13 +39,13 @@ func TestCloudWatchMetrics(t *testing.T) {
 	})
 
 	Convey("When calling getDimensionsForCustomMetrics", t, func() {
-		dsInfo := &datasourceInfo{
+		dsInfo := &DatasourceInfo{
 			Region:        "us-east-1",
 			Namespace:     "Foo",
 			Profile:       "default",
 			AssumeRoleArn: "",
 		}
-		f := func(dsInfo *datasourceInfo) (cloudwatch.ListMetricsOutput, error) {
+		f := func(dsInfo *DatasourceInfo) (cloudwatch.ListMetricsOutput, error) {
 			return cloudwatch.ListMetricsOutput{
 				Metrics: []*cloudwatch.Metric{
 					{

pkg/tsdb/cloudwatch/types.go

@@ -0,0 +1,16 @@
+package cloudwatch
+
+import (
+	"github.com/aws/aws-sdk-go/service/cloudwatch"
+)
+
+type CloudWatchQuery struct {
+	Region             string
+	Namespace          string
+	MetricName         string
+	Dimensions         []*cloudwatch.Dimension
+	Statistics         []*string
+	ExtendedStatistics []*string
+	Period             int
+	Alias              string
+}

public/app/app.ts

@@ -1,23 +1,32 @@
-///<reference path="headers/common.d.ts" />
-
-import 'bootstrap';
-import 'vendor/filesaver';
-import 'lodash-src';
-import 'angular-strap';
+import 'babel-polyfill';
+import 'file-saver';
+import 'lodash';
+import 'jquery';
+import 'angular';
 import 'angular-route';
 import 'angular-sanitize';
-import 'angular-dragdrop';
+import 'angular-native-dragdrop';
 import 'angular-bindonce';
-import 'angular-ui';
 import 'react';
 import 'react-dom';
 import 'ngreact';
 
+import 'vendor/bootstrap/bootstrap';
+import 'vendor/angular-ui/ui-bootstrap-tpls';
+import 'vendor/angular-other/angular-strap';
+
 import $ from 'jquery';
 import angular from 'angular';
 import config from 'app/core/config';
 import _ from 'lodash';
 import moment from 'moment';
+
+// add move to lodash for backward compatabiltiy
+_.move = function (array, fromIndex, toIndex) {
+  array.splice(toIndex, 0, array.splice(fromIndex, 1)[0]);
+  return array;
+};
+
 import {coreModule} from './core/core';
 
 export class GrafanaApp {

public/app/boot.js

@@ -1,19 +0,0 @@
-(function bootGrafana() {
-  'use strict';
-
-  var systemLocate = System.locate;
-  System.locate = function(load) {
-    var System = this;
-    return Promise.resolve(systemLocate.call(this, load)).then(function(address) {
-      return address + System.cacheBust;
-    });
-  };
-  System.cacheBust = '?bust=' + Date.now();
-
-  System.import('app/app').then(function(app) {
-    app.default.init();
-  }).catch(function(err) {
-    console.log('Loading app module failed: ', err);
-  });
-
-})();

public/app/core/components/PasswordStrength.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import coreModule from '../core_module';
 
 export interface IProps {
@@ -15,16 +15,16 @@ export class PasswordStrength extends React.Component<IProps, any> {
     let strengthText = "strength: strong like a bull.";
     let strengthClass = "password-strength-good";
 
-    if (this.props.password.length < 4) {
-      strengthText = "strength: weak sauce.";
-      strengthClass = "password-strength-bad";
-    }
-
     if (this.props.password.length <= 8) {
       strengthText = "strength: you can do better.";
       strengthClass = "password-strength-ok";
     }
 
+    if (this.props.password.length < 4) {
+      strengthText = "strength: weak sauce.";
+      strengthClass = "password-strength-bad";
+    }
+
     return (
       <div className={`password-strength small ${strengthClass}`}>
         <em>{strengthText}</em>
@@ -36,3 +36,4 @@ export class PasswordStrength extends React.Component<IProps, any> {
 coreModule.directive('passwordStrength', function(reactDirective) {
   return reactDirective(PasswordStrength, ['password']);
 });
+

public/app/core/components/code_editor/code_editor.ts

@@ -26,60 +26,31 @@
  * Ctrl-Enter (Command-Enter): run onChange() function
  */
 
-///<reference path="../../../headers/common.d.ts" />
-import _ from 'lodash';
 import coreModule from 'app/core/core_module';
 import config from 'app/core/config';
-import ace from 'ace';
-
-const ACE_SRC_BASE = "public/vendor/npm/ace-builds/src-noconflict/";
-const DEFAULT_THEME_DARK = "grafana-dark";
-const DEFAULT_THEME_LIGHT = "textmate";
+import ace from 'brace';
+import './theme-grafana-dark';
+import 'brace/ext/language_tools';
+import 'brace/theme/textmate';
+import 'brace/mode/text';
+import 'brace/snippets/text';
+import 'brace/mode/sql';
+import 'brace/snippets/sql';
+
+const DEFAULT_THEME_DARK = "ace/theme/grafana-dark";
+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 GRAFANA_MODULES = ['theme-grafana-dark'];
-const GRAFANA_MODULE_BASE = "public/app/core/components/code_editor/";
-
-// Trick for loading additional modules
-function setModuleUrl(moduleType, name, pluginBaseUrl = null) {
-  let baseUrl = ACE_SRC_BASE;
-  let aceModeName = `ace/${moduleType}/${name}`;
-  let moduleName = `${moduleType}-${name}`;
-  let componentName = `${moduleName}.js`;
-
-  if (_.includes(GRAFANA_MODULES, moduleName)) {
-    baseUrl = GRAFANA_MODULE_BASE;
-  }
-
-  if (pluginBaseUrl) {
-    baseUrl = pluginBaseUrl + '/';
-  }
-
-  if (moduleType === 'snippets') {
-    componentName = `${moduleType}/${name}.js`;
-  }
-
-  ace.config.setModuleUrl(aceModeName, baseUrl + componentName);
-}
-
-setModuleUrl("ext", "language_tools");
-setModuleUrl("mode", "text");
-setModuleUrl("snippets", "text");
-
 let editorTemplate = `<div></div>`;
 
 function link(scope, elem, attrs) {
-  let lightTheme = config.bootData.user.lightTheme;
-  let default_theme = lightTheme ? DEFAULT_THEME_LIGHT : DEFAULT_THEME_DARK;
-
   // Options
   let langMode = attrs.mode || DEFAULT_MODE;
   let maxLines = attrs.maxLines || DEFAULT_MAX_LINES;
   let showGutter = attrs.showGutter !== undefined;
-  let theme = attrs.theme || default_theme;
   let tabSize = attrs.tabSize || DEFAULT_TAB_SIZE;
   let behavioursEnabled = attrs.behavioursEnabled ? attrs.behavioursEnabled === 'true' : DEFAULT_BEHAVIOURS;
 
@@ -103,10 +74,10 @@ function link(scope, elem, attrs) {
   // disable depreacation warning
   codeEditor.$blockScrolling = Infinity;
   // Padding hacks
-  codeEditor.renderer.setScrollMargin(15, 15);
+  (<any>codeEditor.renderer).setScrollMargin(15, 15);
   codeEditor.renderer.setPadding(10);
 
-  setThemeMode(theme);
+  setThemeMode();
   setLangMode(langMode);
   setEditorContent(scope.content);
 
@@ -162,44 +133,31 @@ function link(scope, elem, attrs) {
   });
 
   function setLangMode(lang) {
-    let aceModeName = `ace/mode/${lang}`;
-    setModuleUrl("mode", lang, scope.datasource.meta.baseUrl || null);
-    setModuleUrl("snippets", lang, scope.datasource.meta.baseUrl || null);
-    editorSession.setMode(aceModeName);
+    ace.acequire("ace/ext/language_tools");
+    codeEditor.setOptions({
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
+      enableSnippets: true
+    });
 
-    ace.config.loadModule("ace/ext/language_tools", (language_tools) => {
-      codeEditor.setOptions({
-        enableBasicAutocompletion: true,
-        enableLiveAutocompletion: true,
-        enableSnippets: true
-      });
+    if (scope.getCompleter()) {
+      // make copy of array as ace seems to share completers array between instances
+      const anyEditor = <any>codeEditor;
+      anyEditor.completers = anyEditor.completers.slice();
+      anyEditor.completers.push(scope.getCompleter());
+    }
 
-      if (scope.getCompleter()) {
-        // make copy of array as ace seems to share completers array between instances
-        codeEditor.completers = codeEditor.completers.slice();
-        codeEditor.completers.push(scope.getCompleter());
-      }
-    });
+    let aceModeName = `ace/mode/${lang}`;
+    editorSession.setMode(aceModeName);
   }
 
-  function setThemeMode(theme) {
-    setModuleUrl("theme", theme);
-    let themeModule = `ace/theme/${theme}`;
-    ace.config.loadModule(themeModule, (theme_module) => {
-      // Check is theme light or dark and fix if needed
-      let lightTheme = config.bootData.user.lightTheme;
-      let fixedTheme = theme;
-      if (lightTheme && theme_module.isDark) {
-        fixedTheme = DEFAULT_THEME_LIGHT;
-      } else if (!lightTheme && !theme_module.isDark) {
-        fixedTheme = DEFAULT_THEME_DARK;
-      }
-      setModuleUrl("theme", fixedTheme);
-      themeModule = `ace/theme/${fixedTheme}`;
-      codeEditor.setTheme(themeModule);
+  function setThemeMode() {
+    let theme = DEFAULT_THEME_DARK;
+    if (config.bootData.user.lightTheme) {
+      theme = DEFAULT_THEME_LIGHT;
+    }
 
-      elem.addClass("gf-code-editor--theme-loaded");
-    });
+    codeEditor.setTheme(theme);
   }
 
   function setEditorContent(value) {

public/app/core/components/code_editor/theme-grafana-dark.js

@@ -1,6 +1,6 @@
 /* jshint ignore:start */
 
-ace.define("ace/theme/grafana-dark",["require","exports","module","ace/lib/dom"], function(require, exports, module) {
+ace.define("ace/theme/grafana-dark",["require","exports","module","ace/lib/dom"], function(acequire, exports, module) {
   "use strict";
 
   exports.isDark = true;
@@ -109,7 +109,7 @@ ace.define("ace/theme/grafana-dark",["require","exports","module","ace/lib/dom"]
   background: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaaccayaaaczgbynaaaaekleqvqimwpq0fd0zxbzd/wpaajvaoxesgneaaaaaelftksuqmcc) right repeat-y\
   }";
 
-  var dom = require("../lib/dom");
+  var dom = acequire("../lib/dom");
   dom.importCssString(exports.cssText, exports.cssClass);
 });
 

public/app/core/components/colorpicker.ts

@@ -1,69 +0,0 @@
-///<reference path="../../headers/common.d.ts" />
-
-import coreModule from 'app/core/core_module';
-
-var template = `
-<div class="graph-legend-popover">
-  <div ng-show="ctrl.series" class="p-b-1">
-    <label>Y Axis:</label>
-    <button ng-click="ctrl.toggleAxis(yaxis);" class="btn btn-small"
-            ng-class="{'btn-success': ctrl.series.yaxis === 1,
-                       'btn-inverse': ctrl.series.yaxis === 2}">
-      Left
-    </button>
-    <button ng-click="ctrl.toggleAxis(yaxis);"
-      class="btn btn-small"
-      ng-class="{'btn-success': ctrl.series.yaxis === 2,
-                 'btn-inverse': ctrl.series.yaxis === 1}">
-      Right
-    </button>
-  </div>
-
-  <p class="m-b-0">
-   <i ng-repeat="color in ctrl.colors" class="pointer fa fa-circle"
-    ng-style="{color:color}"
-    ng-click="ctrl.colorSelected(color);">&nbsp;</i>
-  </p>
-</div>
-`;
-
-export class ColorPickerCtrl {
-  colors: any;
-  autoClose: boolean;
-  series: any;
-  showAxisControls: boolean;
-
-  /** @ngInject */
-  constructor(private $scope, $rootScope) {
-    this.colors = $rootScope.colors;
-    this.autoClose = $scope.autoClose;
-    this.series = $scope.series;
-  }
-
-  toggleAxis(yaxis) {
-    this.$scope.toggleAxis();
-
-    if (this.$scope.autoClose) {
-      this.$scope.dismiss();
-    }
-  }
-
-  colorSelected(color) {
-    this.$scope.colorSelected(color);
-    if (this.$scope.autoClose) {
-      this.$scope.dismiss();
-    }
-  }
-}
-
-export function colorPicker() {
-  return {
-    restrict: 'E',
-    controller: ColorPickerCtrl,
-    bindToController: true,
-    controllerAs: 'ctrl',
-    template: template,
-  };
-}
-
-coreModule.directive('gfColorPicker', colorPicker);

public/app/core/components/colorpicker/ColorPalette.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import coreModule from 'app/core/core_module';
+import { sortedColors } from 'app/core/utils/colors';
+
+export interface IProps {
+  color: string;
+  onColorSelect: (c: string) => void;
+}
+
+export class GfColorPalette extends React.Component<IProps, any> {
+  paletteColors: string[];
+
+  constructor(props) {
+    super(props);
+    this.paletteColors = sortedColors;
+    this.onColorSelect = this.onColorSelect.bind(this);
+  }
+
+  onColorSelect(color) {
+    return () => {
+      this.props.onColorSelect(color);
+    };
+  }
+
+  render() {
+    const colorPaletteItems = this.paletteColors.map((paletteColor) => {
+      const cssClass = paletteColor.toLowerCase() === this.props.color.toLowerCase() ? 'fa-circle-o' : 'fa-circle';
+      return (
+        <i key={paletteColor} className={"pointer fa " + cssClass}
+          style={{'color': paletteColor}}
+          onClick={this.onColorSelect(paletteColor)}>&nbsp;
+        </i>
+      );
+    });
+    return (
+      <div className="graph-legend-popover">
+        <p className="m-b-0">{colorPaletteItems}</p>
+      </div>
+    );
+  }
+}
+
+coreModule.directive('gfColorPalette', function (reactDirective) {
+  return reactDirective(GfColorPalette, ['color', 'onColorSelect']);
+});

public/app/core/components/colorpicker/ColorPicker.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import $ from 'jquery';
+import Drop from 'tether-drop';
+import coreModule from 'app/core/core_module';
+import { ColorPickerPopover } from './ColorPickerPopover';
+
+export interface IProps {
+  color: string;
+  onChange: (c: string) => void;
+}
+
+export class ColorPicker extends React.Component<IProps, any> {
+  pickerElem: any;
+  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() {
+    const dropContent = (
+      <ColorPickerPopover color={this.props.color} onColorSelect={this.onColorSelect} />
+    );
+
+    let dropContentElem = document.createElement('div');
+    ReactDOM.render(dropContent, dropContentElem);
+
+    let drop = new Drop({
+      target: this.pickerElem[0],
+      content: dropContentElem,
+      position: 'top center',
+      classes: 'drop-popover drop-popover--form',
+      openOn: 'hover',
+      hoverCloseDelay: 200,
+      tetherOptions: {
+        constraints: [{ to: 'scrollParent', attachment: "none both" }]
+      }
+    });
+
+    drop.on('close', this.closeColorPicker);
+
+    this.colorPickerDrop = drop;
+    this.colorPickerDrop.open();
+  }
+
+  closeColorPicker() {
+    setTimeout(() => {
+      if (this.colorPickerDrop && this.colorPickerDrop.tether) {
+        this.colorPickerDrop.destroy();
+      }
+    }, 100);
+  }
+
+  onColorSelect(color) {
+    this.props.onChange(color);
+  }
+
+  render() {
+    return (
+      <div className="sp-replacer sp-light" onClick={this.openColorPicker} ref={this.setPickerElem}>
+        <div className="sp-preview">
+          <div className="sp-preview-inner" style={{backgroundColor: this.props.color}}>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+coreModule.directive('colorPicker', function (reactDirective) {
+  return reactDirective(ColorPicker, ['color', 'onChange']);
+});

public/app/core/components/colorpicker/ColorPickerPopover.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import $ from 'jquery';
+import coreModule from 'app/core/core_module';
+import { GfColorPalette } from './ColorPalette';
+import { GfSpectrumPicker } from './SpectrumPicker';
+
+// Spectrum picker uses TinyColor and loads it as a global variable, so we can use it here also
+declare var tinycolor;
+
+export interface IProps {
+  color: string;
+  onColorSelect: (c: string) => void;
+}
+
+export class ColorPickerPopover extends React.Component<IProps, any> {
+  pickerNavElem: any;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      tab: 'palette',
+      color: this.props.color,
+      colorString: this.props.color
+    };
+  }
+
+  setPickerNavElem(elem) {
+    this.pickerNavElem = $(elem);
+  }
+
+  setColor(color) {
+    let newColor = tinycolor(color);
+    if (newColor.isValid()) {
+      this.setState({
+        color: newColor.toString(),
+        colorString: newColor.toString()
+      });
+      this.props.onColorSelect(color);
+    }
+  }
+
+  sampleColorSelected(color) {
+    this.setColor(color);
+  }
+
+  spectrumColorSelected(color) {
+    let rgbColor = color.toRgbString();
+    this.setColor(rgbColor);
+  }
+
+  onColorStringChange(e) {
+    let colorString = e.target.value;
+    this.setState({
+      colorString: colorString
+    });
+
+    let newColor = tinycolor(colorString);
+    if (newColor.isValid()) {
+      // Update only color state
+      this.setState({
+        color: newColor.toString(),
+      });
+      this.props.onColorSelect(newColor);
+    }
+  }
+
+  onColorStringBlur(e) {
+    let colorString = e.target.value;
+    this.setColor(colorString);
+  }
+
+  componentDidMount() {
+    this.pickerNavElem.find('li:first').addClass('active');
+    this.pickerNavElem.on('show', (e) => {
+      // use href attr (#name => name)
+      let tab = e.target.hash.slice(1);
+      this.setState({
+        tab: tab
+      });
+    });
+  }
+
+  render() {
+    const paletteTab = (
+      <div id="palette">
+        <GfColorPalette color={this.state.color} onColorSelect={this.sampleColorSelected.bind(this)} />
+      </div>
+    );
+    const spectrumTab = (
+      <div id="spectrum">
+        <GfSpectrumPicker color={this.props.color} onColorSelect={this.spectrumColorSelected.bind(this)} options={{}} />
+      </div>
+    );
+    const currentTab = this.state.tab === 'palette' ? paletteTab : spectrumTab;
+
+    return (
+      <div className="gf-color-picker">
+        <ul className="nav nav-tabs" id="colorpickernav" ref={this.setPickerNavElem.bind(this)}>
+          <li className="gf-tabs-item-colorpicker">
+            <a href="#palette" data-toggle="tab">Colors</a>
+          </li>
+          <li className="gf-tabs-item-colorpicker">
+            <a href="#spectrum" data-toggle="tab">Custom</a>
+          </li>
+        </ul>
+        <div className="gf-color-picker__body">
+          {currentTab}
+        </div>
+        <div>
+          <input className="gf-form-input gf-form-input--small" value={this.state.colorString}
+            onChange={this.onColorStringChange.bind(this)} onBlur={this.onColorStringBlur.bind(this)}>
+          </input>
+        </div>
+      </div>
+    );
+  }
+}
+
+coreModule.directive('gfColorPickerPopover', function (reactDirective) {
+  return reactDirective(ColorPickerPopover, ['color', 'onColorSelect']);
+});

public/app/core/components/colorpicker/SeriesColorPicker.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import coreModule from 'app/core/core_module';
+import {ColorPickerPopover} from './ColorPickerPopover';
+
+export interface IProps {
+  series: any;
+  onColorChange: (color: string) => void;
+  onToggleAxis: () => void;
+}
+
+export class SeriesColorPicker extends React.Component<IProps, any> {
+  constructor(props) {
+    super(props);
+    this.onColorChange = this.onColorChange.bind(this);
+    this.onToggleAxis = this.onToggleAxis.bind(this);
+  }
+
+  onColorChange(color) {
+    this.props.onColorChange(color);
+  }
+
+  onToggleAxis() {
+    this.props.onToggleAxis();
+  }
+
+  renderAxisSelection() {
+    const leftButtonClass = this.props.series.yaxis === 1 ? 'btn-success' : 'btn-inverse';
+    const rightButtonClass = this.props.series.yaxis === 2 ? 'btn-success' : 'btn-inverse';
+
+    return (
+      <div className="p-b-1">
+        <label className="small p-r-1">Y Axis:</label>
+        <button onClick={this.onToggleAxis} className={'btn btn-small ' + leftButtonClass}>
+          Left
+        </button>
+        <button onClick={this.onToggleAxis} className={'btn btn-small ' + rightButtonClass}>
+          Right
+        </button>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className="graph-legend-popover">
+        {this.props.series && this.renderAxisSelection()}
+        <ColorPickerPopover color="#7EB26D" onColorSelect={this.onColorChange} />
+      </div>
+    );
+  }
+}
+
+coreModule.directive('seriesColorPicker', function(reactDirective) {
+  return reactDirective(SeriesColorPicker, ['series', 'onColorChange', 'onToggleAxis']);
+});

public/app/core/components/colorpicker/SpectrumPicker.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import coreModule from 'app/core/core_module';
+import _ from 'lodash';
+import $ from 'jquery';
+import 'vendor/spectrum';
+
+export interface IProps {
+  color: string;
+  options: object;
+  onColorSelect: (c: string) => void;
+}
+
+export class GfSpectrumPicker extends React.Component<IProps, any> {
+  elem: any;
+  isMoving: boolean;
+
+  constructor(props) {
+    super(props);
+    this.onSpectrumMove = this.onSpectrumMove.bind(this);
+    this.setComponentElem = this.setComponentElem.bind(this);
+  }
+
+  setComponentElem(elem) {
+    this.elem = $(elem);
+  }
+
+  onSpectrumMove(color) {
+    this.isMoving = true;
+    this.props.onColorSelect(color);
+  }
+
+  componentDidMount() {
+    let spectrumOptions = _.assignIn({
+      flat: true,
+      showAlpha: true,
+      showButtons: false,
+      color: this.props.color,
+      appendTo: this.elem,
+      move: this.onSpectrumMove,
+    }, this.props.options);
+
+    this.elem.spectrum(spectrumOptions);
+    this.elem.spectrum('show');
+    this.elem.spectrum('set', this.props.color);
+  }
+
+  componentWillUpdate(nextProps) {
+    // If user move pointer over spectrum field this produce 'move' event and component
+    // may update props.color. We don't want to update spectrum color in this case, so we can use
+    // isMoving flag for tracking moving state. Flag should be cleared in componentDidUpdate() which
+    // is called after updating occurs (when user finished moving).
+    if (!this.isMoving) {
+      this.elem.spectrum('set', nextProps.color);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.isMoving) {
+      this.isMoving = false;
+    }
+  }
+
+  componentWillUnmount() {
+    this.elem.spectrum('destroy');
+  }
+
+  render() {
+    return (
+      <div className="spectrum-container" ref={this.setComponentElem}></div>
+    );
+  }
+}
+
+coreModule.directive('gfSpectrumPicker', function (reactDirective) {
+  return reactDirective(GfSpectrumPicker, ['color', 'options', 'onColorSelect']);
+});

public/app/core/core.ts

@@ -1,6 +1,3 @@
-///<reference path="../headers/common.d.ts" />
-///<reference path="./mod_defs.d.ts" />
-
 import "./directives/dash_class";
 import "./directives/confirm_click";
 import "./directives/dash_edit_link";
@@ -11,7 +8,6 @@ import "./directives/ng_model_on_blur";
 import "./directives/spectrum_picker";
 import "./directives/tags";
 import "./directives/value_select_dropdown";
-import "./directives/plugin_component";
 import "./directives/rebuild_on_change";
 import "./directives/give_focus";
 import "./directives/diff-view";
@@ -20,12 +16,13 @@ import './partials';
 import './components/jsontree/jsontree';
 import './components/code_editor/code_editor';
 import './utils/outline';
+import './components/colorpicker/ColorPicker';
+import './components/colorpicker/SeriesColorPicker';
 
 import {grafanaAppDirective} from './components/grafana_app';
 import {sideMenuDirective} from './components/sidemenu/sidemenu';
 import {searchDirective} from './components/search/search';
 import {infoPopover} from './components/info_popover';
-import {colorPicker} from './components/colorpicker';
 import {navbarDirective} from './components/navbar/navbar';
 import {arrayJoin} from './directives/array_join';
 import {liveSrv} from './live/live_srv';
@@ -57,7 +54,6 @@ export {
   sideMenuDirective,
   navbarDirective,
   searchDirective,
-  colorPicker,
   liveSrv,
   layoutSelector,
   switchDirective,

public/app/core/core_module.ts

@@ -1,4 +1,2 @@
-///<reference path="../headers/common.d.ts" />
-
 import angular from 'angular';
 export default angular.module('grafana.core', ['ngRoute']);

public/app/core/directives/rebuild_on_change.ts

@@ -1,7 +1,4 @@
-///<reference path="../../headers/common.d.ts" />
-
 import $ from 'jquery';
-
 import coreModule from '../core_module';
 
 function getBlockNodes(nodes) {
@@ -21,6 +18,7 @@ function getBlockNodes(nodes) {
   return blockNodes || nodes;
 }
 
+/** @ngInject **/
 function rebuildOnChange($animate) {
 
   return {

public/app/core/directives/spectrum_picker.js

@@ -1,7 +1,7 @@
 define([
   'angular',
   '../core_module',
-  'spectrum',
+  'vendor/spectrum',
 ],
 function (angular, coreModule) {
   'use strict';

public/app/core/directives/tags.js

@@ -2,7 +2,7 @@ define([
   'angular',
   'jquery',
   '../core_module',
-  'bootstrap-tagsinput',
+  'vendor/tagsinput/bootstrap-tagsinput.js',
 ],
 function (angular, $, coreModule) {
   'use strict';

public/app/core/filters/filters.ts

@@ -57,7 +57,8 @@ coreModule.filter('noXml', function() {
   };
 });
 
-coreModule.filter('interpolateTemplateVars', function (templateSrv) {
+/** @ngInject */
+function interpolateTemplateVars(templateSrv) {
   var filterFunc: any = function(text, scope) {
     var scopedVars;
     if (scope.ctrl) {
@@ -71,6 +72,7 @@ coreModule.filter('interpolateTemplateVars', function (templateSrv) {
 
   filterFunc.$stateful = true;
   return filterFunc;
-});
+}
 
+coreModule.filter('interpolateTemplateVars', interpolateTemplateVars);
 export default {};

public/app/core/live/live_srv.ts

@@ -1,9 +1,7 @@
-///<reference path="../../headers/common.d.ts" />
-
 import _ from 'lodash';
 import config from 'app/core/config';
 
-import {Observable} from 'vendor/npm/rxjs/Observable';
+import {Observable} from 'rxjs/Observable';
 
 export class LiveSrv {
   conn: any;

public/app/core/partials.js

@@ -1,2 +0,0 @@
-define([
-], function () {});

public/app/core/partials.ts

@@ -0,0 +1,4 @@
+var templates = (<any>require).context('../', true, /\.html$/);
+templates.keys().forEach(function(key) {
+  templates(key);
+});

public/app/core/profiler.ts

@@ -1,5 +1,3 @@
-///<reference path="../headers/common.d.ts" />
-
 import $ from 'jquery';
 import angular from 'angular';
 

public/app/core/routes/bundle_loader.ts

@@ -1,5 +1,3 @@
-///<reference path="../../headers/common.d.ts" />
-
 export class BundleLoader {
   lazy: any;
 

public/app/core/routes/routes.ts

@@ -1,18 +1,27 @@
-///<reference path="../../headers/common.d.ts" />
-
 import './dashboard_loaders';
-
 import coreModule from 'app/core/core_module';
-import {BundleLoader} from './bundle_loader';
 
 /** @ngInject **/
 function setupAngularRoutes($routeProvider, $locationProvider) {
   $locationProvider.html5Mode(true);
 
-  var loadOrgBundle = new BundleLoader('app/features/org/all');
-  var loadPluginsBundle = new BundleLoader('app/features/plugins/all');
-  var loadAdminBundle = new BundleLoader('app/features/admin/admin');
-  var loadAlertingBundle = new BundleLoader('app/features/alerting/all');
+  var loadOrgBundle = {
+    lazy: ["$q", "$route", "$rootScope", ($q, $route, $rootScope) => {
+      return System.import('app/features/org/all');
+    }]
+  };
+
+  var loadAdminBundle = {
+    lazy: ["$q", "$route", "$rootScope", ($q, $route, $rootScope) => {
+      return System.import('app/features/admin/admin');
+    }]
+  };
+
+  var loadAlertingBundle = {
+    lazy: ["$q", "$route", "$rootScope", ($q, $route, $rootScope) => {
+      return System.import('app/features/alerting/all');
+    }]
+  };
 
   $routeProvider
   .when('/', {
@@ -47,19 +56,16 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     templateUrl: 'public/app/features/plugins/partials/ds_list.html',
     controller : 'DataSourcesCtrl',
     controllerAs: 'ctrl',
-    resolve: loadPluginsBundle,
   })
   .when('/datasources/edit/:id', {
     templateUrl: 'public/app/features/plugins/partials/ds_edit.html',
     controller : 'DataSourceEditCtrl',
     controllerAs: 'ctrl',
-    resolve: loadPluginsBundle,
   })
   .when('/datasources/new', {
     templateUrl: 'public/app/features/plugins/partials/ds_edit.html',
     controller : 'DataSourceEditCtrl',
     controllerAs: 'ctrl',
-    resolve: loadPluginsBundle,
   })
   .when('/org', {
     templateUrl: 'public/app/features/org/partials/orgDetails.html',
@@ -175,19 +181,16 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     templateUrl: 'public/app/features/plugins/partials/plugin_list.html',
     controller: 'PluginListCtrl',
     controllerAs: 'ctrl',
-    resolve: loadPluginsBundle,
   })
   .when('/plugins/:pluginId/edit', {
     templateUrl: 'public/app/features/plugins/partials/plugin_edit.html',
     controller: 'PluginEditCtrl',
     controllerAs: 'ctrl',
-    resolve: loadPluginsBundle,
   })
   .when('/plugins/:pluginId/page/:slug', {
     templateUrl: 'public/app/features/plugins/partials/plugin_page.html',
     controller: 'AppPageCtrl',
     controllerAs: 'ctrl',
-    resolve: loadPluginsBundle,
   })
   .when('/styleguide/:page?', {
     controller: 'StyleGuideCtrl',

public/app/core/services/all.js

@@ -1,7 +1,6 @@
 define([
   './alert_srv',
   './util_srv',
-  './datasource_srv',
   './context_srv',
   './timer',
   './keyboard_manager',

public/app/core/specs/PasswordStrength_specs.tsx

@@ -1,14 +1,25 @@
-// import React from 'react';
-// import {describe, beforeEach, it, sinon, expect} from 'test/lib/common';
-// import {shallow} from 'enzyme';
-//
-// import {PasswordStrength} from '../components/PasswordStrength';
-//
-// describe('PasswordStrength', () => {
-//
-//   it.skip('should have class bad if length below 4', () => {
-//     const wrapper = shallow(<PasswordStrength password="asd" />);
-//     expect(wrapper.find(".password-strength-bad")).to.have.length(3);
-//   });
-// });
-//
+import React from 'react';
+import {describe, it, expect} from 'test/lib/common';
+import {shallow} from 'enzyme';
+
+import {PasswordStrength} from '../components/PasswordStrength';
+
+describe('PasswordStrength', () => {
+
+  it('should have class bad if length below 4', () => {
+    const wrapper = shallow(<PasswordStrength password="asd" />);
+    expect(wrapper.find(".password-strength-bad")).to.have.length(1);
+  });
+
+  it('should have class ok if length below 8', () => {
+    const wrapper = shallow(<PasswordStrength password="asdasd" />);
+    expect(wrapper.find(".password-strength-ok")).to.have.length(1);
+  });
+
+  it('should have class good if length above 8', () => {
+    const wrapper = shallow(<PasswordStrength password="asdaasdda" />);
+    expect(wrapper.find(".password-strength-good")).to.have.length(1);
+  });
+
+});
+

public/app/core/specs/backend_srv_specs.ts

@@ -0,0 +1,29 @@
+import {describe, beforeEach, it, expect, angularMocks} from 'test/lib/common';
+import 'app/core/services/backend_srv';
+
+describe('backend_srv', function() {
+  var _backendSrv;
+  var _http;
+  var _httpBackend;
+
+  beforeEach(angularMocks.module('grafana.core'));
+  beforeEach(angularMocks.module('grafana.services'));
+  beforeEach(angularMocks.inject(function ($httpBackend, $http, backendSrv) {
+    _httpBackend = $httpBackend;
+    _http = $http;
+    _backendSrv = backendSrv;
+  }));
+
+  describe('when handling errors', function() {
+    it('should return the http status code', function(done) {
+      _httpBackend.whenGET('gateway-error').respond(502);
+      _backendSrv.datasourceRequest({
+        url: 'gateway-error'
+      }).catch(function(err) {
+        expect(err.status).to.be(502);
+        done();
+      });
+      _httpBackend.flush();
+    });
+  });
+});

public/app/core/specs/value_select_dropdown_specs.ts

@@ -0,0 +1,167 @@
+import {describe, beforeEach, it, expect, angularMocks, sinon} from 'test/lib/common';
+import 'app/core/directives/value_select_dropdown';
+
+describe("SelectDropdownCtrl", function() {
+  var scope;
+  var ctrl;
+  var tagValuesMap: any = {};
+  var rootScope;
+  var q;
+
+  beforeEach(angularMocks.module('grafana.core'));
+  beforeEach(angularMocks.inject(function($controller, $rootScope, $q, $httpBackend) {
+    rootScope = $rootScope;
+    q = $q;
+    scope = $rootScope.$new();
+    ctrl = $controller('ValueSelectDropdownCtrl', {$scope: scope});
+    ctrl.onUpdated = sinon.spy();
+    $httpBackend.when('GET', /\.html$/).respond('');
+  }));
+
+  describe("Given simple variable", function() {
+    beforeEach(function() {
+      ctrl.variable = {
+        current: {text: 'hej', value: 'hej' },
+        getValuesForTag: function(key) {
+          return q.when(tagValuesMap[key]);
+        },
+      };
+      ctrl.init();
+    });
+
+    it("Should init labelText and linkText", function() {
+      expect(ctrl.linkText).to.be("hej");
+    });
+  });
+
+  describe("Given variable with tags and dropdown is opened", function() {
+    beforeEach(function() {
+      ctrl.variable = {
+        current: {text: 'server-1', value: 'server-1'},
+        options: [
+          {text: 'server-1', value: 'server-1', selected: true},
+          {text: 'server-2', value: 'server-2'},
+          {text: 'server-3', value: 'server-3'},
+        ],
+        tags: ["key1", "key2", "key3"],
+        getValuesForTag: function(key) {
+          return q.when(tagValuesMap[key]);
+        },
+        multi: true
+      };
+      tagValuesMap.key1 = ['server-1', 'server-3'];
+      tagValuesMap.key2 = ['server-2', 'server-3'];
+      tagValuesMap.key3 = ['server-1', 'server-2', 'server-3'];
+      ctrl.init();
+      ctrl.show();
+    });
+
+    it("should init tags model", function() {
+      expect(ctrl.tags.length).to.be(3);
+      expect(ctrl.tags[0].text).to.be("key1");
+    });
+
+    it("should init options model", function() {
+      expect(ctrl.options.length).to.be(3);
+    });
+
+    it("should init selected values array", function() {
+      expect(ctrl.selectedValues.length).to.be(1);
+    });
+
+    it("should set linkText", function() {
+      expect(ctrl.linkText).to.be('server-1');
+    });
+
+    describe('after adititional value is selected', function() {
+      beforeEach(function() {
+        ctrl.selectValue(ctrl.options[2], {});
+        ctrl.commitChanges();
+      });
+
+      it('should update link text', function() {
+        expect(ctrl.linkText).to.be('server-1 + server-3');
+      });
+    });
+
+    describe('When tag is selected', function() {
+      beforeEach(function() {
+        ctrl.selectTag(ctrl.tags[0]);
+        rootScope.$digest();
+        ctrl.commitChanges();
+      });
+
+      it("should select tag", function() {
+        expect(ctrl.selectedTags.length).to.be(1);
+      });
+
+      it("should select values", function() {
+        expect(ctrl.options[0].selected).to.be(true);
+        expect(ctrl.options[2].selected).to.be(true);
+      });
+
+      it("link text should not include tag values", function() {
+        expect(ctrl.linkText).to.be('');
+      });
+
+      describe('and then dropdown is opened and closed without changes', function() {
+        beforeEach(function() {
+          ctrl.show();
+          ctrl.commitChanges();
+          rootScope.$digest();
+        });
+
+        it("should still have selected tag", function() {
+          expect(ctrl.selectedTags.length).to.be(1);
+        });
+      });
+
+      describe('and then unselected', function() {
+        beforeEach(function() {
+          ctrl.selectTag(ctrl.tags[0]);
+          rootScope.$digest();
+        });
+
+        it("should deselect tag", function() {
+          expect(ctrl.selectedTags.length).to.be(0);
+        });
+      });
+
+      describe('and then value is unselected', function() {
+        beforeEach(function() {
+          ctrl.selectValue(ctrl.options[0], {});
+        });
+
+        it("should deselect tag", function() {
+          expect(ctrl.selectedTags.length).to.be(0);
+        });
+      });
+    });
+  });
+
+  describe("Given variable with selected tags", function() {
+    beforeEach(function() {
+      ctrl.variable = {
+        current: {text: 'server-1', value: 'server-1', tags: [{text: 'key1', selected: true}] },
+        options: [
+          {text: 'server-1', value: 'server-1'},
+          {text: 'server-2', value: 'server-2'},
+          {text: 'server-3', value: 'server-3'},
+        ],
+        tags: ["key1", "key2", "key3"],
+        getValuesForTag: function(key) {
+          return q.when(tagValuesMap[key]);
+        },
+        multi: true
+      };
+      ctrl.init();
+      ctrl.show();
+    });
+
+    it("should set tag as selected", function() {
+      expect(ctrl.tags[0].selected).to.be(true);
+    });
+
+  });
+});
+

public/app/core/utils/colors.ts

@@ -1,6 +1,12 @@
+import _ from 'lodash';
 
+// Spectrum picker uses TinyColor and loads it as a global variable, so we can use it here also
+declare var tinycolor;
 
-export default [
+export const PALETTE_ROWS = 4;
+export const PALETTE_COLUMNS = 14;
+
+let colors = [
   "#7EB26D","#EAB839","#6ED0E0","#EF843C","#E24D42","#1F78C1","#BA43A9","#705DA0",
   "#508642","#CCA300","#447EBC","#C15C17","#890F02","#0A437C","#6D1F62","#584477",
   "#B7DBAB","#F4D598","#70DBED","#F9BA8F","#F29191","#82B5D8","#E5A8E2","#AEA2E0",
@@ -10,3 +16,26 @@ export default [
   "#E0F9D7","#FCEACA","#CFFAFF","#F9E2D2","#FCE2DE","#BADFF4","#F9D9F9","#DEDAF7"
 ];
 
+export function sortColorsByHue(hexColors) {
+  let hslColors = _.map(hexColors, hexToHsl);
+
+  let sortedHSLColors = _.sortBy(hslColors, ['h']);
+  sortedHSLColors = _.chunk(sortedHSLColors, PALETTE_ROWS);
+  sortedHSLColors = _.map(sortedHSLColors, chunk => {
+    return _.sortBy(chunk, 'l');
+  });
+  sortedHSLColors = _.flattenDeep(_.zip(...sortedHSLColors));
+
+  return _.map(sortedHSLColors, hslToHex);
+}
+
+export function hexToHsl(color) {
+  return tinycolor(color).toHsl();
+}
+
+export function hslToHex(color) {
+  return tinycolor(color).toHexString();
+}
+
+export let sortedColors = sortColorsByHue(colors);
+export default colors;

public/app/core/utils/datemath.ts

@@ -5,7 +5,7 @@ import moment from 'moment';
 
 var units = ['y', 'M', 'w', 'd', 'h', 'm', 's'];
 
-export function parse(text, roundUp?) {
+export function parse(text, roundUp?, timezone?) {
   if (!text) { return undefined; }
   if (moment.isMoment(text)) { return text; }
   if (_.isDate(text)) { return moment(text); }
@@ -16,7 +16,11 @@ export function parse(text, roundUp?) {
   var parseString;
 
   if (text.substring(0, 3) === 'now') {
-    time = moment();
+    if (timezone === 'utc') {
+      time = moment.utc();
+    } else {
+      time = moment();
+    }
     mathString = text.substring('now'.length);
   } else {
     index = text.indexOf('||');

public/app/core/utils/file_export.ts

@@ -1,14 +1,12 @@
-///<reference path="../../headers/common.d.ts" />
-
 import _ from 'lodash';
 import moment from 'moment';
 
 declare var window: any;
 
-const DEFAULT_DATETIME_FORMAT: String = 'YYYY-MM-DDTHH:mm:ssZ';
+const DEFAULT_DATETIME_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ';
 
 export function exportSeriesListToCsv(seriesList, dateTimeFormat = DEFAULT_DATETIME_FORMAT, excel = false) {
-    var text = excel ? 'sep=;\n' : '' + 'Series;Time;Value\n';
+    var text = (excel ? 'sep=;\n' : '') + 'Series;Time;Value\n';
     _.each(seriesList, function(series) {
         _.each(series.datapoints, function(dp) {
             text += series.alias + ';' + moment(dp[1]).format(dateTimeFormat) + ';' + dp[0] + '\n';
@@ -18,7 +16,7 @@ export function exportSeriesListToCsv(seriesList, dateTimeFormat = DEFAULT_DATET
 }
 
 export function exportSeriesListToCsvColumns(seriesList, dateTimeFormat = DEFAULT_DATETIME_FORMAT, excel = false) {
-    var text = excel ? 'sep=;\n' : '' + 'Time;';
+    var text = (excel ? 'sep=;\n' : '') + 'Time;';
     // add header
     _.each(seriesList, function(series) {
         text += series.alias + ';';

public/app/core/utils/kbn.js

@@ -401,6 +401,7 @@ function($, _, moment) {
   kbn.valueFormats.currencyJPY = kbn.formatBuilders.currency('¥');
   kbn.valueFormats.currencyRUB = kbn.formatBuilders.currency('₽');
   kbn.valueFormats.currencyUAH = kbn.formatBuilders.currency('₴');
+  kbn.valueFormats.currencyBRL = kbn.formatBuilders.currency('R$');
 
   // Data (Binary)
   kbn.valueFormats.bits   = kbn.formatBuilders.binarySIPrefix('b');
@@ -754,6 +755,7 @@ function($, _, moment) {
           {text: 'Yen (¥)',     value: 'currencyJPY'},
           {text: 'Rubles (₽)',  value: 'currencyRUB'},
           {text: 'Hryvnias (₴)',  value: 'currencyUAH'},
+          {text: 'Real (R$)', value: 'currencyBRL'},
         ]
       },
       {

public/app/features/admin/partials/edit_user.html

@@ -41,7 +41,7 @@
 
 	<form name="passwordForm" class="gf-form-group">
 		<div class="gf-form" >
-			<editor-checkbox text="Grafana Admin" model="permissions.isGrafanaAdmin" style="line-height: 1.5rem;"></editor-checkbox>
+			<gf-form-switch class="gf-form" label="Grafana Admin" checked="permissions.isGrafanaAdmin" switch-class="max-width-6"></gf-form-switch>
 		</div>
 
 		<div class="gf-form-button-row">

public/app/features/alerting/alert_def.ts

@@ -49,6 +49,8 @@ var reducerTypes = [
   {text: 'count()', value: 'count'},
   {text: 'last()', value: 'last'},
   {text: 'median()', value: 'median'},
+  {text: 'diff()', value: 'diff'},
+  {text: 'percent_diff()', value: 'percent_diff'},
 ];
 
 var noDataModes = [

public/app/features/alerting/partials/alert_tab.html

@@ -12,7 +12,7 @@
 			<li ng-class="{active: ctrl.subTabIndex === 2}">
 				<a ng-click="ctrl.changeTabIndex(2)">State history</a>
 			</li>
-      <li>
+      			<li>
 				<a ng-click="ctrl.delete()">Delete</a>
 			</li>
 		</ul>
@@ -41,10 +41,10 @@
 						<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">
+          			<div class="gf-form">
 						<query-part-editor class="gf-form-label query-part width-6" part="conditionModel.reducerPart" handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)">
 						</query-part-editor>
-            <span class="gf-form-label query-keyword">OF</span>
+            			<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)">
@@ -53,8 +53,8 @@
 					<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()"></input>
-            <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()"></input>
+            			<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()"></input>
 					</div>
 					<div class="gf-form">
 						<label class="gf-form-label">
@@ -77,13 +77,12 @@
 						</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>
+          			<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>
@@ -91,8 +90,8 @@
 				</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>
+          			<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>
@@ -135,35 +134,31 @@
 
 		<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">
+      		<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>
 
 			<section class="card-section card-list-layout-list">
 				<ol class="card-list" >
 					<li class="card-item-wrapper" ng-repeat="ah in ctrl.alertHistory">
-						<div class="card-item card-item--alert">
-              <div class="card-item-header">
-                <div class="card-item-type">
-                </div>
-              </div>
-							<div class="card-item-body">
-								<div class="card-item-details">
-									<div class="card-item-sub-name">
-										<span class="alert-list-item-state {{ah.stateModel.stateClass}}">
-											<i class="{{ah.stateModel.iconClass}}"></i>
-                      {{ah.stateModel.text}}
-                    </span> {{ah.time}}
-									</div>
-									<div class="card-item-sub-name">
-										{{ah.info}}
-									</div>
+						<div class="alert-list card-item card-item--alert">
+							<div class="alert-list-body">
+								<div class="alert-list-icon alert-list-item-state {{ah.stateModel.stateClass}}">
+									<i class="{{ah.stateModel.iconClass}}"></i>
 								</div>
+								<div class="alert-list-main alert-list-text">
+									<span class="alert-list-state {{ah.stateModel.stateClass}}">{{ah.stateModel.text}}</span>
+									<span class="alert-list-info">{{ah.info}}</span>
+								</div>
+							</div>
+							<div class="alert-list-footer alert-list-text">
+								<span>{{ah.time}}</span>
+								<span><!--Img Link--></span>
 							</div>
 						</div>
 					</li>

public/app/features/all.js

@@ -3,6 +3,7 @@ define([
   './dashlinks/module',
   './annotations/all',
   './templating/all',
+  './plugins/all',
   './dashboard/all',
   './playlist/all',
   './snapshot/all',

public/app/features/dashboard/export_data/export_data_modal.html

@@ -23,7 +23,7 @@
         <input type="text" class="gf-form-input" ng-model="ctrl.dateTimeFormat">
       </div>
       <gf-form-switch class="gf-form"
-        label="Export To Excel" label-class="width-12" switch-class="max-width-6"
+        label="Excel CSV Dialect" label-class="width-10" switch-class="max-width-6"
         checked="ctrl.excel">
       </gf-form-switch>
     </div>

public/app/features/dashboard/export_data/export_data_modal.ts

@@ -1,5 +1,3 @@
-///<reference path="../../../headers/common.d.ts" />
-
 import angular from 'angular';
 import * as fileExport from 'app/core/utils/file_export';
 import appEvents from 'app/core/app_events';
@@ -8,7 +6,7 @@ export class ExportDataModalCtrl {
   private data: any[];
   private panel: string;
   asRows: Boolean = true;
-  dateTimeFormat: String = 'YYYY-MM-DDTHH:mm:ssZ';
+  dateTimeFormat = 'YYYY-MM-DDTHH:mm:ssZ';
   excel: false;
 
   export() {

public/app/features/dashboard/partials/settings.html

@@ -93,13 +93,13 @@
 				<gf-form-switch class="gf-form" label="Show title" checked="row.showTitle" switch-class="max-width-6"></gf-form-switch>
 
 				<div class="gf-form">
-					<button class="btn btn-inverse gf-form-btn" ng-click="_.move(dashboard.rows,$index,$index-1)">
+					<button class="btn btn-inverse gf-form-btn width-3" ng-click="_.move(dashboard.rows,$index,$index-1)">
 						<i ng-class="{'invisible': $first}" class="fa fa-arrow-up"></i>
 					</button>
-					<button class="btn btn-inverse gf-from-btn" ng-click="_.move(dashboard.rows,$index,$index+1)">
+					<button class="btn btn-inverse gf-form-btn width-3" ng-click="_.move(dashboard.rows,$index,$index+1)">
 						<i ng-class="{'invisible': $last}" class="fa fa-arrow-down"></i>
 					</button>
-					<button class="btn btn-inverse gf-form-btn" ng-click="dashboard.rows = _.without(dashboard.rows,row)">
+					<button class="btn btn-inverse gf-form-btn width-3" ng-click="dashboard.rows = _.without(dashboard.rows,row)">
 						<i class="fa fa-trash"></i>
 					</button>
 				</div>

public/app/features/dashboard/repeat_option/repeat_option.ts

@@ -9,7 +9,8 @@ var template = `
 </div>
 `;
 
-coreModule.directive('dashRepeatOption', function(variableSrv) {
+/** @ngInject **/
+function dashRepeatOptionDirective(variableSrv) {
   return {
     restrict: 'E',
     template: template,
@@ -30,5 +31,6 @@ coreModule.directive('dashRepeatOption', function(variableSrv) {
       scope.variables.unshift({text: 'Disabled', value: null});
     }
   };
-});
+}
 
+coreModule.directive('dashRepeatOption', dashRepeatOptionDirective);

public/app/features/dashboard/row/row_ctrl.ts

@@ -113,7 +113,8 @@ export class DashRowCtrl {
   }
 }
 
-coreModule.directive('dashRow', function($rootScope) {
+/** @ngInject */
+function dashRowDirective($rootScope) {
   return {
     restrict: 'E',
     templateUrl: 'public/app/features/dashboard/row/row.html',
@@ -142,9 +143,10 @@ coreModule.directive('dashRow', function($rootScope) {
       }, scope);
     }
   };
-});
+}
 
-coreModule.directive('panelWidth', function($rootScope) {
+/** @ngInject */
+function panelWidthDirective($rootScope) {
   return function(scope, element) {
     var fullscreen = false;
 
@@ -180,10 +182,10 @@ coreModule.directive('panelWidth', function($rootScope) {
       element.hide();
     }
   };
-});
-
+}
 
-coreModule.directive('panelDropZone', function($timeout) {
+/** @ngInject */
+function panelDropZoneDirective($timeout) {
   return function(scope, element) {
     var row = scope.ctrl.row;
     var indrag = false;
@@ -237,5 +239,9 @@ coreModule.directive('panelDropZone', function($timeout) {
 
     updateState();
   };
-});
+}
+
+coreModule.directive('dashRow', dashRowDirective);
+coreModule.directive('panelWidth', panelWidthDirective);
+coreModule.directive('panelDropZone', panelDropZoneDirective);
 

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

@@ -2,7 +2,7 @@ import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/co
 
 import _ from 'lodash';
 import {HistoryListCtrl} from 'app/features/dashboard/history/history';
-import { versions, compare, restore } from 'test/mocks/history-mocks';
+import {versions, compare, restore} from './history_mocks';
 
 describe('HistoryListCtrl', function() {
   var RESTORE_ID = 4;

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

@@ -0,0 +1,193 @@
+
+export function versions() {
+  return [{
+    id: 4,
+    dashboardId: 1,
+    parentVersion: 3,
+    restoredFrom: 0,
+    version: 4,
+    created: '2017-02-22T17:43:01-08:00',
+    createdBy: 'admin',
+    message: '',
+  },
+  {
+    id: 3,
+    dashboardId: 1,
+    parentVersion: 1,
+    restoredFrom: 1,
+    version: 3,
+    created: '2017-02-22T17:43:01-08:00',
+    createdBy: 'admin',
+    message: '',
+  },
+  {
+    id: 2,
+    dashboardId: 1,
+    parentVersion: 0,
+    restoredFrom: -1,
+    version: 2,
+    created: '2017-02-22T17:29:52-08:00',
+    createdBy: 'admin',
+    message: '',
+  },
+  {
+    id: 1,
+    dashboardId: 1,
+    parentVersion: 0,
+    restoredFrom: -1,
+    slug: 'history-dashboard',
+    version: 1,
+    created: '2017-02-22T17:06:37-08:00',
+    createdBy: 'admin',
+    message: '',
+  }];
+}
+
+export function compare(type) {
+  return type === 'basic' ? '<div></div>' : '<pre><code></code></pre>';
+}
+
+export function restore(version, restoredFrom?) {
+  return {
+    dashboard: {
+      meta: {
+        type: 'db',
+        canSave: true,
+        canEdit: true,
+        canStar: true,
+        slug: 'history-dashboard',
+        expires: '0001-01-01T00:00:00Z',
+        created: '2017-02-21T18:40:45-08:00',
+        updated: '2017-04-11T21:31:22.59219665-07:00',
+        updatedBy: 'admin',
+        createdBy: 'admin',
+        version: version,
+      },
+      dashboard: {
+        annotations: {
+          list: []
+        },
+        description: 'A random dashboard for implementing the history list',
+        editable: true,
+        gnetId: null,
+        graphTooltip: 0,
+        hideControls: false,
+        id: 1,
+        links: [],
+        restoredFrom: restoredFrom,
+        rows: [{
+          collapse: false,
+          height: '250px',
+          panels: [{
+            aliasColors: {},
+            bars: false,
+            datasource: null,
+            fill: 1,
+            id: 1,
+            legend: {
+              avg: false,
+              current: false,
+              max: false,
+              min: false,
+              show: true,
+              total: false,
+              values: false
+            },
+            lines: true,
+            linewidth: 1,
+            nullPointMode: "null",
+            percentage: false,
+            pointradius: 5,
+            points: false,
+            renderer: 'flot',
+            seriesOverrides: [],
+            span: 12,
+            stack: false,
+            steppedLine: false,
+            targets: [{}],
+            thresholds: [],
+            timeFrom: null,
+            timeShift: null,
+            title: 'Panel Title',
+            tooltip: {
+              shared: true,
+              sort: 0,
+              value_type: 'individual'
+            },
+            type: 'graph',
+            xaxis: {
+              mode: 'time',
+              name: null,
+              show: true,
+              values: []
+            },
+            yaxes: [{
+              format: 'short',
+              label: null,
+              logBase: 1,
+              max: null,
+              min: null,
+              show: true
+            }, {
+              format: 'short',
+              label: null,
+              logBase: 1,
+              max: null,
+              min: null,
+              show: true
+            }]
+          }],
+          repeat: null,
+          repeatIteration: null,
+          repeatRowId: null,
+          showTitle: false,
+          title: 'Dashboard Row',
+          titleSize: 'h6'
+        }
+        ],
+        schemaVersion: 14,
+        style: 'dark',
+        tags: [
+          'development'
+        ],
+        templating: {
+          'list': []
+        },
+        time: {
+          from: 'now-6h',
+          to: 'now'
+        },
+        timepicker: {
+          refresh_intervals: [
+            '5s',
+            '10s',
+            '30s',
+            '1m',
+            '5m',
+            '15m',
+            '30m',
+            '1h',
+            '2h',
+            '1d',
+          ],
+          time_options: [
+            '5m',
+            '15m',
+            '1h',
+            '6h',
+            '12h',
+            '24h',
+            '2d',
+            '7d',
+            '30d'
+          ]
+        },
+        timezone: 'utc',
+        title: 'History Dashboard',
+        version: version,
+      }
+    },
+    message: 'Dashboard restored to version ' + version,
+    version: version
+  };
+}

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

@@ -2,7 +2,7 @@ import {describe, beforeEach, it, expect, angularMocks} from 'test/lib/common';
 
 import helpers from 'test/specs/helpers';
 import '../history/history_srv';
-import {versions, restore} from 'test/mocks/history-mocks';
+import {versions, restore} from './history_mocks';
 
 describe('historySrv', function() {
   var ctx = new helpers.ServiceTestContext();

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

@@ -0,0 +1,110 @@
+import {describe, beforeEach, it, expect, sinon, angularMocks} from 'test/lib/common';
+import helpers from 'test/specs/helpers';
+import '../shareModalCtrl';
+import config from 'app/core/config';
+import 'app/features/panellinks/linkSrv';
+
+describe('ShareModalCtrl', function() {
+  var ctx = new helpers.ControllerTestContext();
+
+  function setTime(range) {
+    ctx.timeSrv.timeRange = sinon.stub().returns(range);
+  }
+
+  beforeEach(function() {
+    config.bootData = {
+      user: {
+        orgId: 1
+      }
+    };
+  });
+
+  setTime({ from: new Date(1000), to: new Date(2000) });
+
+  beforeEach(angularMocks.module('grafana.controllers'));
+  beforeEach(angularMocks.module('grafana.services'));
+  beforeEach(angularMocks.module(function($compileProvider) {
+    $compileProvider.preAssignBindingsEnabled(true);
+  }));
+
+  beforeEach(ctx.providePhase());
+
+  beforeEach(ctx.createControllerPhase('ShareModalCtrl'));
+
+  describe('shareUrl with current time range and panel', function() {
+    it('should generate share url absolute time', function() {
+      ctx.$location.path('/test');
+      ctx.scope.panel = { id: 22 };
+
+      ctx.scope.init();
+      expect(ctx.scope.shareUrl).to.be('http://server/#!/test?from=1000&to=2000&orgId=1&panelId=22&fullscreen');
+    });
+
+    it('should generate render url', function() {
+      ctx.$location.$$absUrl = 'http://dashboards.grafana.com/dashboard/db/my-dash';
+
+      ctx.scope.panel = { id: 22 };
+
+      ctx.scope.init();
+      var base = 'http://dashboards.grafana.com/render/dashboard-solo/db/my-dash';
+      var params = '?from=1000&to=2000&orgId=1&panelId=22&width=1000&height=500&tz=UTC';
+      expect(ctx.scope.imageUrl).to.contain(base + params);
+    });
+
+    it('should remove panel id when no panel in scope', function() {
+      ctx.$location.path('/test');
+      ctx.scope.options.forCurrent = true;
+      ctx.scope.panel = null;
+
+      ctx.scope.init();
+      expect(ctx.scope.shareUrl).to.be('http://server/#!/test?from=1000&to=2000&orgId=1');
+    });
+
+    it('should add theme when specified', function() {
+      ctx.$location.path('/test');
+      ctx.scope.options.theme = 'light';
+      ctx.scope.panel = null;
+
+      ctx.scope.init();
+      expect(ctx.scope.shareUrl).to.be('http://server/#!/test?from=1000&to=2000&orgId=1&theme=light');
+    });
+
+    it('should remove fullscreen from image url when is first param in querystring and modeSharePanel is true', function() {
+      ctx.$location.url('/test?fullscreen&edit');
+      ctx.scope.modeSharePanel = true;
+      ctx.scope.panel = { id: 1 };
+
+      ctx.scope.buildUrl();
+
+      expect(ctx.scope.shareUrl).to.contain('?fullscreen&edit&from=1000&to=2000&orgId=1&panelId=1');
+      expect(ctx.scope.imageUrl).to.contain('?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC');
+
+    });
+
+    it('should remove edit from image url when is first param in querystring and modeSharePanel is true', function() {
+      ctx.$location.url('/test?edit&fullscreen');
+      ctx.scope.modeSharePanel = true;
+      ctx.scope.panel = { id: 1 };
+
+      ctx.scope.buildUrl();
+
+      expect(ctx.scope.shareUrl).to.contain('?edit&fullscreen&from=1000&to=2000&orgId=1&panelId=1');
+      expect(ctx.scope.imageUrl).to.contain('?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC');
+
+    });
+
+    it('should include template variables in url', function() {
+      ctx.$location.path('/test');
+      ctx.scope.options.includeTemplateVars = true;
+
+      ctx.templateSrv.fillVariableValuesForUrl = function(params) {
+        params['var-app'] = 'mupp';
+        params['var-server'] = 'srv-01';
+      };
+
+      ctx.scope.buildUrl();
+      expect(ctx.scope.shareUrl).to.be('http://server/#!/test?from=1000&to=2000&orgId=1&var-app=mupp&var-server=srv-01');
+    });
+  });
+});
+

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

@@ -1,4 +1,4 @@
-import {describe, beforeEach, it, expect, angularMocks} from 'test/lib/common';
+import {describe, beforeEach, it, expect, sinon, angularMocks} from 'test/lib/common';
 
 import helpers from 'test/specs/helpers';
 import '../time_srv';
@@ -8,6 +8,7 @@ describe('timeSrv', function() {
   var ctx = new helpers.ServiceTestContext();
   var _dashboard: any = {
     time: {from: 'now-6h', to: 'now'},
+    getTimezone: sinon.stub().returns('browser')
   };
 
   beforeEach(angularMocks.module('grafana.core'));

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

@@ -0,0 +1,82 @@
+import {describe, beforeEach, it, expect, sinon, angularMocks} from 'test/lib/common';
+import 'app/features/dashboard/unsavedChangesSrv';
+import 'app/features/dashboard/dashboard_srv';
+
+describe("unsavedChangesSrv", function() {
+  var _unsavedChangesSrv;
+  var _dashboardSrv;
+  var _location;
+  var _contextSrvStub = { isEditor: true };
+  var _rootScope;
+  var tracker;
+  var dash;
+  var scope;
+
+  beforeEach(angularMocks.module('grafana.core'));
+  beforeEach(angularMocks.module('grafana.services'));
+  beforeEach(angularMocks.module(function($provide) {
+    $provide.value('contextSrv', _contextSrvStub);
+    $provide.value('$window', {});
+  }));
+
+  beforeEach(angularMocks.inject(function(unsavedChangesSrv, $location, $rootScope, dashboardSrv) {
+    _unsavedChangesSrv = unsavedChangesSrv;
+    _dashboardSrv = dashboardSrv;
+    _location = $location;
+    _rootScope = $rootScope;
+  }));
+
+  beforeEach(function() {
+    dash = _dashboardSrv.create({
+      refresh: false,
+      rows: [
+        {
+          panels: [{ test: "asd", legend: { } }]
+        }
+      ]
+    });
+    scope = _rootScope.$new();
+    scope.appEvent = sinon.spy();
+    scope.onAppEvent = sinon.spy();
+
+    tracker = new _unsavedChangesSrv.Tracker(dash, scope);
+  });
+
+  it('No changes should not have changes', function() {
+    expect(tracker.hasChanges()).to.be(false);
+  });
+
+  it('Simple change should be registered', function() {
+    dash.property = "google";
+    expect(tracker.hasChanges()).to.be(true);
+  });
+
+  it('Should ignore a lot of changes', function() {
+    dash.time = {from: '1h'};
+    dash.refresh = true;
+    dash.schemaVersion = 10;
+    expect(tracker.hasChanges()).to.be(false);
+  });
+
+  it('Should ignore row collapse change', function() {
+    dash.rows[0].collapse = true;
+    expect(tracker.hasChanges()).to.be(false);
+  });
+
+  it('Should ignore panel legend changes', function() {
+    dash.rows[0].panels[0].legend.sortDesc = true;
+    dash.rows[0].panels[0].legend.sort = "avg";
+    expect(tracker.hasChanges()).to.be(false);
+  });
+
+  it('Should ignore panel repeats', function() {
+    dash.rows[0].panels.push({repeatPanelId: 10});
+    expect(tracker.hasChanges()).to.be(false);
+  });
+
+  it('Should ignore row repeats', function() {
+    dash.addEmptyRow();
+    dash.rows[1].repeatRowId = 10;
+    expect(tracker.hasChanges()).to.be(false);
+  });
+});

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

@@ -0,0 +1,53 @@
+import {describe, beforeEach, it, expect, angularMocks} from 'test/lib/common';
+import 'app/features/dashboard/viewStateSrv';
+import config from  'app/core/config';
+
+describe('when updating view state', function() {
+  var viewState, location;
+  var timeSrv = {};
+  var templateSrv = {};
+  var contextSrv = {
+    user: {
+      orgId: 19
+    }
+  };
+  beforeEach(function() {
+    config.bootData = {
+      user: {
+        orgId: 1
+      }
+    };
+  });
+  beforeEach(angularMocks.module('grafana.services'));
+  beforeEach(angularMocks.module(function($provide) {
+    $provide.value('timeSrv', timeSrv);
+    $provide.value('templateSrv', templateSrv);
+    $provide.value('contextSrv', contextSrv);
+  }));
+
+  beforeEach(angularMocks.inject(function(dashboardViewStateSrv, $location, $rootScope) {
+    $rootScope.onAppEvent = function() {};
+    $rootScope.dashboard = {meta: {}};
+    viewState = dashboardViewStateSrv.create($rootScope);
+    location = $location;
+  }));
+
+  describe('to fullscreen true and edit true', function() {
+    it('should update querystring and view state', function() {
+      var updateState = {fullscreen: true, edit: true, panelId: 1};
+      viewState.update(updateState);
+      expect(location.search()).to.eql({fullscreen: true, edit: true, panelId: 1, orgId: 1});
+      expect(viewState.dashboard.meta.fullscreen).to.be(true);
+      expect(viewState.state.fullscreen).to.be(true);
+    });
+  });
+
+  describe('to fullscreen false', function() {
+    it('should remove params from query string', function() {
+      viewState.update({fullscreen: true, panelId: 1, edit: true});
+      viewState.update({fullscreen: false});
+      expect(viewState.dashboard.meta.fullscreen).to.be(false);
+      expect(viewState.state.fullscreen).to.be(null);
+    });
+  });
+});

public/app/features/dashboard/time_srv.ts

@@ -196,9 +196,11 @@ class TimeSrv {
       to: moment.isMoment(this.time.to) ? moment(this.time.to) : this.time.to,
     };
 
+    var timezone = this.dashboard && this.dashboard.getTimezone();
+
     return {
-      from: dateMath.parse(raw.from, false),
-      to: dateMath.parse(raw.to, true),
+      from: dateMath.parse(raw.from, false, timezone),
+      to: dateMath.parse(raw.to, true, timezone),
       raw: raw
     };
   }

public/app/features/dashlinks/editor.html

@@ -3,74 +3,78 @@
 
 	<div ng-repeat="link in dashboard.links">
 
-		<div class="gf-form-group">
-			<div class="gf-form-inline">
+		<div class="gf-form-group gf-form-inline">
+			<div class="section">
 				<div class="gf-form">
-					<span class="gf-form-label width-6">Type</span>
+					<span class="gf-form-label width-8">Type</span>
 					<div class="gf-form-select-wrapper width-10">
 						<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
 					</div>
 				</div>
-
 				<div class="gf-form" ng-show="link.type === 'dashboards'">
-					<span class="gf-form-label">With tags</span>
-					<bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags"></bootstrap-tagsinput>
+					<span class="gf-form-label width-8">With tags</span>
+					<bootstrap-tagsinput ng-model="link.tags" class="width-10" tagclass="label label-tag" placeholder="add tags" style="margin-right: .25rem"></bootstrap-tagsinput>
 				</div>
-
-				<div class="gf-form" ng-show="link.type === 'dashboards'">
-					<editor-checkbox text="As dropdown" model="link.asDropdown" change="updated()"></editor-checkbox>
+				<gf-form-switch ng-show="link.type === 'dashboards'" class="gf-form" label="As dropdown" checked="link.asDropdown" switch-class="max-width-4" label-class="width-8"></gf-form-switch>
+				<div class="gf-form" ng-show="link.type === 'dashboards' && link.asDropdown">
+					<span class="gf-form-label width-8">Title</span>
+					<input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
 				</div>
+				<div ng-show="link.type === 'link'">
+					<div class="gf-form">
+						<li class="gf-form-label width-8">Url</li>
+						<input type="text" ng-model="link.url" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
+					</div>
 
-				<div class="gf-form max-width-30" ng-show="link.type === 'link'">
-					<li class="gf-form-label width-6">Url</li>
-					<input type="text" ng-model="link.url" class="gf-form-input" ng-model-onblur ng-change="updated()">
-				</div>
+					<div class="gf-form">
+						<span class="gf-form-label width-8">Title</span>
+						<input type="text" ng-model="link.title" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
+					</div>
 
-				<div class="gf-form">
-					<button class="btn btn-inverse btn-mini" ng-click="moveLink($index, -1)" ng-hide="$first"><i class="fa fa-arrow-up"></i></button>
-				</div>
-				<div class="gf-form">
-					<button class="btn btn-inverse btn-mini" ng-click="moveLink($index, 1)" ng-hide="$last"><i class="fa fa-arrow-down"></i></button>
-				</div>
-				<div class="gf-form">
-					<button class="btn btn-inverse btn-mini" ng-click="deleteLink($index)"><i class="fa fa-trash" ></i></button>
-				</div>
-			</div>
+					<div class="gf-form">
+						<span class="gf-form-label width-8">Tooltip</span>
+						<input type="text" ng-model="link.tooltip" class="gf-form-input width-20" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
+					</div>
 
-			<div class="gf-form" ng-show="link.type === 'dashboards' && link.asDropdown">
-				<span class="gf-form-label width-6">Title</span>
-				<input type="text" ng-model="link.title" class="gf-form-input max-width-25" ng-model-onblur ng-change="updated()">
+					<div class="gf-form">
+						<span class="gf-form-label width-8">Icon</span>
+						<div class="gf-form-select-wrapper width-20">
+								<select class="gf-form-input" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
+						</div>
+					</div>
+				</div>
 			</div>
 
-			<div class="gf-form-inline" ng-show="link.type === 'link'">
-				<div class="gf-form">
-					<span class="gf-form-label width-6">Title</span>
-					<input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
+			<div class="section gf-form-inline"  style="display: flex">
+				<div>
+					<div class="gf-form">
+						<span class="gf-form-label width-6">Include</span>
+					</div>
+				</div>
+				<div>
+					<gf-form-switch class="gf-form" label="Time range" checked="link.keepTime" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
+					<gf-form-switch class="gf-form" label="Variable values" checked="link.includeVars" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
+					<gf-form-switch class="gf-form" label="Open in new tab" checked="link.targetBlank" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
 				</div>
+			</div>
 
+			<div style="display:flex; flex-direction:column; justify-content:flex-start">
 				<div class="gf-form">
-					<span class="gf-form-label width-6">Tooltip</span>
-					<input type="text" ng-model="link.tooltip" class="gf-form-input max-width-10" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
+					<button class="btn btn-inverse gf-form-btn width-4" ng-click="deleteLink($index)">
+						<i class="fa fa-trash"></i>
+					</button>
 				</div>
-
 				<div class="gf-form">
-					<span class="gf-form-label width-6">Icon</span>
-					<div class="gf-form-select-wrapper max-width-10">
-						<select class="gf-form-input" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
-					</div>
+					<button class="btn btn-inverse gf-form-btn width-4" ng-click="moveLink($index, -1)" ng-hide="$first"><i class="fa fa-arrow-up"></i></button>
 				</div>
-			</div>
-
-			<div class="gf-form-inline">
 				<div class="gf-form">
-					<span class="gf-form-label width-6">Include</span>
-					<editor-checkbox text="Time range" model="link.keepTime" change="updated()"></editor-checkbox>
-					<editor-checkbox text="Variable values" model="link.includeVars" change="updated()"></editor-checkbox>
-					<editor-checkbox text="Open in new tab " model="link.targetBlank" change="updated()"></editor-checkbox>
+					<button class="btn btn-inverse gf-form-btn width-4" ng-click="moveLink($index, 1)" ng-hide="$last"><i class="fa fa-arrow-down"></i></button>
 				</div>
 			</div>
 		</div>
 	</div>
 </div>
 
+
+
 <button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>

public/app/features/org/partials/invite.html

@@ -41,15 +41,13 @@
 			</div>
 
 			<div class="gf-form-inline gf-form-group">
-				<div class="gf-form">
-					<a class="btn btn-inverse btn-small" ng-click="addInvite()">
+				<div class="gf-form" style="margin-right:.25rem">
+					<a class="btn btn-inverse gf-form-button" ng-click="addInvite()">
 						<i class="fa fa-plus"></i>
 						Invite another
 					</a>
 				</div>
-				<div class="gf-form">
-					<editor-checkbox text="Skip sending invite email" model="options.skipEmails" change="targetBlur()"></editor-checkbox>
-				</div>
+				<gf-form-switch class="gf-form" label="Skip sending invite email" checked="options.skipEmails" switch-class="max-width-6"></gf-form-switch>
 			</div>
 
 			<div class="gf-form-button-row">

public/app/features/org/profile_ctrl.ts

@@ -1,5 +1,3 @@
-///<reference path="../../headers/common.d.ts" />
-
 import config from 'app/core/config';
 import {coreModule} from 'app/core/core';
 

public/app/features/panel/metrics_panel_ctrl.ts

@@ -1,10 +1,8 @@
-///<reference path="../../headers/common.d.ts" />
-
 import config from 'app/core/config';
 import $ from 'jquery';
 import _ from 'lodash';
 import kbn from 'app/core/utils/kbn';
-import {PanelCtrl} from './panel_ctrl';
+import {PanelCtrl} from 'app/features/panel/panel_ctrl';
 
 import * as rangeUtil from 'app/core/utils/rangeutil';
 import * as dateMath from 'app/core/utils/datemath';
@@ -43,6 +41,7 @@ class MetricsPanelCtrl extends PanelCtrl {
     this.timeSrv = $injector.get('timeSrv');
     this.templateSrv = $injector.get('templateSrv');
     this.scope = $scope;
+    this.panel.datasource = this.panel.datasource || null;
 
     if (!this.panel.targets) {
       this.panel.targets = [{}];
@@ -220,6 +219,7 @@ class MetricsPanelCtrl extends PanelCtrl {
     });
 
     var metricsQuery = {
+      timezone: this.dashboard.getTimezone(),
       panelId: this.panel.id,
       range: this.range,
       rangeRaw: this.range.raw,

public/app/features/panel/panel_ctrl.ts

@@ -1,5 +1,3 @@
-///<reference path="../../headers/common.d.ts" />
-
 import config from 'app/core/config';
 import _ from 'lodash';
 import $ from 'jquery';

public/app/features/panellinks/specs/link_srv_specs.ts

@@ -0,0 +1,46 @@
+import {describe, beforeEach, it, expect, angularMocks} from 'test/lib/common';
+import 'app/features/panellinks/linkSrv';
+import _ from  'lodash';
+
+describe('linkSrv', function() {
+  var _linkSrv;
+
+  beforeEach(angularMocks.module('grafana.core'));
+  beforeEach(angularMocks.module('grafana.services'));
+
+  beforeEach(angularMocks.inject(function(linkSrv) {
+    _linkSrv = linkSrv;
+  }));
+
+  describe('when appending query strings', function() {
+
+    it('add ? to URL if not present', function() {
+      var url = _linkSrv.appendToQueryString('http://example.com', 'foo=bar');
+      expect(url).to.be('http://example.com?foo=bar');
+    });
+
+    it('do not add & to URL if ? is present but query string is empty', function() {
+      var url = _linkSrv.appendToQueryString('http://example.com?', 'foo=bar');
+      expect(url).to.be('http://example.com?foo=bar');
+    });
+
+    it('add & to URL if query string is present', function() {
+      var url = _linkSrv.appendToQueryString('http://example.com?foo=bar', 'hello=world');
+      expect(url).to.be('http://example.com?foo=bar&hello=world');
+    });
+
+    it('do not change the URL if there is nothing to append', function() {
+      _.each(['', undefined, null], function(toAppend) {
+        var url1 = _linkSrv.appendToQueryString('http://example.com', toAppend);
+        expect(url1).to.be('http://example.com');
+
+        var url2 = _linkSrv.appendToQueryString('http://example.com?', toAppend);
+        expect(url2).to.be('http://example.com?');
+
+        var url3 = _linkSrv.appendToQueryString('http://example.com?foo=bar', toAppend);
+        expect(url3).to.be('http://example.com?foo=bar');
+      });
+    });
+
+  });
+});

public/app/features/playlist/partials/playlists.html

@@ -13,7 +13,7 @@
     <thead>
       <th><strong>Name</strong></th>
       <th><strong>Start url</strong></th>
-      <th style="width: 68px"></th>
+      <th style="width: 78px"></th>
       <th style="width: 78px"></th>
       <th style="width: 25px"></th>
     </thead>

public/app/features/plugins/all.ts

@@ -4,3 +4,5 @@ import './plugin_list_ctrl';
 import './import_list/import_list';
 import './ds_edit_ctrl';
 import './ds_list_ctrl';
+import './datasource_srv';
+import './plugin_component';

public/app/features/plugins/buit_in_plugins.ts

@@ -0,0 +1,47 @@
+import * as graphitePlugin from 'app/plugins/datasource/graphite/module';
+import * as cloudwatchPlugin from 'app/plugins/datasource/cloudwatch/module';
+import * as elasticsearchPlugin from 'app/plugins/datasource/elasticsearch/module';
+import * as opentsdbPlugin from 'app/plugins/datasource/opentsdb/module';
+import * as grafanaPlugin from 'app/plugins/datasource/grafana/module';
+import * as influxdbPlugin from 'app/plugins/datasource/influxdb/module';
+import * as mixedPlugin from 'app/plugins/datasource/mixed/module';
+import * as mysqlPlugin from 'app/plugins/datasource/mysql/module';
+import * as prometheusPlugin from 'app/plugins/datasource/prometheus/module';
+
+import * as textPanel from 'app/plugins/panel/text/module';
+import * as graphPanel from 'app/plugins/panel/graph/module';
+import * as dashListPanel from 'app/plugins/panel/dashlist/module';
+import * as pluginsListPanel from 'app/plugins/panel/pluginlist/module';
+import * as alertListPanel from 'app/plugins/panel/alertlist/module';
+import * as heatmapPanel from 'app/plugins/panel/heatmap/module';
+import * as tablePanel from 'app/plugins/panel/table/module';
+import * as singlestatPanel from 'app/plugins/panel/singlestat/module';
+import * as gettingStartedPanel from 'app/plugins/panel/gettingstarted/module';
+import * as testDataAppPlugin from 'app/plugins/app/testdata/module';
+import * as testDataDSPlugin from 'app/plugins/app/testdata/datasource/module';
+
+const builtInPlugins = {
+  "app/plugins/datasource/graphite/module": graphitePlugin,
+  "app/plugins/datasource/cloudwatch/module": cloudwatchPlugin,
+  "app/plugins/datasource/elasticsearch/module": elasticsearchPlugin,
+  "app/plugins/datasource/opentsdb/module": opentsdbPlugin,
+  "app/plugins/datasource/grafana/module": grafanaPlugin,
+  "app/plugins/datasource/influxdb/module": influxdbPlugin,
+  "app/plugins/datasource/mixed/module": mixedPlugin,
+  "app/plugins/datasource/mysql/module": mysqlPlugin,
+  "app/plugins/datasource/prometheus/module": prometheusPlugin,
+  "app/plugins/app/testdata/module": testDataAppPlugin,
+  "app/plugins/app/testdata/datasource/module": testDataDSPlugin,
+
+  "app/plugins/panel/text/module": textPanel,
+  "app/plugins/panel/graph/module": graphPanel,
+  "app/plugins/panel/dashlist/module": dashListPanel,
+  "app/plugins/panel/pluginlist/module": pluginsListPanel,
+  "app/plugins/panel/alertlist/module": alertListPanel,
+  "app/plugins/panel/heatmap/module": heatmapPanel,
+  "app/plugins/panel/table/module": tablePanel,
+  "app/plugins/panel/singlestat/module": singlestatPanel,
+  "app/plugins/panel/gettingstarted/module": gettingStartedPanel,
+};
+
+export default builtInPlugins;

public/app/core/services/datasource_srv.js → public/app/features/plugins/datasource_srv.js

@@ -1,10 +1,11 @@
 define([
   'angular',
   'lodash',
-  '../core_module',
+  'app/core/core_module',
   'app/core/config',
+  './plugin_loader',
 ],
-function (angular, _, coreModule, config) {
+function (angular, _, coreModule, config, pluginLoader) {
   'use strict';
 
   coreModule.default.service('datasourceSrv', function($q, $injector, $rootScope, templateSrv) {
@@ -41,7 +42,7 @@ function (angular, _, coreModule, config) {
       var deferred = $q.defer();
       var pluginDef = dsConfig.meta;
 
-      System.import(pluginDef.module).then(function(plugin) {
+      pluginLoader.importPluginModule(pluginDef.module).then(function(plugin) {
         // check if its in cache now
         if (self.datasources[name]) {
           deferred.resolve(self.datasources[name]);