.. عنوان: لینکس نیٹ ورک نیم اسپیس اور ویتھ ویژولائزر
.. slug: linux-namespace-visualizer
.. تاریخ: 2026-03-27 12:00:00 UTC
.. ٹیگز: لینکس، نیٹ ورک نام کی جگہ، ویتھ، کنٹینر، سیسڈمین، کیلکولیٹر، ٹول
.. زمرہ: کیلکولیٹر
.. لنک:
.. تفصیل: ip netns کی فہرست، ip لنک شو، اور ip addr شو آؤٹ پٹ کو لینکس نیٹ ورک کے نام کی جگہوں، ویتھ جوڑوں، پلوں، اور آئی پی اسائنمنٹس کا ٹوپولوجی خاکہ پیش کرنے کے لیے چسپاں کریں۔
.. قسم: متن
<style>
/* ── CANONICAL DESIGN SYSTEM ──────────────────────────────────────────────── */
.calc-container { max-width: 900px; margin: 20px auto; padding: 20px; }
.calc-header { margin-bottom: 30px; padding: 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); color: white; }
.calc-header h2 { margin-top: 0; color: white; font-size: 28px; margin-bottom: 10px; }
.calc-header p  { margin: 10px 0; opacity: 0.95; font-size: 15px; }
.input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-top: 20px; }
.input-group { display: flex; flex-direction: column; }
.input-group label { margin-bottom: 8px; font-weight: 600; color: rgba(255,255,255,0.95); font-size: 14px; }
.input-group input, .input-group select, .input-group textarea { padding: 14px; font-size: 14px; border: 2px solid rgba(255,255,255,0.3); border-radius: 6px; background: rgba(255,255,255,0.95); transition: all 0.3s ease; box-sizing: border-box; font-family: inherit; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { outline: none; border-color: #4CAF50; background: white; box-shadow: 0 0 0 3px rgba(76,175,80,0.1); }
.input-group textarea { resize: vertical; min-height: 80px; font-family: 'Courier New', monospace; font-size: 13px; }
.button-container { margin-top: 20px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.calc-button { padding: 14px 35px; font-size: 16px; background: #4CAF50; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.calc-button:hover  { background: #45a049; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.calc-button:active { background: #3d8b40; transform: translateY(0); }
.calc-button.secondary { background: rgba(255,255,255,0.2); }
.calc-button.secondary:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }
.result-section { background: white; border: 1px solid #e0e0e0; border-radius: 8px; margin-top: 20px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.result-section:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.section-header { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: white; padding: 15px 20px; font-size: 18px; font-weight: bold; }
.section-content { padding: 20px; background: #fafafa; }
@media (max-width: 768px) { .input-grid { grid-template-columns: 1fr; } .calc-header h2 { font-size: 22px; } .calc-container { padding: 10px; } }
/* Page-specific */
#cy { width: 100%; height: 500px; background: #f8faff; border-radius: 4px; }
.textarea-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.detail-panel { background: #f0f8ff; border-left: 4px solid #4CAF50; padding: 14px; border-radius: 6px; font-size: 13px; min-height: 60px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; font-size: 12px; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.legend-line { width: 24px; height: 3px; flex-shrink: 0; }
code { background: #f0f0f0; padding: 1px 4px; border-radius: 3px; font-size: 12px; }
@media (max-width: 600px) { #cy { height: 360px; } }
</style>
<div class="calc-container">
<div class="calc-header">
<h2>لینکس نیٹ ورک نیم اسپیس اور ویتھ ویژولائزر</h2>
<p>کمانڈ آؤٹ پٹ کا کوئی بھی مجموعہ چسپاں کریں - تمام فیلڈز اختیاری ہیں۔</p>
<div class="textarea-grid">
<div class="input-group">
<label>ip netns فہرست (اختیاری)</label>
<textarea id="nsInput" placeholder="default
ns1
ns2" rows="4"></textarea>
</div>
<div class="input-group">
<label>آئی پی لنک شو</label>
<textarea id="linkInput" placeholder="1: lo: …
2: eth0: …" rows="4"></textarea>
</div>
<div class="input-group">
<label>آئی پی ایڈر شو (اختیاری)</label>
<textarea id="addrInput" placeholder="2: eth0: …
    inet 192.168.1.1/24 …" rows="4"></textarea>
</div>
</div>
<div class="button-container">
<button class="calc-button" onclick="render()">رینڈر ٹوپولوجی</button>
<button class="calc-button secondary" onclick="loadSample()">نمونہ لوڈ کریں۔</button>
<button class="calc-button secondary" onclick="clearAll()">صاف</button>
</div>
</div>
<div class="result-section" id="cySection" style="display:none">
<div class="section-header">نام کی جگہ ٹوپولاجی۔</div>
<div class="section-content" style="padding:12px">
<div class="legend">
<div class="legend-item"><div class="legend-dot" style="background:#0a3d62"></div>نام کی جگہ</div>
<div class="legend-item"><div class="legend-dot" style="background:#4facfe"></div>ویتھ انٹرفیس</div>
<div class="legend-item"><div class="legend-dot" style="background:#f7971e"></div>پل</div>
<div class="legend-item"><div class="legend-dot" style="background:#28a745"></div>پہلے سے طے شدہ نام کی جگہ</div>
<div class="legend-item"><div class="legend-line" style="background:#555"></div>ویتھ جوڑی کا لنک</div>
</div>
<div id="cy"></div>
<div class="detail-panel" id="detailPanel">تفصیلات دیکھنے کے لیے نوڈ پر کلک کریں۔</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
<script>
let cyInst = null;

function parseNetns(text) {
    const ns = ['root'];
    text.split('\n').forEach(line => {
        const m = line.match(/^(\S+)/);
        if (m && m[1]) ns.push(m[1]);
    });
    return [...new Set(ns)];
}

function parseLinks(text) {
    const links = [];
    text.split('\n').forEach(line => {
        // Match: N: name@peer: or N: name:
        const m = line.match(/^\d+:\s+([a-zA-Z0-9_.-]+)(?:@([a-zA-Z0-9_.-]+))?:/);
        if (m) {
            const [, name, peer] = m;
            const type = name.startsWith('br') ? 'bridge'
                : peer ? 'veth'
                : name === 'lo' ? 'lo'
                : 'eth';
            links.push({ name, peer: peer || null, type });
        }
    });
    return links;
}

function parseAddrs(text) {
    const addrs = {};
    let current = null;
    text.split('\n').forEach(line => {
        const ifMatch = line.match(/^\d+:\s+([a-zA-Z0-9_.-]+)(?:@\S+)?:/);
        if (ifMatch) { current = ifMatch[1]; addrs[current] = addrs[current] || []; }
        const ipMatch = line.match(/inet\s+(\d+\.\d+\.\d+\.\d+\/\d+)/);
        if (ipMatch && current) addrs[current].push(ipMatch[1]);
    });
    return addrs;
}

function render() {
    const nsText = document.getElementById('nsInput').value;
    const linkText = document.getElementById('linkInput').value;
    const addrText = document.getElementById('addrInput').value;

    const namespaces = parseNetns(nsText);
    const links = parseLinks(linkText);
    const addrs = parseAddrs(addrText);

    const elements = [];

    // Namespace nodes
    namespaces.forEach(ns => {
        elements.push({ data: { id: `ns_${ns}`, label: ns === 'root' ? 'root\nnamespace' : ns, type: 'ns', ns } });
    });

    // Interface nodes and veth pair edges
    const seenPairs = new Set();
    links.filter(l => l.type !== 'lo').forEach(l => {
        const iface = l.name;
        const ip = (addrs[iface] || []).join('\n') || '';
        const type = l.type;
        elements.push({ data: { id: `if_${iface}`, label: iface + (ip ? '\n' + ip : ''), type, ip } });

        // Connect interface to root namespace
        elements.push({ data: { id: `ns_root-${iface}`, source: 'ns_root', target: `if_${iface}` } });

        // veth pair edge
        if (l.peer && !seenPairs.has(`${l.peer}-${iface}`)) {
            seenPairs.add(`${iface}-${l.peer}`);
            elements.push({ data: { id: `veth_${iface}_${l.peer}`, source: `if_${iface}`, target: `if_${l.peer}`, type: 'veth-pair' } });
        }
    });

    document.getElementById('cySection').style.display = 'block';
    if (cyInst) { cyInst.destroy(); cyInst = null; }

    cyInst = cytoscape({
        container: document.getElementById('cy'),
        elements,
        style: [
            { selector: 'node[type="ns"]', style: {
                'label': 'data(label)', 'text-wrap': 'wrap',
                'shape': 'roundrectangle', 'width': 120, 'height': 50,
                'background-color': ele => ele.data('ns') === 'root' ? '#28a745' : '#0a3d62',
                'color': '#fff', 'font-size': 12, 'font-weight': 'bold',
                'text-valign': 'center', 'text-halign': 'center',
            }},
            { selector: 'node[type="veth"]', style: {
                'label': 'data(label)', 'text-wrap': 'wrap',
                'shape': 'ellipse', 'width': 100, 'height': 50,
                'background-color': '#4facfe', 'color': '#fff',
                'font-size': 10, 'text-valign': 'center', 'text-halign': 'center',
            }},
            { selector: 'node[type="bridge"]', style: {
                'label': 'data(label)', 'shape': 'diamond',
                'width': 90, 'height': 50,
                'background-color': '#f7971e', 'color': '#fff',
                'font-size': 11, 'text-valign': 'center', 'text-halign': 'center',
            }},
            { selector: 'node[type="eth"]', style: {
                'label': 'data(label)', 'text-wrap': 'wrap',
                'shape': 'roundrectangle', 'width': 100, 'height': 40,
                'background-color': '#6c757d', 'color': '#fff',
                'font-size': 10, 'text-valign': 'center', 'text-halign': 'center',
            }},
            { selector: 'edge', style: {
                'curve-style': 'bezier', 'line-color': '#555', 'width': 2,
                'target-arrow-shape': 'none',
            }},
            { selector: 'edge[type="veth-pair"]', style: {
                'line-color': '#4facfe', 'width': 3, 'line-style': 'dashed',
            }},
            { selector: 'node:selected', style: { 'border-width': 3, 'border-color': '#ffd200' }},
        ],
        layout: { name: 'cose', padding: 30 },
        userZoomingEnabled: true,
    });

    cyInst.on('tap', 'node', evt => {
        const d = evt.target.data();
        let html = `<strong>${d.label.replace(/\n/g, ' / ')}</strong><br>Type: ${d.type}`;
        if (d.ip) html += `<br>IPs: ${d.ip}`;
        document.getElementById('detailPanel').innerHTML = html;
    });
}

function loadSample() {
    document.getElementById('nsInput').value = 'red (id: 0)\nblue (id: 1)';
    document.getElementById('linkInput').value =
`1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536
2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500
3: veth-red@veth-red-peer: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500
4: veth-red-peer@veth-red: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500
5: veth-blue@veth-blue-peer: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500
6: veth-blue-peer@veth-blue: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500
7: br0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500`;
    document.getElementById('addrInput').value =
`3: veth-red@veth-red-peer: <BROADCAST>
    inet 10.0.1.1/24 scope global veth-red
4: veth-red-peer@veth-red: <BROADCAST>
    inet 10.0.1.2/24 scope global veth-red-peer
5: veth-blue@veth-blue-peer: <BROADCAST>
    inet 10.0.2.1/24 scope global veth-blue
6: veth-blue-peer@veth-blue: <BROADCAST>
    inet 10.0.2.2/24 scope global veth-blue-peer`;
    render();
}

function clearAll() {
    document.getElementById('nsInput').value = '';
    document.getElementById('linkInput').value = '';
    document.getElementById('addrInput').value = '';
    document.getElementById('cySection').style.display = 'none';
    if (cyInst) { cyInst.destroy(); cyInst = null; }
}
</script>