graph legend: use 'react-custom-scrollbars' for legend scroll

public/app/plugins/panel/graph/Legend.tsx

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import React from 'react';
 import { TimeSeries } from 'app/core/core';
+import withScrollBar from 'app/core/components/ScrollBar/withScrollBar';
 
 const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total'];
 
@@ -85,7 +86,7 @@ export class GraphLegend extends React.PureComponent<GraphLegendProps, GraphLege
     const seriesHideProps = { hideEmpty, hideZero };
     const sortProps = { sort, sortDesc };
     const seriesList = _.filter(this.sortLegend(), series => !series.hideFromLegend(seriesHideProps));
-    const legendCustomClasses = `${this.props.alignAsTable ? 'graph-legend-table' : ''} ${optionalClass}`;
+    const legendClass = `${this.props.alignAsTable ? 'graph-legend-table' : ''} ${optionalClass}`;
 
     // Set min-width if side style and there is a value, otherwise remove the CSS property
     // Set width so it works with IE11
@@ -106,10 +107,8 @@ export class GraphLegend extends React.PureComponent<GraphLegendProps, GraphLege
     };
 
     return (
-      <div className={`graph-legend-content ${legendCustomClasses}`} style={legendStyle}>
-        <div className="graph-legend-scroll">
-          {this.props.alignAsTable ? <LegendTable {...legendProps} /> : <LegendSeriesList {...legendProps} />}
-        </div>
+      <div className={`graph-legend-content ${legendClass}`} style={legendStyle}>
+        {this.props.alignAsTable ? <LegendTable {...legendProps} /> : <LegendSeriesList {...legendProps} />}
       </div>
     );
   }
@@ -309,3 +308,6 @@ function getOptionSeriesCSSClasses(series, hiddenSeries) {
   }
   return classes.join(' ');
 }
+
+export const Legend = withScrollBar(GraphLegend);
+export default Legend;

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

@@ -22,7 +22,7 @@ import { alignYLevel } from './align_yaxes';
 import config from 'app/core/config';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { GraphLegend, GraphLegendProps } from './Legend';
+import { Legend, GraphLegendProps } from './Legend';
 
 import { GraphCtrl } from './module';
 
@@ -86,7 +86,6 @@ class GraphElement {
     updateLegendValues(this.data, this.panel, graphHeight);
 
     // this.ctrl.events.emit('render-legend');
-    // console.log(this.ctrl);
     const { values, min, max, avg, current, total } = this.panel.legend;
     const { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero } = this.panel.legend;
     const legendOptions = { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero };
@@ -99,7 +98,7 @@ class GraphElement {
       onToggleSeries: this.ctrl.toggleSeries.bind(this.ctrl),
       onToggleSort: this.ctrl.toggleSort.bind(this.ctrl),
     };
-    const legendReactElem = React.createElement(GraphLegend, legendProps);
+    const legendReactElem = React.createElement(Legend, legendProps);
     const legendElem = this.elem.parent().find('.graph-legend');
     ReactDOM.render(legendReactElem, legendElem[0]);
     this.onLegendRenderingComplete();

public/sass/components/_panel_graph.scss

@@ -57,9 +57,6 @@
   padding-top: 6px;
   position: relative;
 
-  // fix for Firefox (white stripe on the right of scrollbar)
-  width: calc(100% - 1px);
-
   .popover-content {
     padding: 0;
   }
@@ -67,11 +64,9 @@
 
 .graph-legend-content {
   position: relative;
-
-  // fix for Firefox (white stripe on the right of scrollbar)
-  width: calc(100% - 1px);
 }
 
+// @TODO: delete unused class
 .graph-legend-scroll {
   position: relative;
   overflow: auto !important;