iapt-platform
/
mint
mirror da https://github.com/iapt-platform/mint.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
							<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="../../node_modules/jquery/dist/jquery.js"></script>

	<style type="text/css">

	.highcharts-figure, .highcharts-data-table table {
		flex:1;
		min-width: 220px; 
		max-width: 100%;
		margin: 1em auto;
	}

	.highcharts-data-table table {
		font-family: Verdana, sans-serif;
		border-collapse: collapse;
		border: 1px solid #EBEBEB;
		margin: 10px auto;
		text-align: center;
		width: 100%;
		max-width: 500px;
	}
	.highcharts-data-table caption {
		padding: 1em 0;
		font-size: 1.2em;
		color: #555;
	}
	.highcharts-data-table th {
		font-weight: 600;
		padding: 0.5em;
	}
	.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
		padding: 0.5em;
	}
	.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
		background: #f8f8f8;
	}
	.highcharts-data-table tr:hover {
		background: #f1f7ff;
	}
	.chart_head_1 {
		text-align: center;
		font-size: x-large;
		margin-bottom: 0;
		font-weight: bold;
	}
	.highcharts-data-label {
		font-size: small;
	}
	</style>


<script src="../../node_modules/highcharts/highcharts.js"></script>
<script src="../../node_modules/highcharts/highcharts-more.js"></script>
<script src="../../node_modules/highcharts/modules/exporting.js"></script>
<script src="../../node_modules/highcharts/modules/export-data.js"></script>
<script src="../../node_modules/highcharts/modules/accessibility.js"></script>

	<script src="../../node_modules/highcharts/modules/data.js"></script>
	<script src="../../node_modules/highcharts/modules/exporting.js"></script>

</head>
<body>
<h2>实时监控</h2>
<?php
require_once(__DIR__."/../config.php");
require_once(__DIR__."/../redis/function.php");
$redis = redis_connect();
if($redis){
    $key="pref-hour/api/";
    $apis = $redis->keys($key.'*');
    echo "<ol>";
    echo "<li><a href='showrealtime.php?api=all'>all</a></li>";
    foreach ($apis as  $value) {
        $api = substr($value,strlen($key));
        echo "<li><a  href='showrealtime.php?api={$api}'>".$api."</a></li>";
    }
    echo "</ol>";
}
?>
<div class="ld-row" style="display:none;">
	<label class="ld-label">
		Enable Polling
	</label>
	<input type="checkbox" checked="checked" id="enablePolling"/>
</div>
<div style="display:flex;">
    <div id='chart-1'></div>
    <div id='chart-2'></div>
</div>
<div style="display:flex;">
    <div id='chart-3'></div>
    <div id='chart-4'></div>
</div>
<div id='chart-3a'></div>
<div id='chart-5'></div>

<div id="chart-6"></div>


<script src="./showrealtime.js"></script>

<script>
<?php 
    if(isset($_GET["api"])){
        echo "apiName = '{$_GET["api"]}';";
    }else{
         echo "apiName = 'all';";
    }
    
?>

// Create the chart
createChart("chart-1",'总请求次数/分钟',apiName,'count');
createChart("chart-2",'总响应时间(毫秒/分钟)',apiName,'delay');
createChart("chart-3",'平均响应时间（毫秒/API）',apiName,'average');
create_live("chart-4","实时响应时间（毫秒/API）",apiName);
</script>
</body>
</html>