energylink/src/app/partials/dashboard.html

<div ng-controller="DashCtrl" body-class>

  <div class="navbar navbar-static-top">
    <div class="navbar-inner">
      <div class="container-fluid">
        <span class="brand"><img src="img/small.png" bs-tooltip="'Grafana'" data-placement="bottom"> {{dashboard.title}}</span>
        <ul class="nav pull-right" ng-controller='dashLoader' ng-init="init()" ng-include="'app/partials/dashLoader.html'">
        </ul>
      </div>
    </div>
  </div>

  <div class="submenu-controls">
    <div class="submenu-panel" ng-controller="SubmenuCtrl" ng-repeat="pulldown in dashboard.pulldowns | filter:{ enable: true }">
      <div class="submenu-panel-title">
        <span class="small"><strong>{{pulldown.type}}:</strong></span>
      </div>
      <div class="submenu-panel-wrapper">
        <grafana-simple-panel type="pulldown.type" ng-cloak></grafana-simple-panel>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>

  <div class="clearfix"></div>
  <div class="container-fluid main">
    <div>
      <div class="grafana-container container">
        <!-- Rows -->
        <div class="grafana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" ng-style="row_style(row)">
          <div class="row-control">
            <div class="row-control-inner" style="padding:0px;margin:0px;position:relative;">
              <div class="row-close" ng-show="row.collapse" data-placement="bottom" >
                <span class="row-button bgWarning" config-modal="app/partials/roweditor.html" class="pointer">
                  <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
                </span>
                <span class="row-button bgPrimary" ng-click="toggle_row(row)">
                  <i bs-tooltip="'Expand row'" data-placement="right" class="icon-caret-left pointer" ></i>
                </span>
                <span class="row-button row-text" ng-click="toggle_row(row)">{{row.title || 'Row '+$index}}</span>
              </div>
              <div class="row-open" ng-show="!row.collapse">
                <div class='row-tab bgPrimary' ng-click="toggle_row(row)">
                  <span class="row-tab-button">
                    <i class="icon-caret-right"></i>
                  </span>
                </div>
                <div class='row-tab bgSuccess dropdown' ng-show="row.editable">
                  <span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-th-list"></i>
                  </span>
                  <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
                    <li class="dropdown-submenu">
                    <a href="javascript:void(0);">Add Panel</a>
                      <ul class="dropdown-menu">
                      <li><a ng-click="add_panel_default('graph')">Graph</a></li>
                      <li><a ng-click="add_panel_default('text')">Text</a></li>
                      </ul>
                    </li>
                    <li class="dropdown-submenu">
                    <a href="javascript:void(0);">Set height</a>
                      <ul class="dropdown-menu">
                      <li><a ng-click="set_height('100px')">100 px</a></li>
                      <li><a ng-click="set_height('150px')">150 px</a></li>
                      <li><a ng-click="set_height('200px')">200 px</a></li>
                      <li><a ng-click="set_height('250px')">250 px</a></li>
                      <li><a ng-click="set_height('300px')">300 px</a></li>
                      <li><a ng-click="set_height('350px')">350 px</a></li>
                      <li><a ng-click="set_height('450px')">450 px</a></li>
                      <li><a ng-click="set_height('500px')">500 px</a></li>
                      <li><a ng-click="set_height('600px')">600 px</a></li>
                      <li><a ng-click="set_height('700px')">700 px</a></li>
                      </ul>
                    </li>
                    <li class="dropdown-submenu">
                    <a href="javascript:void(0);">Move</a>
                      <ul class="dropdown-menu">
                      <li><a ng-click="move_row(-1)">Up</a></li>
                      <li><a ng-click="move_row(1)">Down</a></li>
                      </ul>
                    </li>
                    <li>
                      <a config-modal="app/partials/roweditor.html">Row editor</a>
                    </li>
                    <li>
                      <a ng-click="delete_row()">Delete row</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div style="padding-top:0px" ng-if="!row.collapse">

              <!-- Panels -->
              <div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.hide" class="panel nospace" ng-style="{'width':(panel.span/1.2)*10+'%'}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}" ng-class="{'dragInProgress':dashboard.$$panelDragging}">
                <!-- Content Panel -->
                <div style="position:relative">
                  <grafana-panel type="panel.type" ng-cloak></grafana-panel>
                </div>
              </div>

              <div ng-show="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'}">
              </div>

              <div class="clearfix"></div>
              </div>
            </div>
          </div>
        </div>


      <div ng-show='dashboard.editable' class="row-fluid add-row-panel-hint">
        <div class="span12" style="text-align:right;">
          <span style="margin-right: 10px;" ng-click="add_row_default()" class="pointer btn btn-info btn-mini">
            <span><i class="icon-plus-sign"></i> ADD A ROW</span>
          </span>
        </div>
      </div>
    </div>
  </div>

</div>