Commit 2e67a91d authored by Stefano Alberto Russo's avatar Stefano Alberto Russo
Browse files

Improved UI in adding and editing containers.

parent 49191098

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

+29 −26
Original line number Diff line number Diff line
@@ -6,7 +6,7 @@ 
<div class="container">

  <div class="dashboard">

    <div class="span8 offset2">

      <h1>Add software container</h1>

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

      <hr>



      {% if not data.added %}
@@ -22,17 +22,15 @@ 
          <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>

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



          <h4>Basics</h4>



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

          {% csrf_token %}



          <table class="dashboard" style="width:400px; margin-bottom:25px">

          <table class="dashboard" style="width:500px; margin-bottom:25px">



           <tr>

            <td><b>Name</b></td>

            <td>

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

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

            </td>

           </tr>
@@ -40,49 +38,51 @@ 
            <td><b>Description</b></td>

            <td>

             <!-- ><input type="text" name="container_description" value="" placeholder="" size="23" required /> -->

             ​<textarea name="container_description" rows="3" cols="22"></textarea>

             ​<textarea name="container_description" rows="3" cols="35"></textarea>

            </td>

           </tr>

          </table>



          <!-- <h4>Registry & image</h4> -->

          <table class="dashboard" style="width:500px; margin-bottom:25px">



           <tr>

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

             <input type="text" name="container_registry" value="docker.io" size="23" required />

             <input type="text" name="container_registry" value="docker.io" size="36" required />

            </td>

           </tr>



           <tr>

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

            <td>

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

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

            </td>

           </tr>



           <tr>

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

            <td>

             <input type="text" name="container_image_tag" value="latest" size="23" required />

             <input type="text" name="container_image_tag" value="latest" size="36" required />

            </td>

           </tr>



          </table>







          <h4>Interface </h4>

          <table class="dashboard" style="width:400px; margin-bottom:25px">

          <!-- <h4>Interface</h4> -->

          <table class="dashboard" style="width:500px; margin-bottom:25px">



           <tr>

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

             <td><input type="text" name="container_interface_port" value="" placeholder="" size="5" /></td>

            <td style="width:180px"><b>Interface port</b></td>

             <td><input type="text" name="container_interface_port" value="" placeholder="" size="6" /></td>

           </tr>



           <tr>

            <td><b>Interface protocol</b></td>

            <td style="width:180px"><b>Interface protocol</b></td>

            <td>

             {% if request.user.profile.is_power_user %}

             <input type="text" value="http" name="container_interface_protocol" size="5" />

             <input type="text" value="http" name="container_interface_protocol" size="6" />

             {% else %}

             <select name="container_interface_protocol" >

             <select name="container_interface_protocol" style="width:65px">

             <option value="http" selected>http</option>

             <option value="https">https</option>

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

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



          <h4>Basics</h4>



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

          {% csrf_token %}



          <table class="dashboard" style="width:400px; margin-bottom:25px">

          <table class="dashboard" style="width:500px; margin-bottom:25px">



           <tr>

            <td><b>Name</b></td>

            <td>

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

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

            </td>

           </tr>
@@ -193,13 +191,18 @@ 
            <td><b>Description</b></td>

            <td>

             <!-- ><input type="text" name="container_description" value="" placeholder="" size="23" required /> -->

             ​<textarea name="container_description" rows="3" cols="22"></textarea>

             ​<textarea name="container_description" rows="3" cols="35"></textarea>

            </td>

           </tr>



          </table>



          <!-- <h4>Repository</h4> -->

          <table class="dashboard" style="width:500px; margin-bottom:25px">



           <tr>

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

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

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

            </td>

           </tr>
@@ -207,7 +210,7 @@ 
           <tr>

            <td><b>Repository tag</b></td>

            <td>

             <input type="text" name="repository_tag" placeholder="Tag or hash, optional" value="" size="23" />

             <input type="text" name="repository_tag" placeholder="Tag or hash, optional" value="" size="35" />

            </td>

           </tr>

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

