<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<base href="/">
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>

		<link type="text/css" rel="stylesheet" href="/static/css/lib/font-awesome/css/font-awesome.css"/>

		<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
		<script data-main="/static/js/require.config.js" src="/static/js/lib/require/require.js"></script>

		<link type="text/css" rel="stylesheet" href="/static/css/modal.css"/>
		<link type="text/css" rel="stylesheet" href="/static/css/tooltip.css"/>
		<link type="text/css" rel="stylesheet" href="/static/css/filteredSelect.css"/>
		<link type="text/css" rel="stylesheet" href="/static/css/utility.css"/>
		<link type="text/css" rel="stylesheet" href="/static/css/app.css"/>
	</head>
	<body ng-controller="dataController as data">
		<div ng-controller="driveCreationController as create">
			<div ng-controller="utilTooltipController as utilTT">
				<div ng-controller="noteTooltipController as noteTT">
					<div ng-controller="clickController as click">
						<div ng-controller="dashboardController as dash">
							<div class="content">
								<div class="dashboard container">
									<div class="header row vertical-container"><!--
										--><div class="health text-center vertical-block">
											<span class="uppercase">unhealthy&nbsp;<span class="text-bold">({{!data.unhealthy.length}})</span></span>
										</div><!--
										--><div class="progress text-center vertical-block">
											<span class="uppercase">in progress&nbsp;<span class="text-bold">({{!data.inProgress.length}})</span></span>
										</div><!--
									--></div>
									<div class="content row vertical-container"><!--
										--><div class="health scroll-container vertical-block text-right"
											infini-scroll
											threshold=.85
											rate=5
											max="{{!data.unhealthy.length}}"
											current="container.limit"

											ng-init="container={};container.limit=5">
											<div class="entity clickable"
												ng-repeat="entity in data.unhealthy | limitTo:container.limit">
												<ng-switch on="entity.type">
													<div class="device"
														ng-click="dash.findHostFromEntity(entity)"
														ng-switch-when="DEVICE">
														<div class="notification vertical-container swift-animate">
															<i class="vertical-block fa fa-arrow-circle-o-down"></i>
															<span class="note vertical-block">scroll</span>
														</div>
														<div class="text text-bold">DEVICE</div>
														<div class="subtext">{{!::entity.uuid}}</div>
														<div class="subtext">{{!::entity.drive}}</div>
													</div>
													<div class="host" ng-switch-when="HOST">
														<div class="text text-bold">HOST</div>
														<div class="subtext">{{!::entity.name}}</div>
													</div>
												</ng-switch>
											</div><!--
											--><div class="loading vertical-container text-center"
												ng-hide="container.limit >= data.unhealthy.length">
												<i class="fa fa-circle-o-notch fa-pulse vertical-block"></i>
											</div>
										</div><!--
										--><div class="progress scroll-container vertical-block"
											infini-scroll
											threshold=.85
											rate=5
											max="{{!data.inProgress.length}}"
											current="container.limit"

											ng-init="container={};container.limit=5">
											<div class="entity clickable"
												ng-class="{
													'narrow vertical-block': host.pending > 0 ||
													host.prepping > 0 ||
													host.formatting > 0 ||
													host.adding > 0
												}"
												ng-repeat-start="host in data.inProgress | limitTo:container.limit track by host.name">
												<div class="host"
													ng-click="dash.expanded[host.name] = !dash.expanded[host.name]">
													<div class="title vertical-container">
														<i class="fa vertical-block"
															ng-class="{
																'fa-minus-square-o': dash.expanded[host.name],
																'fa-plus-square-o': !dash.expanded[host.name]
															}"></i><div class="text text-bold vertical-block">{{!::host.name}}</div>
													</div>
													<div class="row vertical-container"
														ng-class="{
															populated: host.pending > 0
														}">
														<div class="text-italicize label vertical-block capitalize">pending</div><div class="right text-right field vertical-block">{{!host.pending}}</div>
													</div>
													<div class="row vertical-container"
														ng-class="{
															populated: host.prepping > 0
														}">
														<div class="text-italicize label vertical-block capitalize">prepping</div><div class="right text-right vertical-block field">{{!host.prepping}}</div>
													</div>
													<div class="row vertical-container"
														ng-class="{
															populated: host.formatting > 0
														}">
														<div class="text-italicize vertical-block label capitalize">formatting</div><div class="right text-right vertical-block field">{{!host.formatting}}</div>
													</div>
													<div class="row vertical-container"
														ng-class="{
															populated: host.adding > 0
														}">
														<div class="text-italicize vertical-block label capitalize">adding</div><div class="right text-right vertical-block field">{{!host.adding}}</div>
													</div>
													<hr>
													<div class="row vertical-container"
														ng-class="{
															populated: host.deleting > 0
														}">
														<div class="text-italicize vertical-block label capitalize">deleting</div><div class="right text-right vertical-block field">{{!host.deleting}}</div>
													</div>
													<div class="row vertical-container"
														ng-class="{
															populated: host.reweight > 0
														}">
														<div class="text-italicize vertical-block label capitalize">reweighting</div><div class="right text-right vertical-block field">{{!host.reweight}}</div>
													</div>
												</div>
												<div class="device-container"
													ng-if="dash.expanded[host.name]">
													<div class="device vertical-container"
														ng-repeat="device in host.children track by device.hash">
														<ng-switch on="device.type">
															<div class="host clickable"
																ng-click="dash.findHostFromRing(device)"
																ng-switch-when="DELETE">
																<div class="notification vertical-container swift-animate">
																	<i class="vertical-block fa fa-arrow-circle-o-down"></i>
																	<span class="note vertical-block">scroll</span>
																</div>
																<div class="text text-bold">DELETE</div>
																<div class="subtext">{{!::data.rings[device.ring].id[device.id].device}}</div>
																<div class="subtext">{{!::data.rings[device.ring].id[device.id].ip}}</div>
															</div>
															<div class="host"
																ng-switch-when="ADD"
																ng-switch on="device.stage">
																<div class="text text-bold">ADD</div>
																<div class="subtext text-italicize">{{!:: '/dev/' + device.drive}}</div>
																<div class="status text-bold text-italicize" ng-switch-when="PREP">Prepping...</div>
																<div class="status text-bold text-italicize" ng-switch-when="PENDING">Pending...</div>
																<div class="status text-bold text-italicize" ng-switch-when="FORMAT">Formatting...</div>
																<div class="status text-bold text-italicize" ng-switch-when="ADD">Adding...</div>
															</div>
															<div class="host clickable"
																ng-click="dash.findHostFromRing(device)"
																ng-switch-when="REWEIGHT"
																ng-switch on="data.isUndefined(data.rings[device.ring].id[device.id])">
																<div class="notification vertical-container swift-animate">
																	<i class="vertical-block fa fa-arrow-circle-o-down"></i>
																	<span class="note vertical-block">scroll</span>
																</div>
																<div class="text text-bold">REWEIGHT</div>
																<div class="subtext">{{!::data.rings[device.ring].id[device.id].device}}</div>
																<div class="subtext">{{!::data.rings[device.ring].id[device.id].ip}}</div>

																<div class="status vertical-container"
																	ng-switch-when="false">
																	<span class="vertical-block">{{!data.rings[device.ring].id[device.id].weight | number:0}}</span>
																	<i class="fa direction vertical-block"
																	ng-class="{
																		'fa-arrow-up increase': (data.rings[device.ring].id[device.id].weight | toInt) < (device.target | toInt),
																		'fa-arrow-down decrease': (data.rings[device.ring].id[device.id].weight | toInt) > (device.target | toInt),
																	}"></i>
																	<span class="text-bold vertical-block">{{!::device.target | number:0}}</span>
																</div>
																<div class="status vertical-container"
																	ng-switch-when="true">
																	<i class="fa fa-spinner fa-pulse vertical-block"></i>
																</div>
															</div>
														</ng-switch>
													</div>
												</div>
											</div><!--
											--><div ng-repeat-end class="cancel text-center vertical-container vertical-block clickable"
												ng-if="host.pending > 0 ||
													host.prepping > 0 ||
													host.formatting > 0 ||
													host.adding > 0"
												ng-click="create.cancel(host.name)">
												<i class="fa fa-times"></i>
											</div><!--
											--><div class="loading vertical-container text-center"
												ng-hide="container.limit >= data.inProgress.length"><!--
												--><i class="fa fa-circle-o-notch fa-pulse vertical-block"></i>
											</div>
										</div><!--
									--></div>
								</div>
								<div class="table container">
									<div class="header row vertical-container">
										<div class="name vertical-block">Name</div><!--
										--><div class="util vertical-block">Utilization</div><!--
										--><div class="health text-center vertical-block">Health</div><!--
									--></div>
									<div class="ring" ng-repeat="group in ::data.groups">
										<div class="summary row vertical-container">
											<div class="name vertical-block"><!--
												--><span>ring,</span>&nbsp;<!--
												--><span class="text-bold">{{!::group.type}}</span><!--
											--></div>
											<div class="util vertical-block">
												<div class="bar vertical-block vertical-container"
													ng-class="{
														small: data.health[group.type].summary.percent_used < .22
													}"
													style="width: {{!data.health[group.type].summary.percent_used | percent:0}}"><!--
													--><div class="label text-bold right vertical-block">{{!data.health[group.type].summary.percent_used | percent:0}}</div>
												</div>
												<div class="line vertical-block"
													style="width: {{!data.health[group.type].summary.percent_used | percent:0}}"
													ng-if="group.type != 'uninitialized'"></div>
											</div><!--
											--><div class="health text-center vertical-block"
												ng-if="group.type == 'uninitialized'">
												<div class="bulk-add button vertical-container vertical-block clickable"
													ng-click="create.addMultiHost(group.hosts)">Bulk Initialize</div>
											</div>
										</div><!--

										--><div class="host row vertical-container"
											ng-repeat="node in group.hosts track by node.name"
											ng-class="{
												'unhealthy': !data.isUndefined(data.health.bad_hosts[node.ip]),
												'expanded': click.expanded.type == group.type && click.expanded.idx == $index
											}">
											<div ng-if="!data.isUndefined(data.health.bad_hosts[node.ip])">
												<div class="name vertical-block"><!--
													--><span class="">{{!::node.name}}</span><!--
												--></div>
												<div class="error text-center vertical-block"><!--
													--><span class="message vertical-block text-italicize">Unknown</span><!--
												--></div>
											</div>
											<div class="clickable {{!::group.type + '-' + $index}}"
												ng-click="click.host(group.type, $index, $event)"
												ng-mouseenter="group.type == 'uninitialized' || utilTT.show($event, node, data.health[group.type].servers[node.ip])"
												ng-mouseleave="utilTT.hide($event)"
												ng-if="data.isUndefined(data.health.bad_hosts[node.ip])">
												<div class="name vertical-block"><!--
													--><span class="">{{!::node.name}}</span><!--
												--></div>
												<div class="util text-center vertical-block not-available"
													ng-if="data.isUndefined(data.health[group.type].servers[node.ip])">
													<div class="label text-italicize bar">N/A</div>
													<div class="line vertical-block"
														style="width: {{!data.health[group.type].summary.percent_used | percent:0}}"
														ng-if="group.type != 'uninitialized'"></div>
												</div>
												<div class="util vertical-block"
													ng-if="!data.isUndefined(data.health[group.type].servers[node.ip])">
													<div class="bar vertical-block vertical-container"
														ng-class="{
															small: data.health[group.type].servers[node.ip].percent_used < .22
														}"
														style="width: {{!data.min([data.health[group.type].servers[node.ip].percent_used,
															data.health[group.type].summary.percent_used]) | percent:0}}"><!--
														--><div class="label right vertical-block"
															ng-if="data.round(data.health[group.type].servers[node.ip].percent_used * 100) <= data.round(data.health[group.type].summary.percent_used * 100)"
															>{{!data.health[group.type].servers[node.ip].percent_used | percent:0}}</div>
													</div>
													<div class="line vertical-block"
														style="width: {{!data.health[group.type].summary.percent_used | percent:0}}"
														ng-if="group.type != 'uninitialized'"></div>
													<div class="bar overflow vertical-block vertical-container"
														ng-class="{
															small: (data.health[group.type].servers[node.ip].percent_used - data.health[group.type].summary.percent_used) < .22
														}"
														style="width: {{!(data.health[group.type].servers[node.ip].percent_used - data.health[group.type].summary.percent_used) | percent:0}}"
														ng-if="data.round(data.health[group.type].servers[node.ip].percent_used * 100) > data.round(data.health[group.type].summary.percent_used * 100)"
														><!--
													--><div class="label right vertical-block">{{!data.health[group.type].servers[node.ip].percent_used | percent:0}}</div>
													</div>
												</div>
												<div class="health vertical-container text-center vertical-block"
													ng-class="{
														'unhealthy': data.size(data.health[group.type].servers[node.ip].unhealthy_devices) != 0
													}"><!--
													--><div class="circle vertical-block"></div>&nbsp;<!--
													--><div class="vertical-block label"
														ng-if="data.size(data.health[group.type].servers[node.ip].unhealthy_devices) == 0">All OK</div><!--
													--><div class="vertical-block label"
														ng-if="data.size(data.health[group.type].servers[node.ip].unhealthy_devices) > 0">{{!::data.size(data.health[group.type].servers[node.ip].unhealthy_devices)}} Unhealthy {{!::'Device' | pluralize:data.size(data.health[group.type].servers[node.ip].unhealthy_devices):0}}</div><!--
												--></div>
											</div>
											<div class="devices">
												<div class="content swift-animate"
													ng-if="click.expanded.type == group.type && click.expanded.idx == $index"
													ng-init="active = 'DEVICES'">
													<div class="tab-set vertical-container"><!--
														--><div class="tab clickable vertical-block"
																ng-show="group.type == 'uninitialized'"
																ng-class="{
																	'active': active == 'TEMPLATES',
																	'clickable': active != 'TEMPLATES',
																}"
																ng-click="active = 'TEMPLATES'">Quick Initialize</div><!--
														--><div class="tab vertical-block"
															ng-class="{
																'active': active == 'SERVICES',
																'clickable': active != 'SERVICES',
															}"
															ng-click="active = 'SERVICES'">Services</div><!--
														--><div class="tab clickable vertical-block"
																ng-class="{
																	'active': active == 'DEVICES',
																	'clickable': active != 'DEVICES',
																}"
																ng-click="active = 'DEVICES'">Devices</div><!--
														--><div></div>
													</div>
													<div class="vertical-container text-center loading" ng-if="node.loading">
														<i class="fa fa-spinner fa-pulse vertical-block"></i>
													</div>
													<div ng-show="!node.loading">
														<div ng-if="active == 'SERVICES'"
															ng-controller="serviceController as service"
															ng-init="service.init(node, group)"
															ng-include="'swift.expansion.service.html'">
														</div>
														<div ng-if="active == 'TEMPLATES'"
															ng-controller="templateController as templates"
															ng-include="'swift.expansion.template.html'">
														</div>
														<div ng-if="active == 'DEVICES'"
															ng-controller="hostController as host"
															ng-init="host.init(node, group)"
															ng-include="'swift.expansion.device.html'">
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>