ux: tweaks to add datasource page and datasource settings page

public/app/features/plugins/partials/ds_edit.html

@@ -12,7 +12,7 @@
     <div class="gf-form-group">
       <div class="gf-form-inline">
         <div class="gf-form max-width-30">
-          <span class="gf-form-label width-7">Name</span>
+          <span class="gf-form-label width-10">Name</span>
           <input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
           <info-popover offset="0px -135px" mode="right-absolute">
             The name is used when you select the data source in panels.
@@ -22,13 +22,6 @@
         </div>
         <gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
       </div>
-
-      <div class="gf-form">
-        <span class="gf-form-label width-7">Type</span>
-        <div class="gf-form-select-wrapper max-width-23">
-          <select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.userChangedType()"></select>
-        </div>
-      </div>
     </div>
 
     <div class="grafana-info-box" ng-if="ctrl.datasourceMeta.state === 'alpha'">

public/app/features/plugins/partials/ds_http_settings.html

@@ -1,9 +1,9 @@
 <div class="gf-form-group">
-  <h3 class="page-heading">HTTP</h3>
+	<h3 class="page-heading">HTTP</h3>
   <div class="gf-form-group">
     <div class="gf-form-inline">
       <div class="gf-form max-width-30">
-        <span class="gf-form-label width-7">URL</span>
+        <span class="gf-form-label width-10">URL</span>
         <input class="gf-form-input" type="text"
               ng-model='current.url' placeholder="{{suggestUrl}}"
               bs-typeahead="getSuggestUrls"  min-length="0"
@@ -20,140 +20,128 @@
           </span>
         </info-popover>
       </div>
-    </div>
+		</div>
 
-    <div class="gf-form-inline" ng-if="showAccessOption">
-      <div class="gf-form max-width-30">
-        <span class="gf-form-label width-7">Access</span>
-        <div class="gf-form-select-wrapper max-width-24">
-          <select class="gf-form-input" ng-model="current.access" ng-options="f.key as f.value for f in [{key: 'proxy', value: 'Server (Default)'}, { key: 'direct', value: 'Browser'}]"></select>
-        </div>
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label query-keyword pointer" ng-click="toggleAccessHelp()">
-          Help&nbsp;
-          <i class="fa fa-caret-down" ng-show="showAccessHelp"></i>
-          <i class="fa fa-caret-right" ng-hide="showAccessHelp">&nbsp;</i>
-        </label>
-      </div>
-    </div>
+		<div class="gf-form-inline" ng-if="showAccessOption">
+			<div class="gf-form max-width-30">
+				<span class="gf-form-label width-10">Access</span>
+				<div class="gf-form-select-wrapper max-width-24">
+					<select class="gf-form-input" ng-model="current.access" ng-options="f.key as f.value for f in [{key: 'proxy', value: 'Server (Default)'}, { key: 'direct', value: 'Browser'}]"></select>
+				</div>
+			</div>
+			<div class="gf-form">
+				<label class="gf-form-label query-keyword pointer" ng-click="toggleAccessHelp()">
+					Help&nbsp;
+					<i class="fa fa-caret-down" ng-show="showAccessHelp"></i>
+					<i class="fa fa-caret-right" ng-hide="showAccessHelp">&nbsp;</i>
+				</label>
+			</div>
+		</div>
 
-    <div class="alert alert-info" ng-show="showAccessHelp">
-      <div class="alert-body">
-        <p>
-          Access mode controls how requests to the data source will be handled.
-          <strong><i>Server</i></strong> should be the preferred way if nothing else stated.
-        </p>
-        <div class="alert-title">Server access mode (Default):</div>
-        <p>
-          All requests will be made from the browser to Grafana backend/server which in turn will forward the requests to the data source
-          and by that circumvent possible Cross-Origin Resource Sharing (CORS) requirements.
-          The URL needs to be accessible from the grafana backend/server if you select this access mode.
-        </p>
-        <div class="alert-title">Browser access mode:</div>
-        <p>
-          All requests will be made from the browser directly to the data source and may be subject to
-          Cross-Origin Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this
-          access mode.
-        </p>
-      </div>
-    </div>
-  </div>
+		<div class="grafana-info-box m-t-2" ng-show="showAccessHelp">
+			<p>
+			Access mode controls how requests to the data source will be handled.
+			<strong><i>Server</i></strong> should be the preferred way if nothing else stated.
+			</p>
+			<div class="alert-title">Server access mode (Default):</div>
+			<p>
+			All requests will be made from the browser to Grafana backend/server which in turn will forward the requests to the data source
+			and by that circumvent possible Cross-Origin Resource Sharing (CORS) requirements.
+			The URL needs to be accessible from the grafana backend/server if you select this access mode.
+			</p>
+			<div class="alert-title">Browser access mode:</div>
+			<p>
+			All requests will be made from the browser directly to the data source and may be subject to
+			Cross-Origin Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this
+			access mode.
+		</div>
 
