Skip to content

Commit

Permalink
simplified connection page
Browse files Browse the repository at this point in the history
  • Loading branch information
Pompurin404 committed Aug 6, 2024
1 parent 5ceb6fb commit 196367a
Showing 1 changed file with 15 additions and 86 deletions.
101 changes: 15 additions & 86 deletions src/renderer/src/pages/connections.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { Button, Input } from '@nextui-org/react'
import { IoCloseCircle } from 'react-icons/io5'
import { calcTraffic } from '@renderer/utils/calc'
import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@nextui-org/react'
import dayjs from 'dayjs'
import ConnectionDetailModal from '@renderer/components/connections/connection-detail-modal'

let preData: IMihomoConnectionDetail[] = []
Expand All @@ -21,8 +20,6 @@ const Connections: React.FC = () => {
const [connections, setConnections] = useState<IMihomoConnectionDetail[]>([])
const [selectedConnection, setSelectedConnection] = useState<IMihomoConnectionDetail>()
const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
const [sortKey, setSortKey] = useState('')
const [descend, setDescend] = useState(false)

const filteredConnections = useMemo(() => {
if (filter === '') return connections
Expand All @@ -32,25 +29,6 @@ const Connections: React.FC = () => {
})
}, [connections, filter])

const sortedConnections = useMemo(() => {
if (sortKey === '') return filteredConnections
return filteredConnections.sort((a, b) => {
const localA = a[sortKey] ? a[sortKey] : a.metadata[sortKey]
const localB = b[sortKey] ? b[sortKey] : b.metadata[sortKey]
if (descend) {
if (typeof localA === 'string') {
return localB.localeCompare(localA)
}
return localB - localA
} else {
if (typeof localA === 'string') {
return localA.localeCompare(localB)
}
return localA - localB
}
})
}, [filteredConnections, sortKey, descend])

useEffect(() => {
startMihomoConnections()
window.electron.ipcRenderer.on('mihomoConnections', (_e, info: IMihomoConnectionsInfo) => {
Expand Down Expand Up @@ -119,85 +97,36 @@ const Connections: React.FC = () => {
setSelectedConnection(connections.find((c) => c.id === (id as string)))
setIsDetailModalOpen(true)
}}
sortDescriptor={{ column: sortKey, direction: descend ? 'descending' : 'ascending' }}
onSortChange={(desc) => {
setSortKey(desc.column as string)
setDescend(desc.direction !== 'ascending')
}}
isHeaderSticky
isStriped
className="h-[calc(100vh-100px)] p-2 select-none"
>
<TableHeader>
<TableColumn key="type" allowsSorting>
类型
</TableColumn>
<TableColumn key="process" allowsSorting>
进程
</TableColumn>
<TableColumn key="host" allowsSorting>
主机
</TableColumn>
<TableColumn key="sniffer" allowsSorting>
嗅探域名
</TableColumn>
<TableColumn key="rule" allowsSorting>
规则
</TableColumn>
<TableColumn key="chains" width={500}>
链路
</TableColumn>
<TableColumn key="download" allowsSorting>
下载量
</TableColumn>
<TableColumn key="upload" allowsSorting>
上传量
</TableColumn>
<TableColumn key="downloadSpeed" allowsSorting>
下载速度
</TableColumn>
<TableColumn key="uploadSpeed" allowsSorting>
上传速度
</TableColumn>
<TableColumn key="start" allowsSorting>
连接时间
</TableColumn>
<TableColumn key="sourceIp">源地址</TableColumn>
<TableColumn key="sourcePort">源端口</TableColumn>
<TableColumn key="inboundUser">入站用户</TableColumn>
<TableColumn key="close">关闭连接</TableColumn>
<TableColumn key="type">类型</TableColumn>
<TableColumn key="origin">来源</TableColumn>
<TableColumn key="target">目标</TableColumn>
<TableColumn key="rule">规则</TableColumn>
<TableColumn key="chains">链路</TableColumn>
<TableColumn key="close">关闭</TableColumn>
</TableHeader>
<TableBody items={sortedConnections ?? []}>
<TableBody items={filteredConnections ?? []}>
{(item) => (
<TableRow key={item.id}>
<TableCell className="max-w-[10px]">
<TableCell>
{item.metadata.type}({item.metadata.network})
</TableCell>
<TableCell>{item.metadata.process}</TableCell>
<TableCell className="max-w-[200px] text-ellipsis whitespace-nowrap overflow-hidden">
{item.metadata.host}
</TableCell>
<TableCell className="max-w-[200px] text-ellipsis whitespace-nowrap overflow-hidden">
{item.metadata.sniffHost ?? '-'}
<TableCell>{item.metadata.process || item.metadata.sourceIP}</TableCell>
<TableCell className="max-w-[100px] text-ellipsis whitespace-nowrap overflow-hidden">
{item.metadata.host ||
item.metadata.remoteDestination ||
item.metadata.destinationIP}
</TableCell>
<TableCell className="max-w-[200px] text-ellipsis whitespace-nowrap overflow-hidden">
{`${item.rule} ${item.rulePayload}`}
<TableCell className="max-w-[100px] text-ellipsis whitespace-nowrap overflow-hidden">
{item.rule} {item.rulePayload}
</TableCell>
<TableCell className="max-w-[200px] text-ellipsis whitespace-nowrap overflow-hidden">
{item.chains.reverse().join('::')}
</TableCell>
<TableCell className="whitespace-nowrap">{calcTraffic(item.download)}</TableCell>
<TableCell className="whitespace-nowrap">{calcTraffic(item.upload)}</TableCell>
<TableCell className="whitespace-nowrap">
{calcTraffic(item.downloadSpeed ?? 0)}/s
</TableCell>
<TableCell className="whitespace-nowrap">
{calcTraffic(item.uploadSpeed ?? 0)}/s
</TableCell>
<TableCell className="whitespace-nowrap">{dayjs(item.start).fromNow()}</TableCell>
<TableCell className="whitespace-nowrap">{item.metadata.sourceIP}</TableCell>
<TableCell className="whitespace-nowrap">{item.metadata.sourcePort}</TableCell>
<TableCell className="whitespace-nowrap">{item.metadata.inboundUser}</TableCell>
<TableCell>
<Button
isIconOnly
Expand Down

0 comments on commit 196367a

Please sign in to comment.