mirrors/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-03-28 11:22:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Restyle Workflow Graph (#36912)

Browse Source 
Follow GitHub's style and fine tune colors & layouts.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Nicolas
2026-03-28 10:41:34 +01:00
committed by GitHub
parent 896e4838cb
commit b136a66d12
11 changed files with 385 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
routers/web/devtest/mock_actions.go
View File

@@ -68,6 +68,7 @@ func MockActionsRunsJobs(ctx *context.Context) {
runID := ctx.PathParamInt64("run")
resp := &actions.ViewResponse{}
resp.State.Run.RepoID = 12345
resp.State.Run.TitleHTML = `mock run title <a href="/">link</a>`
resp.State.Run.Link = setting.AppSubURL + "/devtest/repo-action-view/runs/" + strconv.FormatInt(runID, 10)
resp.State.Run.Status = actions_model.StatusRunning.String()
@@ -135,12 +136,36 @@ func MockActionsRunsJobs(ctx *context.Context) {
resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
ID: runID*10 + 2,
JobID: "job-102",
Name: "job 102",
Name: "ULTRA LOOOOOOOOOOOONG job name 102 that exceeds the limit",
Status: actions_model.StatusFailure.String(),
CanRerun: false,
Duration: "3h",
Needs: []string{"job-100", "job-101"},
})
resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
ID: runID*10 + 3,
JobID: "job-103",
Name: "job 103",
Status: actions_model.StatusCancelled.String(),
CanRerun: false,
Duration: "2m",
Needs: []string{"job-100"},
})
// add more jobs to a run for UI testing
if resp.State.Run.CanCancel {
for i := range 10 {
resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{
ID: runID*1000 + int64(i),
JobID: "job-dup-test-" + strconv.Itoa(i),
Name: "job dup test " + strconv.Itoa(i),
Status: actions_model.StatusSuccess.String(),
CanRerun: false,
Duration: "2m",
Needs: []string{"job-103", "job-101", "job-100"},
})
}
}
fillViewRunResponseCurrentJob(ctx, resp)
ctx.JSON(http.StatusOK, resp)

2
routers/web/repo/actions/view.go
View File

