Skip to content

Commit ff2a7f8

Browse files
codeperfectpluscodeperfectplus
committed
feat: ✨ new pages added for detialed info
1 parent 658283f commit ff2a7f8

10 files changed

Lines changed: 449 additions & 147 deletions

File tree

‎app.py‎

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
from flask import Flask, render_template
22
import os
3-
import psutil, datetime
3+
import psutil
4+
import datetime
45

56
app = Flask(__name__)
67

78
def get_established_connections():
89
connection = psutil.net_connections()
9-
1010
ipv4_dict = {}
1111
ipv6_dict = {}
1212

@@ -19,6 +19,15 @@ def get_established_connections():
1919

2020
return ipv4_dict, ipv6_dict
2121

22+
def change_up_time_format(uptime):
23+
uptime_seconds = uptime.total_seconds()
24+
days = int(uptime_seconds // (24 * 3600))
25+
uptime_seconds %= (24 * 3600)
26+
hours = int(uptime_seconds // 3600)
27+
uptime_seconds %= 3600
28+
minutes = int(uptime_seconds // 60)
29+
return f"{days} days, {hours} hours, {minutes} minutes"
30+
2231
def get_system_info():
2332
info = {
2433
'username': os.getlogin(),
@@ -32,19 +41,59 @@ def get_system_info():
3241
'network_received': round(psutil.net_io_counters().bytes_recv / (1024 ** 2), 2), # In MB
3342
'process_count': len(psutil.pids()),
3443
'swap_memory': psutil.swap_memory().percent,
35-
'uptime': datetime.datetime.now() - datetime.datetime.fromtimestamp(psutil.boot_time())
44+
'uptime': change_up_time_format(datetime.datetime.now() - datetime.datetime.fromtimestamp(psutil.boot_time()))
3645
}
3746

3847
ipv4_conn, ipv6_conn = get_established_connections()
3948
info['ipv4_connections'] = ipv4_conn
4049
info['ipv6_connections'] = ipv6_conn
4150
return info
4251

43-
4452
@app.route('/')
4553
def dashboard():
4654
system_info = get_system_info()
4755
return render_template('dashboard.html', system_info=system_info)
4856

57+
@app.route('/cpu_usage')
58+
def cpu_usage():
59+
# Detailed CPU usage stats
60+
cpu_usage = psutil.cpu_percent(interval=1, percpu=True)
61+
return render_template('cpu_usage.html', cpu_usage=cpu_usage)
62+
63+
@app.route('/memory_usage')
64+
def memory_usage():
65+
memory_info = {
66+
'memory_percent': psutil.virtual_memory().percent,
67+
'memory_available': round(psutil.virtual_memory().available / (1024 ** 3), 2), # In GB
68+
'memory_used': round(psutil.virtual_memory().used / (1024 ** 3), 2) # In GB
69+
}
70+
return render_template('memory_usage.html', memory_info=memory_info)
71+
72+
@app.route('/disk_usage')
73+
def disk_usage():
74+
disk_info = {
75+
'disk_usage': psutil.disk_usage('/').percent,
76+
'disk_total': round(psutil.disk_usage('/').total / (1024 ** 3), 2), # In GB
77+
'disk_used': round(psutil.disk_usage('/').used / (1024 ** 3), 2), # In GB
78+
'disk_free': round(psutil.disk_usage('/').free / (1024 ** 3), 2) # In GB
79+
}
80+
return render_template('disk_usage.html', disk_info=disk_info)
81+
82+
@app.route('/network_stats')
83+
def network_stats():
84+
net_io = psutil.net_io_counters()
85+
network_info = {
86+
'network_sent': round(net_io.bytes_sent / (1024 ** 2), 2), # In MB
87+
'network_received': round(net_io.bytes_recv / (1024 ** 2), 2) # In MB
88+
}
89+
return render_template('network_stats.html', network_info=network_info)
90+
91+
@app.route('/system_health')
92+
def system_health():
93+
# Reuse system_info function for summary
94+
system_info = get_system_info()
95+
return render_template('system_health.html', system_info=system_info)
96+
97+
4998
if __name__ == '__main__':
5099
app.run(host='0.0.0.0', port=5000, debug=True)

‎static/css/style.css‎

Lines changed: 55 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,83 @@
1-
/* General Body Styles */
1+
/* General Styles */
22
body {
3-
font-family: 'Poppins', sans-serif;
4-
background-color: #f0f2f5;
3+
font-family: 'Arial', sans-serif;
54
color: #333;
6-
margin: 0;
7-
padding: 0;
8-
line-height: 1.6;
5+
background-color: #f8f9fa;
96
}
107

11-
/* Header Styles */
128
.header {
13-
background: linear-gradient(45deg, #00b4d8, #48cae4);
14-
color: #fff;
15-
padding: 60px 0;
16-
margin-bottom: 30px;
17-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
9+
background-color: #343a40;
10+
color: #ffffff;
11+
padding: 1.5rem;
12+
border-radius: 0.5rem;
13+
margin-bottom: 1.5rem;
1814
}
1915

2016
.header h1 {
21-
font-size: 3rem;
22-
font-weight: 700;
17+
margin: 0;
18+
font-size: 2.5rem;
19+
}
20+
21+
/* Navbar Styles */
22+
.navbar {
23+
background-color: #007bff; /* Bright blue background color */
24+
}
25+
26+
.navbar-brand {
27+
font-size: 1.5rem;
28+
color: #1a1414; /* White text color */
29+
}
30+
31+
.navbar-nav .nav-link {
32+
color: #000000; /* White text color */
33+
}
34+
35+
.navbar-nav .nav-link:hover {
36+
color: #f8f9fa; /* Light text color on hover */
37+
background-color: #0056b3; /* Darker blue background on hover */
38+
border-radius: 0.25rem;
39+
}
40+
41+
.navbar-toggler {
42+
border-color: #ffffff; /* White border for toggler */
43+
}
44+
45+
.navbar-toggler-icon {
46+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
2347
}
2448

25-
/* Card Styles */
2649
.card {
27-
background: linear-gradient(135deg, #ffffff, #e0e0e0);
28-
border-radius: 10px;
29-
border: none;
30-
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
31-
transition: transform 0.3s ease, box-shadow 0.3s ease;
50+
min-height: 150px; /* Ensures consistent card height */
3251
}
3352

34-
.card:hover {
35-
transform: translateY(-8px);
36-
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
53+
.card-body {
54+
display: flex;
55+
flex-direction: column;
56+
justify-content: center;
57+
align-items: center; /* Center-aligns the content */
3758
}
3859

3960
.card-title {
40-
font-size: 1.5rem;
41-
font-weight: 600;
42-
color: #00b4d8;
61+
font-size: 1.25rem; /* Adjusts font size for titles */
4362
}
4463

4564
.card-text {
46-
font-size: 1.25rem;
47-
color: #495057;
65+
font-size: 1.125rem; /* Adjusts font size for text */
4866
}
4967

50-
/* Responsive Design */
51-
@media (max-width: 768px) {
52-
.header h1 {
53-
font-size: 2.5rem;
54-
}
68+
.btn-primary {
69+
margin-top: 1rem; /* Adds space above buttons */
70+
}
5571

56-
.card {
57-
margin-bottom: 20px;
72+
/* Responsive Styles */
73+
@media (max-width: 767.98px) {
74+
.navbar-nav .nav-link {
75+
padding-right: 0.5rem;
76+
padding-left: 0.5rem;
5877
}
5978
}
6079

80+
6181
/* Battery Card Styles */
6282
.battery-card {
6383
background: linear-gradient(135deg, #ffffff, #e0e0e0);

‎static/js/cpu_usage.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
document.addEventListener('DOMContentLoaded', function() {
2+
const ctx = document.getElementById('cpuUsageChart').getContext('2d');
3+
const cpuUsageChart = new Chart(ctx, {
4+
type: 'bar',
5+
data: {
6+
labels: Array.from({length: {{ cpu_usage|length }}}, (_, i) => `Core ${i}`),
7+
datasets: [{
8+
label: 'CPU Usage (%)',
9+
data: {{ cpu_usage|tojson }},
10+
backgroundColor: 'rgba(54, 162, 235, 0.2)',
11+
borderColor: 'rgba(54, 162, 235, 1)',
12+
borderWidth: 1
13+
}]
14+
},
15+
options: {
16+
scales: {
17+
y: {
18+
beginAtZero: true
19+
}
20+
}
21+
}
22+
});
23+
});

‎templates/base.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>{% block title %}Server Dashboard{% endblock %}</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9+
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
10+
{% block extra_head %}{% endblock %}
11+
</head>
12+
<body>
13+
<header class="header py-5 text-center">
14+
<h1 class="display-4">Server Dashboard</h1>
15+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
16+
<a class="navbar-brand" href="{{ url_for('dashboard') }}">Home</a>
17+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
18+
<span class="navbar-toggler-icon"></span>
19+
</button>
20+
<div class="collapse navbar-collapse" id="navbarNav">
21+
<ul class="navbar-nav">
22+
<li class="nav-item">
23+
<a class="nav-link" href="{{ url_for('cpu_usage') }}">CPU Usage</a>
24+
</li>
25+
<li class="nav-item">
26+
<a class="nav-link" href="{{ url_for('memory_usage') }}">Memory Usage</a>
27+
</li>
28+
<li class="nav-item">
29+
<a class="nav-link" href="{{ url_for('disk_usage') }}">Disk Usage</a>
30+
</li>
31+
<li class="nav-item">
32+
<a class="nav-link" href="{{ url_for('network_stats') }}">Network Stats</a>
33+
</li>
34+
<li class="nav-item">
35+
<a class="nav-link" href="{{ url_for('system_health') }}">System Health</a>
36+
</li>
37+
</ul>
38+
</div>
39+
</nav>
40+
</header>
41+
<div class="container mt-5">
42+
{% block content %}{% endblock %}
43+
</div>
44+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
45+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
46+
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
47+
{% block extra_scripts %}{% endblock %}
48+
</body>
49+
</html>

‎templates/cpu_usage.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{% extends 'base.html' %}
2+
3+
{% block title %}CPU Usage Details{% endblock %}
4+
5+
{% block content %}
6+
<h2 class="my-4">CPU Usage Details</h2>
7+
<canvas id="cpuUsageChart" width="400" height="200"></canvas>
8+
9+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10+
<script>
11+
document.addEventListener('DOMContentLoaded', function() {
12+
const ctx = document.getElementById('cpuUsageChart').getContext('2d');
13+
const cpuUsageChart = new Chart(ctx, {
14+
type: 'bar',
15+
data: {
16+
labels: Array.from({length: {{ cpu_usage|length }}}, (_, i) => `Core ${i}`),
17+
datasets: [{
18+
label: 'CPU Usage (%)',
19+
data: {{ cpu_usage|tojson }},
20+
backgroundColor: 'rgba(54, 162, 235, 0.2)',
21+
borderColor: 'rgba(54, 162, 235, 1)',
22+
borderWidth: 1
23+
}]
24+
},
25+
options: {
26+
scales: {
27+
y: {
28+
beginAtZero: true
29+
}
30+
}
31+
}
32+
});
33+
});
34+
</script>
35+
{% endblock %}

0 commit comments

Comments
 (0)