feat: improve view VM styling and show VM configuration

dash/templates/dash/instances/view/index.html

@@ -1,17 +1,30 @@
 {% extends 'dash/common/base.html' %} {% block dash %}
-<h2>{{ title }}</h2>
-<p>
-Name: {{ instance.name }}
-</p>
-<p>
-Configuration: {{ instance.configuration }}
-</p>
-<p>
-Created On: {{ instance.created_at }}
-</p>
+<h1>{{ title }}</h1>
 
-<p>
-Click <a href="{% url 'dash.instances.delete' name=instance.name %}">here</a> to delete instance
-</p>
+<div class="inner__container">
+  <h2>Configuration: {{ instance.configuration.name }}</h2>
+  <ul class="configuration__spec-list">
+    <li class="configuration__spec">{{ instance.configuration.cpu }} vCPU</li>
+    <li class="configuration__spec">{{ instance.configuration.ram }} GB RAM</li>
+    <li class="configuration__spec">
+      {{ instance.configuration.storage }} GB Storage
+    </li>
+  </ul>
+
+  <p>Created On: {{ instance.created_at }}</p>
+
+  <form
+    action="{% url 'dash.instances.delete' name=instance.name %}"
+    method="GET"
+    class="dash__form"
+    accept-charset="utf-8"
+  >
+    <div class="form__action-container">
+      <button class="form__submit--danger" type="submit">
+        Delete Instance
+      </button>
+    </div>
+  </form>
+</div>
 
 {% endblock %}

dash/views.py

@@ -118,6 +118,7 @@ def view_instance(request, name: str):
 
     instance = get_object_or_404(Instance, owned_by=user, name=name)
     ctx = default_ctx(title=PAGE_TITLE, username=user.username)
+    instance.configuration = instance.configuration_id
     ctx["instance"] = instance
     return render(request, "dash/instances/view/index.html", context=ctx)