Skip to content

Commit

Permalink
Add GPU booking templates and dashboard for managing GPU reservations
Browse files Browse the repository at this point in the history
  • Loading branch information
@SimoneBendazzoli93
SimoneBendazzoli93 committed Feb 9, 2025
1 parent 21739ca commit 7be7f86
Show file tree
Hide file tree
Showing 3 changed files with 272 additions and 0 deletions.
Empty file added dashboard/apps/gpu_scheduler/__init__.py
View file
Empty file.
120 changes: 120 additions & 0 deletions dashboard/apps/templates/accounts/gpu_booking.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
{% extends 'layouts/base-fullscreen.html' %}

{% block title %} Sign UP {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

<div class="container position-sticky z-index-sticky top-1">
<div class="row">
<div class="col-12">

{% include "includes/navigation-fullscreen.html" %}

</div>
</div>
</div>

<main class="main-content mt-0"></main>

<section class="min-vh-100 mb-8">
<div class="page-header align-items-start min-vh-50 pt-5 pb-11 m-3 border-radius-lg" style="background-image: url('{{ ASSETS_ROOT }}/img/shutterstock/shutterstock_1941321493.jpg');">
<span class="mask bg-gradient-dark opacity-6"></span>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5 text-center mx-auto">
<h1 class="text-white mb-2 mt-5">GPU Booking System</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row mt-lg-n10 mt-md-n11 mt-n10">
<div class="col-xl-4 col-lg-5 col-md-7 mx-auto">
<div class="card z-index-0">

<div class="card-header text-center pt-4">
<h5>Register a New GPU Booking</h5>
</div>

<div class="row px-xl-5 px-sm-4 px-3">

<div class="mt-2 position-relative text-center">
</div>

</div>

<div class="card-body">

{% if success %}

<p class="text-sm mt-3 mb-0 text-center">
<div class="text-center">
<a href="{% url 'login' %}" class="btn bg-gradient-dark w-100 my-4 mb-2">Sign IN</a>
</div>
</p>

{% else %}

<form role="form text-left" method="post" action="" enctype="multipart/form-data">

{% csrf_token %}

<div class="mb-3">
<label>Project Name</label>
{{ form.namespace }}
<span class="text-danger">{{ form.namespace.errors }}</span>
</div>

<div class="mb-3">
<label>Email</label>
{{ form.user_email }}
<span class="text-danger">{{ form.email.errors }}</span>
</div>

<div class="mb-3">
<label>GPU Request</label>
{{ form.gpu }}
<span class="text-danger">{{ form.gpu.errors }}</span>
</div>

<div class="mb-3">
<label>Booking GPU from</label>
{{ form.start_date }}
<span class="text-danger">{{ form.start_date.errors }}</span>
</div>





<div class="mb-3">
<label>Booking GPU until</label>
{{ form.end_date }}
<span class="text-danger">{{ form.end_date.errors }}</span>

<div class="text-center">
<button type="submit" name="register" class="btn bg-gradient-dark w-100 my-4 mb-2">Request GPU Booking</button>
</div>

</form>

{% endif %}

</div>
</div>
</div>
</div>
</div>
</section>

{% include "includes/footer-fullscreen.html" %}

</main>

{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}{% endblock javascripts %}
152 changes: 152 additions & 0 deletions dashboard/apps/templates/accounts/gpu_booking_info.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
{% extends 'layouts/base.html' %}

{% block title %} Dashboard {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

<section class="min-vh-100 mb-8">
<div class="page-header align-items-start min-vh-50 pt-5 pb-11 m-3 border-radius-lg" style="background-image: url('{{ ASSETS_ROOT }}/img/maia_background.jpg');">
<span class="mask bg-gradient-dark opacity-6"></span>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5 text-center mx-auto">
<h1 class="text-white mb-2 mt-5">GPU Bookings</h1>

</div>
</div>
</div>
</div>

<div class="row">
<div>
<div class="card"></div>
<div class="card-header">
<div class="row">
<div>
<h1 style="text-align: center;">Your GPU Bookings:</h1>
<h4 class="mb-2 mt-5">Total Number of Booked Days: {{ total_days }}</h4>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">GPU</th>
<th scope="col">Start Time</th>
<th scope="col">End Time</th>
<th scope="col">Project</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
{% for booking in bookings %}
<tr>
<td>{{ booking.gpu }}</td>
<td>{{ booking.start_date }}</td>
<td>{{ booking.end_date }}</td>
<td>{{ booking.namespace }}</td>
<td>{{ booking.status }}</td>

</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}
<script src="{{ ASSETS_ROOT }}/js/plugins/chartjs.min.js"></script>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}

function copyToClipboard(e, namespace) {
navigator.clipboard.writeText("kubectl exec -it " + e.target.id + " -n " + namespace + " -- bash");
}

function copyToClipboardPF(e, namespace, port) {
navigator.clipboard.writeText("kubectl port-forward svc/" + e.target.id + " -n " + namespace + " :" + port);
}

function deleteElement(e) {
if (!confirm('Are you sure you want to delete?')) e.preventDefault();
}

function copyToClipboardPod(e, namespace, port) {
navigator.clipboard.writeText("kubectl port-forward " + e.target.id + " -n " + namespace + " :" + port);
}
</script>
<style>
#thumbs {
width: 1000px;
margin-top: 180px;
margin-left: auto;
margin-right: auto;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}

#thumbs a {
vertical-align: top;
display: inline-block;
display: inline;
zoom: 1;
}

.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}

.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 12px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 10px;
}

.content {
padding: 0 12px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
{% endblock javascripts %}

0 comments on commit 7be7f86

Please sign in to comment.