|
|
@@ -86,16 +86,76 @@
|
|
|
user-select: none;
|
|
|
}
|
|
|
|
|
|
+ /* Emulate the NAS disk interface */
|
|
|
+ .nasFrontPanel{
|
|
|
+ display: block;
|
|
|
+ border-radius: 0.4em;
|
|
|
+ background-color: white;
|
|
|
+ border: 1px solid rgb(214, 214, 214);
|
|
|
+ min-height: 150px;
|
|
|
+ padding: 1em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nasDisk{
|
|
|
+ width: 30px;
|
|
|
+ height: 120px;
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 0.4em;
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 0.4em;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nasDisk:hover{
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nasDisk.inactive{
|
|
|
+ background: rgb(98,98,98);
|
|
|
+ background: linear-gradient(217deg, rgba(98,98,98,1) 12%, rgba(59,59,59,1) 77%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .nasDisk.active{
|
|
|
+ background: rgb(96,133,215);
|
|
|
+ background: linear-gradient(217deg, rgba(96,133,215,1) 12%, rgba(31,122,196,1) 77%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .nasDisk.faulty{
|
|
|
+ background: rgb(215,96,96);
|
|
|
+ background: linear-gradient(217deg, rgba(215,96,96,1) 12%, rgba(168,51,43,1) 77%);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .nasDisk .nasDiskLabel{
|
|
|
+ position: absolute;
|
|
|
+ transform-origin: 0 0;
|
|
|
+ color: white;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ width: 150px;
|
|
|
+ height: 40px;
|
|
|
+ margin-top: 120px;
|
|
|
+ padding: 0.6em;
|
|
|
+ padding-top: 0.6em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nasDisk .nasDiskNumberTag{
|
|
|
+ position: absolute;
|
|
|
+ top: 0em;
|
|
|
+ right: 0em;
|
|
|
+ height: 22px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgb(44, 44, 44);
|
|
|
+ color: rgb(233, 233, 233);
|
|
|
+ text-align: center;
|
|
|
+ border-top-left-radius: 0.4em;
|
|
|
+ border-top-right-radius: 0.4em;
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <div class="ui container" style="margin-top: 1em;">
|
|
|
- <h1 class="ui header">
|
|
|
- <span id="healthy"><i class="ui loading circle notch icon"></i> Loading</span>
|
|
|
- <div class="sub header"><span id="totalVolume">0</span> RAID volumes Loaded</div>
|
|
|
- </h1>
|
|
|
- <div class="ui divider"></div>
|
|
|
- </div>
|
|
|
+ <br>
|
|
|
<div class="ui container">
|
|
|
<div class="ui stackable grid">
|
|
|
<div class="six wide column" style="border-right: 1px solid #e0e0e0;">
|
|
|
@@ -131,49 +191,121 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ten wide column">
|
|
|
- <div id="raidDiskList">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="ui divider"></div>
|
|
|
- <div class="dangerzone">
|
|
|
- <div class="header">
|
|
|
- <h4>Danger Zone</h4>
|
|
|
+ <div id="volumeOverviews">
|
|
|
+ <div class="ui basic segment">
|
|
|
+ <h1 class="ui header">
|
|
|
+ <span id="healthy"><i class="ui loading circle notch icon"></i> Loading</span>
|
|
|
+ <div class="sub header"><span id="totalVolume">0</span> RAID volumes Loaded</div>
|
|
|
+ </h1>
|
|
|
+ </div>
|
|
|
+ <div class="ui divider"></div>
|
|
|
+ <div class="ui basic segment">
|
|
|
+ <div id="diskEmu" class="nasFrontPanel">
|
|
|
+ <div class="nasDisk">
|
|
|
+ <div class="nasDiskLabel">/dev/sda</div>
|
|
|
+ <div class="nasDiskNumberTag">0</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <table class="ui very basic compact celled table" style="padding-left: 1em; padding-right: 1em;">
|
|
|
- <tbody>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <h4>Unlink RAID Volume</h4>
|
|
|
- <p>Unmount and remove the RAID volume from runtime but keep the mdadm config file. <br>
|
|
|
- The RAID volume will get remounted after system reboot. This is suitable for temporary manual maintenance.</p>
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- <button onclick="" class="circular basic ui button">
|
|
|
- <i class="orange unlink icon"></i> Unlink 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 basic red ui button">
|
|
|
- <i class="red trash icon"></i> Remove Volume
|
|
|
- </button>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
</div>
|
|
|
+ <div id="volumeDetail">
|
|
|
+
|
|
|
|
|
|
+ <div id="raidDiskList">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="ui divider"></div>
|
|
|
+ <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>Unlink RAID Volume</h4>
|
|
|
+ <p>Unmount and remove the RAID volume from runtime but keep the mdadm config file. <br>
|
|
|
+ The RAID volume will get remounted after system reboot. This is suitable for temporary manual maintenance.</p>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <button onclick="" class="circular basic ui button">
|
|
|
+ <i class="orange unlink icon"></i> Unlink 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 basic red ui button">
|
|
|
+ <i class="red trash icon"></i> Remove Volume
|
|
|
+ </button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
+ var diskData = [{
|
|
|
+ "DevicePath" : "/dev/sda",
|
|
|
+ "State": ["active", "sync"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "DevicePath" : "/dev/sdb",
|
|
|
+ "State": ["active", "sync"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "DevicePath" : "/dev/sdc",
|
|
|
+ "State": ["faulty", "spare"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "DevicePath" : "/dev/sdd",
|
|
|
+ "State": []
|
|
|
+ }];
|
|
|
+
|
|
|
+ $("#volumeDetail").hide();
|
|
|
+
|
|
|
+ function GenerateEmulatedDisk(){
|
|
|
+ $("#diskEmu").html("");
|
|
|
+
|
|
|
+ //Generate the list of disk base on diskData
|
|
|
+ let diskCounter = 0;
|
|
|
+ diskData.forEach(function(diskInfo){
|
|
|
+ let diskStateClass = "inactive";
|
|
|
+ if (diskInfo.State.length > 0){
|
|
|
+ for (var i = 0; i < diskInfo.State.length; i++){
|
|
|
+ let thisState = diskInfo.State[i];
|
|
|
+ if (thisState == "sync" || thisState == "active"){
|
|
|
+ diskStateClass = "active";
|
|
|
+ }else if (thisState == "faulty"){
|
|
|
+ diskStateClass = "faulty"
|
|
|
+ }
|
|
|
+
|
|
|
+ //Add more state here if required
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ console.log(diskStateClass);
|
|
|
+ $("#diskEmu").append(`
|
|
|
+ <div class="nasDisk ${diskStateClass}">
|
|
|
+ <div class="nasDiskLabel">${diskInfo.DevicePath}</div>
|
|
|
+ <div class="nasDiskNumberTag">${diskCounter}</div>
|
|
|
+ </div>
|
|
|
+ `);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ diskCounter++;
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
+ GenerateEmulatedDisk();
|
|
|
</script>
|
|
|
|
|
|
</body>
|
Toby Chui