1
0
forked from circlecloud/tera
tera/src/HTML/stat.html
2019-07-13 09:26:12 +08:00

383 lines
8.6 KiB
HTML

<!doctype html>
<html>
<head>
<title>Counters</title>
<meta charset='utf-8' />
<link rel="shortcut icon" href="/HTML/PIC/counters.png" type="image/png">
<link rel="stylesheet" type="text/css" href="/HTML/CSS/style.css">
</head>
<body>
<script>
window.RUN_CLIENT=1;
window.RUN_SERVER=0;
if(typeof global === 'object')
{
global.RUN_CLIENT=1;
global.RUN_SERVER=0;
}
</script>
<script type="text/javascript" src="/HTML/JS/coinlib.js"></script>
<script type="text/javascript" src="../HTML/JS/client.js"></script>
<script type="text/javascript">
var TabbleStat,TableError;
var PrevData;
function SetResult(Data)
{
if(!Data)
Data=PrevData;
if(!Data || !Data.result)
return;
PrevData=Data;
var arrnames=["10s","10m","total, avg"];
var arrmult=[10,10*60,Data.period*10];
for(var i=0;i<arrmult.length;i++)
{
if(arrmult[i]>Data.period)
arrmult[i]=Data.period;
arrmult[i]=arrmult[i]/10;
}
var arrdata=[Data.stats.Counter10S,Data.stats.Counter10M,Data.stats.Counter];
var arrerr=[Data.errors.Counter10S,Data.errors.Counter10M,Data.errors.Counter];
//drawChart(arrdata,arrnames,arrmult);
SetStat(TabbleStat,arrdata);
SetStat(TableError,arrerr);
}
function ClearTableStat(htmlTable)
{
for(var i=htmlTable.rows.length-1;i>0;i--)
htmlTable.deleteRow(i);
htmlTable.StatItem={};
}
function SetStat(htmlTable,arr)
{
var StrFilter = document.getElementById("idFilter").value;
var rows=htmlTable.rows;
if(!htmlTable.StatItem)
{
htmlTable.StatItem={};
htmlTable.StatItem["Total"]=rows[1];
}
if(0)
for(var i=1;i<rows.length;i++)
rows[i].Do=1;
for(var m=0;m<arr.length;m++)
{
var Data=arr[m];
var Sum=0;
for(var name in Data)
{
if(name.indexOf("MAX:")!==-1)
continue;
var Count=Data[name];
if(Count)
{
Sum+=parseInt(Count);
}
}
Data["Total"]=Sum;
for(var name in Data)
{
var item=htmlTable.StatItem[name];
if(!item)
{
//index=htmlTable.rows.length;
var item=htmlTable.insertRow(1);
htmlTable.StatItem[name]=item;
item.insertCell(0);
for(var n=0;n<arr.length;n++)
{
item.insertCell(n+1);
}
item.cells[0].innerText=name;
item.insertCell(arr.length);
item.cells[arr.length+1].innerHTML='<INPUT type="button" class="add" onclick="AddDiagram(\''+name+'\')" value="Add">';
}
var Count=Math.floor(Data[name]);
item.cells[m+1].innerText=Count;
//item.visibility="visible";
if(StrFilter.length>0 && name.indexOf(StrFilter)==-1)
item.style="display:none";
else
item.style="";
item.Do=0;
}
}
if(0)
for(var i=1;i<rows.length;i++)
if(rows[i].Do===1)
for(var j=1;j<rows[i].cells.length-1;j++)
rows[i].cells[j].innerText="";
}
function AddDiagram(Name)
{
var Str=localStorage["DiagramArr"];
if(!Str|| Str==="undefined")
Str="[]";
var DiagramArr=JSON.parse(Str);
var Item={name:Name,text:Name,value:0,red:"#1c6bb6"};
AddDiagramToArr(DiagramArr,Item);
localStorage["DiagramArr"]=JSON.stringify(DiagramArr)
localStorage["ExternSetDiagramArr"]=1;
}
var bPause;
var StatMode;
function SetPause(SetMode)
{
if(SetMode===undefined)
{
bPause=!bPause;
}
else
{
bPause=SetMode;
}
var item = document.getElementById("idRun");
if(bPause)
item.value="Continue view";
else
item.value="Pause view";
}
function SetStatMode()
{
if(!StatMode)
StatMode=0;
StatMode=(StatMode+1)%3;
GetData("SetStatMode",StatMode,function (Data)
{
});
}
function ClearStat()
{
GetData("ClearStat",{},function (Data)
{
ClearTableStat(TabbleStat);
ClearTableStat(TableError);
});
}
function SetStatInfo(Data)
{
var item = document.getElementById("idStatInfo");
var button = document.getElementById("idStatButton");
StatMode=Data.STAT_MODE;
if(StatMode===1)
{
item.innerText=" =Stat ON=";
button.value="Start detail stat"
}
else
if(StatMode===2)
{
item.innerText=" =Stat detail ON=";
button.value="Stop stat"
}
else
{
item.innerText=" =Stat OFF=";
button.value="Start stat"
}
}
//LIB
function GetStat()
{
if(bPause)
return;
GetData("GetAllCounters",{},function (Data)
{
SetResult(Data);
SetStatInfo(Data);
});
}
function OnSetFilter()
{
SetResult();
}
window.onload=function()
{
TabbleStat=document.getElementById("grid_stat");
TableError=document.getElementById("grid_error");
SetPause(0);
GetStat();
setInterval(GetStat,1000);
window.onkeydown = function (e)
{
if(e.keyCode===27)
{
window.close();
}
};
//document.body.className="univers "+localStorage["idSelStyle"];
}
</script>
<style type="text/css">
table
{
border-collapse: collapse;
}
.stat th, .stat td
{
border: 1px solid #000;
padding: 5px;
}
.stat td
{
width: 122px;
text-align: right;
}
.stat td:nth-child(1)
{
width: 220px;
}
.stat td:nth-child(5)
{
width: 50px;
}
.total
{
text-align: right;
font-weight: 600;
}
#topframeFind
{
z-index:1000;
position:fixed;
top:80px;
left:10px;
text-align: left;
width:1200px;
opacity: .7;
color: blue;
}
#topframe
{
z-index:1000;
position:absolute;
top:0px;
left:0px;
text-align: center;
width:600px;
}
#idRun, #idStatButton
{
width:100px;
}
</style>
<BR>
<div id="confirm_div" style="height: 0px;"></div>
<h2 align='center' >Performance counters</h2>
<DIV id="topframeFind">
Filter: <INPUT type="search" style="width: 292px" id="idFilter" autofocus onkeyup="OnSetFilter()" value="">
</DIV>
<BR>
<table id="grid_stat" class="stat">
<tr>
<th>Counters</th>
<th>10 sec</th>
<th>10 min</th>
<th>total</th>
<th>Diagr</th>
</tr>
<tr class="total">
<td>Total</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<BR>
<table id="grid_error" class="stat">
<tr>
<th>Errors</th>
<th>10 sec</th>
<th>10 min</th>
<th>total</th>
<th>Diagr</th>
</tr>
<tr class="total">
<td>Total</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<DIV id="topframe">
<INPUT type="button" style="float:left" onclick="SetPause()" id="idRun">
<INPUT type="button" style="float:left" onclick="ClearStat()" id="idClearStat" value="Clear stat">
<INPUT type="button" style="float:left" onclick="SetStatMode()" id="idStatButton">
<DIV align='left'><B id="idStatInfo"></B></DIV>
</DIV>
</body>
</html>