Merge branch 'develop' of github.com:grafana/grafana into develop

public/app/features/dashboard/dashgrid/TimeRangeOptions.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { Switch } from 'app/core/components/Switch/Switch';
 import { Input } from 'app/core/components/Form';
 import { isValidTimeSpan } from 'app/core/utils/rangeutil';
@@ -64,12 +64,7 @@ export class TimeRangeOptions extends PureComponent<Props> {
 
         <div className="gf-form-group">
           <div className="gf-form">
-            <span className="gf-form-label">
-              <i className="fa fa-clock-o" />
-            </span>
-
             <span className="gf-form-label width-12">Override relative time</span>
-            <span className="gf-form-label width-6">Last</span>
             <Input
               type="text"
               className="gf-form-input max-width-8"
@@ -81,11 +76,7 @@ export class TimeRangeOptions extends PureComponent<Props> {
           </div>
 
           <div className="gf-form">
-            <span className="gf-form-label">
-              <i className="fa fa-clock-o" />
-            </span>
             <span className="gf-form-label width-12">Add time shift</span>
-            <span className="gf-form-label width-6">Amount</span>
             <Input
               type="text"
               className="gf-form-input max-width-8"
@@ -97,11 +88,6 @@ export class TimeRangeOptions extends PureComponent<Props> {
           </div>
 
           <div className="gf-form-inline">
-            <div className="gf-form">
-              <span className="gf-form-label">
-                <i className="fa fa-clock-o" />
-              </span>
-            </div>
             <Switch label="Hide time override info" checked={hideTimeOverride} onChange={this.onToggleTimeOverride} />
           </div>
         </div>

public/app/features/panel/panel_editor_tab.ts

@@ -12,7 +12,12 @@ function panelEditorTab(dynamicDirectiveSrv) {
     },
     directive: scope => {
       const pluginId = scope.ctrl.pluginId;
-      const tabName = scope.editorTab.title.toLowerCase().replace(' ', '-');
+      const tabName = scope.editorTab.title
+        .toLowerCase()
+        .replace(' ', '-')
+        .replace('&', '')
+        .replace(' ', '')
+        .replace(' ', '-');
 
       if (directiveCache[pluginId]) {
         if (directiveCache[pluginId][tabName]) {

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

@@ -138,6 +138,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.addEditorTab('Display options', 'public/app/plugins/panel/graph/tab_display.html');
     this.addEditorTab('Axes', axesEditorComponent);
     this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html');
+    this.addEditorTab('Thresholds & Time Regions', 'public/app/plugins/panel/graph/tab_thresholds_time_regions.html');
     this.subTabIndex = 0;
   }
 

public/app/plugins/panel/graph/tab_display.html

@@ -1,28 +1,5 @@
-<div class="edit-tab-with-sidemenu">
-	<aside class="edit-sidemenu-aside">
-		<ul class="edit-sidemenu">
-			<li ng-class="{active: ctrl.subTabIndex === 0}">
-				<a ng-click="ctrl.subTabIndex = 0">Draw options</a>
-			</li>
-			<li ng-class="{active: ctrl.subTabIndex === 1}">
-				<a ng-click="ctrl.subTabIndex = 1">
-					Series overrides <span class="muted">({{ctrl.panel.seriesOverrides.length}})</span>
-				</a>
-			</li>
-			<li ng-class="{active: ctrl.subTabIndex === 2}">
-				<a ng-click="ctrl.subTabIndex = 2">
-					Thresholds <span class="muted">({{ctrl.panel.thresholds.length}})</span>
-				</a>
-			</li>
-			<li ng-class="{active: ctrl.subTabIndex === 3}">
-				<a ng-click="ctrl.subTabIndex = 3">
-					Time regions <span class="muted">({{ctrl.panel.timeRegions.length}})</span>
-				</a>
-			</li>
-		</ul>
-	</aside>
 
-	<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 0">
+	<div class="editor-row">
 		<div class="section gf-form-group">
 			<h5 class="section-heading">Draw Modes</h5>
 			<gf-form-switch class="gf-form" label="Bars" label-class="width-5" checked="ctrl.panel.bars" on-change="ctrl.render()"></gf-form-switch>
@@ -89,9 +66,7 @@
 		</div>
 	</div>
 
-	<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 1">
 		<div class="gf-form-group">
-			<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
 			<div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
 				<div class="gf-form">
 					<label class="gf-form-label">alias or regex</label>
@@ -110,35 +85,26 @@
 						</span>
 					</label>
 				</div>
-
+	
 				<div class="gf-form">
 					<span class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
 					</span>
 				</div>
-
+	
 				<div class="gf-form gf-form--grow">
 					<div class="gf-form-label gf-form-label--grow"></div>
 				</div>
-
+	
 				<div class="gf-form">
 					<label class="gf-form-label">
 						<i class="fa fa-trash pointer" ng-click="ctrl.removeSeriesOverride(override)"></i>
 					</label>
 				</div>
 			</div>
+			<div class="gf-form-button-row">
+				<button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
+					<i class="fa fa-plus"></i>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
+				</button>
+			</div>
 		</div>
 
-		<button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
-			<i class="fa fa-plus"></i>&nbsp;Add override
-		</button>
-	</div>
-
-	<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 2">
-		<graph-threshold-form panel-ctrl="ctrl"></graph-threshold-form>
-	</div>
-
-	<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 3">
-		<graph-time-region-form panel-ctrl="ctrl"></graph-time-region-form>
-	</div>
-
-</div>

public/app/plugins/panel/graph/tab_thresholds_time_regions.html

@@ -0,0 +1,2 @@
+<graph-threshold-form panel-ctrl="ctrl"></graph-threshold-form>
+<graph-time-region-form panel-ctrl="ctrl"></graph-time-region-form>

public/app/plugins/panel/graph/thresholds_form.html

@@ -1,5 +1,4 @@
 <div class="gf-form-group">
-  <h5>Thresholds</h5>
   <p class="muted" ng-show="ctrl.disabled">
     Visual thresholds options <strong>disabled.</strong>
     Visit the Alert tab update your thresholds. <br>

public/app/plugins/panel/graph/time_regions_form.html

@@ -1,5 +1,4 @@
 <div class="gf-form-group">
-  <h5>Time regions <tip>All configured time regions refers to UTC time</tip></h5>
   <div class="gf-form-inline" ng-repeat="timeRegion in ctrl.panel.timeRegions">
     <div class="gf-form">
       <label class="gf-form-label">T{{$index+1}}</label>
@@ -58,7 +57,7 @@
 
   <div class="gf-form-button-row">
     <button class="btn btn-inverse" ng-click="ctrl.addTimeRegion()">
-      <i class="fa fa-plus"></i>&nbsp;Add time region
+      <i class="fa fa-plus"></i>&nbsp;Add time region<tip>All configured time regions refers to UTC time</tip>
     </button>
   </div>
 </div>

public/sass/_variables.light.scss

@@ -62,7 +62,7 @@ $critical: #ec2128;
 // -------------------------
 
 $body-bg: $gray-7;
-$page-bg: $gray-6;
+$page-bg: $gray-7;
 $body-color: $gray-1;
 $text-color: $gray-1;
 $text-color-strong: $dark-2;
@@ -402,6 +402,6 @@ $panel-grid-placeholder-shadow: 0 0 4px $blue-light;
 $logs-color-unkown: $gray-5;
 
 // toggle-group
-$button-toggle-group-btn-active-bg: linear-gradient(90deg, $yellow, $red);
-$button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
+$button-toggle-group-btn-active-bg: $brand-primary;
+$button-toggle-group-btn-active-shadow: inset 0 0 4px $white;
 $button-toggle-group-btn-seperator-border: 1px solid $gray-6;

public/sass/components/_toggle_button_group.scss

@@ -8,13 +8,13 @@
     font-weight: $font-weight-semi-bold;
     font-size: $font-size-sm;
     border-radius: 0;
-    color: $text-color;
     border-right: $button-toggle-group-btn-seperator-border;
 
     &.active {
       background: $button-toggle-group-btn-active-bg;
       box-shadow: $button-toggle-group-btn-active-shadow;
       border-right: 0;
+      color: $white;
 
       &:hover {
         cursor: default;