github.com/ssetin/penguincast@v0.2.0/html/monitor.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3    <head>
     4  	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	
     5  	<link rel="stylesheet" type="text/css" href="/style.css" />
     6  	<link rel="shortcut icon" type="image/x-icon" href="/img/penguin.png" />
     7  	<title>{{.Props.Name}} Monitor</title>
     8  
     9  	<script type="text/javascript">
    10    		function drawBuffer(str){
    11  			var i=0;
    12  			var result="";
    13  			for (i=0;i<str.length;i++){
    14  				if(str[i]==1){
    15  					result+= "<span style='color:green'>█</span>"
    16  				} else {
    17  					result+= "<span style='color:red'>░</span>"
    18  				}
    19  			}
    20  			return result;  			
    21  		}
    22  	</script>
    23    </head>
    24    <body>
    25  		<script>			
    26  			function updateMonitor(msg) {        			
    27  				var idx;
    28  				for (idx = 0; idx < msg.Mounts.length; idx++) {
    29  					var UpTime = document.getElementById(msg.Mounts[idx].Name+".UpTime");
    30  					UpTime.textContent = msg.Mounts[idx].UpTime;
    31  					var Listeners = document.getElementById(msg.Mounts[idx].Name+".Listeners");
    32  					Listeners.textContent = msg.Mounts[idx].Listeners;
    33  					var bufferSize = document.getElementById(msg.Mounts[idx].Name+".Size");
    34  					bufferSize.textContent = msg.Mounts[idx].Buff.Size;
    35  					var InUse = document.getElementById(msg.Mounts[idx].Name+".InUse");
    36  					InUse.textContent = msg.Mounts[idx].Buff.InUse;
    37  					var SizeBytes = document.getElementById(msg.Mounts[idx].Name+".SizeBytes");
    38  					SizeBytes.textContent = Math.floor(msg.Mounts[idx].Buff.SizeBytes/1024);
    39  					var Graph = document.getElementById(msg.Mounts[idx].Name+".Graph");
    40  					Graph.innerHTML = drawBuffer(msg.Mounts[idx].Buff.Graph);
    41  					//{{ if .Props.Logging.UseStat }}
    42  					var CpuUse = document.getElementById("CPUUsage");
    43  					CpuUse.textContent = msg.CPUUsage;
    44  					var MemUse = document.getElementById("MemUsage");
    45  					MemUse.textContent = msg.MemUsage;
    46  					//{{ end }}
    47  				}
    48  			}
    49  				
    50  			conn = new WebSocket("ws://{{.Props.Host}}:{{.Props.Socket.Port}}/updateMonitor");
    51  			conn.onmessage = function (event) {
    52  				updateMonitor(JSON.parse(event.data));
    53  			};
    54  		</script>
    55  	<div>
    56  	    <img src="/img/penguin.png" class="left"/>
    57  		<h1 class="left mainheader">PenguinCast Monitor</h1>
    58  	</div><div class="clear"></div>
    59  		<div id="monContainer">
    60  				{{range .Props.Mounts}}
    61  				<table class="greyGridTable">
    62  					<tr>
    63  						<th><h3>{{.Name}}</h3></th>
    64  						<th></th>
    65  					</tr>
    66  					<tr>
    67  						<td>Uptime:</td>
    68  						<td id="{{.Name}}.UpTime"></td>
    69  					</tr>
    70  					<tr>
    71  						<td>Listeners:</td>
    72  						<td id="{{.Name}}.Listeners"></td>
    73  					</tr>
    74  					<tr>
    75  						<td>Buffer size, pages:</td>
    76  						<td id="{{.Name}}.Size"></td>
    77  					</tr>
    78  					<tr>
    79  						<td>Buffer used, pages:</td>
    80  						<td id="{{.Name}}.InUse"></td>
    81  					</tr>
    82  					<tr>
    83  						<td>Buffer size, Kb:</td>
    84  						<td id="{{.Name}}.SizeBytes"></td>
    85  					</tr>
    86  					<tr>
    87  						<td>Buffer, graph:</td>
    88  						<td id="{{.Name}}.Graph"></td>
    89  					</tr>					
    90  				</table>
    91  				{{end}}
    92  		</div>
    93  	<div id="footer">
    94  		Started at {{.StartedTime.Format "Jan 02, 2006 15:04:05"}}<br/>
    95  		{{ if .Props.Logging.UseStat }}
    96  		CPUUsage, %: <span id="CPUUsage"></span><br/>
    97  		MemUsage, KB: <span id="MemUsage"></span><br/>
    98  		{{ end }}
    99  		admin: <a href="mailto:{{.Props.Admin}}">{{.Props.Admin}}</a>, location: {{.Props.Location}}<br/>		
   100  	</div>
   101  	</body>
   102  </html>