Revert files

2025-02-25 18:55:37 -06:00 · 2018-04-08 20:40:09 +02:00
parent cfd1f5c072
commit c4b57a2562
42 changed files with 1201 additions and 1104 deletions
--- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
@@ -1,37 +1,34 @@
 import React, { Component } from 'react';

 export interface IProps {
-  model: any;
+    model: any;
 }

 class EmptyListCTA extends Component<IProps, any> {
-  render() {
-    const {
-      title,
-      buttonIcon,
-      buttonLink,
-      buttonTitle,
-      proTip,
-      proTipLink,
-      proTipLinkTitle,
-      proTipTarget,
-    } = this.props.model;
-    return (
-      <div className="empty-list-cta">
-        <div className="empty-list-cta__title">{title}</div>
-        <a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success">
-          <i className={buttonIcon} />
-          {buttonTitle}
-        </a>
-        <div className="empty-list-cta__pro-tip">
-          <i className="fa fa-rocket" /> ProTip: {proTip}
-          <a className="text-link empty-list-cta__pro-tip-link" href={proTipLink} target={proTipTarget}>
-            {proTipLinkTitle}
-          </a>
-        </div>
-      </div>
-    );
-  }
+    render() {
+        const {
+            title,
+            buttonIcon,
+            buttonLink,
+            buttonTitle,
+            proTip,
+            proTipLink,
+            proTipLinkTitle,
+            proTipTarget
+        } = this.props.model;
+        return (
+            <div className="empty-list-cta">
+                <div className="empty-list-cta__title">{title}</div>
+                <a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success"><i className={buttonIcon} />{buttonTitle}</a>
+                <div className="empty-list-cta__pro-tip">
+                    <i className="fa fa-rocket" /> ProTip: {proTip}
+                    <a className="text-link empty-list-cta__pro-tip-link"
+                        href={proTipLink}
+                        target={proTipTarget}>{proTipLinkTitle}</a>
+                </div>
+            </div>
+        );
+    }
 }

 export default EmptyListCTA;
--- a/public/app/core/components/Login/LoginBackground.tsx
+++ b/public/app/core/components/Login/LoginBackground.tsx
@@ -4,14 +4,10 @@ const xCount = 50;
 const yCount = 50;

 function Cell({ x, y, flipIndex }) {
-  const index = y * xCount + x;
+  const index = (y * xCount) + x;
  const bgColor1 = getColor(x, y);
  return (
-    <div
-      className={`login-bg__item ${flipIndex === index ? 'login-bg-flip' : ''}`}
-      key={index}
-      style={{ background: bgColor1 }}
-    />
+    <div className={`login-bg__item ${flipIndex === index ? 'login-bg-flip' : ''}`} key={index} style={{background: bgColor1}} />
  );
 }

