diff --git a/dashboard.html b/dashboard.html
index 998089a..5f3f650 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -313,7 +313,7 @@
}
.cluster-card.expanded .cluster-content {
- max-height: 1000px;
+ max-height: 2000px;
}
.instances-container {
@@ -390,6 +390,105 @@
border-radius: 2px;
}
+ .instance-menu-container {
+ position: relative;
+ flex-shrink: 0;
+ margin-left: auto;
+ }
+
+ .instance-menu-button {
+ background: none;
+ border: 2px solid #e8e8e8;
+ width: 32px;
+ height: 32px;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+ color: #999;
+ padding: 0;
+ }
+
+ .instance-menu-button:hover {
+ background: #f0f0f0;
+ border-color: #d0d0d0;
+ color: #1a1a1a;
+ }
+
+ .instance-menu-button:active {
+ background: #e0e0e0;
+ transform: scale(0.95);
+ }
+
+ .instance-menu-dropdown {
+ position: absolute;
+ top: 100%;
+ right: 0;
+ background: white;
+ border: 1px solid #e8e8e8;
+ border-radius: 8px;
+ margin-top: 6px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ min-width: 150px;
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(-8px);
+ transition: all 0.2s ease;
+ z-index: 1001;
+ }
+
+ .instance-menu-dropdown.active {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+ }
+
+ .instance-menu-item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 14px;
+ border: none;
+ background: none;
+ cursor: pointer;
+ font-size: 13px;
+ color: #1a1a1a;
+ width: 100%;
+ text-align: left;
+ transition: background 0.2s ease;
+ }
+
+ .instance-menu-item:hover {
+ background: #f9f9f9;
+ }
+
+ .instance-menu-item:first-child {
+ border-radius: 8px 8px 0 0;
+ }
+
+ .instance-menu-item:last-child {
+ border-radius: 0 0 8px 8px;
+ }
+
+ .instance-menu-item.danger {
+ color: #ef4444;
+ }
+
+ .instance-menu-item.danger:hover {
+ background: #fee2e2;
+ }
+
+ .instance-menu-item-icon {
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 16px;
+ }
+
/* Responsive design */
@media (max-width: 1400px) {
.cluster-header {
@@ -434,6 +533,27 @@
.header h1 {
font-size: 24px;
}
+
+ .instance-item {
+ flex-wrap: wrap;
+ }
+
+ .metrics-container-small {
+ width: 100%;
+ order: 2;
+ margin-top: 8px;
+ gap: 12px;
+ }
+
+ .instance-name-small {
+ order: 1;
+ }
+
+ .instance-menu-container {
+ order: 3;
+ margin-left: 0;
+ margin-top: 8px;
+ }
}
@@ -555,6 +675,31 @@
+
@@ -597,6 +742,31 @@
+
@@ -639,6 +809,31 @@
+
@@ -754,6 +949,31 @@
+
@@ -796,6 +1016,31 @@
+
@@ -838,6 +1083,31 @@
+
@@ -953,6 +1223,31 @@
+
@@ -995,6 +1290,31 @@
+
@@ -1037,6 +1357,31 @@
+
@@ -1065,6 +1410,21 @@
dropdown.classList.toggle('active');
}
+ function toggleInstanceMenu(event) {
+ event.stopPropagation();
+ const button = event.currentTarget;
+ const dropdown = button.nextElementSibling;
+
+ // Close all other instance menus
+ document.querySelectorAll('.instance-menu-dropdown.active').forEach(menu => {
+ if (menu !== dropdown) {
+ menu.classList.remove('active');
+ }
+ });
+
+ dropdown.classList.toggle('active');
+ }
+
function action(type, clusterName) {
const actionNames = {
'backup': 'Backup triggered',
@@ -1080,11 +1440,31 @@
});
}
+ function instanceAction(type, instanceName) {
+ const actionNames = {
+ 'terminal': 'Terminal opened',
+ 'backup': 'Backup started',
+ 'upgrade': 'Upgrade initiated',
+ 'reboot': 'Reboot initiated',
+ 'delete': 'Delete confirmation'
+ };
+
+ alert(`${actionNames[type]} for "${instanceName}"`);
+
+ // Close the menu
+ document.querySelectorAll('.instance-menu-dropdown').forEach(menu => {
+ menu.classList.remove('active');
+ });
+ }
+
// Close menus when clicking outside
document.addEventListener('click', () => {
document.querySelectorAll('.menu-dropdown.active').forEach(menu => {
menu.classList.remove('active');
});
+ document.querySelectorAll('.instance-menu-dropdown.active').forEach(menu => {
+ menu.classList.remove('active');
+ });
});