changes version to 4.6.1

(cherry picked from commit 894951c7d4)

CHANGELOG.md

@@ -7,7 +7,12 @@
 - UX changes to nav & side menu
 - New dashboard grid layout system
 
-# 4.6.0 (unreleased)
+# 4.6.0-beta2 (2017-10-17)
+
+## Fixes
+* **ColorPicker**: Fix for color picker not showing [#9549](https://github.com/grafana/grafana/issues/9549)
+
+# 4.6.0-beta1 (2017-10-13)
 
 ## New Features
 * **GCS**: Adds support for Google Cloud Storage [#8370](https://github.com/grafana/grafana/issues/8370) thx [@chuhlomin](https://github.com/chuhlomin)
@@ -40,7 +45,7 @@
 
 ## Tech
 * **Go**: Grafana is now built using golang 1.9
-* **Webpack**: Changed from systemjs to webpack (see readme or building from source guide for new build instructions). Systemjs is still used to load plugins but now plugins can only import a limited set of dependencies. See [PLUGIN_DEV.md](https://github.com/grafana/grafana/blob/master/PLUGIN_DEV.md) for more details on how this can effect some plugins. 
+* **Webpack**: Changed from systemjs to webpack (see readme or building from source guide for new build instructions). Systemjs is still used to load plugins but now plugins can only import a limited set of dependencies. See [PLUGIN_DEV.md](https://github.com/grafana/grafana/blob/master/PLUGIN_DEV.md) for more details on how this can effect some plugins.
 
 # 4.5.2 (2017-09-22)
 

appveyor.yml

@@ -7,7 +7,7 @@ clone_folder: c:\gopath\src\github.com\grafana\grafana
 environment:
   nodejs_version: "6"
   GOPATH: c:\gopath
-  GOVERSION: 1.9.1
+  GOVERSION: 1.9.2
 
 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.9.1.linux-amd64.tar.gz"
+    GODIST: "go1.9.2.linux-amd64.tar.gz"
   post:
     - mkdir -p ~/download
     - mkdir -p ~/docker

docs/sources/features/datasources/postgres.md

@@ -48,7 +48,7 @@ Macro example | Description
 *$__timeFilter(dateColumn)* | Will be replaced by a time range filter using the specified column name. For example, *dateColumn > to_timestamp(1494410783) AND dateColumn < to_timestamp(1494497183)*
 *$__timeFrom()* | Will be replaced by the start of the currently active time selection. For example, *to_timestamp(1494410783)*
 *$__timeTo()* | Will be replaced by the end of the currently active time selection. For example, *to_timestamp(1494497183)*
-*$__timeGroup(dateColumn,'5m')* | Will be replaced by an expression usable in GROUP BY clause. For example, *(extract(epoch from "dateColumn")/extract(epoch from '5m'::interval))::int*
+*$__timeGroup(dateColumn,'5m')* | Will be replaced by an expression usable in GROUP BY clause. For example, *(extract(epoch from "dateColumn")/extract(epoch from '5m'::interval))::int*extract(epoch from '5m'::interval)*
 *$__unixEpochFilter(dateColumn)* | Will be replaced by a time range filter using the specified column name with times represented as unix timestamp. For example, *dateColumn > 1494410783 AND dateColumn < 1494497183*
 *$__unixEpochFrom()* | Will be replaced by the start of the currently active time selection as unix timestamp. For example, *1494410783*
 *$__unixEpochTo()* | Will be replaced by the end of the currently active time selection as unix timestamp. For example, *1494497183*
@@ -94,26 +94,26 @@ Example with `metric` column
 
 ```sql
 SELECT
-  min(time_date_time) as time,
+  $__timeGroup(time_date_time,'5m') as time,
   min(value_double),
   'min' as metric
 FROM test_data
 WHERE $__timeFilter(time_date_time)
-GROUP BY metric1, (extract(epoch from time_date_time)/extract(epoch from $__interval::interval))::int
-ORDER BY time asc
+GROUP BY time
+ORDER BY time
 ```
 
 Example with multiple columns:
 
 ```sql
 SELECT
-  min(time_date_time) as time,
+  $__timeGroup(time_date_time,'5m') as time,
   min(value_double) as min_value,
   max(value_double) as max_value
 FROM test_data
 WHERE $__timeFilter(time_date_time)
-GROUP BY metric1, (extract(epoch from time_date_time)/extract(epoch from $__interval::interval))::int
-ORDER BY time asc
+GROUP BY time
+ORDER BY time
 ```
 
 ## Templating

docs/sources/http_api/annotations.md

@@ -120,6 +120,37 @@ Content-Type: application/json
 PUT /api/annotations/1141 HTTP/1.1
 Accept: application/json
 Content-Type: application/json
+
+{
+  "time":1507037197339,
+  "isRegion":true,
+  "timeEnd":1507180805056,
+  "text":"Annotation Description",
+  "tags":["tag3","tag4","tag5"]
+}
+```
+
+## Delete Annotation By Id
+
+`DELETE /api/annotation/:id`
+
+Deletes the annotation that matches the specified id.
+
+**Example Request**:
+
+```http
+DELETE /api/annotation/1 HTTP/1.1
+Accept: application/json
+Content-Type: application/json
+Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk
+```
+
+**Example Response**:
+
+```http
+HTTP/1.1 200
+Content-Type: application/json
+
 ```
 
 ## Delete Annotation By RegionId

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.9.1](https://golang.org/dl/)
+- [Go 1.9.2](https://golang.org/dl/)
 - [NodeJS LTS](https://nodejs.org/download/)
 - [Git](https://git-scm.com/downloads)
 

package.json

@@ -4,7 +4,7 @@
     "company": "Grafana Labs"
   },
   "name": "grafana",
-  "version": "4.6.0-beta1",
+  "version": "4.6.1",
   "repository": {
     "type": "git",
     "url": "http://github.com/grafana/grafana.git"

packaging/publish/publish_testing.sh

@@ -1,6 +1,6 @@
 #! /usr/bin/env bash
-deb_ver=4.6.0-beta1
-rpm_ver=4.6.0-beta1
+deb_ver=4.6.0-beta3
+rpm_ver=4.6.0-beta3
 
 wget https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana_${deb_ver}_amd64.deb
 

pkg/api/annotations.go

@@ -1,7 +1,6 @@
 package api
 
 import (
-	"fmt"
 	"strings"
 	"time"
 
@@ -41,9 +40,22 @@ func GetAnnotations(c *middleware.Context) Response {
 	return Json(200, items)
 }
 
+type CreateAnnotationError struct {
+	message string
+}
+
+func (e *CreateAnnotationError) Error() string {
+	return e.message
+}
+
 func PostAnnotation(c *middleware.Context, cmd dtos.PostAnnotationsCmd) Response {
 	repo := annotations.GetRepository()
 
+	if cmd.Text == "" {
+		err := &CreateAnnotationError{"text field should not be empty"}
+		return ApiError(500, "Failed to save annotation", err)
+	}
+
 	item := annotations.Item{
 		OrgId:       c.OrgId,
 		UserId:      c.UserId,
@@ -55,6 +67,10 @@ func PostAnnotation(c *middleware.Context, cmd dtos.PostAnnotationsCmd) Response
 		Tags:        cmd.Tags,
 	}
 
+	if item.Epoch == 0 {
+		item.Epoch = time.Now().Unix()
+	}
+
 	if err := repo.Save(&item); err != nil {
 		return ApiError(500, "Failed to save annotation", err)
 	}
@@ -82,21 +98,22 @@ func PostAnnotation(c *middleware.Context, cmd dtos.PostAnnotationsCmd) Response
 	return ApiSuccess("Annotation added")
 }
 
-type GraphiteAnnotationError struct {
-	message string
-}
-
-func (e *GraphiteAnnotationError) Error() string {
-	return e.message
-}
-
 func formatGraphiteAnnotation(what string, data string) string {
-	return fmt.Sprintf("%s\n%s", what, data)
+	text := what
+	if data != "" {
+		text = text + "\n" + data
+	}
+	return text
 }
 
 func PostGraphiteAnnotation(c *middleware.Context, cmd dtos.PostGraphiteAnnotationsCmd) Response {
 	repo := annotations.GetRepository()
 
+	if cmd.What == "" {
+		err := &CreateAnnotationError{"what field should not be empty"}
+		return ApiError(500, "Failed to save Graphite annotation", err)
+	}
+
 	if cmd.When == 0 {
 		cmd.When = time.Now().Unix()
 	}
@@ -106,18 +123,22 @@ func PostGraphiteAnnotation(c *middleware.Context, cmd dtos.PostGraphiteAnnotati
 	var tagsArray []string
 	switch tags := cmd.Tags.(type) {
 	case string:
-		tagsArray = strings.Split(tags, " ")
+		if tags != "" {
+			tagsArray = strings.Split(tags, " ")
+		} else {
+			tagsArray = []string{}
+		}
 	case []interface{}:
 		for _, t := range tags {
 			if tagStr, ok := t.(string); ok {
 				tagsArray = append(tagsArray, tagStr)
 			} else {
-				err := &GraphiteAnnotationError{"tag should be a string"}
+				err := &CreateAnnotationError{"tag should be a string"}
 				return ApiError(500, "Failed to save Graphite annotation", err)
 			}
 		}
 	default:
-		err := &GraphiteAnnotationError{"unsupported tags format"}
+		err := &CreateAnnotationError{"unsupported tags format"}
 		return ApiError(500, "Failed to save Graphite annotation", err)
 	}
 
@@ -133,7 +154,7 @@ func PostGraphiteAnnotation(c *middleware.Context, cmd dtos.PostGraphiteAnnotati
 		return ApiError(500, "Failed to save Graphite annotation", err)
 	}
 
-	return ApiSuccess("Graphite Annotation added")
+	return ApiSuccess("Graphite annotation added")
 }
 
 func UpdateAnnotation(c *middleware.Context, cmd dtos.UpdateAnnotationsCmd) Response {

pkg/api/api.go

@@ -267,7 +267,7 @@ func (hs *HttpServer) registerRoutes() {
 
 		apiRoute.Group("/alerts", func(alertsRoute RouteRegister) {
 			alertsRoute.Post("/test", bind(dtos.AlertTestCommand{}), wrap(AlertTest))
-			alertsRoute.Post("/:alertId/pause", bind(dtos.PauseAlertCommand{}), wrap(PauseAlert), reqEditorRole)
+			alertsRoute.Post("/:alertId/pause", reqEditorRole, bind(dtos.PauseAlertCommand{}), wrap(PauseAlert))
 			alertsRoute.Get("/:alertId", ValidateOrgAlert, wrap(GetAlert))
 			alertsRoute.Get("/", wrap(GetAlerts))
 			alertsRoute.Get("/states-for-dashboard", wrap(GetAlertStatesForDashboard))

pkg/api/http_server.go

@@ -188,9 +188,8 @@ func (hs *HttpServer) metricsEndpoint(ctx *macaron.Context) {
 		return
 	}
 
-	promhttp.HandlerFor(prometheus.DefaultGatherer, promhttp.HandlerOpts{
-		DisableCompression: true,
-	}).ServeHTTP(ctx.Resp, ctx.Req.Request)
+	promhttp.HandlerFor(prometheus.DefaultGatherer, promhttp.HandlerOpts{}).
+		ServeHTTP(ctx.Resp, ctx.Req.Request)
 }
 
 func (hs *HttpServer) healthHandler(ctx *macaron.Context) {

pkg/middleware/util.go

@@ -21,6 +21,10 @@ func Gziper() macaron.Handler {
 			return
 		}
 
+		if strings.HasPrefix(requestPath, "/metrics") {
+			return
+		}
+
 		ctx.Invoke(macaronGziper)
 	}
 }

pkg/models/datasource.go

@@ -18,6 +18,7 @@ const (
 	DS_KAIROSDB      = "kairosdb"
 	DS_PROMETHEUS    = "prometheus"
 	DS_POSTGRES      = "postgres"
+	DS_MYSQL         = "mysql"
 	DS_ACCESS_DIRECT = "direct"
 	DS_ACCESS_PROXY  = "proxy"
 )
@@ -64,6 +65,7 @@ var knownDatasourcePlugins map[string]bool = map[string]bool{
 	DS_PROMETHEUS:                         true,
 	DS_OPENTSDB:                           true,
 	DS_POSTGRES:                           true,
+	DS_MYSQL:                              true,
 	"opennms":                             true,
 	"druid":                               true,
 	"dalmatinerdb":                        true,

pkg/plugins/frontend_plugin.go

@@ -40,7 +40,7 @@ func getPluginLogoUrl(pluginType, path, baseUrl string) string {
 }
 
 func (fp *FrontendPluginBase) setPathsBasedOnApp(app *AppPlugin) {
-	appSubPath := strings.Replace(fp.PluginDir, app.PluginDir, "", 1)
+	appSubPath := strings.Replace(strings.Replace(fp.PluginDir, app.PluginDir, "", 1), "\\", "/", 1)
 	fp.IncludedInAppId = app.Id
 	fp.BaseUrl = app.BaseUrl
 

pkg/plugins/frontend_plugin_test.go

@@ -0,0 +1,34 @@
+package plugins
+
+import (
+	"testing"
+
+	"github.com/grafana/grafana/pkg/setting"
+	. "github.com/smartystreets/goconvey/convey"
+)
+
+func TestFrontendPlugin(t *testing.T) {
+
+	Convey("When setting paths based on App on Windows", t, func() {
+		setting.StaticRootPath = "c:\\grafana\\public"
+
+		fp := &FrontendPluginBase{
+			PluginBase: PluginBase{
+				PluginDir: "c:\\grafana\\public\\app\\plugins\\app\\testdata\\datasource",
+				BaseUrl:   "fpbase",
+			},
+		}
+		app := &AppPlugin{
+			FrontendPluginBase: FrontendPluginBase{
+				PluginBase: PluginBase{
+					PluginDir: "c:\\grafana\\public\\app\\plugins\\app\\testdata",
+					Id:        "testdata",
+					BaseUrl:   "public/app/plugins/app/testdata",
+				},
+			},
+		}
+		fp.setPathsBasedOnApp(app)
+
+		So(fp.Module, ShouldEqual, "app/plugins/app/testdata/datasource/module")
+	})
+}

pkg/services/sqlstore/annotation.go

@@ -43,7 +43,7 @@ func (r *SqlAnnotationRepo) ensureTagsExist(sess *DBSession, tags []*models.Tag)
 		var existingTag models.Tag
 
 		// check if it exists
-		if exists, err := sess.Table("tag").Where("key=? AND value=?", tag.Key, tag.Value).Get(&existingTag); err != nil {
+		if exists, err := sess.Table("tag").Where("`key`=? AND `value`=?", tag.Key, tag.Value).Get(&existingTag); err != nil {
 			return nil, err
 		} else if exists {
 			tag.Id = existingTag.Id

pkg/tsdb/postgres/macros.go

@@ -74,7 +74,7 @@ func (m *PostgresMacroEngine) evaluateMacro(name string, args []string) (string,
 		if len(args) == 0 {
 			return "", fmt.Errorf("missing time column argument for macro %v", name)
 		}
-		return fmt.Sprintf("%s >= to_timestamp(%d) AND %s <= to_timestamp(%d)", args[0], uint64(m.TimeRange.GetFromAsMsEpoch()/1000), args[0], uint64(m.TimeRange.GetToAsMsEpoch()/1000)), nil
+		return fmt.Sprintf("extract(epoch from %s) BETWEEN %d AND %d", args[0], uint64(m.TimeRange.GetFromAsMsEpoch()/1000), uint64(m.TimeRange.GetToAsMsEpoch()/1000)), nil
 	case "__timeFrom":
 		return fmt.Sprintf("to_timestamp(%d)", uint64(m.TimeRange.GetFromAsMsEpoch()/1000)), nil
 	case "__timeTo":
@@ -83,7 +83,7 @@ func (m *PostgresMacroEngine) evaluateMacro(name string, args []string) (string,
 		if len(args) < 2 {
 			return "", fmt.Errorf("macro %v needs time column and interval", name)
 		}
-		return fmt.Sprintf("(extract(epoch from \"%s\")/extract(epoch from %s::interval))::int", args[0], args[1]), nil
+		return fmt.Sprintf("(extract(epoch from \"%s\")/extract(epoch from %s::interval))::int*extract(epoch from %s::interval)", args[0], args[1], args[1]), nil
 	case "__unixEpochFilter":
 		if len(args) == 0 {
 			return "", fmt.Errorf("missing time column argument for macro %v", name)

pkg/tsdb/postgres/macros_test.go

@@ -30,7 +30,7 @@ func TestMacroEngine(t *testing.T) {
 			sql, err := engine.Interpolate(timeRange, "WHERE $__timeFilter(time_column)")
 			So(err, ShouldBeNil)
 
-			So(sql, ShouldEqual, "WHERE time_column >= to_timestamp(18446744066914186738) AND time_column <= to_timestamp(18446744066914187038)")
+			So(sql, ShouldEqual, "WHERE extract(epoch from time_column) BETWEEN 18446744066914186738 AND 18446744066914187038")
 		})
 
 		Convey("interpolate __timeFrom function", func() {
@@ -45,7 +45,7 @@ func TestMacroEngine(t *testing.T) {
 			sql, err := engine.Interpolate(timeRange, "GROUP BY $__timeGroup(time_column,'5m')")
 			So(err, ShouldBeNil)
 
-			So(sql, ShouldEqual, "GROUP BY (extract(epoch from \"time_column\")/extract(epoch from '5m'::interval))::int")
+			So(sql, ShouldEqual, "GROUP BY (extract(epoch from \"time_column\")/extract(epoch from '5m'::interval))::int*extract(epoch from '5m'::interval)")
 		})
 
 		Convey("interpolate __timeTo function", func() {

public/app/core/components/PasswordStrength.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import coreModule from '../core_module';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface IProps {
   password: string;
@@ -33,7 +33,5 @@ export class PasswordStrength extends React.Component<IProps, any> {
   }
 }
 
-coreModule.directive('passwordStrength', function(reactDirective) {
-  return reactDirective(PasswordStrength, ['password']);
-});
+react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
 

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import coreModule from 'app/core/core_module';
 import { sortedColors } from 'app/core/utils/colors';
 
 export interface IProps {
@@ -23,12 +22,15 @@ export class GfColorPalette extends React.Component<IProps, any> {
   }
 
   render() {
-    const colorPaletteItems = this.paletteColors.map((paletteColor) => {
+    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
+          key={paletteColor}
+          className={'pointer fa ' + cssClass}
+          style={{ color: paletteColor }}
+          onClick={this.onColorSelect(paletteColor)}>
+          &nbsp;
         </i>
       );
     });
@@ -40,6 +42,3 @@ export class GfColorPalette extends React.Component<IProps, any> {
   }
 }
 
-coreModule.directive('gfColorPalette', function (reactDirective) {
-  return reactDirective(GfColorPalette, ['color', 'onColorSelect']);
-});

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

@@ -2,8 +2,8 @@ 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';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface IProps {
   color: string;
@@ -27,9 +27,7 @@ export class ColorPicker extends React.Component<IProps, any> {
   }
 
   openColorPicker() {
-    const dropContent = (
-      <ColorPickerPopover color={this.props.color} onColorSelect={this.onColorSelect} />
-    );
+    const dropContent = <ColorPickerPopover color={this.props.color} onColorSelect={this.onColorSelect} />;
 
     let dropContentElem = document.createElement('div');
     ReactDOM.render(dropContent, dropContentElem);
@@ -38,12 +36,12 @@ export class ColorPicker extends React.Component<IProps, any> {
       target: this.pickerElem[0],
       content: dropContentElem,
       position: 'top center',
-      classes: 'drop-popover drop-popover--form',
-      openOn: 'hover',
+      classes: 'drop-popover',
+      openOn: 'click',
       hoverCloseDelay: 200,
       tetherOptions: {
-        constraints: [{ to: 'scrollParent', attachment: "none both" }]
-      }
+        constraints: [{ to: 'scrollParent', attachment: 'none both' }],
+      },
     });
 
     drop.on('close', this.closeColorPicker);
@@ -68,17 +66,14 @@ export class ColorPicker extends React.Component<IProps, any> {
     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 className="sp-preview-inner" style={{ backgroundColor: this.props.color }} />
         </div>
       </div>
     );
   }
 }
 
-coreModule.directive('colorPicker', function (reactDirective) {
-  return reactDirective(ColorPicker, [
-    'color',
-    ['onChange', { watchDepth: 'reference', wrapApply: true }]
-  ]);
-});
+react2AngularDirective('colorPicker', ColorPicker, [
+  'color',
+  ['onChange', { watchDepth: 'reference', wrapApply: true }],
+]);

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import $ from 'jquery';
 import tinycolor from 'tinycolor2';
-import coreModule from 'app/core/core_module';
 import { GfColorPalette } from './ColorPalette';
 import { GfSpectrumPicker } from './SpectrumPicker';
 
@@ -115,7 +114,3 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
     );
   }
 }
-
-coreModule.directive('gfColorPickerPopover', function (reactDirective) {
-  return reactDirective(ColorPickerPopover, ['color', 'onColorSelect']);
-});

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import coreModule from 'app/core/core_module';
-import {ColorPickerPopover} from './ColorPickerPopover';
+import { ColorPickerPopover } from './ColorPickerPopover';
+import { react2AngularDirective } from 'app/core/utils/react2angular';
 
 export interface IProps {
   series: any;
@@ -43,13 +43,11 @@ export class SeriesColorPicker extends React.Component<IProps, any> {
   render() {
     return (
       <div className="graph-legend-popover">
-        {this.props.series && this.renderAxisSelection()}
+        {this.props.series.yaxis && this.renderAxisSelection()}
         <ColorPickerPopover color={this.props.series.color} onColorSelect={this.onColorChange} />
       </div>
     );
   }
 }
 
-coreModule.directive('seriesColorPicker', function(reactDirective) {
-  return reactDirective(SeriesColorPicker, ['series', 'onColorChange', 'onToggleAxis']);
-});
+react2AngularDirective('seriesColorPicker', SeriesColorPicker, ['series', 'onColorChange', 'onToggleAxis']);

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import coreModule from 'app/core/core_module';
 import _ from 'lodash';
 import $ from 'jquery';
 import 'vendor/spectrum';
@@ -71,6 +70,3 @@ export class GfSpectrumPicker extends React.Component<IProps, any> {
   }
 }
 
-coreModule.directive('gfSpectrumPicker', function (reactDirective) {
-  return reactDirective(GfSpectrumPicker, ['color', 'options', 'onColorSelect']);
-});

public/app/core/components/colorpicker/spectrum_picker.ts

@@ -5,6 +5,7 @@
  */
 import coreModule from '../../core_module';
 
+/** @ngInject */
 export function spectrumPicker() {
   return {
     restrict: 'E',

public/app/core/directives/dash_class.js

@@ -31,8 +31,8 @@ function (_, $, coreModule) {
           }
         });
 
-        $scope.$watch('playlistSrv', function(newValue) {
-          elem.toggleClass('playlist-active', _.isObject(newValue));
+        $scope.$watch('playlistSrv.isPlaying', function(newValue) {
+          elem.toggleClass('playlist-active', newValue === true);
         });
       }
     };

public/app/core/directives/diff-view.ts

@@ -7,14 +7,15 @@ export class DeltaCtrl {
   observer: any;
 
   /** @ngInject */
-  constructor($rootScope) {
-    const waitForCompile = function(mutations) {
+  constructor(private $rootScope) {
+
+    const waitForCompile = (mutations) => {
       if (mutations.length === 1) {
         this.$rootScope.appEvent('json-diff-ready');
       }
     };
 
-    this.observer = new MutationObserver(waitForCompile.bind(this));
+    this.observer = new MutationObserver(waitForCompile);
 
     const observerConfig = {
       attributes: true,

public/app/core/utils/file_export.ts

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import moment from 'moment';
-
-declare var window: any;
+import {saveAs} from 'file-saver';
 
 const DEFAULT_DATETIME_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ';
 
@@ -69,5 +68,5 @@ export function exportTableDataToCsv(table, excel = false) {
 
 export function saveSaveBlob(payload, fname) {
     var blob = new Blob([payload], { type: "text/csv;charset=utf-8" });
-    window.saveAs(blob, fname);
+    saveAs(blob, fname);
 }

public/app/core/utils/react2angular.ts

@@ -0,0 +1,10 @@
+import coreModule from 'app/core/core_module';
+
+export function react2AngularDirective(name: string, component: any, options: any) {
+
+  coreModule.directive(name, ['reactDirective', reactDirective => {
+    return reactDirective(component, options);
+  }]);
+
+}
+

public/app/features/alerting/alert_tab_ctrl.ts

@@ -383,6 +383,7 @@ export class AlertTabCtrl {
 
   test() {
     this.testing = true;
+    this.testResult = false;
 
     var payload = {
       dashboard: this.dashboardSrv.getCurrent().getSaveModelClone(),

public/app/features/annotations/annotation_tooltip.ts

@@ -39,7 +39,7 @@ export function annotationTooltipDirective($sanitize, dashboardSrv, contextSrv,
           text = text + '<br />' + event.text;
         }
       } else if (title) {
-        text = title + '<br />' + text;
+        text = title + '<br />' + (_.isString(text) ? text : '');
         title = '';
       }
 

public/app/features/dashboard/dashboard_ctrl.ts

@@ -20,10 +20,12 @@ export class DashboardCtrl {
     dynamicDashboardSrv,
     dashboardViewStateSrv,
     contextSrv,
+    playlistSrv,
     alertSrv,
     $timeout) {
 
       $scope.editor = { index: 0 };
+      $scope.playlistSrv = playlistSrv;
 
       var resizeEventTimeout;
 

public/app/features/dashboard/dashnav/dashnav.ts

@@ -19,6 +19,7 @@ export class DashNavCtrl {
     private $location,
     private backendSrv,
     private contextSrv,
+    public playlistSrv,
     navModelSrv) {
       this.navModel = navModelSrv.getDashboardNav(this.dashboard, this);
 

public/app/features/dashboard/export/export_modal.ts

@@ -1,8 +1,7 @@
-///<reference path="../../../headers/common.d.ts" />
-
 import angular from 'angular';
-import coreModule from 'app/core/core_module';
+import {saveAs} from 'file-saver';
 
+import coreModule from 'app/core/core_module';
 import {DashboardExporter} from './exporter';
 
 export class DashExportCtrl {
@@ -22,9 +21,8 @@ export class DashExportCtrl {
   }
 
   save() {
-    var blob = new Blob([angular.toJson(this.dash, true)], { type: "application/json;charset=utf-8" });
-    var wnd: any = window;
-    wnd.saveAs(blob, this.dash.title + '-' + new Date().getTime() + '.json');
+    var blob = new Blob([angular.toJson(this.dash, true)], {type: 'application/json;charset=utf-8'});
+    saveAs(blob, this.dash.title + '-' + new Date().getTime() + '.json');
   }
 
   saveJson() {
@@ -44,7 +42,7 @@ export function dashExportDirective() {
     controller: DashExportCtrl,
     bindToController: true,
     controllerAs: 'ctrl',
-    scope: {dismiss: "&"}
+    scope: {dismiss: '&'},
   };
 }
 

public/app/features/dashboard/model.ts

@@ -35,7 +35,6 @@ export class DashboardModel {
   gnetId: any;
   meta: any;
   events: any;
-  editMode: boolean;
 
   constructor(data, meta?) {
     if (!data) {

public/app/features/dashboard/row/add_panel.html

@@ -3,25 +3,21 @@
 		<i class="fa fa-remove"></i>
 	</a>
 
-  <div class="gf-form-inline dash-row-add-panel-form">
-    <div class="gf-form">
-      <input type="text" class="gf-form-input max-width-14" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()" placeholder="panel search filter"></input>
-    </div>
-  </div>
+	<div class="gf-form width-10">
+		<input type="text" class="gf-form-input width-10" ng-model='ctrl.panelSearch' give-focus='true' ng-keydown="ctrl.keyDown($event)" ng-change="ctrl.panelSearchChanged()" placeholder="panel search filter"></input>
+	</div>
 
-  <div class="add-panel-panels-scroll">
-    <div class="add-panel-panels">
-      <div class="add-panel-item"
-					ng-repeat="panel in ctrl.panelHits"
-					ng-class="{active: $index === ctrl.activeIndex}"
-					ng-click="ctrl.addPanel(panel)"
-					ui-draggable="true"
-					drag="panel.id"
-          title="{{panel.name}}">
-        <img class="add-panel-item-img" ng-src="{{panel.info.logos.small}}"></img>
-        <div class="add-panel-item-name">{{panel.name}}</div>
-      </div>
-    </div>
-  </div>
+	<div class="add-panel-panels">
+		<div class="add-panel-item"
+				ng-repeat="panel in ctrl.panelHits"
+				ng-class="{active: $index === ctrl.activeIndex}"
+				ng-click="ctrl.addPanel(panel)"
+				ui-draggable="true"
+				drag="panel.id"
+				title="{{panel.name}}">
+			<img class="add-panel-item-img" ng-src="{{panel.info.logos.small}}"></img>
+			<div class="add-panel-item-name">{{panel.name}}</div>
+		</div>
+	</div>
 
 </div>

public/app/features/dashboard/save_as_modal.ts

@@ -49,7 +49,10 @@ export class SaveDashboardAsModalCtrl {
     if (dashboard.id > 0) {
       this.clone.rows.forEach(row => {
         row.panels.forEach(panel => {
-          delete panel.thresholds;
+          if (panel.type === "graph" && panel.alert) {
+            delete panel.thresholds;
+          }
+
           delete panel.alert;
         });
       });

public/app/features/dashboard/specs/save_as_modal.jest.ts

@@ -0,0 +1,67 @@
+import {SaveDashboardAsModalCtrl} from '../save_as_modal';
+import {describe, it, expect} from 'test/lib/common';
+
+describe('saving dashboard as', () => {
+    function scenario(name, panel, verify) {
+        describe(name, () => {
+            var json = {
+                title: "name",
+                rows: [ { panels: [
+                    panel
+                ]}]
+            };
+
+            var mockDashboardSrv = {
+                getCurrent: function() {
+                    return {
+                        id: 5,
+                        getSaveModelClone: function() {
+                            return json;
+                        }
+                    };
+                }
+            };
+
+            var ctrl = new SaveDashboardAsModalCtrl(mockDashboardSrv);
+            var ctx: any = {
+                clone: ctrl.clone,
+                ctrl: ctrl,
+                panel: {}
+            };
+            for (let row of ctrl.clone.rows) {
+                for (let panel of row.panels) {
+                    ctx.panel = panel;
+                }
+            }
+            it("verify", () => {
+                verify(ctx);
+            });
+        });
+    }
+
+    scenario("default values", {}, (ctx) => {
+        var clone = ctx.clone;
+        expect(clone.id).toBe(null);
+        expect(clone.title).toBe("name Copy");
+        expect(clone.editable).toBe(true);
+        expect(clone.hideControls).toBe(false);
+    });
+
+    var graphPanel = { id: 1, type: "graph", alert: { rule: 1}, thresholds: { value: 3000} };
+
+    scenario("should remove alert from graph panel", graphPanel , (ctx) => {
+        expect(ctx.panel.alert).toBe(undefined);
+    });
+
+    scenario("should remove threshold from graph panel", graphPanel, (ctx) => {
+        expect(ctx.panel.thresholds).toBe(undefined);
+    });
+
+    scenario("singlestat should keep threshold", { id: 1, type: "singlestat", thresholds: { value: 3000} }, (ctx) => {
+        expect(ctx.panel.thresholds).not.toBe(undefined);
+    });
+
+    scenario("table should keep threshold", { id: 1, type: "table", thresholds: { value: 3000} }, (ctx) => {
+        expect(ctx.panel.thresholds).not.toBe(undefined);
+    });
+});

public/app/features/dashboard/unsavedChangesSrv.js

@@ -73,7 +73,6 @@ function(angular, _) {
       dash.time = 0;
       dash.refresh = 0;
       dash.schemaVersion = 0;
-      dash.editMode = false;
 
       // filter row and panels properties that should be ignored
       dash.rows = _.filter(dash.rows, function(row) {

public/app/features/dashboard/viewStateSrv.js

@@ -154,7 +154,6 @@ function (angular, _, $, config) {
 
       ctrl.editMode = false;
       ctrl.fullscreen = false;
-      ctrl.dashboard.editMode = this.oldDashboardEditMode;
 
       this.$scope.appEvent('panel-fullscreen-exit', {panelId: ctrl.panel.id});
 
@@ -176,10 +175,8 @@ function (angular, _, $, config) {
       ctrl.editMode = this.state.edit && this.dashboard.meta.canEdit;
       ctrl.fullscreen = true;
 
-      this.oldDashboardEditMode = this.dashboard.editMode;
       this.oldTimeRange = ctrl.range;
       this.fullscreenPanel = panelScope;
-      this.dashboard.editMode = false;
 
       $(window).scrollTop(0);
 

public/app/features/plugins/plugin_loader.ts

@@ -9,11 +9,23 @@ import config from 'app/core/config';
 import TimeSeries from 'app/core/time_series2';
 import TableModel from 'app/core/table_model';
 import {coreModule, appEvents, contextSrv} from 'app/core/core';
+import * as datemath from 'app/core/utils/datemath';
+import * as fileExport from 'app/core/utils/file_export';
+import * as flatten from 'app/core/utils/flatten';
+import * as ticks from 'app/core/utils/ticks';
+import {impressions} from 'app/features/dashboard/impression_store';
+import builtInPlugins from './built_in_plugins';
+import d3 from 'vendor/d3/d3';
+
+// rxjs
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
-import * as datemath from 'app/core/utils/datemath';
-import builtInPlugins from './buit_in_plugins';
-import d3 from 'vendor/d3/d3';
+
+// these imports add functions to Observable
+import 'rxjs/add/observable/empty';
+import 'rxjs/add/observable/from';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/combineAll';
 
 System.config({
   baseURL: 'public',
@@ -27,6 +39,12 @@ System.config({
     text: 'vendor/plugin-text/text.js',
     css: 'vendor/plugin-css/css.js'
   },
+  meta: {
+    '*': {
+      esModule: true,
+      authorization: true,
+    }
+  }
 });
 
 // add cache busting
@@ -49,24 +67,39 @@ exposeToPlugin('lodash', _);
 exposeToPlugin('moment', moment);
 exposeToPlugin('jquery', jquery);
 exposeToPlugin('angular', angular);
+exposeToPlugin('d3', d3);
 exposeToPlugin('rxjs/Subject', Subject);
 exposeToPlugin('rxjs/Observable', Observable);
-exposeToPlugin('d3', d3);
+
+// backward compatible path
+exposeToPlugin('vendor/npm/rxjs/Rx', {
+  Subject: Subject,
+  Observable: Observable
+});
+
+exposeToPlugin('app/features/dashboard/impression_store', {
+  impressions: impressions,
+  __esModule: true
+});
 
 exposeToPlugin('app/plugins/sdk', sdk);
 exposeToPlugin('app/core/utils/datemath', datemath);
+exposeToPlugin('app/core/utils/file_export', fileExport);
+exposeToPlugin('app/core/utils/flatten', flatten);
 exposeToPlugin('app/core/utils/kbn', kbn);
+exposeToPlugin('app/core/utils/ticks', ticks);
+
 exposeToPlugin('app/core/config', config);
 exposeToPlugin('app/core/time_series', TimeSeries);
 exposeToPlugin('app/core/time_series2', TimeSeries);
 exposeToPlugin('app/core/table_model', TableModel);
 exposeToPlugin('app/core/app_events', appEvents);
 exposeToPlugin('app/core/core_module', coreModule);
-exposeToPlugin('app/core/core_module', coreModule);
 exposeToPlugin('app/core/core', {
   coreModule: coreModule,
   appEvents: appEvents,
   contextSrv: contextSrv,
+  __esModule: true
 });
 
 import 'vendor/flot/jquery.flot';
@@ -79,7 +112,11 @@ import 'vendor/flot/jquery.flot.fillbelow';
 import 'vendor/flot/jquery.flot.crosshair';
 import 'vendor/flot/jquery.flot.dashes';
 
-for (let flotDep of ['jquery.flot', 'jquery.flot.pie', 'jquery.flot.time']) {
+const flotDeps = [
+  'jquery.flot', 'jquery.flot.pie', 'jquery.flot.time', 'jquery.flot.fillbelow', 'jquery.flot.crosshair',
+  'jquery.flot.stack', 'jquery.flot.selection', 'jquery.flot.stackpercent', 'jquery.flot.events'
+];
+for (let flotDep of flotDeps) {
   exposeToPlugin(flotDep, {fakeDep: 1});
 }
 

public/app/plugins/datasource/cloudwatch/datasource.js

@@ -41,7 +41,7 @@ function (angular, _, moment, dateMath, kbn, templatingVariable) {
         item.namespace = templateSrv.replace(item.namespace, options.scopedVars);
         item.metricName = templateSrv.replace(item.metricName, options.scopedVars);
         item.dimensions = self.convertDimensionFormat(item.dimensions, options.scopeVars);
-        item.period = self.getPeriod(item, options);
+        item.period = String(self.getPeriod(item, options)); // use string format for period in graph query, and alerting
 
         return _.extend({
           refId: item.refId,
@@ -318,6 +318,8 @@ function (angular, _, moment, dateMath, kbn, templatingVariable) {
 
       return this.getDimensionValues(region, namespace, metricName, 'ServiceName', dimensions).then(function () {
         return { status: 'success', message: 'Data source is working' };
+      }, function (err) {
+        return { status: 'error', message: err.message };
       });
     };
 
@@ -352,6 +354,7 @@ function (angular, _, moment, dateMath, kbn, templatingVariable) {
         var t = angular.copy(target);
         var scopedVar = {};
         scopedVar[variable.name] = v;
+        t.refId = target.refId + '_' + v.value;
         t.dimensions[dimensionKey] = templateSrv.replace(t.dimensions[dimensionKey], scopedVar);
         return t;
       }).value();

public/app/plugins/datasource/cloudwatch/specs/datasource_specs.ts

@@ -37,7 +37,7 @@ describe('CloudWatchDatasource', function() {
             InstanceId: 'i-12345678'
           },
           statistics: ['Average'],
-          period: 300
+          period: '300'
         }
       ]
     };
@@ -109,7 +109,7 @@ describe('CloudWatchDatasource', function() {
 
       ctx.ds.query(query).then(function() {
         var params = requestParams.queries[0];
-        expect(params.period).to.be(600);
+        expect(params.period).to.be('600');
         done();
       });
       ctx.$rootScope.$apply();

public/app/plugins/datasource/elasticsearch/datasource.ts

@@ -75,6 +75,12 @@ export class ElasticDatasource {
     return this.request('POST', url, data).then(function(results) {
       results.data.$$config = results.config;
       return results.data;
+    }).catch(err => {
+      if (err.data && err.data.error) {
+        throw {message: 'Elasticsearch error: ' + err.data.error.reason, error: err.data.error};
+      }
+
+      throw err;
     });
   }
 

public/app/plugins/datasource/postgres/datasource.ts

@@ -20,6 +20,10 @@ export class PostgresDatasource {
       return '\'' + value + '\'';
     }
 
+    if (typeof value === 'number') {
+      return value.toString();
+    }
+
     var quotedValues = _.map(value, function(val) {
       return '\'' + val + '\'';
     });

public/app/plugins/datasource/postgres/module.ts

@@ -16,8 +16,8 @@ class PostgresConfigCtrl {
 
 const defaultQuery = `SELECT
   extract(epoch from time_column) AS time,
-  title_column as title,
-  description_column as text
+  text_column as text,
+  tags_column as tags
 FROM
   metric_table
 WHERE

public/app/plugins/datasource/prometheus/completer.ts

@@ -8,7 +8,7 @@ export class PromCompleter {
   labelNameCache: any;
   labelValueCache: any;
 
-  identifierRegexps = [/[\[\]a-zA-Z_0-9=]/];
+  identifierRegexps = [/\[/, /[a-zA-Z0-9_:]/];
 
   constructor(private datasource: PrometheusDatasource) {
     this.labelQueryCache = {};
@@ -73,13 +73,15 @@ export class PromCompleter {
         });
     }
 
-    if (prefix === '[') {
+    if (token.type === 'paren.lparen' && token.value === '[') {
       var vectors = [];
       for (let unit of ['s', 'm', 'h']) {
         for (let value of [1,5,10,30]) {
          vectors.push({caption: value+unit, value: '['+value+unit, meta: 'range vector'});
         }
       }
+      vectors.push({caption: '$__interval', value: '[$__interval', meta: 'range vector'});
+      vectors.push({caption: '$__interval_ms', value: '[$__interval_ms', meta: 'range vector'});
       callback(null, vectors);
       return;
     }

public/app/plugins/datasource/prometheus/datasource.ts

@@ -1,5 +1,3 @@
-///<reference path="../../../headers/common.d.ts" />
-
 import _ from 'lodash';
 
 import kbn from 'app/core/utils/kbn';
@@ -122,7 +120,7 @@ export class PrometheusDatasource {
         } else {
           for (let metricData of response.data.data.result) {
             if (response.data.data.resultType === 'matrix') {
-              result.push(self.transformMetricData(metricData, activeTargets[index], start, end));
+              result.push(self.transformMetricData(metricData, activeTargets[index], start, end, queries[index].step));
             } else if (response.data.data.resultType === 'vector') {
               result.push(self.transformInstantMetricData(metricData, activeTargets[index]));
             }
@@ -144,7 +142,6 @@ export class PrometheusDatasource {
     var intervalFactor = target.intervalFactor || 1;
     // Adjust the interval to take into account any specified minimum and interval factor plus Prometheus limits
     var adjustedInterval = this.adjustInterval(interval, minInterval, range, intervalFactor);
-
     var scopedVars = options.scopedVars;
     // If the interval was adjusted, make a shallow copy of scopedVars with updated interval vars
     if (interval !== adjustedInterval) {
@@ -154,7 +151,7 @@ export class PrometheusDatasource {
         "__interval_ms":  {text: interval * 1000, value: interval * 1000},
       });
     }
-    target.step = query.step = interval;
+    query.step = interval;
 
     // Only replace vars in expression after having (possibly) updated interval vars
     query.expr = this.templateSrv.replace(target.expr, scopedVars, this.interpolateQueryExpr);
@@ -168,7 +165,7 @@ export class PrometheusDatasource {
     if (interval !== 0 && range / intervalFactor / interval > 11000) {
       interval = Math.ceil(range / intervalFactor / 11000);
     }
-    return Math.max(interval * intervalFactor, minInterval);
+    return Math.max(interval * intervalFactor, minInterval, 1);
   }
 
   performTimeSeriesQuery(query, start, end) {
@@ -272,13 +269,13 @@ export class PrometheusDatasource {
     });
   }
 
-  transformMetricData(md, options, start, end) {
+  transformMetricData(md, options, start, end, step) {
     var dps = [],
       metricLabel = null;
 
     metricLabel = this.createMetricLabel(md.metric, options);
 
-    var stepMs = parseInt(options.step) * 1000;
+    var stepMs = step * 1000;
     var baseTimestamp = start * 1000;
     for (let value of md.values) {
       var dp_value = parseFloat(value[1]);

public/app/plugins/datasource/prometheus/plugin.json

@@ -4,7 +4,8 @@
   "id": "prometheus",
 
   "includes": [
-    {"type": "dashboard", "name": "Prometheus Stats", "path": "dashboards/prometheus_stats.json"}
+    {"type": "dashboard", "name": "Prometheus Stats", "path": "dashboards/prometheus_stats.json"},
+    {"type": "dashboard", "name": "Grafana Stats", "path": "dashboards/grafana_stats.json"}
   ],
 
   "metrics": true,

public/app/plugins/datasource/prometheus/specs/completer_specs.ts

@@ -44,12 +44,18 @@ describe('Prometheus editor completer', function() {
   describe('When inside brackets', () => {
     it('Should return range vectors', () => {
       const session = getSessionStub({
-        currentToken: {},
-        tokens: [],
-        line: '',
+        currentToken: {type: 'paren.lparen', value: '[', index: 2, start: 9},
+        tokens: [
+          {type: 'identifier', value: 'node_cpu'},
+          {type: 'paren.lparen', value: '['}
+        ],
+        line: 'node_cpu[',
       });
-      completer.getCompletions(editor, session, {row: 0, column: 10}, '[', (s, res) => {
-        expect(res[0]).to.eql({caption: '1s', value: '[1s', meta: 'range vector'});
+
+      return completer.getCompletions(editor, session, {row: 0, column: 10}, '[', (s, res) => {
+        expect(res[0].caption).to.eql('1s');
+        expect(res[0].value).to.eql('[1s');
+        expect(res[0].meta).to.eql('range vector');
       });
     });
   });

public/app/plugins/datasource/prometheus/specs/datasource_specs.ts

@@ -294,6 +294,20 @@ describe('PrometheusDatasource', function() {
       ctx.ds.query(query);
       ctx.$httpBackend.verifyNoOutstandingExpectation();
     });
+
+    it('step should never go below 1', function() {
+      var query = {
+        // 6 hour range
+        range: { from: moment(1508318768202), to: moment(1508318770118) },
+        targets: [{expr: 'test'}],
+        interval: '100ms'
+      };
+      var urlExpected = 'proxied/api/v1/query_range?query=test&start=1508318769&end=1508318771&step=1';
+      ctx.$httpBackend.expect('GET', urlExpected).respond(response);
+      ctx.ds.query(query);
+      ctx.$httpBackend.verifyNoOutstandingExpectation();
+    });
+
     it('should be auto interval when greater than min interval', function() {
       var query = {
         // 6 hour range

public/app/plugins/panel/gettingstarted/module.ts

@@ -34,7 +34,7 @@ class GettingStartedPanelCtrl extends PanelCtrl {
       check: () => {
         return $q.when(
           datasourceSrv.getMetricSources().filter(item => {
-            return item.meta.builtIn === false;
+            return item.meta.builtIn !== true;
           }).length > 0
         );
       }

public/app/plugins/panel/graph/series_overrides_ctrl.js

@@ -29,7 +29,7 @@ define([
     $scope.setOverride = function(item, subItem) {
       // handle color overrides
       if (item.propertyName === 'color') {
-        $scope.openColorSelector();
+        $scope.openColorSelector($scope.override['color']);
         return;
       }
 
@@ -52,15 +52,17 @@ define([
       $scope.ctrl.render();
     };
 
-    $scope.openColorSelector = function() {
+    $scope.openColorSelector = function(color) {
+      var fakeSeries = {color: color};
       popoverSrv.show({
         element: $element.find(".dropdown")[0],
         position: 'top center',
         openOn: 'click',
-        template: '<series-color-picker onColorChange="colorSelected" />',
+        template: '<series-color-picker series="series" onColorChange="colorSelected" />',
         model: {
           autoClose: true,
           colorSelected: $scope.colorSelected,
+          series: fakeSeries
         },
         onClose: function() {
           $scope.ctrl.render();

public/app/plugins/panel/heatmap/color_legend.ts

@@ -152,7 +152,7 @@ function drawLegendValues(elem, colorScale, rangeFrom, rangeTo, maxValue, minVal
     .tickSize(2);
 
   let colorRect = legendElem.find(":first-child");
-  let posY = colorRect.height() + 2;
+  let posY = getSvgElemHeight(legendElem) + 2;
   let posX = getSvgElemX(colorRect);
 
   d3.select(legendElem.get(0)).append("g")
@@ -256,7 +256,16 @@ function getOpacityScale(options, maxValue, minValue = 0) {
 function getSvgElemX(elem) {
   let svgElem = elem.get(0);
   if (svgElem && svgElem.x && svgElem.x.baseVal) {
-    return elem.get(0).x.baseVal.value;
+    return svgElem.x.baseVal.value;
+  } else {
+    return 0;
+  }
+}
+
+function getSvgElemHeight(elem) {
+  let svgElem = elem.get(0);
+  if (svgElem && svgElem.height && svgElem.height.baseVal) {
+    return svgElem.height.baseVal.value;
   } else {
     return 0;
   }

public/app/plugins/panel/heatmap/rendering.ts

@@ -71,9 +71,8 @@ export default function link(scope, elem, attrs, ctrl) {
   function getYAxisWidth(elem) {
     let axis_text = elem.selectAll(".axis-y text").nodes();
     let max_text_width = _.max(_.map(axis_text, text => {
-      let el = $(text);
-      // Use JQuery outerWidth() to compute full element width
-      return el.outerWidth();
+      // Use SVG getBBox method
+      return text.getBBox().width;
     }));
 
     return max_text_width;

public/app/plugins/panel/singlestat/module.ts

@@ -66,7 +66,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     thresholds: '',
     colorBackground: false,
     colorValue: false,
-    colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
+    colors: ["#299c46", "rgba(237, 129, 40, 0.89)", "#d44a3a"],
     sparkline: {
       show: false,
       full: false,

public/sass/_variables.dark.scss

@@ -27,8 +27,8 @@ $white:            #fff;
 // -------------------------
 $blue:                  #33B5E5;
 $blue-dark:             #005f81;
-$green:                 #609000;
-$red:                   #CC3900;
+$green:                 #299c46;
+$red:                   #d44a3a;
 $yellow:                #ECBB13;
 $pink:                  #FF4444;
 $purple:                #9933CC;
@@ -130,20 +130,20 @@ $table-border:                $dark-3; // table and cell border
 // Buttons
 // -------------------------
 
-$btn-primary-bg:              $brand-primary;
-$btn-primary-bg-hl:           lighten($brand-primary, 8%);
+$btn-primary-bg:              #ff6600;
+$btn-primary-bg-hl:           #bc3e06;
 
 $btn-secondary-bg:            $blue-dark;
 $btn-secondary-bg-hl:     		lighten($blue-dark, 5%);
 
-$btn-success-bg:              lighten($green, 3%);
-$btn-success-bg-hl:     	    darken($green, 3%);
+$btn-success-bg:              $green;
+$btn-success-bg-hl:     	    darken($green, 6%);
 
 $btn-warning-bg:              $brand-warning;
 $btn-warning-bg-hl:     	    lighten($brand-warning, 8%);
 
 $btn-danger-bg:               $red;
-$btn-danger-bg-hl:            lighten($red, 5%);
+$btn-danger-bg-hl:            darken($red, 8%);
 
 $btn-inverse-bg:              $dark-3;
 $btn-inverse-bg-hl:     	    lighten($dark-3, 4%);

public/sass/_variables.light.scss

@@ -32,8 +32,8 @@ $white:            #fff;
 // -------------------------
 $blue:             	   	#2AB2E4;
 $blue-dark:             #3CAAD6;
-$green:                 #28B62C;
-$red:                   #FF4136;
+$green:                 #3aa655;
+$red:                   #d44939;
 $yellow:                #FF851B;
 $orange:                #Ff7941;
 $pink:                  #E671B8;

public/sass/components/_gf-form.scss

@@ -121,6 +121,7 @@ $gf-form-margin: 0.25rem;
   // text areas should be scrollable
   @at-root textarea#{&} {
     overflow: auto;
+    white-space: pre-wrap;
   }
 
   // Unstyle the caret on `<select>`s in IE10+.

public/sass/components/_panel_graph.scss

@@ -211,15 +211,6 @@
     margin-right: 0px;
     line-height: initial;
   }
-  .close {
-    margin-right: 5px;
-    color: $link-color;
-    opacity: 0.7;
-    text-shadow: none;
-  }
-  .editor-row {
-    padding: 5px;
-  }
 }
 
 .annotation-tags {

public/sass/components/_row.scss

@@ -61,6 +61,7 @@
   margin: 0 $panel-margin $panel-margin*2 $panel-margin;
   padding: $panel-margin*2;
   display: flex;
+  flex-direction: row;
 }
 
 .dash-row-dropview-close {
@@ -71,19 +72,10 @@
   height: 20px;
 }
 
-.add-panel-panels-scroll {
-  width: 100%;
-  overflow: auto;
-  -ms-overflow-style: none;
-
-  &::-webkit-scrollbar {
-    display: none
-  }
-}
-
 .add-panel-panels {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .add-panel-item {

public/vendor/flot/jquery.flot.js

@@ -2962,8 +2962,11 @@ Licensed under the MIT license.
         }
 
         function onClick(e) {
-            triggerClickHoverEvent("plotclick", e,
-                                   function (s) { return s["clickable"] != false; });
+          if (plot.isSelecting) {
+            return;
+          }
+
+          triggerClickHoverEvent("plotclick", e, function (s) { return s["clickable"] != false; });
         }
 
         // trigger click or hover event (they send the same parameters

public/vendor/flot/jquery.flot.selection.js

@@ -152,6 +152,10 @@ The plugin allso adds the following methods to the plot object:
                 plot.getPlaceholder().trigger("plotselecting", [ null ]);
             }
 
+            setTimeout(function() {
+              plot.isSelecting = false;
+            }, 10);
+
             return false;
         }
 
@@ -218,6 +222,7 @@ The plugin allso adds the following methods to the plot object:
 
             setSelectionPos(selection.second, pos);
             if (selectionIsSane()) {
+                plot.isSelecting = true;
                 selection.show = true;
                 plot.triggerRedrawOverlay();
             }

scripts/build/Dockerfile

@@ -21,7 +21,7 @@ RUN gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A170311380
 RUN curl --silent --location https://rpm.nodesource.com/setup_6.x | bash - && \
     yum install -y nodejs --nogpgcheck
 
-ENV GOLANG_VERSION 1.9.1
+ENV GOLANG_VERSION 1.9.2
 
 RUN wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo && \
     yum install -y yarn --nogpgcheck && \