Adding ability to view YANG source in the details pane.
Change-Id: I9bc6dd4afbfc02cc27ef989063b28cd3510a6e84
diff --git a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.css b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.css
index 18a60e6..798cf51 100644
--- a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.css
+++ b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.css
@@ -55,13 +55,8 @@
font-size: 12pt;
}
-#yang-model-details-panel td.label {
- font-weight: bold;
- padding-right: 6px;
- text-align: left;
-}
-
-#yang-model-details-panel th {
- text-align: left;
- padding-right: 16px;
+#yang-model-details-panel .model-source {
+ display: block;
+ overflow: scroll;
+ font-family: "Courier New", serif;
}
diff --git a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.html b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.html
index 82dc19e..b83f3ce 100644
--- a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.html
+++ b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.html
@@ -15,8 +15,9 @@
<div class="table-header" onos-sortable-header>
<table>
<tr>
- <td colId="id" col-width="130px" sortable>ID</td>
- <td colId="modules" sortable>Modules</td>
+ <td colId="module" sortable>Module</td>
+ <td colId="revision" sortable>Revision</td>
+ <td colId="id" col-width="130px" sortable>Model ID</td>
<!-- TODO: More columns to be added -->
</tr>
</table>
@@ -35,8 +36,9 @@
ng-click="selectCallback($event, ymodel)"
ng-class="{selected: ymodel.id === selId}"
ng-repeat-complete row-id="{{ymodel.id}}">
+ <td>{{ymodel.module}}</td>
+ <td>{{ymodel.revision}}</td>
<td>{{ymodel.id}}</td>
- <td>{{ymodel.modules}}</td>
<!-- TODO: add more columns here -->
</tr>
</table>
diff --git a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.js b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.js
index a8a4ac1..7de8c2c 100644
--- a/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.js
+++ b/apps/yang-gui/src/main/resources/app/view/yangModel/yangModel.js
@@ -50,16 +50,8 @@
propOrder = [
],
friendlyProps = [
- ],
-
- moduleCols = [
- 'name', 'revision'
- ],
- friendlyModuleCols = [
- 'Module Name', 'Revision'
];
-
function createDetailsPanel() {
detailsPanel = ps.createPanel(pName, {
width: pWidth,
@@ -72,13 +64,8 @@
function populateDetails(details) {
setUpPanel();
-
populateTop(details);
- populateBottom(details.modules);
-
- // topData = top.select('.top-data');
- // populateTop(topData, details);
- detailsPanel.height(pHeight);
+ populateBottom(details.source);
}
function setUpPanel() {
@@ -97,8 +84,9 @@
top.append('hr');
bottom = container.append('div').classed('bottom', true);
- bottom.append('h2').classed('modules-title', true).html('Modules');
- bottom.append('table');
+ bottom.append('h2').classed('modules-title', true).html('YANG Source');
+ bottom.append('div').classed('module-source');
+ bottom.select('div').append('pre');
}
function addProp(tbody, index, value) {
@@ -113,7 +101,7 @@
function populateTop(details) {
is.loadEmbeddedIcon(iconDiv, 'nav_yang', 40);
- top.select('h2').html('Model ID ' + details.id);
+ top.select('h2').html('Module ' + details.module + " (" + details.revision + ")");
var tbody = topTable.append('tbody');
@@ -130,35 +118,9 @@
});
}
- function populateBottom(modules) {
- var table = bottom.select('table'),
- theader = table.append('thead').append('tr'),
- tbody = table.append('tbody'),
- tbWidth, tbHeight;
-
- friendlyModuleCols.forEach(function (col) {
- theader.append('th').html(col);
- });
- modules.forEach(function (module) {
- addModuleRow(tbody, module);
- });
-
- tbWidth = fs.noPxStyle(tbody, 'width') + scrollSize;
- tbHeight = pHeight
- - (fs.noPxStyle(detailsPanel.el()
- .select('.top'), 'height')
- + fs.noPxStyle(detailsPanel.el()
- .select('.modules-title'), 'height')
- + tblPdg);
-
- table.style({
- height: tbHeight + 'px',
- width: tbWidth + 'px',
- overflow: 'auto',
- display: 'block'
- });
-
- detailsPanel.width(tbWidth + ctnrPdg);
+ function populateBottom(source) {
+ var src = bottom.select('pre');
+ src.html(source.join('\n'));
}
function closePanel() {
@@ -217,7 +179,7 @@
// row selection callback
function selCb($event, row) {
if ($scope.selId) {
- wss.sendEvent(detailsReq, { id: row.id });
+ wss.sendEvent(detailsReq, { id: row.id, module: row.module });
} else {
$scope.hidePanel();
}