add a basic alpha react table

public/app/features/plugins/built_in_plugins.ts

@@ -23,6 +23,7 @@ import * as pluginsListPanel from 'app/plugins/panel/pluginlist/module';
 import * as alertListPanel from 'app/plugins/panel/alertlist/module';
 import * as heatmapPanel from 'app/plugins/panel/heatmap/module';
 import * as tablePanel from 'app/plugins/panel/table/module';
+import * as table2Panel from 'app/plugins/panel/table2/module';
 import * as singlestatPanel from 'app/plugins/panel/singlestat/module';
 import * as gettingStartedPanel from 'app/plugins/panel/gettingstarted/module';
 import * as gaugePanel from 'app/plugins/panel/gauge/module';
@@ -53,6 +54,7 @@ const builtInPlugins = {
   'app/plugins/panel/alertlist/module': alertListPanel,
   'app/plugins/panel/heatmap/module': heatmapPanel,
   'app/plugins/panel/table/module': tablePanel,
+  'app/plugins/panel/table2/module': table2Panel,
   'app/plugins/panel/singlestat/module': singlestatPanel,
   'app/plugins/panel/gettingstarted/module': gettingStartedPanel,
   'app/plugins/panel/gauge/module': gaugePanel,

public/app/plugins/panel/table2/README.md

@@ -0,0 +1,9 @@
+# Table Panel -  Native Plugin
+
+The Table Panel is **included** with Grafana.
+
+The table panel is very flexible, supporting both multiple modes for time series as well as for table, annotation and raw JSON data. It also provides date formatting and value formatting and coloring options.
+
+Check out the [Table Panel Showcase in the Grafana Playground](http://play.grafana.org/dashboard/db/table-panel-showcase) or read more about it here:
+
+[http://docs.grafana.org/reference/table_panel/](http://docs.grafana.org/reference/table_panel/)

public/app/plugins/panel/table2/TablePanel.tsx

@@ -0,0 +1,67 @@
+// Libraries
+import _ from 'lodash';
+import React, { PureComponent } from 'react';
+
+// Types
+import { PanelProps } from '@grafana/ui/src/types';
+import { Options } from './types';
+
+import { Table, Index, Column } from 'react-virtualized';
+
+interface Props extends PanelProps<Options> {}
+
+export class TablePanel extends PureComponent<Props> {
+  getRow = (index: Index): any => {
+    const { panelData } = this.props;
+    if (panelData.tableData) {
+      return panelData.tableData.rows[index.index];
+    }
+    return null;
+  };
+
+  render() {
+    const { panelData, width, height, options } = this.props;
+    const { showHeader } = options;
+
+    const headerClassName = null;
+    const headerHeight = 30;
+    const rowHeight = 20;
+
+    let rowCount = 0;
+    if (panelData.tableData) {
+      rowCount = panelData.tableData.rows.length;
+    } else {
+      return <div>No Table Data...</div>;
+    }
+
+    return (
+      <div>
+        <Table
+          disableHeader={!showHeader}
+          headerClassName={headerClassName}
+          headerHeight={headerHeight}
+          height={height}
+          overscanRowCount={5}
+          rowHeight={rowHeight}
+          rowGetter={this.getRow}
+          rowCount={rowCount}
+          width={width}
+        >
+          {panelData.tableData.columns.map((col, index) => {
+            return (
+              <Column
+                label={col.text}
+                cellDataGetter={({ rowData }) => {
+                  return rowData[index];
+                }}
+                dataKey={index}
+                disableSort={true}
+                width={100}
+              />
+            );
+          })}
+        </Table>
+      </div>
+    );
+  }
+}

public/app/plugins/panel/table2/TablePanelEditor.tsx

@@ -0,0 +1,26 @@
+//// Libraries
+import _ from 'lodash';
+import React, { PureComponent } from 'react';
+
+// Types
+import { PanelEditorProps, Switch } from '@grafana/ui';
+import { Options } from './types';
+
+export class TablePanelEditor extends PureComponent<PanelEditorProps<Options>> {
+  onToggleShowHeader = () => {
+    this.props.onOptionsChange({ ...this.props.options, showHeader: !this.props.options.showHeader });
+  };
+
+  render() {
+    const { showHeader } = this.props.options;
+
+    return (
+      <div>
+        <div className="section gf-form-group">
+          <h5 className="section-heading">Header</h5>
+          <Switch label="Show" labelClass="width-5" checked={showHeader} onChange={this.onToggleShowHeader} />
+        </div>
+      </div>
+    );
+  }
+}

public/app/plugins/panel/table2/img/icn-table-panel.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="15.8113" y1="25" x2="15.8113" y2="-2.5362">
+			<stop  offset="0" style="stop-color:#FFF33B"/>
+			<stop  offset="0.0595" style="stop-color:#FFE029"/>
+			<stop  offset="0.1303" style="stop-color:#FFD218"/>
+			<stop  offset="0.2032" style="stop-color:#FEC90F"/>
+			<stop  offset="0.2809" style="stop-color:#FDC70C"/>
+			<stop  offset="0.6685" style="stop-color:#F3903F"/>
+			<stop  offset="0.8876" style="stop-color:#ED683C"/>
+			<stop  offset="1" style="stop-color:#E93E3A"/>
+		</linearGradient>
+		<rect x="0" style="fill:url(#SVGID_1_);" width="31.623" height="15.049"/>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="50" y1="25" x2="50" y2="-2.5362">
+			<stop  offset="0" style="stop-color:#FFF33B"/>
+			<stop  offset="0.0595" style="stop-color:#FFE029"/>
+			<stop  offset="0.1303" style="stop-color:#FFD218"/>
+			<stop  offset="0.2032" style="stop-color:#FEC90F"/>
+			<stop  offset="0.2809" style="stop-color:#FDC70C"/>
+			<stop  offset="0.6685" style="stop-color:#F3903F"/>
+			<stop  offset="0.8876" style="stop-color:#ED683C"/>
+			<stop  offset="1" style="stop-color:#E93E3A"/>
+		</linearGradient>
+		<rect x="34.188" style="fill:url(#SVGID_2_);" width="31.623" height="15.049"/>
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="84.1887" y1="25" x2="84.1887" y2="-2.5362">
+			<stop  offset="0" style="stop-color:#FFF33B"/>
+			<stop  offset="0.0595" style="stop-color:#FFE029"/>
+			<stop  offset="0.1303" style="stop-color:#FFD218"/>
+			<stop  offset="0.2032" style="stop-color:#FEC90F"/>
+			<stop  offset="0.2809" style="stop-color:#FDC70C"/>
+			<stop  offset="0.6685" style="stop-color:#F3903F"/>
+			<stop  offset="0.8876" style="stop-color:#ED683C"/>
+			<stop  offset="1" style="stop-color:#E93E3A"/>
+		</linearGradient>
+		<rect x="68.377" style="fill:url(#SVGID_3_);" width="31.623" height="15.049"/>
+	</g>
+	<g>
+		<rect x="0" y="16.99" style="fill:#898989;" width="31.623" height="15.049"/>
+		<rect x="34.188" y="16.99" style="fill:#898989;" width="31.623" height="15.049"/>
+		<rect x="68.377" y="16.99" style="fill:#898989;" width="31.623" height="15.049"/>
+	</g>
+	<g>
+		<rect x="0" y="33.981" style="fill:#6D6E71;" width="31.623" height="15.049"/>
+		<rect x="34.188" y="33.981" style="fill:#6D6E71;" width="31.623" height="15.049"/>
+		<rect x="68.377" y="33.981" style="fill:#6D6E71;" width="31.623" height="15.049"/>
+	</g>
+	<g>
+		<rect x="0" y="50.971" style="fill:#898989;" width="31.623" height="15.049"/>
+		<rect x="34.188" y="50.971" style="fill:#898989;" width="31.623" height="15.049"/>
+		<rect x="68.377" y="50.971" style="fill:#898989;" width="31.623" height="15.049"/>
+	</g>
+	<g>
+		<rect x="0" y="67.961" style="fill:#6D6E71;" width="31.623" height="15.049"/>
+		<rect x="34.188" y="67.961" style="fill:#6D6E71;" width="31.623" height="15.049"/>
+		<rect x="68.377" y="67.961" style="fill:#6D6E71;" width="31.623" height="15.049"/>
+	</g>
+	<g>
+		<rect x="0" y="84.951" style="fill:#898989;" width="31.623" height="15.049"/>
+		<rect x="34.188" y="84.951" style="fill:#898989;" width="31.623" height="15.049"/>
+		<rect x="68.377" y="84.951" style="fill:#898989;" width="31.623" height="15.049"/>
+	</g>
+</g>
+</svg>

public/app/plugins/panel/table2/module.tsx

@@ -0,0 +1,9 @@
+import { ReactPanelPlugin } from '@grafana/ui';
+
+import { TablePanelEditor } from './TablePanelEditor';
+import { TablePanel } from './TablePanel';
+import { Options, defaults } from './types';
+
+export const reactPanel = new ReactPanelPlugin<Options>(TablePanel);
+reactPanel.setEditor(TablePanelEditor);
+reactPanel.setDefaults(defaults);

public/app/plugins/panel/table2/plugin.json

@@ -0,0 +1,19 @@
+{
+  "type": "panel",
+  "name": "React Table",
+  "id": "table2",
+  "state": "alpha",
+
+  "dataFormats": ["table"],
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "https://grafana.com"
+    },
+    "logos": {
+      "small": "img/icn-table-panel.svg",
+      "large": "img/icn-table-panel.svg"
+    }
+  }
+}

public/app/plugins/panel/table2/types.ts

@@ -0,0 +1,7 @@
+export interface Options {
+  showHeader: boolean;
+}
+
+export const defaults: Options = {
+  showHeader: true,
+};

public/sass/_grafana.scss

@@ -98,6 +98,7 @@
 @import 'components/page_loader';
 @import 'components/toggle_button_group';
 @import 'components/popover-box';
+@import 'components/react_virtualized';
 
 // LOAD @grafana/ui components
 @import '../../packages/grafana-ui/src/index';

public/sass/components/_react_virtualized.scss

@@ -0,0 +1,83 @@
+/**
+COPIED FROM:
+https://raw.githubusercontent.com/bvaughn/react-virtualized/master/source/styles.css
+*/
+
+/* Collection default theme */
+
+.ReactVirtualized__Collection {
+}
+
+.ReactVirtualized__Collection__innerScrollContainer {
+}
+
+/* Grid default theme */
+
+.ReactVirtualized__Grid {
+}
+
+.ReactVirtualized__Grid__innerScrollContainer {
+}
+
+/* Table default theme */
+
+.ReactVirtualized__Table {
+}
+
+.ReactVirtualized__Table__Grid {
+}
+
+.ReactVirtualized__Table__headerRow {
+  font-weight: 700;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ReactVirtualized__Table__row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ReactVirtualized__Table__headerTruncatedText {
+  display: inline-block;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ReactVirtualized__Table__headerColumn,
+.ReactVirtualized__Table__rowColumn {
+  margin-right: 10px;
+  min-width: 0px;
+}
+.ReactVirtualized__Table__rowColumn {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ReactVirtualized__Table__headerColumn:first-of-type,
+.ReactVirtualized__Table__rowColumn:first-of-type {
+  margin-left: 10px;
+}
+.ReactVirtualized__Table__sortableHeaderColumn {
+  cursor: pointer;
+}
+
+.ReactVirtualized__Table__sortableHeaderIconContainer {
+  display: flex;
+  align-items: center;
+}
+.ReactVirtualized__Table__sortableHeaderIcon {
+  flex: 0 0 24px;
+  height: 1em;
+  width: 1em;
+  fill: currentColor;
+}
+
+/* List default theme */
+
+.ReactVirtualized__List {
+}