harmacist/healthchecks
1
0
Fork 0
forked from GithubBackups/healthchecks
Code Issues Pull Requests Projects Releases Wiki Activity

Log page redesign WIP

Browse Source
This commit is contained in:
Pēteris Caune 2018-08-17 11:40:45 +03:00
parent bf69e09dff
commit ea8e08acd2
No known key found for this signature in database
GPG Key ID: E28D7679E9A9EDE2
4 changed files with 207 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
hc/front/views.py
View File

@ -336,8 +336,13 @@ def log(request, code):
events = pings + list(alerts)
events.sort(key=lambda el: el.created, reverse=True)
channels = Channel.objects.filter(user=request.team.user)
channels = list(channels.order_by("created"))
ctx = {
"check": check,
"ping_endpoint": settings.PING_ENDPOINT,
"channels": channels,
"events": events,
"num_pings": min(num_pings, limit),
"limit": limit,

71
static/css/log.css
View File

@ -1,3 +1,74 @@
#details-head h1 {
margin-bottom: 4px;
}
#details-head {
margin-bottom: 24px;
}
#details-head-actions {
text-align: right;
vertical-align: middle;
}
.details-block .status {
font-size: 32px;
width: 40px;
}
.details-block {
margin-bottom: 36px;
border: 1px #aaa;
border-radius: 3px;
}
.details-block code {
display: block;
padding: 8px;
margin-bottom: 8px;
background: #f5f5f5;
}
#details-status td {
padding: 8px;
}
#log-schedule th {
padding-top: 4px;
}
#details-integrations th {
width: 40px;
text-align: center;
}
#log-schedule td {
padding: 4px 0 4px 8px;
}
#log-schedule th {
vertical-align: top;
font-weight: normal;
text-align: right;
}
#log-schedule .value {
font-weight: bold;
}
#log-schedule .subtitle {
color: #999;
}
#details-remove-check {
border-color: #d43f3a;
color: #d43f3a;
background: #FFF;
}
#format-switcher-container:before {
content: " ";
}

146
templates/front/log.html
View File

@ -7,28 +7,138 @@
{% block content %}
<div class="row">
<div class="col-sm-12">
<ol class="breadcrumb">
<li><a href="{% url 'hc-checks' %}">Checks</a></li>
<li>{{ check.name_then_code }}</li>
<li class="active">Log</li>
<div id="details-head" class="col-sm-12">
<h1>
{{ check.name_then_code }}
<button class="btn btn-sm btn-default">Edit</button>
</h1>
{% for tag in check.tags_list %}
<span class="label label-tag">{{ tag }}</span>
{% endfor %}
</div>
<li id="format-switcher-container" class="pull-right">
<div id="format-switcher" class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-xs" data-format="utc">
<input type="radio" name="date-format" checked>
UTC
</label>
<label class="btn btn-default btn-xs active" data-format="local">
<input type="radio" name="date-format">
Local Time
</label>
</div>
</li>
</ol>
<div class="col-sm-6">
<div class="details-block">
<h2>Description
<small><a href="#">edit</a></small>
</h2>
<p>This is for monitoring our fancy backup script.</p>
<p>The script runs on a $5 VM and sometimes runs out of memory and crashes.
If this happens, contact Ed and ask him to restart it.</p>
</div>
<div class="details-block">
<h2>How To Ping</h2>
<div>
<p>Keep this check up by making HTTP requests to this URL:</p>
<code>{{ check.url }}</code>
<p>Or by sending emails to this address:</p>
<code>{{ check.email }}</code>
</div>
<div class="text-right">
<button class="btn btn-sm btn-default">Copy URL</button>
<button class="btn btn-sm btn-default">Copy Email</button>
<button class="btn btn-sm btn-default">Usage Examples</button>
</div>
</div>
<div class="details-block">
<h2>Current Status</h2>
<table>
<tr>
<td>
<span class="status icon-{{ check.get_status }}"></span>
</td>
<td>
This check is down. Last ping was {{ check.last_ping|naturaltime }}.
</td>
</tr>
</table>
<div class="text-right">
<button class="btn btn-sm btn-default">Pause</button>
<button class="btn btn-sm btn-default">Ping Now!</button>
</div>
</div>
<div class="details-block">
<h2>Schedule</h2>
<table id="log-schedule">
<tr>
<th>Period</th>
<td>
<span class="value">{{ check.timeout|hc_duration }}</span>
<div class="subtitle">
(Expected time between pings)
</div>
</td>
</tr>
<tr>
<th>Grace Time</th>
<td>
<span class="value">{{ check.grace|hc_duration }}</span>
<div class="subtitle">
(When a check is late, how long to wait until an alert is sent)
</div>
</td>
</tr>
</table>
<div class="text-right">
<button class="btn btn-sm btn-default">Change Schedule</button>
</div>
</div>
<div class="details-block">
<h2>Notification Methods</h2>
<table id="details-integrations" class="table">
{% for channel in channels %}
<tr>
<th>
{% if channel in check.channel_set.all %}
<span class="label label-success">ON</span>
{% else %}
<span class="label label-default">OFF</span>
{% endif %}
</th>
<td>
<span class="icon-{{ channel.kind }}"></span>
{{ channel }}
</td>
</tr>
{% endfor %}
</table>
</div>
<div class="details-block">
<h2>Remove</h2>
<p>Permanently remove this check from your account.</p>
<div class="text-right">
<button id="details-remove-check" class="btn btn-sm btn-default">Remove This Check</button>
</div>
</div>
</div>
<div class="col-sm-6">
{% if events %}
<h2>
Log
<small>Click on individual items for details</small>
<div id="format-switcher" class="btn-group pull-right" data-toggle="buttons">
<label class="btn btn-default btn-xs" data-format="utc">
<input type="radio" name="date-format" checked>
UTC
</label>
<label class="btn btn-default btn-xs active" data-format="local">
<input type="radio" name="date-format">
Local Time
</label>
</div>
</h2>
<div class="table-responsive">
<table class="table" id="log">
{% for event in events %}

7
templates/front/my_checks_desktop.html
View File

@ -113,13 +113,12 @@
<span class="icon-settings" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a class="show-log" href="#">Details and Log</a>
</li>
<li class="pause-li" {% if check.status == "new" or check.status == "paused" %}class="disabled"{% endif %}>
<a href="#">Pause Monitoring</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a class="show-log" href="#">Log</a>
</li>
<li>
<a href="#" class="usage-examples">Usage Examples</a>
</li>