From 641730d83fb2704bafec8aa93b023fd005a78b9d Mon Sep 17 00:00:00 2001
From: Stefano Alberto Russo <stefano.russo@gmail.com>
Date: Thu, 14 May 2020 01:40:50 +0200
Subject: [PATCH] UI improvements.
---
.../webapp/code/rosetta/core_app/models.py | 13 +++++++--
.../core_app/templates/add_container.html | 2 +-
.../templates/components/computing.html | 6 ++--
.../templates/components/container.html | 29 +++++++++++--------
.../core_app/templates/components/task.html | 10 +++----
5 files changed, 37 insertions(+), 23 deletions(-)
diff --git a/services/webapp/code/rosetta/core_app/models.py b/services/webapp/code/rosetta/core_app/models.py
index c70db45..05d9979 100644
--- a/services/webapp/code/rosetta/core_app/models.py
+++ b/services/webapp/code/rosetta/core_app/models.py
@@ -112,10 +112,19 @@ class Container(models.Model):
if not self.ports:
return None
return(int(self.ports.split(',')[0]))
-
-
+ @property
+ def image_name(self):
+ return self.image.split(':')[0]
+
+ def image_tag(self):
+
+ if ':' in self.image:
+ return self.image.split(':')[1]
+ else:
+ return 'latest'
+
#=========================
# Computing resources
#=========================
diff --git a/services/webapp/code/rosetta/core_app/templates/add_container.html b/services/webapp/code/rosetta/core_app/templates/add_container.html
index 2afe149..65d8285 100644
--- a/services/webapp/code/rosetta/core_app/templates/add_container.html
+++ b/services/webapp/code/rosetta/core_app/templates/add_container.html
@@ -49,7 +49,7 @@
</tr>
<tr>
- <td><b>Image</b></td>
+ <td><b>Image:tag</b></td>
<td>
<input type="text" name="container_image" value="" placeholder="" size="23" required />
</td>
diff --git a/services/webapp/code/rosetta/core_app/templates/components/computing.html b/services/webapp/code/rosetta/core_app/templates/components/computing.html
index f5605df..34799c0 100644
--- a/services/webapp/code/rosetta/core_app/templates/components/computing.html
+++ b/services/webapp/code/rosetta/core_app/templates/components/computing.html
@@ -4,10 +4,10 @@
<div style="float:left; width:500px; margin:10px; margin-bottom:20px">
<table class="dashboard" style="width:100%">
- <tr>
+ <!-- <tr>
<td colspan="2" style="background:{{ data.computing.color }}; height:25px">
</td>
- </tr>
+ </tr> -->
<tr>
<td><b>Name</b></td>
@@ -69,7 +69,7 @@
{% else %}
<div style="width:300px; float:left; border: #e0e0e0 solid 1px; margin:10px; background:#f8f8f8; margin-bottom:15px">
- <div style="background:{{computing.color}}; height:24px"></div>
+ <!-- <div style="background:{{computing.color}}; height:24px"></div> -->
<div style="padding:10px; margin-top:5px; text-align:center; border-bottom: #e0e0e0 solid 1px; ">
<a href="?uuid={{ computing.uuid }}&details=True">{{ computing.name }}</a>
diff --git a/services/webapp/code/rosetta/core_app/templates/components/container.html b/services/webapp/code/rosetta/core_app/templates/components/container.html
index d8842b0..1fc5ddd 100644
--- a/services/webapp/code/rosetta/core_app/templates/components/container.html
+++ b/services/webapp/code/rosetta/core_app/templates/components/container.html
@@ -5,7 +5,7 @@
<table class="dashboard" style="margin:10px">
<tr>
- <td colspan="2" style="background:{{ container.color }}; height:25px">
+ <td colspan="2" style="background:{{ container.color }}; height:15px">
</td>
</tr>
@@ -21,7 +21,12 @@
<tr>
<td><b>Image</b></td>
- <td>{{ container.image }}</td>
+ <td>{{ container.image_name }}</td>
+ </tr>
+
+ <tr>
+ <td><b>V. tag</b></td>
+ <td>{{ container.image_tag }}</td>
</tr>
<tr>
@@ -88,23 +93,23 @@
{% else %}
<div style="width:300px; float:left; border: #e0e0e0 solid 1px; margin:10px; background:#f8f8f8; margin-bottom:15px">
- <div style="background:{{container.color}}; height:24px;">
- </div>
+
- <div style="padding:10px; margin-top:5px; text-align:center; border-bottom: #e0e0e0 solid 1px; ">
- <a href="?uuid={{ container.uuid }}">{{ container.name }}</a>
+ <div style="padding:10px; margin-top:5px; text-align:center; border-bottom: {{container.color}} solid 10px; ">
+ <a href="?uuid={{ container.uuid }}">{{ container.name }}</a>
+ {% if container.type == 'docker' %}<img src="/static/img/docker-logo.svg" style="height:18px; width:18px; margin-bottom:4px" />{% endif %}
+ {% if container.type == 'singularity' %}<img src="/static/img/singularity-logo.svg" style="height:18px; width:18px; margin-bottom:4px" />{% endif %}
</div>
<div style="padding:10px;">
- <b>Type:</b> {{ container.type.title }}
- {% if container.type == 'docker' %}<img src="/static/img/docker-logo.svg" style="height:18px; width:18px; margin-bottom:2px" />{% endif %}
- {% if container.type == 'singularity' %}<img src="/static/img/singularity-logo.svg" style="height:18px; width:18px; margin-bottom:2px" />{% endif %}
-
+
+ <b>Image:</b> {{ container.image_name }}
+
<br/>
- <b>Image:</b> {{ container.image }}
+ <b>Version:</b> {{ container.image_tag }}
</div>
- <div style="margin-bottom:10px; text-align:center">
+ <div style="margin-bottom:13px; margin-top: 3px; text-align:center">
<a href="/create_task?task_container_uuid={{ container.uuid }}" class="btn btn-light" style="border: #c0c0c0 1px solid"> <i class="fa fa-play" style="color:green"></i></a>
</div>
diff --git a/services/webapp/code/rosetta/core_app/templates/components/task.html b/services/webapp/code/rosetta/core_app/templates/components/task.html
index 7447087..90e6247 100644
--- a/services/webapp/code/rosetta/core_app/templates/components/task.html
+++ b/services/webapp/code/rosetta/core_app/templates/components/task.html
@@ -108,7 +108,7 @@
</table>
{% else %}
- <div style="width:300px; float:left; border: #e0e0e0 solid 1px; margin:10px; background:#f8f8f8; margin-bottom:20px">
+ <div style="width:350px; float:left; border: #e0e0e0 solid 1px; margin:10px; background:#f8f8f8; margin-bottom:20px">
@@ -131,14 +131,14 @@
<b>Computing:</b> {{ task.computing.name }} <span style="font-size:14px; background-color:{{task.computing.color}}"> </span><br/> -->
<b>Container:</b>
- {{ task.container.name }}
+ <a href="/containers/?uuid={{ task.container.uuid }}" style="color:{{task.container.color}}">{{ task.container.name }}</a>
{% if task.container.type == 'docker' %}<img src="/static/img/docker-logo.svg" style="height:18px; width:18px; margin-bottom:4px" />{% endif %}
{% if task.container.type == 'singularity' %}<img src="/static/img/singularity-logo.svg" style="height:18px; width:18px; margin-bottom:4px" />{% endif %}
- <a href="/containers/?uuid={{ task.container.uuid }}" style="color:{{task.container.color}}"><i class="fa fa-external-link" ></i></a>
+
<br/>
- <b>Computing:</b> {{ task.computing.name }}
- <a href="/computings/?uuid={{ task.computing.uuid }}" style="color:{{task.computing.color}}"><i class="fa fa-external-link" ></i></a><br/>
+ <b>Computing:</b> <a href="/computings/?uuid={{ task.computing.uuid }}">{{ task.computing.name }}</a>
+ <!-- <a href="/computings/?uuid={{ task.computing.uuid }}" no_style="color:{{task.computing.color}}"><i class="fa fa-external-link" ></i></a><br/> -->
<div style="margin-top:2px">
{% if task.status == "running" %}
--
GitLab