<!--
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  -->

<div class="box box-primary">
	<div class="box-header with-border">
		<span class="fa fa-square" ng-class="policy.policyStatus === 'ENABLED' ? 'text-green' : 'text-muted'"></span>
		<h3 class="box-title">
			{{policy.name}}
		</h3>
		<div class="box-tools pull-right">
			<div class="btn-group" ng-if="Auth.isAdmin">
				<button class="btn btn-default fa fa-play" ng-click="startPolicy()" ng-if="policy.policyStatus !== 'ENABLED'"></button>
				<button class="btn btn-default fa fa-square" ng-click="stopPolicy()" ng-if="policy.policyStatus === 'ENABLED'"></button>
				<a class="btn btn-default fa fa-pencil" ui-sref="policyEdit({siteId: site, name: policy.name})"></a>
				<button class="btn btn-danger fa fa-trash" ng-click="deletePolicy()"></button>
			</div>
		</div>
	</div>
	<div class="box-body">
		<table class="table">
			<tbody>
				<tr>
					<th>Status</th>
					<td>
						<span class="label" ng-class="policy.policyStatus === 'ENABLED' ? 'label-success' : 'label-default'">
							{{policy.policyStatus}}
						</span>
					</td>
				</tr>
				<tr>
					<th>Definition</th>
					<td><pre class="text-break">{{policy.definition.value}}</pre></td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="box-footer text-right">
		<button class="btn btn-primary" ng-click="makePrototype()">
			<span class="fa fa-file-code-o"></span>
			Make as Prototype
		</button>
	</div>
</div>


<div class="nav-tabs-custom">
	<ul class="nav nav-tabs">
		<!--li><a href="#statistic" data-toggle="tab">Statistic</a></li-->
		<li class="active"><a href="#alerts" data-toggle="tab" ng-click="setTab('alerts')">Alert List</a></li>
		<li><a href="#definition" data-toggle="tab" ng-click="setTab('definition')">Alert Definition</a></li>
		<li><a href="#setting" data-toggle="tab" ng-click="setTab('setting')">Policy Settings</a></li>
		<li><a href="#assignments" data-toggle="tab" ng-click="setTab('assignments')">Execution Assignments</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active" id="alerts">
			<div sort-table="alertList">
				<table class="table table-bordered">
					<thead>
					<tr>
						<th sortpath="timestamp" width="135">
							Alert Time
							<span class="fa fa-refresh fa-spin no-animate" ng-show="!alertList._done || isSorting"></span>
						</th>
						<th>Alert Subject</th>
						<th width="10"></th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td>{{Time.format(item.timestamp)}}</td>
						<td class="text-break">
							{{item.alertSubject}}
						</td>
						<td>
							<a ui-sref="alertDetail({siteId: site, alertId: item.tags.alertId, timestamp: item.timestamp})">Detail</a>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>

		<div class="tab-pane" id="definition">
			<table class="table">
				<tbody>
				<tr>
					<th width="15%">Category</th>
					<td>{{policy.alertDefinition.category}}</td>
				</tr>
				<tr>
					<th>Severity</th>
					<td>
							<span class="label label-{{Policy.getSeverityClass(policy.alertDefinition.severity)}}">
								{{policy.alertDefinition.severity}}
							</span>
					</td>
				</tr>
				<tr>
					<th>Alert Subject</th>
					<td><pre>{{policy.alertDefinition.subject}}</pre></td>
				</tr>
				<tr>
					<th>Alert Body</th>
					<td><pre>{{policy.alertDefinition.body}}</pre></td>
				</tr>
				</tbody>
			</table>
		</div>

		<div class="tab-pane" id="setting">
			<table class="table">
				<tbody>
					<tr>
						<th class="text-no-break">Parallelism Hint</th>
						<td>{{policy.parallelismHint}}</td>
					</tr>
					<tr>
						<th>Partitions</th>
						<td>
							<ul class="no-margin">
								<li ng-repeat="partition in policy.partitionSpec track by $index">
									[<span class="text-primary">{{partition.type}}</span>]
									{{partition.streamId}}:
									<strong class="text-success">{{partition.columns.join(", ")}}</strong>
								</li>
								<li ng-if="policy.partitionSpec.length === 0" class="text-muted">
									No partition
								</li>
							</ul>
						</td>
					</tr>
					<tr>
						<th>Input Streams</th>
						<td>
							<ul class="no-margin">
								<li ng-repeat="stream in policy.inputStreams track by $index">
									{{stream}}
									<a class="fa fa-plug" uib-tooltip="Click to view data source" ng-click="showDataSource(stream)"></a>
								</li>
							</ul>
						</td>
					</tr>
					<tr>
						<th>Output Streams</th>
						<td>
							<ul class="no-margin">
								<li ng-repeat="stream in policy.outputStreams track by $index">
									{{stream}}
								</li>
							</ul>
						</td>
					</tr>
					<tr>
						<th>Publishers</th>
						<td>
							<ul class="no-margin">
								<li class="text-danger" ng-if="policyPublisherList.length === 0">
									<i class="fa fa-fw fa-warning"></i> No alert publisher defined
								</li>
								<li ng-repeat="publisher in policyPublisherList track by $index">
									<span>
										<strong>
											<span>({{Policy.publisherTypes[publisher.type].name}})</span>
											{{publisher.name}}
										</strong>
									</span>
									<ul>
										<li class="offset" ng-repeat="field in Policy.publisherTypes[publisher.type].displayFields track by $index">
											<span>{{field.name}}:</span>
											<span>{{publisher.properties[field.name]}}</span>
										</li>
									</ul>
								</li>
							</ul>
						</td>
					</tr>
					<!--<tr>-->
						<!--<th class="text-no-break">Execution Plan</th>-->
						<!--<td><pre>{{executionPlan.policyExecutionPlan.executionPlanDesc}}</pre></td>-->
					<!--</tr>-->
				</tbody>
			</table>
		</div>


		<div class="tab-pane" id="assignments">
			<table class="table">
				<tbody>
				<tr>
					<th>Assigned Version</th>
					<td>{{assignment.version}}</td>
				</tr>
				<tr>
					<th>Assigned Queue</th>
					<td>{{assignment.queueId}}</td>
				</tr>
				<tr>
					<th class="text-no-break" width="120">Assigned Slots</th>
					<td>
						<div na-block="queue.workingSlots.length > 0">
							<ul class="no-margin">
								<li ng-repeat="slot in queue.workingSlots track by $index">
									<span class="text-primary">{{slot.topologyName}}</span>
									- {{slot.boltId}}
								</li>
							</ul>
						</div>
					</td>
				</tr>
				</tbody>
			</table>
		</div>

		<!--<div class="tab-pane" id="statistic">statistic</div>-->
	</div>
</div>