andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

render progress bar and add button to abort the dashboard creation

Browse Source
This commit is contained in:
Andreas Huber
2018-04-28 19:58:31 +02:00
parent 2da54432ff
commit d4b09d4dab
2 changed files with 85 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
pdb-ui/src/main/resources/resources/css/design.css
View File

@@ -201,6 +201,21 @@ textarea {
}
#navigation-bar-dashboard div {
float: left;
}
#dashboardControls {
margin-left: 1em;
}
#dashboardControls progress {
text-align: center;
}
#dashboardControls progress:after {
content: attr(percentage)'%';
}
.center
{
display: flex;
@@ -215,3 +230,7 @@ input:required:invalid {
background-repeat: no-repeat;
box-shadow: none;
}
.icon-abort:hover {
color: #ff6b6b;
}

94
pdb-ui/src/main/resources/resources/js/ui.js
View File

@@ -246,38 +246,63 @@ Vue.component('navigation-bar-dashboard', {
methods: {
sort: function() {
sortTiles();
},
abort: function() {
data.dashboard.toBeRendered = [];
}
},
computed: {
navigationVisible: function() {
return data.dashboard.tiles.length > 0;
},
showProgressBar: function(){
return data.dashboard.toBeRendered.length > 0;
},
percentage: function() {
if (data.dashboard.progress.max > 100){
return Math.round(10000*data.dashboard.progress.value / data.dashboard.progress.max)/100.0;
}else{
return Math.round(100*data.dashboard.progress.value / data.dashboard.progress.max);
}
}
},
template: `
<div id="navigation-bar-dashboard" v-if="navigationVisible">
<label for="dashboardSortBy">Sort by:</label>
<select id="dashboardSortBy" name="dashboardSortBy" v-model="dashboard.sortBy" @change="sort">
<option value="DEFAULT"></option>
<option value="MAX_VALUE_DESC">max value desc</option>
<option value="MAX_VALUE_ASC">max value asc</option>
<option value="VALUES_DESC">#values desc</option>
<option value="VALUES_ASC">#values asc</option>
</select>
<div>
<label for="dashboardSortBy">Sort by:</label>
<select id="dashboardSortBy" name="dashboardSortBy" v-model="dashboard.sortBy" @change="sort">
<option value="DEFAULT"></option>
<option value="MAX_VALUE_DESC">max value desc</option>
<option value="MAX_VALUE_ASC">max value asc</option>
<option value="VALUES_DESC">#values desc</option>
<option value="VALUES_ASC">#values asc</option>
</select>
</div>
<!--
<label for="dashboardFilter">Filter by:</label>
<select id="dashboardFilter" name="dashboardFilter" v-model="dashboard.filter">
<option value="NONE">none</option>
<option value="HIGHER_THAN">higher</option>
<option value="LOWER_THAN">lower</option>
<option value="HIGHER_AVG_THAN">higher avg.</option>
<option value="LOWER_AVG_THAN">lower avg.</option>
<option value="HIGHER_PERCENTILE_THAN">higher percentile</option>
<option value="LOWER_PERCENTILE_THAN">lower percentile</option>
<option value="MORE_THAN">more</option>
<option value="LESS_THAN">less</option>
</select>
<div>
<label for="dashboardFilter">Filter by:</label>
<select id="dashboardFilter" name="dashboardFilter" v-model="dashboard.filter">
<option value="NONE">none</option>
<option value="HIGHER_THAN">higher</option>
<option value="LOWER_THAN">lower</option>
<option value="HIGHER_AVG_THAN">higher avg.</option>
<option value="LOWER_AVG_THAN">lower avg.</option>
<option value="HIGHER_PERCENTILE_THAN">higher percentile</option>
<option value="LOWER_PERCENTILE_THAN">lower percentile</option>
<option value="MORE_THAN">more</option>
<option value="LESS_THAN">less</option>
</select>
</div>
-->
<div id="dashboardControls" v-if="showProgressBar">
<progress
v-bind:max="dashboard.progress.max"
v-bind:value="dashboard.progress.value"
v-bind:percentage="percentage"
></progress>
<i class="fa fa-times-circle icon-abort" title="abort" @click="abort"></i>
</div>
</div>
`
});
@@ -737,8 +762,13 @@ var data = {
},
dashboard: {
tiles: [],
toBeRendered: [],
sortBy: "MAX_VALUE_DESC",
filter: "NONE"
filter: "NONE",
progress: {
max: 0,
value: 0
}
}
};
@@ -882,17 +912,23 @@ function createDashboard(vm){
vm.splitQueries(function (fieldValues) {
var splitByField = data.searchBar.splitByKeys.selected;
createDashboardItem(fieldValues, originalQuery, splitByField, imageHeight, imageWidth);
data.dashboard.toBeRendered = fieldValues;
// reset progress bar
data.dashboard.progress.max = fieldValues.length;
data.dashboard.progress.value = 0;
createDashboardItem(originalQuery, splitByField, imageHeight, imageWidth);
});
}
function createDashboardItem(fieldValues, originalQuery, field, imageHeight, imageWidth)
function createDashboardItem(originalQuery, field, imageHeight, imageWidth)
{
if (fieldValues.length > 0) {
var fieldValue = fieldValues.pop();
if (data.dashboard.toBeRendered.length > 0) {
var fieldValue = data.dashboard.toBeRendered.pop();
const query = createQuery(originalQuery, field, fieldValue);
const request = createRequest(query);
request['height'] = imageHeight;
@@ -908,7 +944,8 @@ function createDashboardItem(fieldValues, originalQuery, field, imageHeight, ima
stats: response.stats
});
sortTiles();
createDashboardItem(fieldValues, originalQuery, field, imageHeight, imageWidth);
data.dashboard.progress.value++;
createDashboardItem(originalQuery, field, imageHeight, imageWidth);
};
const error = function(e) {
var errorMessage = '';
@@ -928,7 +965,8 @@ function createDashboardItem(fieldValues, originalQuery, field, imageHeight, ima
error: errorMessage
});
}
createDashboardItem(fieldValues, originalQuery, field, imageHeight, imageWidth);
data.dashboard.progress.value++;
createDashboardItem(originalQuery, field, imageHeight, imageWidth);
};
postJson("plots", request, success, error);
}