<div id="computerInfo">

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

    <table border="0" class="table table-striped">
        <tr>
            <th>Machine</th>
            <th>CPU %</th>
            <th>Memory Available (Mb)</th>
            <th>Total Memory (Mb)</th>
            <th>Mem Available %</th>
        </tr>

        <!-- ko foreach: machines -->
        <tr data-bind="css: { highCpu: cpu() > 90 || memPercent()<30 }">
            <td data-bind="text: machineName"></td>
            <td data-bind="text: cpu"></td>
            <td data-bind="text: memUsage"></td>
            <td data-bind="text: memTotal"></td>
            <td data-bind="text: memPercent"></td>
        </tr>
        <!-- /ko -->

    </table>

</div>

ko.applyBindings(vm, $("#computerInfo")[0]);

    // Get a reference to our hub
    var hub = $.connection.cpuInfo;

    // Add a handler to receive updates from the server
    hub.client.cpuInfoMessage = function (machineName, cpu, memUsage, memTotal) {

        var machine = {
            machineName: machineName,
            cpu: cpu.toFixed(0),
            memUsage: (memUsage / 1024).toFixed(2),
            memTotal: (memTotal / 1024).toFixed(2),
            memPercent: ((memUsage / memTotal) * 100).toFixed(1) + "%"
        };

        var machineModel = ko.mapping.fromJS(machine);

        // Check if we already have it:
        var match = ko.utils.arrayFirst(vm.machines(), function (item) {
            return item.machineName() == machineName;
        });

case 'keyMachineName':
    self.machines.sort(function (a, b) {
        var n = a.machineName() < b.machineName() ? -1 : a.machineName() > b.machineName() ? 1 : 0;
        alert(n);
        return n;//1;
    });
break;