Revert files

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

@@ -14,20 +14,17 @@ class EmptyListCTA extends Component<IProps, any> {
             proTip,
             proTipLink,
             proTipLinkTitle,
-      proTipTarget,
+            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">
+                <a href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success"><i className={buttonIcon} />{buttonTitle}</a>
-          <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}>
+                    <a className="text-link empty-list-cta__pro-tip-link"
-            {proTipLinkTitle}
+                        href={proTipLink}
-          </a>
+                        target={proTipTarget}>{proTipLinkTitle}</a>
                 </div>
             </div>
         );

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
+    <div className={`login-bg__item ${flipIndex === index ? 'login-bg-flip' : ''}`} key={index} style={{background: bgColor1}} />
-      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];
 }

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 strengthText = "strength: strong like a bull.";
-    let strengthClass = 'password-strength-good';
+    let strengthClass = "password-strength-good";
 
     if (!password) {
       return null;
     }
 
     if (password.length <= 8) {
-      strengthText = 'strength: you can do better.';
+      strengthText = "strength: you can do better.";
-      strengthClass = 'password-strength-ok';
+      strengthClass = "password-strength-ok";
     }
 
     if (password.length < 4) {
-      strengthText = 'strength: weak sauce.';
+      strengthText = "strength: weak sauce.";
-      strengthClass = 'password-strength-bad';
+      strengthClass = "password-strength-bad";
     }
 
     return (
@@ -35,3 +36,5 @@ export class PasswordStrength extends React.Component<IProps, any> {
     );
   }
 }
+
+

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> {
     );
   }
 }
+

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">
+            <a href="#palette" data-toggle="tab">Colors</a>
-              Colors
-            </a>
           </li>
           <li className="gf-tabs-item-colorpicker">
-            <a href="#spectrum" data-toggle="tab">
+            <a href="#spectrum" data-toggle="tab">Custom</a>
-              Custom
-            </a>
           </li>
         </ul>
-        <div className="gf-color-picker__body">{currentTab}</div>
+        <div className="gf-color-picker__body">
+          {currentTab}
+        </div>
         <div>
-          <input
+          <input className="gf-form-input gf-form-input--small" value={this.state.colorString}
-            className="gf-form-input gf-form-input--small"
+            onChange={this.onColorStringChange.bind(this)} onBlur={this.onColorStringBlur.bind(this)}>
-            value={this.state.colorString}
+          </input>
-            onChange={this.onColorStringChange.bind(this)}
-            onBlur={this.onColorStringBlur.bind(this)}
-          />
         </div>
       </div>
     );

public/app/core/components/colorpicker/SpectrumPicker.tsx

@@ -29,17 +29,14 @@ export class SpectrumPicker extends React.Component<IProps, any> {
   }
 
   componentDidMount() {
-    let spectrumOptions = _.assignIn(
+    let spectrumOptions = _.assignIn({
-      {
       flat: true,
       showAlpha: true,
       showButtons: false,
       color: this.props.color,
       appendTo: this.elem,
       move: this.onSpectrumMove,
-      },
+    }, this.props.options);
-      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>
+    );
   }
 }
+

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);
   });
+
 });
+

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { PanelModel } from '../panel_model';
+import {PanelModel} from '../panel_model';
-import { PanelContainer } from './PanelContainer';
+import {PanelContainer} from './PanelContainer';
-import { AttachedPanel } from './PanelLoader';
+import {AttachedPanel} from './PanelLoader';
-import { DashboardRow } from './DashboardRow';
+import {DashboardRow} from './DashboardRow';
-import { AddPanelPanel } from './AddPanelPanel';
+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" />
+    );
   }
 }
+

public/app/features/templating/query_variable.ts

