feat: introduce overlay dialog component

public/scripts/components/ClusterViewComponent.js

@@ -33,6 +33,9 @@ class ClusterViewComponent extends Component {
         
         // Track if we've already loaded data to prevent unnecessary reloads
         this.dataLoaded = false;
+        
+        // Initialize overlay dialog
+        this.overlayDialog = null;
     }
 
     mount() {
@@ -50,6 +53,9 @@ class ClusterViewComponent extends Component {
         // Set up deploy button event listener
         this.setupDeployButton();
         
+        // Initialize overlay dialog
+        this.initializeOverlayDialog();
+        
         // Only load data if we haven't already or if the view model is empty
         const members = this.viewModel.get('members');
         const shouldLoadData = true; // always perform initial refresh quickly
@@ -106,6 +112,32 @@ class ClusterViewComponent extends Component {
         }
     }
     
+    initializeOverlayDialog() {
+        // Create overlay container if it doesn't exist
+        let overlayContainer = document.getElementById('cluster-overlay-dialog');
+        if (!overlayContainer) {
+            overlayContainer = document.createElement('div');
+            overlayContainer.id = 'cluster-overlay-dialog';
+            overlayContainer.className = 'overlay-dialog';
+            document.body.appendChild(overlayContainer);
+        }
+
+        // Create and initialize the overlay dialog component
+        if (!this.overlayDialog) {
+            const overlayVM = new ViewModel();
+            this.overlayDialog = new OverlayDialogComponent(overlayContainer, overlayVM, this.eventBus);
+            this.overlayDialog.mount();
+        }
+    }
+
+    showConfirmationDialog(options) {
+        if (!this.overlayDialog) {
+            this.initializeOverlayDialog();
+        }
+        
+        this.overlayDialog.show(options);
+    }
+    
     async handleDeploy() {
         logger.debug('ClusterViewComponent: Deploy button clicked, opening firmware upload drawer...');
         
@@ -113,7 +145,14 @@ class ClusterViewComponent extends Component {
         const filteredMembers = this.clusterMembersComponent ? this.clusterMembersComponent.getFilteredMembers() : [];
         
         if (!filteredMembers || filteredMembers.length === 0) {
-            alert('No nodes available for firmware deployment. Please ensure cluster members are loaded and visible.');
+            this.showConfirmationDialog({
+                title: 'No Nodes Available',
+                message: 'No nodes available for firmware deployment. Please ensure cluster members are loaded and visible.',
+                confirmText: 'OK',
+                cancelText: null,
+                onConfirm: () => {},
+                onCancel: null
+            });
             return;
         }