@model Opserver.Data.Dashboard.Node
@{
    this.SetPageTitle("Testing bitches!");
}
@section head {
    <script>
        (function() {
            $.fn.extend({
                                                
            });
        })();
        $(function() {
            //$('#livechart').lived3graph({
            //    type: 'cpu',
            //    width: 'auto',
            //    series: [{ name: 'total', label: 'CPU' }],
            //    max: 100,
            //    leftMargin: 60,
            //    areaTooltipFormat: function(value) { return '<span class="label">CPU: </span><b>' + (value || 0).toFixed(0) + '%</b>'; }
            //});
                                    @*$('#chart').d3graph({
                type: 'cpu',
                width: 'auto',
                max: 100,
                leftMargin: 60,
                areaTooltipFormat: function(value) { return '<span class="label">CPU: </span><b>' + value + '%</b>'; }
            });
            $('#chart2').d3graph({
                type: 'memory',
                width: 'auto',
                max: @(Model.TotalMemory/1024/1024*1.1),
                leftMargin: 60,
                areaTooltipFormat: function(value) { return '<span class="label">Memory: </span><b>' + Status.helpers.bytesToSize(value * 1024 * 1024, true) + '</b>'; },
                yAxis: {
                    tickFormat: function(d) { return Status.helpers.bytesToSize(d * 1024 * 1024, true, 'GB'); }
                }
            });
            $('.network-graph').show().each(function() {
                $(this).d3graph({
                    type: 'network',
                    series: [
                        { name: "main_in", label: "In" },
                        { name: "main_out", label: "Out", direction: "down" }
                    ],
                    width: 'auto',
                    min: 'auto',
                    leftMargin: 60,
                    areaTooltipFormat: function(value, series, name) { return '<span class="label">Bandwidth (<span class="series-' + name + '">' + series + '</span>): </span><b>' + Status.helpers.bytesToSize(value, false) + '/s</b>'; },
                    yAxis: {
                        tickFormat: function(d) { return Status.helpers.bytesToSize(d, false); }
                    }
                });
            });*@
            $('#route').show().each(function () {
                var route = $(this).data('route'),
                    days = $(this).data('days'),
                    host = $(this).data('host');
                $(this).haproxyRouteGraph(route, days, host);
            });
                //.each(function() { //haproxy/route-performance/
                //    $(this).d3graph({
                //        type: 'haproxy',
                //        subtype: 'route-performance',
                //        ajaxZoom: false,
                //        stacked: true,
                //        autoColors: true,
                //        params: { route: 'Questions/Show', days: 30 },
                //        series: [
                //            { name: "sql", label: "SQL" },
                //            { name: "redis", label: "Redis" },
                //            { name: "tag_engine", label: "Tag Engine" },
                //            { name: "http", label: "HTTP" },
                //            { name: "dot_net", label: "ASP.Net" },
                //            { name: "other", label: "Other" }
                //        ],
                //        rightSeries: [
                //            { name: "hits", label: "Hits", color: "rgb(116, 196, 118)", width: 2 }
                //        ],
                //        //rightPalette: 'GnBu',
                //        rightMargin: 70,
                //        width: 'auto',
                //        min: 'auto',
                //        leftMargin: 60,
                //        rightAreaTooltipFormat: function(value, series, name, color) {
                //            return '<span class="label">' + (color ? '<div style="background-color: ' + color + '; width: 16px; height: 13px; display: inline-block;"></div> ' : '')
                //                + '<span class="series-' + name + '">' + series + '</span>: </span><b>' + Status.helpers.commify(value) + '</b>';
                //        },
                //        areaTooltipFormat: function(value, series, name, color) {
                //            return '<span class="label">' + (color ? '<div style="background-color: ' + color + '; width: 16px; height: 13px; display: inline-block;"></div> ' : '')
            //                + '<span class="series-' + name + '">' + series + '</span>: </span><b>' + Status.helpers.commify(value) + ' <span class="text-muted">ms</span></b>';
                //        },
                //        yAxis: {
                //            tickFormat: function(d) { return Status.helpers.commify(d) + ' ms'; }
                //        }
                //    });
                //});
            //for (var p in colorbrewer) {
            //    var pWrap = $('<div style="clear: both;" class="color-section" />').text(p);
            //    var palette = colorbrewer[p];
            //    for (var cs in palette) {
            //        var csWrap = $('<div />').text(cs + ": ");
            //        palette[cs].forEach(function(c) {
            //            $("<div />", { 'class': "color-brick", css: { background: c }, title: c }).appendTo(csWrap);
            //        });
            //        csWrap.appendTo(pWrap);
            //    }
            //    pWrap.appendTo('#colors');
            //}
        });
    </script>
    <style>
        .color-section {
            display: inline-block;
            padding: 4px;
        }
        .color-brick {
            height: 16px;
            width: 16px;
            display: inline-block;
            margin: 4px;
        }
    </style>
}
<div>
    @*    <div class="history-graph-wrap half-width">
        <div id="livechart" class="chart" data-title="CPU Utilization (Live)" data-subtitle="@Model.PrettyName" data-id="@Model.Id" data-start="@(DateTime.UtcNow.AddDays(-1).ToEpochTime(true))" data-end="@(DateTime.UtcNow.ToEpochTime(true))"></div>
    </div>*@
    
    <div class="history-graph-wrap half-width">
        <div id="route" class="chart route-chart" data-title="Route Traffic" data-subtitle="Route Traffic" data-route="Questions/ListByTag" data-days="30"></div>
    </div>
    
    <div id="colors"></div>
    
    @*<div class="history-graph-wrap half-width">
        <div id="chart" class="chart" data-title="CPU Utilization" data-subtitle="@Model.PrettyName" data-id="@Model.Id" data-start="@(DateTime.UtcNow.AddDays(-1).ToEpochTime(true))" data-end="@(DateTime.UtcNow.ToEpochTime(true))"></div>
    </div>
    <div class="history-graph-wrap half-width">
        <div id="chart2" class="chart" data-title="Memory Utilization" data-subtitle="@Model.PrettyName" data-id="@Model.Id" data-start="@(DateTime.UtcNow.AddDays(-1).ToEpochTime(true))" data-end="@(DateTime.UtcNow.ToEpochTime(true))"></div>
    </div>
    <div class="server-interfaces">
        @{ var primary = s.PrimaryInterfaces; }
        @foreach (var v in s.Interfaces.OrderByDescending(primary.Contains).ThenBy(i => i.Name).Take(2))
        {
        <div class="history-graph-wrap half-width">
            <div class="history-graph network-graph chart" data-id="@v.Id" data-title="Network Traffic - @v.PrettyName" data-subtitle="@Model.PrettyName" data-start="@(DateTime.UtcNow.AddDays(-1).ToEpochTime(true))" data-end="@(DateTime.UtcNow.ToEpochTime(true))"></div>
        </div>
        }
    </div>*@
</div>