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 .center
{ {
display: flex; display: flex;
@@ -215,3 +230,7 @@ input:required:invalid {
background-repeat: no-repeat; background-repeat: no-repeat;
box-shadow: none; 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: { methods: {
sort: function() { sort: function() {
sortTiles(); sortTiles();
},
abort: function() {
data.dashboard.toBeRendered = [];
} }
}, },
computed: { computed: {
navigationVisible: function() { navigationVisible: function() {
return data.dashboard.tiles.length > 0; 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: ` template: `
<div id="navigation-bar-dashboard" v-if="navigationVisible"> <div id="navigation-bar-dashboard" v-if="navigationVisible">
<label for="dashboardSortBy">Sort by:</label> <div>
<select id="dashboardSortBy" name="dashboardSortBy" v-model="dashboard.sortBy" @change="sort"> <label for="dashboardSortBy">Sort by:</label>
<option value="DEFAULT"></option> <select id="dashboardSortBy" name="dashboardSortBy" v-model="dashboard.sortBy" @change="sort">
<option value="MAX_VALUE_DESC">max value desc</option> <option value="DEFAULT"></option>
<option value="MAX_VALUE_ASC">max value asc</option> <option value="MAX_VALUE_DESC">max value desc</option>
<option value="VALUES_DESC">#values desc</option> <option value="MAX_VALUE_ASC">max value asc</option>
<option value="VALUES_ASC">#values asc</option> <option value="VALUES_DESC">#values desc</option>
</select> <option value="VALUES_ASC">#values asc</option>
</select>
</div>
<!-- <!--
<label for="dashboardFilter">Filter by:</label> <div>
<select id="dashboardFilter" name="dashboardFilter" v-model="dashboard.filter"> <label for="dashboardFilter">Filter by:</label>
<option value="NONE">none</option> <select id="dashboardFilter" name="dashboardFilter" v-model="dashboard.filter">
<option value="HIGHER_THAN">higher</option> <option value="NONE">none</option>
<option value="LOWER_THAN">lower</option> <option value="HIGHER_THAN">higher</option>
<option value="HIGHER_AVG_THAN">higher avg.</option> <option value="LOWER_THAN">lower</option>
<option value="LOWER_AVG_THAN">lower avg.</option> <option value="HIGHER_AVG_THAN">higher avg.</option>
<option value="HIGHER_PERCENTILE_THAN">higher percentile</option> <option value="LOWER_AVG_THAN">lower avg.</option>
<option value="LOWER_PERCENTILE_THAN">lower percentile</option> <option value="HIGHER_PERCENTILE_THAN">higher percentile</option>
<option value="MORE_THAN">more</option> <option value="LOWER_PERCENTILE_THAN">lower percentile</option>
<option value="LESS_THAN">less</option> <option value="MORE_THAN">more</option>
</select> <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> </div>
` `
}); });
@@ -737,8 +762,13 @@ var data = {
}, },
dashboard: { dashboard: {
tiles: [], tiles: [],
toBeRendered: [],
sortBy: "MAX_VALUE_DESC", sortBy: "MAX_VALUE_DESC",
filter: "NONE" filter: "NONE",
progress: {
max: 0,
value: 0
}
} }
}; };
@@ -882,17 +912,23 @@ function createDashboard(vm){
vm.splitQueries(function (fieldValues) { vm.splitQueries(function (fieldValues) {
var splitByField = data.searchBar.splitByKeys.selected; 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) { if (data.dashboard.toBeRendered.length > 0) {
var fieldValue = fieldValues.pop(); var fieldValue = data.dashboard.toBeRendered.pop();
const query = createQuery(originalQuery, field, fieldValue); const query = createQuery(originalQuery, field, fieldValue);
const request = createRequest(query); const request = createRequest(query);
request['height'] = imageHeight; request['height'] = imageHeight;
@@ -908,7 +944,8 @@ function createDashboardItem(fieldValues, originalQuery, field, imageHeight, ima
stats: response.stats stats: response.stats
}); });
sortTiles(); sortTiles();
createDashboardItem(fieldValues, originalQuery, field, imageHeight, imageWidth); data.dashboard.progress.value++;
createDashboardItem(originalQuery, field, imageHeight, imageWidth);
}; };
const error = function(e) { const error = function(e) {
var errorMessage = ''; var errorMessage = '';
@@ -928,7 +965,8 @@ function createDashboardItem(fieldValues, originalQuery, field, imageHeight, ima
error: errorMessage error: errorMessage
}); });
} }
createDashboardItem(fieldValues, originalQuery, field, imageHeight, imageWidth); data.dashboard.progress.value++;
createDashboardItem(originalQuery, field, imageHeight, imageWidth);
}; };
postJson("plots", request, success, error); postJson("plots", request, success, error);
} }