TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
    <script type="text/javascript" src="../../script/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
    <title>Storage Pool Manager</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        .svg-icon {
            display: inline-flex;
            align-self: center;
        }.svg-icon svg {
            height:1em;
            width:1em;
        }
    </style>
</head>
<body>
    <div class="ui container">
        <div class="ui basic segment">
            <h3 class="ui header">
                Storage Pools
                <div class="sub header">Manage system and permission group storage pools</div>
            </h3>
        </div>
        <div class="ui stackable grid">
            <div class="six wide column">
                <p>Select a Storage Pool to edit</p>
                <select id="poolNameList" class="ui search fluid dropdown" onchange="updatePoolSelection(this.value)">
                    <option value="">Storage Pool</option>
                    
                </select>
                <div class="ui divider"></div>
                <div id="poolStorageList">

                </div>
                <button class="ui green fluid disabled button selectedOnly" onclick="editSelectedPool();"><i class="edit icon"></i> Edit Storage Pool</button>
                <div class="ui divider"></div>
                <div class="ui red segment">
                    <h4>Danger Zone</h4>
                    <p>The following buttons will unmount storage pool and remount them from configuration file.</p>
                    <button class="ui red basic fluid disabled button selectedOnly" style="margin-top: 8px;" onclick="reloadSelectedStoragePool();"><i class="refresh icon"></i> Reload Selected Pool</button>
                    <button class="ui red basic fluid button" style="margin-top: 8px;" onclick="reloadAllStoragePool();"><i class="refresh icon"></i> Reload All Storage Pool</button>
                </div>
               
            </div>
            <div class="ten wide column">
                <p>Current Storage Pool Structure</p>
                <div id="poolList" class="ui list">
                    <div class="item">
                        <i class="spinner icon"></i>
                        <div class="content">
                        <div class="header">Loading</div>
                        <div class="description"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       
        
    </div>
    <div id="ok" class="ui basic modal">
        <div class="ui icon header">
            <i class="green checkmark icon"></i>
            Storage Pool Reloaded
        </div>
        <div class="content" align="center">
            <p>Storage Pool has successfully reloaded.</p>
        </div>
        <div class="actions">
            <div class="ui green ok inverted button">
            <i class="checkmark icon"></i>
            OK
            </div>
        </div>
    </div>
    <script>
        var selectedStoragePool = "";
        var storagePoolList = [];
        //Create all elements
        $(".ui.dropdown").dropdown();

        //Render the poollist
        loadStoragePoolList();

        function loadStoragePoolList(){
            $("#poolList").html("");
            $.get("../../system/storage/pool/list", function(data){
                if (data.error !== undefined){
                    $("#poolList").html("<p>" + data.error + "</p>");
                }else{
                    $("#poolNameList").html(`<option value="">Storage Pools</option>`);
                    storagePoolList = data;
                    data.forEach(storagePool => {
                        //Add Options
                        $("#poolNameList").append(`<option value="${storagePool.Owner}">${storagePool.Owner}</option>`);

                        //Render the pool diagram
                        let desc = "";
                        if (storagePool.Owner == "system"){
                            desc = " (Base Pool)"
                        }
                        let spHTML = `<div class="item">
                        <i class="server icon"></i>
                        <div class="content">
                        <div class="header">${storagePool.Owner + desc}</div>
                        <div class="description">Other's Permission: ${storagePool.OtherPermission}</div>
                        <div class="list">`;

                        if (storagePool.Storages !== null && storagePool.Storages.length > 0){
                            storagePool.Storages.forEach(fsh => {
                                var diskIcon = `grey disk icon`;
                                if (fsh.Hierarchy == "backup"){
                                    diskIcon = `green refresh icon`
                                }else if (fsh.Hierarchy == "user"){
                                    diskIcon = `blue disk icon`;
                                }else if (fsh.Hierarchy == "share"){
                                    diskIcon = `violet share alternate icon`
                                }
                                spHTML += (`<div class="item">
                                <i class="${diskIcon}"></i>
                                <div class="content">
                                    <div class="header">${fsh.Name} (${fsh.UUID}:/)</div>
                                    <div class="description">
                                    <div class="ui breadcrumb">
                                        Mount Point: ${fsh.Path}
                                        <span class="divider">|</span>
                                        Hierarchy: ${fsh.Hierarchy}
                                        <span class="divider">|</span>
                                        ReadOnly: ${fsh.ReadOnly}
                                    </div>
                                    </div>
                                </div>
                                </div>`);
                            });
                        }else{
                            spHTML += `<div class="item">
                                <i class="remove icon"></i>
                                <div class="content">No storage found under this Storage Pool</div>`;
                        }
                            
                        spHTML += (`
                            </div>
                            </div>
                        </div>`);

                        $("#poolList").append(spHTML);
                    });
                }
            }); 
        }

        function updatePoolSelection(value){
            $("#poolStorageList").html("");
            $.get("../../system/storage/pool/list", function(data){
                if (data.error !== undefined){
                    $("#poolList").html("<p>" + data.error + "</p>");
                }else{
                    //List the fshandlers inside this storage pool
                    var targetStoragePool = undefined;
                    storagePoolList = data;
                    data.forEach(sp => {
                        if (sp.Owner == value){
                            targetStoragePool = sp;
                        }
                    });

                    if (targetStoragePool == undefined){
                        $("#poolStorageList").html(`
                            <div class="ui red inverted segment">
                                <i class="remove icon"></i>Selected Storage Pool Not Found
                            </div>
                        `);
                        $(".selectedOnly").addClass('disabled');
                        return
                    }
                    
                    selectedStoragePool = value;
                    $(".selectedOnly").removeClass('disabled');

                }
            });
        }

        function editSelectedPool(){
            if (selectedStoragePool == ""){
                console.log("Pool not selected: ", selectedStoragePool)
                return
            }

            ao_module_newfw({
                url:"SystemAO/storage/poolEditor.html#" + encodeURIComponent(selectedStoragePool),
                width: 530,
                height: 740,
                appicon: "SystemAO/storage/img/icon.png",
                title: "Edit Storage Pool",
                callback: "finishCreateHandler",
                parent: ao_module_windowID
            });
        }

        function finishCreateHandler(state){
            //Reload the list
            loadStoragePoolList();
        }


        function reloadAllStoragePool(){
            if (confirm("THIS WILL CRASH THE SYSTEM IF YOUR CONFIG IS INVALID. CONFIRM?")){
                    //OK. Reload storage pool for this pool
                    $.ajax({
                    url: "../../system/storage/pool/reload?pool=1eb201a3-d0f6-6630-5e6d-2f40480115c5",
                    success: function(data){
                        console.log(data);
                        loadStoragePoolList();
                        $("#ok").modal("show");
                    },
                    error: function(){
                        loadStoragePoolList();
                    }
                });
                
            }
        }


        function reloadSelectedStoragePool(){
            if (selectedStoragePool != ""){
                if (confirm("Confirm reloading " + selectedStoragePool + " storage pool?")){
                    //OK. Reload storage pool for this pool
                    $.ajax({
                        url: "../../system/storage/pool/reload",
                        data: {pool: selectedStoragePool},
                        success: function(data){
                            console.log(data);
                            loadStoragePoolList();
                            $("#ok").modal("show");
                        },
                        error: function(){
                            loadStoragePoolList();
                        }
                    });
                }
            }   
        }
    </script>
</body>

</html>