Commit d42f7baf authored by Stefano Alberto Russo's avatar Stefano Alberto Russo
Browse files

Rationalized software container views and templates.

parent c99ecc59

services/webapp/code/rosetta/core_app/models.py

+5 −0
Original line number Diff line number Diff line
@@ -197,6 +197,11 @@ class Container(models.Model): 
        color_map_index = string_int_hash % len(color_map)

        return color_map[color_map_index]



    @property

    def env_vars_json(self):

        if not self.env_vars:

            return''

        return json.dumps(self.env_vars)

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

+17 −10
Original line number Diff line number Diff line
@@ -7,19 +7,20 @@ 
  <div class="dashboard">

    <div class="span8 offset2">

      <h1><a href="/software">Software containers</a> <span style="font-size:18px"> / add</span></h1>

      <hr>

      <br/>



      {% if not data.added %}



          Here you can add a new software container on the platform. You can add containers from image registries

          <!--  Here you can add a new software container on the platform. You can add containers from image registries

          as <a href="https://hub.docker.com/">Docker Hub </a>or by importing Git repositories, provided that they

          are compatible with <a href="https://mybinder.readthedocs.io/en/latest/introduction.html">Binder</a> specifications.

          <br/>

          <br/>

          -->



          {% if data.new_container_from == 'registry' %}

          <div style="font-size:1.1em; background:whitesmoke; display:inline-block; padding:2px 15px 2px 15px">New container from registry</div>

          <div style="font-size:1.1em; background:white; display:inline-block; padding:2px 15px 2px 15px"><a href="?new_container_from=repository">New container from Git repository</a></div>

          <div style="font-size:1.1em; background:whitesmoke; display:inline-block; padding:2px 15px 2px 15px">From registry</div>

          <div style="font-size:1.1em; background:white; display:inline-block; padding:2px 15px 2px 15px"><a href="?new_container_from=repository">From repository</a></div>

          <hr style="margin-top:0;">



          <form action="#" method="POST">
@@ -181,8 +182,8 @@ 




          {% else %}

          <div style="font-size:1.1em; background:white; display:inline-block; padding:2px 15px 2px 15px"><a href="?new_container_from=registry">New container from registry</a></div>

          <div style="font-size:1.1em; background:whitesmoke; display:inline-block; padding:2px 15px 2px 15px">New container from Git repository</div>

          <div style="font-size:1.1em; background:white; display:inline-block; padding:2px 15px 2px 15px"><a href="?new_container_from=registry">From registry</a></div>

          <div style="font-size:1.1em; background:whitesmoke; display:inline-block; padding:2px 15px 2px 15px">From repository</div>

          <hr style="margin-top:0;">



          <form action="#" method="POST">
@@ -210,7 +211,7 @@ 
          <table class="dashboard" style="width:500px; margin-bottom:25px">



           <tr>

            <td><b>Repository URL</b></td><td>

            <td><b>Repository URL*</b></td><td>

             <input type="text" name="repository_url" size="35" required />

            </td>

           </tr>
@@ -223,22 +224,28 @@ 
            </td>

           </tr>



           <tr>

            <td colspan=2>

            *must comply with the <a href="https://mybinder.readthedocs.io/en/latest/introduction.html">Binder</a> specifications.

            </td>

           </tr>

          </table>







          <table style="width:400px; border:0; background:#ffffff; margin-top:20px">

          <tr><td align="center">

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

          </td></tr>

          </table>







          <input type="hidden" name="new_container_from" value="repository">



          </form>









          {% endif %}

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

+143 −182
Original line number Diff line number Diff line 
{% if details %}



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

  <table class="dashboard" style="margin:0px; border:0px; width:398px">



    <tr>

        <td colspan=2 align=center style="padding:10px; font-size:1.2em"><a href="/software/?container_uuid={{ container.uuid }}">{{ container.name }} <font style="font-size:0.9em">({{ container.image_tag }})</font></a></td>

      <td colspan=2 align=center style="padding:10px; font-size:1.2em"><a href="/software/?uuid={{ container.uuid }}">{{ container.name }} <font style="font-size:0.9em">({{ container.image_tag }})</font></a></td>

    </tr>



    <tr>

      <td colspan="2" style="background:{{ container.color }}; height:15px"></td>

     </tr>



       <tr><td colspan=2 style="height:5px"></td></tr>



    <tr>

      <td colspan=2 style="height:5px"></td>

    </tr>

    <tr>

      <td colspan=2>{{ container.description }}</td>

    </tr>



       <tr><td colspan=2><hr style="margin:5px"></td></tr>



    <tr>

      <td colspan=2><hr style="margin:5px"></td></tr>

    <tr>

      <td><b>Owner</b></td>

      <td>{% if container.user %}{{ container.user }}{% else %}platform{% endif %}</td>

    </tr>



    <tr>

      <td><b>Group</b></td>

      <td>{% if container.group %}{{ container.group }}{% else %}None{% endif %}</td>

    </tr>



    <tr>

      <td><b>Registry</b></td>

      <td>{{ container.registry }}</td>

    </tr>



    <tr>

      <td><b>Image&nbsp;name</b></td>

      <td><code>{{ container.image_name }}</code></td>

    </tr>



    <tr>

      <td><b>Image tag</b></td>

      <td><span class="badge badge-secondary">{{ container.image_tag }}</span></td>

    </tr>



       <tr><td colspan=2><hr style="margin:5px"></td></tr>

      <tr>

        <td colspan=2><hr style="margin:5px"></td>

      </tr>

  </table>



  <table class="dashboard" style="margin:0px; border:0px;">
