Skip to content

Commit bcc9a50

Browse files
vogtivogti
committed
Dynamically load data in evaluation details
1 parent 84c5840 commit bcc9a50

3 files changed

Lines changed: 140 additions & 74 deletions

File tree

‎api/ui/evaluation.php‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,24 @@ public function get() {
121121
}
122122
$this->addData('plotData', $data);
123123
return;
124+
case 'jobs':
125+
$qF = new QueryFilter(Job::EVALUATION_ID, $evaluation->getId(), "=");
126+
$jobs = Factory::getJobFactory()->filter([Factory::FILTER => $qF]);
127+
$jobsData = [];
128+
foreach ($jobs as $j) {
129+
$job = new stdClass();
130+
$job->id = intval($j->getId());
131+
$job->internalId = intval($j->getInternalId());
132+
$job->description = $j->getDescription();
133+
$job->status = Define::JOB_STATUS_NAMES[$j->getStatus()];
134+
$job->progress = intval($j->getProgress());
135+
$job->phases = Util::getExecutedPhases($j->getPhases());
136+
$job->currentPhase = empty($j->getCurrentPhase()) ? "" : Define::JOB_PHASE_NAMES[$j->getCurrentPhase()];
137+
$jobsData[] = $job;
138+
}
139+
$this->addData('jobs', $jobsData);
140+
return;
141+
124142
}
125143
}
126144
$data = $evaluation->getKeyValueDict();

