<style type="text/css">
	.graph.nav-tabs {
		margin-bottom: 15px;
		margin-top: 15px;
	}
	.dropdown-menu {
		overflow-y: auto;
		max-height: 500px;
	}
</style>
<div class="row">
	<div class="col-sm-12">
		<form class="form-inline">
			<div class="form-group">
				<input
					type="text"
					class="form-control col-sm-2"
					ng-model="start"
					placeholder="Start"
					tooltip
					title="Can be absolute or relative time. Relative times follow the format <amount><time unit>-ago. Time Units are ms (Millisecond), s (second), m (minute), h (hour), d (day), w (week), n (month), y (year). Absolute time is in the format yyyy/MM/dd-HH:mm:ss , where any of the time (but not date) parts can be omitted."
					>
			</div>
			<div class="form-group">
				<input
					type="text"
					class="form-control"
					ng-model="end"
					placeholder="End"
					tooltip
					title="Current time if blank. Can be absolute or relative time. Relative times follow the format <amount><time unit>-ago. Time Units are ms (Millisecond), s (second), m (minute), h (hour), d (day), w (week), n (month), y (year). Absolute time is in the format yyyy/MM/dd-HH:mm:ss , where any of the time (but not date) parts can be omitted."
					>
			</div>
			<button class="btn btn-primary" ng-click="Query()">Query</button>
			<button class="btn btn-default" tooltip title="Switch between absolute and relative time. Switching from absolute to relative time rounds the time." ng-click="SwitchTimes()">Switch Time</button>
			<div class="checkbox" tooltip title="Auto downsample using avg and the width in pixels of the displayed graph (recommended). Overrides any downsample options from the query below">
				<label>
					<input type="checkbox" ng-model="autods"> Auto Downsample
				</label>
			</div>
			<div class="checkbox" tooltip title="Refresh every five seconds">
				<label>
					<input type="checkbox" ng-model="refresh"> Refresh
				</label>
			</div>
			<div class="checkbox" tooltip title="Normalize each series to 0-100% of the max value of the series. This is helpful for viewing correlation with multiple series of different metrics">
				<label>
					<input type="checkbox" ng-model="normalize"> Normalize
				</label>
			</div>
            <div class="checkbox" tooltip title="Show Annotations. Hold shift when brushing graph to create an annotation." ng-show="annotateEnabled">
				<label>
					<input type="checkbox" ng-model="showAnnotations" ng-change="setShowAnnotations()"> Annotations
				</label>
			</div>
			<div class="pull-right" ng-show="url">
				<ts-popup url="url"></ts-popup>
				<a class="btn btn-default" ng-href="{{url}}&png=.png" target="_blank">image</a>
			</div>
		</form>
	</div>
</div>
<div class="row">
	<div class="col-sm-9">
		<ul class="graph nav nav-tabs">
			<li ng-repeat="t in query_p" ng-class="{active: $index == index}"><a href ng-click="setIndex($index)">Query {{$index + 1}}</a></li>
			<li><a href ng-click="AddTab()">+</a></li>
		</ul>
	</div>
	<div class="col-sm-3">
		<form class="form-inline">
			<div class="form-group col-sm-6" tooltip title="Y axis minimum; leave empty for auto.">
				<label class="control-label">y min</label>
				<div>
					<input type="number" class="form-control" style="width: 100%" ng-model="min">
				</div>
			</div>
			<div class="form-group col-sm-6" tooltip title="Y axis maximum; leave empty for auto.">
				<label class="control-label">y max</label>
				<div>
					<input type="number" class="form-control" style="width: 100%" ng-model="max">
				</div>
			</div>
		</form>
	</div>
