sstent/consul-monitor
1
0
Fork 0
mirror of https://github.com/sstent/consul-monitor.git synced 2025-12-06 08:01:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

phase 1 fixed

Browse Source
This commit is contained in:
sstent
2025-08-09 19:52:34 -07:00
parent a75ab4acce
commit 48281f9de1
2 changed files with 116 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
consul-monitor/static/js/app.js
View File

@@ -1,62 +0,0 @@
console.log('app.js loading...');
document.addEventListener('alpine:init', () => {
console.log('Registering serviceMonitor with Alpine.js');
Alpine.data('serviceMonitor', () => ({
services: [],
loading: false,
error: null,
consulAvailable: true,
init() {
console.log('Initializing serviceMonitor component');
this.refreshServices();
},
async refreshServices() {
console.log('Refreshing services');
this.loading = true;
this.error = null;
try {
const response = await fetch('/api/services');
const data = await response.json();
if (data.status === 'success') {
this.services = data.services;
this.consulAvailable = data.consul_available;
} else {
this.error = data.error || 'Failed to fetch services';
this.services = data.services || [];
this.consulAvailable = data.consul_available;
}
} catch (err) {
this.error = 'Network error: ' + err.message;
this.services = [];
this.consulAvailable = false;
} finally {
this.loading = false;
}
},
getStatusClass(status) {
return {
'status-passing': status === 'passing',
'status-warning': status === 'warning',
'status-critical': status === 'critical',
'status-unknown': !status || status === 'unknown'
};
},
getStatusEmoji(status) {
switch(status) {
case 'passing': return '🟢';
case 'warning': return '🟡';
case 'critical': return '🔴';
default: return '⚪';
}
}
}));
});
console.log('app.js loaded');

70
consul-monitor/templates/index.html
View File

@@ -3,10 +3,9 @@
<head>
<title>Consul Service Monitor</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script src="{{ url_for('static', filename='js/app.js') }}" defer></script>
</head>
<body x-data="serviceMonitor">
<body>
<div x-data="serviceMonitor" style="display: none;" x-show="true">
<div class="header">
<h1>Consul Service Monitor</h1>
<div class="controls">
@@ -59,5 +58,70 @@
No services found
</div>
</div>
</div>
<!-- Load Alpine.js and define component inline -->
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('serviceMonitor', () => ({
services: [],
loading: false,
error: null,
consulAvailable: true,
init() {
console.log('Initializing serviceMonitor component');
this.refreshServices();
},
async refreshServices() {
console.log('Refreshing services');
this.loading = true;
this.error = null;
try {
const response = await fetch('/api/services');
const data = await response.json();
if (data.status === 'success') {
this.services = data.services;
this.consulAvailable = data.consul_available;
console.log('Services loaded:', this.services.length);
} else {
this.error = data.error || 'Failed to fetch services';
this.services = data.services || [];
this.consulAvailable = data.consul_available;
}
} catch (err) {
this.error = 'Network error: ' + err.message;
this.services = [];
this.consulAvailable = false;
console.error('Error fetching services:', err);
} finally {
this.loading = false;
}
},
getStatusClass(status) {
return {
'status-passing': status === 'passing',
'status-warning': status === 'warning',
'status-critical': status === 'critical',
'status-unknown': !status || status === 'unknown'
};
},
getStatusEmoji(status) {
switch(status) {
case 'passing': return '🟢';
case 'warning': return '🟡';
case 'critical': return '🔴';
default: return '⚪';
}
}
}));
});
</script>
</body>
</html>