-  <h3 class="page-heading">Auth</h3>
-  <div class="gf-form-group">
-    <div class="gf-form-inline">
-      <gf-form-switch class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-8" switch-class="max-width-6"></gf-form-switch>
-      <gf-form-switch class="gf-form" label="With Credentials" tooltip="Whether credentials such as cookies or auth headers should be sent with cross-site requests." checked="current.withCredentials" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
-    </div>
-    <div class="gf-form-inline">
-      <gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="TLS Client Auth" label-class="width-8" checked="current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-switch>
-      <gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="With CA Cert" tooltip="Needed for verifing self-signed TLS Certs" checked="current.jsonData.tlsAuthWithCACert" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
-    </div>
-  </div>
+		<div class="gf-form-inline" ng-if="current.access=='proxy'">
+			<div class="gf-form">
+				<span class="gf-form-label width-10">Whitelisted Cookies</span>
+				<bootstrap-tagsinput ng-model="current.jsonData.keepCookies" width-class="width-20" tagclass="label label-tag" placeholder="Add Name">
+				</bootstrap-tagsinput>
+				<info-popover mode="right-absolute">
+					Grafana Proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.
+				</info-popover>
+			</div>
+		</div>
+	</div>
 
-  <div class="gf-form-inline">
-    <gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="Skip TLS Verification (Insecure)" label-class="width-16" checked="current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-switch>
-  </div>
-</div>
+	<h3 class="page-heading">Auth</h3>
+	<div class="gf-form-group">
+		<div class="gf-form-inline">
+			<gf-form-switch class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-9" switch-class="max-width-6"></gf-form-switch>
+			<gf-form-switch class="gf-form" label="With Credentials" tooltip="Whether credentials such as cookies or auth headers should be sent with cross-site requests." checked="current.withCredentials" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
+		</div>
+		<div class="gf-form-inline">
+			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="TLS Client Auth" label-class="width-9" checked="current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-switch>
+			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="With CA Cert" tooltip="Needed for verifing self-signed TLS Certs" checked="current.jsonData.tlsAuthWithCACert" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
+		</div>
+		<div class="gf-form-inline">
+			<gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="Skip TLS Verify" label-class="width-9" checked="current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-switch>
+		</div>
+	</div>
 
-<div class="gf-form-group" ng-if="current.basicAuth">
-  <h6>Basic Auth Details</h6>
-  <div class="gf-form" ng-if="current.basicAuth">
-    <span class="gf-form-label width-7">
-      User
-    </span>
-    <input class="gf-form-input max-width-21" type="text"  ng-model='current.basicAuthUser' placeholder="user" required></input>
-  </div>
+	<div class="gf-form-group" ng-if="current.basicAuth">
+		<h6>Basic Auth Details</h6>
+		<div class="gf-form" ng-if="current.basicAuth">
+			<span class="gf-form-label width-10">User</span>
+			<input class="gf-form-input max-width-21" type="text"  ng-model='current.basicAuthUser' placeholder="user" required></input>
+		</div>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Password</span>
+			<input class="gf-form-input max-width-21" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
+		</div>
+	</div>
 
-  <div class="gf-form">
-    <span class="gf-form-label width-7">
-      Password
-    </span>
-    <input class="gf-form-input max-width-21" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
-  </div>
-</div>
+	<div class="gf-form-group" ng-if="(current.jsonData.tlsAuth || current.jsonData.tlsAuthWithCACert) && current.access=='proxy'">
+		<div class="gf-form">
+			<h6>TLS Auth Details</h6>
+			<info-popover mode="header">TLS Certs are encrypted and stored in the Grafana database.</info-popover>
+		</div>
+		<div ng-if="current.jsonData.tlsAuthWithCACert">
+			<div class="gf-form-inline">
+				<div class="gf-form gf-form--v-stretch">
+					<label class="gf-form-label width-7">CA Cert</label>
+				</div>
+				<div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsCACert">
+					<textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="current.secureJsonData.tlsCACert" placeholder="Begins with -----BEGIN CERTIFICATE-----"></textarea>
+				</div>
 
