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

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

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

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

@@ -20,11 +20,11 @@
<search-bar v-bind="{ 'searchBar': searchBar }"></search-bar>
<div id="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 id="result">
<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>
</body>