JSFiddle - React, Tailwind, and code Playground

by Biduleohm

HTML

<div class="spacer"></div>
<p>
    Drive size: <input type="text" id="drive_size_tb" value="1"> TB<br />
    Number of drives: <input type="text" id="drives_number" value="1"><br />
    RAID type: <select id="raid_type" value="raidz2">
        <option value="raidz1">RAID-Z1</option>
        <option value="raidz2">RAID-Z2</option>
        <option value="raidz3">RAID-Z3</option>
        <option value="mirror">Mirror</option>
        <option value="mirror3">3 Drives Mirror</option>
        <option value="mirror4">4 Drives Mirror</option>
        <option value="stripe">Stripe</option>
    </select> (requires at least <span id="min_drives">3</span> drives)<br />
    <span id="drive_mtbf_wrapper">Drive MTBF: <input type="text" id="drive_mtbf" value="0.5"> Mh<br /></span>
    <span id="mttpr_wrapper">MTTPR: <input type="text" id="mttpr" value="72"> h<br /></span>
    <span id="rebuild_speed_wrapper">Rebuild speed: <input type="text" id="rebuild_speed" value="100"> MiB/s</span>
</p>
<table>
	<thead>
		<tr>
			<th class="desc">&nbsp;</th><th class="tib">TiB</th><th class="tb">TB</th><th class="p">%</th>
		</tr>
	</thead>
	<tbody>
		<tr id="drive_size">
			<td class="desc">Drive size</td><td class="tib">0</td><td class="tb">0</td><td class="p">N/A</td>
		</tr>
	</tbody>
	<tbody>
		<tr id="parity_space">
			<td class="desc">Total parity space</td><td class="tib">0</td><td class="tb">0</td><td class="p">0</td>
		</tr>
		<tr id="data_space">
			<td class="desc">Total data space</td><td class="tib">0</td><td class="tb">0</td><td class="p">0</td>
		</tr>
		<tr id="raid_space">
			<td class="desc">Total RAID space</td><td class="tib">0</td><td class="tb">0</td><td class="p">0</td>
		</tr>
	</tbody>
	<tbody>
		<tr id="metadata_overhead">
			<td class="desc">Metadata overhead</td><td class="tib">0</td><td class="tb">0</td><td class="p">0</td>
		</tr>
		<tr id="blocks_overhead">
			<td class="desc">Blocks overhead</td><td class="tib">0</td><td class="tb">0</td><td...

CSS

.spacer {
    height: 1em;
}

p {
    line-height: 1.4em;
    margin: 0;
    padding: 0;
}

input {
    height: 1em;
    width: 1.6em;
}

table, th, td {
    border: none;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}

tbody {
	border-top: 1em solid white;
}

th, td {
    padding: 0.1em 0;
}

th.desc, td.desc {
    padding-right: 0.3em;
    text-align: left;
}

td.tib, td.tb, td.p {
    padding: 0 0.3em;
    text-align: center;
    width: 2.5em;
}

JavaScript

$(document).ready(function() {
    var tbToTibRatio = 0.9095;
    var metadataOverheadRatio = 0.016; // 1/64 rule
    var blocksOverheadRatio = 0.0;
    var maxRecommendedUsage = 0.8; // 80% rule
    var raids = {
        raidz1  : {
            getMinDrives    : "3",
            getParityDrives : function(_drives) {return 1;},
            getDataDrives   : function(_drives) {return _drives - 1;},
            getMttdl        : function(_mtbf, _drives, _mttr) {
				return (_mtbf * _mtbf) / (_mttr * (_drives * (_drives - 1)));
			}
        },
        raidz2  : {
            getMinDrives    : "4",
            getParityDrives : function(_drives) {return 2;},
            getDataDrives   : function(_drives) {return _drives - 2;},
            getMttdl        : function(_mtbf, _drives, _mttr) {
				return Math.pow(_mtbf, 3) / ((_mttr * _mttr) * (_drives * (_drives - 1) * (_drives - 2)));
			}
        },
        raidz3  : {
            getMinDrives    : "5",
            getParityDrives : function(_drives) {return 3;},
            getDataDrives   : function(_drives) {return _drives - 3;},
            getMttdl        : function(_mtbf, _drives, _mttr) {
				return Math.pow(_mtbf, 4) / (Math.pow(_mttr, 3) * (_drives * (_drives - 1) * (_drives - 2) * (_drives - 3)));
			}
        },
        mirror  : {
            getMinDrives    : "2",
            getParityDrives : function(_drives) {return _drives / 2;},
            getDataDrives   : function(_drives) {return _drives / 2;},
            getMttdl        : function(_mtbf, _drives, _mttr) {
				return (_mtbf * _mtbf) / (_mttr * (_drives * (_drives - 1)));
			}
        },
        mirror3 : {
            getMinDrives    : "3",
            getParityDrives : function(_drives) {return (_drives / 3) * 2;},
            getDataDrives   : function(_drives) {return _drives / 3;},
            getMttdl        : function(_mtbf, _drives, _mttr) {
				return Math.pow(_mtbf, 3) / ((_mttr * _mttr) * (_drives * (_drives - 1) * (_drives -...