bitbake: toaster: Add import layer feature.

This feature allows users to import layers from git into their current
project and associate it with the release of the current project and the
dependencies for the newly imported layer with existing layers.
It will also resolve the child dependencies of the dependencies added.

[YOCTO #6595]

(Bitbake rev: 017f5c746e894f9d87d927c848386459ea332378)

Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Signed-off-by: Alexandru DAMIAN <alexandru.damian@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

1 files changed, 78 insertions, 31 deletions

diff --git a/bitbake/lib/toaster/toastergui/templates/importlayer.html b/bitbake/lib/toaster/toastergui/templates/importlayer.html
index 7e48eac66e..913f951c28 100644
--- a/bitbake/lib/toaster/toastergui/templates/importlayer.html
+++ b/bitbake/lib/toaster/toastergui/templates/importlayer.html
@@ -1,68 +1,115 @@
 {% extends "baseprojectpage.html" %}
 {% load projecttags %}
 {% load humanize %}
+{% load static %}
 
 {% block localbreadcrumb %}
-<li>Layers</li>
+<li>Import layer</li>
 {% endblock %}
 
 {% block projectinfomain %}
+
+                  <script src="{% static 'js/importlayer.js' %}"></script>
+                  <script>
+                    $(document).ready(function (){
+                      var ctx = {};
+                      ctx.xhrDataTypeaheadUrl = "{% url 'xhr_datatypeahead' %}";
+                      ctx.layerDetailsUrl = "{% url 'layerdetails' %}";
+                      ctx.xhrImportLayerUrl = "{% url 'xhr_importlayer' %}";
+                      ctx.xhrEditProjectUrl = "{% url 'xhr_projectedit' project.id %}";
+                      ctx.projectPageUrl = "{% url 'project' project.id %}";
+                      ctx.projectId = {{project.id}};
+
+                      try {
+                        importLayerPageInit(ctx);
+                      } catch(e) {
+                        document.write(e.stack);
+                        console.log(e);
+                      }
+                    });
+                  </script>
+
                 <div class="page-header">
                     <h1>Import layer</h1>
                 </div>
+
+                {% include "layers_dep_modal.html" %}
                 <form>
         {% if project %}
                     <span class="help-block" style="padding-left:19px;">The layer you are importing must be compatible with {{project.release.name}} ({{project.release.description}}), which is the release you are using in this project.</span>
           {% endif %}
-                    <fieldset class="air">
-                        <legend>Layer repository information</legend>
+                   <fieldset class="air">
+                      <legend>Layer repository information</legend>
+                      <div class="alert alert-error" id="import-error" style="display:none">
+                        <button type="button" class="close" data-dismiss="alert">&times;</button>
+                        <h3></h3>
+                        <span></span>
+                        <ul></ul>
+                      </div>
+
+                      <div class="control-group" id="layer-name-ctrl">
+                        <label class="control-label" for="layer-name">
+                            Layer name
+                            <span class="icon-question-sign get-help" title="Something like 'meta-mylayer'. Your layer name must be unique and can only include letters, numbers and dashes" />
+                        </label>
+                        <div class="controls">
+                          <input id="layer-name" type="text" required autofocus>
+                          <span class="help-inline" style="display: none;" id="invalid-layer-name-hint">A valid layer name can only include letters, numbers and dashes</span>
+                          <span class="help-inline" style="display: none;" id="duplicated-layer-name-hint"></span>
+                        </div>
+
+                      </div>
+
                         <label>
                             Git repository URL
-                            <i class="icon-question-sign get-help" title="Fetch/clone URL of the repository. Currently, Toaster only supports Git repositories."></i>
+                            <span class="icon-question-sign get-help" title="Fetch/clone URL of the repository. Currently, Toaster only supports Git repositories." />
                         </label>
-                        <input id="repo" type="text" class="input-xxlarge" required>
-                        <label class="project-form">
+
+                        <input type="text" id="layer-git-repo-url" class="input-xxlarge" required>
+                        <label class="project-form" for="layer-subdir">
                             Repository subdirectory
                             <span class="muted">(optional)</span>
-                            <i class="icon-question-sign get-help" title="Subdirectory within the repository where the layer is located, if not in the root (usually only used if the repository contains more than one layer)"></i>
-                        </label>
-                        <input type="text"  id="subdir">
-                        <label class="project-form">Branch, tag or commit</label>
-                        <input type="text" class="span4" id="layer-version" required>
-                        <label class="project-form">
-                            Layer name
-                            <i class="icon-question-sign get-help" title="Something like 'meta-mylayer'. Your layer name must be unique and can only include letters, numbers and dashes"></i>
+                            <span class="icon-question-sign get-help" title="Subdirectory within the repository where the layer is located, if not in the root (usually only used if the repository contains more than one layer)" />
                         </label>
-                        <input id="layer-name" type="text" required>
+                        <input type="text"  id="layer-subdir">
+
+                          <div class="control-group" id="layer-revision-ctrl">
+                            <label class="control-label" for="layer-git-ref">Revision
+                              <span class="icon-question-sign get-help" title="You can provide a Git branch, a tag or a commit SHA as the revision"></span>
+                            </label>
+                            <div class="controls">
+                              <input type="text" class="span4" id="layer-git-ref" required>
+                                <span class="help-inline" style="diaply:none;" id="invalid-layer-revision-hint"></span>
+                            </div>
+                          </div>
+
+                          <label class="project-form" for="layer-description">Layer description
+                            <span class="muted">(optional)</span>
+                            <span class="icon-question-sign get-help" title="Short description for for the layer" />
+                          </label>
+                          <input id="layer-description" type="text" class="input-xxlarge" />
+
                     </fieldset>
                     <fieldset class="air">
                         <legend>
                             Layer dependencies
                             <span class="muted">(optional)</span>
-                            <i class="icon-question-sign get-help heading-help" title="Other layers this layer depends upon"></i>
+                            <span class="icon-question-sign get-help heading-help" title="Other layers this layer depends upon" />
                         </legend>
-                        <ul class="unstyled configuration-list">
-                            <li>
-                                <a href="" class="layer-info" title="OpenEmbedded | daisy">openembedded-core (meta)</a>
-                                <i class="icon-trash"></i>
-                            </li>
+                        <ul class="unstyled configuration-list" id="layer-deps-list">
                         </ul>
                         <div class="input-append">
-                            <input type="text" autocomplete="off" data-minLength="1" data-autocomplete="off"
-                            data-provide="typeahead"  data-source='
-                []
-                ' placeholder="Type a layer name" id="layer-dependency" class="input-xlarge">
-                            <a class="btn" type="button" id="add-layer-dependency" disabled>
+                            <input type="text" autocomplete="off" data-minLength="1" data-autocomplete="off" data-provide="typeahead" placeholder="Type a layer name" id="layer-dependency" class="input-xlarge">
+                            <a class="btn" type="button" id="add-layer-dependency-btn" disabled>
                                 Add layer
                             </a>
                         </div>
                         <span class="help-inline">You can only add layers Toaster knows about</span>
                     </fieldset>
-                    <div class="form-actions">
-                        <a href="#dependencies-message" class="btn btn-primary btn-large" data-toggle="modal" data-target="#dependencies-message" disabled>Import and add to project</a>
-                        <a href="layer-details-just-imported.html" class="btn btn-large" disabled>Just import for the moment</a>
-                        <span class="help-inline" style="vertical-align: middle;">To import a layer, you need to enter a repository URL, a branch, tag or commit and a layer name</span>
+                    <div class="form-actions" id="form-actions">
+                      <button class="btn btn-primary btn-large" data-toggle="modal" id="import-and-add-btn" data-target="#dependencies-message" disabled>Import and add to project</button>
+                        <span class="help-inline" id="import-and-add-hint" style="vertical-align: middle;">To import a layer, you need to enter a repository URL, a branch, tag or commit and a layer name</span>
                     </div>
-                </form>
+                  </form>
 
 {% endblock %}