YARN Cluster Prettyfier

yarn-cluster-prettyfier.user.js

// ==UserScript==
// @name         YARN Cluster Prettyfication
// @namespace    http://thedeetch.github.io
// @version      0.5
// @description  Prettyfier for YARN cluster web UI
// @author       thedeetch
// @match        *://*/cluster*
// @grant        none
// @require      http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js
// ==/UserScript==

$("#usermetricsoverview").hide();
$("h3:contains('dr.who')").hide();

$("#apps_wrapper").css({'width': '90%'});
$("div.metrics").css({'width': '90%'});

$('#metricsoverview td:nth-child(1),#metricsoverview th:nth-child(1)').hide();
$('#metricsoverview td:nth-child(4),#metricsoverview th:nth-child(4)').hide();
$('#metricsoverview td:nth-child(13),#metricsoverview th:nth-child(13)').hide();
$('#metricsoverview td:nth-child(14),#metricsoverview th:nth-child(14)').hide();
$('#metricsoverview td:nth-child(15),#metricsoverview th:nth-child(15)').hide();
$('#metricsoverview td:nth-child(16),#metricsoverview th:nth-child(16)').hide();

th = $('#apps tr th:nth-child(7)');
th.after(th.clone().text("Duration"));

// needed to handle javascript pagination
formatApps();
$('#apps').on('draw.dt', formatApps);

function formatApps() {
  $('#apps tr').each(getDuration);
    
  $('#apps td:nth-child(1),#apps th:nth-child(1)').hide();
  $('#apps td:nth-child(7),#apps th:nth-child(7)').hide();
  $('#apps td:nth-child(9),#apps th:nth-child(9)').hide();
  $('#apps td:nth-child(10),#apps th:nth-child(10)').hide();
    
  $("#apps td:contains('SUCCEEDED')").next().find(".ui-progressbar-value").css({ 'background': 'green', 'border-color': 'green' });
  $("#apps td:contains('UNDEFINED')").next().find(".ui-progressbar-value").css({ 'background': 'orange', 'border-color': 'orange' });
  $("#apps td:contains('KILLED')").next().find(".ui-progressbar-value").css({ 'background': 'red', 'border-color': 'red' });
  $("#apps td:contains('FAILED')").next().find(".ui-progressbar-value").css({ 'background': 'red', 'border-color': 'red' });
}

function getDuration(i) {
    target = $(this).find('td.duration');
    s = $(this).find('td:nth-child(6)');
    e = $(this).find('td:nth-child(7)');
    
    if (target.length < 1) {
        e.after("<td class='duration'></td>");
        target = $(this).find('td.duration');
        start = moment.utc(s.text(), ["ddd, DD MMM YYYY HH:mm:ss z", "ddd MMM DD HH:mm:ss ZZ YYYY"]).local();		
    }
    else
        start = moment(s.text(), ["ddd, DD MMM YYYY HH:mm:ss z", "ddd MMM DD HH:mm:ss ZZ YYYY"]).local();
    
    end = moment.utc(e.text(), ["ddd, DD MMM YYYY HH:mm:ss z", "ddd MMM DD HH:mm:ss ZZ YYYY"]).local();
    
    if (!end.isValid())
        end = moment().local();
    
    duration = moment.duration(end.diff(start));
    target.text(Math.floor(duration.asHours()) + moment.utc(duration.asMilliseconds()).format(":mm:ss"));
    s.text(start.format("YYYY-MM-DD HH:mm"));
}