Add auto-expanding running actions step (#30058)

Auto-expands the currently running action step. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

Author: bytedream

options/locale/locale_en-US.ini

@@ -3773,6 +3773,9 @@ variables.creation.success = The variable "%s" has been added.
 variables.update.failed = Failed to edit variable.
 variables.update.success = The variable has been edited.
 
+logs.always_auto_scroll = Always auto scroll logs
+logs.always_expand_running = Always expand running logs
+
 [projects]
 deleted.display_name = Deleted Project
 type-1.display_name = Individual Project

routers/web/devtest/mock_actions.go

@@ -31,7 +31,11 @@ func generateMockStepsLog(logCur actions.LogCursor) (stepsLog []*actions.ViewSte
 "##[endgroup]",
 }
 cur := logCur.Cursor // usually the cursor is the "file offset", but here we abuse it as "line number" to make the mock easier, intentionally
-for i := 0; i < util.Iif(logCur.Step == 0, 3, 1); i++ {
+mockCount := util.Iif(logCur.Step == 0, 3, 1)
+if logCur.Step == 1 && logCur.Cursor == 0 {
+mockCount = 30 // for the first batch, return as many as possible to test the auto-expand and auto-scroll
+}
+for i := 0; i < mockCount; i++ {
 logStr := mockedLogs[int(cur)%len(mockedLogs)]
 cur++
 logStr = strings.ReplaceAll(logStr, "{step}", fmt.Sprintf("%d", logCur.Step))
@@ -56,6 +60,21 @@ func MockActionsRunsJobs(ctx *context.Context) {
 resp.State.Run.Status = actions_model.StatusRunning.String()
 resp.State.Run.CanCancel = true
 resp.State.Run.CanDeleteArtifact = true
+resp.State.Run.WorkflowID = "workflow-id"
+resp.State.Run.WorkflowLink = "./workflow-link"
+resp.State.Run.Commit = actions.ViewCommit{
+ShortSha: "ccccdddd",
+Link: "./commit-link",
+Pusher: actions.ViewUser{
+DisplayName: "pusher user",
+Link: "./pusher-link",
+},
+Branch: actions.ViewBranch{
+Name: "commit-branch",
+Link: "./branch-link",
+IsDeleted: false,
+},
+}
 resp.Artifacts = append(resp.Artifacts, &actions.ArtifactsViewItem{
 Name: "artifact-a",
 Size: 100 * 1024,

templates/devtest/repo-action-view.tmpl

@@ -1,30 +1,9 @@
 {{template "base/head" .}}
 <div class="page-content">
-<div id="repo-action-view"
-data-run-index="1"
-data-job-index="2"
-data-actions-url="{{AppSubUrl}}/devtest/actions-mock"
-data-locale-approve="approve"
-data-locale-cancel="cancel"
-data-locale-rerun="re-run"
-data-locale-rerun-all="re-run all"
-data-locale-runs-scheduled="scheduled"
-data-locale-runs-commit="commit"
-data-locale-runs-pushed-by="pushed by"
-data-locale-status-unknown="unknown"
-data-locale-status-waiting="waiting"
-data-locale-status-running="running"
-data-locale-status-success="success"
-data-locale-status-failure="failure"
-data-locale-status-cancelled="cancelled"
-data-locale-status-skipped="skipped"
-data-locale-status-blocked="blocked"
-data-locale-artifacts-title="artifacts"
-data-locale-confirm-delete-artifact="confirm delete artifact"
-data-locale-show-timestamps="show timestamps"
-data-locale-show-log-seconds="show log seconds"
-data-locale-show-full-screen="show full screen"
-data-locale-download-logs="download logs"
-></div>
+{{template "repo/actions/view_component" (dict
+"RunIndex" 1
+"JobIndex" 2
+"ActionsURL" (print AppSubUrl "/devtest/actions-mock")
+)}}
 </div>
 {{template "base/footer" .}}

templates/repo/actions/view.tmpl

@@ -2,33 +2,11 @@
 
 <div class="page-content repository">
 {{template "repo/header" .}}
-<div id="repo-action-view"
-data-run-index="{{.RunIndex}}"
-data-job-index="{{.JobIndex}}"
-data-actions-url="{{.ActionsURL}}"
-data-locale-approve="{{ctx.Locale.Tr "repo.diff.review.approve"}}"
-data-locale-cancel="{{ctx.Locale.Tr "cancel"}}"
-data-locale-rerun="{{ctx.Locale.Tr "rerun"}}"
-data-locale-rerun-all="{{ctx.Locale.Tr "rerun_all"}}"
-data-locale-runs-scheduled="{{ctx.Locale.Tr "actions.runs.scheduled"}}"
-data-locale-runs-commit="{{ctx.Locale.Tr "actions.runs.commit"}}"
-data-locale-runs-pushed-by="{{ctx.Locale.Tr "actions.runs.pushed_by"}}"
-data-locale-status-unknown="{{ctx.Locale.Tr "actions.status.unknown"}}"
-data-locale-status-waiting="{{ctx.Locale.Tr "actions.status.waiting"}}"
-data-locale-status-running="{{ctx.Locale.Tr "actions.status.running"}}"
-data-locale-status-success="{{ctx.Locale.Tr "actions.status.success"}}"
-data-locale-status-failure="{{ctx.Locale.Tr "actions.status.failure"}}"
-data-locale-status-cancelled="{{ctx.Locale.Tr "actions.status.cancelled"}}"
-data-locale-status-skipped="{{ctx.Locale.Tr "actions.status.skipped"}}"
-data-locale-status-blocked="{{ctx.Locale.Tr "actions.status.blocked"}}"
-data-locale-artifacts-title="{{ctx.Locale.Tr "artifacts"}}"
-data-locale-confirm-delete-artifact="{{ctx.Locale.Tr "confirm_delete_artifact"}}"
-data-locale-show-timestamps="{{ctx.Locale.Tr "show_timestamps"}}"
-data-locale-show-log-seconds="{{ctx.Locale.Tr "show_log_seconds"}}"
-data-locale-show-full-screen="{{ctx.Locale.Tr "show_full_screen"}}"
-data-locale-download-logs="{{ctx.Locale.Tr "download_logs"}}"
->
-</div>
+{{template "repo/actions/view_component" (dict
+"RunIndex" .RunIndex
+"JobIndex" .JobIndex
+"ActionsURL" .ActionsURL
+)}}
 </div>
 
 {{template "base/footer" .}}

templates/repo/actions/view_component.tmpl

@@ -0,0 +1,30 @@
+<div id="repo-action-view"
+data-run-index="{{.RunIndex}}"
+data-job-index="{{.JobIndex}}"
+data-actions-url="{{.ActionsURL}}"
+
+data-locale-approve="{{ctx.Locale.Tr "repo.diff.review.approve"}}"
+data-locale-cancel="{{ctx.Locale.Tr "cancel"}}"
+data-locale-rerun="{{ctx.Locale.Tr "rerun"}}"
+data-locale-rerun-all="{{ctx.Locale.Tr "rerun_all"}}"
+data-locale-runs-scheduled="{{ctx.Locale.Tr "actions.runs.scheduled"}}"
+data-locale-runs-commit="{{ctx.Locale.Tr "actions.runs.commit"}}"
+data-locale-runs-pushed-by="{{ctx.Locale.Tr "actions.runs.pushed_by"}}"
+data-locale-status-unknown="{{ctx.Locale.Tr "actions.status.unknown"}}"
+data-locale-status-waiting="{{ctx.Locale.Tr "actions.status.waiting"}}"
+data-locale-status-running="{{ctx.Locale.Tr "actions.status.running"}}"
+data-locale-status-success="{{ctx.Locale.Tr "actions.status.success"}}"
+data-locale-status-failure="{{ctx.Locale.Tr "actions.status.failure"}}"
+data-locale-status-cancelled="{{ctx.Locale.Tr "actions.status.cancelled"}}"
+data-locale-status-skipped="{{ctx.Locale.Tr "actions.status.skipped"}}"
+data-locale-status-blocked="{{ctx.Locale.Tr "actions.status.blocked"}}"
+data-locale-artifacts-title="{{ctx.Locale.Tr "artifacts"}}"
+data-locale-confirm-delete-artifact="{{ctx.Locale.Tr "confirm_delete_artifact"}}"
+data-locale-show-timestamps="{{ctx.Locale.Tr "show_timestamps"}}"
+data-locale-show-log-seconds="{{ctx.Locale.Tr "show_log_seconds"}}"
+data-locale-show-full-screen="{{ctx.Locale.Tr "show_full_screen"}}"
+data-locale-download-logs="{{ctx.Locale.Tr "download_logs"}}"
+data-locale-logs-always-auto-scroll="{{ctx.Locale.Tr "actions.logs.always_auto_scroll"}}"
+data-locale-logs-always-expand-running="{{ctx.Locale.Tr "actions.logs.always_expand_running"}}"
+>
+</div>

web_src/js/components/RepoActionView.vue

@@ -43,6 +43,20 @@ function isLogElementInViewport(el: HTMLElement): boolean {
  return rect.top >= 0 && rect.bottom <= window.innerHeight; // only check height but not width
 }
 
+type LocaleStorageOptions = {
+ autoScroll: boolean;
+ expandRunning: boolean;
+};
+
+function getLocaleStorageOptions(): LocaleStorageOptions {
+ try {
+ const optsJson = localStorage.getItem('actions-view-options');
+ if (optsJson) return JSON.parse(optsJson);
+ } catch {}
+ // if no options in localStorage, or failed to parse, return default options
+ return {autoScroll: true, expandRunning: false};
+}
+
 const sfc = {
  name: 'RepoActionView',
  components: {
@@ -56,7 +70,17 @@ const sfc = {
  locale: Object,
  },
 
+ watch: {
+ optionAlwaysAutoScroll() {
+ this.saveLocaleStorageOptions();
+ },
+ optionAlwaysExpandRunning() {
+ this.saveLocaleStorageOptions();
+ },
+ },
+
  data() {
+ const {autoScroll, expandRunning} = getLocaleStorageOptions();
  return {
  // internal state
  loadingAbortController: null,
@@ -70,6 +94,8 @@ const sfc = {
  'log-time-stamp': false,
  'log-time-seconds': false,
  },
+ optionAlwaysAutoScroll: autoScroll ?? false,
+ optionAlwaysExpandRunning: expandRunning ?? false,
 
  // provided by backend
  run: {
@@ -147,6 +173,11 @@ const sfc = {
  },
 
  methods: {
+ saveLocaleStorageOptions() {
+ const opts: LocaleStorageOptions = {autoScroll: this.optionAlwaysAutoScroll, expandRunning: this.optionAlwaysExpandRunning};
+ localStorage.setItem('actions-view-options', JSON.stringify(opts));
+ },
+
  // get the job step logs container ('.job-step-logs')
  getJobStepLogsContainer(stepIndex: number): HTMLElement {
  return this.$refs.logs[stepIndex];
@@ -228,8 +259,10 @@ const sfc = {
  },
 
  shouldAutoScroll(stepIndex: number): boolean {
+ if (!this.optionAlwaysAutoScroll) return false;
  const el = this.getJobStepLogsContainer(stepIndex);
- if (!el.lastChild) return false;
+ // if the logs container is empty, then auto-scroll if the step is expanded
+ if (!el.lastChild) return this.currentJobStepsStates[stepIndex].expanded;
  return isLogElementInViewport(el.lastChild);
  },
 
@@ -280,6 +313,7 @@ const sfc = {
  const abortController = new AbortController();
  this.loadingAbortController = abortController;
  try {
+ const isFirstLoad = !this.run.status;
  const job = await this.fetchJobData(abortController);
  if (this.loadingAbortController !== abortController) return;
 
@@ -289,9 +323,10 @@ const sfc = {
 
  // sync the currentJobStepsStates to store the job step states
  for (let i = 0; i < this.currentJob.steps.length; i++) {
+ const expanded = isFirstLoad && this.optionAlwaysExpandRunning && this.currentJob.steps[i].status === 'running';
  if (!this.currentJobStepsStates[i]) {
  // initial states for job steps
- this.currentJobStepsStates[i] = {cursor: null, expanded: false};
+ this.currentJobStepsStates[i] = {cursor: null, expanded};
  }
  }
 
@@ -426,6 +461,8 @@ export function initRepositoryActionView() {
  skipped: el.getAttribute('data-locale-status-skipped'),
  blocked: el.getAttribute('data-locale-status-blocked'),
  },
+ logsAlwaysAutoScroll: el.getAttribute('data-locale-logs-always-auto-scroll'),
+ logsAlwaysExpandRunning: el.getAttribute('data-locale-logs-always-expand-running'),
  },
  });
  view.mount(el);
@@ -528,6 +565,17 @@ export function initRepositoryActionView() {
  <i class="icon"><SvgIcon :name="isFullScreen ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
  {{ locale.showFullScreen }}
  </a>
+
+ <div class="divider"/>
+ <a class="item" @click="optionAlwaysAutoScroll = !optionAlwaysAutoScroll">
+ <i class="icon"><SvgIcon :name="optionAlwaysAutoScroll ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
+ {{ locale.logsAlwaysAutoScroll }}
+ </a>
+ <a class="item" @click="optionAlwaysExpandRunning = !optionAlwaysExpandRunning">
+ <i class="icon"><SvgIcon :name="optionAlwaysExpandRunning ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
+ {{ locale.logsAlwaysExpandRunning }}
+ </a>
+
  <div class="divider"/>
  <a :class="['item', !currentJob.steps.length ? 'disabled' : '']" :href="run.link+'/jobs/'+jobIndex+'/logs'" target="_blank">
  <i class="icon"><SvgIcon name="octicon-download"/></i>