Wireshart

WireshartViz.jsx

/**
 * WireshartViz.jsx
 * 
 * Dependencies:
 * - react
 * - recharts
 * - tailwindcss
 * 
 * Required imports:
 * import React, { useState, useEffect } from 'react';
 * import { AreaChart, Area, YAxis, Tooltip } from 'recharts';
 * 
 * Usage:
 * <WireshartViz />
 * 
 * Note: Requires Tailwind CSS for styling
 */

import React, { useState, useEffect } from 'react';
import { AreaChart, Area, YAxis, Tooltip } from 'recharts';

const CenteredWiresharkWindow = () => {
  const initialPacketData = [
    {seq: 228133, offset: 142, len: -84}, {seq: 228134, offset: 142, len: -84},
    {seq: 228135, offset: 118, len: -60}, {seq: 228136, offset: 142, len: -84},
    {seq: 228137, offset: 142, len: -84}, {seq: 228138, offset: 142, len: -84},
    {seq: 228139, offset: 142, len: -84}, {seq: 228140, offset: 142, len: -84},
    {seq: 228141, offset: 142, len: -84}, {seq: 228142, offset: 118, len: -60},
    {seq: 228143, offset: 142, len: -84}, {seq: 228144, offset: 142, len: -84},
    {seq: 228145, offset: 142, len: -84}, {seq: 228146, offset: 142, len: -84},
    {seq: 228147, offset: 142, len: -84}, {seq: 228148, offset: 118, len: -60},
    {seq: 228149, offset: 142, len: -84}, {seq: 228150, offset: 142, len: -84},
    {seq: 228151, offset: 142, len: -84}, {seq: 228152, offset: 142, len: -84},
    {seq: 228153, offset: 142, len: -84}, {seq: 228154, offset: 142, len: -84},
    {seq: 228155, offset: 142, len: -84}, {seq: 228156, offset: 142, len: -84},
    {seq: 228157, offset: 142, len: -84}, {seq: 228158, offset: 142, len: -84},
    {seq: 228159, offset: 142, len: -84}, {seq: 228160, offset: 142, len: -84},
    {seq: 228161, offset: 142, len: -84}, {seq: 228162, offset: 142, len: -84},
    {seq: 228163, offset: 142, len: -84}, {seq: 228164, offset: 142, len: -84},
    {seq: 228165, offset: 142, len: -84}
  ];

  const [packetData, setPacketData] = useState(initialPacketData);
  const [lastSeq, setLastSeq] = useState(228165);

  useEffect(() => {
    const interval = setInterval(() => {
      const newSeq = lastSeq + 1;
      // 20% chance of offset:118/len:60, 80% chance of offset:142/len:84
      const newPacket = Math.random() < 0.2 
        ? {seq: newSeq, offset: 118, len: -60}
        : {seq: newSeq, offset: 142, len: -84};
      
      setPacketData(prev => [...prev.slice(1), newPacket]);
      setLastSeq(newSeq);
    }, 1000);

    return () => clearInterval(interval);
  }, [lastSeq]);

  const CustomTooltip = ({ active, payload }) => {
    if (active && payload && payload.length > 0) {
      const data = payload[0].payload;
      return (
        <div className="bg-white p-2 border border-gray-200 rounded shadow text-xs">
          <p className="font-mono mb-1">#{data.seq}</p>
          <p className="font-mono" style={{color: '#8884d8'}}>offset: {data.offset}</p>
          <p className="font-mono" style={{color: '#82ca9d'}}>len: {Math.abs(data.len)}</p>
        </div>
      );
    }
    return null;
  };

  return (
    <div className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-purple-700 via-blue-600 to-cyan-500">
      <div className="w-full max-w-4xl m-8 bg-gray-100 rounded-lg shadow-xl overflow-hidden border border-gray-200">
        {/* Window title bar */}
        <div className="bg-gray-200 px-4 py-2 flex items-center justify-between border-b border-gray-300">
          <span className="font-mono font-semibold">Wireshart 💩</span>
          <div className="flex gap-2">
            <button className="w-3 h-3 rounded-full bg-yellow-400"></button>
            <button className="w-3 h-3 rounded-full bg-green-400"></button>
            <button className="w-3 h-3 rounded-full bg-red-400"></button>
          </div>
        </div>

        {/* Table header */}
        <div className="bg-gray-50 text-xs font-mono border-b border-gray-200">
          <div className="grid grid-cols-12 gap-2 px-4 py-2">
            <div className="col-span-3">Source</div>
            <div className="col-span-1">Port</div>
            <div className="col-span-3">Destination</div>
            <div className="col-span-1">Port</div>
            <div className="col-span-4">Visualization</div>
          </div>
        </div>

        {/* Table content */}
        <div className="bg-white">
          <div className="grid grid-cols-12 gap-2 px-4 py-2 items-center hover:bg-blue-50 border-b border-gray-100">
            <div className="col-span-3 text-xs font-mono">23.226.155.131</div>
            <div className="col-span-1 text-xs font-mono">10377</div>
            <div className="col-span-3 text-xs font-mono">233.215.21.3</div>
            <div className="col-span-1 text-xs font-mono">10377</div>
            <div className="col-span-4">
              <AreaChart
                width={300}
                height={40}
                data={packetData}
                margin={{ top: 5, right: 5, left: 5, bottom: 5 }}
              >
                <YAxis domain={[-150, 150]} hide={true} />
                <Tooltip 
                  content={<CustomTooltip />}
                  offset={10}
                  position={{ y: 60 }}
                />
                <Area
                  type="stepAfter"
                  dataKey="offset"
                  stroke="#8884d8"
                  fill="#8884d8"
                  fillOpacity={0.5}
                  isAnimationActive={false}
                />
                <Area
                  type="stepAfter"
                  dataKey="len"
                  stroke="#82ca9d"
                  fill="#82ca9d"
                  fillOpacity={0.5}
                  isAnimationActive={false}
                />
              </AreaChart>
            </div>
          </div>

          {/* Additional rows would go here - example of empty row */}
          <div className="grid grid-cols-12 gap-2 px-4 py-2 items-center text-gray-400 hover:bg-blue-50 border-b border-gray-100">
            <div className="col-span-3 text-xs font-mono">...</div>
            <div className="col-span-1 text-xs font-mono">...</div>
            <div className="col-span-3 text-xs font-mono">...</div>
            <div className="col-span-1 text-xs font-mono">...</div>
            <div className="col-span-4 h-[40px]"></div>
          </div>

          {/* Footer spacer */}
          <div className="h-24 bg-gray-50 border-t border-gray-200"></div>
        </div>
      </div>
    </div>
  );
};

export default CenteredWiresharkWindow;