sysmo-bts
/
generic-poky
9
0
Fork 0
Code Pull Requests Releases Activity

bitbake: toaster: Refactor and expand layer add remove mechanism 

We have multiple pages which have buttons to add and remove layers this
patch adds functionality to libtoaster to abstract this and implements
it in the pages affected. We handle loading and showing the dependencies
dialog here too and generating the notification messages.
Also implemented is using the selectmachine api from the projectapp to
avoid having to handle this in each page that allows selecting machines.
A small number of jshint issues, help text and the machine page name
have also been fixed.

(Bitbake rev: ae7a656ba7fc6f4356b57aa309a9b6d035e51d2e)

Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>
This commit is contained in:
Michael Wood 2015-04-21 11:59:37 +01:00 committed by Richard Purdie
parent a4cfca604b
commit bec5d16471
17 changed files with 358 additions and 672 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bitbake/lib/toaster/toastergui/static/css/default.css
View File

@ -158,7 +158,7 @@ select { width: auto; }
.project-name .label > a { color: #fff; font-weight: normal; }
/* Remove bottom margin for forms inside modal dialogs */
#dependencies_modal_form { margin-bottom: 0px; }
#dependencies-modal-form { margin-bottom: 0px; }
/* Configuration styles */
.icon-trash { color: #B94A48; font-size: 16px; padding-left: 5px; }

17
bitbake/lib/toaster/toastergui/static/html/layer_deps_modal.html Normal file
View File

@ -0,0 +1,17 @@
<div id="dependencies-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="false">
<form id="dependencies-modal-form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3><span id="title"></span> dependencies</h3>
</div>
<div class="modal-body">
<p id="body-text"> <strong id="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>

8
bitbake/lib/toaster/toastergui/static/js/importlayer.js
View File

@ -117,10 +117,10 @@ function importLayerPageInit (ctx) {
var body = "<strong>"+layer.name+"</strong>'s dependencies ("+
depNames.join(", ")+"</span>) require some layers that are not added to your project. Select the ones you want to add:</p>";
show_layer_deps_modal(ctx.projectId, layer, depDepsArray, title, body, false, function(selected){
/* Add the accepted dependencies to the allDeps array */
if (selected.length > 0){
allDeps = allDeps.concat (selected);
showLayerDepsModal(layer, depDepsArray, title, body, false, function(layerObsList){
/* Add the accepted layer dependencies' ids to the allDeps array */
for (var key in layerObsList){
allDeps.push(layerObsList[key].id);
}
import_and_add ();
});

63
bitbake/lib/toaster/toastergui/static/js/layerBtn.js Normal file
View File

@ -0,0 +1,63 @@
"use strict";
function layerBtnsInit(ctx) {
$(".layerbtn").click(function (){
var layerObj = $(this).data("layer");
var add = ($(this).data('directive') === "add");
var thisBtn = $(this);
libtoaster.addRmLayer(layerObj, add, function (layerDepsList){
var alertMsg = $("#alert-msg");
alertMsg.html(libtoaster.makeLayerAddRmAlertMsg(layerObj, layerDepsList, add));
/* In-cell notification */
var notification = $('<div id="temp-inline-notify" style="display: none; font-size: 11px; line-height: 1.3;" class="tooltip-inner"></div>');
thisBtn.parent().append(notification);
if (add){
if (layerDepsList.length > 0)
notification.text(String(layerDepsList.length + 1) + " layers added");
else
notification.text("1 layer added");
var layerBtnsFadeOut = $();
var layerExistsBtnFadeIn = $();
layerBtnsFadeOut = layerBtnsFadeOut.add(".layer-add-" + layerObj.id);
layerExistsBtnFadeIn = layerExistsBtnFadeIn.add(".layer-exists-" + layerObj.id);
for (var i in layerDepsList){
layerBtnsFadeOut = layerBtnsFadeOut.add(".layer-add-" + layerDepsList[i].id);
layerExistsBtnFadeIn = layerExistsBtnFadeIn.add(".layer-exists-" + layerDepsList[i].id);
}
layerBtnsFadeOut.fadeOut().promise().done(function(){
notification.fadeIn().delay(500).fadeOut(function(){
/* Fade in the buttons */
layerExistsBtnFadeIn.fadeIn();
notification.remove();
});
});
} else {
notification.text("1 layer deleted");
/* Deleting a layer we only hanlde the one button */
thisBtn.fadeOut(function(){
notification.fadeIn().delay(500).fadeOut(function(){
$(".layer-add-" + layerObj.id).fadeIn();
notification.remove();
});
});
}
$("#zone1alerts, #zone1alerts *").fadeIn();
});
});
/* Setup the initial state of the buttons */
for (var i in ctx.projectLayers){
$(".layer-exists-" + ctx.projectLayers[i]).show();
$(".layer-add-" + ctx.projectLayers[i]).hide();
}
}

90
bitbake/lib/toaster/toastergui/static/js/layerDepsModal.js Normal file
View File

@ -0,0 +1,90 @@
/*
* layer: Object representing the parent layer { id: .. name: ... url }
* dependencies: array of dependency layer objects { id: .. name: ..}
* title: optional override for title
* body: optional override for body
* addToProject: Whether to add layers to project on accept
* successAdd: function to run on success
*/
function showLayerDepsModal(layer, dependencies, title, body, addToProject, successAdd) {
if ($("#dependencies-modal").length === 0) {
$.get(libtoaster.ctx.htmlUrl + "/layer_deps_modal.html", function(html){
$("body").append(html);
setupModal();
});
} else {
setupModal();
}
function setupModal(){
if (title) {
$('#dependencies-modal #title').text(title);
} else {
$('#dependencies-modal #title').text(layer.name);
}
if (body) {
$("#dependencies-modal #body-text").html(body);
} else {
$("#dependencies-modal #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);
$("#dependencies-modal").data("deps", dependencies);
$('#dependencies-modal').modal('show');
/* Discard the old submission function */
$("#dependencies-modal-form").unbind('submit');
$("#dependencies-modal-form").submit(function (e) {
e.preventDefault();
var selectedLayerIds = [];
var selectedLayers = [];
$("input[name='dependencies']:checked").each(function () {
selectedLayerIds.push(parseInt($(this).val()));
});
/* -1 is a special dummy Id which we use when the layer isn't yet in the
* system, normally we would add the current layer to the selection.
*/
if (layer.id != -1)
selectedLayerIds.push(layer.id);
/* Find the selected layer objects from our original list */
for (var i = 0; i < selectedLayerIds.length; i++) {
for (var j = 0; j < dependencies.length; j++) {
if (dependencies[j].id == selectedLayerIds[i]) {
selectedLayers.push(dependencies[j]);
}
}
}
if (addToProject) {
libtoaster.editCurrentProject({ 'layerAdd': selectedLayerIds.join(",") }, function () {
if (successAdd) {
successAdd(selectedLayers);
}
}, function () {
console.warn("Adding layers to project failed");
});
} else {
successAdd(selectedLayers);
}
$('#dependencies-modal').modal('hide');
});
}
}

86
bitbake/lib/toaster/toastergui/static/js/layerdetails.js
View File

@ -41,7 +41,7 @@ function layerDetailsPageInit (ctx) {
});
}
function layerRemoveClick() {
function layerDepRemoveClick() {
var toRemove = $(this).parent().data('layer-id');
var layerDepItem = $(this);
@ -71,7 +71,7 @@ function layerDetailsPageInit (ctx) {
/* Connect up the tash icon */
var trashItem = newLayerDep.children("span");
trashItem.click(layerRemoveClick);
trashItem.click(layerDepRemoveClick);
layerDepsList.append(newLayerDep);
/* Clear the current selection */
@ -129,13 +129,6 @@ function layerDetailsPageInit (ctx) {
window.location.replace(libtoaster.ctx.projectPageUrl);
});
$(".select-machine-btn").click(function(){
var data = { machineName : $(this).data('machine-name') };
libtoaster.editCurrentProject(data, function (){
window.location.replace(libtoaster.ctx.projectPageUrl+"#/machineselected");
}, null);
});
function defaultAddBtnText(){
var text = " Add the "+ctx.layerVersion.name+" layer to your project";
addRmLayerBtn.text(text);
@ -196,9 +189,6 @@ function layerDetailsPageInit (ctx) {
*/
function setLayerInCurrentPrj(added, depsList) {
ctx.layerVersion.inCurrentPrj = added;
var alertMsg = $("#alert-msg");
/* Reset alert message */
alertMsg.text("");
if (added){
/* enable and switch all the button states */
@ -209,25 +199,6 @@ function layerDetailsPageInit (ctx) {
addRmLayerBtn.text(" Delete the "+ctx.layerVersion.name+" layer from your project");
addRmLayerBtn.prepend("<span class=\"icon-trash\"></span>");
if (depsList) {
alertMsg.append("You have added <strong>"+(depsList.length+1)+"</strong> layers to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span> and its dependencies ");
/* Build the layer deps list */
depsList.map(function(layer, i){
var link = $("<a></a>");
link.attr("href", layer.layerdetailurl);
link.text(layer.name);
link.tooltip({title: layer.tooltip});
if (i != 0)
alertMsg.append(", ");
alertMsg.append(link);
});
} else {
alertMsg.append("You have added <strong>1</strong> layer to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span>");
}
} else {
/* disable and switch all the button states */
$(".build-target-btn").attr("disabled","disabled");
@ -250,53 +221,24 @@ function layerDetailsPageInit (ctx) {
defaultAddBtnText();
break;
}
alertMsg.append("You have deleted <strong>1</strong> layer from <a id=\"project-affected-name\"></a>: <strong id=\"layer-affected-name\"></strong>");
}
alertMsg.children("#layer-affected-name").text(ctx.layerVersion.name);
alertMsg.children("#project-affected-name").text(libtoaster.ctx.projectName);
alertMsg.children("#project-affected-name").attr("href", libtoaster.ctx.projectPageUrl);
$("#alert-area").show();
}
$("#dismiss-alert").click(function(){ $(this).parent().hide() });
/* Add or remove this layer from the project */
addRmLayerBtn.click(function() {
var directive = $(this).data('directive');
if (directive == 'add') {
/* If adding get the deps for this layer */
libtoaster.getLayerDepsForProject(libtoaster.ctx.projectId, ctx.layerVersion.id, function (data) {
/* got result for dependencies */
if (data.list.length == 0){
var editData = { layerAdd : ctx.layerVersion.id };
libtoaster.editCurrentProject(editData, function() {
setLayerInCurrentPrj(true);
});
return;
} else {
/* The add deps will include this layer so no need to add it
* separately.
*/
show_layer_deps_modal(ctx.projectId, ctx.layerVersion, data.list, null, null, true, function () {
/* Success add deps and layer */
setLayerInCurrentPrj(true, data.list);
});
}
}, null);
} else if (directive == 'remove') {
var editData = { layerDel : ctx.layerVersion.id };
var add = ($(this).data('directive') === "add")
libtoaster.editCurrentProject(editData, function () {
/* Success removed layer */
//window.location.reload();
setLayerInCurrentPrj(false);
}, function () {
console.warn ("Removing layer from project failed");
});
}
libtoaster.addRmLayer(ctx.layerVersion, add, function (layersList){
var alertMsg = $("#alert-msg");
alertMsg.html(libtoaster.makeLayerAddRmAlertMsg(ctx.layerVersion, layersList, add));
setLayerInCurrentPrj(add, layersList);
$("#alert-area").show();
});
});
/* Handler for all of the Change buttons */
@ -395,8 +337,12 @@ function layerDetailsPageInit (ctx) {
$(this).parents("form").submit();
});
$(".select-machine-btn").click(function(e){
if ($(this).attr("disabled") === "disabled")
e.preventDefault();
});
layerDepsList.find(".icon-trash").click(layerRemoveClick);
layerDepsList.find(".icon-trash").click(layerDepRemoveClick);
layerDepsList.find("a").tooltip();
$(".icon-trash").tooltip();
$(".commit").tooltip();

79
bitbake/lib/toaster/toastergui/static/js/libtoaster.js
View File

@ -114,7 +114,7 @@ var libtoaster = (function (){
error: function (_data) {
console.warn("Call failed");
console.warn(_data);
if (onfail) onfail(data);
if (onfail) onfail(_data);
}
});
}
@ -219,6 +219,76 @@ var libtoaster = (function (){
return str;
}
function _addRmLayer(layerObj, add, doneCb){
if (add === true) {
/* If adding get the deps for this layer */
libtoaster.getLayerDepsForProject(libtoaster.ctx.projectId,
layerObj.id,
function (layers) {
/* got result for dependencies */
if (layers.list.length === 0){
var editData = { layerAdd : layerObj.id };
libtoaster.editCurrentProject(editData, function() {
doneCb([]);
});
return;
} else {
try {
showLayerDepsModal(layerObj, layers.list, null, null, true, doneCb);
} catch (e) {
$.getScript(libtoaster.ctx.jsUrl + "layerDepsModal.js", function(){
showLayerDepsModal(layerObj, layers.list, null, null, true, doneCb);
}, function(){
console.warn("Failed to load layerDepsModal");
});
}
}
}, null);
} else if (add === false) {
var editData = { layerDel : layerObj.id };
libtoaster.editCurrentProject(editData, function () {
doneCb([]);
}, function () {
console.warn ("Removing layer from project failed");
doneCb(null);
});
}
}
function _makeLayerAddRmAlertMsg(layer, layerDepsList, add) {
var alertMsg;
if (layerDepsList.length > 0 && add === true) {
alertMsg = $("<span>You have added <strong>"+(layerDepsList.length+1)+"</strong> layers to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span> and its dependencies </span>");
/* Build the layer deps list */
layerDepsList.map(function(layer, i){
var link = $("<a></a>");
link.attr("href", layer.layerdetailurl);
link.text(layer.name);
link.tooltip({title: layer.tooltip});
if (i !== 0)
alertMsg.append(", ");
alertMsg.append(link);
});
} else if (layerDepsList.length === 0 && add === true) {
alertMsg = $("<span>You have added <strong>1</strong> layer to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span></span>");
} else if (add === false) {
alertMsg = $("<span>You have deleted <strong>1</strong> layer from <a id=\"project-affected-name\"></a>: <strong id=\"layer-affected-name\"></strong></span>");
}
alertMsg.children("#layer-affected-name").text(layer.name);
alertMsg.children("#project-affected-name").text(libtoaster.ctx.projectName);
alertMsg.children("#project-affected-name").attr("href", libtoaster.ctx.projectPageUrl);
return alertMsg.html();
}
return {
reload_params : reload_params,
@ -231,6 +301,8 @@ var libtoaster = (function (){
debug: false,
parseUrlParams : _parseUrlParams,
dumpsUrlParams : _dumpsUrlParams,
addRmLayer : _addRmLayer,
makeLayerAddRmAlertMsg : _makeLayerAddRmAlertMsg,
};
})();
@ -394,6 +466,11 @@ $(document).ready(function() {
$('#collapse-exceptions').toggleClass('in');
});
$("#hide-alert").click(function(){
$(this).parent().fadeOut();
});
//show warnings section when requested from the previous page
if (location.href.search('#warnings') > -1) {
$('#collapse-warnings').addClass('in');

95
bitbake/lib/toaster/toastergui/static/js/machines.js
View File

@ -1,95 +0,0 @@
"use strict"
function machinesPageInit (ctx) {
function setLayerInCurrentPrj(addLayerBtn, depsList){
var alertMsg = $("#alert-msg");
$(".select-or-add").each(function(){
/* If we have added a layer it may also enable other machines so search
* for other machines that have that layer and enable them */
var selectMachineBtn = $(this).children(".select-machine-btn");
var otherAddLayerBtns = $(this).children(".add-layer");
if (addLayerBtn.data('layer-version-id') == selectMachineBtn.data('layer-version-id')) {
otherAddLayerBtns.fadeOut(function(){
selectMachineBtn.fadeIn();
});
}
});
/* Reset alert message */
alertMsg.text("");
/* If we have added layer dependencies */
if (depsList) {
alertMsg.append("You have added <strong>"+(depsList.length+1)+"</strong> layers to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span> and its dependencies ");
/* Build the layer deps list */
depsList.map(function(layer, i){
var link = $("<a></a>");
link.attr("href", layer.layerdetailurl);
link.text(layer.name);
link.tooltip({title: layer.tooltip});
if (i != 0)
alertMsg.append(", ");
alertMsg.append(link);
});
} else {
alertMsg.append("You have added <strong>1</strong> layer to <a id=\"project-affected-name\"></a>: <strong id=\"layer-affected-name\"></strong>");
}
var layerName = addLayerBtn.data('layer-name');
alertMsg.children("#layer-affected-name").text(layerName);
alertMsg.children("#project-affected-name").text(libtoaster.ctx.projectName).attr('href', libtoaster.ctx.projectPageUrl);
$("#alert-area").show();
}
$("#dismiss-alert").click(function(){ $(this).parent().hide() });
/* Add or remove this layer from the project */
$(".add-layer").click(function() {
var btn = $(this);
/* If adding get the deps for this layer */
var layer = {
id : $(this).data('layer-version-id'),
name : $(this).data('layer-name'),
};
libtoaster.getLayerDepsForProject(libtoaster.ctx.projectId, layer.id, function (data) {
/* got result for dependencies */
if (data.list.length == 0){
var editData = { layerAdd : layer.id };
libtoaster.editCurrentProject(editData, function() {
setLayerInCurrentPrj(btn);
});
return;
} else {
/* The add deps will include this layer so no need to add it
* separately.
*/
show_layer_deps_modal(ctx.projectId, layer, data.list, null, null, true, function () {
/* Success add deps and layer */
setLayerInCurrentPrj(btn, data.list);
});
}
}, null);
});
$(".select-machine-btn").click(function(){
var data = { machineName : $(this).data('machine-name') };
libtoaster.editCurrentProject(data, function (){
window.location.replace(libtoaster.ctx.projectPageUrl+"#/machineselected");
}, null);
});
$("#show-all-btn").click(function(){
$("#search").val("")
$("#searchform").submit();
});
}

9
bitbake/lib/toaster/toastergui/static/js/projectapp.js
View File

@ -713,15 +713,6 @@ projectApp.controller('prjCtrl', function($scope, $modal, $http, $interval, $loc
"\">select recipes</a> you want to build.", "alert-success");
});
_cmdExecuteWithParam("/machineselected", function () {
$scope.displayAlert($scope.zone2alerts, "You have changed the machine to: <strong>" + $scope.machine.name + "</strong>", "alert-info");
var machineDistro = angular.element("#machine-distro");
angular.element("html, body").animate({ scrollTop: machineDistro.position().top }, 700).promise().done(function() {
$animate.addClass(machineDistro, "machines-highlight");
});
});
_cmdExecuteWithParam("/layerimported", function () {
var imported = $cookieStore.get("layer-imported-alert");
var text;

2
bitbake/lib/toaster/toastergui/templates/base.html
View File

@ -30,6 +30,8 @@
libtoaster.ctx = {
projectId : {{project.id|default:'undefined'}},
xhrDataTypeaheadUrl : "{% url 'xhr_datatypeahead' %}",
jsUrl : "{% static 'js/' %}",
htmlUrl : "{% static 'html/' %}",
{% if project.id %}
xhrProjectEditUrl : "{% url 'xhr_projectedit' project.id %}",
projectPageUrl : "{% url 'project' project.id %}",

2
bitbake/lib/toaster/toastergui/templates/importlayer.html
View File

@ -9,6 +9,7 @@
{% block projectinfomain %}
<script src="{% static 'js/layerDepsModal.js' %}"></script>
<script src="{% static 'js/importlayer.js' %}"></script>
<script>
$(document).ready(function (){
@ -30,7 +31,6 @@
<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 <strong>{{project.release.description}}</strong>, which is the release you are using in this project.</span>

4
bitbake/lib/toaster/toastergui/templates/layerdetails.html
View File

@ -58,7 +58,6 @@
</style>
{% endif %}
{% include "layers_dep_modal.html" %}
<div class="row-fluid span11">
<div class="page-header">
<h1>{{layerversion.layer.name}} <small class="commit"
@ -404,7 +403,8 @@
{% endif %}
</td>
<td>{{machine.description}}</td>
<td><button class="btn btn-block select-machine-btn" data-machine-name="{{machine.name}}" {% if layer_in_project == 0 %}disabled="disabled"{% endif %}}>Select machine</button></td>
<td>
<a href="{% url 'project' project.id %}#/machineselect={{machine.name}}" class="btn btn-block select-machine-btn" {% if layer_in_project == 0 %}disabled="disabled"{% endif %}>Select machine</a>
</tr>
{% endfor %}
</tbody>

223
bitbake/lib/toaster/toastergui/templates/layers.html
View File

@ -1,12 +1,32 @@
{% extends "baseprojectpage.html" %}
{% load projecttags %}
{% load humanize %}
{% load static %}
{% block localbreadcrumb %}
<li>All compatible layers</li>
{% endblock %}
{% block projectinfomain %}
<script src="{% static 'js/layerBtn.js' %}"></script>
<script>
$(document).ready(function (){
var ctx = {
projectLayers : {{projectlayerset}},
};
try {
layerBtnsInit(ctx);
} catch (e) {
document.write("Sorry, An error has occurred loading this page");
console.warn(e);
}
});
</script>
<div class="page-header">
<h1>
{% if request.GET.filter and objects.paginator.count > 0 or request.GET.search and objects.paginator.count > 0 %}
@ -20,7 +40,11 @@
</h1>
</div>
<div id="zone1alerts">
<div id="zone1alerts" style="display:none">
<div class="alert alert-info lead">
<button type="button" class="close" id="hide-alert">&times;</button>
<span id="alert-msg"></span>
</div>
</div>
{% if objects.paginator.count == 0 %}
@ -89,12 +113,11 @@
</td>
{% if project %}
<td class="add-del-layers" value="{{o.pk}}">
<div id="layer-tooltip-{{o.pk}}" style="display: none; font-size: 11px; line-height: 1.3;" class="tooltip-inner">layer was modified</div>
<button id="layer-del-{{o.pk}}" class="btn btn-danger btn-block remove-layer layerbtn" style="display:none;" onclick="layerDel({{o.pk}}, '{{o.layer.name}}', '{%url 'layerdetails' o.pk%}')" >
<button class="btn btn-danger btn-block layer-exists-{{o.pk}} layerbtn" style="display:none;" data-layer='{ "id": {{o.pk}}, "name": "{{o.layer.name}}", "url": "{%url 'layerdetails' o.pk%}"}' data-directive="remove" >
<i class="icon-trash"></i>
Delete layer
</button>
<button id="layer-add-{{o.pk}}" class="btn btn-block layerbtn" style="display:none;" onclick="layerAdd({{o.pk}}, '{{o.layer.name}}', '{%url 'layerdetails' o.pk%}')" title="layer added">
<button class="btn btn-block layer-add-{{o.pk}} layerbtn" data-layer='{ "id": {{o.pk}}, "name": "{{o.layer.name}}", "url": "{%url 'layerdetails' o.pk%}"}' data-directive="add">
<i class="icon-plus"></i>
Add layer
</button>
@ -104,198 +127,6 @@
{% endfor %}
{% include "basetable_bottom.html" %}
<!-- Modals -->
<!-- '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>
{% if project %}
<script>
var tooltipUpdateText;
/* ensure csrf cookie exists {% csrf_token %} */
function _makeXHREditCall(data, onsuccess, onfail) {
$.ajax( {
type: "POST",
url: "{% url 'xhr_projectedit' project.id %}",
data: data,
headers: { 'X-CSRFToken' : $.cookie('csrftoken')},
success: function (_data) {
if (_data.error != "ok") {
console.warn(_data.error);
} else {
updateButtons(_data.layers.map(function (e) {return e.id}));
if (onsuccess != undefined) onsuccess(_data);
}
},
error: function (_data) {
console.warn("Call failed");
console.warn(_data);
}
});
}
function updateLayerCountLabels (amount) {
/* Update the filter labels */
var countLabel = $("#projectlayer__project\\:{{project.id}}_count");
countLabel.text(Number(countLabel.text())+amount);
var countLabelRemaining = $("#projectlayer__project\\:NOT{{project.id}}_count");
countLabelRemaining.text(Number(countLabelRemaining.text())-amount);
}
function layerDel(layerId, layerName, layerURL) {
tooltipUpdateText = "1 layer deleted";
_makeXHREditCall({ 'layerDel': layerId }, function () {
updateLayerCountLabels(-1);
show_alert("You have deleted <strong>1</strong> layer from <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: <a href=\""+layerURL+"\">" + layerName +"</a>");
});
}
function show_alert(text, cls) {
$("#zone1alerts").html("<div class=\"alert alert-info lead\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>" + text + "</div>");
}
function show_dependencies_modal(layerId, layerName, layerURL, dependencies) {
// update layer name
$('.layer-name').text(layerName);
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 = [layerId];
var layer_link_list = "<a href='"+layerURL+"'>"+layerName+"</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');
{% if project %}
_makeXHREditCall({ 'layerAdd': selected.join(",") }, function () {
show_alert("You have added <strong>"+selected.length+"</strong> layers to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: " + layer_link_list);
});
{% endif %}
});
$('#dependencies_modal').modal('show');
}
function layerAdd(layerId, layerName, layerURL) {
$.ajax({
url: '{% url "xhr_datatypeahead" %}',
data: {'type': 'layerdeps','value':layerId},
success: function(_data) {
if (_data.error != "ok") {
console.warn(_data.error);
} else {
updateLayerCountLabels(_data.list.length+1);
if (_data.list.length > 0) {
show_dependencies_modal(layerId, layerName, layerURL, _data.list);
}
else {
tooltipUpdateText = "1 layer added";
_makeXHREditCall({ 'layerAdd': layerId }, function () {
show_alert("You have added <strong>1</strong> layer to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: <a href=\""+layerURL+"\">" + layerName +"</a>");
});
}
}
}
})
}
function button_set(id, state) {
var tohide, toshow;
if (state == "add")
{
tohide = "#layer-del-";
toshow = "#layer-add-";
}
else if (state == "del")
{
tohide = "#layer-add-";
toshow = "#layer-del-";
}
var previouslyvisible = $(tohide + id).is(":visible");
if (previouslyvisible) {
$(tohide + id).fadeOut( function() {
$("#layer-tooltip-" + id).text(tooltipUpdateText);
$("#layer-tooltip-" + id).fadeIn().delay(2000).fadeOut(function(){
$(toshow + id).delay(300).fadeIn();
});
});
} else {
$(tohide + id).hide();
$("#layer-tooltip-" + id).hide();
$(toshow + id).show();
}
};
function updateButtons(projectLayers) {
var displayedLayers = [];
$(".add-del-layers").map(function () { displayedLayers.push(parseInt($(this).attr('value')))});
for (var i=0; i < displayedLayers.length; i++) {
if (projectLayers.indexOf(displayedLayers[i]) > -1) {
button_set(displayedLayers[i], "del");
}
else {
button_set(displayedLayers[i], "add");
}
}
}
$(document).ready(function (){
$('.layerbtn').tooltip({ trigger: 'manual' });
updateButtons({{projectlayerset}});
});
</script>
{%endif%}
{%endif%}
{% endblock %}

99
bitbake/lib/toaster/toastergui/templates/layers_dep_modal.html
View File

@ -1,99 +0,0 @@
<!-- '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 id="title"></span> dependencies</h3>
</div>
<div class="modal-body">
<p id="body-text"> <strong id="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>
/*
* layer: Object representing the parent layer { id: .. name: ... url }
* dependencies: array of dependency layer objects { id: .. name: ..}
* title: optional override for title
* body: optional override for body
* addToProject: Whether to add layers to project on accept
* successAdd: function to run on success
*/
function show_layer_deps_modal(projectId, layer, dependencies, title, body, addToProject, successAdd) {
// update layer name
if (title) {
$('#dependencies_modal #title').text(title);
} else {
$('#dependencies_modal #title').text(layer.name);
}
if (body) {
$("#dependencies_modal #body-text").html(body);
} else {
$("#dependencies_modal #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 = [];
/* -1 is a special dummy Id which we use when the layer isn't yet in the
* system, normally we would add the current layer to the selection.
*/
if (layer.id != -1)
selected.push(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');
if (addToProject) {
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");
});
} else {
successAdd(selected);
}
});
$('#dependencies_modal').modal('show');
}
</script>

31
bitbake/lib/toaster/toastergui/templates/machines.html
View File

@ -7,22 +7,23 @@
{% endblock %}
{% block projectinfomain %}
<script src="{% static 'js/machines.js' %}"></script>
<script src="{% static 'js/layerBtn.js' %}"></script>
<script>
$(document).ready(function (){
var ctx = {
projectLayers : {{projectlayerset}},
};
try {
machinesPageInit(ctx);
layerBtnsInit(ctx);
} catch (e) {
document.write("Sorry, An error has occurred loading this page");
console.warn(e);
}
});
</script>
{% include "layers_dep_modal.html" %}
<div class="page-header">
<h1>
{% if request.GET.search or request.GET.filter %}
@ -33,14 +34,17 @@
{% endif %}
{% else %}
All machines
All compatible machines
<i class="icon-question-sign get-help heading-help" title="This page lists all the machines compatible with the current project that Toaster knows about. They include community-created targets suitable for use on top of OpenEmbedded Core and any targets you have imported"></i>
{% endif %}
</h1>
</div>
<div class="alert alert-info lead" id="alert-area" style="display:none">
<button type="button" class="close" id="dismiss-alert">&times;</button>
<span id="alert-msg"></span>
<div id="zone1alerts" style="display:none">
<div class="alert alert-info lead">
<button type="button" class="close" id="hide-alert">&times;</button>
<span id="alert-msg"></span>
</div>
</div>
{% if objects.paginator.count == 0 %}
{% if request.GET.search %}
@ -68,19 +72,16 @@
<td class="layer"><a href="{%url "layerdetails" o.layer_version.id %}">{{o.layer_version.layer.name}}</a></td>
<td class="branch">{{o.layer_version.get_vcs_reference}}</td>
<td class="machinefile"><code>/machine/conf/{{o.name}}.conf</code><a href="{{o.get_vcs_machine_file_link_url}}" target="_blank"><i class="icon-share get-info"></i></a></td>
<td class="select-or-add">
<a href="#" class="btn btn-block select-machine-btn" data-machine-name="{{o.name}}" data-layer-version-id="{{o.layer_version.id}}"
{%if o.layer_version.id not in project_layers %}style="display:none" {%endif%} >Select machine</a>
<a href="#" class="btn btn-block nopop add-layer" data-layer-version-id="{{o.layer_version.id}}" data-layer-name="{{o.layer_version.layer.name}}" {%if o.layer_version.id in project_layers %}style="display:none" {%endif%}
>
<td class="select-or-add" style="height: 32px;">
<a href="{% url 'project' project.id %}#/machineselect={{o.name}}" class="btn btn-block layer-exists-{{o.layer_version.id}}" style="margin-top: 5px; display:none">Select machine</a>
<button class="btn btn-block layerbtn layer-add-{{o.layer_version.id}}" data-layer='{ "id": {{o.layer_version.id}}, "name": "{{o.layer_version.layer.name}}", "url": "{%url 'layerdetails' o.layer_version.id %}"}' data-directive="add">
<i class="icon-plus"></i>
Add layer
<i class="icon-question-sign get-help" title="To build this machine, you must first add the {{o.layer_version.layer.name}} layer to your project"></i>
</a>
<i title="" class="icon-question-sign get-help" data-original-title="To enable this machine, you must first add the {{o.layer_version.layer.name}} layer to your project"></i></i>
</button>
</td>
</tr>
{% endfor %}
{% include "basetable_bottom.html" %}
{% endif %}

218
bitbake/lib/toaster/toastergui/templates/targets.html
View File

@ -1,14 +1,34 @@
{% extends "baseprojectpage.html" %}
{% load projecttags %}
{% load humanize %}
{% load static %}
{% block localbreadcrumb %}
<li>All compatible recipes</li>
{% endblock %}
{% block projectinfomain %}
<div class="page-header">
<h1>
<script src="{% static 'js/layerBtn.js' %}"></script>
<script>
$(document).ready(function (){
var ctx = {
projectLayers : {{projectlayerset}},
};
try {
layerBtnsInit(ctx);
} catch (e) {
document.write("Sorry, An error has occurred loading this page");
console.warn(e);
}
});
</script>
<div class="page-header">
<h1>
{% if request.GET.filter and objects.paginator.count > 0 or request.GET.search and objects.paginator.count > 0 %}
{{objects.paginator.count}} recipe{{objects.paginator.count|pluralize}} found
{% elif request.GET.filter and objects.paginator.count == 0 or request.GET.search and objects.paginator.count == 0 %}
@ -16,14 +36,16 @@
{%else%}
All compatible recipes
{%endif%}
<i class="icon-question-sign get-help heading-help" title="This page lists all the recipes compatible with the release selected for this project, which is {{project.release.description}}"></i>
</h1>
</div>
<div id="zone1alerts">
<i class="icon-question-sign get-help heading-help" title="This page lists all the recipes compatible with the release selected for this project, which is {{project.release.description}}"></i>
</h1>
</div>
<div id="zone1alerts" style="display:none">
<div class="alert alert-info lead">
<button type="button" class="close" id="hide-alert">&times;</button>
<span id="alert-msg"></span>
</div>
</div>
{% if objects.paginator.count == 0 %}
{% if request.GET.filter or request.GET.search %}
<div class="row-fluid">
@ -75,17 +97,16 @@
</a>
{% endif %}
</td>
<td class="add-layer" value="{{o.pk}}" layerversion_id="{{o.preffered_layerversion.pk}}">
<div id="layer-tooltip-{{o.pk}}" style="display: none; font-size: 11px; line-height: 1.3;" class="tooltip-inner">layer was modified</div>
<a href="{% url 'project' project.id %}#/targetbuild={{o.name}}" id="target-build-{{o.pk}}" class="btn btn-block remove-layer" style="display:none;" >
Build recipe
</a>
<a id="layer-add-{{o.pk}}" class="btn btn-block" style="display:none;" href="javascript:layerAdd({{o.preffered_layerversion.pk}}, '{{o.preffered_layerversion.layer.name}}', '{%url 'layerdetails' o.preffered_layerversion.pk%}', {{o.pk}})" >
<i class="icon-plus"></i>
Add layer
<i title="" class="icon-question-sign get-help" data-original-title="To build this target, you must first add the {{o.preffered_layerversion.layer.name}} layer to your project"></i>
</a>
</td>
<td class="add-layer" value="{{o.pk}}">
<a href="{% url 'project' project.id %}#/targetbuild={{o.name}}" class="btn btn-block layer-exists-{{o.preffered_layerversion.pk}}" style="display:none; margin-top: 5px;" >
Build recipe
</a>
<button class="btn btn-block layerbtn layer-add-{{o.preffered_layerversion.pk}}" data-layer='{ "id": {{o.preffered_layerversion.pk}}, "name": "{{o.preffered_layerversion.layer.name}}", "url": "{%url 'layerdetails' o.preffered_layerversion.pk%}"}' data-directive="add">
<i class="icon-plus"></i>
Add layer
<i title="" class="icon-question-sign get-help" data-original-title="To build this target, you must first add the {{o.preffered_layerversion.layer.name}} layer to your project"></i></i>
</button>
</td>
</tr>
{% endfor %}
{% include "basetable_bottom.html" %}
@ -115,165 +136,6 @@
{% if project %}
<script>
var tooltipUpdateText;
/* ensure csrf cookie exists {% csrf_token %} */
function _makeXHREditCall(data, onsuccess, onfail) {
$.ajax( {
type: "POST",
url: "{% url 'xhr_projectedit' project.id %}",
data: data,
headers: { 'X-CSRFToken' : $.cookie('csrftoken')},
success: function (_data) {
if (_data.error != "ok") {
console.warn(_data.error);
} else {
updateButtons(_data.layers.map(function (e) {return e.id}));
if (onsuccess != undefined) onsuccess(_data);
}
},
error: function (_data) {
console.warn("Call failed");
console.warn(_data);
}
});
}
function show_alert(text, cls) {
$("#zone1alerts").html("<div class=\"alert alert-info lead\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>" + text + "</div>");
}
function show_dependencies_modal(layerId, layerName, layerURL, dependencies) {
// update layer name
$('.layer-name').text(layerName);
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 = [layerId];
var layer_link_list = undefined;
$("#dependencies_modal_form").submit(function (e) {
e.preventDefault();
$("input[name='dependencies']:checked").map(function () { selected.push(parseInt($(this).val()))});
layer_link_list = "<a href='"+layerURL+"'>"+layerName+"</a>";
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');
{% if project %}
_makeXHREditCall({ 'layerAdd': selected.join(",") }, function onXHRSuccess() {
show_alert("You have added <strong>"+selected.length+"</strong> layer(s) to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: " + layer_link_list);
});
{% endif %}
});
$('#dependencies_modal').modal('show');
}
function updateLayerCountLabels (amount) {
/* Update the filter labels */
var countLabel = $("#layer_version__projectlayer__project\\:{{project.id}}_count");
countLabel.text(Number(countLabel.text())+amount);
var countLabelRemaining = $("#layer_version__projectlayer__project\\:NOT{{project.id}}_count");
countLabelRemaining.text(Number(countLabelRemaining.text())-amount);
}
var pressedButton = undefined;
function layerAdd(layerId, layerName, layerURL, pressedButtonId) {
pressedButton = pressedButtonId;
$.ajax({
url: '{% url "xhr_datatypeahead" %}',
data: {'type': 'layerdeps','value':layerId},
success: function(_data) {
if (_data.error != "ok") {
console.warn(_data.error);
} else {
updateLayerCountLabels(_data.list.length+1);
if (_data.list.length > 0) {
show_dependencies_modal(layerId, layerName, layerURL, _data.list);
}
else {
tooltipUpdateText = "1 layer added";
_makeXHREditCall({ 'layerAdd': layerId }, function () {
show_alert("You have added <strong>1</strong> layer to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: <a href=\""+layerURL+"\">" + layerName +"</a>");
});
}
}
}
})
}
function buttonSet(id, state) {
var tohide, toshow;
if (state == "add")
{
toshow = "#layer-add-";
tohide = "#target-build-";
}
else if (state == "build")
{
tohide = "#layer-add-";
toshow = "#target-build-";
}
var previouslyvisible = $(tohide + id).is(":visible");
if (previouslyvisible && id == pressedButton) {
$(tohide + id).fadeOut( function() {
$("#layer-tooltip-" + id).text(tooltipUpdateText);
$("#layer-tooltip-" + id).fadeIn().delay(2000).fadeOut(function(){
$(toshow + id).delay(300).fadeIn();
});
});
} else {
$(tohide + id).hide();
$("#layer-tooltip-" + id).hide();
$(toshow + id).show();
}
};
function updateButtons(projectLayers) {
var displayedLayers = [];
$(".add-layer").map(function () { displayedLayers.push( { "l": parseInt($(this).attr('layerversion_id')), "i": parseInt($(this).attr('value'))})});
for (var i=0; i < displayedLayers.length; i++) {
if (projectLayers.indexOf(displayedLayers[i].l) > -1) {
buttonSet(displayedLayers[i].i, "build");
}
else {
buttonSet(displayedLayers[i].i, "add");
}
}
}
$(document).ready(function (){
updateButtons({{projectlayerset}});
});
</script>
{%endif%}

2
bitbake/lib/toaster/toastergui/views.py
View File

@ -2987,7 +2987,7 @@ if toastermain.settings.MANAGED:
context = {
'objects' : machine_info,
'project_layers' : project_layers,
'projectlayerset' : jsonfilter(map(lambda x: x.layercommit.id, prj.projectlayer_set.all())),
'objectname' : "machines",
'default_orderby' : 'name:+',