Bump Prettier version (#15532)

* Fix prettier version to 1.16.4

package.json

@@ -83,7 +83,7 @@
     "postcss-browser-reporter": "^0.5.0",
     "postcss-loader": "^2.0.6",
     "postcss-reporter": "^5.0.0",
-    "prettier": "1.9.2",
+    "prettier": "1.16.4",
     "react-hot-loader": "^4.3.6",
     "react-test-renderer": "^16.5.0",
     "redux-mock-store": "^1.5.3",
@@ -129,8 +129,14 @@
     }
   },
   "lint-staged": {
-    "*.{ts,tsx,json,scss}": ["prettier --write", "git add"],
-    "*pkg/**/*.go": ["gofmt -w -s", "git add"]
+    "*.{ts,tsx,json,scss}": [
+      "prettier --write",
+      "git add"
+    ],
+    "*pkg/**/*.go": [
+      "gofmt -w -s",
+      "git add"
+    ]
   },
   "prettier": {
     "trailingComma": "es5",
@@ -196,7 +202,12 @@
     "**/@types/react": "16.7.6"
   },
   "workspaces": {
-    "packages": ["packages/*"],
-    "nohoist": ["**/@types/*", "**/@types/*/**"]
+    "packages": [
+      "packages/*"
+    ],
+    "nohoist": [
+      "**/@types/*",
+      "**/@types/*/**"
+    ]
   }
 }

packages/grafana-ui/src/components/EmptySearchResult/_EmptySearchResult.scss

@@ -4,5 +4,5 @@
   padding: $spacer;
   min-width: 350px;
   border-radius: $border-radius;
-  margin-bottom: $spacer*2;
+  margin-bottom: $spacer * 2;
 }

packages/grafana-ui/src/components/Gauge/Gauge.tsx

