The Zuul status page[1] is the last remaining page in the doc.wm.o and integration.wm.o sites using the old layout. I intent to clean this up so that we can make management of other microsites a bit easier as well possibly be re-using this in some way.
Description
Description
Details
Details
Customize query in gerrit
Event Timeline
Comment Actions
Change 850649 had a related patch set uploaded (by Krinkle; author: Krinkle):
[integration/docroot@master] zuul: Remove unused code, simplify logic, apply code conventions
Comment Actions
Change 850675 had a related patch set uploaded (by Krinkle; author: Krinkle):
[integration/docroot@master] zuul: Convert from Bootstrap to WMUI
Comment Actions
Change 850676 had a related patch set uploaded (by Krinkle; author: Krinkle):
[integration/docroot@master] zuul: Improve separation of concerns in HTML formatting code
Comment Actions
Change 851729 had a related patch set uploaded (by Krinkle; author: Krinkle):
[integration/docroot@master] zuul: Faster startup, remove delay, remove wrapper, remove app.js
Comment Actions
Change 851730 had a related patch set uploaded (by Krinkle; author: Krinkle):
[integration/docroot@master] zuul: Refactor jQuery code into html templates
Comment Actions
Change 850649 merged by jenkins-bot:
[integration/docroot@master] zuul: Remove unused code, simplify logic, apply code conventions
Comment Actions
Change 850675 merged by jenkins-bot:
[integration/docroot@master] zuul: Convert from Bootstrap to WMUI
Comment Actions
Change 850676 merged by jenkins-bot:
[integration/docroot@master] zuul: Improve separation of concerns in HTML formatting code
Comment Actions
Change 851729 merged by jenkins-bot:
[integration/docroot@master] zuul: Faster startup, remove delay, remove wrapper, remove app.js
Comment Actions
Change 851730 merged by jenkins-bot:
[integration/docroot@master] zuul: Refactor jQuery code into html templates
Comment Actions
Change 851746 had a related patch set uploaded (by Krinkle; author: Krinkle):
[integration/docroot@master] zuul: Remove unused lib/bootstrap/ and TwbsPageBase.php
Comment Actions
Change 852221 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):
[integration/docroot@master] Remove .zuul-change font-weight
Comment Actions
Change 852221 merged by jenkins-bot:
[integration/docroot@master] Remove .zuul-change font-weight
Comment Actions
Mentioned in SAL (#wikimedia-operations) [2022-11-02T17:04:25Z] <hashar@deploy1002> Started deploy [integration/docroot@8d2f4a0]: Remove .zuul-change font-weight - T322168
Comment Actions
Mentioned in SAL (#wikimedia-operations) [2022-11-02T17:04:41Z] <hashar@deploy1002> Finished deploy [integration/docroot@8d2f4a0]: Remove .zuul-change font-weight - T322168 (duration: 00m 10s)
Comment Actions
Change 851747 had a related patch set uploaded (by Krinkle; author: Krinkle):
[integration/docroot@master] zuul: Convert logic to vanilla JavaScript
Comment Actions
Change 851746 merged by jenkins-bot:
[integration/docroot@master] zuul: Remove unused lib/bootstrap/ and TwbsPageBase.php
Comment Actions
Change 851747 merged by jenkins-bot:
[integration/docroot@master] zuul: Convert logic to vanilla JavaScript
Comment Actions
https://integration.wikimedia.org/zuul/
| Before | After |
|---|---|
 |  |
 |  |
| (drag into Chrome DevTools Performance panel) | |
Design:
- Convert markup to WikimediaUI.
- No more Boostrap. Import new icons and CSS as-needed, such as the "clear" input icon.
- Modernize old pixelated pipeline icons.
- I've created rounded rectangles with pure CSS instead.
- The pipeline icons are now also less prominent. Previously they were quite large and the dark grey ones very prominent.
- I also added a question-mark cursor to allow discovery of its tooltip. This is especially useful for queued/blocked jobs as Zuul explains why it is waiting. Something similar existed in other places already but wasn't applied here yet. Could be improved further.
- Fix wrapping of "Elapsed" time.
- This recently-introduced segment almost always wrapped to two lines.
- Changed the space to a U+2006 half-width space.
- Give the right side of patchset-header a bit more proportion of width.
- Decreased font-size slightly of ETA/Elapsed element.
- I've also omitted this element when it would lbe empty. In the above example, the grey queued jobs for GrowthExperiments benefit from this. Previously, those repo names wrapped due to reserved space of an element that wasn't there. This saves vertical space.
- Fix wrapping around progressbar.
- The job-name and progressbar now use Flexbox instead of CSS float. The progressbar is now always in the same spot, and job names wrap before instead of over it.
- I've changed "non-voting" to "non<nbsp>voting", so that if this suffix makes the line wrap, the two words stay together instead of leaving "voting" as widow word on the next line.
- "Queue length" is now at the bottom, where other internals like "Zuul version" and "Last reconfigured" were placed already. This saves (and reclaims) vertical space.
- Fix "Job Stats" heading to use h2 instead of h3.
- Improves accessibility tree and gives it the style that includes a slight underline, consistent with other WMUI pages.
- Improve "clear" button to restore focus.
- Previously clicking it left the input field unfocussed so it would have to be clicked again when proceeding to live-filter with different keywords.
Performance:
- Faster time to visual complete: From 0.5s to <0.1s (500ms to 84ms) on WiFi. From 3s to 2s (3G throttle).
- This is largely attributed to the JSON fetch now starting directly instead of after initial DOM-ready and after zuul-container is rendered.
- Previously init.js would call prepareZuulDom, which waited for DOM-ready and then rendered zuul-container. And then calls zuul_start which waits for DOM-ready and then calls zuul.app.schedule to start the JSON fetch. Now, init.js calls zuul_start() directly which then directly renders and starts the fetch.
- Smaller source code
- The authored source code in pure JavaScript is smaller and easier to understand than it was previously. This is not counting the difference in size from skipping jQuery, as it didn't use much of that anyway. The way the code was structured before did not use jQuery to its advantage. The original author (largely myself!) was using patterns out of habit for pattern sake and not because it made code faster, simpler, or maintainable. If we properly adopted jQuery here again, it would probably make the code even smaller, but only due to shortening certain method calls like querySelector to $. Gzip takes care of that already, so it wouldn't help in actual cost.
- Page weight, measured in transfer size, from 97kB down to 28kB.
- Detailed metrics at https://gerrit.wikimedia.org/r/c/integration/docroot/+/851747
Code improvements:
- Remove redundant visibilitychange polyfill. Use the native event directly.
- Remove unused code for Zuul-Graphite sparklines integration. (This is different from the graphs we render, those are still there.)
- Remove unused internal support for custom selector options. Instead, use variables to reference the created elements and update these directly. There are now no more HTML IDs in the layout. (The content still had panel IDs for permalinking, as before.)
- Update the ?demo=basic sample with a recent and representative capture from production integration.wikimedia.org. It was manually updated for certain features, but it was still a bit out and incomplete, made difficult to fully test all scenarios. There's also demo=tree for some of the more rare scenarios with Angle/Tee branches.
- Convert all DOM building code to be string based in a handful of central HTML templates, and convert the filtering logic to be based on pure JavaScript arrays.
- Previously, the code would use the JSON data to build a DOM with all change boxes visible, and then iterate the parsed DOM elements to hide the ones that need to be hidden, and worse, it did this filtering based on re-serializing every change box (every repo-name heading and job-name link) back into text and then apply the filter to that. Now, it uses the JSON arrays directly to decide which ones to show, and then renders it once without looking back.
- For the slide up animation, we now use the Web Animation API, and its built-in Promise to apply hide the element afterward from the layout, since display can't be animated and it would otherwise keep reserving space. This is something jQuery made very easy with $el.slideUp or $el.hide(200), but was easy to re-create with ~5 lines of code in a local animate() function.