Skip to content

Commit 9790e87

Browse files
FgerthoffertFgerthoffert
authored
Made it easier to identify different type of runs based on their names (#66)
1 parent 6185d8a commit 9790e87

File tree

11 files changed

+142
-21
lines changed

11 files changed

+142
-21
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
"lint:ci": "tsc --noEmit && eslint '*/**/*.{js,ts,tsx}'",
8181
"start": "react-scripts start",
8282
"start:dev": "chmod +x ./env.sh && ./env.sh && cp env-config.js ./public/ && react-scripts start",
83-
"build": "react-scripts build",
83+
"build": "NODE_OPTIONS=--openssl-legacy-provider react-scripts build",
8484
"test": "react-scripts test",
8585
"eject": "react-scripts eject",
8686
"storybook": "start-storybook -p 6006 -s public",

‎src/models/testingPerfs.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,8 @@ export const testingPerfs: TestingPerfs = {
121121
selectedRunTab: 'summary',
122122

123123
runs: [],
124+
// Maximum number of runs to display in the transactions table
125+
maxRunsCount: 100,
124126
selectedRun: {},
125127
selectedRunData: {},
126128
selectedRunProfile: '',
@@ -261,6 +263,9 @@ export const testingPerfs: TestingPerfs = {
261263
setRuns(state: any, payload: any) {
262264
return { ...state, runs: payload };
263265
},
266+
setMaxRunsCount(state: any, payload: any) {
267+
return { ...state, maxRunsCount: payload };
268+
},
264269
setSelectedRun(state: any, payload: any) {
265270
return { ...state, selectedRun: payload };
266271
},

‎src/views/testingPerfs/content/runs/content/transactions/statistics/Transaction/index.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ interface Props {
2626
selectedRunProfile: string;
2727
availableProfiles: string[];
2828
setSelectedRunProfile: (value: string) => void;
29+
runsWithShapes: { name: string; shape: string; color: string }[];
2930
}
3031

3132
const getTrend = (metric: any, transaction: any, selectedRun: any, compareType: string) => {
@@ -38,6 +39,14 @@ const getTrend = (metric: any, transaction: any, selectedRun: any, compareType:
3839
return <TableCell key={metric.id} align="center"></TableCell>;
3940
}
4041

42+
//Do not compare if some metrics are not available
43+
if (
44+
transaction.runs[selectedTransactionIdx] === undefined ||
45+
transaction.runs[selectedTransactionIdx - 5] === undefined
46+
) {
47+
return <TableCell key={metric.id} align="center"></TableCell>;
48+
}
49+
4150
if (compareType === 'run') {
4251
currentValue = transaction.runs[selectedTransactionIdx].statistics[metric.id];
4352
compareToValue = transaction.runs[selectedTransactionIdx].velocityStatistics[metric.id];
@@ -81,6 +90,7 @@ const Transaction: React.FC<Props> = (props: Props) => {
8190
selectedRunProfile,
8291
availableProfiles,
8392
setSelectedRunProfile,
93+
runsWithShapes,
8494
} = props;
8595

8696
// Append velocity data to the transaction
@@ -179,6 +189,7 @@ const Transaction: React.FC<Props> = (props: Props) => {
179189
selectedRun={selectedRun}
180190
transactionMetrics={transactionMetrics}
181191
metricId={'medianResTime'}
192+
runsWithShapes={runsWithShapes}
182193
/>
183194
</Grid>
184195
<Grid item xs={4}>
@@ -187,6 +198,7 @@ const Transaction: React.FC<Props> = (props: Props) => {
187198
selectedRun={selectedRun}
188199
transactionMetrics={transactionMetrics}
189200
metricId={'pct1ResTime'}
201+
runsWithShapes={runsWithShapes}
190202
/>
191203
</Grid>
192204
<Grid item xs={4}>
@@ -195,6 +207,7 @@ const Transaction: React.FC<Props> = (props: Props) => {
195207
selectedRun={selectedRun}
196208
transactionMetrics={transactionMetrics}
197209
metricId={'pct2ResTime'}
210+
runsWithShapes={runsWithShapes}
198211
/>
199212
</Grid>
200213
</Grid>

‎src/views/testingPerfs/content/runs/content/transactions/statistics/Transaction/transactionChart.tsx‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,37 +32,48 @@ class TransactionChart extends Component<any, any> {
3232
};
3333

3434
buildChart = () => {
35-
const { transaction, metricId, transactionMetrics, selectedRun } = this.props;
35+
const { transaction, metricId, transactionMetrics, selectedRun, runsWithShapes } = this.props;
3636

3737
const transactionDetails = transactionMetrics.find((t: any) => t.id === metricId);
3838

39+
const dataPoints = runsWithShapes.map((r: any) => {
40+
return {
41+
type: 'line',
42+
pointRadius: 4,
43+
showLine: false,
44+
label: r.name,
45+
data: transaction.runs.map((ru: any) => {
46+
if (ru.run.name !== r.name) {
47+
return null;
48+
}
49+
return Math.round(ru.statistics[metricId] * 10) / 10;
50+
}),
51+
pointStyle: r.shape,
52+
backgroundColor: r.color,
53+
borderColor: r.color,
54+
fill: false,
55+
};
56+
});
57+
3958
const chartData = {
4059
datasets: [
4160
{
4261
type: 'line',
4362
pointRadius: 2,
44-
label: transactionDetails.name,
63+
label: 'Rolling Average',
4564
data: transaction.runs.map((r: any) => Math.round(r.velocityStatistics[metricId] * 10) / 10),
4665
backgroundColor: 'rgb(255, 99, 132)', // Red
4766
borderColor: 'rgb(255, 99, 132)', // Red
4867
fill: false,
4968
},
50-
{
51-
type: 'line',
52-
borderColor: 'rgb(54, 162, 235)', // Blue
53-
pointRadius: 4,
54-
label: transactionDetails.name,
55-
data: transaction.runs.map((r: any) => Math.round(r.statistics[metricId] * 10) / 10),
56-
backgroundColor: 'rgb(54, 162, 235)', // Blue
57-
showLine: false,
58-
},
69+
...dataPoints,
5970
{
6071
// This is used to place a circle around the run currently selected
6172
type: 'line',
6273
pointRadius: 10,
6374
pointBorderColor: 'rgb(224, 224, 224)', // Grey
6475
pointBorderWidth: 3,
65-
label: transactionDetails.name,
76+
label: 'Current',
6677
data: transaction.runs.map((r: any) => {
6778
if (r.run.id === selectedRun.id) {
6879
return Math.round(r.statistics[metricId] * 10) / 10;
@@ -87,7 +98,7 @@ class TransactionChart extends Component<any, any> {
8798
data: chartData,
8899
options: {
89100
legend: {
90-
display: false,
101+
display: true,
91102
},
92103
title: {
93104
display: true,

‎src/views/testingPerfs/content/runs/content/transactions/statistics/index.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,37 @@ const Statistics: React.FC<connectedProps> = (props: connectedProps) => {
3030

3131
const availableProfiles = selectedRunData.runs.edges.map((r: any) => r.node.name);
3232

33+
// As per: https://www.chartjs.org/docs/2.9.4/configuration/elements.html#point-styles
34+
const charJsDotShapes = [
35+
{ shape: 'circle', color: 'rgb(54, 162, 235)' },
36+
{ shape: 'triangle', color: 'rgb(255, 152, 0)' },
37+
{ shape: 'rect', color: 'rgb(76, 175, 80)' },
38+
{ shape: 'rectRounded', color: 'rgb(63, 81, 181)' },
39+
{ shape: 'rectRot', color: 'rgb(156, 39, 176)' },
40+
{ shape: 'cross', color: 'rgb(205, 220, 57)' },
41+
{ shape: 'crossRot', color: 'rgb(255, 172, 51)' },
42+
{ shape: 'star', color: 'rgb(213, 0, 249)' },
43+
{ shape: 'line', color: 'rgb(178, 135, 4)' },
44+
];
45+
46+
const runsWithShapes = runs.reduce((acc: any[], r: any) => {
47+
if (acc.find((ru) => ru.name === r.name) === undefined) {
48+
if (charJsDotShapes[acc.length] === undefined) {
49+
acc.push({
50+
shape: 'dash',
51+
color: 'rgb(165, 42, 42)',
52+
name: r.name,
53+
});
54+
} else {
55+
acc.push({
56+
...charJsDotShapes[acc.length],
57+
name: r.name,
58+
});
59+
}
60+
}
61+
return acc;
62+
}, []);
63+
3364
// Create an Array of all available transactions across all runs
3465
const transactions = runs
3566
.reduce((acc: any[], r: any) => {
@@ -39,6 +70,7 @@ const Statistics: React.FC<connectedProps> = (props: connectedProps) => {
3970
name: stat.transaction,
4071
run: {
4172
id: r.id,
73+
name: r.name,
4274
profile: profile.node.name,
4375
startedAt: r.startedAt,
4476
},
@@ -98,6 +130,7 @@ const Statistics: React.FC<connectedProps> = (props: connectedProps) => {
98130
<Transaction
99131
key={t.name}
100132
transaction={t}
133+
runsWithShapes={runsWithShapes}
101134
selectedRun={selectedRunData}
102135
transactionMetrics={transactionMetrics}
103136
selectedRunProfile={selectedRunProfile}

‎src/views/testingPerfs/content/runs/data/availableRuns/getQueries.graphql‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
query($query: String) {
1+
query($query: String, $maxRunsSize: Int) {
22
testingPerfs {
33
data(query: $query) {
4-
items(size: 1000) {
4+
items(size: $maxRunsSize, orderBy: { direction: desc, field: "startedAt" }) {
55
nodes {
66
id
77
name

‎src/views/testingPerfs/content/runs/data/availableRuns/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const GQL_QUERY = loader('./getQueries.graphql');
99

1010
const mapState = (state: iRootState) => ({
1111
query: state.testingPerfs.query,
12+
maxRunsCount: state.testingPerfs.maxRunsCount,
1213
});
1314

1415
const mapDispatch = (dispatch: any) => ({
@@ -20,11 +21,12 @@ const mapDispatch = (dispatch: any) => ({
2021
type connectedProps = ReturnType<typeof mapState> & ReturnType<typeof mapDispatch>;
2122

2223
const AvailableRuns: React.FC<connectedProps> = (props: connectedProps) => {
23-
const { setAvailableRuns, query, setSelectedRunId, setLoading } = props;
24+
const { setAvailableRuns, query, setSelectedRunId, setLoading, maxRunsCount } = props;
2425

2526
const { data, loading } = useQuery(GQL_QUERY, {
2627
variables: {
2728
query: JSON.stringify(query),
29+
maxRunsSize: maxRunsCount,
2830
},
2931
fetchPolicy: 'network-only',
3032
});

‎src/views/testingPerfs/content/runs/data/compareRuns/getQueries.graphql‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
query($query: String, $transactions: [String!], $profileName: String) {
1+
query($query: String, $transactions: [String!], $profileName: String, $maxRunsSize: Int) {
22
testingPerfs {
33
data(query: $query) {
4-
items(transactions: $transactions, profileName: $profileName, orderBy: { direction: desc, field: "startedAt" }) {
4+
count
5+
items(transactions: $transactions, profileName: $profileName, orderBy: { direction: desc, field: "startedAt" }, size: $maxRunsSize) {
56
nodes {
67
id
78
name

‎src/views/testingPerfs/content/runs/data/compareRuns/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const GQL_QUERY = loader('./getQueries.graphql');
1010
const mapState = (state: iRootState) => ({
1111
query: state.testingPerfs.query,
1212
selectedRunProfile: state.testingPerfs.selectedRunProfile,
13+
maxRunsCount: state.testingPerfs.maxRunsCount,
1314
});
1415

1516
const mapDispatch = (dispatch: any) => ({
@@ -19,13 +20,14 @@ const mapDispatch = (dispatch: any) => ({
1920
type connectedProps = ReturnType<typeof mapState> & ReturnType<typeof mapDispatch>;
2021

2122
const Profiles: React.FC<connectedProps> = (props: connectedProps) => {
22-
const { setRuns, query, selectedRunProfile } = props;
23+
const { setRuns, query, selectedRunProfile, maxRunsCount } = props;
2324

2425
const { data } = useQuery(GQL_QUERY, {
2526
variables: {
2627
query: JSON.stringify(query),
2728
transactions: ['*'],
2829
profileName: selectedRunProfile,
30+
maxRunsSize: maxRunsCount,
2931
},
3032
fetchPolicy: 'network-only',
3133
});

‎src/views/testingPerfs/content/runs/toolbar/index.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,25 @@ import Grid from '@material-ui/core/Grid';
55
import SelectRun from './selectRun';
66
import PreviousRun from './previousRun';
77
import NextRun from './nextRun';
8+
import MaxRuns from './maxRuns';
89

910
import { iRootState } from '../../../../../store';
1011

1112
const mapState = (state: iRootState) => ({
1213
availableRuns: state.testingPerfs.availableRuns,
1314
selectedRunId: state.testingPerfs.selectedRunId,
15+
maxRunsCount: state.testingPerfs.maxRunsCount,
1416
});
1517

1618
const mapDispatch = (dispatch: any) => ({
1719
setSelectedRunId: dispatch.testingPerfs.setSelectedRunId,
20+
setMaxRunsCount: dispatch.testingPerfs.setMaxRunsCount,
1821
});
1922

2023
type connectedProps = ReturnType<typeof mapState> & ReturnType<typeof mapDispatch>;
2124

2225
const Toolbar: React.FC<connectedProps> = (props: connectedProps) => {
23-
const { availableRuns, selectedRunId, setSelectedRunId } = props;
26+
const { availableRuns, selectedRunId, setSelectedRunId, setMaxRunsCount, maxRunsCount } = props;
2427

2528
if (availableRuns.length === 0 || selectedRunId === '') {
2629
return null;
@@ -32,6 +35,7 @@ const Toolbar: React.FC<connectedProps> = (props: connectedProps) => {
3235

3336
return (
3437
<Grid container spacing={3} direction="row" justify="center" alignItems="center">
38+
<Grid item xs={12} sm container></Grid>
3539
<Grid item>
3640
<PreviousRun previousRun={previousRun} setSelectedRunId={setSelectedRunId} />
3741
</Grid>
@@ -41,6 +45,10 @@ const Toolbar: React.FC<connectedProps> = (props: connectedProps) => {
4145
<Grid item>
4246
<NextRun nextRun={nextRun} setSelectedRunId={setSelectedRunId} />
4347
</Grid>
48+
<Grid item xs={12} sm container></Grid>
49+
<Grid item>
50+
<MaxRuns maxRunsCount={maxRunsCount} setMaxRunsCount={setMaxRunsCount} />
51+
</Grid>
4452
</Grid>
4553
);
4654
};

0 commit comments

Comments
 (0)