asfgit closed pull request #30: IGNITE-9805 Animation v1 URL: https://github.com/apache/ignite-teamcity-bot/pull/30
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 7868f64..bc24084 100644 --- a/ignite-tc-helper-web/src/main/webapp/comparison.html +++ b/ignite-tc-helper-web/src/main/webapp/comparison.html @@ -4,12 +4,13 @@ <meta charset="UTF-8"> <title>Ignite Teamcity - comparison master's branch in the date interval</title> <link rel="icon" href="img/leaf-icon-png-7066.png"> - <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> - <link rel="stylesheet" href="css/style-1.5.css"> - <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> + <script src="https://code.jquery.com/jquery-1.12.4.js"></script> + <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /> + <link rel="stylesheet" href="css/style-1.5.css"> + <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="js/common-1.6.js"></script> <script src="https://d3js.org/d3.v4.min.js"></script> </head> @@ -182,6 +183,7 @@ let statistics = {}; let dates = []; + let buildIds = []; for (let i = 0; i < prOcc.length; i++) { statistics[prOcc[i]] = []; @@ -190,6 +192,7 @@ for (let j = 0; j < map.length; j++) { dates[j] = parseTime(map[j].startDate); + buildIds[j] = map[j].buildId; for (let i = 0; i < prOcc.length; i++) { statistics[prOcc[i]][j] = map[j].totalProblems[prOcc[i]]; @@ -221,19 +224,19 @@ $('.title' + num).html('min - median - max'); for (let i = 0; i < prOcc.length; i++) { - fillCellWithStatistics(prOcc[i], num, statistics, dates); - fillCellWithStatistics(tOcc[i], num, statistics, dates); + fillCellWithStatistics(prOcc[i], num, statistics, dates, buildIds); + fillCellWithStatistics(tOcc[i], num, statistics, dates, buildIds); } } - function fillCellWithStatistics(prefix, num, statistics, dates) { + function fillCellWithStatistics(prefix, num, statistics, dates, buildIds) { let result = getMinMaxMedian(statistics[prefix]); $('#' + prefix + num).html(result.min + " - " + result.median + " - " + result.max); compareAndHighlight(prefix, num, result.median); - drawGraph(prefix, num, dates, statistics[prefix], prefix); + drawGraph(prefix, num, dates, statistics[prefix], buildIds); } function compareAndHighlight(prefix, thisNum, thisMedian){ @@ -346,49 +349,58 @@ }); } - function drawGraph(prefix, num, dates, counts, text) { + function drawGraph(prefix, num, dates, counts, buildIds) { let data = []; for (let i = 0; i < dates.length; i++) { data[i] = {}; data[i].date = dates[i]; - data[i].count = counts[i]; + data[i].value = counts[i]; + data[i].buildId = buildIds[i]; } - svg = d3.select("#graph" + prefix + num).append("svg:svg"); - margin = {top: 20, right: 20, bottom: 30, left: 50}; - width = +500 - margin.left - margin.right; - height = +200 - margin.top - margin.bottom; - g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); - x = d3.scaleTime().range([0, width]); - y = d3.scaleLinear().range([height, 0]); + let svg = d3.select("#graph" + prefix + num).append("svg:svg"); + let margin = {top: 20, right: 20, bottom: 30, left: 50}; + let width = +500 - margin.left - margin.right; + let height = +200 - margin.top - margin.bottom; + let g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); - line = d3.line() - .curve(d3.curveBasis) - .x(function(d) { return x(d.date); }) - .y(function(d) { return y(d.count); }); + let div = d3.select("body").append("div") + .attr("class", "tooltip") + .style("opacity", 0); + + let formatTime = d3.timeFormat("%d-%m-%Y %H:%M:%S"); + let max = d3.max(data, function(d){return parseInt(d.value)}); + let y = d3.scaleLinear() + .domain([0, max]) + .range([height, 0]); + let x = d3.scaleTime() + .rangeRound([0, width]); x.domain(d3.extent(data, function(d) { return d.date; })); - y.domain(d3.extent(data, function(d) { return d.count; })); - - g.append("svg:g") - .attr("transform", "translate(0," + height + ")") - .call(d3.axisBottom(x)) - .select(".domain") - .remove(); - - g.append("svg:g") - .call(d3.axisLeft(y)) - .append("text") - .attr("fill", "#000") - .attr("transform", "rotate(-90)") - .attr("y", 6) - .attr("dy", "0.71em") - .attr("text-anchor", "end") - .text(text); - - g.append("svg:path") + + let line = d3.line() + .x(function(d) { return x(d.date); }) + .y(function(d) { return y(d.value); }); + + g.append("g") + .attr("transform", "translate(0," + (height) + ")") + .call(d3.axisBottom(x)); + + g.append("g") + .call(d3.axisLeft(y)); + + let svg_aline = g.append("line") + .attr("class", "line") + .style("stroke-dasharray", ("3, 10")) + .attr("x1",100) + .attr("x2",400) + .attr("y1",200) + .attr("y2",200) + .style("display", "None"); + + g.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") @@ -396,7 +408,82 @@ .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("d", line); + + g.selectAll("dot").data(data) + .enter() + .append("circle") + .attr("r", 3) + .attr("cx", function(d){return x(d.date); }) + .attr("cy", function(d){return y(d.value); }) + .attr("class", "dot") + .on("mouseover", function(d) { + d3.select(this).transition().duration(100) + .style("fill", "green") + .attr("r", 5) + .attr("onclick", "checkAvailable(" + d.buildId + "," + d.date.getTime() + ");" + + "return false;"); + div.transition() + .duration(200) + .style("opacity", .8); + + let graphTd = document.getElementById("graph" + prefix + num).getBoundingClientRect(); + let scrollTop = window.pageYOffset || document.documentElement.scrollTop; + + div .html(formatTime(d.date)) + .style("left", graphTd.left + x(d.date) + (x(d.date) > (500 - 150) ? -150 : 0) + "px") + .style("top", scrollTop + graphTd.top - 10 + "px" ); + svg_aline.transition().duration(10) + .style("display", "block") + .attr("x1", x(d.date)) + .attr("y1", y(d.value)) + .attr("x2", x(d.date)) + .attr("y2", height) + }) + + .on("mouseout", function(d) { + d3.select(this).transition().duration(100) + .style("fill", "grey") + .attr("r", 3); + div.transition() + .duration(500) + .style("opacity", 0); + svg_aline.style("display","None") + }); + } + + function getBuildLink(buildId) { return "https://ci.ignite.apache.org/viewLog.html?buildId=" + buildId + + "&tab=buildResultsDiv&buildTypeId=IgniteTests24Java8_RunAll"; } + + function checkAvailable(buildId, date) { + let dateDiff = moment().diff(moment(date), 'days'); + + if (dateDiff <= 14) { + window.open(getBuildLink(buildId), '_blank'); + return; + } + + let message = "<p style='text-align:center;opacity: 0.7;'><img src='img/tc.svg' width='100' height='100'></p>" + + "<br>The results «Run All» for <b>build [" + buildId + "]</b> is <b>not available</b> on " + + "the TeamCity server.<br><br><span style='color:grey;font-size:smaller'><hr>TeamCity server stores data " + + "for the last ~14 days. Since the launch of the build " + dateDiff + " days have passed</span>"; + + let modalDialog = $("#modalDialog"); + + modalDialog.html(message); + modalDialog.dialog({ + modal: true, + buttons: { + "Go anyway": function () { + $(this).dialog("close"); + window.open(getBuildLink(buildId), '_blank'); + }, + "Cancel": function () { + $(this).dialog("close"); + } + } + }); } </script> +<div style="visibility:hidden"><div id="modalDialog" title="Information"></div></div> </body> </html> 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 d670800..a95ca77 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 @@ -220,3 +220,50 @@ form li:after .compare tr:nth-child(4n-1) { background-color: #fafaff; } + +rect { + fill: red; + stroke: black; + stroke-width: 0; +} + +.dot { + opacity: 0.5; + fill: grey; +} + +line { + fill: none; + stroke: green; + stroke-width: 1; + shape-rendering: crispEdges; +} + +.axis path, +.axis line { + fill: none; + stroke: grey; + stroke-width: 1; + shape-rendering: crispEdges; +} + +div.tooltip { + position: absolute; + text-align: center; + width: 150px; + height: 15px; + padding: 2px; + margin-left: 50px; + margin-top: 5px; + font: 14px sans-serif; + background: #12AD5E; + border: 1px; + border-radius: 8px; + pointer-events: none; + color: white; +} + +.ui-dialog button{ + height: auto; +} + diff --git a/ignite-tc-helper-web/src/main/webapp/img/tc.svg b/ignite-tc-helper-web/src/main/webapp/img/tc.svg new file mode 100644 index 0000000..6083e57 --- /dev/null +++ b/ignite-tc-helper-web/src/main/webapp/img/tc.svg @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="70px" height="70px" viewBox="0 0 70 70" style="enable-background:new 0 0 70 70;" xml:space="preserve"> +<g> + <g> + <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.7738" y1="31.2729" x2="40.1662" y2="31.2729"> + <stop offset="0" style="stop-color:#905CFB"/> + <stop offset="6.772543e-002" style="stop-color:#776CF9"/> + <stop offset="0.1729" style="stop-color:#5681F7"/> + <stop offset="0.2865" style="stop-color:#3B92F5"/> + <stop offset="0.4097" style="stop-color:#269FF4"/> + <stop offset="0.5474" style="stop-color:#17A9F3"/> + <stop offset="0.7111" style="stop-color:#0FAEF2"/> + <stop offset="0.9677" style="stop-color:#0CB0F2"/> + </linearGradient> + <path style="fill:url(#SVGID_1_);" d="M39.7,47.9l-6.1-34c-0.4-2.4-1.2-4.8-2.7-7.1c-2-3.2-5.2-5.4-8.8-6.3 + C7.9-2.9-2.6,11.3,3.6,23.9c0,0,0,0,0,0l14.8,31.7c0.4,1,1,2,1.7,2.9c1.2,1.6,2.8,2.8,4.7,3.4C34.4,64.9,42.1,56.4,39.7,47.9z"/> + <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="5.3113" y1="9.6691" x2="69.2278" y2="43.8664"> + <stop offset="0" style="stop-color:#905CFB"/> + <stop offset="6.772543e-002" style="stop-color:#776CF9"/> + <stop offset="0.1729" style="stop-color:#5681F7"/> + <stop offset="0.2865" style="stop-color:#3B92F5"/> + <stop offset="0.4097" style="stop-color:#269FF4"/> + <stop offset="0.5474" style="stop-color:#17A9F3"/> + <stop offset="0.7111" style="stop-color:#0FAEF2"/> + <stop offset="0.9677" style="stop-color:#0CB0F2"/> + </linearGradient> + <path style="fill:url(#SVGID_2_);" d="M67.4,26.5c-1.4-2.2-3.4-3.9-5.7-4.9L25.5,1.7l0,0c-1-0.5-2.1-1-3.3-1.3 + C6.7-3.2-4.4,13.8,5.5,27c1.5,2,3.6,3.6,6,4.5L48,47.9c0.8,0.5,1.6,0.8,2.5,1.1C64.5,53.4,75.1,38.6,67.4,26.5z"/> + <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-19.2836" y1="70.8198" x2="55.9833" y2="33.1863"> + <stop offset="0" style="stop-color:#3BEA62"/> + <stop offset="0.117" style="stop-color:#31DE80"/> + <stop offset="0.3025" style="stop-color:#24CEA8"/> + <stop offset="0.4844" style="stop-color:#1AC1C9"/> + <stop offset="0.6592" style="stop-color:#12B7DF"/> + <stop offset="0.8238" style="stop-color:#0EB2ED"/> + <stop offset="0.9677" style="stop-color:#0CB0F2"/> + </linearGradient> + <path style="fill:url(#SVGID_3_);" d="M67.4,26.5c-1.8-2.8-4.6-4.8-7.9-5.6c-3.5-0.8-6.8-0.5-9.6,0.7L11.4,36.1 + c0,0-0.2,0.1-0.6,0.4C0.9,40.4-4,53.3,4,64c1.8,2.4,4.3,4.2,7.1,5c5.3,1.6,10.1,1,14-1.1c0,0,0.1,0,0.1,0l37.6-20.1 + c0,0,0,0,0.1-0.1C69.5,43.9,72.6,34.6,67.4,26.5z"/> + <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="38.9439" y1="5.8503" x2="5.4232" y2="77.5093"> + <stop offset="0" style="stop-color:#3BEA62"/> + <stop offset="9.397750e-002" style="stop-color:#2FDB87"/> + <stop offset="0.196" style="stop-color:#24CEA8"/> + <stop offset="0.3063" style="stop-color:#1BC3C3"/> + <stop offset="0.4259" style="stop-color:#14BAD8"/> + <stop offset="0.5596" style="stop-color:#10B5E7"/> + <stop offset="0.7185" style="stop-color:#0DB1EF"/> + <stop offset="0.9677" style="stop-color:#0CB0F2"/> + </linearGradient> + <path style="fill:url(#SVGID_4_);" d="M50.3,12.8c1.2-2.7,1.1-6-0.9-9c-1.1-1.8-2.9-3-4.9-3.5c-4.5-1.1-8.3,1-10.1,4.2L3.5,42 + c0,0,0,0,0,0.1C-0.9,47.9-1.6,56.5,4,64c1.8,2.4,4.3,4.2,7.1,5c10.5,3.3,19.3-2.5,22.1-10.8L50.3,12.8z"/> + </g> + <g> + <rect x="13.4" y="13.4" style="fill:#000000;" width="43.2" height="43.2"/> + <rect x="17.5" y="48.5" style="fill:#FFFFFF;" width="16.2" height="2.7"/> + <polygon style="fill:#FFFFFF;" points="22.9,22.7 17.5,22.7 17.5,19.1 32.3,19.1 32.3,22.7 26.8,22.7 26.8,37 22.9,37 "/> + <path style="fill:#FFFFFF;" d="M32.5,28.1L32.5,28.1c0-5.1,3.8-9.3,9.3-9.3c3.4,0,5.4,1.1,7.1,2.8l-2.5,2.9c-1.4-1.3-2.8-2-4.6-2 + c-3,0-5.2,2.5-5.2,5.6V28c0,3.1,2.1,5.6,5.2,5.6c2,0,3.3-0.8,4.7-2.1l2.5,2.5c-1.8,2-3.9,3.2-7.3,3.2 + C36.4,37.3,32.5,33.2,32.5,28.1"/> + </g> +</g> +</svg> ---------------------------------------------------------------- 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