IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'grafana/master' into table-reducer

Browse Source 
* grafana/master: (107 commits)
  another change that didn't come with earlier commit
  change that didn't come with in last commit
  reversed dashboard-padding
  Update CloudWatch metrics/dimension list (#16102)
  brought back dashboard-padding and panel-padding variables, made dashboard-padding more specific
  fix(prometheus): Change aligment of range queries (#16110)
  Minor refactoring of testdata query order PR #16122
  cleaner version
  maintain query order
  Update PLUGIN_DEV.md
  Merge with master, and updated logo and name
  update table data model
  fix(graphite): nonNegativeDerivative argument hidden if 0, fixes #12488
  Correct table names of sql storage for remotecache
  more fixes to snapshot
  more fixes to snapshot
  Fixed gofmt issue in PR #16093
  removed empty space in snapshot
  fix: Update snapshot related to new jest version
  fixed snapshot for test
  ...
This commit is contained in:
ryan
2019-03-21 08:01:11 -07:00
parent 7e56514c5a f2e1bfcde7
commit f8094a6e09
97 changed files with 3600 additions and 3632 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/package.json
View File

@@ -21,6 +21,7 @@
"@torkelo/react-select": "2.1.1",
"@types/react-color": "^2.14.0",
"classnames": "^2.2.5",
"d3": "^5.7.0",
"jquery": "^3.2.1",
"lodash": "^4.17.10",
"moment": "^2.22.2",
@@ -43,6 +44,7 @@
"@storybook/addon-knobs": "^4.1.7",
"@storybook/react": "^4.1.4",
"@types/classnames": "^2.2.6",
"@types/d3": "^5.7.0",
"@types/jest": "^23.3.2",
"@types/jquery": "^1.10.35",
"@types/lodash": "^4.14.119",

2
packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss
View File

@@ -45,7 +45,7 @@ $arrowSize: 15px;
border-right-color: transparent;
border-top-color: transparent;
top: 0;
left: calc(100% -$arrowSize);
left: calc(100%-#{$arrowSize});
}
&[data-placement^='right'] {

19
packages/grafana-ui/src/components/FormField/FormField.test.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import { FormField, Props } from './FormField';
const setup = (propOverrides?: object) => {
const setup = (propOverrides?: Partial<Props>) => {
const props: Props = {
label: 'Test',
labelWidth: 11,
@@ -15,10 +15,23 @@ const setup = (propOverrides?: object) => {
return shallow(<FormField {...props} />);
};
describe('Render', () => {
it('should render component', () => {
describe('FormField', () => {
it('should render component with default inputEl', () => {
const wrapper = setup();
expect(wrapper).toMatchSnapshot();
});
it('should render component with custom inputEl', () => {
const wrapper = setup({
inputEl: (
<>
<span>Input</span>
<button>Ok</button>
</>
),
});
expect(wrapper).toMatchSnapshot();
});
});

11
packages/grafana-ui/src/components/FormField/FormField.tsx
View File

@@ -5,6 +5,7 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
label: string;
labelWidth?: number;
inputWidth?: number;
inputEl?: React.ReactNode;
}
const defaultProps = {
@@ -12,14 +13,18 @@ const defaultProps = {
inputWidth: 12,
};
const FormField: FunctionComponent<Props> = ({ label, labelWidth, inputWidth, ...inputProps }) => {
/**
* Default form field including label used in Grafana UI. Default input element is simple <input />. You can also pass
* custom inputEl if required in which case inputWidth and inputProps are ignored.
*/
export const FormField: FunctionComponent<Props> = ({ label, labelWidth, inputWidth, inputEl, ...inputProps }) => {
return (
<div className="form-field">
<FormLabel width={labelWidth}>{label}</FormLabel>
<input type="text" className={`gf-form-input width-${inputWidth}`} {...inputProps} />
{inputEl || <input type="text" className={`gf-form-input width-${inputWidth}`} {...inputProps} />}
</div>
);
};
FormField.displayName = 'FormField';
FormField.defaultProps = defaultProps;
export { FormField };

20
packages/grafana-ui/src/components/FormField/__snapshots__/FormField.test.tsx.snap
View File

@@ -1,6 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should render component 1`] = `
exports[`FormField should render component with custom inputEl 1`] = `
<div
className="form-field"
>
<Component
width={11}
>
Test
</Component>
<span>
Input
</span>
<button>
Ok
</button>
</div>
`;
exports[`FormField should render component with default inputEl 1`] = `
<div
className="form-field"
>

42
packages/grafana-ui/src/components/PieChart/PieChart.story.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { storiesOf } from '@storybook/react';
import { number, text, object } from '@storybook/addon-knobs';
import { PieChart, PieChartType } from './PieChart';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
const getKnobs = () => {
return {
datapoints: object('datapoints', [
{
value: 100,
name: '100',
color: '#7EB26D',
},
{
value: 200,
name: '200',
color: '#6ED0E0',
},
]),
pieType: text('pieType', PieChartType.PIE),
strokeWidth: number('strokeWidth', 1),
unit: text('unit', 'ms'),
};
};
const PieChartStories = storiesOf('UI/PieChart/PieChart', module);
PieChartStories.addDecorator(withCenteredStory);
PieChartStories.add('Pie type: pie', () => {
const { datapoints, pieType, strokeWidth, unit } = getKnobs();
return renderComponentWithTheme(PieChart, {
width: 200,
height: 400,
datapoints,
pieType,
strokeWidth,
unit,
});
});

147
packages/grafana-ui/src/components/PieChart/PieChart.tsx Normal file
View File

@@ -0,0 +1,147 @@
import React, { PureComponent } from 'react';
import { select, pie, arc, event } from 'd3';
import { sum } from 'lodash';
import { GrafanaThemeType } from '../../types';
import { Themeable } from '../../index';
export enum PieChartType {
PIE = 'pie',
DONUT = 'donut',
}
export interface PieChartDataPoint {
value: number;
name: string;
color: string;
}
export interface Props extends Themeable {
height: number;
width: number;
datapoints: PieChartDataPoint[];
unit: string;
pieType: PieChartType;
strokeWidth: number;
}
export class PieChart extends PureComponent<Props> {
containerElement: any;
svgElement: any;
tooltipElement: any;
tooltipValueElement: any;
static defaultProps = {
pieType: 'pie',
format: 'short',
stat: 'current',
strokeWidth: 1,
theme: GrafanaThemeType.Dark,
};
componentDidMount() {
this.draw();
}
componentDidUpdate() {
this.draw();
}
draw() {
const { datapoints, pieType, strokeWidth } = this.props;
if (datapoints.length === 0) {
return;
}
const data = datapoints.map(datapoint => datapoint.value);
const names = datapoints.map(datapoint => datapoint.name);
const colors = datapoints.map(datapoint => datapoint.color);
const total = sum(data) || 1;
const percents = data.map((item: number) => (item / total) * 100);
const width = this.containerElement.offsetWidth;
const height = this.containerElement.offsetHeight;
const radius = Math.min(width, height) / 2;
const outerRadius = radius - radius / 10;
const innerRadius = pieType === PieChartType.PIE ? 0 : radius - radius / 3;
const svg = select(this.svgElement)
.html('')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', `translate(${width / 2},${height / 2})`);
const pieChart = pie();
const customArc = arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius)
.padAngle(0);
svg
.selectAll('path')
.data(pieChart(data))
.enter()
.append('path')
.attr('d', customArc as any)
.attr('fill', (d: any, idx: number) => colors[idx])
.style('fill-opacity', 0.15)
.style('stroke', (d: any, idx: number) => colors[idx])
.style('stroke-width', `${strokeWidth}px`)
.on('mouseover', (d: any, idx: any) => {
select(this.tooltipElement).style('opacity', 1);
select(this.tooltipValueElement).text(`${names[idx]} (${percents[idx].toFixed(2)}%)`);
})
.on('mousemove', () => {
select(this.tooltipElement)
.style('top', `${event.pageY - height / 2}px`)
.style('left', `${event.pageX}px`);
})
.on('mouseout', () => {
select(this.tooltipElement).style('opacity', 0);
});
}
render() {
const { height, width, datapoints } = this.props;
if (datapoints.length > 0) {
return (
<div className="piechart-panel">
<div
ref={element => (this.containerElement = element)}
className="piechart-container"
style={{
height: `${height * 0.9}px`,
width: `${Math.min(width, height * 1.3)}px`,
}}
>
<svg ref={element => (this.svgElement = element)} />
</div>
<div className="piechart-tooltip" ref={element => (this.tooltipElement = element)}>
<div className="piechart-tooltip-time">
<div
id="tooltip-value"
className="piechart-tooltip-value"
ref={element => (this.tooltipValueElement = element)}
/>
</div>
</div>
</div>
);
} else {
return (
<div className="piechart-panel">
<div className="datapoints-warning">
<span className="small">No data points</span>
</div>
</div>
);
}
}
}

38
packages/grafana-ui/src/components/SecretFormFied/SecretFormField.story.tsx Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { boolean } from '@storybook/addon-knobs';
import { SecretFormField } from './SecretFormField';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { UseState } from '../../utils/storybook/UseState';
const SecretFormFieldStories = storiesOf('UI/SecretFormField/SecretFormField', module);
SecretFormFieldStories.addDecorator(withCenteredStory);
const getSecretFormFieldKnobs = () => {
return {
isConfigured: boolean('Set configured state', false),
};
};
SecretFormFieldStories.add('default', () => {
const knobs = getSecretFormFieldKnobs();
return (
<UseState initialState="Input value">
{(value, setValue) => (
<SecretFormField
label={'Secret field'}
labelWidth={10}
value={value}
isConfigured={knobs.isConfigured}
onChange={e => setValue(e.currentTarget.value)}
onReset={() => {
action('Value was reset')('');
setValue('');
}}
/>
)}
</UseState>
);
});

71
packages/grafana-ui/src/components/SecretFormFied/SecretFormField.tsx Normal file
View File

@@ -0,0 +1,71 @@
import { omit } from 'lodash';
import React, { InputHTMLAttributes, FunctionComponent } from 'react';
import { FormField } from '..';
interface Props extends InputHTMLAttributes<HTMLInputElement> {
// Function to use when reset is clicked. Means you have to reset the input value yourself as this is uncontrolled
// component (or do something else if required).
onReset: () => void;
isConfigured: boolean;
label?: string;
labelWidth?: number;
inputWidth?: number;
// Placeholder of the input field when in non configured state.
placeholder?: string;
}
const defaultProps = {
inputWidth: 12,
placeholder: 'Password',
label: 'Password',
};
/**
* Form field that has 2 states configured and not configured. If configured it will not show its contents and adds
* a reset button that will clear the input and makes it accessible. In non configured state it behaves like normal
* form field. This is used for passwords or anything that is encrypted on the server and is later returned encrypted
* to the user (like datasource passwords).
*/
export const SecretFormField: FunctionComponent<Props> = ({
label,
labelWidth,
inputWidth,
onReset,
isConfigured,
placeholder,
...inputProps
}: Props) => {
return (
<FormField
label={label!}
labelWidth={labelWidth}
inputEl={
isConfigured ? (
<>
<input
type="text"
className={`gf-form-input width-${inputWidth! - 2}`}
disabled={true}
value="configured"
{...omit(inputProps, 'value')}
/>
<button className="btn btn-secondary gf-form-btn" onClick={onReset}>
reset
</button>
</>
) : (
<input
type="password"
className={`gf-form-input width-${inputWidth}`}
placeholder={placeholder}
{...inputProps}
/>
)
}
/>
);
};
SecretFormField.defaultProps = defaultProps;
SecretFormField.displayName = 'SecretFormField';

2
packages/grafana-ui/src/components/Table/Table.story.tsx
View File

@@ -40,8 +40,6 @@ export function makeDummyTable(columnCount: number, rowCount: number): TableData
const suffix = (rowId + 1).toString();
return Array.from(new Array(columnCount), (x, colId) => columnIndexToLeter(colId) + suffix);
}),
type: 'table',
columnMap: {},
};
}

16
packages/grafana-ui/src/components/Table/Table.tsx
View File

@@ -8,6 +8,7 @@ import {
CellMeasurerCache,
CellMeasurer,
GridCellProps,
Index,
} from 'react-virtualized';
import { Themeable } from '../../types/theme';
@@ -26,6 +27,7 @@ import { stringToJsRegex } from '../../utils/index';
export interface Props extends Themeable {
data: TableData;
minColumnWidth: number;
showHeader: boolean;
fixedHeader: boolean;
fixedColumns: number;
@@ -46,6 +48,7 @@ interface State {
interface ColumnRenderInfo {
header: string;
width: number;
builder: TableCellBuilder;
}
@@ -64,6 +67,7 @@ export class Table extends Component<Props, State> {
fixedHeader: true,
fixedColumns: 0,
rotate: false,
minColumnWidth: 150,
};
constructor(props: Props) {
@@ -76,7 +80,7 @@ export class Table extends Component<Props, State> {
this.renderer = this.initColumns(props);
this.measurer = new CellMeasurerCache({
defaultHeight: 30,
defaultWidth: 150,
fixedWidth: true,
});
}
@@ -110,7 +114,8 @@ export class Table extends Component<Props, State> {
/** Given the configuration, setup how each column gets rendered */
initColumns(props: Props): ColumnRenderInfo[] {
const { styles, data } = props;
const { styles, data, width, minColumnWidth } = props;
const columnWidth = Math.max(width / data.columns.length, minColumnWidth);
return data.columns.map((col, index) => {
let title = col.text;
@@ -131,6 +136,7 @@ export class Table extends Component<Props, State> {
return {
header: title,
width: columnWidth,
builder: getCellBuilder(col, style, this.props),
};
});
@@ -228,6 +234,10 @@ export class Table extends Component<Props, State> {
);
};
getColumnWidth = (col: Index): number => {
return this.renderer[col.index].width;
};
render() {
const { showHeader, fixedHeader, fixedColumns, rotate, width, height } = this.props;
const { data } = this.state;
@@ -269,7 +279,7 @@ export class Table extends Component<Props, State> {
rowCount={rowCount}
overscanColumnCount={8}
overscanRowCount={8}
columnWidth={this.measurer.columnWidth}
columnWidth={this.getColumnWidth}
deferredMeasurementCache={this.measurer}
cellRenderer={this.cellRenderer}
rowHeight={this.measurer.rowHeight}

32
packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap
View File

@@ -17,7 +17,7 @@ exports[`Render should render with base threshold 1`] = `
],
"results": Array [
Object {
"isThrow": false,
"type": "return",
"value": undefined,
},
],
@@ -195,7 +195,7 @@ exports[`Render should render with base threshold 1`] = `
"typography": Object {
"fontFamily": Object {
"monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace",
"sansSerif": "'Roboto', Helvetica, Arial, sans-serif",
"sansSerif": "'Roboto', 'Helvetica Neue', Arial, sans-serif",
},
"heading": Object {
"h1": "28px",
@@ -211,6 +211,10 @@ exports[`Render should render with base threshold 1`] = `
"sm": 1.1,
"xs": 1,
},
"link": Object {
"decoration": "none",
"hoverDecoration": "none",
},
"size": Object {
"base": "13px",
"lg": "18px",
@@ -225,6 +229,15 @@ exports[`Render should render with base threshold 1`] = `
"semibold": 500,
},
},
"zIndex": Object {
"dropdown": "1000",
"modal": "1050",
"modalBackdrop": "1040",
"navbarFixed": "1020",
"sidemenu": "1025",
"tooltip": "1030",
"typeahead": "1060",
},
}
}
>
@@ -339,7 +352,7 @@ exports[`Render should render with base threshold 1`] = `
"typography": Object {
"fontFamily": Object {
"monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace",
"sansSerif": "'Roboto', Helvetica, Arial, sans-serif",
"sansSerif": "'Roboto', 'Helvetica Neue', Arial, sans-serif",
},
"heading": Object {
"h1": "28px",
@@ -355,6 +368,10 @@ exports[`Render should render with base threshold 1`] = `
"sm": 1.1,
"xs": 1,
},
"link": Object {
"decoration": "none",
"hoverDecoration": "none",
},
"size": Object {
"base": "13px",
"lg": "18px",
@@ -369,6 +386,15 @@ exports[`Render should render with base threshold 1`] = `
"semibold": 500,
},
},
"zIndex": Object {
"dropdown": "1000",
"modal": "1050",
"modalBackdrop": "1040",
"navbarFixed": "1020",
"sidemenu": "1025",
"tooltip": "1030",
"typeahead": "1060",
},
}
}
/>

2
packages/grafana-ui/src/components/index.ts
View File

@@ -14,6 +14,7 @@ export { default as resetSelectStyles } from './Select/resetSelectStyles';
// Forms
export { FormLabel } from './FormLabel/FormLabel';
export { FormField } from './FormField/FormField';
export { SecretFormField } from './SecretFormFied/SecretFormField';
export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
export { ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker';
@@ -24,6 +25,7 @@ export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';
export { ValueMappingsEditor } from './ValueMappingsEditor/ValueMappingsEditor';
export { Switch } from './Switch/Switch';
export { EmptySearchResult } from './EmptySearchResult/EmptySearchResult';
export { PieChart, PieChartDataPoint, PieChartType } from './PieChart/PieChart';
export { UnitPicker } from './UnitPicker/UnitPicker';
export { Input, InputStatus } from './Input/Input';

25
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
View File

@@ -110,7 +110,6 @@ $font-size-h4: ${theme.typography.heading.h4} !default;
$font-size-h5: ${theme.typography.heading.h5} !default;
$font-size-h6: ${theme.typography.heading.h6} !default;
$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$headings-line-height: ${theme.typography.lineHeight.sm} !default;
// Components
@@ -130,8 +129,8 @@ $page-sidebar-margin: 56px;
// Links
// -------------------------
$link-decoration: none !default;
$link-hover-decoration: none !default;
$link-decoration: ${theme.typography.link.decoration} !default;
$link-hover-decoration: ${theme.typography.link.hoverDecoration} !default;
// Tables
//
@@ -166,13 +165,13 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindex-dropdown: 1000;
$zindex-navbar-fixed: 1020;
$zindex-sidemenu: 1025;
$zindex-tooltip: 1030;
$zindex-modal-backdrop: 1040;
$zindex-modal: 1050;
$zindex-typeahead: 1060;
$zindex-dropdown: ${theme.zIndex.dropdown};
$zindex-navbar-fixed: ${theme.zIndex.navbarFixed};
$zindex-sidemenu: ${theme.zIndex.sidemenu};
$zindex-tooltip: ${theme.zIndex.tooltip};
$zindex-modal-backdrop: ${theme.zIndex.modalBackdrop};
$zindex-modal: ${theme.zIndex.modal};
$zindex-typeahead: ${theme.zIndex.typeahead};
// Buttons
//
@@ -197,10 +196,8 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
$side-menu-width: 60px;
// dashboard
$dashboard-padding: 10px * 2;
$panel-horizontal-padding: 10;
$panel-vertical-padding: 5;
$panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px;
$dashboard-padding: $space-md;
$panel-padding: 0 $space-md $space-sm $space-md;
// tabs
$tabs-padding: 10px 15px 9px;

15
packages/grafana-ui/src/themes/default.ts
View File

@@ -4,7 +4,7 @@ const theme: GrafanaThemeCommons = {
name: 'Grafana Default',
typography: {
fontFamily: {
sansSerif: "'Roboto', Helvetica, Arial, sans-serif",
sansSerif: "'Roboto', 'Helvetica Neue', Arial, sans-serif",
monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace",
},
size: {
@@ -34,6 +34,10 @@ const theme: GrafanaThemeCommons = {
md: 4 / 3,
lg: 1.5,
},
link: {
decoration: 'none',
hoverDecoration: 'none',
},
},
breakpoints: {
xs: '0',
@@ -66,6 +70,15 @@ const theme: GrafanaThemeCommons = {
horizontal: 10,
vertical: 5,
},
zIndex: {
dropdown: '1000',
navbarFixed: '1020',
sidemenu: '1025',
tooltip: '1030',
modalBackdrop: '1040',
modal: '1050',
typeahead: '1060',
},
};
export default theme;

35
packages/grafana-ui/src/types/data.ts
View File

@@ -50,28 +50,29 @@ export enum NullValueMode {
/** View model projection of many time series */
export type TimeSeriesVMs = TimeSeriesVM[];
export enum ColumnType {
time = 'time', // or date
number = 'number',
string = 'string',
boolean = 'boolean',
other = 'other', // Object, Array, etc
}
export interface Column {
text: string;
title?: string;
type?: string;
sort?: boolean;
desc?: boolean;
text: string; // The column name
type?: ColumnType;
filterable?: boolean;
unit?: string;
dateFormat?: string; // Source data format
}
export interface Tags {
[key: string]: string;
}
export interface TableData {
name?: string;
columns: Column[];
rows: any[];
type: string;
columnMap: any;
}
export type SingleStatValue = number | string | null;
/*
* So we can add meta info like tags & series name
*/
export interface SingleStatValueInfo {
value: SingleStatValue;
rows: any[][];
tags?: Tags;
}

9
packages/grafana-ui/src/types/panel.ts
View File

@@ -1,12 +1,12 @@
import { ComponentClass } from 'react';
import { TimeSeries, LoadingState, TableData } from './data';
import { LoadingState, TableData } from './data';
import { TimeRange } from './time';
import { ScopedVars } from './datasource';
export type InterpolateFunction = (value: string, scopedVars?: ScopedVars, format?: string | Function) => string;
export interface PanelProps<T = any> {
panelData: PanelData;
data?: TableData[];
timeRange: TimeRange;
loading: LoadingState;
options: T;
@@ -16,11 +16,6 @@ export interface PanelProps<T = any> {
replaceVariables: InterpolateFunction;
}
export interface PanelData {
timeSeries?: TimeSeries[];
tableData?: TableData;
}
export interface PanelEditorProps<T = any> {
options: T;
onOptionsChange: (options: T) => void;

13
packages/grafana-ui/src/types/theme.ts
View File

@@ -46,6 +46,10 @@ export interface GrafanaThemeCommons {
h5: string;
h6: string;
};
link: {
decoration: string;
hoverDecoration: string;
};
};
spacing: {
d: string;
@@ -71,6 +75,15 @@ export interface GrafanaThemeCommons {
horizontal: number;
vertical: number;
};
zIndex: {
dropdown: string;
navbarFixed: string;
sidemenu: string;
tooltip: string;
modalBackdrop: string;
modal: string;
typeahead: string;
};
}
export interface GrafanaTheme extends GrafanaThemeCommons {

4
packages/grafana-ui/src/utils/__snapshots__/processTableData.test.ts.snap
View File

@@ -2,7 +2,6 @@
exports[`processTableData basic processing should generate a header and fix widths 1`] = `
Object {
"columnMap": Object {},
"columns": Array [
Object {
"text": "Column 1",
@@ -31,13 +30,11 @@ Object {
null,
],
],
"type": "table",
}
`;
exports[`processTableData basic processing should read header and two rows 1`] = `
Object {
"columnMap": Object {},
"columns": Array [
Object {
"text": "a",
@@ -61,6 +58,5 @@ Object {
6,
],
],
"type": "table",
}
`;

24
packages/grafana-ui/src/utils/floatPairs.test.ts Normal file
View File

@@ -0,0 +1,24 @@
import { getFlotPairs } from './flotPairs';
describe('getFlotPairs', () => {
const table = {
rows: [[1, 100, 'a'], [2, 200, 'b'], [3, 300, 'c']],
};
it('should get X and y', () => {
const pairs = getFlotPairs({ rows: table.rows, xIndex: 0, yIndex: 1 });
expect(pairs.length).toEqual(3);
expect(pairs[0].length).toEqual(2);
expect(pairs[0][0]).toEqual(1);
expect(pairs[0][1]).toEqual(100);
});
it('should work with strings', () => {
const pairs = getFlotPairs({ rows: table.rows, xIndex: 0, yIndex: 2 });
expect(pairs.length).toEqual(3);
expect(pairs[0].length).toEqual(2);
expect(pairs[0][0]).toEqual(1);
expect(pairs[0][1]).toEqual('a');
});
});

38
packages/grafana-ui/src/utils/flotPairs.ts Normal file
View File

@@ -0,0 +1,38 @@
// Types
import { NullValueMode } from '../types/index';
export interface FloatPairsOptions {
rows: any[][];
xIndex: number;
yIndex: number;
nullValueMode?: NullValueMode;
}
export function getFlotPairs({ rows, xIndex, yIndex, nullValueMode }: FloatPairsOptions): any[][] {
const ignoreNulls = nullValueMode === NullValueMode.Ignore;
const nullAsZero = nullValueMode === NullValueMode.AsZero;
const pairs: any[][] = [];
for (let i = 0; i < rows.length; i++) {
const x = rows[i][xIndex];
let y = rows[i][yIndex];
if (y === null) {
if (ignoreNulls) {
continue;
}
if (nullAsZero) {
y = 0;
}
}
// X must be a value
if (x === null) {
continue;
}
pairs.push([x, y]);
}
return pairs;
}

2
packages/grafana-ui/src/utils/index.ts
View File

@@ -1,5 +1,5 @@
export * from './processTimeSeries';
export * from './singlestat';
export * from './processTableData';
export * from './valueFormats/valueFormats';
export * from './colors';
export * from './namedColorsPalette';

40
packages/grafana-ui/src/utils/processTableData.test.ts
View File

@@ -1,4 +1,4 @@
import { parseCSV } from './processTableData';
import { parseCSV, toTableData } from './processTableData';
describe('processTableData', () => {
describe('basic processing', () => {
@@ -18,3 +18,41 @@ describe('processTableData', () => {
});
});
});
describe('toTableData', () => {
it('converts timeseries to table skipping nulls', () => {
const input1 = {
target: 'Field Name',
datapoints: [[100, 1], [200, 2]],
};
const input2 = {
// without target
target: '',
datapoints: [[100, 1], [200, 2]],
};
const data = toTableData([null, input1, input2, null, null]);
expect(data.length).toBe(2);
expect(data[0].columns[0].text).toBe(input1.target);
expect(data[0].rows).toBe(input1.datapoints);
// Default name
expect(data[1].columns[0].text).toEqual('Value');
});
it('keeps tableData unchanged', () => {
const input = {
columns: [{ text: 'A' }, { text: 'B' }, { text: 'C' }],
rows: [[100, 'A', 1], [200, 'B', 2], [300, 'C', 3]],
};
const data = toTableData([null, input, null, null]);
expect(data.length).toBe(1);
expect(data[0]).toBe(input);
});
it('supports null values OK', () => {
expect(toTableData([null, null, null, null])).toEqual([]);
expect(toTableData(undefined)).toEqual([]);
expect(toTableData((null as unknown) as any[])).toEqual([]);
expect(toTableData([])).toEqual([]);
});
});

48
packages/grafana-ui/src/utils/processTableData.ts
View File

@@ -3,7 +3,7 @@ import isNumber from 'lodash/isNumber';
import Papa, { ParseError, ParseMeta } from 'papaparse';
// Types
import { TableData, Column } from '../types';
import { TableData, Column, TimeSeries, ColumnType } from '../types';
// Subset of all parse options
export interface TableParseOptions {
@@ -70,8 +70,6 @@ export function matchRowSizes(table: TableData): TableData {
return {
columns,
rows: fixedRows,
type: table.type,
columnMap: table.columnMap,
};
}
@@ -118,8 +116,6 @@ export function parseCSV(text: string, options?: TableParseOptions, details?: Ta
return {
columns: [],
rows: [],
type: 'table',
columnMap: {},
};
}
@@ -130,11 +126,49 @@ export function parseCSV(text: string, options?: TableParseOptions, details?: Ta
return matchRowSizes({
columns: makeColumns(header),
rows: results.data,
type: 'table',
columnMap: {},
});
}
function convertTimeSeriesToTableData(timeSeries: TimeSeries): TableData {
return {
name: timeSeries.target,
columns: [
{
text: timeSeries.target || 'Value',
unit: timeSeries.unit,
},
{
text: 'Time',
type: ColumnType.time,
unit: 'dateTimeAsIso',
},
],
rows: timeSeries.datapoints,
};
}
export const isTableData = (data: any): data is TableData => data && data.hasOwnProperty('columns');
export const toTableData = (results?: any[]): TableData[] => {
if (!results) {
return [];
}
return results
.filter(d => !!d)
.map(data => {
if (data.hasOwnProperty('columns')) {
return data as TableData;
}
if (data.hasOwnProperty('datapoints')) {
return convertTimeSeriesToTableData(data);
}
// TODO, try to convert JSON to table?
console.warn('Can not convert', data);
throw new Error('Unsupported data format');
});
};
export function sortTableData(data: TableData, sortIndex?: number, reverse = false): TableData {
if (isNumber(sortIndex)) {
const copy = {

49
packages/grafana-ui/src/utils/processTimeSeries.ts
View File

@@ -4,18 +4,45 @@ import isNumber from 'lodash/isNumber';
import { colors } from './colors';
// Types
import { TimeSeries, TimeSeriesVMs, NullValueMode, TimeSeriesValue } from '../types';
import { getFlotPairs } from './flotPairs';
import { TimeSeriesVMs, NullValueMode, TimeSeriesValue, TableData } from '../types';
interface Options {
timeSeries: TimeSeries[];
data: TableData[];
xColumn?: number; // Time (or null to guess)
yColumn?: number; // Value (or null to guess)
nullValueMode: NullValueMode;
}
export function processTimeSeries({ timeSeries, nullValueMode }: Options): TimeSeriesVMs {
const vmSeries = timeSeries.map((item, index) => {
// NOTE: this should move to processTableData.ts
// I left it as is so the merge changes are more clear.
export function processTimeSeries({ data, xColumn, yColumn, nullValueMode }: Options): TimeSeriesVMs {
const vmSeries = data.map((item, index) => {
if (!isNumber(xColumn)) {
xColumn = 1; // Default timeseries colum. TODO, find first time field!
}
if (!isNumber(yColumn)) {
yColumn = 0; // TODO, find first non-time field
}
// TODO? either % or throw error?
if (xColumn >= item.columns.length) {
throw new Error('invalid colum: ' + xColumn);
}
if (yColumn >= item.columns.length) {
throw new Error('invalid colum: ' + yColumn);
}
const colorIndex = index % colors.length;
const label = item.target;
const result = [];
const label = item.columns[yColumn].text;
// Use external calculator just to make sure it works :)
const result = getFlotPairs({
rows: item.rows,
xIndex: xColumn,
yIndex: yColumn,
nullValueMode,
});
// stat defaults
let total = 0;
@@ -42,9 +69,9 @@ export function processTimeSeries({ timeSeries, nullValueMode }: Options): TimeS
let previousValue = 0;
let previousDeltaUp = true;
for (let i = 0; i < item.datapoints.length; i++) {
currentValue = item.datapoints[i][0];
currentTime = item.datapoints[i][1];
for (let i = 0; i < item.rows.length; i++) {
currentValue = item.rows[i][yColumn];
currentTime = item.rows[i][xColumn];
if (typeof currentTime !== 'number') {
continue;
@@ -95,7 +122,7 @@ export function processTimeSeries({ timeSeries, nullValueMode }: Options): TimeS
if (previousValue > currentValue) {
// counter reset
previousDeltaUp = false;
if (i === item.datapoints.length - 1) {
if (i === item.rows.length - 1) {
// reset on last
delta += currentValue;
}
@@ -118,8 +145,6 @@ export function processTimeSeries({ timeSeries, nullValueMode }: Options): TimeS
allIsZero = false;
}
}
result.push([currentTime, currentValue]);
}
if (max === -Number.MAX_VALUE) {

33
packages/grafana-ui/src/utils/singlestat.ts
View File

@@ -1,33 +0,0 @@
import { PanelData, NullValueMode, SingleStatValueInfo } from '../types';
import { processTimeSeries } from './processTimeSeries';
export interface SingleStatProcessingOptions {
panelData: PanelData;
stat: string;
}
//
// This is a temporary thing, waiting for a better data model and maybe unification between time series & table data
//
export function processSingleStatPanelData(options: SingleStatProcessingOptions): SingleStatValueInfo[] {
const { panelData, stat } = options;
if (panelData.timeSeries) {
const timeSeries = processTimeSeries({
timeSeries: panelData.timeSeries,
nullValueMode: NullValueMode.Null,
});
return timeSeries.map((series, index) => {
const value = stat !== 'name' ? series.stats[stat] : series.label;
return {
value: value,
};
});
} else if (panelData.tableData) {
throw { message: 'Panel data not supported' };
}
return [];
}

2
packages/grafana-ui/src/utils/storybook/UseState.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
interface StateHolderProps<T> {
initialState: T;
children: (currentState: T, updateState: (nextState: T) => void) => JSX.Element;
children: (currentState: T, updateState: (nextState: T) => void) => React.ReactNode;
}
export class UseState<T> extends React.Component<StateHolderProps<T>, { value: T; initialState: T }> {