Newer
Older
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<body>
<nav class="navbar navbar-expand-md bg-primary navbar-dark">
<div class="container">
<a class="navbar-brand" href="index.html"><i class="fa d-inline fa-lg fa-line-chart"></i><b>Monitoring</b></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false"
aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-bookmark-o"></i> My organizations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-envelope-o"></i> Notifications</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="py-5">
<div class="container bg-light py-2">
<div class="row bg-primary my-1">
<div class="col-md-12">
<h3 class="display py-1">Server name</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="list-group">
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<button type="button" class="list-group-item d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#demo">Disks <span class="badge badge-primary badge-pill">1</span></button>
<div id="demo" class="collapse">
<div class="row">
<div class="col-md-6"> Date : 22-02-2018 16h57
<table class="table">
<thead>
<tr>
<th>Filesystem</th>
<th>Size</th>
<th>Used</th>
<th>Free</th>
</tr>
</thead>
<tbody>
<tr>
<td>/dev/sda1</td>
<td>257</td>
<td>0%</td>
<td>257</td>
</tr>
<tr>
<td>tmpfs</td>
<td>3</td>
<td>0%</td>
<td>3</td>
</tr>
<tr>
<td>/dev/sr0</td>
<td>59</td>
<td>0.119%</td>
<td>52</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<img class="img-fluid d-block" src="1519609010-dataset.png"> </div>
</div>
<div class="row">
<div class="col-md-6">
<a class="btn btn-primary text-white">Disk history</a>
</div>
</div>
</div>
<button type="button" class="list-group-item d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#demo2">Network</button>
<div id="demo2" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<div id="demo2" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<button type="button" class="list-group-item d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#demo3">TCP</button>
<div id="demo2" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<button type="button" class="list-group-item d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#demo3">UDP</button>
<div id="demo2" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<button type="button" class="list-group-item d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#demo3">Reboot</button>
<div class="py-5">
<div class="container"> </div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</div>