@@ -52,27 +45,22 @@ 
      <td><b>Interface protocol</b></td>

      <td>{{ container.interface_protocol }}</td>

    </tr>



    <tr>

      <td><b>Interface port</b></td>

      <td>{{ container.interface_port }}</td>

    </tr>



    <tr>

      <td><b>Interface transport</b></td>

      <td>{{ container.interface_transport }}</td>

    </tr>



    <tr>

      <td><b>Image arch</b></td>

      <td>{{ container.image_arch }}</td>

    </tr>



    <tr>

      <td><b>Image OS</b></td>

      <td>{{ container.image_os }}</td>

    </tr>



    <tr>

      <td><b>Image&nbsp;digest</b></td>

      <td>
@@ -83,9 +71,9 @@ 
        {% endif %}

      </td>

    </tr>



       <tr><td colspan=2><hr style="margin:5px"></td></tr>



    <tr>

      <td colspan=2><hr style="margin:5px"></td>

    </tr>

    <tr>

      <td colspan=2>

        <b>Supports custom interface port</b> &nbsp;
@@ -96,7 +84,6 @@ 
        {% endif %}

      </td>

    </tr>



    <tr>

      <td colspan=2>

        <b>Supports interface auth</b> &nbsp;
@@ -107,7 +94,6 @@ 
        {% endif %}

      </td>

    </tr>



    <tr>

      <td colspan=2>

        <b>Disable HTTP auth embedding {{user.is_admin }}</b> &nbsp;
@@ -118,40 +104,32 @@ 
        {% endif %}

      </td>

    </tr>



    {% if container.env_vars %}

    <tr>

      <td><b>Env vars</b></td>

      <td><pre>{{container.env_vars}}</pre></td>

    </tr>

    {% endif %}



    {% if container.user == request.user or user.is_staff %}

    <tr>

        <td><b>Operations</b></td>

      <td><b>Actions</b></td>

      <td>

          <a href="?action=delete&container_uuid={{ container.uuid }}" onclick="return confirm('Are you sure you want to delete this container?');">Delete</a>

        <a href="?action=delete&uuid={{ container.uuid }}" onclick="return confirm('Are you sure you want to delete this container?');">Delete</a>

        &nbsp;|&nbsp;

          <a href="/edit_software?container_uuid={{ container.uuid }}">Edit</a>

        <a href="/edit_software?uuid={{ container.uuid }}">Edit</a>

        &nbsp;|&nbsp;

          <a href="?action=duplicate&container_uuid={{ container.uuid }}" onclick="return confirm('Duplicate this container?');">Duplicate</a>

        <a href="?action=duplicate&uuid={{ container.uuid }}" onclick="return confirm('Duplicate this container?');">Duplicate</a>

      </td>

    </tr>

    {% endif %}

  </table>

</div>





{% else %}

<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: {{container.color}} solid 10px; ">

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

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

  </div>



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



    {% if container.description %}

    <div class="description-box" title="{{ container.description }}">

    {{ container.description }}
@@ -159,35 +137,18 @@ 
    {% else %}

    <br/>

    {% endif %}



    <div class="image-version-box">

        <!-- <font style="font-family:monospace; font-size:1.2em"></font> -->

      <b>Image:</b> <code>{{ container.image_name }}</code><br/>

      <b>Tag:</b> &nbsp;<span class="badge badge-secondary" style="margin-right:3px">{{ container.image_tag }}</span>

      {% if container.image_arch %}

      <font style="font-size:0.9em">({{ container.image_arch }})</font>

      {% endif %}



        <!--  &nbsp; <b>Arch:</b> {{ container.image_arch }} -->

    </div>



  </div>



  <div style="margin-bottom:18px; margin-top: 3px; text-align:center">

    {% if not disable_play_button %}

    <a href="/new_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>

    {% endif %}

  </div>







</div>



{% endif  %}

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

+48 −108
Original line number Diff line number Diff line
@@ -3,21 +3,14 @@ 
{% for container in container_family.members %}

{% include "components/container.html" with container=container details=data.details %}

{% endfor %}



