Skip to content

Commit fb67582

Browse files
author
azec1
committed
feat: Implement new list view for requests on start page
1 parent 1cb4623 commit fb67582

File tree

2 files changed

+185
-96
lines changed

2 files changed

+185
-96
lines changed

‎silk/models.py

+38
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@
1919
OneToOneField,
2020
TextField,
2121
)
22+
from django.shortcuts import render
23+
from django.db.models import Avg, Count
24+
from .models import Request
2225
from django.utils import timezone
2326
from django.utils.safestring import mark_safe
2427

@@ -203,6 +206,41 @@ def save(self, *args, **kwargs):
203206
super().save(*args, **kwargs)
204207
Request.garbage_collect(force=False)
205208

209+
def summary_view(request):
210+
num_requests = Request.objects.count()
211+
avg_overall_time = Request.objects.aggregate(Avg('time_taken'))['time_taken__avg'] or 0
212+
avg_num_queries = Request.objects.aggregate(Avg('meta_num_queries'))['meta_num_queries__avg'] or 0
213+
avg_time_spent_on_queries = Request.objects.aggregate(Avg('meta_time_spent_queries'))['meta_time_spent_queries__avg'] or 0
214+
215+
longest_queries_by_view = Request.objects.order_by('-time_taken')[:10]
216+
most_time_spent_in_db = Request.objects.order_by('-meta_time_spent_queries')[:10]
217+
most_queries = Request.objects.order_by('-meta_num_queries')[:10]
218+
219+
options_view_style = [{'value': 'row', 'label': 'Row'}, {'value': 'grid', 'label': 'Grid'}]
220+
options_show = [25, 50, 100]
221+
options_order_by = [{'value': 'start_time', 'label': 'Start Time'}, {'value': 'time_taken', 'label': 'Time Taken'}]
222+
options_order_dir = [{'value': 'asc', 'label': 'Ascending'}, {'value': 'desc', 'label': 'Descending'}]
223+
224+
context = {
225+
'num_requests': num_requests,
226+
'avg_overall_time': avg_overall_time,
227+
'avg_num_queries': avg_num_queries,
228+
'avg_time_spent_on_queries': avg_time_spent_on_queries,
229+
'longest_queries_by_view': longest_queries_by_view,
230+
'most_time_spent_in_db': most_time_spent_in_db,
231+
'most_queries': most_queries,
232+
'view_style': request.GET.get('view_style', 'row'),
233+
'show': request.GET.get('show', 25),
234+
'order_by': request.GET.get('order_by', 'start_time'),
235+
'order_dir': request.GET.get('order_dir', 'asc'),
236+
'options_view_style': options_view_style,
237+
'options_show': options_show,
238+
'options_order_by': options_order_by,
239+
'options_order_dir': options_order_dir,
240+
}
241+
242+
return render(request, 'silk/summary.html', context)
243+
206244

207245
class Response(models.Model):
208246
id = CharField(max_length=36, default=uuid4, primary_key=True)

‎silk/templates/silk/summary.html

+147-96
Original file line numberDiff line numberDiff line change
@@ -1,148 +1,199 @@
11
{% extends 'silk/base/root_base.html' %}
22
{% load silk_inclusion %}
33
{% load static %}
4-
{% block menu %}
5-
{% root_menu request %}
6-
{% endblock %}
74

85
{% block pagetitle %}Silky - Summary{% endblock %}
96

107
{% block style %}
118
{{ block.super }}
12-
<link rel="stylesheet" href="{% static 'silk/css/pages/summary.css' %}"/>
9+
<link rel="stylesheet" href="{% static 'silk/css/pages/requests.css' %}"/>
10+
<style>
11+
.row-wrapper {
12+
display: flex;
13+
flex-direction: column;
14+
margin-top: 20px;
15+
}
16+
17+
.row {
18+
display: flex;
19+
justify-content: space-between;
20+
padding: 10px;
21+
border: 1px solid #ddd;
22+
margin-bottom: 5px;
23+
background-color: #fff; /* Ensuring rows have a white background */
24+
color: #000; /* Ensuring text color is black */
25+
border-radius: 5px;
26+
}
27+
28+
.row div {
29+
flex: 1;
30+
text-align: center;
31+
}
32+
33+
.summary-cell {
34+
display: inline-block;
35+
width: 18%;
36+
text-align: center;
37+
margin: 10px 1%;
38+
}
39+
40+
.summary-cell .num {
41+
font-size: 24px;
42+
}
43+
44+
.no-data {
45+
text-align: center;
46+
font-size: 18px;
47+
color: #888;
48+
}
49+
</style>
50+
{% endblock %}
51+
52+
{% block menu %}
53+
{% root_menu request %}
1354
{% endblock %}
1455

