diff --git a/webui/module/Job/view/job/job/timeline.phtml b/webui/module/Job/view/job/job/timeline.phtml
index 4288344ded8..2d2b64548c4 100644
--- a/webui/module/Job/view/job/job/timeline.phtml
+++ b/webui/module/Job/view/job/job/timeline.phtml
@@ -127,6 +127,7 @@ $this->headTitle($title);
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');
@@ -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 '
' +
'Job: ' + data.name + '' +
@@ -216,7 +217,7 @@ $this->headTitle($title);
'Start: ' + data.starttime + '' +
'End: ' + data.endtime+ '' +
'
';
- }
+ }
},
grid: {
row: {
@@ -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');
@@ -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('basePath() . '/js/locale'; ?>');
- setDtLocale('');
-
- attachClientsTable();
+ setDtTextDomain('basePath() . '/js/locale'; ?>');
+ setDtLocale('');
- // 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');
+ });
+ });
diff --git a/webui/module/Job/view/job/job/timelinejobs.phtml b/webui/module/Job/view/job/job/timelinejobs.phtml
index 602675470f9..186486135a5 100644
--- a/webui/module/Job/view/job/job/timelinejobs.phtml
+++ b/webui/module/Job/view/job/job/timelinejobs.phtml
@@ -127,6 +127,7 @@ $this->headTitle($title);
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');
@@ -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');
@@ -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('basePath() . '/js/locale'; ?>');
setDtLocale('');
diff --git a/webui/public/js/timeline.js b/webui/public/js/timeline.js
new file mode 100644
index 00000000000..f84f0905998
--- /dev/null
+++ b/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 .
+ *
+ */
+
+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
+ }
+ });
+}
+