Context Navigation

groupDetails.cshtml @ 15624

Visit:

Last change on this file since 15624 was 14828, checked in by jkarder, 8 years ago

#2743: worked on web app

added sorting functionality to some tables

File size: 13.8 KB

Rev	Line
[12525]	1	@using HeuristicLab.Services.Access.DataTransfer
	2	@using HeuristicLab.Services.Hive
	3	<header class="view-header">
	4	<ul class="nav nav-list nav-list-topbar pull-left">
	5	<li>
	6	<a ng-href="#/statistics/jobs">Jobs</a>
	7	</li>
	8	@if (Request.IsAuthenticated && User.IsInRole(HiveRoles.Administrator)) {
	9	<li>
	10	<a ng-href="#/statistics/users">Users</a>
	11	</li>
	12	}
	13	<li>
	14	<a ng-href="#/statistics/clients">Clients</a>
	15	</li>
	16	<li class="active">
	17	<a ng-href="#/statistics/groups">Groups</a>
[12551]	18	</li>
	19	@if (Request.IsAuthenticated && User.IsInRole(HiveRoles.Administrator)) {
	20	<li>
	21	<a ng-href="#/statistics/exceptions">Exceptions</a>
	22	</li>
	23	}
[12525]	24	</ul>
	25	</header>
	26
	27	<div class="default-view-container">
	28	<div class="row">
[12551]	29	<div class="col-lg-9">
[12525]	30	<div class="panel panel-default">
	31	<div class="panel-heading">
	32	<h3 class="panel-title">Group Details</h3>
	33	</div>
	34	<div class="panel-body">
	35	<div class="row">
[12551]	36	<div class="col-md-6">
[12525]	37	<table class="table table-no-border table-condensed table-auto-width table-content">
	38	<tr>
	39	<td class="text-left">Name:</td>
	40	<td class="text-right">{{group.Name}}</td>
	41	</tr>
	42	<tr>
	43	<td class="text-left">Clients:</td>
[12551]	44	<td class="text-right">{{group.OnlineClients}} / {{group.TotalClients}}</td>
[12525]	45	</tr>
	46	</table>
	47	</div>
[12551]	48	<div class="col-md-6">
[12525]	49	<table class="table table-no-border table-condensed table-auto-width table-content">
	50	<tr>
[12551]	51	<td class="text-left">Total Unavailable Time:</td>
	52	<td class="text-right">{{group.TotalUnavailableTime \| toTimespan}}</td>
[12525]	53	</tr>
	54	<tr>
[12551]	55	<td class="text-left">Total Calculating Time:</td>
	56	<td class="text-right">{{group.TotalCalculatingTime \| toTimespan}}</td>
[12525]	57	</tr>
	58	<tr>
[12551]	59	<td class="text-left">Total Idle Time:</td>
	60	<td class="text-right">{{group.TotalIdleTime \| toTimespan}}</td>
[12525]	61	</tr>
	62	<tr>
[12551]	63	<td class="text-left">Total Transferring Time:</td>
	64	<td class="text-right">{{group.TotalTransferringTime \| toTimespan}}</td>
[12525]	65	</tr>
[12551]	66	<tr>
	67	<td class="text-left">Total Offline Time:</td>
	68	<td class="text-right">{{group.TotalOfflineTime \| toTimespan}}</td>
	69	</tr>
[12525]	70	</table>
	71	</div>
[12551]	72	</div>
	73	</div>
	74	</div>
	75	</div>
	76	<div class="col-lg-3 col-md-6">
	77	<div class="panel panel-default">
	78	<div class="panel-heading">
	79	<h3 class="panel-title">Tasks Overview</h3>
	80	</div>
	81	<div class="panel-body">
	82	<table class="table table-no-border table-condensed table-auto-width table-content">
	83	<tr>
	84	<td class="text-left">Total:</td>
	85	<td class="text-right">{{totalGroupTasks}}</td>
	86	</tr>
	87	<tr ng-repeat="state in group.TasksStates">
	88	<td class="text-left">{{state.State}}:</td>
	89	<td class="text-right">{{state.Count}}</td>
	90	</tr>
	91	</table>
	92	</div>
	93	</div>
	94	</div>
	95	</div>
