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>

2 files changed, 146 insertions, 31 deletions

diff --git a/bitbake/lib/toaster/toastergui/templates/importlayer.html b/bitbake/lib/toaster/toastergui/templates/importlayer.html
index 7e48eac..913f951 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 %}
diff --git a/bitbake/lib/toaster/toastergui/templates/layers_dep_modal.html b/bitbake/lib/toaster/toastergui/templates/layers_dep_modal.html
new file mode 100644
index 0000000..821bbda
--- /dev/null
+++ b/bitbake/lib/toaster/toastergui/templates/layers_dep_modal.html
@@ -0,0 +1,68 @@
+<!-- 'Layer dependencies modal' -->
+    <div id="dependencies_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
+        <form id="dependencies_modal_form">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
+            <h3><span class="layer-name"></span> dependencies</h3>
+        </div>
+        <div class="modal-body">
+            <p><strong class="layer-name"></strong> depends on some layers that are not added to your project. Select the ones you want to add:</p>
+            <ul class="unstyled" id="dependencies_list">
+            </ul>
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn-primary" type="submit">Add layers</button>
+            <button class="btn" type="reset" data-dismiss="modal">Cancel</button>
+        </div>
+        </form>
+    </div>
+
+<script>
+function show_layer_deps_modal(projectId, layer, dependencies, successAdd) {
+    // update layer name
+    $('.layer-name').text(layer.name);
+    var deplistHtml = "";
+    for (var i = 0; i < dependencies.length; i++) {
+      deplistHtml += "<li><label class=\"checkbox\"><input name=\"dependencies\" value=\"";
+        deplistHtml += dependencies[i].id;
+        deplistHtml +="\" type=\"checkbox\" checked=\"checked\"/>";
+        deplistHtml += dependencies[i].name;
+        deplistHtml += "</label></li>";
+    }
+    $('#dependencies_list').html(deplistHtml);
+
+    var selected = [layer.id];
+    var layer_link_list = "<a href='"+layer.url+"'>"+layer.name+"</a>";
+
+    $("#dependencies_modal_form").submit(function (e) {
+        e.preventDefault();
+        $("input[name='dependencies']:checked").map(function () { selected.push(parseInt($(this).val()))});
+        if (selected.length > 1) {
+            tooltipUpdateText = "" + selected.length + " layers added";
+        } else {
+            tooltipUpdateText = "1 layer added";
+        }
+
+        for (var i = 0; i < selected.length; i++) {
+            for (var j = 0; j < dependencies.length; j++) {
+                if (dependencies[j].id == selected[i]) {
+                    layer_link_list+= ", <a href='"+dependencies[j].layerdetailurl+"'>"+dependencies[j].name+"</a>"
+                    break;
+                }
+            }
+        }
+
+        $('#dependencies_modal').modal('hide');
+
+        var editProjectUrl  = "{% url 'xhr_projectedit' project.id %}";
+        libtoaster.editProject(editProjectUrl, projectId, { 'layerAdd': selected.join(",") }, function () {
+          if (successAdd) {
+            successAdd(selected);
+          }
+        }, function () {
+          console.log ("Adding layers to project failed");
+        });
+    });
+    $('#dependencies_modal').modal('show');
+}
+</script>