Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 6c624504b2
Fetching contributors…

Cannot retrieve contributors at this time

258 lines (253 sloc) 16.499 kb
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Collectd-web</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="app-mobile-web-app-capable" content="yes" />
<link type="image/png" href="media/images/shortcut-icon.png" rel="icon"/>
<link rel="stylesheet" href="media/css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="media/css/blueprint/print.css" type="text/css" media="print">
<link rel="stylesheet" href="media/css/blueprint/print.css" type="text/css" media="print">
<link rel="stylesheet" href="media/css/custom-theme/jquery-ui-1.8.custom.css" type="text/css" media="screen, projection">
<!--[if IE]><link rel="stylesheet" href="media/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="media/css/base.css" type="text/css" media="screen, projection">
<script type="text/javascript" src="media/js/external/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="media/js/jquery.livequery.js"></script>
<script type="text/javascript" src="media/js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="media/js/jquery.jclock.js"></script>
<script type="text/javascript" src="media/js/external/date.js"></script>
<script type="text/javascript" src="media/js/jquery.validate.pack.js"></script>
<script type="text/javascript" src="media/js/base.js"></script>
<script type="text/javascript" src="media/js/graph-menu.js"></script>
</head>
<body>
<div id="ruler"></div>
<div id="slide-menu-container" class="ui-widget container">
<div id="slide-menu-content" class="ui-widget-content column span-22 append-1 prepend-1">
<div id="menu-tabs">
<ul>
<li><a href="#graphdefs-tab">Graph Definitions</a> </li>
<li><a href="#tab2">Clocks</a> </li>
<li><a href="#options-tab">Options</a> </li>
<li><a href="#about-tab">About</a> </li>
</ul>
<div id="graphdefs-tab">
<div class="container">
<div class="column span-20">
<div class="span-10">
<button class="button" id="load-graphdefs">Load definitions</button>
<p>
<label for="graphdef-name">Name</label>
<br/>
<select style="font-size:120%;" name="graphdef-name" id="graphdef-name"></select>
</p>
</div>
<div class="span-10 last">
<textarea name="graphdef-content" id="graphdef-content" cols="30" rows="10"></textarea>
</div>
</div>
</div>
</div>
<div id="tab2">
<div class="container">
<div class="column span-20">
<div class="span-10">
<h3>Local time</h3>
<div id="clock" class="clock-container"></div>
</div>
<div class="span-10 last no-bullets">
<h3>Server time</h3>
<div id="clock-server" class="clock-container"></div>
<ul id="new-clock-container"></ul>
<div style="display:none;">
<div id="clock-server-slider"></div>
<p>
<strong>Offset:</strong>
<span id="clock-server-gmt">0</span>
</p>
<form action="#" id="clock-server-add">
<input id="clock-server-add-label" class="text" type="text" value="label" />
<button type="submit">Add</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="options-tab" class="no-bullets">
<div class="container">
<div class="column span-20">
<div class="span-10">
<ul>
<li class="ttip">
<div class="ttip-content">
Check this option to see the ruler.
<br/>
This will enable you to compare different graphs at a given moment
</div>
<input value="Show ruler" type="checkbox" id="show-ruler-checkbox" />Show ruler
</li>
<li class="ttip">
<div class="ttip-content">
Set this option into an integer value.
<br/>
This will be used as the increment or decrement on moving timespans [FEATURE UNDER DEVELOPMENT]
</div>
<label for="graph-step">Graph step (in minutes) </label>
<input disabled value="10" name="graph-step" type="text" id="graph-step" class="text" />
</li>
<li class="ttip">
<div class="ttip-content">Set view options (list or grid) to customize your graphs display</div>
<label for="graph-view">View: </label>
<select name="graph-view" id="graph-view">
<option value="list" selected="selected">List</option>
<option value="grid">Grid</option>
</select>
</li>
<li class="ttip">
<div class="ttip-content">Setting this option will cache images for 5 minutes and lazyload when necessary</div>
<input value="Enable graph caching" type="checkbox" id="graph-caching-checkbox" />Enable graph caching and lazyloading
</li>
</ul>
</div>
<div class="span-10 last">
<div id="help-box" style="display:none;"></div>
</div>
</div>
</div>
</div>
<div id="about-tab">
<div class="container">
<div class="column span-20">
<div class="span-10">
<p>The main objective of this is to develop an easy to use and customizable web interface for Collectd (Resource monitoring software).</p>
<p>Two days of research where enough to realize that collectd didn't have a real frontend and the one bundled with the backend was really made for testing purposes, so much of the usablility and strength of statistics was left aside.</p>
</div>
<div class="span-10 last">
<ul>
<li>
<strong>Author:</strong>
Kenneth Belitzky
</li>
<li>
<strong>Contributors:</strong>
Thankfull to have too many contributions. See AUTHORS file
</li>
<li>
<strong>Homepage:</strong>
<a href="http://github.com/httpdss/collectd-web">http://github.com/httpdss/collectd-web</a>
</li>
<li>
<strong>Version:</strong>
0.4.0
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="slide-menu-btn" class="ui-widget-header ui-corner-bottom">
<h3>Menu</h3>
</div>
</div>
<div class='container header-content'>
<div class='column span-24'>
<div id="logo" class="span-6">
<h1>Collectd-web</h1>
</div>
<div class="span-17">
<img id="loading" alt="loading" src="media/images/loading.gif" style="display:none;"/>
</div>
</div>
</div>
<div class='container' style="margin-bottom:60px;">
<div class='column span-7'>
<div id="hosts" class="no-bullets ui-widget">
<div class="ui-widget-header ui-corner-top">
<h3>Hosts</h3>
</div>
<div id="hosts-container" class="ui-widget-content ui-corner-bottom ">
<input title="Filter by host" type="search" class="title" id="host-filter"/>
<ul></ul>
</div>
</div>
<div id="plugins" class="no-bullets ui-widget">
<ul></ul>
</div>
</div>
<div class='column last prepend-1 span-16'>
<div id="graph-container" class="no-bullets"></div>
</div>
</div>
<div class='container'>
</div>
<div class="container">
<div id="toolbar-container" class="ui-widget container">
<div id="toolbar-content" class="ui-widget-header ui-corner-top column span-22 append-1 prepend-1">
<span class="icons ui-state-default ui-corner-all"><span class="ui-icon ui-icon-home"></span></span>
<div class="toolbar-item menu-options" style="display:none;">
<span class="icons ui-state-default ui-corner-all icon-left"><span id="item-pan-zoom" class="ui-icon text-icon" title="Pan and Zoom options">Pan/Zoom</span></span>
<span class="icons ui-state-default ui-corner-all icon-right"><span id="item-timespan" class="ui-icon text-icon" title="Timespan options">Timespan</span></span>
</div>
<div class="toolbar-item item-pan-zoom">
<span class="icons ui-state-default ui-corner-all icon-left"><span class="ui-icon ui-icon-clock"></span></span>
<span class="icons ui-state-default ui-corner-all icon-middle"><span class="ts-item ui-icon text-icon" title="hour">H</span></span>
<span class="icons ui-state-default ui-corner-all icon-middle"><span class="ts-item ui-icon text-icon" title="day">D</span></span>
<span class="icons ui-state-default ui-corner-all icon-middle"><span class="ts-item ui-icon text-icon" title="week">W</span></span>
<span class="icons ui-state-default ui-corner-all icon-middle"><span class="ts-item ui-icon text-icon" title="month">M</span></span>
<span class="icons ui-state-default ui-corner-all icon-right"><span class="ts-item ui-icon text-icon" title="year">Y</span></span>
<span class="icons ui-state-default ui-corner-all icon-left"><span class="ui-icon ui-icon-triangle-1-w"></span></span>
<span class="icons ui-state-default ui-corner-all icon-middle"><span class="ui-icon ui-icon-triangle-1-e"></span></span>
<span class="icons ui-state-default ui-corner-all icon-middle"><span class="ui-icon ui-icon-zoomin"></span></span>
<span class="icons ui-state-default ui-corner-all icon-right"><span class="ui-icon ui-icon-zoomout"></span></span>
<span class="icons ui-state-default ui-corner-all icon-left"><span id="select-all" class="ui-icon text-icon" title="Select All">All</span></span>
<span class="icons ui-state-default ui-corner-all icon-right"><span id="select-none" class="ui-icon text-icon" title="Select None">None</span></span>
</div>
<div class="toolbar-item item-timespan" style="display:none;">
<form id="rrdeditor-form" action="">
<input placeholder="Start" required type="datetime-local" name="date_from" class="text timespan-from" />
<input placeholder="End" required type="datetime-local" name="date_to" class="text timespan-to" />
</form>
<span class="icons ui-state-default ui-corner-all"><span id="rrdeditor-submit" class="ui-icon ui-icon-check"></span></span>
</div>
</div>
</div>
</div>
<div id="output-dialog" class="no-bullets">
<ul>
<li>
<a href="&format=EPS" target="_blank" class="output-link">EPS</a>
</li>
<li>
<a href="&format=PDF" target="_blank" class="output-link">PDF</a>
</li>
<li>
<a href="&format=SVG" target="_blank" class="output-link">SVG</a>
</li>
</ul>
</div>
<div id="graph-menu-partial" style="display:none;">
<span class="gc-menu fg-toolbar ui-widget-header ui-corner-all ui-helper-clearfix" >
<span class="icons ui-state-default ui-corner-all"><span class="ui-icon ui-icon-triangle-1-w"></span></span>
<span class="icons ui-state-default ui-corner-all"><span class="ui-icon ui-icon-triangle-1-e"></span></span>
<span class="icons ui-state-default ui-corner-all"><span class="ui-icon ui-icon-zoomin"></span></span>
<span class="icons ui-state-default ui-corner-all"><span class="ui-icon ui-icon-zoomout"></span></span>
<span class="icons ui-state-default ui-corner-all"><span class="ui-icon ui-icon-disk"></span> </span>
<span class="icons ui-state-default ui-corner-all"><span class="ui-icon ui-icon-star"></span></span>
<span class="icons ui-state-default ui-corner-all"><span class="ui-icon ui-icon-close"></span></span>
</span>
<span class="selectable"></span>
</div>
<div class="graph-main-container">
<h2 class="hostname"></h2>
<ul class="graph-imgs-container"></ul>
</div>
<div id="error-msg" style="display:none;">
<p class="content"></p>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.