Something went wrong. Try again.
mio dashboard docs.kosmonum.space/mio
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MIO Instances</title>
<style> * { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui,sans-serif; background: linear-gradient(135deg, #4c566a 0%, #2e3440 100%); min-height: 100vh; padding: 20px; }
/* Header Styles */ .header { background: #3b4252; padding: 16px 24px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); border-left: 8px solid #88c0d0; }
.header-left { display: flex; align-items: center; gap: 12px; }
.header-title { font-size: 18px; font-weight: 600; color: #eceff4; text-transform: uppercase; }
.butterfly-icon { font-size: 36px; }
.header-right { display: flex; align-items: center; gap: 12px; margin-left: 12px; }
.btn { padding: 8px 12px; border: none; background: #4c566a; color: #eceff4; border-radius: 6px; cursor: pointer; font-size: 16px; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn:hover { background: #5e81ac; transform: translateY(-1px); }
.btn-primary { background: #4c566a; font-weight: 500; }
.btn-icon { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.avatar-btn { border-radius: 50%; background: linear-gradient(135deg, #81a1c1 0%, #5e81ac 100%); color: #eceff4; font-weight: 600; position: relative; cursor: pointer; }
/* Dropdown Menus */ .dropdown { position: relative; display: inline-block; }
.dropdown-menu { position: absolute; top: 100%; right: 0; background: #3b4252; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); min-width: 160px; z-index: 1000; display: none; margin-top: 4px; overflow: hidden; border: 1px solid #4c566a; }
.dropdown-menu.active { display: block; }
.dropdown-item { padding: 10px 16px; display: flex; align-items: center; gap: 8px; color: #eceff4; cursor: pointer; transition: background 0.2s ease; border: none; background: none; width: 100%; text-align: left; font-size: 14px; }
.dropdown-item:hover { background: #4c566a; }
.dropdown-item.danger { color: #bf616a; }
.dropdown-item.danger:hover { background: #4c566a; }
/* Instances Container */ .instances-container { max-width: 1200px; margin: 0 auto; }
/* Instance Card */ .instance { background: #3b4252; padding: 16px 12px 16px 20px; border-radius: 8px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; display: grid; grid-template-columns: auto 1fr auto auto; grid-template-rows: auto auto; gap: 12px 12px; align-items: start; border-left: 8px solid #b48ead; }
.instance:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); background: #434c5e; }
.instance.healthy { border-left-color: #a3be8c; }
.instance.warning { border-left-color: #ebcb8b; }
.instance.critical { border-left-color: #bf616a; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* First line: name + tags + menu */ .instance-name { font-weight: 500; color: #eceff4; display: flex; align-items: center; grid-column: 1; grid-row: 1; font-size: 14px; letter-spacing: 0.5px; height: 24px; }
/* Tags container */ .instance-tags { display: flex; gap: 8px; align-items: center; grid-column: 2; grid-row: 1; justify-self: end; height: 24px; }
.tag { display: inline-flex; align-items: center; padding: 4px 8px; background: #4c566a; color: #88c0d0; border-radius: 4px; font-size: 11px; font-weight: 500; cursor: help; transition: all 0.2s ease; position: relative; text-transform: uppercase; border: 1px solid #5e81ac; }
.tag:hover { background: #5e81ac; color: #eceff4; }
/* Tag tooltip */ .tag::before { content: attr(data-label); position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); background: #2e3440; color: #88c0d0; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 100; border: 1px solid #4c566a; }
.tag:hover::before { opacity: 1; }
/* Metrics on second line */ .metrics { display: flex; gap: 24px; grid-column: 1 / 3; grid-row: 2; }
.metric { display: flex; flex-direction: column; gap: 4px; flex: 1; position: relative; }
.metric-bar { height: 8px; background: #2e3440; border-radius: 4px; overflow: hidden; cursor: pointer; position: relative; }
.metric-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.metric-utilization .metric-fill { background: linear-gradient(90deg, #81a1c1 0%, #5e81ac 100%); }
.metric-saturation .metric-fill { background: linear-gradient(90deg, #d08770 0%, #bf616a 100%); }
.metric-error .metric-fill { background: linear-gradient(90deg, #bf616a 0%, #a3414a 100%); }
.metric-latency .metric-fill { background: linear-gradient(90deg, #b48ead 0%, #a3429e 100%); }
.metric-uptime .metric-fill { background: linear-gradient(90deg, #a3be8c 0%, #8fb78a 100%); }
/* Metric value tooltip */ .metric-tooltip { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); background: #2e3440; color: #88c0d0; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 100; border: 1px solid #4c566a; }
.metric-bar:hover + .metric-tooltip, .metric-tooltip:hover { opacity: 1; }
/* Instance Menu */ .instance-menu { flex-shrink: 0; position: relative; grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; height: 24px; }
.menu-btn { background: none; border: 1px solid #4c566a; font-size: 18px; color: #81a1c1; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; height: 24px; }
.menu-btn:hover { background: #4c566a; color: #88c0d0; }
/* Responsive Design */ @media (max-width: 768px) { .instance { grid-template-columns: auto 1fr auto; }
.instance-name { font-size: 13px; }
.instance-tags { }
.metrics { gap: 12px; }
.metric-tooltip { bottom: -28px; } }
@media (max-width: 480px) { .header { padding-left: 16px; padding-right: 16px; }
.header-right { }
.header-title { font-size: 16px; }
.instance { grid-template-columns: auto 1fr auto; gap: 8px; padding-left: 16px; padding-right: 16px; }
.instance-tags { gap: 4px; }
.metrics { gap: 8px; }
.tag { font-size: 8px; padding: 2px 4px; } } </style></head><body> <!-- Header --> <div class="header"> <div class="header-left"> <span class="butterfly-icon">🦋</span> <h1 class="header-title">MIO Instances</h1> </div> <div class="header-right"> <button class="btn btn-primary btn-icon" onclick="showAddInstanceModal()" title="Add Instance"> ➕ </button> <div class="dropdown"> <button class="avatar-btn btn" onclick="toggleProfileMenu()">C</button> <div class="dropdown-menu" id="profileMenu"> <button class="dropdown-item">👤 Identity</button> <button class="dropdown-item">🔑 Secrets</button> <button class="dropdown-item danger">🚪 Logout</button> </div> </div> </div> </div>
<!-- Instances List --> <div class="instances-container" id="instancesList"> <!-- Instance 1 --> <div class="instance critical"> <div class="instance-name">netti</div> <div class="instance-tags"> <span class="tag" data-label="App">netbox</span> <span class="tag" data-label="Location">us-east-1</span> </div> <div class="instance-menu dropdown"> <button class="menu-btn" onclick="toggleInstanceMenu(this)">☰</button> <div class="dropdown-menu"> <button class="dropdown-item">💻 Terminal</button> <button class="dropdown-item">💾 Backup</button> <button class="dropdown-item">⬆️ Upgrade</button> <button class="dropdown-item">🔄 Reboot</button> <button class="dropdown-item danger">🗑️ Delete</button> </div> </div> <div class="metrics"> <div class="metric metric-utilization"> <div class="metric-bar"> <div class="metric-fill" style="width: 15%"></div> </div> <div class="metric-tooltip">Utilization: 15%</div> </div> <div class="metric metric-saturation"> <div class="metric-bar"> <div class="metric-fill" style="width: 32%"></div> </div> <div class="metric-tooltip">Saturation: 32%</div> </div> <div class="metric metric-error"> <div class="metric-bar"> <div class="metric-fill" style="width: 62%"></div> </div> <div class="metric-tooltip">Error Rate: 62%</div> </div> <div class="metric metric-latency"> <div class="metric-bar"> <div class="metric-fill" style="width: 45%"></div> </div> <div class="metric-tooltip">Latency: 120ms</div> </div> <div class="metric metric-uptime"> <div class="metric-bar"> <div class="metric-fill" style="width: 20.9%"></div> </div> <div class="metric-tooltip">Uptime: 20.9%</div> </div> </div> </div>
<!-- Instance 2 --> <div class="instance warning"> <div class="instance-name">papi</div> <div class="instance-tags"> <span class="tag" data-label="App">paperless</span> <span class="tag" data-label="Location">eu-west-1</span> </div> <div class="instance-menu dropdown"> <button class="menu-btn" onclick="toggleInstanceMenu(this)">☰</button> <div class="dropdown-menu"> <button class="dropdown-item">💻 Terminal</button> <button class="dropdown-item">💾 Backup</button> <button class="dropdown-item">⬆️ Upgrade</button> <button class="dropdown-item">🔄 Reboot</button> <button class="dropdown-item danger">🗑️ Delete</button> </div> </div> <div class="metrics"> <div class="metric metric-utilization"> <div class="metric-bar"> <div class="metric-fill" style="width: 78%"></div> </div> <div class="metric-tooltip">Utilization: 78%</div> </div> <div class="metric metric-saturation"> <div class="metric-bar"> <div class="metric-fill" style="width: 62%"></div> </div> <div class="metric-tooltip">Saturation: 62%</div> </div> <div class="metric metric-error"> <div class="metric-bar"> <div class="metric-fill" style="width: 5%"></div> </div> <div class="metric-tooltip">Error Rate: 0.5%</div> </div> <div class="metric metric-latency"> <div class="metric-bar"> <div class="metric-fill" style="width: 72%"></div> </div> <div class="metric-tooltip">Latency: 245ms</div> </div> <div class="metric metric-uptime"> <div class="metric-bar"> <div class="metric-fill" style="width: 98.5%"></div> </div> <div class="metric-tooltip">Uptime: 98.5%</div> </div> </div> </div>
<!-- Instance 3 --> <div class="instance"> <div class="instance-name">ci</div> <div class="instance-tags"> <span class="tag" data-label="App">buildbot</span> <span class="tag" data-label="Location">ap-south-1</span> </div> <div class="instance-menu dropdown"> <button class="menu-btn" onclick="toggleInstanceMenu(this)">☰</button> <div class="dropdown-menu"> <button class="dropdown-item">💻 Terminal</button> <button class="dropdown-item">💾 Backup</button> <button class="dropdown-item">⬆️ Upgrade</button> <button class="dropdown-item">🔄 Reboot</button> <button class="dropdown-item danger">🗑️ Delete</button> </div> </div> <div class="metrics"> <div class="metric metric-utilization"> <div class="metric-bar"> <div class="metric-fill" style="width: 92%"></div> </div> <div class="metric-tooltip">Utilization: 92%</div> </div> <div class="metric metric-saturation"> <div class="metric-bar"> <div class="metric-fill" style="width: 88%"></div> </div> <div class="metric-tooltip">Saturation: 88%</div> </div> <div class="metric metric-error"> <div class="metric-bar"> <div class="metric-fill" style="width: 18%"></div> </div> <div class="metric-tooltip">Error Rate: 1.8%</div> </div> <div class="metric metric-latency"> <div class="metric-bar"> <div class="metric-fill" style="width: 95%"></div> </div> <div class="metric-tooltip">Latency: 890ms</div> </div> <div class="metric metric-uptime"> <div class="metric-bar"> <div class="metric-fill" style="width: 85.2%"></div> </div> <div class="metric-tooltip">Uptime: 85.2%</div> </div> </div> </div>
<!-- Instance 4 --> <div class="instance healthy"> <div class="instance-name">chat</div> <div class="instance-tags"> <span class="tag" data-label="App">irc</span> <span class="tag" data-label="App">xmpp</span> <span class="tag" data-label="Location">us-west-2</span> </div> <div class="instance-menu dropdown"> <button class="menu-btn" onclick="toggleInstanceMenu(this)">☰</button> <div class="dropdown-menu"> <button class="dropdown-item">💻 Terminal</button> <button class="dropdown-item">💾 Backup</button> <button class="dropdown-item">⬆️ Upgrade</button> <button class="dropdown-item">🔄 Reboot</button> <button class="dropdown-item danger">🗑️ Delete</button> </div> </div> <div class="metrics"> <div class="metric metric-utilization"> <div class="metric-bar"> <div class="metric-fill" style="width: 54%"></div> </div> <div class="metric-tooltip">Utilization: 54%</div> </div> <div class="metric metric-saturation"> <div class="metric-bar"> <div class="metric-fill" style="width: 28%"></div> </div> <div class="metric-tooltip">Saturation: 28%</div> </div> <div class="metric metric-error"> <div class="metric-bar"> <div class="metric-fill" style="width: 1%"></div> </div> <div class="metric-tooltip">Error Rate: 0.1%</div> </div> <div class="metric metric-latency"> <div class="metric-bar"> <div class="metric-fill" style="width: 35%"></div> </div> <div class="metric-tooltip">Latency: 85ms</div> </div> <div class="metric metric-uptime"> <div class="metric-bar"> <div class="metric-fill" style="width: 99.98%"></div> </div> <div class="metric-tooltip">Uptime: 99.98%</div> </div> </div> </div> </div>
<script> // Close all dropdowns when clicking outside document.addEventListener('click', function(event) { if (!event.target.closest('.dropdown')) { document.querySelectorAll('.dropdown-menu').forEach(menu => { menu.classList.remove('active'); }); } });
// Toggle profile menu function toggleProfileMenu() { const menu = document.getElementById('profileMenu'); menu.classList.toggle('active'); }
// Toggle instance menu function toggleInstanceMenu(button) { const menu = button.nextElementSibling;
// Close all other menus document.querySelectorAll('.instance-menu .dropdown-menu').forEach(m => { if (m !== menu) m.classList.remove('active'); });
menu.classList.toggle('active'); }
// Add instance modal function showAddInstanceModal() { alert('Add new instance modal would open here'); }
// Handle instance menu actions document.querySelectorAll('.instance-menu .dropdown-item').forEach(item => { item.addEventListener('click', function() { const action = this.textContent.trim(); console.log('Instance action:', action); }); });
// Handle profile menu actions document.querySelectorAll('#profileMenu .dropdown-item').forEach(item => { item.addEventListener('click', function() { const action = this.textContent.trim(); console.log('Profile action:', action); }); }); </script></body></html>