Merge pull request #4 from uptick/dev-544/postgres-metrics

DEV-544 Add postgres metrics / dashboard
uptick · Jan 16, 2024 · fd9c0b4 · fd9c0b4
2 parents 2dad1de + d781ec0
commit fd9c0b4
Show file tree

Hide file tree

Showing 32 changed files with 1,959 additions and 500 deletions.
diff --git a/.gitignore b/.gitignore
@@ -67,8 +67,13 @@ yarn-error.log
 *.sublime-workspace
 *.code-workspace
 
-# VS Code editor
-.vscode/
+### VisualStudioCode ###
+.vscode/*      # Maybe .vscode/**/* instead - see comments
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
 
 # Intellij IDEA and Pycharm per-user project settings
 .idea/

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -1,50 +1,28 @@
 repos:
-  - repo: https://github.com/hadialqattan/pycln
-    rev: v2.1.2
+  - repo: https://github.com/astral-sh/ruff-pre-commit
+    # Ruff version.
+    rev: v0.1.13
     hooks:
-      - id: pycln
-        args:
-          - --all
-  - repo: https://github.com/psf/black
-    rev: 22.10.0
-    hooks:
-      - id: black
-  - repo: https://github.com/PyCQA/isort
-    rev: 5.10.1
-    hooks:
-      - id: isort
-  - repo: https://github.com/PyCQA/flake8
-    rev: 5.0.4
-    hooks:
-      - id: flake8
-        additional_dependencies:
-          - flake8-blind-except
-          - flake8-bugbear
-          - flake8-comprehensions
-  - repo: local
-    hooks:
-      - id: poetry run mypy
-        args:
-          - --show-error-codes
-        name: mypy
-        files: ^.*\.(py)$
-        entry: mypy
-        require_serial: true
-        language: python
+      # Run the linter.
+      - id: ruff
+        args: [--fix]
+      # Run the formatter.
+      - id: ruff-format
 
   - repo: https://github.com/commitizen-tools/commitizen
-    rev: v2.37.0
+    rev: v3.13.0
     hooks:
       - id: commitizen
-        stages:
-          - commit-msg
+        stages: ["commit-msg"]
+
   - repo: local
     hooks:
       - id: mypy
         args:
           - --show-error-codes
         name: mypy
-        files: ^.*\.(py)$
         entry: poetry run mypy
         require_serial: true
-        language: python
+        language: system
+        types:
+          - python
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,10 @@
+{
+  "[python]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "charliermarsh.ruff",
+    "editor.codeActionsOnSave": {
+      "source.fixAll": true,
+      "source.organizeImports": true
+    }
+  }
+}
diff --git a/Makefile b/Makefile
@@ -1,20 +1,12 @@
-isort:
-	@echo "--- 🐍 Isorting 🐍 ---"
-	poetry run isort example test django_pev
+format:
+	@echo "--- 🐶 Ruff Format 🐶 ---"
+	poetry run ruff format .
 
-flake8:
-	@echo "--- 👏 Flaking 👏 ---"
-	poetry run flake8
+ruff:
+	@echo "--- 🐶 Ruff Lint 🐶 ---"
+	poetry run ruff check . --fix
 
-black:
-	@echo "--- 🎩 Blacking 🎩 ---"
-	poetry run black . --check
-
-mypy:
-	@echo "--- ⚡ Mypying ⚡ ---"
-	poetry run mypy
-
-lint: isort flake8 black mypy
+lint: ruff
 
 postgres:
 	docker-compose up -d
@@ -24,7 +16,7 @@ test: postgres
 	@echo "--- 💃 Testing 💃 ---"
 	poetry run python manage.py test
 
-publish:ci
+publish: ci
 	poetry publish --build
 
 ci: test lint

diff --git a/django_pev/admin.py b/django_pev/admin.py
@@ -0,0 +1 @@
+# Register your models here.
diff --git a/django_pev/apps.py b/django_pev/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class DjangoPevConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "django_pev"
diff --git a/django_pev/migrations/__init__.py b/django_pev/migrations/__init__.py
diff --git a/django_pev/models.py b/django_pev/models.py
@@ -0,0 +1 @@
+# Create your models here.
diff --git a/django_pev/templates/django_pev/base.html b/django_pev/templates/django_pev/base.html
@@ -0,0 +1,82 @@
+
+{% load static %}
+<html lang="en"><head>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+        <title>Django Postgres Explain Visualiser Dashboard</title>
+        <link href="https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/css/coreui.min.css" rel="stylesheet" integrity="sha384-H8oVKJOQVGGCdfFNM+9gLKN0xagtq9oiNLirmijheEuqD3kItTbTvoOGgxVKqNiB" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <script src="https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/js/coreui.bundle.min.js" integrity="sha384-yaqfDd6oGMfSWamMxEH/evLG9NWG7Q5GHtcIfz8Zg1mVyx2JJ/IRPrA28UOLwAhi" crossorigin="anonymous"></script>
+
+    </head>
+
+    <body class="app">
+    <!-- Header content here -->
+        <header class="header">
+            <a class="header-brand" href="#">
+                Django PEV
+            </a>
+        </header>
+
+        <div class="app-body">
+        <!-- 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">
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'django_pev:queries' %}">
+                            <i class="nav-icon fa-solid fa-clipboard-question"></i> Queries
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'django_pev:space' %}">
+                            <i class="nav-icon fa-solid fa-chart-pie"></i> Space
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'django_pev:indexes' %}">
+                            <i class="nav-icon fa-solid fa-bookmark"></i> Indexes
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'django_pev:live-queries' %}">
+                            <i class="nav-icon fa-solid fa-play"></i> Live Queries
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'django_pev:connections' %}">
+                            <i class="nav-icon fa-solid fa-wifi "></i> Connections
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'django_pev:maintenance' %}">
+                            <i class="nav-icon fa-solid fa-hammer"></i> Table Maintenance
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="body flex-grow-1 px-3">
+                <div class="container-lg">
+                {% block content %}
+                    <div class="card">
+                        <div class="card-body">
+                        {% block inner_content %}
+                        {% endblock %}
+                        </div>
+                    </div>
+                {% endblock %}
+                </div>
+        <!-- Main content here -->
+            </div>
+    {% comment %} End app-body {% endcomment %}
+        </div>
+
+        <footer class="app-footer">
+        <!-- Footer content here -->
+        </footer>
+    </body>
+</html>
diff --git a/django_pev/templates/django_pev/connections.html b/django_pev/templates/django_pev/connections.html
@@ -0,0 +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>
+            </div>
+
+            <div class="d-flex justify-content-between mt-4">
+                <div>
+                    <ul>
+                        <li>
+                            <b> Total connections: </b> {{ connections| length}}
+                        </li>
+                    </ul>
+                </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>
+
+        </div>
+        <div class="card-footer">
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/django_pev/templates/django_pev/index.html b/django_pev/templates/django_pev/index.html
@@ -0,0 +1,72 @@
+{% 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">Traffic</h4>
+                    <div class="small text-medium-emphasis">January - July 2022</div>
+                </div>
+                <div class="btn-toolbar d-none d-md-block" role="toolbar" aria-label="Toolbar with buttons">
+                    <div class="btn-group btn-group-toggle mx-3" data-coreui-toggle="buttons">
+                        <input class="btn-check" id="option1" type="radio" name="options" autocomplete="off">
+                        <label class="btn btn-outline-secondary"> Day</label>
+                        <input class="btn-check" id="option2" type="radio" name="options" autocomplete="off" checked="">
+                        <label class="btn btn-outline-secondary active"> Month</label>
+                        <input class="btn-check" id="option3" type="radio" name="options" autocomplete="off">
+                        <label class="btn btn-outline-secondary"> Year</label>
+                    </div>
+                    <button class="btn btn-primary" type="button">
+                        <svg class="icon">
+                            <use xlink:href="vendors/@coreui/icons/svg/free.svg#cil-cloud-download"></use>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            <div class="c-chart-wrapper" style="height:300px;margin-top:40px;">
+                <canvas class="chart" id="main-chart" height="300"></canvas>
+            </div>
+        </div>
+        <div class="card-footer">
+            <div class="row row-cols-1 row-cols-md-5 text-center">
+                <div class="col mb-sm-2 mb-0">
+                    <div class="text-medium-emphasis">Visits</div>
+                    <div class="fw-semibold">29.703 Users (40%)</div>
+                    <div class="progress progress-thin mt-2">
+                        <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+                    </div>
+                </div>
+                <div class="col mb-sm-2 mb-0">
+                    <div class="text-medium-emphasis">Unique</div>
+                    <div class="fw-semibold">24.093 Users (20%)</div>
+                    <div class="progress progress-thin mt-2">
+                        <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
+                    </div>
+                </div>
+                <div class="col mb-sm-2 mb-0">
+                    <div class="text-medium-emphasis">Pageviews</div>
+                    <div class="fw-semibold">78.706 Views (60%)</div>
+                    <div class="progress progress-thin mt-2">
+                        <div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
+                    </div>
+                </div>
+                <div class="col mb-sm-2 mb-0">
+                    <div class="text-medium-emphasis">New Users</div>
+                    <div class="fw-semibold">22.123 Users (80%)</div>
+                    <div class="progress progress-thin mt-2">
+                        <div class="progress-bar bg-danger" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
+                    </div>
+                </div>
+                <div class="col mb-sm-2 mb-0">
+                    <div class="text-medium-emphasis">Bounce Rate</div>
+                    <div class="fw-semibold">40.15%</div>
+                    <div class="progress progress-thin mt-2">
+                        <div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}