Visualize Postman results for Power Platform's Plugin Trace Logs

postman-visualize-plugintracelogs.js

const moment = require('moment');

var template = `
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<style>
    .table-responsive-custom {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nowrap {
        white-space: nowrap;
    }
    .scrollable-text {
        overflow-x: auto;
    }
</style>
<input type="text" id="searchInput" class="form-control mb-3" placeholder="Search..." onkeyup="searchTable()">
<div class="table-responsive-custom">
<table class="table table-striped table-hover" data-bs-theme="dark">
    <thead class="table-dark sticky">
    <tr>
        <th scope="col">Created On</th>
        <th scope="col">Table</th>
        <th scope="col">Message</th>
        <th scope="col">Text</th>
    </tr>
    </thead>
    <tbody id="tableBody">
    {{#each response.value}}
        <tr>
            <td scope="row" class="nowrap"><pre>{{starttime}}</pre></th>
            <td class="nowrap"><pre>{{primaryentity}}</pre></td>
            <td class="nowrap"><pre>{{messagename}}</pre></td>
            <td class="scrollable-text" style="max-width: 50vw;">
                <pre>{{{text}}}</pre>
            </td>
        </tr>
    {{/each}}
    </tbody>
</table>
</div>
<script>
function searchTable() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("searchInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("tableBody");
    tr = table.getElementsByTagName("tr");

    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[3]; // Search in the last column
        if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }       
    }
}

function adjustLastColumnWidth() {
    var lastColumnCells = document.querySelectorAll('#tableBody tr td:last-child');
    var halfPageWidth = window.innerWidth / 1.8;
    lastColumnCells.forEach(function(cell) {
        cell.style.maxWidth = halfPageWidth + 'px';
    });
}

window.onload = adjustLastColumnWidth;
window.onresize = adjustLastColumnWidth;

</script>
`;

function formattedData() {
    var res = pm.response.json();
    var visualizerData = {
        value: res.value.map(item => ({
            starttime: moment(item.performanceexecutionstarttime).format("YYYY-MM-DD HH:mm:ss.SSS"),
            primaryentity: item.primaryentity,
            messagename: item.messagename,
            text: item.messageblock.replace(/\n\r/g, "<br>"),
        }))
    };
    return { response: visualizerData }
}

pm.visualizer.set(template, formattedData());