97 lines
2.2 KiB
Vue
97 lines
2.2 KiB
Vue
<template>
|
|
<StepsDetail
|
|
:showDetails="play"
|
|
:loading="$resources.play.loading"
|
|
:title="play ? play.play : ''"
|
|
:subtitle="subtitle"
|
|
:steps="steps"
|
|
/>
|
|
</template>
|
|
<script>
|
|
import StepsDetail from './StepsDetail.vue';
|
|
export default {
|
|
name: 'PlaysDetail',
|
|
props: ['playName'],
|
|
components: {
|
|
StepsDetail
|
|
},
|
|
inject: ['viewportWidth'],
|
|
resources: {
|
|
play() {
|
|
return {
|
|
url: 'jcloud.api.server.play',
|
|
params: {
|
|
play: this.playName
|
|
},
|
|
auto: Boolean(this.playName)
|
|
};
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
runningPlay: null
|
|
};
|
|
},
|
|
computed: {
|
|
play() {
|
|
return this.$resources.play.data;
|
|
},
|
|
subtitle() {
|
|
if (!this.play) return;
|
|
if (this.play.status == 'Success') {
|
|
let when = this.formatDate(this.play.creation, 'relative');
|
|
return `Completed ${when} in ${this.$formatDuration(
|
|
this.play.duration,
|
|
'hh:mm:ss'
|
|
)}`;
|
|
}
|
|
if (this.play.status == 'Undelivered') {
|
|
return 'play failed to start';
|
|
}
|
|
return null;
|
|
},
|
|
steps() {
|
|
if (!this.play) return;
|
|
return this.play.steps.map((step, index) => {
|
|
return {
|
|
name: step.task,
|
|
status: step.status,
|
|
output: step.output,
|
|
running: this.isStepRunning(step),
|
|
completed: this.isStepCompleted(step, index)
|
|
};
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$socket.emit('pg_subscribe', 'Ansible Play', this.playName);
|
|
this.$socket.on('ansible_play_update', this.onAnsiblePlayUpdate);
|
|
},
|
|
unmounted() {
|
|
this.$socket.emit('pg_unsubscribe', 'Ansible Play', this.playName);
|
|
this.$socket.off('ansible_play_update', this.onAnsiblePlayUpdate);
|
|
this.runningPlay = null;
|
|
},
|
|
methods: {
|
|
onAnsiblePlayUpdate(data) {
|
|
if (data.id === this.playName) {
|
|
this.runningPlay = data;
|
|
}
|
|
},
|
|
isStepRunning(step) {
|
|
if (!this.runningPlay) return false;
|
|
let runningStep = this.runningPlay.steps.find(
|
|
s => s.name == step.step_name
|
|
);
|
|
return runningStep?.status === 'Running';
|
|
},
|
|
isStepCompleted(step, index) {
|
|
if (this.runningPlay) {
|
|
return this.runningPlay.current.index > index;
|
|
}
|
|
return step.status === 'Success';
|
|
}
|
|
}
|
|
};
|
|
</script>
|