I'd like to front-end a set of related Kibana dashboards with a static web page that displays a set of tiles with links to those dashboards:
This is just a skeleton layout:
- The color and sizing specs are temporary placeholder values
- The top-left tile is a "title/heading" tile for the set of dashboards
- In practice, the "Dashboardn" text would likely be a Dashboard title followed by a short blurb. (Ideally, I'd like to programmatically populate this grid by querying the
kibanaindex for dashboard saved objects, filtered by tag name, but that's another topic...)
I acknowledge that this is really just a custom version of the dashboard list page already provided by Kibana. I want "tiles", okay?
Rather than hosting this page using a separate HTTP server, I'd like to be able to simply copy the HTML file to a folder that is already served by Kibana. Is there such a folder in Kibana where I can copy static assets to be served? And, if so, what is the URL path?
I've used Developer Tools in my browser and seen what look to me like requests to static URLs, and I could go hunting around in the Kibana folders for those locations, but I'd prefer to know whether there's a folder for this particular use, rather than opportunistically copying the file to some place I really shouldn't.
For what it's worth, here's my rudimentary skeleton HTML for such a page:
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
font-family: sans-serif;
background-color: #FFCCCC;
}
ul {
list-style-type: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-auto-rows: 1fr;
padding: 0;
height: 100%;
}
li {
color: #FFFFFF;
margin: 0.5rem;
padding: 0;
}
a {
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
width: 100%;
height: 100%;
text-decoration: none;
}
a:hover {
background-color: #6666CC;
}
li:nth-child(4n) {
background-color: #008800;
}
li:nth-child(4n+1) {
background-color: #009900;
}
li:nth-child(4n+2) {
background-color: #00AA00;
}
li:nth-child(4n+3) {
background-color: #00CC00;
}
li:nth-child(1) {
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
flex-direction: column;
font-size: x-large;
font-weight: bold;
text-align: center;
}
li:nth-child(1) img {
position: relative;
display: block;
width: 15rem;
margin-bottom: 1em;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="data:image/svg+xml,%3Csvg ..."/>Heading</li>
<li><a href="/app/dashboards#/view/...">Dashboard1</a></li>
<li><a href="/app/dashboards#/view/...">Dashboard2</a></li>
<li><a href="/app/dashboards#/view/...">Dashboard3</a></li>
<li><a href="/app/dashboards#/view/...">Dashboard4</a></li>
<li><a href="/app/dashboards#/view/...">Dashboard5</a></li>
<li><a href="/app/dashboards#/view/...">Dashboard6</a></li>
<li><a href="/app/dashboards#/view/...">Dashboard7</a></li>
</div>
</body>
</html>
(where the ... in the href attribute values represent each dashboard's unique ID)
Rather than a static, standalone HTML file, I'd be okay to do this in a Kibana dashboard—using, say, a TSVB Markdown panel with custom CSS—or, similarly, Markdown in Canvas. In fact, I've already played around with both options. However, as far as I can tell, there's no way to define a fluid single-panel dashboard or Canvas (that dynamically adjusts its size to occupy the full height and width of the available display area). Am I missing something?
.