@@ -129,6 +129,7 @@ type ViewResponse struct {
State struct {
Run struct {
RepoID int64 `json:"repoId"`
Link string `json:"link"`
Title string `json:"title"`
TitleHTML template.HTML `json:"titleHTML"`
@@ -252,6 +253,7 @@ func fillViewRunResponseSummary(ctx *context_module.Context, resp *ViewResponse,
return
}
resp.State.Run.RepoID = ctx.Repo.Repository.ID
// the title for the "run" is from the commit message
resp.State.Run.Title = run.Title
resp.State.Run.TitleHTML = templates.NewRenderUtils(ctx).RenderCommitMessage(run.Title, ctx.Repo.Repository)

4
web_src/css/base.css
View File

@@ -808,9 +808,7 @@ table th[data-sortt-desc] .svg {
.btn,
.ui.ui.dropdown,
.flex-text-inline,
.flex-text-inline > a,
.flex-text-inline > span {
.flex-text-inline {
display: inline-flex;
align-items: center;
gap: var(--gap-inline);

2
web_src/css/themes/theme-gitea-dark.css
View File

@@ -208,7 +208,6 @@ gitea-theme-meta-info {
--color-input-toggle-background: #2e353c;
--color-input-border: var(--color-secondary-dark-1);
--color-light: #00001728;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #e8f3ff28;
--color-hover: #e8f3ff19;
--color-hover-opaque: #21252a; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
@@ -249,6 +248,7 @@ gitea-theme-meta-info {
--color-danger: var(--color-red);
--color-transparency-grid-light: #2a2a2a;
--color-transparency-grid-dark: #1a1a1a;
--color-workflow-edge-hover: #616e78;
accent-color: var(--color-accent);
color-scheme: dark;
}

2
web_src/css/themes/theme-gitea-light.css
View File

@@ -208,7 +208,6 @@ gitea-theme-meta-info {
--color-input-toggle-background: #d0d7de;
--color-input-border: var(--color-secondary-dark-1);
--color-light: #00001706;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #0000171d;
--color-hover: #00001708;
--color-hover-opaque: #f1f3f5; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
@@ -249,6 +248,7 @@ gitea-theme-meta-info {
--color-danger: var(--color-red);
--color-transparency-grid-light: #fafafa;
--color-transparency-grid-dark: #e2e2e2;
--color-workflow-edge-hover: #b1b7bd;
accent-color: var(--color-accent);
color-scheme: light;
}

39
web_src/js/components/ActionRunSummaryView.vue
View File

@@ -29,35 +29,42 @@ onBeforeUnmount(() => {
});
</script>
<template>
<div>
<div class="action-run-summary-view">
<div class="action-run-summary-block">
<p class="action-run-summary-trigger">
{{ locale.triggeredVia.replace('%s', run.triggerEvent) }}
&nbsp;•&nbsp;<relative-time :datetime="runTriggeredAtIso" prefix=" "/>
</p>
<p class="tw-mb-0">
<div class="flex-text-block">
{{ locale.triggeredVia.replace('%s', run.triggerEvent) }} • <relative-time :datetime="runTriggeredAtIso" prefix=""/>
</div>
<div class="flex-text-block">
<ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="16"/>
<span class="tw-ml-2">{{ locale.status[run.status] }}</span>
<span class="tw-ml-3">{{ locale.totalDuration }} {{ run.duration || '–' }}</span>
</p>
<span>{{ locale.status[run.status] }}</span> • <span>{{ locale.totalDuration }} {{ run.duration || '–' }}</span>
</div>
</div>
<WorkflowGraph
v-if="run.jobs.length > 0"
:store="store"
:jobs="run.jobs"
:run-link="run.link"
:workflow-id="run.workflowID"
class="workflow-graph-container"
/>
</div>
</template>
<style scoped>
.action-run-summary-block {
padding: 12px;
border-bottom: 1px solid var(--color-secondary);
.action-run-summary-view {
flex: 1;
display: flex;
flex-direction: column;
color: var(--color-text-light-1);
}
.action-run-summary-trigger {
margin-bottom: 6px;
color: var(--color-text-light-2);
.action-run-summary-block {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 12px;
border-bottom: 1px solid var(--color-secondary);
border-radius: var(--border-radius) var(--border-radius) 0 0;
background: var(--color-box-header);
}
</style>

1
web_src/js/components/ActionRunView.ts
View File

@@ -89,6 +89,7 @@ export function createLogLineMessage(line: LogLine, cmd: LogLineCommand | null)
export function createEmptyActionsRun(): ActionsRun {
return {
repoId: 0,
link: '',
title: '',
titleHTML: '',

13
web_src/js/components/RepoActionView.vue
View File

@@ -222,7 +222,11 @@ async function deleteArtifact(name: string) {
max-width: 400px;
position: sticky;
top: 12px;
max-height: 100vh;
/* about 12px top padding + 12px bottom padding + 37px footer height,
TODO: need to use JS to calculate the height for better scrolling experience*/
max-height: calc(100vh - 62px);
overflow-y: auto;
background: var(--color-body);
z-index: 2; /* above .job-info-header */
@@ -231,12 +235,13 @@ async function deleteArtifact(name: string) {
@media (max-width: 767.98px) {
.action-view-left {
position: static; /* can not sticky because multiple jobs would overlap into right view */
max-height: unset;
}
}
.left-list-header {
font-size: 12px;
color: var(--color-grey);
font-size: 13px;
color: var(--color-text-light-2);
}
.job-artifacts-item {
@@ -299,7 +304,6 @@ async function deleteArtifact(name: string) {
.job-brief-item .job-brief-item-left .job-brief-name {
display: block;
width: 70%;
}
.job-brief-item .job-brief-item-right {
@@ -320,7 +324,6 @@ async function deleteArtifact(name: string) {
border: 1px solid var(--color-console-border);
border-radius: var(--border-radius);
background: var(--color-console-bg);
align-self: flex-start;
}
/* begin fomantic button overrides */

777
web_src/js/components/WorkflowGraph.vue
View File

File diff suppressed because it is too large Load Diff

6
web_src/js/features/repo-actions.ts
View File

@@ -4,6 +4,8 @@ import RepoActionView from '../components/RepoActionView.vue';
export function initRepositoryActionView() {
const el = document.querySelector('#repo-action-view');
if (!el) return;
const runId = parseInt(el.getAttribute('data-run-id')!);
const jobId = parseInt(el.getAttribute('data-job-id')!);
// TODO: the parent element's full height doesn't work well now,
// but we can not pollute the global style at the moment, only fix the height problem for pages with this component
@@ -11,8 +13,8 @@ export function initRepositoryActionView() {
if (parentFullHeight) parentFullHeight.classList.add('tw-pb-0');
const view = createApp(RepoActionView, {
runId: parseInt(el.getAttribute('data-run-id')!),
jobId: parseInt(el.getAttribute('data-job-id')!),
runId,
jobId,
actionsUrl: el.getAttribute('data-actions-url'),
locale: {
approve: el.getAttribute('data-locale-approve'),

1
web_src/js/modules/gitea-actions.ts
View File

@@ -2,6 +2,7 @@
export type ActionsRunStatus = 'unknown' | 'waiting' | 'running' | 'success' | 'failure' | 'cancelled' | 'skipped' | 'blocked';
export type ActionsRun = {
repoId: number,
link: string,
title: string,
titleHTML: string,