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');

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

@@ -3,61 +3,125 @@
<head> <head>
<title>Consul Service Monitor</title> <title>Consul Service Monitor</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> <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> </head>
<body x-data="serviceMonitor"> <body>
<div class="header"> <div x-data="serviceMonitor" style="display: none;" x-show="true">
<h1>Consul Service Monitor</h1> <div class="header">
<div class="controls"> <h1>Consul Service Monitor</h1>
<button @click="refreshServices" :disabled="loading"> <div class="controls">
<span x-show="!loading">🔄 Refresh</span> <button @click="refreshServices" :disabled="loading">
<span x-show="loading">Loading...</span> <span x-show="!loading">🔄 Refresh</span>
</button> <span x-show="loading">Loading...</span>
</button>
</div>
</div> </div>
</div>
<div x-show="error" class="error-banner" x-text="error"></div>
<div x-show="!consulAvailable" class="warning-banner">
⚠️ Consul connection failed - showing cached data
</div>
<div class="services-container">
<table class="services-table">
<thead>
<tr>
<th>Service Name</th>
<th>Status</th>
<th>URL</th>
<th>Tags</th>
</tr>
</thead>
<tbody>
<template x-for="service in services" :key="service.id">
<tr>
<td x-text="service.name"></td>
<td>
<span class="status-icon"
:class="getStatusClass(service.current_status)"
x-text="getStatusEmoji(service.current_status)">
</span>
</td>
<td>
<a :href="service.url" target="_blank" x-text="service.url"></a>
</td>
<td>
<template x-for="tag in service.tags">
<span class="tag" x-text="tag"></span>
</template>
</td>
</tr>
</template>
</tbody>
</table>
<div x-show="services.length === 0 && !loading" class="no-services"> <div x-show="error" class="error-banner" x-text="error"></div>
No services found <div x-show="!consulAvailable" class="warning-banner">
⚠️ Consul connection failed - showing cached data
</div>
<div class="services-container">
<table class="services-table">
<thead>
<tr>
<th>Service Name</th>
<th>Status</th>
<th>URL</th>
<th>Tags</th>
</tr>
</thead>
<tbody>
<template x-for="service in services" :key="service.id">
<tr>
<td x-text="service.name"></td>
<td>
<span class="status-icon"
:class="getStatusClass(service.current_status)"
x-text="getStatusEmoji(service.current_status)">
</span>
</td>
<td>
<a :href="service.url" target="_blank" x-text="service.url"></a>
</td>
<td>
<template x-for="tag in service.tags">
<span class="tag" x-text="tag"></span>
</template>
</td>
</tr>
</template>
</tbody>
</table>
<div x-show="services.length === 0 && !loading" class="no-services">
No services found
</div>
</div> </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> </body>
</html> </html>