testes/html/Tela_Monitoramento/Padrão/Monitoramento_IBAP.html

171 lines
4.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Monitor.css">
<link rel="stylesheet" href="../../../Css/global/padraouser.css">
<link rel="stylesheet" href="../../../Css/global/import.css">
<link rel="stylesheet" href="../../../Css/Ambiente_Usuario/Sub_telas_monitor_IBAP.css">
</head>
<body>
<main class="Corpo">
<section class="Capitulos_1">
<div class="reação" onclick="togglePanelVisibility('panel1')">
<p>Firewall</p>
</div>
</section>
<script>
var temas = document.querySelectorAll('.reação')
function selectLink() {
temas.forEach((item) =>
item.classList.remove('ativo')
)
this.classList.add('ativo')
}
temas.forEach((item) =>
item.addEventListener('click', selectLink))
</script>
<section class="Capitulos_2">
<article id="panel1" class="Matriz_Firewall_IBAP">
<section class="capitulo_1">
<section class="Hardware">
<div class="sessao_1">
<div class="tela_har_1">
<iframe
src="http://grafana.itguys.com.br/d-solo/c4daf778-ff87-4087-8a93-c746c5a06670/firewall-ibap?orgId=1&theme=light&panelId=5"
frameborder="0"></iframe>
</div>
</div>
<div class="sessao_2">
<div class="tela_har_2">
<iframe
src="http://grafana.itguys.com.br/d-solo/c4daf778-ff87-4087-8a93-c746c5a06670/firewall-ibap?orgId=1&theme=light&panelId=3"
frameborder="0"></iframe>
</div>
</div>
</section>
</section>
<section class="capitulo_2">
<section class="trafegos">
<div class="tela_traf_1">
<iframe
src="http://grafana.itguys.com.br/d-solo/c4daf778-ff87-4087-8a93-c746c5a06670/firewall-ibap?orgId=1&theme=light&panelId=1"
frameborder="0"></iframe>
</div>
<div class="tela_traf_2">
<iframe
src="http://grafana.itguys.com.br/d-solo/c4daf778-ff87-4087-8a93-c746c5a06670/firewall-ibap?orgId=1&theme=light&panelId=2"
frameborder="0"></iframe>
</div>
</section>
<section class="speed_teste">
<div class="tela_spe_1">
<iframe class="tela_5"
src="http://grafana.itguys.com.br/d-solo/c4daf778-ff87-4087-8a93-c746c5a06670/firewall-ibap?orgId=1&theme=light&panelId=6"
frameborder="0"></iframe>
</div>
<div class="tela_spe_2">
<iframe class="tela_4"
src="http://grafana.itguys.com.br/d-solo/c4daf778-ff87-4087-8a93-c746c5a06670/firewall-ibap?orgId=1&theme=light&panelId=7"
frameborder="0"></iframe>
</div>
</section>
</section>
</article>
</section>
</main>
<script>
function togglePanelVisibility(panelId) {
var panel = document.getElementById(panelId);
var radio = document.querySelector('input[name="panelSelection"]:checked');
var allPanels = document.querySelectorAll('article');
if (panel.style.display === "none" || panel.style.display === "") {
// Exibe o painel clicado
panel.style.display = "flex";
// Oculta todos os outros painéis
allPanels.forEach(function (otherPanel) {
if (otherPanel.id !== panelId) {
otherPanel.style.display = "none";
}
});
} else {
// Se o botão de rádio não estiver selecionado, oculta o painel clicado
if (!radio) {
panel.style.display = "none";
}
}
}
</script>
</body>
</html>