fix(actions): show run index in run view and fix summary graph height

routers/web/devtest/mock_actions.go

@@ -85,6 +85,7 @@ func MockActionsRunsJobs(ctx *context.Context) {
 	}
 	resp := &actions.ViewResponse{}
 	resp.State.Run.RepoID = 12345
+	resp.State.Run.Index = runID
 	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.CanDeleteArtifact = true
@@ -199,17 +200,20 @@ func MockActionsRunsJobs(ctx *context.Context) {
 	resp.State.Run.CanRerunFailed = runID == 30 && isLatestAttempt
 
 	// Mock job summaries so the devtest page can preview the Summary panel rendering.
-	resp.State.Run.JobSummaries = []*actions.ViewJobSummary{
-		{
-			JobID:       runID * 10,
-			JobName:     "job 100 (testsubname)",
-			SummaryHTML: renderUtils.MarkdownToHtml("### Devtest job summary\n\n- Markdown rendering\n- Links: [example](https://example.com)\n\n```sh\necho hello\n```\n"),
-		},
-		{
-			JobID:       runID*10 + 2,
-			JobName:     "ULTRA LOOOOOOOOOOOONG job name 102 that exceeds the limit",
-			SummaryHTML: renderUtils.MarkdownToHtml("### Another summary\n\nThis demonstrates multiple job summaries in one run.\n\n- Item A\n- Item B\n"),
-		},
+	// Only some runs have summaries, so the page also exercises the "no summary" state.
+	if runID == 10 || runID == 20 {
+		resp.State.Run.JobSummaries = []*actions.ViewJobSummary{
+			{
+				JobID:       runID * 10,
+				JobName:     "job 100 (testsubname)",
+				SummaryHTML: renderUtils.MarkdownToHtml("### Devtest job summary\n\n- Markdown rendering\n- Links: [example](https://example.com)\n\n```sh\necho hello\n```\n"),
+			},
+			{
+				JobID:       runID*10 + 2,
+				JobName:     "ULTRA LOOOOOOOOOOOONG job name 102 that exceeds the limit",
+				SummaryHTML: renderUtils.MarkdownToHtml("### Another summary\n\nThis demonstrates multiple job summaries in one run.\n\n- Item A\n- Item B\n"),
+			},
+		}
 	}
 
 	resp.Artifacts = append(resp.Artifacts, &actions.ArtifactsViewItem{

routers/web/repo/actions/view.go

@@ -294,6 +294,7 @@ type ViewResponse struct {
 			// or "/owner/repo/actions/runs/123/attempts/2" for a historical attempt.
 			// Use this when the target should reflect the currently-viewed attempt.
 			ViewLink          string            `json:"viewLink"`
+			Index             int64             `json:"index"` // the per-repository run number, displayed as "#N"
 			Title             string            `json:"title"`
 			TitleHTML         template.HTML     `json:"titleHTML"`
 			Status            string            `json:"status"`
@@ -561,6 +562,7 @@ func fillViewRunResponseSummary(ctx *context_module.Context, resp *ViewResponse,
 	isLatestAttempt := run.LatestAttemptID == 0 || (attempt != nil && attempt.ID == run.LatestAttemptID)
 
 	resp.State.Run.RepoID = ctx.Repo.Repository.ID
+	resp.State.Run.Index = run.Index
 	// 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)

web_src/js/components/ActionRunView.ts

@@ -107,6 +107,7 @@ export function buildJobsByParentJobID(jobs: ActionsJob[]): Map<number, ActionsJ
 export function createEmptyActionsRun(): ActionsRun {
   return {
     repoId: 0,
+    index: 0,
     link: '',
     viewLink: '',
     title: '',

web_src/js/components/RepoActionView.vue

@@ -141,6 +141,7 @@ onBeforeUnmount(() => {
           <ActionStatusIcon :locale-status="locale.status[run.status]" :status="run.status" :size="22" icon-variant="circle-fill"/>
           <!-- eslint-disable-next-line vue/no-v-html -->
           <h2 class="action-info-summary-title-text" v-html="run.titleHTML"/>
+          <span class="action-info-summary-title-index">#{{ run.index }}</span>
         </div>
         <div class="flex-text-block tw-shrink-0 tw-flex-wrap">
           <button class="ui basic small compact button primary" @click="approveRun()" v-if="run.canApprove">
@@ -377,10 +378,15 @@ onBeforeUnmount(() => {
 .action-info-summary-title-text {
   font-size: 20px;
   margin: 0;
-  flex: 1;
   overflow-wrap: anywhere;
 }
 
+.action-info-summary-title-index {
+  font-size: 20px;
+  color: var(--color-text-light-2);
+  flex: 1;
+}
+
 .action-info-summary .ui.button {
   margin: 0;
   white-space: nowrap;
@@ -497,6 +503,7 @@ onBeforeUnmount(() => {
 }
 
 .action-view-right-panel {
+  flex: 1; /* fill the right column so the summary graph stretches even without a job-summary section */
   border: 1px solid var(--color-console-border);
   border-radius: var(--border-radius);
   background: var(--color-console-bg);
@@ -538,6 +545,7 @@ onBeforeUnmount(() => {
 }
 
 .job-summary-section {
+  flex: 0 0 auto; /* size to its content; let the summary panel keep the remaining height */
   overflow: hidden;
 }
 

web_src/js/modules/gitea-actions.ts

@@ -4,6 +4,7 @@ export type ActionsArtifactStatus = 'expired' | 'completed';
 
 export type ActionsRun = {
   repoId: number,
+  index: number,
   link: string,
   viewLink: string,
   title: string,