Skip to content

Commit

Permalink
improved summary page + filters for summary page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mtford90
mtford90 committed Jun 17, 2014
1 parent 96e1fc7 commit 57ed2f5
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 54 deletions.
6 changes: 2 additions & 4 deletions silk/templates/silk/base/root_base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,16 +312,14 @@ <h3>Active</h3>
<script src="{% static 'silk/js/filters.js' %}"></script>

<script>
$(document).ready(function () {
$('.datetimepicker').datetimepicker()
.datetimepicker({ step: 10});
function initFilterButton() {
$('#filter-button').click(function () {
$(this).toggleClass('active');
$('body').toggleClass('cbp-spmenu-push-toleft');
$('#cbp-spmenu-s2').toggleClass('cbp-spmenu-open');
initFilters();
});
});
}
</script>

{% endblock %}
Expand Down
176 changes: 138 additions & 38 deletions silk/templates/silk/summary.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,21 +35,147 @@
font-style: oblique;
margin-left: 10px;
}

h2 {
margin-bottom: 0;;
}

.resizing-input {
display: inline-block;
}

.resizing-input input, .resizing-input span {
font-size: 12px;
font-family: Sans-serif;
white-space: pre;
padding: 5px;
}

.resizing-input input:focus {
outline: none;
}

#filters {
font-style: oblique;
font-size: 12px;
}

#filters a {
text-decoration: underline;
}
</style>
{% endblock %}
{% block data %}
<div class="wrapper">
<div class="inner">
<h1>Summary</h1>

<p>Silk looks at application performance from three perspectives: the overall time spent on each request,
the number of database queries and the time spent on those database queries.</p>
{% block js %}
{{ block.super }}
<script>
$(document).ready(function () {
var $inputs = $('.resizing-input');

<p>The below gives you a summary of those perspectives. <b>You can use the filtering tab to change the date range of the
summary.</b></p>
function resizeForText(text) {
var $this = $(this);
if (!text.trim()) {
text = $this.attr('placeholder').trim();
}
var $span = $this.parent().find('span');
$span.text(text);
var $inputSize = $span.width();
$this.css("width", $inputSize);
}

{% if num_requests %}
$inputs.find('input').keypress(function (e) {
if (e.which && e.charCode) {
var c = String.fromCharCode(e.keyCode | e.charCode);
var $this = $(this);
resizeForText.call($this, $this.val() + c);
}
});

$inputs.find('input').keyup(function (e) { // Backspace event only fires for keyup
if (e.keyCode === 8 || e.keyCode === 46) {
resizeForText.call($(this), $(this).val());
}
});

$inputs.find('input').each(function () {
var $this = $(this);
resizeForText.call($this, $this.val())
});

$inputs.focusout(function () {
$('#filter-form').submit();
});

$('.datetimepicker').datetimepicker({
step: 10,
onChangeDateTime: function (dp, $input) {
resizeForText.call($input, $input.val())
}
});

console.log()
});

</script>
{% endblock %}
{% block data %}
<div class="wrapper">
<div class="inner">
<div id="filters">
<form action="." name="filter-form" id="filter-form" method="post">
{% csrf_token %}
</form>
<div class="resizing-input">
Using requests that executed
<input form="filter-form"
class="typ"
type="hidden"
value="SecondsFilter"
name="filter-seconds-typ">
<input type="text"
placeholder="seconds"
form="filter-form"
name="filter-seconds-value"
value="{{ filters.seconds.value }}"
>
seconds ago,
<span style="display:none"></span>
</div>
<div class="resizing-input">
before
<input form="filter-form"
class="typ"
type="hidden"
value="BeforeDateFilter"
name="filter-beforedate-typ">
<input class="datetimepicker"
type="text"
placeholder="date"
form="filter-form"
name="filter-beforedate-value"
value="{{ filters.beforedate.value }}"
/>,
<span style="display:none"></span>
</div>
<div class="resizing-input">
and after
<input form="filter-form"
class="typ"
type="hidden"
value="AfterDateFilter"
name="filter-afterdate-typ">
<input class="datetimepicker"
type="text"
placeholder="date"
form="filter-form"
name="filter-afterdate-value"
value="{{ filters.afterdate.value }}"
>.
<span style="display:none"></span>
</div>
</div>
<h2>Summary</h2>
{% if num_requests %}
<div class="summary-cell">
<div class="num"><span class="numeric">{{ num_requests }}</span></div>
<div class="desc">Requests</div>
Expand All @@ -73,10 +199,7 @@ <h1>Summary</h1>
{% else %}
<p class="no-data">No data</p>
{% endif %}

