☰

Greasy Fork is available in English.

ADO Build & Deploy - Viewer+

Rework HTML of build view in Azure DevOps

  1. // ==UserScript==
  2. // @name         ADO Build & Deploy - Viewer+
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0.0
  5. // @description  Rework HTML of build view in Azure DevOps
  6. // @author       You
  7. // @match        https://*.visualstudio.com/*/_build/results?*view=logs*
  8. // @match        https://dev.azure.com/*/*/_build/results?*view=logs*
  9. // @icon         https://www.google.com/s2/favicons?domain=azure.com
  10. // @grant        none
  11. // @license      MIT
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     "use strict";
  16.  
  17.     const STAGE_PREFIX_ID = "icon-stage-";
  18.  
  19.     /**
  20.      * Hide stage on click.
  21.      * @param {Event} Event.
  22.      * @param {number} Header index.
  23.      * @returns {undefined} Nothing.
  24.      */
  25.     function hideStage(_event, _i) {
  26.         console.log(_event);
  27.         _event.stopPropagation();
  28.         _event.preventDefault();
  29.  
  30.         const classList = document.getElementById(`${STAGE_PREFIX_ID}${_i}`).classList;
  31.         const newClassList = [];
  32.         // Change icon className
  33.         classList.forEach((_className) => {
  34.             if(_className === "ms-Icon--ChevronDownMed"){
  35.                 newClassList.push("ms-Icon--ChevronRightMed");
  36.             } else if ( _className === "ms-Icon--ChevronRightMed" ){
  37.                 newClassList.push("ms-Icon--ChevronDownMed");
  38.             } else {
  39.                 newClassList.push(_className);
  40.             }
  41.         });
  42.         document.getElementById(`${STAGE_PREFIX_ID}${_i}`).className = newClassList.join(" ");
  43.         document.getElementsByTagName("tbody")[_i].hidden = !document.getElementsByTagName("tbody")[_i].hidden;
  44.     }
  45.  
  46.     // Get all stages headers
  47.     const headers = document.getElementsByClassName("bolt-table-header-cell-content");
  48.     for(let i = 0; i < headers.length; i++) {
  49.         const currentHeader = headers[i];
  50.         const parentHeader = currentHeader.parentElement;
  51.         // Add icon to collapse/expand stages
  52.         const iconHeaderHtml = '<span aria-hidden="true" id="' + STAGE_PREFIX_ID + i + '" class="bolt-tree-expand-button font-size cursor-pointer flex-noshrink fabric-icon ms-Icon--ChevronRightMed small" role="presentation"></span>';
  53.         currentHeader.innerHTML = iconHeaderHtml + currentHeader.innerHTML;
  54.         const iconHeader = document.getElementById(`${STAGE_PREFIX_ID}${i}`);
  55.         // Hide all stages
  56.         document.getElementsByTagName("tbody")[i].hidden = true;
  57.         // Add listeners to hide/show stages
  58.         iconHeader.addEventListener("click", (_event) => hideStage(_event, i));
  59.         parentHeader.addEventListener("click", (_event) => hideStage(_event, i));
  60.     }
  61. })();