[12525]	96
[12551]	97	<div class="row">
	98	<div class="col-lg-3 col-md-6">
	99	<div class="panel panel-default">
	100	<div class="panel-heading">
	101	<h3 class="panel-title">Cores</h3>
	102	</div>
	103	<div class="panel-body">
	104	<div class="text-center">
	105	<knob knob-data="knobData.cores" knob-options="knobOptions"></knob>
[12525]	106	</div>
[12551]	107	<table class="table table-no-border table-condensed table-auto-width table-content">
	108	<tr>
	109	<td class="text-left">Total:</td>
	110	<td class="text-right">{{group.TotalCores \| number}}</td>
	111	</tr>
	112	<tr>
	113	<td class="text-left">Used:</td>
	114	<td class="text-right">{{group.UsedCores \| number}}</td>
	115	</tr>
	116	</table>
[12525]	117	</div>
	118	</div>
	119	</div>
[12551]	120
	121	<div class="col-lg-3 col-md-6">
	122	<div class="panel panel-default">
	123	<div class="panel-heading">
	124	<h3 class="panel-title">CPU Utilization</h3>
	125	</div>
	126	<div class="panel-body">
	127	<div class="text-center">
	128	<knob knob-data="knobData.cpu" knob-options="knobOptions"></knob>
	129	</div>
	130	<table class="table table-no-border table-condensed table-auto-width table-content">
	131	<tr>
	132	<td class="text-left">Total:</td>
	133	<td class="text-right">{{group.TotalCpuUtilization \| number: 2}} %</td>
	134	</tr>
	135	<tr>
	136	<td class="text-left">Active:</td>
	137	<td class="text-right">{{group.ActiveCpuUtilization \| number: 2}} %</td>
	138	</tr>
	139	</table>
	140	</div>
	141	</div>
	142	</div>
	143
	144	<div class="col-lg-3 col-md-6">
	145	<div class="panel panel-default">
	146	<div class="panel-heading">
	147	<h3 class="panel-title">Memory</h3>
	148	</div>
	149	<div class="panel-body">
	150	<div class="text-center">
	151	<knob knob-data="knobData.memory" knob-options="knobOptions"></knob>
	152	</div>
	153	<table class="table table-no-border table-condensed table-auto-width table-content">
	154	<tr>
	155	<td class="text-left">Total:</td>
	156	<td class="text-right">{{group.TotalMemory \| kbToGB}} GB</td>
	157	</tr>
	158	<tr>
	159	<td class="text-left">Used:</td>
	160	<td class="text-right">{{group.UsedMemory \| kbToGB}} GB</td>
	161	</tr>
	162	</table>
	163	</div>
	164	</div>
	165	</div>
[12525]	166	</div>
[12551]	167
[12525]	168	<div class="row">
	169	<div class="col-lg-12">
	170	<div class="panel panel-default">
	171	<div class="panel-heading">
	172	<h3 class="panel-title">Clients</h3>
	173	</div>
	174	<div class="panel-body">
[14828]	175	<table class="table table-hover table-condensed" ts-wrapper>
[12525]	176	<thead>
	177	<tr>
	178	<th>#</th>
[14828]	179	<th ts-criteria="Name">Client Name</th>
	180	<th ts-criteria="UsedCores">Cores</th>
	181	<th ts-criteria="CpuUtilization">Cpu Utilization</th>
	182	<th ts-criteria="UsedMemory">Memory</th>
	183	<th ts-criteria="State">State</th>
[12525]	184	<th></th>
	185	</tr>
	186	</thead>
[14828]	187	<tr ng-repeat="client in clientPage.Clients" ts-repeat>
[12525]	188	<td>{{($index + 1)+((curClientsPage-1)*(clientsPageSize))}}</td>
	189	<td>{{client.Name}}</td>
	190	<td>{{client.UsedCores}} / {{client.TotalCores}}</td>
	191	<td>{{client.CpuUtilization \| number: 2}} %</td>
