Skip to content

Commit c9fb721

Browse files
codeperfectpluscodeperfectplus
committed
UI improvement
1 parent 5aef69d commit c9fb721

10 files changed

Lines changed: 88 additions & 61 deletions

File tree

‎app.py‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
import os
55

66
# background thread to monitor system settings changes
7-
print("FLASK_ENV: ", os.getenv('FLASK_ENV'))
8-
# if os.getenv('FLASK_ENV') == 'production':
9-
start_website_monitoring() # Starts pinging active websites
10-
fetch_file_metrics_task()
11-
monitor_settings() # Starts monitoring for system logging changes
7+
# print("FLASK_ENV: ", os.getenv('FLASK_ENV'))
8+
# # if os.getenv('FLASK_ENV') == 'production':
9+
# start_website_monitoring() # Starts pinging active websites
10+
# fetch_file_metrics_task()
11+
# monitor_settings() # Starts monitoring for system logging changes
1212

1313
if __name__ == "__main__":
1414
app.run(host="0.0.0.0", port=5000, debug=True)

‎requirements.txt‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,7 @@ requests==2.32.3
2626
speedtest-cli==2.1.3
2727

2828
# prometheus client for monitoring
29-
prometheus_client==0.20.0
29+
prometheus_client==0.20.0
30+
31+
# influxdb-client==1.46.0
32+
influxdb-client==1.46.0

‎src/static/css/style.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,16 @@ body {
4646
background-position: center center;
4747
}
4848

