Super basic queue in HTML

ziglana · Mar 3, 2023 · 1428641 · 1428641
1 parent aaffa1b
commit 1428641
Show file tree

Hide file tree

Showing 8 changed files with 171 additions and 5 deletions.
diff --git a/decompiler_explorer/urls.py b/decompiler_explorer/urls.py
@@ -18,6 +18,7 @@
 from django.urls import path, include
 
 from rest_framework import routers
+from rest_framework.renderers import JSONRenderer, BrowsableAPIRenderer
 
 from explorer import views
 
@@ -33,7 +34,7 @@
     path('', include('explorer.urls')),
     path('api/', include(router.urls)),
     path('admin/', admin.site.urls),
-    path('api/queue', views.QueueView.as_view())
+    path('api/queue', views.QueueView.as_view(renderer_classes=[JSONRenderer, BrowsableAPIRenderer]))
 ]
 
 

diff --git a/explorer/models.py b/explorer/models.py
@@ -10,6 +10,7 @@
 from django.db.models.signals import post_save
 from django.db.models.constraints import UniqueConstraint, CheckConstraint
 from django.dispatch import receiver
+from django.forms import model_to_dict
 from django.utils import timezone
 from django.utils.translation import gettext_lazy as _
 
@@ -130,6 +131,7 @@ def get_queue():
             if oldest_unfinished is not None:
                 oldest_unfinished = oldest_unfinished.created
             queue[str(d.id)] = {
+                'decompiler': model_to_dict(d),
                 'oldest_unfinished': oldest_unfinished,
                 'queue_length': decompiler_queue.count()
             }

diff --git a/explorer/urls.py b/explorer/urls.py
@@ -6,5 +6,6 @@
 app_name = 'explorer'
 urlpatterns = [
     path('', views.IndexView.as_view(), name='index'),
-    path('faq', TemplateView.as_view(template_name='explorer/faq.html'), name='faq')
+    path('faq', TemplateView.as_view(template_name='explorer/faq.html'), name='faq'),
+    path('queue', views.QueueView.as_view(template_name='explorer/queue.html'), name='queue'),
 ]
diff --git a/explorer/views.py b/explorer/views.py
@@ -9,7 +9,7 @@
 from rest_framework import viewsets, permissions, mixins
 from rest_framework.decorators import action
 from rest_framework.permissions import AllowAny, IsAdminUser
-from rest_framework.renderers import TemplateHTMLRenderer
+from rest_framework.renderers import TemplateHTMLRenderer, JSONRenderer
 from rest_framework.response import Response
 from rest_framework.views import APIView
 
@@ -234,7 +234,13 @@ def get(self, request):
 
 
 class QueueView(APIView):
+    renderer_classes = [JSONRenderer, TemplateHTMLRenderer]
     permission_classes = [permissions.AllowAny]
+    template_name = 'explorer/queue.html'
 
     def get(self, request):
-        return Response(DecompilationRequest.get_queue())
+        print(request.accepted_renderer)
+        if request.accepted_renderer.format == 'html':
+            return Response({})
+        else:
+            return Response(DecompilationRequest.get_queue())
diff --git a/static/css/style.css b/static/css/style.css
@@ -28,6 +28,15 @@ header h1 {
     padding: 0 10px;
 }
 
+#queue-url {
+    color: #ffffff;
+    text-decoration: none;
+}
+
+#queue-url:hover, #queue-url:active, #queue-url:focus {
+    text-decoration: underline;
+}
+
 section#content {
     padding-bottom: 40px;
 }

