From cff393d644ba908346c3e05e6573a461961efe2e Mon Sep 17 00:00:00 2001
From: Anbraten <6918444+anbraten@users.noreply.github.com>
Date: Sat, 13 Jul 2024 14:45:18 +0200
Subject: [PATCH] Enhance pipeline list (#3898)
Co-authored-by: 6543 <6543@obermui.de>
---
web/src/assets/locales/en.json | 13 +-
.../pipeline-feed/PipelineFeedItem.vue | 4 +-
.../components/repo/pipeline/PipelineItem.vue | 128 ++++++++++++------
web/src/compositions/usePipeline.ts | 17 +--
web/src/utils/locale.ts | 8 ++
.../views/repo/pipeline/PipelineWrapper.vue | 6 +-
6 files changed, 116 insertions(+), 60 deletions(-)
diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index d9087a016..3cf2254ca 100644
--- a/web/src/assets/locales/en.json
+++ b/web/src/assets/locales/en.json
@@ -220,6 +220,7 @@
"push": "Push",
"tag": "Tag",
"pr": "Pull Request",
+ "pr_closed": "Pull Request merged / closed",
"deploy": "Deploy",
"cron": "Cron",
"manual": "Manual",
@@ -466,5 +467,15 @@
"internal_error": "Some internal error occurred",
"registration_closed": "The registration is closed",
"access_denied": "You are not allowed to access this instance",
- "invalid_state": "The OAuth state is invalid"
+ "invalid_state": "The OAuth state is invalid",
+ "by_user": "by {user}",
+ "pushed_to": "pushed to",
+ "closed": "closed",
+ "deployed_to": "deployed to",
+ "created": "created",
+ "triggered": "triggered",
+ "pipeline_duration": "Pipeline duration",
+ "pipeline_since": "Pipeline was created {created} minutes ago",
+ "pipeline_has_warnings": "The pipeline has warnings",
+ "pipeline_has_errors": "The pipeline has errors"
}
diff --git a/web/src/components/pipeline-feed/PipelineFeedItem.vue b/web/src/components/pipeline-feed/PipelineFeedItem.vue
index eb5916b5a..936831dd0 100644
--- a/web/src/components/pipeline-feed/PipelineFeedItem.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedItem.vue
@@ -12,7 +12,7 @@
{{ repo?.owner }} / {{ repo?.name }}
- {{ title }}
+ {{ shortMessage }}
@@ -45,5 +45,5 @@ const repoStore = useRepoStore();
const pipeline = toRef(props, 'pipeline');
const repo = repoStore.getRepo(computed(() => pipeline.value.repo_id));
-const { since, duration, message, title, created } = usePipeline(pipeline);
+const { since, duration, shortMessage, message, created } = usePipeline(pipeline);
diff --git a/web/src/components/repo/pipeline/PipelineItem.vue b/web/src/components/repo/pipeline/PipelineItem.vue
index 40ee39fef..c34faa5f8 100644
--- a/web/src/components/repo/pipeline/PipelineItem.vue
+++ b/web/src/components/repo/pipeline/PipelineItem.vue
@@ -1,8 +1,8 @@
-
+
-
-
-
-
-
-
-
-
-
-
#{{ pipeline.number }}
-
-
-
-
- {{ title }}
+
+
+
+ {{ shortMessage }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ $t('pushed_to') }}
+
{{ $t('closed') }}
+
{{ $t('deployed_to') }}
+
{{ $t('created') }}
+
{{ $t('triggered') }}
+
{{ $t('triggered') }}
+
+
{{ $t('by_user', { user: pipeline.author }) }}
+
-
-
-
-
-
-
-
-
-
-
{{ prettyRef }}
+
+
+
+
+ {{ duration }}
+
+
+
+
+ {{ since }}
+
-
-
- {{ pipeline.commit.slice(0, 10) }}
-
+
+
-
-
- {{ duration }}
-
-
-
@@ -70,8 +79,10 @@
diff --git a/web/src/compositions/usePipeline.ts b/web/src/compositions/usePipeline.ts
index cd249d257..d02409fdb 100644
--- a/web/src/compositions/usePipeline.ts
+++ b/web/src/compositions/usePipeline.ts
@@ -27,7 +27,8 @@ export default (pipeline: Ref
) => {
const i18n = useI18n();
const since = computed(() => {
if (sinceRaw.value === 0) {
- return i18n.t('time.not_started');
+ // return i18n.t('time.not_started');
+ return '-';
}
if (sinceElapsed.value === undefined) {
@@ -73,15 +74,11 @@ export default (pipeline: Ref) => {
return prettyDuration(durationElapsed.value);
});
- const message = computed(() => {
- if (!pipeline.value) {
- return '';
- }
+ const message = computed(() => convertEmojis(pipeline.value?.message ?? ''));
+ const shortMessage = computed(() => message.value.split('\n')[0]);
- return convertEmojis(pipeline.value.message);
- });
-
- const title = computed(() => message.value.split('\n')[0]);
+ const prTitleWithDescription = computed(() => convertEmojis(pipeline.value?.title ?? ''));
+ const prTitle = computed(() => prTitleWithDescription.value.split('\n')[0]);
const prettyRef = computed(() => {
if (pipeline.value?.event === 'push' || pipeline.value?.event === 'deployment') {
@@ -117,5 +114,5 @@ export default (pipeline: Ref) => {
return toLocaleString(new Date(start * 1000));
});
- return { since, duration, message, title, prettyRef, created };
+ return { since, duration, message, shortMessage, prTitle, prTitleWithDescription, prettyRef, created };
};
diff --git a/web/src/utils/locale.ts b/web/src/utils/locale.ts
index 319ec8701..091a85bde 100644
--- a/web/src/utils/locale.ts
+++ b/web/src/utils/locale.ts
@@ -6,3 +6,11 @@ export function getUserLanguage(): string {
return selectedLocale;
}
+
+export function truncate(text: string, length: number): string {
+ if (text.length <= length) {
+ return text;
+ }
+
+ return `${text.slice(0, length)}...`;
+}
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index f14703164..a204bf482 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -26,7 +26,9 @@
{{ $t('repo.pipeline.pipeline', { pipelineId }) }}
-
- {{ title }}
+ {{
+ shortMessage
+ }}
@@ -138,7 +140,7 @@ if (!repo || !repoPermissions) {
}
const pipeline = pipelineStore.getPipeline(repositoryId, pipelineId);
-const { since, duration, created, message, title } = usePipeline(pipeline);
+const { since, duration, created, message, shortMessage } = usePipeline(pipeline);
provide('pipeline', pipeline);
const pipelineConfigs = ref();