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

rename dashboard to gallery

Browse Source 
The dashboard was never really a dashboard.
This commit is contained in:
Andreas Huber
2018-05-01 08:47:07 +02:00
parent fc64c55ce7
commit b9cbcace91
3 changed files with 98 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -182,7 +182,7 @@ textarea {
top: 0; top: 0;
} }
.dashboard-item { .gallery-item {
width: 300px; width: 300px;
height: 200px; height: 200px;
margin: 10px; margin: 10px;
@@ -192,18 +192,18 @@ textarea {
position: relative; position: relative;
} }
.dashboard-item img { .gallery-item img {
max-width: 300px; max-width: 300px;
max-height: 200px; max-height: 200px;
display:block; /* removes 3 pixels extra height around the image */ display:block; /* removes 3 pixels extra height around the image */
} }
.dashboard-item .fieldValue{ .gallery-item .fieldValue{
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
#result-view-dashboard-image-viewer { #result-view-gallery-image-viewer {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -211,11 +211,11 @@ textarea {
z-index: 1; z-index: 1;
overflow-y:hidden; overflow-y:hidden;
} }
#result-view-dashboard-image-viewer img{ #result-view-gallery-image-viewer img{
display:block; /* removes 3 pixels extra height around the image */ display:block; /* removes 3 pixels extra height around the image */
} }
#result-view-dashboard-image-viewer-close { #result-view-gallery-image-viewer-close {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@@ -223,18 +223,18 @@ textarea {
opacity: 0.3; opacity: 0.3;
} }
#result-view-dashboard-image-viewer-close:hover { #result-view-gallery-image-viewer-close:hover {
opacity: 1.0; opacity: 1.0;
} }
#dashboardControls { #galleryControls {
margin-left: 1em; margin-left: 1em;
} }
#dashboardControls progress { #galleryControls progress {
text-align: center; text-align: center;
} }
#dashboardControls progress:after { #galleryControls progress:after {
content: attr(percentage)'%'; content: attr(percentage)'%';
} }

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

