{% load disk %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <div class="well well-sm">
                        <span class="time-frame"><strong>Timeframe</strong></span>
                        <div id="bachart-controls" class="btn-group">
                            <button type="button" class="btn btn-default tf_move" id="bachart-b_left" title="Shift timeframe left"><i class="fa fa-angle-left"></i></button>
                            <button type="button" class="tf_button btn btn-default" id="bachart-1y" title="Show one year timeframe">1y</button>
                            <button type="button" class="tf_button btn btn-default" id="bachart-1m" title="Switch to one month timeframe">1m</button>
                            <button type="button" class="tf_button btn btn-default" id="bachart-1w" title="Switch to one week timeframe">1w</button>
                            <button type="button" class="tf_button btn btn-default" id="bachart-1d" title="Switch to one day timeframe">1d</button>
                            <button type="button" class="tf_button btn btn-default" id="bachart-6h" title="Switch to six hour timeframe">6h</button>
                            <button type="button" class="tf_button btn btn-default" id="bachart-1h" title="Switch to one hour timeframe">1h</button>
                            <button type="button" class="tf_button btn btn-default" id="bachart-15m" title="Switch to 15 minute timeframe">15m</button>
                            <button type="button" class="btn btn-default tf_move" disabled id="bachart-b_right" title="Shift timeframe right"><i class="fa fa-angle-right"></i></button>
                            <button type="button" class="btn btn-default tf_reset" disabled id="bachart-b_reset" title="Shift timeframe to now"><i class="fa fa-angle-double-right"></i></button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <h3>CPU usage (average)</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <div id="legend_cpu" class="influxdb_legend"></div>
                </div>
                <div class="col-md-10">
                    <div id="chart_cpu" class="influxdb_chart" style="height: 200px"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <h3>CPU usage (per core)</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <div id="legend_core" class="influxdb_legend"></div>
                </div>
                <div class="col-md-10">
                    <div id="chart_core" class="influxdb_chart" style="height: 200px"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <h3>Connection tracking table</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <div id="legend_conntrack" class="influxdb_legend"></div>
                </div>
                <div class="col-md-10">
                    <div id="chart_conntrack" class="influxdb_chart" style="height: 200px"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <h3>Memory usage</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <div id="legend_memory" class="influxdb_legend"></div>
                </div>
                <div class="col-md-10">
                    <div id="chart_memory" class="influxdb_chart" style="height: 200px"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <h3>Swap usage</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <div id="legend_swap" class="influxdb_legend"></div>
                </div>
                <div class="col-md-10">
                    <div id="chart_swap" class="influxdb_chart" style="height: 200px"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <h3>Load average</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <div id="legend_load_average" class="influxdb_legend"></div>
                </div>
                <div class="col-md-10">
                    <div id="chart_load_average" class="influxdb_chart" style="height: 200px"></div>
                </div>
            </div>

            <h3>Disk space</h3>
            <div class="disk_mount_series"></div>
            <script id="disk_mount_series_template" type="text/disk-custom-template">
                <div class="row">
                    <div class="col-md-12">
                        <h4>%%MOUNT_POINT_NAME%%</h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <div id="legend_disk_space_%%MOUNT_POINT_ID%%" class="influxdb_legend"></div>
                    </div>
                    <div class="col-md-10">
                        <div id="chart_disk_space_%%MOUNT_POINT_ID%%" class="influxdb_chart" style="height: 200px"></div>
                    </div>
                </div>
            </script>

            <h3>Disk IO</h3>
            <div class="row">
                <div class="col-md-12">
                    <h4>Disk throughput</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <div id="legend_disk_throughput" class="influxdb_legend"></div>
                </div>
                <div class="col-md-10">
                    <div id="chart_disk_throughput" class="influxdb_chart" style="height: 200px"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <h4>Disk operations</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <div id="legend_disk_operations" class="influxdb_legend"></div>
                </div>
                <div class="col-md-10">
                    <div id="chart_disk_operations" class="influxdb_chart" style="height: 200px"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <h4>Disk response time</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <div id="legend_disk_response_time" class="influxdb_legend"></div>
                </div>
                <div class="col-md-10">
                    <div id="chart_disk_response_time" class="influxdb_chart" style="height: 200px"></div>
                </div>
            </div>
        </div>
    </div>
</div>