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"],
+    "*.{ts,tsx,json,scss}": [
-    "*pkg/**/*.go": ["gofmt -w -s", "git add"]
+      "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/*"],
+    "packages": [
-    "nohoist": ["**/@types/*", "**/@types/*/**"]
+      "packages/*"
+    ],
+    "nohoist": [
+      "**/@types/*",
+      "**/@types/*/**"
+    ]
   }
 }

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 = (
+export type RenderPopperArrowFn = (props: { arrowProps: PopperArrowProps; placement: string }) => JSX.Element;
-  props: {
-    arrowProps: PopperArrowProps;
-    placement: string;
-  }
-) => JSX.Element;
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   show: boolean;

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

@@ -61,8 +61,7 @@ export default class PermissionsListItem extends PureComponent<Props> {
           {item.name} <ItemDescription item={item} />
         </td>
         <td>
-          {item.inherited &&
+          {item.inherited && folderInfo && (
-            folderInfo && (
             <em className="muted no-wrap">
               Inherited from folder{' '}
               <a className="text-link" href={`${folderInfo.url}/permissions`}>

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/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,8 +49,7 @@ export class PanelHeaderCorner extends Component<Props> {
     return (
       <div className="markdown-html">
         <div dangerouslySetInnerHTML={{ __html: remarkableInterpolatedMarkdown }} />
-        {panel.links &&
+        {panel.links && panel.links.length > 0 && (
-          panel.links.length > 0 && (
           <ul className="text-left">
             {panel.links.map((link, idx) => {
               const info = linkSrv.getPanelLinkAnchorInfo(link, panel.scopedVars);

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 to = center + (timespan * factor) / 2;
-    const from = 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,8 +200,7 @@ export class Explore extends React.PureComponent<ExploreProps> {
           </div>
         )}
 
-        {datasourceInstance &&
+        {datasourceInstance && !datasourceError && (
-          !datasourceError && (
           <div className="explore-container">
             <QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
             <AutoSizer onResize={this.onResize} disableHeight>
@@ -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,7 +217,9 @@ 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) => ({
+      series = data
+        .filter((ts: TimeSeries) => !hiddenSeries.has(ts.alias))
+        .map((ts: TimeSeries) => ({
           color: ts.color,
           label: ts.label,
           data: ts.getFlotPairs('null'),
@@ -242,9 +244,7 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
 
     return (
       <>
-        {this.props.data &&
+        {this.props.data && this.props.data.length > MAX_NUMBER_OF_TIME_SERIES && !this.state.showAllTimeSeries && (
-          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. `}

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,8 +61,7 @@ export class LogMessageAnsi extends PureComponent<Props, State> {
   render() {
     const { chunks } = this.state;
 
-    return chunks.map(
+    return chunks.map((chunk, index) =>
-      (chunk, index) =>
       chunk.style ? (
         <span key={index} style={chunk.style}>
           {chunk.text}

public/app/features/explore/LogRow.tsx

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

public/app/features/explore/Logs.tsx

@@ -237,8 +237,7 @@ export default class Logs extends PureComponent<Props, State> {
           </div>
         </div>
 
-        {hasData &&
+        {hasData && meta && (
-          meta && (
           <div className="logs-panel-meta">
             {meta.map(item => (
               <div className="logs-panel-meta__item" key={item.label}>
@@ -282,9 +281,7 @@ export default class Logs extends PureComponent<Props, State> {
             ))}
           {hasData && deferLogs && <span>Rendering {dedupedData.rows.length} rows...</span>}
         </div>
-        {!loading &&
+        {!loading && !hasData && !scanning && (
-          !hasData &&
-          !scanning && (
           <div className="logs-panel-nodata">
             No logs found.
             <a className="link" onClick={this.onClickScan}>

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,7 +136,8 @@ 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 => {
+        return importPluginModule(dsMeta.module).then(
+          (dsModule): any => {
             if (!dsModule.ConfigCtrl) {
               return { notFound: true };
             }
@@ -156,7 +157,8 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
               attrs: { meta: 'ctrl.datasourceMeta', current: 'ctrl.current' },
               Component: dsModule.ConfigCtrl,
             };
-        });
+          }
+        );
       }
       // AppConfigCtrl
       case 'app-config-ctrl': {

public/app/features/teams/TeamGroupSync.tsx

@@ -116,8 +116,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
           </div>
         </SlideDown>
 
-        {groups.length === 0 &&
+        {groups.length === 0 && !isAdding && (
-          !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">
@@ -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,7 +54,9 @@ export class VariableSrv {
 
   onTimeRangeUpdated(timeRange: TimeRange) {
     this.templateSrv.updateTimeRange(timeRange);
-    const promises = this.variables.filter(variable => variable.refresh === 2).map(variable => {
+    const promises = this.variables
+      .filter(variable => variable.refresh === 2)
+      .map(variable => {
         const previousOptions = variable.options.slice();
 
         return variable.updateOptions().then(() => {

public/app/features/users/InviteeRow.tsx

@@ -52,6 +52,9 @@ const mapDispatchToProps = {
   revokeInvite,
 };
 
-export default connect(() => {
+export default connect(
+  () => {
     return {};
-}, mapDispatchToProps)(InviteeRow);
+  },
+  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(
+    const selectedKeys = (flattenedSuggestions.length > 0 ? [flattenedSuggestions[selectedIndex]] : []).map(i =>
-      i => (typeof i === 'object' ? i.text : 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,7 +78,8 @@ export default class InfluxDatasource {
     // replace templated variables
     allQueries = this.templateSrv.replace(allQueries, scopedVars);
 
-    return this._seriesQuery(allQueries, options).then((data): any => {
+    return this._seriesQuery(allQueries, options).then(
+      (data): any => {
         if (!data || !data.results) {
           return [];
         }
@@ -117,7 +118,8 @@ export default class InfluxDatasource {
         }
 
         return { data: seriesList };
-    });
+      }
+    );
   }
 
   annotationQuery(options) {

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

@@ -38,7 +38,8 @@ 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 => {
+    .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 {
@@ -46,7 +47,8 @@ export function groupMetricsByPrefix(metrics: string[], delimiter = '_'): Cascad
           label: prefix,
           value: prefix,
         };
-    })
+      }
+    )
     .sortBy('label')
     .value();
 

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

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

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

@@ -57,8 +57,7 @@ export class Help extends React.Component<Props, State> {
             <div className="gf-form-label gf-form-label--grow" />
           </div>
         </div>
-        {rawQuery &&
+        {rawQuery && displaRawQuery && (
-          displaRawQuery && (
           <div className="gf-form">
             <pre className="gf-form-pre">{rawQuery}</pre>
           </div>
@@ -68,7 +67,8 @@ export class Help extends React.Component<Props, State> {
           <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,7 +92,9 @@ export class Metrics extends React.Component<Props, State> {
     if (!selectedMetricDescriptor) {
       return [];
     }
-    const metricsByService = metricDescriptors.filter(m => m.service === selectedMetricDescriptor.service).map(m => ({
+    const metricsByService = metricDescriptors
+      .filter(m => m.service === selectedMetricDescriptor.service)
+      .map(m => ({
         service: m.service,
         value: m.type,
         label: m.displayName,
@@ -105,7 +107,9 @@ 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 => ({
+    const metrics = metricDescriptors
+      .filter(m => m.service === templateSrv.replace(service))
+      .map(m => ({
         service: m.service,
         value: m.type,
         label: m.displayName,

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
+  d3.select(legendElem.get(0))
-    .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
+    d3.select(event.target)
-      .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),
+  0: (
-    1: (x: $spacer-x, y: $spacer-y),
+    x: 0,
-    2: (x: ($spacer-x * 1.5), y: ($spacer-y * 1.5)),
+    y: 0,
-    3: (x: ($spacer-x * 3), y: ($spacer-y * 3))
+  ),
-  )
+  1: (
-  !default;
+    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
 //
@@ -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")
+$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;
-  !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-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")
+$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;
-  !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
 // -------------------------
@@ -197,13 +224,32 @@ $panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $p
 $tabs-padding: 10px 15px 9px;
 
 $external-services: (
-    github: (bgColor: #464646, borderColor: #393939, icon: ''),
+  github: (
-    gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''),
+    bgColor: #464646,
-    google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''),
+    borderColor: #393939,
-    grafanacom: (bgColor: #262628, borderColor: #393939, icon: ''),
+    icon: '',
-    oauth: (bgColor: #262628, borderColor: #393939, icon: '')
+  ),
-  )
+  gitlab: (
-  !default;
+    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/components/_panel_text.scss

@@ -1 +0,0 @@
-

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:
+prettier@1.16.4:
-  version "1.9.2"
+  version "1.16.4"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.9.2.tgz#96bc2132f7a32338e6078aeb29727178c6335827"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.4.tgz#73e37e73e018ad2db9c76742e2647e21790c9717"
-  integrity sha512-piXx9N2WT8hWb7PBbX1glAuJVIkEyUV9F5fMXFINpZ0x3otVOFKKeGmeuiclFJlP/UrgTckyV606VjH2rNK4bw==
+  integrity sha512-ZzWuos7TI5CKUeQAtFd6Zhm2s6EpAD/ZLApIhsF9pRvRtM1RFo61dM/4MSRUA0SuLugA/zgrZD8m0BaY46Og7g==
 
 prettier@^1.12.1:
   version "1.16.1"