Skip to content

Commit

Permalink
webui: extend job view (job timeline)
Browse files Browse the repository at this point in the history 
- introduce nav-tabs clients and jobs
- introduce changeNoDataText function
- change wording in some places
- fix css indentation
- change modal-004 size
- adjust customized chart tooltip
  • Loading branch information
@fbergkemper
fbergkemper committed Feb 4, 2022
1 parent bbf86d3 commit 32a759d
Showing 1 changed file with 59 additions and 41 deletions.
100 changes: 59 additions & 41 deletions webui/module/Job/view/job/job/timeline.phtml
View file
Expand Up @@ -5,7 +5,7 @@
* bareos-webui - Bareos Web-Frontend
*
* @link https://github.com/bareos/bareos for the canonical source repository
* @copyright Copyright (c) 2013-2021 Bareos GmbH & Co. KG (http://www.bareos.org/)
* @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
Expand Down Expand Up @@ -41,14 +41,14 @@ $this->headTitle($title);

<!-- modal-004 start -->
<div id="modal-004" class="modal fade modal-004" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel2">
<div class="modal-dialog modal-lg">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<p><?php echo $this->translate("No client has been selected!"); ?></p>
<p><?php echo $this->translate("Please select at least one client."); ?></p>
</div>
<div class="modal-footer">
<button id="modal-004-btn-ok" type="button" class="btn btn-primary" data-dismiss="modal"><?php echo $this->translate("OK"); ?></button>
Expand All @@ -63,32 +63,48 @@ $this->headTitle($title);
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><?php echo $this->translate('Clients'); ?></h3>
<h3 class="panel-title"><?php echo $this->translate('Selection'); ?></h3>
</div>
<div class="panel-body">

<div class="col-md-11"><input id="rangeslider" style="width: 100%;"></div>
<br />

<ul class="nav nav-tabs">
<li class="active"><a href="<?php echo $this->url('job', array('action'=>'timeline')); ?>">Clients</a></li>
<li><a href="<?php echo $this->url('job', array('action'=>'timelinejobs')); ?>">Jobs</a></li>
</ul>
<br />

<div class="tab-content">

<div id="clients-tab" class="tab-pane fade in active">
<table
class="table table-no-bordered table-hover"
id="clients"
data-filter-control="true">
class="table table-no-bordered table-hover"
id="clients"
data-filter-control="true">
<thead class="bg-primary">
<th></th>
<th data-field="name"><?php echo $this->translate("Name"); ?></th>
<th></th>
<th data-field="name"><?php echo $this->translate("Name"); ?></th>
</thead>
</table>
<div id="custom-toolbar">
<br /><br />
<button id="button" class="btn btn-primary" onclick="updateChart()">Update timeline</button>
<button id="button" class="btn btn-primary" onclick="showClientChart()">Show</button>
<br /><br />
</div>
</div>

</div>

</div>
</div>
</div>

<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><?php echo $this->translate('Job timeline'); ?></h3>
<h3 class="panel-title"><?php echo $this->translate('Timeline'); ?></h3>
<ul class="list-inline panel-actions">
<li><a href="#" id="panel-fullscreen" role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
</ul>
Expand Down Expand Up @@ -134,16 +150,16 @@ $this->headTitle($title);
color:#333;
}
.panel-fullscreen {
display: block;
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
display: block;
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}
</style>

Expand All @@ -155,7 +171,7 @@ $this->headTitle($title);
var options = {
series: [],
noData: {
text: 'No data'
text: 'Please select at least one client.'
},
chart: {
height: 600,
Expand Down Expand Up @@ -194,7 +210,7 @@ $this->headTitle($title);
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>' +
'<b>Client</b>: ' + data.x + '</br>' +
'<b>Client</b>: ' + data.client + '</br>' +
'<b>Job Id</b>: ' + data.jobid + '</br>' +
'<b>Scheduled</b>: ' + data.schedtime + '</br>' +
'<b>Start</b>: ' + data.starttime + '</br>' +
Expand Down Expand Up @@ -231,26 +247,13 @@ $this->headTitle($title);
var chart = new ApexCharts(document.querySelector("#timeline-chart"), options);
chart.render();

/*
function addSeriesToChart(c, p) {
var url = "<?php echo $this->url('job', array('action' => 'getData'), null) . '?data=timeline&client=" + c + "&period='; ?>" + p;
$.getJSON(url, function(response) {
chart.appendSeries({
name: c,
data: response
});
});
}
*/

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 ...'
text: 'Loading ...',
},
xaxis: {
min: min,
Expand All @@ -266,7 +269,19 @@ $this->headTitle($title);
});
}

function updateChart() {
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 All @@ -288,9 +303,12 @@ $this->headTitle($title);
data: []
}]);

let url = "<?php echo $this->url('job', array('action' => 'getData'), null) . '?data=timeline&clients=" + s + "&period='; ?>" + p;
let url = "<?php echo $this->url('job', array('action' => 'getData'), null) . '?data=client-timeline&clients=" + s + "&period='; ?>" + p;

$.getJSON(url, function(response) {
if(response.length === 0) {
changeNoDataText(false);
}
chart.updateSeries([{
//name: 'current_selection',
data: response
Expand Down Expand Up @@ -328,7 +346,7 @@ $this->headTitle($title);
$('#clients').bootstrapTable({
locale: '<?php echo str_replace('_','-', $_SESSION['bareos']['locale']); ?>',
cookie: <?php echo $_SESSION['bareos']['dt_statesave']; ?>,
cookieIdTable: 'client_clients',
cookieIdTable: 'timeline_clients',
url: '<?php echo $this->url('client', array('action' => 'getData'), null) . '?data=all'; ?>',
method: 'get',
dataType: 'json',
Expand Down Expand Up @@ -391,7 +409,7 @@ $this->headTitle($title);

attachClientsTable();

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

Expand Down

0 comments on commit 32a759d

Please sign in to comment.