Skip to content

Instantly share code, notes, and snippets.

@mohnishkodnani

mohnishkodnani/dsbe_onboarding.html

Last active June 10, 2026 19:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mohnishkodnani/40f35915a8bc14e2f1a92536ca7eadb0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mohnishkodnani/40f35915a8bc14e2f1a92536ca7eadb0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dsbe_onboarding.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eBay Evo | DSBE Paradise Onboarding</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Market Sans', 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
.tab-content { display: none; }
.tab-content.active { display: block; }
/* eBay Evo Interactive States & Layout Elements */
.evo-sidebar-item { border-left: 3px solid transparent; transition: all 0.15s ease-in-out; }
.evo-sidebar-item.active { border-left-color: #0053a0; background-color: #f7f7f7; color: #004b87; font-weight: 600; }
/* Official eBay Playbook Signal Component Rules: Outlined, 100% corner radius, uppercase */
.evo-signal { display: inline-flex; align-items: center; justify-content: center; border: 1px solid; border-radius: 100px; padding: 2px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; }
.evo-signal-blue { border-color: #0053a0; color: #0053a0; }
.evo-signal-green { border-color: #107a32; color: #107a32; }
.evo-signal-red { border-color: #a61c1c; color: #a61c1c; }
/* Spinner component matching shared repository states */
.evo-loader { border: 2px solid #e5e7eb; border-top: 2px solid #0053a0; border-radius: 50%; width: 14px; height: 14px; animation: evoSpin 0.7s linear infinite; display: inline-block; }
@keyframes evoSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
</style>
</head>
<body class="bg-[#ffffff] text-[#111111] h-screen flex overflow-hidden text-sm">
<aside class="w-64 bg-[#f7f7f7] border-r border-[#e5e5e5] flex flex-col justify-between">
<div>
<div class="p-6 border-b border-[#e5e5e5] bg-white">
<div class="flex items-center space-x-2">
<span class="text-lg font-bold tracking-tight text-[#111111]">eBay <span class="text-[#0053a0] font-medium">Evo</span></span>
</div>
<p class="text-[11px] text-[#767676] uppercase tracking-wider font-semibold mt-1">DSBE Paradise Onboarding</p>
</div>
<nav class="mt-4 flex flex-col text-[#333333]" id="sidebar-nav">
<div id="nav-intake" class="evo-sidebar-item active px-6 py-3.5 cursor-pointer text-sm">1. Specification Intake</div>
<div id="nav-validation" class="evo-sidebar-item px-6 py-3.5 text-sm text-[#767676]">2. Workspace Provisioning</div>
<div id="nav-staging" class="evo-sidebar-item px-6 py-3.5 text-sm text-[#767676]">3. Staging Evaluation</div>
<div id="nav-production" class="evo-sidebar-item px-6 py-3.5 text-sm text-[#767676]">4. Production Flight Control</div>
</nav>
</div>
<div class="p-4 border-t border-[#e5e5e5] bg-white text-xs text-[#767676] flex items-center justify-between">
<span>Playbook Sync v4.12</span>
<span class="evo-signal evo-signal-blue">Connected</span>
</div>
</aside>
<main class="flex-1 overflow-y-auto p-12 flex justify-center bg-white">
<div class="w-full max-w-2xl">
<div id="intake" class="tab-content active">
<div class="mb-6 pb-4 border-b border-[#e5e5e5]">
<h2 class="text-2xl font-bold tracking-tight text-[#111111]">Module Parameters Configuration</h2>
<p class="text-[#767676] mt-1 text-xs">All form items are wired directly into the Fireblade infrastructure layer and automated tracking systems.</p>
</div>
<form class="space-y-5" onsubmit="event.preventDefault(); startEvoPipeline();">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-xs font-bold text-[#111111] mb-2">Module Identifier (snake_case)</label>
<input type="text" id="modName" class="w-full border border-[#767676] rounded-[4px] p-2.5 text-sm outline-none focus:border-[#0053a0] focus:ring-1 focus:ring-[#0053a0]" value="catnip_module" required>
</div>
<div>
<label class="block text-xs font-bold text-[#111111] mb-2">Fireblade Functional Domain</label>
<select id="modDomain" class="w-full bg-white border border-[#767676] rounded-[4px] p-2.5 text-sm outline-none focus:border-[#0053a0]">
<option value="ads">Ad Tech / SRP Expansion</option>
<option value="search">Search Retrieval & Cassini Core</option>
<option value="merch">Merchandising & Merch Recs</option>
<option value="core">Core Shared SBE Architecture</option>
</select>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-xs font-bold text-[#111111] mb-2">Peak Data Volume Footprint (GB)</label>
<input type="number" step="0.01" id="modVol" class="w-full border border-[#767676] rounded-[4px] p-2.5 text-sm outline-none focus:border-[#0053a0]" value="4.86" required>
</div>
<div>
<label class="block text-xs font-bold text-[#111111] mb-2">Peak Read Throughput Bound (QPS)</label>
<input type="number" id="modQps" class="w-full border border-[#767676] rounded-[4px] p-2.5 text-sm outline-none focus:border-[#0053a0]" value="2000" required>
</div>
</div>
<div>
<label class="block text-xs font-bold text-[#111111] mb-2">Structural Payload Profile</label>
<select id="modType" class="w-full bg-white border border-[#767676] rounded-[4px] p-2.5 text-sm outline-none focus:border-[#0053a0]">
<option value="ml_zone">Contains Long Multivalued Arrays (Isolate to ML Target Zones)</option>
<option value="standard">Standard Compressed Primitive Key-Value Layouts</option>
</select>
</div>
<div>
<label class="block text-xs font-bold text-[#111111] mb-2">Target Storage Lifespan Allocation</label>
<select id="modLifecycle" class="w-full bg-white border border-[#767676] rounded-[4px] p-2.5 text-sm outline-none focus:border-[#0053a0]">
<option value="temp">Temporary Cache Cluster (Active NuKV Migration Path Planned)</option>
<option value="perm">Permanent Tier-1 Lookup Resource</option>
</select>
</div>
<div class="pt-4 border-t border-[#e5e5e5] flex justify-end">
<button type="submit" class="bg-[#0053a0] text-white px-6 py-2.5 font-bold rounded-full hover:bg-[#004280] transition text-xs">Verify Specs & Generate Infrastructure</button>
</div>
</form>
</div>
<div id="validation" class="tab-content">
<div class="mb-6 pb-4 border-b border-[#e5e5e5]">
<h2 class="text-2xl font-bold tracking-tight text-[#111111]">Workspace Provisioning Lifecycle</h2>
<p class="text-[#767676] mt-1 text-xs">Evo Orchestrator running validation maps against active Cassini and Fireblade cluster endpoints.</p>
</div>
<div class="border border-[#e5e5e5] rounded-[4px] divide-y divide-[#e5e5e5]">
<div class="p-4 flex items-center justify-between bg-[#f7f7f7]">
<div class="flex items-center space-x-3">
<div id="step1-loader" class="evo-loader"></div>
<div>
<span class="font-bold text-[#111111] text-xs uppercase tracking-wide block">Jira Action Hooks Deployment</span>
<p id="step1-sub" class="text-xs text-[#767676] mt-0.5">Contacting Jira API to provision tracking epics...</p>
</div>
</div>
<span id="step1-signal" class="evo-signal evo-signal-blue">Processing</span>
</div>
<div id="row-val1" class="p-4 flex items-center justify-between opacity-40 transition-opacity">
<div class="flex items-center space-x-3">
<div id="step2-loader" class="text-[#767676] text-xs font-mono">—</div>
<div>
<span class="font-bold text-[#111111] text-xs uppercase tracking-wide block">Schema Dependency Structural Check</span>
<p class="text-xs text-[#767676] mt-0.5">Parsing configuration manifests for recursive structure limits.</p>
</div>
</div>
<span id="step2-signal" class="evo-signal" style="border-color:#767676; color:#767676;">Queued</span>
</div>
<div id="row-val2" class="p-4 flex items-center justify-between opacity-40 transition-opacity">
<div class="flex items-center space-x-3">
<div id="step3-loader" class="text-[#767676] text-xs font-mono">—</div>
<div>
<span class="font-bold text-[#111111] text-xs uppercase tracking-wide block">Volumetric Resource Allocation Audit</span>
<p id="step3-sub" class="text-xs text-[#767676] mt-0.5">Confirming available slots in memory tier configurations.</p>
</div>
</div>
<span id="step3-signal" class="evo-signal" style="border-color:#767676; color:#767676;">Queued</span>
</div>
</div>
<div id="validation-next-cta" class="pt-6 hidden flex justify-end">
<button onclick="goToStaging()" class="border-2 border-[#0053a0] text-[#0053a0] px-6 py-2 rounded-full font-bold hover:bg-[#f0f5fa] transition text-xs">Advance to Staging Sandbox</button>
</div>
</div>
<div id="staging" class="tab-content">
<div class="mb-6 pb-4 border-b border-[#e5e5e5]">
<h2 class="text-2xl font-bold tracking-tight text-[#111111]">Staging Environment Sandboxing</h2>
<p class="text-[#767676] mt-1 text-xs">Executing template container manifests inside staging target endpoints.</p>
</div>
<div class="bg-[#111111] text-[#f7f7f7] rounded-[4px] p-5 font-mono text-xs space-y-1.5 h-44 overflow-y-auto mb-6 shadow-inner" id="terminal-pane">
</div>
<div class="border border-[#e5e5e5] p-5 rounded-[4px] flex justify-between items-center bg-[#f7f7f7]">
<div>
<span class="font-bold text-xs uppercase tracking-wide block text-[#111111]">Data Integrity Assertion Passing</span>
<p class="text-xs text-[#767676] mt-0.5">Zone optimization configurations matched the platform SLA requirements.</p>
</div>
<button onclick="goToProduction()" class="bg-[#107a32] text-white px-6 py-2.5 font-bold rounded-full hover:bg-[#0e6629] transition text-xs">Execute Production Deployment</button>
</div>
</div>
<div id="production" class="tab-content">
<div class="flex justify-between items-start mb-6 pb-4 border-b border-[#e5e5e5]">
<div>
<h2 class="text-2xl font-bold tracking-tight text-[#111111]" id="dashTitle">catnip_module</h2>
<p class="text-xs text-[#767676] mt-0.5">Active Live Target Cluster Configurations</p>
</div>
<span class="evo-signal evo-signal-green">Live Status</span>
</div>
<div class="grid grid-cols-3 gap-4 mb-6">
<div class="border border-[#e5e5e5] p-4 rounded-[4px]">
<span class="text-[11px] font-bold text-[#767676] uppercase tracking-wider block">Assigned Bandwidth</span>
<span class="text-lg font-bold block text-[#111111] mt-1" id="dashQps">2,000 QPS Bound</span>
</div>
<div class="border border-[#e5e5e5] p-4 rounded-[4px]">
<span class="text-[11px] font-bold text-[#767676] uppercase tracking-wider block">P99 Read Latency</span>
<span class="text-lg font-bold block text-[#111111] mt-1">4.21 ms</span>
</div>
<div class="border border-[#e5e5e5] p-4 rounded-[4px]">
<span class="text-[11px] font-bold text-[#767676] uppercase tracking-wider block">Auto-Generated Tracker</span>
<span class="text-lg font-bold block text-[#0053a0] underline cursor-pointer mt-1 font-mono" id="dashJira">SBE-AUTO</span>
</div>
</div>
<div class="border border-[#e5e5e5] rounded-[4px] p-5 mb-6 bg-[#f7f7f7]">
<div class="flex justify-between items-center mb-4 pb-2 border-b border-[#e5e5e5]">
<h4 class="text-xs font-bold text-[#111111] uppercase tracking-wide">Fireblade Directory Assignment</h4>
<span class="evo-signal evo-signal-blue" id="dashDomainLabel">DOMAIN</span>
</div>
<div class="grid grid-cols-2 gap-y-4 gap-x-2 text-xs">
<div>
<span class="text-[#767676] block">Component Lead Group</span>
<span class="font-semibold text-[#111111] mt-0.5 block" id="dashOwner">Group Owner</span>
</div>
<div>
<span class="text-[#767676] block">Slack Escalation Target</span>
<span class="font-semibold text-[#0053a0] cursor-pointer hover:underline mt-0.5 block" id="dashSlack">#channel</span>
</div>
<div>
<span class="text-[#767676] block">On-Call Context Link</span>
<a href="https://wiki.corp.ebay.com/spaces/CASSINI/pages/1242334117/Fireblade+DSBE+List+and+Contacts" target="_blank" class="text-[#767676] underline hover:text-black mt-0.5 block">Fireblade Wiki Registry</a>
</div>
</div>
</div>
<div class="border border-[#e5e5e5] border-l-4 border-l-[#a61c1c] p-4 bg-[#fffafa]">
<div class="flex items-center space-x-2 mb-1">
<span class="evo-signal evo-signal-red">Attention</span>
<h4 class="text-xs font-bold text-[#a61c1c] uppercase tracking-wide">Auto-Decommissioning Pipeline Scheduled</h4>
</div>
<p class="text-xs text-[#555555] leading-relaxed">This memory block has been registered under a temporary context flag. Deconstruction procedures execute automatically upon detection of complete native NuKV target configurations. No engineer cleanup ticket required.</p>
</div>
</div>
</div>
</main>
<script>
let moduleConfig = {};
const checkIcon = `<span class="evo-signal evo-signal-green">Passed</span>`;
const firebladeRegistry = {
ads: { label: "ADS_TECH", owner: "Ads SBE Enablement Leads", slack: "#fireblade-dsbe-ads", reviewers: "ads-sbe-leads" },
search: { label: "CASSINI_SEARCH", owner: "Cassini Structural Core Team", slack: "#fireblade-dsbe-search", reviewers: "cassini-search-maintainers" },
merch: { label: "MERCH_RECS", owner: "Personalization Platform Team", slack: "#fireblade-dsbe-merch", reviewers: "merch-infra-watchers" },
core: { label: "CORE_SBE_PLAT", owner: "Core Storage Platform Architects", slack: "#fireblade-dsbe-core", reviewers: "core-sbe-approvers" }
};
function switchEvoTab(stepId) {
document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
document.getElementById(stepId).classList.add('active');
document.querySelectorAll('#sidebar-nav div').forEach(el => {
el.className = "evo-sidebar-item px-6 py-3.5 cursor-pointer text-sm text-[#767676]";
});
document.getElementById('nav-' + stepId).className = "evo-sidebar-item active px-6 py-3.5 text-sm";
}
function startEvoPipeline() {
const domainKey = document.getElementById('modDomain').value;
const domainData = firebladeRegistry[domainKey];
moduleConfig = {
name: document.getElementById('modName').value,
vol: document.getElementById('modVol').value,
qps: document.getElementById('modQps').value,
type: document.getElementById('modType').value,
lifecycle: document.getElementById('modLifecycle').value,
domain: domainData.label,
owner: domainData.owner,
slack: domainData.slack,
reviewers: domainData.reviewers,
jira: `SBE-${Math.floor(20000 + Math.random() * 70000)}`
};
switchEvoTab('validation');
// State Machine Timing
setTimeout(() => {
document.getElementById('step1-loader').outerHTML = checkIcon;
document.getElementById('step1-sub').innerHTML = `Linked tracking context established: <span class="font-mono text-[#0053a0] underline font-semibold">${moduleConfig.jira}</span>. Watchers mapped: <code class="bg-[#e5e5e5] px-1 py-0.5 rounded text-[11px]">@${moduleConfig.reviewers}</code>`;
document.getElementById('step1-signal').outerHTML = `<span class="evo-signal evo-signal-green font-mono">Synced</span>`;
document.getElementById('row-val1').classList.remove('opacity-40');
document.getElementById('step2-loader').className = 'evo-loader';
document.getElementById('step2-loader').innerText = '';
document.getElementById('step2-signal').className = 'evo-signal evo-signal-blue';
document.getElementById('step2-signal').innerText = 'Running';
setTimeout(() => {
document.getElementById('step2-loader').outerHTML = checkIcon;
document.getElementById('step2-signal').className = 'evo-signal evo-signal-green';
document.getElementById('step2-signal').innerText = 'Valid';
document.getElementById('row-val2').classList.remove('opacity-40');
document.getElementById('step3-loader').className = 'evo-loader';
document.getElementById('step3-loader').innerText = '';
document.getElementById('step3-sub').innerText = `Requesting allocation blocks matching ${moduleConfig.vol} GB payload size requirements...`;
document.getElementById('step3-signal').className = 'evo-signal evo-signal-blue';
document.getElementById('step3-signal').innerText = 'Running';
setTimeout(() => {
document.getElementById('step3-loader').outerHTML = checkIcon;
document.getElementById('step3-signal').className = 'evo-signal evo-signal-green';
document.getElementById('step3-signal').innerText = 'Allocated';
document.getElementById('validation-next-cta').classList.remove('hidden');
}, 1000);
}, 1000);
}, 1400);
}
function goToStaging() {
switchEvoTab('staging');
const term = document.getElementById('terminal-pane');
term.innerHTML = '';
const lines = [
`> [EVO_INIT] Reading workspace definitions for tracking asset reference: ${moduleConfig.jira}`,
`> [FIREBLADE_SYNC] Querying wiki source mappings for group node: ${moduleConfig.domain}`,
`> [DAG_DEPLOY] Running template transformation rules on 'dsbe_sdf_converter_multiple_staging_template'`,
`> [ZONE_ROUTING] Executing layout mapping instructions against staging container endpoints...`,
moduleConfig.type === 'ml_zone' ? `> [ROUTING_ALERT] Large nested collection footprint localized. Target isolates set to ML Storage Zones.` : `> [ROUTING_INFO] Sequential primitive structure array confirmed.`,
`> [SUCCESS] Target staging components online. Structural assertions passed.`
];
lines.forEach((txt, idx) => {
setTimeout(() => {
const p = document.createElement('p');
p.innerText = txt;
term.appendChild(p);
term.scrollTop = term.scrollHeight;
}, idx * 450);
});
}
function goToProduction() {
document.getElementById('dashTitle').innerText = moduleConfig.name;
document.getElementById('dashQps').innerText = `${parseInt(moduleConfig.qps).toLocaleString()} QPS Bound`;
document.getElementById('dashJira').innerText = moduleConfig.jira;
document.getElementById('dashDomainLabel').innerText = moduleConfig.domain;
document.getElementById('dashOwner').innerText = moduleConfig.owner;
document.getElementById('dashSlack').innerText = moduleConfig.slack;
switchEvoTab('production');
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment