ignite-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From dpav...@apache.org
Subject [ignite-teamcity-bot] branch master updated: IGNITE-9833 Use 24-hour clock format for X axis tick, refacot code - Fixes #34.
Date Thu, 11 Oct 2018 13:12:59 GMT
This is an automated email from the ASF dual-hosted git repository.

dpavlov pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ignite-teamcity-bot.git


The following commit(s) were added to refs/heads/master by this push:
     new 861cced  IGNITE-9833 Use 24-hour clock format for X axis tick, refacot code - Fixes
#34.
861cced is described below

commit 861cced16477b2b24d590be80016eeca364a1229
Author: Nikolai Kulagin <zzzadruga.sbt@gmail.com>
AuthorDate: Thu Oct 11 16:12:48 2018 +0300

    IGNITE-9833 Use 24-hour clock format for X axis tick, refacot code - Fixes #34.
    
    Signed-off-by: Dmitriy Pavlov <dpavlov@apache.org>
---
 .../web/model/current/BuildStatisticsSummary.java  |  11 +-
 .../src/main/webapp/comparison.html                | 194 ++++++++++++++-------
 .../src/main/webapp/css/style-1.5.css              |   8 +-
 3 files changed, 138 insertions(+), 75 deletions(-)

diff --git a/ignite-tc-helper-web/src/main/java/org/apache/ignite/ci/web/model/current/BuildStatisticsSummary.java
b/ignite-tc-helper-web/src/main/java/org/apache/ignite/ci/web/model/current/BuildStatisticsSummary.java
index 8a428a5..d4a7bf6 100644
--- a/ignite-tc-helper-web/src/main/java/org/apache/ignite/ci/web/model/current/BuildStatisticsSummary.java
+++ b/ignite-tc-helper-web/src/main/java/org/apache/ignite/ci/web/model/current/BuildStatisticsSummary.java
@@ -64,8 +64,8 @@ public class BuildStatisticsSummary extends UpdateInfo implements IBackgroundUpd
     /** List of problem occurrences. */
     private List<ProblemOccurrence> problemOccurrenceList;
 
-    /** Duration printable. */
-    public String durationPrintable;
+    /** Duration (seconds). */
+    public long duration;
 
     /** Short build run result (without snapshot-dependencies printable result). */
     public Map<String, Long> totalProblems;
@@ -95,8 +95,7 @@ public class BuildStatisticsSummary extends UpdateInfo implements IBackgroundUpd
 
         testOccurrences = build.testOccurrences;
 
-        durationPrintable = TimeUtil
-            .millisToDurationPrintable(build.getFinishDate().getTime() - build.getStartDate().getTime());
+        duration = (build.getFinishDate().getTime() - build.getStartDate().getTime()) / 1000;
 
         List<BuildRef> snapshotDependencies = getSnapshotDependencies(teamcity, build);
 
@@ -228,13 +227,13 @@ public class BuildStatisticsSummary extends UpdateInfo implements IBackgroundUpd
             Objects.equals(startDate, that.startDate) &&
             Objects.equals(testOccurrences, that.testOccurrences) &&
             Objects.equals(problemOccurrenceList, that.problemOccurrenceList) &&
-            Objects.equals(durationPrintable, that.durationPrintable) &&
+            Objects.equals(duration, that.duration) &&
             Objects.equals(totalProblems, that.totalProblems);
     }
 
     /** {@inheritDoc} */
     @Override public int hashCode() {
         return Objects.hash(buildId, startDate, testOccurrences, problemOccurrenceList,
-            durationPrintable, totalProblems, isFakeStub);
+            duration, totalProblems, isFakeStub);
     }
 }
diff --git a/ignite-tc-helper-web/src/main/webapp/comparison.html b/ignite-tc-helper-web/src/main/webapp/comparison.html
index bc24084..fd62a47 100644
--- a/ignite-tc-helper-web/src/main/webapp/comparison.html
+++ b/ignite-tc-helper-web/src/main/webapp/comparison.html
@@ -23,18 +23,27 @@
         <th width="5%"></th>
         <th style="text-align: center;" width="40%"><input type='text' name='daterange1'/></th>
         <th style="text-align: center;" width="40%"><input type='text' name='daterange2'/></th>
+    </tr><tr><td></td><td></td><td></td></tr>
+    <tr><td class="field">DURATION</td>
+        <td><img id="clickGraphDuration" src='/img/browser.png'></td>
+        <td class="mmm1 data1" id="Duration1" data-allow-highlight="true"></td>
+        <td class="mmm2 data2" id="Duration2" data-allow-highlight="true"></td>
+    </tr>
+    <tr id="showGraphDuration" style="display: none;"><td></td>
+        <td></td>
+        <td style="text-align: center;"><svg id="graphDuration1" width="500" height="200"></svg></td>
+        <td style="text-align: center;"><svg id="graphDuration2" width="500" height="200"></svg></td>
     </tr>
-    <tr style="display: none;"></tr><tr style="display: none;"></tr><tr
style="display: none;"></tr>
     <tr id="showInfo" style="display: none;">
         <td class="section">FEATURES</td><td></td>
         <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 class="title1"></td><td
class="title2"></td></tr>
+    <tr><td class="section">TESTS</td><td></td><td class="title
mmm1"></td><td class="title mmm2"></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" data-allow-highlight="false"></td>
-        <td class="data2" id="Count2" title="min - median - max" data-allow-highlight="false"></td>
+        <td class="mmm1 data1" id="Count1" data-allow-highlight="false"></td>
+        <td class="mmm2 data2" id="Count2" data-allow-highlight="false"></td>
     </tr>
     <tr id="showGraphCount" style="display: none;"><td></td>
         <td></td>
@@ -43,8 +52,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" data-allow-highlight="false"></td>
-        <td class="data2" id="Passed2" title="min - median - max" data-allow-highlight="false"></td>
+        <td class="mmm1 data1" id="Passed1" data-allow-highlight="false"></td>
+        <td class="mmm2 data2" id="Passed2" data-allow-highlight="false"></td>
     </tr>
     <tr id="showGraphPassed" style="display: none;"><td></td>
         <td></td>
@@ -53,8 +62,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" data-allow-highlight="true"></td>
-        <td class="data2" id="Failed2" title="min - median - max" data-allow-highlight="true"></td>
+        <td class="mmm1 data1" id="Failed1" data-allow-highlight="true"></td>
+        <td class="mmm2 data2" id="Failed2" data-allow-highlight="true"></td>
     </tr>
     <tr id="showGraphFailed" style="display: none;"><td></td>
         <td></td>
@@ -63,8 +72,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" data-allow-highlight="false"></td>
-        <td class="data2" id="Ignored2" title="min - median - max" data-allow-highlight="false"></td>
+        <td class="mmm1 data1" id="Ignored1" data-allow-highlight="false"></td>
+        <td class="mmm2 data2" id="Ignored2" data-allow-highlight="false"></td>
     </tr>
     <tr id="showGraphIgnored" style="display: none;"><td></td>
         <td></td>
@@ -73,19 +82,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" data-allow-highlight="false"></td>
-        <td class="data2" id="Muted2" title="min - median - max" data-allow-highlight="false"></td></tr>
+        <td class="mmm1 data1" id="Muted1" data-allow-highlight="false"></td>
+        <td class="mmm2 data2" id="Muted2" 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 class="title1"></td><td
class="title2"></td></tr>
+    <tr><td class="section">PROBLEMS</td><td></td><td class="title
mmm1"></td><td class="title mmm2"></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" data-allow-highlight="true"></td>
-        <td class="data2" id="TT2" title="min - median - max" data-allow-highlight="true"></td></tr>
+        <td class="mmm1 data1" id="TT1" data-allow-highlight="true"></td>
+        <td class="mmm2 data2" id="TT2" 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>
@@ -93,8 +102,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" data-allow-highlight="true"></td>
-        <td class="data2" id="ET2" title="min - median - max" data-allow-highlight="true"></td>
+        <td class="mmm1 data1" id="ET1" data-allow-highlight="true"></td>
+        <td class="mmm2 data2" id="ET2" data-allow-highlight="true"></td>
     </tr>
     <tr id="showGraphET" style="display: none;"><td></td>
         <td></td>
