Skip to content

Commit 00dbd36

Browse files
llxiallxia
authored
Support multiple Perf metrics in adjustable table (#1006)
resolves: automation/issues/296 Signed-off-by: Lan Xia <Lan_Xia@ca.ibm.com>
1 parent 7f6897e commit 00dbd36

File tree

1 file changed

+67
-70
lines changed

1 file changed

+67
-70
lines changed

‎test-result-summary-client/src/TrafficLight/MetricsTable.jsx‎

Lines changed: 67 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,24 @@ import { Table, Typography } from 'antd';
33
import { DeleteTwoTone } from '@ant-design/icons';
44
import { fetchData } from '../utils/Utils';
55
import BenchmarkMath from 'utils/BenchmarkMathCalculation';
6-
import { max, min, std, mean, median } from 'mathjs';
6+
import * as math from 'mathjs';
7+
import { zip } from 'lodash';
78

89
const { Text } = Typography;
910

11+
const SummaryRow = ({ type, stats }) => {
12+
return (
13+
<Table.Summary.Row>
14+
<Table.Summary.Cell>{type.toUpperCase()}</Table.Summary.Cell>
15+
{stats.map((s) => (
16+
<Table.Summary.Cell>
17+
<b>{s[type]}</b>
18+
</Table.Summary.Cell>
19+
))}
20+
</Table.Summary.Row>
21+
);
22+
};
23+
1024
const MetricsTable = ({ type, id, benchmarkName }) => {
1125
const [data, setData] = useState([]);
1226
useEffect(() => {
@@ -24,57 +38,58 @@ const MetricsTable = ({ type, id, benchmarkName }) => {
2438
item.buildName.includes(type)
2539
);
2640

27-
const rawValues = fliteredData.metrics
28-
.map((metric) => {
29-
return metric.rawValues.map((value, i) => {
30-
return {
31-
metricName: metric.name,
32-
value,
33-
i,
34-
};
35-
});
36-
})
37-
.flat();
41+
const [firstMetric] = fliteredData.metrics;
42+
const rawValues = firstMetric.rawValues.map((_, i) => {
43+
return fliteredData.metrics.map((metric, j) => {
44+
return {
45+
metricName: metric.name,
46+
value: metric.rawValues[i],
47+
i,
48+
};
49+
});
50+
});
51+
3852
setData(rawValues);
3953
}
4054
};
4155
updateData();
4256
}, []);
4357

4458
const handleDelete = (record) => {
45-
const newData = data.filter((item) => item.i !== record.i);
59+
const newData = data.filter((item) => item !== record);
4660
setData(newData);
4761
};
48-
const uniqueTitle = [...new Set(data.map((item) => item.metricName))];
62+
// const uniqueTitle = [...new Set(data.map((item) => item.metricName))];
4963
const columns = [
5064
{
5165
title: 'Name',
5266
dataIndex: 'name',
5367
key: 'name',
5468
},
55-
...uniqueTitle.map((title, i) => {
69+
...(data[0]?.map(({ metricName }, i) => {
5670
return {
57-
title,
58-
key: title + i,
71+
title: metricName,
72+
key: metricName,
5973
render: (_, record, obj) => {
60-
return <div>{record.value}</div>;
74+
return <div>{record[i].value}</div>;
6175
},
6276
};
63-
}),
77+
}) ?? []),
6478
{
6579
title: 'Remove',
6680
dataIndex: 'remove',
6781
key: 'remove',
68-
render: (_, record, obj) =>
69-
data.length >= 1 ? (
82+
render: (_, record, obj) => {
83+
return data.length >= 1 ? (
7084
<DeleteTwoTone
7185
onClick={() => handleDelete(record)}
7286
type="primary"
7387
style={{
7488
marginBottom: 16,
7589
}}
7690
/>
77-
) : null,
91+
) : null;
92+
},
7893
},
7994
];
8095

@@ -91,59 +106,41 @@ const MetricsTable = ({ type, id, benchmarkName }) => {
91106
bordered
92107
dataSource={data}
93108
columns={columns}
109+
pagination={{ defaultPageSize: 50 }}
94110
summary={(pageData) => {
95111
if (!pageData.length) return null;
96112

97-
const meanVal = mean(pageData.map(({ value }) => value));
98-
const maxVal = max(pageData.map(({ value }) => value));
99-
const minVal = min(pageData.map(({ value }) => value));
100-
const medianVal = median(
101-
pageData.map(({ value }) => value)
102-
);
103-
const stdVal = std(
104-
pageData.map(({ value }) => value)
105-
).toFixed(2);
106-
const CI = BenchmarkMath.confidence_interval(
107-
pageData.map(({ value }) => value)
108-
).toFixed(3);
113+
const pivot = zip(...pageData);
114+
115+
const stats = pivot.map((p) => {
116+
const mean = math.mean(p.map(({ value }) => value));
117+
const max = math.max(p.map(({ value }) => value));
118+
const min = math.min(p.map(({ value }) => value));
119+
const median = math.median(p.map(({ value }) => value));
120+
const std = math
121+
.std(p.map(({ value }) => value))
122+
.toFixed(2);
123+
const CI = BenchmarkMath.confidence_interval(
124+
p.map(({ value }) => value)
125+
).toFixed(3);
126+
return {
127+
mean,
128+
max,
129+
min,
130+
median,
131+
std,
132+
CI,
133+
};
134+
});
135+
109136
return (
110137
<Table.Summary>
111-
<Table.Summary.Row>
112-
<Table.Summary.Cell>Mean</Table.Summary.Cell>
113-
<Table.Summary.Cell>
114-
<b>{meanVal}</b>
115-
</Table.Summary.Cell>
116-
</Table.Summary.Row>
117-
<Table.Summary.Row>
118-
<Table.Summary.Cell>Max</Table.Summary.Cell>
119-
<Table.Summary.Cell>
120-
<b>{maxVal}</b>
121-
</Table.Summary.Cell>
122-
</Table.Summary.Row>
123-
<Table.Summary.Row>
124-
<Table.Summary.Cell>Min</Table.Summary.Cell>
125-
<Table.Summary.Cell>
126-
<b>{minVal}</b>
127-
</Table.Summary.Cell>
128-
</Table.Summary.Row>
129-
<Table.Summary.Row>
130-
<Table.Summary.Cell>Median</Table.Summary.Cell>
131-
<Table.Summary.Cell>
132-
<b>{medianVal}</b>
133-
</Table.Summary.Cell>
134-
</Table.Summary.Row>
135-
<Table.Summary.Row>
136-
<Table.Summary.Cell>STD</Table.Summary.Cell>
137-
<Table.Summary.Cell>
138-
<b>{stdVal}</b>
139-
</Table.Summary.Cell>
140-
</Table.Summary.Row>
141-
<Table.Summary.Row>
142-
<Table.Summary.Cell>CI</Table.Summary.Cell>
143-
<Table.Summary.Cell>
144-
<b>{CI}</b>
145-
</Table.Summary.Cell>
146-
</Table.Summary.Row>
138+
<SummaryRow type="mean" stats={stats} />
139+
<SummaryRow type="max" stats={stats} />
140+
<SummaryRow type="min" stats={stats} />
141+
<SummaryRow type="median" stats={stats} />
142+
<SummaryRow type="std" stats={stats} />
143+
<SummaryRow type="CI" stats={stats} />
147144
</Table.Summary>
148145
);
149146
}}

0 commit comments

Comments
 (0)