UI improvements

Author: codeperfectplus

src/routes/prometheus.py

@@ -61,10 +61,9 @@ def delete_file_path(id):
     flash('File path deleted successfully!', 'success')
     return redirect(url_for('external_monitoring'))
 
-@app.route('/targets')
-def targets():
+@app.route('/configure_targets')
+def configure_targets():
     update_prometheus_config()
-    # update_prometheus_container()
     targets_info = show_targets()
     return render_template('other/targets.html', targets_info=targets_info)
 
@@ -73,7 +72,7 @@ def restart_prometheus():
     update_prometheus_config
     update_prometheus_container()
     flash('Prometheus container restarted successfully!', 'success')
-    return redirect(url_for('dashboard_network'))
+    return redirect(url_for('configure_targets'))
 
 @app.route('/targets/add_target', methods=['POST'])
 def add_target():
@@ -85,7 +84,7 @@ def add_target():
     # new target should be <ip>:<port> check if it is in the correct format
     if ':' not in new_target:
         flash('Invalid target format. It should be in the format <ip>:<port>.', 'danger')
-        return redirect(url_for('dashboard_network'))
+        return redirect(url_for('configure_targets'))
 
     for scrape_config in config['scrape_configs']:
         if scrape_config['job_name'] == job_name:
@@ -101,8 +100,8 @@ def add_target():
 
     save_yaml(config, prometheus_yml_path)
     flash('Target added successfully!', 'success')
-    update_prometheus_container()
-    return redirect(url_for('dashboard_network'))
+    # update_prometheus_container()
+    return redirect(url_for('configure_targets'))
 
 @app.route('/targets/remove_target', methods=['POST'])
 def remove_target():
@@ -128,8 +127,8 @@ def remove_target():
         flash(f'Job {job_name} not found.', 'warning')
 
     save_yaml(config, prometheus_yml_path)
-    update_prometheus_container()
-    return redirect(url_for('dashboard_network'))
+    # update_prometheus_container()
+    return redirect(url_for('configure_targets'))
 
 @app.route('/targets/change_interval', methods=['POST'])
 def change_interval():
@@ -144,5 +143,5 @@ def change_interval():
             break
 
     save_yaml(config, prometheus_yml_path)
-    update_prometheus_container()
-    return redirect(url_for('targets'))
+    # update_prometheus_container()
+    return redirect(url_for('configure_targets'))

src/static/css/targets.css

@@ -1,66 +1,120 @@
-
-
-/* body {
-    font-family: 'Arial', sans-serif;
-    background-color: #f4f4f9;
-    color: #333;
-    line-height: 1.6;
+/* General page styles */
+.container {
+    max-width: 1200px;
+    margin: 20px auto;
     padding: 20px;
-} */
+    background-color: #f4f6f9;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
 
 h1, h2 {
-    color: #4a4a4a;
+    font-family: 'Roboto', sans-serif;
+    color: #333;
     margin-bottom: 20px;
+    text-align: center;
 }
 
