Skip to content

Commit

Permalink
disable alerts fix, and acked background
Browse files Browse the repository at this point in the history
  • Loading branch information
@piqoni
piqoni committed Oct 28, 2023
1 parent 808f340 commit 2a41779
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 76 deletions.
1 change: 1 addition & 0 deletions main.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ func sendStream(server *sse.Server, s Service, err error) {

func handleNotification(s *Service, up bool, err error) {
if s.DisableAlerts {
s.up = up
return
}

Expand Down
14 changes: 13 additions & 1 deletion static/stylesheet.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@
background: #00CC99;
}

.acked {
background-color: orange;
background-image: repeating-linear-gradient(120deg, transparent, transparent 10px, rgba(0, 0, 0, 1) 10px, rgba(0, 0, 0, 1) 20px);
}

.rectangle {
margin: 2px;
width: 100%;
Expand All @@ -52,6 +57,14 @@
position: relative;
}

.rectangle span {
background-color: rgba(255, 255, 255, 0.7);
/* Adjust the alpha value for transparency */
padding: 4px;
/* Add padding to make the background visible */
border-radius: 2px;
}

.progress-bar {
position: absolute;
bottom: 0;
Expand Down Expand Up @@ -99,4 +112,3 @@
/* border-radius: 3px; */
/* Adjust as needed */
}

153 changes: 78 additions & 75 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ <h1 class="brand"> in⧕idents</h1>
.then(response => {
if (response.ok) {
button.textContent = 'ACKED 🔕';
updateDivState(button.parentElement.parentElement, "acked", "red");
}
})
.catch(error => {
Expand All @@ -42,101 +43,103 @@ <h1 class="brand"> in⧕idents</h1>


const evtSource = new EventSource("/events?stream=messages");
const serviceDivs = new Map();
const serviceDivs = new Map();

evtSource.onmessage = (event) => {
const eventData = JSON.parse(event.data);
const acked = eventData.ack ? "ACKED 🔕" : "ACK";
evtSource.onmessage = (event) => {
const eventData = JSON.parse(event.data);
const acked = eventData.ack ? "ACKED 🔕" : "ACK";

if (serviceDivs.has(eventData.name)) {
updateExistingDiv(eventData, acked);
} else {
createNewDiv(eventData, acked);
}
};

function updateExistingDiv(eventData, acked) {
const existingDiv = serviceDivs.get(eventData.name);

if (eventData.up) {
updateDivState(existingDiv, "green", "red");
removeButtonContainer(existingDiv);
} else {
updateDivState(existingDiv, "red", "green");
removeButtonContainer(existingDiv);

if (!existingDiv.querySelector('.button-container')) {
const ackButton = createAckButton(eventData.name, acked);
existingDiv.innerHTML += ackButton;
}
}

// Get the progress bar element
const progressBar = existingDiv.querySelector(".progress-bar");

if (progressBar) {
// Calculate the animation duration based on the 'frequency' variable
const animationDuration = eventData.frequency * 1000 + "ms";
// Apply the animation duration to the progress bar
progressBar.style.animationDuration = animationDuration;
}
if (serviceDivs.has(eventData.name)) {
updateExistingDiv(eventData, acked);
} else {
createNewDiv(eventData, acked);
}

function createNewDiv(eventData, acked) {
const newElement = document.createElement("div");

if (eventData.up) {
updateDivState(newElement, "green");
newElement.textContent = eventData.name;
} else {
updateDivState(newElement, "red");
newElement.textContent = eventData.name;

if (!newElement.querySelector('.button-container')) {
const ackButton = createAckButton(eventData.name, acked);
newElement.innerHTML += ackButton;
}
};

function updateExistingDiv(eventData, acked) {
const existingDiv = serviceDivs.get(eventData.name);

if (eventData.up) {
updateDivState(existingDiv, "green", "red");
removeButtonContainer(existingDiv);
} else {
const background = eventData.ack ? "acked" : "red";
updateDivState(existingDiv, background, "green");
removeButtonContainer(existingDiv);

if (!existingDiv.querySelector('.button-container')) {
const ackButton = createAckButton(eventData.name, acked);
existingDiv.innerHTML += ackButton;
}
}

newElement.classList.add("rectangle");
const progressBar = createProgressBar(eventData.name);
newElement.appendChild(progressBar);
// Get the progress bar element
const progressBar = existingDiv.querySelector(".progress-bar");

if (progressBar) {
// Calculate the animation duration based on the 'frequency' variable
const animationDuration = eventData.frequency * 1000 + "ms";
// Apply the animation duration to the progress bar
progressBar.style.animationDuration = animationDuration;
}
}

const gridContainer = document.querySelector(".grid-container");
gridContainer.appendChild(newElement);
function createNewDiv(eventData, acked) {
const newElement = document.createElement("div");

serviceDivs.set(eventData.name, newElement);
}
if (eventData.up) {
updateDivState(newElement, "green");
newElement.innerHTML = "<span>" + eventData.name + "</span>";
} else {
const background = eventData.ack ? "acked" : "red"
updateDivState(newElement, background);
newElement.innerHTML = "<span>" + eventData.name + "</span>";

function updateDivState(element, addClass, removeClass) {
element.classList.add(addClass);
if (removeClass) {
element.classList.remove(removeClass);
if (!newElement.querySelector('.button-container')) {
const ackButton = createAckButton(eventData.name, acked);
newElement.innerHTML += ackButton;
}
}

function removeButtonContainer(element) {
const buttonContainer = element.querySelector('.button-container');
if (buttonContainer) {
buttonContainer.remove();
}
}
newElement.classList.add("rectangle");
const progressBar = createProgressBar(eventData.name);
newElement.appendChild(progressBar);

// Calculate the animation duration based on the 'frequency' variable
const animationDuration = eventData.frequency * 1000 + "ms";
// Apply the animation duration to the progress bar
progressBar.style.animationDuration = animationDuration;

const gridContainer = document.querySelector(".grid-container");
gridContainer.appendChild(newElement);

serviceDivs.set(eventData.name, newElement);
}

function createAckButton(name, acked) {
return `<div class="button-container"><button class="transparent-button" onclick="handleButtonClick(this)" name="${name}">${acked}</button></div>`;
function updateDivState(element, addClass, removeClass) {
element.classList.add(addClass);
if (removeClass) {
element.classList.remove(removeClass);
}
}

function createProgressBar(name) {
const progressBar = document.createElement("div");
progressBar.classList.add("progress-bar");
progressBar.setAttribute("name", name);
return progressBar;
function removeButtonContainer(element) {
const buttonContainer = element.querySelector('.button-container');
if (buttonContainer) {
buttonContainer.remove();
}
}

function createAckButton(name, acked) {
return `<div class="button-container"><button class="transparent-button" onclick="handleButtonClick(this)" name="${name}">${acked}</button></div>`;
}

function createProgressBar(name) {
const progressBar = document.createElement("div");
progressBar.classList.add("progress-bar");
progressBar.setAttribute("name", name);
return progressBar;
}

</script>
</body>
Expand Down

0 comments on commit 2a41779

Please sign in to comment.