Skip to content

Latest commit

 

History

History
104 lines (86 loc) · 3.95 KB

README.md

File metadata and controls

104 lines (86 loc) · 3.95 KB
Raw

Kubernetes Network Policy Visualizer

This project is a Svelte-based web application designed to visualize Kubernetes network policies. It provides a graphical representation of network policies and a tabular view, making it easier to understand and analyze how different pods and namespaces are connected in a Kubernetes cluster.

Features

  • Graphical Visualization: Visualize Kubernetes network policies using D3.js, representing pods and namespaces and their connections based on ingress and egress rules.

  • Tabular View: A detailed table view that lists all network policies with associated metadata.

Requirements

  • Node.js (v16 or later)
  • Svelte (v3.0 or later)
  • D3.js (v7.0 or later)
  • TypeScript (Optional but recommended for development)

Setup

Warning

A k8s running cluster will be required for live data to be viewable

      # Stress test with a UDS Core cluster
      # clone uds-core
      git clone [email protected]:defenseunicorns/uds-core.gitj
      cd uds-core

      # create uds core cluster
      uds run test-uds-core

      # once the cluster is up, deploy the server and UI to see real data

Tip

Don't want to use a live cluster? Utilize this npm script after cloning the repo

  # no server required, will run npm ci, and use mock data
  npm run standalone
  1. Clone the repository: 
    git clone https://github.com/defenseunicorns-dashdays/network-visualizer.git
cd network-visualizer
  2. Install dependencies: 
     npm install
  3. Start Server and UI: 
     npm run start

Build for production:

 npm run build

Preview the production build:

 npm run preview

Usage

  1. Start the server: Run the development server using npm run server
  2. Start the Svelte App: npm run dev
  3. Open browser at: http://localhost:5137
  4. GLHF
    1. Unsure where to start? Click the Understanding the Visualizations modal for more information

What you'll see in browser

  1. Fetch Network Policies: The application automatically fetches Kubernetes network policies from http://localhost:3000/api/network-policies and displays them visually and in a table.
  2. Understanding the Visualization: Modal to describe the visualization and how to interact with it
  3. Refresh Network Policies: Click to refresh the visualization with the latest cluster data
  4. Icons ( See the readme in the src/validations for in depth explanation):
    1. Green Checkmark
    2. Yellow Warning
    3. Red Exclamation
  5. Filters:
    1. Namespaces
    2. Pods
    3. Policy Type
  6. Visualize Policies: The network policies will be visualized on a graph, showing the relationships between pods and namespaces.
  7. View Details: The table view provides detailed information about each network policy, including ingress and egress rules.

browser view

Limitations

  • At the moment it's just namespace and pod related, need to include cluster and separate visualization for that
  • Data Source: The application currently fetches data from http://localhost:3000/api/network-policies. This API endpoint needs to be set up separately to provide the correct data format.
  • Browser Compatibility: The application is tested primarily on modern browsers like Chrome and Firefox. There might be issues with older browsers.
  • Real-time Updates: The current version does not support real-time updates of network policies. Clicking refresh button or refreshing page is required.

Future Issues

  • Make allow v deny policies easier to understand
  • Make hoverable namespace/pod show details
  • Robustness of the table creation ( pretty statically typed at the moment )

Looking to hire a UX designer