asfgit closed pull request #23: IGNITE-9541 Add row highlight for 'failed', add title for columns, re… URL: https://github.com/apache/ignite-teamcity-bot/pull/23
This is a PR merged from a forked repository. As GitHub hides the original diff on merge, it is displayed below for the sake of provenance: As this is a foreign pull request (from a fork), the diff is supplied below (as it won't show otherwise due to GitHub magic): diff --git a/ignite-tc-helper-web/src/main/webapp/comparison.html b/ignite-tc-helper-web/src/main/webapp/comparison.html index 5efe4e3..7868f64 100644 --- a/ignite-tc-helper-web/src/main/webapp/comparison.html +++ b/ignite-tc-helper-web/src/main/webapp/comparison.html @@ -29,11 +29,11 @@ <td style="text-align: center;" id="info1"></td> <td style="text-align: center;" id="info2"></td> </tr> - <tr><td class="section">TESTS</td><td></td><td></td></tr> + <tr><td class="section">TESTS</td><td></td><td class="title1"></td><td class="title2"></td></tr> <tr><td class="field">COUNT</td> <td><img id="clickGraphCount" src='/img/browser.png'></td> - <td class="data1" id="Count1" title="min - median - max"></td> - <td class="data2" id="Count2" title="min - median - max"></td> + <td class="data1" id="Count1" title="min - median - max" data-allow-highlight="false"></td> + <td class="data2" id="Count2" title="min - median - max" data-allow-highlight="false"></td> </tr> <tr id="showGraphCount" style="display: none;"><td></td> <td></td> @@ -42,8 +42,8 @@ </tr> <tr><td class="field">PASSED</td> <td><img id="clickGraphPassed" src='/img/browser.png'></td> - <td class="data1" id="Passed1" title="min - median - max"></td> - <td class="data2" id="Passed2" title="min - median - max"></td> + <td class="data1" id="Passed1" title="min - median - max" data-allow-highlight="false"></td> + <td class="data2" id="Passed2" title="min - median - max" data-allow-highlight="false"></td> </tr> <tr id="showGraphPassed" style="display: none;"><td></td> <td></td> @@ -52,8 +52,8 @@ </tr> <tr><td class="field">FAILED</td> <td><img id="clickGraphFailed" src='/img/browser.png'></td> - <td class="data1" id="Failed1" title="min - median - max"></td> - <td class="data2" id="Failed2" title="min - median - max"></td> + <td class="data1" id="Failed1" title="min - median - max" data-allow-highlight="true"></td> + <td class="data2" id="Failed2" title="min - median - max" data-allow-highlight="true"></td> </tr> <tr id="showGraphFailed" style="display: none;"><td></td> <td></td> @@ -62,8 +62,8 @@ </tr> <tr><td class="field">IGNORED</td> <td><img id="clickGraphIgnored" src='/img/browser.png'></td> - <td class="data1" id="Ignored1" title="min - median - max"></td> - <td class="data2" id="Ignored2" title="min - median - max"></td> + <td class="data1" id="Ignored1" title="min - median - max" data-allow-highlight="false"></td> + <td class="data2" id="Ignored2" title="min - median - max" data-allow-highlight="false"></td> </tr> <tr id="showGraphIgnored" style="display: none;"><td></td> <td></td> @@ -72,19 +72,19 @@ </tr> <tr><td class="field">MUTED</td> <td><img id="clickGraphMuted" src='/img/browser.png'></td> - <td class="data1" id="Muted1" title="min - median - max"></td> - <td class="data2" id="Muted2" title="min - median - max"></td></tr> + <td class="data1" id="Muted1" title="min - median - max" data-allow-highlight="false"></td> + <td class="data2" id="Muted2" title="min - median - max" data-allow-highlight="false"></td></tr> <tr id="showGraphMuted" style="display: none;"><td></td> <td></td> <td style="text-align: center;"><svg id="graphMuted1" width="500" height="200"></svg></td> <td style="text-align: center;"><svg id="graphMuted2" width="500" height="200"></svg></td> </tr> - <tr><td class="section">PROBLEMS</td><td></td><td></td></tr> + <tr><td class="section">PROBLEMS</td><td></td><td class="title1"></td><td class="title2"></td></tr> <tr style="display: none;"><td></td><td></td><td></td></tr> <tr><td class="field">TOTAL</td> <td><img id="clickGraphTT" src='/img/browser.png'></td> - <td class="data1" id="TT1" title="min - median - max"></td> - <td class="data2" id="TT2" title="min - median - max"></td></tr> + <td class="data1" id="TT1" title="min - median - max" data-allow-highlight="true"></td> + <td class="data2" id="TT2" title="min - median - max" data-allow-highlight="true"></td></tr> <tr id="showGraphTT" style="display: none;"><td></td> <td></td> <td style="text-align: center;"><svg id="graphTT1" width="500" height="200"></svg></td> @@ -92,8 +92,8 @@ </tr> <tr><td class="field">EXECUTION TIMEOUT</td> <td><img id="clickGraphET" src='/img/browser.png'></td> - <td class="data1" id="ET1" title="min - median - max"></td> - <td class="data2" id="ET2" title="min - median - max"></td> + <td class="data1" id="ET1" title="min - median - max" data-allow-highlight="true"></td> + <td class="data2" id="ET2" title="min - median - max" data-allow-highlight="true"></td> </tr> <tr id="showGraphET" style="display: none;"><td></td> <td></td> @@ -102,8 +102,8 @@ </tr> <tr><td class="field">JVM CRASH</td> <td><img id="clickGraphJC" src='/img/browser.png'></td> - <td class="data1" id="JC1" title="min - median - max"></td> - <td class="data2" id="JC2" title="min - median - max"></td> + <td class="data1" id="JC1" title="min - median - max" data-allow-highlight="true"></td> + <td class="data2" id="JC2" title="min - median - max" data-allow-highlight="true"></td> </tr> <tr id="showGraphJC" style="display: none;"><td></td> <td></td> @@ -112,8 +112,8 @@ </tr> <tr><td class="field">OOME</td> <td><img id="clickGraphOO" src='/img/browser.png'></td> - <td class="data1" id="OO1" title="min - median - max"></td> - <td class="data2" id="OO2" title="min - median - max"></td> + <td class="data1" id="OO1" title="min - median - max" data-allow-highlight="true"></td> + <td class="data2" id="OO2" title="min - median - max" data-allow-highlight="true"></td> </tr> <tr id="showGraphOO" style="display: none;"><td></td> <td></td> @@ -122,8 +122,8 @@ </tr> <tr><td class="field">EXIT CODE</td> <td><img id="clickGraphEC" src='/img/browser.png'></td> - <td class="data1" id="EC1" title="min - median - max"></td> - <td class="data2" id="EC2" title="min - median - max"></td> + <td class="data1" id="EC1" title="min - median - max" data-allow-highlight="true"></td> + <td class="data2" id="EC2" title="min - median - max" data-allow-highlight="true"></td> </tr> <tr id="showGraphEC" style="display: none;"><td></td> <td></td> @@ -200,6 +200,7 @@ if (dates.length === 0) { printImportantMessage(num, "#ff0000", "No data for the selected period"); fillAllDataCells(num, ""); + $('.title' + num).html(""); return; } else { @@ -211,37 +212,47 @@ (firstDate === lastDate ? firstDate : ("the period from " + firstDate + " to " + lastDate)) + ""); } else { $("#info" + num).html(""); - if (document.getElementById("info" + anotherNum).innerHTML === "") { - document.getElementById("showInfo").style.display = "none"; + if ($('#info' + anotherNum).text() === ''){ + $('#showInfo').css('display', 'none') } } } - let anotherMedian; - let result = {}; + $('.title' + num).html('min - median - max'); for (let i = 0; i < prOcc.length; i++) { - result = getMinMaxMedian(statistics[prOcc[i]]); - anotherMedian = parseMedian(document.getElementById(prOcc[i] + anotherNum).innerHTML); - - $('#' + prOcc[i] + num).html(result.min + " - " + result.median + " - " + result.max); - - if (!isNaN(anotherMedian)){ - if (result.median > anotherMedian){ - document.getElementById(prOcc[i] + num).style.backgroundColor = "#ffeee9"; - document.getElementById(prOcc[i] + anotherNum).style.backgroundColor = "#e5ffe8"; - } else if (result.median < anotherMedian){ - document.getElementById(prOcc[i] + anotherNum).style.backgroundColor = "#ffeee9"; - document.getElementById(prOcc[i] + num).style.backgroundColor = "#e5ffe8"; - } - } + fillCellWithStatistics(prOcc[i], num, statistics, dates); + fillCellWithStatistics(tOcc[i], num, statistics, dates); + } + } + + function fillCellWithStatistics(prefix, num, statistics, dates) { + let result = getMinMaxMedian(statistics[prefix]); - result = getMinMaxMedian(statistics[tOcc[i]]); + $('#' + prefix + num).html(result.min + " - " + result.median + " - " + result.max); - $('#' + tOcc[i] + num).html(result.min + " - " + result.median + " - " + result.max); + compareAndHighlight(prefix, num, result.median); + + drawGraph(prefix, num, dates, statistics[prefix], prefix); + } - drawGraph(prOcc[i], num, dates, statistics[prOcc[i]], prOcc[i]); - drawGraph(tOcc[i], num, dates, statistics[tOcc[i]], tOcc[i]); + function compareAndHighlight(prefix, thisNum, thisMedian){ + let anotherNum = (thisNum === 1) ? 2 : 1; + + let thisElement = $('#' + prefix + thisNum); + let anotherElement = $('#' + prefix + anotherNum); + + if (thisElement.data('allowHighlight').toString() === "true") { + let anotherMedian = parseMedian(anotherElement.text()); + if (!isNaN(anotherMedian)) { + if (thisMedian > anotherMedian) { + thisElement.css('background-color', '#ffeee9'); + anotherElement.css('background-color', '#e5ffe8'); + } else if (thisMedian < anotherMedian) { + anotherElement.css('background-color', '#ffeee9'); + thisElement.css('background-color', '#e5ffe8'); + } + } } } @@ -269,9 +280,7 @@ } function clearBackgroundFromAllDataCells(num){ - document.querySelectorAll(".data" + (num == null ? "1, .data2" : num)).forEach(function (el) { - el.style.background = null; - }); + $('.data' + (num == null ? '1, .data2' : num)).css('background', ''); } function fillAllDataCells(num, message) { @@ -294,7 +303,7 @@ function printImportantMessage(num, color, message) { $('#info' + num).html("<span style='background:" + color + "; color:white; font-weight:bold;'>" + " ! </span> " + message); - document.getElementById("showInfo").style.display = null; + $('#showInfo').css('display', ''); } function loadData(num, sinceDate, untilDate) { @@ -326,16 +335,14 @@ }); for (let i = 0; i < prOcc.length; i++) { - $("#clickGraph" + prOcc[i]).click(function() { - document.getElementById("showGraph" + prOcc[i]).style.display === 'none' ? - document.getElementById("showGraph" + prOcc[i]).style.display = null : - document.getElementById("showGraph" + prOcc[i]).style.display = 'none'; - }); - - $("#clickGraph" + tOcc[i]).click(function() { - document.getElementById("showGraph" + tOcc[i]).style.display === 'none' ? - document.getElementById("showGraph" + tOcc[i]).style.display = null : - document.getElementById("showGraph" + tOcc[i]).style.display = 'none'; + graphSpoiler(prOcc[i]); + graphSpoiler(tOcc[i]); + } + + function graphSpoiler(prefix) { + $("#clickGraph" + prefix).click(function() { + let element = $('#showGraph' + prefix); + element.css('display') === 'none' ? element.css('display', '') : element.css('display', 'none'); }); } diff --git a/ignite-tc-helper-web/src/main/webapp/css/style-1.5.css b/ignite-tc-helper-web/src/main/webapp/css/style-1.5.css index 8673a44..7e3f91f 100644 --- a/ignite-tc-helper-web/src/main/webapp/css/style-1.5.css +++ b/ignite-tc-helper-web/src/main/webapp/css/style-1.5.css @@ -166,6 +166,12 @@ form li:after color: #000000; } +.compare .title1, .compare .title2 { + text-align: center; + font-size: 10px; + color: gray; +} + .compare tr:nth-child(4n-1) { background-color: #fafaff; } ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: us...@infra.apache.org With regards, Apache Git Services