@@ -215,31 +215,31 @@ Vue.component('result-view', {
</div>` </div>`
}); });
Vue.component('result-view-dashboard', { Vue.component('result-view-gallery', {
props: ['dashboard'], props: ['gallery'],
methods: { methods: {
closeImage: function() { closeImage: function() {
this.dashboard.image = ""; this.gallery.image = "";
} }
}, },
template: ` template: `
<div id="result-view-dashboard" <div id="result-view-gallery"
v-if="dashboard.tiles"> v-if="gallery.tiles">
<div v-show="!dashboard.image"> <div v-show="!gallery.image">
<result-view-dashboard-item <result-view-gallery-item
v-for="item in dashboard.tiles" v-for="item in gallery.tiles"
v-bind:key="item.fieldValue" v-bind:key="item.fieldValue"
v-bind:dashboardItem="item" v-bind:galleryItem="item"
></result-view-dashboard-item> ></result-view-gallery-item>
</div> </div>
<div <div
id="result-view-dashboard-image-viewer" id="result-view-gallery-image-viewer"
v-if="dashboard.image"> v-if="gallery.image">
<img <img
v-bind:src="dashboard.image" v-bind:src="gallery.image"
/> />
<div <div
id="result-view-dashboard-image-viewer-close" id="result-view-gallery-image-viewer-close"
class="clickable" class="clickable"
@click="closeImage" @click="closeImage"
title="Close" title="Close"
@@ -249,60 +249,63 @@ Vue.component('result-view-dashboard', {
` `
}); });
Vue.component('result-view-dashboard-item', { Vue.component('result-view-gallery-item', {
props: ['dashboardItem'], props: ['galleryItem'],
methods: { methods: {
showImage: function(){ showImage: function(){
var vm = this; var vm = this;
data.dashboard.image = this.dashboardItem.imageUrl; data.gallery.image = this.galleryItem.imageUrl;
} }
}, },
template: ` template: `
<div class="dashboard-item"> <div class="gallery-item">
<div class="error-message" v-if="dashboardItem.error">{{ dashboardItem.error }}</div> <div class="error-message" v-if="galleryItem.error">{{ galleryItem.error }}</div>
<a <a
v-bind:href="dashboardItem.imageUrl" v-bind:href="galleryItem.imageUrl"
v-on:click.prevent.stop v-on:click.prevent.stop
><img ><img
v-if="dashboardItem.thumbnailUrl" v-if="galleryItem.thumbnailUrl"
v-bind:src="dashboardItem.thumbnailUrl" v-bind:src="galleryItem.thumbnailUrl"
class="clickable" class="clickable"
@click="showImage" @click="showImage"
/></a> /></a>
<div class="fieldValue">{{ dashboardItem.fieldValue }}</div> <div class="fieldValue">{{ galleryItem.fieldValue }}</div>
</div>` </div>`
}); });
Vue.component('navigation-bar-dashboard', { Vue.component('navigation-bar-gallery', {
props: ['dashboard'], props: ['gallery'],
methods: { methods: {
sort: function() { sort: function() {
sortTiles(); sortTiles();
}, },
abort: function() { abort: function() {
data.dashboard.toBeRendered = []; data.gallery.toBeRendered = [];
data.gallery.progress.show = false;
} }
}, },
computed: { computed: {
navigationVisible: function() { navigationVisible: function() {
return data.mode == 'dashboard'; return data.mode == 'gallery';
}, },
showProgressBar: function(){ showProgressBar: function(){
return data.dashboard.toBeRendered.length > 0; // TODO remove?
// data.gallery.toBeRendered.length > 0 &&
return data.gallery.progress.show;
}, },
percentage: function() { percentage: function() {
if (data.dashboard.progress.max > 100){ if (data.gallery.progress.max > 100){
return Math.round(10000*data.dashboard.progress.value / data.dashboard.progress.max)/100.0; return Math.round(10000*data.gallery.progress.value / data.gallery.progress.max)/100.0;
}else{ }else{
return Math.round(100*data.dashboard.progress.value / data.dashboard.progress.max); return Math.round(100*data.gallery.progress.value / data.gallery.progress.max);
} }
} }
}, },
template: ` template: `
<div id="navigation-bar-dashboard" v-if="navigationVisible"> <div id="navigation-bar-gallery" v-if="navigationVisible">
<div class="group"> <div class="group">
<label for="dashboardSortBy">Sort by:</label> <label for="gallerySortBy">Sort by:</label>
<select id="dashboardSortBy" name="dashboardSortBy" v-model="dashboard.sortBy" @change="sort"> <select id="gallerySortBy" name="gallerySortBy" v-model="gallery.sortBy" @change="sort">
<option value="DEFAULT"></option> <option value="DEFAULT"></option>
<option value="MAX_VALUE_DESC">max value desc</option> <option value="MAX_VALUE_DESC">max value desc</option>
<option value="MAX_VALUE_ASC">max value asc</option> <option value="MAX_VALUE_ASC">max value asc</option>
@@ -312,8 +315,8 @@ Vue.component('navigation-bar-dashboard', {
</div> </div>
<!-- <!--
<div class="group"> <div class="group">
<label for="dashboardFilter">Filter by:</label> <label for="galleryFilter">Filter by:</label>
<select id="dashboardFilter" name="dashboardFilter" v-model="dashboard.filter"> <select id="galleryFilter" name="galleryFilter" v-model="gallery.filter">
<option value="NONE">none</option> <option value="NONE">none</option>
<option value="HIGHER_THAN">higher</option> <option value="HIGHER_THAN">higher</option>
<option value="LOWER_THAN">lower</option> <option value="LOWER_THAN">lower</option>
@@ -327,10 +330,10 @@ Vue.component('navigation-bar-dashboard', {
</div> </div>
--> -->
<div id="dashboardControls" class="group" v-if="showProgressBar"> <div id="galleryControls" class="group" v-if="showProgressBar">
<progress <progress
v-bind:max="dashboard.progress.max" v-bind:max="gallery.progress.max"
v-bind:value="dashboard.progress.value" v-bind:value="gallery.progress.value"
v-bind:percentage="percentage" v-bind:percentage="percentage"
></progress> ></progress>
<i class="fa fa-times-circle icon-abort" title="abort" @click="abort"></i> <i class="fa fa-times-circle icon-abort" title="abort" @click="abort"></i>
@@ -505,7 +508,7 @@ Vue.component('navigation-bar', {
return data.mode != 'plot'; return data.mode != 'plot';
}, },
navigationVisible: function() { navigationVisible: function() {
return data.mode != 'dashboard'; return data.mode != 'gallery';
} }
}, },
template: ` template: `
@@ -551,9 +554,9 @@ Vue.component('search-bar', {
plotCurrent(); plotCurrent();
} }
}, },
createNewDashboard: function (event) { createNewGallery: function (event) {
data.mode = 'dashboard'; data.mode = 'gallery';
createDashboard(this); createGallery(this);
}, },
enableSplitBy: function(fieldValues) { enableSplitBy: function(fieldValues) {
data.searchBar.splitBy['field'] = data.searchBar.splitByKeys.selected; data.searchBar.splitBy['field'] = data.searchBar.splitByKeys.selected;
@@ -601,7 +604,7 @@ Vue.component('search-bar', {
var link = window.location.origin+ window.location.pathname + "?" + jQuery.param( params ); var link = window.location.origin+ window.location.pathname + "?" + jQuery.param( params );
return link; return link;
}, },
dashboardActive: function (){ galleryActive: function (){
return data.searchBar.splitByKeys.selected != ""; return data.searchBar.splitByKeys.selected != "";
} }
}, },
@@ -703,11 +706,11 @@ Vue.component('search-bar', {
v-on:click.prevent.stop="plot" v-on:click.prevent.stop="plot"
><i class="fa fa-area-chart" aria-hidden="true"></i> Plot</button> ><i class="fa fa-area-chart" aria-hidden="true"></i> Plot</button>
<button <button
id="dashboard-submit" id="gallery-submit"
title="Create Dashboard (only active if 'Split' is set)" title="Create Gallery (only active if 'Split' is set)"
:disabled="!dashboardActive" :disabled="!galleryActive"
v-on:click.prevent.stop="createNewDashboard" v-on:click.prevent.stop="createNewGallery"
><i class="fa fa-object-group" aria-hidden="true"></i> Dashboard</button> ><i class="fa fa-object-group" aria-hidden="true"></i> Gallery</button>
<a v-bind:href="permalink" v-show="permalink" title="Permanent link to the current settings." class="permalink"><i class="fa fa-sliders" aria-hidden="true"></i></a> <a v-bind:href="permalink" v-show="permalink" title="Permanent link to the current settings." class="permalink"><i class="fa fa-sliders" aria-hidden="true"></i></a>
<a v-bind:href="searchBar.imagelink" v-show="searchBar.imagelink" title="Image Link" class="permalink"><i class="fa fa-image" aria-hidden="true"></i></a> <a v-bind:href="searchBar.imagelink" v-show="searchBar.imagelink" title="Image Link" class="permalink"><i class="fa fa-image" aria-hidden="true"></i></a>
@@ -754,7 +757,7 @@ initInvaders('result');
var data = { var data = {
mode: '', // 'plot' or 'dashboard', depending on what is currently active. Initially empty. mode: '', // 'plot' or 'gallery', depending on what is currently active. Initially empty.
searchBar: { searchBar: {
query: GetURLParameter('query', 'pod=vapfinra01 and method = ViewService.findFieldViewGroup'), query: GetURLParameter('query', 'pod=vapfinra01 and method = ViewService.findFieldViewGroup'),
proposals: [], proposals: [],
@@ -786,7 +789,7 @@ var data = {
errorMessage: '', errorMessage: '',
loadingGameActive: false loadingGameActive: false
}, },
dashboard: { gallery: {
tiles: [], tiles: [],
toBeRendered: [], toBeRendered: [],
image: "", image: "",
@@ -794,7 +797,8 @@ var data = {
filter: "NONE", filter: "NONE",
progress: { progress: {
max: 0, max: 0,
value: 0 value: 0,
show: false
} }
} }
}; };
@@ -802,7 +806,7 @@ var data = {
function showLoadingIcon() function showLoadingIcon()
{ {
hidePlotAndDashboard(); hidePlotAndGallery();
data.resultView.loadingGameActive = true; data.resultView.loadingGameActive = true;
startInvaders(); startInvaders();
@@ -814,12 +818,12 @@ function hideLoadingIcon()
pauseInvaders(); pauseInvaders();
} }
function hidePlotAndDashboard() function hidePlotAndGallery()
{ {
data.resultView.imageUrl = ''; data.resultView.imageUrl = '';
data.resultView.errorMessage = ''; data.resultView.errorMessage = '';
data.dashboard.tiles = []; data.gallery.tiles = [];
data.dashboard.image = ""; data.gallery.image = "";
} }
function plotCurrent() function plotCurrent()
@@ -931,34 +935,37 @@ function updateImageLink(query) {
data.searchBar.imagelink = window.location.origin+ window.location.pathname + "plots?" + jQuery.param(params); data.searchBar.imagelink = window.location.origin+ window.location.pathname + "plots?" + jQuery.param(params);
} }
function createDashboard(vm){ function createGallery(vm){
hidePlotAndDashboard(); hidePlotAndGallery();
const imageHeight = Math.floor($('#app').height() - Math.ceil($('#search-bar').outerHeight()) - Math.ceil($('#navigation-bar').outerHeight())); const imageHeight = Math.floor($('#app').height() - Math.ceil($('#search-bar').outerHeight()) - Math.ceil($('#navigation-bar').outerHeight()));
const imageWidth = Math.floor($('#app').width()); const imageWidth = Math.floor($('#app').width());
const originalQuery = data.searchBar.query; const originalQuery = data.searchBar.query;
data.gallery.progress.show = true;
vm.splitQueries(function (fieldValues) { vm.splitQueries(function (fieldValues) {
var splitByField = data.searchBar.splitByKeys.selected; var splitByField = data.searchBar.splitByKeys.selected;
data.dashboard.toBeRendered = fieldValues; data.gallery.toBeRendered = fieldValues;
// reset progress bar // reset progress bar
data.dashboard.progress.max = fieldValues.length; data.gallery.progress.max = fieldValues.length;
data.dashboard.progress.value = 0; data.gallery.progress.value = 0;
createDashboardItem(originalQuery, splitByField, imageHeight, imageWidth); createGalleryItem(originalQuery, splitByField, imageHeight, imageWidth);
}); });
} }
function createDashboardItem(originalQuery, field, imageHeight, imageWidth) function createGalleryItem(originalQuery, field, imageHeight, imageWidth)
{ {
if (data.dashboard.toBeRendered.length > 0) { if (data.gallery.toBeRendered.length > 0) {
var fieldValue = data.dashboard.toBeRendered.pop(); var fieldValue = data.gallery.toBeRendered.pop();
const query = createQuery(originalQuery, field, fieldValue); const query = createQuery(originalQuery, field, fieldValue);
const generateThumbnail = true; const generateThumbnail = true;
const request = createRequest(query, generateThumbnail); const request = createRequest(query, generateThumbnail);
@@ -968,15 +975,15 @@ function createDashboardItem(originalQuery, field, imageHeight, imageWidth)
request['thumbnailMaxHeight'] = 200; request['thumbnailMaxHeight'] = 200;
const success = function(response){ const success = function(response){
data.dashboard.tiles.push({ data.gallery.tiles.push({
fieldValue: fieldValue, fieldValue: fieldValue,
thumbnailUrl: response.thumbnailUrl, thumbnailUrl: response.thumbnailUrl,
imageUrl: response.imageUrl, imageUrl: response.imageUrl,
stats: response.stats stats: response.stats
}); });
sortTiles(); sortTiles();
data.dashboard.progress.value++; data.gallery.progress.value++;
createDashboardItem(originalQuery, field, imageHeight, imageWidth); createGalleryItem(originalQuery, field, imageHeight, imageWidth);
}; };
const error = function(e) { const error = function(e) {
var errorMessage = ''; var errorMessage = '';
@@ -991,38 +998,40 @@ function createDashboardItem(originalQuery, field, imageHeight, imageWidth)
} }
hideLoadingIcon(); hideLoadingIcon();
if (errorMessage) { if (errorMessage) {
data.dashboard.tiles.push({ data.gallery.tiles.push({
fieldValue: fieldValue, fieldValue: fieldValue,
error: errorMessage error: errorMessage
}); });
} }
data.dashboard.progress.value++; data.gallery.progress.value++;
createDashboardItem(originalQuery, field, imageHeight, imageWidth); createGalleryItem(originalQuery, field, imageHeight, imageWidth);
}; };
var requestParam = { var requestParam = {
request: JSON.stringify(request) request: JSON.stringify(request)
}; };
getJson("plots", requestParam, success, error) getJson("plots", requestParam, success, error)
}else{
data.gallery.progress.show = false;
} }
} }
function sortTiles() { function sortTiles() {
switch (data.dashboard.sortBy) { switch (data.gallery.sortBy) {
case "DEFAULT": case "DEFAULT":
data.dashboard.tiles.sort(function(a, b){return a.fieldValue.localeCompare(b.fieldValue);}); data.gallery.tiles.sort(function(a, b){return a.fieldValue.localeCompare(b.fieldValue);});
break; break;
case "VALUES_ASC": case "VALUES_ASC":
data.dashboard.tiles.sort(function(a, b){return a.stats.values - b.stats.values;}); data.gallery.tiles.sort(function(a, b){return a.stats.values - b.stats.values;});
break; break;
case "VALUES_DESC": case "VALUES_DESC":
data.dashboard.tiles.sort(function(a, b){return b.stats.values - a.stats.values;}); data.gallery.tiles.sort(function(a, b){return b.stats.values - a.stats.values;});
break; break;
case "MAX_VALUE_ASC": case "MAX_VALUE_ASC":
data.dashboard.tiles.sort(function(a, b){return a.stats.maxValue - b.stats.maxValue;}); data.gallery.tiles.sort(function(a, b){return a.stats.maxValue - b.stats.maxValue;});
break; break;
case "MAX_VALUE_DESC": case "MAX_VALUE_DESC":
data.dashboard.tiles.sort(function(a, b){return b.stats.maxValue - a.stats.maxValue;}); data.gallery.tiles.sort(function(a, b){return b.stats.maxValue - a.stats.maxValue;});
break; break;
} }
} }

4
pdb-ui/src/main/resources/templates/main.mustache
View File

@@ -20,11 +20,11 @@
<search-bar v-bind="{ 'searchBar': searchBar }"></search-bar> <search-bar v-bind="{ 'searchBar': searchBar }"></search-bar>
<div id="navigation-bar"> <div id="navigation-bar">
<navigation-bar v-bind="{ 'searchBar': searchBar }"></navigation-bar> <navigation-bar v-bind="{ 'searchBar': searchBar }"></navigation-bar>
<navigation-bar-dashboard v-bind="{ 'dashboard': dashboard }"></navigation-bar-dashboard> <navigation-bar-gallery v-bind="{ 'gallery': gallery }"></navigation-bar-gallery>
</div> </div>
<div id="result"> <div id="result">
<result-view v-bind="{ 'searchBar': searchBar, 'resultView': resultView }"></result-view> <result-view v-bind="{ 'searchBar': searchBar, 'resultView': resultView }"></result-view>
<result-view-dashboard v-bind="{ 'dashboard': dashboard }"></result-view-dashboard> <result-view-gallery v-bind="{ 'gallery': gallery }"></result-view-gallery>
</div> </div>
</div> </div>
</body> </body>