diff --git a/routers/web/devtest/mock_actions.go b/routers/web/devtest/mock_actions.go index fe12dc3079..51c13113e5 100644 --- a/routers/web/devtest/mock_actions.go +++ b/routers/web/devtest/mock_actions.go @@ -126,10 +126,10 @@ func MockActionsRunsJobs(ctx *context.Context) { resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{ ID: runID * 10, JobID: "job-100", - Name: "job 100", + Name: "job 100 (testsubname)", Status: actions_model.StatusRunning.String(), CanRerun: true, - Duration: "1h", + Duration: "1h23m45s", }) resp.State.Run.Jobs = append(resp.State.Run.Jobs, &actions.ViewJob{ ID: runID*10 + 1, diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index dbb5426ca7..9877a8fcc2 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -95,7 +95,7 @@ async function deleteArtifact(name: string) {
- + {{ locale.summary }} @@ -136,7 +136,7 @@ async function deleteArtifact(name: string) { - + {{ artifact.name }} {{ locale.artifactExpired }} diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue index 06ac1686e6..260f20f1cf 100644 --- a/web_src/js/components/WorkflowGraph.vue +++ b/web_src/js/components/WorkflowGraph.vue @@ -83,9 +83,11 @@ const saveState = () => { localUserSettings.setJsonObject(settingKeyStates, Object.fromEntries(sortedStates)); }; +const minNodeWidth = 168; +const maxNodeWidth = 232; const nodeWidth = computed(() => { - const maxNameLength = Math.max(...props.jobs.map(j => j.name.length)); - return Math.min(Math.max(140, maxNameLength * 8), 180); + const maxNameLength = Math.max(...props.jobs.map(j => j.name.length), 0); + return Math.min(Math.max(minNodeWidth, maxNameLength * 8), maxNodeWidth); }); const horizontalSpacing = computed(() => nodeWidth.value + 84); @@ -342,8 +344,8 @@ const graphMetrics = computed(() => { }; }) -const nodeHeight = 48; -const verticalSpacing = 88; +const nodeHeight = 52; +const verticalSpacing = 90; const margin = 40; const minScale = 0.3; @@ -589,7 +591,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) { :d="edge.path" fill="none" stroke="var(--color-secondary-alpha-50)" - stroke-width="1.75" + stroke-width="1.5" :class="['node-edge', { 'highlighted-edge': isEdgeHighlighted(edge) }]" /> @@ -608,10 +610,10 @@ function onNodeClick(job: JobNode, event: MouseEvent) { :y="job.y" :width="nodeWidth" :height="nodeHeight" - rx="10" - fill="var(--color-button)" - stroke="var(--color-light-border)" - stroke-width="1.25" + rx="8" + fill="var(--color-box-body)" + stroke="var(--color-secondary)" + stroke-width="1" class="job-rect" /> @@ -619,7 +621,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) { v-if="nodesWithIncomingEdge.has(job.id)" :cx="job.x" :cy="job.y + nodeHeight / 2" - r="6" + r="4.5" class="node-port" /> @@ -627,13 +629,13 @@ function onNodeClick(job: JobNode, event: MouseEvent) { v-if="nodesWithOutgoingEdge.has(job.id)" :cx="job.x + nodeWidth" :cy="job.y + nodeHeight / 2" - r="6" + r="4.5" class="node-port" />
{{ job.name }} @@ -707,7 +709,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) { .graph-container { flex: 1; overflow: hidden; - padding: 12px 16px 20px; + padding: 10px 14px 18px; border-radius: 0 0 var(--border-radius) var(--border-radius); cursor: grab; position: relative; @@ -730,7 +732,7 @@ function onNodeClick(job: JobNode, event: MouseEvent) { } .highlighted-edge { - stroke-width: 2.25 !important; + stroke-width: 2 !important; stroke: var(--color-workflow-edge-hover) !important; } @@ -749,18 +751,20 @@ function onNodeClick(job: JobNode, event: MouseEvent) { width: 100%; height: 100%; display: flex; - align-items: center; - justify-content: space-between; - gap: 4px; - padding-right: 8px; + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 1px; + padding: 4px 8px 4px 0; + overflow: hidden; } .job-name { - flex: 1; + width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: 11px; + font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--color-text); user-select: none; @@ -768,10 +772,13 @@ function onNodeClick(job: JobNode, event: MouseEvent) { } .job-duration { - font-size: 11px; + font-size: 10px; + line-height: 1.2; color: var(--color-text-light-2); white-space: nowrap; - flex-shrink: 0; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; user-select: none; pointer-events: none; } @@ -792,11 +799,13 @@ function onNodeClick(job: JobNode, event: MouseEvent) { .node-port { fill: var(--color-box-body); stroke: var(--color-light-border); - stroke-width: 1.5; + stroke-width: 1.25; + opacity: 0.85; pointer-events: none; } .node-edge { transition: stroke-width 0.2s ease, opacity 0.2s ease; + opacity: 0.75; } diff --git a/web_src/js/svg.ts b/web_src/js/svg.ts index 60c1c763d6..7f8f4c5bdf 100644 --- a/web_src/js/svg.ts +++ b/web_src/js/svg.ts @@ -32,6 +32,7 @@ import octiconFile from '../../public/assets/img/svg/octicon-file.svg'; import octiconFileCode from '../../public/assets/img/svg/octicon-file-code.svg'; import octiconFileDirectoryFill from '../../public/assets/img/svg/octicon-file-directory-fill.svg'; import octiconFileDirectoryOpenFill from '../../public/assets/img/svg/octicon-file-directory-open-fill.svg'; +import octiconFileRemoved from '../../public/assets/img/svg/octicon-file-removed.svg'; import octiconFileSubmodule from '../../public/assets/img/svg/octicon-file-submodule.svg'; import octiconFileSymlinkFile from '../../public/assets/img/svg/octicon-file-symlink-file.svg'; import octiconFilter from '../../public/assets/img/svg/octicon-filter.svg'; @@ -45,6 +46,7 @@ import octiconGitPullRequestDraft from '../../public/assets/img/svg/octicon-git- import octiconGrabber from '../../public/assets/img/svg/octicon-grabber.svg'; import octiconHeading from '../../public/assets/img/svg/octicon-heading.svg'; import octiconHorizontalRule from '../../public/assets/img/svg/octicon-horizontal-rule.svg'; +import octiconHome from '../../public/assets/img/svg/octicon-home.svg'; import octiconImage from '../../public/assets/img/svg/octicon-image.svg'; import octiconIssueClosed from '../../public/assets/img/svg/octicon-issue-closed.svg'; import octiconIssueOpened from '../../public/assets/img/svg/octicon-issue-opened.svg'; @@ -116,6 +118,7 @@ const svgs = { 'octicon-file-code': octiconFileCode, 'octicon-file-directory-fill': octiconFileDirectoryFill, 'octicon-file-directory-open-fill': octiconFileDirectoryOpenFill, + 'octicon-file-removed': octiconFileRemoved, 'octicon-file-submodule': octiconFileSubmodule, 'octicon-file-symlink-file': octiconFileSymlinkFile, 'octicon-filter': octiconFilter, @@ -129,6 +132,7 @@ const svgs = { 'octicon-grabber': octiconGrabber, 'octicon-heading': octiconHeading, 'octicon-horizontal-rule': octiconHorizontalRule, + 'octicon-home': octiconHome, 'octicon-image': octiconImage, 'octicon-issue-closed': octiconIssueClosed, 'octicon-issue-opened': octiconIssueOpened,