-table {
+.section {
+    margin-top: 30px;
+    text-align: center;
+}
+
+/* Table styles */
+.table-wrapper {
+    overflow-x: auto;
+}
+
+.modern-table {
     width: 100%;
     border-collapse: collapse;
-    margin-bottom: 20px;
+    font-family: 'Roboto', sans-serif;
 }
 
-th, td {
-    padding: 12px;
+.modern-table th, .modern-table td {
+    padding: 12px 15px;
     text-align: left;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid #ddd;
 }
 
-th {
+.modern-table th {
     background-color: #007bff;
-    color: white;
+    color: #fff;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+
+.modern-table tr:nth-child(even) {
+    background-color: #f9f9f9;
 }
 
-tr:hover {
+.modern-table tr:hover {
     background-color: #f1f1f1;
 }
 
-form {
+.target-list {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+.target-list li {
+    margin-bottom: 8px;
+}
+
+/* Form styles */
+form.inline-form {
     display: inline;
 }
 
-input[type="text"], input[type="submit"] {
-    padding: 10px;
+.input-field {
+    padding: 8px;
     margin: 5px;
     border: 1px solid #ccc;
     border-radius: 4px;
-    transition: border 0.3s ease;
+    width: 200px;
 }
 
-input[type="text"]:focus {
-    border: 1px solid #007bff;
+.input-field:focus {
+    border-color: #007bff;
     outline: none;
+    transition: border 0.2s;
 }
 
-input[type="submit"] {
-    background-color: #007bff;
+/* Button styles */
+.btn-primary, .btn-danger, .btn-warning {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
     color: white;
     cursor: pointer;
+    transition: background-color 0.3s ease;
 }
 
-input[type="submit"]:hover {
+.btn-primary {
+    background-color: #007bff;
+}
+
+.btn-primary:hover {
     background-color: #0056b3;
 }
 
+.btn-danger {
+    background-color: #dc3545;
+}
+
+.btn-danger:hover {
+    background-color: #c82333;
+}
+
+.btn-warning {
+    background-color: #ffc107;
+}
+
+.btn-warning:hover {
+    background-color: #e0a800;
+}
+
+/* Messages */
 .flash {
     padding: 10px;
     margin: 10px 0;
@@ -76,3 +130,18 @@ input[type="submit"]:hover {
     background-color: #f8d7da;
     color: #721c24;
 }
+
+/* Add New Target Form */
+.add-target-form {
+    margin: 0 auto;
+    max-width: 600px;
+    text-align: center;
+}
+
+.add-target-form .input-field {
+    width: 70%;
+}
+
+.add-target-form input[type="submit"] {
+    width: 150px;
+}

src/static/js/targets.js

@@ -73,25 +73,22 @@ async function fetchTargetData() {
                 jobNameInput.value = target.labels.job;
                 removeForm.appendChild(jobNameInput);
 
-                const targetToRemoveInput = document.createElement('input');
-                targetToRemoveInput.type = 'hidden';
-                targetToRemoveInput.name = 'target_to_remove';
-                targetToRemoveInput.value = target.labels.instance;
-                removeForm.appendChild(targetToRemoveInput);
-
-                const submitButton = document.createElement('input');
-                submitButton.type = 'submit';
-                submitButton.value = 'Remove';
-                submitButton.onclick = function () {
-                    return confirm('Are you sure you want to remove this target?');
-                };
-                removeForm.appendChild(submitButton);
-
-                removeCell.appendChild(removeForm);
-                row.appendChild(removeCell);
-
-                // Append the row to the table body
-                targetTableBody.appendChild(row);
+                // const targetToRemoveInput = document.createElement('input');
+                // targetToRemoveInput.type = 'hidden';
+                // targetToRemoveInput.name = 'target_to_remove';
+                // targetToRemoveInput.value = target.labels.instance;
+                // removeForm.appendChild(targetToRemoveInput);
+
+                // const submitButton = document.createElement('input');
+                // submitButton.type = 'submit';
+                // submitButton.value = 'Remove';
+                // submitButton.onclick = function () {
+                //     return confirm('Are you sure you want to remove this target?');
+                // };
+                // removeForm.appendChild(submitButton);
+
+                // removeCell.appendChild(removeForm);
+                // row.appendChild(removeCell);
 
                 // Append the row to the table body
                 targetTableBody.appendChild(row);

src/templates/network/dashboard_network.html

@@ -20,7 +20,6 @@ <h1>SystemGuard Active Targets</h1>
                 <th>Scrape Duration (s)</th>
                 <th>Scrape Interval</th>
                 <th>Go to Dashboard</th>
-                <th>Remove Target</th>
             </tr>
         </thead>
         <tbody id="target-table-body">
@@ -29,8 +28,7 @@ <h1>SystemGuard Active Targets</h1>
     </table>
 </div>
 
-
-<div class="text-center">
+<!-- <div class="text-center">
     <h2>Restart Prometheus Docker Service</h2>
     <form action="{{ url_for('restart_prometheus') }}">
         <input type="submit" value="Restart Prometheus">
@@ -40,12 +38,11 @@ <h2>Restart Prometheus Docker Service</h2>
 <div class="text-center">
     <h2>Add New Target</h2>
     <form action="{{ url_for('add_target') }}" method="post">
-        <input type="text" name="job_name" placeholder="Job Name" required>
         <input type="text" name="new_target" placeholder="New Instance" required>
         <input type="text" name="scrape_interval" placeholder="Scrape Interval" required>
         <input type="submit" value="Add Target">
     </form>
-</div>
+</div> -->
 {% endblock %}
 {% block extra_scripts %}
 <script src="{{ url_for('static', filename='js/targets.js') }}"></script>