-
Notifications
You must be signed in to change notification settings - Fork 2.9k
/
StatsTable.tsx
61 lines (53 loc) 路 2.13 KB
/
StatsTable.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import { connect } from 'react-redux';
import Table from 'components/Table/Table';
import ViewColumnSelector from 'components/ViewColumnSelector/ViewColumnSelector';
import { swarmTemplateArgs } from 'constants/swarm';
import useSelectViewColumns from 'hooks/useSelectViewColumns';
import useSortByField from 'hooks/useSortByField';
import { IRootState } from 'redux/store';
import { ISwarmStat } from 'types/ui.types';
const percentilesToStatisticsRows = swarmTemplateArgs.percentilesToStatistics
? swarmTemplateArgs.percentilesToStatistics.map(percentile => ({
title: `${percentile * 100}%ile (ms)`,
key: `responseTimePercentile${percentile}` as keyof ISwarmStat,
}))
: [];
const tableStructure = [
{ key: 'method', title: 'Type' },
{ key: 'name', title: 'Name' },
{ key: 'numRequests', title: '# Requests' },
{ key: 'numFailures', title: '# Fails' },
{ key: 'medianResponseTime', title: 'Median (ms)', round: 2 },
...percentilesToStatisticsRows,
{ key: 'avgResponseTime', title: 'Average (ms)', round: 2 },
{ key: 'minResponseTime', title: 'Min (ms)' },
{ key: 'maxResponseTime', title: 'Max (ms)' },
{ key: 'avgContentLength', title: 'Average size (bytes)', round: 2 },
{ key: 'currentRps', title: 'Current RPS', round: 2 },
{ key: 'currentFailPerSec', title: 'Current Failures/s', round: 2 },
];
export function StatsTable({ stats }: { stats: ISwarmStat[] }) {
const { onTableHeadClick, sortedStats, currentSortField } = useSortByField<ISwarmStat>(stats, {
hasTotalRow: true,
});
const { selectedColumns, addColumn, removeColumn, filteredStructure } =
useSelectViewColumns(tableStructure);
return (
<>
<ViewColumnSelector
addColumn={addColumn}
removeColumn={removeColumn}
selectedColumns={selectedColumns}
structure={tableStructure}
/>
<Table<ISwarmStat>
currentSortField={currentSortField}
onTableHeadClick={onTableHeadClick}
rows={sortedStats}
structure={filteredStructure}
/>
</>
);
}
const storeConnector = ({ ui: { stats } }: IRootState) => ({ stats });
export default connect(storeConnector)(StatsTable);