105 lines
4.9 KiB
HTML
105 lines
4.9 KiB
HTML
<div class="page-header">
|
|
<h1>
|
|
Metrics
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="col-lg-10" style="width: 100%;">
|
|
<span us-spinner="{radius:30, width:8, length: 16}" style="margin: 50% auto 0 auto" ng-if="loading < 2"></span>
|
|
<div class="row" ng-class="{'loadingMask': loading < 2}">
|
|
<div class="col-md-4 col-sm-6" ng-class="{'mask':loading < 2}">
|
|
<h3>
|
|
Metrics Browser
|
|
</h3>
|
|
<div multi-select metricsdata="metricsData" metricsdatakey="metricsDataKey" allnames="metricsName"></div>
|
|
<hr>
|
|
<!-- Nested node template -->
|
|
<div>
|
|
<a href="" class="btn btn-default btn-xs" ng-click="collapseAll()">Collapse all</a>
|
|
<!-- <a href="" class="btn btn-default btn-xs margin-right-5" ng-click="expandAll()">Expand all</a> -->
|
|
</div>
|
|
<script type="text/ng-template" id="nodes_renderer.html">
|
|
<div ui-tree-handle class="tree-node tree-node-content">
|
|
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggleTab(this)" ng-class="{'opacity-zero': node.nodes.length == 0 || !node.nodes}">
|
|
<span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span>
|
|
</a>
|
|
<input type="checkbox" ng-if="node.nodes.length == 0 || !node.nodes" ng-checked="isChecked(node)" ng-click="generate(node)"></input>
|
|
{{node.title}}
|
|
<!--a style="margin-right: 8px;" ng-click="generate(node)" data-nodrag="" class="pull-right btn btn-primary btn-xs no-border" ng-hide="node.nodes.length != 0">
|
|
<span class="glyphicon glyphicon-chevron-right"></span>
|
|
</a-->
|
|
</div>
|
|
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}" ng-if="clickedHashTable[node.title]">
|
|
<li ng-repeat="node in node.nodes" ui-tree-node data-collapsed="true" ng-include="'nodes_renderer.html'">
|
|
</li>
|
|
</ol>
|
|
</script>
|
|
<div ui-tree id="tree-root" data-drag-enabled="false">
|
|
<ol ui-tree-nodes="" ng-model="metricsTree">
|
|
<li ng-repeat="node in metricsTree" ui-tree-node data-collapsed="true" ng-include="'nodes_renderer.html'"></li>
|
|
</ol>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-8 col-sm-6" ng-class="{'mask':loading < 2}">
|
|
<h3>Metrics Chart</h3>
|
|
<!-- <div class="input-prepend input-group date-picker-margin">
|
|
<span class="add-on input-group-addon">
|
|
<i class="fa fa-calendar"></i>
|
|
</span>
|
|
<input type="daterange" class="form-control" startDate="2013-09-10" ng-model="dateRange" style="width:400px;" enableTimePicker="true" format="M/DD/YYYY h:mm A" >
|
|
|
|
</div> -->
|
|
<div>
|
|
From
|
|
<input type="number" style="width:55px" ng-model="start_relative.value" min="1"/>
|
|
<select ng-model="start_relative.unit" ng-options="tu for tu in timeUnit"></select> ago
|
|
To
|
|
<input type="number" style="width:55px" ng-model="end_relative.value" min="1"/>
|
|
<select ng-model="end_relative.unit" ng-options="tu for tu in timeUnit"></select> ago
|
|
<button style="margin-left: 10px" ng-click="changeTimeRange()">Apply</button>
|
|
</div>
|
|
<div class="row" style="height: 400px">
|
|
<nvd3-line-chart
|
|
id="metrics-chart"
|
|
data="metricsData"
|
|
height="350"
|
|
showXAxis="true"
|
|
showYAxis="true"
|
|
tooltips="true"
|
|
interactive="true"
|
|
useInteractiveGuideline="true"
|
|
toolTipContent="toolTipContentFunction()"
|
|
xAxisTickFormat="xAxisTickFormatFunction()"
|
|
yAxisTickFormat="yAxisTickFormatFunction()"
|
|
margin="{left:50,top:50,bottom:50,right:50}"
|
|
forceY="[0]"
|
|
showLegend="true"
|
|
objectEquality="true"
|
|
legendWidth="200"
|
|
legendHeight="100"
|
|
noData="No Data Available">
|
|
<svg></svg>
|
|
</nvd3-line-chart>
|
|
|
|
<!--nvd3-stacked-area-chart
|
|
id="metrics-chart2"
|
|
data="exampleData"
|
|
showXAxis="true"
|
|
showYAxis="true"
|
|
tooltips="true"
|
|
interactive="true"
|
|
useInteractiveGuideline="true"
|
|
toolTipContent="toolTipContentFunction()"
|
|
forceY="[0]">
|
|
<svg></svg>
|
|
</nvd3-stacked-area-chart-->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|