External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-14 04:47:44 -02:30
Code Issues Packages Projects Releases Wiki Activity

Job detail page refactor

Browse Source 
Using dictionaries rather than arrays. Filters now working. New endpoints wired in.
This commit is contained in:
Chris Houseknecht
2014-06-13 11:11:44 -04:00
parent 25abbc1c16
commit f2db52cca0
3 changed files with 208 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
awx/ui/static/js/controllers/JobDetail.js
View File

@@ -147,7 +147,7 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
if (scope.removeInitialDataLoaded) { if (scope.removeInitialDataLoaded) {
scope.removeInitialDataLoaded(); scope.removeInitialDataLoaded();
} }
scope.removeInitialDataLoaded= scope.$on('InitialDataLoaded', function() { scope.removeInitialDataLoaded = scope.$on('InitialDataLoaded', function() {
// Load data for the host summary table // Load data for the host summary table
if (!api_complete) { if (!api_complete) {
ReloadHostSummaryList({ ReloadHostSummaryList({
@@ -167,6 +167,7 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
SelectPlay({ SelectPlay({
scope: scope, scope: scope,
id: lastPlay, id: lastPlay,
callback: 'InitialDataLoaded'
}); });
}); });
@@ -181,14 +182,15 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
.success( function(data) { .success( function(data) {
data.forEach(function(event, idx) { data.forEach(function(event, idx) {
var status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'none', var status = (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'none',
start = event.start, start = event.started,
end, end,
elapsed; elapsed;
if (idx < data.results.length - 1) { if (idx < data.length - 1) {
// end date = starting date of the next event // end date = starting date of the next event
end = data.results[idx + 1].started; end = data[idx + 1].started;
} }
else if (scope.job_status.status === 'successful' || scope.job_status.status === 'failed' || scope.job_status.status === 'error' || scope.job_status.status === 'canceled') { else if (scope.job_status.status === 'successful' || scope.job_status.status === 'failed' ||
scope.job_status.status === 'error' || scope.job_status.status === 'canceled') {
// this is the last play and the job already finished // this is the last play and the job already finished
end = scope.job_status.finished; end = scope.job_status.finished;
} }
@@ -640,11 +642,8 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
} }
}; };
scope.searchSummaryHosts = function() {
};
scope.searchAllByHost = function() { scope.searchAllByHost = function() {
var nxtPlay;
if (scope.search_all_hosts_name) { if (scope.search_all_hosts_name) {
FilterAllByHostName({ FilterAllByHostName({
scope: scope, scope: scope,
@@ -656,12 +655,18 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
scope.search_all_tasks = []; scope.search_all_tasks = [];
scope.search_all_plays = []; scope.search_all_plays = [];
scope.searchAllHostsEnabled = true; scope.searchAllHostsEnabled = true;
scope.activePlay = scope.plays[scope.plays.length - 1].id; nxtPlay = scope.plays[scope.plays.length - 1].id;
setTimeout(function() { SelectPlay({
SelectPlay({ scope: scope, id: scope.activePlay }); scope: scope,
}, 2000); id: nxtPlay
});
ReloadHostSummaryList({
scope: scope
});
//setTimeout(function() {
// SelectPlay({ scope: scope, id: scope.activePlay });
//}, 2000);
} }
scope.searchSummaryHosts();
}; };
scope.allHostNameKeyPress = function(e) { scope.allHostNameKeyPress = function(e) {
@@ -671,25 +676,30 @@ function JobDetailController ($scope, $compile, $routeParams, $log, ClearScope,
}; };
scope.filterByStatus = function(choice) { scope.filterByStatus = function(choice) {
var tmp = []; var key, keys, nxtPlay;
if (choice === 'Failed') { if (choice === 'Failed') {
scope.searchAllStatus = 'failed'; scope.searchAllStatus = 'failed';
scope.plays.forEach(function(row) { for(key in scope.plays) {
if (row.status === 'failed') { if (scope.plays[key].status === 'failed') {
tmp.push(row.id); nxtPlay = key;
} }
}); }
tmp.sort();
scope.activePlay = tmp[tmp.length - 1];
} }
else { else {
scope.searchAllStatus = ''; scope.searchAllStatus = '';
scope.activePlay = scope.plays[scope.plays.length - 1].id; keys = Object.keys(scope.plays);
nxtPlay = (keys.length > 0) ? keys[keys.length - 1] : null;
} }
scope.searchSummaryHosts(); SelectPlay({
setTimeout(function() { scope: scope,
SelectPlay({ scope: scope, id: scope.activePlay }); id: nxtPlay
}, 2000); });
ReloadHostSummaryList({
scope: scope
});
//setTimeout(function() {
// SelectPlay({ scope: scope, id: scope.activePlay });
//}, 2000);
}; };
scope.viewEvent = function(event_id) { scope.viewEvent = function(event_id) {

303
awx/ui/static/js/helpers/JobDetail.js
View File

@@ -474,7 +474,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
}]) }])
// Add a new host result // Add a new host result
.factory('AddHostResult', ['FindFirstTaskofPlay', function(FindFirstTaskofPlay) { .factory('AddHostResult', ['FindFirstTaskofPlay', 'SetTaskStyles', function(FindFirstTaskofPlay, SetTaskStyles) {
return function(params) { return function(params) {
var scope = params.scope, var scope = params.scope,
task_id = params.task_id, task_id = params.task_id,
@@ -484,7 +484,7 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
created = params.created, created = params.created,
name = params.name, name = params.name,
msg = params.message, msg = params.message,
pId, diff, task, play_id, first; task, play_id, first;
if (scope.activeTask === task_id && !scope.hostResultsMap[host_id]) { if (scope.activeTask === task_id && !scope.hostResultsMap[host_id]) {
// the event applies to the currently selected task // the event applies to the currently selected task
@@ -510,30 +510,39 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
if (scope.hostResults.length > scope.hostTableRows) { if (scope.hostResults.length > scope.hostTableRows) {
scope.hostResults.splice(0,1); scope.hostResults.splice(0,1);
} }
// Refresh the map
scope.hostResultsMap = {};
scope.hostResults.forEach(function(result, idx) {
scope.hostResultsMap[result.id] = idx;
});
} }
// get the correct play_id for this event. the task_id is always correct/available, but sometimes // update the task
// the event does not have a play_id if (scope.tasks[task_id]) {
for (pId in scope.tasks) { task = scope.tasks[task_id];
if (scope.tasks[pId][task_id]) { play_id = scope.tasks[task_id].play_id;
play_id = pId;
}
}
first = FindFirstTaskofPlay({ first = FindFirstTaskofPlay({
scope: scope, scope: scope,
play_id: play_id play_id: play_id
}); });
task = scope.tasks[play_id][task_id];
if (task_id === first) {
task.hostCount += 1; task.hostCount += 1;
task.reportedHosts++;
task.failedCount += (status === 'failed' || status === 'unreachable') ? 1 : 0;
task.changedCount += (status === 'changed') ? 1 : 0;
task.successfulCount += (status === 'successful') ? 1 : 0;
task.skippedCount += (status === 'skipped') ? 1 : 0;
SetTaskStyles({ task: task });
} }
task.reportedHosts++; };
task.failedCount += (status === 'failed' || status === 'unreachable') ? 1 : 0; }])
task.changedCount += (status === 'changed') ? 1 : 0;
task.successfulCount += (status === 'successful') ? 1 : 0; .factory('SetTaskStyles', [ function() {
task.skippedCount += (status === 'skipped') ? 1 : 0; return function(params) {
var task = params.task,
diff;
task.failedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.failedCount / task.hostCount))) : 0; task.failedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.failedCount / task.hostCount))) : 0;
task.changedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.changedCount / task.hostCount))) : 0; task.changedPct = (task.hostCount > 0) ? Math.ceil((100 * (task.changedCount / task.hostCount))) : 0;
@@ -555,14 +564,10 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
task.successfulPct = task.successfulPct - diff; task.successfulPct = task.successfulPct - diff;
} }
} }
task.successfulStyle = (task.successfulPct > 0) ? { display: 'inline-block', width: task.successfulPct + '%' } : { display: 'none' }; task.successfulStyle = (task.successfulPct > 0) ? { 'display': 'inline-block', 'width': task.successfulPct + "%" } : { 'display': 'none' };
task.changedStyle = (task.changedPct > 0) ? { display: 'inline-block', width: task.changedPct + '%' } : { display: 'none' }; task.changedStyle = (task.changedPct > 0) ? { 'display': 'inline-block', 'width': task.changedPct + "%" } : { 'display': 'none' };
task.skippedStyle = (task.skippedPct > 0) ? { display: 'inline-block', width: task.skippedPct + '%' } : { display: 'none' }; task.skippedStyle = (task.skippedPct > 0) ? { 'display': 'inline-block', 'width': task.skippedPct + "%" } : { 'display': 'none' };
task.failedStyle = (task.failedPct > 0) ? { display: 'inline-block', width: task.failedPct + '%' } : { display: 'none' }; task.failedStyle = (task.failedPct > 0) ? { 'display': 'inline-block', 'width': task.failedPct + "%" } : { 'display': 'none' };
$('#' + task.id + '-' + task.play_id + '-' + 'successful-bar').css(task.successfulStyle);
$('#' + task.id + '-' + task.play_id + '-' + 'changed-bar').css(task.changedStyle);
$('#' + task.id + '-' + task.play_id + '-' + 'skipped-bar').css(task.skippedStyle);
$('#' + task.id + '-' + task.play_id + '-' + 'failed-bar').css(task.failedStyle);
}; };
}]) }])
@@ -570,93 +575,112 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
.factory('SelectPlay', ['SelectTask', 'LoadTasks', function(SelectTask, LoadTasks) { .factory('SelectPlay', ['SelectTask', 'LoadTasks', function(SelectTask, LoadTasks) {
return function(params) { return function(params) {
var scope = params.scope, var scope = params.scope,
id = params.id; id = params.id,
callback = params.callback;
if (scope.plays[scope.activePlay]) { if (scope.plays[scope.activePlay]) {
scope.plays[scope.activePlay].playActiveClass = ''; scope.plays[scope.activePlay].playActiveClass = '';
} }
scope.plays[id].playActiveClass = 'active'; if (id) {
scope.plays[id].playActiveClass = 'active';
}
scope.activePlay = id; scope.activePlay = id;
scope.activePlayName = scope.plays[id].name;
LoadTasks({ LoadTasks({
scope: scope scope: scope,
callback: callback
}); });
}; };
}]) }])
.factory('LoadTasks', ['Rest', 'ProcessErrors', 'GetElapsed', 'SelectTask', function(Rest, ProcessErrors, GetElapsed, SelectTask) { .factory('LoadTasks', ['Rest', 'ProcessErrors', 'GetElapsed', 'SelectTask', 'SetTaskStyles', function(Rest, ProcessErrors, GetElapsed, SelectTask, SetTaskStyles) {
return function(params) { return function(params) {
var scope = params.scope, var scope = params.scope,
callback = params.callback, callback = params.callback,
url = scope.job.related.job_tasks + '?parent=' + scope.activePlay + '&order_by=id'; url, tIds, lastId;
Rest.setUrl(url); if (scope.activePlay) {
Rest.get() url = scope.job.url + 'job_tasks/?event_id=' + scope.activePlay;
.success(function(data) { // job_tasks seems to ignore all query predicates other than event_id
var tIds, lastId; //+ '&';
scope.tasks = {}; //url += (scope.search_all_plays.length > 0) ? 'event_id__in=' + scope.search_all_plays.join() + '&' : '';
data.results.forEach(function(event, idx) { //url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
var end, elapsed; //url += 'order_by=id';
if (idx < data.results.length - 1) { Rest.setUrl(url);
// end date = starting date of the next event Rest.get()
end = data.results[idx + 1].created; .success(function(data) {
} scope.tasks = {};
else { data.forEach(function(event, idx) {
// no next event (task), get the end time of the play var end, elapsed;
end = scope.plays[scope.activePlay].finished; if ((!scope.searchAllStatus) || (scope.searchAllStatus === 'failed' && event.failed) &&
} ((scope.search_all_tasks.length === 0) || (scope.searchAllTasks.indexOf(event.id)))) {
if (end) {
elapsed = GetElapsed({
start: event.created,
end: end
});
}
else {
elapsed = '00:00:00';
}
scope.tasks[event.id] = { if (idx < data.length - 1) {
id: event.id, // end date = starting date of the next event
play_id: event.id, end = data[idx + 1].created;
name: event.event_display, }
status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ), else {
created: event.created, // no next event (task), get the end time of the play
modified: event.modified, end = scope.plays[scope.activePlay].finished;
finished: end, }
elapsed: elapsed,
hostCount: 0, // hostCount, if (end) {
reportedHosts: 0, elapsed = GetElapsed({
successfulCount: 0, start: event.created,
failedCount: 0, end: end
changedCount: 0, });
skippedCount: 0, }
successfulStyle: { display: 'none'}, else {
failedStyle: { display: 'none' }, elapsed = '00:00:00';
changedStyle: { display: 'none' }, }
skippedStyle: { display: 'none' },
taskActiveClass: '' scope.tasks[event.id] = {
}; id: event.id,
play_id: event.id,
name: event.name,
status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
created: event.created,
modified: event.modified,
finished: end,
elapsed: elapsed,
hostCount: event.host_count, // hostCount,
reportedHosts: event.reported_hosts,
successfulCount: event.successful_count,
failedCount: event.failed_count,
changedCount: event.changed_count,
skippedCount: event.skipped_count,
taskActiveClass: ''
};
SetTaskStyles({ task: scope.tasks[event.id] });
}
});
// set the active task
tIds = Object.keys(scope.tasks);
lastId = (tIds.length > 0) ? tIds[tIds.length - 1] : null;
SelectTask({
scope: scope,
id: lastId,
callback: callback
});
})
.error(function(data) {
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
msg: 'Call to ' + url + '. GET returned: ' + status });
}); });
}
// set the active task else {
tIds = Object.keys(scope.tasks); // set the active task
lastId = (tIds.length > 0) ? tIds[tIds.length - 1] : null; tIds = Object.keys(scope.tasks);
SelectTask({ lastId = (tIds.length > 0) ? tIds[tIds.length - 1] : null;
scope: scope, SelectTask({
id: lastId scope: scope,
}); id: lastId,
callback: callback
if (callback) {
scope.$emit(callback);
}
})
.error(function(data) {
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
msg: 'Call to ' + url + '. GET returned: ' + status });
}); });
}
}; };
}]) }])
@@ -667,15 +691,16 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
id = params.id, id = params.id,
callback = params.callback; callback = params.callback;
scope.tasks[scope.activePlay][scope.activeTask].taskActiveClass = ''; if (scope.activeTask && scope.tasks[scope.activeTask]) {
scope.tasks[scope.activePlay][id].taskActiveClass = 'active'; scope.tasks[scope.activeTask].taskActiveClass = '';
scope.activeTask = id;
scope.activeTaskName = scope.tasks[scope.activePlay][id].name;
if (callback) {
callback();
} }
if (id) {
scope.tasks[id].taskActiveClass = 'active';
scope.activeTaskName = scope.tasks[id].name;
}
scope.activeTask = id;
$('#tasks-table-detail').mCustomScrollbar("update"); $('#tasks-table-detail').mCustomScrollbar("update");
setTimeout( function() { setTimeout( function() {
scope.auto_scroll = true; scope.auto_scroll = true;
@@ -683,7 +708,8 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
}, 700); }, 700);
LoadHosts({ LoadHosts({
scope: scope scope: scope,
callback: callback
}); });
}; };
}]) }])
@@ -696,38 +722,43 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
url; url;
scope.hostResults = []; scope.hostResults = [];
scope.hostResultsMap = {}; scope.hostResultsMap = {};
// If we have a selected task, then get the list of hosts if (scope.activeTask) {
url = scope.job.related.job_events + '?parent=' + scope.activeTask + '&'; // If we have a selected task, then get the list of hosts
url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : ''; url = scope.job.related.job_events + '?parent=' + scope.activeTask + '&';
url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : ''; url += (scope.search_all_hosts_name) ? 'host__name__icontains=' + scope.search_all_hosts_name + '&' : '';
url += 'host__isnull=false&page_size=' + scope.hostTableRows + '&order_by=host__name'; url += (scope.searchAllStatus === 'failed') ? 'failed=true&' : '';
Rest.setUrl(url); url += 'host__isnull=false&page_size=' + scope.hostTableRows + '&order_by=host__name';
Rest.get() Rest.setUrl(url);
.success(function(data) { Rest.get()
data.results.forEach(function(event) { .success(function(data) {
scope.hostResults.push({ data.results.forEach(function(event) {
id: event.id, scope.hostResults.push({
status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ), id: event.id,
host_id: event.host, status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
task_id: event.parent, host_id: event.host,
name: event.event_data.host, task_id: event.parent,
created: event.created, name: event.event_data.host,
msg: ( (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' ) created: event.created,
msg: ( (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' )
});
scope.hostResultsMap[event.id] = scope.hostResults.length - 1;
}); });
scope.hostResultsMap[event.id] = scope.hostResults.length - 1; if (callback) {
scope.$emit(callback);
}
SelectHost({ scope: scope });
})
.error(function(data, status) {
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
msg: 'Call to ' + url + '. GET returned: ' + status });
}); });
SelectHost({ scope: scope }); }
if (callback) { else {
scope.$emit(callback); if (callback) {
} scope.$emit(callback);
else { }
scope.$emit('InitialDataLoaded'); SelectHost({ scope: scope });
} }
})
.error(function(data, status) {
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
msg: 'Call to ' + url + '. GET returned: ' + status });
});
}; };
}]) }])
@@ -874,6 +905,10 @@ function(UpdatePlayStatus, UpdateHostStatus, AddHostResult, SelectPlay, SelectTa
}); });
}, 500); }, 500);
} }
else {
scope.tasks = {};
scope.hostResults = [];
}
}); });
if (scope.removeAllTasksReady) { if (scope.removeAllTasksReady) {

7
awx/ui/static/partials/job_detail.html
View File

@@ -85,10 +85,9 @@
</div> </div>
<div id="tasks-table-detail" aw-custom-scroll class="table-detail"> <div id="tasks-table-detail" aw-custom-scroll class="table-detail">
<div class="row cursor-pointer" <div class="row cursor-pointer"
ng-repeat="(task_id, task) in taskList = (FilterById : search_all_tasks | filter:{ status : searchAllStatus}) track by task_id" ng-repeat="(task_id, task) in tasks track by task_id"
ng-class="task.taskActiveClass" ng-click="selectTask(task.id)"> ng-class="task.taskActiveClass" ng-click="selectTask(task.id)">
<!-- = (tasks | FilterById : search_all_tasks | filter:{ status : searchAllStatus} | filter:{ play_id: activePlay }} -->
<!-- = (tasks | FilterById : search_all_tasks | filter:{ status : searchAllStatus} | filter:{ play_id: activePlay }} -->
<div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ task.created | date: 'HH:mm:ss' }}</div> <div class="col-lg-1 col-md-1 col-sm-2 hidden-xs">{{ task.created | date: 'HH:mm:ss' }}</div>
<div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}" <div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
data-placement="top">{{ task.elapsed }} data-placement="top">{{ task.elapsed }}
@@ -101,7 +100,7 @@
<div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-m atching-hosts'">No matching hosts</div></div> <div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-m atching-hosts'">No matching hosts</div></div>
</div> </div>
</div> </div>
<div class="row" ng-show="!taskList"> <div class="row" ng-show="!tasks">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="loading-info">No tasks matched</div> <div class="loading-info">No tasks matched</div>
</div> </div>