energylink/public/app/partials/metrics.html

<div class="editor-row">

	<div class="tight-form-container">
		<div ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}">
			<rebuild-on-change property="ctrl.panel.datasource || target.datasource" show-null="true">
				<plugin-component type="query-ctrl">
				</plugin-component>
			</rebuild-on-change>
		</div>
	</div>

	<div style="margin: 20px 0 0 0">
		<button class="btn btn-inverse" ng-click="ctrl.addDataQuery()" ng-hide="ctrl.datasource.meta.mixed">
			<i class="fa fa-plus"></i>&nbsp;
			Query
		</button>

		<div class="dropdown" ng-if="ctrl.datasource.meta.mixed">
			<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
				<i class="fa fa-plus"></i>&nbsp;
				Query &nbsp; <span class="caret"></span>
			</button>

			<ul class="dropdown-menu" role="menu">
				<li ng-repeat="datasource in ctrl.datasources" role="menuitem" ng-hide="datasource.meta.builtIn">
					<a ng-click="ctrl.addDataQuery(datasource);">{{datasource.name}}</a>
				</li>
			</ul>
		</div>

	</div>

	<rebuild-on-change property="ctrl.panel.datasource" show-null="true">
		<plugin-component type="query-options-ctrl">
		</plugin-component>
	</rebuild-on-change>

</div>

<div class="editor-row" style="margin-top: 30px">

	<div class="pull-right dropdown" style="margin-right: 10px;">
		<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" bs-tooltip="'Datasource'">
			<i class="fa fa-database"></i>&nbsp;
			{{ctrl.datasource.name}} &nbsp; <span class="caret"></span>
		</button>

		<ul class="dropdown-menu" role="menu">
			<li ng-repeat="datasource in ctrl.datasources" role="menuitem">
				<a ng-click="ctrl.setDatasource(datasource);">{{datasource.name}}</a>
			</li>
		</ul>
	</div>

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