Fixed so white theme looks good with new search and editor panes, Closes #735, and other small fixes and polish

src/app/controllers/dashboardCtrl.js

@@ -57,6 +57,8 @@ function (angular, $, config, _) {
       $scope.checkFeatureToggles();
       dashboardKeybindings.shortcuts($scope);
 
+      $scope.setWindowTitleAndTheme();
+
       $scope.emitAppEvent("dashboard-loaded", $scope.dashboard);
     };
 

src/app/panels/graph/styleEditor.html

@@ -69,14 +69,11 @@
 		<div>
 			<div class="grafana-target" ng-repeat="override in panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
 				<div class="grafana-target-inner">
-
-					<ul class="grafana-target-controls-left">
+					<ul class="grafana-segment-list">
 						<li class="grafana-target-segment">
 							<i class="icon-remove pointer" ng-click="removeSeriesOverride(override)"></i>
 						</li>
-					</ul>
 
-					<ul class="grafana-segment-list">
 						<li class="grafana-target-segment">
 							alias or regex
 						</li>

src/app/partials/search.html

@@ -32,6 +32,8 @@
 	<div ng-if="!showImport">
 		<h6 ng-hide="results.dashboards.length">No dashboards matching your query were found.</h6>
 		<div class="search-results-container" ng-if="tagsOnly">
+			<div class="row">
+				<div class="span6 offset1">
 			<div ng-repeat="tag in results.tags" class="pointer" style="width: 180px; float: left;"
 				ng-class="{'selected': $index === selectedIndex }"
 				ng-click="filterByTag(tag.term, $event)">
@@ -40,6 +42,8 @@
 					<span>{{tag.term}} &nbsp;({{tag.count}})</span>
 				</a>
 			</div>
+			</div>
+			</div>
 		</div>
 
 		<div class="search-results-container" ng-if="!tagsOnly">

src/app/partials/submenu.html

@@ -1,49 +1,47 @@
 <div class="submenu-controls" ng-controller="SubmenuCtrl">
 		<div class="grafana-target">
-			<div class="grafana-target-inner-wrapper">
-				<div class="grafana-target-inner">
+			<div class="grafana-target-inner" style="border-top: none">
 
-					<ul class="grafana-segment-list">
-						<li class="grafana-target-segment">
-							<div class="dropdown">
-								<a class="pointer" data-toggle="dropdown">
-									<i class="icon-cog"></i>
-								</a>
-								<ul class="dropdown-menu">
-									<li><a class="pointer" dash-editor-link="app/partials/templating_editor.html">Templating</a></li>
-									<li><a class="pointer" dash-editor-link="app/partials/annotations_editor.html">Annotations</a></li>
-								</ul>
-							</div>
-						</li>
-					</ul>
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment">
+						<div class="dropdown">
+							<a class="pointer" data-toggle="dropdown">
+								<i class="icon-cog"></i>
+							</a>
+							<ul class="dropdown-menu">
+								<li><a class="pointer" dash-editor-link="app/partials/templating_editor.html">Templating</a></li>
+								<li><a class="pointer" dash-editor-link="app/partials/annotations_editor.html">Annotations</a></li>
+							</ul>
+						</div>
+					</li>
+				</ul>
 
-					<ul class="grafana-segment-list" ng-if="dashboard.templating.enable">
-						<li class="small grafana-target-segment">
-							<strong>VARIABLES</strong>
-						</li>
-						<li ng-repeat-start="variable in variables" class="grafana-target-segment template-param-name">
-							{{variable.name}}:
-						</li>
+				<ul class="grafana-segment-list" ng-if="dashboard.templating.enable">
+					<li class="small grafana-target-segment">
+						<strong>VARIABLES</strong>
+					</li>
+					<li ng-repeat-start="variable in variables" class="grafana-target-segment template-param-name">
+						{{variable.name}}:
+					</li>
 
-						<li ng-repeat-end template-param-selector>
-						</li>
-					</ul>
+					<li ng-repeat-end template-param-selector>
+					</li>
+				</ul>
 
-					<ul class="grafana-segment-list" ng-if="dashboard.annotations.enable">
-						<li class="small grafana-target-segment">
-							<strong>ANNOTATIONS</strong>
-						</li>
+				<ul class="grafana-segment-list" ng-if="dashboard.annotations.enable">
+					<li class="small grafana-target-segment">
+						<strong>ANNOTATIONS</strong>
+					</li>
 
-						<li ng-repeat="annotation in dashboard.annotations.list" class="grafana-target-segment annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
-							<a ng-click="disableAnnotation(annotation)">
-								<i class="annotation-color-icon icon-bolt"></i>
-								{{annotation.name}}
-							</a>
-						</li>
-					</ul>
+					<li ng-repeat="annotation in dashboard.annotations.list" class="grafana-target-segment annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
+						<a ng-click="disableAnnotation(annotation)">
+							<i class="annotation-color-icon icon-bolt"></i>
+							{{annotation.name}}
+						</a>
+					</li>
+				</ul>
 
-					<div class="clearfix"></div>
-				</div>
+				<div class="clearfix"></div>
 			</div>
 		</div>
 	</div>

src/app/services/templateValuesSrv.js

