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