We have process to turn off a alert definition turn during our patching window, due to our backend automation process build in house.
So since we can't alert against the alert table , we put in a basic widget with the select query to show off the status...but want to try to make it a bit more obvious., was wonder if anyone could help us see why the code below isnt working. I changed the alert definition name to 1234 to not post the actual info.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">cdnjs.cloudflare.com/.../font-awesome.min.css">
<script src="">ajax.googleapis.com/.../script>
<script type="text/javascript">
function getValues() {
var swql1 = "SELECT Name, Enabled FROM Orion.AlertDefinitions WHERE alertdefid = '1234' and enabled = 'True'";
var params1 = JSON.stringify({ query: swql1, parameters: {} });
$.ajax({
type: 'POST',
data: params1,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
console.log(response.d.Rows);
var statusFifth = document.getElementById("status_fifth");
if (response.d.Rows.length > 0) {
if (response.d.Rows.length > 1) {
statusFifth.classList.add("status_true");
statusFifth.classList.remove("status_false");
} else {
statusFifth.classList.add("status_false");
statusFifth.classList.remove("status_true");
}
statusFifth.innerHTML = response.d.Rows.map(row => `<p>${row.Name}: ${row.Description}</p>`).join('');
} else {
statusFifth.classList.add("status_false");
statusFifth.classList.remove("status_true");
statusFifth.innerHTML = "<p>No results found</p>";
}
}
});
}
</script>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Open Sans, sans-serif;
}
h2 {
padding-left: 0;
}
/* Float four columns side by side */
.status_column {
float: left;
width: 25%;
padding: 0 5px;
text-align: center;
}
.status_row {
margin: 0 -5px;
}
/* Clear floats after the columns */
.status_row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
.status_column {
width: 100%;
display: block;
margin-bottom: 10px;
}
}
/* Style for the fifth column */
.status_fifth {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
margin-top: 20px;
height: 200px; /* Adjust this value to make the column longer */
}
.status_true {
background-color: #4CAF50;
color: White;
}
.status_false {
background-color: ##ed0516;
color: White;
}
</style>
</head>
<body onload="getValues();">
<br>
<div class="status_row">
<div class="status_fifth" id="status_fifth">
<!-- Data from the first SQL query will be displayed here -->
<p><i class="statusFifth"></i></p>
<h3 id="statusFifth"></h3>
<h2>Bundle Script Status</h2>
</div>
</div>
</body>
</html>