‎core/define.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ class Define {
3333
const JOB_STATUS_RUNNING = 2;
3434
const JOB_STATUS_FINISHED = 3;
3535

36+
const JOB_STATUS_NAMES = [ "-2" => "FAILED", "-1" => "ABORTED", "0" => "SCHEDULED", "1" => "SETUP", "2" => "RUNNING", "3" => "FINISHED" ];
37+
3638
const JOB_EXCLUDE_PHASE_PREPARE = 0b00001; // 1
3739
const JOB_EXCLUDE_PHASE_WARM_UP = 0b00010; // 2
3840
const JOB_EXCLUDE_PHASE_EXECUTE = 0b00100; // 4

‎views/evaluation/detail.php‎

Lines changed: 120 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -28,45 +28,120 @@
2828
use DBA\Job;
2929

3030
$this->includeInlineJS("
31-
function validateForm() {
32-
var isValid = true;
33-
$('.required').each(function() {
34-
if ($(this).val() === '') {
35-
isValid = false;
36-
}
37-
});
38-
return isValid;
39-
}
40-
41-
function submitData() {
42-
$.ajax({
43-
url : '/api/ui/evaluation/id=' + $('#id').val(),
44-
data : {
45-
name : $('#name').val(),
46-
description : $('#description').val()
47-
},
48-
type : 'PATCH',
49-
dataType: 'json',
50-
error: function (data) {
51-
$('#errorMessage').text('Unknown');
52-
$('#saveResultError').show();
53-
},
54-
success: function (data) {
55-
if(data.status.code == 200){
56-
$('#saveResultSuccess').show();
57-
} else {
58-
$('#errorMessage').text(data.status.message);
59-
$('#saveResultError').show();
31+
function validateForm() {
32+
var isValid = true;
33+
$('.required').each(function() {
34+
if ($(this).val() === '') {
35+
isValid = false;
6036
}
37+
});
38+
return isValid;
39+
}
40+
41+
function submitData() {
42+
$.ajax({
43+
url : '/api/ui/evaluation/id=' + $('#id').val(),
44+
data : {
45+
name : $('#name').val(),
46+
description : $('#description').val()
47+
},
48+
type : 'PATCH',
49+
dataType: 'json',
50+
error: function (data) {
51+
$('#errorMessage').text('Unknown');
52+
$('#saveResultError').show();
53+
},
54+
success: function (data) {
55+
if(data.status.code == 200){
56+
$('#saveResultSuccess').show();
57+
} else {
58+
$('#errorMessage').text(data.status.message);
59+
$('#saveResultError').show();
6160
}
62-
});
63-
}
64-
65-
jQuery(document).ready(function($) {
66-
$(\".clickable-row\").click(function() {
67-
window.document.location = $(this).data(\"href\");
68-
});
69-
});
61+
}
62+
});
63+
}
64+
65+
function fetchJobsData() {
66+
fetch('/api/ui/evaluation/id=" . $data['evaluation']->getId() . "/action=jobs')
67+
.then(response => {
68+
if (!response.ok) {
69+
throw new Error('Network response was not ok');
70+
}
71+
return response.json();
72+
})
73+
.then(data => {
74+
updateJobsTable(data.response.jobs);
75+
})
76+
.catch(error => {
77+
console.error('Error fetching jobs data:', error);
78+
});
79+
}
80+
81+
function updateJobsTable(jobs) {
82+
var tbody = document.getElementById('jobs-tbody');
83+
var loadingDiv = document.getElementById('loading');
84+
var jobsTable = document.getElementById('jobs');
85+
86+
tbody.innerHTML = ''; // Clear the table body
87+
88+
jobs.forEach(function(job) {
89+
var tr = document.createElement('tr');
90+
tr.className = 'clickable-row';
91+
tr.setAttribute('data-href', '/job/detail/id=' + job.id);
92+
tr.style.cursor = 'pointer';
93+
94+
var jobProgressHtml = '';
95+
if (job.status === 'RUNNING') {
96+
jobProgressHtml = '<span style=\"color:green;margin:0\">' +
97+
(job.currentPhase ? job.currentPhase.charAt(0).toUpperCase() + job.currentPhase.slice(1).toLowerCase() : ' ') +
98+
'</span><div style=\"margin-top:1px;\" class=\"progress progress-xs progress-xs progress-striped active\">' +
99+
'<div class=\"progress-bar progress-bar-success\" style=\"width: ' + job.progress + '%\"></div></div>';
100+
}
101+
102+
var jobStatusHtml = '';
103+
if (job.status === 'SCHEDULED') {
104+
jobStatusHtml = '<span class=\"label label-success\">scheduled</span>';
105+
} else if (job.status === 'SETUP') {
106+
jobStatusHtml = '<span class=\"label label-warning\">setup</span>';
107+
} else if (job.status === 'RUNNING') {
108+
jobStatusHtml = '<span class=\"label label-warning\">running</span>';
109+
} else if (job.status === 'FINISHED') {
110+
jobStatusHtml = '<span class=\"label label-info\">finished</span>';
111+
} else if (job.status === 'ABORTED') {
112+
jobStatusHtml = '<span class=\"label label-default\">aborted</span>';
113+
} else if (job.status === 'FAILED') {
114+
jobStatusHtml = '<span class=\"label label-danger\">failed</span>';
115+
}
116+
117+
var downloadLinkHtml = '';
118+
if (job.status === 'FINISHED') {
119+
downloadLinkHtml = '<a href=\"/uploaded_data/evaluation/' + job.id + '.zip\"><i class=\"fa fa-download\"></i></a>';
120+
}
121+
122+
tr.innerHTML = '<td>' + job.internalId + '</td>' +
123+
'<td>' + job.description + '</td>' +
124+
'<td style=\"padding: 2px 10px 2px 10px;\">' + jobProgressHtml + '</td>' +
125+
'<td>' + jobStatusHtml + '</td>' +
126+
'<td>' + downloadLinkHtml + '</td>';
127+
128+
tbody.appendChild(tr);
129+
});
130+
131+
// Hide the loading spinner and show the table
132+
loadingDiv.style.display = 'none';
133+
jobsTable.style.display = '';
134+
135+
// Make rows clickable
136+
$(\".clickable-row\").click(function() {
137+
window.document.location = $(this).data(\"href\");
138+
});
139+
}
140+
141+
// Fetch data every 10 seconds
142+
setInterval(fetchJobsData, 10000);
143+
// Fetch initial data immediately
144+
fetchJobsData();
70145
");
71146

72147
$this->includeInlineCSS("
@@ -228,7 +303,11 @@ function submitData() {
228303
<h3 class="box-title">Jobs</h3>
229304
</div>
230305
<div class="box-body">
231-
<table id="jobs" class="table table-hover">
306+
<div id="loading" style="text-align: center;">
307+
<i class="fa fa-spinner fa-spin" style="font-size: 24px;"></i>
308+
Loading...
309+
</div>
310+
<table id="jobs" class="table table-hover" style="display: none;">
232311
<thead>
233312
<tr>
234313
<th style="width: 10px;">#</th>
@@ -238,46 +317,13 @@ function submitData() {
238317
<th style="width: 10px"></th>
239318
</tr>
240319
</thead>
241-
<tbody>
242-
<?php foreach($data['jobs'] as $job) { /** @var $job Job */ ?>
243-
<tr class='clickable-row' data-href='/job/detail/id=<?php echo $job->getId(); ?>' style="cursor: pointer;">
244-
<td><?php echo $job->getInternalId(); ?></td>
245-
<td><?php echo $job->getDescription(); ?></td>
246-
<td style="padding: 2px 10px 2px 10px;">
247-
<?php if($job->getStatus() == Define::JOB_STATUS_RUNNING && $job->getProgress() > 0) { ?>
248-
<span style="color:green;margin:0"><?php echo (!empty($job->getCurrentPhase()))?ucfirst(strtolower(Define::JOB_PHASE_NAMES[$job->getCurrentPhase()])):" "; ?></span>
249-
<div style="margin-top:1px;" class="progress progress-xs progress-xs progress-striped active">
250-
<div class="progress-bar progress-bar-success" style="width: <?php echo $job->getProgress(); ?>%"></div>
251-
</div>
252-
<?php } ?>
253-
</td>
254-
<td>
255-
<?php if($job->getStatus() == Define::JOB_STATUS_SCHEDULED) { ?>
256-
<span class="label label-success">scheduled</span>
257-
<?php } else if($job->getStatus() == Define::JOB_STATUS_SETUP) { ?>
258-
<span class="label label-warning">setup</span>
259-
<?php } else if($job->getStatus() == Define::JOB_STATUS_RUNNING) { ?>
260-
<span class="label label-warning">running</span>
261-
<?php } else if($job->getStatus() == Define::JOB_STATUS_FINISHED) { ?>
262-
<span class="label label-info">finished</span>
263-
<?php } else if($job->getStatus() == Define::JOB_STATUS_ABORTED) { ?>
264-
<span class="label label-default">aborted</span>
265-
<?php } else if($job->getStatus() == Define::JOB_STATUS_FAILED) { ?>
266-
<span class="label label-danger">failed</span>
267-
<?php } ?>
268-
</td>
269-
<?php if($job->getStatus() == Define::JOB_STATUS_FINISHED) { ?>
270-
<td><a href="<?php echo UPLOADED_DATA_PATH_RELATIVE; ?>evaluation/<?php echo $job->getId(); ?>.zip"><i class="fa fa-download"></i></a></td>
271-
<?php } else { ?>
272-
<td></td>
273-
<?php } ?>
274-
</tr>
275-
<?php } ?>
320+
<tbody id="jobs-tbody">
321+
<!-- Data will be dynamically loaded here -->
276322
</tbody>
277323
</table>
278-
279324
</div>
280325
</div>
326+
281327
</div>
282328
</div>
283329
</section>

0 commit comments

Comments
 (0)