@@ -35,7 +31,7 @@ export default class LoginBackground extends Component<any, any> {
  }

  flipElements() {
-    const elementIndexToFlip = getRandomInt(0, xCount * yCount - 1);
+    const elementIndexToFlip = getRandomInt(0, (xCount * yCount) - 1);
    this.setState(prevState => {
      return {
        ...prevState,
@@ -61,7 +57,9 @@ export default class LoginBackground extends Component<any, any> {
          return (
            <div className="login-bg__row">
              {Array.from(Array(xCount)).map((el2, x) => {
-                return <Cell y={y} x={x} flipIndex={this.state.flipIndex} />;
+                return (
+                  <Cell y={y} x={x} flipIndex={this.state.flipIndex} />
+                );
              })}
            </div>
          );
@@ -1238,5 +1236,5 @@ function getColor(x, y) {
  // let randY = getRandomInt(0, y);
  // let randIndex = randY * xCount + randX;

-  return colors[(y * xCount + x) % colors.length];
+  return colors[(y*xCount + x) % colors.length];
 }
--- a/public/app/core/components/PasswordStrength.tsx
+++ b/public/app/core/components/PasswordStrength.tsx
@@ -5,27 +5,28 @@ export interface IProps {
 }

 export class PasswordStrength extends React.Component<IProps, any> {
+
  constructor(props) {
    super(props);
  }

  render() {
    const { password } = this.props;
-    let strengthText = 'strength: strong like a bull.';
-    let strengthClass = 'password-strength-good';
+    let strengthText = "strength: strong like a bull.";
+    let strengthClass = "password-strength-good";

    if (!password) {
      return null;
    }

    if (password.length <= 8) {
-      strengthText = 'strength: you can do better.';
-      strengthClass = 'password-strength-ok';
+      strengthText = "strength: you can do better.";
+      strengthClass = "password-strength-ok";
    }

    if (password.length < 4) {
-      strengthText = 'strength: weak sauce.';
-      strengthClass = 'password-strength-bad';
+      strengthText = "strength: weak sauce.";
+      strengthClass = "password-strength-bad";
    }

    return (
@@ -35,3 +36,5 @@ export class PasswordStrength extends React.Component<IProps, any> {
    );
  }
 }
+
+
--- a/public/app/core/components/colorpicker/ColorPalette.tsx
+++ b/public/app/core/components/colorpicker/ColorPalette.tsx
@@ -29,8 +29,7 @@ export class ColorPalette extends React.Component<IProps, any> {
          key={paletteColor}
          className={'pointer fa ' + cssClass}
          style={{ color: paletteColor }}
-          onClick={this.onColorSelect(paletteColor)}
-        >
+          onClick={this.onColorSelect(paletteColor)}>
          &nbsp;
        </i>
      );
@@ -42,3 +41,4 @@ export class ColorPalette extends React.Component<IProps, any> {
    );
  }
 }
+
--- a/public/app/core/components/colorpicker/ColorPickerPopover.tsx
+++ b/public/app/core/components/colorpicker/ColorPickerPopover.tsx
@@ -19,7 +19,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
    this.state = {
      tab: 'palette',
      color: this.props.color || DEFAULT_COLOR,
-      colorString: this.props.color || DEFAULT_COLOR,
+      colorString: this.props.color || DEFAULT_COLOR
    };
  }

@@ -32,7 +32,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
    if (newColor.isValid()) {
      this.setState({
        color: newColor.toString(),
-        colorString: newColor.toString(),
+        colorString: newColor.toString()
      });
      this.props.onColorSelect(color);
    }
@@ -50,7 +50,7 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
  onColorStringChange(e) {
    let colorString = e.target.value;
    this.setState({
-      colorString: colorString,
+      colorString: colorString
    });

    let newColor = tinycolor(colorString);
@@ -71,11 +71,11 @@ export class ColorPickerPopover extends React.Component<IProps, any> {

  componentDidMount() {
    this.pickerNavElem.find('li:first').addClass('active');
-    this.pickerNavElem.on('show', e => {
+    this.pickerNavElem.on('show', (e) => {
      // use href attr (#name => name)
      let tab = e.target.hash.slice(1);
      this.setState({
-        tab: tab,
+        tab: tab
      });
    });
  }
@@ -97,24 +97,19 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
      <div className="gf-color-picker">
        <ul className="nav nav-tabs" id="colorpickernav" ref={this.setPickerNavElem.bind(this)}>
          <li className="gf-tabs-item-colorpicker">
-            <a href="#palette" data-toggle="tab">
-              Colors
-            </a>
+            <a href="#palette" data-toggle="tab">Colors</a>
          </li>
          <li className="gf-tabs-item-colorpicker">
-            <a href="#spectrum" data-toggle="tab">
-              Custom
-            </a>
+            <a href="#spectrum" data-toggle="tab">Custom</a>
          </li>
        </ul>
-        <div className="gf-color-picker__body">{currentTab}</div>
+        <div className="gf-color-picker__body">
+          {currentTab}
+        </div>
        <div>
-          <input
-            className="gf-form-input gf-form-input--small"
-            value={this.state.colorString}
-            onChange={this.onColorStringChange.bind(this)}
-            onBlur={this.onColorStringBlur.bind(this)}
-          />
+          <input className="gf-form-input gf-form-input--small" value={this.state.colorString}
+            onChange={this.onColorStringChange.bind(this)} onBlur={this.onColorStringBlur.bind(this)}>
+          </input>
        </div>
      </div>
    );
--- a/public/app/core/components/colorpicker/SpectrumPicker.tsx
+++ b/public/app/core/components/colorpicker/SpectrumPicker.tsx
@@ -29,17 +29,14 @@ export class SpectrumPicker extends React.Component<IProps, any> {
  }

  componentDidMount() {
-    let spectrumOptions = _.assignIn(
-      {
-        flat: true,
-        showAlpha: true,
-        showButtons: false,
-        color: this.props.color,
-        appendTo: this.elem,
-        move: this.onSpectrumMove,
-      },
-      this.props.options
-    );
+    let spectrumOptions = _.assignIn({
+      flat: true,
+      showAlpha: true,
+      showButtons: false,
+      color: this.props.color,
+      appendTo: this.elem,
+      move: this.onSpectrumMove,
+    }, this.props.options);

    this.elem.spectrum(spectrumOptions);
    this.elem.spectrum('show');
@@ -67,6 +64,9 @@ export class SpectrumPicker extends React.Component<IProps, any> {
  }

  render() {
-    return <div className="spectrum-container" ref={this.setComponentElem} />;
+    return (
+      <div className="spectrum-container" ref={this.setComponentElem}></div>
+    );
  }
 }
+
--- a/public/app/core/specs/PasswordStrength.jest.tsx
+++ b/public/app/core/specs/PasswordStrength.jest.tsx
@@ -1,21 +1,24 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import {shallow} from 'enzyme';

-import { PasswordStrength } from '../components/PasswordStrength';
+import {PasswordStrength} from '../components/PasswordStrength';

 describe('PasswordStrength', () => {
+
  it('should have class bad if length below 4', () => {
    const wrapper = shallow(<PasswordStrength password="asd" />);
-    expect(wrapper.find('.password-strength-bad')).toHaveLength(1);
+    expect(wrapper.find(".password-strength-bad")).toHaveLength(1);
  });

  it('should have class ok if length below 8', () => {
    const wrapper = shallow(<PasswordStrength password="asdasd" />);
-    expect(wrapper.find('.password-strength-ok')).toHaveLength(1);
+    expect(wrapper.find(".password-strength-ok")).toHaveLength(1);
  });

  it('should have class good if length above 8', () => {
    const wrapper = shallow(<PasswordStrength password="asdaasdda" />);
-    expect(wrapper.find('.password-strength-good')).toHaveLength(1);
+    expect(wrapper.find(".password-strength-good")).toHaveLength(1);
  });
+
 });
+
--- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { PanelModel } from '../panel_model';
-import { PanelContainer } from './PanelContainer';
-import { AttachedPanel } from './PanelLoader';
-import { DashboardRow } from './DashboardRow';
-import { AddPanelPanel } from './AddPanelPanel';
+import {PanelModel} from '../panel_model';
+import {PanelContainer} from './PanelContainer';
+import {AttachedPanel} from './PanelLoader';
+import {DashboardRow} from './DashboardRow';
+import {AddPanelPanel} from './AddPanelPanel';

 export interface DashboardPanelProps {
  panel: PanelModel;
@@ -46,6 +46,9 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
      return <AddPanelPanel panel={this.props.panel} getPanelContainer={this.props.getPanelContainer} />;
    }

-    return <div ref={element => (this.element = element)} className="panel-height-helper" />;
+    return (
+      <div ref={element => this.element = element} className="panel-height-helper" />
+    );
  }
 }
+
--- a/public/app/features/templating/query_variable.ts
+++ b/public/app/features/templating/query_variable.ts
@@ -198,9 +198,7 @@ export class QueryVariable implements Variable {
        }
      });
    } else if (sortType === 3) {
-      options = _.sortBy(options, opt => {
-        return _.toLower(opt.text);
-      });
+      options = _.sortBy(options, opt => { return _.toLower(opt.text); });
    }

    if (reverseSort) {
--- a/public/sass/_variables.scss
+++ b/public/sass/_variables.scss
@@ -53,9 +53,9 @@ $enable-flex: true;
 // Typography
 // -------------------------

-$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif;
-$font-family-serif: Georgia, 'Times New Roman', Times, serif;
-$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
+$font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;
+$font-family-serif: Georgia, "Times New Roman", Times, serif;
+$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 $font-family-base: $font-family-sans-serif !default;

 $font-size-root: 14px !default;
@@ -90,7 +90,7 @@ $lead-font-size: 1.25rem !default;
 $lead-font-weight: 300 !default;

 $headings-margin-bottom: ($spacer / 2) !default;
-$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$headings-font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $headings-font-weight: 400 !default;
 $headings-line-height: 1.1 !default;

@@ -152,9 +152,16 @@ $input-padding-y-sm: 4px !default;
 $input-padding-x-lg: 20px !default;
 $input-padding-y-lg: 10px !default;

-$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
-$input-height-lg: ( ($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
-$input-height-sm: ( ($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
+$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2))
+  !default;
+$input-height-lg: (
+     ($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)
+  )
+  !default;
+$input-height-sm: (
+     ($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)
+  )
+  !default;

 $form-group-margin-bottom: $spacer-y !default;
 $gf-form-margin: 0.2rem;
@@ -214,9 +221,9 @@ $panel-padding: 0px 10px 5px 10px;
 $tabs-padding: 10px 15px 9px;

 $external-services: (
-    github: (bgColor: #464646, borderColor: #393939, icon: ''),
-    google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''),
-    grafanacom: (bgColor: inherit, borderColor: #393939, icon: ''),
-    oauth: (bgColor: inherit, borderColor: #393939, icon: '')
+    github: (bgColor: #464646, borderColor: #393939, icon: ""),
+    google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ""),
+    grafanacom: (bgColor: inherit, borderColor: #393939, icon: ""),
+    oauth: (bgColor: inherit, borderColor: #393939, icon: "")
  )
  !default;
--- a/public/sass/base/_font_awesome.scss
+++ b/public/sass/base/_font_awesome.scss
@@ -3,16 +3,16 @@
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */

-@import './font-awesome/variables';
-@import './font-awesome/mixins';
-@import './font-awesome/path';
-@import './font-awesome/core';
-@import './font-awesome/larger';
-@import './font-awesome/fixed-width';
-@import './font-awesome/list';
-@import './font-awesome/bordered-pulled';
-@import './font-awesome/animated';
-@import './font-awesome/rotated-flipped';
-@import './font-awesome/stacked';
-@import './font-awesome/icons';
-@import './font-awesome/screen-reader';
+@import "./font-awesome/variables";
+@import "./font-awesome/mixins";
+@import "./font-awesome/path";
+@import "./font-awesome/core";
+@import "./font-awesome/larger";
+@import "./font-awesome/fixed-width";
+@import "./font-awesome/list";
+@import "./font-awesome/bordered-pulled";
+@import "./font-awesome/animated";
+@import "./font-awesome/rotated-flipped";
+@import "./font-awesome/stacked";
+@import "./font-awesome/icons";
+@import "./font-awesome/screen-reader";
--- a/public/sass/base/_forms.scss
+++ b/public/sass/base/_forms.scss
@@ -58,19 +58,19 @@ textarea {
 }

 // Reset width of input images, buttons, radios, checkboxes
-input[type='file'],
-input[type='image'],
-input[type='submit'],
-input[type='reset'],
-input[type='button'],
-input[type='radio'],
-input[type='checkbox'] {
+input[type="file"],
+input[type="image"],
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"] {
  width: auto; // Override of generic input selector
 }

 // Set the height of select and file controls to match text inputs
 select,
-input[type='file'] {
+input[type="file"] {
  height: $input-height; /* In IE7, the height of the select element cannot be changed by height, only font-size */
  line-height: $input-height;
 }
@@ -90,19 +90,19 @@ select[size] {

 // Focus for select, file, radio, and checkbox
 select:focus,
-input[type='file']:focus,
-input[type='radio']:focus,
-input[type='checkbox']:focus {
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
  @include tab-focus();
 }

 // not a big fan of number fields
-input[type='number']::-webkit-outer-spin-button,
-input[type='number']::-webkit-inner-spin-button {
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
 }
-input[type='number'] {
+input[type="number"] {
  -moz-appearance: textfield;
 }
 // Placeholder
@@ -155,15 +155,15 @@ textarea[readonly] {
 }

 // Explicitly reset the colors here
-input[type='radio'][disabled],
-input[type='checkbox'][disabled],
-input[type='radio'][readonly],
-input[type='checkbox'][readonly] {
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
  cursor: $cursor-disabled;
  background-color: transparent;
 }

-input[type='text'].input-fluid {
+input[type="text"].input-fluid {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
@@ -172,7 +172,7 @@ input[type='text'].input-fluid {
  height: 100%;
 }

-input[type='checkbox'].cr1 {
+input[type="checkbox"].cr1 {
  display: none;
 }

@@ -194,7 +194,7 @@ label.cr1 {
  cursor: pointer;
 }

-input[type='checkbox'].cr1:checked + label {
+input[type="checkbox"].cr1:checked + label {
  background: url($checkboxImageUrl) 0px -18px no-repeat;
 }

@@ -203,7 +203,7 @@ input[type='checkbox'].cr1:checked + label {
  display: block;
  overflow: hidden;
  padding-right: 10px;
-  input[type='text'] {
+  input[type="text"] {
    width: 100%;
    padding: 5px 6px;
    height: 100%;
--- a/public/sass/base/_grafana_icons.scss
+++ b/public/sass/base/_grafana_icons.scss
@@ -1,17 +1,18 @@
@font-face {
-  font-family: 'grafana-icons';
-  src: url('../fonts/grafana-icons.eot?okx5td');
-  src: url('../fonts/grafana-icons.eot?okx5td#iefix') format('embedded-opentype'),
-    url('../fonts/grafana-icons.ttf?okx5td') format('truetype'),
-    url('../fonts/grafana-icons.woff?okx5td') format('woff'),
-    url('../fonts/grafana-icons.svg?okx5td#grafana-icons') format('svg');
+  font-family: "grafana-icons";
+  src: url("../fonts/grafana-icons.eot?okx5td");
+  src: url("../fonts/grafana-icons.eot?okx5td#iefix")
+      format("embedded-opentype"),
+    url("../fonts/grafana-icons.ttf?okx5td") format("truetype"),
+    url("../fonts/grafana-icons.woff?okx5td") format("woff"),
+    url("../fonts/grafana-icons.svg?okx5td#grafana-icons") format("svg");
  font-weight: normal;
  font-style: normal;
 }

 .icon-gf {
  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'grafana-icons' !important;
+  font-family: "grafana-icons" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
@@ -36,165 +37,165 @@
 }

 .icon-gf-raintank_wordmark:before {
-  content: '\e600';
+  content: "\e600";
 }
 .micon-gf-raintank_icn:before {
-  content: '\e601';
+  content: "\e601";
 }
 .icon-gf-raintank_r-icn:before {
-  content: '\e905';
+  content: "\e905";
 }
 .icon-gf-check-alt:before {
-  content: '\e603';
+  content: "\e603";
 }
 .icon-gf-check:before {
-  content: '\e604';
+  content: "\e604";
 }
 .icon-gf-collector:before {
-  content: '\e605';
+  content: "\e605";
 }
 .icon-gf-dashboard:before {
-  content: '\e606';
+  content: "\e606";
 }
 .icon-gf-panel:before {
-  content: '\e904';
+  content: "\e904";
 }
 .icon-gf-datasources:before {
-  content: '\e607';
+  content: "\e607";
 }
 .icon-gf-endpoint-tiny:before {
-  content: '\e608';
+  content: "\e608";
 }
 .icon-gf-endpoint:before {
-  content: '\e609';
+  content: "\e609";
 }
 .icon-gf-page:before {
-  content: '\e908';
+  content: "\e908";
 }
 .icon-gf-filter:before {
-  content: '\e60a';
+  content: "\e60a";
 }
 .icon-gf-status:before {
-  content: '\e60b';
+  content: "\e60b";
 }
 .icon-gf-monitoring:before {
-  content: '\e60c';
+  content: "\e60c";
 }
 .icon-gf-monitoring-tiny:before {
-  content: '\e620';
+  content: "\e620";
 }
 .icon-gf-jump-to-dashboard:before {
-  content: '\e60d';
+  content: "\e60d";
 }
 .icon-gf-warn,
 .icon-gf-warning:before {
-  content: '\e60e';
+  content: "\e60e";
 }
 .icon-gf-nodata:before {
-  content: '\e60f';
+  content: "\e60f";
 }
 .icon-gf-critical:before {
-  content: '\e610';
+  content: "\e610";
 }
 .icon-gf-crit:before {
-  content: '\e610';
+  content: "\e610";
 }
 .icon-gf-online:before {
-  content: '\e611';
+  content: "\e611";
 }
 .icon-gf-event-error:before {
-  content: '\e623';
+  content: "\e623";
 }
 .icon-gf-event:before {
-  content: '\e624';
+  content: "\e624";
 }
 .icon-gf-sadface:before {
-  content: '\e907';
+  content: "\e907";
 }
 .icon-gf-private-collector:before {
-  content: '\e612';
+  content: "\e612";
 }
 .icon-gf-alert:before {
-  content: '\e61f';
+  content: "\e61f";
 }
 .icon-gf-alert-disabled:before {
-  content: '\e621';
+  content: "\e621";
 }
 .icon-gf-refresh:before {
-  content: '\e613';
+  content: "\e613";
 }
 .icon-gf-save:before {
-  content: '\e614';
+  content: "\e614";
 }
 .icon-gf-share:before {
-  content: '\e616';
+  content: "\e616";
 }
 .icon-gf-star:before {
-  content: '\e617';
+  content: "\e617";
 }
 .icon-gf-search:before {
-  content: '\e618';
+  content: "\e618";
 }
 .icon-gf-settings:before {
-  content: '\e615';
+  content: "\e615";
 }
 .icon-gf-add:before {
-  content: '\e619';
+  content: "\e619";
 }
 .icon-gf-remove:before {
-  content: '\e61a';
+  content: "\e61a";
 }
 .icon-gf-video:before {
-  content: '\e61b';
+  content: "\e61b";
 }
 .icon-gf-bulk_action:before {
-  content: '\e61c';
+  content: "\e61c";
 }
 .icon-gf-grabber:before {
-  content: '\e90b';
+  content: "\e90b";
 }
 .icon-gf-users:before {
-  content: '\e622';
+  content: "\e622";
 }
 .icon-gf-globe:before {
-  content: '\e61d';
+  content: "\e61d";
 }
 .icon-gf-snapshot:before {
-  content: '\e61e';
+  content: "\e61e";
 }
 .icon-gf-play-grafana-icon:before {
-  content: '\e629';
+  content: "\e629";
 }
 .icon-gf-grafana-icon:before {
-  content: '\e625';
+  content: "\e625";
 }
 .icon-gf-email:before {
-  content: '\e628';
+  content: "\e628";
 }
 .icon-gf-stopwatch:before {
-  content: '\e626';
+  content: "\e626";
 }
 .icon-gf-skull:before {
-  content: '\e900';
+  content: "\e900";
 }
 .icon-gf-probe:before {
-  content: '\e901';
+  content: "\e901";
 }
 .icon-gf-apps:before {
-  content: '\e902';
+  content: "\e902";
 }
 .icon-gf-scale:before {
-  content: '\e906';
+  content: "\e906";
 }
 .icon-gf-pending:before {
-  content: '\e909';
+  content: "\e909";
 }
 .icon-gf-verified:before {
-  content: '\e90a';
+  content: "\e90a";
 }
 .icon-gf-worldping:before {
-  content: '\e627';
+  content: "\e627";
 }
 .icon-gf-grafana_wordmark:before {
-  content: '\e903';
+  content: "\e903";
 }
--- a/public/sass/base/_normalize.scss
+++ b/public/sass/base/_normalize.scss
@@ -291,9 +291,9 @@ select {
 //

 button,
-html input[type='button'],
-// 1 input[type='reset'],
-input[type='submit'] {
+html input[type="button"],
+// 1 input[type="reset"],
+input[type="submit"] {
  -webkit-appearance: button; // 2
  cursor: pointer; // 3
 }
@@ -334,8 +334,8 @@ input {
 // 2. Remove excess padding in IE 8/9/10.
 //

-input[type='checkbox'],
-input[type='radio'] {
+input[type="checkbox"],
+input[type="radio"] {
  box-sizing: border-box; // 1
  padding: 0; // 2
 }
@@ -346,8 +346,8 @@ input[type='radio'] {
 // decrement button to change from `default` to `text`.
 //

-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
  height: auto;
 }

@@ -355,7 +355,7 @@ input[type='number']::-webkit-outer-spin-button {
 // Address `appearance` set to `searchfield` in Safari and Chrome.
 //

-input[type='search'] {
+input[type="search"] {
  -webkit-appearance: textfield;
 }

@@ -365,8 +365,8 @@ input[type='search'] {
 // padding (and `textfield` appearance).
 //

-input[type='search']::-webkit-search-cancel-button,
-input[type='search']::-webkit-search-decoration {
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
 }

--- a/public/sass/base/_reboot.scss
+++ b/public/sass/base/_reboot.scss
@@ -87,7 +87,7 @@ body {
 // might still respond to pointer events.
 //
 // Credit: https://github.com/suitcss/base
-[tabindex='-1']:focus {
+[tabindex="-1"]:focus {
  outline: none !important;
 }

@@ -214,7 +214,7 @@ img {
 // for traditionally non-focusable elements with role="button"
 // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

-[role='button'] {
+[role="button"] {
  cursor: pointer;
 }

@@ -231,7 +231,7 @@ img {
 a,
 area,
 button,
-[role='button'],
+[role="button"],
 input,
 label,
 select,
@@ -320,7 +320,7 @@ legend {
  //  border: 0;
 }

-input[type='search'] {
+input[type="search"] {
  // This overrides the extra rounded corners on search inputs in iOS so that our
  // `.form-control` class can properly style them. Note that this cannot simply
  // be added to `.form-control` as it's not specific enough. For details, see
--- a/public/sass/base/font-awesome/_core.scss
+++ b/public/sass/base/font-awesome/_core.scss
@@ -3,7 +3,8 @@

 .#{$fa-css-prefix} {
  display: inline-block;
-  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
+  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base}
+    FontAwesome; // shortening font declaration
  font-size: inherit; // can't have font-size inherit on line above, so need to override
  text-rendering: auto; // optimizelegibility throws things off #1094
  -webkit-font-smoothing: antialiased;
--- a/public/sass/base/font-awesome/_mixins.scss
+++ b/public/sass/base/font-awesome/_mixins.scss
@@ -3,7 +3,8 @@

@mixin fa-icon() {
  display: inline-block;
-  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
+  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base}
+    FontAwesome; // shortening font declaration
  font-size: inherit; // can't have font-size inherit on line above, so need to override
  text-rendering: auto; // optimizelegibility throws things off #1094
  -webkit-font-smoothing: antialiased;
@@ -11,14 +12,14 @@
 }

@mixin fa-icon-rotate($degrees, $rotation) {
-  -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})';
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
  -webkit-transform: rotate($degrees);
  -ms-transform: rotate($degrees);
  transform: rotate($degrees);
 }

@mixin fa-icon-flip($horiz, $vert, $rotation) {
-  -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)';
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
  -webkit-transform: scale($horiz, $vert);
  -ms-transform: scale($horiz, $vert);
  transform: scale($horiz, $vert);
--- a/public/sass/base/font-awesome/_path.scss
+++ b/public/sass/base/font-awesome/_path.scss
@@ -2,13 +2,18 @@
 * -------------------------- */

@font-face {
-  font-family: 'FontAwesome';
-  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
-  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
-    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
-    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
-    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
-    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
+  font-family: "FontAwesome";
+  src: url("#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}");
+  src: url("#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}")
+      format("embedded-opentype"),
+    url("#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}")
+      format("woff2"),
+    url("#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}")
+      format("woff"),
+    url("#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}")
+      format("truetype"),
+    url("#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular")
+      format("svg");
  //  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
--- a/public/sass/base/font-awesome/_variables.scss
+++ b/public/sass/base/font-awesome/_variables.scss
--- a/public/sass/components/_drop.scss
+++ b/public/sass/components/_drop.scss
@@ -5,13 +5,13 @@ $useDropShadow: false;
 $attachmentOffset: 0%;
 $easing: cubic-bezier(0, 0, 0.265, 1);

-@include drop-theme('error', $popover-error-bg, $popover-color);
-@include drop-theme('popover', $popover-bg, $popover-color, $popover-border-color);
-@include drop-theme('help', $popover-help-bg, $popover-help-color);
+@include drop-theme("error", $popover-error-bg, $popover-color);
+@include drop-theme("popover", $popover-bg, $popover-color, $popover-border-color);
+@include drop-theme("help", $popover-help-bg, $popover-help-color);

-@include drop-animation-scale('drop', 'help', $attachmentOffset: $attachmentOffset, $easing: $easing);
-@include drop-animation-scale('drop', 'error', $attachmentOffset: $attachmentOffset, $easing: $easing);
-@include drop-animation-scale('drop', 'popover', $attachmentOffset: $attachmentOffset, $easing: $easing);
+@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
+@include drop-animation-scale("drop", "error", $attachmentOffset: $attachmentOffset, $easing: $easing);
+@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);

 .drop-element {
  z-index: 10000;
--- a/public/sass/components/_filter-list.scss
+++ b/public/sass/components/_filter-list.scss
@@ -67,17 +67,17 @@
  text-transform: uppercase;

  &.online {
-    background-image: url('/img/online.svg');
+    background-image: url("/img/online.svg");
    color: $online;
  }

  &.warn {
-    background-image: url('/img/warn-tiny.svg');
+    background-image: url("/img/warn-tiny.svg");
    color: $warn;
  }

  &.critical {
-    background-image: url('/img/critical.svg');
+    background-image: url("/img/critical.svg");
    color: $critical;
  }
 }
--- a/public/sass/components/_footer.scss
+++ b/public/sass/components/_footer.scss
@@ -25,7 +25,7 @@
    display: inline-block;
    padding-right: 2px;
    &::after {
-      content: ' | ';
+      content: " | ";
      padding-left: 2px;
    }
  }
@@ -33,7 +33,7 @@
  li:last-child {
    &::after {
      padding-left: 0;
-      content: '';
+      content: "";
    }
  }
 }
--- a/public/sass/components/_json_explorer.scss
+++ b/public/sass/components/_json_explorer.scss
@@ -21,10 +21,10 @@
        display: none;
      }
      &.json-formatter-object::after {
-        content: 'No properties';
+        content: "No properties";
      }
      &.json-formatter-array::after {
-        content: '[]';
+        content: "[]";
      }
    }
  }
@@ -87,7 +87,7 @@
    &::after {
      display: inline-block;
      transition: transform $json-explorer-rotate-time ease-in;
-      content: '►';
+      content: "►";
    }
  }

--- a/public/sass/components/_jsontree.scss
+++ b/public/sass/components/_jsontree.scss
@@ -35,12 +35,12 @@ json-tree {
    color: $variable;
    padding: 5px 10px 5px 15px;
    &::after {
-      content: ':';
+      content: ":";
    }
  }
  json-node.expandable {
    &::before {
-      content: '\25b6';
+      content: "\25b6";
      position: absolute;
      left: 0px;
      font-size: 8px;
--- a/public/sass/components/_panel_gettingstarted.scss
+++ b/public/sass/components/_panel_gettingstarted.scss
@@ -52,7 +52,7 @@ $path-position: $marker-size-half - ($path-height / 2);

  &::after {
    right: -50%;
-    content: '';
+    content: "";
    display: block;
    position: absolute;
    z-index: 1;
@@ -105,7 +105,7 @@ $path-position: $marker-size-half - ($path-height / 2);

      // change icon to check
      .icon-gf::before {
-        content: '\e604';
+        content: "\e604";
      }
    }
    .progress-text {
--- a/public/sass/components/_row.scss
+++ b/public/sass/components/_row.scss
@@ -69,7 +69,7 @@
  cursor: move;
  width: 1rem;
  height: 100%;
-  background: url('../img/grab_dark.svg') no-repeat 50% 50%;
+  background: url("../img/grab_dark.svg") no-repeat 50% 50%;
  background-size: 8px;
  visibility: hidden;
  position: absolute;
--- a/public/sass/components/_shortcuts.scss
+++ b/public/sass/components/_shortcuts.scss
@@ -33,7 +33,7 @@
  text-align: center;
  margin-right: 0.3rem;
  padding: 3px 5px;
-  font: 11px Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
  line-height: 10px;
  color: #555;
  vertical-align: middle;
--- a/public/sass/components/_switch.scss
+++ b/public/sass/components/_switch.scss
@@ -64,8 +64,8 @@
  }

  input + label::before {
-    font-family: 'FontAwesome';
-    content: '\f096'; // square-o
+    font-family: "FontAwesome";
+    content: "\f096"; // square-o
    color: $text-color-weak;
    transition: transform 0.4s;
    backface-visibility: hidden;
@@ -73,11 +73,11 @@
  }

  input + label::after {
-    content: '\f046'; // check-square-o
+    content: "\f046"; // check-square-o
    color: $orange;
    text-shadow: $text-shadow-strong;

-    font-family: 'FontAwesome';
+    font-family: "FontAwesome";
    transition: transform 0.4s;
    transform: rotateY(180deg);
    backface-visibility: hidden;
--- a/public/sass/components/_tabs.scss
+++ b/public/sass/components/_tabs.scss
@@ -44,13 +44,18 @@

    &::before {
      display: block;
-      content: ' ';
+      content: " ";
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      top: 0;
-      background-image: linear-gradient(to right, #ffd500 0%, #ff4400 99%, #ff4400 100%);
+      background-image: linear-gradient(
+        to right,
+        #ffd500 0%,
+        #ff4400 99%,
+        #ff4400 100%
+      );
    }
  }
 }
--- a/public/sass/components/_timepicker.scss
+++ b/public/sass/components/_timepicker.scss
@@ -103,10 +103,10 @@
 }

 .fa-chevron-left::before {
-  content: '\f053';
+  content: "\f053";
 }
 .fa-chevron-right::before {
-  content: '\f054';
+  content: "\f054";
 }

 .glyphicon-chevron-right {
--- a/public/sass/mixins/_drop_element.scss
+++ b/public/sass/mixins/_drop_element.scss
@@ -15,7 +15,7 @@
      border: 1px solid $border-color;

      &:before {
-        content: '';
+        content: "";
        display: block;
        position: absolute;
        width: 0;
@@ -88,7 +88,8 @@
      left: $popover-arrow-size * 2;
    }

-    &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content {
+    &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle
+      .drop-content {
      margin-top: $popover-arrow-size;

      &:before {
@@ -98,7 +99,8 @@
      }
    }

-    &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content {
+    &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle
+      .drop-content {
      margin-top: $popover-arrow-size;

      &:before {
@@ -108,7 +110,8 @@
      }
    }

-    &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content {
+    &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle
+      .drop-content {
      margin-bottom: $popover-arrow-size;

      &:before {
@@ -118,7 +121,8 @@
      }
    }

-    &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content {
+    &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle
+      .drop-content {
      margin-bottom: $popover-arrow-size;

      &:before {
@@ -129,7 +133,8 @@
    }

    // Top and bottom corners
-    &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
+    &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom
+      .drop-content {
      margin-top: $popover-arrow-size;

      &:before {
@@ -139,7 +144,8 @@
      }
    }

-    &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
+    &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom
+      .drop-content {
      margin-top: $popover-arrow-size;

      &:before {
@@ -149,7 +155,8 @@
      }
    }

-    &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
+    &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top
+      .drop-content {
      margin-bottom: $popover-arrow-size;

      &:before {
@@ -159,7 +166,8 @@
      }
    }

-    &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
+    &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top
+      .drop-content {
      margin-bottom: $popover-arrow-size;

      &:before {
@@ -170,7 +178,8 @@
    }

    // Side corners
-    &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
+    &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left
+      .drop-content {
      margin-right: $popover-arrow-size;

      &:before {
@@ -180,7 +189,8 @@
      }
    }

-    &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
+    &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right
+      .drop-content {
      margin-left: $popover-arrow-size;

      &:before {
@@ -190,7 +200,8 @@
      }
    }

-    &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
+    &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left
+      .drop-content {
      margin-right: $popover-arrow-size;

      &:before {
@@ -200,7 +211,8 @@
      }
    }

-    &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
+    &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right
+      .drop-content {
      margin-left: $popover-arrow-size;

      &:before {
@@ -212,7 +224,7 @@
  }
 }

-@mixin drop-animation-scale($themePrefix: 'drop', $themeName: 'default', $attachmentOffset: 0, $easing: 'linear') {
+@mixin drop-animation-scale($themePrefix: "drop", $themeName: "default", $attachmentOffset: 0, $easing: "linear") {
  .#{$themePrefix}-element.#{$themePrefix}-#{$themeName} {
    transform: translateZ(0);
    transition: opacity 100ms;
@@ -235,16 +247,20 @@
      }
    }
    // Centers and middles
-    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-center .#{$themePrefix}-content {
+    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-center
+      .#{$themePrefix}-content {
      transform-origin: 50% calc(100% + #{$attachmentOffset});
    }
-    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-center .#{$themePrefix}-content {
+    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-center
+      .#{$themePrefix}-content {
      transform-origin: 50% (-$attachmentOffset);
    }
-    &.#{$themePrefix}-element-attached-right.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content {
+    &.#{$themePrefix}-element-attached-right.#{$themePrefix}-element-attached-middle
+      .#{$themePrefix}-content {
      transform-origin: calc(100% + #{$attachmentOffset}) 50%;
    }
-    &.#{$themePrefix}-element-attached-left.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content {
+    &.#{$themePrefix}-element-attached-left.#{$themePrefix}-element-attached-middle
+      .#{$themePrefix}-content {
      transform-origin: -($attachmentOffset 50%);
    }
    // Top and bottom corners
--- a/public/sass/mixins/_forms.scss
+++ b/public/sass/mixins/_forms.scss
@@ -41,7 +41,8 @@
  &:focus {
    border-color: $input-border-focus;
    outline: none;
-    $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px $input-box-shadow-focus;
+    $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+      0 0 5px $input-box-shadow-focus;
    @include box-shadow($shadow);
  }
 }
--- a/public/sass/mixins/_mixins.scss
+++ b/public/sass/mixins/_mixins.scss
@@ -1,6 +1,6 @@
@mixin clearfix() {
  &::after {
-    content: '';
+    content: "";
    display: table;
    clear: both;
  }
@@ -265,10 +265,20 @@
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
 #translucent {
  @mixin background($color: $white, $alpha: 1) {
-    background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+    background-color: hsla(
+      hue($color),
+      saturation($color),
+      lightness($color),
+      $alpha
+    );
  }
  @mixin border($color: $white, $alpha: 1) {
-    border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
+    border-color: hsla(
+      hue($color),
+      saturation($color),
+      lightness($color),
+      $alpha
+    );
    @include background-clip(padding-box);
  }
 }
@@ -284,37 +294,66 @@
 // Gradients
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
  background-color: $endColor;
-  background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
+  background-image: linear-gradient(
+    to right,
+    $startColor,
+    $endColor
+  ); // Standard, IE10
  background-repeat: repeat-x;
 }

@mixin gradient-vertical($startColor: #555, $endColor: #333) {
  background-color: mix($startColor, $endColor, 60%);
-  background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
+  background-image: linear-gradient(
+    to bottom,
+    $startColor,
+    $endColor
+  ); // Standard, IE10
  background-repeat: repeat-x;
 }

@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
  background-color: $endColor;
  background-repeat: repeat-x;
-  background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
+  background-image: linear-gradient(
+    $deg,
+    $startColor,
+    $endColor
+  ); // Standard, IE10
 }

@mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
  background-color: mix($midColor, $endColor, 80%);
-  background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor);
+  background-image: linear-gradient(
+    to right,
+    $startColor,
+    $midColor $colorStop,
+    $endColor
+  );
  background-repeat: no-repeat;
 }

@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
  background-color: mix($midColor, $endColor, 80%);
-  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
+  background-image: linear-gradient(
+    $startColor,
+    $midColor $colorStop,
+    $endColor
+  );
  background-repeat: no-repeat;
 }

@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
  background-color: $outerColor;
-  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
+  background-image: -webkit-gradient(
+    radial,
+    center center,
+    0,
+    center center,
+    460,
+    from($innerColor),
+    to($outerColor)
+  );
  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
  background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
@@ -341,7 +380,11 @@

@mixin left-brand-border-gradient() {
  border: none;
-  border-image: linear-gradient(rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
+  border-image: linear-gradient(
+    rgba(255, 213, 0, 1) 0%,
+    rgba(255, 68, 0, 1) 99%,
+    rgba(255, 68, 0, 1) 100%
+  );
  border-image-slice: 1;
  border-style: solid;
  border-top: 0;
--- a/public/sass/pages/_playlist.scss
+++ b/public/sass/pages/_playlist.scss
@@ -84,11 +84,11 @@
    background-color: $list-item-bg;
    margin-bottom: 4px;
    .search-result-icon:before {
-      content: '\f009';
+      content: "\f009";
    }

    &.search-item-dash-home .search-result-icon:before {
-      content: '\f015';
+      content: "\f015";
    }
  }

--- a/public/sass/utils/_validation.scss
+++ b/public/sass/utils/_validation.scss
@@ -1,4 +1,4 @@
-input[type='text'].ng-dirty.ng-invalid {
+input[type="text"].ng-dirty.ng-invalid {
 }

 input.validation-error,
--- a/public/test/core/utils/version_specs.ts
+++ b/public/test/core/utils/version_specs.ts
@@ -1,8 +1,8 @@
-import { describe, beforeEach, it, expect } from 'test/lib/common';
+import {describe, beforeEach, it, expect} from 'test/lib/common';

-import { SemVersion, isVersionGtOrEq } from 'app/core/utils/version';
+import {SemVersion, isVersionGtOrEq} from 'app/core/utils/version';

-describe('SemVersion', () => {
+describe("SemVersion", () => {
  let version = '1.0.0-alpha.1';

  describe('parsing', () => {
@@ -23,13 +23,13 @@ describe('SemVersion', () => {
    it('should detect greater version properly', () => {
      let semver = new SemVersion(version);
      let cases = [
-        { value: '3.4.5', expected: true },
-        { value: '3.4.4', expected: true },
-        { value: '3.4.6', expected: false },
-        { value: '4', expected: false },
-        { value: '3.5', expected: false },
+        {value: '3.4.5', expected: true},
+        {value: '3.4.4', expected: true},
+        {value: '3.4.6', expected: false},
+        {value: '4', expected: false},
+        {value: '3.5', expected: false},
      ];
-      cases.forEach(testCase => {
+      cases.forEach((testCase) => {
        expect(semver.isGtOrEq(testCase.value)).to.be(testCase.expected);
      });
    });
@@ -38,16 +38,16 @@ describe('SemVersion', () => {
  describe('isVersionGtOrEq', () => {
    it('should compare versions properly (a >= b)', () => {
      let cases = [
-        { values: ['3.4.5', '3.4.5'], expected: true },
-        { values: ['3.4.5', '3.4.4'], expected: true },
-        { values: ['3.4.5', '3.4.6'], expected: false },
-        { values: ['3.4', '3.4.0'], expected: true },
-        { values: ['3', '3.0.0'], expected: true },
-        { values: ['3.1.1-beta1', '3.1'], expected: true },
-        { values: ['3.4.5', '4'], expected: false },
-        { values: ['3.4.5', '3.5'], expected: false },
+        {values: ['3.4.5', '3.4.5'], expected: true},
+        {values: ['3.4.5', '3.4.4'] , expected: true},
+        {values: ['3.4.5', '3.4.6'], expected: false},
+        {values: ['3.4', '3.4.0'], expected: true},
+        {values: ['3', '3.0.0'], expected: true},
+        {values: ['3.1.1-beta1', '3.1'], expected: true},
+        {values: ['3.4.5', '4'], expected: false},
+        {values: ['3.4.5', '3.5'], expected: false},
      ];
-      cases.forEach(testCase => {
+      cases.forEach((testCase) => {
        expect(isVersionGtOrEq(testCase.values[0], testCase.values[1])).to.be(testCase.expected);
      });
    });
--- a/public/test/index.ts
+++ b/public/test/index.ts
@@ -25,3 +25,7 @@ const context = (<any>require).context('../', true, /specs\.(tsx?|js)/);
 for (let key of context.keys()) {
  context(key);
 }
+
+
+
+
--- a/public/test/jest-shim.ts
+++ b/public/test/jest-shim.ts
@@ -1,5 +1,6 @@
 declare var global: NodeJS.Global;

-(<any>global).requestAnimationFrame = callback => {
+(<any>global).requestAnimationFrame = (callback) => {
  setTimeout(callback, 0);
 };
+
--- a/public/test/lib/common.ts
+++ b/public/test/lib/common.ts
@@ -1,4 +1,4 @@
-var _global = <any>window;
+var _global = <any>(window);
 var beforeEach = _global.beforeEach;
 var afterEach = _global.afterEach;
 var before = _global.before;
@@ -12,4 +12,13 @@ var angularMocks = {
  inject: _global.inject,
 };

-export { beforeEach, afterEach, before, describe, it, sinon, expect, angularMocks };
+export {
+  beforeEach,
+  afterEach,
+  before,
+  describe,
+  it,
+  sinon,
+  expect,
+  angularMocks,
+};
--- a/public/test/mocks/backend_srv.ts
+++ b/public/test/mocks/backend_srv.ts
@@ -1,5 +1,8 @@
 export class BackendSrvMock {
  search: any;

-  constructor() {}
+  constructor() {
+  }
+
 }
+
--- a/public/test/specs/app_specs.ts
+++ b/public/test/specs/app_specs.ts
@@ -1,11 +1,14 @@
-import { describe, it, expect } from 'test/lib/common';
+import {describe, it, expect} from 'test/lib/common';

-import { GrafanaApp } from 'app/app';
+import {GrafanaApp} from 'app/app';

 describe('GrafanaApp', () => {
+
  var app = new GrafanaApp();

  it('can call inits', () => {
    expect(app).to.not.be(null);
  });
 });
+
+
--- a/public/test/specs/helpers.ts
+++ b/public/test/specs/helpers.ts
@@ -1,8 +1,8 @@
 import _ from 'lodash';
 import config from 'app/core/config';
 import * as dateMath from 'app/core/utils/datemath';
-import { angularMocks, sinon } from '../lib/common';
-import { PanelModel } from 'app/features/dashboard/panel_model';
+import {angularMocks, sinon} from '../lib/common';
+import {PanelModel} from 'app/features/dashboard/panel_model';

 export function ControllerTestContext() {
  var self = this;
@@ -42,8 +42,8 @@ export function ControllerTestContext() {
      self.$location = $location;
      self.$browser = $browser;
      self.$q = $q;
-      self.panel = new PanelModel({ type: 'test' });
-      self.dashboard = { meta: {} };
+      self.panel = new PanelModel({type: 'test'});
+      self.dashboard = {meta: {}};

      $rootScope.appEvent = sinon.spy();
      $rootScope.onAppEvent = sinon.spy();
@@ -53,14 +53,14 @@ export function ControllerTestContext() {
        $rootScope.colors.push('#' + i);
      }

-      config.panels['test'] = { info: {} };
+      config.panels['test'] = {info: {}};
      self.ctrl = $controller(
        Ctrl,
-        { $scope: self.scope },
+        {$scope: self.scope},
        {
          panel: self.panel,
          dashboard: self.dashboard,
-        }
+        },
      );
    });
  };
@@ -72,7 +72,7 @@ export function ControllerTestContext() {
      self.$browser = $browser;
      self.scope.contextSrv = {};
      self.scope.panel = {};
-      self.scope.dashboard = { meta: {} };
+      self.scope.dashboard = {meta: {}};
      self.scope.dashboardMeta = {};
      self.scope.dashboardViewState = new DashboardViewStateStub();
      self.scope.appEvent = sinon.spy();
@@ -131,7 +131,7 @@ export function DashboardViewStateStub() {

 export function TimeSrvStub() {
  this.init = sinon.spy();
-  this.time = { from: 'now-1h', to: 'now' };
+  this.time = {from: 'now-1h', to: 'now'};
  this.timeRange = function(parse) {
    if (parse === false) {
      return this.time;
@@ -159,7 +159,7 @@ export function ContextSrvStub() {

 export function TemplateSrvStub() {
  this.variables = [];
-  this.templateSettings = { interpolate: /\[\[([\s\S]+?)\]\]/g };
+  this.templateSettings = {interpolate: /\[\[([\s\S]+?)\]\]/g};
  this.data = {};
  this.replace = function(text) {
    return _.template(text, this.templateSettings)(this.data);
@@ -188,7 +188,7 @@ var allDeps = {
  TimeSrvStub: TimeSrvStub,
  ControllerTestContext: ControllerTestContext,
  ServiceTestContext: ServiceTestContext,
-  DashboardViewStateStub: DashboardViewStateStub,
+  DashboardViewStateStub: DashboardViewStateStub
 };

 // for legacy