github
/
prometheus
mirror of https://github.com/prometheus/prometheus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update React vendoring (#6855) 

* Update React vendoring

Update webpack-scripts to 3.4.0
* Fix security warning for `serialize-javascript`.

Signed-off-by: Ben Kochie <superq@gmail.com>

* Fix eslint errors.

Signed-off-by: Ben Kochie <superq@gmail.com>

* Update test snapshot.

Signed-off-by: Ben Kochie <superq@gmail.com>
pull/6874/head
Ben Kochie 2020-02-25 20:12:40 +01:00 committed by GitHub
parent 1518083168
commit 65a19421a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 2669 additions and 2438 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/ui/react-app/package.json
View File

@ -34,7 +34,7 @@
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "^16.7.0",
"react-resize-detector": "^4.2.1",
"react-scripts": "^3.2.0",
"react-scripts": "^3.4.0",
"react-test-renderer": "^16.9.0",
"reactstrap": "^8.0.1",
"sanitize-html": "^1.20.1",

12
web/ui/react-app/src/pages/graph/ExpressionInput.test.tsx
View File

@ -10,7 +10,9 @@ const getKeyEvent = (key: string): React.KeyboardEvent<HTMLInputElement> =>
({
key,
nativeEvent: {},
preventDefault: () => {},
preventDefault: () => {
// Do nothing.
},
} as React.KeyboardEvent<HTMLInputElement>);
describe('ExpressionInput', () => {
@ -21,8 +23,12 @@ describe('ExpressionInput', () => {
'Query History': [],
'Metric Names': metricNames,
},
executeQuery: (): void => {},
onExpressionChange: (): void => {},
executeQuery: (): void => {
// Do nothing.
},
onExpressionChange: (): void => {
// Do nothing.
},
loading: false,
};

63
web/ui/react-app/src/pages/graph/ExpressionInput.tsx
View File

@ -77,39 +77,36 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
const { autocompleteSections } = this.props;
let index = 0;
const sections = inputValue!.length
? Object.entries(autocompleteSections).reduce(
(acc, [title, items]) => {
const matches = this.getSearchMatches(inputValue!, items);
return !matches.length
? acc
: [
...acc,
<ul className="autosuggest-dropdown-list" key={title}>
<li className="autosuggest-dropdown-header">{title}</li>
{matches
.slice(0, 100) // Limit DOM rendering to 100 results, as DOM rendering is sloooow.
.map(({ original, string: text }) => {
const itemProps = downshift.getItemProps({
key: original,
index,
item: original,
style: {
backgroundColor: highlightedIndex === index++ ? 'lightgray' : 'white',
},
});
return (
<li
key={title}
{...itemProps}
dangerouslySetInnerHTML={{ __html: sanitizeHTML(text, { allowedTags: ['strong'] }) }}
/>
);
})}
</ul>,
];
},
[] as JSX.Element[]
)
? Object.entries(autocompleteSections).reduce((acc, [title, items]) => {
const matches = this.getSearchMatches(inputValue!, items);
return !matches.length
? acc
: [
...acc,
<ul className="autosuggest-dropdown-list" key={title}>
<li className="autosuggest-dropdown-header">{title}</li>
{matches
.slice(0, 100) // Limit DOM rendering to 100 results, as DOM rendering is sloooow.
.map(({ original, string: text }) => {
const itemProps = downshift.getItemProps({
key: original,
index,
item: original,
style: {
backgroundColor: highlightedIndex === index++ ? 'lightgray' : 'white',
},
});
return (
<li
key={title}
{...itemProps}
dangerouslySetInnerHTML={{ __html: sanitizeHTML(text, { allowedTags: ['strong'] }) }}
/>
);
})}
</ul>,
];
}, [] as JSX.Element[])
: [];
if (!sections.length) {

14
web/ui/react-app/src/pages/graph/Graph.test.tsx
View File

@ -225,7 +225,12 @@ describe('Graph', () => {
endTime: 1572128598,
resolution: 28,
},
data: { result: [{ values: [], metric: {} }, { values: [], metric: {} }] },
data: {
result: [
{ values: [], metric: {} },
{ values: [], metric: {} },
],
},
} as any)}
/>
);
@ -251,7 +256,12 @@ describe('Graph', () => {
endTime: 1572128598,
resolution: 28,
},
data: { result: [{ values: [], metric: {} }, { values: [], metric: {} }] },
data: {
result: [
{ values: [], metric: {} },
{ values: [], metric: {} },
],
},
} as any)}
/>
);

16
web/ui/react-app/src/pages/graph/GraphControls.test.tsx
View File