@@ -198,9 +198,7 @@ export class QueryVariable implements Variable {
         }
       });
     } else if (sortType === 3) {
-      options = _.sortBy(options, opt => {
+      options = _.sortBy(options, opt => { return _.toLower(opt.text); });
-        return _.toLower(opt.text);
-      });
     }
 
     if (reverseSort) {

public/sass/_variables.scss

@@ -53,9 +53,9 @@ $enable-flex: true;
 // Typography
 // -------------------------
 
-$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif;
+$font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;
-$font-family-serif: Georgia, 'Times New Roman', Times, serif;
+$font-family-serif: Georgia, "Times New Roman", Times, serif;
-$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
+$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: (($font-size-base * $line-height-base) + ($input-padding-y * 2))
-$input-height-lg: ( ($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
+  !default;
-$input-height-sm: ( ($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 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: ''),
+    github: (bgColor: #464646, borderColor: #393939, icon: ""),
-    google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''),
+    google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ""),
-    grafanacom: (bgColor: inherit, borderColor: #393939, icon: ''),
+    grafanacom: (bgColor: inherit, borderColor: #393939, icon: ""),
-    oauth: (bgColor: inherit, borderColor: #393939, icon: '')
+    oauth: (bgColor: inherit, borderColor: #393939, icon: "")
   )
   !default;

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/variables";
-@import './font-awesome/mixins';
+@import "./font-awesome/mixins";
-@import './font-awesome/path';
+@import "./font-awesome/path";
-@import './font-awesome/core';
+@import "./font-awesome/core";
-@import './font-awesome/larger';
+@import "./font-awesome/larger";
-@import './font-awesome/fixed-width';
+@import "./font-awesome/fixed-width";
-@import './font-awesome/list';
+@import "./font-awesome/list";
-@import './font-awesome/bordered-pulled';
+@import "./font-awesome/bordered-pulled";
-@import './font-awesome/animated';
+@import "./font-awesome/animated";
-@import './font-awesome/rotated-flipped';
+@import "./font-awesome/rotated-flipped";
-@import './font-awesome/stacked';
+@import "./font-awesome/stacked";
-@import './font-awesome/icons';
+@import "./font-awesome/icons";
-@import './font-awesome/screen-reader';
+@import "./font-awesome/screen-reader";

public/sass/base/_forms.scss

@@ -58,19 +58,19 @@ textarea {
 }
 
 // Reset width of input images, buttons, radios, checkboxes
-input[type='file'],
+input[type="file"],
-input[type='image'],
+input[type="image"],
-input[type='submit'],
+input[type="submit"],
-input[type='reset'],
+input[type="reset"],
-input[type='button'],
+input[type="button"],
-input[type='radio'],
+input[type="radio"],
-input[type='checkbox'] {
+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="file"]:focus,
-input[type='radio']:focus,
+input[type="radio"]:focus,
-input[type='checkbox']: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-outer-spin-button,
-input[type='number']::-webkit-inner-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="radio"][disabled],
-input[type='checkbox'][disabled],
+input[type="checkbox"][disabled],
-input[type='radio'][readonly],
+input[type="radio"][readonly],
-input[type='checkbox'][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%;

public/sass/base/_grafana_icons.scss

@@ -1,17 +1,18 @@
 @font-face {
-  font-family: 'grafana-icons';
+  font-family: "grafana-icons";
-  src: url('../fonts/grafana-icons.eot?okx5td');
+  src: url("../fonts/grafana-icons.eot?okx5td");
-  src: url('../fonts/grafana-icons.eot?okx5td#iefix') format('embedded-opentype'),
+  src: url("../fonts/grafana-icons.eot?okx5td#iefix")
-    url('../fonts/grafana-icons.ttf?okx5td') format('truetype'),
+      format("embedded-opentype"),
-    url('../fonts/grafana-icons.woff?okx5td') format('woff'),
+    url("../fonts/grafana-icons.ttf?okx5td") format("truetype"),
-    url('../fonts/grafana-icons.svg?okx5td#grafana-icons') format('svg');
+    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";
 }

public/sass/base/_normalize.scss

@@ -291,9 +291,9 @@ select {
 //
 
 button,
-html input[type='button'],
+html input[type="button"],
-// 1 input[type='reset'],
+// 1 input[type="reset"],
-input[type='submit'] {
+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="checkbox"],
-input[type='radio'] {
+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-inner-spin-button,
-input[type='number']::-webkit-outer-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-cancel-button,
-input[type='search']::-webkit-search-decoration {
+input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 

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

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;

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);

public/sass/base/font-awesome/_path.scss

@@ -2,13 +2,18 @@
  * -------------------------- */
 
 @font-face {
-  font-family: 'FontAwesome';
+  font-family: "FontAwesome";
-  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
+  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'),
+  src: url("#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}")
-    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
+      format("embedded-opentype"),
-    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
+    url("#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}")
-    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
+      format("woff2"),
-    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
+    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;

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("error", $popover-error-bg, $popover-color);
-@include drop-theme('popover', $popover-bg, $popover-color, $popover-border-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("help", $popover-help-bg, $popover-help-color);
 
-@include drop-animation-scale('drop', 'help', $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", "error", $attachmentOffset: $attachmentOffset, $easing: $easing);
-@include drop-animation-scale('drop', 'popover', $attachmentOffset: $attachmentOffset, $easing: $easing);
+@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);
 
 .drop-element {
   z-index: 10000;

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;
   }
 }

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: "";
     }
   }
 }

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: "►";
     }
   }
 

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;

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 {

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;

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;

public/sass/components/_switch.scss

@@ -64,8 +64,8 @@
   }
 
   input + label::before {
-    font-family: 'FontAwesome';
+    font-family: "FontAwesome";
-    content: '\f096'; // square-o
+    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;

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%
+      );
     }
   }
 }

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 {

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

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);
   }
 }

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;

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";
     }
   }
 

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,

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.5', expected: true},
-        { value: '3.4.4', expected: true },
+        {value: '3.4.4', expected: true},
-        { value: '3.4.6', expected: false },
+        {value: '3.4.6', expected: false},
-        { value: '4', expected: false },
+        {value: '4', expected: false},
-        { value: '3.5', 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.5'], expected: true},
-        { values: ['3.4.5', '3.4.4'], expected: true },
+        {values: ['3.4.5', '3.4.4'] , expected: true},
-        { values: ['3.4.5', '3.4.6'], expected: false },
+        {values: ['3.4.5', '3.4.6'], expected: false},
-        { values: ['3.4', '3.4.0'], expected: true },
+        {values: ['3.4', '3.4.0'], expected: true},
-        { values: ['3', '3.0.0'], expected: true },
+        {values: ['3', '3.0.0'], expected: true},
-        { values: ['3.1.1-beta1', '3.1'], expected: true },
+        {values: ['3.1.1-beta1', '3.1'], expected: true},
-        { values: ['3.4.5', '4'], expected: false },
+        {values: ['3.4.5', '4'], expected: false},
-        { values: ['3.4.5', '3.5'], 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);
       });
     });

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);
 }
+
+
+
+

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);
 };
+

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,
+};

public/test/mocks/backend_srv.ts

@@ -1,5 +1,8 @@
 export class BackendSrvMock {
   search: any;
 
-  constructor() {}
+  constructor() {
+  }
+
 }
+

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);
   });
 });
+
+

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 {angularMocks, sinon} from '../lib/common';
-import { PanelModel } from 'app/features/dashboard/panel_model';
+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.panel = new PanelModel({type: 'test'});
-      self.dashboard = { meta: {} };
+      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