diff --git a/static/js/queue.js b/static/js/queue.js
@@ -0,0 +1,77 @@
+
+let refreshSchedule = -1;
+
+function updateQueue() {
+    if (refreshSchedule !== -1) {
+        clearTimeout(refreshSchedule);
+    }
+
+    fetch("/api/queue")
+        .then(resp => {
+            if (resp.ok) {
+                return resp.json();
+            } else {
+                throw Error("Error loading queue");
+            }
+        })
+        .then(data => {
+            setQueue(data);
+        })
+        .catch(() => {})
+        .finally(() => {
+            refreshSchedule = setTimeout(updateQueue, 5000);
+        });
+}
+
+updateQueue();
+
+
+function setQueue(data) {
+    let queueDiv = document.getElementById("queue");
+    while (queueDiv.firstChild) {
+        queueDiv.firstChild.remove();
+    }
+
+    let generalHeader = document.createElement("h3");
+    generalHeader.innerText = "Overall Queue Stats:";
+    queueDiv.append(generalHeader)
+
+    let generalContent = document.createElement("p");
+
+    if (data.general.queue_length === 0) {
+        generalContent.innerText = "Queue is empty!";
+    } else {
+        generalContent.append("Queue size: " + data.general.queue_length.toString());
+        generalContent.append(document.createElement("br"));
+        generalContent.append("Oldest unfinished job: " + new Date(data.general.oldest_unfinished).toString());
+    }
+    queueDiv.append(generalContent);
+
+    let decomps = Object.keys(data.per_decompiler).sort((a, b) => {
+        let aName = data.per_decompiler[a].decompiler.name.toLowerCase();
+        let bName = data.per_decompiler[b].decompiler.name.toLowerCase();
+        if (aName < bName)
+            return -1;
+        if (aName > bName)
+            return 1;
+        return 0;
+    });
+
+    for (let id of decomps) {
+        let decompQueue = data.per_decompiler[id];
+
+        let decompHeader = document.createElement("h4");
+        decompHeader.innerText = decompQueue.decompiler.name + " " + decompQueue.decompiler.version + (decompQueue.decompiler.revision === "" ? "" : " (") + decompQueue.decompiler.revision + (decompQueue.decompiler.revision === "" ? "" : ")") + ":";
+        queueDiv.append(decompHeader)
+
+        let decompContent = document.createElement("p");
+        if (decompQueue.queue_length === 0) {
+            decompContent.innerText = "Queue is empty!";
+        } else {
+            decompContent.append("Queue size: " + decompQueue.queue_length.toString());
+            decompContent.append(document.createElement("br"));
+            decompContent.append("Oldest unfinished job: " + new Date(decompQueue.oldest_unfinished).toString());
+        }
+        queueDiv.append(decompContent);
+    }
+}
diff --git a/templates/explorer/index.html b/templates/explorer/index.html
@@ -60,7 +60,11 @@ <h1 class="my-0">Decompiler Explorer</h1>
     </header>
     {% if show_banner %}
     <section id="banner" class="container-fluid mb-5 text-light bg-dark">
-        <div class="row py-2 px-4">Welcome visitors! We are experiencing a lot of load, sorry if the service is unavailable when you stop by. In the meantime, check out one of the already generated results in the "Samples" section.</div>    
+        <div class="row py-2 px-4">
+            <a id="queue-url" href="{% url 'explorer:queue' %}" title="View queue details">
+                Welcome visitors! We are experiencing a lot of load, sorry if the service is unavailable when you stop by. In the meantime, check out one of the already generated results in the "Samples" section.
+            </a>
+        </div>
     </section>
     {% endif %}
     <section id="input" class="container">

diff --git a/templates/explorer/queue.html b/templates/explorer/queue.html
@@ -0,0 +1,66 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Decompiler Explorer - Queue</title>
+    <meta name="description" content="Decompiler Explorer is an interactive online decompiler which shows equivalent C-like output of decompiled programs from many popular decompilers.">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
+
+    <meta property="og:type" content="website">
+	<meta property="og:url" content="https://dogbolt.org">
+	<meta property="og:site_name" content="Decompiler Explorer">
+	<meta property="og:title" content="Decompiler Explorer - Queue">
+	<meta property="og:description" content="Decompiler Explorer is an interactive online decompiler which shows equivalent C-like output of decompiled programs from many popular decompilers.">
+	<meta property="og:image" content="TODO">
+
+	<meta name="twitter:card" content="summary">
+	<meta name="twitter:site" content="@dogboltorg">
+	<meta name="twitter:creator" content="@dogboltorg">
+	<meta name="twitter:title" content="Decompiler Explorer - Queue">
+	<meta name="twitter:description" content="Decompiler Explorer is an interactive online decompiler which shows equivalent C-like output of decompiled programs from many popular decompilers.">
+	<meta property="twitter:image" content="TODO">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
+
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" href="{% static 'css/style.css' %}">
+</head>
+<body>
+<div class="d-flex flex-column" id="main">
+    <header>
+        <div class="container my-3">
+            <div class="row align-items-center">
+                <div class="col-md-9">
+                    <a class="page-title" href="{% url 'explorer:index' %}">
+                        <img alt="Dogbolt Logo" src="/static/img/dogbolt-small.png">
+                        <h1 class="my-0">Decompiler Explorer</h1>
+                    </a>
+                </div>
+                <div class="col-md-3">
+                    <a href="{% url 'explorer:faq' %}" class="float-end">What is this?</a>
+                </div>
+            </div>
+        </div>
+    </header>
+    <section id="content" class="container">
+        <div class="row my-3">
+            <h2>Queue</h2>
+        </div>
+        <div class="row my-3" id="queue">
+        </div>
+    </section>
+    <footer class="fixed-bottom">
+        <div class="container">
+            <div class="row justify-content-between text-center my-2">
+                <p class="mb-0 small">Decompiler Explorer is open source! Fork it on <a href="https://github.com/decompiler-explorer/decompiler-explorer">GitHub</a>!</p>
+            </div>
+        </div>
+    </footer>
+</div>
+<script src="{% static 'js/queue.js' %}"></script>
+</body>
+</html>