From e5ea1e8ae3c2e820829360933303099fad22aa7c Mon Sep 17 00:00:00 2001 From: bytedream Date: Mon, 25 Mar 2024 02:41:39 +0100 Subject: [PATCH 1/6] Auto-expand running actions step --- web_src/js/components/RepoActionView.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 26dffcda9e283..b003a9125ba7b 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -247,6 +247,12 @@ const sfc = { // initial states for job steps this.currentJobStepsStates[i] = {cursor: null, expanded: false}; } + + // expands the currently running job step if its state wasn't 'running' before + if (this.currentJob.steps[i].status === 'running' && this.currentJobStepsStates[i].cursor === null) { + this.currentJobStepsStates[i].cursor = 0; + this.currentJobStepsStates[i].expanded = true; + } } // append logs to the UI for (const logs of job.logs.stepsLog) { From 233f3d6afb1482b79121438643d119dc660494a4 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sun, 22 Dec 2024 11:37:23 +0800 Subject: [PATCH 2/6] add option --- options/locale/locale_en-US.ini | 3 ++ routers/web/devtest/mock_actions.go | 15 ++++++++++ templates/devtest/repo-action-view.tmpl | 32 ++++------------------ templates/repo/actions/view.tmpl | 32 ++++------------------ templates/repo/actions/view_component.tmpl | 30 ++++++++++++++++++++ web_src/js/components/RepoActionView.vue | 15 ++++++++++ 6 files changed, 74 insertions(+), 53 deletions(-) create mode 100644 templates/repo/actions/view_component.tmpl diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 92ce4f2db9ffe..cd3bd7e969310 100644 --- a/options/locale/locale_en-US.ini +++ b/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.always_auto_expand = Always auto expand + [projects] deleted.display_name = Deleted Project type-1.display_name = Individual Project diff --git a/routers/web/devtest/mock_actions.go b/routers/web/devtest/mock_actions.go index 46e302d634a98..8419fff7ed2d0 100644 --- a/routers/web/devtest/mock_actions.go +++ b/routers/web/devtest/mock_actions.go @@ -56,6 +56,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, diff --git a/templates/devtest/repo-action-view.tmpl b/templates/devtest/repo-action-view.tmpl index 1fa71c0e5f13f..fe612886a026c 100644 --- a/templates/devtest/repo-action-view.tmpl +++ b/templates/devtest/repo-action-view.tmpl @@ -1,30 +1,10 @@ {{template "base/head" .}}
-
+ {{template "repo/header" .}} + {{template "repo/actions/view_component" (dict + "RunIndex" 1 + "JobIndex" 2 + "ActionsURL" (print AppSubUrl "/devtest/actions-mock") + )}}
{{template "base/footer" .}} diff --git a/templates/repo/actions/view.tmpl b/templates/repo/actions/view.tmpl index f7b03608eef0d..bde579f88214c 100644 --- a/templates/repo/actions/view.tmpl +++ b/templates/repo/actions/view.tmpl @@ -2,33 +2,11 @@
{{template "repo/header" .}} -
-
+ {{template "repo/actions/view_component" (dict + "RunIndex" .RunIndex + "JobIndex" .JobIndex + "ActionsURL" .ActionsURL + )}}
{{template "base/footer" .}} diff --git a/templates/repo/actions/view_component.tmpl b/templates/repo/actions/view_component.tmpl new file mode 100644 index 0000000000000..27e6ee035d267 --- /dev/null +++ b/templates/repo/actions/view_component.tmpl @@ -0,0 +1,30 @@ +
+
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index daff44bfc2a4b..b4b7c20d0c501 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -65,6 +65,8 @@ const sfc = { 'log-time-stamp': false, 'log-time-seconds': false, }, + optionAlwaysAutoExpand: false, + optionAlwaysAutoScroll: false, // provided by backend run: { @@ -399,6 +401,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'), + logsAlwaysAutoExpand: el.getAttribute('data-locale-logs-always-auto-expand'), }, }); view.mount(el); @@ -501,6 +505,17 @@ export function initRepositoryActionView() { {{ locale.showFullScreen }} + +
+ + + {{ locale.logsAlwaysAutoScroll }} + + + + {{ locale.logsAlwaysAutoExpand }} + +
From 3e84b654bd27f7e3490bf262a674954f30f29c42 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sun, 22 Dec 2024 12:06:35 +0800 Subject: [PATCH 3/6] add options --- options/locale/locale_en-US.ini | 4 +- templates/repo/actions/view_component.tmpl | 2 +- web_src/js/components/RepoActionView.vue | 49 ++++++++++++++++------ 3 files changed, 39 insertions(+), 16 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 7b6f623c73eea..aa01e8699a16a 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -3773,8 +3773,8 @@ 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.always_auto_expand = Always auto expand +logs.always_auto_scroll = Always auto scroll logs +logs.always_expand_running = Always expand running logs [projects] deleted.display_name = Deleted Project diff --git a/templates/repo/actions/view_component.tmpl b/templates/repo/actions/view_component.tmpl index 27e6ee035d267..8d1de41f701d7 100644 --- a/templates/repo/actions/view_component.tmpl +++ b/templates/repo/actions/view_component.tmpl @@ -25,6 +25,6 @@ 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-auto-expand="{{ctx.Locale.Tr "actions.logs.always_auto_expand"}}" + data-locale-logs-always-expand-running="{{ctx.Locale.Tr "actions.logs.always_expand_running"}}" >
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 493805a9447ea..5a3b61d2f46fa 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -43,6 +43,17 @@ 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 { + const optsJson = localStorage.getItem('actions-view-options'); + if (optsJson) return JSON.parse(optsJson); + return {autoScroll: true, expandRunning: false}; +} + const sfc = { name: 'RepoActionView', components: { @@ -56,7 +67,17 @@ const sfc = { locale: Object, }, + watch: { + optionAlwaysAutoScroll() { + this.saveLocaleStorageOptions(); + }, + optionAlwaysExpandRunning() { + this.saveLocaleStorageOptions(); + }, + }, + data() { + const {autoScroll, expandRunning} = getLocaleStorageOptions(); return { // internal state loadingAbortController: null, @@ -70,8 +91,8 @@ const sfc = { 'log-time-stamp': false, 'log-time-seconds': false, }, - optionAlwaysAutoExpand: false, - optionAlwaysAutoScroll: false, + optionAlwaysAutoScroll: autoScroll ?? false, + optionAlwaysExpandRunning: expandRunning ?? false, // provided by backend run: { @@ -149,6 +170,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]; @@ -230,6 +256,7 @@ const sfc = { }, shouldAutoScroll(stepIndex: number): boolean { + if (!this.optionAlwaysAutoScroll) return false; const el = this.getJobStepLogsContainer(stepIndex); if (!el.lastChild) return false; return isLogElementInViewport(el.lastChild); @@ -282,6 +309,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; @@ -291,15 +319,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}; - } - - // expands the currently running job step if its state wasn't 'running' before - if (this.currentJob.steps[i].status === 'running' && this.currentJobStepsStates[i].cursor === null) { - this.currentJobStepsStates[i].cursor = 0; - this.currentJobStepsStates[i].expanded = true; + this.currentJobStepsStates[i] = {cursor: null, expanded}; } } @@ -435,7 +458,7 @@ export function initRepositoryActionView() { blocked: el.getAttribute('data-locale-status-blocked'), }, logsAlwaysAutoScroll: el.getAttribute('data-locale-logs-always-auto-scroll'), - logsAlwaysAutoExpand: el.getAttribute('data-locale-logs-always-auto-expand'), + logsAlwaysExpandRunning: el.getAttribute('data-locale-logs-always-expand-running'), }, }); view.mount(el); @@ -544,9 +567,9 @@ export function initRepositoryActionView() { {{ locale.logsAlwaysAutoScroll }} - - - {{ locale.logsAlwaysAutoExpand }} + + + {{ locale.logsAlwaysExpandRunning }}
From 43abcc42ae0cb7e0fc86413b2793f663163814ed Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sun, 22 Dec 2024 12:13:33 +0800 Subject: [PATCH 4/6] fix mistake --- templates/devtest/repo-action-view.tmpl | 1 - 1 file changed, 1 deletion(-) diff --git a/templates/devtest/repo-action-view.tmpl b/templates/devtest/repo-action-view.tmpl index fe612886a026c..9c6bdf13daafa 100644 --- a/templates/devtest/repo-action-view.tmpl +++ b/templates/devtest/repo-action-view.tmpl @@ -1,6 +1,5 @@ {{template "base/head" .}}
- {{template "repo/header" .}} {{template "repo/actions/view_component" (dict "RunIndex" 1 "JobIndex" 2 From 32e7a13b60a0c9c853d52cee8d1456eb5efbe848 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sun, 22 Dec 2024 12:16:12 +0800 Subject: [PATCH 5/6] prevent from json error --- web_src/js/components/RepoActionView.vue | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 5a3b61d2f46fa..30e4d8c1e04f9 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -49,8 +49,11 @@ type LocaleStorageOptions = { }; function getLocaleStorageOptions(): LocaleStorageOptions { - const optsJson = localStorage.getItem('actions-view-options'); - if (optsJson) return JSON.parse(optsJson); + 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}; } From 01da8cdf2be0dc5ee3fce0ead746dc9c7430a24a Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sun, 22 Dec 2024 23:40:19 +0800 Subject: [PATCH 6/6] fine tune --- routers/web/devtest/mock_actions.go | 6 +++++- web_src/js/components/RepoActionView.vue | 3 ++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/routers/web/devtest/mock_actions.go b/routers/web/devtest/mock_actions.go index 8419fff7ed2d0..f29b8e40465a1 100644 --- a/routers/web/devtest/mock_actions.go +++ b/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)) diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 30e4d8c1e04f9..914c9e76de84a 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -261,7 +261,8 @@ 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); },