</div>
<div class="row">
	<div class="col-sm-12">
		<div class="tab-content">
			<div class="tab-pane" ng-class="{active: $index == index}" ng-repeat="t in query_p">
				<div ng-if="filterSupport">
					<form class="form-horizontal col-sm-4">
						<div class="form-group">
							<label class="col-sm-4 control-label">Metric</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" ng-model="t.metric" bs-options="m for m in metrics" ng-change="GetTagKByMetric($index)" ng-init="GetTagKByMetric($index)" limit="100" bs-typeahead min-length="0" bs-typeahead>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 control-label" tooltip title="The method used to combine multiple time series into a single time series. This behavior happens when specific or (*) values are omitted for tags.">Aggregator</label>
							<div class="col-sm-8">
								<select class="form-control" ng-model="t.aggregator" ng-options="agg as agg for agg in aggregators"></select>
							</div>
						</div>
						<div class="form-group" ng-hide="autods">
							<label class="col-sm-4 control-label" tooltip title="Downsample the data into fewer datapoints. Requires that the downsample window value is also provided.">Downsample</label>
							<div class="col-sm-8">
								<select ng-model="t.ds" ng-change="t.setDs()" ng-options="agg as agg for agg in dsaggregators" class="form-control"></select>
							</div>
						</div>
						<div class="form-group" ng-hide="autods">
							<label class="col-sm-4 control-label" tooltip title="The time window to downsample to. For example 1h would return a datapoint for every hour by performing the downsample function over that hour. Time units are ms (millisecond), s (second), m (minute), h (hour), d (day), w (week), n (month), y (year).">Window</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" ng-model="t.dstime" ng-change="t.setDs()">
							</div>
						</div>
						<div class="form-group" ng-class="{'has-error': !canAuto[t.metric] && t.derivative == 'auto'}">
							<label class="col-sm-4 control-label" tooltip title="If not set to gauge, this returns a per-second rate of change between points. If the values always increase (except for resets and rollovers), use counter. If the values can go down, use rate. A warning color indicates auto will default to counter.">Type</label>
							<div class="col-sm-8">
								<select ng-model="t.derivative" ng-change="t.setDerivative()" ng-options="r as r for r in rate_options" class="form-control"></select>
							</div>
						</div>
						<div class="form-group" ng-show="t.derivative == 'counter'">
							<label class="col-sm-4 control-label" tooltip title="A positive integer representing the maximum value for the counter.">Max</label>
							<div class="col-sm-8">
								<input type="number" class="form-control" ng-model="t.rateOptions.counterMax">
							</div>
						</div>
					</form>
					<form class="form-horizontal col-sm-8">
						<div class="form-group" ng-repeat="k in sorted_tagks[$index]">
							<label class="col-sm-2 control-label" tooltip title="Enter in values to filter tags. The first filter (function and value) will act as a group by function - each match will corespond to a series. The second filter for the tag will filter the results of the series; instead of generating a new series the filtered series will be aggregated.">{{k}} ({{tagvs[$parent.$index][k].length}})</label>
							<div class="col-sm-2">
								<select title="Function to be used for a groupby filter." class="form-control" ng-model="t.gbFilters[k].type" ng-options="f as f for f in filters"></select>
							</div>
							<div class="col-sm-3">
								<input type="text" class="form-control" ng-model="t.gbFilters[k].filter" bs-options="tv for tv in tagvs[$parent.$index][k]" bs-typeahead min-length="0" limit="100" ng-disabled="!t.metric_tags[k]">
							</div>
							<div class="col-sm-2">
								<select title="Function to be used for a non-groupby filter." class="form-control" ng-model="t.nGbFilters[k].type" ng-options="f as f for f in filters"></select>
							</div>
							<div class="col-sm-3">
								<input type="text" class="form-control" ng-model="t.nGbFilters[k].filter" bs-options="tv for tv in tagvs[$parent.$index][k]" bs-typeahead min-length="0" limit="100" ng-disabled="!t.metric_tags[k]">
							</div>
						</div>
					</form>
				</div>

				<div ng-if="! filterSupport">
					<form class="form-horizontal col-sm-4">
						<div class="form-group">
							<label class="col-sm-4 control-label">Metric</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" ng-model="t.metric" bs-options="m for m in metrics" ng-change="GetTagKByMetric($index)" ng-init="GetTagKByMetric($index)" limit="100" bs-typeahead min-length="0" bs-typeahead>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 control-label" tooltip title="The method used to combine multiple time series into a single time series. This behavior happens when specific or (*) values are omitted for tags.">Aggregator</label>
							<div class="col-sm-8">
								<select class="form-control" ng-model="t.aggregator" ng-options="agg as agg for agg in aggregators"></select>
							</div>
						</div>
						<div class="form-group" ng-hide="autods">
							<label class="col-sm-4 control-label" tooltip title="Downsample the data into fewer datapoints. Requires that the downsample window value is also provided.">Downsample</label>
							<div class="col-sm-8">
								<select ng-model="t.ds" ng-change="t.setDs()" ng-options="agg as agg for agg in dsaggregators" class="form-control"></select>
							</div>
						</div>
						<div class="form-group" ng-hide="autods">
							<label class="col-sm-4 control-label" tooltip title="The time window to downsample to. For example 1h would return a datapoint for every hour by performing the downsample function over that hour. Time units are ms (millisecond), s (second), m (minute), h (hour), d (day), w (week), n (month), y (year).">Window</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" ng-model="t.dstime" ng-change="t.setDs()">
							</div>
						</div>
					</form>
					<form class="form-horizontal col-sm-4">
						<div class="form-group" ng-class="{'has-error': !canAuto[t.metric] && t.derivative == 'auto'}">
							<label class="col-sm-4 control-label" tooltip title="If not set to gauge, this returns a per-second rate of change between points. If the values always increase (except for resets and rollovers), use counter. If the values can go down, use rate. A warning color indicates auto will default to counter.">Series Type</label>
							<div class="col-sm-8">
								<select ng-model="t.derivative" ng-change="t.setDerivative()" ng-options="r as r for r in rate_options" class="form-control"></select>
							</div>
						</div>
						<div class="form-group" ng-show="t.derivative == 'counter'">
							<label class="col-sm-4 control-label" tooltip title="A positive integer representing the maximum value for the counter.">Counter Max</label>
							<div class="col-sm-8">
								<input type="number" class="form-control" ng-model="t.rateOptions.counterMax">
							</div>
						</div>
					</form>
					<form class="form-horizontal col-sm-4">
						<div class="form-group" ng-repeat="k in sorted_tagks[$index]">
							<label class="col-sm-4 control-label" tooltip title="Tag values for the tag. Can have multiple seperate by | which will return a time series for each one. Can also be * which returns a time series for each possible value.">{{k}} ({{tagvs[$parent.$index][k].length}})</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" ng-model="t.tags[k]" bs-options="tv for tv in tagvs[$parent.$index][k]" bs-typeahead min-length="0" limit="100" ng-disabled="!t.metric_tags[k]">
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="row" ng-show="running">
	<div class="col-lg-12">
		<div class="alert alert-info" ng-bind="running"></div>
	</div>
