github/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2025-10-25 02:21:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use Vue setup directive (#2165)

Browse Source
This commit is contained in:
qwerty287
2023-08-08 12:22:39 +02:00
committed by GitHub
parent 9cae5709f9
commit 3bdeb47d8c
26 changed files with 582 additions and 981 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
web/src/components/repo/pipeline/PipelineStepDuration.vue
View File

@@ -2,60 +2,45 @@
<span v-if="started" class="ml-auto text-sm">{{ duration }}</span>
</template>
<script lang="ts">
import { computed, defineComponent, PropType, toRef } from 'vue';
<script lang="ts" setup>
import { computed, toRef } from 'vue';
import { useElapsedTime } from '~/compositions/useElapsedTime';
import { PipelineStep, PipelineWorkflow } from '~/lib/api/types';
import { durationAsNumber } from '~/utils/duration';
export default defineComponent({
name: 'PipelineStepDuration',
const props = defineProps<{
step?: PipelineStep;
workflow?: PipelineWorkflow;
}>();
props: {
step: {
type: Object as PropType<PipelineStep>,
default: undefined,
},
const step = toRef(props, 'step');
const workflow = toRef(props, 'workflow');
workflow: {
type: Object as PropType<PipelineWorkflow>,
default: undefined,
},
},
const durationRaw = computed(() => {
const start = (step.value ? step.value?.start_time : workflow.value?.start_time) || 0;
const end = (step.value ? step.value?.end_time : workflow.value?.end_time) || 0;
setup(props) {
const step = toRef(props, 'step');
const workflow = toRef(props, 'workflow');
if (end === 0 && start === 0) {
return undefined;
}
const durationRaw = computed(() => {
const start = (step.value ? step.value?.start_time : workflow.value?.start_time) || 0;
const end = (step.value ? step.value?.end_time : workflow.value?.end_time) || 0;
if (end === 0) {
return Date.now() - start * 1000;
}
if (end === 0 && start === 0) {
return undefined;
}
if (end === 0) {
return Date.now() - start * 1000;
}
return (end - start) * 1000;
});
const running = computed(() => (step.value ? step.value?.state : workflow.value?.state) === 'running');
const { time: durationElapsed } = useElapsedTime(running, durationRaw);
const duration = computed(() => {
if (durationElapsed.value === undefined) {
return '-';
}
return durationAsNumber(durationElapsed.value || 0);
});
const started = computed(() => (step.value ? step.value?.start_time : workflow.value?.start_time) !== undefined);
return { started, duration };
},
return (end - start) * 1000;
});
const running = computed(() => (step.value ? step.value?.state : workflow.value?.state) === 'running');
const { time: durationElapsed } = useElapsedTime(running, durationRaw);
const duration = computed(() => {
if (durationElapsed.value === undefined) {
return '-';
}
return durationAsNumber(durationElapsed.value || 0);
});
const started = computed(() => (step.value ? step.value?.start_time : workflow.value?.start_time) !== undefined);
</script>