Skip to content

Commit

Permalink
webui: introduce timeline.js
Browse files Browse the repository at this point in the history
- move redundant JS from views to timeline.js
  • Loading branch information
fbergkemper committed Feb 4, 2022
1 parent 717d726 commit ac63f48
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 135 deletions.
102 changes: 23 additions & 79 deletions webui/module/Job/view/job/job/timeline.phtml
Expand Up @@ -127,6 +127,7 @@ $this->headTitle($title);
</div>

<?php
echo $this->headScript()->prependFile($this->basePath() . '/js/timeline.js');
echo $this->headScript()->prependFile($this->basePath() . '/js/apexcharts.min.js');
echo $this->headScript()->prependFile($this->basePath() . '/js/custom-functions.js');
echo $this->headLink()->prependStylesheet($this->basePath() . '/css/bootstrap-slider.min.css');
Expand Down Expand Up @@ -206,7 +207,7 @@ $this->headTitle($title);
show: true
},
tooltip: {
custom: function({series, seriesIndex, dataPointIndex, w}) {
custom: function({series, seriesIndex, dataPointIndex, w}) {
var data = w.globals.initialSeries[seriesIndex].data[dataPointIndex];
return '<div style="background: #000; color: #fff; padding: 5px 5px 5px 5px;">' +
'<b>Job</b>: ' + data.name + '</br>' +
Expand All @@ -216,7 +217,7 @@ $this->headTitle($title);
'<b>Start</b>: ' + data.starttime + '</br>' +
'<b>End</b>: ' + data.endtime+ '</br>' +
'</div>';
}
}
},
grid: {
row: {
Expand Down Expand Up @@ -247,40 +248,6 @@ $this->headTitle($title);
var chart = new ApexCharts(document.querySelector("#timeline-chart"), options);
chart.render();

function updateChartOptions(currenttime, p) {
let max = currenttime + (60 * 60 * 1000) // current timestamp + 1h
let min = currenttime - (60 * 60 * 24 * 1000) * p // current timestamp - 24h * p (period)

chart.updateOptions({
noData: {
text: 'Loading ...',
},
xaxis: {
min: min,
max: max,
},
events: {
beforeZoom: function(ctx) {
// we need to reset min/max before zoom
ctx.w.config.xaxis.min = undefined
ctx.w.config.xaxis.max = undefined
}
}
});
}

function changeNoDataText(d) {
let msg = "Loading ...";
if(!d) {
msg = "No data available";
}
chart.updateOptions({
noData: {
text: msg
}
});
}

function showClientChart() {

let selection = $('#clients').bootstrapTable('getSelections');
Expand Down Expand Up @@ -381,54 +348,31 @@ $this->headTitle($title);
});
}

var rsLabel1 = "1 " + iJS._("day");
var rsLabel2 = "3 " + iJS._("days");
var rsLabel3 = "7 " + iJS._("days");
var rsLabel4 = "14 " + iJS._("days");
var rsLabel5 = "31 " + iJS._("days");

$("#rangeslider").bootstrapSlider({
ticks: [1,3,7,14,31],
ticks_labels: [rsLabel1, rsLabel2, rsLabel3, rsLabel4, rsLabel5],
ticks_positions: [0,25,50,75,100],
step: 1,
lock_to_ticks: true,
tooltip: "hide",
handle: "round",
value: 1
});

function getSliderValue() {
let range = document.getElementById("rangeslider");
return range.value;
}

$(document).ready(function() {
setDtTextDomain('<?php echo $this->basePath() . '/js/locale'; ?>');
setDtLocale('<?php echo $_SESSION['bareos']['locale']; ?>');

attachClientsTable();
setDtTextDomain('<?php echo $this->basePath() . '/js/locale'; ?>');
setDtLocale('<?php echo $_SESSION['bareos']['locale']; ?>');

// Timeline fullscreen toggle
$("#panel-fullscreen").click(function (e) {
e.preventDefault();
attachClientsTable();

var $this = $(this);
// Timeline fullscreen toggle
$("#panel-fullscreen").click(function (e) {
e.preventDefault();

if ($this.children('i').hasClass('glyphicon-resize-full'))
{
$this.children('i').removeClass('glyphicon-resize-full');
$this.children('i').addClass('glyphicon-resize-small');
}
else if ($this.children('i').hasClass('glyphicon-resize-small'))
{
$this.children('i').removeClass('glyphicon-resize-small');
$this.children('i').addClass('glyphicon-resize-full');
}
$(this).closest('.panel').toggleClass('panel-fullscreen');
});
var $this = $(this);

});
if ($this.children('i').hasClass('glyphicon-resize-full'))
{
$this.children('i').removeClass('glyphicon-resize-full');
$this.children('i').addClass('glyphicon-resize-small');
}
else if ($this.children('i').hasClass('glyphicon-resize-small'))
{
$this.children('i').removeClass('glyphicon-resize-small');
$this.children('i').addClass('glyphicon-resize-full');
}
$(this).closest('.panel').toggleClass('panel-fullscreen');
});
});

