Skip to content

Commit 568a5b1

Browse files
codeperfectpluscodeperfectplus
committed
Improved the UI
1 parent 7b078bf commit 568a5b1

5 files changed

Lines changed: 135 additions & 43 deletions

File tree

‎src/routes/prometheus.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ def add_target():
8787
save_yaml(config, prometheus_yml_path)
8888
flash('Target added successfully!', 'success')
8989
update_prometheus_container()
90-
return redirect(url_for('targets'))
90+
return redirect(url_for('dashboard_network'))
9191

9292
@app.route('/targets/remove_target', methods=['POST'])
9393
def remove_target():
@@ -114,7 +114,7 @@ def remove_target():
114114

115115
save_yaml(config, prometheus_yml_path)
116116
update_prometheus_container()
117-
return redirect(url_for('targets'))
117+
return redirect(url_for('dashboard_network'))
118118

119119
@app.route('/targets/change_interval', methods=['POST'])
120120
def change_interval():

‎src/scripts/prometheus.sh‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ log "Generating prometheus.yml configuration file."
4444
cat > "$PROMETHEUS_CONFIG_FILE" <<EOL
4545
scrape_configs:
4646
- job_name: $JOB_NAME
47+
scrape_interval: $SCRAPING_INTERVAL
4748
static_configs:
4849
- targets:
4950
- '$FLASK_APP_IP:$FLASK_APP_PORT'

‎src/static/css/dashboard_network.css‎

Lines changed: 56 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,40 @@
11

22

3-
.container {
4-
max-width: 1200px;
5-
margin-top: 20px;
6-
}
7-
83
h1 {
94
text-align: center;
10-
color: #333;
11-
}
12-
13-
.target-table {
14-
margin-top: 20px;
5+
color: #2c3e50;
6+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
7+
margin-bottom: 20px;
158
}
169

1710
table {
1811
width: 100%;
1912
border-collapse: collapse;
2013
margin-bottom: 20px;
14+
background-color: white;
2115
}
2216

2317
table th, table td {
24-
padding: 12px;
25-
border: 1px solid #ddd;
18+
padding: 15px;
19+
border: 1px solid #e1e4e8;
2620
text-align: left;
21+
font-family: 'Arial', sans-serif;
2722
}
2823

2924
table th {
30-
background-color: #3f51b5;
25+
background-color: #007bff;
3126
color: white;
27+
font-weight: bold;
28+
text-transform: uppercase;
3229
}
3330

