JSFiddle - React, Tailwind, and code Playground

by blackhf

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<h3>Cluster information</h3>  
<table>
    <tbody><tr>
        <td class="uno"><label>Number of nodes</label></td>
        <td class="dos"><input type="number" value="5" id="node_count" step="1"> <label>Node(s)</label></td>
        <td class="tres">The total number of nodes available in the YARN cluster.</td>
    </tr>
    <tr>
        <td class="uno"><label>Number of cores of a node</label></td>
        <td class="dos"><input type="number" value="32" id="node_cores" step="1"> <label>Cores</label></td>
        <td class="tres">The number of cores of a single node.</td>
    </tr>
    <tr>
        <td class="uno"><label>Physical memory of a node</label></td>
        <td class="dos"><input type="number" value="98174" id="node_pmem" step="1"> <label>MB</label></td>
        <td class="tres">The total pmem of a single node.</td>
    </tr>
    </tbody>
</table>
<br>
<h3>YARN parameters from /usr/hdp/current/hadoop-client/conf/yarn-site.xml:</h3>
<table>
    <tbody>
    <tr>
        <td class="uno"><label>yarn.nodemanager.resource.memory-mb</label></td>
        <td class="dos"><input type="number" value="67584" id="yarn_nm_resrc_mem_mb" step="1"> <label>MB</label></td>
        <td class="tres">The maximum pmem allocated for all containers of <b>a single node</b>. (Must be &lt; node physicial memory).</td>
    </tr>
    <tr>
        <td class="uno"><label>yarn.scheduler.minimum-allocation-mb</label></td>
        <td class="dos"><input type="number" value="3072" step="1" id="yarn_sched_min_alloc_mb"> <label>MB</label></td>
        <td class="tres">The minimum pmem allocated for a container.</td>
    </tr>
    <tr>
        <td class="uno"><label>yarn.scheduler.maximum-allocation-mb</label></td>
        <td class="dos"><input type="number" value="67584" id="yarn_sched_max_alloc_mb" step="1"> <label>MB</label></td>
        <td class="tres">The maximum pmem allocated for a container. (Must be &lt;=...

CSS

.uno {
  width: 30%;
}
.dos {
  width: 20%;
}
.tres {
  width: 50%;
}

td {
  background-color: #ededed;
  padding: 5px;
}

e {
  font-weight: bold;
}

input {
  width: 70px;
}

.flashit{
  background-color:#ff0000;
	-webkit-animation: flash linear 0.5s infinite;
	animation: flash linear 0.5s infinite;
  color: #fff;
}
@-webkit-keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}
@keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}

.orange {
  color: #ff8c00;
}

.green-bg {
  background-color: #32cd32;
  color: #fff;
}
.orange-bg {
  background-color:  #ff8c00;
  color: #fff;
}
.red-bg {
  background-color: #cc0000;
  color: #fff;
}

.verticalText {
}

JavaScript

function fixVal(valName, value, fromName = "") {
  $(valName).addClass('flashit');
  if (!fromName === "")
  	$(fromName).addClass('flashit');
  $(fromName).addClass('flashit');
  setTimeout(function () {
    $('input').removeClass('flashit');
		$(valName).val(value);
  }, 1000);
}

function setText(valName, value, colorClass) {
  $(valName).text(value);
  $(valName).addClass(colorClass);
}

function delText(valName) {
	$(valName).text("");
}
  

$( "input" ).blur(function() {
	var node_count = parseInt($("#node_count").val());
  if (node_count < 1) {
  	fixVal("#node_count", 1);
    node_count = 1;
  }
  var val01 = node_count;
  $("#val01").text(val01);
  
	var node_cores = parseInt($("#node_cores").val());
  if (node_cores < 1) {
  	fixVal("#node_cores", 1);
    node_cores = 1;
  }
  var val02 = node_count*node_cores;
  $("#val02").text(val02);
  
	var node_pmem = parseInt($("#node_pmem").val());
  if (node_pmem < 1) {
  	fixVal("#node_pmem", 1);
  }
  var val03 = node_count*node_pmem;
  $("#val03").text(val03);

  
	var yarn_nm_resrc_mem_mb = parseInt($("#yarn_nm_resrc_mem_mb").val());
  if (yarn_nm_resrc_mem_mb < 1) {
  	fixVal("#yarn_nm_resrc_mem_mb", 1);
    yarn_nm_resrc_mem_mb = 1;
  }
  if (yarn_nm_resrc_mem_mb > node_pmem) {
  	fixVal("#yarn_nm_resrc_mem_mb", node_pmem, "#node_pmem");
    yarn_nm_resrc_mem_mb = node_pmem;
  }
  
  if (yarn_nm_resrc_mem_mb > node_pmem * 0.95) {
  	var val10 = "You should not allocate more than 95% of the memory of a node to YARN (consider lowering yarn.nodemanager.resource.memory-mb)";
    setText("#val10", val10, "orange");
  } else
 		delText("#val10");
    
    
  var yarn_sched_min_alloc_mb = parseInt($("#yarn_sched_min_alloc_mb").val());
  if (yarn_sched_min_alloc_mb < 1) {
  	fixVal("#yarn_sched_min_alloc_mb", 1);
    yarn_sched_min_alloc_mb = 1;
  }
    
	var yarn_sched_max_alloc_mb = parseInt($("#yarn_sched_max_alloc_mb").val());
  if (yarn_sched_max_alloc_mb < 1) {
  	fixVal("#yarn_sched_max_alloc_mb", 1);
   ...