Added running indicator to smart status. Added sockets back to templates list

This commit is contained in:
mabashian 2018-04-02 12:10:48 -04:00
parent 09801d6dab
commit 6bd6cc7fbc
4 changed files with 59 additions and 27 deletions

View File

@ -20,7 +20,9 @@ function ListTemplatesController(
Prompt,
resolvedModels,
strings,
Wait
Wait,
qs,
GetBasePath
) {
const vm = this || {};
const [jobTemplate, workflowTemplate] = resolvedModels;
@ -59,6 +61,15 @@ function ListTemplatesController(
$scope[name] = dataset.results;
});
$scope.$on(`ws-jobs`, () => {
let path = GetBasePath('unified_job_templates');
qs.search(path, $state.params.template_search)
.then(function(searchResponse) {
$scope.template_dataset = searchResponse.data;
$scope.templates = $scope.template_dataset.results;
});
});
vm.isInvalid = (template) => {
if(isJobTemplate(template)) {
return template.project === null || (template.inventory === null && template.ask_inventory_on_launch === false);
@ -319,7 +330,9 @@ ListTemplatesController.$inject = [
'Prompt',
'resolvedModels',
'TemplatesStrings',
'Wait'
'Wait',
'QuerySet',
'GetBasePath'
];
export default ListTemplatesController;

View File

@ -13,13 +13,12 @@
.SmartStatus-icon {
width: 14px;
height: 14px;
}
.SmartStatus-iconDirectionPlaceholder {
width: 14px;
height: 7px;
border: 1px solid #d7d7d7;
border: 1px solid @d7grey;
background: #f2f2f2;
}
@ -47,11 +46,10 @@
.SmartStatus-iconPlaceholder {
height: 14px;
width: 14px;
border: 1px solid #d7d7d7;
border: 1px solid @d7grey;
background: #f2f2f2;
}
.SmartStatus-tooltip--successful,
.SmartStatus-tooltip--success{
color: @default-succ;
@ -84,3 +82,26 @@
1px 1px 0 @default-bg;
.pulsate();
}
.SmartStatus-waiting {
width: 14px;
height: 14px;
border: 1px solid @d7grey;
}
@keyframes pulse_animation {
0% { transform: scale(1); }
50% { transform: scale(0); }
100% { transform: scale(1); }
}
.SmartStatus-running {
height: 14px;
width: 14px;
background-color: @default-succ;
animation-name: pulse_animation;
animation-duration: 5000ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

View File

@ -33,24 +33,16 @@ export default ['$scope', '$filter',
var sparkData =
_.sortBy(recentJobs.map(function(job) {
var data = {};
const finished = $filter('longDate')(job.finished) || job.status+"";
if (job.status === 'successful') {
data.value = 1;
data.smartStatus = "<i class=\"fa DashboardList-status SmartStatus-tooltip--success\"></i> " + job.status.toUpperCase();
} else if (isFailureState(job.status)) {
data.value = -1;
data.smartStatus = "<i class=\"fa DashboardList-status SmartStatus-tooltip--failed\"></i> " + job.status.toUpperCase();
} else {
data.value = 0;
data.smartStatus = "<i class=\"fa DashboardList-status SmartStatus-tooltip--running\"></i> " + job.status.toUpperCase();
}
data.jobId = job.id;
data.sortDate = job.finished || "running" + data.jobId;
data.finished = $filter('longDate')(job.finished) || job.status+"";
data.status_tip = "JOB ID: " + data.jobId + "<br>STATUS: " + data.smartStatus + "<br>FINISHED: " + data.finished;
data.detailsUrl = detailsBaseUrl + data.jobId;
const data = {
status: job.status,
jobId: job.id,
sortDate: job.finished || "running" + job.id,
finished: finished,
status_tip: "JOB ID: " + job.id + "<br>STATUS: " + job.status.toUpperCase() + "<br>FINISHED: " + finished,
detailsUrl: detailsBaseUrl + job.id
};
// If we've already determined that there are both failed and successful jobs OR if the current job in the loop is
// pending/waiting/running then we don't worry about checking for a single job status

View File

@ -10,14 +10,20 @@
tooltipInnerClass="SmartStatus-tooltip"
title="">
<div class="SmartStatus-icon">
<div ng-show="job.value === -1"
<div ng-show="job.status === 'new' || job.status === 'pending' || job.status === 'waiting'"
class="SmartStatus-waiting">
</div>
<div ng-show="job.status === 'running'"
class="SmartStatus-running">
</div>
<div ng-show="job.status === 'failed' || job.status === 'error' || job.status === 'canceled'"
class="SmartStatus-iconDirectionPlaceholder SmartStatus-iconDirectionPlaceholder--bottom">
</div>
<div class="SmartStatus-iconIndicator"
ng-class="{'SmartStatus-iconIndicator--success': job.value === 1,
'SmartStatus-iconIndicator--failed': job.value === -1}">
ng-class="{'SmartStatus-iconIndicator--success': job.status === 'successful',
'SmartStatus-iconIndicator--failed': (job.status === 'failed' || job.status === 'error' || job.status === 'canceled')}">
</div>
<div ng-show="job.value === 1"
<div ng-show="job.status === 'successful'"
class="SmartStatus-iconDirectionPlaceholder SmartStatus-iconDirectionPlaceholder--top">
</div>
</div>