dashboard.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <div ng-controller="DashCtrl" body-class ng-class="{'dashboard-fullscreen': dashboardViewState.fullscreen}">
  2. <div class="navbar navbar-static-top">
  3. <div class="navbar-inner">
  4. <div class="container-fluid">
  5. <span class="brand"><img src="img/small.png" bs-tooltip="'Grafana'" data-placement="bottom"> {{dashboard.title}}</span>
  6. <ul class="nav pull-right" ng-controller='dashLoader' ng-init="init()" ng-include="'app/partials/dashLoader.html'">
  7. </ul>
  8. </div>
  9. </div>
  10. </div>
  11. <div class="submenu-controls">
  12. <div class="submenu-panel" ng-controller="SubmenuCtrl" ng-repeat="pulldown in dashboard.pulldowns | filter:{ enable: true }">
  13. <div class="submenu-panel-title">
  14. <span class="small"><strong>{{pulldown.type}}:</strong></span>
  15. </div>
  16. <div class="submenu-panel-wrapper">
  17. <grafana-simple-panel type="pulldown.type" ng-cloak></grafana-simple-panel>
  18. </div>
  19. </div>
  20. <div class="clearfix"></div>
  21. </div>
  22. <div class="clearfix"></div>
  23. <div class="container-fluid main">
  24. <div>
  25. <div class="grafana-container container">
  26. <!-- Rows -->
  27. <div class="grafana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" row-height>
  28. <div class="row-control">
  29. <div class="row-control-inner" style="padding:0px;margin:0px;position:relative;">
  30. <div class="row-close" ng-show="row.collapse" data-placement="bottom" >
  31. <div class="row-close-buttons">
  32. <span class="row-button bgWarning" config-modal="app/partials/roweditor.html" class="pointer">
  33. <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
  34. </span>
  35. <span class="row-button bgPrimary" ng-click="toggle_row(row)">
  36. <i bs-tooltip="'Expand row'" data-placement="right" class="icon-caret-left pointer" ></i>
  37. </span>
  38. </div>
  39. <span class="row-text pointer" ng-click="toggle_row(row)" ng-bind="row.title"></span>
  40. </div>
  41. <div class="row-open" ng-show="!row.collapse">
  42. <div class='row-tab bgPrimary' ng-click="toggle_row(row)">
  43. <span class="row-tab-button">
  44. <i class="icon-caret-right"></i>
  45. </span>
  46. </div>
  47. <div class='row-tab bgSuccess dropdown' ng-show="row.editable">
  48. <span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
  49. <i class="icon-th-list"></i>
  50. </span>
  51. <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
  52. <li class="dropdown-submenu">
  53. <a href="javascript:void(0);">Add Panel</a>
  54. <ul class="dropdown-menu">
  55. <li bindonce ng-repeat="name in panelNames">
  56. <a ng-click="add_panel_default(name)" bo-text="name"></a>
  57. </li>
  58. </ul>
  59. </li>
  60. <li class="dropdown-submenu">
  61. <a href="javascript:void(0);">Set height</a>
  62. <ul class="dropdown-menu">
  63. <li><a ng-click="set_height('100px')">100 px</a></li>
  64. <li><a ng-click="set_height('150px')">150 px</a></li>
  65. <li><a ng-click="set_height('200px')">200 px</a></li>
  66. <li><a ng-click="set_height('250px')">250 px</a></li>
  67. <li><a ng-click="set_height('300px')">300 px</a></li>
  68. <li><a ng-click="set_height('350px')">350 px</a></li>
  69. <li><a ng-click="set_height('450px')">450 px</a></li>
  70. <li><a ng-click="set_height('500px')">500 px</a></li>
  71. <li><a ng-click="set_height('600px')">600 px</a></li>
  72. <li><a ng-click="set_height('700px')">700 px</a></li>
  73. </ul>
  74. </li>
  75. <li class="dropdown-submenu">
  76. <a href="javascript:void(0);">Move</a>
  77. <ul class="dropdown-menu">
  78. <li><a ng-click="move_row(-1)">Up</a></li>
  79. <li><a ng-click="move_row(1)">Down</a></li>
  80. </ul>
  81. </li>
  82. <li>
  83. <a config-modal="app/partials/roweditor.html">Row editor</a>
  84. </li>
  85. <li>
  86. <a ng-click="delete_row()">Delete row</a>
  87. </li>
  88. </ul>
  89. </div>
  90. </div>
  91. </div>
  92. <div style="padding-top:0px" ng-if="!row.collapse">
  93. <div class="row-text pointer" ng-click="toggle_row(row)" ng-if="row.showTitle" ng-bind="row.title">
  94. </div>
  95. <!-- Panels -->
  96. <div ng-repeat="(name, panel) in row.panels"
  97. class="panel nospace"
  98. style="position:relative"
  99. data-drop="true"
  100. panel-width
  101. ng-model="panel"
  102. data-jqyoui-options
  103. jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}"
  104. ng-class="{'dragInProgress':dashboard.$$panelDragging}">
  105. <grafana-panel type="panel.type" ng-cloak></grafana-panel>
  106. </div>
  107. <div ng-show="dashboard.rowSpan(row) < 10 && dashboard.$$panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
  108. </div>
  109. <div class="clearfix"></div>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. <div ng-show='dashboard.editable' class="row-fluid add-row-panel-hint">
  115. <div class="span12" style="text-align:right;">
  116. <span style="margin-right: 10px;" ng-click="add_row_default()" class="pointer btn btn-info btn-mini">
  117. <span><i class="icon-plus-sign"></i> ADD A ROW</span>
  118. </span>
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. <div ng-include="'app/partials/console.html'" ng-if="consoleEnabled">
  124. </div>
  125. </div>