chore; chart improved, prometheus basic auth changed to flask login

Author: codeperfectplus

src/docs/README.md

@@ -2,7 +2,7 @@
 
 ## Home Page
 
-![screenshot_002](/src/static/images/screenshot_002.png)
+![screenshot_002](/src/static/images/screenshot_009.png)
 
 ## Cpu Info
 

src/docs/Release.md

@@ -1,13 +1,25 @@
 # Release Notes: SystemGuard
 
+## SystemGuard v1.0.5 Stable Release
+
+- Version: v1.0.5
+- Release Date: 
+- Status: Testing
+
+### Key Features
+
+All the features of the previous pre-release version are included in this stable release with additional improvements and bug fixes.
+
 ## SystemGuard v1.0.5 Pre Release
 
 - Version: v1.0.5-pre
-- Release Date: September 20, 2024
-- Status: In Development
+- Release Date: September 24, 2024
+- Status: Released
 
 ### Key Features
 
+- **Prometheus Integration:** Added Prometheus support for advanced monitoring capabilities.
+- **Central Monitoring:** Centralized monitoring of multiple servers from a single dashboard.
 - **Admin Privileges:** Improved User/Admin roles for better access control.
 - **User Settings:** Added some basic user settings for user customization.
 - **UI Enhancements:** Improved control panel UI for better user experience.

src/routes/prometheus.py

@@ -3,9 +3,10 @@
 import os
 import yaml
 from collections import OrderedDict
+from werkzeug.security import check_password_hash
 
 from src.config import app, db
