{{define "content"}}
<div class="page-title-box">
	<div class="row align-items-center">
		<div class="col-auto">
			<h2 class="page-title">平台概况</h2>
		</div>
	</div>
</div>
<div class="row row-deck row-cards">
	<div class="col-sm-6 col-lg-3">
		<div class="card card-sm">
			<div class="card-body text-center">
				<div class="d-flex align-items-center mt-auto">
					<div class="bg-green text-white stamp">
						<svg class="icon icon-lg" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor"
							xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd"
								d="M6.887 9.2l-.964-.165A2.5 2.5 0 105.5 14h10a1.5 1.5 0 00.237-2.982l-1.038-.164.216-1.028a4 4 0 10-7.843-1.587l-.185.96zm9.084.341a5 5 0 00-9.88-1.492A3.5 3.5 0 105.5 15h9.999a2.5 2.5 0 00.394-4.968c.033-.16.06-.324.077-.49z"
								clip-rule="evenodd">
							</path>
						</svg>
					</div>
					<div class="ml-3">
						<div class="h1 m-0 text-body text-left">{{.Agents}}</div>
						<small class="text-muted">运行实例</small>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-lg-3">
		<div class="card card-sm">
			<div class="card-body text-center">
				<div class="d-flex align-items-center mt-auto">
					<div class="bg-green text-white stamp">
						<svg class="icon icon-lg" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor"
							xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd"
								d="M7.443 3.991a60.17 60.17 0 00-2.725.802.454.454 0 00-.315.366C3.87 9.056 5.1 11.9 6.567 13.773c.736.94 1.533 1.636 2.197 2.093.333.228.626.394.857.5.116.053.21.089.282.11A.73.73 0 0010 16.5a.774.774 0 00.097-.023c.072-.022.166-.058.282-.111a5.94 5.94 0 00.857-.5 10.198 10.198 0 002.197-2.093C14.9 11.9 16.13 9.056 15.597 5.159a.454.454 0 00-.315-.366c-.626-.2-1.682-.526-2.725-.802C11.491 3.71 10.51 3.5 10 3.5c-.51 0-1.49.21-2.557.491zm-.256-.966C8.23 2.749 9.337 2.5 10 2.5c.662 0 1.77.249 2.813.525 1.066.282 2.14.614 2.772.815.528.168.926.623 1.003 1.184.573 4.197-.756 7.307-2.367 9.365a11.192 11.192 0 01-2.418 2.3 6.942 6.942 0 01-1.007.586c-.27.124-.558.225-.796.225s-.526-.101-.796-.225a6.908 6.908 0 01-1.007-.586 11.192 11.192 0 01-2.418-2.3c-1.611-2.058-2.94-5.168-2.367-9.365A1.454 1.454 0 014.415 3.84a61.105 61.105 0 012.772-.815z"
								clip-rule="evenodd">
							</path>
							<path
								d="M10 4.25c.909 0 3.188.685 4.254 1.022a.94.94 0 01.656.773c.814 6.424-4.13 9.452-4.91 9.452V4.25z">
							</path>
						</svg>
					</div>
					<div class="ml-3">
						<div class="h1 m-0 text-body text-left">{{.Apps}}</div>
						<small class="text-muted">运行应用</small>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-lg-3">
		<div class="card card-sm">
			<div class="card-body text-center">
				<div class="d-flex align-items-center mt-auto">
					<div class="bg-green text-white stamp">
						<svg class="icon icon-lg" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor"
							xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd"
								d="M7 13.5a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9a.5.5 0 01-.5-.5zm0-4a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9a.5.5 0 01-.5-.5zm0-4a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9a.5.5 0 01-.5-.5zm-3 1a1 1 0 100-2 1 1 0 000 2zm0 4a1 1 0 100-2 1 1 0 000 2zm0 4a1 1 0 100-2 1 1 0 000 2z"
								clip-rule="evenodd">
							</path>
						</svg>
					</div>
					<div class="ml-3">
						<div class="h1 m-0 text-body text-left">{{.Jobs}}</div>
						<small class="text-muted">计划任务</small>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-lg-3">
		<div class="card card-sm">
			<div class="card-body text-center">
				<div class="d-flex align-items-center mt-auto">
					<div class="bg-green text-white stamp">
						<svg class="icon icon-lg" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor"
							xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd"
								d="M10 17a6 6 0 100-12 6 6 0 000 12zm0 1a7 7 0 100-14 7 7 0 000 14z"
								clip-rule="evenodd">
							</path>
							<path fill-rule="evenodd"
								d="M10 6.5a.5.5 0 01.5.5v4a.5.5 0 01-.053.224l-1.5 3a.5.5 0 11-.894-.448L9.5 10.882V7a.5.5 0 01.5-.5z"
								clip-rule="evenodd">
							</path>
							<path
								d="M2.86 7.387A2.5 2.5 0 116.387 3.86 8.035 8.035 0 002.86 7.387zM13.613 3.86a2.5 2.5 0 113.527 3.527 8.035 8.035 0 00-3.527-3.527z">
							</path>
							<path fill-rule="evenodd"
								d="M13.646 16.146a.5.5 0 01.708 0l1 1a.5.5 0 01-.708.708l-1-1a.5.5 0 010-.708zm-7.292 0a.5.5 0 00-.708 0l-1 1a.5.5 0 00.708.708l1-1a.5.5 0 000-.708zM7.5 2.5A.5.5 0 018 2h4a.5.5 0 010 1H8a.5.5 0 01-.5-.5z"
								clip-rule="evenodd">
							</path>
							<path d="M9 3h2v2H9V3z">
							</path>
						</svg>
					</div>
					<div class="ml-3">
						<div class="h1 m-0 text-body text-left">{{.Timings}}</div>
						<small class="text-muted">定时任务</small>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="page-title-box">
	<div class="row align-items-center">
		<div class="col-auto">
			<h2 class="page-title">实例概况</h2>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-12">
		<div class="card">
			<div class="card-body">
				<h3 class="card-title">应用</h3>
				<div id="agent-app"></div>
				<h3 class="card-title">计划任务</h3>
				<div id="agent-job"></div>
				<h3 class="card-title">定时任务</h3>
				<div id="agent-timing"></div>
			</div>
		</div>
	</div>
