<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="description" content=""/>
    <meta name="author" content="ThemeBucket"/>
    <link rel="shortcut icon" href="#" type="image/png"/>

    <title>Directory</title>
    <style>


    </style>
    <!--Morris Chart CSS-->
    <link rel="stylesheet" href="/admin/js/morris-chart/morris.css"/>
    <link href="/admin/bootcss/style.css" rel="stylesheet"/>
    <link href="/admin/bootcss/style-responsive.css" rel="stylesheet"/>


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/admin/js/html5shiv.js"></script>
    <script src="/admin/js/respond.min.js"></script>
    <![endif]-->
</head>
<body style="background-color:gainsboro">

<input type="hidden" id="cid" name="cid" th:value="${cid}"/>


<!--body wrapper start-->
<div class="wrapper" >

    <div class="row" style="margin-top: 40px">
        <div class="col-sm-12">
            <div class="panel">
                <div class="panel-body p-states">
                    <div class="summary pull-left" style="line-height: 28px;">
                        <address style="float: left;font-style: normal;text-align: center; padding: 6px 20px; border-right: 1px solid #afafaf; ">
                            <a href="" data-placement="top" data-toggle="tooltip" class="fa fa-power-off tool-a"  style="color: #fff;text-decoration:none;"></a><br/>
                            机器名称<br/>
                            192.168.0.5<br/>
                            <!--  <abbr title="Phone">P:</abbr> (123) 456-7890 -->
                        </address>
                        <div style="float: left;padding: 6px 20px; ">
                            <span>cpu:1核</span><br/>
                            <span>memory:80M</span><br/>
                            <span>创建时间:2015-05-18</span><br/>
                            <a  onclick="javascript:gtour('/webdocker/index')" class="btn btn-xs btn-info">
                                返回上一级
                            </a>
                        </div>

                    </div>
                    <div id="expense" class="chart-bar"></div>
                    <div class="directory-info-row" style="display: inline-block;width:auto;margin-top: 50px;margin-left: 600px">

                        <ul class="social-links">

                            <li><a title="" data-placement="top"  rel="tooltip" class="tooltips" href="" data-original-title="play"><i class="fa fa-check"></i></a></li>
                            <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Twitter"><i class="fa fa-times"></i></a></li>
                            <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="LinkedIn"><i class="fa fa-trash"></i></a></li>
                            <li><a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Skype"><i class="fa fa-android"></i></a></li>
                        </ul>
                    </div>
                </div>

            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-sm-6" style="width: 46%;float: left">
            <section class="panel">
                <header class="panel-heading">
                    内存使用情况

                </header>
                <div class="panel-body">
                    <div id="graph-area-line"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-6" style="width: 47%;float: left">
            <section class="panel">
                <header class="panel-heading">
                 CPU使用情况

                </header>
                <div class="panel-body">
                    <div id="graph-line"></div>
                </div>
            </section>
        </div>
    </div>
</div>
<!--body wrapper end-->





<!-- Placed js at the end of the document so the pages load faster -->
<script src="/admin/js/jquery-1.10.2.min.js"></script>
<script src="/admin/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/admin/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/admin/js/bootstrap.min.js"></script>
<script src="/admin/js/modernizr.min.js"></script>
<script src="/admin/js/jquery.nicescroll.js"></script>

<!--Morris Chart-->
<script src="/admin/js/morris-chart/morris.js"></script>
<script src="/admin/js/morris-chart/raphael-min.js"></script>

<script>

    function gtour(url){
        window.location.href = url;
    }
    /*var day_data = [
        {"elapsed": "I", "value": 34},
        {"elapsed": "II", "value": 24},
        {"elapsed": "III", "value": 3},
        {"elapsed": "IV", "value": 12},
        {"elapsed": "V", "value": 13},
        {"elapsed": "VI", "value": 22},
        {"elapsed": "VII", "value": 5},
        {"elapsed": "VIII", "value": 26},
        {"elapsed": "IX", "value": 12},
        {"elapsed": "X", "value": 19}
    ];
    Morris.Line({
        element: 'graph-line',
        data: day_data,
        xkey: 'elapsed',
        ykeys: ['value'],
        labels: ['value'],
        lineColors:['#1FB5AD'],
        parseTime: false
    });*/

    $.post("/webdocker/cpumonitor",{cid:$("#cid").val()},function(datas){
        var dataObj=eval("("+datas+")");//转换为json对象
        //1周
        new Morris.Line({
            element: 'graph-line',
            data: dataObj,
            xkey: 'CREATEDATE',
            ykeys: ['CPU'],
            labels: ['CPU'],
            lineColors:['#1FB5AD'],
            parseTime: false
        });

        new Morris.Line({
            element: 'graph-area-line',
            data: dataObj,
            xkey: 'CREATEDATE',
            ykeys: ['MEMORY'],
            labels: ['MEMORY'],
            lineColors:['#1FB5AD'],
            parseTime: false
        });
    });

/*
    $.post("/webdocker/cpumonitor",{cid:$("#cid").val()},function(datas){
        var dataObj=eval("("+datas+")");//转换为json对象
        //1周
        new Morris.Line({
            element: 'graph-area-line',
            data: dataObj,
            xkey: 'CREATEDATE',
            ykeys: ['MEMORY'],
            labels: ['MEMORY'],
            lineColors:['#1FB5AD'],
            parseTime: false
        });
    });
*/
  /*  Morris.Bar({
        element: 'graph-area-line',
        data: [
            {x: '2011 Q1', y: 3, z: 2, a: 3},
            {x: '2011 Q2', y: 2, z: null, a: 1},
            {x: '2011 Q3', y: 0, z: 2, a: 4},
            {x: '2011 Q4', y: 2, z: 4, a: 3}
        ],
        xkey: 'x',
        ykeys: ['y', 'z', 'a'],
        labels: ['Y', 'Z', 'A'],
        barColors:['#414e62','#788ba0','#6dc5a3']


    });
*/


</script>

</body>
</html>