|
@@ -64,6 +64,13 @@
|
|
margin-right: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ /* RAID Option Button */
|
|
|
|
+ .raidOptionBtn{
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 1em;
|
|
|
|
+ right: 1em;
|
|
|
|
+ }
|
|
|
|
+
|
|
/* Statistics of Device Status */
|
|
/* Statistics of Device Status */
|
|
.deviceOverview{
|
|
.deviceOverview{
|
|
background-color: #f3f3f3 !important;
|
|
background-color: #f3f3f3 !important;
|
|
@@ -171,9 +178,14 @@
|
|
<i id="RAIDOverviewStateIcon" class="ui green check circle icon"></i>
|
|
<i id="RAIDOverviewStateIcon" class="ui green check circle icon"></i>
|
|
<div class="content">
|
|
<div class="content">
|
|
<span id="RAIDOverviewDiskpath">Loading device details</span>
|
|
<span id="RAIDOverviewDiskpath">Loading device details</span>
|
|
- <div class="sub header" id="RAIDOverviewDetails"></div>
|
|
|
|
|
|
+ <div class="sub header">
|
|
|
|
+ <span id="RAIDOverviewDetails"></span><br>
|
|
|
|
+ <small style="font-weight: 300;" id="RAIDUUID"></small>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
</h3>
|
|
</h3>
|
|
|
|
+
|
|
<div class="ui divider"></div>
|
|
<div class="ui divider"></div>
|
|
<div class="ui basic segment deviceOverview">
|
|
<div class="ui basic segment deviceOverview">
|
|
<div class="ui tiny four statistics">
|
|
<div class="ui tiny four statistics">
|
|
@@ -215,8 +227,19 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="raidOptionBtn">
|
|
|
|
+ <button onclick="reloadRAIDVolDetail();" class="ui basic circular icon button"><i class="ui green refresh icon"></i></button>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <button onclick="addDiskToArray();" title="Add new disk to this volume" class="circular small basic ui button">
|
|
|
|
+ <i class="green add icon"></i> Add Disk
|
|
|
|
+ </button>
|
|
|
|
+ <button onclick="" title="Expand volume to fit disks capacity" class="circular small basic ui button">
|
|
|
|
+ <i class="purple expand icon"></i> Expand Volume
|
|
|
|
+ </button>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <br>
|
|
|
|
|
|
+ <div class="ui divider"></div>
|
|
<div id="raidDiskList">
|
|
<div id="raidDiskList">
|
|
|
|
|
|
</div>
|
|
</div>
|
|
@@ -224,66 +247,20 @@
|
|
<i class="yellow exclamation triangle icon"></i> Not enough redundant disks. Further removal / failure of disk will result in data loss.<br>
|
|
<i class="yellow exclamation triangle icon"></i> Not enough redundant disks. Further removal / failure of disk will result in data loss.<br>
|
|
</div>
|
|
</div>
|
|
<div class="ui divider"></div>
|
|
<div class="ui divider"></div>
|
|
- <table class="ui very basic compact celled table" style="padding-left: 1em; padding-right: 1em;">
|
|
|
|
- <tbody>
|
|
|
|
- <tr>
|
|
|
|
- <td>
|
|
|
|
- <h4><i class="green add icon"></i> Add New Disk</h4>
|
|
|
|
- <p>Add a new disk to the array. If your array have an empty slot (removed disk), the disk will be added as working disk, otherwise, it will be added as a spare disk.</p>
|
|
|
|
- </td>
|
|
|
|
- <td>
|
|
|
|
- <button onclick="addDiskToArray();" class="circular small basic ui button">
|
|
|
|
- <i class="green add icon"></i> Add Disk
|
|
|
|
- </button>
|
|
|
|
- </td>
|
|
|
|
- </tr>
|
|
|
|
- <tr>
|
|
|
|
- <td>
|
|
|
|
- <h4><i class="purple expand icon"></i> Expand RAID Volume</h4>
|
|
|
|
- <p>If you have upgraded all disks in this RAID storage pool, you can grow the RAID volume and its file system to match the new size of your disks. </p>
|
|
|
|
- </td>
|
|
|
|
- <td>
|
|
|
|
- <button onclick="" class="circular small basic ui button">
|
|
|
|
- <i class="purple expand icon"></i> Expand Volume
|
|
|
|
- </button>
|
|
|
|
- </td>
|
|
|
|
- </tr>
|
|
|
|
- </tbody>
|
|
|
|
- </table>
|
|
|
|
-
|
|
|
|
- <div class="dangerzone">
|
|
|
|
- <div class="header">
|
|
|
|
- <h4>Danger Zone</h4>
|
|
|
|
- </div>
|
|
|
|
- <table class="ui very basic compact celled table" style="padding-left: 1em; padding-right: 1em;">
|
|
|
|
- <tbody>
|
|
|
|
- <tr>
|
|
|
|
- <td>
|
|
|
|
- <h4>Stop RAID Volume</h4>
|
|
|
|
- <p>This will unmount the volume (if mounted) and stop the RAID volume with <code>mdadm --stop /dev/mdX</code>. You will not be able to mount it again until mdadm reloads.<br>
|
|
|
|
- If you only want to unmount the RAID volume, use the Disk Management Tool instead.</p>
|
|
|
|
- </td>
|
|
|
|
- <td>
|
|
|
|
- <button onclick="" class="circular basic red ui button">
|
|
|
|
- <i class="red trash icon"></i> Stop RAID Volume
|
|
|
|
- </button>
|
|
|
|
- </td>
|
|
|
|
- </tr>
|
|
|
|
- <tr>
|
|
|
|
- <td>
|
|
|
|
- <h4>Remove RAID Volume</h4>
|
|
|
|
- <p>Remove the RAID volume from runtime AND the mdadm config file. This should only be done when you are trying to rebuild the RAID volume on a new machine. <br>
|
|
|
|
- Data in the disks will not be wiped but a full backup is recommended before removing the RAID volume from this system.</p>
|
|
|
|
- </td>
|
|
|
|
- <td>
|
|
|
|
- <button onclick="" class="circular red ui button">
|
|
|
|
- <i class="trash icon"></i> Remove Volume
|
|
|
|
- </button>
|
|
|
|
- </td>
|
|
|
|
- </tr>
|
|
|
|
- </tbody>
|
|
|
|
- </table>
|
|
|
|
|
|
+ <div style="width: 100%; text-align: center; margin-bottom: 1em;">
|
|
|
|
+ <p><i class="yellow exclamation triangle icon"></i> Danger Zone <i class="yellow exclamation triangle icon"></i></p>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
|
|
+ <button onclick="" class="circular basic red ui button">
|
|
|
|
+ <i class="red stop icon"></i> Stop RAID
|
|
|
|
+ </button>
|
|
|
|
+ <button onclick="RAIDRemove();" class="circular red ui button">
|
|
|
|
+ <i class="trash icon"></i> Remove RAID
|
|
|
|
+ </button>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <br><br><br><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -295,7 +272,7 @@
|
|
Confirm Disk Remove
|
|
Confirm Disk Remove
|
|
</div>
|
|
</div>
|
|
<div class="image content">
|
|
<div class="image content">
|
|
- <div class="ui medium image">
|
|
|
|
|
|
+ <div class="ui small image">
|
|
<img src="../disk/raid/img/remove-warning.svg">
|
|
<img src="../disk/raid/img/remove-warning.svg">
|
|
</div>
|
|
</div>
|
|
<div class="description">
|
|
<div class="description">
|
|
@@ -312,6 +289,32 @@
|
|
REMOVE
|
|
REMOVE
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- RAID Remove Confirmation -->
|
|
|
|
+ <div id="confirmRAIDRemove" class="ui small modal">
|
|
|
|
+ <i class="close icon"></i>
|
|
|
|
+ <div class="header">
|
|
|
|
+ Confirm RAID Volume Remove
|
|
|
|
+ </div>
|
|
|
|
+ <div class="image content">
|
|
|
|
+ <div class="ui small image">
|
|
|
|
+ <img src="../disk/raid/img/remove-warning.svg">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="description">
|
|
|
|
+ <h4 style="color: rgb(206, 31, 31);"><span id="removingRAIDName"></span></h4>
|
|
|
|
+ <p><b>This will clear all stored data in this volume. Please make sure you have backup all important data.</b> Confirm Remove?<br></p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="actions">
|
|
|
|
+ <div class="ui black deny button">
|
|
|
|
+ Cancel
|
|
|
|
+ </div>
|
|
|
|
+ <div class="ui negative left labeled icon button" onclick="confirmRAIDRemove();">
|
|
|
|
+ <i class="trash icon"></i>
|
|
|
|
+ REMOVE
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
@@ -322,6 +325,56 @@
|
|
removePendingSourceVol: ""
|
|
removePendingSourceVol: ""
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+ /* RAID Remove Function */
|
|
|
|
+ function RAIDRemove(){
|
|
|
|
+ if (raidManager.editingArray == ""){
|
|
|
|
+ console.log("RAID manager have no editing array set")
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ $("#removingRAIDName").text(raidManager.editingArray);
|
|
|
|
+ $("#confirmRAIDRemove").modal("show");
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ function confirmRAIDRemove(){
|
|
|
|
+ var apiObject = {
|
|
|
|
+ api: "../system/disk/raid/remove",
|
|
|
|
+ data: {
|
|
|
|
+ "raidDev": raidManager.editingArray,
|
|
|
|
+ },
|
|
|
|
+ title: `<i class='yellow exclamation triangle icon'></i> REMOVE RAID VOLUME <i class='yellow exclamation triangle icon'></i>`,
|
|
|
|
+ desc: `Confirm format and remove RAID: ${raidManager.editingArray}`,
|
|
|
|
+ thisuser: true, //This username as default, set to false for entering other user
|
|
|
|
+ method: "POST",
|
|
|
|
+ success: undefined
|
|
|
|
+ }
|
|
|
|
+ apiObject = encodeURIComponent(JSON.stringify(apiObject));
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ parent.newFloatWindow({
|
|
|
|
+ url: "SystemAO/security/authreq.html#" + apiObject,
|
|
|
|
+ width: 480,
|
|
|
|
+ height: 300,
|
|
|
|
+ appicon: "SystemAO/security/img/lock.svg",
|
|
|
|
+ title: `Confirm Disk Remove`,
|
|
|
|
+ parent: ao_module_windowID,
|
|
|
|
+ callback: "handleRAIDRemoveCallback"
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ window.handleRAIDRemoveCallback = function(data){
|
|
|
|
+ if (data.error != undefined){
|
|
|
|
+ //Something went wrong
|
|
|
|
+ alert(data.error);
|
|
|
|
+ }else{
|
|
|
|
+ setTimeout(function(){
|
|
|
|
+ //RAID volume not exist anymore. Reset everything
|
|
|
|
+ raidManager = {};
|
|
|
|
+ initRAIDVolList();
|
|
|
|
+ }, 300);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
/* New Disk Function */
|
|
/* New Disk Function */
|
|
function addDiskToArray(arrayName=raidManager.editingArray){
|
|
function addDiskToArray(arrayName=raidManager.editingArray){
|
|
let payload = {
|
|
let payload = {
|
|
@@ -358,6 +411,7 @@
|
|
|
|
|
|
|
|
|
|
function confirmRemoveDisk(){
|
|
function confirmRemoveDisk(){
|
|
|
|
+ /*
|
|
let raidName = raidManager.removePendingSourceVol.split("/").pop();
|
|
let raidName = raidManager.removePendingSourceVol.split("/").pop();
|
|
var apiObject = {
|
|
var apiObject = {
|
|
api: "../system/disk/raid/removeMemeber",
|
|
api: "../system/disk/raid/removeMemeber",
|
|
@@ -365,7 +419,7 @@
|
|
raidDev: raidManager.removePendingSourceVol,
|
|
raidDev: raidManager.removePendingSourceVol,
|
|
memDev: raidManager.removePendingDisk
|
|
memDev: raidManager.removePendingDisk
|
|
},
|
|
},
|
|
- title: `<i class='yellow exclamation triangle icon'></i> REMOVE DISK FROM RAID VOLUME <i class='yellow exclamation triangle icon'></i>`,
|
|
|
|
|
|
+ title: `<i class='yellow exclamation triangle icon'></i> Remove Disk From Volume <i class='yellow exclamation triangle icon'></i>`,
|
|
desc: `Confirm remove ${raidManager.removePendingDisk} from ${raidManager.removePendingSourceVol}`,
|
|
desc: `Confirm remove ${raidManager.removePendingDisk} from ${raidManager.removePendingSourceVol}`,
|
|
thisuser: true, //This username as default, set to false for entering other user
|
|
thisuser: true, //This username as default, set to false for entering other user
|
|
method: "POST",
|
|
method: "POST",
|
|
@@ -383,11 +437,26 @@
|
|
parent: ao_module_windowID,
|
|
parent: ao_module_windowID,
|
|
callback: "handleRemoveDiskCallback"
|
|
callback: "handleRemoveDiskCallback"
|
|
});
|
|
});
|
|
|
|
+ */
|
|
|
|
+
|
|
|
|
+ $.ajax({
|
|
|
|
+ url: "../../system/disk/raid/removeMemeber",
|
|
|
|
+ data: {
|
|
|
|
+ raidDev: raidManager.removePendingSourceVol,
|
|
|
|
+ memDev: raidManager.removePendingDisk
|
|
|
|
+ },
|
|
|
|
+ method: "POST",
|
|
|
|
+ success: function(data){
|
|
|
|
+ handleRemoveDiskCallback(data);
|
|
|
|
+ }
|
|
|
|
+ })
|
|
}
|
|
}
|
|
|
|
|
|
//Remove disk completed
|
|
//Remove disk completed
|
|
window.handleRemoveDiskCallback = function(succ){
|
|
window.handleRemoveDiskCallback = function(succ){
|
|
console.log(data);
|
|
console.log(data);
|
|
|
|
+ raidManager.removePendingDisk = "";
|
|
|
|
+ raidManager.removePendingSourceVol = "";
|
|
setTimeout(function(){
|
|
setTimeout(function(){
|
|
reloadRAIDVolDetail();
|
|
reloadRAIDVolDetail();
|
|
}, 300);
|
|
}, 300);
|
|
@@ -489,7 +558,8 @@
|
|
|
|
|
|
//Update the active disks info
|
|
//Update the active disks info
|
|
$("#RAIDOverviewDiskpath").html(data.DevicePath + ` <span class="mdevice">(${data.RaidLevel.toUpperCase()})</span>`);
|
|
$("#RAIDOverviewDiskpath").html(data.DevicePath + ` <span class="mdevice">(${data.RaidLevel.toUpperCase()})</span>`);
|
|
- $("#RAIDOverviewDetails").text(data.UUID + " | State: " + capitalize(data.State));
|
|
|
|
|
|
+ $("#RAIDOverviewDetails").text("State: " + capitalize(data.State));
|
|
|
|
+ $("#RAIDUUID").text(data.UUID);
|
|
$("#RAIDActiveDevices").text(data.ActiveDevices);
|
|
$("#RAIDActiveDevices").text(data.ActiveDevices);
|
|
$("#RAIDWorkingDevices").text(data.WorkingDevices);
|
|
$("#RAIDWorkingDevices").text(data.WorkingDevices);
|
|
$("#RAIDFailedDevices").text(data.FailedDevices);
|
|
$("#RAIDFailedDevices").text(data.FailedDevices);
|
|
@@ -561,11 +631,9 @@
|
|
</div>
|
|
</div>
|
|
<div class="raidDeviceOptions">
|
|
<div class="raidDeviceOptions">
|
|
<div class="content">
|
|
<div class="content">
|
|
- <button class="ui tiny basic button"><i class="ui info circle grey icon"></i> SMART</button>
|
|
|
|
- <button class="ui tiny basic button removeDiskBtn ${diskIsFailed?"faulty":"normal"}" onclick="removeDisk('${deviceName}','${driveName}');"><i class="ui red trash icon"></i> Remove Disk from Volume</button>
|
|
|
|
|
|
+ <button class="ui tiny basic button removeDiskBtn ${diskIsFailed?"faulty":"normal"}" onclick="removeDisk('${deviceName}','${driveName}');"><i class="ui red trash icon"></i> Remove Disk</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="ui divider"></div>
|
|
|
|
</div>`);
|
|
</div>`);
|
|
|
|
|
|
if (driveName != "" && drivePath != ""){
|
|
if (driveName != "" && drivePath != ""){
|