@ -12,10 +12,18 @@ const defaultGraphControlProps = {
resolution: 10,
stacked: false,
onChangeRange: (): void => {},
onChangeEndTime: (): void => {},
onChangeResolution: (): void => {},
onChangeStacking: (): void => {},
onChangeRange: (): void => {
// Do nothing.
},
onChangeEndTime: (): void => {
// Do nothing.
},
onChangeResolution: (): void => {
// Do nothing.
},
onChangeStacking: (): void => {
// Do nothing.
},
};
describe('GraphControls', () => {

68
web/ui/react-app/src/pages/graph/Panel.test.tsx
View File

@ -17,15 +17,21 @@ const defaultProps = {
resolution: 28,
stacked: false,
},
onOptionsChanged: (): void => {},
onOptionsChanged: (): void => {
// Do nothing.
},
pastQueries: [],
metricNames: [
'prometheus_engine_queries',
'prometheus_engine_queries_concurrent_max',
'prometheus_engine_query_duration_seconds',
],
removePanel: (): void => {},
onExecuteQuery: (): void => {},
removePanel: (): void => {
// Do nothing.
},
onExecuteQuery: (): void => {
// Do nothing.
},
};
describe('Panel', () => {
@ -51,17 +57,18 @@ describe('Panel', () => {
};
const panel = shallow(<Panel {...defaultProps} onOptionsChanged={onOptionsChanged} />);
const links = panel.find(NavLink);
[{ panelType: 'Table', active: true }, { panelType: 'Graph', active: false }].forEach(
(tc: { panelType: string; active: boolean }, i: number) => {
const link = links.at(i);
const className = tc.active ? 'active' : '';
expect(link.prop('className')).toEqual(className);
link.simulate('click');
expect(results).toHaveLength(1);
expect(results[0].type).toEqual(tc.panelType.toLowerCase());
results.pop();
}
);
[
{ panelType: 'Table', active: true },
{ panelType: 'Graph', active: false },
].forEach((tc: { panelType: string; active: boolean }, i: number) => {
const link = links.at(i);
const className = tc.active ? 'active' : '';
expect(link.prop('className')).toEqual(className);
link.simulate('click');
expect(results).toHaveLength(1);
expect(results[0].type).toEqual(tc.panelType.toLowerCase());
results.pop();
});
});
it('renders a TabPane with a TimeInput and a DataTable when in table mode', () => {
@ -94,22 +101,23 @@ describe('Panel', () => {
});
describe('when switching between modes', () => {
[{ from: PanelType.Table, to: PanelType.Graph }, { from: PanelType.Graph, to: PanelType.Table }].forEach(
({ from, to }: { from: PanelType; to: PanelType }) => {
it(`${from} -> ${to} nulls out data`, () => {
const props = {
...defaultProps,
options: { ...defaultProps.options, type: from },
};
const panel = shallow(<Panel {...props} />);
const instance: any = panel.instance();
panel.setState({ data: 'somedata' });
expect(panel.state('data')).toEqual('somedata');
instance.handleChangeType(to);
expect(panel.state('data')).toBeNull();
});
}
);
[
{ from: PanelType.Table, to: PanelType.Graph },
{ from: PanelType.Graph, to: PanelType.Table },
].forEach(({ from, to }: { from: PanelType; to: PanelType }) => {
it(`${from} -> ${to} nulls out data`, () => {
const props = {
...defaultProps,
options: { ...defaultProps.options, type: from },
};
const panel = shallow(<Panel {...props} />);
const instance: any = panel.instance();
panel.setState({ data: 'somedata' });
expect(panel.state('data')).toEqual('somedata');
instance.handleChangeType(to);
expect(panel.state('data')).toBeNull();
});
});
});
describe('when changing query then time', () => {

10
web/ui/react-app/src/pages/graph/PanelList.tsx
View File

@ -60,7 +60,10 @@ export const PanelListContent: FC<PanelListProps> = ({
};
const addPanel = () => {
callAll(setPanels, updateURL)([
callAll(
setPanels,
updateURL
)([
...panels,
{
id: generateID(),
@ -81,7 +84,10 @@ export const PanelListContent: FC<PanelListProps> = ({
callAll(setPanels, updateURL)(panels.map(p => (id === p.id ? { ...p, options: opts } : p)))
}
removePanel={() =>
callAll(setPanels, updateURL)(
callAll(
setPanels,
updateURL
)(
panels.reduce<PanelMeta[]>(
(acc, panel) => (panel.id !== id ? [...acc, { ...panel, key: `${acc.length}` }] : acc),
[]

4
web/ui/react-app/src/pages/graph/TimeInput.test.tsx
View File

@ -11,7 +11,9 @@ describe('TimeInput', () => {
time: 1572102237932,
range: 60 * 60 * 7,
placeholder: 'time input',
onChangeTime: (): void => {},
onChangeTime: (): void => {
// Do nothing.
},
};
const timeInput = shallow(<TimeInput {...timeInputProps} />);
it('renders the string "scalar"', () => {

2
web/ui/react-app/src/pages/targets/__snapshots__/TargetLabels.test.tsx.snap
View File

@ -47,7 +47,7 @@ exports[`targetLabels renders discovered labels 1`] = `
}
target="series-labels-cortex\\\\/node-exporter_group\\\\/0-1"
toggle={[Function]}
trigger="click hover focus"
trigger="hover focus"
>
<b>
Before relabeling:

4916
web/ui/react-app/yarn.lock
View File

File diff suppressed because it is too large Load Diff