github/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2025-09-19 14:44:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

View full pipeline duration in tooltip

Browse Source
This commit is contained in:
qwerty287
2025-04-25 16:11:16 +03:00
parent 97766e0bcb
commit 38d88a7cf2
4 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/assets/locales/en.json
View File

@@ -262,7 +262,7 @@
"warnings": "Warnings", "warnings": "Warnings",
"show_errors": "Show errors", "show_errors": "Show errors",
"we_got_some_errors": "Oh no, an error occurred!", "we_got_some_errors": "Oh no, an error occurred!",
"duration": "Pipeline duration", "duration": "Pipeline duration: {duration}",
"created": "Created: {created}", "created": "Created: {created}",
"debug": { "debug": {
"title": "Debug", "title": "Debug",

6
web/src/components/repo/pipeline/PipelineItem.vue
View File

@@ -57,7 +57,7 @@
<span class="truncate">{{ pipeline.commit.slice(0, 10) }}</span> <span class="truncate">{{ pipeline.commit.slice(0, 10) }}</span>
</div> </div>
<div class="flex min-w-0 items-center space-x-2" :title="$t('repo.pipeline.duration')"> <div class="flex min-w-0 items-center space-x-2" :title="durationElapsed > 0 ? $t('repo.pipeline.duration', { duration: durationAsNumber(durationElapsed) }) : ''">
<Icon name="duration" /> <Icon name="duration" />
<span class="truncate">{{ duration }}</span> <span class="truncate">{{ duration }}</span>
</div> </div>
@@ -80,6 +80,7 @@ import ListItem from '~/components/atomic/ListItem.vue';
import { pipelineStatusColors } from '~/components/repo/pipeline/pipeline-status'; import { pipelineStatusColors } from '~/components/repo/pipeline/pipeline-status';
import PipelineRunningIcon from '~/components/repo/pipeline/PipelineRunningIcon.vue'; import PipelineRunningIcon from '~/components/repo/pipeline/PipelineRunningIcon.vue';
import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue'; import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
import { useDate } from '~/compositions/useDate';
import usePipeline from '~/compositions/usePipeline'; import usePipeline from '~/compositions/usePipeline';
import type { Pipeline } from '~/lib/api/types'; import type { Pipeline } from '~/lib/api/types';
@@ -88,9 +89,10 @@ const props = defineProps<{
}>(); }>();
const { t } = useI18n(); const { t } = useI18n();
const { durationAsNumber } = useDate()
const pipeline = toRef(props, 'pipeline'); const pipeline = toRef(props, 'pipeline');
const { since, duration, message, shortMessage, prettyRef, created } = usePipeline(pipeline); const { since, duration, durationElapsed, message, shortMessage, prettyRef, created } = usePipeline(pipeline);
const pipelineEventTitle = computed(() => { const pipelineEventTitle = computed(() => {
switch (pipeline.value.event) { switch (pipeline.value.event) {

2
web/src/compositions/usePipeline.ts
View File

@@ -115,5 +115,5 @@ export default (pipeline: Ref<Pipeline | undefined>) => {
return toLocaleString(new Date(start * 1000)); return toLocaleString(new Date(start * 1000));
}); });
return { since, duration, message, shortMessage, prTitle, prTitleWithDescription, prettyRef, created }; return { since, duration, durationElapsed, message, shortMessage, prTitle, prTitleWithDescription, prettyRef, created };
}; };

6
web/src/views/repo/pipeline/PipelineWrapper.vue
View File

@@ -66,7 +66,7 @@
<Icon name="since" /> <Icon name="since" />
<span>{{ since }}</span> <span>{{ since }}</span>
</div> </div>
<div class="flex shrink-0 items-center gap-2" :title="$t('repo.pipeline.duration')"> <div class="flex shrink-0 items-center gap-2" :title="durationElapsed > 0 ? $t('repo.pipeline.duration', { duration: durationAsNumber(durationElapsed) }) : ''">
<Icon name="duration" /> <Icon name="duration" />
<span>{{ duration }}</span> <span>{{ duration }}</span>
</div> </div>
@@ -115,6 +115,7 @@ import Tab from '~/components/layout/scaffold/Tab.vue';
import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue'; import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
import useApiClient from '~/compositions/useApiClient'; import useApiClient from '~/compositions/useApiClient';
import { useAsyncAction } from '~/compositions/useAsyncAction'; import { useAsyncAction } from '~/compositions/useAsyncAction';
import { useDate } from '~/compositions/useDate';
import { useFavicon } from '~/compositions/useFavicon'; import { useFavicon } from '~/compositions/useFavicon';
import { provide, requiredInject } from '~/compositions/useInjectProvide'; import { provide, requiredInject } from '~/compositions/useInjectProvide';
import useNotifications from '~/compositions/useNotifications'; import useNotifications from '~/compositions/useNotifications';
@@ -136,6 +137,7 @@ const favicon = useFavicon();
const i18n = useI18n(); const i18n = useI18n();
const pipelineStore = usePipelineStore(); const pipelineStore = usePipelineStore();
const { durationAsNumber } = useDate()
const pipelineId = toRef(props, 'pipelineId'); const pipelineId = toRef(props, 'pipelineId');
const _repoId = toRef(props, 'repoId'); const _repoId = toRef(props, 'repoId');
const repositoryId = computed(() => Number.parseInt(_repoId.value, 10)); const repositoryId = computed(() => Number.parseInt(_repoId.value, 10));
@@ -143,7 +145,7 @@ const repo = requiredInject('repo');
const repoPermissions = requiredInject('repo-permissions'); const repoPermissions = requiredInject('repo-permissions');
const pipeline = pipelineStore.getPipeline(repositoryId, pipelineId); const pipeline = pipelineStore.getPipeline(repositoryId, pipelineId);
const { since, duration, created, message, shortMessage } = usePipeline(pipeline); const { since, duration, durationElapsed, created, message, shortMessage } = usePipeline(pipeline);
provide('pipeline', pipeline as Ref<Pipeline>); // can't be undefined because of v-if in template provide('pipeline', pipeline as Ref<Pipeline>); // can't be undefined because of v-if in template
const pipelineConfigs = ref<PipelineConfig[]>(); const pipelineConfigs = ref<PipelineConfig[]>();