Add duration graph to environment flake rates.
parent
3960a8ee6f
commit
d1b6549fbb
|
@ -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));
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue