communitas 0.2.6

A diagnostic chat application for the P2P Foundation network
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

import React, { useState } from 'react'
import {
  Box,
  Typography,
  Card,
  CardContent,
  Button,
  TextField,
  FormControlLabel,
  Switch,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Chip,
} from '@mui/material'
import { PlayArrow, Stop, Clear } from '@mui/icons-material'

const DiagnosticsTab: React.FC = () => {
  const [packetCapture, setPacketCapture] = useState(false)
  const [filter, setFilter] = useState('')
  
  const packets = [
    {
      id: '1',
      timestamp: '16:45:23.123',
      protocol: 'QUIC',
      source: '192.168.1.100:9001',
      destination: '203.0.113.5:8888',
      size: 1200,
      info: 'Initial packet',
    },
    {
      id: '2',
      timestamp: '16:45:23.156',
      protocol: 'QUIC',
      source: '203.0.113.5:8888',
      destination: '192.168.1.100:9001',
      size: 800,
      info: 'Version negotiation',
    },
    {
      id: '3',
      timestamp: '16:45:23.189',
      protocol: 'DHT',
      source: '192.168.1.100:9001',
      destination: '198.51.100.42:9002',
      size: 456,
      info: 'FIND_NODE query',
    },
  ]

  const filteredPackets = packets.filter(packet =>
    !filter || packet.protocol.toLowerCase().includes(filter.toLowerCase()) ||
    packet.info.toLowerCase().includes(filter.toLowerCase())
  )

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        Advanced Diagnostics
      </Typography>
      
      <Card sx={{ mb: 3 }}>
        <CardContent>
          <Typography variant="h6" gutterBottom>
            Packet Capture
          </Typography>
          
          <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', mb: 2 }}>
            <FormControlLabel
              control={
                <Switch
                  checked={packetCapture}
                  onChange={(e) => setPacketCapture(e.target.checked)}
                />
              }
              label="Enable Packet Capture"
            />
            
            <Button
              variant="contained"
              startIcon={packetCapture ? <Stop /> : <PlayArrow />}
              onClick={() => setPacketCapture(!packetCapture)}
              color={packetCapture ? 'error' : 'primary'}
            >
              {packetCapture ? 'Stop' : 'Start'} Capture
            </Button>
            
            <Button
              variant="outlined"
              startIcon={<Clear />}
              disabled={packetCapture}
            >
              Clear
            </Button>
          </Box>
          
          <TextField
            fullWidth
            label="Filter packets"
            value={filter}
            onChange={(e) => setFilter(e.target.value)}
            placeholder="Filter by protocol or info..."
            sx={{ mb: 2 }}
          />
          
          <Typography variant="body2" color="textSecondary">
            Status: {packetCapture ? 
              <Chip label="Capturing" color="success" size="small" /> : 
              <Chip label="Stopped" color="default" size="small" />
            }
          </Typography>
        </CardContent>
      </Card>
      
      <Card>
        <CardContent>
          <Typography variant="h6" gutterBottom>
            Captured Packets ({filteredPackets.length})
          </Typography>
          
          <TableContainer component={Paper} sx={{ maxHeight: 400 }}>
            <Table stickyHeader size="small">
              <TableHead>
                <TableRow>
                  <TableCell>Time</TableCell>
                  <TableCell>Protocol</TableCell>
                  <TableCell>Source</TableCell>
                  <TableCell>Destination</TableCell>
                  <TableCell>Size</TableCell>
                  <TableCell>Info</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {filteredPackets.map((packet) => (
                  <TableRow key={packet.id} hover>
                    <TableCell>{packet.timestamp}</TableCell>
                    <TableCell>
                      <Chip label={packet.protocol} size="small" />
                    </TableCell>
                    <TableCell>{packet.source}</TableCell>
                    <TableCell>{packet.destination}</TableCell>
                    <TableCell>{packet.size}B</TableCell>
                    <TableCell>{packet.info}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        </CardContent>
      </Card>
    </Box>
  )
}

export default DiagnosticsTab