홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Jian Li
Committed by Gerrit Code Review
da253e03 1 parent a9a1bbd8

[ONOS-3635] Add more information to Application panel view 

This commit adds features, permissions and requiredApps
properties to Application panel view.

Change-Id: I0df026c7fce49c65546eee33a4299b4db6debb08
Inline Side-by-side
Showing 3 changed files with 82 additions and 25 deletions
...@@ -60,13 +60,14 @@ public class ApplicationViewMessageHandler extends UiMessageHandler { ...@@ -60,13 +60,14 @@ public class ApplicationViewMessageHandler extends UiMessageHandler {
60 private static final String ROLE = "role"; 60 private static final String ROLE = "role";
61 private static final String REQUIRED_APPS = "_required_apps"; 61 private static final String REQUIRED_APPS = "_required_apps";
62 private static final String FEATURES = "features"; 62 private static final String FEATURES = "features";
63 + private static final String PERMISSIONS = "permissions";
63 64
64 private static final String ICON_ID_ACTIVE = "active"; 65 private static final String ICON_ID_ACTIVE = "active";
65 private static final String ICON_ID_INACTIVE = "appInactive"; 66 private static final String ICON_ID_INACTIVE = "appInactive";
66 67
67 private static final String[] COL_IDS = { 68 private static final String[] COL_IDS = {
68 STATE, STATE_IID, ID, ICON, VERSION, CATEGORY, ORIGIN, DESC, 69 STATE, STATE_IID, ID, ICON, VERSION, CATEGORY, ORIGIN, DESC,
69 - URL, README, ROLE, REQUIRED_APPS, FEATURES 70 + URL, README, ROLE, REQUIRED_APPS, FEATURES, PERMISSIONS
70 }; 71 };
71 72
72 @Override 73 @Override
...@@ -169,6 +170,7 @@ public class ApplicationViewMessageHandler extends UiMessageHandler { ...@@ -169,6 +170,7 @@ public class ApplicationViewMessageHandler extends UiMessageHandler {
169 data.put(CATEGORY, app.category()); 170 data.put(CATEGORY, app.category());
170 data.put(ORIGIN, app.origin()); 171 data.put(ORIGIN, app.origin());
171 data.put(README, app.readme()); 172 data.put(README, app.readme());
173 + data.put(DESC, app.description());
172 data.put(URL, app.url()); 174 data.put(URL, app.url());
173 175
174 // process required applications 176 // process required applications
...@@ -183,6 +185,12 @@ public class ApplicationViewMessageHandler extends UiMessageHandler { ...@@ -183,6 +185,12 @@ public class ApplicationViewMessageHandler extends UiMessageHandler {
183 185
184 data.set(FEATURES, features); 186 data.set(FEATURES, features);
185 187
188 + // process permissions
189 + ArrayNode permissions = arrayNode();
190 + app.permissions().forEach(p -> permissions.add(p.getName()));
191 +
192 + data.set(PERMISSIONS, permissions);
193 +
186 ObjectNode rootNode = objectNode(); 194 ObjectNode rootNode = objectNode();
187 rootNode.set(DETAILS, data); 195 rootNode.set(DETAILS, data);
188 sendMessage(APP_DETAILS_RESP, 0, rootNode); 196 sendMessage(APP_DETAILS_RESP, 0, rootNode);
......
...@@ -140,6 +140,19 @@ ...@@ -140,6 +140,19 @@
140 border-color: #666; 140 border-color: #666;
141 } 141 }
142 142
143 +#application-details-panel .middle hr {
144 + width: 95%;
145 + margin: 0 auto;
146 +}
147 +
148 +.light #application-details-panel hr {
149 + opacity: .5;
150 + border-color: #FFF;
151 +}
152 +.dark #application-details-panel hr {
153 + border-color: #666;
154 +}
155 +
143 #application-details-panel .bottom table { 156 #application-details-panel .bottom table {
144 border-spacing: 0; 157 border-spacing: 0;
145 } 158 }
......
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
29 pStartY, 29 pStartY,
30 pHeight, 30 pHeight,
31 top, 31 top,
32 + middle,
32 bottom, 33 bottom,
33 iconDiv, 34 iconDiv,
34 wSize = false; 35 wSize = false;
...@@ -39,7 +40,7 @@ ...@@ -39,7 +40,7 @@
39 appMgmtReq = 'appManagementRequest', 40 appMgmtReq = 'appManagementRequest',
40 topPdg = 50, 41 topPdg = 50,
41 ctnrPdg = 24, 42 ctnrPdg = 24,
42 - winWidth = 500, 43 + tbWidth = 470,
43 scrollSize = 17, 44 scrollSize = 17,
44 pName = 'application-details-panel', 45 pName = 'application-details-panel',
45 detailsReq = 'appDetailsRequest', 46 detailsReq = 'appDetailsRequest',
...@@ -102,19 +103,28 @@ ...@@ -102,19 +103,28 @@
102 closeBtn = top.append('div').classed('close-btn', true); 103 closeBtn = top.append('div').classed('close-btn', true);
103 addCloseBtn(closeBtn); 104 addCloseBtn(closeBtn);
104 iconDiv = top.append('div').classed('dev-icon', true); 105 iconDiv = top.append('div').classed('dev-icon', true);
105 - top.append('h2');
106 106
107 tblDiv = top.append('div').classed('top-tables', true); 107 tblDiv = top.append('div').classed('top-tables', true);
108 tblDiv.append('div').classed('left', true).append('table'); 108 tblDiv.append('div').classed('left', true).append('table');
109 tblDiv.append('div').classed('right', true).append('table'); 109 tblDiv.append('div').classed('right', true).append('table');
110 - tblDiv.append('div').classed('readme', true).append('table'); 110 + tblDiv.append('div').classed('description', true).append('table');
111 111
112 top.append('hr'); 112 top.append('hr');
113 113
114 - // TODO: need add required applications and features 114 + middle = container.append('div').classed('middle', true);
115 + tblDiv = middle.append('div').classed('middle-tables', true);
116 + tblDiv.append('div').classed('readme', true).append('table');
117 +
118 + middle.append('hr');
119 +
115 bottom = container.append('div').classed('bottom', true); 120 bottom = container.append('div').classed('bottom', true);
116 - bottom.append('h2'); 121 + tblDiv = bottom.append('div').classed('bottom-tables', true).append('table');
117 - bottom.append('table'); 122 + tblDiv.append('h2').html('Features');
123 + tblDiv.append('div').classed('features', true).append('table');
124 + tblDiv.append('h2').html('Required Apps');
125 + tblDiv.append('div').classed('required-apps', true).append('table');
126 + tblDiv.append('h2').html('Permissions');
127 + tblDiv.append('div').classed('permissions', true).append('table');
118 } 128 }
119 129
120 function addProp(tbody, index, value) { 130 function addProp(tbody, index, value) {
...@@ -133,7 +143,7 @@ ...@@ -133,7 +143,7 @@
133 td.append('img').attr('src', iconUrlPrefix + value + iconUrlSuffix); 143 td.append('img').attr('src', iconUrlPrefix + value + iconUrlSuffix);
134 } 144 }
135 145
136 - function addReadme(tbody, value) { 146 + function addContent(tbody, value) {
137 var tr = tbody.append('tr'); 147 var tr = tbody.append('tr');
138 tr.append('td').html(value); 148 tr.append('td').html(value);
139 } 149 }
...@@ -145,7 +155,7 @@ ...@@ -145,7 +155,7 @@
145 rightTbl = tblDiv.select('.right') 155 rightTbl = tblDiv.select('.right')
146 .select('table') 156 .select('table')
147 .append('tbody'), 157 .append('tbody'),
148 - readmeTbl = tblDiv.select('.readme') 158 + descriptionTbl = tblDiv.select('.description')
149 .select('table') 159 .select('table')
150 .append('tbody'); 160 .append('tbody');
151 161
...@@ -159,8 +169,17 @@ ...@@ -159,8 +169,17 @@
159 addProp(rightTbl, i, details[prop]); 169 addProp(rightTbl, i, details[prop]);
160 }); 170 });
161 171
172 + // place description field to the description table
173 + addContent(descriptionTbl, details.desc);
174 + }
175 +
176 + function populateMiddle(tblDiv, details) {
177 + var readmeTbl = tblDiv.select('.readme')
178 + .select('table')
179 + .append('tbody');
180 +
162 // place readme field to the readme table 181 // place readme field to the readme table
163 - addReadme(readmeTbl, details.readme); 182 + addContent(readmeTbl, details.readme);
164 } 183 }
165 184
166 function populateName(div, name) { 185 function populateName(div, name) {
...@@ -171,37 +190,54 @@ ...@@ -171,37 +190,54 @@
171 } 190 }
172 191
173 function populateDetails(details) { 192 function populateDetails(details) {
174 - var nameDiv, topTbs, btmTbl, ports; 193 + var nameDiv, topTbs, middleTbs, bottomTbs;
175 setUpPanel(); 194 setUpPanel();
176 195
177 nameDiv = top.select('.name-div'); 196 nameDiv = top.select('.name-div');
178 topTbs = top.select('.top-tables'); 197 topTbs = top.select('.top-tables');
179 - btmTbl = bottom.select('table'); 198 + middleTbs = middle.select('.middle-tables');
199 + bottomTbs = bottom.select('.bottom-tables');
180 200
181 populateName(nameDiv, details.name); 201 populateName(nameDiv, details.name);
182 populateTop(topTbs, details); 202 populateTop(topTbs, details);
183 - populateBottom(btmTbl); 203 + populateMiddle(middleTbs, details);
204 + populateBottom(bottomTbs, details);
184 205
185 detailsPanel.height(pHeight); 206 detailsPanel.height(pHeight);
186 } 207 }
187 208
188 - function populateBottom(table) { 209 + function addItem(tbody, item) {
189 - var theader = table.append('thead').append('tr'), 210 + var tr = tbody.append('tr').attr('width', tbWidth + 'px');
190 - tbody = table.append('tbody'), 211 + tr.append('td').attr('width', tbWidth + 'px')
191 - tbWidth, tbHeight; 212 + .attr('style', 'text-align:left').html(item);
192 - 213 + }
193 - tbWidth = fs.noPxStyle(tbody, 'width') + scrollSize; 214 +
194 - tbHeight = pHeight 215 + function addItems(table, items) {
195 - - (fs.noPxStyle(detailsPanel.el() 216 + var tbody = table.append('tbody');
196 - .select('.top'), 'height')); 217 + items.forEach(function (item) {
197 - table.style({ 218 + addItem(tbody, item);
198 - height: tbHeight + 'px', 219 + });
220 + }
221 +
222 + function populateBottom(tblDiv, details) {
223 + var featuresTbl = tblDiv.select('.features')
224 + .select('table'),
225 + permissionsTbl = tblDiv.select('.permissions')
226 + .select('table'),
227 + requiredAppsTbl = tblDiv.select('.required-apps')
228 + .select('table');
229 +
230 + addItems(featuresTbl, details.features);
231 + addItems(requiredAppsTbl, details._required_apps);
232 + addItems(permissionsTbl, details.permissions);
233 +
234 + featuresTbl.style({
199 width: tbWidth + 'px', 235 width: tbWidth + 'px',
200 overflow: 'auto', 236 overflow: 'auto',
201 display: 'block' 237 display: 'block'
202 }); 238 });
203 239
204 - detailsPanel.width(winWidth + ctnrPdg); 240 + detailsPanel.width(tbWidth + ctnrPdg);
205 } 241 }
206 242
207 function respDetailsCb(data) { 243 function respDetailsCb(data) {
......