34-
table tr:nth-child(even) {
35-
background-color: #f9f9f9;
31+
table tr:hover {
32+
background-color: #f1f1f1;
33+
}
34+
35+
table td {
36+
font-size: 14px;
37+
color: #333;
3638
}
3739

3840
table td.health-up {
@@ -48,10 +50,48 @@ table td.health-down {
4850
.error-message {
4951
color: red;
5052
font-style: italic;
53+
text-align: center;
54+
}
55+
56+
.text-center {
57+
text-align: center;
58+
margin-top: 30px;
59+
}
60+
61+
.text-center h2 {
62+
color: #2c3e50;
63+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
64+
margin-bottom: 20px;
65+
}
66+
67+
form input[type="text"] {
68+
padding: 10px;
69+
margin: 5px;
70+
width: 200px;
71+
border: 1px solid #ced4da;
72+
border-radius: 4px;
73+
font-size: 14px;
5174
}
5275

53-
.footer {
76+
form input[type="submit"] {
77+
padding: 10px 20px;
78+
background-color: #28a745;
79+
color: white;
80+
border: none;
81+
border-radius: 4px;
82+
font-size: 14px;
83+
cursor: pointer;
84+
transition: background-color 0.3s ease;
85+
}
86+
87+
form input[type="submit"]:hover {
88+
background-color: #218838;
89+
}
90+
91+
footer {
5492
text-align: center;
93+
margin-top: 20px;
5594
color: #666;
5695
font-size: 12px;
5796
}
97+

‎src/static/js/targets.js‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ async function fetchTargetData() {
1111
data.active_targets.forEach(target => {
1212
const row = document.createElement('tr');
1313

14-
const instanceCell = document.createElement('td');
15-
instanceCell.textContent = target.labels.instance;
16-
row.appendChild(instanceCell);
17-
1814
const jobCell = document.createElement('td');
1915
jobCell.textContent = target.labels.job;
2016
row.appendChild(jobCell);
2117

18+
const instanceCell = document.createElement('td');
19+
instanceCell.textContent = target.labels.instance;
20+
row.appendChild(instanceCell);
21+
2222
const healthCell = document.createElement('td');
2323
healthCell.textContent = target.health;
2424
healthCell.className = target.health === 'up' ? 'health-up' : 'health-down';
@@ -40,6 +40,11 @@ async function fetchTargetData() {
4040
scrapeDurationCell.textContent = target.lastScrapeDuration.toFixed(3);
4141
row.appendChild(scrapeDurationCell);
4242

43+
// __scrape_interval__
44+
const scrapeIntervalCell = document.createElement('td');
45+
scrapeIntervalCell.textContent = target.discoveredLabels.__scrape_interval__;
46+
row.appendChild(scrapeIntervalCell);
47+
4348
if (target.health === 'up') {
4449
const dashboardCell = document.createElement('td');
4550
const dashboardLink = document.createElement('a');
@@ -54,6 +59,40 @@ async function fetchTargetData() {
5459
row.appendChild(emptyCell);
5560
}
5661

62+
// remove the instance from the prometheus
63+
64+
const removeCell = document.createElement('td');
65+
const removeForm = document.createElement('form');
66+
removeForm.action = '/targets/remove_target'; // Replace with actual endpoint if needed
67+
removeForm.method = 'POST';
68+
removeForm.style.display = 'inline';
69+
70+
const jobNameInput = document.createElement('input');
71+
jobNameInput.type = 'hidden';
72+
jobNameInput.name = 'job_name';
73+
jobNameInput.value = target.labels.job;
74+
removeForm.appendChild(jobNameInput);
75+
76+
const targetToRemoveInput = document.createElement('input');
77+
targetToRemoveInput.type = 'hidden';
78+
targetToRemoveInput.name = 'target_to_remove';
79+
targetToRemoveInput.value = target.labels.instance;
80+
removeForm.appendChild(targetToRemoveInput);
81+
82+
const submitButton = document.createElement('input');
83+
submitButton.type = 'submit';
84+
submitButton.value = 'Remove';
85+
submitButton.onclick = function () {
86+
return confirm('Are you sure you want to remove this target?');
87+
};
88+
removeForm.appendChild(submitButton);
89+
90+
removeCell.appendChild(removeForm);
91+
row.appendChild(removeCell);
92+
93+
// Append the row to the table body
94+
targetTableBody.appendChild(row);
95+
5796
// Append the row to the table body
5897
targetTableBody.appendChild(row);
5998
});

‎src/templates/network/dashboard_network.html‎

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,39 @@
55
<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard_network.css') }}">
66
{% endblock %}
77
{% block content %}
8-
<div class="container">
9-
<h1>SystemGuard Active Targets</h1>
10-
<table>
11-
<thead>
12-
<tr>
13-
<th>Instance</th>
14-
<th>Job</th>
15-
<th>Health</th>
16-
<th>Last Scrape</th>
17-
<th>Last Error</th>
18-
<th>Scrape URL</th>
19-
<th>Scrape Duration (s)</th>
20-
<th>Go to Dashboard</th>
21-
</tr>
22-
</thead>
23-
<tbody id="target-table-body">
24-
<!-- Data will be populated here -->
25-
</tbody>
26-
</table>
27-
</div>
8+
<div class="container">
9+
<h1>SystemGuard Active Targets</h1>
10+
<table>
11+
<thead>
12+
<tr>
13+
<th>Job</th>
14+
<th>Instance</th>
15+
<th>Health</th>
16+
<th>Last Scrape</th>
17+
<th>Last Error</th>
18+
<th>Scrape URL</th>
19+
<th>Scrape Duration (s)</th>
20+
<th>Scrape Interval</th>
21+
<th>Go to Dashboard</th>
22+
<th>Remove Target</th>
23+
</tr>
24+
</thead>
25+
<tbody id="target-table-body">
26+
<!-- Data will be populated here -->
27+
</tbody>
28+
</table>
29+
</div>
30+
31+
<div class="text-center">
32+
<h2>Add New Target</h2>
33+
<form action="{{ url_for('add_target') }}" method="post">
34+
<input type="text" name="job_name" placeholder="Job Name" required>
35+
<input type="text" name="new_target" placeholder="New Instance" required>
36+
<input type="text" name="scrape_interval" placeholder="Scrape Interval" required>
37+
<input type="submit" value="Add Target">
38+
</form>
39+
</div>
2840
{% endblock %}
2941
{% block extra_scripts %}
3042
<script src="{{ url_for('static', filename='js/targets.js') }}"></script>
31-
{% endblock %}
43+
{% endblock %}

0 commit comments

Comments
 (0)