ynkmr/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-08-26 05:19:44 +09:00
Code Issues Projects Releases Wiki Activity

enhance(actions): Make Summary UI more beautiful with more infos (#37824)

Browse Source 
## Summary

- Redesign the Actions run summary header to follow GitHub Actions
layout: trigger info on the left, Status / Total duration / Artifacts
columns inline on the right
- Expose trigger user avatar, pull request link, and PR head branch info
from the run view API
- Update the workflow graph header to show the workflow filename (linked
to the run workflow file) and `on: <event>`, while keeping the
jobs/dependencies/success stats line
- Remove the redundant commit/workflow metadata row below the run title;
that information now lives in the summary bar

New:
<img width="1564" height="639"
src="https://github.com/user-attachments/assets/e6bc1623-c5fc-4e97-abc9-fde7f3c6aef9"
/>

Old:
<img width="2038" height="1038"
src="https://github.com/user-attachments/assets/0857f19a-8d3a-4da2-82fd-e9ebeb200062"
/>

Replaces https://github.com/go-gitea/gitea/pull/36721

---------

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
bircni
2026-06-08 18:49:06 +00:00
committed by GitHub
co-authored by Giteabot
parent e01af366e2
commit b1c088e9cf
12 changed files with 524 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_src/js/components/WorkflowGraph.vue
+30 -9
View File
@@ -30,6 +30,8 @@ const props = defineProps<{
jobs: ActionsJob[];
runLink: string;
workflowId: string;
workflowLink?: string;
triggerEvent?: string;
locale: Record<string, string>;
}>();
@@ -231,9 +233,13 @@ function onNodeClick(job: GraphNode | ActionsJob, event: MouseEvent) {
<template>
<div v-if="jobs.length > 0" class="workflow-graph">
<div class="graph-header">
<h4 class="graph-title">{{ locale.workflowDependencies }}</h4>
<div class="graph-workflow-info">
<a v-if="workflowLink" class="graph-workflow-name silenced" :href="workflowLink">{{ workflowId }}</a>
<span v-else class="graph-workflow-name">{{ workflowId }}</span>
<div v-if="triggerEvent" class="graph-workflow-trigger">on: {{ triggerEvent }}</div>
</div>
<div class="graph-stats">{{ graphStats }}</div>
<div class="flex-text-block">
<div class="flex-text-block graph-controls">
<button
type="button"
@click="zoomIn"
@@ -424,20 +430,29 @@ function onNodeClick(job: GraphNode | ActionsJob, event: MouseEvent) {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 14px;
background: var(--color-box-header);
border-bottom: 1px solid var(--color-secondary);
padding: 16px 16px 8px;
background: var(--color-console-bg);
gap: var(--gap-block);
flex-wrap: wrap;
}
.graph-title {
margin: 0;
.graph-workflow-info {
min-width: 0;
}
.graph-workflow-name {
display: block;
color: var(--color-text);
font-size: 16px;
font-weight: var(--font-weight-semibold);
flex: 1;
min-width: 200px;
line-height: 1.25;
}
.graph-workflow-trigger {
margin-top: 4px;
color: var(--color-text-light-2);
font-size: 12px;
line-height: 1.4;
}
.graph-stats {
@@ -447,6 +462,12 @@ function onNodeClick(job: GraphNode | ActionsJob, event: MouseEvent) {
color: var(--color-text-light-1);
font-size: 13px;
white-space: nowrap;
margin-left: auto;
padding: 0 16px;
}
.graph-controls {
flex-shrink: 0;
}
.graph-container {