itsdave/msp
2
0
Fork 0
mirror of https://github.com/itsdave-de/msp.git synced 2025-05-06 15:35:12 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

#15 | Make AJAX request to get host status information from client side and render it

Browse Source
This commit is contained in:
Jordi Albert 2022-07-19 15:09:36 +02:00
parent 986019cd1f
commit b7a89d41eb
1 changed files with 128 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
msp/msp/doctype/it_object/it_object.js
View File

@ -3,6 +3,131 @@
frappe.ui.form.on('IT Object', {
refresh: function (frm) {
const loader = `
<div class="line-wobble"></div>
<style>
.line-wobble {
--uib-size: 80px;
--uib-speed: 1.75s;
--uib-color: black;
--uib-line-weight: 5px;
position: relative;
margin: 6rem auto;
display: flex;
align-items: center;
justify-content: center;
height: var(--uib-line-weight);
width: var(--uib-size);
border-radius: calc(var(--uib-line-weight) / 2);
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.line-wobble::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: var(--uib-color);
opacity: 0.1;
}
.line-wobble::after {
content: '';
height: 100%;
width: 100%;
border-radius: calc(var(--uib-line-weight) / 2);
animation: wobble var(--uib-speed) ease-in-out infinite;
transform: translateX(-95%);
background-color: var(--uib-color);
}
@keyframes wobble {
0%,
100% {
transform: translateX(-95%);
}
50% {
transform: translateX(95%);
}
}
</style>
`;
const container = document.getElementById('oitc-output');
container.innerHTML = loader;
frm.call('get_oitc_host_status_data', {})
.then((response) => {
const container = document.getElementById('oitc-output');
if (response.message.status !== 200) {
container.innerHTML = response.message.response || 'An error occurred while fetching OITC data';
return;
}
let background = response.message?.statusColors?.upStateColor;
if (response.message?.host?.hostStatus?.currentState?.toUpperCase() === "DOWN") {
background = response.message?.statusColors?.downStateColor;
} else if (response.message?.host?.hostStatus?.currentState?.toUpperCase() === "UNREACHABLE") {
background = response.message?.statusColors?.unreachableStateColor;
}
container.innerHTML = `
<div class="js-oitc-output">
<div>
<h1 class="font-size-50" style="color: white;">
${response.message?.host?.hostStatus?.currentState?.toUpperCase()}
</h1>
</div>
<div>
<div>Current State since</div>
<h3 style="color: white; margin: 1rem 0;">
${response.message?.host?.hostStatus?.currentStateSince}
</h3>
</div>
<div>
<div>Last check</div>
<h3 style="color: white; margin: 1rem 0;">
${response.message?.host?.hostStatus?.lastCheck}
</h3>
</div>
<div>
<div>Next check</div>
<h3 style="color: white; margin: 1rem 0;">
${response.message?.host?.hostStatus?.nextCheck}
</h3>
</div>
<div>
<div>Services</div>
<h3 style="color: white; margin: 1rem 0;">
Total Services: ${response.message?.host?.servicesStatus?.totalServices}
</h3>
<div>Services Status:</div>
<h3 style="color: white; margin: 1rem 0;">
<ul style="text-align:left;">
<li>OK: ${response.message?.host?.servicesStatus?.state?.ok}</li>
<li>CRITICAL: ${response.message?.host?.servicesStatus?.state?.critical}</li>
<li>WARNING: ${response.message?.host?.servicesStatus?.state?.warning}</li>
<li>UNKNOWN: ${response.message?.host?.servicesStatus?.state?.unknown}</li>
</ul>
</h3>
</div>
</div>
`
let statusData = document.querySelector('.js-oitc-output')
statusData.style.textAlign = 'center';
statusData.style.color = '#FFF';
statusData.style.fontWeight = 'Bold';
statusData.style.background = background;
statusData.style.padding = '1rem';
})
if (frm.doc.admin_interface_link) {
frm.add_custom_button('Open Admin Interface', () => frm.trigger('open_admin_interface'), 'Actions');
};