feat(actions): add build queue view (#38585)

Adds a read-only Actions job queue: running jobs first, then waiting
jobs in the order a runner picks them up. It is shown instance-wide in
the admin Actions section with owner, repository and status filters, and
per repository in the Actions tab. Both lists refresh in place.

Pending work is currently only visible per repository and newest-first,
so nothing shows what is queued, in which order, or what occupies the
runners. Reordering the queue will be proposed separately.

A migration adds indexes for the runner pickup query and
repository-scoped status lookups.

* Fix #34198

<img width="1345" height="451" alt="image"
src="https://github.com/user-attachments/assets/7d52ff76-81b4-44e8-b583-d7d89c9dffcd"
/>
<img width="1809" height="1134" alt="image"
src="https://github.com/user-attachments/assets/4d56c0cb-bae7-4ce2-8f3c-75163b2bc7f4"
/>

---------

Co-authored-by: Zettat123 <zettat123@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/features/repo-actions.ts

@@ -3,8 +3,7 @@ import RepoActionView from '../components/RepoActionView.vue';
 import {registerGlobalInitFunc} from '../modules/observer.ts';
 import {html} from '../utils/html.ts';
 import {GET} from '../modules/fetch.ts';
-import {activePageTimerRefresh, createElementFromHTML, protectMorphElements, recoverMorphElements} from '../utils/dom.ts';
-import {Idiomorph} from 'idiomorph';
+import {activePageTimerRefresh, createElementFromHTML, morphElementWithProtection} from '../utils/dom.ts';
 
 export function updateWorkflowBadgeFields(form: HTMLElement, branch: string): void {
   const badgeURLParsed = new URL(form.getAttribute('data-badge-url')!);
@@ -31,6 +30,7 @@ export function initRepositoryActions() {
   registerGlobalInitFunc('initWorkflowBadgeForm', initWorkflowBadgeForm);
   initRepositoryActionsView();
   registerGlobalInitFunc('initActionRunsList', initActionRunsList);
+  registerGlobalInitFunc('initActionJobQueueList', initActionJobQueueList);
 }
 
 function initRepositoryActionsView() {
@@ -115,22 +115,19 @@ function initActionRunsList(el: HTMLElement) {
     interval: () => Number(el.getAttribute('data-action-runs-refresh-interval')),
     async callback() {
       const resp = await GET(el.getAttribute('data-action-runs-refresh-link')!);
-      if (!resp.ok || resp.status !== 200) return;
-
-      const newEl = createElementFromHTML(await resp.text());
-      for (const attr of newEl.attributes) el.setAttribute(attr.name, attr.value);
-      for (const newItem of newEl.querySelectorAll(':scope > .item')) {
-        const oldItem = el.querySelector(`#${newItem.id}`);
-        if (!oldItem) continue;
-
-        // If the end user is operating the row, then don't refresh its content.
-        // Otherwise, there will be more edge cases and inconsistencies, e.g.: dropdown still shows old items but the icon has changed.
-        if (oldItem.querySelector('.ui.dropdown.active')) continue;
-
-        const protectedElems = protectMorphElements(newItem);
-        Idiomorph.morph(oldItem, newItem, {morphStyle: 'outerHTML'});
-        recoverMorphElements(el.querySelector(`#${newItem.id}`)!, protectedElems);
-      }
+      if (!resp.ok) return;
+      morphElementWithProtection(el, createElementFromHTML(await resp.text()), {morphStyle: 'outerHTML'});
+    },
+  });
+}
+
+function initActionJobQueueList(el: HTMLElement) {
+  activePageTimerRefresh({
+    interval: () => Number(el.getAttribute('data-job-queue-refresh-interval')),
+    async callback() {
+      const resp = await GET(el.getAttribute('data-job-queue-refresh-link')!);
+      if (!resp.ok) return;
+      morphElementWithProtection(el, createElementFromHTML(await resp.text()), {morphStyle: 'outerHTML'});
     },
   });
 }

web_src/js/utils/dom.test.ts

@@ -2,7 +2,7 @@ import {
   createElementFromAttrs, createElementFromHTML,
   queryElemChildren, querySingleVisibleElem,
   protectMorphElements, recoverMorphElements,
-  toggleElem,
+  toggleElem, morphElementWithProtection,
 } from './dom.ts';
 
 test('createElementFromHTML', () => {
@@ -70,3 +70,33 @@ test('protectMorphElements', () => {
   recoverMorphElements(el, protectedElems);
   expect(el.outerHTML).toEqual('<div><span data-morph-protect="">foo</span></div>');
 });
+
+describe('morphElementWithProtection', () => {
+  const newElHtml = '<div><div><span>new</span><div class="ui dropdown">changed</div></div></div>';
+  it('morph normal', () => {
+    const el = createElementFromHTML('<div><div><span>old</span><div class="ui dropdown active"></div></div></div>');
+    const newEl = createElementFromHTML(newElHtml);
+    morphElementWithProtection(el, newEl, {morphStyle: 'outerHTML'});
+    // span is changed, but dropdown is skipped because it is active
+    expect(el.outerHTML).toEqual('<div><div><span>new</span><div class="ui dropdown active"></div></div></div>');
+  });
+  it('morph whole', () => {
+    const el = createElementFromHTML('<div><div data-morph-whole><span>old</span><div class="ui dropdown active"></div></div></div>');
+    const newEl = createElementFromHTML(newElHtml);
+    morphElementWithProtection(el, newEl, {morphStyle: 'outerHTML'});
+    // span is not changed, because the parent div is marked as data-morph-whole and there is an active dropdown, so it is skipped
+    expect(el.outerHTML).toEqual('<div><div data-morph-whole=""><span>old</span><div class="ui dropdown active"></div></div></div>');
+  });
+  it('morph protection', () => {
+    const el = createElementFromHTML('<div><span></span><div class="ui dropdown"></div></div>');
+    const newEl = createElementFromHTML('<div><span>new</span><div class="ui dropdown">changed</div></div>');
+    const elSpanOld = el.querySelector('span');
+    const elDropdownOld = el.querySelector('.ui.dropdown');
+    const morphedEl = morphElementWithProtection(el, newEl, {morphStyle: 'outerHTML'});
+    expect(el.outerHTML).toEqual('<div><span>new</span><div class="ui dropdown">changed</div></div>');
+    const elSpanNew = morphedEl.querySelector('span');
+    const elDropdownNew = morphedEl.querySelector('.ui.dropdown');
+    expect(elSpanNew).toBe(elSpanOld); // span is morphed in place, so it is the same element
+    expect(elDropdownNew).not.toBe(elDropdownOld); // dropdown is protected and fully replaced, so it is a new element
+  });
+});

web_src/js/utils/dom.ts

@@ -1,6 +1,7 @@
 import {debounce} from './func.ts';
 import type {Promisable} from '../types.ts';
 import type $ from 'jquery';
+import {Idiomorph} from 'idiomorph';
 
 type ArrayLikeIterable<T> = ArrayLike<T> & Iterable<T>; // for NodeListOf and Array
 type ElementArg = Element | string | ArrayLikeIterable<Element> | ReturnType<typeof $>;
@@ -424,6 +425,36 @@ export function recoverMorphElements(el: Element, protectedElems: ProtectedMorph
   for (const [id, html] of Object.entries(protectedElems)) {
     const it = el.querySelector(`[data-morph-protect="${CSS.escape(id)}"]`);
     if (!it) continue;
-    it.outerHTML = html;
+    it.replaceWith(createElementFromHTML(html));
   }
 }
+
+export type MorphElementOptions = {
+  morphStyle: 'innerHTML' | 'outerHTML';
+};
+
+export function morphElementWithProtection(el: Element, newEl: Element, opts: MorphElementOptions): Element {
+  const protectedElems = protectMorphElements(newEl);
+  const selectorSkipElems = '.ui.dropdown.active';
+  const nodes = Idiomorph.morph(el, newEl, {
+    morphStyle: opts.morphStyle,
+    callbacks: {
+      beforeNodeMorphed: (oldNode /* , newNode */) => {
+        if (!(oldNode instanceof Element)) return true;
+
+        // If the end user is operating a row, then don't refresh its content.
+        // Otherwise, there will be more edge cases and inconsistencies, e.g.: dropdown still shows old items but the icon has changed.
+        const oldNodeMorphWholeAndSkipChild = oldNode.matches('[data-morph-whole]') && oldNode.querySelector(selectorSkipElems);
+
+        // If the element should be skipped, don't morph it
+        const oldNodeShouldSkip = oldNode.matches(selectorSkipElems);
+
+        const shouldSkip = oldNodeMorphWholeAndSkipChild || oldNodeShouldSkip;
+        return !shouldSkip;
+      },
+    },
+  });
+  const morphedElem = nodes[0] as Element;
+  recoverMorphElements(morphedElem, protectedElems);
+  return morphedElem;
+}