@@ -103,8 +112,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" data-allow-highlight="true"></td>
-        <td class="data2" id="JC2" title="min - median - max" data-allow-highlight="true"></td>
+        <td class="mmm1 data1" id="JC1" data-allow-highlight="true"></td>
+        <td class="mmm2 data2" id="JC2" data-allow-highlight="true"></td>
     </tr>
     <tr id="showGraphJC" style="display: none;"><td></td>
         <td></td>
@@ -113,8 +122,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" data-allow-highlight="true"></td>
-        <td class="data2" id="OO2" title="min - median - max" data-allow-highlight="true"></td>
+        <td class="mmm1 data1" id="OO1" data-allow-highlight="true"></td>
+        <td class="mmm2 data2" id="OO2" data-allow-highlight="true"></td>
     </tr>
     <tr id="showGraphOO" style="display: none;"><td></td>
         <td></td>
@@ -123,26 +132,62 @@
     </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" data-allow-highlight="true"></td>
-        <td class="data2" id="EC2" title="min - median - max" data-allow-highlight="true"></td>
+        <td class="mmm1 data1" id="EC1" data-allow-highlight="true"></td>
+        <td class="mmm2 data2" id="EC2" data-allow-highlight="true"></td>
     </tr>
     <tr id="showGraphEC" style="display: none;"><td></td>
         <td></td>
         <td style="text-align: center;"><svg id="graphEC1" width="500" height="200"></svg></td>
         <td style="text-align: center;"><svg id="graphEC2" width="500" height="200"></svg></td>
     </tr>
+    <tr><td class="section">OTHER METRICS</td><td></td><td
class="title t1"></td><td class="title t2"></td></tr>
+    <tr style="display: none;"><td></td><td></td><td></td></tr>
+    <tr><td class="field">RUNS COUNT</td>
+        <td></td>
+        <td class="t1 data1" id="RunsCount1"></td>
+        <td class="t2 data2" id="RunsCount2"></td>
+    </tr>
 </table><br>
 <div id="version"></div>
 <script>
-    let oneWeekAgo = new Date();
-    let twoWeekAgo = new Date();
-    let g_updTimer = null;
+    let oneWeekAgo = new Date(),
+        twoWeekAgo = new Date(),
+        g_updTimer = null;
 
     oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
     twoWeekAgo.setDate(twoWeekAgo.getDate() - 14);
 
