Skip to content

Instantly share code, notes, and snippets.

@trentster
Created January 1, 2013 03:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save trentster/4425073 to your computer and use it in GitHub Desktop.
Save trentster/4425073 to your computer and use it in GitHub Desktop.
<!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">&times;</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">&times;</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 &nbsp</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 &nbsp</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 &nbsp</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 &nbsp</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 &nbsp</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 &nbsp</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 &nbsp</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">&times;</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 &nbsp</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 &nbsp</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 &nbsp</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 % &nbsp</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">&times;</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 &nbsp</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">&times;</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">&times;</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">
&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