results.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SE464 Lab Test Results</title>
    <style>
        table {
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        .success {
            color: green;
        }

        .fail {
            color: orange;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
    <h1>Results for SE464 <span id="aws-url"></span></h1>
    <div>
        <label for="iterations">Rerun with number of iterations:</label>
        <input type="text" id="iterations">
        <button type="button">Submit</button>
    </div>
    <div id="results"></div>
</body>

<script>
    const urlParts = window.location.href.split('/');
    const id = urlParts[urlParts.length - 1]
    const awsUrl = atob(id);
    const titleHeading = document.getElementById('aws-url');
    titleHeading.innerHTML = `${awsUrl}`;
    const websocketUrl = `ws://${window.location.host}/results/${id}`;
    const socket = new WebSocket(websocketUrl);

    // Listen for messages
    socket.addEventListener("message", (event) => {
        try {
            const data = JSON.parse(event.data);
            const restJsonData = data["rest"];
            const grpcJsonData = data["grpc"];
            document.getElementById('results').replaceChildren(jsonToTable("REST", restJsonData));
            document.getElementById('results').appendChild(jsonToTable("gRPC", grpcJsonData));
        } catch (e) {
            console.error(e);
        }
    });

    document.querySelector('button').addEventListener('click', () => {
        const iterations = document.getElementById('iterations').value;
        socket.send(iterations);
    });
    function jsonToTable(title, jsonData) {
        // Create a table
        const div = document.createElement('div');
        const titleElement = document.createElement('h2');
        titleElement.textContent = title;
        div.appendChild(titleElement);

        const table = document.createElement('table');

        for (const [k, v] of Object.entries(jsonData)) {
            const row = document.createElement('tr');
            const td1 = document.createElement('td');
            const td2 = document.createElement('td');
            td1.textContent = k;
            td2.textContent = v["time"] + ' ms';
            td2.className = v["ok"] ? 'success' : 'fail';
            row.appendChild(td1);
            row.appendChild(td2);

            table.appendChild(row);
        }

        div.appendChild(table);

        // Return the table
        return div;
    }

</script>

</html>