+    const parseTime = d3.timeParse("%d-%m-%YT%H:%M:%S"),
+        formatTime = d3.timeFormat("%d-%m-%Y %H:%M:%S"),
+        formatMillisecond = d3.timeFormat(".%L"),
+        formatSecond = d3.timeFormat(":%S"),
+        formatMinute = d3.timeFormat("%H:%M"),
+        formatHour = d3.timeFormat("%H:%M"),
+        formatDay = d3.timeFormat("%a %e"),
+        formatWeek = d3.timeFormat("%b %e"),
+        formatMonth = d3.timeFormat("%B"),
+        formatYear = d3.timeFormat("%Y"),
+        parseDuration = d3.utcParse("%s");
+
+    const tOcc = ["Count", "Passed", "Failed", "Ignored", "Muted"],
+        prOcc = ["TT", "ET", "JC", "OO", "EC"],
+        mmmTitle = "min - median - max",
+        tTitle = "total",
+        duration = "Duration";
+
+    function multiFormat(date) {
+        return (d3.timeSecond(date) < date ? formatMillisecond
+            : d3.timeMinute(date) < date ? formatSecond
+                : d3.timeHour(date) < date ? formatMinute
+                    : d3.timeDay(date) < date ? formatHour
+                        : d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay
: formatWeek)
+                            : d3.timeYear(date) < date ? formatMonth
+                                : formatYear)(date);
+    }
+
     function dateRangePickerParam(data1, data2) {
         return {
+            "opens" : 'left',
             "maxSpan": { "days": 7 },
             "locale": {
                 "format": "DD/MM/YYYY", "separator": " - ", "applyLabel": "Apply", "cancelLabel":
"Cancel",
@@ -156,22 +201,27 @@
         }
     }
 
-    const prOcc = ["TT", "ET", "JC", "OO", "EC"];
-    const tOcc = ["Count", "Passed", "Failed", "Ignored", "Muted"];
-
     function getMinMaxMedian(arr) {
         let newArr = arr.slice();
         newArr = newArr.sort(function(a, b){ return a - b; });
+
         let i = newArr.length / 2;
+
         let result = {};
-        result.median = i % 1 == 0 ? (newArr[i - 1] + newArr[i]) / 2 : newArr[Math.floor(i)];
+        result.median = i % 1 === 0 ? (newArr[i - 1] + newArr[i]) / 2 : newArr[Math.floor(i)];
         result.min = newArr[0];
         result.max = newArr[newArr.length - 1];
+
         return result;
     }
 
     function parseMedian(string) {
-        return parseFloat(string.substring(string.indexOf("-") + 2, string.lastIndexOf("-")
- 1));
+        let stringMedian = string.substring(string.indexOf("-") + 2, string.lastIndexOf("-")
- 1);
+
+        if (stringMedian.indexOf(":") !== -1)
+            return (parseInt(stringMedian.split(":")[0]) * 60 + parseInt(stringMedian.split(":")[1]))
* 60;
+        else
+            return parseFloat(stringMedian);
     }
 
     function printStatistics(num, map, sinceDate, untilDate) {
@@ -179,11 +229,12 @@
         clearGraphs(num);
 
         const anotherNum = (num === 1) ? 2 : 1;
-        const parseTime = d3.timeParse("%d-%m-%YT%H:%M:%S");
 
-        let statistics = {};
-        let dates = [];
-        let buildIds = [];
+        let statistics = {},
+            dates = [],
+            buildIds = [];
+
+        statistics[duration] = [];
 
         for (let i = 0; i < prOcc.length; i++) {
             statistics[prOcc[i]] = [];
@@ -193,6 +244,7 @@
         for (let j = 0; j < map.length; j++) {
             dates[j] = parseTime(map[j].startDate);
             buildIds[j] = map[j].buildId;
+            statistics[duration][j] = map[j].duration;
 
             for (let i = 0; i < prOcc.length; i++) {
                 statistics[prOcc[i]][j] = map[j].totalProblems[prOcc[i]];
@@ -221,29 +273,42 @@
             }
         }
 
-        $('.title' + num).html('min - median - max');
+        $('.title.mmm' + num).html(mmmTitle);
+        $('.mmm' + num).prop('title', mmmTitle);
+        $('.title.t' + num).html(tTitle);
+        $('.t' + num).prop('title', tTitle);
+
+        fillCellWithStatistics(duration, num, statistics, dates, buildIds);
 
         for (let i = 0; i < prOcc.length; i++) {
             fillCellWithStatistics(prOcc[i], num, statistics, dates, buildIds);
             fillCellWithStatistics(tOcc[i], num, statistics, dates, buildIds);
         }
+
+        $('#RunsCount' + num).html(map.length);
     }
 
     function fillCellWithStatistics(prefix, num, statistics, dates, buildIds) {
         let result = getMinMaxMedian(statistics[prefix]);
 
-        $('#' + prefix + num).html(result.min + " - " + result.median +  " - " + result.max);
+        if (prefix === duration)
+            $('#' + prefix + num).html(time(result.min) + " - " + time(result.median) + "
- " + time(result.max));
+        else
+            $('#' + prefix + num).html(result.min + " - " + result.median +  " - " + result.max);
 
         compareAndHighlight(prefix, num, result.median);
 
         drawGraph(prefix, num, dates, statistics[prefix], buildIds);
+
+        function time(ms){
+            return moment(ms * 1000).utcOffset(0).format("H:mm");
+        }
     }
 
     function compareAndHighlight(prefix, thisNum, thisMedian){
-        let anotherNum = (thisNum === 1) ? 2 : 1;
-
-        let thisElement = $('#' + prefix + thisNum);
-        let anotherElement =  $('#' + prefix + anotherNum);
+        let anotherNum = (thisNum === 1) ? 2 : 1,
+            thisElement = $('#' + prefix + thisNum),
+            anotherElement =  $('#' + prefix + anotherNum);
 
         if (thisElement.data('allowHighlight').toString() === "true") {
             let anotherMedian = parseMedian(anotherElement.text());
@@ -291,6 +356,7 @@
     }
 
     function clearGraphs(num) {
+        $("#graph" + duration + num).empty();
         for (let i = 0; i < prOcc.length; i++) {
             $("#graph" + prOcc[i] + num).empty();
             $("#graph" + tOcc[i] + num).empty();
@@ -337,6 +403,8 @@
             });
     });
 
+    graphSpoiler(duration);
+
     for (let i = 0; i < prOcc.length; i++) {
         graphSpoiler(prOcc[i]);
         graphSpoiler(tOcc[i]);
@@ -350,46 +418,39 @@
     }
 
     function drawGraph(prefix, num, dates, counts, buildIds) {
-        let data = [];
+        let data = [],
+            isDuration = prefix === duration;
 
         for (let i = 0; i < dates.length; i++) {
             data[i] = {};
             data[i].date = dates[i];
-            data[i].value = counts[i];
+            data[i].value = (isDuration ? parseDuration(parseInt(counts[i])) : counts[i]);
             data[i].buildId = buildIds[i];
         }
 
-        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
+ ")");
+        let 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
+ ")");
 
         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; }));
