{% extends 'manageBase.html' %}

{% block webtitle %}{{_("Management")}}{% end %}

{% block header %}
<link href="{{ static_url('css/light-custome.css') }}" rel="stylesheet">

<!-- chart.js -->
<script src="//cdn.bootcss.com/echarts/3.3.1/echarts.js"></script>
<!--<script src="//cdn.bootcss.com/echarts/3.3.1/echarts.common.js"></script>-->
<!--<script src="//cdn.bootcss.com/echarts/3.3.1/extension/dataTool.min.js"></script>
<script src="//cdn.bootcss.com/echarts/3.3.1/extension/bmap.min.js"></script>-->
<!--<script src="//cdn.bootcss.com/echarts/3.3.1/echarts.simple.min.js"></script>-->

<!-- vue -->
<script src="//cdn.bootcss.com/vue/2.1.4/vue.js"></script>


{% end %}

{% block content %}

{% include 'cookieNotification.html' %}


<div class="content-wrapper">

    <div class="row">

        <div class="col-md-12">
            <!-- condition -->
            <div class="content-header">
                <h1>
                    {{_("Overview of server")}}

                </h1>
                <ol class="breadcrumb">
                    <li><a href="{{  reverse_url('tjango.contrib.admin.views.adminManageHandler') }}"><i class="fa fa-dashboard"></i> 管理</a></li>
                    <li class="active">{{_("Overview")}}</li>
                </ol>
            </div>

            <!-- monitor -->
            <div class="content body" >
                <div class="row" id="overview-info">
                    <h1 class="text-center">{{_("Server")}}</h1>

                    <!--line chart-->
                    <div class="col-md-6">
                        <!-- LINE CHART -->
                        <div class="box box-info">
                            <div class="box-header with-border">
                                <h3 class="box-title">CPU</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                                </div>
                            </div>
                            <div class="box-body">
                                <div class="chart">
                                    <div id="main" style="width: 100%;">

                                    </div>
                                </div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>

                    <!--line chart-->
                    <div class="col-md-6">
                        <!-- LINE CHART -->
                        <div class="box box-danger">
                            <div class="box-header with-border">
                                <h3 class="box-title">{{_("Memory")}}</h3>

                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                                </div>
                            </div>
                            <div class="box-body">
                                <div class="chart">
                                    <div id="history" style="width: 100%"></div>
                                </div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <!-- Apply any bg-* class to to the info-box to color it -->
                            <div class="info-box bg-red">
                                <span class="info-box-icon"><i class="fa fa-ship"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">CPU</span>
                                    <span class="info-box-number">{% raw '{{ usedCPURate }}' %}%</span>
                                    <!-- The progress section is optional -->
                                    <div class="progress">
                                        <div class="progress-bar" v-bind:style="{width:usedCPURate+'%'}"></div>
                                    </div>
                                    <span class="progress-description">
                                        {{_("The rate of CPU cost")}}
                                    </span>

                                </div><!-- /.info-box-content -->
                            </div><!-- /.info-box -->
                        </div>

                        <!--memory -->
                        <div class="col-md-4">
                            <!-- Apply any bg-* class to to the info-box to color it -->
                            <div class="info-box bg-aqua">
                                <span class="info-box-icon"><i class="fa fa-cloud"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">{{_("Memory")}}</span>
                                    <span class="info-box-number">{% raw '{{ mem_usage }}' %}%</span>
                                    <!-- The progress section is optional -->
                                    <div class="progress">
                                        <div class="progress-bar" v-bind:style="{width:mem_usage+'%'}"></div>
                                    </div>
                                    <span class="progress-description">
                                        {{_("The rate of memory cost")}}
                                    </span>

                                </div><!-- /.info-box-content -->
                            </div><!-- /.info-box -->
                        </div>

                        <!--memory -->
                        <div class="col-md-4">
                            <!-- Apply any bg-* class to to the info-box to color it -->
                            <div class="info-box bg-yellow">
                                <span class="info-box-icon"><i class="fa fa-wifi"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">{{_("Sent bytes")}}</span>
                                    <span class="info-box-number">{% raw '{{ ntw_sent }}' %}MB</span>
                                    <span class="info-box-text"> {{_("Receive bytes")}}</span>
                                    <span class="info-box-number">{% raw '{{ ntw_recv }}' %}MB</span>


                                </div><!-- /.info-box-content -->
                            </div><!-- /.info-box -->
                        </div>

                    </div>

                    <!-- for collapse -->
                    <div class="col-md-12">
                        <!-- accordion-->
                        <div id="accordion" role="tablist" aria-multiselectable="true">
                            <!-- first panel -->
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="headingCPU">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseCPU" aria-expanded="true" aria-controls="collapseCPU">
                                            {{_("CPU information")}}<i class="fa fa-angle-double-right" aria-hidden="true"></i>
                                        </a>
                                    </h4>
                                </div>

                                <div id="collapseCPU" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingCPU">
                                    <!-- for CPU panel -->
                                    <ul class="list-group">
                                        <li class="list-group-item">{{_("Logical core number")}} <span class="pull-right label label-pill label-info">{{ logicalCPU }}</span></li>
                                        <li class="list-group-item">{{_("Physical core number")}} <span class="pull-right label label-pill label-success">{{ physicsCPU }}</span></li>
                                        <li class="list-group-item">{{_("Usage rate")}} <span class="pull-right label label-pill label-danger">{% raw '{{ usedCPURate }}' %}%</span></li>
                                    </ul>

                                    <!-- for CPU Progress-->
                                    <div class="progress" id="">
                                        <progress v-bind:value="usedCPURate" class=" progress-bar progress-danger" max="100"></progress>
                                    </div>


                                </div>
                            </div>

                            <!-- second panel -->
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="headingMem">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseMem" aria-expanded="true" aria-controls="collapseMem">
                                            {{_("Memory information")}}<i class="fa fa-angle-double-right" aria-hidden="true"></i>
                                        </a>
                                    </h4>
                                </div>

                                <div id="collapseMem" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingMem">
                                    <!-- for memory panel -->
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item">{{_("Available memory")}} <span class="pull-right label label-pill label-info">{% raw '{{ mem_available }}' %}MB</span></li>
                                        <li class="list-group-item">{{_("Total memory")}}  <span class="pull-right label label-pill label-success">{% raw '{{ mem_total }}' %}MB</span></li>
                                        <li class="list-group-item">{{_("Usage information")}} <span class="pull-right label label-pill label-danger">{% raw '{{ mem_usage }}' %}%</span></li>
                                    </ul>


                                    <div class="progress">
                                        <progress v-bind:value="mem_usage" class=" progress-bar progress-danger" max="100">{% raw '{{ mem_usage }}' %}</progress>

                                    </div>


                                </div>
                            </div>

                            <!-- third panel -->
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="headingNet">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseNet" aria-expanded="true" aria-controls="collapseNet">
                                            {{_("Network")}}<i class="fa fa-angle-double-right" aria-hidden="true"></i>
                                        </a>
                                    </h4>
                                </div>

                                <div id="collapseNet" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingNet">
                                    <!-- for network panel -->
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item"><span class="fa fa-chevron-up  "></span>{{_("Sent bytes")}}<span class="pull-right label label-pill label-info">{% raw '{{ ntw_sent }}' %}MB</span></li>
                                        <li class="list-group-item"><span class="fa fa-chevron-down"></span>{{_("Receive bytes")}}<span class="pull-right label label-pill label-success">{% raw '{{ ntw_recv }}' %}MB</span></li>
                                    </ul>


                                </div>
                            </div>
                            <!-- end -->

                            <!-- forth panel -->
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="headingSys">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseSys" aria-expanded="true" aria-controls="collapseSys">
                                            {{_("System information")}}<i class="fa fa-angle-double-right" aria-hidden="true"></i>
                                        </a>
                                    </h4>
                                </div>

                                <div id="collapseSys" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingSys">
                                    <!-- sys Info -->
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item">{{_("OS")}} <span class="pull-right">{{ system }}</span></li>
                                        <li class="list-group-item">{{_("Username")}} <span class="pull-right">{{ node }}</span></li>
                                        <li class="list-group-item">{{_("Release")}} <span class="pull-right">{{ release }}</span></li>
                                        <li class="list-group-item">{{_("Version")}} <span class="pull-right">{{ version }}</span></li>
                                        <li class="list-group-item">{{_("Machine code")}} <span class="pull-right">{{ machine }}</span></li>
                                        <li class="list-group-item">{{_("Processor")}} <span class="pull-right">{{ processor }}</span></li>
                                    </ul>


                                </div>
                            </div>
                            <!-- end -->


                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