49+
.content {
50+
margin: 0 auto; /* Center the content */
51+
padding: 1rem 5rem;
52+
background-color: #f9f9f9; /* Light background color */
53+
border-radius: 8px; /* Rounded corners */
54+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
55+
font-family: 'Arial', sans-serif; /* Font family */
56+
line-height: 1.6; /* Improve readability */
57+
}
58+
4959
.header {
5060
background-color: var(--color-dark);
5161
color: var(--color-white);

‎src/static/js/graphs.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
// Variables to store chart instances
22
let cpuTimeChart, memoryTimeChart, batteryTimeChart, networkTimeChart, dashboardMemoryTimeChart, cpuFrequencyTimeChart, currentTempTimeChart;
33

4-
function stringToDate(dateString) {
5-
const date = new Date(dateString);
6-
return date;
7-
}
8-
4+
// Function to fetch data and render charts
95
function fetchDataAndRenderCharts() {
106
// Retrieve stored filter value from local storage or set default value
117
const storedFilterValue = localStorage.getItem('filterValue') || 5;

‎src/templates/base/base.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</head>
1616

1717
<body>{% include 'ext/navbar.html' %}
18-
<div class="container">
18+
<div class="content">
1919
{% block content %}
2020
{% endblock %}
2121
</div>

‎src/templates/ext/footer.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<footer class="text-center mt-4">
1+
<!-- <footer class="text-center mt-4">
22
<p><i class="fas fa-shield-alt"></i>{{title}} Powered by
33
<a href="https://www.python.org/" target="_blank"><i class="fab fa-python"></i> Python</a>,
44
<a href="https://flask.palletsprojects.com/" target="_blank"><i class="fab fa-flask"></i> Flask</a>,
55
<a href="https://getbootstrap.com/" target="_blank"><i class="fab fa-bootstrap"></i> Bootstrap</a>, and
66
<a href="https://fontawesome.com/" target="_blank"><i class="fab fa-font-awesome"></i> FontAwesome</a>.
7-
</p>
7+
</p> -->
88
<!-- <div class="social-icons">
99
<a href="https://github.com/codeperfectplus/SystemDashboard" target="_blank"><i class="fab fa-github"></i></a>
1010
<a href="https://www.linkedin.com/in/deepak-raj-35887386/" target="_blank"><i class="fab fa-linkedin"></i></a>
1111
</div> -->
12-
</footer>
12+
<!-- </footer> -->

‎src/templates/graphs/graphs.html‎

Lines changed: 58 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,12 @@
1111
{% block content %}
1212

1313
<h2 class="page-title"><i class="fas fa-chart-line"></i>
14-
<span class="text-danger m-2"> {{ title }} </span> Metrics</h2>
14+
<span class="text-danger m-2"> {{ title }} </span> Metrics
15+
</h2>
1516
<hr>
1617

1718
<!-- Server Time Section -->
18-
<div class="container">
19+
<div class="">
1920
<div class="section-header d-flex justify-content-between align-items-center">
2021
<h2><i class="fas fa-clock"></i> Current Server Time & Time Zone</h2>
2122
<button id="refreshData" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh Graphs</button>
@@ -26,7 +27,7 @@ <h2><i class="fas fa-clock"></i> Current Server Time & Time Zone</h2>
2627
<hr>
2728

2829
<!-- Time Filter Section -->
29-
<div class="col container">
30+
<div class="col">
3031
<div class="row selector-container">
3132
<div class="time-filter-container">
3233
<label for="timeFilter">Select Time Filter:</label>
@@ -51,65 +52,79 @@ <h2><i class="fas fa-clock"></i> Current Server Time & Time Zone</h2>
5152
</div>
5253
<hr>
5354

54-
<!-- Chart Containers with Buttons Next to Titles -->
55-
<div class="container">
56-
<div class="section-header d-flex justify-content-between align-items-center">
57-
<h2><i class="fas fa-microchip"></i> CPU Usage Over Time</h2>
58-
<button id="refreshCpuTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh CPU Graph</button>
55+
<div class="row">
56+
<div class="cpu-usage col-md-6">
57+
<div class="section-header d-flex justify-content-between align-items-center">
58+
<h2><i class="fas fa-microchip"></i> CPU Usage Over Time</h2>
59+
<button id="refreshCpuTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh CPU
60+
Graph</button>
61+
</div>
62+
<canvas id="cpuTimeChart"></canvas>
5963
</div>
60-
<canvas id="cpuTimeChart"></canvas>
61-
</div>
6264

63-
<div class="container">
64-
<div class="section-header d-flex justify-content-between align-items-center">
65-
<h2><i class="fas fa-memory"></i> Memory Usage Over Time</h2>
66-
<button id="refreshMemoryTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh Memory Graph</button>
65+
<div class="memory-usage col-md-6">
66+
<div class="section-header d-flex justify-content-between align-items-center">
67+
<h2><i class="fas fa-memory"></i> Memory Usage Over Time</h2>
68+
<button id="refreshMemoryTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh Memory
69+
Graph</button>
70+
</div>
71+
<canvas id="memoryTimeChart"></canvas>
6772
</div>
68-
<canvas id="memoryTimeChart"></canvas>
6973
</div>
7074

71-
<div class="container">
72-
<div class="section-header d-flex justify-content-between align-items-center">
73-
<h2><i class="fas fa-battery-half"></i> Battery Percentage Over Time</h2>
74-
<button id="refreshBatteryTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh Battery Graph</button>
75+
<div class="row">
76+
<div class="battery-usage col-md-6">
77+
<div class="section-header d-flex justify-content-between align-items-center">
78+
<h2><i class="fas fa-battery-half"></i> Battery Percentage Over Time</h2>
79+
<button id="refreshBatteryTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh Battery
80+
Graph</button>
81+
</div>
82+
<canvas id="batteryTimeChart"></canvas>
7583
</div>
76-
<canvas id="batteryTimeChart"></canvas>
77-
</div>
7884

79-
<div class="container">
80-
<div class="section-header d-flex justify-content-between align-items-center">
81-
<h2><i class="fas fa-network-wired"></i> Network Sent & Received Over Time</h2>
82-
<button id="refreshNetworkTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh Network Graph</button>
85+
<div class="network-usage col-md-6">
86+
<div class="section-header d-flex justify-content-between align-items-center">
87+
<h2><i class="fas fa-network-wired"></i> Network Sent & Received Over Time</h2>
88+
<button id="refreshNetworkTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh Network
89+
Graph</button>
90+
</div>
91+
<canvas id="networkTimeChart"></canvas>
8392
</div>
84-
<canvas id="networkTimeChart"></canvas>
8593
</div>
8694

87-
<div class="container">
88-
<div class="section-header d-flex justify-content-between align-items-center">
89-
<h2><i class="fas fa-memory"></i> Dashboard Memory Usage Over Time</h2>
90-
<button id="refreshDashboardMemoryTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh Dashboard Memory Graph</button>
95+
<div class="row">
96+
<div class="dashboard-memory-usage col-md-6">
97+
<div class="section-header d-flex justify-content-between align-items-center">
98+
<h2><i class="fas fa-memory"></i>Memory Usage Over Time(APP)</h2>
99+
<button id="refreshDashboardMemoryTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh
100+
Dashboard Memory Graph</button>
101+
</div>
102+
<canvas id="dashboardMemoryTimeChart"></canvas>
91103
</div>
92-
<canvas id="dashboardMemoryTimeChart"></canvas>
93-
</div>
94104

95-
<div class="container">
96-
<div class="section-header d-flex justify-content-between align-items-center">
97-
<h2><i class="fas fa-microchip"></i> CPU Frequency Over Time</h2>
98-
<button id="refreshCpuFrequencyTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh CPU Frequency Graph</button>
105+
<div class="cpu-frequency col-md-6">
106+
<div class="section-header d-flex justify-content-between align-items-center">
107+
<h2><i class="fas fa-microchip"></i> CPU Frequency Over Time</h2>
108+
<button id="refreshCpuFrequencyTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh CPU
109+
Frequency Graph</button>
110+
</div>
111+
<canvas id="cpuFrequencyTimeChart"></canvas>
99112
</div>
100-
<canvas id="cpuFrequencyTimeChart"></canvas>
101113
</div>
102114

103-
<div class="container">
104-
<div class="section-header d-flex justify-content-between align-items-center">
105-
<h2><i class="fas fa-thermometer-half"></i> Current Temperature Over Time</h2>
106-
<button id="refreshCurrentTempTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh Temperature Graph</button>
115+
<div class="row">
116+
<div class="cpu-temperature col-md-6">
117+
<div class="section-header d-flex justify-content-between align-items-center">
118+
<h2><i class="fas fa-thermometer-half"></i> Current Temperature Over Time</h2>
119+
<button id="refreshCurrentTempTime" class="btn btn-primary"><i class="fas fa-sync-alt"></i> Refresh
120+
Temperature Graph</button>
121+
</div>
122+
<canvas id="currentTempTimeChart"></canvas>
107123
</div>
108-
<canvas id="currentTempTimeChart"></canvas>
109124
</div>
110125

111126
{% endblock %}
112127
{% block extra_scripts %}
113128
<script src="{{ url_for('static', filename='js/graphs.js')}}"></script>
114129
<script src="{{ url_for('static', filename='js/boot_time.js')}}"></script>
115-
{% endblock %}
130+
{% endblock %}

‎src/templates/info_pages/cpu_info.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<h2 class="my-4">CPU
99
Details
1010
</h2>
11-
<div class="container mt-4">
11+
<div class="mt-4">
1212
<div class="row">
1313
<div class="col-md-6 col-lg-4 mb-4">
1414
{% include 'card_comp/cpu/frequency.html' %}

‎src/templates/info_pages/process.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<link rel="stylesheet" href="{{ url_for('static', filename='css/process.css') }}">
55
{% endblock %}
66
{% block content %}
7-
<div class="container">
7+
<div class="content">
88
<h1>Top Processes on System</h1>
99

1010
<!-- Display flash messages -->

‎src/templates/settings/control_panel.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,10 @@ <h5 class="card-title"><i class="fas fa-tools"></i> More Utilities</h5>
137137
<a href="{{ url_for('monitor_websites') }}" class="btn btn-primary btn-block">
138138
<i class="fas fa-globe"></i> Ping Website
139139
</a>
140-
140+
<!-- external_monitoring -->
141+
<a href="{{ url_for('external_monitoring') }}" class="btn btn-primary btn-block">
142+
<i class="fas fa-globe"></i> External API Monitoring
143+
</a>
141144
</div>
142145
</div>
143146
</div>

0 commit comments

Comments
 (0)