+        let y = (isDuration ? d3.scaleTime() : d3.scaleLinear()).range([height, 0]),
+            x = d3.scaleTime().rangeRound([0, width]);
 
         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));
+        x.domain(d3.extent(data, function(d) { return d.date; }));
+        y.domain(d3.extent(data, function(d) { return d.value; }));
 
-        g.append("g")
-            .call(d3.axisLeft(y));
+        g.append("svg:g").attr("transform", "translate(0," + (height) + ")")
+            .call(d3.axisBottom(x).tickFormat(multiFormat));
+        g.append("svg:g").call(isDuration ? d3.axisLeft(y).tickFormat(d3.utcFormat("%H:%M"))
: d3.axisLeft(y));
 
         let svg_aline = g.append("line")
             .attr("class", "line")
@@ -426,8 +487,8 @@
                     .duration(200)
                     .style("opacity", .8);
 
-                let graphTd = document.getElementById("graph" + prefix + num).getBoundingClientRect();
-                let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                let graphTd = document.getElementById("graph" + prefix + num).getBoundingClientRect(),
+                    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")
@@ -453,12 +514,13 @@
 
     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;
         }
 
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 d1065bd..ca6d537 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
@@ -209,9 +209,11 @@ form li:after
 	margin-top:10px;
 }
 
-.compare{
-	width: 80%;
+.compare {
+	width: 96%;
 	border-collapse: collapse;
+	margin-left: 2%;
+	margin-right: 2%;
 }
 .compare td, .compare th {
 	padding: 10px 5px 10px 5px;
@@ -237,7 +239,7 @@ form li:after
 	color: #000000;
 }
 
-.compare .title1, .compare .title2  {
+.compare .title {
 	text-align: center;
 	font-size: 10px;
 	color: gray;


Mime
View raw message