Add duration graph to environment flake rates.

pull/11874/head
Andriy Dzikh 2021-07-01 14:16:45 -07:00
parent 3960a8ee6f
commit d1b6549fbb
1 changed files with 75 additions and 28 deletions

View File

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