Analysis Views
The @qacafe/pv-react/views
module exports components for analyzing and
visualizing network packet data at a higher level than the packet decode list.
All Analysis Views share the same IStandaloneProps
interface,
allowing for consistent usage across different visualizations.
Note: When importing any Analysis Views, you must also have the primary
style.css
CSS stylesheet imported as well.
Common Usage
Here’s an example of how to use any of the View components:
import React from "react";
import { AnyViewComponent } from "@qacafe/pv-react/views";
import "@qacafe/pv-react/style.css";
function PacketAnalysis() {
return (
<AnyViewComponent
file="capture.pcap"
endpoint="/api"
profile=""
filter="tcp.port == 80"
onError={(error, info) => console.error("View error:", error, info)}
/>
);
}
In this example, AnyViewComponent
can be replaced with any of the specific
View components exported from this module, such as ConversationsTableView
,
PacketSequenceView
, etc. The props shown are common to all View components,
but each may have additional specific props or behaviors.
Key props include:
file
: The PCAP file to analyzeprofile
: The analysis profile to usefilter
: A display filter for the dataendpoint
: The API endpoint to communicate withonError
: Error handling callback
You can find working examples of these View components in the Storybook distributed with Packet Viewer.
PacketViewer
The classic “Wireshark” view providing a Packet List, Decode Tree, Hex Dumps and Follow Streams, all controlled by a Display Filter input box.
import { PacketViewer } from "@qacafe/pv-react";
Conversations Table
A component that displays a table of network conversations for various protocols, showing source and destination addresses, and other relevant conversation data.
import { ConversationsTableView } from "@qacafe/pv-react/views";
Endpoints Table
A component that presents a table of network endpoints, including IP addresses, ports, GeoIP information and related statistics for each endpoint involved in the captured traffic.
import { EndpointsTableView } from "@qacafe/pv-react/views";
Sequence Diagram (Ladder)
A component that visualizes the sequence of packets in a capture, in a time-based vertical format, useful for understanding the flow of communication between endpoints.
import { PacketSequenceView } from "@qacafe/pv-react/views";
Packet Tree
A component that displays packet data in a tree structure, allowing users to explore the hierarchical nature of network protocols within each packet.
import { PacketTreeView } from "@qacafe/pv-react/views";
Packet Tree with Decode
A component that provides a detailed, hierarchical view of a decoded packet, showing protocol layers and fields in a tree structure for in-depth packet analysis, as well as the ASCII dump of the raw packet.
import { PacketTreeDecodeView } from "@qacafe/pv-react/views";
Protocol Hierarchy Table
A component that shows a table representing the hierarchy of protocols present in the captured network traffic, typically including statistics like packet counts and percentages for each protocol.
import { ProtocolHierarchyTableView } from "@qacafe/pv-react/views";