Bump Prettier version (#15532)

* Fix prettier version to 1.16.4 (cherry picked from commit 88a46e6dd4)
7 years ago · daa6819e0c
parent 19192fc0b5
commit daa6819e0c
81 changed files with 564 additions and 365 deletions
--- a/package.json
+++ b/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",
@ -195,7 +201,12 @@
    "**/@types/react": "16.7.6"
  },
  "workspaces": {
-    "packages": ["packages/*"],
-    "nohoist": ["**/@types/*", "**/@types/*/**"]
+    "packages": [
+      "packages/*"
+    ],
+    "nohoist": [
+      "**/@types/*",
+      "**/@types/*/**"
+    ]
  }
 }
--- a/packages/grafana-ui/src/components/EmptySearchResult/_EmptySearchResult.scss
+++ b/packages/grafana-ui/src/components/EmptySearchResult/_EmptySearchResult.scss
@ -0,0 +1,8 @@
+.empty-search-result {
+  border-left: 3px solid $info-box-border-color;
+  background-color: $empty-list-cta-bg;
+  padding: $spacer;
+  min-width: 350px;
+  border-radius: $border-radius;
+  margin-bottom: $spacer * 2;
+}
--- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx
+++ b/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() {
--- a/packages/grafana-ui/src/components/Tooltip/Popper.tsx
+++ b/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;
--- a/public/app/core/components/PermissionList/PermissionListItem.tsx
+++ b/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>
--- a/public/app/core/components/json_explorer/helpers.ts
+++ b/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) {
--- a/public/app/core/components/json_explorer/json_explorer.ts
+++ b/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 : '""'));
--- a/public/app/core/components/sidemenu/BottomNavLinks.tsx
+++ b/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>
--- a/public/app/core/components/sidemenu/SideMenu.tsx
+++ b/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" />,
--- a/public/app/core/utils/explore.ts
+++ b/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');
--- a/public/app/core/utils/kbn.ts
+++ b/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 => {
--- a/public/app/features/alerting/AlertRuleList.tsx
+++ b/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)
+);
--- a/public/app/features/api-keys/ApiKeysPage.tsx
+++ b/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)
+);
--- a/public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
+++ b/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 {
--- a/public/app/features/dashboard/components/DashNav/DashNav.tsx
+++ b/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);
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/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)
+);
--- a/public/app/features/dashboard/containers/SoloPanelPage.tsx
+++ b/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)
+);
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
+++ b/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>
    );
  };
--- a/public/app/features/dashboard/services/TimeSrv.ts
+++ b/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) });
  }
--- a/public/app/features/dashboard/state/DashboardMigrator.ts
+++ b/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;
--- a/public/app/features/datasources/DataSourceDashboards.tsx
+++ b/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)
+);
--- a/public/app/features/datasources/DataSourcesListPage.tsx
+++ b/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)
+);
--- a/public/app/features/datasources/NewDataSourcePage.tsx
+++ b/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)
+);
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+++ b/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)
+);
--- a/public/app/features/explore/Explore.tsx
+++ b/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)
+);
--- a/public/app/features/explore/ExploreToolbar.tsx
+++ b/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)
+);
--- a/public/app/features/explore/Graph.tsx
+++ b/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} />
      </>
