IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-02 05:29:42 -06:00
Code Issues Packages Projects Releases Wiki Activity

add a basic alpha react table

Browse Source
This commit is contained in:
ryan 2019-03-05 16:07:46 -08:00
parent b582611004
commit f59ccdf59c
10 changed files with 290 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/plugins/built_in_plugins.ts
View File

@ -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,

9
public/app/plugins/panel/table2/README.md Normal file
View File

@ -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/)

67
public/app/plugins/panel/table2/TablePanel.tsx Normal file
View File

@ -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>
);
}
}

26
public/app/plugins/panel/table2/TablePanelEditor.tsx Normal file
View File

@ -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>
);
}
}

67
public/app/plugins/panel/table2/img/icn-table-panel.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

9
public/app/plugins/panel/table2/module.tsx Normal file
View File

@ -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);

19
public/app/plugins/panel/table2/plugin.json Normal file
View File

@ -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"
}
}
}

7
public/app/plugins/panel/table2/types.ts Normal file
View File

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

1
public/sass/_grafana.scss
View File

@ -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';

83
public/sass/components/_react_virtualized.scss Normal file
View File

@ -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 {
}