</script>

Expand Down
57 changes: 1 addition & 56 deletions webui/module/Job/view/job/job/timelinejobs.phtml
Expand Up @@ -127,6 +127,7 @@ $this->headTitle($title);
</div>

<?php
echo $this->headScript()->prependFile($this->basePath() . '/js/timeline.js');
echo $this->headScript()->prependFile($this->basePath() . '/js/apexcharts.min.js');
echo $this->headScript()->prependFile($this->basePath() . '/js/custom-functions.js');
echo $this->headLink()->prependStylesheet($this->basePath() . '/css/bootstrap-slider.min.css');
Expand Down Expand Up @@ -247,40 +248,6 @@ $this->headTitle($title);
var chart = new ApexCharts(document.querySelector("#timeline-chart"), options);
chart.render();

function updateChartOptions(currenttime, p) {
let max = currenttime + (60 * 60 * 1000) // current timestamp + 1h
let min = currenttime - (60 * 60 * 24 * 1000) * p // current timestamp - 24h * p (period)

chart.updateOptions({
noData: {
text: 'Loading ...',
},
xaxis: {
min: min,
max: max,
},
events: {
beforeZoom: function(ctx) {
// we need to reset min/max before zoom
ctx.w.config.xaxis.min = undefined
ctx.w.config.xaxis.max = undefined
}
}
});
}

function changeNoDataText(d) {
let msg = "Loading ...";
if(!d) {
msg = "No data available";
}
chart.updateOptions({
noData: {
text: msg
}
});
}

function showJobChart() {

let selection = $('#jobs').bootstrapTable('getSelections');
Expand Down Expand Up @@ -382,28 +349,6 @@ $this->headTitle($title);
});
}

var rsLabel1 = "1 " + iJS._("day");
var rsLabel2 = "3 " + iJS._("days");
var rsLabel3 = "7 " + iJS._("days");
var rsLabel4 = "14 " + iJS._("days");
var rsLabel5 = "31 " + iJS._("days");

$("#rangeslider").bootstrapSlider({
ticks: [1,3,7,14,31],
ticks_labels: [rsLabel1, rsLabel2, rsLabel3, rsLabel4, rsLabel5],
ticks_positions: [0,25,50,75,100],
step: 1,
lock_to_ticks: true,
tooltip: "hide",
handle: "round",
value: 1
});

function getSliderValue() {
let range = document.getElementById("rangeslider");
return range.value;
}

$(document).ready(function() {
setDtTextDomain('<?php echo $this->basePath() . '/js/locale'; ?>');
setDtLocale('<?php echo $_SESSION['bareos']['locale']; ?>');
Expand Down
79 changes: 79 additions & 0 deletions webui/public/js/timeline.js
@@ -0,0 +1,79 @@
/**
*
* bareos-webui - Bareos Web-Frontend
*
* @link https://github.com/bareos/bareos for the canonical source repository
* @copyright Copyright (c) 2013-2022 Bareos GmbH & Co. KG (http://www.bareos.org/)
* @license GNU Affero General Public License (http://www.gnu.org/licenses/)
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/

var rsLabel1 = "1 " + iJS._("day");
var rsLabel2 = "3 " + iJS._("days");
var rsLabel3 = "7 " + iJS._("days");
var rsLabel4 = "14 " + iJS._("days");
var rsLabel5 = "31 " + iJS._("days");

$("#rangeslider").bootstrapSlider({
ticks: [1,3,7,14,31],
ticks_labels: [rsLabel1, rsLabel2, rsLabel3, rsLabel4, rsLabel5],
ticks_positions: [0,25,50,75,100],
step: 1,
lock_to_ticks: true,
tooltip: "hide",
handle: "round",
value: 1
});

function getSliderValue() {
let range = document.getElementById("rangeslider");
return range.value;
}

function updateChartOptions(currenttime, p) {
let max = currenttime + (60 * 60 * 1000) // current timestamp + 1h
let min = currenttime - (60 * 60 * 24 * 1000) * p // current timestamp - 24h * p (period)

chart.updateOptions({
noData: {
text: 'Loading ...',
},
xaxis: {
min: min,
max: max,
},
events: {
beforeZoom: function(ctx) {
// we need to reset min/max before zoom
ctx.w.config.xaxis.min = undefined
ctx.w.config.xaxis.max = undefined
}
}
});
}

function changeNoDataText(d) {
let msg = "Loading ...";
if(!d) {
msg = "No data available";
}
chart.updateOptions({
noData: {
text: msg
}
});
}

0 comments on commit ac63f48

Please sign in to comment.