-from src.models import ExternalMonitornig
+from src.models import ExternalMonitornig, UserProfile
 from src.utils import ROOT_DIR
 from src.routes.helper.common_helper import admin_required
 from src.routes.helper.prometheus_helper import (
@@ -21,15 +22,16 @@
 # Define the Prometheus Blueprint
 prometheus_bp = Blueprint('prometheus', __name__)
 
-# todo, find a better way to store the username and password
-username = 'prometheus_admin'
-password = 'prometheus_password'
+def verify_user(username, password):
+    user = UserProfile.query.filter_by(username=username).first()
+    if user and check_password_hash(user.password, password):
+        return True
 
 # Define a route to serve Prometheus metrics
 @app.route('/metrics')
 def metrics():
     auth = request.authorization
-    if not auth or not (auth.username == username and auth.password == password):
+    if not verify_user(auth.username, auth.password):
         return Response('Could not verify', 401, {'WWW-Authenticate': 'Basic realm="Login required"'})
     output = generate_latest()
     output = '\n'.join([line for line in output.decode().split('\n') if not line.startswith('#') and line])

src/scripts/prometheus.sh

@@ -28,6 +28,9 @@ FLASK_APP_IP=$(hostname -I | cut -d' ' -f1)
 FLASK_APP_PORT="5050"
 SCRAPING_INTERVAL="10s"
 monitor='systemguard-metrics'
+# fetch the prometheus username and password from the .env file
+prometheus_username='prometheus_admin'
+prometheus_password='prometheus_password'
 
 # Logging function for better readability
 log() {
@@ -55,8 +58,8 @@ scrape_configs:
     - targets:
       - '$FLASK_APP_IP:$FLASK_APP_PORT'
     basic_auth:
-      username: prometheus_admin
-      password: prometheus_password
+      username: $prometheus_username
+      password: $prometheus_password
 
 EOL
 

src/static/images/screenshot_009.png

@@ -1,8 +1,7 @@
 const maxDataPoints = 500;  // Number of data points to show on the chart
 
 // Generalized function to create and update a line chart
-function createLineChart(canvasId, label, dataStorage, updateFunc) {
-    console.log(dataStorage);
+function createLineChart(canvasId, label, dataStorage, borderColor, updateFunc) {
     const ctx = document.getElementById(canvasId).getContext('2d');
     const chart = new Chart(ctx, {
         type: 'line',
@@ -11,7 +10,7 @@ function createLineChart(canvasId, label, dataStorage, updateFunc) {
             datasets: [{
                 label: label,
                 data: dataStorage,
-                borderColor: 'red',
+                borderColor: borderColor,
                 borderWidth: 2,
                 fill: true,
                 opacity: 0.5,
@@ -57,7 +56,7 @@ function createLineChart(canvasId, label, dataStorage, updateFunc) {
     // Set interval to fetch and update data every 2 seconds
     setInterval(() => {
         const newUsage = updateFunc();  // Call the update function to get the current usage
-        console.log(`${label} Usage:`, newUsage);
+        // console.log(`${label} Usage:`, newUsage);
         updateChart(newUsage);
     }, 300);
 }

src/static/js/cardChart.js

@@ -6,7 +6,7 @@
             <h5 class="card-title mb-3">CPU Temperature <i class="fas fa-microchip"></i></h5>
             <p class="card-text fs-4 temp-value">{{ system_info['current_temp'] }} &deg;C</p>
             <div class="temp-indicator mt-2">
-                <div class="temp-bar" style="width: {{ system_info['current_temp'] }}%;"></div>
+                <div id="temp-bar" class="temp-bar" style="width: {{ system_info['current_temp'] }}%;"></div>
             </div>
             <canvas id="cpuTempLineChart" height="30"></canvas>
         </div>
@@ -17,7 +17,7 @@ <h5 class="card-title mb-3">CPU Temperature <i class="fas fa-microchip"></i></h5
 <script>
     // Initialize CPU Usage Chart
     const cpuTempData = [];
-    createLineChart('cpuTempLineChart', '', cpuTempData, () => {
+    createLineChart('cpuTempLineChart', '', cpuTempData, 'red', () => {
         return parseFloat(document.querySelector('.temp-value').textContent);
     });
 </script>

src/templates/card_comp/cpu/current_temp.html

@@ -20,7 +20,7 @@ <h5 class="card-title mb-3">CPU Frequency <i class="fas fa-microchip"></i></h5>
 <script>
     // Initialize CPU Usage Chart
     const cpuFrequencyData = [];
-    createLineChart('cpuFrequencyLineChart', 'frequency', cpuFrequencyData, () => {
+    createLineChart('cpuFrequencyLineChart', 'frequency', cpuFrequencyData, 'red', () => {
         return 100 * parseFloat(document.querySelector('.frequency-value').textContent) / {{ system_info['cpu_max_frequency'] }};
     });
 </script>

src/templates/card_comp/cpu/frequency.html

@@ -17,7 +17,7 @@ <h5 class="card-title mb-3">CPU Usage <i class="fas fa-microchip"></i></h5>
 <script>
 // Initialize CPU Usage Chart
 const cpuUsageData = [];
-createLineChart('cpuUsageLineChart', '', cpuUsageData, () => {
+createLineChart('cpuUsageLineChart', '', cpuUsageData, 'red', () => {
     return parseFloat(document.querySelector('.cpu-usage-value').textContent);
 });
 </script>

src/templates/card_comp/cpu/usages.html

@@ -17,7 +17,7 @@ <h5 class="card-title mb-3">Disk Usage <i class="fas fa-hdd"></i></h5>
 <script>
     // Initialize CPU Usage Chart
     const diskUsageData = [];
-    createLineChart('diskUsageLineChart', '', diskUsageData, () => {
+    createLineChart('diskUsageLineChart', '', diskUsageData, 'red', () => {
         return parseFloat(document.querySelector('.disk-usage-value').textContent);
     });
 </script>

src/templates/card_comp/disk/usage.html

@@ -19,7 +19,7 @@ <h5 class="card-title mb-3">Memory Usage <i class="fas fa-memory"></i></h5>
 <script>
     // Initialize CPU Usage Chart
     const memoryUsageData = [];
-    createLineChart('memoryUsageLineChart', '', memoryUsageData, () => {
+    createLineChart('memoryUsageLineChart', '', memoryUsageData, 'red', () => {
         return parseFloat(document.querySelector('.memory-usage-value').textContent);
     });
 </script>