TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
							<!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>
    <script type="text/javascript" src="../../script/ao_module.js"></script>
    <title>Storage Pool Editor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        body{
            background-color:white;
        }
        .themebackground{
            background-color:#29cc96 !important;
            color:white !important;
            background-image: url("/img/public/slate.png") !important;
            background-repeat: no-repeat !important;
            background-attachment: fixed !important;
            height:100px;
            border: 0px solid transparent !important;
            padding:24px !important;
        }
        .fshList{
            max-height: 300px;
            overflow-y: auto;
        }

        .controls{
            position: absolute;
            top: 12px;
            right: 12px;
        }

        a{
            cursor: pointer;
        }
        .false{
            color: #eb0909;
        }

        .true{
            color: #05b074;
        }

        .backuponly{
            display:none;
        }
    </style>
</head>
<body>
    <div class="ui fluid attached segment themebackground" >
        <h24 class="ui inverted header">
            <i class="server icon"></i>
            <div class="content">
                Edit Storage Pool
            <div class="sub header">Edit storage pool and its mounted file system handlers</div>
            </div>
        </h4>
    </div>
    <br>
    <div class="ui container">
        <div class="ui header" id="editingGroupName"></div>
        <p>File System Handlers currently mounted in this storage pool: </p>
        <div class="ui divider"></div>
        <div id="fshList">
            
        </div>
        <div class="ui divider"></div>
        
        <div id="newfsh" style="display:none;">
            <h3><i class="plus icon"></i> Create New File System Handler</h3>
            <p>Invalid setting might lead to system fail to start. Please make sure your settings are valid before pressing the create button.</p>
            <form class="ui form" action="../../system/storage/pool/newHandler" method="POST">
                <p>Basic Virtual Disk Settings</p>
                <div class="field" style="display: none;">
                    <label>Group</label>
                    <input type="text" name="group" id="groupfield" readonly="true">
                  </div>
                <div class="field">
                  <label>Name</label>
                  <input type="text" name="name" placeholder="e.g. My Folder">
                </div>
                <div class="field">
                  <label>UUID</label>
                  <input type="text" name="uuid" placeholder="e.g. myfolder">
                </div>
                <div class="field">
                    <label>Path</label>
                    <input type="text" name="path" placeholder="e.g. /media/myfolder">
                </div>
                <div id="accPermission" class="field">
                    <label>Access Permission</label>
                    <div class="ui selection dropdown">
                        <input type="hidden" name="access" value="readwrite">
                        <i class="dropdown icon"></i>
                        <div class="default text">Access Permission</div>
                        <div class="menu">
                            <div class="item" data-value="readonly">Read Only</div>
                            <div class="item" data-value="readwrite">Read Write</div>
                        </div>
                    </div>
                </div>
                <div class="field">
                    <label>Storage Hierarchy</label>
                    <div class="ui selection dropdown">
                        <input type="hidden" autocomplete="false" name="hierarchy" value="user" onchange="handleHierarchyChange(this.value);">
                        <i class="dropdown icon"></i>
                        <div class="default text">Storage Hierarchy</div>
                        <div class="menu">
                            <div class="item" data-value="user">Isolated User Folders</div>
                            <div class="item" data-value="public">Public Access Folders</div>
                            <div class="item" data-value="backup">Backup Storage</div>
                        </div>
                    </div>
                </div>
                <div class="ui divider backuponly"></div>
                <p class="backuponly">Backup Settings</p>
                <div class="field backuponly">
                    <label>Backup Virtual Disk UID</label>
                    <div class="ui selection dropdown">
                        <input type="hidden" autocomplete="false" name="parentuid" value="">
                        <i class="dropdown icon"></i>
                        <div class="default text">Storage Hierarchy</div>
                        <div class="menu" id="backupIdList">
                            
                        </div>
                    </div>
                  </div>
                  <div class="field backuponly">
                    <label>Backup Mode</label>
                    <div class="ui selection dropdown">
                        <input type="hidden" autocomplete="false" name="backupmode" value="">
                        <i class="dropdown icon"></i>
                        <div class="default text">Storage Hierarchy</div>
                        <div class="menu">
                            <div class="item" data-value="smart">Smart</div>
                            <div class="item" data-value="nightly">Nightly</div>
                            <div class="item" data-value="append">Append Only</div>
                        </div>
                    </div>
                  </div>
                <div class="ui divider"></div>
                <p>Physical Disks Settings</p>
                <div class="field">
                    <label>Filesystem Type</label>
                    <div class="ui selection dropdown">
                    <input type="hidden" name="filesystem" value="ntfs">
                    <i class="dropdown icon"></i>
                    <div class="default text">Filesystem Type</div>
                    <div class="menu">
                        <div class="item" data-value="ext4">EXT4</div>
                        <div class="item" data-value="ext3">EXT3</div>
                        <div class="item" data-value="ntfs">NTFS</div>
                        <div class="item" data-value="vfat">VFAT</div>
                        <div class="item" data-value="fat">FAT</div>
                    </div>
                    </div>
                </div>
                <div class="field">
                    <label>Mount Device</label>
                    <input type="text" name="mountdev" placeholder="e.g. /dev/sda1">
                </div>
                <div class="field">
                    <label>Mount Point</label>
                    <input type="text" name="mountpt" placeholder="e.g. /media/myfolder">
                </div>

                <div class="field">
                  <div class="ui checkbox">
                    <input type="checkbox" name="automount" tabindex="0" class="hidden">
                    <label>Automount</label>
                  </div>
                </div>
                <br>
                
                <div class="ui divider"></div>
                <p>Security Related (if any)</p>
                <div class="field">
                    <label>Username</label>
                    <input type="text" name="username" placeholder="">
                </div>
                <div class="field">
                    <label>Password</label>
                    <input type="password" name="password" placeholder="">
                </div>

                <button class="ui right floated button" onclick='event.preventDefault(); $("#newfsh").slideUp("fast"); '>Close</button>
                <button class="ui green right floated button" type="submit">Create</button>
                <br><br>
              </form>
              <div class="ui divider"></div>
        </div>
        <br>
        <button class="ui green button" onclick="toggleCreateNewFileHandler();"><i class="add icon"></i>New File System Handler</button>
        <button class="ui right floated button" onclick="done();"></i>Done</button>
        <br><br>
    </div>

    <script>
        //Load the editing storage pool from window hash
        var editingStoragePool = "system"
        if (window.location.hash.length > 1){
            editingStoragePool = window.location.hash.substr(1)
        }
        
        //List all the current fsh inside this pool
        $("#editingGroupName").text(editingStoragePool);
        loadStoragePoolForGroup(editingStoragePool);
        $("#groupfield").val(editingStoragePool);

        //Start dropdown
        $(".ui.dropdown").dropdown();
        $(".ui.checkbox").checkbox();

        function toggleCreateNewFileHandler(){
            $("#newfsh").slideToggle("fast", function(){
                $(window).scrollTop($("#newfsh").offset().top - 10);
            });
        }

        function PoolAlreadyListed(uuid){
            var alreadyExisted = false;
            $(".fsh").each(function(){
                if ($(this).attr("uuid") == uuid){
                    alreadyExisted = true
                }
            });
            return alreadyExisted
        }

        function done(){
            ao_module_parentCallback(true);
            ao_module_close();
        }

        function loadStoragePoolForGroup(pgname){
            $("#fshList").html("");
            $.get("../../system/storage/pool/list?filter=" + pgname, function(data){
                var sp = data[0];
                var onlineFSH = [];
                if (sp.Storages != null){
                    sp.Storages.forEach(storage => {
                        var color = "green";
                        if (storage.Closed){
                            color = "red";
                        }

                        var usableIcon = "checkmark";
                        if (storage.Closed){
                            usableIcon = "remove";
                        }

                        $("#fshList").append(`<div class="ui ${color} segment fsh" uuid="${storage.UUID}">
                            <h3><i class="disk icon"></i> ${storage.Name} (${storage.UUID}:/)</h3>
                            <ol class="ui list">
                                <li value="-"><i class="folder icon"></i> Mount Point: ${storage.Path}</li>
                                <li value="-"><i class="user icon"></i> Hierarchy: ${storage.Hierarchy}</li>
                                <li value="-" class="${!storage.ReadOnly}"> <i class="edit icon"></i> Can Write:  ${!storage.ReadOnly}</li>
                                <li value="-" class="${!storage.Closed}"> <i class="${usableIcon} icon"></i> Usable:  ${!storage.Closed}</li>
                            </ol>
                            <div class="ui active inverted dimmer oprloader" style="display:none;">
                                <div class="ui text loader">Waiting Response</div>
                            </div>
                            <div class="controls">
                                <a title="Edit Config" uuid="${storage.UUID}" group="${pgname}" onclick="editFSH(this);"><i class="edit icon"></i></a>
                                <a title="Close Handler" uuid="${storage.UUID}" group="${pgname}" onclick="toggleFSH(this);"><i class="power off icon"></i></a>
                                <a title="Remove Handler" uuid="${storage.UUID}" group="${pgname}" onclick="removeThisFSH(this);"><i class="remove icon"></i></a>
                            </div>
                        </div>`);
                        onlineFSH.push(storage.UUID);
                    });

                    $(".fsh").each(function(){
                        if ($(this).attr("uuid") == "user" || $(this).attr("uuid") == "tmp"){
                            //System storage pool. Do not allow editing
                            $(this).find(".controls").html("System Reserved")
                            $(this).attr("class", "ui yellow segment fsh");
                        }
                    });

                }else{
                    $("#fshList").append(`<p><i class="remove icon"></i> No File System Handler mounted for ${pgname}</p>`);
                }
                $("#fshList").append('<div class="ui divider"></div>');
                 //Get other pools that is not mounted
                 $.get("../../system/storage/pool/listraw?target=" + pgname, function(data){
                        var offlineFSH = [];
                        var allFSH = [];
                        if (data.error == undefined){
                            data.forEach(vroot => {
                                if (!PoolAlreadyListed(vroot.uuid)){
                                    $("#fshList").append(`<div class="ui black segment fsh" uuid="${vroot.uuid}">
                                        <h3><i class="disk icon"></i> ${vroot.name} (${vroot.uuid}:/)</h3>
                                        <ol class="ui list">
                                            <li value="-"><i class="folder icon"></i> Mount Point: ${vroot.path}</li>
                                            <li value="-"><i class="user icon"></i> Hierarchy: ${vroot.hierarchy}</li>
                                            <li value="-" class="${!(vroot.access == "readonly")}"> <i class="edit icon"></i> Can Write:  ${!(vroot.access == "readonly")}</li>
                                            <li value="-"> <i class="remove icon"></i> Not Mounted</li>
                                        </ol>
                                        <div class="controls">
                                            <a title="Edit Config" uuid="${vroot.uuid}" group="${pgname}" onclick="editFSH(this);"><i class="edit icon"></i></a>
                                            <a title="Remove Handler" uuid="${vroot.uuid}" group="${pgname}" onclick="removeThisFSH(this);"><i class="remove icon"></i></a>
                                        </div>
                                    </div>`);
                                    offlineFSH.push(vroot.uuid);
                                }
                                allFSH.push(vroot.uuid)
                            });

                            if (offlineFSH.length == 0){
                                //All fshandlers are online
                                $("#fshList").append(`<p><i class="checkmark icon"></i> All File System Handlers for ${pgname} are online</p>`);
                            }
                        }else{
                            $("#fshList").append(`<p><i class="remove icon"></i> No Unmounted File System Handler for ${pgname}</p>`);
                        }

                        //List the handlers that will be removed during next boot
                        onlineFSH.forEach(ofsh => {
                            if (allFSH.includes(ofsh) == false){
                                //Currently online but not in original config. aka Delete Pending
                                $(".fsh").each(function(){
                                    if ($(this).attr("uuid") == ofsh && !($(this).attr("uuid") == "user" || $(this).attr("uuid") == "tmp")){
                                        $(this).append("<p style='color: red;'>**Will be removed after next reboot</p>")
                                    }
                                });
                            }
                        });
                    }); 
            });
        }

        function handleHierarchyChange(newHierarchy){
            if (newHierarchy == "backup"){

                //Force readwrite mode to read only
                $("#accPermission").find(".dropdown").dropdown("set selected", "readonly");
                $("#accPermission").addClass("disabled");

                //Show backup only divs
                $(".backuponly").slideDown("fast");

                //Render the backup id list
                $("#backupIdList").html(``);
                $.get("../../system/storage/pool/list", function(data){
                     data.forEach(usergroup => {
                         usergroup.Storages.forEach(storage => {
                             $("#backupIdList").append(`<div class="item" data-value="${storage.UUID}">${storage.Name} (${storage.UUID}:/)</div>`);
                         })
                     });
                     $("#backupIdList").parent().dropdown();
                });
            }else{
                //Restore readwrite mode
                $("#accPermission").removeClass("disabled");

                 //Hide backup only divs
                 $(".backuponly").slideUp("fast");
                 $(".backuponly").find("input").val("");
            }
        }

        function removeThisFSH(object){
            var uuid = $(object).attr("uuid");
            var group  = $(object).attr("group");
            if (confirm("Confirm removing FSH: " + uuid + ":/ ?")){
                $.ajax({
                    url: "../../system/storage/pool/removeHandler",
                    data: {uuid: uuid, group: group},
                    success: function(data){
                        console.log(data);
                        window.location.href = "removeSuccess.html#" + JSON.stringify([group, uuid]);
                    }
                });
            }
           
        }

        function toggleFSH(object){
            var uuid = $(object).attr("uuid");
            var gpname = $(object).attr("group");
            $(object).parent().parent().find(".oprloader").show();
            $.ajax({
                url: "../../system/storage/pool/toggle",
                data: {"fsh":uuid, "group": gpname},
                success: function(data){
                    $(object).parent().parent().find(".oprloader").hide();
                    if (data.error !== undefined){
                        alert(data.error);
                    }else{
                        loadStoragePoolForGroup(editingStoragePool);
                    }

                }
            })
        }

        function editFSH(object){
            var uuid = $(object).attr("uuid");
            var gpname = $(object).attr("group");

            ao_module_newfw({
                url:"SystemAO/storage/fshedit.html#" + encodeURIComponent(JSON.stringify({uuid: uuid, group: gpname})),
                width: 530,
                height: 740,
                appicon: "SystemAO/storage/img/fsh.png",
                title: "Edit File System Handler",
                callback: "finishFshEdit",
                parent: ao_module_windowID
            });
        }

        function finishFshEdit(){
            //Reload storage pool
            loadStoragePoolForGroup(editingStoragePool);
        }
    </script>
</body>
</html>