{% end %}

{% block footerJS %}
<script src="{{ static_url('js/manage/manageView.js') }}"></script>



<script type="application/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    function getHardwareInfo(){
        xhr = $.ajax({
            url:"{{ reverse_url('tjango.contrib.admin.views.statusAPIHandler') }}",
            // data which api server can accept
            data:{

                // no parameter needed
            },
            dataType:"json",
            type:"GET",
            cache: false,
            success: function (data) {
                // distribute value
                overView.usedCPURate = data.cpu;
                overView.mem_usage = data.memory;
                overView.mem_available = parseInt(overView.mem_total * overView.mem_usage /100);
                overView.ntw_sent = parseInt(data.net_sent/1024/1024);
                overView.ntw_recv = parseInt(data.net_recv/1024/1024);
                // draw pic
                option.series[0].data[0].value = data.cpu;
                option.series[0].data[1].value = 100-data.cpu;
                option.series[1].data[0].value = data.memory;
                option.series[1].data[1].value = 100-data.memory;
                myChart.setOption(option);
                //option.series[0].data[0].value = data.cpu.toFixed(2);
                myChart.setOption(option, true);
                // render history output
                historyOption.series[0].data.push(genHistoryData(data.cpu,'CPU'));
                historyOption.series[1].data.push(genHistoryData(data.memory,'内存'));
                historyChart.setOption(historyOption,true);
                //console.log(historyOption.series);

            },
            error:function (xhr, ajaxOptions, thrownError){
                console.error(xhr.status);
                console.error(thrownError);
            }
        });
    }

    /*
     * for websocket
     * */
    if (location.protocol == 'https:'){
        // use safer protocol
        var wsProtocol = 'wss:'
    }
    else{
        var wsProtocol = 'ws:'
    }
    var statusURL = wsProtocol+'//'+location.hostname+':'+location.port+'{{ reverse_url('tjango.contrib.admin.views.statusWebsocketAPIHandler') }}';
    var statusWS = new WebSocket(statusURL);

    statusWS.onerror=function(event){
        setTimeout(function() {
            toastr.options = {
                closeButton: true,
                progressBar: true,
                showMethod: 'slideDown',
                timeOut: 10000
            };
            toastr.error('请刷新网页试试','无法连接到Websocket服务器');
        }, 1300);
        console.error("Error: " + event);
    };

    statusWS.onclose = function(){
        setTimeout(function() {
            toastr.options = {
                closeButton: true,
                progressBar: true,
                showMethod: 'slideDown',
                timeOut: 10000
            };
            toastr.warning('','{{_("websocket disconnected")}}');
        }, 1300);
    console.log('Disconnected');
    };

    statusWS.onopen = function(){
        // auth
        setTimeout(function() {
            toastr.options = {
                closeButton: true,
                progressBar: true,
                showMethod: 'slideDown',
                timeOut: 10000
            };
            toastr.success('','{{_("Websocket started")}}');
        }, 1300);
        statusWS.send('1');
    };

    statusWS.onmessage = function(event){
        data = JSON.parse(event.data);
        // distribute value
        overView.usedCPURate = data.cpu;
        overView.mem_usage = data.memory;
        overView.mem_available = parseInt(overView.mem_total * overView.mem_usage /100);
        overView.ntw_sent = parseInt(data.net_sent/1024/1024);
        overView.ntw_recv = parseInt(data.net_recv/1024/1024);
        // draw pic
        option.series[0].data[0].value = data.cpu;
        option.series[0].data[1].value = 100-data.cpu;
        option.series[1].data[0].value = data.memory;
        option.series[1].data[1].value = 100-data.memory;
        myChart.setOption(option);
        //option.series[0].data[0].value = data.cpu.toFixed(2);
        myChart.setOption(option, true);
        // render history output
        historyOption.series[0].data.push(genHistoryData(data.cpu,'CPU'));
        historyOption.series[1].data.push(genHistoryData(data.memory,'内存'));
        historyChart.setOption(historyOption);
    };

    function getHardWareInfoByWS(){
        // just to send information
        if (statusWS.readyState !=1){
            setTimeout(function() {
                toastr.options = {
                    closeButton: true,
                    progressBar: true,
                    showMethod: 'slideDown',
                    timeOut: 10000
                };
                toastr.error('。','{{_("Websocket closed")}}');
            }, 1300);
        }
        try{
            statusWS.send('1');
        } catch (e){

            console.log(e);
        }
    }

    function isSupWS(){
        return !!window.WebSocket && window.WebSocket.prototype.send;
    }
    /*
     * end websocket
     * */



    // component
    var overView = new Vue({
        el:'#overview-info',
        data:{
            usedCPURate:'{{ usedCPURate }}',
            mem_available:'{{ mem.available/1024/1024 }}',
            mem_total:'{{ mem.total/1024/1024 }}',
            mem_usage:'{{ mem.available * 100/mem.total }}',
            ntw_sent:'{{ network.bytes_sent/1024/1024 }}',
            ntw_recv:'{{ network.bytes_recv/1024/1024 }}',

        },
        watch:{
            usedCPURate:function(val){
                // redraw echart picture
                var value = val;

            }
        },
        computed :{
            websocket_support:function(){
                return isSupWS();
            },
            websocket_unsupport:function() {
                return !this.websocket_support;

            }
        }
    });

    // draw a picture
    var dataStyle = {
        normal: {
            label: {show:false},
            labelLine: {show:false},
            shadowBlur: 40,
            shadowColor: 'rgba(40, 40, 40, 0.5)',
        }
    };
    var placeHolderStyle = {
        normal : {
            color: 'rgba(0,0,0,0)',
            label: {show:false},
            labelLine: {show:false}
        },
        emphasis : {
            color: 'rgba(0,0,0,0)'
        }
    };
    option = {
        // backgroundColor: '#ffffff',
        color: ['#00AD7C', '#52D681','#B5FF7D','#FFF8B5'],
        tooltip : {
            show: true,
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            itemGap:12,
            data:['CPU','内存']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        series : [
            {
                name:'{{_("The rate of CPU cost")}}',
                type:'pie',
                clockWise:false,
                radius : ['80%','90%'],
                itemStyle : dataStyle,
                hoverAnimation: false,

                data:[
                    {
                        value:overView.usedCPURate,
                        name:'CPU'
                    },
                    {
                        value:100-overView.usedCPURate,
                        name:'invisible',
                        itemStyle : placeHolderStyle
                    }

                ]
            },
            {
                name:'{{_("Memory")}}',
                type:'pie',
                clockWise:false,
                radius : ['70%', '80%'],
                itemStyle : dataStyle,
                hoverAnimation: false,

                data:[
                    {
                        value:overView.mem_usage,
                        name:'{{_("Memory")}}'
                    },
                    {
                        value:100-overView.mem_usage,
                        name:'invisible',
                        itemStyle : placeHolderStyle
                    }
                ]
            }
        ]
    };
    // for history render data
    var historyCPUData = [genHistoryData(overView.usedCPURate,'CPU')];
    var historyMemData = [genHistoryData(overView.mem_usage,'内存')];
    var now = new Date();
    /*var historyDom = document.getElementById('history');
     var historyChart = echarts.init(historyDom);*/
    var historyOption = {
        title:{
            text:'{{_("The rate of CPU & memory cost")}}',
            subtext:'{{_("from")}}'+now.toString()
        },
        tooltip:{
            trigger:'axis',
            formatter:function (params){
                param = params[0];
                var date = new Date(param.name);
                var infoString = '';
                infoString += date.toLocaleString();
                for (var i = 0;i<params.length;i++){
                    param = params[i];
                    infoString += '<br/> * '+param.value[1];
                }

                return infoString;
            },
            axisPointer:{
                animation:false
            }
        },
        legend:{
            data:['CPU','{{_("memory")}}']
        },
        xAxis:{
            type:'time',
            splitLine:{
                show:false
            }
        },
        yAxis:{
            type:'value',
            splitLine:{
                show:false
            }
        },
        dataZoom: [
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                start: 0,      // 左边在 0% 的位置。
                end: 100         // 右边在 100% 的位置。
            },
            {   // 这个dataZoom组件，也控制x轴。
                type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                start: 0,      // 左边在 0% 的位置。
                end: 100       // 右边在 80% 的位置。
            },
            {
                type: 'slider',
                yAxisIndex: 0,
                start: 0,
                end: 100
            },
            {
                type: 'inside',
                yAxisIndex: 0,
                start: 0,
                end: 100
            }
        ],
        series:[
            {
                name:'CPU',
                type:'line',
                showSymbol:false,
                data:historyCPUData
            },
            {
                name:'内存',
                type:'line',
                showSymbol:false,
                data:historyMemData
            }
        ]
    };

    function genHistoryData(val,name){
        var now = new Date();

        return {
            value:[
                now,
                val
            ],
            name:now.toString()
        }

    }

    $(document).ready(function(){
        if (option && typeof option == "object"){
            var dom = document.getElementById('main');
            dom.style.width = '100%';
            dom.style.height = '30rem';
            myChart = echarts.init(dom);

            myChart.setOption(option,true);

        }
        if (historyOption && typeof historyOption == 'object'){
            // for history chart.
            historyDom = document.getElementById('history');
            historyDom.style.width='100%';
            historyDom.style.height = '30rem';
            historyChart = echarts.init(historyDom);
            historyChart.setOption(historyOption);
        }

        // myChart.setOption(option);
        dynamicGetInfo();
    });

</script>
{% end %}