Skip to content

Commit

Permalink
feat: remove the ugly sidebar that didn't work / flex properly
Browse files Browse the repository at this point in the history
  • Loading branch information
@uptickmetachu
uptickmetachu committed Jan 22, 2024
1 parent 70e744f commit 78433b9
Show file tree
Hide file tree
Showing 11 changed files with 686 additions and 682 deletions.
40 changes: 22 additions & 18 deletions django_pev/templates/django_pev/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,15 @@
</head>

<body class="app">
<!-- Header content here -->
<!-- Sidebar content here -->
<div id="sidebar" class="sidebar sidebar-show sidebar-fixed">
<div class="sidebar-brand d-none d-md-flex">
<h3> Django PEV </h3>
</div>
<ul class="sidebar-nav">
<header class="header">
<a class="header-brand" href="#">
<h3>Django PEV</h3>
</a>
<button class="header-toggler" type="button">
<span class="header-toggler-icon"></span>
</button>

<ul class="header-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'django_pev:queries' %}">
<i class="nav-icon fa-solid fa-clipboard-question"></i> Queries
Expand Down Expand Up @@ -56,25 +58,27 @@ <h3> Django PEV </h3>
</a>
</li>
</ul>
</div>
<div class="wrapper d-flex flex-column min-vh-100 bg-light">
<div class="body flex-grow-1 px-3">
<div class="sidebar-open container-lg">
</header>
</div>
<div class="wrapper d-flex flex-column min-vh-100 bg-light">

<div class="body flex-grow-1 ">
<div class="container-xl">
{% block content %}
<div class="card">
<div class="card-body">
{% block inner_content %}
{% endblock %}
{% block inner_content %}
{% endblock %}
</div>
</div>
{% endblock %}
</div>
<!-- Main content here -->
</div>
<!-- Main content here -->
</div>
</div>

<footer class="app-footer">
<footer class="app-footer">
<!-- Footer content here -->
</footer>
</body>
</footer>
</body>
</html>
108 changes: 54 additions & 54 deletions django_pev/templates/django_pev/connections.html
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,64 @@
{% extends "django_pev/base.html" %}
{% block content %}
<div class="row">
<div class="card mb-4 mt-4">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h4 class="card-title mb-0">Live Connections</h4>
<div class="row">
<div class="card mb-4 mt-4">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h4 class="card-title mb-0">Live Connections</h4>
</div>
</div>
</div>

<div class="d-flex justify-content-between mt-4">
<div>
<ul>
<li>
<b> Total connections: </b> {{ connections| length}}
</li>
</ul>
<div class="d-flex justify-content-between mt-4">
<div>
<ul>
<li>
<b> Total connections: </b> {{ connections| length}}
</li>
</ul>
</div>
</div>
</div>

<table class="table">
<thead>
<tr>
<th scope="col">PID</th>
<th scope="col">User</th>
<th scope="col">Source</th>
<th scope="col">IP</th>
<th scope="col">Open Since</th>
<th scope="col">Query begin time</th>
<th scope="col">Wait Event</th>
<th scope="col">State</th>
<th scope="col">Query</th>
<th scope="col">SSL?</th>
</tr>
</thead>
<tbody>
{% for row in connections%}
<tr id="#{{row.name}}">
<td>{{ row.pid }}</td>
<td>{{ row.user }}</td>
<td>{{ row.source }}</td>
<td>{{ row.ip }}</td>
<td>{{ row.backend_start | timesince }}</td>
<td>{{ row.query_start | timesince }}</td>
<td>{{ row.wait_event }}</td>
<td>{{ row.start }}</td>
<td>{{ row.query }}</td>
<td>
{% if row.ssl %}
<i class="fa-solid fa-check"></i>
{% endif%}
</td>
</tr>
{% endfor%}
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th scope="col">PID</th>
<th scope="col">User</th>
<th scope="col">Source</th>
<th scope="col">IP</th>
<th scope="col">Open Since</th>
<th scope="col">Query begin time</th>
<th scope="col">Wait Event</th>
<th scope="col">State</th>
<th scope="col">Query</th>
<th scope="col">SSL?</th>
</tr>
</thead>
<tbody>
{% for row in connections%}
<tr id="#{{row.name}}">
<td>{{ row.pid }}</td>
<td>{{ row.user }}</td>
<td>{{ row.source }}</td>
<td>{{ row.ip }}</td>
<td>{{ row.backend_start | timesince }}</td>
<td>{{ row.query_start | timesince }}</td>
<td>{{ row.wait_event }}</td>
<td>{{ row.start }}</td>
<td>{{ row.query }}</td>
<td>
{% if row.ssl %}
<i class="fa-solid fa-check"></i>
{% endif%}
</td>
</tr>
{% endfor%}
</tbody>
</table>

