<!--
This file is part of Linode Manager Classic.

Linode Manager Classic is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Linode Manager Classic is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with Linode Manager Classic.  If not, see <https://www.gnu.org/licenses/>.
-->
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>LMC - Dashboard</title>
		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="dashboard.css" />
		<script src="dashboard.js" type="module"></script>
	</head>
	<body>
		<!--#include virtual="/include/header.html"-->
		<!--#include virtual="/include/linode_subnav.html"-->
		<div id="main-content" class="wrapper">
			<div id="top-links"><a href="/linodes">Linodes</a> » <span id="linode-tag"><a id="linode-tag-link" href=""></a> » </span><span id="linode-label" class="top-links-title"></span></div>
			<div id="upgrade">
				<img src="/img/lv-upgrade.png" alt="upgrade" />
				<h2>A free upgrade is available for this Linode!</h2>
				<p><a href="/linodes/mutate?lid=0">Click here for more information!</a></p>
			</div>
			<div id="notifications"></div>
			<div id="linode-details">
				<table class="lmc-table">
					<thead>
						<tr>
							<td colspan="3">Dashboard</td>
						</tr>
						<tr>
							<td>Select</td>
							<td>Configuration Profiles</td>
							<td>Options</td>
						</tr>
					</thead>
					<tbody id="config-table">
						<tr id="loading-configs" class="lmc-tr3">
							<td></td>
							<td>Loading configuration profiles...</td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<button id="boot" type="button" disabled>Boot</button>
				<button id="reboot" type="button">Reboot</button>
				<p class="sub-links sub-links-inline">
					<a href="/linodes/rebuild?lid=0">Rebuild</a> | <a href="/linodes/deploy?lid=0">Deploy an Image</a> | <a href="/linodes/config?cid=0&lid=0">Create a new Configuration Profile</a>
				</p>
				<table class="lmc-table">
					<thead>
						<tr>
							<td colspan="3">Disks</td>
						</tr>
					</thead>
					<tbody id="disk-table">
						<tr id="loading-disks" class="lmc-tr3">
							<td></td>
							<td>Loading disks...</td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<p class="sub-links"><a href="/linodes/disk?did=0&lid=0">Create a new Disk</a></p>
				<table class="lmc-table">
					<thead>
						<tr>
							<td colspan="3">Volumes</td>
						</tr>
					</thead>
					<tbody id="volume-table">
						<tr id="loading-volumes" class="lmc-tr3">
							<td></td>
							<td>Loading volumes...</td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<p class="sub-links">
					<a href="/volumes">View all Volumes</a> | <a href="/volumes/add?lid=0">Create a new Volume</a>
				</p>
				<table class="lmc-table">
					<thead>
						<tr>
							<td colspan="3">Host Job Queue <a id="moar-jobs" href="#">(more)</a></td>
						</tr>
					</thead>
					<tbody id="event-table">
						<tr id="job-progress-row" class="lmc-tr1">
							<td colspan="3"><progress id="job-progress" max="100" value="0">0%</progress></td>
						</tr>
						<tr id="loading-jobs" class="lmc-tr3">
							<td></td>
							<td>Loading jobs...</td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<h3>Graphs</h3>
				<select disabled id="graph-range">
					<option selected value="">Last 24 Hours</option>
				</select>
				<div class="lmc-graph">
					<h4>CPU (%)</h4>
					<canvas id="cpu-graph"></canvas>
					<table>
						<thead>
							<tr>
								<td></td>
								<td>Max</td>
								<td>Avg</td>
								<td>Last</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><div id="cpu-color" class="lmc-graph-color"></div> CPU %</td>
								<td id="cpu-max"></td>
								<td id="cpu-avg"></td>
								<td id="cpu-last"></td>
							</tr>
						</tbody>
					</table>
					<h4>Disk I/O (blocks/s)</h4>
					<canvas id="io-graph"></canvas>
					<table>
						<thead>
							<tr>
								<td></td>
								<td>Max</td>
								<td>Avg</td>
								<td>Last</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><div id="io-rate-color" class="lmc-graph-color"></div> I/O Rate</td>
								<td id="io-rate-max"></td>
								<td id="io-rate-avg"></td>
								<td id="io-rate-last"></td>
							</tr>
							<tr>
								<td><div id="swap-rate-color" class="lmc-graph-color"></div> Swap Rate</td>
								<td id="swap-rate-max"></td>
								<td id="swap-rate-avg"></td>
								<td id="swap-rate-last"></td>
							</tr>
						</tbody>
					</table>
					<h4>Network - IPv4 (bits/s)</h4>
					<canvas id="ipv4-graph"></canvas>
					<table>
						<thead>
							<tr>
								<td></td>
								<td>Max</td>
								<td>Avg</td>
								<td>Last</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><div id="ipv4-privout-color" class="lmc-graph-color"></div> Private Out</td>
								<td id="ipv4-privout-max"></td>
								<td id="ipv4-privout-avg"></td>
								<td id="ipv4-privout-last"></td>
							</tr>
							<tr>
								<td><div id="ipv4-privin-color" class="lmc-graph-color"></div> Private In</td>
								<td id="ipv4-privin-max"></td>
								<td id="ipv4-privin-avg"></td>
								<td id="ipv4-privin-last"></td>
							</tr>
							<tr>
								<td><div id="ipv4-out-color" class="lmc-graph-color"></div> Public Out</td>
								<td id="ipv4-out-max"></td>
								<td id="ipv4-out-avg"</td>
								<td id="ipv4-out-last"></td>
							</tr>
							<tr>
								<td><div id="ipv4-in-color" class="lmc-graph-color"></div> Public In</td>
								<td id="ipv4-in-max"></td>
								<td id="ipv4-in-avg"></td>
								<td id="ipv4-in-last"></td>
							</tr>
							<tr>
								<td>Total Traffic</td>
								<td>In: <span id="ipv4-total-in"></span></td>
								<td>Out: <span id="ipv4-total-out"></span></td>
								<td>Combined: <span id="ipv4-total"></span></td>
							</tr>
						</tbody>
					</table>
					<h4>Network - IPv6 (bits/s)</h4>
					<canvas id="ipv6-graph"></canvas>
					<table>
						<thead>
							<tr>
								<td></td>
								<td>Max</td>
								<td>Avg</td>
								<td>Last</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><div id="ipv6-privout-color" class="lmc-graph-color"></div> Private Out</td>
								<td id="ipv6-privout-max"></td>
								<td id="ipv6-privout-avg"></td>
								<td id="ipv6-privout-last"></td>
							</tr>
							<tr>
								<td><div id="ipv6-privin-color" class="lmc-graph-color"></div> Private In</td>
								<td id="ipv6-privin-max"></td>
								<td id="ipv6-privin-avg"></td>
								<td id="ipv6-privin-last"></td>
							</tr>
							<tr>
								<td><div id="ipv6-out-color" class="lmc-graph-color"></div> Public Out</td>
								<td id="ipv6-out-max"></td>
								<td id="ipv6-out-avg"</td>
								<td id="ipv6-out-last"></td>
							</tr>
							<tr>
								<td><div id="ipv6-in-color" class="lmc-graph-color"></div> Public In</td>
								<td id="ipv6-in-max"></td>
								<td id="ipv6-in-avg"></td>
								<td id="ipv6-in-last"></td>
							</tr>
							<tr>
								<td>Total Traffic</td>
								<td>In: <span id="ipv6-total-in"></span></td>
								<td>Out: <span id="ipv6-total-out"></span></td>
								<td>Combined: <span id="ipv6-total"></span></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div id="linode-sidebar">
				<div class="sidebar-box">
					<h4>Server Status</h4>
					<p>Your Linode is currently</p>
					<p id="server-status"></p>
					<button id="shut-down" type="button">Shut down</button>
				</div>
				<div class="sidebar-box">
					<h4>Network</h4>
					<ul>
						<li>Transfer/mo: <span id="transfer-monthly"></span></li>
						<li>Used: <span id="transfer-used"></span></li>
						<li>Overage: <span id="transfer-overage"></span></li>
					</ul>
					<p>Monthly transfer usage:</p>
					<meter id="net-usage" max="100" low="50" optimum="30" high="80" value="0"></meter>
				</div>
				<div class="sidebar-box">
					<h4>Storage</h4>
					<ul>
						<li>Total: <span id="storage-total"></span></li>
						<li>Used: <span id="storage-used"></span></li>
						<li>Free: <span id="storage-free"></span></li>
					</ul>
					<p>Storage allocation:</p>
					<meter id="disk-usage" max="100" low="50" optimum="30" high="80" value="0"></meter>
				</div>
				<div class="sidebar-box">
					<h4>Backups</h4>
					<p id="backups"></p>
					<p id="last-backup">Last backup was <span id="last-backup-time"></span></p>
				</div>
			</div>
		</div>
	</body>
</html>