agendash
Version:
Agenda Dashboard
151 lines (141 loc) • 7.81 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Agendash</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/dashboard.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div id="sidebar">
<div class="sidebar-header">
<h1 class="page-title">Agendash</h1>
<div class="form-group">
<label for="overviewFilter">Filter by name</label>
<input type="text" class="overview-filter form-control">
</div>
<div class="form-group">
<label for="overviewFilter">Refresh interval (seconds)</label>
<input type="number" value="2" class="refresh-interval form-control">
</div>
</div>
<div id="job-overview-list"></div>
</div>
<div id="main-pane">
<div id="list-pane">
<div class="page-header">
<h2 id="active-title">
<span class="active-job"></span>
<small class="active-state"></small>
</h2>
<ul id="select-jobs" class="nav nav-pills">
<li role="presentation"><a role="button" data-action="select-all">Select all</a></li>
<li role="presentation"><a role="button" data-action="select-none">Select none</a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>Last run started</th>
<th>Next run starts</th>
<th>Last finished</th>
<th>Locked</th>
</tr>
</thead>
<tbody id="job-list"></tbody>
</table>
</div>
</div>
<div id="details-pane">
<h2 class="sub-header"><span class="number-selected">0</span> <small>selected</small></h2>
<button type="button" class="btn btn-danger btn-xs" data-action="requeue-jobs">Requeue selected</button>
<button type="button" class="btn btn-danger btn-xs pull-right" data-action="delete-jobs">Delete selected</button>
<hr />
<div id="details-list"></div>
</div>
</div>
</div>
<script type="text/template" id="overview-item-template">
<ul class="nav nav-sidebar">
<li data-state="">
<a class="text-muted" href="#">
<strong><%- displayName %></strong>
<span class="label label-default pull-right"><%- total %></span>
<div class="progress">
<div class="progress-bar progress-bar-info" style="flex-grow: <%- Math.log2(1 + scheduled) %>"></div>
<div class="progress-bar progress-bar-primary" style="flex-grow: <%- Math.log2(1 + queued) %>"></div>
<div class="progress-bar progress-bar-warning" style="flex-grow: <%- Math.log2(1 + running) %>"></div>
<div class="progress-bar progress-bar-success" style="flex-grow: <%- Math.log2(1 + completed) %>"></div>
<div class="progress-bar progress-bar-danger" style="flex-grow: <%- Math.log2(1 + failed) %>"></div>
</div>
</a>
</li>
<ul class="nav nav-sidebar">
<li data-state="scheduled"><a class="text-info" href="#">Scheduled<span class="label label-info pull-right"><%- scheduled %></span></a></li>
<li data-state="queued"><a class="text-primary" href="#">Queued<span class="label label-primary pull-right"><%- queued %></span></a></li>
<li data-state="running"><a class="text-warning" href="#">Running<span class="label label-warning pull-right"><%- running %></span></a></li>
<li data-state="completed"><a class="text-success" href="#">Completed<span class="label label-success pull-right"><%- completed %></span></a></li>
<li data-state="failed"><a class="text-danger" href="#">Failed<span class="label label-danger pull-right"><%- failed %></span></a></li>
</ul>
</ul>
</script>
<script type="text/template" id="job-item-template">
<td>
<% if (scheduled) { %><span class="label label-info">Scheduled</span><% } %>
<% if (queued) { %><span class="label label-info">Queued</span><% } %>
<% if (running) { %><span class="label label-warning">Running</span><% } %>
<% if (completed) { %><span class="label label-success">Completed</span><% } %>
<% if (failed) { %><span class="label label-danger">Failed</span><% } %>
</td>
<td>
<%- job.name %>
</td>
<td><% if (job.lastRunAt) { %><time datetime="<%- moment(job.lastRunAt).toISOString() %>"><%- moment(job.lastRunAt).fromNow() %></time><% } %></td>
<td><% if (job.nextRunAt) { %><time datetime="<%- moment(job.nextRunAt).toISOString() %>"><%- moment(job.nextRunAt).fromNow() %></time><% } %></td>
<td><% if (job.lastFinishedAt) { %><time datetime="<%- moment(job.lastFinishedAt).toISOString() %>"><%- moment(job.lastFinishedAt).fromNow() %></time><% } %></td>
<td><% if (job.lockedAt) { %><time datetime="<%- moment(job.lockedAt).toISOString() %>"><%- moment(job.lockedAt).fromNow() %></time><% } %></td>
</script>
<script type="text/template" id="job-item-details-template">
<div class="panel panel-default">
<div class="panel-heading">
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="panel-title"><%- job.name %></h3>
<% if (scheduled) { %><span class="label label-info">Scheduled</span><% } %>
<% if (queued) { %><span class="label label-info">Queued</span><% } %>
<% if (running) { %><span class="label label-warning">Running</span><% } %>
<% if (completed) { %><span class="label label-success">Completed</span><% } %>
<% if (failed) { %><span class="label label-danger">Failed</span><% } %>
</div>
<div class="panel-body">
<% if (job.lastRunAt) { %><p>Last run <time datetime="<%- moment(job.lastRunAt).toISOString() %>"><%- moment(job.lastRunAt).fromNow() %></time></p><% } %>
<% if (job.nextRunAt) { %><p>Next run <time datetime="<%- moment(job.nextRunAt).toISOString() %>"><%- moment(job.nextRunAt).fromNow() %></time></p><% } %>
<% if (job.lastFinishedAt) { %><p>Last finished <time datetime="<%- moment(job.lastFinishedAt).toISOString() %>"><%- moment(job.lastFinishedAt).fromNow() %></time></p><% } %>
<% if (job.lockedAt) { %><p>Locked <time datetime="<%- moment(job.lockedAt).toISOString() %>"><%- moment(job.lockedAt).fromNow() %></time></p><% } %>
<strong>Job data</strong>
<pre><%- JSON.stringify(job.data, null, 2) %></pre>
<% if (failed) { %>
<strong>Failure reason</strong>
<pre><%- JSON.stringify(job.failReason || '', null, 2) %></pre>
<% } %>
</div>
<div class="panel-footer clearfix">
<button type="button" class="btn btn-danger btn-sm" data-action="requeue">Requeue</button>
<button type="button" class="btn btn-danger btn-sm pull-right" data-action="delete">Delete permanently</button>
</div>
</div>
</script>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/lodash.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/backbone-min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>