mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-12-25 21:54:10 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Formatting short tables for readability (#6762)

Browse source 
* Formatting short tables for readability

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Solving linting issues in DataTable.tsx

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Increasing maxFormattable Size to 1000 and changing value of toFormatStyle

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Solve tests failure for multiple alerts on size gretaer than 10000

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Solve linting errors

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Add tests for alert of not formatting

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>
This commit is contained in:
Drumil Patel 2020-02-09 18:11:57 -05:00 committed by GitHub
parent 0a8acb654e
commit b00023344e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
web/ui/react-app/src/pages/graph/DataTable.test.tsx
View file

@ -103,8 +103,42 @@ describe('DataTable', () => {
});
it('renders a warning', () => {
const alert = dataTable.find(Alert);
expect(alert.render().text()).toEqual('Warning: Fetched 10001 metrics, only displaying first 10000.');
const alerts = dataTable.find(Alert);
expect(
alerts
.first()
.render()
.text()
).toEqual('Warning: Fetched 10001 metrics, only displaying first 10000.');
});
});
describe('when resultType is vector and size is more than maximum limit of formatting', () => {
const dataTableProps: QueryResult = {
data: {
resultType: 'vector',
result: Array.from(Array(1001).keys()).map(i => {
return {
metric: {
__name__: `metric_name_${i}`,
label1: 'value_1',
labeln: 'value_n',
},
value: [1572098246.599, `${i}`],
};
}),
},
};
const dataTable = shallow(<DataTable {...dataTableProps} />);
it('renders a warning', () => {
const alerts = dataTable.find(Alert);
expect(
alerts
.first()
.render()
.text()
).toEqual('Notice: Showing more than 1000 series, turning off label formatting for performance reasons.');
});
});

12
web/ui/react-app/src/pages/graph/DataTable.tsx
View file

@ -56,8 +56,10 @@ const DataTable: FC<QueryResult> = ({ data }) => {
return <Alert color="secondary">Empty query result</Alert>;
}
const maxFormattableSize = 1000;
let rows: ReactNode[] = [];
let limited = false;
const doFormat = data.result.length <= maxFormattableSize;
switch (data.resultType) {
case 'vector':
rows = (limitSeries(data.result) as InstantSample[]).map(
@ -65,7 +67,7 @@ const DataTable: FC<QueryResult> = ({ data }) => {
return (
<tr key={index}>
<td>
<SeriesName labels={s.metric} format={false} />
<SeriesName labels={s.metric} format={doFormat} />
</td>
<td>{s.value[1]}</td>
</tr>
@ -84,7 +86,7 @@ const DataTable: FC<QueryResult> = ({ data }) => {
return (
<tr style={{ whiteSpace: 'pre' }} key={index}>
<td>
<SeriesName labels={s.metric} format={false} />
<SeriesName labels={s.metric} format={doFormat} />
</td>
<td>{valueText}</td>
</tr>
@ -119,6 +121,12 @@ const DataTable: FC<QueryResult> = ({ data }) => {
<strong>Warning:</strong> Fetched {data.result.length} metrics, only displaying first {rows.length}.
</Alert>
)}
{!doFormat && (
<Alert color="secondary">
<strong>Notice:</strong> Showing more than {maxFormattableSize} series, turning off label formatting for
performance reasons.
</Alert>
)}
<Table hover size="sm" className="data-table">
<tbody>{rows}</tbody>
</Table>