refine create and details deployment ui
This commit is contained in:
rmanach
@@ -15,54 +15,62 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% if user.is_authenticated %}
|
||||
<table class="table table-striped table-hover">
|
||||
<tr>
|
||||
<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 }}">
|
||||
<th name="name">{{ deployment.name }}</th>
|
||||
<th name="type">{{ deployment.type }}</th>
|
||||
<th name="status">{{ deployment.status }}</th>
|
||||
<th>
|
||||
<a href="{% url 'deployment-details' deployment.id %}">
|
||||
<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 %}
|
||||
<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>
|
||||
{% include 'pagination.html' %}
|
||||
<a class="btn btn-success" href="{% url 'deployment-create' %}" role="button">Create</a>
|
||||
{% else %}
|
||||
<div class="container-fluid">
|
||||
<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>
|
||||
{% if user.is_authenticated %}
|
||||
<table class="table table-striped table-hover">
|
||||
<tr>
|
||||
<th scope="col-3">Name</th>
|
||||
<th scope="col-3">Type</th>
|
||||
<th scope="col-3">Status</th>
|
||||
<th class="col-2"></th>
|
||||
<th class="col-2"></th>
|
||||
</tr>
|
||||
{% for deployment in page_obj %}
|
||||
<tr id="{{ deployment.id }}">
|
||||
<th name="name">{{ deployment.name }}</th>
|
||||
<th name="type">{{ deployment.type }}</th>
|
||||
<th name="status">{{ deployment.status }}</th>
|
||||
<th>
|
||||
<a href="{% url 'deployment-details' deployment.id %}">
|
||||
<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 %}
|
||||
<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>
|
||||
{% include 'pagination.html' %}
|
||||
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#create-deployment-modal">
|
||||
Create
|
||||
</button>
|
||||
{% else %}
|
||||
<h4 style="text-align: center;">Please log in !</h4>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block modal %}
|
||||
{% include 'deployment/create_modal.html' %}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% 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 %}
|
||||
@@ -0,0 +1,29 @@
|
||||
<div class="modal fade" id="create-deployment-modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Create new deployment</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="create-deployment-form" action="{% url 'deployment-create' %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Name</label>
|
||||
<input type="name" class="form-control" id="name" name="name" required="">
|
||||
</div>
|
||||
<label for="type" class="form-label">Type</label>
|
||||
<select id="type" name="type" class="form-select" aria-label="Deployment type" required="">
|
||||
<option value="SLIM">Slim</option>
|
||||
<option value="MEDIUM">Medium</option>
|
||||
<option value="LARGE">Large</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" form="create-deployment-form" class="btn btn-success">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3,30 +3,49 @@
|
||||
{% block title %} Deployment details: {{ deployment.name }} {% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% if user.is_authenticated %}
|
||||
<table>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>name</th>
|
||||
<th>type</th>
|
||||
<th>status</th>
|
||||
</tr>
|
||||
<tr id="{{ deployment.id }}">
|
||||
<th name="id">{{ deployment.id }}</th>
|
||||
<th name="name">{{ deployment.name }}</th>
|
||||
<th name="type">{{ deployment.type }}</th>
|
||||
<th name="status">{{ deployment.status }}</th>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="submit" value="delete">
|
||||
</form>
|
||||
{% else %}
|
||||
<div class="container-fluid">
|
||||
<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 class="col-lg-4 col-md-4 col-sm-6">
|
||||
{% if user.is_authenticated %}
|
||||
<div class="form-floating mb-3">
|
||||
<input type="text" readonly class="form-control-plaintext" id="id" value="{{ deployment.id }}">
|
||||
<label for="id">UUID</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="text" readonly class="form-control-plaintext" id="type" value="{{ deployment.type }}">
|
||||
<label for="type">Type</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="text" readonly class="form-control-plaintext" id="status" value="{{ deployment.status }}">
|
||||
<label for="status">Status</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="text" readonly class="form-control-plaintext" id="created_at" value="{{ deployment.created_at }}">
|
||||
<label for="created-at">Created at</label>
|
||||
</div>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="text" readonly class="form-control-plaintext" id="updated_at" value="{{ deployment.updated_at }}">
|
||||
<label for="updated-at">{{ deployment.updated_at }}</label>
|
||||
</div>
|
||||
<form action="" method="post">
|
||||
{% csrf_token %}
|
||||
<button type="button" onclick="goBack()" class="btn btn-secondary">Back</button>
|
||||
{% if deployment.status != "RUNNING" %}
|
||||
<button type="submit" class="btn btn-danger">Delete</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
{% else %}
|
||||
<h4 style="text-align: center;">Please log in !</h4>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script>
|
||||
function goBack() {
|
||||
window.history.back();
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user