Skip to content

Instantly share code, notes, and snippets.

@nirs

nirs/html-report-demo.html

Last active May 8, 2026 22:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nirs/a66f079424bb5df4eb64d50e1abb7b4c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nirs/a66f079424bb5df4eb64d50e1abb7b4c to your computer and use it in GitHub Desktop.
Download ZIP
ramenctl foldable HTML demo
Raw
html-report-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Foldable Report Demo</title>
<style>
body {
font-family: system-ui, sans-serif;
font-size: 0.9em;
margin: 0;
}
h2, h3 { font-size: 1.1em; margin: 4px 0; }
h4, h5, h6 {
font-size: 0.9em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #666;
margin: 12px 0 4px 0;
}
.main-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(37em, 1fr));
gap: 12px;
background: #e8e8e8;
padding: 12px;
}
.main-grid > h2 { grid-column: 1 / -1; margin: 0; }
.main-grid > section {
margin-top: 0;
background: white;
border: 1px solid darkgray;
border-radius: 8px;
padding: 12px;
}
.main-grid > section > h3 { margin: 0; }
dl + section, section section + section { margin-top: 8px; }
section section { padding-left: 12px; }
section section > h4, section section > h5, section section > h6 { margin-left: -12px; }
dl.metadata, dl.validation {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 12px;
align-items: baseline;
margin: 0;
width: 100%;
}
dl.metadata dt, dl.validation dt { color: #666; font-weight: normal; min-width: 8em; }
dl.metadata dd, dl.validation dd {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
margin: 0;
min-width: 0;
font-weight: 600;
}
.value { flex: 1; }
.state { flex-shrink: 0; margin-left: auto; font-size: 0.85em; }
.description { flex-basis: 100%; font-size: 0.85em; margin: 0; }
dl.validation > dd.nested { grid-column: 1 / -1; padding-left: 12px; }
.main-grid ul { list-style: none; padding: 0; margin: 0; }
.main-grid li {
background: #f9fafb;
border-left: 3px solid #d1d5db;
border-radius: 4px;
margin: 8px 0;
padding-left: 12px;
}
/* Foldable details/summary styles */
details > summary {
cursor: pointer;
margin-left: -12px;
color: #666;
}
details > summary > h5,
details > summary > h6 { display: inline; }
details > summary > .state { float: right; }
</style>
</head>
<body>
<div class="main-grid">
<h2>Application Report — All Good</h2>
<section>
<h3>Primary Cluster: dr1</h3>
<section>
<h4>VRG</h4>
<dl class="metadata">
<dt>Name</dt>
<dd>appset-deploy-rbd</dd>
<dt>Namespace</dt>
<dd>test-appset-deploy-rbd</dd>
</dl>
<dl class="validation">
<dt>State</dt>
<dd><span class="value">Primary</span><span class="state">✅</span></dd>
</dl>
<section>
<details open>
<summary>
<h5>Conditions</h5>
<span class="state">✅</span>
</summary>
<dl class="validation">
<dt>DataReady</dt>
<dd><span class="state">✅</span></dd>
<dt>ClusterDataReady</dt>
<dd><span class="state">✅</span></dd>
<dt>ClusterDataProtected</dt>
<dd><span class="state">✅</span></dd>
</dl>
</details>
</section>
<section>
<details open>
<summary>
<h5>Protected PVCs</h5>
<span class="state">✅</span>
</summary>
<ul>
<li>
<dl class="metadata">
<dt>Name</dt>
<dd>busybox-pvc</dd>
<dt>Namespace</dt>
<dd>test-appset-deploy-rbd</dd>
<dt>Replication</dt>
<dd>volrep</dd>
</dl>
<dl class="validation">
<dt>Phase</dt>
<dd><span class="value">Bound</span><span class="state">✅</span></dd>
</dl>
</li>
<li>
<dl class="metadata">
<dt>Name</dt>
<dd>data-pvc</dd>
<dt>Namespace</dt>
<dd>test-appset-deploy-rbd</dd>
<dt>Replication</dt>
<dd>volrep</dd>
</dl>
<dl class="validation">
<dt>Phase</dt>
<dd><span class="value">Bound</span><span class="state">✅</span></dd>
</dl>
</li>
</ul>
</details>
</section>
</section>
</section>
</div>
<div class="main-grid">
<h2>Application Report — Has Problems</h2>
<section>
<h3>Primary Cluster: dr1</h3>
<section>
<h4>VRG</h4>
<dl class="metadata">
<dt>Name</dt>
<dd>appset-deploy-rbd</dd>
<dt>Namespace</dt>
<dd>test-appset-deploy-rbd</dd>
</dl>
<dl class="validation">
<dt>State</dt>
<dd><span class="value">Primary</span><span class="state">✅</span></dd>
</dl>
<section>
<details open>
<summary>
<h5>Conditions</h5>
<span class="state">❌</span>
</summary>
<dl class="validation">
<dt>DataReady</dt>
<dd><span class="state">✅</span></dd>
<dt>ClusterDataReady</dt>
<dd>
<span class="state">❌</span>
<p class="description">condition not found</p>
</dd>
<dt>ClusterDataProtected</dt>
<dd><span class="state">✅</span></dd>
</dl>
</details>
</section>
<section>
<details open>
<summary>
<h5>Protected PVCs</h5>
<span class="state">❌</span>
</summary>
<ul>
<li>
<dl class="metadata">
<dt>Name</dt>
<dd>busybox-pvc</dd>
<dt>Namespace</dt>
<dd>test-appset-deploy-rbd</dd>
<dt>Replication</dt>
<dd>volrep</dd>
</dl>
<dl class="validation">
<dt>Phase</dt>
<dd><span class="value">Bound</span><span class="state">✅</span></dd>
</dl>
</li>
<li>
<dl class="metadata">
<dt>Name</dt>
<dd>data-pvc</dd>
<dt>Namespace</dt>
<dd>test-appset-deploy-rbd</dd>
<dt>Replication</dt>
<dd>volrep</dd>
</dl>
<dl class="validation">
<dt>Phase</dt>
<dd>
<span class="value">Lost</span><span class="state">❌</span>
<p class="description">pvc not found</p>
</dd>
</dl>
</li>
</ul>
</details>
</section>
</section>
</section>
</div>
<div class="main-grid">
<h2>Clusters Report — All Good</h2>
<section>
<h3>Hub</h3>
<section>
<h4>Ramen</h4>
<section>
<h5>Deployment</h5>
<dl class="metadata">
<dt>Name</dt>
<dd>ramen-hub-operator</dd>
<dt>Namespace</dt>
<dd>ramen-system</dd>
</dl>
<dl class="validation">
<dt>Replicas</dt>
<dd><span class="value">1</span><span class="state">✅</span></dd>
</dl>
<section>
<details open>
<summary>
<h6>Conditions</h6>
<span class="state">✅</span>
</summary>
<dl class="validation">
<dt>Available</dt>
<dd><span class="state">✅</span></dd>
<dt>Progressing</dt>
<dd><span class="state">✅</span></dd>
</dl>
</details>
</section>
</section>
<section>
<h5>ConfigMap</h5>
<dl class="metadata">
<dt>Name</dt>
<dd>ramen-hub-operator-config</dd>
<dt>Namespace</dt>
<dd>ramen-system</dd>
</dl>
<section>
<details>
<summary>
<h6>S3 Store Profiles</h6>
<span class="state">✅</span>
</summary>
<section>
<h6>minio-on-dr1</h6>
<dl class="validation">
<dt>Bucket</dt>
<dd><span class="value">bucket</span><span class="state">✅</span></dd>
<dt>Endpoint</dt>
<dd><span class="value">http://192.168.105.6:30000</span><span class="state">✅</span></dd>
<dt>Region</dt>
<dd><span class="value">us-west-1</span><span class="state">✅</span></dd>
</dl>
</section>
<section>
<h6>minio-on-dr2</h6>
<dl class="validation">
<dt>Bucket</dt>
<dd><span class="value">bucket</span><span class="state">✅</span></dd>
<dt>Endpoint</dt>
<dd><span class="value">http://192.168.105.7:30000</span><span class="state">✅</span></dd>
<dt>Region</dt>
<dd><span class="value">us-west-1</span><span class="state">✅</span></dd>
</dl>
</section>
</details>
</section>
</section>
</section>
</section>
</div>
<div class="main-grid">
<h2>Clusters Report — Has Problems</h2>
<section>
<h3>Hub</h3>
<section>
<h4>Ramen</h4>
<section>
<h5>Deployment</h5>
<dl class="metadata">
<dt>Name</dt>
<dd>ramen-hub-operator</dd>
<dt>Namespace</dt>
<dd>ramen-system</dd>
</dl>
<dl class="validation">
<dt>Replicas</dt>
<dd><span class="value">1</span><span class="state">✅</span></dd>
</dl>
<section>
<details open>
<summary>
<h6>Conditions</h6>
<span class="state">✅</span>
</summary>
<dl class="validation">
<dt>Available</dt>
<dd><span class="state">✅</span></dd>
<dt>Progressing</dt>
<dd><span class="state">✅</span></dd>
</dl>
</details>
</section>
</section>
<section>
<h5>ConfigMap</h5>
<dl class="metadata">
<dt>Name</dt>
<dd>ramen-hub-operator-config</dd>
<dt>Namespace</dt>
<dd>ramen-system</dd>
</dl>
<section>
<details open>
<summary>
<h6>S3 Store Profiles</h6>
<span class="state">❌</span>
</summary>
<section>
<h6>minio-on-dr1</h6>
<dl class="validation">
<dt>Bucket</dt>
<dd><span class="value">bucket</span><span class="state">✅</span></dd>
<dt>Endpoint</dt>
<dd><span class="value">http://192.168.105.6:30000</span><span class="state">✅</span></dd>
<dt>Region</dt>
<dd><span class="value">us-west-1</span><span class="state">✅</span></dd>
</dl>
</section>
<section>
<h6>minio-on-dr2</h6>
<dl class="validation">
<dt>Bucket</dt>
<dd><span class="value">bucket</span><span class="state">✅</span></dd>
<dt>Endpoint</dt>
<dd>
<span class="value"></span><span class="state">❌</span>
<p class="description">missing endpoint</p>
</dd>
<dt>Region</dt>
<dd><span class="value">us-west-1</span><span class="state">✅</span></dd>
</dl>
</section>
</details>
</section>
</section>
</section>
</section>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment