graph: make table markup corresponding to standards

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

@@ -41,90 +41,39 @@ export class GraphLegend extends React.PureComponent<GraphLegendProps, GraphLege
   }
 
   render() {
-    const { className = '', hiddenSeries } = this.props;
+    const { className, hiddenSeries, sideWidth } = this.props;
     const { values, min, max, avg, current, total } = this.props;
     const seriesValuesProps = { values, min, max, avg, current, total };
     const seriesList = this.sortLegend();
-    return (
-      <div className={`${className} graph-legend`}>
-        <div className={`graph-legend-content ${this.props.alignAsTable ? 'graph-legend-table' : ''}`}>
-          <div className="graph-legend-scroll">
-            {this.props.alignAsTable ? (
-              <LegendTable seriesList={seriesList} hiddenSeries={hiddenSeries} {...seriesValuesProps} />
-            ) : (
-              seriesList.map((series, i) => (
-                <LegendSeriesItem
-                  key={series.id}
-                  series={series}
-                  index={i}
-                  hiddenSeries={hiddenSeries}
-                  {...seriesValuesProps}
-                />
-              ))
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-interface LegendTableProps {
-  seriesList: any[];
-  hiddenSeries: any;
-  values?: boolean;
-  min?: boolean;
-  max?: boolean;
-  avg?: boolean;
-  current?: boolean;
-  total?: boolean;
-}
-
-class LegendTable extends React.PureComponent<LegendTableProps> {
-  render() {
-    const seriesList = this.props.seriesList;
-    const { values, min, max, avg, current, total } = this.props;
-    const seriesValuesProps = { values, min, max, avg, current, total };
-    const headerStyle: React.CSSProperties = {
-      textAlign: 'left',
+    const legendStyle: React.CSSProperties = {
+      width: sideWidth,
     };
 
     return (
-      <tbody>
-        <tr>
-          <th colSpan={2} style={headerStyle} />
-          {LEGEND_STATS.map(
-            statName => seriesValuesProps[statName] && <LegendTableHeader key={statName} statName={statName} />
+      <div
+        className={`graph-legend-content ${className} ${this.props.alignAsTable ? 'graph-legend-table' : ''}`}
+        style={legendStyle}
+      >
+        <div className="graph-legend-scroll">
+          {this.props.alignAsTable ? (
+            <LegendTable seriesList={seriesList} hiddenSeries={hiddenSeries} {...seriesValuesProps} />
+          ) : (
+            seriesList.map((series, i) => (
+              <LegendSeriesItem
+                key={series.id}
+                series={series}
+                index={i}
+                hiddenSeries={hiddenSeries}
+                {...seriesValuesProps}
+              />
+            ))
           )}
-        </tr>
-        {seriesList.map((series, i) => (
-          <LegendSeriesItem
-            key={series.id}
-            series={series}
-            index={i}
-            hiddenSeries={this.props.hiddenSeries}
-            {...seriesValuesProps}
-          />
-        ))}
-      </tbody>
+        </div>
+      </div>
     );
   }
 }
 
-interface LegendTableHeaderProps {
-  statName: string;
-  sortDesc?: boolean;
-}
-
-function LegendTableHeader(props: LegendTableHeaderProps) {
-  return (
-    <th className="pointer" data-stat={props.statName}>
-      {props.statName}
-      <span className={props.sortDesc ? 'fa fa-caret-down' : 'fa fa-caret-up'} />
-    </th>
-  );
-}
-
 interface LegendSeriesItemProps {
   series: any;
   index: number;
@@ -163,20 +112,105 @@ class LegendSeriesItem extends React.Component<LegendSeriesItemProps> {
 function LegendValue(props) {
   const value = props.value;
   const valueName = props.valueName;
+  if (props.asTable) {
+    return <td className={`graph-legend-value ${valueName}`}>{value}</td>;
+  }
   return <div className={`graph-legend-value ${valueName}`}>{value}</div>;
 }
 
-function renderLegendValues(props: LegendSeriesItemProps, series) {
+function renderLegendValues(props: LegendSeriesItemProps, series, asTable = false) {
   const legendValueItems = [];
   for (const valueName of LEGEND_STATS) {
     if (props[valueName]) {
       const valueFormatted = series.formatValue(series.stats[valueName]);
-      legendValueItems.push(<LegendValue key={valueName} valueName={valueName} value={valueFormatted} />);
+      legendValueItems.push(
+        <LegendValue key={valueName} valueName={valueName} value={valueFormatted} asTable={asTable} />
+      );
     }
   }
   return legendValueItems;
 }
 
+interface LegendTableProps {
+  seriesList: any[];
+  hiddenSeries: any;
+  values?: boolean;
+  min?: boolean;
+  max?: boolean;
+  avg?: boolean;
+  current?: boolean;
+  total?: boolean;
+}
+
+class LegendTable extends React.PureComponent<LegendTableProps> {
+  render() {
+    const seriesList = this.props.seriesList;
+    const { values, min, max, avg, current, total } = this.props;
+    const seriesValuesProps = { values, min, max, avg, current, total };
+
+    return (
+      <table>
+        <tbody>
+          <tr>
+            <th style={{ textAlign: 'left' }} />
+            {LEGEND_STATS.map(
+              statName => seriesValuesProps[statName] && <LegendTableHeader key={statName} statName={statName} />
+            )}
+          </tr>
+          {seriesList.map((series, i) => (
+            <LegendSeriesItemAsTable
+              key={series.id}
+              series={series}
+              index={i}
+              hiddenSeries={this.props.hiddenSeries}
+              {...seriesValuesProps}
+            />
+          ))}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+class LegendSeriesItemAsTable extends React.Component<LegendSeriesItemProps> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { series, index, hiddenSeries } = this.props;
+    const seriesOptionClasses = getOptionSeriesCSSClasses(series, hiddenSeries);
+    const valueItems = this.props.values ? renderLegendValues(this.props, series, true) : [];
+    return (
+      <tr className={`graph-legend-series ${seriesOptionClasses}`} data-series-index={index}>
+        <td>
+          <div className="graph-legend-icon">
+            <i className="fa fa-minus pointer" style={{ color: series.color }} />
+          </div>
+          <a className="graph-legend-alias pointer" title={series.aliasEscaped}>
+            {series.aliasEscaped}
+          </a>
+        </td>
+        {valueItems}
+      </tr>
+    );
+  }
+}
+
+interface LegendTableHeaderProps {
+  statName: string;
+  sortDesc?: boolean;
+}
+
+function LegendTableHeader(props: LegendTableHeaderProps) {
+  return (
+    <th className="pointer" data-stat={props.statName}>
+      {props.statName}
+      <span className={props.sortDesc ? 'fa fa-caret-down' : 'fa fa-caret-up'} />
+    </th>
+  );
+}
+
 function getOptionSeriesCSSClasses(series, hiddenSeries) {
   const classes = [];
   if (series.yaxis === 2) {