Skip to content

Repository files navigation

PolicyTopology Component

npm version

PolicyTopology is a reusable React component for visualizing policy topologies using DOT strings.

PolicyTopology

Getting Started

Installation

To use the PolicyTopology component, you need to install the necessary dependencies.

First, make sure you have Node.js (>=20.19) installed. Then, in your project directory, run:

npm install react react-dom react-policy-topology

This will install react-policy-topology along with its peer dependencies, react and react-dom.

Usage

To use the PolicyTopology component in your React application, follow these steps:

  1. Import the PolicyTopology component:
import React from 'react';
import PolicyTopology from 'react-policy-topology';
  1. Use the component in your application:
const App = () => {
  const dotString = `your DOT string here`;

  return (
    <div className="App">
      <PolicyTopology initialDotString={dotString} />
    </div>
  );
};

export default App;

Props

  • initialDotString (string): The DOT string representing the graph to visualise.

Development

This repo is a pnpm workspace: the npm package lives at the root, and the websocket runner app (built with Vite) in runner/. To install dependencies:

pnpm install

To start the development server:

pnpm start

This runs the runner app in development mode on http://localhost:3000. The app renders DOT strings received over a websocket at ws://$WEBSOCKET_HOST:$WEBSOCKET_PORT/ws (defaults: localhost:4000; the mock in runner/tests/topology.test.js shows how to feed it).

Building

To build the app for production, run:

pnpm run build

The build artifacts will be stored in the runner/build/ directory. To serve them:

pnpm run server

Testing

To run the test suite (starts the dev server, a mock websocket feed, and browser tests):

pnpm run test:ci

Running with Docker

docker build -t react-policy-topology .

docker run -d -p 5000:5000 \
  -e WEBSOCKET_HOST=your.websocket.host \
  -e WEBSOCKET_PORT=1234 \
  react-policy-topology

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

This project is licensed under the Apache v2 License.

About

Reusable React component for visualising policy topologies (from policy-machinery) using DOT strings.

Resources

Contributing

Security policy

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages