<div class="col-xs-12 col-md-8 col-lg-6" ng-hide="eventsPage">
	<input type="text" class="form-control" placeholder="filter..." ng-model="filterDatasource" /> 
	
	<table class="table table-sm table-striped small small mt-4">
		<thead>
			<tr>
				<th>Datasource</th>
				<th class="text-right" style="white-space: nowrap;"># events</th>
			</tr>
		</thead>
		<tr ng-repeat="ds in datasources | filter: filterDatasource">
			<td><a href="javascript:void(0)" ng-click="browseTopics(ds.value)" data-target="#showTopicsModal" data-toggle="modal">{{ds.value}}</a></td>
			<td class="text-right">{{ds.size}}</td>
		</tr>
	</table>
</div>

<div id="showTopicsModal" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">{{dsName}}</h4>
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<table class="table table-sm small ">
					<thead>
						<tr>
							<th>Topic</th>
							<th class="text-right" style="white-space: nowrap;">#</th>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="t in topics">
							<td><a href="javascript:void(0)" ng-click="gotoEventsPage(dsName, t.value)" data-dismiss="modal">{{t.value}}</a></td>
							<td class="text-right">{{t.size}}</td>
						</tr>
						<tr>
							<th><a href="javascript:void(0)" ng-click="gotoEventsPage(dsName, '*')" data-dismiss="modal">Total</a></th>
							<th class="text-right">{{calculateTotal(topics)}}</th>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<back-top><i class="fas fa-chevron-up"></i> top</back-top>
