-
Notifications
You must be signed in to change notification settings - Fork 0
/
alerts.html
139 lines (111 loc) · 3.77 KB
/
alerts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Monitoring Dashboard | Panopta </title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/icons.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<div class="proto-wrap">
<div class="app-wrapper">
<header>
<nav>
<div class="header-nav">
<!-- Page Specific back arrow on internal, blank on home -->
<div class="backArrow float-l">
<a href="#" rel="prev"><i class="icon icon-arrow-left"> </i></a>
</div>
<!-- End Back Arrow -->
<div class="logo">
<img src="assets/images/logo.svg" alt="Panopta Logo">
</div>
<div class="settings float-r">
<a href="#"><i class="icon icon-cog"></i></a>
</div>
</div>
</nav>
</header>
<main id="alerts">
<div class="container">
<!-- If No Alerts -->
<!-- <div class="no-alerts">
<h2>A-Okay</h2>
<p>You have no active alerts!</p>
</div> -->
<!-- End No Alerts -->
<!-- If Alerts -->
<!-- <h2 class="page-title"></h2>
-->
<a href="#">
<!--link to page for associated server -->
<div class="alert-box outage">
<div class="swipeTab"><div class="arrow"></div></div>
<h3 class="nickName">Mike's Portfolio Server <span class="ipAddress">(173.236.192.30)</span></h3>
<div class="alert-meta">
<span class="alertType icon icon-warning">Outage</span>
<span class="sep"> - </span>
<span class="duration">11 hours 47 minutes ago</span>
</div>
</div>
</a>
<a href="#">
<!--link to page for associated server -->
<div class="alert-box critical">
<div class="swipeTab"><div class="arrow"></div></div>
<!--
Critical warnings are when resources being monitored
(e.g. memory, CPU load) pass a manually set threshold. For
reference there is one set on my account for when more than
2000kb of RAM is being used for a duration of longer than 5min.
-->
<h3 class="nickName">Mike's Portfolio Server <span class="ipAddress">(173.236.192.30)</span></h3>
<div class="alert-meta">
<span class="alertType icon icon-warning">Critical Warning</span>
<span class="sep"> - </span>
<span class="duration">11 hours 47 minutes ago</span>
</div>
</div>
</a>
<a href="#">
<!--link to page for associated server -->
<div class="alert-box warning">
<div class="swipeTab"><div class="arrow"></div></div>
<!--
Warnings are when resources being monitored
(e.g. memory, CPU load) pass a manually set threshold. For
reference there is one set on my account for when more than
1000kb of RAM is being used for a duration of longer than 5min.
-->
<h3>Mike's Portfolio Server</h3>
<div class="alert-meta">
<span class="alertType icon icon-warning">Warning</span>
<span class="sep"> - </span>
<span class="duration">11 hours 47 minutes ago</span>
</div>
</div>
</a>
<!-- End If Alerts -->
</div>
</main>
<footer>
<nav class="row footer-wrap">
<div class="footer-nav">
<div class="alerts">
<a href="#"><i class="icon icon-warning"></i></a>
</div>
<div class="servers">
<a href="#"><i class="icon icon-folder"></i></a>
</div>
<div class="notifications">
<a href="#"><i class="icon icon-clock"></i></a>
</div>
</div>
</nav>
</footer>
</div><!-- End App Wrapper -->
</div>
</body>
</html>