</div>
<div class="card-footer">
</div>
<div class="card-footer">
</div>
</div>
</div>
</div>
{% endblock %}
148 changes: 74 additions & 74 deletions django_pev/templates/django_pev/explain.html
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,93 @@
{% extends "django_pev/base.html" %}
{% block content %}
{% load humanize %}
<div class="row">
<div class="card mb-4 mt-4">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h4 class="card-title mb-0">Explain Query</h4>
This page helps find the slowest queries of a page and explains it using an embedded version of <a href="https://explain.dalibo.com">Postgres Explain Visualizer 2 (by dalibo)</a>
</div>
</div>
<div class="d-flex justify-content-between mt-4">
<form action="/django-pev/explain" method="post">
{% csrf_token %}
<label for="id_url" class="form-label"> <b>Page url </b></label>
<input type="text" class="form-control" name="url" value="{{url}}" required="true" id="id_url">
<div id="helpBlock" class="form-text">
The url should not include the protocol or the base url. For example (/dashboard/) .
{% load humanize %}
<div class="row">
<div class="card mb-4 mt-4">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h4 class="card-title mb-0">Explain Query</h4>
This page helps find the slowest queries of a page and explains it using an embedded version of <a href="https://explain.dalibo.com">Postgres Explain Visualizer 2 (by dalibo)</a>
</div>
<input class="btn btn-primary" type="submit" value="Submit" />
</form>
</div>
</div>
<div class="d-flex justify-content-between mt-4">
<form action="/django-pev/explain" method="post">
{% csrf_token %}
<label for="id_url" class="form-label"> <b>Page url </b></label>
<input type="text" class="form-control" name="url" value="{{url}}" required="true" id="id_url">
<div id="helpBlock" class="form-text">
The url should not include the protocol or the base url. For example (/dashboard/) .
</div>
<input class="btn btn-primary" type="submit" value="Submit" />
</form>
</div>

{% if explain and explain.queries %}
{% if explain and explain.queries %}

<div class="card p-4 mt-1">
<h5> Slowest Query {{ slowest.duration|floatformat:4 }}s
</h5>
<form action="{% url 'django_pev:explain-visualize' %}" method="post">
{% csrf_token %}
<input type="hidden" name="explainset_id" value="{{explain.id}}" />
<input type="hidden" name="query_index" value="{{slowest.index}}" />
<input class="btn btn-primary" type="submit" value="Analyze">
</input>
</form>
<div>
<code>
{{ slowest.sql }}
</code>
</div>
</div>
<div class="card p-4 mt-1">
<h5> Slowest Query {{ slowest.duration|floatformat:4 }}s
</h5>
<form action="{% url 'django_pev:explain-visualize' %}" method="post">
{% csrf_token %}
<input type="hidden" name="explainset_id" value="{{explain.id}}" />
<input type="hidden" name="query_index" value="{{slowest.index}}" />
<input class="btn btn-primary" type="submit" value="Analyze">
</input>
</form>
<div>
<code>
{{ slowest.sql }}
</code>
</div>
</div>

<div class="mt-4">
<h5> All Queries {{explain.queries | length}}</h5>
<ol>
{% for query in explain.queries %}
<div class="mt-4">
<h5> All Queries {{explain.queries | length}}</h5>
<ol>
{% for query in explain.queries %}

<li>
{{ query.duration | floatformat:4}}s
<code>{{ query.sql | truncatechars:100 }}</code>
<li>
{{ query.duration | floatformat:4}}s
<code>{{ query.sql | truncatechars:100 }}</code>

<p class="d-inline-flex gap-1">
<p class="d-inline-flex gap-1">

<form action="{% url 'django_pev:explain-visualize' %}" method="post">
{% csrf_token %}
<input type="hidden" name="explainset_id" value="{{explain.id}}" />
<input type="hidden" name="query_index" value="{{query.index}}" />
<input class="btn btn-primary" type="submit" value="Analyze" />
<button class="btn btn-secondary" type="button" data-coreui-toggle="collapse" data-coreui-target="#query{{query.index}}" aria-expanded="false" aria-controls="collapseExample">
Show Query
</button>
</form>
<form action="{% url 'django_pev:explain-visualize' %}" method="post">
{% csrf_token %}
<input type="hidden" name="explainset_id" value="{{explain.id}}" />
<input type="hidden" name="query_index" value="{{query.index}}" />
<input class="btn btn-primary" type="submit" value="Analyze" />
<button class="btn btn-secondary" type="button" data-coreui-toggle="collapse" data-coreui-target="#query{{query.index}}" aria-expanded="false" aria-controls="collapseExample">
Show Query
</button>
</form>

</p>
</p>

<div class="collapse" id="query{{query.index}}">
<div class="card card-body">
<code>
{{ query.sql }}
</code>
</div>
</div>
</li>
<div class="collapse" id="query{{query.index}}">
<div class="card card-body">
<code>
{{ query.sql }}
</code>
</div>
</div>
</li>

{% endfor %}
</ol>
</div>
{% elif explain %}
<div class="mt-4">
<h5> No queries executed (probably a redirect.)</h5>
</div>
{% endif %}
{% endfor %}
</ol>
</div>
{% elif explain %}
<div class="mt-4">
<h5> No queries executed (probably a redirect.)</h5>
</div>
{% endif %}

</div>
</div>



<div class="card-footer">
<div class="card-footer">
</div>
</div>
</div>
</div>
{% endblock %}
Loading

0 comments on commit 78433b9

Please sign in to comment.