bokoFs/web/components/raid.html

<div class="ts-content">
    <div class="ts-container is-padded">
        <div class="ts-grid mobile:is-stacked">
            <div class="column is-6-wide">
                <div id="raid_array_list" class="ts-menu is-start-icon is-separated">
                    <a class="item">
                        <span class="ts-icon is-user-icon"></span> 使用者
                    </a>
                    <a class="item is-active">
                        <span class="ts-icon is-house-icon"></span> 首頁
                    </a>
                    <a class="item">
                        <span class="ts-icon is-newspaper-icon"></span> 新聞
                    </a>
                </div>
                <div class="ts-divider has-top-spaced-small"></div>
                <div class="ts-content is-center-aligned">
                    <button class="ts-button is-start-icon is-positive is-circular">
                        <span class="ts-icon is-circle-plus-icon" style="color: var(--ts-positive-500);"></span>
                        <span i18n>Create RAID
                        // 新增陣列
                        </span>
                    </button>
                    <button class="ts-button is-start-icon is-positive is-circular">
                        <span class="ts-icon is-rotate-icon" style="color: var(--ts-primary-500);"></span>
                        <span i18n>Assemble
                        // 重組陣列
                        </span>
                    </button>
                </div>
            </div>
            <div class="column is-fluid">
                <div id="raid_details">
                    
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    

    function initRAIDDeviceList(){
        // Utility function to convert bytes to human-readable format
        function bytesToHumanReadable(bytes) {
            const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
            if (bytes === 0) return '0 B';
            const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
            return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i];
        }
        $.ajax({
            url: './api/raid/list',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                $('#raid_array_list').html("");
                if (data.error != undefined){
                    // Handle error response
                    console.error('Error fetching RAID devices:', data.error);
                    $('#raid_array_list').append('<div class="ts-text is-error">Error: ' + data.error + '</div>');
                }else{
                    let isSyncing = false;
                    data.forEach((raid, index) => {
                        // Add a new menu item for each RAID array
                        let icon = '';
                        if (raid.State.includes('clean') && !raid.State.includes('sync')) {
                            icon = '<span class="ts-icon is-check-icon" style="color: var(--ts-positive-500);"></span>';
                        } else if (raid.State.includes('sync')) {
                            isSyncing = true;
                            icon = '<span class="ts-icon is-spinning is-rotate-icon" style="color: var(--ts-positive-500);"></span>';
                        } else if (raid.State.includes('degraded')) {
                            icon = '<span class="ts-icon is-triangle-exclamation-icon" style="color: var(--ts-warning-600);"></span>';
                        } else if (raid.State.includes('fail')) {
                            icon = '<span class="ts-icon is-circle-xmark-icon" style="color: var(--ts-negative-500);"></span>';
                        } else {
                            icon = '<span class="ts-icon is-question-icon" style="color: var(--ts-gray-500);"></span>';
                        }
                        const menuItem = `
                            <a class="raid-array item ${index==0?'is-active':''}" id="raid_menu_${index}" onclick="showRAIDDetails(${index})">
                                ${icon}
                                <div class="ts-content is-dense">
                                    <div>
                                        <span class="ts-text is-heavy">${raid.DevicePath}</span> | ${raid.RaidLevel.toUpperCase()}
                                    </div>
                                    <div class="ts-text is-tiny has-top-spaced-small">
                                        ${raid.Name}
                                    </div>
                                </div>
                            </a>
                        `;
                        $('#raid_array_list').append(menuItem);
                        
                        // Add a hidden div for each RAID array's details
                        const raidDetails = `
                            <div id="raid_details_${index}" class="raid-details" style="display: none ;">
                                <div class="ts-box">
                                    <div class="ts-content is-padded">
                                        <div class="ts-header is-start-icon">
                                            ${icon}
                                            ${raid.DevicePath} | ${raid.RaidLevel.toUpperCase()}
                                        </div>
                                        <div class="ts-text is-description">
                                            ${raid.UUID}<br>
                                            ${raid.Name}
                                        </div>
                                        <div class="ts-text">
                                            <span i18n> State
                                                // 狀態
                                            </span>: ${raid.State}<br>
                                            <div class="sync-progress has-top-spaced-small ${isSyncing?'need-update-raid-sync-progress':''}" devname="${raid.DevicePath}" style="display: ${isSyncing?"auto":"none"};">
                                                <div class="ts-progress is-processing">
                                                <div class="bar" style="--value: 0">
                                                        <div class="text">0%</div>
                                                    </div>
                                                </div>
                                                <div class="ts-text is-description has-top-spaced-small">
                                                    <span i18n> Synchronized
                                                        // 已處理</span>
                                                    <span class="processed_blocks"></span>
                                                    <span>/</span>
                                                    <span class="total_blocks"></span>
                                                    <span i18n> blocks
                                                        // 個區塊
                                                    </span><br>
                                                    <!-- <span i18n> Speed
                                                        // 速度
                                                    </span>: <span class="speed"></span><br>
                                                    <span i18n> Expected Time
                                                        // 預估時間
                                                    </span>: <span class="expected_time"></span>
                                                    -->
                                                </div>
                                            </div>
                                            <span i18n> Array Size
                                                // 陣列大小
                                            </span>: ${bytesToHumanReadable(raid.ArraySize * 1024)}<br>
                                            <span i18n> Created
                                                // 建立時間
                                            </span>: <span>${new Date(raid.CreationTime).toLocaleString()}</span><br>
                                        </div>
                                        <table class="ts-table is-single-line has-top-spaced-large">
                                            <thead>
                                                <tr>
                                                    <th i18n>Disk Status
                                                        // 磁碟狀態
                                                    </th>
                                                    <th i18n>Counts 
                                                        // 數量
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td i18n> Active Devices
                                                        // 啟用的磁碟
                                                    </td>
                                                    <td>${raid.ActiveDevices}</td>
                                                </tr>
                                                <tr>
                                                    <td i18n> Working Devices
                                                        // 工作中的磁碟
                                                    </td>
                                                    <td>${raid.WorkingDevices}</td>
                                                </tr>
                                                <tr>
                                                    <td i18n> Failed Devices
                                                        // 故障的磁碟
                                                    </td>
                                                    <td>${raid.FailedDevices}</td>
                                                </tr>
                                                <tr>
                                                    <td i18n> Spare Devices
                                                        // 備用磁碟
                                                    </td>
                                                    <td>${raid.SpareDevices}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="ts-box is-padded has-top-spaced-small">
                                    <div class="ts-content">
                                        
                                    </div>
                                </div>
                            </div>
                        `;
                        $('#raid_details').append(raidDetails);
                    });
                }

                relocale(); // Recalculate layout
                syncProgressTicker(); // Start the sync progress ticker
            },
            error: function(xhr, status, error) {
                console.error('Error fetching RAID devices:', error);
            }
        });
    }

    initRAIDDeviceList();

    //Create a ticker to check for RAID sync progress
    function syncProgressTicker(){
        let syncProgressTracker = $(".need-update-raid-sync-progress");
        if (syncProgressTracker.length > 0){
            syncProgressTracker.each(function(){
                let devname = $(this).attr("devname");
                $.ajax({
                    url: './api/raid/sync?dev=' + devname,
                    type: 'GET',
                    dataType: 'json',
                    data: { devname: devname },
                    success: function(data) {
                        if (data.error != undefined){
                            // Handle error response
                            console.error('Error fetching RAID sync progress:', data.error);
                            //Refresh the RAID list
                            initRAIDDeviceList();
                        }else{
                            let progress = parseFloat(data.ResyncPercent);
                            let total_blocks = parseInt(data.TotalBlocks);
                            let processed_blocks = parseInt(data.CompletedBlocks);
                            let expected_time = data.ExpectedTime;
                            let speed = data.Speed;

                            $(`.sync-progress[devname="${devname}"] .bar`).css('--value', progress);
                            $(`.sync-progress[devname="${devname}"] .bar .text`).text(`${progress.toFixed(1)}%`);
                            $(`.sync-progress[devname="${devname}"] .processed_blocks`).text(processed_blocks);
                            $(`.sync-progress[devname="${devname}"] .total_blocks`).text(total_blocks);
                            //$(`.sync-progress[devname="${devname}"] .ts-text.is-description .speed`).text(speed);
                            //$(`.sync-progress[devname="${devname}"] .ts-text.is-description .expected_time`).text(expected_time);
                            
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('Error fetching RAID sync progress:', error);
                    }
                });
            });
        }
    }

    setInterval(syncProgressTicker, 5000); // Check every 5 seconds

    function showRAIDDetails(index) {
        $('.raid-details').hide(); // Hide all RAID details
        $(`#raid_details_${index}`).show(); // Show the selected RAID details
        $('.raid-array.is-active').removeClass('is-active'); // Remove active class from all menu items
        $(`#raid_menu_${index}`).addClass('is-active'); // Add active class to the selected menu item
        relocale(); // Recalculate layout
    }
</script>