From ac63f48e15b92bd900f164aa49c88bbad08f907f Mon Sep 17 00:00:00 2001 From: Frank Bergkemper Date: Wed, 2 Feb 2022 14:13:49 +0100 Subject: [PATCH] webui: introduce timeline.js - move redundant JS from views to timeline.js --- webui/module/Job/view/job/job/timeline.phtml | 102 ++++-------------- .../Job/view/job/job/timelinejobs.phtml | 57 +--------- webui/public/js/timeline.js | 79 ++++++++++++++ 3 files changed, 103 insertions(+), 135 deletions(-) create mode 100644 webui/public/js/timeline.js 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 + } + }); +} +