</div>
<div class="row" ng-show="warning">
	<div class="col-lg-12">
		<div class="alert alert-warning" ng-bind="warning"></div>
	</div>
</div>
<div class="row" ng-show="error">
	<div class="col-lg-12">
		<div class="alert alert-danger" ng-bind="error"></div>
	</div>
</div>
<div class="row">
	<div class="col-lg-12">
		<div id="chart" ts-graph data="result" annotation="annotation" annotations="annotations" annotate-enabled="annotateEnabled" show-annotations="showAnnotations" height="400" bstart="start" bend="end" enable-brush="true" min="min" max="max" normalize="normalize"></div>
	</div>
</div>
<div class="row" ng-show="queries">
	<div class="col-lg-12">
		<h4>Queries</h4>
		<table class="table">
			<tbody>
				<tr ng-repeat="q in queries">
					<td ng-bind="q"></td>
					<td><a href="/expr?expr={{btoa(q)}}{{queryTime}}" target="_blank">Expression</a></td>
					<td><a href="/config?expr={{btoa('avg(' + q + ')')}}" target="_blank">Rule</a></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<div class="row">
	<div class="col-lg-12">
		<h4>Metric Description</h4>
		<div ng-repeat="(k, v) in meta">
			<h5>{{k}}</h5>
			{{v.Desc}}
		</div>
	</div>
</div>
<div class="row">
	<div class="col-lg-12">
		<p class="text-right"><small>OpenTSDB Version {{version.Major}}.{{version.Minor}}</small></p>
	</div>
</div>

<a data-toggle="modal" data-target="#annotationModal" id="modalShower"></a>
<div class="modal" id="annotationModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
                <h4 class="modal-title" id="annotationModalLabel">Annotation</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" ng-click="switch()">StartDate</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" ng-model="annotation.StartDate">
                            <p class="help-block">Format: YYYY-MM-DDTHH:mm:ssZ (RFC3339). If StartDate and EndDate are blank, the time is set to now. If one of the two is blank, the blank field will be set to the time of the other.</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" ng-click="switch()">EndDate</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" ng-model="annotation.EndDate">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">CreationUser</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" ng-model="annotation.CreationUser">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Url</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" ng-model="annotation.Url">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Host</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" ng-model="annotation.Host" bs-options="h for h in hosts" bs-typeahead>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Owner</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" ng-model="annotation.Owner" bs-options="o for o in owners" bs-typeahead>
                        </div>
                    </div>
                        <div class="form-group">
                        <label class="col-sm-2 control-label">Category</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" ng-model="annotation.Category" bs-options="c for c in categories" bs-typeahead>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Message</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" ng-model="annotation.Message"></textarea>
                        </div>
                    </div>
                    <div ng-show="annotation.Id != ''">Editing Annotation</div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" ng-click="deleteAnnotation()" data-dismiss="modal" >Delete</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" ng-click="submitAnnotation()" data-dismiss="modal">Save changes</button>
            </div>
        </div>
    </div>
</div>