From 93f32d0fde3f1bed9e0719c0f7a788341c844eeb Mon Sep 17 00:00:00 2001 From: Stefano Alberto Russo <stefano.russo@gmail.com> Date: Tue, 19 May 2020 19:10:14 +0200 Subject: [PATCH] Improved task template. --- .../core_app/templates/components/task.html | 198 ++++++++++-------- 1 file changed, 110 insertions(+), 88 deletions(-) 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 1c48ca1..572d5af 100644 --- a/services/webapp/code/rosetta/core_app/templates/components/task.html +++ b/services/webapp/code/rosetta/core_app/templates/components/task.html @@ -1,9 +1,90 @@ + {% if data.task %} + <div style="width:350px; float:left; border: #e0e0e0 solid 1px; margin:10px; background:#f8f8f8; margin-bottom:20px"> + <div style="margin-top:5px; padding:10px; text-align:center; border-bottom: #f8f8f8 solid 1px; "> + <b>Summary</b> + </div> + {% else %} + <div style="width:350px; float:left; border: #e0e0e0 solid 1px; margin:10px; background:#f8f8f8; margin-bottom:20px"> + + <div style="margin-top:5px; padding:10px; text-align:center; border-bottom: #e0e0e0 solid 1px; "> + <a href="?uuid={{ task.uuid }}"><b>{{ task.name }}</b></a> + </div> + + + {% endif %} + + + + <!-- <div style="background:{{task.color}}; height:24px;"></div> --> + + <!-- <div style="background:{{ task.container.color }}; height:14px;"></div> --> + + <!-- <div style="margin-bottom:15px; margin-top:0px"> + <div style="background:{{task.container.color}}; height:14px; width:149px; float:left"></div> + <div style="background:{{task.computing.color}}; height:14px; width:149px; float:left"></div> + </div> --> + + + <div style="padding:10px;"> + <!-- <b>Container:</b> {{ task.container.name }} <span style="font-size:14px; background-color:{{task.container.color}}"> </span> <br/> + <b>Computing:</b> {{ task.computing.name }} <span style="font-size:14px; background-color:{{task.computing.color}}"> </span><br/> --> + + <b>Container:</b> + <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 %} + + <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" %} + <b>Status:</b> <font color="green">running</font> + {% else %} + <b>Status:</b> {{ task.status }} + {% endif %} + </div> + </div> + + <div style="margin-bottom:10px; text-align:center; padding:5px"> + + <!-- Stop / Delete / Cancel --> + {% if task.status == "stopped" or task.status == "created" %} + <a href="?uuid={{task.uuid}}&action=delete&fromlist=True" class="btn btn-action">Delete</a> + {% else %} + <a href="?uuid={{task.uuid}}&action=stop&fromlist=True" class="btn btn-action">Stop</a> + {% endif %} + + <!-- Connect --> + {% if task.port %} + {% if task.status == "running" %} + <a href="?uuid={{task.uuid}}&action=connect" class="btn btn-connect">Connect</a> + {% else %} + <a href="" class="btn btn-disabled">Connect</a> + {% endif %} + {% endif %} + + <!-- View log --> + {% if task.status == "created" %} + <a href="" class="btn btn-disabled">Logs</a> + {% else %} + <a href="/task_log/?uuid={{task.uuid}}&action=viewlog" class="btn btn-action">Logs</a> + {% endif %} + </div> + + + + </div> + + {% if data.task %} - <table class="dashboard"> + <table class="dashboard" style="margin:10px"> <!-- <tr> <td colspan="2"> @@ -16,9 +97,13 @@ --> <tr> + <td colspan="2" align="center" style="padding:15px"><b>Details</b></td> + </tr> + + <!-- <tr> <td><b>Name</b></td> <td>{{ task.name }}</td> - </tr> + </tr> --> <tr> <td><b>ID</b></td> @@ -26,33 +111,27 @@ </tr> <tr> - <td><b>Container</b></td> + <td><b>Image</b></td> <td><a href="/containers/?uuid={{ task.container.uuid }}">{{ task.container.image }}</a></td> </tr> - <tr> + <!-- <tr> <td><b>Status</b></td> <td>{{ task.status }}</td> - </tr> + </tr> --> <tr> <td><b>Created at</b></td> <td>{{ task.created }}</td> </tr> - - <tr> - <td><b>Running on</b></td> - <td>{{ task.computing }}</td> - </tr> - <tr> <td><b>Extra binds</b></td> <td>{{ task.extra_binds }}</td> </tr> <tr> - <td><b>IP</b></td> + <td><b>Host</b></td> <td>{{ task.ip }}</td> </tr> @@ -62,29 +141,26 @@ </tr> <tr> - <td><b>Task tunnel port</b></td> + <td><b>Tunnel port</b></td> <td>{{ task.tunnel_port }}</td> </tr> {% if task.auth_pass %} <tr> - <td><b>Task Auth pass</b></td> + <td><b>Auth pass</b></td> <td>******</td> </tr> {% endif %} - - - - <tr> + <!-- <tr> <td><b>Operations</b></td> <td> {% if task.status == "running" %} <a href="?uuid={{task.uuid}}&action=stop&details={{details}}">Stop</a> | - {% else %} + {% else %}--> <!-- <a href=?uuid={{task.uuid}}&action=start>Start</a> | --> - <font color="#c0c0c0">Stop</font> | + <!-- <font color="#c0c0c0">Stop</font> | {% endif %} <a href="?uuid={{task.uuid}}&action=delete&details=False">Delete</a> @@ -102,83 +178,29 @@ | <a href="/task_log/?uuid={{task.uuid}}&action=viewlog">View Log</a> {% endif %} - </td> </tr> + --> </table> - - {% else %} - <div style="width:350px; float:left; border: #e0e0e0 solid 1px; margin:10px; background:#f8f8f8; margin-bottom:20px"> - - - <!-- <div style="background:{{task.color}}; height:24px;"></div> --> - - <div style="margin-top:5px; padding:10px; text-align:center; border-bottom: #e0e0e0 solid 1px; "> - <a href="?uuid={{ task.uuid }}"><b>{{ task.name }}</b></a> - </div> - <!-- <div style="background:{{ task.container.color }}; height:14px;"></div> --> - - <!-- <div style="margin-bottom:15px; margin-top:0px"> - <div style="background:{{task.container.color}}; height:14px; width:149px; float:left"></div> - <div style="background:{{task.computing.color}}; height:14px; width:149px; float:left"></div> - </div> --> - - <div style="padding:10px;"> - <!-- <b>Container:</b> {{ task.container.name }} <span style="font-size:14px; background-color:{{task.container.color}}"> </span> <br/> - <b>Computing:</b> {{ task.computing.name }} <span style="font-size:14px; background-color:{{task.computing.color}}"> </span><br/> --> - <b>Container:</b> - <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 %} - <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" %} - <b>Status:</b> <font color="green">running</font> - {% else %} - <b>Status:</b> {{ task.status }} - {% endif %} - </div> - </div> - - <div style="margin-bottom:10px; text-align:center; padding:5px"> - - <!-- Stop / Delete / Cancel --> - {% if task.status == "stopped" or task.status == "created" %} - <a href="?uuid={{task.uuid}}&action=delete&fromlist=True" class="btn btn-action">Delete</a> - {% else %} - <a href="?uuid={{task.uuid}}&action=stop&fromlist=True" class="btn btn-action">Stop</a> - {% endif %} - - <!-- Connect --> - {% if task.port %} - {% if task.status == "running" %} - <a href="?uuid={{task.uuid}}&action=connect" class="btn btn-connect">Connect</a> - {% else %} - <a href="" class="btn btn-disabled">Connect</a> - {% endif %} - {% endif %} - - <!-- View log --> - {% if task.status == "created" %} - <a href="" class="btn btn-disabled">Logs</a> - {% else %} - <a href="/task_log/?uuid={{task.uuid}}&action=viewlog" class="btn btn-action">Logs</a> - {% endif %} - </div> - - - - </div> + + + + + + + + + + + + + {% endif %} \ No newline at end of file -- GitLab