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 589bbd2 Current tracked branch failures: UI-based data filters were
added to UI (expandable panel)
589bbd2 is described below
commit 589bbd27b3a812356495cbec543b50116c66d806
Author: Dmitriy Pavlov <[email protected]>
AuthorDate: Thu Jul 25 21:17:31 2019 +0300
Current tracked branch failures: UI-based data filters were added to UI
(expandable panel)
---
.../src/main/webapp/css/vue-slider-1.0.css | 372 +++++++++++++++++++++
ignite-tc-helper-web/src/main/webapp/current.html | 177 +++++++---
2 files changed, 507 insertions(+), 42 deletions(-)
diff --git a/ignite-tc-helper-web/src/main/webapp/css/vue-slider-1.0.css
b/ignite-tc-helper-web/src/main/webapp/css/vue-slider-1.0.css
new file mode 100644
index 0000000..3a9085f
--- /dev/null
+++ b/ignite-tc-helper-web/src/main/webapp/css/vue-slider-1.0.css
@@ -0,0 +1,372 @@
+
+/** See original sources in
+ https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.css */
+
+.v-color-picker--flat .v-color-picker__track:not(.v-input--is-disabled)
.v-slider__thumb {
+ box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0,
0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+/** Ripples */
+/** Elements */
+.v-color-picker .v-input__slider {
+ border-radius: 5px;
+}
+.v-color-picker .v-input__slider .v-slider {
+ margin: 0;
+}
+
+.v-color-picker__alpha:not(.v-input--is-disabled) .v-slider {
+ border-radius: 5px;
+ background:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQYlWNgYGCQwoKxgqGgcJA5h3yFAAs8BRWVSwooAAAAAElFTkSuQmCC)
repeat;
+}
+
+.v-color-picker__sliders {
+ display: flex;
+ flex: 1 0 auto;
+ flex-direction: column;
+}
+
+.v-color-picker__dot {
+ position: relative;
+ height: 30px;
+ margin-right: 24px;
+ width: 30px;
+ background:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQYlWNgYGCQwoKxgqGgcJA5h3yFAAs8BRWVSwooAAAAAElFTkSuQmCC)
repeat;
+ border-radius: 50%;
+ overflow: hidden;
+}
+.v-color-picker__dot > div {
+ width: 100%;
+ height: 100%;
+}
+
+.v-color-picker__hue {
+ margin-bottom: 24px;
+}
+.v-color-picker__hue:not(.v-input--is-disabled) {
+ background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%,
#0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.v-color-picker__track {
+ position: relative;
+ width: 100%;
+}
+
+.v-color-picker__preview {
+ align-items: center;
+ display: flex;
+}
+.v-color-picker__preview .v-slider {
+ min-height: 10px;
+}
+.v-color-picker__preview .v-slider:not(.v-slider--disabled) .v-slider__thumb {
+ box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0,
0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+}
+.v-color-picker__preview .v-slider:not(.v-slider--disabled)
.v-slider__track-container {
+ opacity: 0;
+}
+/** Ripples */
+/** Elements */
+.theme--light.v-slider .v-slider__track-background,
+.theme--light.v-slider .v-slider__track-fill,
+.theme--light.v-slider .v-slider__thumb {
+ background: rgba(0, 0, 0, 0.26);
+}
+
+.theme--dark.v-slider .v-slider__track-background,
+.theme--dark.v-slider .v-slider__track-fill,
+.theme--dark.v-slider .v-slider__thumb {
+ background: rgba(255, 255, 255, 0.2);
+}
+
+.v-slider {
+ cursor: default;
+ display: flex;
+ align-items: center;
+ position: relative;
+ flex: 1;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.v-slider input {
+ cursor: default;
+ padding: 0;
+ width: 100%;
+ display: none;
+}
+
+.v-slider__track-container {
+ position: absolute;
+ border-radius: 0;
+}
+
+.v-slider__track-background, .v-slider__track-fill {
+ position: absolute;
+ transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.v-slider__thumb-container {
+ outline: none;
+ position: absolute;
+ transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ top: 50%;
+}
+.v-slider__thumb-container:hover .v-slider__thumb:before {
+ transform: scale(1);
+}
+
+.v-slider__thumb {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ left: -6px;
+ top: 50%;
+ border-radius: 50%;
+ transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ transform: translateY(-50%);
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.v-slider__thumb:before {
+ transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ content: "";
+ color: inherit;
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ background: currentColor;
+ opacity: 0.3;
+ position: absolute;
+ left: -12px;
+ top: -12px;
+ transform: scale(0.1);
+ pointer-events: none;
+}
+
+.v-slider__ticks-container {
+ position: absolute;
+}
+
+.v-slider__tick {
+ position: absolute;
+ opacity: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+ border-radius: 0;
+}
+.v-slider__tick--filled {
+ background-color: rgba(255, 255, 255, 0.5);
+}
+.v-slider__tick:first-child .v-slider__tick-label {
+ transform: none;
+}
+.v-application--is-rtl .v-slider__tick:first-child .v-slider__tick-label {
+ transform: translateX(100%);
+}
+.v-slider__tick:last-child .v-slider__tick-label {
+ transform: translateX(-100%);
+}
+.v-application--is-rtl .v-slider__tick:last-child .v-slider__tick-label {
+ transform: none;
+}
+
+.v-slider__tick-label {
+ position: absolute;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ white-space: nowrap;
+}
+
+.v-slider__thumb-label-container {
+ position: absolute;
+ left: 0;
+ top: 0;
+ transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.v-slider__thumb-label {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ color: #fff;
+ width: 32px;
+ height: 32px;
+ border-radius: 50% 50% 0;
+ position: absolute;
+ left: 0;
+ bottom: 100%;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.v-slider--horizontal {
+ min-height: 32px;
+ margin-left: 8px;
+ margin-right: 8px;
+}
+.v-slider--horizontal .v-slider__track-container {
+ width: 100%;
+ height: 2px;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+}
+.v-slider--horizontal .v-slider__track-background, .v-slider--horizontal
.v-slider__track-fill {
+ height: 100%;
+}
+.v-slider--horizontal .v-slider__ticks-container {
+ left: 0;
+ height: 2px;
+ width: 100%;
+}
+.v-slider--horizontal .v-slider__tick:first-child .v-slider__tick-label {
+ transform: translateX(0%);
+}
+.v-application--is-rtl .v-slider--horizontal .v-slider__tick:first-child
.v-slider__tick-label {
+ transform: translate(100%);
+}
+.v-slider--horizontal .v-slider__tick:last-child .v-slider__tick-label {
+ transform: translateX(-100%);
+}
+.v-application--is-rtl .v-slider--horizontal .v-slider__tick:last-child
.v-slider__tick-label {
+ transform: translateX(0%);
+}
+.v-slider--horizontal .v-slider__tick .v-slider__tick-label {
+ top: 8px;
+ transform: translateX(-50%);
+}
+.v-application--is-rtl .v-slider--horizontal .v-slider__tick
.v-slider__tick-label {
+ transform: translateX(50%);
+}
+.v-slider--horizontal .v-slider__thumb-label {
+ transform: translateY(-20%) translateY(-12px) translateX(-50%)
rotate(45deg);
+}
+.v-slider--horizontal .v-slider__thumb-label > * {
+ transform: rotate(-45deg);
+}
+
+.v-slider--vertical {
+ min-height: 150px;
+ margin-top: 12px;
+ margin-bottom: 12px;
+}
+.v-slider--vertical .v-slider__track-container {
+ height: 100%;
+ width: 2px;
+ left: 50%;
+ top: 0;
+ transform: translateX(-50%);
+}
+.v-slider--vertical .v-slider__track-background, .v-slider--vertical
.v-slider__track-fill {
+ width: 100%;
+}
+.v-slider--vertical .v-slider__thumb-container {
+ left: 50%;
+}
+.v-slider--vertical .v-slider__ticks-container {
+ top: 0;
+ width: 2px;
+ height: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+}
+.v-slider--vertical .v-slider__tick:first-child .v-slider__tick-label {
+ transform: translateY(-50%);
+}
+.v-application--is-rtl .v-slider--vertical .v-slider__tick:first-child
.v-slider__tick-label {
+ right: 12px;
+}
+.v-slider--vertical .v-slider__tick:last-child .v-slider__tick-label {
+ transform: translateY(-50%);
+}
+.v-application--is-rtl .v-slider--vertical .v-slider__tick:last-child
.v-slider__tick-label {
+ transform: translateY(-50%);
+}
+.v-slider--vertical .v-slider__tick .v-slider__tick-label {
+ left: 12px;
+ transform: translateY(-50%);
+}
+.v-application--is-rtl .v-slider--vertical .v-slider__tick
.v-slider__tick-label {
+ left: auto;
+ right: 12px;
+}
+.v-slider--vertical .v-slider__thumb-label > * {
+ transform: rotate(-135deg);
+}
+
+.v-slider__thumb-container--focused .v-slider__thumb:before {
+ transform: scale(1);
+}
+
+.v-slider--active .v-slider__tick {
+ opacity: 1;
+}
+
+.v-slider__thumb-container--active .v-slider__thumb:before {
+ transform: scale(1.5) !important;
+}
+
+.v-slider--disabled {
+ pointer-events: none;
+}
+.v-slider--disabled .v-slider__thumb {
+ width: 8px;
+ height: 8px;
+ left: -4px;
+}
+.v-slider--disabled .v-slider__thumb:before {
+ display: none;
+}
+
+.v-slider__ticks-container--always-show .v-slider__tick {
+ opacity: 1;
+}
+
+.v-slider--readonly {
+ pointer-events: none;
+}
+
+.v-input__slider .v-input__slot .v-label {
+ margin-left: 0;
+ margin-right: 12px;
+}
+.v-application--is-rtl .v-input__slider .v-input__slot .v-label {
+ margin-right: 0;
+ margin-left: 12px;
+}
+
+.v-input__slider--inverse-label .v-input__slot .v-label {
+ margin-right: 0;
+ margin-left: 12px;
+}
+.v-application--is-rtl .v-input__slider--inverse-label .v-input__slot .v-label
{
+ margin-left: 0;
+ margin-right: 12px;
+}
+
+.v-input__slider--vertical {
+ align-items: center;
+ flex-direction: column-reverse;
+}
+.v-application--is-rtl .v-input__slider--vertical {
+ flex-direction: column;
+}
+.v-input__slider--vertical .v-input__slot, .v-input__slider--vertical
.v-input__prepend-outer, .v-input__slider--vertical .v-input__append-outer {
+ margin: 0;
+}
+.v-input__slider--vertical .v-messages {
+ display: none;
+}
+
+.v-input--has-state .v-slider__track-background {
+ opacity: 0.4;
+}
\ No newline at end of file
diff --git a/ignite-tc-helper-web/src/main/webapp/current.html
b/ignite-tc-helper-web/src/main/webapp/current.html
index 78a1e50..221009b 100644
--- a/ignite-tc-helper-web/src/main/webapp/current.html
+++ b/ignite-tc-helper-web/src/main/webapp/current.html
@@ -2,8 +2,7 @@
<head>
<title>Apache Ignite Teamcity Bot - Current Failures</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">
+
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.2/css/all.css";
integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
crossorigin="anonymous">
@@ -12,6 +11,15 @@
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js";></script>
+ <!--<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css";
rel="stylesheet">-->
+
+ <link rel="stylesheet" href="css/vue-slider-1.0.css">
+
+ <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
src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js";></script>
+
<script src="js/common-1.6.js"></script>
<script src="js/testfails-2.2.js"></script>
</head>
@@ -22,22 +30,6 @@ var gVue;
function genLink() {
let newUrl = "./current.html" + parmsForRest();
- /*
- var branch = findGetParameter("branch");
- newUrl += "branch=" + (branch != null ? branch : "master");
-
- if (isDefinedAndFilled(gVue.$data.tagSelected))
- newUrl += "&tagSelected=" + gVue.$data.tagSelected;
-
- if (gVue.$data.displayMode != null)
- newUrl += "&displayMode=" + gVue.$data.displayMode;
-
- if (gVue.$data.sortOption != null)
- newUrl += "&sortOption=" + gVue.$data.sortOption;
-
- if (gVue.$data.count != null)
- newUrl += "&count=" + gVue.$data.count;
- */
let permalink = $("#permalink");
permalink.attr("href", newUrl);
@@ -46,8 +38,26 @@ function genLink() {
}
function showQueryForm() {
+ let min,max;
+
+ let minFailRate = findGetParameter("minFailRate");
+ if (minFailRate != null) {
+ min = parseInt(minFailRate) ;
+ } else {
+ min = 0;
+ }
+
+ let maxFailRate = findGetParameter("maxFailRate");
+ if (maxFailRate != null) {
+ max = parseInt(maxFailRate);
+ } else {
+ max=100;
+ }
+
+
gVue = new Vue({
el: '#vueQueryForm',
+ vuetify: new Vuetify(),
data: {
tagSelected: '',
tagsPresent: [""],
@@ -56,7 +66,12 @@ function showQueryForm() {
//count of builds to merge
count: 1,
trustedTests: true,
- checkAllLogs: false
+ checkAllLogs: false,
+ hideFlakyFailures: false,
+
+ absMinFailRate: 0,
+ absMaxFailRate: 100,
+ failRateRange: [min, max],
},
methods: {
formChanged: function () {
@@ -100,6 +115,11 @@ function showQueryForm() {
gVue.$data.checkAllLogs = checkAllLogs==="true";
}
+ var hideFlakyFailuresP = findGetParameter("hideFlakyFailures");
+ if (hideFlakyFailuresP != null) {
+ gVue.$data.hideFlakyFailures = hideFlakyFailuresP==="true";
+ }
+
genLink();
}
@@ -145,6 +165,14 @@ function parmsForRest() {
if (gVue.$data.count != null)
curReqParms += "&count=" + gVue.$data.count;
+ if (gVue.$data.failRateRange[0] != null)
+ curReqParms += "&minFailRate=" + gVue.$data.failRateRange[0];
+
+ if (gVue.$data.failRateRange[1] != null)
+ curReqParms += "&maxFailRate=" + gVue.$data.failRateRange[1];
+
+ curReqParms += "&hideFlakyFailures=" + gVue.$data.hideFlakyFailures;
+
return curReqParms;
}
@@ -249,7 +277,15 @@ function showData(result) {
//var txtUrl = "rest/tracked/results/txt" + parmsForRest();
- $("#divFailures").html(showChainOnServersResults(result));
+ var minFailRate = gVue.$data.failRateRange[0];
+
+ var maxFailRate = gVue.$data.failRateRange[1];
+
+ var hideFlakyFailures = gVue.$data.hideFlakyFailures === true;
+
+ let resHtml = showChainResultsWithSettings(result, new
Settings(minFailRate, maxFailRate, result.javaFlags, hideFlakyFailures));
+
+ $("#divFailures").html(resHtml);
// + " <a href='"+ txtUrl + "'>txt</a>");
}
@@ -259,31 +295,88 @@ function showData(result) {
<div id="vueQueryForm">
<v-app id="prQueryForm" name="prQueryForm">
<div class="formgroup">
- <span>Tag filter: </span>
- <select v-model="tagSelected" @change="formChanged">
- <option disabled value="">Please select one</option>
-
- <option v-for="option in tagsPresent" v-bind:value="option">
- {{ option }}
- </option>
- </select>
- <span>Display Mode: </span>
- <select v-model="displayMode" @change="formChanged">
- <option value="Failures">Show failures only</option>
- <option value="AllSuites">Show all suites</option>
- </select>
- <span>Sort: </span>
- <select v-model="sortOption" @change="formChanged">
- <option value="FailureRate">Failure Rate</option>
- <option value="SuiteDuration">Suite Duration</option>
- </select>
- <br>
- <span>Merge Builds: </span> <input v-model.number="count"
type="number" @change="formChanged">
- <span title="Show trusted tests count">Trusted tests:
</span> <input type="checkbox" v-model="trustedTests" @change="formChanged">
- <span title="Download and parse all logs">Check logs:
</span> <input type="checkbox" v-model="checkAllLogs" @change="formChanged">
+ <table>
+ <tr>
+ <td>
+ <span>Tag filter: </span>
+ <select v-model="tagSelected" @change="formChanged">
+ <option disabled value="">Please select
one</option>
+
+ <option v-for="option in tagsPresent"
v-bind:value="option">
+ {{ option }}
+ </option>
+ </select>
+ <span>Display Mode: </span>
+ <select v-model="displayMode" @change="formChanged">
+ <option value="Failures">Show failures
only</option>
+ <option value="AllSuites">Show all suites</option>
+ </select>
+ <span>Sort: </span>
+ <select v-model="sortOption" @change="formChanged">
+ <option value="FailureRate">Failure Rate</option>
+ <option value="SuiteDuration">Suite
Duration</option>
+ </select>
+ <br>
+ <span>Merge Builds: </span> <input
v-model.number="count" type="number" @change="formChanged">
+ <span title="Show trusted tests
count">Trusted tests: </span>
+ <input type="checkbox" v-model="trustedTests"
@change="formChanged">
+ <span title="Download and parse all
logs">Check logs: </span>
+ <input type="checkbox" v-model="checkAllLogs"
@change="formChanged">
+
+ </td>
+
+ <td style="width: 50%">
+ <v-expansion-panels>
+ <v-expansion-panel>
+ <v-expansion-panel-header>More
options</v-expansion-panel-header>
+ <v-expansion-panel-content>
+
+ <span title="Hide flaky
failures">Hide flaky: </span>
+ <input type="checkbox"
v-model="hideFlakyFailures" @change="formChanged">
+
+ <v-range-slider
+ v-model="failRateRange"
+ :max="absMaxFailRate"
+ :min="absMinFailRate"
+ hide-details
+ class="align-center"
+ @change="formChanged"
+ >
+ <template v-slot:prepend>
+ <span>Min failure rate: </span>
+ <v-text-field
+ v-model="failRateRange[0]"
+ class="mt-0 pt-0"
+ hide-details
+ single-line
+ type="number"
+ style="width:
60px"></v-text-field>
+
+ <span>Max failure rate: </span>
+ <v-text-field
+ v-model="failRateRange[1]"
+ class="mt-0 pt-0"
+ hide-details
+ single-line
+ type="number"
+ style="width:
60px"></v-text-field>
+ </template>
+ <template v-slot:append>
+
+ </template>
+ </v-range-slider>
+
+ </v-expansion-panel-content>
+ </v-expansion-panel>
+ </v-expansion-panels>
+ </td>
+ </tr>
+ </table>
<span> <a id="permalink"></a> </span>
+
+
<span id="loadStatus"></span>
</div>
