TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478
							<!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;
        }
        .clickable{
            cursor: pointer;
            transition: opacity 0.1s ease-in-out;
        }
        .clickable:hover{
            opacity: 0.6;
        }
        .storagepool.active{
            background-color: #f7f7f7;
        }

        .reloadpoolBtn{
            position: absolute;
            right: 0.4em;
            top: 0.8em;
        }

        .statusTextWrapper{
            text-align: right;
            width: 100%;
            overflow: hidden;
            position: absolute;
            bottom: 0px;
            right: 0px;
            height: 3rem;
            display: flex;
            justify-content: end;
        }
        .statusText{
            opacity: 0.1;
            font-weight: lighter;
            font-size: 2em;
            align-self:flex-end;
            margin-bottom: 0.2em;
            margin-right: 0.2em;
            pointer-events: none;
            user-select: none;
        }
        
    </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 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>
        <div class="ui stackable grid">
            <div class="six wide column" style="border-right: 1px solid #e0e0e0;">
                <div id="poolNameList">

                </div>
                <div class="ui divider"></div>
                <div style="width: 100%;" align="center">
                    <button title="Reload All Storage Pools" onclick="reloadAllStoragePool();" class="circular basic red large ui icon button">
                        <i class="red refresh icon"></i>
                    </button>
                </div>
            </div>
            <div class="ten wide column">
                <div id="disklist">

                </div>
                <div class="ui divider"></div>
                <div style="width: 100%;" align="center">
                    <button onclick="newFsh();" title="Add Storage" class="circular basic large ui icon button">
                        <i class="add icon"></i>
                    </button>
                    <button onclick="bridgeFsh();" title="Bridge Storage" class="circular basic blue large ui icon button">
                        <i class="linkify icon"></i>
                    </button>
                </div>
            </div>
        </div>
    <script>
        var selectedStoragePool = "system";
        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(``);
                    storagePoolList = data;
                    data.forEach(storagePool => {
                       $("#poolNameList").append(` <div class="ui clickable storagepool segment" uuid="${storagePool.Owner}" onclick="loadThisPoolDetails('${storagePool.Owner}');">
                        <h4 class="ui header storagepool">
                            <img src="../../img/system/cluster.svg">
                            <div class="content">
                            ${storagePool.Owner}
                                <div class="sub header">
                                    Other's Permission: ${storagePool.OtherPermission}
                                </div>
                            </div>
                        </h4>
                        <button title="Reload Storage Pool" onclick="reloadStoagePool('${storagePool.Owner}', event);" class="circular tiny basic ui icon button reloadpoolBtn">
                            <i class="green refresh icon"></i>
                        </button>
                        </div>`);
                    });
                }

                loadThisPoolDetails(selectedStoragePool);
            }); 
        }

        function loadThisPoolDetails(owner){
            selectedStoragePool = owner;
            var targetStoragePool = undefined;
            for (var i = 0; i < storagePoolList.length; i++){
                let thisStoragePool = storagePoolList[i];
                if (thisStoragePool.Owner == owner){
                    targetStoragePool = thisStoragePool;
                    break;
                }
            }

           
            $(".storagepool.active").removeClass("active");
            $(".storagepool").each(function(){
                if ($(this).attr("uuid") == owner){
                    $(this).addClass("active");
                }
            })
        

            $("#disklist").html("");
            var storages = targetStoragePool.Storages;
            storages.forEach(function(storage){
                var color = "#8adb9d";
                var isReserved = false;
                var driveIcon = "drive-virtual.svg";
                var statusText = "Online";
                var statusClass = ""
                if (storage.UUID == "tmp" || storage.UUID == "user"){
                    isReserved = true;
                    color = "#fade8e";
                    statusClass = "online"
                }else if (storage.Closed == true){
                    color = "#7d7d7d";
                    statusText = "Stopped"
                    statusClass = "stopped"
                }

                if (storage.Hierarchy == "public"){
                    driveIcon = "drive-public.svg";
                }else if (isReserved){
                    driveIcon = "drive.svg";
                }
                var editButtons = `<button onclick="editFsh('${storage.UUID}','${owner}');" title="Edit Virtual Disk" onclick="" class="circular tiny basic ui icon button editButton">
                    <i class="edit icon"></i>
                </button>
                <button onclick="toggleFsh('${storage.UUID}','${owner}');" title="Toggle Virtual Disk IO" onclick="" class="circular tiny basic ui icon button shutdownButton">
                    <i class="power icon"></i>
                </button>
                <button onclick="removeFsh('${storage.UUID}','${owner}');" title="Remove Virtual Disk" onclick="" class="circular tiny basic ui icon button removeFshButton">
                    <i class="red remove icon"></i>
                </button>`;
                $("#disklist").append(`<div class="ui vdisk segment ${statusClass}" uuid="${storage.UUID}" style="border-left: 3px solid ${color};">
                    <h4 class="ui header storagepool">
                        <img src="../../img/system/${driveIcon}">
                        <div class="content">
                            ${storage.Name} (${storage.UUID}:/)
                            <div class="sub header" style="margin-top: 0.4em;">
                                <div class="ui list">
                                    <div class="item">Mount Point: ${storage.Path}</div>
                                    <div class="item">Hierarchy: ${storage.Hierarchy}</div>
                                    <div class="item">ReadOnly: ${storage.ReadOnly}</div>
                                </div>
                            </div>
                        </div>
                    </h4>
                    <div class="fshbuttons" style="position: absolute; top: 0.8em; right: 0.8em;">
                        ${isReserved?`<span style="color: #c9c9c9; pointer-events: none; user-select: none;">System Reserved</span>`:editButtons}
                    </div>
                    <div class="statusTextWrapper">
                        <div class="statusText">
                            ${statusText}
                        </div>
                    </div>
                    
                </div>`);
            });

            if (storages.length == 0){
                $("#disklist").append(`<div class="ui segment nostorage" style="border-left: 3px solid #303030;">
                    <h4 class="ui header storagepool">
                        <img src="../../img/system/drive-notfound.svg">
                        <div class="content">
                            No Storage
                            <div class="sub header" style="margin-top: 0.4em;">
                                No storage found under this Storage Pool
                            </div>
                        </div>
                    </h4>
                `);
            }

            $.get("../../system/storage/pool/listraw?target=" + owner, function(data){
                if (data.error == undefined){
                    data.forEach(function(storage){
                        console.log(storage);
                        let thisStorageUUID = storage.uuid;
                        let matchingDiskFound = false;
                        $(".vdisk").each(function(){
                            if ($(this).attr("uuid") == thisStorageUUID && !$(this).hasClass("stopped")){
                                $(this).addClass("online");
                                $(this).find(".statusText").text("Online");
                                matchingDiskFound = true;
                            }else if ($(this).hasClass("stopped")){
                                //Found but it has been shutted
                                matchingDiskFound = true;
                            }
                        });

                        if (!matchingDiskFound){
                            //Add offline disk record to the list
                            $("#disklist").append(`<div class="ui vdisk segment offline" uuid="${storage.uuid}" style="border-left: 3px solid #3e3a39;">
                                <h4 class="ui header storagepool">
                                    <img src="../../img/system/drive-notfound.svg">
                                    <div class="content">
                                        ${storage.name} (${storage.uuid}:/)
                                        <div class="sub header" style="margin-top: 0.4em;">
                                            <div class="ui list">
                                                <div class="item">Mount Point: ${storage.path}</div>
                                                <div class="item">Hierarchy: ${storage.hierarchy}</div>
                                                <div class="item">ReadOnly: ${storage.access=="readonly"}</div>
                                            </div>
                                        </div>
                                    </div>
                                </h4>
                                <div class="fshbuttons" style="position: absolute; top: 0.8em; right: 0.8em;">
                                    <button title="Edit Virtual Disk" onclick="editFsh('${storage.uuid}','${selectedStoragePool}');" class="circular tiny basic ui icon button">
                                        <i class="edit icon"></i>
                                    </button>
                                    <button onclick="removeFsh('${storage.uuid}','${selectedStoragePool}');" title="Remove Virtual Disk" onclick="" class="circular tiny basic ui icon button removeFshButton">
                                        <i class="red remove icon"></i>
                                    </button>
                                </div>
                                <div class="statusTextWrapper">
                                    <div class="statusText">
                                        Offline
                                    </div>
                                </div>
                            </div>`);
                        }
                    });

                    $('.vdisk').each(function(){
                        if (!$(this).hasClass("online") && !$(this).hasClass("offline") && !$(this).hasClass("stopped")){
                            //This pool record not exists in json file, check if this is bridged
                            var fshid = $(this).attr("uuid");
                            let thisFsh = $(this);
                            $.ajax({
                                url: "../../system/storage/pool/checkBridge",
                                data: {base: selectedStoragePool, fsh: fshid},
                                success: function(data){
                                    if (data == true){
                                        thisFsh.find(".shutdownButton").hide();
                                        thisFsh.find(".editButton").hide();
                                        thisFsh.css({
                                            "border-left": "3px solid #e29eff",
                                        });
                                        thisFsh.find("img").attr('src', '../../img/system/drive-bridge.svg');
                                        thisFsh.find(".statusText").text("Bridged");
                                    }else{
                                        thisFsh.find(".fshbuttons").hide();
                                        thisFsh.css({
                                            "border-left": "3px dotted #ff6666",
                                        });
                                        thisFsh.find(".statusText").text("Removed");
                                    }
                                }
                            });
                           
                        }
                    });
                }

                if ($(".vdisk").length > 0 && $(".nostorage").length > 0){
                    $(".nostorage").remove();
                }
            });
        }

        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 bridgeFsh(){
            let url = "SystemAO/storage/fshBridge.html#" + encodeURIComponent(JSON.stringify({group: selectedStoragePool}))
            if (typeof(ao_module_newfw) == "undefined"){
                window.open("../../" + url);
                return
            }
            ao_module_newfw({
                url: url,
                width: 530,
                height: 740,
                appicon: "SystemAO/storage/img/bridge.svg",
                title: "New File System Handler Bridging",
                callback: "finishFshEdit",
                parent: ao_module_windowID
            });
        }

        function editFsh(uuid, gpname){
            if (typeof(ao_module_newfw) == "undefined"){
                window.open("../../SystemAO/storage/fshedit.html#" + encodeURIComponent(JSON.stringify({uuid: uuid, group: gpname})));
                return
            }
            ao_module_newfw({
                url:"SystemAO/storage/fshedit.html#" + encodeURIComponent(JSON.stringify({uuid: uuid, group: gpname})),
                width: 530,
                height: 740,
                appicon: "SystemAO/storage/img/fsh.svg",
                title: "Edit File System Handler",
                callback: "finishFshEdit",
                parent: ao_module_windowID
            });
        }

        function newFsh(){
            if (typeof(ao_module_newfw) == "undefined"){
                window.open("../../SystemAO/storage/fshedit.html#" + encodeURIComponent(JSON.stringify({group: selectedStoragePool})));
                return
            }
            ao_module_newfw({
                url:"SystemAO/storage/fshedit.html#" + encodeURIComponent(JSON.stringify({group: selectedStoragePool})),
                width: 530,
                height: 740,
                appicon: "SystemAO/storage/img/fsh.svg",
                title: "New File System Handler",
                callback: "finishFshEdit",
                parent: ao_module_windowID
            });
        }


        function reloadStoagePool(owner, event){
            event.preventDefault();
            event.stopImmediatePropagation();
            if (confirm("Confirm reloading " + owner + " storage pool?")){
                //OK. Reload storage pool for this pool
                $.ajax({
                    url: "../../system/storage/pool/reload",
                    data: {pool: owner},
                    success: function(data){
                        console.log(data);
                        loadStoragePoolList();
                        $("#ok").modal("show");
                    },
                    error: function(){
                        loadStoragePoolList();
                    }
                });
            }
        }

        function toggleFsh(uuid, gpname){
            $.ajax({
                url: "../../system/storage/pool/toggle",
                data: {"fsh":uuid, "group": gpname},
                success: function(data){
                    if (data.error !== undefined){
                        alert(data.error);
                    }else{
                        loadStoragePoolList();
                    }

                }
            })
        }


        function removeFsh(uuid, group){
            if (confirm("Confirm removing FSH: " + uuid + ":/ ?")){
                $.ajax({
                    url: "../../system/storage/pool/removeHandler",
                    data: {uuid: uuid, group: group},
                    success: function(data){
                        if (data.error !== undefined){
                            alert(data.error);
                        }else{
                            //Remove succeed
                            loadStoragePoolList();
                        }
                    }
                });
            }
           
        }

        window.finishFshEdit = function(){
            loadStoragePoolList();
        }
    </script>
</body>

</html>