Commit 9f4e6679 authored by Stefano Alberto Russo's avatar Stefano Alberto Russo
Browse files

UI/UX improvements for new tasks and navigation. Fixes.

parent 90cee362

services/webapp/code/rosetta/core_app/management/commands/core_app_populate.py

+3 −3
Original line number Diff line number Diff line
@@ -48,9 +48,9 @@ class Command(BaseCommand): 
  To change it, head to the <a href="/admin">admin</a> page and edit the <code>Text</code> model.

  <br/><br/>

  The default installation provides a test user register with email <code>testuser@rosetta.platform</code>

  and password <code>testpass</code>, which you can use to login on the menu on the right or using the link

  below and give Rosetta a try immediately. If you run with the default docker-compose file (i.e. you just

  run <code>rosetta/setup</code>), then you will also have a few demo computing resources you can play with

  and password <code>testpass</code>, which you can use to login on the menu on the rightand give Rosetta

  a try immediately. If you run with the default docker-compose file (i.e. you just run 

  <code>rosetta/setup</code>), then you will also have a few demo computing resources you can play with

  out-of-the-box, including a small Slurm cluster. Otherwise, you will need to setup your own computing

  resources either platform-wide or as user.

</div>

services/webapp/code/rosetta/core_app/templates/components/container.html

+1 −1
Original line number Diff line number Diff line
@@ -112,7 +112,7 @@ 
        </div>

        

        <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">&nbsp;<i class="fa fa-play" style="color:green"></i></a>

        <a href="/create_task?task_container_uuid={{ container.uuid }}&step=two" class="btn btn-light" style="border: #c0c0c0 1px solid">&nbsp;<i class="fa fa-play" style="color:green"></i></a>

        </div>

services/webapp/code/rosetta/core_app/templates/containers.html

+10 −1
Original line number Diff line number Diff line
@@ -12,15 +12,24 @@ 
      {% if data.container %}

      <h1><a href="/containers">Containers</a> <span style="font-size:18px"> / {{ data.container.name }}</span></h1>

      {% else %}

      {% if data.mode == 'new_task' %}

      <h1>New task</h1>

      <hr/>

      <h3>Step 1: choose software container.</h3>

      <br/> 

      {% else %}

      <h1>Containers</h1>



      <hr/>

      {% endif %}

 



      

      

      <div class="form-filter" style="margin-bottom:20px">

        <form action="" method="POST">

          

          <input type="hidden" name="mode" value="{{data.mode}}">

                    

          <input type="text" class="form-control" id="search_text" name="search_text" placeholder="Search..." style="width:200px; margin:0; display:inline" value="{{data.search_text}}" autofocus>



          <select class="form-control" id="search_type" name="search_type" style="width:120px; margin:0; display:inline">

services/webapp/code/rosetta/core_app/templates/create_task.html

+47 −47
Original line number Diff line number Diff line
@@ -11,45 +11,49 @@ 
      <h1>New Task</h1> 

      <hr>



      {% if data.step == 'one' %}



          <h3>Step 1: name, container and computing.</h3> 

      {% if data.step == 'two' %} 

      <h3>Step 2: set task name and computing.</h3> 

      {% elif data.step == 'three' %}  

      <h3>Step 3: add authentication and computing details.</h3>    

      {% endif %}



      <br/>





      <div style="width:300px; float:left; border: #e0e0e0 solid 1px; margin:10px; background:#f8f8f8; margin-bottom:15px">

        <div style="padding:10px; margin-top:5px; text-align:center; border-bottom: {{data.task_container.color}} solid 10px; ">

        <a href="?uuid={{ container.uuid }}">{{ data.task_container.name }}</a>&nbsp; 

        {% if data.task_container.type == 'docker' %}<img src="/static/img/docker-logo.svg" style="height:18px; width:18px; margin-bottom:4px" />{% endif %}

        {% if data.task_container.type == 'singularity' %}<img src="/static/img/singularity-logo.svg" style="height:18px; width:18px; margin-bottom:4px" />{% endif %}

        </div>  

        <div style="padding:10px; height: 64px; vertical-align: middle;">

        <b>Image:</b> {{ data.task_container.image_name }}<br/>

        <b>Version:</b> {{ data.task_container.image_tag }}

        </div>

      </div>



      {% if data.step == 'two' %}



          <form action="/create_task/" method="POST">

          {% csrf_token %}

          <input type="hidden" name="step" value="one" />

          <input type="hidden" name="step" value="{{ data.next_step }}" />

          <input type="hidden" name="task_container_uuid" value="{{data.task_container.uuid}}">



      <div style="width:300px; float:left; border: #e0e0e0 solid 0px; margin:10px; background:#f8f8f8; margin-bottom:15px">



          <table class="dashboard" style="max-width:700px">

          <table style="max-width:100%; border: #e0e0e0 solid 1px; margin:0">

          <tr><td colspan="2"></td></tr>



           <tr>

            <td><b>Task name </b></td>

            <td>

             <input type="text" name="task_name" value="" placeholder="" size="23" required />

             <input type="text" name="task_name" value="" placeholder="" size="" required />

            </td>

           </tr>



           <tr>

            <td><b>Task container</b></td><td>

              {% if data.task_container %}

              <select name="task_container_uuid">

              <option value="{{data.task_container.uuid}}" selected>{{data.task_container.name}} ({{data.task_container.type.title}})</option>

              </select>

              {% else %}

              <select name="task_container_uuid" >

              {% for container in data.containers %}

              <option value="{{container.uuid}}">{{container.name}} ({{container.type.title}})</option>

              {% endfor %}

              </select>

              {% endif %}

            </td>

           </tr>

           

           <tr>

            <td><b>Computing resource</b></td><td>

            <td><b>Computing</b></td><td>

              <select name="task_computing_uuid" >

              {% for computing in data.computings %}}

              <option value="{{ computing.uuid }}">{{ computing.name}}</option>
