Created
January 1, 2013 03:38
-
-
Save trentster/4425073 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<!-- BEGIN head section --> | |
<head> | |
<title>FiFo Admin</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta name="description" content="Project FiFo administrative console"> | |
<meta name="author" content="http://project-fifo.net"> | |
<!-- Bootstrap --> | |
<link href="css/bootstrap.css" rel="stylesheet" media="screen"> | |
<link href="css/bootstrap-responsive.css" rel="stylesheet"> | |
<link href="css/glyphicons.css" rel="stylesheet" media="screen"> | |
<link href="css/application.css" rel="stylesheet" media="screen"> | |
</head> | |
<!-- END head section --> | |
<!-- BEGIN body section --> | |
<body class="login-body"> | |
<div class="navbar navbar-inverse navbar-fixed-top" style="display: none;" id="nav-bar"> | |
<div class="navbar-inner"> | |
<div class="container-fluid"> | |
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</a> | |
<a class="brand" href="#"><img src="img/PF.png" style="height: 30px;" alt="Project FiFo"/></a> | |
<div class="nav-collapse collapse"> | |
<p class="navbar-text pull-right"> | |
Logged in as <a href="#" id="logged-in-user" class="navbar-link">Username</a> | | |
<a href="#" id="log-out" class="navbar-link">Log out</a> | |
</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div id="config-error" class="alert alert-block alert-error" style="margin: 0px 20% 40px 20%"> | |
<strong>Attention!</strong> | |
You have not set up any custom monitoring paramaters for this status page!<br/> | |
Please look at js/config.js.example and copy the file to<br/> | |
js/config.js then adjust the values to your configuration! | |
</div> | |
<div class="container" id="login"> | |
<form class="form-signin" id="login-form"> | |
<h2 class="form-signin-heading">Please sign in</h2> | |
<input id="login-name" type="text" class="input-block-level" placeholder="Login"> | |
<input id="login-pass" type="password" class="input-block-level" placeholder="Password"> | |
<button class="btn btn-large btn-primary" type="submit">Sign in</button> | |
</form> | |
</div> <!-- /container --> | |
<div class="container-fluid" id="ui" style="display: none"> | |
<div class="tabs-left"> | |
<ul class="nav nav-tabs" id="MainTabs" data-spy="affix"> | |
<li class="active"><a href="#status" data-toggle="tab" class="glyphicons camera"><i></i>Status</a></li> | |
<li><a href="#dashboard" data-toggle="tab" class="glyphicons dashboard"><i></i>Dashboard</a></li> | |
<li><a href="#virtual-machines" data-toggle="tab" class="glyphicons display"><i></i>Virtual Machines</a></li> | |
<li><a href="#hypervisors" data-toggle="tab" class="glyphicons cloud"><i></i>Hypervisors</a></li> | |
<li><a href="#networks" data-toggle="tab" class="glyphicons share_alt"><i></i>Networks</a></li> | |
<li><a href="#datasets" data-toggle="tab" class="glyphicons hdd"><i></i>Datasets</a></li> | |
<li><a href="#packages" data-toggle="tab" class="glyphicons cargo"><i></i>Packages</a></li> | |
<li><a href="#groups" data-toggle="tab" class="glyphicons group"><i></i>Groups</a></li> | |
<li><a href="#users" data-toggle="tab" class="glyphicons user"><i></i>Users</a></li> | |
</ul> | |
<!-- Status Pane --> | |
<div class="tab-content" style="margin-left:170px"> | |
<div class="tab-pane active" id="status"> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<hr/> | |
</div> | |
</div> | |
<div class="row-fluid"> | |
<div class="span4"> | |
<img id="health" src="img/unhealthy-cluster.png"></img> | |
</div> | |
<div class="span4" style="margin-top: 40px"> | |
<h2 id="cloud-state">Your cloud needs some attention</h2> | |
<hr/> | |
Hypervisors: <span id="hypervisor-count"></span></br> | |
Total Memory: <span id="total-memory"></span>MB</br> | |
Free Memory: <span id="free-memory"></span>MB</br> | |
Provisioned Memory: <span id="provisioned-memory"></span>MB</br> | |
<hr/> | |
<!-- Status Pane Version Numbers--> | |
<span style="font-size:11px"><b>Wiggle</b> build: </span><span style="font-size: 10px" id="wiggle-version"></span><br/> | |
<span style="font-size:11px"><b>Sniffle</b> build: </span><span style="font-size: 10px" id="sniffle-version"></span><br/> | |
<span style="font-size:11px"><b>Snarl</b> build: </span><span style="font-size: 10px" id="snarl-version"></span><br/> | |
<span style="font-size:11px"><b>Howl</b> build: </span><span style="font-size: 10px" id="howl-version"></span><br/> | |
</div> | |
<div class="span12" style="font-size:50%"> | |
This is a shameless plug from <a href="http://basho.com/products/riak-control/">Basho's riak control</a>. Thanks guys! | |
</div> | |
</div> | |
<div class="row-fluid"> | |
<div class="span12" id="messages"> | |
<table class="table"> | |
<thead> | |
<tr> | |
<th>Category</th> | |
<th>Element</th> | |
<th>Message</th> | |
</tr> | |
</thead> | |
<tbody> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
</div> | |
<!-- Dashboard Pane --> | |
<div class="tab-pane" id="dashboard"> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<hr/> | |
</div> | |
<div class="row-fluid"> | |
<div id="ram-usage-container" class="span4" style="text-align: center;"> | |
<h4 >Memory usage</h4> | |
<div id="ram-usage" style="width:300px; height:300px"></div> | |
</div> | |
<div id="arc1-stat-container" class="span4" style="text-align: center;"> | |
<h4>ARC usage</h4> | |
<div id="arc1-stat" style="width:300px; height:300px"></div> | |
</div> | |
<div id="arc2-stat-container" class="span4" style="text-align: center;"> | |
<h4>L2ARC usage</h4> | |
<div id="arc2-stat" style="width:300px; height:300px"></div> | |
</div> | |
<div id="disk-usage-container" class="span4" style="text-align: center;"> | |
<h4>Disk usage</h4> | |
<div id="disk-usage" style="width:300px; height:300px"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Virtual Machines Pane --> | |
<div class="tab-pane" id="virtual-machines"> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<h3>Virtual Machines<a style="float: right" href="#" class="btn btn-success btn-mini"><i class="icon-white icon-plus"></i> add a VM</a></h3> | |
<hr/> | |
<div class="progress progress-striped active"> | |
<div class="bar" style="width: 0%;"></div> | |
</div> | |
</div> | |
</div> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<table class="table table-hover"> | |
<thead> | |
<tr> | |
<th>Alias</th> | |
<th>UUID</th> | |
<th>IPs</th> | |
<th>Memory</th> | |
<th>CPU</th> | |
<th>Quota</th> | |
<th>Hypevisor</th> | |
<th>State</th> | |
<th class="span2">Actions</th> | |
</tr> | |
</thead> | |
<tbody> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
</div> | |
<!-- Hypervisors Pane --> | |
<div class="tab-pane" id="hypervisors"> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<h3>Hypervisors</h3> | |
<hr/> | |
<div class="progress progress-striped active"> | |
<div class="bar" style="width: 0%;"></div> | |
</div> | |
</div> | |
</div> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<table class="table table-hover"> | |
<thead> | |
<tr> | |
<th>Name</th> | |
<th>Memory</th> | |
<th>Provisioned</th> | |
<th>Free</th> | |
<th>Network Tags</th> | |
<th>Capabilities</th> | |
</tr> | |
</thead> | |
<tbody> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
</div> | |
<!-- Networks Pane --> | |
<div class="tab-pane" id="networks"> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<h3>Networks<a style="float: right" href="#" class="btn btn-success btn-mini"><i class="icon-white icon-plus"></i> add a Network</a></h3> | |
<hr/> | |
<div class="progress progress-striped active"> | |
<div class="bar" style="width: 0%;"></div> | |
</div> | |
</div> | |
</div> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<table class="table table-hover"> | |
<thead> | |
<tr> | |
<th>Name</th> | |
<th>Tag</th> | |
<th>Network</th> | |
<th>Gateway</th> | |
<th>Subnet Mask</th> | |
<th>Range-Start</th> | |
<th>Next</th> | |
<th>Range-End</th> | |
<th>Returned</th> | |
<th class="span1">Actions</th> | |
</tr> | |
</thead> | |
<tbody> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
</div> | |
<!-- Datasets Pane --> | |
<div class="tab-pane" id="datasets"> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<h3>Datasets</h3> | |
<hr/> | |
<div class="progress progress-striped active"> | |
<div class="bar" style="width: 0%;"></div> | |
</div> | |
</div> | |
</div> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<table class="table table-hover"> | |
<thead> | |
<tr> | |
<th>Name</th> | |
<th>UUID</th> | |
<th>Type</th> | |
<th>Networks</th> | |
</tr> | |
</thead> | |
<tbody> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
</div> | |
<!-- Packages Pane --> | |
<div class="tab-pane" id="packages"> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<h3>Packages<a style="float: right" href="#" class="btn btn-success btn-mini"><i class="icon-white icon-plus"></i> add a Package</a></h3> | |
<hr/> | |
<div class="progress progress-striped active"> | |
<div class="bar" style="width: 0%;"></div> | |
</div> | |
</div> | |
</div> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<table class="table table-hover"> | |
<thead> | |
<tr> | |
<th>Name</th> | |
<th>Ram</th> | |
<th>Quota</th> | |
<th>CPU Cap</th> | |
<th class="span1">Actions</th> | |
</tr> | |
</thead> | |
<tbody> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
</div> | |
<!-- Groups Pane --> | |
<div class="tab-pane" id="groups"> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<h3>Groups<a style="float: right" href="#" class="btn btn-success btn-mini"><i class="icon-white icon-plus"></i> add a Group</a></h3> | |
<hr/> | |
<div class="progress progress-striped active"> | |
<div class="bar" style="width: 0%;"></div> | |
</div> | |
</div> | |
</div> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<table class="table table-hover"> | |
<thead> | |
<tr> | |
<th>Name</th> | |
<th>Permissions</th> | |
<th class="span1">Actions</th> | |
</tr> | |
</thead> | |
<tbody> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
<div class="details row-fluid" style="display: none;"> | |
<div class="span12"> | |
<hr/> | |
<b><span name="group-name"></span></b><br/> | |
<table class="table" id="group-permissions-table"> | |
<thead> | |
<tr> | |
<th>Name</th> | |
<th class="span1">Actions</th> | |
</tr> | |
</thead> | |
<tbody> | |
</tbody> | |
</table> | |
<input type="text" id="group-permission-input"/> | |
<a href="#" class="btn" id="group-grant">Grant</a><br/> | |
</div> | |
</div> | |
</div> | |
<!-- Users Pane --> | |
<div class="tab-pane" id="users"> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<h3>Users<a style="float: right" href="#" class="btn btn-success btn-mini"><i class="icon-white icon-plus"></i> add a User</a></h3> | |
<hr/> | |
<div class="progress progress-striped active"> | |
<div class="bar" style="width: 0%;"></div> | |
</div> | |
</div> | |
</div> | |
<div class="row-fluid"> | |
<div class="span12"> | |
<table class="table table-hover"> | |
<thead> | |
<tr> | |
<th>Name</th> | |
<th>Groups</th> | |
<th>Permissions</th> | |
<th class="span1">Actions</th> | |
</tr> | |
</thead> | |
<tbody> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
<!-- User Attributes --> | |
<div class="row-fluid details" style="display: none;"> | |
<div class="span12"> | |
<hr/> | |
<b><span name="user-name"></span></b><br/> | |
<input type="password" id="user-pass-1"/> | |
<input type="password" id="user-pass-2"/> | |
<a href="#" class="btn" id="user-change-pass">Change Password</a><br/> | |
<table class="table" id="user-permissions-table"> | |
<thead> | |
<tr> | |
<th>Name</th> | |
<th class="span1">Actions</th> | |
</tr> | |
</thead> | |
<tbody> | |
</tbody> | |
</table> | |
<input type="text" id="user-permission-input"/> | |
<a href="#" class="btn" id="user-grant">Grant</a><br/> | |
<table class="table" id="user-groups-table"> | |
<thead> | |
<tr> | |
<th>Name</th> | |
<th>Permissions</th> | |
<th class="span1">Actions</th> | |
</tr> | |
</thead> | |
<tbody> | |
</tbody> | |
</table> | |
<select id="user-group-select"></select> | |
<a href="#" class="btn" id="user-join">Join</a><br/> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="modal hide fade" id="cmd"> | |
<div class="modal-body"> | |
<input class="input-block-level" type="text"/> | |
</div> | |
</div> | |
<!-- Create VM Modal --> | |
<div class="modal hide fade" id="create-virtual-machines"> | |
<div class="modal-header"> | |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | |
<h3>Provision a VM</h3> | |
</div> | |
<form id="create-virtual-machines-form" class="form-horizontal"> | |
<div class="modal-body"> | |
<fieldset> | |
<div class="control-group"> | |
<label class="control-label" for="vm-alias">Alias</label> | |
<div class="controls"> | |
<input type="text" id="vm-alias" name="vm-alias" placeholder="Alias"/> | |
</div> | |
</div> | |
<div class="control-group"> | |
<label class="control-label" for="vm-package">Package</label> | |
<div class="controls"> | |
<select id="vm-package" name="vm-package"></select> | |
</div> | |
</div> | |
<div class="control-group"> | |
<label class="control-label" for="vm-dataset">Dataset</label> | |
<div class="controls"> | |
<select id="vm-dataset" name="vm-dataset"></select> | |
</div> | |
</div> | |
<div class="control-group"> | |
<label class="control-label" for="vm-resolvers">Resolvers</label> | |
<div class="controls"> | |
<input type="text" id="vm-resolvers" name="vm-resolvers"/> | |
</div> | |
</div> | |
<div id="vm-net-mapping"> | |
</div> | |
<div class="control-group hide" id="vm-shh-key-group"> | |
<label class="control-label" for="vm-ssh_keys">SSH Keys</label> | |
<div class="controls"> | |
<textarea id="vm-ssh_keys" name="vm-ssh_keys"></textarea> | |
</div> | |
</div> | |
<div class="control-group hide" id="vm-pw-group"> | |
<label class="control-label" for="vm-root_pw">Root Password</label> | |
<div class="controls"> | |
<input type="text" id="vm-root_pw" name="vm-root_pw"> | |
</div> | |
<label class="control-label" for="vm-admin_pw">Admin Password</label> | |
<div class="controls"> | |
<input type="text" id="vm-admin_pw" name="vm-admin_pw"> | |
</div> | |
</div> | |
<div id="vm-custom-metadata"> | |
</div> | |
<hr/> | |
</fieldset> | |
</div> | |
<div class="modal-footer"> | |
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a> | |
<input type="submit" class="btn btn-primary" name="Create"/> | |
</div> | |
</form> | |
</div> | |
<!-- Create Network Modal --> | |
<div class="modal hide fade" id="create-networks"> | |
<div class="modal-header"> | |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | |
<h3>New Network</h3> | |
</div> | |
<form id="create-networks-form" class="form-horizontal"> | |
<div class="modal-body"> | |
<fieldset> | |
<div class="control-group"> | |
<label class="control-label" for="network-name">Network Name  </label> | |
<input id="network-name" name="network-name" type="text" placeholder="name"> | |
</div> | |
<div class="control-group"> | |
<label class="control-label" for="network-tag">Network Tag  </label> | |
<input id="network-tag" name="network-tag" type="text" placeholder="valid nic tag as listed by `sysinfo`"> | |
</div> | |
<div class="control-group"> | |
<label class="control-label" for="network-network">Network  </label> | |
<input id="network-network" name="network-network" type="text" placeholder="eg. 10.1.1.0"> | |
</div> | |
<div class="control-group"> | |
<label class="control-label" for="network-gateway">Gateway  </label> | |
<input id="network-gateway" name="network-gateway" type="text" placeholder="eg. 10.1.1.1"> | |
</div> | |
<div class="control-group"> | |
<label class="control-label" for="network-netmask">Subnet Mask  </label> | |
<input id="network-netmask" name="network-netmask" type="text" placeholder="eg. 255.255.255.0"> | |
</div> | |
<div class="control-group"> | |
<label class="control-label" for="network-first">First IP  </label> | |
<input id="network-first" name="network-first" type="text" placeholder="eg. 10.1.1.100"> | |
</div> | |
<div class="control-group"> | |
<label class="control-label" for="network-last">Last Ip  </label> | |
<input id="network-last" name="network-last" type="text" placeholder="eg. 10.1.1.200"> | |
</div> | |
</fieldset> | |
</div> | |
<div class="modal-footer"> | |
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a> | |
<input type="submit" class="btn btn-primary" name="Create"/> | |
</div> | |
</form> | |
</div> | |
<!-- Create Package Modal --> | |
<div class="modal hide fade" id="create-packages"> | |
<div class="modal-header"> | |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | |
<h3>New Package</h3> | |
</div> | |
<form id="create-packages-form" class="form-horizontal"> | |
<div class="modal-body"> | |
<fieldset> | |
<div class="control-group"> | |
<label class="control-label" for="package-name">Package Name  </label> | |
<input id="package-name" name="package-name" type="text" class="span" placeholder="name"> | |
</div> | |
<div class="control-group"> | |
<label class="control-label" for="package-ram">Package RAM  </label> | |
<div class="input-append"> | |
<input id="package-ram" name="package-ram" type="text" class="" placeholder="ram"> | |
<span class="add-on">MB</span> | |
</div> | |
</div> | |
<div class="control-group"> | |
<label class="control-label" for="package-quta">Quota  </label> | |
<div class="input-append"> | |
<input id="package-quota" name="package-quota" type="text" class="" placeholder="quota"> | |
<span class="add-on">GB</span> | |
</div> | |
</div> | |
<div class="control-group"> | |
<label class="control-label" for="package-cpucap">CPU Share %  </label> | |
<div class="input-append"> | |
<input title="CPU cores in percent, 100% -> 1 core." id="package-cpucap" name="package-cpucap" type="text" class="" placeholder="percent"> | |
<span class="add-on">%</span> | |
</div> | |
</div> | |
</fieldset> | |
</div> | |
<div class="modal-footer"> | |
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a> | |
<input type="submit" class="btn btn-primary" name="Create"/> | |
</div> | |
</form> | |
</div> | |
<!-- Create Groups Modal --> | |
<div class="modal hide fade" id="create-groups"> | |
<div class="modal-header"> | |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | |
<h3>New Group</h3> | |
</div> | |
<form id="create-group-form" class="form-horizontal"> | |
<div class="modal-body"> | |
<fieldset> | |
<div class="control-group"> | |
<label class="control-label" for="group-pass">Group Name  </label> | |
<input id="group-name" name="group-name" type="text" placeholder="name"> | |
</div> | |
</fieldset> | |
</div> | |
<div class="modal-footer"> | |
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a> | |
<input type="submit" class="btn btn-primary" name="Create"/> | |
</div> | |
</form> | |
</div> | |
<!-- Create Users Modal --> | |
<div class="modal hide fade" id="create-users"> | |
<div class="modal-header"> | |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | |
<h3>New User</h3> | |
</div> | |
<form id="create-user-form" class="form-horizontal"> | |
<div class="modal-body"> | |
<fieldset> | |
<div class="control-group"> | |
<label class="control-label" for="user-name">User Name</label> | |
<div class="controls"> | |
<input id="user-name" name="user-name" type="text" placeholder="name"> | |
</div> | |
</div> | |
<div class="control-group"> | |
<label class="control-label" for="user-pass">User Password</label> | |
<div class="controls"> | |
<input id="user-pass" name="user-pass" type="password" placeholder="password"> | |
</div> | |
</div> | |
</fieldset> | |
</div> | |
<div class="modal-footer"> | |
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a> | |
<input type="submit" class="btn btn-primary" name="Create"/> | |
</div> | |
</form> | |
</div> | |
<!-- Confirm Delete Modal --> | |
<div class="modal hide fade" id="delete-confirm"> | |
<div class="modal-header"> | |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | |
<h3>Confirm VM Deletion</h3> | |
</div> | |
<div class="modal-body"> | |
<p> | |
<font color="red">Warning!</font> you are about to delete VM <b id="delete-uuid"></b> Are you 100% sure you really want to do this? | |
</p> | |
<p> | |
Clicking on Destroy here will mean this VM is gone forever! | |
</p> | |
</div> | |
<div class="modal-footer"> | |
<a href="#" data-dismiss="modal" class="btn">Cancel</a> | |
<a href="#" class="btn btn-danger">Destroy</a> | |
</div> | |
</div> | |
<!-- BEGIN footer section --> | |
<footer> | |
<hr> | |
<p class="copy"> | |
© <a href="http://project-fifo.net">Project FiFo</a> 2012</p> | |
<p class="credits">Design by <a href="http://www.davidtrindade.com" target="_blank">David Trindade</a></p> | |
</footer> | |
<!-- END footer section --> | |
<script src="js/jquery-latest.js"></script> | |
<script src="js/flot/jquery.flot.js"></script> | |
<script src="js/flot/jquery.flot.pie.js"></script> | |
<script src="js/jquery.validate.js"></script> | |
<script src="js/jquery.cookie.js"></script> | |
<script src="js/bootstrap.js"></script> | |
<script src="js/mousetrap.min.js"></script> | |
<script src="js/config.js"></script> | |
<script src="js/fifo.js"></script> | |
<script src="js/application.js"></script> | |
</body> | |
<!-- END body section --> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment