<!DOCTYPE html>
<html>

	<title>${messages.app.title} : ${messages.jmx.QueryMonitoringPage.title}</title>

	<link href="css/jmx.css?v=3.4.0-RC3" rel="stylesheet" />

	<h1>
		{{title}}
        <page-info-tooltip></page-info-tooltip>
	</h1>

    <div core-errors ontop></div>

	<div id="wb-monitoringQueries" data-test="monitoring-queries-and-updates" class="ot-owlim-monitoring-queries" ng-if="!isActiveRepoOntopType()">
		<div ng-show="getActiveRepository()">
			<div class="main-loader" onto-loader size="50" ng-show="loader"></div>

			<div class="ng-scope" ng-show="!loader && error">
				<p class="alert alert-danger">
					{{'common.error' | translate}}: {{error}}.
					<br/>
					{{'refresh.to.retry' | translate}}
				</p>
			</div>

			<div ng-hide="loader || error">
				<div class="pause-bar">
					<button type="button" class="btn pull-right pause-btn" ng-click="togglePause()" data-test="pause-button" ng-class="paused ? 'btn-primary' : 'btn-secondary'"
							gdb-tooltip="{{paused ? 'monitoring.restart' : 'temp.pause' | translate}}"
						tooltip-placement="left">
						{{paused ? 'paused.btn' : 'pause.btn' | translate}}
					</button>
				</div>
				<div ng-hide="noQueries">
					<table id="wb-monitoringQueries-queryInQueries" class="table table-striped table-bordered query-table" aria-describedby="Monitor queries table">
						<thead>
							<tr>
								<th id="queryIdColumn">id</th>
								<th id="queryId2Column">{{'node.label' | translate}}</th>
                                <th id="usernameColumn">{{'username.label' | translate}}</th>
								<th id="queryTypeColumn">{{'type.label.lower.case' | translate}}</th>
								<th id="queryColumn">{{'query.label' | translate}}</th>
								<th id="lifetimeColumn">{{'lifetime.label' | translate}}</th>
								<th id="queryStateColumn">{{'state.label' | translate}}</th>
								<th id="actionsColumn"></th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="query in queries">
								<td>{{query.trackId}}</td>
								<td>
                                    <div>{{ getActiveRepository() }}</div>
                                    <div ng-show="query.parsedNode">
                                        <div>&rarr; {{ query.parsedNode[2] }} #{{ query.parsedNode[0] }}</div>
                                        <div>{{ query.parsedNode[1] }}</div>
                                    </div>
                                </td>
                                <td>{{query.username}}</td>
								<td>{{query.type}}</td>
								<td>
									<button class="pull-left btn btn-primary btn-sm" ng-click="downloadQuery(query)">{{'download.btn' | translate}}</button>
									<div ng-if="query.sparqlString.length > stringLimit" class="pull-right">
										<button class="btn btn-link small px-0" ng-click="toggleQueryExpanded(query.trackId)">
											<span ng-show="!expanded[query.trackId]">{{'show.remaining' | translate}} {{query.sparqlString.length - stringLimit}} {{'characters.label' | translate}}</span>
											<span ng-show="expanded[query.trackId]">{{'show.first.chars' | translate}}</span>
										</button>
									</div>
									<div ng-if="query.sparqlString.length > stringLimit && !expanded[query.trackId]" class="query-string">{{query.sparqlString | limitTo: stringLimit}}...</div>
									<div ng-if="query.sparqlString.length <= stringLimit || expanded[query.trackId]" class="query-string">{{query.sparqlString}}</div>
								</td>
								<td><span gdb-tooltip="{{query.msSinceCreated}} ms">{{query.humanLifetime}}</span></td>
								<td>
									<p>{{query.state}}</p>
									<div>{{query.numberOfOperations}} {{'operations.label' | translate}}</div>
								</td>
								<td>
									<div disabled-wrapper uib-popover="{{query.isRequestedToStop ? (query.type == 'QUERY' ? 'query.abort.request' : 'update.requested') : (query.type == 'QUERY' ? 'click.to.abort.query' : 'click.to.abort.update') | translate}}"
										 popover-trigger="mouseenter"
										 popover-placement="bottom">
										<div ng-class="query.isRequestedToStop ? 'disabled' : ''"> <!-- Keep this div -->
											<button ng-disabled="query.isRequestedToStop" class="abortQuery btn btn-xs btn-primary"
													ng-click="abortQuery(query.trackId)">
												{{query.isRequestedToStop ? 'stop.was.requested' : (query.type == 'QUERY' ? 'abort.query' : 'abort.update') | translate}}
											</button>
										</div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="alert alert-info no-icon no-running-queries-alert" data-test="no-running-queries-or-updates-alert" ng-show="noQueries">
					{{'no.running.queries.updates' | translate}}
				</div>
			</div>
		</div>

	</div>

</html>
