<div id="computerInfo">

    <h2>Real-time System Resource Monitor</h2>
    <h5 data-bind="visible: connected">Connected to message hub</h5>

    <table id="infoTable" border="0" class="table table-striped">
        <thead style="cursor:pointer">
            <tr data-bind="foreach: headers">
                <td data-bind="click: $parent.toggleSort, text: title"></td>
            </tr>
        </thead>
        <tbody>
            <!-- ko foreach: machines -->
            <tr>
                <td data-bind="css: { machineName: cpu()<=1 && memUsage()/memTotal()*100 >=30, machineNameRed: cpu()>1 || memUsage()/memTotal()*100 <30},text: machineName"></td>
                <td data-bind="css: { highMem: cpu()>1}, text: cpu"></td>
                <td data-bind="text: memUsage"></td>
                <td data-bind="text: memTotal"></td>
                <td data-bind="css: { highMem: memUsage()/memTotal()*100 <30},text: memPercent"></td>
            </tr> <!-- /ko -->
        </tbody>
    </table>
</div>