Merge branch 'master' of github.com:torkelo/grafana-private into pro

CHANGELOG.md

@@ -12,6 +12,7 @@
 **Fixes**
 - [Issue #1298](https://github.com/grafana/grafana/issues/1298). InfluxDB: Fix handling of empty array in templating variable query
 - [Issue #1309](https://github.com/grafana/grafana/issues/1309). Graph: Fixed issue when using zero as a grid threshold
+- [Issue #1345](https://github.com/grafana/grafana/issues/1345). UI: Fixed position of confirm modal when scrolled down
 
 **Tech**
 - [Issue #1311](https://github.com/grafana/grafana/issues/1311). Tech: Updated Font-Awesome from 3.2 to 4.2

sample/apache_ldap.conf

@@ -1,61 +0,0 @@
-# Courtesy of https://github.com/sgzijl
-# config.js includes elasticsearch:    "https://"+window.location.hostname+":443",
-
-<VirtualHost 1.2.3.4:80>
-  ServerName your.domain.tld
-  RewriteEngine On
-  RewriteCond %{HTTPS} off
-  RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} 
-</VirtualHost>
- 
-<VirtualHost 1.2.3.4:443>
-  ServerName your.domain.tld
- 
-  SSLEngine on
-  SSLCertificateFile      /path/to/public.crt
-  SSLCertificateKeyFile   /path/to/private.key
- 
-  DocumentRoot /path/to/kibana3
-  <Directory /path/to/kibana3>
-    Allow from all
-    Options -Multiviews
-  </Directory>
- 
-  LogLevel debug
-  ErrorLog /path/to/logs/error_log
-  CustomLog /path/to/logs/access_log combined
- 
-  # Set global proxy timeouts
-  <Proxy http://127.0.0.1:9200>
-    ProxySet connectiontimeout=5 timeout=90
-  </Proxy>
- 
-  # Proxy for _aliases and .*/_search
-  <LocationMatch "^/(_nodes|_aliases|_search|.*/_search|_mapping|.*/_mapping)$">
-    ProxyPassMatch http://127.0.0.1:9200/$1
-    ProxyPassReverse http://127.0.0.1:9200/$1
-  </LocationMatch>
-
-  # Proxy for kibana-int/{dashboard,temp} stuff (if you don't want auth on /, then you will want these to be protected)
-  <LocationMatch "^/(kibana-int/dashboard/|kibana-int/temp)(.*)$">
-    ProxyPassMatch http://127.0.0.1:9200/$1$2
-    ProxyPassReverse http://127.0.0.1:9200/$1$2
-  </LocationMatch>
- 
-  # Optional disable auth for a src IP (eg: your monitoring host or subnet)
-  <Location />
-    Allow from 5.6.7.8
-    Deny from all
-    Satisfy any
- 
-    AuthLDAPBindDN "CN=_ldapbinduser,OU=Users,DC=example,DC=com"
-    AuthLDAPBindPassword "ldapbindpass"
-    AuthLDAPURL "ldaps://ldap01.example.com ldap02.example.com/OU=Users,DC=example,DC=com?sAMAccountName?sub?(objectClass=*)"
-    AuthType Basic
-    AuthBasicProvider ldap
-    AuthName "Please authenticate for Example dot com"
-    AuthLDAPGroupAttributeIsDN on
-    require valid-user
-  </Location>
- 
-</VirtualHost>

sample/lighttpd_basic.conf

@@ -1,24 +0,0 @@
-$HTTP["host"] =~ "kibana" {
-
-    server.document-root = "/var/ww/kibana/src"
-    auth.backend = "plain"
-    auth.backend.plain.userfile = "/etc/lighttpd/kibanapassword"
-
-    index-file.names            = ( "index.html", "index.htm" )
-
-    auth.require = ( "/" => (
-            "method"    => "basic",
-            "realm"     => "Password Protected",
-            "require"   => "valid-user"
-            )
-        )
-
-    $HTTP["url"] =~ "^/kibana-int/(dashboard/|temp).*$" {
-        proxy.balance = "hash"
-        proxy.server = ( "" => ( ( "host" => "127.0.0.1", "port" => "9200" ) ) )
-    }
-    $HTTP["url"] =~ "^.*/_(mapping|search|nodes|aliases)$" {
-        proxy.balance = "hash"
-        proxy.server = ( "" => ( ( "host" => "127.0.0.1", "port" => "9200" ) ) )
-    }
-}

sample/nginx.conf

@@ -1,60 +0,0 @@
-#
-# Nginx proxy for Elasticsearch + Kibana
-#
-# In this setup, we are password protecting the saving of dashboards. You may
-# wish to extend the password protection to all paths.
-#
-# Even though these paths are being called as the result of an ajax request, the
-# browser will prompt for a username/password on the first request
-#
-# If you use this, you'll want to point config.js at http://FQDN:80/ instead of
-# http://FQDN:9200
-#
-server {
-  listen                *:80 ;
-
-  server_name           kibana.myhost.org;
-  access_log            /var/log/nginx/kibana.myhost.org.access.log;
-
-  location / {
-    root  /usr/share/kibana3;
-    index  index.html  index.htm;
-  }
-
-  location ~ ^/_aliases$ {
-    proxy_pass http://127.0.0.1:9200;
-    proxy_read_timeout 90;
-  }
-  location ~ ^/_nodes$ {
-    proxy_pass http://127.0.0.1:9200;
-    proxy_read_timeout 90;
-  }
-  location ~ ^/.*/_search$ {
-    proxy_pass http://127.0.0.1:9200;
-    proxy_read_timeout 90;
-  }
-  location ~ ^/.*/_mapping$ {
-    proxy_pass http://127.0.0.1:9200;
-    proxy_read_timeout 90;
-  }
-
-  # Password protected end points
-  location ~ ^/kibana-int/dashboard/.*$ {
-    proxy_pass http://127.0.0.1:9200;
-    proxy_read_timeout 90;
-    limit_except GET {
-      proxy_pass http://127.0.0.1:9200;
-      auth_basic "Restricted";
-      auth_basic_user_file /etc/nginx/conf.d/kibana.myhost.org.htpasswd;
-    }
-  }
-  location ~ ^/kibana-int/temp.*$ {
-    proxy_pass http://127.0.0.1:9200;
-    proxy_read_timeout 90;
-    limit_except GET {
-      proxy_pass http://127.0.0.1:9200;
-      auth_basic "Restricted";
-      auth_basic_user_file /etc/nginx/conf.d/kibana.myhost.org.htpasswd;
-    }
-  }
-}

sample/server.js

@@ -1,244 +0,0 @@
-#!/usr/bin/env node
-
-var util = require('util'),
-    http = require('http'),
-    fs = require('fs'),
-    url = require('url'),
-    events = require('events');
-
-var DEFAULT_PORT = 8000;
-
-function main(argv) {
-  new HttpServer({
-    'GET': createServlet(StaticServlet),
-    'HEAD': createServlet(StaticServlet)
-  }).start(Number(argv[2]) || DEFAULT_PORT);
-}
-
-function escapeHtml(value) {
-  return value.toString().
-    replace('<', '&lt;').
-    replace('>', '&gt;').
-    replace('"', '&quot;');
-}
-
-function createServlet(Class) {
-  var servlet = new Class();
-  return servlet.handleRequest.bind(servlet);
-}
-
-/**
- * An Http server implementation that uses a map of methods to decide
- * action routing.
- *
- * @param {Object} Map of method => Handler function
- */
-function HttpServer(handlers) {
-  this.handlers = handlers;
-  this.server = http.createServer(this.handleRequest_.bind(this));
-}
-
-HttpServer.prototype.start = function(port) {
-  this.port = port;
-  this.server.listen(port);
-  util.puts('Http Server running at http://localhost:' + port + '/');
-};
-
-HttpServer.prototype.parseUrl_ = function(urlString) {
-  var parsed = url.parse(urlString);
-  parsed.pathname = url.resolve('/', parsed.pathname);
-  return url.parse(url.format(parsed), true);
-};
-
-HttpServer.prototype.handleRequest_ = function(req, res) {
-  var logEntry = req.method + ' ' + req.url;
-  if (req.headers['user-agent']) {
-    logEntry += ' ' + req.headers['user-agent'];
-  }
-  util.puts(logEntry);
-  req.url = this.parseUrl_(req.url);
-  var handler = this.handlers[req.method];
-  if (!handler) {
-    res.writeHead(501);
-    res.end();
-  } else {
-    handler.call(this, req, res);
-  }
-};
-
-/**
- * Handles static content.
- */
-function StaticServlet() {}
-
-StaticServlet.MimeMap = {
-  'txt': 'text/plain',
-  'html': 'text/html',
-  'css': 'text/css',
-  'xml': 'application/xml',
-  'json': 'application/json',
-  'js': 'application/javascript',
-  'jpg': 'image/jpeg',
-  'jpeg': 'image/jpeg',
-  'gif': 'image/gif',
-  'png': 'image/png',
-  'svg': 'image/svg+xml'
-};
-
-StaticServlet.prototype.handleRequest = function(req, res) {
-  var self = this;
-  var path = ('../src/' + req.url.pathname).replace('//','/').replace(/%(..)/g, function(match, hex){
-    return String.fromCharCode(parseInt(hex, 16));
-  });
-  var parts = path.split('/');
-  if (parts[parts.length-1].charAt(0) === '.')
-    return self.sendForbidden_(req, res, path);
-  fs.stat(path, function(err, stat) {
-    if (err)
-      return self.sendMissing_(req, res, path);
-    if (stat.isDirectory())
-      return self.sendDirectory_(req, res, path);
-    return self.sendFile_(req, res, path);
-  });
-}
-
-StaticServlet.prototype.sendError_ = function(req, res, error) {
-  res.writeHead(500, {
-      'Content-Type': 'text/html'
-  });
-  res.write('<!doctype html>\n');
-  res.write('<title>Internal Server Error</title>\n');
-  res.write('<h1>Internal Server Error</h1>');
-  res.write('<pre>' + escapeHtml(util.inspect(error)) + '</pre>');
-  util.puts('500 Internal Server Error');
-  util.puts(util.inspect(error));
-};
-
-StaticServlet.prototype.sendMissing_ = function(req, res, path) {
-  path = path.substring(1);
-  res.writeHead(404, {
-      'Content-Type': 'text/html'
-  });
-  res.write('<!doctype html>\n');
-  res.write('<title>404 Not Found</title>\n');
-  res.write('<h1>Not Found</h1>');
-  res.write(
-    '<p>The requested URL ' +
-    escapeHtml(path) +
-    ' was not found on this server.</p>'
-  );
-  res.end();
-  util.puts('404 Not Found: ' + path);
-};
-
-StaticServlet.prototype.sendForbidden_ = function(req, res, path) {
-  path = path.substring(1);
-  res.writeHead(403, {
-      'Content-Type': 'text/html'
-  });
-  res.write('<!doctype html>\n');
-  res.write('<title>403 Forbidden</title>\n');
-  res.write('<h1>Forbidden</h1>');
-  res.write(
-    '<p>You do not have permission to access ' +
-    escapeHtml(path) + ' on this server.</p>'
-  );
-  res.end();
-  util.puts('403 Forbidden: ' + path);
-};
-
-StaticServlet.prototype.sendRedirect_ = function(req, res, redirectUrl) {
-  res.writeHead(301, {
-      'Content-Type': 'text/html',
-      'Location': redirectUrl
-  });
-  res.write('<!doctype html>\n');
-  res.write('<title>301 Moved Permanently</title>\n');
-  res.write('<h1>Moved Permanently</h1>');
-  res.write(
-    '<p>The document has moved <a href="' +
-    redirectUrl +
-    '">here</a>.</p>'
-  );
-  res.end();
-  util.puts('301 Moved Permanently: ' + redirectUrl);
-};
-
-StaticServlet.prototype.sendFile_ = function(req, res, path) {
-  var self = this;
-  var file = fs.createReadStream(path);
-  res.writeHead(200, {
-    'Content-Type': StaticServlet.
-      MimeMap[path.split('.').pop()] || 'text/plain'
-  });
-  if (req.method === 'HEAD') {
-    res.end();
-  } else {
-    file.on('data', res.write.bind(res));
-    file.on('close', function() {
-      res.end();
-    });
-    file.on('error', function(error) {
-      self.sendError_(req, res, error);
-    });
-  }
-};
-
-StaticServlet.prototype.sendDirectory_ = function(req, res, path) {
-  var self = this;
-  if (path.match(/[^\/]$/)) {
-    req.url.pathname += '/';
-    var redirectUrl = url.format(url.parse(url.format(req.url)));
-    return self.sendRedirect_(req, res, redirectUrl);
-  }
-  fs.readdir(path, function(err, files) {
-    if (err)
-      return self.sendError_(req, res, error);
-
-    if (!files.length)
-      return self.writeDirectoryIndex_(req, res, path, []);
-
-    var remaining = files.length;
-    files.forEach(function(fileName, index) {
-      fs.stat(path + '/' + fileName, function(err, stat) {
-        if (err)
-          return self.sendError_(req, res, err);
-        if (stat.isDirectory()) {
-          files[index] = fileName + '/';
-        }
-        if (!(--remaining))
-          return self.writeDirectoryIndex_(req, res, path, files);
-      });
-    });
-  });
-};
-
-StaticServlet.prototype.writeDirectoryIndex_ = function(req, res, path, files) {
-  path = path.substring(1);
-  res.writeHead(200, {
-    'Content-Type': 'text/html'
-  });
-  if (req.method === 'HEAD') {
-    res.end();
-    return;
-  }
-  res.write('<!doctype html>\n');
-  res.write('<title>' + escapeHtml(path) + '</title>\n');
-  res.write('<style>\n');
-  res.write('  ol { list-style-type: none; font-size: 1.2em; }\n');
-  res.write('</style>\n');
-  res.write('<h1>Directory: ' + escapeHtml(path) + '</h1>');
-  res.write('<ol>');
-  files.forEach(function(fileName) {
-    if (fileName.charAt(0) !== '.') {
-      res.write('<li><a href="' +
-        escapeHtml(fileName) + '">' +
-        escapeHtml(fileName) + '</a></li>');
-    }
-  });
-  res.write('</ol>');
-  res.end();
-};
-
-// Must be last,
-main(process.argv);

sample/start_dashboard_html.html

@@ -1,55 +0,0 @@
-<br/>
-
-<div class="row-fluid">
-  <div class="span6">
-    <ul>
-      <li>
-        <a href="http://grafana.org/docs#configuration" target="_blank">Configuration</a>
-      </li>
-      <li>
-        <a href="http://grafana.org/docs/troubleshooting" target="_blank">Troubleshooting</a>
-      </li>
-      <li>
-        <a href="http://grafana.org/docs/support" target="_blank">Support</a>
-      </li>
-      <li>
-        <a href="http://grafana.org/docs/features/intro" target="_blank">Getting started</a>  (Must read!)
-      </li>
-    </ul>
-  </div>
-  <div class="span6">
-    <ul>
-      <li>
-        <a href="http://grafana.org/docs/features/graphing" target="_blank">Graphing</a>
-      </li>
-      <li>
-        <a href="http://grafana.org/docs/features/annotations" target="_blank">Annotations</a>
-      </li>
-      <li>
-        <a href="http://grafana.org/docs/features/graphite" target="_blank">Graphite</a>
-      </li>
-      <li>
-        <a href="http://grafana.org/docs/features/influxdb" target="_blank">InfluxDB</a>
-      </li>
-      <li>
-        <a href="http://grafana.org/docs/features/opentsdb" target="_blank">OpenTSDB</a>
-      </li>
-    </ul>
-  </div>
-</div>
-
-<br/>
-
-<div class="row-fluid">
-  <div class="span12">
-    <ul>
-      <li>Ctrl+S saves the current dashboard</li>
-      <li>Ctrl+F Opens the dashboard finder</li>
-      <li>Ctrl+H Hide/show row controls</li>
-      <li>Click and drag graph title to move panel</li>
-      <li>Hit Escape to exit graph when in fullscreen or edit mode</li>
-      <li>Click the colored icon in the legend to change series color</li>
-      <li>Ctrl or Shift + Click legend name to hide other series</li>
-    </ul>
-  </div>
-</div>

src/app/directives/dropdown.typeahead.js

@@ -12,10 +12,10 @@ function (angular, app, _, $) {
     .directive('dropdownTypeahead', function($compile) {
 
       var inputTemplate = '<input type="text"'+
-                            ' class="grafana-target-segment-input input-medium grafana-target-segment-input"' +
+                            ' class="tight-form-input input-medium tight-form-input"' +
                             ' spellcheck="false" style="display:none"></input>';
 
-      var buttonTemplate = '<a  class="grafana-target-segment grafana-target-function dropdown-toggle"' +
+      var buttonTemplate = '<a  class="tight-form-item tight-form-func dropdown-toggle"' +
                               ' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
                               ' data-placement="top"><i class="fa fa-plus"></i></a>';
 

src/app/directives/graphiteSegment.js

@@ -11,10 +11,10 @@ function (angular, app, _, $) {
     .module('grafana.directives')
     .directive('graphiteSegment', function($compile, $sce) {
       var inputTemplate = '<input type="text" data-provide="typeahead" ' +
-                            ' class="grafana-target-text-input input-medium"' +
+                            ' class="tight-form-clear-input input-medium"' +
                             ' spellcheck="false" style="display:none"></input>';
 
-      var buttonTemplate = '<a class="grafana-target-segment" tabindex="1" focus-me="segment.focus" ng-bind-html="segment.html"></a>';
+      var buttonTemplate = '<a class="tight-form-item" tabindex="1" focus-me="segment.focus" ng-bind-html="segment.html"></a>';
 
       return {
         link: function($scope, elem) {

src/app/directives/templateParamSelector.js

@@ -11,10 +11,10 @@ function (angular, app, _, $) {
     .module('grafana.directives')
     .directive('templateParamSelector', function($compile) {
       var inputTemplate = '<input type="text" data-provide="typeahead" ' +
-                            ' class="grafana-target-text-input input-medium"' +
+                            ' class="tight-form-clear-input input-medium"' +
                             ' spellcheck="false" style="display:none"></input>';
 
-      var buttonTemplate = '<a  class="grafana-target-segment tabindex="1">{{variable.current.text}}</a>';
+      var buttonTemplate = '<a  class="tight-form-item tabindex="1">{{variable.current.text}}</a>';
 
       return {
         link: function($scope, elem) {

src/app/features/graphite/addGraphiteFunc.js

@@ -12,10 +12,10 @@ function (angular, app, _, $, gfunc) {
     .module('grafana.directives')
     .directive('graphiteAddFunc', function($compile) {
       var inputTemplate = '<input type="text"'+
-                            ' class="grafana-target-segment-input input-medium grafana-target-segment-input"' +
+                            ' class="tight-form-input input-medium tight-form-input"' +
                             ' spellcheck="false" style="display:none"></input>';
 
-      var buttonTemplate = '<a  class="grafana-target-segment grafana-target-function dropdown-toggle"' +
+      var buttonTemplate = '<a  class="tight-form-item tight-form-func dropdown-toggle"' +
                               ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown"' +
                               ' data-placement="top"><i class="fa fa-plus"></i></a>';
 

src/app/features/graphite/funcEditor.js

@@ -12,10 +12,10 @@ function (angular, _, $) {
 
       var funcSpanTemplate = '<a ng-click="">{{func.def.name}}</a><span>(</span>';
       var paramTemplate = '<input type="text" style="display:none"' +
-                          ' class="input-mini grafana-function-param-input"></input>';
+                          ' class="input-mini tight-form-func-param"></input>';
 
       var funcControlsTemplate =
-         '<div class="graphite-func-controls">' +
+         '<div class="tight-form-func-controls">' +
            '<span class="pointer fa fa-arrow-left"></span>' +
            '<span class="pointer fa fa-question-circle"></span>' +
            '<span class="pointer fa fa-remove" ></span>' +
@@ -126,7 +126,7 @@ function (angular, _, $) {
           }
 
           function toggleFuncControls() {
-            var targetDiv = elem.closest('.grafana-target-inner');
+            var targetDiv = elem.closest('.tight-form');
 
             if (elem.hasClass('show-function-controls')) {
               elem.removeClass('show-function-controls');

src/app/features/graphite/partials/query.editor.html

@@ -1,24 +1,22 @@
 <div class="editor-row">
 
 	<div  ng-repeat="target in panel.targets"
-        class="grafana-target"
-        ng-class="{'grafana-target-hidden': target.hide}"
+        class="tight-form"
+        ng-class="{'tight-form-disabled': target.hide}"
         ng-controller="GraphiteQueryCtrl"
         ng-init="init()">
-
-    <div class="grafana-target-inner">
-      <ul class="grafana-segment-list pull-right">
-        <li ng-show="parserError" class="grafana-target-segment">
+      <ul class="tight-form-list pull-right">
+        <li ng-show="parserError" class="tight-form-item">
           <a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
             <i class="fa fa-warning"></i>
           </a>
         </li>
-        <li class="grafana-target-segment">
+        <li class="tight-form-item">
           <a class="pointer" tabindex="1" ng-click="showTextEditor = !showTextEditor">
             <i class="fa fa-pencil"></i>
           </a>
         </li>
-        <li class="grafana-target-segment">
+        <li class="tight-form-item">
 					<div class="dropdown">
 						<a  class="pointer dropdown-toggle"
 							data-toggle="dropdown"
@@ -47,19 +45,19 @@
 						</ul>
 					</div>
 				</li>
-				<li class="grafana-target-segment last">
+				<li class="tight-form-item last">
 					<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
 						<i class="fa fa-remove"></i>
 					</a>
 				</li>
 			</ul>
 
-			<ul class="grafana-segment-list">
-				<li class="grafana-target-segment" style="min-width: 15px; text-align: center">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="min-width: 15px; text-align: center">
 					{{targetLetters[$index]}}
 				</li>
 				<li>
-					<a  class="grafana-target-segment"
+					<a  class="tight-form-item"
 						ng-click="target.hide = !target.hide; get_data();"
 						role="menuitem">
 						<i class="fa fa-eye"></i>
@@ -68,17 +66,17 @@
 			</ul>
 
 			<input  type="text"
-			class="grafana-target-text-input span10"
+			class="tight-form-clear-input span10"
               ng-model="target.target"
               focus-me="showTextEditor"
               spellcheck='false'
               ng-model-onblur ng-change="targetTextChanged()"
               ng-show="showTextEditor" />
 
-      <ul class="grafana-segment-list" role="menu" ng-hide="showTextEditor">
+      <ul class="tight-form-list" role="menu" ng-hide="showTextEditor">
         <li ng-repeat="segment in segments" role="menuitem" graphite-segment></li>
 				<li ng-repeat="func in functions">
-          <span graphite-func-editor class="grafana-target-segment grafana-target-function">
+          <span graphite-func-editor class="tight-form-item tight-form-func">
           </span>
         </li>
         <li class="dropdown" graphite-add-func>
@@ -86,80 +84,75 @@
       </ul>
       <div class="clearfix"></div>
     </div>
-  </div>
-
 </div>
 
 <section class="grafana-metric-options">
-	<div class="grafana-target">
-		<div class="grafana-target-inner">
-			<ul class="grafana-segment-list">
-				<li class="grafana-target-segment grafana-target-segment-icon">
-					<i class="fa fa-wrench"></i>
-				</li>
-				<li class="grafana-target-segment">
-					Cache timeout
-				</li>
-				<li>
-					<input type="text"
-								class="input-mini grafana-target-segment-input"
-								ng-model="panel.cacheTimeout"
-								bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
-								data-placement="right"
-								spellcheck='false'
-								placeholder="60">
-				</li>
-				<li class="grafana-target-segment">
-					Max data points
-				</li>
-				<li>
-					<input type="text"
-								class="input-mini grafana-target-segment-input"
-								ng-model="panel.maxDataPoints"
-								bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
-								data-placement="right"
-								ng-model-onblur ng-change="get_data()"
-								spellcheck='false'
-								placeholder="auto">
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-		<div class="grafana-target-inner">
-			<ul class="grafana-segment-list">
-				<li class="grafana-target-segment grafana-target-segment-icon">
-					<i class="fa fa-info-circle"></i>
-				</li>
-				<li class="grafana-target-segment">
-					<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						shorter legend names
-					</a>
-				</li>
-				<li class="grafana-target-segment">
-					<a ng-click="toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						series as parameters
-					</a>
-				</li>
-				<li class="grafana-target-segment">
-					<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						stacking
-					</a>
-				</li>
-				<li class="grafana-target-segment">
-					<a ng-click="toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						templating
-					</a>
-				</li>
-				<li class="grafana-target-segment">
-					<a ng-click="toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						max data points
-					</a>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
+	<div class="tight-form">
+		<ul class="tight-form-list">
+			<li class="tight-form-item tight-form-item-icon">
+				<i class="fa fa-wrench"></i>
+			</li>
+			<li class="tight-form-item">
+				Cache timeout
+			</li>
+			<li>
+				<input type="text"
+				class="input-mini tight-form-input"
+				ng-model="panel.cacheTimeout"
+				bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
+				data-placement="right"
+				spellcheck='false'
+				placeholder="60">
+			</li>
+			<li class="tight-form-item">
+				Max data points
+			</li>
+			<li>
+				<input type="text"
+				class="input-mini tight-form-input"
+				ng-model="panel.maxDataPoints"
+				bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
+				data-placement="right"
+				ng-model-onblur ng-change="get_data()"
+				spellcheck='false'
+				placeholder="auto">
+			</li>
+		</ul>
+		<div class="clearfix"></div>
+	</div>
+	<div class="tight-form">
+		<ul class="tight-form-list">
+			<li class="tight-form-item tight-form-item-icon">
+				<i class="fa fa-info-circle"></i>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					shorter legend names
+				</a>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					series as parameters
+				</a>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					stacking
+				</a>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					templating
+				</a>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					max data points
+				</a>
+			</li>
+		</ul>
+		<div class="clearfix"></div>
 	</div>
- </div>
 </section>
 
 <div class="editor-row">

src/app/features/influxdb/funcEditor.js

@@ -14,7 +14,7 @@ function (angular, _, $) {
                              'data-toggle="dropdown">{{target.function}}</a><span>(</span>';
 
       var paramTemplate = '<input type="text" style="display:none"' +
-                          ' class="input-mini grafana-function-param-input"></input>';
+                          ' class="input-mini tight-form-func-param"></input>';
 
       return {
         restrict: 'A',

src/app/features/influxdb/partials/query.editor.html

@@ -1,231 +1,217 @@
 <div class="editor-row">
-
-  <div  ng-repeat="target in panel.targets"
-        class="grafana-target"
-        ng-class="{'grafana-target-hidden': target.hide}"
-        ng-controller="InfluxQueryCtrl"
-        ng-init="init()">
-
-    <div class="grafana-target-inner-wrapper">
-      <div class="grafana-target-inner">
-				<ul class="grafana-segment-list pull-right">
-					<li class="grafana-target-segment">
-						<div class="dropdown">
-							<a class="pointer dropdown-toggle"
-								data-toggle="dropdown"
-								tabindex="1">
-								<i class="fa fa-bars"></i>
-							</a>
-							<ul class="dropdown-menu pull-right" role="menu">
-								<li role="menuitem"><a tabindex="1" ng-click="duplicate()">Duplicate</a></li>
-								<li role="menuitem"><a tabindex="1" ng-click="showQuery()" ng-hide="target.rawQuery">Raw query mode</a></li>
-								<li role="menuitem"><a tabindex="1" ng-click="hideQuery()" ng-show="target.rawQuery">Query editor mode</a></li>
-								<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up </a></li>
-								<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a></li>
-							</ul>
-						</div>
-					</li>
-					<li class="grafana-target-segment last">
-						<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
-							<i class="fa fa-remove"></i>
+	<div ng-repeat="target in panel.targets" ng-controller="InfluxQueryCtrl" ng-init="init()" ng-class="{'tight-form-disabled': target.hide}" class="tight-form-container">
+		<div class="tight-form">
+			<ul class="tight-form-list pull-right">
+				<li class="tight-form-item">
+					<div class="dropdown">
+						<a class="pointer dropdown-toggle"
+							data-toggle="dropdown"
+							tabindex="1">
+							<i class="fa fa-bars"></i>
 						</a>
-					</li>
-				</ul>
-
-				<ul class="grafana-segment-list">
-					<li>
-						<a class="grafana-target-segment" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
-							<i class="fa fa-eye"></i>
-						</a>
-          </li>
-        </ul>
-
-				<!-- Raw Query mode  -->
-				<ul class="grafana-segment-list" ng-show="target.rawQuery">
-					<li>
-						<input type="text"
-               class="grafana-target-segment-input span10"
-               ng-model="target.query"
-               placeholder="select ..."
-               focus-me="target.rawQuery"
-               spellcheck='false'
-               data-min-length=0 data-items=100
-               ng-model-onblur
-							 ng-blur="get_data()">
-					</li>
-				</ul>
-
-				<!-- Query editor mode -->
-        <ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
-					<li class="grafana-target-segment">
-						series
-					</li>
-          <li>
-            <input type="text"
-                   class="grafana-target-segment-input span8"
-                   ng-model="target.series"
-                   spellcheck='false'
-                   bs-typeahead="listSeries"
-                   match-all="true"
-                   min-length="3"
-                   placeholder="series name"
-                   data-min-length=0 data-items=100
-                   ng-blur="seriesBlur()">
-          </li>
-
-					<li class="grafana-target-segment">
-						alias
-					</li>
-
-					<li>
-						<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.alias"
-						spellcheck='false' placeholder="alias" ng-blur="get_data()">
-					</li>
-
-        </ul>
-
-        <div class="clearfix"></div>
-      </div>
-
-      <div class="grafana-target-inner">
-				<!-- Raw Query mode  -->
-				<ul class="grafana-segment-list" ng-show="target.rawQuery">
-					<li class="grafana-target-segment">
-						<i class="fa fa-eye invisible"></i>
-					</li>
-					<li class="grafana-target-segment">
-            alias
-          </li>
-          <li>
-            <input type="text"
-                   class="input-medium grafana-target-segment-input"
-                   ng-model="target.alias"
-                   spellcheck='false'
-                   placeholder="alias"
-                   ng-blur="get_data()">
-          </li>
-					<li class="grafana-target-segment">
-						group by time
-					</li>
-					<li>
-						<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
-									 spellcheck='false' placeholder="{{interval}}" data-placement="right"
-									 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
-									 ng-model-onblur ng-change="get_data()" >
-					</li>
-				</ul>
-
-				<!-- Query editor mode -->
-        <ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
-					<li class="grafana-target-segment">
-						<i class="fa fa-eye invisible"></i>
-					</li>
-					<li class="grafana-target-segment">
-						select
-					</li>
-					<li class="dropdown">
-						<span influxdb-func-editor class="grafana-target-segment grafana-target-function">
-						</span>
-					</li>
-
-					<li class="grafana-target-segment">
-						where
-					</li>
-					<li>
-						<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.condition"
-									 bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
-					</li>
-
-					<li class="grafana-target-segment">
-						group by time
-					</li>
-					<li>
-						<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
-									 spellcheck='false' placeholder="{{interval}}" data-placement="right"
-									 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
-									 ng-model-onblur ng-change="get_data()" >
-					</li>
+						<ul class="dropdown-menu pull-right" role="menu">
+							<li role="menuitem"><a tabindex="1" ng-click="duplicate()">Duplicate</a></li>
+							<li role="menuitem"><a tabindex="1" ng-click="showQuery()" ng-hide="target.rawQuery">Raw query mode</a></li>
+							<li role="menuitem"><a tabindex="1" ng-click="hideQuery()" ng-show="target.rawQuery">Query editor mode</a></li>
+							<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up </a></li>
+							<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a></li>
+						</ul>
+					</div>
+				</li>
+				<li class="tight-form-item last">
+					<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
+						<i class="fa fa-remove"></i>
+					</a>
+				</li>
+			</ul>
 
-					<li class="grafana-target-segment">
-						and
-					</li>
+			<ul class="tight-form-list">
+				<li>
+					<a class="tight-form-item" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
+						<i class="fa fa-eye"></i>
+					</a>
+				</li>
+			</ul>
 
-					<li>
-						<input type="text" class="input-small grafana-target-segment-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
-									 placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
-					</li>
+			<!-- Raw Query mode  -->
+			<ul class="tight-form-list" ng-show="target.rawQuery">
+				<li>
+					<input type="text"
+					class="tight-form-input span10"
+					ng-model="target.query"
+					placeholder="select ..."
+					focus-me="target.rawQuery"
+					spellcheck='false'
+					data-min-length=0 data-items=100
+					ng-model-onblur
+					ng-blur="get_data()">
+				</li>
+			</ul>
 
-					<li class="dropdown">
-						<a class="grafana-target-segment pointer" data-toggle="dropdown" bs-tooltip="'Insert missing values, important when stacking'" data-placement="right">
-							<span ng-show="target.fill">
-								fill ({{target.fill}})
-							</span>
-							<span ng-show="!target.fill">
-								no fill
-							</span>
-					  </a>
-						<ul class="dropdown-menu">
-							<li><a ng-click="target.fill = ''">no fill</a></li>
-							<li><a ng-click="target.fill = 'null'">fill (null)</a></li>
-							<li><a ng-click="target.fill = '0'">fill (0)</a></li>
-						</ul>
-					</li>
+			<!-- Query editor mode -->
+			<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
+				<li class="tight-form-item">
+					series
+				</li>
+				<li>
+					<input type="text"
+					class="tight-form-input span8"
+					ng-model="target.series"
+					spellcheck='false'
+					bs-typeahead="listSeries"
+					match-all="true"
+					min-length="3"
+					placeholder="series name"
+					data-min-length=0 data-items=100
+					ng-blur="seriesBlur()">
+				</li>
 
-        </ul>
+				<li class="tight-form-item">
+					alias
+				</li>
 
-        <div class="clearfix"></div>
-      </div>
+				<li>
+					<input type="text" class="input-medium tight-form-input" ng-model="target.alias"
+					spellcheck='false' placeholder="alias" ng-blur="get_data()">
+				</li>
 
-    </div>
-  </div>
+			</ul>
 
-</div>
+			<div class="clearfix"></div>
+		</div>
 
-<section class="grafana-metric-options">
-	<div class="grafana-target">
-		<div class="grafana-target-inner">
-			<ul class="grafana-segment-list">
-				<li class="grafana-target-segment grafana-target-segment-icon">
-					<i class="fa fa-wrench"></i>
+		<div class="tight-form">
+			<!-- Raw Query mode  -->
+			<ul class="tight-form-list" ng-show="target.rawQuery">
+				<li class="tight-form-item">
+					<i class="fa fa-eye invisible"></i>
 				</li>
-				<li class="grafana-target-segment">
-					group by time
+				<li class="tight-form-item">
+					alias
 				</li>
 				<li>
-					<input type="text" class="input-medium grafana-target-segment-input" ng-model="panel.interval" ng-blur="get_data();"
-					       spellcheck='false' placeholder="example: >10s">
+					<input type="text"
+					class="input-medium tight-form-input"
+					ng-model="target.alias"
+					spellcheck='false'
+					placeholder="alias"
+					ng-blur="get_data()">
 				</li>
-				<li class="grafana-target-segment">
-					<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >60s'" data-placement="right"></i>
+				<li class="tight-form-item">
+					group by time
+				</li>
+				<li>
+					<input type="text" class="input-mini tight-form-input" ng-model="target.interval"
+					spellcheck='false' placeholder="{{interval}}" data-placement="right"
+					bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
+					ng-model-onblur ng-change="get_data()" >
 				</li>
 			</ul>
-			<div class="clearfix"></div>
-		</div>
 
-		<div class="grafana-target-inner">
-			<ul class="grafana-segment-list">
-				<li class="grafana-target-segment grafana-target-segment-icon">
-					<i class="fa fa-info-circle"></i>
+			<!-- Query editor mode -->
+			<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
+				<li class="tight-form-item">
+					<i class="fa fa-eye invisible"></i>
 				</li>
-				<li class="grafana-target-segment">
-					<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						alias patterns
-					</a>
+				<li class="tight-form-item">
+					select
 				</li>
-				<li class="grafana-target-segment">
-					<a ng-click="toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						stacking &amp; and fill
-					</a>
+				<li class="dropdown">
+					<span influxdb-func-editor class="tight-form-item tight-form-func">
+					</span>
+				</li>
+
+				<li class="tight-form-item">
+					where
+				</li>
+				<li>
+					<input type="text" class="input-medium tight-form-input" ng-model="target.condition"
+					bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
+				</li>
+
+				<li class="tight-form-item">
+					group by time
 				</li>
-				<li class="grafana-target-segment">
-					<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-						group by time
+				<li>
+					<input type="text" class="input-mini tight-form-input" ng-model="target.interval"
+					spellcheck='false' placeholder="{{interval}}" data-placement="right"
+					bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
+					ng-model-onblur ng-change="get_data()" >
+				</li>
+
+				<li class="tight-form-item">
+					and
+				</li>
+
+				<li>
+					<input type="text" class="input-small tight-form-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
+					placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
+				</li>
+
+				<li class="dropdown">
+					<a class="tight-form-item pointer" data-toggle="dropdown" bs-tooltip="'Insert missing values, important when stacking'" data-placement="right">
+						<span ng-show="target.fill">
+							fill ({{target.fill}})
+						</span>
+						<span ng-show="!target.fill">
+							no fill
+						</span>
 					</a>
+					<ul class="dropdown-menu">
+						<li><a ng-click="target.fill = ''">no fill</a></li>
+						<li><a ng-click="target.fill = 'null'">fill (null)</a></li>
+						<li><a ng-click="target.fill = '0'">fill (0)</a></li>
+					</ul>
 				</li>
 			</ul>
 			<div class="clearfix"></div>
 		</div>
 	</div>
+</div>
+
+<section class="grafana-metric-options">
+	<div class="tight-form">
+		<ul class="tight-form-list">
+			<li class="tight-form-item tight-form-item-icon">
+				<i class="fa fa-wrench"></i>
+			</li>
+			<li class="tight-form-item">
+				group by time
+			</li>
+			<li>
+				<input type="text" class="input-medium tight-form-input" ng-model="panel.interval" ng-blur="get_data();"
+				spellcheck='false' placeholder="example: >10s">
+			</li>
+			<li class="tight-form-item">
+				<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >60s'" data-placement="right"></i>
+			</li>
+		</ul>
+		<div class="clearfix"></div>
+	</div>
+
+	<div class="tight-form">
+		<ul class="tight-form-list">
+			<li class="tight-form-item tight-form-item-icon">
+				<i class="fa fa-info-circle"></i>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					alias patterns
+				</a>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					stacking &amp; and fill
+				</a>
+			</li>
+			<li class="tight-form-item">
+				<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+					group by time
+				</a>
+			</li>
+		</ul>
+		<div class="clearfix"></div>
+	</div>
 </section>
 
 <div class="editor-row">

src/app/features/opentsdb/partials/query.editor.html

@@ -1,219 +1,217 @@
 <div class="editor-row" style="margin-top: 10px;">
+
   <div  ng-repeat="target in panel.targets"
-        class="grafana-target"
-        ng-class="{'grafana-target-hidden': target.hide}"
+        class="tight-form-container"
+        ng-class="{'tight-form-disabled': target.hide}"
         ng-controller="OpenTSDBQueryCtrl"
         ng-init="init()">
 
-    <div class="grafana-target-inner-wrapper">
-      <div class="grafana-target-inner">
-				<ul class="grafana-segment-list pull-right">
-					<li class="grafana-target-segment">
-						<div class="dropdown">
-							<a  class="pointer dropdown-toggle"
-								data-toggle="dropdown"
-								tabindex="1">
-								<i class="fa fa-bars"></i>
-							</a>
-							<ul class="dropdown-menu pull-right" role="menu">
-								<li role="menuitem">
-									<a  tabindex="1"
-										ng-click="duplicate()">
-										Duplicate
-									</a>
-								</li>
-							</ul>
-						</div>
-					</li>
-					<li class="grafana-target-segment last">
-						<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
-              <i class="fa fa-remove"></i>
-            </a>
-          </li>
-        </ul>
+    <div class="tight-form">
+			<ul class="tight-form-list pull-right">
+				<li class="tight-form-item">
+					<div class="dropdown">
+						<a  class="pointer dropdown-toggle"
+							data-toggle="dropdown"
+							tabindex="1">
+							<i class="fa fa-bars"></i>
+						</a>
+						<ul class="dropdown-menu pull-right" role="menu">
+							<li role="menuitem">
+								<a  tabindex="1"
+									ng-click="duplicate()">
+									Duplicate
+								</a>
+							</li>
+						</ul>
+					</div>
+				</li>
+				<li class="tight-form-item last">
+					<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
+            <i class="fa fa-remove"></i>
+          </a>
+        </li>
+      </ul>
 
-        <ul class="grafana-segment-list">
-          <li>
-            <a  class="grafana-target-segment"
-                ng-click="target.hide = !target.hide; get_data();"
-                role="menuitem">
-              <i class="fa fa-eye"></i>
-            </a>
-          </li>
-        </ul>
+      <ul class="tight-form-list">
+        <li>
+          <a  class="tight-form-item"
+              ng-click="target.hide = !target.hide; get_data();"
+              role="menuitem">
+            <i class="fa fa-eye"></i>
+          </a>
+        </li>
+      </ul>
 
-        <ul class="grafana-segment-list" role="menu">
-          <li>
-            <input type="text"
-                   class="grafana-target-segment-input"
-                   ng-model="target.metric"
-                   spellcheck='false'
-                   bs-typeahead="suggestMetrics"
-                   placeholder="metric name"
-                   data-min-length=0 data-items=100
-                   ng-blur="targetBlur()"
-                   >
-            <a bs-tooltip="target.errors.metric"
-               style="color: rgb(229, 189, 28)"
-               ng-show="target.errors.metric">
-              <i class="fa fa-warning"></i>
-            </a>
-          </li>
-					<li class="grafana-target-segment">
-            Aggregator
-          </li>
-          <li>
-            <select ng-model="target.aggregator"
-                    class="grafana-target-segment-input input-small"
-                    ng-options="agg for agg in aggregators"
-                    ng-change="targetBlur()">
-            </select>
-            <a bs-tooltip="target.errors.aggregator"
-               style="color: rgb(229, 189, 28)"
-               ng-show="target.errors.aggregator">
-              <i class="fa fa-warning"></i>
-            </a>
-          </li>
+      <ul class="tight-form-list" role="menu">
+        <li>
+          <input type="text"
+                 class="tight-form-input"
+                 ng-model="target.metric"
+                 spellcheck='false'
+                 bs-typeahead="suggestMetrics"
+                 placeholder="metric name"
+                 data-min-length=0 data-items=100
+                 ng-blur="targetBlur()"
+                 >
+          <a bs-tooltip="target.errors.metric"
+             style="color: rgb(229, 189, 28)"
+             ng-show="target.errors.metric">
+            <i class="fa fa-warning"></i>
+          </a>
+        </li>
+				<li class="tight-form-item">
+          Aggregator
+        </li>
+        <li>
+          <select ng-model="target.aggregator"
+                  class="tight-form-input input-small"
+                  ng-options="agg for agg in aggregators"
+                  ng-change="targetBlur()">
+          </select>
+          <a bs-tooltip="target.errors.aggregator"
+             style="color: rgb(229, 189, 28)"
+             ng-show="target.errors.aggregator">
+            <i class="fa fa-warning"></i>
+          </a>
+        </li>
 
-          <li class="grafana-target-segment">
-              Rate:
-              <input type="checkbox"
-                     class="grafana-target-option-checkbox"
-                     ng-model="target.shouldComputeRate"
-                     ng-change="targetBlur()"
-                     >
-          </li>
-          <li class="grafana-target-segment" ng-hide="!target.shouldComputeRate">
-            Counter:
+        <li class="tight-form-item">
+            Rate:
             <input type="checkbox"
-                   class="grafana-target-option-checkbox"
-                   ng-disabled="!target.shouldComputeRate"
-                   ng-model="target.isCounter"
-                   ng-change="targetBlur()">
-          </li>
-          <li class="grafana-target-segment" ng-hide="!target.isCounter">
-            Counter Max:
-          </li>
-          <li ng-hide="!target.isCounter">
-            <input type="text"
-                   class="grafana-target-segment-input input-medium"
-                   ng-disabled="!target.shouldComputeRate"
-                   ng-model="target.counterMax"
-                   spellcheck='false'
-                   placeholder="Counter max value"
-                   ng-blur="targetBlur()"
-                   />
-          </li>
-          <li class="grafana-target-segment" ng-hide="!target.isCounter">
-            Counter Reset Value:
-          </li>
-          <li ng-hide="!target.isCounter">
-            <input type="text"
-                   class="grafana-target-segment-input input-medium"
-                   ng-disabled="!target.shouldComputeRate"
-                   ng-model="target.counterResetValue"
-                   spellcheck='false'
-                   placeholder="Counter reset value"
-                   ng-blur="targetBlur()"
-                   />
-          </li>
-          <li class="grafana-target-segment">
-            Alias:
-          </li>
-					<li>
-						<input type="text"
-                   class="grafana-target-segment-input input-medium"
-                   ng-model="target.alias"
-                   spellcheck='false'
-                   placeholder="series alias"
-                   data-min-length=0 data-items=100
-                   ng-blur="targetBlur()"
-                   />
-          </li>
+                   class="tight-form-checkbox"
+                   ng-model="target.shouldComputeRate"
+                   ng-change="targetBlur()"
+                   >
+        </li>
+        <li class="tight-form-item" ng-hide="!target.shouldComputeRate">
+          Counter:
+          <input type="checkbox"
+                 class="tight-form-checkbox"
+                 ng-disabled="!target.shouldComputeRate"
+                 ng-model="target.isCounter"
+                 ng-change="targetBlur()">
+        </li>
+        <li class="tight-form-item" ng-hide="!target.isCounter">
+          Counter Max:
+        </li>
+        <li ng-hide="!target.isCounter">
+          <input type="text"
+                 class="tight-form-input input-medium"
+                 ng-disabled="!target.shouldComputeRate"
+                 ng-model="target.counterMax"
+                 spellcheck='false'
+                 placeholder="Counter max value"
+                 ng-blur="targetBlur()"
+                 />
+        </li>
+        <li class="tight-form-item" ng-hide="!target.isCounter">
+          Counter Reset Value:
+        </li>
+        <li ng-hide="!target.isCounter">
+          <input type="text"
+                 class="tight-form-input input-medium"
+                 ng-disabled="!target.shouldComputeRate"
+                 ng-model="target.counterResetValue"
+                 spellcheck='false'
+                 placeholder="Counter reset value"
+                 ng-blur="targetBlur()"
+                 />
+        </li>
+        <li class="tight-form-item">
+          Alias:
+        </li>
+				<li>
+					<input type="text"
+                 class="tight-form-input input-medium"
+                 ng-model="target.alias"
+                 spellcheck='false'
+                 placeholder="series alias"
+                 data-min-length=0 data-items=100
+                 ng-blur="targetBlur()"
+                 />
+        </li>
 
-        </ul>
+      </ul>
 
-        <div class="clearfix"></div>
-      </div>
+      <div class="clearfix"></div>
+    </div>
 
-      <div class="grafana-target-inner">
-        <ul class="grafana-segment-list" role="menu">
+    <div class="tight-form">
+      <ul class="tight-form-list" role="menu">
 
-          <li class="grafana-target-segment">
-            Downsample:
-            <input type="checkbox"
-                   class="grafana-target-option-checkbox"
-                   ng-model="target.shouldDownsample"
-                   ng-change="targetBlur(target)"
-                   >
-          </li>
+        <li class="tight-form-item">
+          Downsample:
+          <input type="checkbox"
+                 class="tight-form-checkbox"
+                 ng-model="target.shouldDownsample"
+                 ng-change="targetBlur(target)"
+                 >
+        </li>
 
-          <li ng-hide="!target.shouldDownsample">
-            <input type="text"
-                   class="input-small grafana-target-segment-input"
-                   ng-disabled="!target.shouldDownsample"
-                   ng-model="target.downsampleInterval"
-                   ng-change="targetBlur()"
-                   placeholder="interval"
-                   >
-          </li>
+        <li ng-hide="!target.shouldDownsample">
+          <input type="text"
+                 class="input-small tight-form-input"
+                 ng-disabled="!target.shouldDownsample"
+                 ng-model="target.downsampleInterval"
+                 ng-change="targetBlur()"
+                 placeholder="interval"
+                 >
+        </li>
 
-          <li class="grafana-target-segment" ng-hide="!target.shouldDownsample">
-            Aggregator
-          </li>
+        <li class="tight-form-item" ng-hide="!target.shouldDownsample">
+          Aggregator
+        </li>
 
-          <li ng-hide="!target.shouldDownsample">
-            <select ng-model="target.downsampleAggregator"
-                    class="grafana-target-segment-input input-small"
-                    ng-options="agg for agg in aggregators"
-                    ng-change="targetBlur()">
-            </select>
-          </li>
+        <li ng-hide="!target.shouldDownsample">
+          <select ng-model="target.downsampleAggregator"
+                  class="tight-form-input input-small"
+                  ng-options="agg for agg in aggregators"
+                  ng-change="targetBlur()">
+          </select>
+        </li>
 
-          <li class="grafana-target-segment">
-              Tags:
-          </li>
-          <li ng-repeat="(key, value) in target.tags track by $index" class="grafana-target-segment">
-            {{key}}&nbsp;=&nbsp;{{value}}
-            <a ng-click="removeTag(key)">
-              <i class="fa fa-remove"></i>
-            </a>
-          </li>
+        <li class="tight-form-item">
+            Tags:
+        </li>
+        <li ng-repeat="(key, value) in target.tags track by $index" class="tight-form-item">
+          {{key}}&nbsp;=&nbsp;{{value}}
+          <a ng-click="removeTag(key)">
+            <i class="fa fa-remove"></i>
+          </a>
+        </li>
 
-          <li class="grafana-target-segment" ng-hide="addTagMode">
+        <li class="tight-form-item" ng-hide="addTagMode">
+          <a ng-click="addTag()">
+            <i class="fa fa-plus"></i>
+          </a>
+        </li>
+
+        <li ng-show="addTagMode">
+            <input type="text"
+                   class="input-small tight-form-input"
+                   spellcheck='false'
+                   bs-typeahead="suggestTagKeys"
+                   data-min-length=0 data-items=100
+                   ng-model="target.currentTagKey"
+                   placeholder="key">
+            <input type="text"
+                   class="input-small tight-form-input"
+                   spellcheck='false'
+                   bs-typeahead="suggestTagValues"
+                   data-min-length=0 data-items=100
+                   ng-model="target.currentTagValue"
+                   placeholder="value">
             <a ng-click="addTag()">
               <i class="fa fa-plus"></i>
             </a>
-          </li>
-
-          <li ng-show="addTagMode">
-              <input type="text"
-                     class="input-small grafana-target-segment-input"
-                     spellcheck='false'
-                     bs-typeahead="suggestTagKeys"
-                     data-min-length=0 data-items=100
-                     ng-model="target.currentTagKey"
-                     placeholder="key">
-              <input type="text"
-                     class="input-small grafana-target-segment-input"
-                     spellcheck='false'
-                     bs-typeahead="suggestTagValues"
-                     data-min-length=0 data-items=100
-                     ng-model="target.currentTagValue"
-                     placeholder="value">
-              <a ng-click="addTag()">
-                <i class="fa fa-plus"></i>
-              </a>
-              <a bs-tooltip="target.errors.tags"
-                 style="color: rgb(229, 189, 28)"
-                 ng-show="target.errors.tags">
-                <i class="fa fa-warning"></i>
-              </a>
-          </li>
-        </ul>
-
-        <div class="clearfix"></div>
-      </div>
+            <a bs-tooltip="target.errors.tags"
+               style="color: rgb(229, 189, 28)"
+               ng-show="target.errors.tags">
+              <i class="fa fa-warning"></i>
+            </a>
+        </li>
+      </ul>
+      <div class="clearfix"></div>
     </div>
   </div>
 </div>

src/app/features/panellinkeditor/module.html

@@ -2,45 +2,43 @@
   <div class="section">
 		<h5>Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
 
-		<div class="grafana-target" ng-repeat="link in panel.links"j>
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment">
-						<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
-					</li>
+		<div class="tight-form" ng-repeat="link in panel.links"j>
+			<ul class="tight-form-list">
+				<li class="tight-form-item">
+					<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
+				</li>
 
-					<li class="grafana-target-segment">title</li>
-					<li>
-						<input type="text" ng-model="link.title" class="input-medium grafana-target-segment-input">
-					</li>
+				<li class="tight-form-item">title</li>
+				<li>
+					<input type="text" ng-model="link.title" class="input-medium tight-form-input">
+				</li>
 
-					<li class="grafana-target-segment">type</li>
-					<li>
-						<select class="input-medium grafana-target-segment-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
-					</li>
+				<li class="tight-form-item">type</li>
+				<li>
+					<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
+				</li>
 
-					<li class="grafana-target-segment" ng-show="link.type === 'dashboard'">dashboard</li>
-					<li ng-show="link.type === 'dashboard'">
-						<input type="text"
-						       ng-model="link.dashboard"
-									 bs-typeahead="searchDashboards"
-									 class="input-large grafana-target-segment-input">
-					</li>
+				<li class="tight-form-item" ng-show="link.type === 'dashboard'">dashboard</li>
+				<li ng-show="link.type === 'dashboard'">
+					<input type="text"
+					ng-model="link.dashboard"
+					bs-typeahead="searchDashboards"
+					class="input-large tight-form-input">
+				</li>
 
-					<li class="grafana-target-segment" ng-show="link.type === 'absolute'">url</li>
-					<li ng-show="link.type === 'absolute'">
-						<input type="text" ng-model="link.url" class="input-large grafana-target-segment-input">
-					</li>
+				<li class="tight-form-item" ng-show="link.type === 'absolute'">url</li>
+				<li ng-show="link.type === 'absolute'">
+					<input type="text" ng-model="link.url" class="input-large tight-form-input">
+				</li>
 
-					<li class="grafana-target-segment">params
-						<tip>Use var-variableName=value to pass templating variables.</tip>
-					</li>
-					<li>
-						<input type="text" ng-model="link.params" class="input-medium grafana-target-segment-input">
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+				<li class="tight-form-item">params
+					<tip>Use var-variableName=value to pass templating variables.</tip>
+				</li>
+				<li>
+					<input type="text" ng-model="link.params" class="input-medium tight-form-input">
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 </div>

src/app/panels/graph/axisEditor.html

@@ -1,226 +1,218 @@
 
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
-		<div class="grafana-target">
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
-						<strong>Left Y</strong>
-					</li>
-					<li class="grafana-target-segment">
-						Unit
-					</li>
-					<li class="dropdown" style="width: 130px;"
-						ng-model="panel.y_formats[0]"
-						dropdown-typeahead="unitFormats"
-						dropdown-typeahead-on-select="setUnitFormat(0, $subItem)">
-					</li>
-					<li class="grafana-target-segment">
-						&nbsp;&nbsp; Grid Max
-					</li>
-					<li>
-						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
-					   	empty-to-null ng-model="panel.grid.leftMax"
-							ng-change="render()" ng-model-onblur>
-					</li>
-					<li class="grafana-target-segment">
-						Min
-					</li>
-					<li>
-						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
-					  	empty-to-null ng-model="panel.grid.leftMin"
-							ng-change="render()" ng-model-onblur>
-					</li>
-					<li class="grafana-target-segment">
-						Label
-					</li>
-					<li>
-						<input type="text" class="input-small grafana-target-segment-input last"
-					  	ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
-						<strong>Right Y</strong>
-					</li>
-					<li class="grafana-target-segment">
-						Unit
-					</li>
-					<li class="dropdown" style="width: 130px"
-						ng-model="panel.y_formats[1]"
-						dropdown-typeahead="unitFormats"
-						dropdown-typeahead-on-select="setUnitFormat(1, $subItem)">
-					</li>
-					<li class="grafana-target-segment">
-						&nbsp;&nbsp; Grid Max
-					</li>
-					<li>
-						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
-					   	empty-to-null ng-model="panel.grid.rightMax"
-							ng-change="render()" ng-model-onblur>
-					</li>
-					<li class="grafana-target-segment">
-						Min
-					</li>
-					<li>
-						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
-					  	empty-to-null ng-model="panel.grid.rightMin"
-							ng-change="render()" ng-model-onblur>
-					</li>
-					<li class="grafana-target-segment">
-						Label
-					</li>
-					<li>
-						<input type="text" class="input-small grafana-target-segment-input last"
-					  	ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Left Y</strong>
+				</li>
+				<li class="tight-form-item">
+					Unit
+				</li>
+				<li class="dropdown" style="width: 130px;"
+					ng-model="panel.y_formats[0]"
+					dropdown-typeahead="unitFormats"
+					dropdown-typeahead-on-select="setUnitFormat(0, $subItem)">
+				</li>
+				<li class="tight-form-item">
+					&nbsp;&nbsp; Grid Max
+				</li>
+				<li>
+					<input type="number" class="input-small tight-form-input" placeholder="auto"
+					empty-to-null ng-model="panel.grid.leftMax"
+					ng-change="render()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					Min
+				</li>
+				<li>
+					<input type="number" class="input-small tight-form-input" placeholder="auto"
+					empty-to-null ng-model="panel.grid.leftMin"
+					ng-change="render()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					Label
+				</li>
+				<li>
+					<input type="text" class="input-small tight-form-input last"
+					ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Right Y</strong>
+				</li>
+				<li class="tight-form-item">
+					Unit
+				</li>
+				<li class="dropdown" style="width: 130px"
+					ng-model="panel.y_formats[1]"
+					dropdown-typeahead="unitFormats"
+					dropdown-typeahead-on-select="setUnitFormat(1, $subItem)">
+				</li>
+				<li class="tight-form-item">
+					&nbsp;&nbsp; Grid Max
+				</li>
+				<li>
+					<input type="number" class="input-small tight-form-input" placeholder="auto"
+					empty-to-null ng-model="panel.grid.rightMax"
+					ng-change="render()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					Min
+				</li>
+				<li>
+					<input type="number" class="input-small tight-form-input" placeholder="auto"
+					empty-to-null ng-model="panel.grid.rightMin"
+					ng-change="render()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					Label
+				</li>
+				<li>
+					<input type="text" class="input-small tight-form-input last"
+					ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 
 	<div class="section" style="margin-bottom: 20px">
-		<div class="grafana-target">
-		<div class="grafana-target-inner">
-			<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
-						<strong>Show Axis</strong>
-					</li>
-					<li class="grafana-target-segment">
-						X-Axis&nbsp;
-						<input class="cr1" id="hideXAxis" type="checkbox"
-								ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
-						<label for="hideXAxis" class="cr1"></label>
-					</li>
-					<li class="grafana-target-segment last">
-						Y-Axis&nbsp;
-						<input class="cr1" id="hideYAxis" type="checkbox"
-						    ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
-						<label for="hideYAxis" class="cr1"></label>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
-						<strong>Thresholds</strong>
-					</li>
-					<li class="grafana-target-segment">
-						Level 1
-					</li>
-					<li>
-						<input type="number" class="input-small grafana-target-segment-input"
-					  	ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur>
-					</li>
-					<li class="grafana-target-segment">
-						<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
-					</li>
-					<li class="grafana-target-segment">
-						Level 2
-					</li>
-					<li>
-						<input type="number" class="input-small grafana-target-segment-input"
-					  	ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur>
-					</li>
-					<li class="grafana-target-segment">
-						<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
-					</li>
-					<li class="grafana-target-segment last">
-						Line mode&nbsp;
-						<input class="cr1" id="panel.grid.thresholdLine" type="checkbox"
-								ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render()">
-						<label for="panel.grid.thresholdLine" class="cr1"></label>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Show Axis</strong>
+				</li>
+				<li class="tight-form-item">
+					X-Axis&nbsp;
+					<input class="cr1" id="hideXAxis" type="checkbox"
+					ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
+					<label for="hideXAxis" class="cr1"></label>
+				</li>
+				<li class="tight-form-item last">
+					Y-Axis&nbsp;
+					<input class="cr1" id="hideYAxis" type="checkbox"
+					ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
+					<label for="hideYAxis" class="cr1"></label>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Thresholds</strong>
+				</li>
+				<li class="tight-form-item">
+					Level 1
+				</li>
+				<li>
+					<input type="number" class="input-small tight-form-input"
+					ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
+				</li>
+				<li class="tight-form-item">
+					Level 2
+				</li>
+				<li>
+					<input type="number" class="input-small tight-form-input"
+					ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
+				</li>
+				<li class="tight-form-item last">
+					Line mode&nbsp;
+					<input class="cr1" id="panel.grid.thresholdLine" type="checkbox"
+					ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render()">
+					<label for="panel.grid.thresholdLine" class="cr1"></label>
 
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 </div>
 
 <div class="editor-row">
 	<div class="section">
-		<div class="grafana-target">
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
-						<strong>Legend</strong>
-					</li>
-					<li class="grafana-target-segment">
-						Show&nbsp;
-						<input class="cr1" id="panel.legend.show" type="checkbox"
-						    ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render()">
-						<label for="panel.legend.show" class="cr1"></label>
-					</li>
-					<li class="grafana-target-segment">
-						Table&nbsp;
-						<input class="cr1" id="panel.legend.alignAsTable" type="checkbox"
-						    ng-model="panel.legend.alignAsTable" ng-checked="panel.legend.alignAsTable" ng-change="render()">
-						<label for="panel.legend.alignAsTable" class="cr1"></label>
-					</li>
-					<li class="grafana-target-segment">
-						Right side&nbsp;
-						<input class="cr1" id="panel.legend.rightSide" type="checkbox"
-						    ng-model="panel.legend.rightSide" ng-checked="panel.legend.rightSide" ng-change="render()">
-						<label for="panel.legend.rightSide" class="cr1"></label>
-					</li>
-					<li class="grafana-target-segment last">
-						<span bs-tooltip="'Hides series with only null values'">Hide empty&nbsp;<span>
-						<input class="cr1" id="panel.legend.hideEmpty" type="checkbox"
-						    ng-model="panel.legend.hideEmpty" ng-checked="panel.legend.hideEmpty" ng-change="render()">
-						<label for="panel.legend.hideEmpty" class="cr1"></label>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Legend</strong>
+				</li>
+				<li class="tight-form-item">
+					Show&nbsp;
+					<input class="cr1" id="panel.legend.show" type="checkbox"
+					ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render()">
+					<label for="panel.legend.show" class="cr1"></label>
+				</li>
+				<li class="tight-form-item">
+					Table&nbsp;
+					<input class="cr1" id="panel.legend.alignAsTable" type="checkbox"
+					ng-model="panel.legend.alignAsTable" ng-checked="panel.legend.alignAsTable" ng-change="render()">
+					<label for="panel.legend.alignAsTable" class="cr1"></label>
+				</li>
+				<li class="tight-form-item">
+					Right side&nbsp;
+					<input class="cr1" id="panel.legend.rightSide" type="checkbox"
+					ng-model="panel.legend.rightSide" ng-checked="panel.legend.rightSide" ng-change="render()">
+					<label for="panel.legend.rightSide" class="cr1"></label>
+				</li>
+				<li class="tight-form-item last">
+					<span bs-tooltip="'Hides series with only null values'">Hide empty&nbsp;<span>
+					<input class="cr1" id="panel.legend.hideEmpty" type="checkbox"
+							ng-model="panel.legend.hideEmpty" ng-checked="panel.legend.hideEmpty" ng-change="render()">
+					<label for="panel.legend.hideEmpty" class="cr1"></label>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 	<div class="section">
-		<div class="grafana-target">
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 100px">
-						<strong>Legend values</strong>
-					</li>
-					<li class="grafana-target-segment">
-						Min&nbsp;
-						<input class="cr1" id="panel.legend.min" type="checkbox"
-						    ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="legendValuesOptionChanged()">
-						<label for="panel.legend.min" class="cr1"></label>
-					</li>
-					<li class="grafana-target-segment">
-						Max&nbsp;
-						<input class="cr1" id="panel.legend.max" type="checkbox"
-						    ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="legendValuesOptionChanged()">
-						<label for="panel.legend.max" class="cr1"></label>
-					</li>
-					<li class="grafana-target-segment">
-						Avg&nbsp;
-						<input class="cr1" id="panel.legend.avg" type="checkbox"
-						    ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="legendValuesOptionChanged()">
-						<label for="panel.legend.avg" class="cr1"></label>
-					</li>
-					<li class="grafana-target-segment">
-						Current&nbsp;
-						<input class="cr1" id="panel.legend.current" type="checkbox"
-						    ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="legendValuesOptionChanged()">
-						<label for="panel.legend.current" class="cr1"></label>
-					</li>
-					<li class="grafana-target-segment last">
-						Total&nbsp;
-						<input class="cr1" id="panel.legend.total" type="checkbox"
-						    ng-model="panel.legend.total" ng-checked="panel.legend.total" ng-change="legendValuesOptionChanged()">
-						<label for="panel.legend.total" class="cr1"></label>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 100px">
+					<strong>Legend values</strong>
+				</li>
+				<li class="tight-form-item">
+					Min&nbsp;
+					<input class="cr1" id="panel.legend.min" type="checkbox"
+					ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="legendValuesOptionChanged()">
+					<label for="panel.legend.min" class="cr1"></label>
+				</li>
+				<li class="tight-form-item">
+					Max&nbsp;
+					<input class="cr1" id="panel.legend.max" type="checkbox"
+					ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="legendValuesOptionChanged()">
+					<label for="panel.legend.max" class="cr1"></label>
+				</li>
+				<li class="tight-form-item">
+					Avg&nbsp;
+					<input class="cr1" id="panel.legend.avg" type="checkbox"
+					ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="legendValuesOptionChanged()">
+					<label for="panel.legend.avg" class="cr1"></label>
+				</li>
+				<li class="tight-form-item">
+					Current&nbsp;
+					<input class="cr1" id="panel.legend.current" type="checkbox"
+					ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="legendValuesOptionChanged()">
+					<label for="panel.legend.current" class="cr1"></label>
+				</li>
+				<li class="tight-form-item last">
+					Total&nbsp;
+					<input class="cr1" id="panel.legend.total" type="checkbox"
+					ng-model="panel.legend.total" ng-checked="panel.legend.total" ng-change="legendValuesOptionChanged()">
+					<label for="panel.legend.total" class="cr1"></label>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 </div>

src/app/panels/graph/styleEditor.html

@@ -66,35 +66,33 @@
   <div class="section">
 		<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
 		<div>
-			<div class="grafana-target" ng-repeat="override in panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
-				<div class="grafana-target-inner">
-					<ul class="grafana-segment-list">
-						<li class="grafana-target-segment">
-							<i class="fa fa-remove pointer" ng-click="removeSeriesOverride(override)"></i>
-						</li>
+			<div class="tight-form" ng-repeat="override in panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
+				<ul class="tight-form-list">
+					<li class="tight-form-item">
+						<i class="fa fa-remove pointer" ng-click="removeSeriesOverride(override)"></i>
+					</li>
 
-						<li class="grafana-target-segment">
-							alias or regex
-						</li>
-						<li>
-							<input type="text"
-							ng-model="override.alias"
-							bs-typeahead="getSeriesNames"
-							ng-blur="render()"
-							data-min-length=0 data-items=100
-							class="input-medium grafana-target-segment-input" >
-						</li>
-						<li class="grafana-target-segment" ng-repeat="option in currentOverrides">
-							<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
-							{{option.name}}: {{option.value}}
-						</li>
+					<li class="tight-form-item">
+						alias or regex
+					</li>
+					<li>
+						<input type="text"
+						ng-model="override.alias"
+						bs-typeahead="getSeriesNames"
+						ng-blur="render()"
+						data-min-length=0 data-items=100
+						class="input-medium tight-form-input" >
+					</li>
+					<li class="tight-form-item" ng-repeat="option in currentOverrides">
+						<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
+						{{option.name}}: {{option.value}}
+					</li>
 
-						<li class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
-						</li>
+					<li class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
+					</li>
 
-					</ul>
-					<div class="clearfix"></div>
-				</div>
+				</ul>
+				<div class="clearfix"></div>
 			</div>
 		</div>
 

src/app/panels/singlestat/editor.html

@@ -1,190 +1,182 @@
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
-		<div class="grafana-target">
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
-						<strong>Big value</strong>
-					</li>
-					<li class="grafana-target-segment">
-						Prefix
-					</li>
-					<li>
-						<input type="text" class="input-small grafana-target-segment-input"
-					  	ng-model="panel.prefix" ng-change="render()" ng-model-onblur>
-					</li>
-					<li class="grafana-target-segment">
-						Value
-					</li>
-					<li>
-						<select class="input-small grafana-target-segment-input" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
-					</li>
-					<li class="grafana-target-segment">
-						Postfix
-					</li>
-					<li>
-						<input type="text" class="input-small grafana-target-segment-input last"
-					  	ng-model="panel.postfix" ng-change="render()" ng-model-onblur>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
-						<strong>Font size</strong>
-					</li>
-					<li class="grafana-target-segment">
-						Prefix
-					</li>
-					<li>
-						<select class="input-small grafana-target-segment-input" style="width: 99px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
-					</li>
-					<li class="grafana-target-segment">
-						Value
-					</li>
-					<li>
-						<select class="input-small grafana-target-segment-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
-					</li>
-					<li class="grafana-target-segment">
-						Postfix
-					</li>
-					<li>
-						<select class="input-small grafana-target-segment-input last" style="width: 99px" ng-model="panel.postfixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
-						<strong>Unit</strong>
-					</li>
-					<li class="dropdown" style="width: 130px;"
-						ng-model="panel.format"
-						dropdown-typeahead="unitFormats"
-						dropdown-typeahead-on-select="setUnitFormat($subItem)">
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Big value</strong>
+				</li>
+				<li class="tight-form-item">
+					Prefix
+				</li>
+				<li>
+					<input type="text" class="input-small tight-form-input"
+					ng-model="panel.prefix" ng-change="render()" ng-model-onblur>
+				</li>
+				<li class="tight-form-item">
+					Value
+				</li>
+				<li>
+					<select class="input-small tight-form-input" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
+				</li>
+				<li class="tight-form-item">
+					Postfix
+				</li>
+				<li>
+					<input type="text" class="input-small tight-form-input last"
+					ng-model="panel.postfix" ng-change="render()" ng-model-onblur>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Font size</strong>
+				</li>
+				<li class="tight-form-item">
+					Prefix
+				</li>
+				<li>
+					<select class="input-small tight-form-input" style="width: 99px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+				</li>
+				<li class="tight-form-item">
+					Value
+				</li>
+				<li>
+					<select class="input-small tight-form-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+				</li>
+				<li class="tight-form-item">
+					Postfix
+				</li>
+				<li>
+					<select class="input-small tight-form-input last" style="width: 99px" ng-model="panel.postfixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Unit</strong>
+				</li>
+				<li class="dropdown" style="width: 130px;"
+					ng-model="panel.format"
+					dropdown-typeahead="unitFormats"
+					dropdown-typeahead-on-select="setUnitFormat($subItem)">
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 </div>
 
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
-		<div class="grafana-target">
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
-						<strong>Coloring</strong>
-					</li>
-					<li class="grafana-target-segment">
-						Background&nbsp;
-						<input class="cr1" id="panel.colorBackground" type="checkbox"
-						    ng-model="panel.colorBackground" ng-checked="panel.colorBackground" ng-change="render()">
-						<label for="panel.colorBackground" class="cr1"></label>
-					</li>
-					<li class="grafana-target-segment">
-						Value&nbsp;
-						<input class="cr1" id="panel.colorValue" type="checkbox"
-						    ng-model="panel.colorValue" ng-checked="panel.colorValue" ng-change="render()">
-						<label for="panel.colorValue" class="cr1"></label>
-					</li>
-					<li class="grafana-target-segment">
-						Thresholds<tip>Comma seperated values</tip>
-					</li>
-					<li>
-						<input type="text" class="input-large grafana-target-segment-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
-					</li>
-					<li class="grafana-target-segment">
-						Colors
-					</li>
-					<li class="grafana-target-segment">
-						<spectrum-picker ng-model="panel.colors[0]" ng-change="render()" ></spectrum-picker>
-						<spectrum-picker ng-model="panel.colors[1]" ng-change="render()" ></spectrum-picker>
-						<spectrum-picker ng-model="panel.colors[2]" ng-change="render()" ></spectrum-picker>
-					</li>
-					<li class="grafana-target-segment last">
-						<a class="pointer" ng-click="invertColorOrder()">invert order</a>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Coloring</strong>
+				</li>
+				<li class="tight-form-item">
+					Background&nbsp;
+					<input class="cr1" id="panel.colorBackground" type="checkbox"
+					ng-model="panel.colorBackground" ng-checked="panel.colorBackground" ng-change="render()">
+					<label for="panel.colorBackground" class="cr1"></label>
+				</li>
+				<li class="tight-form-item">
+					Value&nbsp;
+					<input class="cr1" id="panel.colorValue" type="checkbox"
+					ng-model="panel.colorValue" ng-checked="panel.colorValue" ng-change="render()">
+					<label for="panel.colorValue" class="cr1"></label>
+				</li>
+				<li class="tight-form-item">
+					Thresholds<tip>Comma seperated values</tip>
+				</li>
+				<li>
+					<input type="text" class="input-large tight-form-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
+				</li>
+				<li class="tight-form-item">
+					Colors
+				</li>
+				<li class="tight-form-item">
+					<spectrum-picker ng-model="panel.colors[0]" ng-change="render()" ></spectrum-picker>
+					<spectrum-picker ng-model="panel.colors[1]" ng-change="render()" ></spectrum-picker>
+					<spectrum-picker ng-model="panel.colors[2]" ng-change="render()" ></spectrum-picker>
+				</li>
+				<li class="tight-form-item last">
+					<a class="pointer" ng-click="invertColorOrder()">invert order</a>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 </div>
 
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
-		<div class="grafana-target">
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 80px">
-						<strong>Spark lines</strong>
-					</li>
-					<li class="grafana-target-segment">
-						Show&nbsp;
-						<input class="cr1" id="panel.sparkline.show" type="checkbox"
-						    ng-model="panel.sparkline.show" ng-checked="panel.sparkline.show" ng-change="render()">
-						<label for="panel.sparkline.show" class="cr1"></label>
-					</li>
-					<li class="grafana-target-segment">
-						Background mode&nbsp;
-						<input class="cr1" id="panel.sparkline.full" type="checkbox"
-						    ng-model="panel.sparkline.full" ng-checked="panel.sparkline.full" ng-change="render()">
-						<label for="panel.sparkline.full" class="cr1"></label>
-					</li>
-					<li class="grafana-target-segment">
-						Line Color
-					</li>
-					<li class="grafana-target-segment">
-						<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
-					</li>
-					<li class="grafana-target-segment">
-						Fill Color
-					</li>
-					<li class="grafana-target-segment">
-						<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 80px">
+					<strong>Spark lines</strong>
+				</li>
+				<li class="tight-form-item">
+					Show&nbsp;
+					<input class="cr1" id="panel.sparkline.show" type="checkbox"
+					ng-model="panel.sparkline.show" ng-checked="panel.sparkline.show" ng-change="render()">
+					<label for="panel.sparkline.show" class="cr1"></label>
+				</li>
+				<li class="tight-form-item">
+					Background mode&nbsp;
+					<input class="cr1" id="panel.sparkline.full" type="checkbox"
+					ng-model="panel.sparkline.full" ng-checked="panel.sparkline.full" ng-change="render()">
+					<label for="panel.sparkline.full" class="cr1"></label>
+				</li>
+				<li class="tight-form-item">
+					Line Color
+				</li>
+				<li class="tight-form-item">
+					<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
+				</li>
+				<li class="tight-form-item">
+					Fill Color
+				</li>
+				<li class="tight-form-item">
+					<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 </div>
 
 <div class="editor-row">
 	<div class="section" style="margin-bottom: 20px">
-		<div class="grafana-target">
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment">
-						<strong>Value to text mapping</strong>
-					</li>
-					<li class="grafana-target-segment"  ng-repeat-start="map in panel.valueMaps">
-						<i class="fa fa-remove pointer" ng-click="removeValueMap(map)"></i>
-					</li>
-					<li>
-						<input type="text" ng-model="map.value" placeholder="value" class="input-mini grafana-target-segment-input" ng-blur="render()">
-					</li>
-					<li class="grafana-target-segment">
-						<i class="fa fa-arrow-right"></i>
-					</li>
-					<li ng-repeat-end>
-						<input type="text" placeholder="text" ng-model="map.text" class="input-mini grafana-target-segment-input" ng-blur="render()">
-					</li>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item">
+					<strong>Value to text mapping</strong>
+				</li>
+				<li class="tight-form-item"  ng-repeat-start="map in panel.valueMaps">
+					<i class="fa fa-remove pointer" ng-click="removeValueMap(map)"></i>
+				</li>
+				<li>
+					<input type="text" ng-model="map.value" placeholder="value" class="input-mini tight-form-input" ng-blur="render()">
+				</li>
+				<li class="tight-form-item">
+					<i class="fa fa-arrow-right"></i>
+				</li>
+				<li ng-repeat-end>
+					<input type="text" placeholder="text" ng-model="map.text" class="input-mini tight-form-input" ng-blur="render()">
+				</li>
 
-					<li>
-						<a class="pointer grafana-target-segment" ng-click="addValueMap();">
-							<i class="fa fa-plus"></i>
-						</a>
-					</li>
+				<li>
+					<a class="pointer tight-form-item" ng-click="addValueMap();">
+						<i class="fa fa-plus"></i>
+					</a>
+				</li>
 
-				</ul>
-				<div class="clearfix"></div>
-			</div>
+			</ul>
+			<div class="clearfix"></div>
 		</div>
 	</div>
 </div>

src/app/partials/submenu.html

@@ -1,42 +1,40 @@
 <div class="submenu-controls" ng-controller="SubmenuCtrl">
-		<div class="grafana-target">
-			<div class="grafana-target-inner" style="border-top: none">
+	<div class="tight-form" 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="fa fa-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/features/annotations/partials/editor.html">Annotations</a></li>
-							</ul>
-						</div>
-					</li>
-				</ul>
+		<ul class="tight-form-list">
+			<li class="tight-form-item">
+				<div class="dropdown">
+					<a class="pointer" data-toggle="dropdown">
+						<i class="fa fa-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/features/annotations/partials/editor.html">Annotations</a></li>
+					</ul>
+				</div>
+			</li>
+		</ul>
 
-				<ul class="grafana-segment-list" ng-if="dashboard.templating.enable">
-					<li ng-repeat-start="variable in variables" class="grafana-target-segment template-param-name">
-						<span class="template-variable ">
-						${{variable.name}}:
-						</span>
-					</li>
+		<ul class="tight-form-list" ng-if="dashboard.templating.enable">
+			<li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
+				<span class="template-variable ">
+					${{variable.name}}:
+				</span>
+			</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 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 fa fa-bolt"></i>
-							{{annotation.name}}
-						</a>
-					</li>
-				</ul>
+		<ul class="tight-form-list" ng-if="dashboard.annotations.enable">
+			<li ng-repeat="annotation in dashboard.annotations.list" class="tight-form-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
+				<a ng-click="disableAnnotation(annotation)">
+					<i class="annotation-color-icon fa fa-bolt"></i>
+					{{annotation.name}}
+				</a>
+			</li>
+		</ul>
 
-				<div class="clearfix"></div>
-			</div>
-		</div>
+		<div class="clearfix"></div>
 	</div>
+</div>

src/css/less/forms.less

@@ -26,3 +26,4 @@ input[type="checkbox"]:checked+label {
   background: url(@checkboxImageUrl) 0px -18px no-repeat;
 }
 
+

src/css/less/grafana.less

@@ -8,6 +8,7 @@
 @import "panel.less";
 @import "forms.less";
 @import "singlestat.less";
+@import "tightform.less";
 
 .row-control-inner {
   padding:0px;
@@ -67,7 +68,7 @@
   right: 0;
   margin-left: auto;
   margin-right: auto;
-  top: 200px;
+  top: 30%;
 }
 
 .grafana-search-metric-actions {
@@ -102,175 +103,6 @@
   position:relative;
 }
 
-.grafana-target:last-child {
-  border-bottom: 1px solid @grafanaTargetBorder;
-}
-
-.grafana-target-inner {
-  border-top: 1px solid @grafanaTargetBorder;
-  border-left: 1px solid @grafanaTargetBorder;
-  border-right: 1px solid @grafanaTargetBorder;
-  background: @grafanaTargetBackground;
-  width: 100%;
-}
-
-.grafana-target-onoff {
-  display: inline-block;
-  padding: 5px 7px;
-  display: inline-block;
-}
-
-.grafana-segment-list {
-  list-style: none;
-  margin: 0;
-  >li {
-    float: left;
-  }
-}
-
-.grafana-metric-options {
-  margin-top: 35px;
-}
-
-// fix for fixed positioned panel & scrolling
-.grafana-segment-dropdown-menu {
-  margin-bottom: 70px;
-}
-
-.grafana-target-segment {
-  padding: 8px 7px;
-  display: inline-block;
-  font-weight: normal;
-  border-right: 1px solid @grafanaTargetSegmentBorder;
-  color: @grafanaTargetColor;
-  display: inline-block;
-
-  .has-open-function & {
-    padding-top: 25px;
-  }
-
-  .grafana-target-hidden & {
-    color: @grafanaTargetColorHide;
-  }
-
-  &:hover, &:focus {
-    text-decoration: none;
-  }
-  &a:hover {
-    background: @grafanaTargetFuncBackground;
-  }
-
-  &.template-param-name {
-    border-right: none;
-    padding-right: 3px;
-  }
-  &.annotation-segment {
-    padding: 8px 15px;
-  }
-
-  &.last {
-    border-right: none;
-  }
-}
-
-.grafana-target-segment-icon {
-  i {
-    width: 15px;
-    text-align: center;
-    display: inline-block;
-  }
-}
-
-.grafana-target-function {
-  background: @grafanaTargetFuncBackground;
-  > a {
-    color: @grafanaTargetColor;
-  }
-  > a:hover {
-    color: @linkColor;
-  }
-
-  &.show-function-controls {
-    padding-top: 5px;
-    min-width: 100px;
-    text-align: center;
-  }
-}
-
-input[type=text].grafana-function-param-input {
-  background: transparent;
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-input[type=text].grafana-target-text-input {
-  padding: 8px 7px;
-  border: none;
-  margin: 0px;
-  background: transparent;
-  float: left;
-  color: @grafanaTargetColor;
-  border-radius: 0;
-  border-right: 1px solid @grafanaTargetSegmentBorder;
-}
-
-[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
-  border: none;
-  border-right: 1px solid @grafanaTargetSegmentBorder;
-  margin: 0px;
-  border-radius: 0;
-  padding: 8px 4px;
-  &.last {
-    border-right: none;
-  }
-}
-
-input[type=checkbox].grafana-target-option-checkbox {
-  margin: 0;
-}
-
-select.grafana-target-segment-input {
-  border: none;
-  border-right: 1px solid @grafanaTargetSegmentBorder;
-  margin: 0px;
-  border-radius: 0;
-  height: 36px;
-  padding: 8px 5px;
-  &.last {
-    border-right: none;
-  }
-}
-
-.grafana-target .dropdown {
-  padding: 0; margin: 0;
-}
-
-.graphite-func-controls {
-  display: none;
-  text-align: center;
-
-  .fa-arrow-left {
-    float: left;
-    position: relative;
-    top: 2px;
-  }
-  .fa-arrow-right {
-    float: right;
-    position: relative;
-    top: 2px;
-  }
-  .fa-remove {
-    margin-left: 10px;
-  }
-}
-
-.grafana-target {
-  .popover-content {
-    padding: 0;
-  }
-}
-
 .scrollable {
   max-height: 300px;
   overflow: auto;

src/css/less/tightform.less

@@ -0,0 +1,173 @@
+.tight-form {
+  border-top: 1px solid @grafanaTargetBorder;
+  border-left: 1px solid @grafanaTargetBorder;
+  border-right: 1px solid @grafanaTargetBorder;
+  background: @grafanaTargetBackground;
+  width: 100%;
+
+  .dropdown {
+    padding: 0; margin: 0;
+  }
+
+  &:last-child {
+    border-bottom: 1px solid @grafanaTargetBorder;
+  }
+}
+
+.tight-form-container {
+  .tight-form:last-child {
+    border-bottom: none;
+  }
+  &:last-child {
+    border-bottom: 1px solid @grafanaTargetBorder;
+  }
+}
+
+// old graphite-segment-list
+.tight-form-list {
+  list-style: none;
+  margin: 0;
+  >li {
+    float: left;
+  }
+}
+
+.grafana-metric-options {
+  margin-top: 35px;
+}
+
+// old grafana-target-segment {
+.tight-form-item {
+  padding: 8px 7px;
+  display: inline-block;
+  font-weight: normal;
+  border-right: 1px solid @grafanaTargetSegmentBorder;
+  color: @grafanaTargetColor;
+  display: inline-block;
+
+  .has-open-function & {
+    padding-top: 25px;
+  }
+
+  // old .grafana-target-hidden & {
+  .tight-form-disabled & {
+    color: @grafanaTargetColorHide;
+  }
+
+  &:hover, &:focus {
+    text-decoration: none;
+  }
+
+  &a:hover {
+    background: @grafanaTargetFuncBackground;
+  }
+
+  &.template-param-name {
+    border-right: none;
+    padding-right: 3px;
+  }
+  &.annotation-segment {
+    padding: 8px 15px;
+  }
+
+  &.last {
+    border-right: none;
+  }
+}
+
+//.grafana-target-segment-icon {
+.tight-form-item-icon {
+  i {
+    width: 15px;
+    text-align: center;
+    display: inline-block;
+  }
+}
+
+//.grafana-target-function {
+.tight-form-func {
+  background: @grafanaTargetFuncBackground;
+  > a {
+    color: @grafanaTargetColor;
+  }
+  > a:hover {
+    color: @linkColor;
+  }
+
+  &.show-function-controls {
+    padding-top: 5px;
+    min-width: 100px;
+    text-align: center;
+  }
+}
+
+//input[type=text].grafana-function-param-input {
+input[type=text].tight-form-func-param {
+  background: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+//input[type=text].grafana-target-text-input {
+input[type=text].tight-form-clear-input {
+  padding: 8px 7px;
+  border: none;
+  margin: 0px;
+  background: transparent;
+  float: left;
+  color: @grafanaTargetColor;
+  border-radius: 0;
+  border-right: 1px solid @grafanaTargetSegmentBorder;
+}
+
+//[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
+[type=text].tight-form-input, [type=number].tight-form-input {
+  border: none;
+  border-right: 1px solid @grafanaTargetSegmentBorder;
+  margin: 0px;
+  border-radius: 0;
+  padding: 8px 4px;
+  &.last {
+    border-right: none;
+  }
+}
+
+//input[type=checkbox].grafana-target-option-checkbox {
+input[type=checkbox].tight-form-checkbox {
+  margin: 0;
+}
+
+select.tight-form-input {
+  border: none;
+  border-right: 1px solid @grafanaTargetSegmentBorder;
+  margin: 0px;
+  border-radius: 0;
+  height: 36px;
+  padding: 8px 5px;
+  &.last {
+    border-right: none;
+  }
+}
+
+//.graphite-func-controls {
+.tight-form-func-controls {
+  display: none;
+  text-align: center;
+
+  .fa-arrow-left {
+    float: left;
+    position: relative;
+    top: 2px;
+  }
+  .fa-arrow-right {
+    float: right;
+    position: relative;
+    top: 2px;
+  }
+  .fa-remove {
+    margin-left: 10px;
+  }
+}
+
+

src/vendor/bootstrap/less/modals.less

@@ -22,7 +22,7 @@
 
 // Base modal
 .modal {
-  position: absolute;
+  position: fixed;
   z-index: @zindexModal;
   width: 100%;
   background-color: @white;