mirror of
https://github.com/go-gitea/gitea
synced 2024-12-25 23:15:34 +01:00
Add auto-expanding running actions step (#30058)
Auto-expands the currently running action step. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
bytedream
GitHub
parent
daf2776db7
commit
6279646ee4
6 changed files with 113 additions and 56 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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" .}}
|
||||
|
|
|
|||
|
|
@ -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" .}}
|
||||
|
|
|
|||
30
templates/repo/actions/view_component.tmpl
Normal file
30
templates/repo/actions/view_component.tmpl
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue