-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: adds an explain view with an embedded PEV
- Loading branch information
1 parent
75ee5fe
commit 3cac384
Showing
8 changed files
with
347 additions
and
218 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| {% 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="/api/v2/tasks/" 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 %} | ||
|
|
||
| <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 %} | ||
|
|
||
| <li> | ||
| {{ query.duration | floatformat:4}}s | ||
| <code>{{ query.sql | truncatechars:100 }}</code> | ||
|
|
||
| <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> | ||
|
|
||
| </p> | ||
|
|
||
| <div class="collapse" id="query{{query.index}}"> | ||
| <div class="card card-body"> | ||
| <code> | ||
| {{ query.sql }} | ||
| </code> | ||
| </div> | ||
| </div> | ||
| </li> | ||
|
|
||
| {% endfor %} | ||
| </ol> | ||
| </div> | ||
|
|
||
| {% endif %} | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
|
|
||
| <div class="card-footer"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% endblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script> | ||
| <script src="https://unpkg.com/pev2/dist/pev2.umd.js"></script> | ||
| <link | ||
| href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" | ||
| rel="stylesheet" | ||
| /> | ||
| <link rel="stylesheet" href="https://unpkg.com/pev2/dist/style.css" /> | ||
|
|
||
| <div id="embedded_pev"> | ||
| <pev2 :plan-source="plan" :plan-query="query" /> | ||
| </div> | ||
|
|
||
| <script> | ||
| const { createApp } = Vue; | ||
|
|
||
| const plan = `{{plan |safe}}`; | ||
| const query = `{{query |safe}}`; | ||
|
|
||
| const app = createApp({ | ||
| data() { | ||
| return { | ||
| plan: plan, | ||
| query: query, | ||
| } | ||
| }, | ||
| }) | ||
|
|
||
| app.component("pev2", pev2.Plan) | ||
|
|
||
| app.mount("#embedded_pev") | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.