@@ -120,10 +120,8 @@ function (angular, _, kbn) {
         break;
       default:
         allValue = '{';
-        _.each(variable.options, function(option) {
-          allValue += option.text + ',';
-        });
-        allValue = allValue.substring(0, allValue.length - 1) + '}';
+        allValue += _.pluck(variable.options, 'text').join(',');
+        allValue += '}';
       }
 
       variable.options.unshift({text: 'All', value: allValue});

src/css/less/bootswatch.light.less

@@ -159,8 +159,9 @@ div.subnav {
 	li.active > a,
 	li.active > a:hover {
 		border-color: transparent;
-		background-color: @blue;
-		color: @white;
+	  background-color: transparent;
+		border-bottom: 2px solid @blue;
+		color: @blue
 	}
 
 	li.disabled > a {

src/css/less/grafana.less

@@ -334,23 +334,22 @@ select.grafana-target-segment-input {
 ::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; }
 ::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; }
 ::-webkit-scrollbar-button:vertical:increment:active {background-image: none; }
-
-::-webkit-scrollbar-track-piece { background-color: grayDark; }
+::-webkit-scrollbar-track-piece { background-color: transparent; }
 
 ::-webkit-scrollbar-thumb:vertical {
   height: 50px;
-  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #3a3a3a), color-stop(100%, #222222));
-  border: 1px solid #0d0d0d;
-  border-top: 1px solid #666666;
-  border-left: 1px solid #666666;
+  background: -webkit-gradient(linear, left top, right top, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2));
+  border: 1px solid @scrollbarBorder;
+  border-top: 1px solid @scrollbarBorder;
+  border-left: 1px solid @scrollbarBorder;
 }
 
 ::-webkit-scrollbar-thumb:horizontal {
   width: 50px;
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3a3a3a), color-stop(100%, #222222));
-  border: 1px solid #1f1f1f;
-  border-top: 1px solid #666666;
-  border-left: 1px solid #666666;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2));
+  border: 1px solid @scrollbarBorder;
+  border-top: 1px solid @scrollbarBorder;
+  border-left: 1px solid @scrollbarBorder;
 }
 
 

src/css/less/search.less

@@ -44,7 +44,7 @@
   }
 
   .search-result-item:nth-child(odd) {
-    background-color: lighten(@grayDarker, 2%);
+    background-color: @grafanaListAccent;
   }
 
   .search-result-item {

src/css/less/tables_lists.less

@@ -2,7 +2,7 @@
   width: 100%;
 
   tr:nth-child(odd) td {
-    background-color: lighten(@grayDarker, 2%);
+    background-color: @grafanaListAccent;
   }
 
   td {
@@ -39,7 +39,7 @@
   max-width: 450px;
 
   li:nth-child(odd) {
-    background-color: lighten(@grayDarker, 2%);
+    background-color: @grafanaListAccent;
   }
 
   li {

src/css/less/variables.dark.less

@@ -88,13 +88,18 @@
 
 // Lists
 @grafanaListBackground:  transparent;
-@grafanaListAccent:         @grayDark;
+@grafanaListAccent:      lighten(@grayDarker, 2%);
 @grafanaListBorderTop:      @grayDark;
 @grafanaListBorderBottom:   @black;
 @grafanaListHighlight:      @blue;
 @grafanaListHighlightContrast: #4F4F4F;
 @grafanaListMainLinkColor: @linkColor;
 
+// Scrollbars
+@scrollbarBackground: #3a3a3a;
+@scrollbarBackground2: #3a3a3a;
+@scrollbarBorder: black;
+
 // Tables
 // -------------------------
 @tableBackground:                   transparent; // overall background-color

src/css/less/variables.light.less

@@ -38,7 +38,7 @@
 @submenuBorder:         @white;
 
 // Tabs
-@fullEditBorder:          @white;
+@fullEditBorder:          @grayLighter;
 
 // Graphite Target Editor
 @grafanaTargetBorder:         @submenuBackground;
@@ -96,7 +96,7 @@
 
 // Lists
 @grafanaListBackground:  transparent;
-@grafanaListAccent:         #f9f9f9;
+@grafanaListAccent:         @grayLighter;
 @grafanaListBorderTop:      #eee;
 @grafanaListBorderBottom:   #efefef;
 @grafanaListHighlight:      @blue;
@@ -111,6 +111,11 @@
 @tableBackgroundHover:              #E8F8FD; // for hover
 @tableBorder:                       #ddd; // table and cell border
 
+// Scrollbars
+@scrollbarBackground: @grayLighter;
+@scrollbarBackground2: @grayLighter;
+@scrollbarBorder: @grayLight;
+
 // Buttons
 // -------------------------
 @btnBackground:                     @grayLighter;
@@ -186,7 +191,7 @@
 
 // Input placeholder text color
 // -------------------------
-@placeholderText:         @gray;
+@placeholderText:         @grayLight;
 
 
 // Hr border color

src/test/specs/templateValuesSrv-specs.js

@@ -208,7 +208,16 @@ define([
       });
     });
 
+    describeUpdateVariable('with include all glob no values', function(ctx) {
+      ctx.setup(function() {
+        ctx.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allFormat: 'glob' };
+        ctx.queryResult = [];
+      });
 
+      it('should add empty glob', function() {
+        expect(ctx.variable.options[0].value).to.be('{}');
+      });
+    });
 
   });