Hello. I am using Grafana 8.0.1,and I am trying some tests with the html panel (HTML plugin for Grafana | Grafana Labs), and I want to create an horizontal tree view, with images, capable to expand/retract the differents levels (father/childs) in this tree view.
The value of the metrics could change the color or shape of the images in the tree view.
I found code in the web and adapted it to my needs.
The code doesnt work in html panel, remains like a static picture, but in text panel the code works. Unfortunaly, the text panel foesnt accept metrics as data, so is no useful to me.
this is look in html panel
this is look in text panel
is there a way to achieve that html panel accept javascript embedded in the “html” section ??
This is the full code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function () {
$('.genealogy-tree ul').hide();
$('.genealogy-tree>ul').show();
$('.genealogy-tree ul.active').show();
$('.genealogy-tree li').on('click', function (e) {
var children = $(this).find('> ul');
if (children.is(":visible")) children.hide('fast').removeClass('active');
else children.show('fast').addClass('active');
e.stopPropagation();
});
});
</script>
<style>
/*----------------genealogy-scroll----------*/
.genealogy-scroll::-webkit-scrollbar {
width: 5px;
height: 8px;
}
.genealogy-scroll::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #e4e4e4;
}
.genealogy-scroll::-webkit-scrollbar-thumb {
background: #212121;
border-radius: 10px;
transition: 0.5s;
}
.genealogy-scroll::-webkit-scrollbar-thumb:hover {
background: #d5b14c;
transition: 0.5s;
}
/*----------------genealogy-tree----------*/
.genealogy-body{
white-space: nowrap;
overflow-y: hidden;
padding: 50px;
min-height: 500px;
padding-top: 10px;
}
.genealogy-tree ul {
padding-top: 20px;
position: relative;
padding-left: 0px;
display: flex;
}
.genealogy-tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
}
.genealogy-tree li::before, .genealogy-tree li::after{
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 2px solid #ccc;
width: 50%;
height: 18px;
}
.genealogy-tree li::after{
right: auto; left: 50%;
border-left: 2px solid #ccc;
}
.genealogy-tree li:only-child::after, .genealogy-tree li:only-child::before {
display: none;
}
.genealogy-tree li:only-child{
padding-top: 0;
}
.genealogy-tree li:first-child::before, .genealogy-tree li:last-child::after{
border: 0 none;
}
.genealogy-tree li:last-child::before{
border-right: 2px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.genealogy-tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
.genealogy-tree ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 2px solid #ccc;
width: 0; height: 20px;
}
.genealogy-tree li a{
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.genealogy-tree li a:hover+ul li::after,
.genealogy-tree li a:hover+ul li::before,
.genealogy-tree li a:hover+ul::before,
.genealogy-tree li a:hover+ul ul::before{
border-color: #fbba00;
}
/*--------------memeber-card-design----------*/
.member-view-box{
padding:0px 20px;
text-align: center;
border-radius: 4px;
position: relative;
}
.member-image{
width: 60px;
position: relative;
}
.member-image img{
width: 60px;
height: 60px;
border-radius: 6px;
background-color :#fff;
z-index: 1;
}
</style>
</head>
<body>
<div class="body genealogy-body genealogy-scroll">
<div class="genealogy-tree">
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/190391/bank.svg" alt="KK">
<div class="member-details">
<h3>Cliente</h3>
</div>
</div>
</div>
</a>
<ul class="active">
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/227735/servers-server.svg" alt="qqqq">
<div class="member-details">
<h3>Servidores</h3>
</div>
</div>
</div>
</a>
<ul >
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/354004/linux-tux.svg" alt="Member">
<div class="member-details">
<h6>Servers Linux</h6>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/355384/windows-legacy.svg" alt="Member">
<div class="member-details">
<h7>Servers Windows</h7>
</div>
</div>
</div>
</a>
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/355384/windows-legacy.svg" alt="Member">
<div class="member-details">
<h6>Windows1</h6>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/355384/windows-legacy.svg" alt="Member">
<div class="member-details">
<h6>Windows2</h6>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/355384/windows-legacy.svg" alt="Member">
<div class="member-details">
<h6>Windows3</h6>
</div>
</div>
</div>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/138912/database.svg" alt="Member">
<div class="member-details">
<h7>Servers Base Datos</h7>
</div>
</div>
</div>
</a>
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/331738/mysql-database.svg" alt="Member">
<div class="member-details">
<h6>Server Mysql</h6>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/355152/oracle.svg" alt="Member">
<div class="member-details">
<h6>Oracle servers</h6>
</div>
</div>
</div>
</a>
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/355152/oracle.svg" alt="Member">
<div class="member-details">
<h6>Oracle1</h6>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/355152/oracle.svg" alt="Member">
<div class="member-details">
<h6>Oracle2</h6>
</div>
</div>
</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/278279/networking-computer.svg" alt="Member">
<div class="member-details">
<h3>Network</h3>
</div>
</div>
</div>
</a>
<ul class="active">
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/849/telephone.svg" alt="Member">
<div class="member-details">
<h6>Voz</h6>
</div>
</div>
</div>
</a>
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/15439/phone-call.svg" alt="Member">
<div class="member-details">
<h6>Call Manager</h6>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="https://www.svgrepo.com/show/337420/voicemail.svg" alt="Member">
<div class="member-details">
<h6>Voice Mail</h6>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="/public/img/gateway.svg" alt="Member">
<div class="member-details">
<h6>Gateway</h6>
</div>
</div>
</div>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="/public/img/network.svg" alt="Member">
<div class="member-details">
<h6>Datos</h6>
</div>
</div>
</div>
</a>
<ul>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="/public/img/router.svg" alt="Member">
<div class="member-details">
<h6>Routers</h6>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="/public/img/switchL3.svg" alt="Member">
<div class="member-details">
<h6>Switch L3</h6>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="member-view-box">
<div class="member-image">
<img src="/public/img/wifi.svg" alt="Member">
<div class="member-details">
<h6>WiFi</h6>
</div>
</div>
</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
