ux: dashboard settings progress

public/app/core/components/EmptyListCTA/EmptyListCTA.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react';
 
 export interface IProps {
     model: any;
@@ -17,7 +17,7 @@ class EmptyListCTA extends Component<IProps, any> {
             proTipTarget
         } = this.props.model;
         return (
-            <div className="empty-list-cta p-t-2 p-b-1">
+            <div className="empty-list-cta">
                 <div className="empty-list-cta__title">{title}</div>
                 <a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success"><i className={buttonIcon} />{buttonTitle}</a>
                 <div className="empty-list-cta__pro-tip">

public/app/features/dashboard/settings/settings.ts

@@ -11,7 +11,7 @@ export class SettingsCtrl {
   sections: any[] = [
     {title: 'General',     id: 'settings', icon: "fa fa-fw fa-sliders"},
     {title: 'Annotations', id: 'annotations', icon: "fa fa-fw fa-comment-o"},
-    {title: 'Templating',  id: 'templating', icon: "fa fa-fw fa-dollar"},
+    {title: 'Variables',   id: 'templating', icon: "fa fa-fw fa-dollar"},
     {title: 'Links',       id: 'links', icon: "fa fa-fw fa-external-link"},
     {title: 'Versions',    id: 'versions', icon: "fa fa-fw fa-history"},
     {title: 'View JSON',   id: 'view_json', icon: "fa fa-fw fa-code"},

public/app/features/templating/partials/editor.html

@@ -1,64 +1,71 @@
-<h3 class="dashboard-settings__header">Templating</h3>
+<h3 class="dashboard-settings__header">Variables</h3>
 
 <div ng-controller="VariableEditorCtrl" ng-init="init()">
 	<div ng-if="mode === 'list'">
+
 		<div ng-if="variables.length === 0">
-			<em>No template variables defined</em>
-			<br /> <br />
-		</div>
-		<table class="filter-table filter-table--hover">
-			<thead>
-				<tr>
-					<th>Variable</th>
-					<th>Definition</th>
-					<th colspan="5"></th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr ng-repeat="variable in variables">
-					<td style="width: 1%">
-						<span ng-click="edit(variable)" class="pointer template-variable">
-							${{variable.name}}
-						</span>
-					</td>
-					<td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width">
-						{{variable.query}}
-					</td>
+			<div class="empty-list-cta">
+				<div class="empty-list-cta__title">There are no template variables added yet</div>
+				<a ng-click="mode = 'new';" class="empty-list-cta__button btn btn-xlarge btn-success">
+					<i class="gicon gicon-dashboard-new"></i>
+					Add variable
+				</a>
+				<div class="grafana-info-box">
+					<h5>
+						What does variables do?
+					</h5>
+					<p>Variables enables more interactive and dynamic dashboards. Instead of hard-coding things like server or sensor names
+					in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of
+					the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
 
-					<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
-					<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
-					<td style="width: 1%">
-						<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
-							Duplicate
-						</a>
-					</td>
-					<td style="width: 1%">
-						<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
-							<i class="fa fa-remove"></i>
-						</a>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
+					Checkout the
+					<a class="external-link" href="http://docs.grafana.org/reference/templating/" target="_blank">
+						Templating documentation
+					</a> for more information.
+				</div>
+			</div>
+		</div>
 
-	<div ng-show="mode === 'help'">
-		<div class="grafana-info-box col-lg-8">
-			<h5>What does templating do?</h5>
-			<p>Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application
-			and sensor name in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of
-			the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
-			<br>
-			<br>
+		<div ng-if="variables.length">
+			<div class="page-action-bar">
+				<div class="page-action-bar__spacer"></div>
+				<a type="button" class="btn btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i> New</a>
+			</div>
 
-			Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/templating/">Templating documentation</a> for more information.
-			</p>
-		</div>
-	</div>
+			<table class="filter-table filter-table--hover">
+				<thead>
+					<tr>
+						<th>Variable</th>
+						<th>Definition</th>
+						<th colspan="5"></th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr ng-repeat="variable in variables">
+						<td style="width: 1%">
+							<span ng-click="edit(variable)" class="pointer template-variable">
+								${{variable.name}}
+							</span>
+						</td>
+						<td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width">
+							{{variable.query}}
+						</td>
 
-	<div class="gf-form" ng-show="mode === 'list'">
-		<div class="gf-form-button-row">
-			<a type="button" class="btn gf-form-button btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a>
+						<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
+						<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
+						<td style="width: 1%">
+							<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
+								Duplicate
+							</a>
+						</td>
+						<td style="width: 1%">
+							<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
+								<i class="fa fa-remove"></i>
+							</a>
+						</td>
+					</tr>
+				</tbody>
+			</table>
 		</div>
 	</div>
 

public/sass/components/_empty_list_cta.scss

@@ -1,21 +1,23 @@
-.empty-list-cta {
-    background-color: $search-filter-box-bg;
-    text-align: center;
+.empty-list-cta {
+  background-color: $search-filter-box-bg;
+  text-align: center;
+  padding: 2rem 2rem 1rem 2rem;
+  border-radius: $border-radius;
 }
 
 .empty-list-cta__title {
-    padding-bottom: 30px;
-    font-style: italic;
+  padding-bottom: 30px;
+  font-style: italic;
 }
 
 .empty-list-cta__button {
-    margin-bottom: 50px;
+  margin-bottom: 50px;
 }
 
 .empty-list-cta__pro-tip {
-    padding-bottom: 20px;
+  padding-bottom: 1rem;
 }
 
 .empty-list-cta__pro-tip-link {
-    margin-left: 5px;
-}
+  margin-left: 5px;
+}

public/sass/components/_infobox.scss

@@ -1,13 +1,3 @@
-// .grafana-info-box::before {
-//   content: "\f05a";
-//   font-family:'FontAwesome';
-//   position: absolute;
-//   top: -13px;
-//   left: -8px;
-//   font-size: 20px;
-//   color: $text-color;
-// }
-
 .grafana-info-box {
   position: relative;
   background: $info-box-background;

public/sass/components/_navbar.scss

@@ -2,9 +2,7 @@
 .navbar {
   position: relative;
   padding-left: $side-menu-width;
-  // box-shadow: $navbarShadow;
   z-index: $zindex-navbar-fixed;
-  // background: $navbarBackground;
   height: $navbarHeight;
   padding-right: $spacer;
   display: flex;