--- a/public/app/features/explore/GraphContainer.tsx
+++ b/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)
+);
--- a/public/app/features/explore/LogLabelStats.tsx
+++ b/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} />
--- a/public/app/features/explore/Logs.tsx
+++ b/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">
--- a/public/app/features/explore/LogsContainer.tsx
+++ b/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)
+);
--- a/public/app/features/explore/QueryRow.tsx
+++ b/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)
+);
--- a/public/app/features/explore/TableContainer.tsx
+++ b/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)
+);
--- a/public/app/features/explore/Wrapper.tsx
+++ b/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)
+);
--- a/public/app/features/folders/FolderPermissions.tsx
+++ b/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)
+);
--- a/public/app/features/folders/FolderSettingsPage.tsx
+++ b/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)
+);
--- a/public/app/features/org/OrgDetailsPage.tsx
+++ b/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)
+);
--- a/public/app/features/plugins/PluginListPage.tsx
+++ b/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)
+);
--- a/public/app/features/plugins/plugin_component.ts
+++ b/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': {
--- a/public/app/features/teams/TeamGroupSync.tsx
+++ b/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);
--- a/public/app/features/teams/TeamList.tsx
+++ b/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)
+);
--- a/public/app/features/teams/TeamMembers.tsx
+++ b/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);
--- a/public/app/features/teams/TeamPages.tsx
+++ b/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)
+);
--- a/public/app/features/teams/TeamSettings.tsx
+++ b/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);
--- a/public/app/features/templating/variable_srv.ts
+++ b/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();
--- a/public/app/features/users/InviteeRow.tsx
+++ b/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);
--- a/public/app/features/users/UsersActionBar.tsx
+++ b/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);
--- a/public/app/features/users/UsersListPage.tsx
+++ b/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)
+);
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/annotations_query_ctrl.ts
+++ b/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() {
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/editor/query_field.tsx
+++ b/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
--- a/public/app/plugins/datasource/influxdb/datasource.ts
+++ b/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) {
--- a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
+++ b/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();

--- a/public/app/plugins/datasource/prometheus/datasource.ts
+++ b/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
+        ),
    {}
  );
 }
--- a/public/app/plugins/datasource/stackdriver/components/Help.tsx
+++ b/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 />
--- a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx
+++ b/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 });

--- a/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
+++ b/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);
  }

--- a/public/app/plugins/panel/graph/graph.ts
+++ b/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) {
--- a/public/app/plugins/panel/heatmap/color_legend.ts
+++ b/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 + ')')
--- a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts
+++ b/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);

--- a/public/app/plugins/panel/heatmap/rendering.ts
+++ b/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);
--- a/public/sass/_variables.scss
+++ b/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;
--- a/public/sass/base/_forms.scss
+++ b/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,
--- a/public/sass/base/_type.scss
+++ b/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;
--- a/public/sass/components/_cards.scss
+++ b/public/sass/components/_cards.scss
@ -35,7 +35,7 @@
 }

 .card-section {
-  margin-bottom: $spacer*2;
+  margin-bottom: $spacer * 2;
 }

 .card-list {
--- a/public/sass/components/_dashboard_settings.scss
+++ b/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;
--- a/public/sass/components/_empty_list_cta.scss
+++ b/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 {
--- a/public/sass/components/_gf-form.scss
+++ b/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;
    }
  }
 }
--- a/public/sass/components/_modals.scss
+++ b/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;
  }

--- a/public/sass/components/_panel_editor.scss
+++ b/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;
--- a/public/sass/components/_panel_gettingstarted.scss
+++ b/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;
--- a/public/sass/components/_panel_logs.scss
+++ b/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;
  }
 }

--- a/public/sass/components/_panel_text.scss
+++ b/public/sass/components/_panel_text.scss
@ -1 +0,0 @@
-
--- a/public/sass/components/_search.scss
+++ b/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;
 }

--- a/public/sass/components/_tabbed_view.scss
+++ b/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;
--- a/public/sass/components/edit_sidemenu.scss
+++ b/public/sass/components/edit_sidemenu.scss
@ -9,7 +9,7 @@
 }

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

 .edit-sidemenu {
--- a/public/sass/layout/_page.scss
+++ b/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;
 }
--- a/public/sass/mixins/_buttons.scss
+++ b/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);

--- a/public/sass/mixins/_drop_element.scss
+++ b/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 {
--- a/public/sass/mixins/_mixins.scss
+++ b/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);
--- a/public/sass/pages/_explore.scss
+++ b/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%;
 }

--- a/yarn.lock
+++ b/yarn.lock
@ -13495,10 +13495,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"