noelyahan · October 10, 2024 15:51
diff --git a/kafka-producer-buffer-tool.html b/kafka-producer-buffer-tool.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kafka Producer Buffer Simulator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }
        h1, h2 {
            color: #333;
        }
        .config-box {
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
        }
        .config-box label {
            margin: 10px 0 5px;
        }
        .result-box {
            border: 1px solid #ddd;
            padding: 15px;
            background: #fff;
            margin-top: 20px;
        }
        select, input {
            margin-left: 10px;
        }
    </style>
 </head>
 <body>

 <h1>Kafka Producer Buffer Simulator</h1>
 <h2>Configure Parameters</h2>
 <div class="config-box">
    <label for="bufferMemory">Buffer Memory:</label>
    <input type="number" id="bufferMemory" min="1" value="8">
    <select id="bufferMemoryUnit">
        <option value="1024*1024">MB</option>
        <option value="1024*1024*1024">GB</option>
        <option value="1024">KB</option>
        <option value="1">Bytes</option>
    </select>

    <label for="batchSize">Batch Size:</label>
    <input type="number" id="batchSize" min="1" value="1">
    <select id="batchSizeUnit">
        <option value="1024*1024">MB</option>
        <option value="1024*1024*1024">GB</option>
        <option value="1024">KB</option>
        <option value="1">Bytes</option>
    </select>

    <label for="numPartitions">Number of Partitions:</label>
    <input type="number" id="numPartitions" min="1" max="16" value="8">
    
    <label for="messageSize">Message Size:</label>
    <input type="number" id="messageSize" min="1" value="1">
    <select id="messageSizeUnit">
        <option value="1024*1024">MB</option>
        <option value="1024*1024*1024">GB</option>
        <option value="1024">KB</option>
        <option value="1">Bytes</option>
    </select>
 </div>

 <button onclick="simulateBuffering()">Simulate</button>

 <h2>Simulation Results</h2>
 <div class="result-box" id="results">
    Adjust the parameters and click "Simulate" to see the results.
 </div>

 <script>
 // Function to simulate buffering based on configurations
 function simulateBuffering() {
    // Read values from the UI inputs
    const bufferMemory = convertToBytes(parseFloat(document.getElementById("bufferMemory").value), document.getElementById("bufferMemoryUnit").value);
    const batchSize = convertToBytes(parseFloat(document.getElementById("batchSize").value), document.getElementById("batchSizeUnit").value);
    const messageSize = convertToBytes(parseFloat(document.getElementById("messageSize").value), document.getElementById("messageSizeUnit").value);
    const numPartitions = parseInt(document.getElementById("numPartitions").value);

    // Initialize memory allocation for each partition
    let partitionBuffer = new Array(numPartitions).fill(0);
    let totalMessagesBuffered = 0;

    // Distribute messages across partitions until buffer is full or all partitions have maxed out
    while (true) {
        let canBufferMoreMessages = false;
        for (let i = 0; i < numPartitions; i++) {
            if (partitionBuffer[i] + messageSize <= batchSize && totalBufferedMemory(partitionBuffer) + messageSize <= bufferMemory) {
                partitionBuffer[i] += messageSize;
                totalMessagesBuffered++;
                canBufferMoreMessages = true;
            }
        }
        if (!canBufferMoreMessages) break;
    }

    // Display the results
    let resultHTML = `
        <p><strong>Buffer Memory:</strong> ${formatSize(bufferMemory)}</p>
        <p><strong>Batch Size:</strong> ${formatSize(batchSize)}</p>
        <p><strong>Message Size:</strong> ${formatSize(messageSize)}</p>
        <p><strong>Number of Partitions:</strong> ${numPartitions}</p>
        <p><strong>Total Messages Buffered:</strong> ${totalMessagesBuffered}</p>
        <h3>Memory Usage Per Partition:</h3>
        <ul>
    `;
    partitionBuffer.forEach((buffer, index) => {
        resultHTML += `<li>Partition ${index + 1}: ${formatSize(buffer)}</li>`;
    });
    resultHTML += `</ul>`;

    document.getElementById("results").innerHTML = resultHTML;
 }

 // Helper function to convert units to bytes
 function convertToBytes(value, unit) {
    return value * eval(unit);
 }

 // Helper function to format bytes into human-readable sizes
 function formatSize(bytes) {
    if (bytes >= 1024 * 1024 * 1024) return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
    if (bytes >= 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
    if (bytes >= 1024) return (bytes / 1024).toFixed(2) + ' KB';
    return bytes + ' Bytes';
 }

 // Helper function to calculate total buffered memory
 function totalBufferedMemory(partitionBuffer) {
    return partitionBuffer.reduce((sum, buffer) => sum + buffer, 0);
 }
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Kafka Producer Buffer Simulator</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	padding: 20px;
	background-color: #f4f4f4;
	}
	h1, h2 {
	color: #333;
	}
	.config-box {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	}
	.config-box label {
	margin: 10px 0 5px;
	}
	.result-box {
	border: 1px solid #ddd;
	padding: 15px;
	background: #fff;
	margin-top: 20px;
	}
	select, input {
	margin-left: 10px;
	}
	</style>
	</head>
	<body>

	<h1>Kafka Producer Buffer Simulator</h1>
	<h2>Configure Parameters</h2>
	<div class="config-box">
	<label for="bufferMemory">Buffer Memory:</label>
	<input type="number" id="bufferMemory" min="1" value="8">
	<select id="bufferMemoryUnit">
	<option value="1024*1024">MB</option>
	<option value="102410241024">GB</option>
	<option value="1024">KB</option>
	<option value="1">Bytes</option>
	</select>

	<label for="batchSize">Batch Size:</label>
	<input type="number" id="batchSize" min="1" value="1">
	<select id="batchSizeUnit">
	<option value="1024*1024">MB</option>
	<option value="102410241024">GB</option>
	<option value="1024">KB</option>
	<option value="1">Bytes</option>
	</select>

	<label for="numPartitions">Number of Partitions:</label>
	<input type="number" id="numPartitions" min="1" max="16" value="8">

	<label for="messageSize">Message Size:</label>
	<input type="number" id="messageSize" min="1" value="1">
	<select id="messageSizeUnit">
	<option value="1024*1024">MB</option>
	<option value="102410241024">GB</option>
	<option value="1024">KB</option>
	<option value="1">Bytes</option>
	</select>
	</div>

	<button onclick="simulateBuffering()">Simulate</button>

	<h2>Simulation Results</h2>
	<div class="result-box" id="results">
	Adjust the parameters and click "Simulate" to see the results.
	</div>

	<script>
	// Function to simulate buffering based on configurations
	function simulateBuffering() {
	// Read values from the UI inputs
	const bufferMemory = convertToBytes(parseFloat(document.getElementById("bufferMemory").value), document.getElementById("bufferMemoryUnit").value);
	const batchSize = convertToBytes(parseFloat(document.getElementById("batchSize").value), document.getElementById("batchSizeUnit").value);
	const messageSize = convertToBytes(parseFloat(document.getElementById("messageSize").value), document.getElementById("messageSizeUnit").value);
	const numPartitions = parseInt(document.getElementById("numPartitions").value);

	// Initialize memory allocation for each partition
	let partitionBuffer = new Array(numPartitions).fill(0);
	let totalMessagesBuffered = 0;

	// Distribute messages across partitions until buffer is full or all partitions have maxed out
	while (true) {
	let canBufferMoreMessages = false;
	for (let i = 0; i < numPartitions; i++) {
	if (partitionBuffer[i] + messageSize <= batchSize && totalBufferedMemory(partitionBuffer) + messageSize <= bufferMemory) {
	partitionBuffer[i] += messageSize;
	totalMessagesBuffered++;
	canBufferMoreMessages = true;
	}
	}
	if (!canBufferMoreMessages) break;
	}

	// Display the results
	let resultHTML = `
	<p><strong>Buffer Memory:</strong> ${formatSize(bufferMemory)}</p>
	<p><strong>Batch Size:</strong> ${formatSize(batchSize)}</p>
	<p><strong>Message Size:</strong> ${formatSize(messageSize)}</p>
	<p><strong>Number of Partitions:</strong> ${numPartitions}</p>
	<p><strong>Total Messages Buffered:</strong> ${totalMessagesBuffered}</p>
	<h3>Memory Usage Per Partition:</h3>
	<ul>
	`;
	partitionBuffer.forEach((buffer, index) => {
	resultHTML += `<li>Partition ${index + 1}: ${formatSize(buffer)}</li>`;
	});
	resultHTML += `</ul>`;

	document.getElementById("results").innerHTML = resultHTML;
	}

	// Helper function to convert units to bytes
	function convertToBytes(value, unit) {
	return value * eval(unit);
	}

	// Helper function to format bytes into human-readable sizes
	function formatSize(bytes) {
	if (bytes >= 1024 * 1024 * 1024) return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
	if (bytes >= 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
	if (bytes >= 1024) return (bytes / 1024).toFixed(2) + ' KB';
	return bytes + ' Bytes';
	}

	// Helper function to calculate total buffered memory
	function totalBufferedMemory(partitionBuffer) {
	return partitionBuffer.reduce((sum, buffer) => sum + buffer, 0);
	}
	</script>

	</body>
	</html>