github.com/zppinho/prow@v0.0.0-20240510014325-1738badeb017/cmd/deck/static/common/abort.ts (about)

     1  import {ProwJobState} from "../api/prow";
     2  import {showAlert, showToast, State} from "./common";
     3  
     4  export function createAbortProwJobIcon(modal: HTMLElement, parentEl: Element, job: string, state: ProwJobState, prowjob: string, csrfToken: string): HTMLElement {
     5    const url = `${location.protocol}//${location.host}/abort?prowjob=${prowjob}`;
     6    const abortButton = document.createElement('button');
     7    abortButton.classList.add('mdl-button', 'mdl-js-button', 'mdl-button--icon');
     8    abortButton.innerHTML = '<i class="icon-button material-icons" title="Cancel this job" style="color: gray">cancel</i>';
     9  
    10    const closeModal = (): void => {
    11      modal.style.display = "none";
    12      // Resets modal content. If removed, elements will be concatenated, causing duplicates.
    13      parentEl.classList.remove('abort-content', 'rerun-content');
    14      parentEl.innerHTML = '';
    15    };
    16    window.onkeydown = (event: any) => {
    17      if (event.key === "Escape") {
    18        closeModal();
    19      }
    20    };
    21    window.onclick = (event: any) => {
    22      if (event.target === modal) {
    23        closeModal();
    24      }
    25    };
    26    if (state !== State.TRIGGERED && state !== State.PENDING) {
    27      abortButton.innerHTML = `<i class="icon-button material-icons" title="Can't abort job in ${state} state" style="color: lightgray">cancel</i>`;
    28      abortButton.disabled = true;
    29    }
    30    abortButton.onclick = async () => {
    31      modal.style.display = 'block';
    32      // Add the styles for abort modal
    33      parentEl.classList.add('abort-content');
    34      parentEl.innerHTML = `
    35        <h2 class="abortModal-title">Abort ProwJob</h2>
    36        <p class="abortModal-description">Would you like to abort <b>${job}</b>?</p>
    37      `;
    38  
    39      const buttonDiv = document.createElement('div');
    40      buttonDiv.classList.add('abortModal-buttonDiv');
    41      const confirmAbortButton = document.createElement('a');
    42      confirmAbortButton.innerHTML = "<button class='mdl-button mdl-js-button mdl-button--raised mdl-button--colored'>Confirm</button>";
    43      const cancelAbortButton = document.createElement('a');
    44      cancelAbortButton.innerHTML = "<button class='mdl-button mdl-js-button mdl-button--raised mdl-color--red mdl-button--colored'>Cancel</button>";
    45      buttonDiv.appendChild(confirmAbortButton);
    46      buttonDiv.appendChild(cancelAbortButton);
    47      parentEl.appendChild(buttonDiv);
    48  
    49      confirmAbortButton.onclick = async () => {
    50        gtag('event', 'abort', {
    51          event_category: 'engagement',
    52          transport_type: 'beacon',
    53        });
    54        try {
    55          const result = await fetch(url, {
    56            headers: {
    57              'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
    58              'X-CSRF-Token': csrfToken,
    59            },
    60            method: 'post',
    61          });
    62          const data = await result.text();
    63          if (result.status >= 400) {
    64            showAlert(data);
    65          } else {
    66            showToast(data);
    67          }
    68        } catch (e) {
    69          showAlert(`Could not send request to abort job: ${e}`);
    70        }
    71      };
    72      cancelAbortButton.onclick = closeModal;
    73    };
    74    return abortButton;
    75  }