mio dashboard
docs.kosmonum.space/mio/
v5
+381
-1
+381
-1
dashboard.html
+381
-1
dashboard.html
···
313
313
}
314
314
315
315
.cluster-card.expanded .cluster-content {
316
-
max-height: 1000px;
316
+
max-height: 2000px;
317
317
}
318
318
319
319
.instances-container {
···
390
390
border-radius: 2px;
391
391
}
392
392
393
+
.instance-menu-container {
394
+
position: relative;
395
+
flex-shrink: 0;
396
+
margin-left: auto;
397
+
}
398
+
399
+
.instance-menu-button {
400
+
background: none;
401
+
border: 2px solid #e8e8e8;
402
+
width: 32px;
403
+
height: 32px;
404
+
border-radius: 6px;
405
+
cursor: pointer;
406
+
font-size: 16px;
407
+
display: flex;
408
+
align-items: center;
409
+
justify-content: center;
410
+
transition: all 0.2s ease;
411
+
color: #999;
412
+
padding: 0;
413
+
}
414
+
415
+
.instance-menu-button:hover {
416
+
background: #f0f0f0;
417
+
border-color: #d0d0d0;
418
+
color: #1a1a1a;
419
+
}
420
+
421
+
.instance-menu-button:active {
422
+
background: #e0e0e0;
423
+
transform: scale(0.95);
424
+
}
425
+
426
+
.instance-menu-dropdown {
427
+
position: absolute;
428
+
top: 100%;
429
+
right: 0;
430
+
background: white;
431
+
border: 1px solid #e8e8e8;
432
+
border-radius: 8px;
433
+
margin-top: 6px;
434
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
435
+
min-width: 150px;
436
+
opacity: 0;
437
+
visibility: hidden;
438
+
transform: translateY(-8px);
439
+
transition: all 0.2s ease;
440
+
z-index: 1001;
441
+
}
442
+
443
+
.instance-menu-dropdown.active {
444
+
opacity: 1;
445
+
visibility: visible;
446
+
transform: translateY(0);
447
+
}
448
+
449
+
.instance-menu-item {
450
+
display: flex;
451
+
align-items: center;
452
+
gap: 10px;
453
+
padding: 10px 14px;
454
+
border: none;
455
+
background: none;
456
+
cursor: pointer;
457
+
font-size: 13px;
458
+
color: #1a1a1a;
459
+
width: 100%;
460
+
text-align: left;
461
+
transition: background 0.2s ease;
462
+
}
463
+
464
+
.instance-menu-item:hover {
465
+
background: #f9f9f9;
466
+
}
467
+
468
+
.instance-menu-item:first-child {
469
+
border-radius: 8px 8px 0 0;
470
+
}
471
+
472
+
.instance-menu-item:last-child {
473
+
border-radius: 0 0 8px 8px;
474
+
}
475
+
476
+
.instance-menu-item.danger {
477
+
color: #ef4444;
478
+
}
479
+
480
+
.instance-menu-item.danger:hover {
481
+
background: #fee2e2;
482
+
}
483
+
484
+
.instance-menu-item-icon {
485
+
font-size: 14px;
486
+
display: flex;
487
+
align-items: center;
488
+
justify-content: center;
489
+
width: 16px;
490
+
}
491
+
393
492
/* Responsive design */
394
493
@media (max-width: 1400px) {
395
494
.cluster-header {
···
433
532
434
533
.header h1 {
435
534
font-size: 24px;
535
+
}
536
+
537
+
.instance-item {
538
+
flex-wrap: wrap;
539
+
}
540
+
541
+
.metrics-container-small {
542
+
width: 100%;
543
+
order: 2;
544
+
margin-top: 8px;
545
+
gap: 12px;
546
+
}
547
+
548
+
.instance-name-small {
549
+
order: 1;
550
+
}
551
+
552
+
.instance-menu-container {
553
+
order: 3;
554
+
margin-left: 0;
555
+
margin-top: 8px;
436
556
}
437
557
}
438
558
</style>
···
555
675
</div>
556
676
</div>
557
677
</div>
678
+
<div class="instance-menu-container">
679
+
<button class="instance-menu-button" onclick="toggleInstanceMenu(event)">☰</button>
680
+
<div class="instance-menu-dropdown">
681
+
<button class="instance-menu-item" onclick="instanceAction('terminal', 'api-instance-1')">
682
+
<span class="instance-menu-item-icon">💻</span>
683
+
<span>Terminal</span>
684
+
</button>
685
+
<button class="instance-menu-item" onclick="instanceAction('backup', 'api-instance-1')">
686
+
<span class="instance-menu-item-icon">💾</span>
687
+
<span>Backup</span>
688
+
</button>
689
+
<button class="instance-menu-item" onclick="instanceAction('upgrade', 'api-instance-1')">
690
+
<span class="instance-menu-item-icon">⬆️</span>
691
+
<span>Upgrade</span>
692
+
</button>
693
+
<button class="instance-menu-item" onclick="instanceAction('reboot', 'api-instance-1')">
694
+
<span class="instance-menu-item-icon">🔄</span>
695
+
<span>Reboot</span>
696
+
</button>
697
+
<button class="instance-menu-item danger" onclick="instanceAction('delete', 'api-instance-1')">
698
+
<span class="instance-menu-item-icon">🗑️</span>
699
+
<span>Delete</span>
700
+
</button>
701
+
</div>
702
+
</div>
558
703
</div>
559
704
560
705
<div class="instance-item">
···
597
742
</div>
598
743
</div>
599
744
</div>
745
+
<div class="instance-menu-container">
746
+
<button class="instance-menu-button" onclick="toggleInstanceMenu(event)">☰</button>
747
+
<div class="instance-menu-dropdown">
748
+
<button class="instance-menu-item" onclick="instanceAction('terminal', 'api-instance-2')">
749
+
<span class="instance-menu-item-icon">💻</span>
750
+
<span>Terminal</span>
751
+
</button>
752
+
<button class="instance-menu-item" onclick="instanceAction('backup', 'api-instance-2')">
753
+
<span class="instance-menu-item-icon">💾</span>
754
+
<span>Backup</span>
755
+
</button>
756
+
<button class="instance-menu-item" onclick="instanceAction('upgrade', 'api-instance-2')">
757
+
<span class="instance-menu-item-icon">⬆️</span>
758
+
<span>Upgrade</span>
759
+
</button>
760
+
<button class="instance-menu-item" onclick="instanceAction('reboot', 'api-instance-2')">
761
+
<span class="instance-menu-item-icon">🔄</span>
762
+
<span>Reboot</span>
763
+
</button>
764
+
<button class="instance-menu-item danger" onclick="instanceAction('delete', 'api-instance-2')">
765
+
<span class="instance-menu-item-icon">🗑️</span>
766
+
<span>Delete</span>
767
+
</button>
768
+
</div>
769
+
</div>
600
770
</div>
601
771
602
772
<div class="instance-item">
···
639
809
</div>
640
810
</div>
641
811
</div>
812
+
<div class="instance-menu-container">
813
+
<button class="instance-menu-button" onclick="toggleInstanceMenu(event)">☰</button>
814
+
<div class="instance-menu-dropdown">
815
+
<button class="instance-menu-item" onclick="instanceAction('terminal', 'api-instance-3')">
816
+
<span class="instance-menu-item-icon">💻</span>
817
+
<span>Terminal</span>
818
+
</button>
819
+
<button class="instance-menu-item" onclick="instanceAction('backup', 'api-instance-3')">
820
+
<span class="instance-menu-item-icon">💾</span>
821
+
<span>Backup</span>
822
+
</button>
823
+
<button class="instance-menu-item" onclick="instanceAction('upgrade', 'api-instance-3')">
824
+
<span class="instance-menu-item-icon">⬆️</span>
825
+
<span>Upgrade</span>
826
+
</button>
827
+
<button class="instance-menu-item" onclick="instanceAction('reboot', 'api-instance-3')">
828
+
<span class="instance-menu-item-icon">🔄</span>
829
+
<span>Reboot</span>
830
+
</button>
831
+
<button class="instance-menu-item danger" onclick="instanceAction('delete', 'api-instance-3')">
832
+
<span class="instance-menu-item-icon">🗑️</span>
833
+
<span>Delete</span>
834
+
</button>
835
+
</div>
836
+
</div>
642
837
</div>
643
838
</div>
644
839
</div>
···
754
949
</div>
755
950
</div>
756
951
</div>
952
+
<div class="instance-menu-container">
953
+
<button class="instance-menu-button" onclick="toggleInstanceMenu(event)">☰</button>
954
+
<div class="instance-menu-dropdown">
955
+
<button class="instance-menu-item" onclick="instanceAction('terminal', 'db-primary')">
956
+
<span class="instance-menu-item-icon">💻</span>
957
+
<span>Terminal</span>
958
+
</button>
959
+
<button class="instance-menu-item" onclick="instanceAction('backup', 'db-primary')">
960
+
<span class="instance-menu-item-icon">💾</span>
961
+
<span>Backup</span>
962
+
</button>
963
+
<button class="instance-menu-item" onclick="instanceAction('upgrade', 'db-primary')">
964
+
<span class="instance-menu-item-icon">⬆️</span>
965
+
<span>Upgrade</span>
966
+
</button>
967
+
<button class="instance-menu-item" onclick="instanceAction('reboot', 'db-primary')">
968
+
<span class="instance-menu-item-icon">🔄</span>
969
+
<span>Reboot</span>
970
+
</button>
971
+
<button class="instance-menu-item danger" onclick="instanceAction('delete', 'db-primary')">
972
+
<span class="instance-menu-item-icon">🗑️</span>
973
+
<span>Delete</span>
974
+
</button>
975
+
</div>
976
+
</div>
757
977
</div>
758
978
759
979
<div class="instance-item">
···
796
1016
</div>
797
1017
</div>
798
1018
</div>
1019
+
<div class="instance-menu-container">
1020
+
<button class="instance-menu-button" onclick="toggleInstanceMenu(event)">☰</button>
1021
+
<div class="instance-menu-dropdown">
1022
+
<button class="instance-menu-item" onclick="instanceAction('terminal', 'db-replica-1')">
1023
+
<span class="instance-menu-item-icon">💻</span>
1024
+
<span>Terminal</span>
1025
+
</button>
1026
+
<button class="instance-menu-item" onclick="instanceAction('backup', 'db-replica-1')">
1027
+
<span class="instance-menu-item-icon">💾</span>
1028
+
<span>Backup</span>
1029
+
</button>
1030
+
<button class="instance-menu-item" onclick="instanceAction('upgrade', 'db-replica-1')">
1031
+
<span class="instance-menu-item-icon">⬆️</span>
1032
+
<span>Upgrade</span>
1033
+
</button>
1034
+
<button class="instance-menu-item" onclick="instanceAction('reboot', 'db-replica-1')">
1035
+
<span class="instance-menu-item-icon">🔄</span>
1036
+
<span>Reboot</span>
1037
+
</button>
1038
+
<button class="instance-menu-item danger" onclick="instanceAction('delete', 'db-replica-1')">
1039
+
<span class="instance-menu-item-icon">🗑️</span>
1040
+
<span>Delete</span>
1041
+
</button>
1042
+
</div>
1043
+
</div>
799
1044
</div>
800
1045
801
1046
<div class="instance-item">
···
836
1081
<div class="metric-bar-fill-small latency" style="width: 70%"></div>
837
1082
</div>
838
1083
</div>
1084
+
</div>
1085
+
</div>
1086
+
<div class="instance-menu-container">
1087
+
<button class="instance-menu-button" onclick="toggleInstanceMenu(event)">☰</button>
1088
+
<div class="instance-menu-dropdown">
1089
+
<button class="instance-menu-item" onclick="instanceAction('terminal', 'db-replica-2')">
1090
+
<span class="instance-menu-item-icon">💻</span>
1091
+
<span>Terminal</span>
1092
+
</button>
1093
+
<button class="instance-menu-item" onclick="instanceAction('backup', 'db-replica-2')">
1094
+
<span class="instance-menu-item-icon">💾</span>
1095
+
<span>Backup</span>
1096
+
</button>
1097
+
<button class="instance-menu-item" onclick="instanceAction('upgrade', 'db-replica-2')">
1098
+
<span class="instance-menu-item-icon">⬆️</span>
1099
+
<span>Upgrade</span>
1100
+
</button>
1101
+
<button class="instance-menu-item" onclick="instanceAction('reboot', 'db-replica-2')">
1102
+
<span class="instance-menu-item-icon">🔄</span>
1103
+
<span>Reboot</span>
1104
+
</button>
1105
+
<button class="instance-menu-item danger" onclick="instanceAction('delete', 'db-replica-2')">
1106
+
<span class="instance-menu-item-icon">🗑️</span>
1107
+
<span>Delete</span>
1108
+
</button>
839
1109
</div>
840
1110
</div>
841
1111
</div>
···
953
1223
</div>
954
1224
</div>
955
1225
</div>
1226
+
<div class="instance-menu-container">
1227
+
<button class="instance-menu-button" onclick="toggleInstanceMenu(event)">☰</button>
1228
+
<div class="instance-menu-dropdown">
1229
+
<button class="instance-menu-item" onclick="instanceAction('terminal', 'cache-1')">
1230
+
<span class="instance-menu-item-icon">💻</span>
1231
+
<span>Terminal</span>
1232
+
</button>
1233
+
<button class="instance-menu-item" onclick="instanceAction('backup', 'cache-1')">
1234
+
<span class="instance-menu-item-icon">💾</span>
1235
+
<span>Backup</span>
1236
+
</button>
1237
+
<button class="instance-menu-item" onclick="instanceAction('upgrade', 'cache-1')">
1238
+
<span class="instance-menu-item-icon">⬆️</span>
1239
+
<span>Upgrade</span>
1240
+
</button>
1241
+
<button class="instance-menu-item" onclick="instanceAction('reboot', 'cache-1')">
1242
+
<span class="instance-menu-item-icon">🔄</span>
1243
+
<span>Reboot</span>
1244
+
</button>
1245
+
<button class="instance-menu-item danger" onclick="instanceAction('delete', 'cache-1')">
1246
+
<span class="instance-menu-item-icon">🗑️</span>
1247
+
<span>Delete</span>
1248
+
</button>
1249
+
</div>
1250
+
</div>
956
1251
</div>
957
1252
958
1253
<div class="instance-item">
···
995
1290
</div>
996
1291
</div>
997
1292
</div>
1293
+
<div class="instance-menu-container">
1294
+
<button class="instance-menu-button" onclick="toggleInstanceMenu(event)">☰</button>
1295
+
<div class="instance-menu-dropdown">
1296
+
<button class="instance-menu-item" onclick="instanceAction('terminal', 'cache-2')">
1297
+
<span class="instance-menu-item-icon">💻</span>
1298
+
<span>Terminal</span>
1299
+
</button>
1300
+
<button class="instance-menu-item" onclick="instanceAction('backup', 'cache-2')">
1301
+
<span class="instance-menu-item-icon">💾</span>
1302
+
<span>Backup</span>
1303
+
</button>
1304
+
<button class="instance-menu-item" onclick="instanceAction('upgrade', 'cache-2')">
1305
+
<span class="instance-menu-item-icon">⬆️</span>
1306
+
<span>Upgrade</span>
1307
+
</button>
1308
+
<button class="instance-menu-item" onclick="instanceAction('reboot', 'cache-2')">
1309
+
<span class="instance-menu-item-icon">🔄</span>
1310
+
<span>Reboot</span>
1311
+
</button>
1312
+
<button class="instance-menu-item danger" onclick="instanceAction('delete', 'cache-2')">
1313
+
<span class="instance-menu-item-icon">🗑️</span>
1314
+
<span>Delete</span>
1315
+
</button>
1316
+
</div>
1317
+
</div>
998
1318
</div>
999
1319
1000
1320
<div class="instance-item">
···
1037
1357
</div>
1038
1358
</div>
1039
1359
</div>
1360
+
<div class="instance-menu-container">
1361
+
<button class="instance-menu-button" onclick="toggleInstanceMenu(event)">☰</button>
1362
+
<div class="instance-menu-dropdown">
1363
+
<button class="instance-menu-item" onclick="instanceAction('terminal', 'cache-3')">
1364
+
<span class="instance-menu-item-icon">💻</span>
1365
+
<span>Terminal</span>
1366
+
</button>
1367
+
<button class="instance-menu-item" onclick="instanceAction('backup', 'cache-3')">
1368
+
<span class="instance-menu-item-icon">💾</span>
1369
+
<span>Backup</span>
1370
+
</button>
1371
+
<button class="instance-menu-item" onclick="instanceAction('upgrade', 'cache-3')">
1372
+
<span class="instance-menu-item-icon">⬆️</span>
1373
+
<span>Upgrade</span>
1374
+
</button>
1375
+
<button class="instance-menu-item" onclick="instanceAction('reboot', 'cache-3')">
1376
+
<span class="instance-menu-item-icon">🔄</span>
1377
+
<span>Reboot</span>
1378
+
</button>
1379
+
<button class="instance-menu-item danger" onclick="instanceAction('delete', 'cache-3')">
1380
+
<span class="instance-menu-item-icon">🗑️</span>
1381
+
<span>Delete</span>
1382
+
</button>
1383
+
</div>
1384
+
</div>
1040
1385
</div>
1041
1386
</div>
1042
1387
</div>
···
1065
1410
dropdown.classList.toggle('active');
1066
1411
}
1067
1412
1413
+
function toggleInstanceMenu(event) {
1414
+
event.stopPropagation();
1415
+
const button = event.currentTarget;
1416
+
const dropdown = button.nextElementSibling;
1417
+
1418
+
// Close all other instance menus
1419
+
document.querySelectorAll('.instance-menu-dropdown.active').forEach(menu => {
1420
+
if (menu !== dropdown) {
1421
+
menu.classList.remove('active');
1422
+
}
1423
+
});
1424
+
1425
+
dropdown.classList.toggle('active');
1426
+
}
1427
+
1068
1428
function action(type, clusterName) {
1069
1429
const actionNames = {
1070
1430
'backup': 'Backup triggered',
···
1080
1440
});
1081
1441
}
1082
1442
1443
+
function instanceAction(type, instanceName) {
1444
+
const actionNames = {
1445
+
'terminal': 'Terminal opened',
1446
+
'backup': 'Backup started',
1447
+
'upgrade': 'Upgrade initiated',
1448
+
'reboot': 'Reboot initiated',
1449
+
'delete': 'Delete confirmation'
1450
+
};
1451
+
1452
+
alert(`${actionNames[type]} for "${instanceName}"`);
1453
+
1454
+
// Close the menu
1455
+
document.querySelectorAll('.instance-menu-dropdown').forEach(menu => {
1456
+
menu.classList.remove('active');
1457
+
});
1458
+
}
1459
+
1083
1460
// Close menus when clicking outside
1084
1461
document.addEventListener('click', () => {
1085
1462
document.querySelectorAll('.menu-dropdown.active').forEach(menu => {
1463
+
menu.classList.remove('active');
1464
+
});
1465
+
document.querySelectorAll('.instance-menu-dropdown.active').forEach(menu => {
1086
1466
menu.classList.remove('active');
1087
1467
});
1088
1468
});