{% else %}



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

  <form action="/new_task" method=GET>

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





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

      <a href="/software/?container_family_id={{ container_family_id }}&details=True">{{ container_family.name }}</a>&nbsp;

    </div>



    <div style="padding:10px; height: 125px; ">

        <!-- <div style="position: relative; top: 50%; transform: translateY(-50%);"> -->



      {% if container_family.description %}

      <div class="description-box" title="{{ container_family.description }}">

        {{ container_family.description }}
@@ -25,39 +18,9 @@ 
      {% else %}

      <br/>

      {% endif %}



      <div class="image-version-box">

        <b>Image:</b> <code>{{ container_family.image_name }}</code><br/>

        <div style="margin-top:2px">



        <!-- <span style="vertical-align:top;"><b>Tag:</b>&nbsp;</span>

        <select name="task_container_uuid" style="font-size:0.8em">

        {% for container in container_family.members %}

        <option value="{{ container.uuid }}">{{ container.image_tag }} ({{ container.image_arch }})</option>

        {% endfor %}

        </select> -->



        <!--<span style="vertical-align:top; margin-left:0px"><b>Tag:</b>&nbsp;</span>

        <select name="task_container" style="font-size:0.8em">

        {% for arch,container_by_tags in container_family.container_by_tags_by_arch.items %}

        {% if not arch %}

        {% for tag,container in container_by_tags.items %}

        <option value="family:{{ container_family_id }},tag:{{ tag }}">{{ tag }}</option>

        {% endfor %}

        {% endif %}

        {% endfor %}



        {% for arch,container_by_tags in container_family.container_by_tags_by_arch.items %}

        {% if arch %}

        <optgroup label="{{ arch }}">

        {% for tag,container in container_by_tags.items %}

        <option value="uuid:{{ container.uuid }}">{{ tag }}</option>

        {% endfor %}

        {% endif %}

        {% endfor %}

        </optgroup>-->





          <span style="vertical-align:top; margin-left:0px"><b>Tag:</b>&nbsp;</span>

          <select name="task_container_uuid" style="font-size:0.8em">

          {% for arch,container_by_tags in container_family.container_by_tags_by_arch.items %}
@@ -67,7 +30,6 @@ 
          {% endfor %}

          {% endif %}

          {% endfor %}



          {% for arch,container_by_tags in container_family.container_by_tags_by_arch.items %}

          {% if arch %}

          <optgroup label="{{ arch }}">
@@ -77,39 +39,17 @@ 
          {% endif %}

          {% endfor %}

          </optgroup>









          </select>





        </div>

      </div>

        <!-- </div> -->

    </div>



    <div style="margin-bottom:8px; margin-top: 3px; text-align:center">

      {% if not disable_play_button %}





      <button type="submit" onclick="myFunction()" class="btn-link btn btn-light" style="border: #c0c0c0 1px solid; padding-left:14px">

      <i class="fa fa-play" style="color:green"></i>

      </button>



      {% endif %}

        </form>

    </div>







  </form>

</div>



{% endif %}

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

+12 −7
Original line number Diff line number Diff line
@@ -6,14 +6,19 @@ 
<div class="container">

  <div class="dashboard">

    <div class="span8 offset2">

      <h1><a href="/software">Software containers</a> <span style="font-size:18px"> / <a href="/software/?container_family_id={{data.container.family_id}}&details=True">{{ data.container.name }}</a> / {{ data.container.image_tag}} / edit</span></h1>

      <h1><a href="/software">Software containers</a> <span style="font-size:18px"> /

          <a href="/software/?container_family_id={{data.container.family_id}}&details=True">{{ data.container.name }}</a> /

          <a href="/software/?container_uuid={{data.container.uuid}}&details=True">{{ data.container.image_tag}}</a> / edit</span></h1>

      <hr>



      {% if data.error %}

        <div class="alert alert-danger">{{ data.error }}</div>

        <div class="alert alert-danger" style="width:500px;">{{ data.error }}</div>

      {% endif %}

      {% if data.edited %}

        <div class="alert alert-success">Container updated successfully.</div>

      {% if data.saved %}

        <div class="alert alert-success" style="width:500px;">Software container updated successfully.</div>

      {% endif %}

      {% if data.created %}

        <div class="alert alert-success" style="width:500px;">Software container created successfully.</div>

      {% endif %}



      <form action="#" method="POST">
@@ -145,9 +150,9 @@ 
      </div>

      <table style="width:400px; border:0; background:#ffffff; margin-top:20px">

        <tr><td align="center">

          <a href="/software/?container_family_id={{data.container.family_id}}&details=True" class="btn btn-primary" style="margin-left:10px">Back</a>

          &nbsp;

          <input type="submit" value="Save changes" class="btn btn-primary">

          <!-- <a href="/software/?container_family_id={{data.container.family_id}}&details=True" class="btn btn-primary" style="margin-left:10px">Back</a>

          &nbsp; -->

          <input type="submit" value="Save" class="btn btn-primary">

        </td></tr>

      </table>

      </form>