<h2>Most Time Overall</h2>

<p>The below are the worst requests from your longest running views.</p>
{% if longest_queries_by_view %}
{% for x in longest_queries_by_view %}
{% request_summary x %}
Expand All @@ -85,8 +208,6 @@ <h2>Most Time Overall</h2>
<p class="no-data">No data</p>
{% endif %}
<h2>Most Time Spent in Database</h2>

<p>The below are the worst requests from your views that spend the most time in the database.</p>
{% if most_time_spent_in_db %}
{% for x in most_time_spent_in_db %}
{% request_summary x %}
Expand All @@ -95,8 +216,6 @@ <h2>Most Time Spent in Database</h2>
<p class="no-data">No data</p>
{% endif %}
<h2>Most Database Queries</h2>

<p>The below are the worst requests from your views that send the most database queries.</p>
{% if most_queries %}
{% for x in most_queries %}
{% request_summary x %}
Expand All @@ -109,25 +228,6 @@ <h2>Most Database Queries</h2>

{% endblock %}

{% block filters %}
<tr id="seconds-filter" class="date-filter">
<td>
<button class="add-button" onclick="addSecondsFilter();">+</button>
</td>
<td>
<input type="number" name="seconds" placeholder="seconds ago">
</td>
</tr>
<tr id="before-date-filter" class="date-filter">
<td>
<button class="add-button" onclick="addBeforeDateFilter();">+</button>
</td>
<td><input type="text" class="datetimepicker" placeholder="before date" name="before-date"></td>
</tr>
<tr id="after-date-filter" class="date-filter">
<td>
<button class="add-button" onclick="addAfterDateFilter();">+</button>
</td>
<td><input type="text" class="datetimepicker" placeholder="after date" name="after-date"></td>
</tr>
{% endblock %}
{# Hide filter hamburger menu #}
{% block top %}{% endblock %}
{% block filter %}{% endblock %}
23 changes: 11 additions & 12 deletions silk/views/summary.py
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
from django.core.context_processors import csrf
from django.db.models import Avg, Count, Sum, Max
from django.shortcuts import render_to_response

from django.utils.decorators import method_decorator
from django.views.generic import View

from silk import models

from silk.auth import login_possibly_required, permissions_possibly_required
from silk.profiling.dynamic import _get_module
from silk.request_filters import BaseFilter
Expand All @@ -22,14 +20,15 @@ def filters_from_request(request):
if not ident in raw_filters:
raw_filters[ident] = {}
raw_filters[ident][typ] = request.POST[key]
filters = []
for _, raw_filter in raw_filters.items():
typ = raw_filter['typ']
filters = {}
for ident, raw_filter in raw_filters.items():
value = raw_filter['value']
module = _get_module('silk.request_filters')
filter_class = getattr(module, typ)
f = filter_class(value)
filters.append(f)
if value.strip():
typ = raw_filter['typ']
module = _get_module('silk.request_filters')
filter_class = getattr(module, typ)
f = filter_class(value)
filters[ident] = f
return filters


Expand Down Expand Up @@ -81,8 +80,8 @@ def _num_queries_by_view(self, filters):
return requests

def _create_context(self, request):
raw_filters = request.session.get(self.filters_key, [])
filters = [BaseFilter.from_dict(x) for x in raw_filters]
raw_filters = request.session.get(self.filters_key, {})
filters = [BaseFilter.from_dict(filter_d) for _, filter_d in raw_filters.items()]
avg_overall_time = self._avg_num_queries(filters)
c = {
'request': request,
Expand Down Expand Up @@ -110,5 +109,5 @@ def get(self, request):
@method_decorator(permissions_possibly_required)
def post(self, request):
filters = filters_from_request(request)
request.session[self.filters_key] = [x.as_dict() for x in filters]
request.session[self.filters_key] = {ident: filter.as_dict() for ident, filter in filters.items()}
return render_to_response('silk/summary.html', self._create_context(request))
Binary file modified web.psd
View file
Binary file not shown.

0 comments on commit 57ed2f5

Please sign in to comment.