+28 −22
Original line number Diff line number Diff line
@@ -18,46 +18,52 @@ 


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

      {% csrf_token %}

      <table class="dashboard" style="width:400px; margin-bottom:25px">

      <table class="dashboard" style="width:500px; margin-bottom:25px">

        <tr>

          <td><b>Name</b></td>

          <td><input type="text" name="container_name" value="{{ data.container.name }}" size="23" required /></td>

          <td><input type="text" name="container_name" value="{{ data.container.name }}" size="36" required /></td>

        </tr>

        <tr>

          <td><b>Description</b></td>

          <td><textarea name="container_description" rows="3" cols="22">{{ data.container.description }}</textarea></td>

          <td><textarea name="container_description" rows="3" cols="35'">{{ data.container.description }}</textarea></td>

        </tr>



      </table>



      <!-- <h4>Registry & image</h4>  -->

      <table class="dashboard" style="width:500px; margin-bottom:25px">



        <tr>

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

          <td><input type="text" name="container_registry" value="{{ data.container.registry }}" size="23" required /></td>

          <td><input type="text" name="container_registry" value="{{ data.container.registry }}" size="36" required /></td>

        </tr>

        <tr>

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

          <td><input type="text" name="container_image_name" value="{{ data.container.image_name }}" size="23" required /></td>

          <td><input type="text" name="container_image_name" value="{{ data.container.image_name }}" size="36" required /></td>

        </tr>

        <tr>

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

          <td><input type="text" name="container_image_tag" value="{{ data.container.image_tag }}" size="23" required /></td>

          <td><input type="text" name="container_image_tag" value="{{ data.container.image_tag }}" size="36" required /></td>

        </tr>

      </table>



      <h4>Interface</h4>

      <table class="dashboard" style="width:400px; margin-bottom:25px">

      <!-- <h4>Interface</h4>  -->

      <table class="dashboard" style="width:500px; margin-bottom:25px">

        <tr>

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

          <td style="width:180px"><b>Interface port</b></td>

          {% if data.container.interface_port %}

          <td><input type="text" name="container_interface_port" value="{{ data.container.interface_port }}" size="5" /></td>

          <td><input type="text" name="container_interface_port" value="{{ data.container.interface_port }}" size="6" /></td>

          {% else %}

          <td><input type="text" name="container_interface_port" value="" size="5" /></td>

          <td><input type="text" name="container_interface_port" value="" size="6" /></td>

          {% endif %}

        </tr>

        <tr>

          <td><b>Interface protocol</b></td>

          <td style="width:180px"><b>Interface protocol</b></td>

          <td>

            {% if request.user.profile.is_power_user %}

              <input type="text" name="container_interface_protocol" value="{{ data.container.interface_protocol }}" size="5" />

              <input type="text" name="container_interface_protocol" value="{{ data.container.interface_protocol }}" size="6" />

            {% else %}

              <select name="container_interface_protocol">

              <select name="container_interface_protocol" style="width:65px">

                <option value="http" {% if data.container.interface_protocol == 'http' %}selected{% endif %}>http</option>

                <option value="https" {% if data.container.interface_protocol == 'https' %}selected{% endif %}>https</option>

              </select>
@@ -69,19 +75,19 @@ 
      <a href="javascript:void(0);" id="show_button" onclick="toggle_visibility('advanced_div')">Advanced...</a>

      <div id="advanced_div" style="display:none; width:400px;">

        <h4>Advanced <font size=-1>| <a href="javascript:void(0);" id="hide_button" onclick="toggle_visibility('advanced_div')" style="display:none">hide</a></font></h4>

        <table class="dashboard" style="width:400px; margin-bottom:25px">

        <table class="dashboard" style="width:500px; margin-bottom:25px">

          <tr>

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

            {% if data.container.image_arch %}

            <td><input type="text" name="container_image_arch" value="{{ data.container.image_arch }}" size="5" /></td>

            <td><input type="text" name="container_image_arch" value="{{ data.container.image_arch }}" size="8" /></td>

            {% else %}

            <td><input type="text" name="container_image_arch" value="" size="5" /></td>

            <td><input type="text" name="container_image_arch" value="" size="8" /></td>

            {% endif %}

          </tr>

          <tr>

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

            <td>

              <select name="container_image_os">

              <select name="container_image_os" style="width:82px">

                <option value="linux" {% if data.container.image_os == 'linux' %}selected{% endif %}>linux</option>

              </select>

            </td>
@@ -89,15 +95,15 @@ 
          <tr>

            <td><b>Image digest</b></td>

            {% if data.container.image_digest %}

            <td><input type="text" name="container_image_digest" value="{{ data.container.image_digest }}" size="15" /></td>

            <td><input type="text" name="container_image_digest" value="{{ data.container.image_digest }}" size="30" /></td>

            {% else %}

            <td><input type="text" name="container_image_digest" value="" size="15" /></td>

            <td><input type="text" name="container_image_digest" value="" size="30" /></td>

            {% endif %}

          </tr>

          <tr>

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

            <td>

              <select name="container_interface_transport">

              <select name="container_interface_transport" style="width:82px">

                <option value="tcp/ip" {% if data.container.interface_transport == 'tcp/ip' %}selected{% endif %}>tcp/ip</option>

              </select>

            </td>
@@ -122,7 +128,7 @@ 
          </tr>

          <tr>

            <td><b>Environment variables</b></td>

            <td><textarea name="container_env_vars" rows="2" cols="22">{{ data.container.env_vars|default_if_none:'' }}</textarea></td>

            <td><textarea name="container_env_vars" rows="2" cols="29">{{ data.container.env_vars|default_if_none:'' }}</textarea></td>

          </tr>

        </table>

      </div>

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

+2 −2
Original line number Diff line number Diff line
@@ -1069,8 +1069,8 @@ def edit_software(request): 
        data['error'] = 'Container does not exist.'

        return render(request, 'error.html', {'data': data})



    # Only allow editing if user owns the container or is admin

    if not (container.user == request.user or request.user.is_superuser):

    # Only allow editing if user owns the container or staff

    if not (container.user == request.user or request.user.is_staff):

        data['error'] = 'You do not have permission to edit this container.'

        return render(request, 'error.html', {'data': data})