Add links to prophet

prophet-links.js

// ==UserScript==
// @name         Prophet Links
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  try to take over the world!
// @author       You
// @match        http://172.27.128.87:40121/*
// @grant        none
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
// ==/UserScript==


(function() {
    'use strict';

    // utility to listen to XHR
    var subscriptions = [];

    class XhrSubscription {
      constructor(callback) {
        this.callback = callback
      }

      next(xhr){
        return this.callback(xhr);
      }

      unsubscribe(){
        subscriptions = subscriptions.filter(s => s != this);
      }
    }

    function subscribeToXhr(callback){
      var subscription = new XhrSubscription(callback);
      subscriptions.push(subscription);
      return subscription;
    }

    (function (open) {
      XMLHttpRequest.prototype.open = function () {
        this.addEventListener("readystatechange", () => {
          subscriptions.forEach(s => s.next(this));
        }, false);
        return open.apply(this, arguments);
      };
    })(XMLHttpRequest.prototype.open);



    // add menu
    $(document).ready(function() {
        // add additional links elements
        var searcher = new URLSearchParams(window.location.search);
        var workspaceId = searcher.get('workspaceId');
        workspaceId = workspaceId ? workspaceId : "1";
        console.log("start adding links");
        $('body').append(`<div class="tool" style="position: absolute; right: 150px; top: 0;">
          <a style="background: #555; padding: 4px 8px;color: white; border-radius: 4px" href="/data-center/#/?workspaceId=${workspaceId}" target="_blank">Data Center</a>
          <a style="background: #555; padding: 4px 8px;color: white; border-radius: 4px" href="/monitor-center/#/workflow/task-list" target="_blank">Task List</a>
          <a style="background: #555; padding: 4px 8px;color: white; border-radius: 4px" href="/monitor-center/#/config-manage" target="_blank">Config Center</a>
          <a style="background: #555; padding: 4px 8px;color: white; border-radius: 4px" href="/scoped-flink-cluster/${workspaceId}/#/job/running" target="_blank">Flink</a>
          <a style="background: #555; padding: 4px 8px;color: white; border-radius: 4px" href="/console/#/versions" target="_blank">Module Version</a>
        </div>`);
    });

    // hack task list
    var task_list_mod = subscribeToXhr(function(xhr) {
        if (xhr.status != 200 || xhr.readyState != 4 || !xhr.responseURL.includes('task-controller/api/private/v1/operators')) {
            return;
        }
        var resp = JSON.parse(xhr.response);
        if (resp.status != 0) {
            return;
        }

        if ($('.workflow-task-list-wrapper').find('.dagId-header').length == 0) {
          var headers = $('.workflow-task-list-wrapper th').eq(8).after('<th class="dagId-header"><span class="pd4-table-header-column"><div><span class="pd4-table-column-title">DAG ID</span><span class="pd4-table-column-sorter"></span></div></span></th>')
          $('.workflow-task-list-wrapper colgroup').eq(0).find('col').eq(8).after('<col>')
        }

        setTimeout(function() {
          //$('.pd4-table-fixed').eq(0).css('width', '2000px')
          $('.workflow-task-list-wrapper .pd4-table-scroll tr.pd4-table-row').each(function(index, element) {
              var columns = $(element).find('td');
              var dagId = resp.data.infoList[index].labels.dagId;
              var dagRunId = resp.data.infoList[index].labels.dagRunId;
              var newCol = `<td class="dagId"><div class="tbcolumn"><span>${dagId}</span></div></td>`
              if (columns.find('.dagId').length == 0) {
                columns.eq(-2).after(newCol);
              }
              var linkToDAG = `&nbsp;&nbsp;<a href="/api/workflow/${dagId}/run/${dagRunId}" class="" target="__blank">DAG</a>`
              columns.eq(-1).find('span').append(linkToDAG);
          });
          $('.workflow-task-list-wrapper .pd4-table-fixed-right td span').each(function(index, element) {
              var dagId = resp.data.infoList[index].labels.dagId;
              var dagRunId = resp.data.infoList[index].labels.dagRunId;
              var linkToDAG = `<a class="daglink" href="/api/workflow/${dagId}/run/${dagRunId}" target="_blank">DAG</a>`
              $(element).append(linkToDAG);
          });
          $('.daglink').on('click', function(ev){
            window.open(ev.target.href, "_blank");
            return false;
          });
        }, 20);
    });
})();