@@ -115,9 +115,9 @@ export class Gauge extends PureComponent<Props> {
 
   getFontScale(length: number): number {
     if (length > 12) {
-      return FONT_SCALE - length * 5 / 120;
+      return FONT_SCALE - (length * 5) / 120;
     }
-    return FONT_SCALE - length * 5 / 105;
+    return FONT_SCALE - (length * 5) / 105;
   }
 
   draw() {

packages/grafana-ui/src/components/Tooltip/Popper.tsx

@@ -17,12 +17,7 @@ const transitionStyles: { [key: string]: object } = {
   exiting: { opacity: 0, transitionDelay: '500ms' },
 };
 
-export type RenderPopperArrowFn = (
-  props: {
-    arrowProps: PopperArrowProps;
-    placement: string;
-  }
-) => JSX.Element;
+export type RenderPopperArrowFn = (props: { arrowProps: PopperArrowProps; placement: string }) => JSX.Element;
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   show: boolean;

public/app/core/components/PermissionList/PermissionListItem.tsx

@@ -61,15 +61,14 @@ export default class PermissionsListItem extends PureComponent<Props> {
           {item.name} <ItemDescription item={item} />
         </td>
         <td>
-          {item.inherited &&
-            folderInfo && (
-              <em className="muted no-wrap">
-                Inherited from folder{' '}
-                <a className="text-link" href={`${folderInfo.url}/permissions`}>
-                  {folderInfo.title}
-                </a>{' '}
-              </em>
-            )}
+          {item.inherited && folderInfo && (
+            <em className="muted no-wrap">
+              Inherited from folder{' '}
+              <a className="text-link" href={`${folderInfo.url}/permissions`}>
+                {folderInfo.title}
+              </a>{' '}
+            </em>
+          )}
           {inheritedFromRoot && <em className="muted no-wrap">Default Permission</em>}
         </td>
         <td className="query-keyword">Can</td>

public/app/core/components/json_explorer/helpers.ts

@@ -3,14 +3,14 @@
 
 /*
  * Escapes `"` characters from string
-*/
+ */
 function escapeString(str: string): string {
   return str.replace('"', '"');
 }
 
 /*
  * Determines if a value is an object
-*/
+ */
 export function isObject(value: any): boolean {
   const type = typeof value;
   return !!value && type === 'object';
@@ -20,7 +20,7 @@ export function isObject(value: any): boolean {
  * Gets constructor name of an object.
  * From http://stackoverflow.com/a/332429
  *
-*/
+ */
 export function getObjectName(object: object): string {
   if (object === undefined) {
     return '';
@@ -43,7 +43,7 @@ export function getObjectName(object: object): string {
 
 /*
  * Gets type of an object. Returns "null" for null objects
-*/
+ */
 export function getType(object: object): string {
   if (object === null) {
     return 'null';
@@ -53,7 +53,7 @@ export function getType(object: object): string {
 
 /*
  * Generates inline preview for a JavaScript object based on a value
-*/
+ */
 export function getValuePreview(object: object, value: string): string {
   const type = getType(object);
 
@@ -78,7 +78,7 @@ export function getValuePreview(object: object, value: string): string {
 
 /*
  * Generates inline preview for a JavaScript object
-*/
+ */
 let value = '';
 export function getPreview(obj: object): string {
   if (isObject(obj)) {
@@ -94,15 +94,15 @@ export function getPreview(obj: object): string {
 
 /*
  * Generates a prefixed CSS class name
-*/
+ */
 export function cssClass(className: string): string {
   return `json-formatter-${className}`;
 }
 
 /*
-  * Creates a new DOM element with given type and class
-  * TODO: move me to helpers
-*/
+ * Creates a new DOM element with given type and class
+ * TODO: move me to helpers
+ */
 export function createElement(type: string, className?: string, content?: Element | string): Element {
   const el = document.createElement(type);
   if (className) {

public/app/core/components/json_explorer/json_explorer.ts

@@ -83,7 +83,7 @@ export class JsonExplorer {
 
   /*
    * is formatter open?
-  */
+   */
   private get isOpen(): boolean {
     if (this._isOpen !== null) {
       return this._isOpen;
@@ -94,14 +94,14 @@ export class JsonExplorer {
 
   /*
    * set open state (from toggler)
-  */
+   */
   private set isOpen(value: boolean) {
     this._isOpen = value;
   }
 
   /*
    * is this a date string?
-  */
+   */
   private get isDate(): boolean {
     return (
       this.type === 'string' &&
@@ -111,14 +111,14 @@ export class JsonExplorer {
 
   /*
    * is this a URL string?
-  */
+   */
   private get isUrl(): boolean {
     return this.type === 'string' && this.json.indexOf('http') === 0;
   }
 
   /*
    * is this an array?
-  */
+   */
   private get isArray(): boolean {
     return Array.isArray(this.json);
   }
@@ -126,21 +126,21 @@ export class JsonExplorer {
   /*
    * is this an object?
    * Note: In this context arrays are object as well
-  */
+   */
   private get isObject(): boolean {
     return isObject(this.json);
   }
 
   /*
    * is this an empty object with no properties?
-  */
+   */
   private get isEmptyObject(): boolean {
     return !this.keys.length && !this.isArray;
   }
 
   /*
    * is this an empty object or array?
-  */
+   */
   private get isEmpty(): boolean {
     return this.isEmptyObject || (this.keys && !this.keys.length && this.isArray);
   }
@@ -148,14 +148,14 @@ export class JsonExplorer {
   /*
    * did we receive a key argument?
    * This means that the formatter was called as a sub formatter of a parent formatter
-  */
+   */
   private get hasKey(): boolean {
     return typeof this.key !== 'undefined';
   }
 
   /*
    * if this is an object, get constructor function name
-  */
+   */
   private get constructorName(): string {
     return getObjectName(this.json);
   }
@@ -163,7 +163,7 @@ export class JsonExplorer {
   /*
    * get type of this value
    * Possible values: all JavaScript primitive types plus "array" and "null"
-  */
+   */
   private get type(): string {
     return getType(this.json);
   }
@@ -171,7 +171,7 @@ export class JsonExplorer {
   /*
    * get object keys
    * If there is an empty key we pad it wit quotes to make it visible
-  */
+   */
   private get keys(): string[] {
     if (this.isObject) {
       return Object.keys(this.json).map(key => (key ? key : '""'));

public/app/core/components/sidemenu/BottomNavLinks.tsx

@@ -47,7 +47,8 @@ class BottomNavLinks extends PureComponent<Props> {
                   <div className="sidemenu-org-switcher__org-current">Current Org:</div>
                 </div>
                 <div className="sidemenu-org-switcher__switch">
-                  <i className="fa fa-fw fa-random" />Switch
+                  <i className="fa fa-fw fa-random" />
+                  Switch
                 </div>
               </a>
             </li>

public/app/core/components/sidemenu/SideMenu.tsx

@@ -29,7 +29,8 @@ export class SideMenu extends PureComponent {
       <div className="sidemenu__logo_small_breakpoint" onClick={this.toggleSideMenuSmallBreakpoint} key="hamburger">
         <i className="fa fa-bars" />
         <span className="sidemenu__close">
-          <i className="fa fa-times" />&nbsp;Close
+          <i className="fa fa-times" />
+          &nbsp;Close
         </span>
       </div>,
       <TopSection key="topsection" />,

public/app/core/utils/explore.ts

@@ -153,7 +153,7 @@ export function buildQueryTransaction(
   };
 }
 
-export const clearQueryKeys: ((query: DataQuery) => object) = ({ key, refId, ...rest }) => rest;
+export const clearQueryKeys: (query: DataQuery) => object = ({ key, refId, ...rest }) => rest;
 
 const isMetricSegment = (segment: { [key: string]: string }) => segment.hasOwnProperty('expr');
 const isUISegment = (segment: { [key: string]: string }) => segment.hasOwnProperty('ui');

public/app/core/utils/kbn.ts

@@ -143,7 +143,7 @@ kbn.secondsToHhmmss = seconds => {
 };
 
 kbn.to_percent = (nr, outof) => {
-  return Math.floor(nr / outof * 10000) / 100 + '%';
+  return Math.floor((nr / outof) * 10000) / 100 + '%';
 };
 
 kbn.addslashes = str => {

public/app/features/alerting/AlertRuleList.tsx

@@ -149,4 +149,9 @@ const mapDispatchToProps = {
   togglePauseAlertRule,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(AlertRuleList));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(AlertRuleList)
+);

public/app/features/api-keys/ApiKeysPage.tsx

@@ -263,4 +263,9 @@ const mapDispatchToProps = {
   addApiKey,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(ApiKeysPage));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(ApiKeysPage)
+);

public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss

@@ -32,7 +32,7 @@
 .add-panel-widget__title {
   font-size: $font-size-md;
   font-weight: $font-weight-semi-bold;
-  margin-right: $spacer*2;
+  margin-right: $spacer * 2;
 }
 
 .add-panel-widget__link {

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -267,4 +267,7 @@ const mapDispatchToProps = {
   updateLocation,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(DashNav);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DashNav);

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -306,4 +306,9 @@ const mapDispatchToProps = {
   updateLocation,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DashboardPage));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(DashboardPage)
+);

public/app/features/dashboard/containers/SoloPanelPage.tsx

@@ -107,4 +107,9 @@ const mapDispatchToProps = {
   initDashboard,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(SoloPanelPage));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(SoloPanelPage)
+);

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx

@@ -49,21 +49,20 @@ export class PanelHeaderCorner extends Component<Props> {
     return (
       <div className="markdown-html">
         <div dangerouslySetInnerHTML={{ __html: remarkableInterpolatedMarkdown }} />
-        {panel.links &&
-          panel.links.length > 0 && (
-            <ul className="text-left">
-              {panel.links.map((link, idx) => {
-                const info = linkSrv.getPanelLinkAnchorInfo(link, panel.scopedVars);
-                return (
-                  <li key={idx}>
-                    <a className="panel-menu-link" href={info.href} target={info.target}>
-                      {info.title}
-                    </a>
-                  </li>
-                );
-              })}
-            </ul>
-          )}
+        {panel.links && panel.links.length > 0 && (
+          <ul className="text-left">
+            {panel.links.map((link, idx) => {
+              const info = linkSrv.getPanelLinkAnchorInfo(link, panel.scopedVars);
+              return (
+                <li key={idx}>
+                  <a className="panel-menu-link" href={info.href} target={info.target}>
+                    {info.title}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        )}
       </div>
     );
   };

public/app/features/dashboard/services/TimeSrv.ts

@@ -227,8 +227,8 @@ export class TimeSrv {
     const timespan = range.to.valueOf() - range.from.valueOf();
     const center = range.to.valueOf() - timespan / 2;
 
-    const to = center + timespan * factor / 2;
-    const from = center - timespan * factor / 2;
+    const to = center + (timespan * factor) / 2;
+    const from = center - (timespan * factor) / 2;
 
     this.setTime({ from: moment.utc(from), to: moment.utc(to) });
   }

public/app/features/dashboard/state/DashboardMigrator.ts

@@ -487,7 +487,7 @@ export class DashboardMigrator {
       for (const panel of row.panels) {
         panel.span = panel.span || DEFAULT_PANEL_SPAN;
         if (panel.minSpan) {
-          panel.minSpan = Math.min(GRID_COLUMN_COUNT, GRID_COLUMN_COUNT / 12 * panel.minSpan);
+          panel.minSpan = Math.min(GRID_COLUMN_COUNT, (GRID_COLUMN_COUNT / 12) * panel.minSpan);
         }
         const panelWidth = Math.floor(panel.span) * widthFactor;
         const panelHeight = panel.height ? getGridHeight(panel.height) : rowGridHeight;

public/app/features/datasources/DataSourceDashboards.tsx

@@ -98,4 +98,9 @@ const mapDispatchToProps = {
   removeDashboard,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceDashboards));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(DataSourceDashboards)
+);

public/app/features/datasources/DataSourcesListPage.tsx

@@ -115,4 +115,9 @@ const mapDispatchToProps = {
   setDataSourcesLayoutMode,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourcesListPage));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(DataSourcesListPage)
+);

public/app/features/datasources/NewDataSourcePage.tsx

@@ -80,4 +80,9 @@ const mapDispatchToProps = {
   setDataSourceTypeSearchQuery,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(NewDataSourcePage));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(NewDataSourcePage)
+);

public/app/features/datasources/settings/DataSourceSettingsPage.tsx

@@ -259,4 +259,9 @@ const mapDispatchToProps = {
   setIsDefault,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceSettingsPage));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(DataSourceSettingsPage)
+);

public/app/features/explore/Explore.tsx

@@ -200,43 +200,42 @@ export class Explore extends React.PureComponent<ExploreProps> {
           </div>
         )}
 
-        {datasourceInstance &&
-          !datasourceError && (
-            <div className="explore-container">
-              <QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
-              <AutoSizer onResize={this.onResize} disableHeight>
-                {({ width }) => {
-                  if (width === 0) {
-                    return null;
-                  }
+        {datasourceInstance && !datasourceError && (
+          <div className="explore-container">
+            <QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
+            <AutoSizer onResize={this.onResize} disableHeight>
+              {({ width }) => {
+                if (width === 0) {
+                  return null;
+                }
 
-                  return (
-                    <main className="m-t-2" style={{ width }}>
-                      <ErrorBoundary>
-                        {showingStartPage && <StartPage onClickExample={this.onClickExample} />}
-                        {!showingStartPage && (
-                          <>
-                            {supportsGraph && !supportsLogs && <GraphContainer width={width} exploreId={exploreId} />}
-                            {supportsTable && <TableContainer exploreId={exploreId} onClickCell={this.onClickLabel} />}
-                            {supportsLogs && (
-                              <LogsContainer
-                                width={width}
-                                exploreId={exploreId}
-                                onChangeTime={this.onChangeTime}
-                                onClickLabel={this.onClickLabel}
-                                onStartScanning={this.onStartScanning}
-                                onStopScanning={this.onStopScanning}
-                              />
-                            )}
-                          </>
-                        )}
-                      </ErrorBoundary>
-                    </main>
-                  );
-                }}
-              </AutoSizer>
-            </div>
-          )}
+                return (
+                  <main className="m-t-2" style={{ width }}>
+                    <ErrorBoundary>
+                      {showingStartPage && <StartPage onClickExample={this.onClickExample} />}
+                      {!showingStartPage && (
+                        <>
+                          {supportsGraph && !supportsLogs && <GraphContainer width={width} exploreId={exploreId} />}
+                          {supportsTable && <TableContainer exploreId={exploreId} onClickCell={this.onClickLabel} />}
+                          {supportsLogs && (
+                            <LogsContainer
+                              width={width}
+                              exploreId={exploreId}
+                              onChangeTime={this.onChangeTime}
+                              onClickLabel={this.onClickLabel}
+                              onStartScanning={this.onStartScanning}
+                              onStopScanning={this.onStopScanning}
+                            />
+                          )}
+                        </>
+                      )}
+                    </ErrorBoundary>
+                  </main>
+                );
+              }}
+            </AutoSizer>
+          </div>
+        )}
       </div>
     );
   }
@@ -287,4 +286,9 @@ const mapDispatchToProps = {
   setQueries,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(Explore));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(Explore)
+);

public/app/features/explore/ExploreToolbar.tsx

@@ -193,4 +193,9 @@ const mapDispatchToProps: DispatchProps = {
   split: splitOpen,
 };
 
-export const ExploreToolbar = hot(module)(connect(mapStateToProps, mapDispatchToProps)(UnConnectedExploreToolbar));
+export const ExploreToolbar = hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(UnConnectedExploreToolbar)
+);

public/app/features/explore/Graph.tsx

@@ -217,11 +217,13 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
     let series = [{ data: [[0, 0]] }];
 
     if (data && data.length > 0) {
-      series = data.filter((ts: TimeSeries) => !hiddenSeries.has(ts.alias)).map((ts: TimeSeries) => ({
-        color: ts.color,
-        label: ts.label,
-        data: ts.getFlotPairs('null'),
-      }));
+      series = data
+        .filter((ts: TimeSeries) => !hiddenSeries.has(ts.alias))
+        .map((ts: TimeSeries) => ({
+          color: ts.color,
+          label: ts.label,
+          data: ts.getFlotPairs('null'),
+        }));
     }
 
     this.dynamicOptions = this.getDynamicOptions();
@@ -242,17 +244,15 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
 
     return (
       <>
-        {this.props.data &&
-          this.props.data.length > MAX_NUMBER_OF_TIME_SERIES &&
-          !this.state.showAllTimeSeries && (
-            <div className="time-series-disclaimer">
-              <i className="fa fa-fw fa-warning disclaimer-icon" />
-              {`Showing only ${MAX_NUMBER_OF_TIME_SERIES} time series. `}
-              <span className="show-all-time-series" onClick={this.onShowAllTimeSeries}>{`Show all ${
-                this.props.data.length
-              }`}</span>
-            </div>
-          )}
+        {this.props.data && this.props.data.length > MAX_NUMBER_OF_TIME_SERIES && !this.state.showAllTimeSeries && (
+          <div className="time-series-disclaimer">
+            <i className="fa fa-fw fa-warning disclaimer-icon" />
+            {`Showing only ${MAX_NUMBER_OF_TIME_SERIES} time series. `}
+            <span className="show-all-time-series" onClick={this.onShowAllTimeSeries}>{`Show all ${
+              this.props.data.length
+            }`}</span>
+          </div>
+        )}
         <div id={id} className="explore-graph" style={{ height }} />
         <Legend data={data} hiddenSeries={hiddenSeries} onToggleSeries={this.onToggleSeries} />
       </>

public/app/features/explore/GraphContainer.tsx

@@ -70,4 +70,9 @@ const mapDispatchToProps = {
   changeTime,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(GraphContainer));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(GraphContainer)
+);

public/app/features/explore/LogLabelStats.tsx

@@ -60,7 +60,9 @@ export class LogLabelStats extends PureComponent<Props> {
           <span className="logs-stats__close fa fa-remove" onClick={onClickClose} />
         </div>
         <div className="logs-stats__body">
-          {topRows.map(stat => <LogLabelStatsRow key={stat.value} {...stat} active={stat.value === value} />)}
+          {topRows.map(stat => (
+            <LogLabelStatsRow key={stat.value} {...stat} active={stat.value === value} />
+          ))}
           {insertActiveRow && activeRow && <LogLabelStatsRow key={activeRow.value} {...activeRow} active />}
           {otherCount > 0 && (
             <LogLabelStatsRow key="__OTHERS__" count={otherCount} value="Other" proportion={otherProportion} />

public/app/features/explore/LogMessageAnsi.tsx

@@ -61,15 +61,14 @@ export class LogMessageAnsi extends PureComponent<Props, State> {
   render() {
     const { chunks } = this.state;
 
-    return chunks.map(
-      (chunk, index) =>
-        chunk.style ? (
-          <span key={index} style={chunk.style}>
-            {chunk.text}
-          </span>
-        ) : (
-          chunk.text
-        )
+    return chunks.map((chunk, index) =>
+      chunk.style ? (
+        <span key={index} style={chunk.style}>
+          {chunk.text}
+        </span>
+      ) : (
+        chunk.text
+      )
     );
   }
 }

public/app/features/explore/LogRow.tsx

@@ -161,26 +161,23 @@ export class LogRow extends PureComponent<Props, State> {
         )}
         <div className="logs-row__message" onMouseEnter={this.onMouseOverMessage} onMouseLeave={this.onMouseOutMessage}>
           {containsAnsiCodes && <LogMessageAnsi value={row.entry} />}
-          {!containsAnsiCodes &&
-            parsed && (
-              <Highlighter
-                autoEscape
-                highlightTag={FieldHighlight(this.onClickHighlight)}
-                textToHighlight={row.entry}
-                searchWords={parsedFieldHighlights}
-                highlightClassName="logs-row__field-highlight"
-              />
-            )}
-          {!containsAnsiCodes &&
-            !parsed &&
-            needsHighlighter && (
-              <Highlighter
-                textToHighlight={row.entry}
-                searchWords={highlights}
-                findChunks={findHighlightChunksInText}
-                highlightClassName={highlightClassName}
-              />
-            )}
+          {!containsAnsiCodes && parsed && (
+            <Highlighter
+              autoEscape
+              highlightTag={FieldHighlight(this.onClickHighlight)}
+              textToHighlight={row.entry}
+              searchWords={parsedFieldHighlights}
+              highlightClassName="logs-row__field-highlight"
+            />
+          )}
+          {!containsAnsiCodes && !parsed && needsHighlighter && (
+            <Highlighter
+              textToHighlight={row.entry}
+              searchWords={highlights}
+              findChunks={findHighlightChunksInText}
+              highlightClassName={highlightClassName}
+            />
+          )}
           {!containsAnsiCodes && !parsed && !needsHighlighter && row.entry}
           {showFieldStats && (
             <div className="logs-row__stats">

public/app/features/explore/Logs.tsx

@@ -237,17 +237,16 @@ export default class Logs extends PureComponent<Props, State> {
           </div>
         </div>
 
-        {hasData &&
-          meta && (
-            <div className="logs-panel-meta">
-              {meta.map(item => (
-                <div className="logs-panel-meta__item" key={item.label}>
-                  <span className="logs-panel-meta__label">{item.label}:</span>
-                  <span className="logs-panel-meta__value">{renderMetaItem(item.value, item.kind)}</span>
-                </div>
-              ))}
-            </div>
-          )}
+        {hasData && meta && (
+          <div className="logs-panel-meta">
+            {meta.map(item => (
+              <div className="logs-panel-meta__item" key={item.label}>
+                <span className="logs-panel-meta__label">{item.label}:</span>
+                <span className="logs-panel-meta__value">{renderMetaItem(item.value, item.kind)}</span>
+              </div>
+            ))}
+          </div>
+        )}
 
         <div className="logs-rows">
           {hasData &&
@@ -282,16 +281,14 @@ export default class Logs extends PureComponent<Props, State> {
             ))}
           {hasData && deferLogs && <span>Rendering {dedupedData.rows.length} rows...</span>}
         </div>
-        {!loading &&
-          !hasData &&
-          !scanning && (
-            <div className="logs-panel-nodata">
-              No logs found.
-              <a className="link" onClick={this.onClickScan}>
-                Scan for older logs
-              </a>
-            </div>
-          )}
+        {!loading && !hasData && !scanning && (
+          <div className="logs-panel-nodata">
+            No logs found.
+            <a className="link" onClick={this.onClickScan}>
+              Scan for older logs
+            </a>
+          </div>
+        )}
 
         {scanning && (
           <div className="logs-panel-nodata">

public/app/features/explore/LogsContainer.tsx

@@ -127,4 +127,9 @@ const mapDispatchToProps = {
   toggleLogLevelAction,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(LogsContainer));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(LogsContainer)
+);

public/app/features/explore/QueryRow.tsx

@@ -169,4 +169,9 @@ const mapDispatchToProps = {
   runQueries,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(QueryRow));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(QueryRow)
+);

public/app/features/explore/TableContainer.tsx

@@ -51,4 +51,9 @@ const mapDispatchToProps = {
   toggleTable,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(TableContainer));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(TableContainer)
+);

public/app/features/explore/Wrapper.tsx

@@ -82,4 +82,9 @@ const mapDispatchToProps = {
   resetExploreAction,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(Wrapper));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(Wrapper)
+);

public/app/features/folders/FolderPermissions.tsx

@@ -132,4 +132,9 @@ const mapDispatchToProps = {
   addFolderPermission,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(FolderPermissions));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(FolderPermissions)
+);

public/app/features/folders/FolderSettingsPage.tsx

@@ -113,4 +113,9 @@ const mapDispatchToProps = {
   deleteFolder,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(FolderSettingsPage));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(FolderSettingsPage)
+);

public/app/features/org/OrgDetailsPage.tsx

@@ -65,4 +65,9 @@ const mapDispatchToProps = {
   updateOrganization,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(OrgDetailsPage));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(OrgDetailsPage)
+);

public/app/features/plugins/PluginListPage.tsx

@@ -81,4 +81,9 @@ const mapDispatchToProps = {
   setPluginsSearchQuery,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(PluginListPage));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(PluginListPage)
+);

public/app/features/plugins/plugin_component.ts

@@ -136,27 +136,29 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
       // Datasource ConfigCtrl
       case 'datasource-config-ctrl': {
         const dsMeta = scope.ctrl.datasourceMeta;
-        return importPluginModule(dsMeta.module).then((dsModule): any => {
-          if (!dsModule.ConfigCtrl) {
-            return { notFound: true };
-          }
+        return importPluginModule(dsMeta.module).then(
+          (dsModule): any => {
+            if (!dsModule.ConfigCtrl) {
+              return { notFound: true };
+            }
 
-          scope.$watch(
-            'ctrl.current',
-            () => {
-              scope.onModelChanged(scope.ctrl.current);
-            },
-            true
-          );
+            scope.$watch(
+              'ctrl.current',
+              () => {
+                scope.onModelChanged(scope.ctrl.current);
+              },
+              true
+            );
 
-          return {
-            baseUrl: dsMeta.baseUrl,
-            name: 'ds-config-' + dsMeta.id,
-            bindings: { meta: '=', current: '=' },
-            attrs: { meta: 'ctrl.datasourceMeta', current: 'ctrl.current' },
-            Component: dsModule.ConfigCtrl,
-          };
-        });
+            return {
+              baseUrl: dsMeta.baseUrl,
+              name: 'ds-config-' + dsMeta.id,
+              bindings: { meta: '=', current: '=' },
+              attrs: { meta: 'ctrl.datasourceMeta', current: 'ctrl.current' },
+              Component: dsModule.ConfigCtrl,
+            };
+          }
+        );
       }
       // AppConfigCtrl
       case 'app-config-ctrl': {

public/app/features/teams/TeamGroupSync.tsx

@@ -116,26 +116,25 @@ export class TeamGroupSync extends PureComponent<Props, State> {
           </div>
         </SlideDown>
 
-        {groups.length === 0 &&
-          !isAdding && (
-            <div className="empty-list-cta">
-              <div className="empty-list-cta__title">There are no external groups to sync with</div>
-              <button onClick={this.onToggleAdding} className="empty-list-cta__button btn btn-xlarge btn-primary">
-                <i className="gicon gicon-add-team" />
-                Add Group
-              </button>
-              <div className="empty-list-cta__pro-tip">
-                <i className="fa fa-rocket" /> {headerTooltip}
-                <a
-                  className="text-link empty-list-cta__pro-tip-link"
-                  href="http://docs.grafana.org/auth/enhanced_ldap/"
-                  target="_blank"
-                >
-                  Learn more
-                </a>
-              </div>
+        {groups.length === 0 && !isAdding && (
+          <div className="empty-list-cta">
+            <div className="empty-list-cta__title">There are no external groups to sync with</div>
+            <button onClick={this.onToggleAdding} className="empty-list-cta__button btn btn-xlarge btn-primary">
+              <i className="gicon gicon-add-team" />
+              Add Group
+            </button>
+            <div className="empty-list-cta__pro-tip">
+              <i className="fa fa-rocket" /> {headerTooltip}
+              <a
+                className="text-link empty-list-cta__pro-tip-link"
+                href="http://docs.grafana.org/auth/enhanced_ldap/"
+                target="_blank"
+              >
+                Learn more
+              </a>
             </div>
-          )}
+          </div>
+        )}
 
         {groups.length > 0 && (
           <div className="admin-list-table">
@@ -167,4 +166,7 @@ const mapDispatchToProps = {
   removeTeamGroup,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(TeamGroupSync);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TeamGroupSync);

public/app/features/teams/TeamList.tsx

@@ -161,4 +161,9 @@ const mapDispatchToProps = {
   setSearchQuery,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(TeamList));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(TeamList)
+);

public/app/features/teams/TeamMembers.tsx

@@ -62,7 +62,9 @@ export class TeamMembers extends PureComponent<Props, State> {
 
     return (
       <td>
-        {labels.map(label => <TagBadge key={label} label={label} removeIcon={false} count={0} onClick={() => {}} />)}
+        {labels.map(label => (
+          <TagBadge key={label} label={label} removeIcon={false} count={0} onClick={() => {}} />
+        ))}
       </td>
     );
   }
@@ -156,4 +158,7 @@ const mapDispatchToProps = {
   setSearchMemberQuery,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(TeamMembers);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TeamMembers);

public/app/features/teams/TeamPages.tsx

@@ -108,4 +108,9 @@ const mapDispatchToProps = {
   loadTeam,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(TeamPages));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(TeamPages)
+);

public/app/features/teams/TeamSettings.tsx

@@ -98,4 +98,7 @@ const mapDispatchToProps = {
   updateTeam,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(TeamSettings);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TeamSettings);

public/app/features/templating/variable_srv.ts

@@ -54,15 +54,17 @@ export class VariableSrv {
 
   onTimeRangeUpdated(timeRange: TimeRange) {
     this.templateSrv.updateTimeRange(timeRange);
-    const promises = this.variables.filter(variable => variable.refresh === 2).map(variable => {
-      const previousOptions = variable.options.slice();
-
-      return variable.updateOptions().then(() => {
-        if (angular.toJson(previousOptions) !== angular.toJson(variable.options)) {
-          this.dashboard.templateVariableValueUpdated();
-        }
+    const promises = this.variables
+      .filter(variable => variable.refresh === 2)
+      .map(variable => {
+        const previousOptions = variable.options.slice();
+
+        return variable.updateOptions().then(() => {
+          if (angular.toJson(previousOptions) !== angular.toJson(variable.options)) {
+            this.dashboard.templateVariableValueUpdated();
+          }
+        });
       });
-    });
 
     return this.$q.all(promises).then(() => {
       this.dashboard.startRefresh();

public/app/features/users/InviteeRow.tsx

@@ -52,6 +52,9 @@ const mapDispatchToProps = {
   revokeInvite,
 };
 
-export default connect(() => {
-  return {};
-}, mapDispatchToProps)(InviteeRow);
+export default connect(
+  () => {
+    return {};
+  },
+  mapDispatchToProps
+)(InviteeRow);

public/app/features/users/UsersActionBar.tsx

@@ -92,4 +92,7 @@ const mapDispatchToProps = {
   setUsersSearchQuery,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(UsersActionBar);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(UsersActionBar);

public/app/features/users/UsersListPage.tsx

@@ -138,4 +138,9 @@ const mapDispatchToProps = {
   removeUser,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(UsersListPage));
+export default hot(module)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(UsersListPage)
+);

public/app/plugins/datasource/grafana-azure-monitor-datasource/annotations_query_ctrl.ts

@@ -4,7 +4,8 @@ export class AzureMonitorAnnotationsQueryCtrl {
   annotation: any;
   workspaces: any[];
 
-  defaultQuery = '<your table>\n| where $__timeFilter() \n| project TimeGenerated, Text=YourTitleColumn, Tags="tag1,tag2"';
+  defaultQuery =
+    '<your table>\n| where $__timeFilter() \n| project TimeGenerated, Text=YourTitleColumn, Tags="tag1,tag2"';
 
   /** @ngInject */
   constructor() {

public/app/plugins/datasource/grafana-azure-monitor-datasource/editor/query_field.tsx

@@ -311,8 +311,8 @@ class QueryField extends React.Component<any, any> {
     let selectedIndex = Math.max(this.state.typeaheadIndex, 0);
     const flattenedSuggestions = flattenSuggestions(suggestions);
     selectedIndex = selectedIndex % flattenedSuggestions.length || 0;
-    const selectedKeys = (flattenedSuggestions.length > 0 ? [flattenedSuggestions[selectedIndex]] : []).map(
-      i => (typeof i === 'object' ? i.text : i)
+    const selectedKeys = (flattenedSuggestions.length > 0 ? [flattenedSuggestions[selectedIndex]] : []).map(i =>
+      typeof i === 'object' ? i.text : i
     );
 
     // Create typeahead in DOM root so we can later position it absolutely

public/app/plugins/datasource/influxdb/datasource.ts

@@ -78,46 +78,48 @@ export default class InfluxDatasource {
     // replace templated variables
     allQueries = this.templateSrv.replace(allQueries, scopedVars);
 
-    return this._seriesQuery(allQueries, options).then((data): any => {
-      if (!data || !data.results) {
-        return [];
-      }
-
-      const seriesList = [];
-      for (i = 0; i < data.results.length; i++) {
-        const result = data.results[i];
-        if (!result || !result.series) {
-          continue;
-        }
-
-        const target = queryTargets[i];
-        let alias = target.alias;
-        if (alias) {
-          alias = this.templateSrv.replace(target.alias, options.scopedVars);
+    return this._seriesQuery(allQueries, options).then(
+      (data): any => {
+        if (!data || !data.results) {
+          return [];
         }
 
-        const influxSeries = new InfluxSeries({
-          series: data.results[i].series,
-          alias: alias,
-        });
+        const seriesList = [];
+        for (i = 0; i < data.results.length; i++) {
+          const result = data.results[i];
+          if (!result || !result.series) {
+            continue;
+          }
 
-        switch (target.resultFormat) {
-          case 'table': {
-            seriesList.push(influxSeries.getTable());
-            break;
+          const target = queryTargets[i];
+          let alias = target.alias;
+          if (alias) {
+            alias = this.templateSrv.replace(target.alias, options.scopedVars);
           }
-          default: {
-            const timeSeries = influxSeries.getTimeSeries();
-            for (y = 0; y < timeSeries.length; y++) {
-              seriesList.push(timeSeries[y]);
+
+          const influxSeries = new InfluxSeries({
+            series: data.results[i].series,
+            alias: alias,
+          });
+
+          switch (target.resultFormat) {
+            case 'table': {
+              seriesList.push(influxSeries.getTable());
+              break;
+            }
+            default: {
+              const timeSeries = influxSeries.getTimeSeries();
+              for (y = 0; y < timeSeries.length; y++) {
+                seriesList.push(timeSeries[y]);
+              }
+              break;
             }
-            break;
           }
         }
-      }
 
-      return { data: seriesList };
-    });
+        return { data: seriesList };
+      }
+    );
   }
 
   annotationQuery(options) {

public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

@@ -38,15 +38,17 @@ export function groupMetricsByPrefix(metrics: string[], delimiter = '_'): Cascad
   const metricsOptions = _.chain(metrics)
     .filter(metric => !ruleRegex.test(metric))
     .groupBy(metric => metric.split(delimiter)[0])
-    .map((metricsForPrefix: string[], prefix: string): CascaderOption => {
-      const prefixIsMetric = metricsForPrefix.length === 1 && metricsForPrefix[0] === prefix;
-      const children = prefixIsMetric ? [] : metricsForPrefix.sort().map(m => ({ label: m, value: m }));
-      return {
-        children,
-        label: prefix,
-        value: prefix,
-      };
-    })
+    .map(
+      (metricsForPrefix: string[], prefix: string): CascaderOption => {
+        const prefixIsMetric = metricsForPrefix.length === 1 && metricsForPrefix[0] === prefix;
+        const children = prefixIsMetric ? [] : metricsForPrefix.sort().map(m => ({ label: m, value: m }));
+        return {
+          children,
+          label: prefix,
+          value: prefix,
+        };
+      }
+    )
     .sortBy('label')
     .value();
 

public/app/plugins/datasource/prometheus/datasource.ts

@@ -487,13 +487,15 @@ export function alignRange(start, end, step) {
 export function extractRuleMappingFromGroups(groups: any[]) {
   return groups.reduce(
     (mapping, group) =>
-      group.rules.filter(rule => rule.type === 'recording').reduce(
-        (acc, rule) => ({
-          ...acc,
-          [rule.name]: rule.query,
-        }),
-        mapping
-      ),
+      group.rules
+        .filter(rule => rule.type === 'recording')
+        .reduce(
+          (acc, rule) => ({
+            ...acc,
+            [rule.name]: rule.query,
+          }),
+          mapping
+        ),
     {}
   );
 }

public/app/plugins/datasource/stackdriver/components/Help.tsx

@@ -57,18 +57,18 @@ export class Help extends React.Component<Props, State> {
             <div className="gf-form-label gf-form-label--grow" />
           </div>
         </div>
-        {rawQuery &&
-          displaRawQuery && (
-            <div className="gf-form">
-              <pre className="gf-form-pre">{rawQuery}</pre>
-            </div>
-          )}
+        {rawQuery && displaRawQuery && (
+          <div className="gf-form">
+            <pre className="gf-form-pre">{rawQuery}</pre>
+          </div>
+        )}
 
         {displayHelp && (
           <div className="gf-form grafana-info-box" style={{ padding: 0 }}>
             <pre className="gf-form-pre alert alert-info" style={{ marginRight: 0 }}>
               <h5>Alias Patterns</h5>Format the legend keys any way you want by using alias patterns. Format the legend
-              keys any way you want by using alias patterns.<br /> <br />
+              keys any way you want by using alias patterns.
+              <br /> <br />
               Example:
               <code>{`${'{{metricDescriptor.name}} - {{metricDescriptor.label.instance_name}}'}`}</code>
               <br />

public/app/plugins/datasource/stackdriver/components/Metrics.tsx

@@ -92,12 +92,14 @@ export class Metrics extends React.Component<Props, State> {
     if (!selectedMetricDescriptor) {
       return [];
     }
-    const metricsByService = metricDescriptors.filter(m => m.service === selectedMetricDescriptor.service).map(m => ({
-      service: m.service,
-      value: m.type,
-      label: m.displayName,
-      description: m.description,
-    }));
+    const metricsByService = metricDescriptors
+      .filter(m => m.service === selectedMetricDescriptor.service)
+      .map(m => ({
+        service: m.service,
+        value: m.type,
+        label: m.displayName,
+        description: m.description,
+      }));
     return metricsByService;
   }
 
@@ -105,12 +107,14 @@ export class Metrics extends React.Component<Props, State> {
     const { metricDescriptors } = this.state;
     const { templateSrv, metricType } = this.props;
 
-    const metrics = metricDescriptors.filter(m => m.service === templateSrv.replace(service)).map(m => ({
-      service: m.service,
-      value: m.type,
-      label: m.displayName,
-      description: m.description,
-    }));
+    const metrics = metricDescriptors
+      .filter(m => m.service === templateSrv.replace(service))
+      .map(m => ({
+        service: m.service,
+        value: m.type,
+        label: m.displayName,
+        description: m.description,
+      }));
 
     this.setState({ service, metrics });
 

public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx

@@ -58,7 +58,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
       metricTypes,
       selectedMetricType,
       metricDescriptors,
-      ...await this.getLabels(selectedMetricType),
+      ...(await this.getLabels(selectedMetricType)),
     };
     this.setState(state);
   }
@@ -66,7 +66,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
   async onQueryTypeChange(event) {
     const state: any = {
       selectedQueryType: event.target.value,
-      ...await this.getLabels(this.state.selectedMetricType, event.target.value),
+      ...(await this.getLabels(this.state.selectedMetricType, event.target.value)),
     };
     this.setState(state);
   }
@@ -82,13 +82,13 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
       selectedService: event.target.value,
       metricTypes,
       selectedMetricType,
-      ...await this.getLabels(selectedMetricType),
+      ...(await this.getLabels(selectedMetricType)),
     };
     this.setState(state);
   }
 
   async onMetricTypeChange(event) {
-    const state: any = { selectedMetricType: event.target.value, ...await this.getLabels(event.target.value) };
+    const state: any = { selectedMetricType: event.target.value, ...(await this.getLabels(event.target.value)) };
     this.setState(state);
   }
 

public/app/plugins/panel/graph/graph.ts

@@ -532,7 +532,7 @@ class GraphElement {
       // Expand ticks for pretty view
       min = Math.floor(min / tickStep) * tickStep;
       // 1.01 is 101% - ensure we have enough space for last bar
-      max = Math.ceil(max * 1.01 / tickStep) * tickStep;
+      max = Math.ceil((max * 1.01) / tickStep) * tickStep;
 
       ticks = [];
       for (let i = min; i <= max; i += tickStep) {

public/app/plugins/panel/heatmap/color_legend.ts

@@ -173,8 +173,7 @@ function drawLegendValues(elem, colorScale, rangeFrom, rangeTo, maxValue, minVal
   const posY = getSvgElemHeight(legendElem) + LEGEND_VALUE_MARGIN;
   const posX = getSvgElemX(colorRect);
 
-  d3
-    .select(legendElem.get(0))
+  d3.select(legendElem.get(0))
     .append('g')
     .attr('class', 'axis')
     .attr('transform', 'translate(' + posX + ',' + posY + ')')

public/app/plugins/panel/heatmap/heatmap_tooltip.ts

@@ -205,10 +205,10 @@ export class HeatmapTooltip {
 
     let barWidth;
     if (this.panel.yAxis.logBase === 1) {
-      barWidth = Math.floor(HISTOGRAM_WIDTH / (max - min) * yBucketSize * 0.9);
+      barWidth = Math.floor((HISTOGRAM_WIDTH / (max - min)) * yBucketSize * 0.9);
     } else {
       const barNumberFactor = yBucketSize ? yBucketSize : 1;
-      barWidth = Math.floor(HISTOGRAM_WIDTH / ticks / barNumberFactor * 0.9);
+      barWidth = Math.floor((HISTOGRAM_WIDTH / ticks / barNumberFactor) * 0.9);
     }
     barWidth = Math.max(barWidth, 1);
 

public/app/plugins/panel/heatmap/rendering.ts

@@ -570,8 +570,7 @@ export class HeatmapRenderer {
   }
 
   resetCardHighLight(event) {
-    d3
-      .select(event.target)
+    d3.select(event.target)
       .style('fill', this.tooltip.originalFillColor)
       .style('stroke', this.tooltip.originalFillColor)
       .style('stroke-width', 0);

public/sass/_variables.scss

@@ -14,12 +14,31 @@ $spacer: 1rem !default;
 $spacer-x: $spacer !default;
 $spacer-y: $spacer !default;
 $spacers: (
-    0: (x: 0, y: 0),
-    1: (x: $spacer-x, y: $spacer-y),
-    2: (x: ($spacer-x * 1.5), y: ($spacer-y * 1.5)),
-    3: (x: ($spacer-x * 3), y: ($spacer-y * 3))
-  )
-  !default;
+  0: (
+    x: 0,
+    y: 0,
+  ),
+  1: (
+    x: $spacer-x,
+    y: $spacer-y,
+  ),
+  2: (
+    x: (
+      $spacer-x * 1.5,
+    ),
+    y: (
+      $spacer-y * 1.5,
+    ),
+  ),
+  3: (
+    x: (
+      $spacer-x * 3,
+    ),
+    y: (
+      $spacer-y * 3,
+    ),
+  ),
+) !default;
 $border-width: 1px !default;
 
 // Grid breakpoints
@@ -27,13 +46,24 @@ $border-width: 1px !default;
 // Define the minimum and maximum dimensions at which your layout will change,
 // adapting to different screen sizes, for use in media queries.
 
-$grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default;
+$grid-breakpoints: (
+  xs: 0,
+  sm: 544px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+) !default;
 
 // Grid containers
 //
 // Define the maximum width of `.container` for different screen sizes.
 
-$container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default;
+$container-max-widths: (
+  sm: 576px,
+  md: 720px,
+  lg: 940px,
+  xl: 1080px,
+) !default;
 
 // Grid columns
 //
@@ -100,7 +130,7 @@ $line-height-sm: 1.5 !default;
 
 $border-radius: 3px !default;
 $border-radius-lg: 5px !default;
-$border-radius-sm: 2px!default;
+$border-radius-sm: 2px !default;
 
 // Page
 
@@ -143,12 +173,9 @@ $gf-form-input-height: 35px;
 $cursor-disabled: not-allowed !default;
 
 // Form validation icons
-$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E")
-  !default;
-$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E")
-  !default;
-$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E")
-  !default;
+$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
+$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
+$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
 
 // Z-index master list
 // -------------------------
@@ -191,19 +218,38 @@ $panel-margin: 10px;
 $dashboard-padding: $panel-margin * 2;
 $panel-horizontal-padding: 10;
 $panel-vertical-padding: 5;
-$panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $panel-horizontal-padding+0px;
+$panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px;
 
 // tabs
 $tabs-padding: 10px 15px 9px;
 
 $external-services: (
-    github: (bgColor: #464646, borderColor: #393939, icon: ''),
-    gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''),
-    google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''),
-    grafanacom: (bgColor: #262628, borderColor: #393939, icon: ''),
-    oauth: (bgColor: #262628, borderColor: #393939, icon: '')
-  )
-  !default;
+  github: (
+    bgColor: #464646,
+    borderColor: #393939,
+    icon: '',
+  ),
+  gitlab: (
+    bgColor: #fc6d26,
+    borderColor: #e24329,
+    icon: '',
+  ),
+  google: (
+    bgColor: #e84d3c,
+    borderColor: #b83e31,
+    icon: '',
+  ),
+  grafanacom: (
+    bgColor: #262628,
+    borderColor: #393939,
+    icon: '',
+  ),
+  oauth: (
+    bgColor: #262628,
+    borderColor: #393939,
+    icon: '',
+  ),
+) !default;
 
 :export {
   panelhorizontalpadding: $panel-horizontal-padding;

public/sass/base/_forms.scss

@@ -31,7 +31,7 @@ input,
 button,
 select,
 textarea {
-  @include font-shorthand($font-size-base,normal,$line-height-base); // Set size, weight, line-height here
+  @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
 }
 input,
 button,

public/sass/base/_type.scss

@@ -357,14 +357,14 @@ a.external-link {
 
   ul,
   ol {
-    padding-left: $spacer*1.5;
+    padding-left: $spacer * 1.5;
     margin-bottom: $spacer;
   }
 
   table {
     td,
     th {
-      padding: $spacer*0.5 $spacer;
+      padding: $spacer * 0.5 $spacer;
     }
     th {
       font-weight: $font-weight-semi-bold;

public/sass/components/_cards.scss

@@ -35,7 +35,7 @@
 }
 
 .card-section {
-  margin-bottom: $spacer*2;
+  margin-bottom: $spacer * 2;
 }
 
 .card-list {

public/sass/components/_dashboard_settings.scss

@@ -53,7 +53,7 @@
 
 .dashboard-settings__header {
   font-size: $font-size-h3;
-  margin-bottom: $spacer*2;
+  margin-bottom: $spacer * 2;
 }
 
 .dashboard-settings__subheader {
@@ -89,7 +89,7 @@
   flex-direction: column;
   height: 100%;
   flex-grow: 1;
-  margin: $spacer*3 $spacer*2 0 0;
+  margin: $spacer * 3 $spacer * 2 0 0;
 
   button {
     margin-bottom: 10px;

public/sass/components/_empty_list_cta.scss

@@ -1,7 +1,7 @@
 .empty-list-cta {
   background-color: $empty-list-cta-bg;
   text-align: center;
-  padding: $spacer*2;
+  padding: $spacer * 2;
   border-radius: $border-radius;
 
   .grafana-info-box {
@@ -11,12 +11,12 @@
 }
 
 .empty-list-cta__title {
-  padding-bottom: $spacer*3;
+  padding-bottom: $spacer * 3;
   font-style: italic;
 }
 
 .empty-list-cta__button {
-  margin-bottom: $spacer*3;
+  margin-bottom: $spacer * 3;
 }
 
 .empty-list-cta__pro-tip-link {

public/sass/components/_gf-form.scss

@@ -226,7 +226,7 @@ $input-border: 1px solid $input-border-color;
   }
 
   &--dropdown {
-    padding-right: $input-padding-x*2;
+    padding-right: $input-padding-x * 2;
 
     &::after {
       position: absolute;
@@ -276,7 +276,7 @@ $input-border: 1px solid $input-border-color;
     & + .gf-form-input {
       position: relative;
       z-index: 2;
-      padding-left: $input-padding-x*3;
+      padding-left: $input-padding-x * 3;
       background-color: transparent;
 
       option {
@@ -293,7 +293,7 @@ $input-border: 1px solid $input-border-color;
   select.gf-form-input {
     text-indent: 0.01px;
     text-overflow: '';
-    padding-right: $input-padding-x*3;
+    padding-right: $input-padding-x * 3;
     appearance: none;
 
     &:-moz-focusring {
@@ -321,7 +321,7 @@ $input-border: 1px solid $input-border-color;
 
   &--has-help-icon {
     &::after {
-      right: $input-padding-x*3;
+      right: $input-padding-x * 3;
     }
   }
 }

public/sass/components/_modals.scss

@@ -24,7 +24,7 @@
   z-index: $zindex-modal;
   width: 100%;
   background: $page-bg;
-  @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
+  @include box-shadow(0 3px 7px rgba(0, 0, 0, 0.3));
   @include background-clip(padding-box);
   outline: none;
 
@@ -47,7 +47,7 @@
   font-size: $font-size-h3;
   float: left;
   padding-top: $spacer * 0.75;
-  margin: 0 $spacer*3 0 $spacer*1.5;
+  margin: 0 $spacer * 3 0 $spacer * 1.5;
 
   .gicon {
     position: relative;
@@ -66,7 +66,7 @@
 }
 
 .modal-content {
-  padding: $spacer*2;
+  padding: $spacer * 2;
 
   &--has-scroll {
     max-height: calc(100vh - 400px);
@@ -105,7 +105,7 @@
   .confirm-modal-text {
     font-size: $font-size-h4;
     color: $link-color;
-    margin-bottom: $spacer*2;
+    margin-bottom: $spacer * 2;
     padding-top: $spacer;
   }
 

public/sass/components/_panel_editor.scss

@@ -21,7 +21,7 @@
 }
 
 .panel-editor-container__editor {
-  margin-top: $panel-margin*2;
+  margin-top: $panel-margin * 2;
   display: flex;
   flex-direction: row;
   flex: 1 1 0;

public/sass/components/_panel_gettingstarted.scss

@@ -57,7 +57,7 @@ $path-position: $marker-size-half - ($path-height / 2);
     z-index: 1;
     top: $path-position;
     bottom: $path-position;
-    right: - $marker-size-half;
+    right: -$marker-size-half;
     width: 100%;
     height: $path-height;
     border-top: 2px solid $progress-color-grey-light;

public/sass/components/_panel_logs.scss

@@ -6,7 +6,7 @@ $column-horizontal-spacing: 10px;
   padding: $panel-padding;
   padding-top: 10px;
   border-radius: $border-radius;
-  margin: 2*$panel-margin 0 $panel-margin;
+  margin: 2 * $panel-margin 0 $panel-margin;
   border: $panel-border;
   flex-direction: column;
 }
@@ -18,7 +18,7 @@ $column-horizontal-spacing: 10px;
   flex-wrap: wrap;
 
   > * {
-    margin-right: $spacer*2;
+    margin-right: $spacer * 2;
   }
 }
 

public/sass/components/_panel_text.scss

@@ -1 +0,0 @@
-

public/sass/components/_search.scss

@@ -77,7 +77,7 @@
 .search-filter-box {
   background: $search-filter-box-bg;
   border-radius: 2px;
-  padding: $spacer*1.5;
+  padding: $spacer * 1.5;
   min-width: 340px;
   margin-bottom: $spacer * 1.5;
 }
@@ -259,7 +259,7 @@
 
 .search-button-row {
   text-align: center;
-  padding: $spacer*2 $spacer;
+  padding: $spacer * 2 $spacer;
   background: $panel-bg;
 }
 

public/sass/components/_tabbed_view.scss

@@ -20,7 +20,7 @@
 .tabbed-view-title {
   float: left;
   padding-top: 0.5rem;
-  margin: 0 $spacer*3 0 0;
+  margin: 0 $spacer * 3 0 0;
 }
 
 .tabbed-view-panel-title {
@@ -45,7 +45,7 @@
 }
 
 .tabbed-view-body {
-  padding: $spacer*2 $spacer $spacer $spacer;
+  padding: $spacer * 2 $spacer $spacer $spacer;
   display: flex;
   flex-direction: column;
   flex: 1;

public/sass/components/edit_sidemenu.scss

@@ -9,7 +9,7 @@
 }
 
 .edit-sidemenu-aside {
-  margin-right: $spacer*2;
+  margin-right: $spacer * 2;
 }
 
 .edit-sidemenu {

public/sass/layout/_page.scss

@@ -39,8 +39,8 @@
   width: 100%;
   margin-left: auto;
   margin-right: auto;
-  padding-left: $spacer*2;
-  padding-right: $spacer*2;
+  padding-left: $spacer * 2;
+  padding-right: $spacer * 2;
   max-width: 980px;
   @include clearfix();
 }
@@ -93,7 +93,7 @@
 }
 
 .page-body {
-  padding-top: $spacer*2;
+  padding-top: $spacer * 2;
 }
 
 .page-heading {
@@ -164,5 +164,5 @@
 }
 
 .page-sidebar-section {
-  margin-bottom: $spacer*2;
+  margin-bottom: $spacer * 2;
 }

public/sass/mixins/_buttons.scss

@@ -1,6 +1,6 @@
 // Button backgrounds
 // ------------------
-@mixin buttonBackground($startColor, $endColor, $text-color: #fff, $textShadow: 0px 1px 0 rgba(0,0,0,0.1)) {
+@mixin buttonBackground($startColor, $endColor, $text-color: #fff, $textShadow: 0px 1px 0 rgba(0, 0, 0, 0.1)) {
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
   @include gradientBar($startColor, $endColor, $text-color, $textShadow);
 

public/sass/mixins/_drop_element.scss

@@ -41,7 +41,7 @@
       &:before {
         top: 100%;
         left: 50%;
-        margin-left: - $popover-arrow-size;
+        margin-left: -$popover-arrow-size;
         border-top-color: $border-color;
       }
     }
@@ -52,7 +52,7 @@
       &:before {
         bottom: 100%;
         left: 50%;
-        margin-left: - $popover-arrow-size;
+        margin-left: -$popover-arrow-size;
         border-bottom-color: $border-color;
       }
     }
@@ -63,7 +63,7 @@
       &:before {
         left: 100%;
         top: 50%;
-        margin-top: - $popover-arrow-size;
+        margin-top: -$popover-arrow-size;
         border-left-color: $border-color;
       }
     }
@@ -74,14 +74,14 @@
       &:before {
         right: 100%;
         top: 50%;
-        margin-top: - $popover-arrow-size;
+        margin-top: -$popover-arrow-size;
         border-right-color: $border-color;
       }
     }
 
     // Target middle/center, element corner
     &.drop-element-attached-left.drop-target-attached-center .drop-content {
-      left: - $popover-arrow-size * 2;
+      left: -$popover-arrow-size * 2;
     }
 
     &.drop-element-attached-right.drop-target-attached-center .drop-content {

public/sass/mixins/_mixins.scss

@@ -278,7 +278,7 @@
 }
 
 // Gradient Bar Colors for buttons and alerts
-@mixin gradientBar($primaryColor, $secondaryColor, $text-color: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,0.25)) {
+@mixin gradientBar($primaryColor, $secondaryColor, $text-color: #fff, $textShadow: 0 -1px 0 rgba(0, 0, 0, 0.25)) {
   color: $text-color;
   text-shadow: $textShadow;
   @include gradient-vertical($primaryColor, $secondaryColor);

public/sass/pages/_explore.scss

@@ -452,7 +452,7 @@
 // TODO Experimental
 
 .cheat-sheet-item {
-  margin: 2*$panel-margin 0;
+  margin: 2 * $panel-margin 0;
   width: 50%;
 }
 

yarn.lock

@@ -13500,10 +13500,10 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
   integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
 
-prettier@1.9.2:
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.9.2.tgz#96bc2132f7a32338e6078aeb29727178c6335827"
-  integrity sha512-piXx9N2WT8hWb7PBbX1glAuJVIkEyUV9F5fMXFINpZ0x3otVOFKKeGmeuiclFJlP/UrgTckyV606VjH2rNK4bw==
+prettier@1.16.4:
+  version "1.16.4"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
+  integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==
 
 prettier@^1.12.1:
   version "1.16.1"