</div>
<div class="page-title-box">
	<div class="row align-items-center">
		<div class="col-auto">
			<h2 class="page-title">分组概况</h2>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-12">
		<div class="card">
			<div class="card-header">
				<h4 class="card-title">分组</h4>
			</div>
			<div class="card-body">
				<h3 class="card-title">应用</h3>
				<div id="group-app"></div>
				<h3 class="card-title">计划任务</h3>
				<div id="group-job"></div>
				<h3 class="card-title">定时任务</h3>
				<div id="group-timing"></div>
			</div>
		</div>
	</div>
</div>
{{end}}
{{define "script"}}
<script type="text/javascript">
	function render_bar(id, name, data, categories) {
		(new ApexCharts(document.getElementById(id), {
			chart: {
				type: "bar",
				fontFamily: 'inherit',
				height: 320,
				parentHeightOffset: 0,
				toolbar: {
					show: false,
				},
				animations: {
					enabled: false
				},
			},
			plotOptions: {
				bar: {
					columnWidth: '50%',
				}
			},
			dataLabels: {
				enabled: false,
			},
			fill: {
				opacity: 1,
			},
			series: [{
				name: name,
				data: data
			}],
			grid: {
				padding: {
					top: -20,
					right: 0,
					left: -4,
					bottom: -8
				},
				strokeDashArray: 4,
			},
			xaxis: {
				labels: {
					padding: 0
				},
				tooltip: {
					enabled: false
				},
				axisBorder: {
					show: false,
				},
				categories: categories,
			},
			yaxis: {
				labels: {
					padding: 4
				},
			},
			colors: ["#206bc4"],
			legend: {
				show: false,
			},
		})).render();
	}
	$(document).ready(function () {
		var agent_list = [
		{{- range .AgentList}}
			{{.}},
        {{- end}}
		];
		var group_list = [
		{{- range .GroupList}}
			{{.}},
        {{- end}}
		];
		var agent_apps = [
		{{- range .AgentApps}}
			{{.}},
        {{- end}}
		];
		var agent_jobs = [
		{{- range .AgentJobs}}
			{{.}},
        {{- end}}
		];
		var agent_timings = [
		{{- range .AgentTimings}}
			{{.}},
        {{- end}}
		];
		var group_apps = [
		{{- range .GroupApps}}
			{{.}},
        {{- end}}
		];
		var group_jobs = [
		{{- range .GroupJobs}}
			{{.}},
        {{- end}}
		];
		var group_timings = [
		{{- range .GroupTimings}}
			{{.}},
        {{- end}}
		];
		render_bar("agent-app", "应用", agent_apps, agent_list);
		render_bar("agent-job", "计划任务", agent_jobs, agent_list);
		render_bar("agent-timing", "定时任务", agent_timings, agent_list);
		render_bar("group-app", "应用", group_apps, group_list);
		render_bar("group-job", "计划任务", group_jobs, group_list);
		render_bar("group-timing", "定时任务", group_timings, group_list);
	});
</script>
{{end}}