Network-policy-viewer NPM

Kubernetes Network Policy Viewer

ONLINE DEMO BETA: You also can edit NetworkPolicy in the editor and visualisation will update as you type

NetworkPolicy viewer screenshot

View your Kubernetes NetworkPolicy manifests as graph, just Copy and Paste YAML to the editor and receive instant visualisation

This, hopefully, can help you find issues with NetworkPolicies or understand NetworkPolicy concept better

Related projects

NetworkPolicy Viewer as Lens IDE extension

Installation

npm install network-policy-viewer

Usage

NetworkPolicyViewer can be used as React component, see the sample below or view demo source code

import React from 'react';
import ReactDOM from 'react-dom';
import { NetworkPolicyViewer } from "network-policy-viewer";
import "network-policy-viewer/index.css"

const networkPolicy = `
apiVersion: networking.k8s.io/v1
kind: NetworkPolicy
metadata:
  name: default-deny-ingress
spec:
  podSelector: {}
  policyTypes:
  - Ingress
`;

ReactDOM.render(
    <NetworkPolicyViewer
        networkPolicy={networkPolicy}
        style={{ display: "flex", width: "100%", height: '100vh' }}
        canvasStyle={{ width: "100%", height: '100vh'}}
    />,
    document.getElementById('root')
);