build: added imports of rxjs utility functions

(cherry picked from commit eda3cffe22)

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)
 

package.json

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

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

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) {
+react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
-  return reactDirective(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}
+        <i
-          style={{'color': paletteColor}}
+          key={paletteColor}
-          onClick={this.onColorSelect(paletteColor)}>&nbsp;
+          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 = (
+    const dropContent = <ColorPickerPopover color={this.props.color} onColorSelect={this.onColorSelect} />;
-      <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',
+      classes: 'drop-popover',
-      openOn: 'hover',
+      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 className="sp-preview-inner" style={{ backgroundColor: this.props.color }} />
-          </div>
         </div>
       </div>
     );
   }
 }
 
-coreModule.directive('colorPicker', function (reactDirective) {
+react2AngularDirective('colorPicker', ColorPicker, [
-  return reactDirective(ColorPicker, [
+  'color',
-    'color',
+  ['onChange', { watchDepth: 'reference', wrapApply: true }],
-    ['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;
@@ -50,6 +50,4 @@ export class SeriesColorPicker extends React.Component<IProps, any> {
   }
 }
 
-coreModule.directive('seriesColorPicker', function(reactDirective) {
+react2AngularDirective('seriesColorPicker', SeriesColorPicker, ['series', 'onColorChange', 'onToggleAxis']);
-  return reactDirective(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/utils/file_export.ts

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import moment from 'moment';
-
+import {saveAs} from 'file-saver';
-declare var window: any;
 
 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/plugins/plugin_loader.ts

@@ -9,12 +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 {Observable} from 'rxjs/Observable';
-import {Subject} from 'rxjs/Subject';
 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 builtInPlugins from './buit_in_plugins';
 import d3 from 'vendor/d3/d3';
 
+// rxjs
+import {Observable} from 'rxjs/Observable';
+import {Subject} from 'rxjs/Subject';
+
+// 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',
   defaultExtension: 'js',
@@ -55,18 +66,22 @@ exposeToPlugin('d3', d3);
 
 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 +94,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/sass/_variables.dark.scss

@@ -27,8 +27,8 @@ $white:            #fff;
 // -------------------------
 $blue:                  #33B5E5;
 $blue-dark:             #005f81;
-$green:                 #609000;
+$green:                 #299c46;
-$red:                   #CC3900;
+$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:              #ff6600;
-$btn-primary-bg-hl:           lighten($brand-primary, 8%);
+$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:              $green;
-$btn-success-bg-hl:     	    darken($green, 3%);
+$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;
+$green:                 #3aa655;
-$red:                   #FF4136;
+$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 {