Merge remote-tracking branch 'grafana/master' into backend-service-in…

…-grafanaui

* grafana/master:
  Gauge: Fix switching orientation issue when switching from BarGauge to Gauge (grafana#17064)
  serverlock: run tests async should be more linear time wise (grafana#17059)
  InfoPopover: Fixes transclude undefined error (grafana#17063)
  Dashboard: Fixes lazy loading & expanding collapsed rows on mobile (grafana#17055)
  fix: Azure Monitor adds missing closing div tag to query editor (grafana#17057)
  Chore: Use executable dir instead of pwd in CLI for isDev check (grafana#16974)
  Search: Set element height to 100% to avoid Chrome 74's overflow (grafana#17054)
  Docs: adds note about removing session storage (grafana#17003)
  Chore: remove use of `== false` (grafana#17036)
  Explore: use @grafana/ui legend (grafana#17027)
  tech: avoid alias for importing models in alerting (grafana#17041)
  DataSourcePlugin: support custom tabs (grafana#16859)
  Dashboard: Fixes scrolling issues for Edge browser (grafana#17033)
  SeriesData: remove color from Field (grafana#17044)

docs/sources/installation/upgrading.md

@@ -169,3 +169,9 @@ configuration.
 If you're embedding Grafana in a `<frame>`, `<iframe>`, `<embed>` or `<object>` on a different website it will no longer work due to a new setting
 that per default instructs the browser to not allow Grafana to be embedded. Read more [here](/installation/configuration/#allow-embedding) about
 this new setting.
+
+### Session storage is no longer used
+
+In 6.2 we completely removed the backend session storage since we replaced the previous login session implementation with an auth token.
+If you are using Auth proxy with LDAP an shared cached is used in Grafana so you might want configure [remote_cache] instead. If not
+Grafana will fallback to using the database as an shared cache.

docs/sources/tutorials/ha_setup.md

@@ -30,7 +30,8 @@ Currently alerting supports a limited form of high availability. Since v4.2.0, a
 
 ## User sessions
 
-> Beginning with Grafana v6.0 and above the following only applies when using [Auth Proxy Authentication](/auth/auth-proxy/).
+> After Grafana 6.2 you don't need to configure session storage since the database will be used by default.
+> If you want to offload the login session data from the database you can configure [remote_cache]({{< relref "configuration.md" >}}#remote-cache)
 
 The second thing to consider is how to deal with user sessions and how to configure your load balancer in front of Grafana.
 Grafana supports two ways of storing session data: locally on disk or in a database/cache-server.

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

@@ -42,9 +42,10 @@ export class CustomScrollbar extends Component<Props> {
 
   updateScroll() {
     const ref = this.ref.current;
+    const { scrollTop } = this.props;
 
-    if (ref && !isNil(this.props.scrollTop)) {
-      ref.scrollTop(this.props.scrollTop);
+    if (ref && !isNil(scrollTop)) {
+      ref.scrollTop(scrollTop);
     }
   }
 
@@ -70,6 +71,44 @@ export class CustomScrollbar extends Component<Props> {
     this.updateScroll();
   }
 
+  renderTrack = (track: 'track-vertical' | 'track-horizontal', hideTrack: boolean | undefined, passedProps: any) => {
+    return (
+      <div
+        {...passedProps}
+        className={cx(
+          css`
+            visibility: ${hideTrack ? 'none' : 'visible'};
+          `,
+          track
+        )}
+      />
+    );
+  };
+
+  renderThumb = (thumb: 'thumb-horizontal' | 'thumb-vertical', passedProps: any) => {
+    return <div {...passedProps} className={thumb} />;
+  };
+
+  renderTrackHorizontal = (passedProps: any) => {
+    return this.renderTrack('track-horizontal', this.props.hideHorizontalTrack, passedProps);
+  };
+
+  renderTrackVertical = (passedProps: any) => {
+    return this.renderTrack('track-vertical', this.props.hideVerticalTrack, passedProps);
+  };
+
+  renderThumbHorizontal = (passedProps: any) => {
+    return this.renderThumb('thumb-horizontal', passedProps);
+  };
+
+  renderThumbVertical = (passedProps: any) => {
+    return this.renderThumb('thumb-vertical', passedProps);
+  };
+
+  renderView = (passedProps: any) => {
+    return <div {...passedProps} className="view" />;
+  };
+
   render() {
     const {
       className,
@@ -80,8 +119,6 @@ export class CustomScrollbar extends Component<Props> {
       autoHide,
       autoHideTimeout,
       hideTracksWhenNotNeeded,
-      hideHorizontalTrack,
-      hideVerticalTrack,
     } = this.props;
 
     return (
@@ -97,31 +134,11 @@ export class CustomScrollbar extends Component<Props> {
         // Before these where set to inhert but that caused problems with cut of legends in firefox
         autoHeightMax={autoHeightMax}
         autoHeightMin={autoHeightMin}
-        renderTrackHorizontal={props => (
-          <div
-            {...props}
-            className={cx(
-              css`
-                visibility: ${hideHorizontalTrack ? 'none' : 'visible'};
-              `,
-              'track-horizontal'
-            )}
-          />
-        )}
-        renderTrackVertical={props => (
-          <div
-            {...props}
-            className={cx(
-              css`
-                visibility: ${hideVerticalTrack ? 'none' : 'visible'};
-              `,
-              'track-vertical'
-            )}
-          />
-        )}
-        renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
-        renderThumbVertical={props => <div {...props} className="thumb-vertical" />}
-        renderView={props => <div {...props} className="view" />}
+        renderTrackHorizontal={this.renderTrackHorizontal}
+        renderTrackVertical={this.renderTrackVertical}
+        renderThumbHorizontal={this.renderThumbHorizontal}
+        renderThumbVertical={this.renderThumbVertical}
+        renderView={this.renderView}
       >
         {children}
       </Scrollbars>

packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap

@@ -37,7 +37,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
     </p>
   </div>
   <div
-    className="css-17l4171 track-horizontal"
+    className="css-52gpmd track-horizontal"
     style={
       Object {
         "display": "none",
@@ -58,7 +58,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
     />
   </div>
   <div
-    className="css-17l4171 track-vertical"
+    className="css-52gpmd track-vertical"
     style={
       Object {
         "display": "none",

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

@@ -76,7 +76,7 @@ export class Gauge extends PureComponent<Props> {
     );
 
     const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
-    const gaugeWidth = Math.min(dimension / 5, 40) / gaugeWidthReduceRatio;
+    const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio;
     const thresholdMarkersWidth = gaugeWidth / 5;
     const fontSize = Math.min(dimension / 5.5, 100) * (value.text !== null ? this.getFontScale(value.text.length) : 1);
     const thresholdLabelFontSize = fontSize / 2.5;

packages/grafana-ui/src/components/Graph/GraphLegend.tsx

@@ -14,10 +14,10 @@ interface GraphLegendProps extends LegendProps {
   displayMode: LegendDisplayMode;
   sortBy?: string;
   sortDesc?: boolean;
-  onSeriesColorChange: SeriesColorChangeHandler;
+  onSeriesColorChange?: SeriesColorChangeHandler;
   onSeriesAxisToggle?: SeriesAxisToggleHandler;
-  onToggleSort: (sortBy: string) => void;
-  onLabelClick: (item: LegendItem, event: React.MouseEvent<HTMLElement>) => void;
+  onToggleSort?: (sortBy: string) => void;
+  onLabelClick?: (item: LegendItem, event: React.MouseEvent<HTMLElement>) => void;
 }
 
 export const GraphLegend: React.FunctionComponent<GraphLegendProps> = ({
@@ -116,3 +116,5 @@ export const GraphLegend: React.FunctionComponent<GraphLegendProps> = ({
     />
   );
 };
+
+GraphLegend.displayName = 'GraphLegend';

packages/grafana-ui/src/components/Graph/GraphLegendItem.tsx

@@ -10,9 +10,9 @@ export interface GraphLegendItemProps {
   key?: React.Key;
   item: LegendItem;
   className?: string;
-  onLabelClick: (item: LegendItem, event: React.MouseEvent<HTMLDivElement>) => void;
-  onSeriesColorChange: SeriesColorChangeHandler;
-  onToggleAxis: () => void;
+  onLabelClick?: (item: LegendItem, event: React.MouseEvent<HTMLDivElement>) => void;
+  onSeriesColorChange?: SeriesColorChangeHandler;
+  onToggleAxis?: () => void;
 }
 
 export const GraphLegendListItem: React.FunctionComponent<GraphLegendItemProps> = ({
@@ -21,19 +21,31 @@ export const GraphLegendListItem: React.FunctionComponent<GraphLegendItemProps>
   onToggleAxis,
   onLabelClick,
 }) => {
+  const theme = useContext(ThemeContext);
+
   return (
     <>
       <LegendSeriesIcon
+        disabled={!onSeriesColorChange}
         color={item.color}
-        onColorChange={color => onSeriesColorChange(item.label, color)}
+        onColorChange={color => {
+          if (onSeriesColorChange) {
+            onSeriesColorChange(item.label, color);
+          }
+        }}
         onToggleAxis={onToggleAxis}
         yAxis={item.yAxis}
       />
       <div
-        onClick={event => onLabelClick(item, event)}
+        onClick={event => {
+          if (onLabelClick) {
+            onLabelClick(item, event);
+          }
+        }}
         className={css`
           cursor: pointer;
           white-space: nowrap;
+          color: ${!item.isVisible && theme.colors.linkDisabled};
         `}
       >
         {item.label}
@@ -74,13 +86,22 @@ export const GraphLegendTableRow: React.FunctionComponent<GraphLegendItemProps>
           `}
         >
           <LegendSeriesIcon
+            disabled={!!onSeriesColorChange}
             color={item.color}
-            onColorChange={color => onSeriesColorChange(item.label, color)}
+            onColorChange={color => {
+              if (onSeriesColorChange) {
+                onSeriesColorChange(item.label, color);
+              }
+            }}
             onToggleAxis={onToggleAxis}
             yAxis={item.yAxis}
           />
           <div
-            onClick={event => onLabelClick(item, event)}
+            onClick={event => {
+              if (onLabelClick) {
+                onLabelClick(item, event);
+              }
+            }}
             className={css`
               cursor: pointer;
               white-space: nowrap;

packages/grafana-ui/src/components/Legend/LegendList.tsx

@@ -28,7 +28,7 @@ export const LegendList: React.FunctionComponent<LegendComponentProps> = ({
     );
   };
 
-  const getItemKey = (item: LegendItem) => item.label;
+  const getItemKey = (item: LegendItem) => `${item.label}`;
 
   const styles = {
     wrapper: cx(

packages/grafana-ui/src/components/Legend/LegendSeriesIcon.tsx

@@ -1,21 +1,47 @@
 import React from 'react';
+import { css, cx } from 'emotion';
 import { SeriesColorPicker } from '../ColorPicker/ColorPicker';
-import { SeriesIcon } from './SeriesIcon';
+import { SeriesIcon, SeriesIconProps } from './SeriesIcon';
 
 interface LegendSeriesIconProps {
+  disabled: boolean;
   color: string;
   yAxis: number;
   onColorChange: (color: string) => void;
   onToggleAxis?: () => void;
 }
 
 export const LegendSeriesIcon: React.FunctionComponent<LegendSeriesIconProps> = ({
+  disabled,
   yAxis,
   color,
   onColorChange,
   onToggleAxis,
 }) => {
-  return (
+  let iconProps: SeriesIconProps = {
+    color,
+  };
+
+  if (!disabled) {
+    iconProps = {
+      ...iconProps,
+      className: 'pointer',
+    };
+  }
+
+  return disabled ? (
+    <span
+      className={cx(
+        'graph-legend-icon',
+        disabled &&
+          css`
+            cursor: default;
+          `
+      )}
+    >
+      <SeriesIcon {...iconProps} />
+    </span>
+  ) : (
     <SeriesColorPicker
       yaxis={yAxis}
       color={color}
@@ -25,7 +51,7 @@ export const LegendSeriesIcon: React.FunctionComponent<LegendSeriesIconProps> =
     >
       {({ ref, showColorPicker, hideColorPicker }) => (
         <span ref={ref} onClick={showColorPicker} onMouseLeave={hideColorPicker} className="graph-legend-icon">
-          <SeriesIcon color={color} />
+          <SeriesIcon {...iconProps} />
         </span>
       )}
     </SeriesColorPicker>

packages/grafana-ui/src/components/Legend/SeriesIcon.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
+import { cx } from 'emotion';
 
-export const SeriesIcon: React.FunctionComponent<{ color: string }> = ({ color }) => {
-  return <i className="fa fa-minus pointer" style={{ color }} />;
+export interface SeriesIconProps {
+  color: string;
+  className?: string;
+}
+export const SeriesIcon: React.FunctionComponent<SeriesIconProps> = ({ color, className }) => {
+  return <i className={cx('fa', 'fa-minus', className)} style={{ color }} />;
 };

packages/grafana-ui/src/components/index.ts

@@ -45,10 +45,20 @@ export { TableInputCSV } from './Table/TableInputCSV';
 export { BigValue } from './BigValue/BigValue';
 export { Gauge } from './Gauge/Gauge';
 export { Graph } from './Graph/Graph';
+export { GraphLegend } from './Graph/GraphLegend';
 export { GraphWithLegend } from './Graph/GraphWithLegend';
 export { BarGauge } from './BarGauge/BarGauge';
 export { VizRepeater } from './VizRepeater/VizRepeater';
-export { LegendOptions, LegendBasicOptions, LegendRenderOptions, LegendList, LegendTable } from './Legend/Legend';
+export {
+  LegendOptions,
+  LegendBasicOptions,
+  LegendRenderOptions,
+  LegendList,
+  LegendTable,
+  LegendItem,
+  LegendPlacement,
+  LegendDisplayMode,
+} from './Legend/Legend';
 // Panel editors
 export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
 export { ClickOutsideWrapper } from './ClickOutsideWrapper/ClickOutsideWrapper';

packages/grafana-ui/src/types/data.ts

@@ -47,7 +47,6 @@ export interface Field {
   unit?: string;
   dateFormat?: string; // Source data format
   decimals?: number | null; // Significant digits (for display)
-  color?: string;
   min?: number | null;
   max?: number | null;
 }

packages/grafana-ui/src/types/plugin.ts

@@ -91,17 +91,17 @@ export interface PluginMetaInfo {
   version: string;
 }
 
-export interface PluginConfigTabProps<T extends PluginMeta> {
-  meta: T;
+export interface PluginConfigPageProps<T extends GrafanaPlugin> {
+  plugin: T;
   query: { [s: string]: any }; // The URL query parameters
 }
 
-export interface PluginConfigTab<T extends PluginMeta> {
+export interface PluginConfigPage<T extends GrafanaPlugin> {
   title: string; // Display
   icon?: string;
   id: string; // Unique, in URL
 
-  body: ComponentClass<PluginConfigTabProps<T>>;
+  body: ComponentClass<PluginConfigPageProps<T>>;
 }
 
 export class GrafanaPlugin<T extends PluginMeta = PluginMeta> {
@@ -112,14 +112,14 @@ export class GrafanaPlugin<T extends PluginMeta = PluginMeta> {
   angularConfigCtrl?: any;
 
   // Show configuration tabs on the plugin page
-  configTabs?: Array<PluginConfigTab<T>>;
+  configPages?: Array<PluginConfigPage<GrafanaPlugin>>;
 
   // Tabs on the plugin page
-  addConfigTab(tab: PluginConfigTab<T>) {
-    if (!this.configTabs) {
-      this.configTabs = [];
+  addConfigPage(tab: PluginConfigPage<GrafanaPlugin>) {
+    if (!this.configPages) {
+      this.configPages = [];
     }
-    this.configTabs.push(tab);
+    this.configPages.push(tab);
     return this;
   }
 }