[12551]	192	<td>{{client.UsedMemory \| kbToGB}} / {{client.TotalMemory \| kbToGB}}</td>
[12525]	193	<td>{{client.State}}</td>
	194	<td>
	195	<a ng-href="#/statistics/clients/{{client.Id}}">Details</a>
	196	</td>
	197	</tr>
	198	<tr ng-hide="clientPage.Clients.length">
[12551]	199	<td colspan="7" class="text-center">No clients found!</td>
[12525]	200	</tr>
	201	</table>
	202	<div class="row text-center" ng-show="clientPage.TotalClients > clientPage.Clients.length">
	203	<pagination max-size="10" total-items="clientPage.TotalClients" ng-model="curClientsPage" ng-change="changeClientsPage()" items-per-page="clientsPageSize"
	204	boundary-links="true" rotate="false" num-pages="numPages"></pagination>
	205	</div>
	206	</div>
	207	</div>
	208	</div>
	209	</div>
	210	</div>
	211
	212	<div class="default-filter-header text-center">
	213	<form class="form-inline">
	214	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
	215	<label for="fromDate">From: </label>
	216	<div class="input-group">
	217	<input id="fromDate" type="text" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="fromDate" is-open="fromIsOpen" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
	218	<span class="input-group-btn">
	219	<button type="button" class="btn btn-default" ng-click="openFromDateSelection($event)"><i class="glyphicon glyphicon-calendar"></i></button>
	220	</span>
	221	</div>
	222	</div>
	223	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
	224	<label for="fromDate">To: </label>
	225	<div class="input-group">
[12778]	226	<input id="fromDate" type="text" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="toDate" is-open="toIsOpen" datepicker-options="dateOptions" ng-required="true" close-text="Close"/>
[12525]	227	<span class="input-group-btn">
	228	<button type="button" class="btn btn-default" ng-click="openToDateSelection($event)"><i class="glyphicon glyphicon-calendar"></i></button>
	229	</span>
	230	</div>
	231	</div>
	232	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
[12778]	233	<div class="btn-group" dropdown dropdown-append-to-body>
[12780]	234	<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle style="width: 145px; text-align: left;">
	235	<span class="text-left" style="display: inline-block; width: 100px;">{{curQuickSelection.name}}</span>
[12778]	236	<span class="glyphicon glyphicon-chevron-down" style="margin-top: 3px;"></span>
	237	</button>
	238	<ul class="dropdown-menu" role="menu">
	239	<li ng-repeat="quickSelection in quickSelectionList">
	240	<a class="cursor-pointer" ng-click="changeQuickSelection(quickSelection)">{{quickSelection.name}}</a>
	241	</li>
	242	</ul>
	243	</div>
	244	</div>
	245	<div class="form-group" style="margin-left: 5px; margin-right: 5px;">
[12525]	246	<button type="button" class="btn btn-default" ng-click="updateCharts()">
	247	Apply
	248	</button>
	249	</div>
	250	</form>
	251	</div>
	252
	253	<div class="default-view-container">
	254	<div class="row">
	255	<div class="col-lg-12">
	256	<div class="panel panel-default">
	257	<div class="panel-heading">
	258	<h3 class="panel-title">CPU Utilization Chart</h3>
	259	</div>
	260	<div class="panel-body">
	261	<flot dataset="cpuSeries" options="chartOptions"></flot>
	262	</div>
	263	</div>
	264	</div>
	265	</div>
	266
	267	<div class="row">
	268	<div class="col-lg-12">
	269	<div class="panel panel-default">
	270	<div class="panel-heading">
	271	<h3 class="panel-title">Core Chart</h3>
	272	</div>
	273	<div class="panel-body">
	274	<flot dataset="coreSeries" options="fillChartOptions"></flot>
	275	</div>
	276	</div>
	277	</div>
	278	</div>
	279
	280	<div class="row">
	281	<div class="col-lg-12">
	282	<div class="panel panel-default">
	283	<div class="panel-heading">
	284	<h3 class="panel-title">Memory Chart</h3>
	285	</div>
	286	<div class="panel-body">
	287	<flot dataset="memorySeries" options="fillChartOptions"></flot>
	288	</div>
	289	</div>
	290	</div>
	291	</div>
	292	</div>

Note: See TracBrowser for help on using the repository browser.

Download in other formats:

Original Format