diff options
author | Michael Wood <michael.g.wood@intel.com> | 2015-12-07 18:42:16 +0000 |
---|---|---|
committer | Richard Purdie <richard.purdie@linuxfoundation.org> | 2016-02-10 13:29:19 +0000 |
commit | 4b3c9d61dc0c416d4d277de680604e2f6697e288 (patch) | |
tree | 6e36faa75bfbf317f1083c595b2eb89a1bdad2a9 /bitbake/lib/toaster | |
parent | b213907afe2b37f66d8fae88af8e5edf50464f04 (diff) | |
download | poky-4b3c9d61dc0c416d4d277de680604e2f6697e288.tar.gz |
bitbake: toaster: customrecipe Add further front end features using new API
This adds some basic package dependency hint modals when you add and
remove a package. It also makes sure that if the CustomImageRecipe has
no current included packages that we go and check this with the server
to see if a relevant build has taken place which will provide this
information.
[YOCTO #8082]
(Bitbake rev: 418f5509e74d46d36a8eb966a245083006e5f4ba)
Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Signed-off-by: brian avery <avery.brian@gmail.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>
Diffstat (limited to 'bitbake/lib/toaster')
3 files changed, 180 insertions, 33 deletions
diff --git a/bitbake/lib/toaster/toastergui/static/js/customrecipe.js b/bitbake/lib/toaster/toastergui/static/js/customrecipe.js index 4cd9382b49..33fcb88e94 100644 --- a/bitbake/lib/toaster/toastergui/static/js/customrecipe.js +++ b/bitbake/lib/toaster/toastergui/static/js/customrecipe.js | |||
@@ -4,32 +4,129 @@ function customRecipePageInit(ctx) { | |||
4 | 4 | ||
5 | var urlParams = libtoaster.parseUrlParams(); | 5 | var urlParams = libtoaster.parseUrlParams(); |
6 | var customiseTable = $("#selectpackagestable"); | 6 | var customiseTable = $("#selectpackagestable"); |
7 | var addPkgDepsModalBtn = $("#add-package-deps-modal-btn"); | ||
8 | var rmdPkgReverseDepsModalBtn = $("#rm-package-reverse-deps-modal-btn"); | ||
7 | 9 | ||
8 | (function notificationRequest(){ | 10 | if (urlParams.hasOwnProperty('notify') && urlParams.notify === 'new'){ |
9 | if (urlParams.hasOwnProperty('notify') && urlParams.notify === 'new'){ | 11 | $("#image-created-notification").show(); |
10 | $("#image-created-notification").show(); | 12 | } |
11 | } | ||
12 | })(); | ||
13 | 13 | ||
14 | customiseTable.on('table-done', function(e, total, tableParams){ | 14 | customiseTable.on('table-done', function(e, total){ |
15 | /* Table is done so now setup the click handler for the package buttons */ | 15 | /* Table is done so now setup the click handler for the package buttons */ |
16 | $(".add-rm-package-btn").click(function(e){ | 16 | $(".add-rm-package-btn").click(function(e){ |
17 | e.preventDefault(); | 17 | e.preventDefault(); |
18 | addRemovePackage($(this), tableParams); | 18 | var pkgBtnData = $(this).data(); |
19 | |||
20 | checkPackageDeps(pkgBtnData, function(pkgData){ | ||
21 | if (pkgBtnData.directive === 'add'){ | ||
22 | /* If we're adding a package we may need to show the modal to advise | ||
23 | * on dependencies for this package. | ||
24 | */ | ||
25 | if (pkgData.unsatisfied_dependencies.length === 0){ | ||
26 | addRemovePackage(pkgBtnData); | ||
27 | } else { | ||
28 | showPackageDepsModal(pkgBtnData, pkgData); | ||
29 | } | ||
30 | } else if (pkgBtnData.directive === 'remove') { | ||
31 | if (pkgData.reverse_dependencies.length === 0){ | ||
32 | addRemovePackage(pkgBtnData); | ||
33 | } else { | ||
34 | showPackageReverseDepsModal(pkgBtnData, pkgData); | ||
35 | } | ||
36 | } | ||
37 | }); | ||
38 | }); | ||
39 | }); | ||
40 | |||
41 | function checkPackageDeps(pkgBtnData, doneCb){ | ||
42 | $.ajax({ | ||
43 | type: 'GET', | ||
44 | url: pkgBtnData.packageUrl, | ||
45 | headers: { 'X-CSRFToken' : $.cookie('csrftoken')}, | ||
46 | success: function(data){ | ||
47 | if (data.error !== 'ok'){ | ||
48 | console.warn(data.error); | ||
49 | return; | ||
50 | } | ||
51 | doneCb(data); | ||
52 | } | ||
19 | }); | 53 | }); |
54 | } | ||
55 | |||
56 | function showPackageDepsModal(pkgBtnData, pkgData){ | ||
57 | var modal = $("#package-deps-modal"); | ||
58 | var depsList = modal.find("#package-add-dep-list"); | ||
59 | var deps = pkgData.unsatisfied_dependencies; | ||
60 | |||
61 | modal.find(".package-to-add-name").text(pkgBtnData.name); | ||
62 | |||
63 | depsList.text(""); | ||
64 | |||
65 | for (var i in deps){ | ||
66 | var li = $('<li></li>').text(deps[i].name); | ||
67 | li.append($('<span></span>').text(" ("+ | ||
68 | deps[i].size_formatted+")")); | ||
69 | depsList.append(li); | ||
70 | } | ||
71 | |||
72 | modal.find("#package-deps-total-size").text( | ||
73 | pkgData.unsatisfied_dependencies_size_formatted); | ||
74 | |||
75 | addPkgDepsModalBtn.data(pkgBtnData); | ||
76 | modal.modal('show'); | ||
77 | } | ||
78 | |||
79 | addPkgDepsModalBtn.click(function(e){ | ||
80 | e.preventDefault(); | ||
81 | |||
82 | addRemovePackage($(this).data(), null); | ||
83 | }); | ||
84 | |||
85 | function showPackageReverseDepsModal(pkgBtnData, pkgData){ | ||
86 | var modal = $("#package-reverse-deps-modal"); | ||
87 | var depsList = modal.find("#package-reverse-dep-list"); | ||
88 | var deps = pkgData.reverse_dependencies; | ||
89 | |||
90 | modal.find(".package-to-rm-name").text(pkgBtnData.name); | ||
91 | |||
92 | depsList.text(""); | ||
93 | |||
94 | for (var i in deps){ | ||
95 | var li = $('<li></li>').text(deps[i].name); | ||
96 | li.append($('<span></span>').text(" ("+ | ||
97 | deps[i].size_formatted+")")); | ||
98 | depsList.append(li); | ||
99 | } | ||
100 | |||
101 | modal.find("#package-reverse-deps-total-size").text( | ||
102 | pkgData.reverse_dependencies_size_formatted); | ||
103 | |||
104 | rmdPkgReverseDepsModalBtn.data(pkgBtnData); | ||
105 | modal.modal('show'); | ||
106 | } | ||
107 | |||
108 | rmdPkgReverseDepsModalBtn.click(function(e){ | ||
109 | e.preventDefault(); | ||
110 | |||
111 | addRemovePackage($(this).data(), null); | ||
20 | }); | 112 | }); |
21 | 113 | ||
22 | function addRemovePackage(pkgBtn, tableParams){ | 114 | |
23 | var pkgBtnData = pkgBtn.data(); | 115 | function addRemovePackage(pkgBtnData, tableParams){ |
24 | var method; | 116 | var method; |
25 | var msg = "You have "; | 117 | var msg = "You have "; |
26 | 118 | ||
27 | if (pkgBtnData.directive == 'add') { | 119 | var btnCell = $("#package-btn-cell-"+pkgBtnData.package); |
120 | var inlineNotify = btnCell.children(".inline-notification"); | ||
121 | |||
122 | if (pkgBtnData.directive === 'add') { | ||
28 | method = 'PUT'; | 123 | method = 'PUT'; |
29 | msg += "added 1 package to "+ctx.recipe.name+":"; | 124 | msg += "added 1 package to "+ctx.recipe.name+":"; |
30 | } else if (pkgBtnData.directive == 'remove') { | 125 | inlineNotify.text("1 package added"); |
126 | } else if (pkgBtnData.directive === 'remove') { | ||
31 | method = 'DELETE'; | 127 | method = 'DELETE'; |
32 | msg += "removed 1 package from "+ctx.recipe.name+":"; | 128 | msg += "removed 1 package from "+ctx.recipe.name+":"; |
129 | inlineNotify.text("1 package removed"); | ||
33 | } else { | 130 | } else { |
34 | throw("Unknown package directive: should be add or remove"); | 131 | throw("Unknown package directive: should be add or remove"); |
35 | } | 132 | } |
@@ -45,11 +142,18 @@ function customRecipePageInit(ctx) { | |||
45 | console.warn(data.error); | 142 | console.warn(data.error); |
46 | return; | 143 | return; |
47 | } | 144 | } |
48 | /* Reload and Invalidate the Add | Rm package table's current data */ | ||
49 | tableParams.nocache = true; | ||
50 | customiseTable.trigger('reload', [tableParams]); | ||
51 | 145 | ||
52 | libtoaster.showChangeNotification(msg); | 146 | libtoaster.showChangeNotification(msg); |
147 | |||
148 | /* Also do the in-cell notification */ | ||
149 | btnCell.children("button").fadeOut().promise().done(function(){ | ||
150 | inlineNotify.fadeIn().delay(500).fadeOut(function(){ | ||
151 | if (pkgBtnData.directive === 'add') | ||
152 | btnCell.children("button[data-directive=remove]").fadeIn(); | ||
153 | else | ||
154 | btnCell.children("button[data-directive=add]").fadeIn(); | ||
155 | }); | ||
156 | }); | ||
53 | } | 157 | } |
54 | }); | 158 | }); |
55 | } | 159 | } |
diff --git a/bitbake/lib/toaster/toastergui/templates/customrecipe.html b/bitbake/lib/toaster/toastergui/templates/customrecipe.html index 2f3aee3686..4d88be054d 100644 --- a/bitbake/lib/toaster/toastergui/templates/customrecipe.html +++ b/bitbake/lib/toaster/toastergui/templates/customrecipe.html | |||
@@ -26,6 +26,8 @@ | |||
26 | recipe : { | 26 | recipe : { |
27 | id: {{recipe.pk}}, | 27 | id: {{recipe.pk}}, |
28 | name: "{{recipe.name}}", | 28 | name: "{{recipe.name}}", |
29 | includedPackagesCount: {{recipe.includes_set.count}}, | ||
30 | baseRecipeId: {{recipe.base_recipe.pk}}, | ||
29 | } | 31 | } |
30 | }; | 32 | }; |
31 | 33 | ||
@@ -37,6 +39,44 @@ | |||
37 | } | 39 | } |
38 | }); | 40 | }); |
39 | </script> | 41 | </script> |
42 | <!-- package dependencies modal --> | ||
43 | <div style="display:none" id="package-deps-modal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> | ||
44 | <div class="modal-header"> | ||
45 | <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> | ||
46 | <h3><span class="package-to-add-name"></span> dependencies</h3> | ||
47 | </div> | ||
48 | <div class="modal-body"> | ||
49 | <p>Based on information from a previous build it is likely that adding <strong class="package-to-add-name"></strong> will also add the following packages to your custom image:</p> | ||
50 | <ul id="package-add-dep-list"> | ||
51 | </ul> | ||
52 | </div> | ||
53 | <div class="modal-footer"> | ||
54 | <p class="help-block text-left">Total package size: <strong id="package-deps-total-size"></strong></p> | ||
55 | <button id="add-package-deps-modal-btn" type="submit" class="btn btn-primary" data-dismiss="modal">Add package</button> | ||
56 | <button class="btn" data-dismiss="modal">Cancel</button> | ||
57 | </div> | ||
58 | </div> | ||
59 | <!-- end package dependencies modal --> | ||
60 | |||
61 | <!-- package reverse dependencies modal --> | ||
62 | <div style="display:none" id="package-reverse-deps-modal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> | ||
63 | <div class="modal-header"> | ||
64 | <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> | ||
65 | <h3><span class="package-to-rm-name"></span> reverse dependencies</h3> | ||
66 | </div> | ||
67 | <div class="modal-body"> | ||
68 | <p>Based on information from a previous build it is likely that <strong class="package-to-rm-name"></strong> may be added again as the following packages directly depend on it for your custom image:</p> | ||
69 | <ul id="package-reverse-dep-list"> | ||
70 | </ul> | ||
71 | </div> | ||
72 | <div class="modal-footer"> | ||
73 | <p class="help-block text-left">Total package size: <strong id="package-reverse-deps-total-size"></strong></p> | ||
74 | <button id="rm-package-reverse-deps-modal-btn" type="submit" class="btn btn-primary" data-dismiss="modal">Remove package</button> | ||
75 | <button class="btn" data-dismiss="modal">Cancel</button> | ||
76 | </div> | ||
77 | </div> | ||
78 | <!-- end package dependencies modal --> | ||
79 | |||
40 | 80 | ||
41 | <div class="row-fluid span11"> | 81 | <div class="row-fluid span11"> |
42 | <div class="alert alert-success lead" id="image-created-notification" style="margin-top: 15px; display: none"> | 82 | <div class="alert alert-success lead" id="image-created-notification" style="margin-top: 15px; display: none"> |
@@ -81,11 +121,11 @@ | |||
81 | </div> | 121 | </div> |
82 | </div> | 122 | </div> |
83 | <div id="packages-table"> | 123 | <div id="packages-table"> |
84 | {% if recipe.package_set.count == 0 and last_build == None %} | 124 | {% if recipe.get_all_packages.count == 0 and last_build == None %} |
85 | <h2> Add | Remove packages </h2> | 125 | <h2> Add | Remove packages </h2> |
86 | <div class="alert alert-info air"> | 126 | <div class="alert alert-info air"> |
87 | <p class="lead">Toaster has no package information for {{recipe.name}}. To generate package information, build {{recipe.name}}</p> | 127 | <p class="lead">Toaster has no package information for {{recipe.name}}. To generate package information, build {{recipe.name}}</p> |
88 | <button class="btn btn-info btn-large build-custom-recipe" style="margin:20px 0 10px 0;">Build {{recipe.name}}</button> | 128 | <button class="btn btn-info btn-large build-custom-image" style="margin:20px 0 10px 0;">Build {{recipe.name}}</button> |
89 | </div> | 129 | </div> |
90 | {% else %} | 130 | {% else %} |
91 | {# ToasterTable for Adding remove packages #} | 131 | {# ToasterTable for Adding remove packages #} |
@@ -103,7 +143,7 @@ | |||
103 | Approx. packages included | 143 | Approx. packages included |
104 | <i class="icon-question-sign get-help" title="" data-original-title="The number of packages included is based on information from previous builds and from parsing layers, so we can never be sure it is 100% accurate"></i> | 144 | <i class="icon-question-sign get-help" title="" data-original-title="The number of packages included is based on information from previous builds and from parsing layers, so we can never be sure it is 100% accurate"></i> |
105 | </dt> | 145 | </dt> |
106 | <dd class="no-packages">{{recipe.package_set.all.count}}</dd> | 146 | <dd class="no-packages">{{recipe.get_all_packages.count}}</dd> |
107 | <dt> | 147 | <dt> |
108 | Approx. package size | 148 | Approx. package size |
109 | <i class="icon-question-sign get-help" title="" data-original-title="Package size is based on information from previous builds, so we can never be sure it is 100% accurate"></i> | 149 | <i class="icon-question-sign get-help" title="" data-original-title="Package size is based on information from previous builds, so we can never be sure it is 100% accurate"></i> |
diff --git a/bitbake/lib/toaster/toastergui/templates/pkg_add_rm_btn.html b/bitbake/lib/toaster/toastergui/templates/pkg_add_rm_btn.html index 8723d4ed56..493456f855 100644 --- a/bitbake/lib/toaster/toastergui/templates/pkg_add_rm_btn.html +++ b/bitbake/lib/toaster/toastergui/templates/pkg_add_rm_btn.html | |||
@@ -1,16 +1,19 @@ | |||
1 | <button class="btn btn-block btn-danger add-rm-package-btn" data-directive="remove" data-package="{{data.pk}}" data-package-url="{% url 'xhr_customrecipe_packages' extra.recipe_id data.pk %}" data-name="{{data.name}}" style=" | 1 | <div id="package-btn-cell-{{data.pk}}"> |
2 | {% if data.pk not in extra.current_packages %} | 2 | <div style="display: none; font-size: 11px; line-height: 1.3;" class="tooltip-inner inline-notification"></div> |
3 | display:none | 3 | <button class="btn btn-block btn-danger add-rm-package-btn" data-directive="remove" data-package="{{data.pk}}" data-package-url="{% url 'xhr_customrecipe_packages' extra.recipe_id data.pk %}" data-name="{{data.name}}" style=" |
4 | {% endif %} | 4 | {% if data.pk not in extra.current_packages %} |
5 | "> | 5 | display:none |
6 | <i class="icon-trash no-tooltip"></i> | 6 | {% endif %} |
7 | Remove package | 7 | "> |
8 | </a> | 8 | <i class="icon-trash no-tooltip"></i> |
9 | <button class="btn btn-block add-rm-package-btn" data-directive="add" data-package="{{data.pk}}" data-package-url="{% url 'xhr_customrecipe_packages' extra.recipe_id data.pk %}" data-name="{{data.name}}" style=" | 9 | Remove package |
10 | {% if data.pk in extra.current_packages %} | 10 | </a> |
11 | display:none | 11 | <button class="btn btn-block add-rm-package-btn" data-directive="add" data-package="{{data.pk}}" data-package-url="{% url 'xhr_customrecipe_packages' extra.recipe_id data.pk %}" data-name="{{data.name}}" style=" |
12 | {% endif %} | 12 | {% if data.pk in extra.current_packages %} |
13 | "> | 13 | display:none |
14 | <i class="icon-plus"></i> | 14 | {% endif %} |
15 | Add package | 15 | "> |
16 | </button> | 16 | <i class="icon-plus"></i> |
17 | Add package | ||
18 | </button> | ||
19 | </div> | ||