modules/yangvisualizer-resources/src/main/resources/yangvisualizer/views/index.tpl.html

   1 <div class="yangVisualizer ">
   2     <div class="topLine col-md-12">
   3       <div class="clearfix">
   4         <div class="col-md-2">{{ 'YANGVISUALIZER_MODEL' | translate }} :</div>
   5         <div class="col-md-4">
   6           <select ng-model="currentTopologyNode" ng-change="updateTopologyData(null, true)" ng-options="node.label for node in filteredNodes | orderBy:'label'">
   7             <option value="">-</option>
   8           </select>
   9         </div>
  10       </div>
  11
  12       <div>
  13         <div class="col-md-2">{{ 'YANGVISUALIZER_SET_LVL' | translate }} :</div>
  14         <div class="col-md-4 slider">
  15           <input ng-model="sliderValue" type="text" id="mySlider1" slider ng-change="updateTopologyData(null)" options="sliderSettings" />
  16         </div>
  17       </div>
  18
  19
  20
  21     </div>
  22     <div class="sigma col-md-12">
  23       <div class="viewNav">
  24         <ul class="navWrapper">
  25           <li>{{ 'YANGVISUALIZER_LABEL_VIEW' | translate }} : </li>
  26
  27           <li><span class="active" ng-click="setColorScheme($event,'default')">{{ 'YANGVISUALIZER_SHOW_DEFAULT' | translate }}</span></li>
  28           <li><span  ng-click="setColorScheme($event,'type')">{{ 'YANGVISUALIZER_SHOW_TYPES' | translate }}</span></li>
  29           <li><span  ng-click="setColorScheme($event,'module')">{{ 'YANGVISUALIZER_SHOW_MODULES' | translate }}</span></li>
  30           <li><span  ng-click="setColorScheme($event,'namespace')">{{ 'YANGVISUALIZER_SHOW_NAMESPACES' | translate }}</span></li>
  31         </ul>
  32         <div class="clear"></div>
  33         <div class="legend" ng-show="legend">
  34           <ul ng-init="showText = true">
  35             <li><span>{{ 'YANGVISUALIZER_LABEL_LEGEND' | translate }} : </span></li>
  36             <li><span>{{ 'YANGVISUALIZER_SHOW_ALL' | translate }}</span><input class="showChckbx" type="checkbox" ng-model="showText"></li>
  37             <li ng-repeat="(key, value) in legend">
  38               <div class="itemWrapper left">
  39                 <div class="color left" style="background: {{value}};"></div>
  40                 <div class="left text" ng-hide="!showText">{{key}}</div>
  41                 <div class="clear"></div>
  42               </div>
  43               <div class="clear"></div>
  44             </li>
  45           </ul>
  46         </div>
  47       </div>
  48       <sigma-topology drag-nodes="true" topology-data="topologyData" trigger-resize-sigma="triggerResizeSigma" panel="panel" topology-custfunc="topologyCustfunc"></sigma-toppology>
  49     </div>
  50
  51     <!-- RIGHT PANEL -->
  52     <div class="rightPanel {{ panel.show ? 'panel-show' : 'panel-hide' }} col-md-6">
  53       <div class="topButtons">
  54         <div style="position: absolute; right: 40px;">
  55           <!-- <button class="btn add-row btn-orange btn-slim ng-scope" ng-click="expandAllNodes()">
  56             {{ expandedNodes ? 'YANGVISUALIZER_HIDE_NODES' : 'YANGVISUALIZER_SHOW_NODES' | translate }}
  57           </button> -->
  58         </div>
  59         <div style="position: absolute; right: 10px;">
  60           <button class="btn btn-show add-row btn-orange ng-scope btn-slim btn-show-custom" tooltip="show/hide panel" ng-click='triggerExpanded(panel, triggerResize)'>
  61               <i class="icon-caret-right" ng-show="panel.show"></i>
  62               <i class="icon-caret-left" ng-show="!panel.show"></i>
  63           </button>
  64         </div>
  65       </div>
  66       <label>{{ 'YANGVISUALIZER_LABEL_SEL_NODE' | translate }} :</label>
  67       <table>
  68         <thead>
  69           <tr>
  70             <th>{{ 'YANGVISUALIZER_TD_ID' | translate }}</th>
  71             <th class="bigger">{{ 'YANGVISUALIZER_TD_NAME' | translate }}</th>
  72             <th>{{ 'YANGVISUALIZER_TD_TYPE' | translate }}</th>
  73             <th class="bigger">{{ 'YANGVISUALIZER_TD_MODULE' | translate }}</th>
  74           </tr>
  75         </thead>
  76         <tbody>
  77           <tr>
  78             <td>{{ selectedNode.id }}</td>
  79             <td>{{ selectedNode.label.length > 30 ? selectedNode.label.substring(0,26) + '...' : selectedNode.label }}</td>
  80             <td>{{ selectedNode.type }}</td>
  81             <td>{{ selectedNode.module.length > 30 ? selectedNode.module.substring(0,26) + '...' : selectedNode.module }}</td>
  82           </tr>
  83         </tbody>
  84       </table>
  85
  86       <label>{{ 'YANGVISUALIZER_LABEL_PAR_NODE' | translate }} :</label>
  87       <table>
  88         <thead>
  89           <tr>
  90             <th>{{ 'YANGVISUALIZER_TD_ID' | translate }}</th>
  91             <th class="bigger">{{ 'YANGVISUALIZER_TD_NAME' | translate }}</th>
  92             <th>{{ 'YANGVISUALIZER_TD_TYPE' | translate }}</th>
  93             <th class="bigger">{{ 'YANGVISUALIZER_TD_MODULE' | translate }}</th>
  94           </tr>
  95         </thead>
  96         <tbody>
  97           <tr ng-repeat="node in parentNodes.list track by $index">
  98             <td><span class="link" ng-click="zoomToNode(node.graphId)">{{ node.id }}</span></td>
  99             <td>{{ node.label.length > 30 ? node.label.substring(0,26) + '...' : node.label }}</td>
 100             <td>{{ node.type }}</td>
 101             <td>{{ node.module.length > 30 ? node.module.substring(0,26) + '...' : node.module }}</td>
 102           </tr>
 103         </tbody>
 104       </table>
 105
 106       <label>{{ 'YANGVISUALIZER_LABEL_CHILD_NODE' | translate }} :</label>
 107       <table>
 108         <thead>
 109           <tr>
 110             <th>{{ 'YANGVISUALIZER_TD_ID' | translate }}</th>
 111             <th class="bigger">{{ 'YANGVISUALIZER_TD_NAME' | translate }}</th>
 112             <th>{{ 'YANGVISUALIZER_TD_TYPE' | translate }}</th>
 113             <th class="bigger">{{ 'YANGVISUALIZER_TD_MODULE' | translate }}</th>
 114           </tr>
 115         </thead>
 116         <tbody>
 117           <tr ng-repeat="node in childrenNodes.list track by $index">
 118             <td><span class="link" ng-click="zoomToNode(node.graphId)">{{ node.id }}</span></td>
 119             <td>{{ node.label.length > 30 ? node.label.substring(0,26) + '...' : node.label }}</td>
 120             <td>{{ node.type }}</td>
 121             <td>{{ node.module.length > 30 ? node.module.substring(0,26) + '...' : node.module }}</td>
 122           </tr>
 123         </tbody>
 124       </table>
 125     </div>
 126
 127     <div class="clear"></div>
 128
 129 </div>