diff options
| -rw-r--r-- | web_src/js/components/ActionRunStatus.vue | 30 | ||||
| -rw-r--r-- | web_src/js/components/RepoActionView.vue | 21 |
2 files changed, 35 insertions, 16 deletions
diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue new file mode 100644 index 000000000..3717b6495 --- /dev/null +++ b/web_src/js/components/ActionRunStatus.vue @@ -0,0 +1,30 @@ +<template> + <SvgIcon name="octicon-check-circle-fill" class="green" :size="size" :class-name="className" v-if="status === 'success'"/> + <SvgIcon name="octicon-skip" class="ui text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/> + <SvgIcon name="octicon-clock" class="ui text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/> + <SvgIcon name="octicon-blocked" class="ui text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/> + <SvgIcon name="octicon-meter" class="ui text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/> + <SvgIcon name="octicon-x-circle-fill" class="red" :size="size" v-else/> +</template> + +<script> +import {SvgIcon} from '../svg.js'; + +export default { + components: {SvgIcon}, + props: { + status: { + type: String, + required: true + }, + size: { + type: Number, + default: 16 + }, + className: { + type: String, + default: '' + } + }, +}; +</script> diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index a5c12c754..aadc8369b 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -2,10 +2,7 @@ <div class="action-view-container"> <div class="action-view-header"> <div class="action-info-summary"> - <SvgIcon name="octicon-check-circle-fill" size="20" class="green" v-if="run.status === 'success'"/> - <SvgIcon name="octicon-clock" size="20" class="ui text yellow" v-else-if="run.status === 'waiting'"/> - <SvgIcon name="octicon-meter" size="20" class="ui text yellow" class-name="job-status-rotate" v-else-if="run.status === 'running'"/> - <SvgIcon name="octicon-x-circle-fill" size="20" class="red" v-else/> + <ActionRunStatus :status="run.status" :size="20"/> <div class="action-title"> {{ run.title }} </div> @@ -23,12 +20,7 @@ <div class="job-brief-list"> <div class="job-brief-item" v-for="(job, index) in run.jobs" :key="job.id"> <a class="job-brief-link" :href="run.link+'/jobs/'+index"> - <SvgIcon name="octicon-check-circle-fill" class="green" v-if="job.status === 'success'"/> - <SvgIcon name="octicon-skip" class="ui text grey" v-else-if="job.status === 'skipped'"/> - <SvgIcon name="octicon-clock" class="ui text yellow" v-else-if="job.status === 'waiting'"/> - <SvgIcon name="octicon-blocked" class="ui text yellow" v-else-if="job.status === 'blocked'"/> - <SvgIcon name="octicon-meter" class="ui text yellow" class-name="job-status-rotate" v-else-if="job.status === 'running'"/> - <SvgIcon name="octicon-x-circle-fill" class="red" v-else/> + <ActionRunStatus :status="job.status"/> <span class="ui text">{{ job.name }}</span> </a> <button class="job-brief-rerun" @click="rerunJob(index)" v-if="job.canRerun"> @@ -54,12 +46,7 @@ <SvgIcon name="octicon-chevron-down" class="gt-mr-3" v-show="currentJobStepsStates[i].expanded"/> <SvgIcon name="octicon-chevron-right" class="gt-mr-3" v-show="!currentJobStepsStates[i].expanded"/> - <SvgIcon name="octicon-check-circle-fill" class="green gt-mr-3" v-if="jobStep.status === 'success'"/> - <SvgIcon name="octicon-skip" class="ui text grey gt-mr-3" v-else-if="jobStep.status === 'skipped'"/> - <SvgIcon name="octicon-clock" class="ui text yellow gt-mr-3" v-else-if="jobStep.status === 'waiting'"/> - <SvgIcon name="octicon-blocked" class="ui text yellow gt-mr-3" v-else-if="jobStep.status === 'blocked'"/> - <SvgIcon name="octicon-meter" class="ui text yellow gt-mr-3" class-name="job-status-rotate" v-else-if="jobStep.status === 'running'"/> - <SvgIcon name="octicon-x-circle-fill" class="red gt-mr-3 " v-else/> + <ActionRunStatus :status="jobStep.status" class="gt-mr-3"/> <span class="step-summary-msg">{{ jobStep.summary }}</span> <span class="step-summary-dur">{{ jobStep.duration }}</span> @@ -76,6 +63,7 @@ <script> import {SvgIcon} from '../svg.js'; +import ActionRunStatus from './ActionRunStatus.vue'; import {createApp} from 'vue'; import AnsiToHTML from 'ansi-to-html'; @@ -85,6 +73,7 @@ const sfc = { name: 'RepoActionView', components: { SvgIcon, + ActionRunStatus, }, props: { runIndex: String, |