// RAIDGuard X - Complete GUI Recreation // Mimics Java Swing frmMain.java appearance export component AppWindow inherits Window { title: "RAIDGuard X - DTR RAID Admin"; width: 1280px; height: 800px; background: #f0f0f0; callback connect_server(); callback refresh_data(); callback menu_about(); callback menu_exit(); callback menu_add_controller(); in-out property connected: false; in-out property is_loading: false; in-out property status_text: "Disconnected"; in-out property current_tab: 0; in-out property controller_count: 0; in-out property raid_count: 0; in-out property disk_count: 0; in-out property auto_refresh: true; in-out property selected_controller_index: 0; in-out property ctrl1_name: "RAID Controller"; in-out property ctrl1_ip: "192.168.1.100"; in-out property ctrl1_status: "Online"; in-out property ctrl1_model: "Accusys RAID 9000"; in-out property ctrl1_firmware: "v3.8.0"; in-out property ctrl1_sn: "ACC123456789"; in-out property ctrl1_vendor: "Accusys"; in-out property ctrl2_name: "-"; in-out property ctrl2_ip: "-"; in-out property ctrl2_status: "-"; in-out property ctrl2_model: "-"; in-out property ctrl2_firmware: "-"; in-out property ctrl2_sn: "-"; in-out property ctrl2_vendor: "-"; in-out property raid1_name: "RAID-01"; in-out property raid1_level: "RAID 5"; in-out property raid1_status: "Normal"; in-out property raid1_capacity: "2.0 TB"; in-out property raid1_usage: "45%"; in-out property raid1_usage_pct: 45.0; in-out property raid2_name: "RAID-02"; in-out property raid2_level: "RAID 6"; in-out property raid2_status: "Normal"; in-out property raid2_capacity: "4.0 TB"; in-out property raid2_usage: "30%"; in-out property raid2_usage_pct: 30.0; in-out property disk1_loc: "Enclosure 0 Slot 0"; in-out property disk1_model: "ST3000VX000"; in-out property disk1_status: "Online"; in-out property disk1_capacity: "3.0 TB"; in-out property disk1_vendor: "Seagate"; in-out property disk2_loc: "Enclosure 0 Slot 1"; in-out property disk2_model: "ST3000VX000"; in-out property disk2_status: "Online"; in-out property disk2_capacity: "3.0 TB"; in-out property disk2_vendor: "Seagate"; in-out property disk3_loc: "Enclosure 0 Slot 2"; in-out property disk3_model: "ST3000VX000"; in-out property disk3_status: "Online"; in-out property disk3_capacity: "3.0 TB"; in-out property disk3_vendor: "Seagate"; in-out property disk4_loc: "Enclosure 0 Slot 3"; in-out property disk4_model: "ST3000VX000"; in-out property disk4_status: "Online"; in-out property disk4_capacity: "3.0 TB"; in-out property disk4_vendor: "Seagate"; in-out property evtime1: "2026/03/29-10:30:00"; in-out property evlevel1: "Info"; in-out property evmsg1: "Controller started successfully"; in-out property evsource1: "System"; in-out property evtime2: "2026/03/29-10:25:00"; in-out property evlevel2: "Info"; in-out property evmsg2: "Disk online"; in-out property evsource2: "Disk"; in-out property evtime3: "2026/03/29-10:20:00"; in-out property evlevel3: "Warning"; in-out property evmsg3: "Temperature warning"; in-out property evsource3: "Enclosure"; in-out property evtime4: "2026/03/29-10:15:00"; in-out property evlevel4: "Info"; in-out property evmsg4: "RAID-01 status: Normal"; in-out property evsource4: "RAID"; in-out property evtime5: "2026/03/29-10:10:00"; in-out property evlevel5: "Info"; in-out property evmsg5: "Power supply online"; in-out property evsource5: "Power"; VerticalLayout { spacing: 0; // Menu Bar Rectangle { height: 24px; background: #f0f0f0; HorizontalLayout { spacing: 16px; Text { text: "File"; font-weight: 500; color: #000000; font_size: 13px; } Text { text: "Controller"; font-weight: 500; color: #000000; font_size: 13px; } Text { text: "Tools"; font-weight: 500; color: #000000; font_size: 13px; } Text { text: "Help"; font-weight: 500; color: #000000; font_size: 13px; } } } // Toolbar Rectangle { height: 40px; background: #e8e8e8; HorizontalLayout { spacing: 8px; // Add button with icon Rectangle { width: 32px; height: 32px; Image { source: @image-url("../icons/func-additem.png"); width: 24px; height: 24px; } } // Remove button with icon Rectangle { width: 32px; height: 32px; Image { source: @image-url("../icons/func-deleteitem.png"); width: 24px; height: 24px; } } Rectangle { width: 10px; } // Create button with icon Rectangle { width: 90px; height: 32px; background: #4a90d9; border-radius: 3px; HorizontalLayout { padding: 4px; Image { source: @image-url("../icons/func-createarray.png"); width: 20px; height: 20px; } Text { text: "Create"; font_size: 12px; color: white; vertical-alignment: center; } } } // Delete button with icon Rectangle { width: 80px; height: 32px; background: #d94a4a; border-radius: 3px; HorizontalLayout { padding: 4px; Image { source: @image-url("../icons/func-deletearray.png"); width: 20px; height: 20px; } Text { text: "Delete"; font_size: 12px; color: white; vertical-alignment: center; } } } Rectangle { width: 10px; } // Email button with icon Rectangle { width: 80px; height: 32px; background: #ffffff; border-radius: 3px; HorizontalLayout { padding: 4px; Image { source: @image-url("../icons/func-email.png"); width: 20px; height: 20px; } Text { text: "Email"; font_size: 12px; color: #000000; vertical-alignment: center; } } } // Settings button with icon Rectangle { width: 80px; height: 32px; background: #ffffff; border-radius: 3px; HorizontalLayout { padding: 4px; Image { source: @image-url("../icons/func-settings.png"); width: 20px; height: 20px; } Text { text: "Settings"; font_size: 12px; color: #000000; vertical-alignment: center; } } } } } // Main Content HorizontalLayout { spacing: 0; height: 1px; // Left Panel - Host List Rectangle { width: 280px; background: #ffffff; VerticalLayout { padding: 0; spacing: 0; Rectangle { height: 30px; background: #d0d0d0; Text { text: "Host List"; font-weight: 600; font_size: 13px; color: #000000; vertical-alignment: center; } } Rectangle { height: 24px; background: #e0e0e0; HorizontalLayout { spacing: 4px; Text { text: "Host"; font_size: 11px; font-weight: 600; width: 70px; } Text { text: "IP"; font_size: 11px; font-weight: 600; width: 90px; } Text { text: "Status"; font_size: 11px; font-weight: 600; width: 60px; } } } Rectangle { height: 28px; background: #c0c0c0; HorizontalLayout { spacing: 4px; Text { text: ctrl1_name; font_size: 11px; width: 70px; } Text { text: ctrl1_ip; font_size: 11px; width: 90px; } Text { text: ctrl1_status; font_size: 11px; color: #008000; width: 60px; } } } Rectangle { height: 28px; background: #ffffff; HorizontalLayout { spacing: 4px; Text { text: ctrl2_name; font_size: 11px; width: 70px; } Text { text: ctrl2_ip; font_size: 11px; width: 90px; } Text { text: ctrl2_status; font_size: 11px; width: 60px; } } } Rectangle { } } } // Right Panel - Tabs VerticalLayout { spacing: 0; // Tab Header Rectangle { height: 36px; background: #d0d0d0; HorizontalLayout { spacing: 0; Rectangle { width: 120px; background: current_tab == 0 ? #ffffff : #d0d0d0; Text { text: "Controller"; font_size: 13px; font-weight: current_tab == 0 ? 600 : 400; horizontal-alignment: center; vertical-alignment: center; } } Rectangle { width: 100px; background: current_tab == 1 ? #ffffff : #d0d0d0; Text { text: "RAID"; font_size: 13px; font-weight: current_tab == 1 ? 600 : 400; horizontal-alignment: center; vertical-alignment: center; } } Rectangle { width: 100px; background: current_tab == 2 ? #ffffff : #d0d0d0; Text { text: "Drives"; font_size: 13px; font-weight: current_tab == 2 ? 600 : 400; horizontal-alignment: center; vertical-alignment: center; } } Rectangle { width: 100px; background: current_tab == 3 ? #ffffff : #d0d0d0; Text { text: "Event"; font_size: 13px; font-weight: current_tab == 3 ? 600 : 400; horizontal-alignment: center; vertical-alignment: center; } } } } // Tab Content Rectangle { background: #ffffff; height: 1px; // Controller Tab if current_tab == 0: VerticalLayout { spacing: 12px; Rectangle { background: #f0f0f0; VerticalLayout { spacing: 8px; Text { text: "Controller Information"; font-weight: 600; font_size: 14px; } HorizontalLayout { spacing: 12px; VerticalLayout { spacing: 6px; Text { text: "Controller Name:"; font_size: 12px; font-weight: 600; horizontal-alignment: right; } Text { text: "Model Name:"; font_size: 12px; font-weight: 600; horizontal-alignment: right; } Text { text: "Serial Number:"; font_size: 12px; font-weight: 600; horizontal-alignment: right; } Text { text: "Firmware Version:"; font_size: 12px; font-weight: 600; horizontal-alignment: right; } Text { text: "BIOS Version:"; font_size: 12px; font-weight: 600; horizontal-alignment: right; } Text { text: "Status:"; font_size: 12px; font-weight: 600; horizontal-alignment: right; } } VerticalLayout { spacing: 6px; Text { text: ctrl1_name; font_size: 12px; } Text { text: ctrl1_model; font_size: 12px; } Text { text: ctrl1_sn; font_size: 12px; } Text { text: ctrl1_firmware; font_size: 12px; } Text { text: "1.2.3.4"; font_size: 12px; } Text { text: ctrl1_status; font_size: 12px; color: #008000; } } } } } } // RAID Tab if current_tab == 1: VerticalLayout { spacing: 12px; Rectangle { background: #f0f0f0; VerticalLayout { spacing: 8px; HorizontalLayout { Text { text: raid1_name; font-weight: 600; font_size: 14px; } Text { text: raid1_status; font_size: 12px; color: #008000; } } HorizontalLayout { spacing: 12px; VerticalLayout { spacing: 6px; Text { text: "RAID Level:"; font_size: 12px; font-weight: 600; horizontal-alignment: right; } Text { text: "Capacity:"; font_size: 12px; font-weight: 600; horizontal-alignment: right; } Text { text: "Usage:"; font_size: 12px; font-weight: 600; horizontal-alignment: right; } } VerticalLayout { spacing: 6px; Text { text: raid1_level; font_size: 12px; } Text { text: raid1_capacity; font_size: 12px; } Text { text: raid1_usage; font_size: 12px; } } } } } Rectangle { background: #f0f0f0; VerticalLayout { spacing: 8px; HorizontalLayout { Text { text: raid2_name; font_weight: 600; font_size: 14px; } Text { text: raid2_status; font_size: 12px; color: #008000; } } HorizontalLayout { spacing: 12px; VerticalLayout { spacing: 6px; Text { text: "RAID Level:"; font_size: 12px; font-weight: 600; horizontal-alignment: right; } Text { text: "Capacity:"; font_size: 12px; font-weight: 600; horizontal-alignment: right; } Text { text: "Usage:"; font_size: 12px; font-weight: 600; horizontal-alignment: right; } } VerticalLayout { spacing: 6px; Text { text: raid2_level; font_size: 12px; } Text { text: raid2_capacity; font_size: 12px; } Text { text: raid2_usage; font_size: 12px; } } } } } } // Drives Tab if current_tab == 2: VerticalLayout { spacing: 4px; Rectangle { height: 28px; background: #e0e0e0; HorizontalLayout { spacing: 16px; Text { text: "Location"; font_size: 11px; font-weight: 600; width: 140px; } Text { text: "Vendor"; font_size: 11px; font-weight: 600; width: 100px; } Text { text: "Model"; font_size: 11px; font-weight: 600; width: 160px; } Text { text: "Capacity"; font_size: 11px; font-weight: 600; width: 80px; } Text { text: "Status"; font_size: 11px; font-weight: 600; width: 80px; } } } Rectangle { height: 26px; background: #f0f0f0; HorizontalLayout { spacing: 16px; Text { text: disk1_loc; font_size: 11px; width: 140px; } Text { text: disk1_vendor; font_size: 11px; width: 100px; } Text { text: disk1_model; font_size: 11px; width: 160px; } Text { text: disk1_capacity; font_size: 11px; width: 80px; } Text { text: disk1_status; font_size: 11px; color: #008000; width: 80px; } } } Rectangle { height: 26px; background: #ffffff; HorizontalLayout { spacing: 16px; Text { text: disk2_loc; font_size: 11px; width: 140px; } Text { text: disk2_vendor; font_size: 11px; width: 100px; } Text { text: disk2_model; font_size: 11px; width: 160px; } Text { text: disk2_capacity; font_size: 11px; width: 80px; } Text { text: disk2_status; font_size: 11px; color: #008000; width: 80px; } } } Rectangle { height: 26px; background: #f0f0f0; HorizontalLayout { spacing: 16px; Text { text: disk3_loc; font_size: 11px; width: 140px; } Text { text: disk3_vendor; font_size: 11px; width: 100px; } Text { text: disk3_model; font_size: 11px; width: 160px; } Text { text: disk3_capacity; font_size: 11px; width: 80px; } Text { text: disk3_status; font_size: 11px; color: #008000; width: 80px; } } } Rectangle { height: 26px; background: #ffffff; HorizontalLayout { spacing: 16px; Text { text: disk4_loc; font_size: 11px; width: 140px; } Text { text: disk4_vendor; font_size: 11px; width: 100px; } Text { text: disk4_model; font_size: 11px; width: 160px; } Text { text: disk4_capacity; font_size: 11px; width: 80px; } Text { text: disk4_status; font_size: 11px; color: #008000; width: 80px; } } } } // Event Tab if current_tab == 3: VerticalLayout { spacing: 4px; Rectangle { height: 28px; background: #e0e0e0; HorizontalLayout { spacing: 8px; Text { text: "Date/Time"; font_size: 11px; font-weight: 600; width: 140px; } Text { text: "Level"; font_size: 11px; font-weight: 600; width: 60px; } Text { text: "Source"; font_size: 11px; font-weight: 600; width: 80px; } Text { text: "Message"; font_size: 11px; font-weight: 600; width: 400px; } } } Rectangle { height: 24px; background: #f0f0f0; HorizontalLayout { spacing: 8px; Text { text: evtime1; font_size: 11px; width: 140px; } Text { text: evlevel1; font_size: 11px; color: #008000; width: 60px; } Text { text: evsource1; font_size: 11px; width: 80px; } Text { text: evmsg1; font_size: 11px; width: 400px; } } } Rectangle { height: 24px; background: #ffffff; HorizontalLayout { spacing: 8px; Text { text: evtime2; font_size: 11px; width: 140px; } Text { text: evlevel2; font_size: 11px; color: #008000; width: 60px; } Text { text: evsource2; font_size: 11px; width: 80px; } Text { text: evmsg2; font_size: 11px; width: 400px; } } } Rectangle { height: 24px; background: #f0f0f0; HorizontalLayout { spacing: 8px; Text { text: evtime3; font_size: 11px; width: 140px; } Text { text: evlevel3; font_size: 11px; color: #ffa500; width: 60px; } Text { text: evsource3; font_size: 11px; width: 80px; } Text { text: evmsg3; font_size: 11px; width: 400px; } } } Rectangle { height: 24px; background: #ffffff; HorizontalLayout { spacing: 8px; Text { text: evtime4; font_size: 11px; width: 140px; } Text { text: evlevel4; font_size: 11px; color: #008000; width: 60px; } Text { text: evsource4; font_size: 11px; width: 80px; } Text { text: evmsg4; font_size: 11px; width: 400px; } } } Rectangle { height: 24px; background: #f0f0f0; HorizontalLayout { spacing: 8px; Text { text: evtime5; font_size: 11px; width: 140px; } Text { text: evlevel5; font_size: 11px; color: #008000; width: 60px; } Text { text: evsource5; font_size: 11px; width: 80px; } Text { text: evmsg5; font_size: 11px; width: 400px; } } } } } } } // Status Bar Rectangle { height: 26px; background: #d0d0d0; HorizontalLayout { spacing: 16px; Text { text: "Controllers: " + controller_count; font_size: 11px; color: #000000; } Text { text: "RAID Arrays: " + raid_count; font_size: 11px; color: #000000; } Text { text: "Drives: " + disk_count; font_size: 11px; color: #000000; } Rectangle { width: 300px; } Text { text: "Auto Refresh: " + (auto_refresh ? "On" : "Off"); font_size: 11px; color: #000000; } Text { text: status_text; font_size: 11px; color: connected ? #008000 : #ff0000; } } } } }