
    <div class="section">
    <h1>Storage Nodes</h1>
    <table class="table table-striped">
        <tr><th>Name</th><th>Address</th><th colspan="2">Disk Space </th><th>Uptime</th><th>Responding</th></tr>
        {% for node in storage_nodes %}
            <tr>
            <td>{{ node.ComputerName }}</td><td>http://{{ node.IPAddress }}:{{ node.Port }}</td>
{#            <td>{{ node.Disk.total | filesizeformat}}&nbsp;total<br>{{ node.Disk.free | filesizeformat}}&nbsp;free</td>#}
            <td colspan="2"><div class="chart">
            <span class="chart-label">{{ node.Disk.used | filesizeformat }} used</span>
            <div class="chart-bar" style="width: {{ node.percent_free }}%;max-width: {{ node.percent_free }}%;"><span class="chart-label">{{ node.Disk.free | filesizeformat }} free</span></div>
            </div>
            </td>
            <td>{{ node.Uptime }}</td>
            <td>{{ node.Responsive }}</td>
            </tr>
        {% endfor %}
    </table>

    <h2>Total storage: {{ total_storage | filesizeformat }}</h2>

    <div class="chart">
    <h4 class="chart-label">{{ used_storage | filesizeformat }} used</h4>
    <div class="chart-bar" style="width: {{ percent_total_free }}%;"><h4 class="chart-label">{{ free_storage | filesizeformat }} free</h4></div>
    </div>

{#    <figure>#}
{#            <svg width="100" height="100" class="chart">#}
{#            <circle r="25" cx="50" cy="50" class="pie" style="stroke-dasharray: {{ percent_total_free }} 100"/>#}
{#            </svg>#}
{#                </figure>#}

    </div>

    <div class="section">
    <h1>CPU and Memory Utilization</h1>
    <p><em>Note:CPU and memory usage is currently measured by the storage server, and will not be reported for compute-only nodes.</em></p>
    <table class="table table-striped">
        <tr><th>Name</th><th>Memory</th><th>CPU</th></tr>
        {% for node in storage_nodes %}
            <tr>
            <td>{{ node.ComputerName }}</td>
{#            <td>{{ node.Disk.total | filesizeformat}}&nbsp;total<br>{{ node.Disk.free | filesizeformat}}&nbsp;free</td>#}
            <td><div class="chart">
            <span class="chart-label">{{ node.MemUsage.used | filesizeformat }} used</span>
            <div class="chart-bar" style="width: calc(100% - {{ node.MemUsage.percent }}%);"><span class="chart-label">{{ node.MemUsage.available | filesizeformat }} free</span></div>
            </div>
            </td>
            <td>{#{{ node.CPUUsage }}#}
                <div class="chart-cpu" style="height: 30px">
                    {% for cpu_pc in node.CPUUsage %}
                        <div class="chart-cpu-bar" style="width: calc(100% / {{ node.CPUUsage | length }});height: calc(99.9% - {{ cpu_pc }}%);"></div>
                    {% endfor %}
                </div>
            </td>
            </tr>
        {% endfor %}
    </table>
    </div>

    <div class="section">
    <h1>Network</h1>
    <p><em>Note:Network usage is currently measured by the storage server, and will not be reported for compute-only nodes.</em></p>
    <table class="table table-striped">
        <tr><th>Name</th><th>Bytes/s Sent</th><th>Bytes/s Recieved</th></tr>
        {% for node in storage_nodes %}
            <tr>
            <td>{{ node.ComputerName }}</td>
{#            <td>{{ node.Disk.total | filesizeformat}}&nbsp;total<br>{{ node.Disk.free | filesizeformat}}&nbsp;free</td>#}
            <td>
                <table>
                    {% for iface, throughput in node.Network.items %}
                        <tr><td> {{ iface }} &nbsp;&nbsp;</td><td>{{ throughput.send | filesizeformat }}</td></tr>
                    {% endfor %}
                </table>
            </td>
            <td>{#{{ node.CPUUsage }}#}
                <table>
                    {% for iface, throughput in node.Network.items %}
                        <tr><td> {{ iface }}&nbsp;&nbsp;</td><td>{{ throughput.recv | filesizeformat }}</td></tr>
                    {% endfor %}
                </table>
            </td>
            </tr>
        {% endfor %}
    </table>
    </div>


