Add duration graph to environment flake rates.
parent
3960a8ee6f
commit
d1b6549fbb
|
@ -334,40 +334,87 @@ function displayEnvironmentChart(testData, environmentName) {
|
|||
.slice(0, topFlakes)
|
||||
.map(({testName}) => testName);
|
||||
|
||||
const data = new google.visualization.DataTable();
|
||||
data.addColumn('date', 'Date');
|
||||
for (const name of recentTopFlakes) {
|
||||
data.addColumn('number', `Flake Percentage - ${name}`);
|
||||
data.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
|
||||
}
|
||||
data.addRows(
|
||||
orderedDates.map(dateTime => [new Date(dateTime)].concat(recentTopFlakes.map(name => {
|
||||
const data = aggregatedRuns.get(name).get(dateTime);
|
||||
return data !== undefined ? [
|
||||
data.flakeRate,
|
||||
`<div style="padding: 1rem; font-family: 'Arial'; font-size: 14">
|
||||
const chartsContainer = document.getElementById('chart_div');
|
||||
{
|
||||
const data = new google.visualization.DataTable();
|
||||
data.addColumn('date', 'Date');
|
||||
for (const name of recentTopFlakes) {
|
||||
data.addColumn('number', `Flake Percentage - ${name}`);
|
||||
data.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
|
||||
}
|
||||
data.addRows(
|
||||
orderedDates.map(dateTime => [new Date(dateTime)].concat(recentTopFlakes.map(name => {
|
||||
const data = aggregatedRuns.get(name).get(dateTime);
|
||||
return data !== undefined ? [
|
||||
data.flakeRate,
|
||||
`<div style="padding: 1rem; font-family: 'Arial'; font-size: 14">
|
||||
<b style="display: block">${name}</b><br>
|
||||
<b>${data.date.toString()}</b><br>
|
||||
<b>Flake Percentage:</b> ${data.flakeRate.toFixed(2)}%<br>
|
||||
<b>Hashes:</b><br>
|
||||
${data.commitHashes.map(({ hash, failures, runs }) => ` - <a href="${hashToLink(hash, environmentName)}">${hash}</a> (Failures: ${failures}/${runs})`).join("<br>")}
|
||||
</div>`
|
||||
] : [null, null];
|
||||
})).flat())
|
||||
);
|
||||
const options = {
|
||||
title: `Flake rate by day of top ${topFlakes} of recent test flakiness (past ${dateRange} days) on ${environmentName}`,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
pointSize: 10,
|
||||
pointShape: "circle",
|
||||
vAxes: {
|
||||
0: { title: "Flake rate", minValue: 0, maxValue: 100 },
|
||||
},
|
||||
tooltip: { trigger: "selection", isHtml: true }
|
||||
};
|
||||
const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
|
||||
chart.draw(data, options);
|
||||
] : [null, null];
|
||||
})).flat())
|
||||
);
|
||||
const options = {
|
||||
title: `Flake rate by day of top ${topFlakes} of recent test flakiness (past ${dateRange} days) on ${environmentName}`,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
pointSize: 10,
|
||||
pointShape: "circle",
|
||||
vAxes: {
|
||||
0: { title: "Flake rate", minValue: 0, maxValue: 100 },
|
||||
},
|
||||
tooltip: { trigger: "selection", isHtml: true }
|
||||
};
|
||||
const flakeRateContainer = document.createElement("div");
|
||||
flakeRateContainer.style.width = "100vw";
|
||||
flakeRateContainer.style.height = "100vh";
|
||||
chartsContainer.appendChild(flakeRateContainer);
|
||||
const chart = new google.visualization.LineChart(flakeRateContainer);
|
||||
chart.draw(data, options);
|
||||
}
|
||||
{
|
||||
const data = new google.visualization.DataTable();
|
||||
data.addColumn('date', 'Date');
|
||||
for (const name of recentTopFlakes) {
|
||||
data.addColumn('number', `Duration - ${name}`);
|
||||
data.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
|
||||
}
|
||||
data.addRows(
|
||||
orderedDates.map(dateTime => [new Date(dateTime)].concat(recentTopFlakes.map(name => {
|
||||
const data = aggregatedRuns.get(name).get(dateTime);
|
||||
return data !== undefined ? [
|
||||
data.duration,
|
||||
`<div style="padding: 1rem; font-family: 'Arial'; font-size: 14">
|
||||
<b style="display: block">${name}</b><br>
|
||||
<b>${data.date.toString()}</b><br>
|
||||
<b>Average Duration:</b> ${data.duration.toFixed(2)}s<br>
|
||||
<b>Hashes:</b><br>
|
||||
${data.commitHashes.map(({ hash, duration, runs }) => ` - <a href="${hashToLink(hash, environmentName)}">${hash}</a> (Average Duration: ${duration.toFixed(2)}s [${runs} runs])`).join("<br>")}
|
||||
</div>`
|
||||
] : [null, null];
|
||||
})).flat())
|
||||
);
|
||||
const options = {
|
||||
title: `Average duration by day of top ${topFlakes} of recent test flakiness (past ${dateRange} days) on ${environmentName}`,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
pointSize: 10,
|
||||
pointShape: "circle",
|
||||
vAxes: {
|
||||
0: { title: "Average Duration (s)" },
|
||||
},
|
||||
tooltip: { trigger: "selection", isHtml: true }
|
||||
};
|
||||
const durationContainer = document.createElement("div");
|
||||
durationContainer.style.width = "100vw";
|
||||
durationContainer.style.height = "100vh";
|
||||
chartsContainer.appendChild(durationContainer);
|
||||
const chart = new google.visualization.LineChart(durationContainer);
|
||||
chart.draw(data, options);
|
||||
}
|
||||
|
||||
document.body.appendChild(createRecentFlakePercentageTable(recentFlakePercentage, previousFlakePercentageMap, environmentName));
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue