|
@@ -77,6 +77,32 @@
|
|
font-weight: 300;
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ /* RAID device members */
|
|
|
|
+ .raiddevice{
|
|
|
|
+ border-radius: 0.4em !important;
|
|
|
|
+ margin-bottom: 0 !important;
|
|
|
|
+ margin-top: 0 !important;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+ .raiddevice:hover{
|
|
|
|
+ background-color: #f3f3f3 !important;
|
|
|
|
+ }
|
|
|
|
+ .raiddevice .capinfo{
|
|
|
|
+ position: absolute;
|
|
|
|
+ color:rgb(136, 136, 136);
|
|
|
|
+ right: 1em;
|
|
|
|
+ top: 1em;
|
|
|
|
+ text-align: right;
|
|
|
|
+ }
|
|
|
|
+ .raiddevice .capinfo .readonlytag{
|
|
|
|
+ background-color: #cc3d3a;
|
|
|
|
+ color:white;
|
|
|
|
+ padding: 2px;
|
|
|
|
+ padding-left: 5px;
|
|
|
|
+ padding-right: 5px;
|
|
|
|
+ }
|
|
|
|
+
|
|
/* Danger zone css */
|
|
/* Danger zone css */
|
|
.dangerzone{
|
|
.dangerzone{
|
|
border: 1px solid #dedede;
|
|
border: 1px solid #dedede;
|
|
@@ -125,8 +151,8 @@
|
|
<h3 class="ui header">
|
|
<h3 class="ui header">
|
|
<i class="ui green check circle icon"></i>
|
|
<i class="ui green check circle icon"></i>
|
|
<div class="content">
|
|
<div class="content">
|
|
- <span id="RAIDOverviewDiskpath">/dev/md0</span>
|
|
|
|
- <div class="sub header" id="RAIDOverviewDetails">10c0a9d9:763e326a:7d825b41:e1dc0536 | clean</div>
|
|
|
|
|
|
+ <span id="RAIDOverviewDiskpath">Loading device details</span>
|
|
|
|
+ <div class="sub header" id="RAIDOverviewDetails"></div>
|
|
</div>
|
|
</div>
|
|
</h3>
|
|
</h3>
|
|
<div class="ui divider"></div>
|
|
<div class="ui divider"></div>
|
|
@@ -174,7 +200,13 @@
|
|
<br>
|
|
<br>
|
|
<div id="raidDiskList">
|
|
<div id="raidDiskList">
|
|
<div class="ui basic segment">
|
|
<div class="ui basic segment">
|
|
-
|
|
|
|
|
|
+ <h4 class="ui header">
|
|
|
|
+ <img src="../disk/raid/img/drive-working.svg">
|
|
|
|
+ <div class="content">
|
|
|
|
+ /dev/sdb
|
|
|
|
+ <div class="sub header">Check out our plug-in marketplace</div>
|
|
|
|
+ </div>
|
|
|
|
+ </h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui divider"></div>
|
|
<div class="ui divider"></div>
|
|
@@ -260,37 +292,75 @@
|
|
return string.charAt(0).toUpperCase() + string.slice(1);
|
|
return string.charAt(0).toUpperCase() + string.slice(1);
|
|
}
|
|
}
|
|
|
|
|
|
- //Get the information of the device
|
|
|
|
- $.get("../../system/disk/raid/detail?devName=" + deviceName, function(data){
|
|
|
|
- if (data.error != undefined){
|
|
|
|
- $("#raidDiskList").html(`<h3 class="ui header">
|
|
|
|
- <i class="ui red circle times icon"></i>
|
|
|
|
- <div class="content" style="font-weight: 300;">
|
|
|
|
- Unable to load RAID volume information
|
|
|
|
- <div class="sub header">${capitalize(data.error)}</div>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- </h3>`);
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
|
|
+ function bytesToSize(bytes) {
|
|
|
|
+ var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
|
|
|
|
+ if (bytes == 0) return 'n/a';
|
|
|
|
+ var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
|
|
|
|
+ if (i == 0) return bytes + ' ' + sizes[i];
|
|
|
|
+ return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
|
|
|
|
+ };
|
|
|
|
|
|
-
|
|
|
|
|
|
+ let deiviceSizeMap = {};
|
|
|
|
+ //Load the device size map
|
|
|
|
+ $.get("../../system/disk/raid/devinfo?devName=" + deviceName, function(sizemap){
|
|
|
|
+ deiviceSizeMap = sizemap;
|
|
|
|
+ //Get the information of the device
|
|
|
|
+ $.get("../../system/disk/raid/detail?devName=" + deviceName, function(data){
|
|
|
|
+ if (data.error != undefined){
|
|
|
|
+ $("#raidDiskList").html(`<h3 class="ui header">
|
|
|
|
+ <i class="ui red circle times icon"></i>
|
|
|
|
+ <div class="content" style="font-weight: 300;">
|
|
|
|
+ Unable to load RAID volume information
|
|
|
|
+ <div class="sub header">${capitalize(data.error)}</div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </h3>`);
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
|
|
- //Update the active disks info
|
|
|
|
- $("#RAIDOverviewDiskpath").text(data.DevicePath + `(${data.RaidLevel})`);
|
|
|
|
- $("#RAIDOverviewDetails").text(data.UUID + " | State: " + capitalize(data.State));
|
|
|
|
- $("#RAIDActiveDevices").text(data.ActiveDevices);
|
|
|
|
- $("#RAIDWorkingDevices").text(data.WorkingDevices);
|
|
|
|
- $("#RAIDFailedDevices").text(data.FailedDevices);
|
|
|
|
- $("#RAIDSpareDevices").text(data.SpareDevices);
|
|
|
|
|
|
+
|
|
|
|
|
|
- //Render the disk list
|
|
|
|
- //$("#raidDiskList").html("");
|
|
|
|
- for (var i = 0; i < data.DeviceInfo.length; i++){
|
|
|
|
- let thisDeviceInfo = data.DeviceInfo[i];
|
|
|
|
- $("#raidDiskList").append(``);
|
|
|
|
- }
|
|
|
|
|
|
+ //Update the active disks info
|
|
|
|
+ $("#RAIDOverviewDiskpath").html(data.DevicePath + ` <span class="mdevice">(${data.RaidLevel.toUpperCase()})</span>`);
|
|
|
|
+ $("#RAIDOverviewDetails").text(data.UUID + " | State: " + capitalize(data.State));
|
|
|
|
+ $("#RAIDActiveDevices").text(data.ActiveDevices);
|
|
|
|
+ $("#RAIDWorkingDevices").text(data.WorkingDevices);
|
|
|
|
+ $("#RAIDFailedDevices").text(data.FailedDevices);
|
|
|
|
+ $("#RAIDSpareDevices").text(data.SpareDevices);
|
|
|
|
+
|
|
|
|
+ //Render the disk list
|
|
|
|
+ $("#raidDiskList").html("");
|
|
|
|
+ for (var i = 0; i < data.DeviceInfo.length; i++){
|
|
|
|
+ let thisDeviceInfo = data.DeviceInfo[i];
|
|
|
|
+ let raidDeviceNo = thisDeviceInfo.RaidDevice;
|
|
|
|
+ let drivePath = thisDeviceInfo.DevicePath
|
|
|
|
+ let driveName = drivePath.split("/").pop();
|
|
|
|
+ let driveIcon = "drive-working.svg";
|
|
|
|
+ if (thisDeviceInfo.DevicePath = ""){
|
|
|
|
+ driveIcon = "drive-notfound.svg"
|
|
|
|
+ drivePath = "(Drive unplugged or damaged)"
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ $("#raidDiskList").append(`<div class="ui basic segment raiddevice">
|
|
|
|
+ <h4 class="ui header">
|
|
|
|
+ <img src="../disk/raid/img/${driveIcon}">
|
|
|
|
+ <div class="content">
|
|
|
|
+ ${raidDeviceNo}: ${drivePath}
|
|
|
|
+ <div class="sub header">${thisDeviceInfo.State.join(" | ")}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </h4>
|
|
|
|
+ <div class="capinfo">
|
|
|
|
+ ${bytesToSize(deiviceSizeMap[driveName].size)}<br>
|
|
|
|
+ <span style="font-size: 0.8em;">${deiviceSizeMap[driveName].ro?"<span class='readonlytag'>Read Only</span>":"Read Write"}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="raidDeviceOptions">
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </div>`);
|
|
|
|
+ }
|
|
|
|
|
|
|
|
+ });
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
@@ -312,7 +382,7 @@
|
|
<img src="../../img/system/raid.svg">
|
|
<img src="../../img/system/raid.svg">
|
|
<div class="healthIcon"><i class="${getStateIconFromStateText(thisDiskInfo.State)}"></i></div>
|
|
<div class="healthIcon"><i class="${getStateIconFromStateText(thisDiskInfo.State)}"></i></div>
|
|
<div class="content" style="margin-left: 0.6em;">
|
|
<div class="content" style="margin-left: 0.6em;">
|
|
- <span>${thisDiskInfo.DevicePath}</span> <span class="mdevice">(${thisDiskInfo.RaidLevel})</span>
|
|
|
|
|
|
+ <span>${thisDiskInfo.DevicePath}</span> <span class="mdevice">(${thisDiskInfo.RaidLevel.toUpperCase()})</span>
|
|
<div class="sub header mdevuuid" style="margin-top: 0.4em;">
|
|
<div class="sub header mdevuuid" style="margin-top: 0.4em;">
|
|
${thisDiskInfo.UUID}
|
|
${thisDiskInfo.UUID}
|
|
</div>
|
|
</div>
|