fix nginx conf + improve ui

2023-09-20 19:41:19 +02:00
parent b3989a401a
commit 53c54e9553
17 changed files with 263 additions and 134 deletions
@@ -3,4 +3,4 @@ from django_eventstream.channelmanager import DefaultChannelManager

 class DeploymentChannelManager(DefaultChannelManager):
    def can_read_channel(self, user, channel):
-        return user.is_authenticated
+        return user is not None and user.is_authenticated
@@ -1,4 +1,4 @@
-# Generated by Django 4.2.5 on 2023-09-18 08:14
+# Generated by Django 4.2.5 on 2023-09-20 17:23

 from django.conf import settings
 from django.db import migrations, models
@@ -44,6 +44,8 @@ class Migration(migrations.Migration):
                        max_length=7,
                    ),
                ),
+                ("created_at", models.DateTimeField(auto_now_add=True)),
+                ("updated_at", models.DateTimeField(auto_now=True)),
                (
                    "user",
                    models.ForeignKey(
@@ -1,4 +1,5 @@
 from enum import Enum
+from datetime import datetime


 from django.contrib.auth.models import User
@@ -36,6 +37,8 @@ class Deployment(models.Model):
    status = models.CharField(
        max_length=7, choices=Status.into_choices(), default=Status.READY.name
    )
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
    user = models.ForeignKey(User, on_delete=models.CASCADE)

    def __str__(self):
@@ -25,13 +25,16 @@ var start = function (url) {

        const tr = document.getElementById(message.id);
        if (tr) {
-            var th = tr.querySelector("th[name='status']");
-            th.innerHTML = message.status;
+            var status = tr.querySelector("th[name='status']");
+            status.innerHTML = message.status;
+
+            var button = tr.querySelector("th[name='deploy']");
+            if (message.status == "SUCCESS") {
+                button.innerHTML = "";
+            }

            if (message.status == "FAILED") {
-                setTimeout(() => {
                    window.location.reload();
-                }, 2000);
            }
        }

@@ -14,14 +14,22 @@ from deployment.tasks import deploy as launch_deploy


 def index(request):
-    deployments = Deployment.objects.filter(user=request.user.id)
+    deployments = Deployment.objects.filter(user=request.user.id).order_by(
+        "-created_at"
+    )
    paginator = Paginator(deployments, 5)

    page_number = request.GET.get("page")
    page_obj = paginator.get_page(page_number)

    return render(
-        request, "deployment/board.html", {"page_obj": page_obj, "url": "events/"}
+        request,
+        "deployment/board.html",
+        {
+            "page_obj": page_obj,
+            "range_pages": [i + 1 for i in range(page_obj.paginator.num_pages)],
+            "url": "events/",
+        },
    )


@@ -8,6 +8,15 @@ http {
    server {
        listen 8080;

+         types {
+            text/html html htm;
+            text/css css;
+            application/javascript js;
+            image/jpeg jpg jpeg;
+            image/png png;
+            image/svg+xml svg;
+        }
+
        location /static/ {
            alias /app/static/;
        }
@@ -1,26 +1,21 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html>
-
    <head>
        <meta charset="utf-8">
-  <title>{% block title %}mumui{% endblock %}</title>
+        <title>{% block title %}Mumui{% endblock %}</title>
        {% block headscript %}{% endblock %}
+        <link href="{% static 'deployment/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
    </head>

    <body {% block bodyattr %}{% endblock %}>
-  <main>
-    {% if user.is_authenticated or "login" in request.path %}
+        {% include 'header.html' %}
+        <div class="container-md">
            {% block content %}
            {% endblock %}
-      {% if user.is_authenticated %}
-        <p><a href="{% url 'logout' %}">log out</a></p>
-      {% endif %}
-    {% else %}
-      <p>You are not logged in</p>
-      <a href="{% url 'login' %}">log In</a>
-    {% endif %}
-  </main>
+        </div>
+        <script src="{% static 'deployment/js/bootstrap.bundle.min.js' %}" /></script>
        {% block script %}{% endblock %}
    </body>
-
 </html>
@@ -2,7 +2,7 @@

 {% load static %}

-{% block title %} deployment's board {% endblock %}
+{% block title %} Deployments board {% endblock %}

 {% block headscript %}
    <script src="{% static 'django_eventstream/json2.js' %}"></script>
@@ -15,15 +15,14 @@
 {% endblock %}

 {% block content %}
-  {{ user.username }}'s board
-  {% if page_obj %}
-    <table>
+    {% if user.is_authenticated %}
+        <table class="table table-striped table-hover">
            <tr>
-        <th>name</th>
-        <th>type</th>
-        <th>status</th>
-        <th></th>
-        <th></th>
+                <th scope="col-3">Name</th>
+                <th scope="col-3">Type</th>
+                <th scope="col-3">Status</th>
+                <th class="col-1"></th>
+                <th class="col-2"></th>
            </tr>
            {% for deployment in page_obj %}
                <tr id="{{ deployment.id }}">
@@ -32,43 +31,38 @@
                    <th name="status">{{ deployment.status }}</th>
                    <th>
                        <a href="{% url 'deployment-details' deployment.id %}">
-            <button>details</button>
+                            <button class="btn btn-primary">Details</button>
                        </a>
                    </th>
                    {% if deployment.status == "FAILED" or deployment.status == "READY" %}
                        <th name="deploy">
                            <form action="{% url 'deployment-launch' deployment.id %}?page={{ page_obj.number }}" method="post">
                                {% csrf_token %}
-            <input type="submit" value="deploy">
+                                <button class="btn btn-success" type="submit">Deploy</button>
                            </form>
                        </th>
+                    {% elif deployment.status == "RUNNING" %}
+                        <th name="deploy">
+                            <button class="btn btn-primary" type="button" disabled>
+                                <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+                                <span role="status">Deploy</span>
+                            </button>
+                        </th>
+                    {% else %}
+                        <th></th>
                    {% endif %}
                </tr>
            {% endfor %}
        </table>
-    <div class="pagination">
-      <span class="step-links">
-        {% if page_obj.has_previous %}
-        <a href="?page=1">&laquo; first</a>
-        <a href="?page={{ page_obj.previous_page_number }}">previous</a>
-        {% endif %}
-
-        <span class="current">
-          Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
-        </span>
-
-        {% if page_obj.has_next %}
-        <a href="?page={{ page_obj.next_page_number }}">next</a>
-        <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
-        {% endif %}
-      </span>
-    </div>
+        {% include 'pagination.html' %}
+        <a class="btn btn-success" href="{% url 'deployment-create' %}" role="button">Create</a>
    {% else %}
-    <p>no deployments available</p>
+        <div class="row justify-content-md-center">
+            <div class="col-lg-8 col-md-8 col-sm-6">
+                <h4 style="text-align: center;">Please log in !</h4>
+            </div>
+        </div>
    {% endif %}
-  <a href="/deployment/create">
-    <button>create</button>
-  </a>
 {% endblock %}

 {% block script %}
@@ -1,12 +1,20 @@
 {% extends 'base.html' %}

-{% block title %} new deployment {% endblock %}
+{% block title %} New deployment {% endblock %}

 {% block content %}
+    {% if user.is_authenticated %}
        {{ user.username }}'s new deployment
        <form action="" method="post">
            {% csrf_token %}
            {{ form }}
            <input type="submit" value="create">
        </form>
+    {% else %}
+        <div class="row justify-content-md-center">
+            <div class="col-lg-8 col-md-8 col-sm-6">
+                <h4 style="text-align: center;">Please log in !</h4>
+            </div>
+        </div>
+    {% endif %}
 {% endblock %}
@@ -1,8 +1,9 @@
 {% extends 'base.html' %}

-{% block title %} deployment details: {{ deployment.name }} {% endblock %}
+{% block title %} Deployment details: {{ deployment.name }} {% endblock %}

 {% block content %}
+    {% if user.is_authenticated %}
        <table>
            <tr>
                <th>id</th>
@@ -21,4 +22,11 @@
            {% csrf_token %}
            <input type="submit" value="delete">
        </form>
+    {% else %}
+        <div class="row justify-content-md-center">
+            <div class="col-lg-8 col-md-8 col-sm-6">
+                <h4 style="text-align: center;">Please log in !</h4>
+            </div>
+        </div>
+    {% endif %}
 {% endblock %}
@@ -0,0 +1,23 @@
+<div class="container-fluid">
+    <header
+        class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
+        <div class="col-md-3 mb-2 mb-md-0">
+            <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
+                Mumui
+            </a>
+        </div>
+
+        <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
+            <li><a href="{% url 'deployment' %}" class="nav-link px-2">Deployments</a></li>
+            <li><a href="#" class="nav-link px-2">About</a></li>
+        </ul>
+
+        <div class="col-md-3 text-end">
+            {% if user.is_authenticated %}
+                <a href="{% url 'logout' %}"><button type="button" class="btn btn-outline-danger me-2">Logout</button></a>
+            {% else %}
+                <a href="{% url 'login' %}"><button type="button" class="btn btn-outline-primary me-2">Login</button></a>
+            {% endif %}
+        </div>
+    </header>
+</div>
@@ -1,10 +1,27 @@
 {% extends 'base.html' %}

-{% block title %}home{% endblock %}
+{% block title %}Home{% endblock %}

 {% block content %}
-  Hi {{ user.username }}!
-  <ul>
-    <li><a href="{% url 'deployment' %}">deployments</a></li>
-  </ul>
+    {% if user.is_authenticated %}
+        <div class="row justify-content-md-center">
+            <div class="col-lg-4 col-md-8 col-sm-8">
+                <h2 style="text-align: center;">Hi {{ user.username }} ! How are you ?</h2>
+            </div>
+        </div>
+        <div class="row justify-content-md-center">
+            <div class="col-lg-6 col-md-8 col-sm-8">
+                <div style="text-align: center;">Forget, i don't care... Please go on 
+                    <a href="/deployment/">Deployments</a> 
+                    and enjoy the life !
+                </div>
+            </div>
+        </div>
+    {% else %}
+        <div class="row justify-content-md-center">
+            <div class="col-lg-6 col-md-8 col-sm-8">
+                <h4 style="text-align: center;">Please log in !</h4>
+            </div>
+        </div>
+    {% endif %}
 {% endblock %}
@@ -0,0 +1,35 @@
+
+<nav aria-label="pagination">
+    <ul class="pagination justify-content-center">
+        {% if page_obj.has_previous %}
+            <li class="page-item">
+                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
+            </li>
+        {% else %}
+            <li class="page-item disabled">
+                <a class="page-link">Previous</a>
+            </li>              
+        {% endif %}
+        {% for page in range_pages %}
+            {% if page == page_obj.number  %}
+                <li class="page-item active">
+                    <a class="page-link" href="?page={{ page }}">{{ page }}</a>
+                </li>
+            {% else %}
+                <li class="page-item">
+                    <a class="page-link" href="?page={{ page }}">{{ page }}</a>
+                </li>
+            {% endif %}
+        {% endfor %}
+        {% if page_obj.has_next %}
+            <li class="page-item">
+                <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
+            </li>
+        {% else %}
+            <li class="page-item disabled">
+                <a class="page-link">Next</a>
+            </li>
+        {% endif %}
+    </ul>
+</nav>
+    
@@ -1,17 +1,27 @@
 {% extends 'base.html' %}

-{% block title %} login {% endblock %}
+{% block title %} Login {% endblock %}

 {% block content %}
+    <div class="row justify-content-md-center">
+        <div class="col-lg-4 col-md-4 col-sm-6">
            {% if not user.is_authenticated %}
-        <h2>log in</h2>
+                <h2>Log in</h2>
                <form method="post">
                    {% csrf_token %}
-            {{ form.username.label_tag }} {{ form.username }}
-            {{ form.password.label_tag }} {{ form.password }}
-            <button type="submit">log in</button>
+                    <div class="mb-3">
+                        <label for="id_username" class="form-label">Username</label>
+                        <input type="username" class="form-control" id="id_username" name="username" required="">
+                    </div>
+                    <div class="mb-3">
+                        <label for="id_password" class="form-label">Password</label>
+                        <input type="password" id="id_password" name="password" class="form-control" required="">
+                    </div>
+                    <button type="submit" class="btn btn-success">Log in</button>
                </form>
            {% else %}
-        <div>you're already log in !</div>
+                <h4 style="text-align: center;">You're already log in !</h4>
            {% endif %}
+        </div>
+    </div>
 {% endblock %}