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 analyze
  • profile: The analysis profile to use
  • filter: A display filter for the data
  • endpoint: The API endpoint to communicate with
  • onError: 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";

wireshark-like view

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";

conversations table

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";

endpoints table

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 sequence diagram view

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 decode tree

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";

packet decode tree with hex

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";

protocol hierarchy table