AWX Workflows - Add an extra_data tooltip to workflow nodes

awx_workflow_extra_data_tooltip.js

/*
AWX Workflow extra_data tooltips
This script adds a blue circle on each node, with a hover tooltip containing the node's extra_data.
It grabs each workflow node's extra_data from the angular component scope.
*/
(function () {
    const workflowChart = document.querySelector('#aw-workflow-chart-g');
    if (!workflowChart) return;
    const scope = angular.element(workflowChart).scope();
    if (!scope) return;
    const workflowNodes = scope.workflow_nodes;
    if (!workflowNodes || workflowNodes.length == 0) return;
    $('#aw-workflow-chart-g .WorkflowChart-node').not('#node-1').each((i, element) => {
        const nodeIndex = parseInt(element.id.replace('node-','')) - 2;
        const extraDataStr = JSON.stringify({ extra_data: workflowNodes[nodeIndex].extra_data }, null, 2);
        element.appendChild(createExtraDataCircle(extraDataStr));
    });
    
    function createExtraDataCircle(titleText) {
        const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        c.setAttribute('cx', 25);
        c.setAttribute('cy', 60);
        c.setAttribute('r', 10);
        c.style.fill = '#699ace';
        const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
        title.textContent = titleText;
        c.append(title);
        return c;
    }
})();


/*
Add this as the URL in a Bookmark:

javascript:(function () {const workflowChart = document.querySelector('#aw-workflow-chart-g');if (!workflowChart) return;const scope = angular.element(workflowChart).scope();if (!scope) return;const workflowNodes = scope.workflow_nodes;if (!workflowNodes || workflowNodes.length == 0) return;$('#aw-workflow-chart-g .WorkflowChart-node').not('#node-1').each((i, element) => {const nodeIndex = parseInt($(element).prop('id').replace('node-','')) - 2;const extraDataStr = JSON.stringify({ extra_data: workflowNodes[nodeIndex].extra_data }, null, 2);element.appendChild(createExtraDataCircle(extraDataStr));});function createExtraDataCircle(titleText) {const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');c.setAttribute('cx', 25);c.setAttribute('cy', 60);c.setAttribute('r', 10);c.style.fill = '#699ace';const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');title.textContent = titleText;c.append(title);return c;}})();


Note: Chrome will strip the leading 'javascript:' when you copy & paste into bookmark or URL bar so you may need to manually add it.
*/