|
@@ -10,6 +10,51 @@
|
|
|
<script type="text/javascript" src="../../../script/semantic/semantic.min.js"></script>
|
|
|
<script src="../disk/quota/script/Chart.min.js"></script>
|
|
|
<style>
|
|
|
+ .mdevice{
|
|
|
+ color: rgb(59, 59, 59);
|
|
|
+ font-size: 0.8em;
|
|
|
+ }
|
|
|
+ .mdevuuid{
|
|
|
+ font-size: 0.6em !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .volinfo{
|
|
|
+ text-align: left !important;
|
|
|
+ margin-top: 0.6em !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .volinfo .numeric{
|
|
|
+ font-weight: lighter;
|
|
|
+ color: #0d79ea;
|
|
|
+ }
|
|
|
+
|
|
|
+ .volinfo .percentage{
|
|
|
+ font-weight: lighter;
|
|
|
+ color: rgb(102, 102, 102);
|
|
|
+ position: absolute;
|
|
|
+ text-align: right;
|
|
|
+ right: 1em;
|
|
|
+ top: 0em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .raidVol .usedvol{
|
|
|
+ margin-bottom: 2em !important;
|
|
|
+ }
|
|
|
+ .raidVol .usedvol .bar{
|
|
|
+ background-color: #0d79ea !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .healthIcon{
|
|
|
+ position: absolute;
|
|
|
+ left: 35px;
|
|
|
+ top: 38px;
|
|
|
+ border-radius: 50% !important;
|
|
|
+ background-color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .healthIcon i {
|
|
|
+ margin-right: 0 !important;
|
|
|
+ }
|
|
|
|
|
|
</style>
|
|
|
</head>
|
|
@@ -26,7 +71,27 @@
|
|
|
<div class="ui stackable grid">
|
|
|
<div class="six wide column" style="border-right: 1px solid #e0e0e0;">
|
|
|
<p>List of RAID Volumes</p>
|
|
|
- <div id="poolNameList">
|
|
|
+ <div id="raidVolList">
|
|
|
+ <div class="ui segment raidVol">
|
|
|
+ <h4 class="ui header">
|
|
|
+ <img src="../../img/system/raid.svg">
|
|
|
+ <div class="healthIcon"><i class="ui green check circle icon"></i></div>
|
|
|
+ <div class="content">
|
|
|
+ <span>Volume 1</span> <span class="mdevice">(/dev/md0)</span>
|
|
|
+ <div class="sub header mdevuuid" style="margin-top: 0.4em;">
|
|
|
+ cbc11a2b:fbd42653:99c1340b:9c4962fb
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <br><br>
|
|
|
+ <div class="ui small fluid usedvol progress">
|
|
|
+ <div class="bar"></div>
|
|
|
+ <div class="label volinfo">
|
|
|
+ <div class="numeric">100 / 100PB</div>
|
|
|
+ <div class="percentage">1%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </h4>
|
|
|
+ </div>
|
|
|
<div><i class="ui green check circle icon"></i> No RAID Volumes</div>
|
|
|
</div>
|
|
|
<div class="ui divider"></div>
|
|
@@ -37,16 +102,16 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ten wide column">
|
|
|
- <div id="disklist">
|
|
|
+ <div id="raidDiskList">
|
|
|
|
|
|
</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 onclick="" class="circular basic ui button">
|
|
|
+ <i class="orange unlink icon"></i> Unlink Array
|
|
|
</button>
|
|
|
- <button onclick="bridgeFsh();" title="Bridge Storage" class="circular basic blue large ui icon button">
|
|
|
- <i class="linkify icon"></i>
|
|
|
+ <button onclick="" class="circular basic red ui button">
|
|
|
+ <i class="red trash icon"></i> Remove & Wipe Array
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|