Merge ~blake-rouse/maas:fix-1699864 into maas:master
- Git
- lp:~blake-rouse/maas
- fix-1699864
- Merge into master
Proposed by
Blake Rouse
Status: | Merged |
---|---|
Approved by: | Blake Rouse |
Approved revision: | d2ccf801825b46ff0c571c1631662d50005c4526 |
Merge reported by: | MAAS Lander |
Merged at revision: | not available |
Proposed branch: | ~blake-rouse/maas:fix-1699864 |
Merge into: | maas:master |
Diff against target: |
236 lines (+34/-33) 3 files modified
src/maasserver/static/js/angular/directives/machines_table.js (+14/-14) src/maasserver/static/js/angular/directives/tests/test_machines_table.js (+19/-18) src/maasserver/static/partials/machines-table.html (+1/-1) |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Andres Rodriguez (community) | Approve | ||
Review via email: mp+326936@code.launchpad.net |
Commit message
Fix machinesTable directive so that it works with vs-repeat.
The machines, filteredMachines, and osinfo where placed on the scope directly. Once vs-repeat was added it changed the scope inside the directive to be the scope of vs-repeat and not the scope of machines-table. Moving those variables to the table variable on the machines-table scope fixes the issue as the table object will be copied by reference into the nested vs-repeat scope.
Description of the change
To post a comment you must log in.
Preview Diff
[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1 | diff --git a/src/maasserver/static/js/angular/directives/machines_table.js b/src/maasserver/static/js/angular/directives/machines_table.js | |||
2 | index 9cc69ca..8836adb 100644 | |||
3 | --- a/src/maasserver/static/js/angular/directives/machines_table.js | |||
4 | +++ b/src/maasserver/static/js/angular/directives/machines_table.js | |||
5 | @@ -43,24 +43,24 @@ angular.module('MAAS').directive('maasMachinesTable', [ | |||
6 | 43 | column: 'fqdn', | 43 | column: 'fqdn', |
7 | 44 | predicate: 'fqdn', | 44 | predicate: 'fqdn', |
8 | 45 | reverse: false, | 45 | reverse: false, |
10 | 46 | allViewableChecked: false | 46 | allViewableChecked: false, |
11 | 47 | machines: MachinesManager.getItems(), | ||
12 | 48 | filteredMachines: [], | ||
13 | 49 | osinfo: GeneralManager.getData("osinfo") | ||
14 | 47 | }; | 50 | }; |
15 | 48 | scope.machines = MachinesManager.getItems(); | ||
16 | 49 | scope.filteredMachines = []; | ||
17 | 50 | scope.osinfo = GeneralManager.getData("osinfo"); | ||
18 | 51 | 51 | ||
19 | 52 | // Ensures that the checkbox for select all is the correct value. | 52 | // Ensures that the checkbox for select all is the correct value. |
20 | 53 | scope.updateAllChecked = function() { | 53 | scope.updateAllChecked = function() { |
21 | 54 | // Not checked when the filtered machines are empty. | 54 | // Not checked when the filtered machines are empty. |
23 | 55 | if(scope.filteredMachines.length === 0) { | 55 | if(scope.table.filteredMachines.length === 0) { |
24 | 56 | scope.table.allViewableChecked = false; | 56 | scope.table.allViewableChecked = false; |
25 | 57 | return; | 57 | return; |
26 | 58 | } | 58 | } |
27 | 59 | 59 | ||
28 | 60 | // Loop through all filtered machines and see if all are checked. | 60 | // Loop through all filtered machines and see if all are checked. |
29 | 61 | var i; | 61 | var i; |
32 | 62 | for(i = 0; i < scope.filteredMachines.length; i++) { | 62 | for(i = 0; i < scope.table.filteredMachines.length; i++) { |
33 | 63 | if(!scope.filteredMachines[i].$selected) { | 63 | if(!scope.table.filteredMachines[i].$selected) { |
34 | 64 | scope.table.allViewableChecked = false; | 64 | scope.table.allViewableChecked = false; |
35 | 65 | return; | 65 | return; |
36 | 66 | } | 66 | } |
37 | @@ -72,12 +72,12 @@ angular.module('MAAS').directive('maasMachinesTable', [ | |||
38 | 72 | scope.toggleCheckAll = function() { | 72 | scope.toggleCheckAll = function() { |
39 | 73 | if(scope.table.allViewableChecked) { | 73 | if(scope.table.allViewableChecked) { |
40 | 74 | angular.forEach( | 74 | angular.forEach( |
42 | 75 | scope.filteredMachines, function(machine) { | 75 | scope.table.filteredMachines, function(machine) { |
43 | 76 | MachinesManager.unselectItem(machine.system_id); | 76 | MachinesManager.unselectItem(machine.system_id); |
44 | 77 | }); | 77 | }); |
45 | 78 | } else { | 78 | } else { |
46 | 79 | angular.forEach( | 79 | angular.forEach( |
48 | 80 | scope.filteredMachines, function(machine) { | 80 | scope.table.filteredMachines, function(machine) { |
49 | 81 | MachinesManager.selectItem(machine.system_id); | 81 | MachinesManager.selectItem(machine.system_id); |
50 | 82 | }); | 82 | }); |
51 | 83 | } | 83 | } |
52 | @@ -118,9 +118,9 @@ angular.module('MAAS').directive('maasMachinesTable', [ | |||
53 | 118 | 118 | ||
54 | 119 | // Returns the release title from osinfo. | 119 | // Returns the release title from osinfo. |
55 | 120 | scope.getReleaseTitle = function(os_release) { | 120 | scope.getReleaseTitle = function(os_release) { |
59 | 121 | if(angular.isArray(scope.osinfo.releases)) { | 121 | if(angular.isArray(scope.table.osinfo.releases)) { |
60 | 122 | for(i = 0; i < scope.osinfo.releases.length; i++) { | 122 | for(i = 0; i < scope.table.osinfo.releases.length; i++) { |
61 | 123 | var release = scope.osinfo.releases[i]; | 123 | var release = scope.table.osinfo.releases[i]; |
62 | 124 | if(release[0] === os_release) { | 124 | if(release[0] === os_release) { |
63 | 125 | return release[1]; | 125 | return release[1]; |
64 | 126 | } | 126 | } |
65 | @@ -150,9 +150,9 @@ angular.module('MAAS').directive('maasMachinesTable', [ | |||
66 | 150 | }; | 150 | }; |
67 | 151 | 151 | ||
68 | 152 | // When the list of filtered machines change update the all checkbox. | 152 | // When the list of filtered machines change update the all checkbox. |
70 | 153 | scope.$watchCollection("filteredMachines", function() { | 153 | scope.$watchCollection("table.filteredMachines", function() { |
71 | 154 | scope.updateAllChecked(); | 154 | scope.updateAllChecked(); |
73 | 155 | scope.onListingChange({$machines: scope.filteredMachines}); | 155 | scope.onListingChange({$machines: scope.table.filteredMachines}); |
74 | 156 | }); | 156 | }); |
75 | 157 | 157 | ||
76 | 158 | // Load the required managers and start polling for osinfo. | 158 | // Load the required managers and start polling for osinfo. |
77 | diff --git a/src/maasserver/static/js/angular/directives/tests/test_machines_table.js b/src/maasserver/static/js/angular/directives/tests/test_machines_table.js | |||
78 | index 2113745..e81959c 100644 | |||
79 | --- a/src/maasserver/static/js/angular/directives/tests/test_machines_table.js | |||
80 | +++ b/src/maasserver/static/js/angular/directives/tests/test_machines_table.js | |||
81 | @@ -72,11 +72,12 @@ describe("maasMachinesTable", function() { | |||
82 | 72 | column: 'fqdn', | 72 | column: 'fqdn', |
83 | 73 | predicate: 'fqdn', | 73 | predicate: 'fqdn', |
84 | 74 | reverse: false, | 74 | reverse: false, |
86 | 75 | allViewableChecked: false | 75 | allViewableChecked: false, |
87 | 76 | machines: MachinesManager.getItems(), | ||
88 | 77 | filteredMachines: [], | ||
89 | 78 | osinfo: GeneralManager.getData("osinfo") | ||
90 | 76 | }); | 79 | }); |
94 | 77 | expect(scope.machines).toBe(MachinesManager.getItems()); | 80 | expect(scope.table.machines).toBe(MachinesManager.getItems()); |
92 | 78 | expect(scope.filteredMachines).toEqual([]); | ||
93 | 79 | expect(scope.osinfo).toBe(GeneralManager.getData("osinfo")); | ||
95 | 80 | }); | 81 | }); |
96 | 81 | 82 | ||
97 | 82 | it("polls for osinfo once loaded", function() { | 83 | it("polls for osinfo once loaded", function() { |
98 | @@ -110,7 +111,7 @@ describe("maasMachinesTable", function() { | |||
99 | 110 | var directive = compileDirective(); | 111 | var directive = compileDirective(); |
100 | 111 | var scope = directive.isolateScope(); | 112 | var scope = directive.isolateScope(); |
101 | 112 | scope.table.allViewableChecked = true; | 113 | scope.table.allViewableChecked = true; |
103 | 113 | scope.filteredMachines = []; | 114 | scope.table.filteredMachines = []; |
104 | 114 | scope.updateAllChecked(); | 115 | scope.updateAllChecked(); |
105 | 115 | expect(scope.table.allViewableChecked).toBe(false); | 116 | expect(scope.table.allViewableChecked).toBe(false); |
106 | 116 | }); | 117 | }); |
107 | @@ -120,7 +121,7 @@ describe("maasMachinesTable", function() { | |||
108 | 120 | var directive = compileDirective(); | 121 | var directive = compileDirective(); |
109 | 121 | var scope = directive.isolateScope(); | 122 | var scope = directive.isolateScope(); |
110 | 122 | scope.table.allViewableChecked = true; | 123 | scope.table.allViewableChecked = true; |
112 | 123 | scope.filteredMachines = [{ | 124 | scope.table.filteredMachines = [{ |
113 | 124 | $selected: true | 125 | $selected: true |
114 | 125 | }, { | 126 | }, { |
115 | 126 | $selected: false | 127 | $selected: false |
116 | @@ -133,7 +134,7 @@ describe("maasMachinesTable", function() { | |||
117 | 133 | function() { | 134 | function() { |
118 | 134 | var directive = compileDirective(); | 135 | var directive = compileDirective(); |
119 | 135 | var scope = directive.isolateScope(); | 136 | var scope = directive.isolateScope(); |
121 | 136 | scope.filteredMachines = [{ | 137 | scope.table.filteredMachines = [{ |
122 | 137 | $selected: true | 138 | $selected: true |
123 | 138 | }, { | 139 | }, { |
124 | 139 | $selected: true | 140 | $selected: true |
125 | @@ -151,7 +152,7 @@ describe("maasMachinesTable", function() { | |||
126 | 151 | var machine = makeMachine(); | 152 | var machine = makeMachine(); |
127 | 152 | MachinesManager.selectItem(machine.system_id); | 153 | MachinesManager.selectItem(machine.system_id); |
128 | 153 | scope.table.allViewableChecked = true; | 154 | scope.table.allViewableChecked = true; |
130 | 154 | scope.filteredMachines = [machine]; | 155 | scope.table.filteredMachines = [machine]; |
131 | 155 | scope.toggleCheckAll(); | 156 | scope.toggleCheckAll(); |
132 | 156 | expect(machine.$selected).toBe(false); | 157 | expect(machine.$selected).toBe(false); |
133 | 157 | expect(scope.table.allViewableChecked).toBe(false); | 158 | expect(scope.table.allViewableChecked).toBe(false); |
134 | @@ -162,7 +163,7 @@ describe("maasMachinesTable", function() { | |||
135 | 162 | var scope = directive.isolateScope(); | 163 | var scope = directive.isolateScope(); |
136 | 163 | var machine = makeMachine(); | 164 | var machine = makeMachine(); |
137 | 164 | scope.table.allViewableChecked = false; | 165 | scope.table.allViewableChecked = false; |
139 | 165 | scope.filteredMachines = [machine]; | 166 | scope.table.filteredMachines = [machine]; |
140 | 166 | scope.toggleCheckAll(); | 167 | scope.toggleCheckAll(); |
141 | 167 | expect(machine.$selected).toBe(true); | 168 | expect(machine.$selected).toBe(true); |
142 | 168 | expect(scope.table.allViewableChecked).toBe(true); | 169 | expect(scope.table.allViewableChecked).toBe(true); |
143 | @@ -183,7 +184,7 @@ describe("maasMachinesTable", function() { | |||
144 | 183 | var directive = compileDirective(); | 184 | var directive = compileDirective(); |
145 | 184 | var scope = directive.isolateScope(); | 185 | var scope = directive.isolateScope(); |
146 | 185 | var machine = makeMachine(); | 186 | var machine = makeMachine(); |
148 | 186 | scope.filteredMachines = [machine]; | 187 | scope.table.filteredMachines = [machine]; |
149 | 187 | scope.toggleChecked(machine); | 188 | scope.toggleChecked(machine); |
150 | 188 | expect(machine.$selected).toBe(true); | 189 | expect(machine.$selected).toBe(true); |
151 | 189 | expect(scope.table.allViewableChecked).toBe(true); | 190 | expect(scope.table.allViewableChecked).toBe(true); |
152 | @@ -193,7 +194,7 @@ describe("maasMachinesTable", function() { | |||
153 | 193 | var directive = compileDirective(); | 194 | var directive = compileDirective(); |
154 | 194 | var scope = directive.isolateScope(); | 195 | var scope = directive.isolateScope(); |
155 | 195 | var machine = makeMachine(); | 196 | var machine = makeMachine(); |
157 | 196 | scope.filteredMachines = [machine]; | 197 | scope.table.filteredMachines = [machine]; |
158 | 197 | MachinesManager.selectItem(machine.system_id); | 198 | MachinesManager.selectItem(machine.system_id); |
159 | 198 | scope.toggleChecked(machine); | 199 | scope.toggleChecked(machine); |
160 | 199 | expect(machine.$selected).toBe(false); | 200 | expect(machine.$selected).toBe(false); |
161 | @@ -275,7 +276,7 @@ describe("maasMachinesTable", function() { | |||
162 | 275 | it("returns release title from osinfo", function() { | 276 | it("returns release title from osinfo", function() { |
163 | 276 | var directive = compileDirective(); | 277 | var directive = compileDirective(); |
164 | 277 | var scope = directive.isolateScope(); | 278 | var scope = directive.isolateScope(); |
166 | 278 | scope.osinfo = { | 279 | scope.table.osinfo = { |
167 | 279 | releases: [ | 280 | releases: [ |
168 | 280 | ['ubuntu/xenial', 'Ubuntu Xenial'] | 281 | ['ubuntu/xenial', 'Ubuntu Xenial'] |
169 | 281 | ] | 282 | ] |
170 | @@ -287,7 +288,7 @@ describe("maasMachinesTable", function() { | |||
171 | 287 | it("returns release name when not in osinfo", function() { | 288 | it("returns release name when not in osinfo", function() { |
172 | 288 | var directive = compileDirective(); | 289 | var directive = compileDirective(); |
173 | 289 | var scope = directive.isolateScope(); | 290 | var scope = directive.isolateScope(); |
175 | 290 | scope.osinfo = { | 291 | scope.table.osinfo = { |
176 | 291 | releases: [] | 292 | releases: [] |
177 | 292 | }; | 293 | }; |
178 | 293 | expect(scope.getReleaseTitle('ubuntu/xenial')).toBe( | 294 | expect(scope.getReleaseTitle('ubuntu/xenial')).toBe( |
179 | @@ -297,7 +298,7 @@ describe("maasMachinesTable", function() { | |||
180 | 297 | it("returns release name when osinfo.releases undefined", function() { | 298 | it("returns release name when osinfo.releases undefined", function() { |
181 | 298 | var directive = compileDirective(); | 299 | var directive = compileDirective(); |
182 | 299 | var scope = directive.isolateScope(); | 300 | var scope = directive.isolateScope(); |
184 | 300 | scope.osinfo = { | 301 | scope.table.osinfo = { |
185 | 301 | }; | 302 | }; |
186 | 302 | expect(scope.getReleaseTitle('ubuntu/xenial')).toBe( | 303 | expect(scope.getReleaseTitle('ubuntu/xenial')).toBe( |
187 | 303 | 'ubuntu/xenial'); | 304 | 'ubuntu/xenial'); |
188 | @@ -324,7 +325,7 @@ describe("maasMachinesTable", function() { | |||
189 | 324 | osystem: "ubuntu", | 325 | osystem: "ubuntu", |
190 | 325 | distro_series: "xenial" | 326 | distro_series: "xenial" |
191 | 326 | }; | 327 | }; |
193 | 327 | scope.osinfo = { | 328 | scope.table.osinfo = { |
194 | 328 | releases: [ | 329 | releases: [ |
195 | 329 | ['ubuntu/xenial', 'Ubuntu Xenial'] | 330 | ['ubuntu/xenial', 'Ubuntu Xenial'] |
196 | 330 | ] | 331 | ] |
197 | @@ -341,7 +342,7 @@ describe("maasMachinesTable", function() { | |||
198 | 341 | osystem: "ubuntu", | 342 | osystem: "ubuntu", |
199 | 342 | distro_series: "xenial" | 343 | distro_series: "xenial" |
200 | 343 | }; | 344 | }; |
202 | 344 | scope.osinfo = { | 345 | scope.table.osinfo = { |
203 | 345 | releases: [ | 346 | releases: [ |
204 | 346 | ['ubuntu/xenial', 'Ubuntu Xenial'] | 347 | ['ubuntu/xenial', 'Ubuntu Xenial'] |
205 | 347 | ] | 348 | ] |
206 | @@ -358,7 +359,7 @@ describe("maasMachinesTable", function() { | |||
207 | 358 | osystem: "ubuntu", | 359 | osystem: "ubuntu", |
208 | 359 | distro_series: "xenial" | 360 | distro_series: "xenial" |
209 | 360 | }; | 361 | }; |
211 | 361 | scope.osinfo = { | 362 | scope.table.osinfo = { |
212 | 362 | releases: [ | 363 | releases: [ |
213 | 363 | ['ubuntu/xenial', 'Ubuntu 16.04 LTS "Xenial Xerus"'] | 364 | ['ubuntu/xenial', 'Ubuntu 16.04 LTS "Xenial Xerus"'] |
214 | 364 | ] | 365 | ] |
215 | @@ -376,7 +377,7 @@ describe("maasMachinesTable", function() { | |||
216 | 376 | var scope = directive.isolateScope(); | 377 | var scope = directive.isolateScope(); |
217 | 377 | 378 | ||
218 | 378 | var machines = [{}]; | 379 | var machines = [{}]; |
220 | 379 | scope.filteredMachines = machines; | 380 | scope.table.filteredMachines = machines; |
221 | 380 | 381 | ||
222 | 381 | $scope.$digest(); | 382 | $scope.$digest(); |
223 | 382 | expect($scope.onListingChange).toHaveBeenCalledWith(machines); | 383 | expect($scope.onListingChange).toHaveBeenCalledWith(machines); |
224 | diff --git a/src/maasserver/static/partials/machines-table.html b/src/maasserver/static/partials/machines-table.html | |||
225 | index ce59916..445ece5 100644 | |||
226 | --- a/src/maasserver/static/partials/machines-table.html | |||
227 | +++ b/src/maasserver/static/partials/machines-table.html | |||
228 | @@ -41,7 +41,7 @@ | |||
229 | 41 | </thead> | 41 | </thead> |
230 | 42 | <tbody vs-repeat vs-scroll-parent="window"> | 42 | <tbody vs-repeat vs-scroll-parent="window"> |
231 | 43 | <tr | 43 | <tr |
233 | 44 | data-ng-repeat="node in filteredMachines = (machines | nodesFilter:search | orderBy:table.predicate:table.reverse) track by node.system_id" | 44 | data-ng-repeat="node in table.filteredMachines = (table.machines | nodesFilter:search | orderBy:table.predicate:table.reverse) track by node.system_id" |
234 | 45 | data-ng-class="{ 'table--error': machineHasError({ $machine: node }), selected: node.$selected }"> | 45 | data-ng-class="{ 'table--error': machineHasError({ $machine: node }), selected: node.$selected }"> |
235 | 46 | <td class="table-col--3" aria-label="Select node" data-ng-if="!hideCheckboxes"> | 46 | <td class="table-col--3" aria-label="Select node" data-ng-if="!hideCheckboxes"> |
236 | 47 | <input class="checkbox" type="checkbox" data-ng-click="toggleChecked(node)" data-ng-checked="node.$selected" id="{$ node.fqdn $}" data-ng-disabled="ngDisable()" /> | 47 | <input class="checkbox" type="checkbox" data-ng-click="toggleChecked(node)" data-ng-checked="node.$selected" id="{$ node.fqdn $}" data-ng-disabled="ngDisable()" /> |
lgtm!