-<div class="gf-form-group" ng-if="(current.jsonData.tlsAuth || current.jsonData.tlsAuthWithCACert) && current.access=='proxy'">
-  <div class="gf-form">
-    <h6>TLS Auth Details</h6>
-    <info-popover mode="header">TLS Certs are encrypted and stored in the Grafana database.</info-popover>
-  </div>
-  <div ng-if="current.jsonData.tlsAuthWithCACert">
-    <div class="gf-form-inline">
-      <div class="gf-form gf-form--v-stretch">
-        <label class="gf-form-label width-7">CA Cert</label>
-      </div>
-      <div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsCACert">
-        <textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="current.secureJsonData.tlsCACert" placeholder="Begins with -----BEGIN CERTIFICATE-----"></textarea>
-      </div>
+				<div class="gf-form" ng-if="current.secureJsonFields.tlsCACert">
+					<input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured">
+					<a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsCACert = false">reset</a>
+				</div>
+			</div>
+		</div>
 
-      <div class="gf-form" ng-if="current.secureJsonFields.tlsCACert">
-        <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured">
-        <a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsCACert = false">reset</a>
-      </div>
-    </div>
-  </div>
-
-  <div ng-if="current.jsonData.tlsAuth">
-    <div class="gf-form-inline">
-      <div class="gf-form gf-form--v-stretch">
-        <label class="gf-form-label width-7">Client Cert</label>
-      </div>
-      <div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsClientCert">
-        <textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="current.secureJsonData.tlsClientCert" placeholder="Begins with -----BEGIN CERTIFICATE-----" required></textarea>
-      </div>
-      <div class="gf-form" ng-if="current.secureJsonFields.tlsClientCert">
-        <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured">
-        <a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsClientCert = false">reset</a>
-      </div>
-    </div>
+		<div ng-if="current.jsonData.tlsAuth">
+		<div class="gf-form-inline">
+			<div class="gf-form gf-form--v-stretch">
+				<label class="gf-form-label width-7">Client Cert</label>
+			</div>
+			<div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsClientCert">
+				<textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="current.secureJsonData.tlsClientCert" placeholder="Begins with -----BEGIN CERTIFICATE-----" required></textarea>
+			</div>
+			<div class="gf-form" ng-if="current.secureJsonFields.tlsClientCert">
+				<input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured">
+				<a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsClientCert = false">reset</a>
+			</div>
+		</div>
 
-    <div class="gf-form-inline">
-      <div class="gf-form gf-form--v-stretch">
-        <label class="gf-form-label width-7">Client Key</label>
-      </div>
-      <div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsClientKey">
-        <textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="current.secureJsonData.tlsClientKey" placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----" required></textarea>
-      </div>
-      <div class="gf-form" ng-if="current.secureJsonFields.tlsClientKey">
-        <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured">
-        <a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsClientKey = false">reset</a>
-      </div>
-    </div>
-  </div>
+		<div class="gf-form-inline">
+			<div class="gf-form gf-form--v-stretch">
+				<label class="gf-form-label width-7">Client Key</label>
+			</div>
+			<div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsClientKey">
+				<textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="current.secureJsonData.tlsClientKey" placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----" required></textarea>
+			</div>
+			<div class="gf-form" ng-if="current.secureJsonFields.tlsClientKey">
+				<input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured">
+				<a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsClientKey = false">reset</a>
+			</div>
+		</div>
+	</div>
 </div>
 
-<h3 class="page-heading" ng-if="current.access=='proxy'">Advanced HTTP Settings</h3>
-<div class="gf-form-group" ng-if="current.access=='proxy'">
-  <div class="gf-form-inline">
-    <div class="gf-form">
-      <span class="gf-form-label width-10">Whitelisted Cookies</span>
-      <bootstrap-tagsinput ng-model="current.jsonData.keepCookies" tagclass="label label-tag" placeholder="Add Name">
-      </bootstrap-tagsinput>
-      <info-popover mode="right-absolute">
-        Grafana Proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.
-      </info-popover>
-    </div>
-  </div>
-</div>

public/sass/_variables.dark.scss

@@ -120,7 +120,7 @@ $code-tag-border: lighten($code-tag-bg, 2%);
 
 // cards
 $card-background: linear-gradient(135deg, #2f2f32, #262628);
-$card-background-hover: linear-gradient(135deg, #343436, #262628);
+$card-background-hover: linear-gradient(135deg, $dark-3, $dark-2);
 $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
 
 // Lists

public/sass/components/_add_data_source.scss

@@ -1,5 +1,6 @@
 .add-data-source-header {
-  margin-bottom: $panel-margin * 4;
+  margin-bottom: $spacer * 2;
+  padding-top: $spacer;
   text-align: center;
 }