1556
{% block js %}
1657
{{ block.super }}
17-
<script src="{% static 'silk/js/pages/summary.js' %}"></script>
58+
<script src="{% static 'silk/js/pages/requests.js' %}"></script>
1859
{% endblock %}
60+
61+
{% block filter %}
62+
<form id="filter-form" action="." method="get"></form>
63+
<div class="menu-item ">
64+
<div class="menu-item-outer">
65+
<div class="menu-item-inner">
66+
<label>View:
67+
<select name="view_style" form="filter-form" onchange="this.form.submit();">
68+
{% for option in options_view_style %}
69+
<option value="{{ option.value }}"
70+
{% if option.value == view_style %}selected{% endif %}>{{ option.label }}</option>
71+
{% endfor %}
72+
</select>
73+
</label>
74+
</div>
75+
</div>
76+
</div>
77+
<div class="menu-item ">
78+
<div class="menu-item-outer">
79+
<div class="menu-item-inner">
80+
<label>Show:
81+
<select name="show" form="filter-form" onchange="this.form.submit();">
82+
{% for option in options_show %}
83+
<option value="{{ option }}"
84+
{% if option == show %}selected{% endif %}>{{ option }}</option>
85+
{% endfor %}
86+
</select>
87+
</label>
88+
</div>
89+
</div>
90+
</div>
91+
<div class="menu-item">
92+
<div class="menu-item-outer">
93+
<div class="menu-item-inner">
94+
<label>Order:
95+
<select name="order_by" form="filter-form" onchange="this.form.submit();">
96+
{% for option in options_order_by %}
97+
<option value="{{ option.value }}"
98+
{% if option.value == order_by %}selected{% endif %}>{{ option.label }}</option>
99+
{% endfor %}
100+
</select>
101+
</label>
102+
</div>
103+
</div>
104+
</div>
105+
<div class="menu-item">
106+
<div class="menu-item-outer">
107+
<div class="menu-item-inner">
108+
<label>Order:
109+
<select name="order_dir" form="filter-form" onchange="this.form.submit();">
110+
{% for option in options_order_dir %}
111+
<option value="{{ option.value }}"
112+
{% if option.value == order_dir %}selected{% endif %}>{{ option.label }}</option>
113+
{% endfor %}
114+
</select>
115+
</label>
116+
</div>
117+
</div>
118+
</div>
119+
{{ block.super }}
120+
{% endblock %}
121+
19122
{% block data %}
20123
<div class="wrapper">
21124
<div class="inner">
22-
<div id="filters">
23-
<form action="." name="filter-form" id="filter-form" method="post">
24-
{% csrf_token %}
25-
</form>
26-
<table id="filter-table">
27-
<tr>
28-
<td>
29-
<img id="filter-image" src="{% static 'silk/filter2.png' %}">
30-
31-
</td>
32-
<td id="filter-cell">
33-
<div class="resizing-input">
34-
Using requests that executed
35-
<input form="filter-form"
36-
class="typ"
37-
type="hidden"
38-
value="SecondsFilter"
39-
name="filter-seconds-typ">
40-
<input type="text"
41-
placeholder="seconds"
42-
form="filter-form"
43-
name="filter-seconds-value"
44-
value="{{ filters.seconds.value }}"
45-
>
46-
seconds ago,
47-
<span style="display:none"></span>
48-
</div>
49-
<div class="resizing-input">
50-
before
51-
<input form="filter-form"
52-
class="typ"
53-
type="hidden"
54-
value="BeforeDateFilter"
55-
name="filter-beforedate-typ">
56-
<input class="datetimepicker"
57-
type="text"
58-
placeholder="date"
59-
form="filter-form"
60-
name="filter-beforedate-value"
61-
value="{{ filters.beforedate.value }}"
62-
/>,
63-
<span style="display:none"></span>
64-
</div>
65-
<div class="resizing-input">
66-
and after
67-
<input form="filter-form"
68-
class="typ"
69-
type="hidden"
70-
value="AfterDateFilter"
71-
name="filter-afterdate-typ">
72-
<input class="datetimepicker"
73-
type="text"
74-
placeholder="date"
75-
form="filter-form"
76-
name="filter-afterdate-value"
77-
value="{{ filters.afterdate.value }}"
78-
>.
79-
<span style="display:none"></span>
80-
</div>
81-
</td>
82-
</tr>
83-
</table>
84-
85-
</div>
86125
<h2>Summary</h2>
87126
{% if num_requests %}
88127
<div class="summary-cell">
89128
<div class="num"><span class="numeric">{{ num_requests }}</span></div>
90129
<div class="desc">Requests</div>
91130
</div>
92131
<div class="summary-cell">
93-
<div class="num"><span class="numeric">{{ num_profiles }}</span></div>
94-
<div class="desc">Profiles</div>
95-
</div>
96-
<div class="summary-cell">
97-
<div class="num"><span class="numeric">{{ avg_overall_time | floatformat:0 }}<span class="unit">ms</span></span></div>
132+
<div class="num"><span class="numeric">{{ avg_overall_time|floatformat:0 }}<span class="unit">ms</span></span></div>
98133
<div class="desc">Avg. Time</div>
99134
</div>
100135
<div class="summary-cell">
101-
<div class="num"><span class="numeric">{{ avg_num_queries | floatformat:2 }}</span></div>
136+
<div class="num"><span class="numeric">{{ avg_num_queries|floatformat:2 }}</span></div>
102137
<div class="desc">Avg. #Queries</div>
103138
</div>
104139
<div class="summary-cell">
105-
<div class="num"><span class="numeric">{{ avg_time_spent_on_queries |floatformat:0 }}<span class="unit">ms</span></span></div>
140+
<div class="num"><span class="numeric">{{ avg_time_spent_on_queries|floatformat:0 }}<span class="unit">ms</span></span></div>
106141
<div class="desc">Avg. DB Time</div>
107142
</div>
108143
{% else %}
109144
<p class="no-data">No data</p>
110145
{% endif %}
146+
111147
<h2>Most Time Overall</h2>
112148
{% if longest_queries_by_view %}
113-
{% for x in longest_queries_by_view %}
114-
<a href="{% url "silk:request_detail" request_id=x.pk %}">
115-
{% request_summary x %}
116-
</a>
117-
{% endfor %}
149+
<div class="row-wrapper">
150+
{% for x in longest_queries_by_view %}
151+
<a href="{% url 'silk:request_detail' request_id=x.pk %}" class="row">
152+
<div>{{ x.start_time }}</div>
153+
<div>{{ x.path }}</div>
154+
<div>{{ x.meta_num_queries }} queries</div>
155+
<div>{{ x.time_taken }} ms</div>
156+
<div>{{ x.meta_time_spent_queries }} ms</div>
157+
</a>
158+
{% endfor %}
159+
</div>
118160
{% else %}
119161
<p class="no-data">No data</p>
120162
{% endif %}
163+
121164
<h2>Most Time Spent in Database</h2>
122165
{% if most_time_spent_in_db %}
123-
{% for x in most_time_spent_in_db %}
124-
<a href="{% url "silk:request_detail" request_id=x.pk %}">
125-
{% request_summary x %}
126-
</a>
127-
{% endfor %}
166+
<div class="row-wrapper">
167+
{% for x in most_time_spent_in_db %}
168+
<a href="{% url 'silk:request_detail' request_id=x.pk %}" class="row">
169+
<div>{{ x.start_time }}</div>
170+
<div>{{ x.path }}</div>
171+
<div>{{ x.meta_num_queries }} queries</div>
172+
<div>{{ x.time_taken }} ms</div>
173+
<div>{{ x.meta_time_spent_queries }} ms</div>
174+
</a>
175+
{% endfor %}
176+
</div>
128177
{% else %}
129178
<p class="no-data">No data</p>
130179
{% endif %}
180+
131181
<h2>Most Database Queries</h2>
132182
{% if most_queries %}
133-
{% for x in most_queries %}
134-
<a href="{% url "silk:request_detail" request_id=x.pk %}">
135-
{% request_summary x %}
136-
</a>
137-
{% endfor %}
183+
<div class="row-wrapper">
184+
{% for x in most_queries %}
185+
<a href="{% url 'silk:request_detail' request_id=x.pk %}" class="row">
186+
<div>{{ x.start_time }}</div>
187+
<div>{{ x.path }}</div>
188+
<div>{{ x.meta_num_queries }} queries</div>
189+
<div>{{ x.time_taken }} ms</div>
190+
<div>{{ x.meta_time_spent_queries }} ms</div>
191+
</a>
192+
{% endfor %}
193+
</div>
138194
{% else %}
139195
<p class="no-data">No data</p>
140196
{% endif %}
141197
</div>
142198
</div>
143-
144199
{% endblock %}
145-
146-
{# Hide filter hamburger menu #}
147-
{% block top %}{% endblock %}
148-
{% block filter %}{% endblock %}

0 commit comments

Comments
 (0)