@@ -59,38 +63,30 @@ 
           </tr>



           <tr>

           <td colspan=2 align=center style="padding:20px">

           <td colspan=2 align=center style="padding:9px">

           <input type="submit" value="Next">

           </td>

           </tr>

          </table>

          </div>

          </form>



      {% elif data.step == 'two' %}

      {% elif data.step == 'three' %}

          

          <h3>Step 2: add authentication and computing details</h3> 

          

          <br/>

          <table class="dashboard" style="max-width:700px">

          <tr><td colspan="2"></td></tr>

          <div style="width:300px; float:left; border: #e0e0e0 solid 0px; margin:10px; background:#f8f8f8; margin-bottom:15px">

          <table style="width:100%; height:126px;  border: #e0e0e0 solid 1px; margin:0">



           <tr>

           <tr valign="bottom">

            <td><b>Task name </b></td>

            <td>

             <input type="text" name="task_name_RECAP" value="{{ data.task_name }}" placeholder="" size="23" disabled />

             <input type="text" name="task_name_RECAP" value="{{ data.task_name }}" placeholder="" size="" disabled />

            </td>

           </tr>



          <tr>

            <td><b>Task container</b></td><td>

              <select name="task_container_uuid_RECAP">

              <option value="" selected>{{data.task_container.name}} ({{data.task_container.type.title}})</option>

              </select>

            </td>

           </tr>

           

           <tr>

            <td><b>Computing resource</b></td><td>

           <tr valign="top">

            <td><b>Computing</b></td><td>

              <select name="task_computing_uuid_RECAP" >

              <option value="">{{ data.task_computing.name}}</option>

              </select>
@@ -98,8 +94,10 @@ 
           </tr>



          </table>

          </div>

          

          <div style="width:640px; float:left; border: #e0e0e0 solid 0px; margin:10px; background:#f8f8f8; margin-bottom:15px">

          

          <br>          

          {% if data.task_container.type == 'singularity' and not data.task_container.supports_dynamic_ports %}

          <div> <p style="font-size:15px; max-width:700px; margin-bottom:20px; margin-left:5px">

          <i class="fa fa-exclamation-triangle" style="color:orange"></i> This container does not support dynamic ports and you are running it with Singularity, without network insulation. This means that if the container port is already occupied, it will not be able to start.
@@ -114,7 +112,8 @@ 
        

          <form action="/create_task/" method="POST">

          {% csrf_token %}

          <input type="hidden" name="step" value="two" />

          <input type="hidden" name="task_container_uuid" value="{{data.task_container.uuid}}">

          <input type="hidden" name="step" value="{{ data.next_step }}" />

          <input type="hidden" name="task_name" value="{{ data.task_name }}" />

          <input type="hidden" name="task_container_uuid" value="{{ data.task_container.uuid }}" />

          <input type="hidden" name="task_computing_uuid" value="{{ data.task_computing.uuid }}" />
@@ -180,7 +179,7 @@ 
            </td>

           </tr>  -->

           

           {% if data.task_computing.type == 'slurm' %}

           {% if data.task_computing.access_method == 'slurm+ssh' %}

           <tr>

            <td><b>Computing options</b></td>

            <td>
@@ -207,6 +206,7 @@ 
           </tr>

          </table>

          </form>

          </div>





      {% else %}

services/webapp/code/rosetta/core_app/templates/main.html

+1 −12
Original line number Diff line number Diff line
@@ -25,17 +25,6 @@ 
                {% endif %}

            </div>

        </div>          



        <div style="display:table-row">

            <div class="text-vertical-bottom">

                {% if user.is_authenticated %}

                <a href="/tasks" class="btn btn-dark btn-lg">Tasks</a>

                <a href="/containers" class="btn btn-dark btn-lg">Containers</a>

                {% else %}

                <a href="/login" class="btn btn-dark btn-lg">Log In</a>

                {% endif %}

            </div>

        </div>

    </header>



{% include "footer.html" %}