import React, { useState, useMemo } from 'react'; import { Calculator, Info, AlertCircle, Plus, Trash2, Edit3 } from 'lucide-react'; const ComprehendThrottleCalculator = () => { const [operation, setOperation] = useState('DetectSentiment'); const [throughput, setThroughput] = useState(''); const [accountId, setAccountId] = useState(''); const [period, setPeriod] = useState('60'); const [selectedRegion, setSelectedRegion] = useState(''); const [regionConfigs, setRegionConfigs] = useState({}); const [newRegionName, setNewRegionName] = useState(''); const [newRegionJson, setNewRegionJson] = useState(''); const [editingRegion, setEditingRegion] = useState(''); const sampleConfig = { "metadata": { "schemaVersion": 6, "createdFor": "Comprehend", "creationTime": "2017-06-01T00:00:00Z" }, "limits": { "throttle-limit-sentiment": { "*": 500000, "accounts": { "971813580965": 10000000, "765245352503": 600000 }, "servicePrincipals": {} }, "throttle-limit-targeted-sentiment": { "*": 125000, "accounts": {}, "servicePrincipals": {} }, "throttle-limit-entities": { "*": 250000, "accounts": {}, "servicePrincipals": {} }, "throttle-limit-keyphrases": { "*": 250000, "accounts": {}, "servicePrincipals": {} }, "throttle-limit-pii-classifier": { "*": 1000000, "accounts": {}, "servicePrincipals": {} }, "throttle-limit-pii-detection": { "*": 250000, "accounts": { "945410780938": 350000 }, "servicePrincipals": {} }, "throttle-limit-language": { "*": 500000, "accounts": {}, "servicePrincipals": {} } } }; const operationToLimitKey = { 'DetectSentiment': 'throttle-limit-sentiment', 'BatchDetectSentiment': 'throttle-limit-sentiment', 'DetectTargetedSentiment': 'throttle-limit-targeted-sentiment', 'BatchDetectTargetedSentiment': 'throttle-limit-targeted-sentiment', 'DetectEntities': 'throttle-limit-entities', 'BatchDetectEntities': 'throttle-limit-entities', 'DetectKeyPhrases': 'throttle-limit-keyphrases', 'BatchDetectKeyPhrases': 'throttle-limit-keyphrases', 'ContainsPiiEntities': 'throttle-limit-pii-classifier', 'DetectPiiEntities': 'throttle-limit-pii-detection', 'DetectDominantLanguage': 'throttle-limit-language', 'BatchDetectDominantLanguage': 'throttle-limit-language' }; const addRegionConfig = () => { if (!newRegionName.trim() || !newRegionJson.trim()) return; try { const parsedConfig = JSON.parse(newRegionJson); setRegionConfigs(prev => ({ ...prev, [newRegionName]: parsedConfig })); setNewRegionName(''); setNewRegionJson(''); if (!selectedRegion) { setSelectedRegion(newRegionName); } } catch (e) { // Invalid JSON - user will see the validation message } }; const deleteRegionConfig = (regionName) => { setRegionConfigs(prev => { const newConfigs = { ...prev }; delete newConfigs[regionName]; return newConfigs; }); if (selectedRegion === regionName) { setSelectedRegion(Object.keys(regionConfigs).filter(r => r !== regionName)[0] || ''); } }; const startEditingRegion = (regionName) => { setEditingRegion(regionName); setNewRegionJson(JSON.stringify(regionConfigs[regionName], null, 2)); }; const saveEditedRegion = () => { if (!editingRegion || !newRegionJson.trim()) return; try { const parsedConfig = JSON.parse(newRegionJson); setRegionConfigs(prev => ({ ...prev, [editingRegion]: parsedConfig })); setEditingRegion(''); setNewRegionJson(''); } catch (e) { // Invalid JSON - user will see the validation message } }; const cancelEditing = () => { setEditingRegion(''); setNewRegionJson(''); }; const loadSampleConfig = () => { setNewRegionJson(JSON.stringify(sampleConfig, null, 2)); }; const calculations = useMemo(() => { if (!throughput || !operation || !selectedRegion || !regionConfigs[selectedRegion]) { return null; } const limits = regionConfigs[selectedRegion]; const limitKey = operationToLimitKey[operation]; if (!limitKey || !limits.limits || !limits.limits[limitKey]) { return { error: 'Operation not found in limits configuration' }; } const limitConfig = limits.limits[limitKey]; let applicableLimit; if (accountId && limitConfig.accounts && limitConfig.accounts[accountId]) { applicableLimit = limitConfig.accounts[accountId]; } else { applicableLimit = limitConfig['*']; } if (!applicableLimit) { return { error: 'No applicable limit found for this configuration' }; } const throughputNum = parseFloat(throughput); const periodNum = parseInt(period); if (isNaN(throughputNum) || isNaN(periodNum)) { return { error: 'Invalid throughput or period value' }; } const bytesPerSecond = throughputNum / periodNum; const utilizationPercent = (bytesPerSecond / applicableLimit) * 100; return { operation, region: selectedRegion, limitKey, applicableLimit, accountSpecific: accountId && limitConfig.accounts && limitConfig.accounts[accountId] ? true : false, throughputBytesPerPeriod: throughputNum, periodSeconds: periodNum, bytesPerSecond, utilizationPercent, remainingCapacity: applicableLimit - bytesPerSecond, remainingCapacityPercent: 100 - utilizationPercent }; }, [operation, throughput, accountId, period, selectedRegion, regionConfigs]); const getUtilizationColor = (percent) => { if (percent >= 90) return 'text-red-600 bg-red-50'; if (percent >= 75) return 'text-orange-600 bg-orange-50'; if (percent >= 50) return 'text-yellow-600 bg-yellow-50'; return 'text-green-600 bg-green-50'; }; const isValidJson = (jsonString) => { try { JSON.parse(jsonString); return true; } catch (e) { return false; } }; return (

AWS Comprehend Throttle Utilization Calculator

Configure region-specific limits, then calculate your current utilization percentage

Region Configurations

{Object.keys(regionConfigs).length > 0 && (

Configured Regions

{Object.keys(regionConfigs).map((regionName) => (

{regionName}

))}

)}

{editingRegion ? (

Editing: {editingRegion}

setNewRegionJson(e.target.value)}
                      placeholder="Paste your limits JSON here..."
                      rows={6}
                      className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-xs resize-none"
                    />
                    {newRegionJson && (
                      <div className="mt-2 text-xs">
                        {isValidJson(newRegionJson) ? (
                          <div className="text-green-600 flex items-center gap-1">
                            <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                            Valid JSON format
                          </div>
                        ) : (
                          <div className="text-red-600 flex items-center gap-1">
                            <AlertCircle className="w-3 h-3" />
                            Invalid JSON format
                          </div>
                        )}
                      </div>
                    )}
                    <div className="flex flex-col sm:flex-row gap-2 mt-3">
                      <button
                        onClick={saveEditedRegion}
                        disabled={!newRegionJson.trim() || !isValidJson(newRegionJson)}
                        className="flex-1 px-3 py-2 bg-blue-600 text-white text-sm rounded disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
                      >
                        Save Changes
                      </button>
                      <button
                        onClick={cancelEditing}
                        className="flex-1 px-3 py-2 bg-gray-500 text-white text-sm rounded hover:bg-gray-600 transition-colors"
                      >
                        Cancel
                      </button>
                    </div>
                  </div>
                ) : (
                  <>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Region Name
                      </label>
                      <input
                        type="text"
                        value={newRegionName}
                        onChange={(e) => setNewRegionName(e.target.value)}
                        placeholder="e.g., us-east-1, eu-west-1"
                        className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                      />
                    </div>
                    
                    <div>
                      <div className="flex items-center justify-between mb-2">
                        <label className="block text-sm font-medium text-gray-700">
                          Limits JSON
                        </label>
                        <button
                          onClick={loadSampleConfig}
                          className="text-xs text-blue-600 hover:text-blue-800 px-2 py-1 rounded hover:bg-blue-50 transition-colors"
                        >
                          Load Sample
                        </button>
                      </div>
                      <textarea
                        value={newRegionJson}
                        onChange={(e) => setNewRegionJson(e.target.value)}
                        placeholder="Paste your limits JSON here..."
                        rows={6}
                        className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-xs resize-none"
                      />
                      {newRegionJson && (
                        <div className="mt-2 text-xs">
                          {isValidJson(newRegionJson) ? (
                            <div className="text-green-600 flex items-center gap-1">
                              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                              Valid JSON format
                            </div>
                          ) : (
                            <div className="text-red-600 flex items-center gap-1">
                              <AlertCircle className="w-3 h-3" />
                              Invalid JSON format
                            </div>
                          )}
                        </div>
                      )}
                    </div>

<button
                      onClick={addRegionConfig}
                      disabled={!newRegionName.trim() || !newRegionJson.trim() || !isValidJson(newRegionJson)}
                      className="w-full flex items-center justify-center gap-2 p-3 bg-blue-600 text-white rounded-md disabled:bg-gray-300 disabled:cursor-not-allowed hover:bg-blue-700 transition-colors"
                    >
                      <Plus className="w-4 h-4" />
                      Add Region Configuration
                    </button>
                  </>
                )}
              </div>
            </div>
          </div>

<div className="lg:col-span-2 order-1 lg:order-2 space-y-4 sm:space-y-6">
            <div className="bg-white shadow-sm border border-gray-200 p-4 sm:p-6 rounded-lg">
              <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                Calculate Utilization
              </h2>
              
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="sm:col-span-2 lg:col-span-1">
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Select Region
                  </label>
                  <select 
                    value={selectedRegion} 
                    onChange={(e) => setSelectedRegion(e.target.value)}
                    className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                    disabled={Object.keys(regionConfigs).length === 0}
                  >
                    <option value="">
                      {Object.keys(regionConfigs).length === 0 ? 'No regions configured' : 'Select a region'}
                    </option>
                    {Object.keys(regionConfigs).map((regionName) => (
                      <option key={regionName} value={regionName}>{regionName}</option>
                    ))}
                  </select>
                </div>

<div className="sm:col-span-2 lg:col-span-1">
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Operation
                  </label>
                  <select 
                    value={operation} 
                    onChange={(e) => setOperation(e.target.value)}
                    className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                  >
                    <option value="DetectSentiment">DetectSentiment</option>
                    <option value="BatchDetectSentiment">BatchDetectSentiment</option>
                    <option value="DetectTargetedSentiment">DetectTargetedSentiment</option>
                    <option value="BatchDetectTargetedSentiment">BatchDetectTargetedSentiment</option>
                    <option value="DetectEntities">DetectEntities</option>
                    <option value="BatchDetectEntities">BatchDetectEntities</option>
                    <option value="DetectKeyPhrases">DetectKeyPhrases</option>
                    <option value="BatchDetectKeyPhrases">BatchDetectKeyPhrases</option>
                    <option value="ContainsPiiEntities">ContainsPiiEntities</option>
                    <option value="DetectPiiEntities">DetectPiiEntities</option>
                    <option value="DetectDominantLanguage">DetectDominantLanguage</option>
                    <option value="BatchDetectDominantLanguage">BatchDetectDominantLanguage</option>
                  </select>
                </div>

<div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Current Throughput
                    <span className="block text-xs text-gray-500">bytes per period (from DynamicThrottlingRequestBytes)</span>
                  </label>
                  <input
                    type="number"
                    value={throughput}
                    onChange={(e) => setThroughput(e.target.value)}
                    placeholder="e.g., 150000"
                    className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                  />
                </div>

<div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    CloudWatch Period
                    <span className="block text-xs text-gray-500">aggregation window in seconds</span>
                  </label>
                  <select 
                    value={period} 
                    onChange={(e) => setPeriod(e.target.value)}
                    className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                  >
                    <option value="60">60 seconds (1 minute)</option>
                    <option value="300">300 seconds (5 minutes)</option>
                    <option value="900">900 seconds (15 minutes)</option>
                    <option value="3600">3600 seconds (1 hour)</option>
                  </select>
                </div>

<div className="sm:col-span-2">
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Account ID
                    <span className="block text-xs text-gray-500">optional - for account-specific limits</span>
                  </label>
                  <input
                    type="text"
                    value={accountId}
                    onChange={(e) => setAccountId(e.target.value)}
                    placeholder="e.g., 971813580965"
                    className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                  />
                </div>
              </div>
            </div>

{calculations && !calculations.error && (
              <div className="bg-white shadow-sm border border-gray-200 rounded-lg p-4 sm:p-6">
                <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
                  <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
                  Utilization Results
                </h2>
                
                <div className="space-y-4 sm:space-y-6">
                  <div className={`p-4 sm:p-6 rounded-lg ${getUtilizationColor(calculations.utilizationPercent)}`}>
                    <div className="text-center">
                      <div className="text-3xl sm:text-4xl font-bold">
                        {calculations.utilizationPercent.toFixed(2)}%
                      </div>
                      <div className="text-sm sm:text-base font-medium mt-1">Current Utilization</div>
                    </div>
                  </div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 text-sm">
                    <div className="bg-gray-50 p-3 rounded-lg">
                      <div className="font-medium text-gray-700 text-xs uppercase tracking-wide">Region</div>
                      <div className="text-gray-900 mt-1 font-medium">{calculations.region}</div>
                    </div>
                    <div className="bg-gray-50 p-3 rounded-lg">
                      <div className="font-medium text-gray-700 text-xs uppercase tracking-wide">Operation</div>
                      <div className="text-gray-900 mt-1 font-medium truncate">{calculations.operation}</div>
                    </div>
                    <div className="bg-gray-50 p-3 rounded-lg">
                      <div className="font-medium text-gray-700 text-xs uppercase tracking-wide">Limit Type</div>
                      <div className="text-gray-900 mt-1 font-medium">
                        {calculations.accountSpecific ? 'Account-specific' : 'Default'}
                      </div>
                    </div>
                    <div className="bg-gray-50 p-3 rounded-lg">
                      <div className="font-medium text-gray-700 text-xs uppercase tracking-wide">Account ID</div>
                      <div className="text-gray-900 mt-1 font-medium">{accountId || 'Default'}</div>
                    </div>
                  </div>

<div className="bg-gray-50 rounded-lg p-4">
                    <h3 className="font-medium text-gray-900 mb-3">Detailed Metrics</h3>
                    <div className="space-y-3 text-sm">
                      <div className="flex flex-col sm:flex-row sm:justify-between gap-1">
                        <span className="text-gray-600">Throughput (bytes/sec):</span>
                        <span className="font-medium font-mono">{calculations.bytesPerSecond.toLocaleString()}</span>
                      </div>
                      <div className="flex flex-col sm:flex-row sm:justify-between gap-1">
                        <span className="text-gray-600">Throttle Limit (bytes/sec):</span>
                        <span className="font-medium font-mono">{calculations.applicableLimit.toLocaleString()}</span>
                      </div>
                      <div className="flex flex-col sm:flex-row sm:justify-between gap-1">
                        <span className="text-gray-600">Remaining Capacity:</span>
                        <span className="font-medium font-mono">{calculations.remainingCapacity.toLocaleString()} bytes/sec</span>
                      </div>
                      <div className="flex flex-col sm:flex-row sm:justify-between gap-1">
                        <span className="text-gray-600">Remaining Capacity:</span>
                        <span className="font-medium font-mono">{calculations.remainingCapacityPercent.toFixed(2)}%</span>
                      </div>
                    </div>
                  </div>

{calculations.utilizationPercent >= 75 && (
                    <div className="flex items-start gap-3 p-4 bg-orange-50 border border-orange-200 rounded-lg">
                      <AlertCircle className="w-5 h-5 text-orange-600 mt-0.5 flex-shrink-0" />
                      <div className="text-sm text-orange-800">
                        <span className="font-medium block sm:inline">High utilization detected.</span>
                        <span className="block sm:inline"> Consider scaling or optimizing your requests.</span>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            )}

{calculations && calculations.error && (
              <div className="bg-red-50 border border-red-200 rounded-lg p-4">
                <div className="flex items-center gap-2">
                  <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0" />
                  <span className="text-red-800 font-medium">Error</span>
                </div>
                <p className="text-red-700 mt-2 text-sm">{calculations.error}</p>
              </div>
            )}

{Object.keys(regionConfigs).length === 0 && (
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 sm:p-6">
                <div className="flex items-start gap-3">
                  <Info className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                  <div className="text-sm text-blue-800">
                    <p className="font-medium mb-2">Getting Started:</p>
                    <div className="space-y-2 text-xs sm:text-sm">
                      <div className="flex items-start gap-2">
                        <span className="font-medium text-blue-900 min-w-[20px]">1.</span>
                        <span>Add one or more region configurations using the panel on the left</span>
                      </div>
                      <div className="flex items-start gap-2">
                        <span className="font-medium text-blue-900 min-w-[20px]">2.</span>
                        <span>Paste your region-specific limits JSON for each region</span>
                      </div>
                      <div className="flex items-start gap-2">
                        <span className="font-medium text-blue-900 min-w-[20px]">3.</span>
                        <span>Select a region and configure your throughput parameters</span>
                      </div>
                      <div className="flex items-start gap-2">
                        <span className="font-medium text-blue-900 min-w-[20px]">4.</span>
                        <span>View your utilization percentage and remaining capacity</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ComprehendThrottleCalculator;</article></body></html>

Comprehend Limit Utilization