feat(ui): Automatically refresh workflows in the "Actions" list (#7361)
- Make the "Actions" list (for example, https://codeberg.org/forgejo/forgejo/actions) dynamically refresh using htmx and partial page reloading. This addresses a pet peeve of mine, I find it common to end up on this page and have workflows in-progress, but not be able to monitor the workflows to success or failure from the page as it currently doesn't do any data refreshing. - There are a few major risks involves with this change. - Increased server-side load & network utilization. In order to mitigate this risk, I have configured the refresh to occur every 30 seconds **only** when the Page Visibility API indicates that the web page is currently visible to the end-user. It is still reasonable to assume this change will increase server-side load though. - UI interactions on the page, such as the "Actor" and "Status" dropdown and the workflow dispatch form, would be replaced from the server with non-expanded UI during the refresh. This problem is prevented by stopping the refresh while these UIs are in their expanded states. - E2E tests added. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7361 Reviewed-by: Gusted <gusted@noreply.codeberg.org> Co-authored-by: Mathieu Fenniak <mathieu@fenniak.net> Co-committed-by: Mathieu Fenniak <mathieu@fenniak.net>
This commit is contained in:
Mathieu Fenniak
Gusted
parent
c977585e4c
commit
6ad706aa88
4 changed files with 271 additions and 99 deletions
|
|
@ -4,89 +4,38 @@
|
|||
<div class="ui container">
|
||||
{{template "base/alert" .}}
|
||||
|
||||
{{if .HasWorkflowsOrRuns}}
|
||||
<div class="ui stackable grid">
|
||||
<div class="four wide column">
|
||||
<div class="ui fluid vertical menu">
|
||||
<a class="item{{if not $.CurWorkflow}} active{{end}}" href="?actor={{$.CurActor}}&status={{$.CurStatus}}">{{ctx.Locale.Tr "actions.runs.all_workflows"}}</a>
|
||||
{{range .workflows}}
|
||||
<a class="item{{if eq .Entry.Name $.CurWorkflow}} active{{end}}" href="?workflow={{.Entry.Name}}&actor={{$.CurActor}}&status={{$.CurStatus}}">{{.Entry.Name}}
|
||||
{{if .ErrMsg}}
|
||||
<span data-tooltip-content="{{.ErrMsg}}">
|
||||
{{svg "octicon-alert" 16 "text red"}}
|
||||
</span>
|
||||
{{end}}
|
||||
|
||||
{{if $.ActionsConfig.IsWorkflowDisabled .Entry.Name}}
|
||||
<div class="ui red label">{{ctx.Locale.Tr "disabled"}}</div>
|
||||
{{end}}
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="twelve wide column content">
|
||||
<div class="ui secondary filter menu tw-justify-end tw-flex tw-items-center">
|
||||
<!-- Actor -->
|
||||
<div class="ui{{if not .Actors}} disabled{{end}} dropdown jump item">
|
||||
<span class="text">{{ctx.Locale.Tr "actions.runs.actor"}}</span>
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
<div class="menu">
|
||||
<div class="ui icon search input">
|
||||
<i class="icon">{{svg "octicon-search"}}</i>
|
||||
<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.actor"}}">
|
||||
</div>
|
||||
<a class="item{{if not $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&status={{$.CurStatus}}&actor=0">
|
||||
{{ctx.Locale.Tr "actions.runs.actors_no_select"}}
|
||||
</a>
|
||||
{{range .Actors}}
|
||||
<a class="item{{if eq .ID $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{.ID}}&status={{$.CurStatus}}">
|
||||
{{ctx.AvatarUtils.Avatar . 20}} {{.GetDisplayName}}
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Status -->
|
||||
<div class="ui dropdown jump item">
|
||||
<span class="text">{{ctx.Locale.Tr "actions.runs.status"}}</span>
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
<div class="menu">
|
||||
<div class="ui icon search input">
|
||||
<i class="icon">{{svg "octicon-search"}}</i>
|
||||
<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.status"}}">
|
||||
</div>
|
||||
<a class="item{{if not $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status=0">
|
||||
{{ctx.Locale.Tr "actions.runs.status_no_select"}}
|
||||
</a>
|
||||
{{range .StatusInfoList}}
|
||||
<a class="item{{if eq .Status $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status={{.Status}}">
|
||||
{{.DisplayedStatus}}
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if .AllowDisableOrEnableWorkflow}}
|
||||
<button class="ui jump dropdown btn interact-bg tw-p-2">
|
||||
{{svg "octicon-kebab-horizontal"}}
|
||||
<div class="menu">
|
||||
<a class="item link-action" data-url="{{$.Link}}/{{if .CurWorkflowDisabled}}enable{{else}}disable{{end}}?workflow={{$.CurWorkflow}}&actor={{.CurActor}}&status={{$.CurStatus}}">
|
||||
{{if .CurWorkflowDisabled}}{{ctx.Locale.Tr "actions.workflow.enable"}}{{else}}{{ctx.Locale.Tr "actions.workflow.disable"}}{{end}}
|
||||
</a>
|
||||
</div>
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
{{if $.CurWorkflowDispatch}}
|
||||
{{template "repo/actions/dispatch" .}}
|
||||
{{end}}
|
||||
|
||||
{{template "repo/actions/runs_list" .}}
|
||||
</div>
|
||||
{{/* Refresh the list every interval (30s) unless the document isn't visible or a dropdown is open; refresh
|
||||
if visibility changes as well. simulate-polling-interval is a custom event used for e2e tests to mimic
|
||||
the polling interval and should be defined identically to the `every` clause for accurate testing. */}}
|
||||
<div
|
||||
hx-get="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status={{$.CurStatus}}&page={{$.Page.Paginater.Current}}&list_inner=true"
|
||||
hx-swap="morph:innerHTML"
|
||||
hx-trigger="every 30s [pollingOk()], visibilitychange[document.visibilityState === 'visible'] from:document, simulate-polling-interval[pollingOk()] from:document"
|
||||
hx-indicator="#reloading-indicator">
|
||||
{{template "repo/actions/list_inner" .}}
|
||||
</div>
|
||||
{{else}}
|
||||
{{template "repo/actions/no_workflows" .}}
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function pollingOk() {
|
||||
return document.visibilityState === 'visible' && noActiveDropdowns();
|
||||
}
|
||||
|
||||
// Intent: If the "Actor" or "Status" dropdowns are currently open and being navigated, or the workflow dispatch
|
||||
// dropdown form is open, the htmx refresh would replace them with closed dropdowns. Instead this prevents the list
|
||||
// refresh from occurring while those dropdowns are open.
|
||||
//
|
||||
// Can't inline this into the `hx-trigger` above because using a left-brace ('[') breaks htmx's trigger parsing.
|
||||
function noActiveDropdowns() {
|
||||
if (document.querySelector('[aria-expanded=true]') !== null)
|
||||
return false;
|
||||
const dropdownForm = document.querySelector('#branch-dropdown-form');
|
||||
if (dropdownForm !== null && dropdownForm.checkVisibility())
|
||||
return false;
|
||||
return true;
|
||||
}
|
||||
</script>
|
||||
|
||||
{{template "base/footer" .}}
|
||||
|
|
|
|||
85
templates/repo/actions/list_inner.tmpl
Normal file
85
templates/repo/actions/list_inner.tmpl
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
{{if .HasWorkflowsOrRuns}}
|
||||
<div class="ui stackable grid">
|
||||
<div class="four wide column">
|
||||
<div class="ui fluid vertical menu">
|
||||
<a class="item{{if not $.CurWorkflow}} active{{end}}" href="?actor={{$.CurActor}}&status={{$.CurStatus}}">{{ctx.Locale.Tr "actions.runs.all_workflows"}}</a>
|
||||
{{range .workflows}}
|
||||
<a class="item{{if eq .Entry.Name $.CurWorkflow}} active{{end}}" href="?workflow={{.Entry.Name}}&actor={{$.CurActor}}&status={{$.CurStatus}}">{{.Entry.Name}}
|
||||
{{if .ErrMsg}}
|
||||
<span data-tooltip-content="{{.ErrMsg}}">
|
||||
{{svg "octicon-alert" 16 "text red"}}
|
||||
</span>
|
||||
{{end}}
|
||||
|
||||
{{if $.ActionsConfig.IsWorkflowDisabled .Entry.Name}}
|
||||
<div class="ui red label">{{ctx.Locale.Tr "disabled"}}</div>
|
||||
{{end}}
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="twelve wide column content">
|
||||
<div class="ui secondary filter menu tw-justify-end tw-flex tw-items-center">
|
||||
<div id="reloading-indicator" class="htmx-indicator"></div>
|
||||
|
||||
<!-- Actor -->
|
||||
<div id="actor_dropdown" class="ui{{if not .Actors}} disabled{{end}} dropdown jump item">
|
||||
<span class="text">{{ctx.Locale.Tr "actions.runs.actor"}}</span>
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
<div class="menu">
|
||||
<div class="ui icon search input">
|
||||
<i class="icon">{{svg "octicon-search"}}</i>
|
||||
<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.actor"}}">
|
||||
</div>
|
||||
<a class="item{{if not $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&status={{$.CurStatus}}&actor=0">
|
||||
{{ctx.Locale.Tr "actions.runs.actors_no_select"}}
|
||||
</a>
|
||||
{{range .Actors}}
|
||||
<a class="item{{if eq .ID $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{.ID}}&status={{$.CurStatus}}">
|
||||
{{ctx.AvatarUtils.Avatar . 20}} {{.GetDisplayName}}
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Status -->
|
||||
<div id="status_dropdown" class="ui dropdown jump item">
|
||||
<span class="text">{{ctx.Locale.Tr "actions.runs.status"}}</span>
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
<div class="menu">
|
||||
<div class="ui icon search input">
|
||||
<i class="icon">{{svg "octicon-search"}}</i>
|
||||
<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.status"}}">
|
||||
</div>
|
||||
<a class="item{{if not $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status=0">
|
||||
{{ctx.Locale.Tr "actions.runs.status_no_select"}}
|
||||
</a>
|
||||
{{range .StatusInfoList}}
|
||||
<a class="item{{if eq .Status $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status={{.Status}}">
|
||||
{{.DisplayedStatus}}
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if .AllowDisableOrEnableWorkflow}}
|
||||
<button class="ui jump dropdown btn interact-bg tw-p-2">
|
||||
{{svg "octicon-kebab-horizontal"}}
|
||||
<div class="menu">
|
||||
<a class="item link-action" data-url="{{$.Link}}/{{if .CurWorkflowDisabled}}enable{{else}}disable{{end}}?workflow={{$.CurWorkflow}}&actor={{.CurActor}}&status={{$.CurStatus}}">
|
||||
{{if .CurWorkflowDisabled}}{{ctx.Locale.Tr "actions.workflow.enable"}}{{else}}{{ctx.Locale.Tr "actions.workflow.disable"}}{{end}}
|
||||
</a>
|
||||
</div>
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
{{if $.CurWorkflowDispatch}}
|
||||
{{template "repo/actions/dispatch" .}}
|
||||
{{end}}
|
||||
|
||||
{{template "repo/actions/runs_list" .}}
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
{{template "repo/actions/no_workflows" .}}
|
||||
{{end}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue