a11oy / console /assets /CostAwareMonitoring-DMhewQ-K.js
betterwithage's picture
deploy(hf): sync szl-holdings/a11oy@main derived COPY set
da2854c verified
Raw
History Blame
10.3 kB
import{o as e}from"./chunk-CMxvf4Kt.js";import{t}from"./react-DrNXigiH.js";import{C as n}from"./index-Caa1r77e.js";var r=e(t(),1),i=n(),a=[{id:`cb-1`,category:`Metrics`,source:`Infrastructure (APM)`,ingestGBDay:42.5,costPerGB:.1,monthlySpend:127.5,budget:150,trend:`stable`,alerts:234,costPerAlert:.54},{id:`cb-2`,category:`Logs`,source:`Application Logs`,ingestGBDay:128.3,costPerGB:.05,monthlySpend:192.45,budget:200,trend:`rising`,alerts:89,costPerAlert:2.16},{id:`cb-3`,category:`Traces`,source:`Distributed Tracing`,ingestGBDay:67.8,costPerGB:.08,monthlySpend:162.72,budget:180,trend:`stable`,alerts:156,costPerAlert:1.04},{id:`cb-4`,category:`Synthetic`,source:`Synthetic Metrics`,ingestGBDay:0,costPerGB:0,monthlySpend:0,budget:50,trend:`stable`,alerts:312,costPerAlert:0},{id:`cb-5`,category:`Events`,source:`K8s Events / Audit`,ingestGBDay:15.2,costPerGB:.03,monthlySpend:13.68,budget:30,trend:`falling`,alerts:45,costPerAlert:.3},{id:`cb-6`,category:`Automation`,source:`Self-Healing Runs`,ingestGBDay:0,costPerGB:0,monthlySpend:85,budget:100,trend:`stable`,alerts:47,costPerAlert:1.81},{id:`cb-7`,category:`AI / ML`,source:`Toto Inference`,ingestGBDay:0,costPerGB:0,monthlySpend:320,budget:400,trend:`rising`,alerts:0,costPerAlert:0},{id:`cb-8`,category:`Storage`,source:`TSDB + Data Lake`,ingestGBDay:0,costPerGB:.02,monthlySpend:445.6,budget:500,trend:`rising`,alerts:0,costPerAlert:0}],o=[{name:`Basic`,included:`10 GB/day`,overage:`$0.10/GB`,features:[`Metrics`,`Dashboards`,`Basic Alerts`],current:!1},{name:`Pro`,included:`100 GB/day`,overage:`$0.07/GB`,features:[`+ Logs/Traces`,`+ Synthetic Metrics`,`+ ML Anomaly`,`+ SLOs`],current:!0},{name:`Enterprise`,included:`1 TB/day`,overage:`$0.04/GB`,features:[`+ Toto Forecaster`,`+ Causal RCA`,`+ Self-Healing`,`+ Custom Models`,`+ SSO/SAML`],current:!1}];function s(){return Array.from({length:30},(e,t)=>200+Math.sin(t/4)*40+(t===12||t===22?80:0)+(Math.random()-.5)*30)}function c({data:e}){let t=Math.max(...e);return(0,i.jsx)(`svg`,{viewBox:`0 0 500 80`,className:`w-full h-[80px]`,preserveAspectRatio:`none`,children:e.map((n,r)=>{let a=(500-e.length)/e.length,o=n/t*72;return(0,i.jsx)(`rect`,{x:r*(a+1),y:80-o-4,width:a,height:o,rx:`1`,fill:n>t*.85?`#fb923c`:`#06b6d4`,opacity:`0.6`},r)})})}function l(){let[e]=(0,r.useState)(s),t=a.reduce((e,t)=>e+t.monthlySpend,0),n=a.reduce((e,t)=>e+t.budget,0),l=t/n*100,u=a.reduce((e,t)=>e+t.ingestGBDay,0),d=a.find(e=>e.category===`Synthetic`)?.alerts||0;return(0,i.jsxs)(`div`,{className:`space-y-6 max-w-[1400px] mx-auto`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-xs font-mono uppercase tracking-[0.2em] text-[#f5f5f5]/40 mb-1`,children:`A11OY · PLATFORM · COST MONITORING`}),(0,i.jsx)(`h1`,{className:`text-2xl font-bold tracking-tight text-[#f5f5f5]`,children:`Cost-Aware Monitoring`}),(0,i.jsxs)(`p`,{className:`text-sm text-[#f5f5f5]/50 mt-1 max-w-3xl`,children:[`Full visibility into observability costs — ingestion, storage, compute, and AI inference. Budget tracking, cost-per-alert attribution, and optimization recommendations. Synthetic metrics deliver `,d,` alerts at zero ingestion cost.`]})]}),(0,i.jsx)(`div`,{className:`grid grid-cols-2 lg:grid-cols-5 gap-3`,children:[{label:`Monthly Spend`,value:`$${t.toFixed(0)}`,color:`#06b6d4`},{label:`Monthly Budget`,value:`$${n.toFixed(0)}`,color:`#c9b787`},{label:`Budget Used`,value:`${l.toFixed(1)}%`,color:l>85?`#fb923c`:`#4ade80`},{label:`Daily Ingest`,value:`${u.toFixed(0)} GB`,color:`#a78bfa`},{label:`Zero-Cost Alerts`,value:d,color:`#4ade80`}].map(e=>(0,i.jsxs)(`div`,{className:`bg-[#0a0a0f] border border-white/[0.06] rounded-lg p-3 space-y-1`,children:[(0,i.jsx)(`p`,{className:`text-[10px] font-mono uppercase tracking-widest text-white/30`,children:e.label}),(0,i.jsx)(`p`,{className:`text-xl font-mono font-bold`,style:{color:e.color},children:e.value})]},e.label))}),(0,i.jsxs)(`div`,{className:`bg-[#0a0a0f] border border-white/[0.06] rounded-lg p-5`,children:[(0,i.jsx)(`h2`,{className:`text-sm font-mono font-semibold uppercase tracking-wider text-white/70 mb-3`,children:`30-Day Spend Trend`}),(0,i.jsx)(c,{data:e}),(0,i.jsxs)(`div`,{className:`flex items-center justify-between mt-2 text-[10px] font-mono text-white/25`,children:[(0,i.jsx)(`span`,{children:`30 days ago`}),(0,i.jsx)(`span`,{children:`Today`})]})]}),(0,i.jsxs)(`div`,{className:`bg-[#0a0a0f] border border-white/[0.06] rounded-lg overflow-hidden`,children:[(0,i.jsx)(`div`,{className:`p-5 border-b border-white/[0.06]`,children:(0,i.jsx)(`h2`,{className:`text-sm font-mono font-semibold uppercase tracking-wider text-white/70`,children:`Cost Breakdown by Category`})}),(0,i.jsx)(`div`,{className:`overflow-x-auto`,children:(0,i.jsxs)(`table`,{className:`w-full text-xs font-mono`,children:[(0,i.jsx)(`thead`,{children:(0,i.jsxs)(`tr`,{className:`border-b border-white/[0.06] text-white/30`,children:[(0,i.jsx)(`th`,{className:`text-left px-5 py-2 font-medium uppercase tracking-wider`,children:`Category`}),(0,i.jsx)(`th`,{className:`text-left px-3 py-2 font-medium uppercase tracking-wider`,children:`Source`}),(0,i.jsx)(`th`,{className:`text-right px-3 py-2 font-medium uppercase tracking-wider`,children:`Ingest/day`}),(0,i.jsx)(`th`,{className:`text-right px-3 py-2 font-medium uppercase tracking-wider`,children:`$/GB`}),(0,i.jsx)(`th`,{className:`text-right px-3 py-2 font-medium uppercase tracking-wider`,children:`Monthly`}),(0,i.jsx)(`th`,{className:`text-right px-3 py-2 font-medium uppercase tracking-wider`,children:`Budget`}),(0,i.jsx)(`th`,{className:`text-right px-3 py-2 font-medium uppercase tracking-wider`,children:`$/Alert`}),(0,i.jsx)(`th`,{className:`text-right px-5 py-2 font-medium uppercase tracking-wider`,children:`Trend`})]})}),(0,i.jsx)(`tbody`,{className:`divide-y divide-white/[0.03]`,children:a.map(e=>{let t=e.budget>0?e.monthlySpend/e.budget*100:0;return(0,i.jsxs)(`tr`,{className:`hover:bg-white/[0.02] transition-colors`,children:[(0,i.jsx)(`td`,{className:`px-5 py-2 font-bold text-white/80`,children:e.category}),(0,i.jsx)(`td`,{className:`px-3 py-2 text-white/50`,children:e.source}),(0,i.jsx)(`td`,{className:`px-3 py-2 text-right text-white/50`,children:e.ingestGBDay>0?`${e.ingestGBDay} GB`:`—`}),(0,i.jsx)(`td`,{className:`px-3 py-2 text-right text-white/50`,children:e.costPerGB>0?`$${e.costPerGB.toFixed(2)}`:`—`}),(0,i.jsx)(`td`,{className:`px-3 py-2 text-right`,children:(0,i.jsxs)(`span`,{className:t>85?`text-orange-400`:`text-white/70`,children:[`$`,e.monthlySpend.toFixed(0)]})}),(0,i.jsxs)(`td`,{className:`px-3 py-2 text-right text-white/40`,children:[`$`,e.budget]}),(0,i.jsx)(`td`,{className:`px-3 py-2 text-right`,children:e.costPerAlert>0?(0,i.jsxs)(`span`,{className:e.costPerAlert>1.5?`text-orange-400`:`text-green-400`,children:[`$`,e.costPerAlert.toFixed(2)]}):(0,i.jsx)(`span`,{className:`text-green-400`,children:`$0`})}),(0,i.jsx)(`td`,{className:`px-5 py-2 text-right`,children:(0,i.jsxs)(`span`,{className:e.trend===`rising`?`text-orange-400`:e.trend===`falling`?`text-green-400`:`text-white/40`,children:[e.trend===`rising`?`↗`:e.trend===`falling`?`↘`:`→`,` `,e.trend]})})]},e.id)})}),(0,i.jsx)(`tfoot`,{children:(0,i.jsxs)(`tr`,{className:`border-t border-white/[0.06] font-bold`,children:[(0,i.jsx)(`td`,{className:`px-5 py-2 text-white/80`,colSpan:4,children:`Total`}),(0,i.jsxs)(`td`,{className:`px-3 py-2 text-right text-[#06b6d4]`,children:[`$`,t.toFixed(0)]}),(0,i.jsxs)(`td`,{className:`px-3 py-2 text-right text-white/40`,children:[`$`,n]}),(0,i.jsx)(`td`,{className:`px-3 py-2 text-right`,colSpan:2})]})})]})})]}),(0,i.jsx)(`div`,{className:`grid grid-cols-1 lg:grid-cols-3 gap-4`,children:o.map(e=>(0,i.jsxs)(`div`,{className:`bg-[#0a0a0f] border rounded-lg p-5 ${e.current?`border-[#c9b787]/30`:`border-white/[0.06]`}`,children:[(0,i.jsxs)(`div`,{className:`flex items-center justify-between mb-3`,children:[(0,i.jsx)(`h3`,{className:`text-sm font-mono font-bold text-white/80`,children:e.name}),e.current&&(0,i.jsx)(`span`,{className:`text-[9px] font-mono px-1.5 py-0.5 rounded bg-[#c9b787]/10 text-[#c9b787] border border-[#c9b787]/20`,children:`CURRENT`})]}),(0,i.jsxs)(`div`,{className:`space-y-2 mb-3`,children:[(0,i.jsxs)(`div`,{className:`flex justify-between text-[10px] font-mono`,children:[(0,i.jsx)(`span`,{className:`text-white/40`,children:`Included`}),(0,i.jsx)(`span`,{className:`text-white/70`,children:e.included})]}),(0,i.jsxs)(`div`,{className:`flex justify-between text-[10px] font-mono`,children:[(0,i.jsx)(`span`,{className:`text-white/40`,children:`Overage`}),(0,i.jsx)(`span`,{className:`text-white/70`,children:e.overage})]})]}),(0,i.jsx)(`div`,{className:`space-y-1`,children:e.features.map(e=>(0,i.jsx)(`p`,{className:`text-[10px] font-mono text-white/40`,children:e},e))})]},e.name))}),(0,i.jsxs)(`div`,{className:`bg-[#0a0a0f] border border-white/[0.06] rounded-lg p-5`,children:[(0,i.jsx)(`h2`,{className:`text-sm font-mono font-semibold uppercase tracking-wider text-white/70 mb-3`,children:`Optimization Recommendations`}),(0,i.jsx)(`div`,{className:`space-y-2`,children:[{action:`Convert 3 high-volume log alerts to synthetic metrics`,impact:`Save ~$45/month in log ingestion`,priority:`high`},{action:`Enable adaptive sampling on trace collection (keep 10% of healthy traces)`,impact:`Save ~$65/month in trace storage`,priority:`high`},{action:`Archive metrics older than 90 days to cold storage tier`,impact:`Save ~$120/month in TSDB costs`,priority:`medium`},{action:`Consolidate 12 overlapping alert rules into 4 composite monitors`,impact:`Reduce alert fatigue + $8/month compute savings`,priority:`low`}].map((e,t)=>(0,i.jsxs)(`div`,{className:`flex items-start gap-3 p-3 rounded bg-white/[0.02] border border-white/[0.04]`,children:[(0,i.jsx)(`span`,{className:`text-[9px] font-mono px-1.5 py-0.5 rounded border flex-shrink-0 mt-0.5 uppercase ${e.priority===`high`?`bg-green-500/10 text-green-400 border-green-500/20`:e.priority===`medium`?`bg-yellow-500/10 text-yellow-400 border-yellow-500/20`:`bg-white/5 text-white/40 border-white/10`}`,children:e.priority}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:`text-[11px] text-white/70`,children:e.action}),(0,i.jsx)(`p`,{className:`text-[10px] text-green-400/60 mt-0.5`,children:e.impact})]})]},t))})]})]})}export{l as CostAwareMonitoring};