jsrider / react-topology

Create Topology views with SVG and React

topology is the arrangement of the various elements (links, nodes, etc.) of a communication network.

React Topology allows you to create complicated network topologies in a very simple manner.

Install

npm install react-topology
or
yarn add react-topology

Use

import Topology from 'react-topology'
const services =  [
  {
    id: 'frontend-app',
    name: 'Frontend',
    status: 'active',
    connections: ['graphql-server'],
    nodes: [
      {
        status: 'running',
        count: 1
      },
      {
        status: 'failed',
        count: 1
      }
    ],
    instancesActive: true,
    instancesHealthy: {
      total: 2,
      healthy: 0
    },
    transitionalStatus: false,
    reversed: true
  },
  {
    id: 'graphql-server',
    name: 'GraphQL',
    status: 'active',
    connections: ['api-server'],
    nodes: [
      {
        status: 'running',
        count: 2
      }
    ],
    instancesActive: true,
    instancesHealthy: {
      total: 2,
      healthy: 2
    },
    transitionalStatus: false,
    reversed: true
  },
  {
    id: 'api-server',
    name: 'API',
    status: 'active',
    connections: ['graphql-server'],
    nodes: [
      {
        status: 'running',
        count: 1
      },
      {
        status: 'failed',
        count: 1
      },
      {
        status: 'unknown',
        count: 1
      }
    ],
    instancesActive: true,
    instancesHealthy: {
      total: 3,
      healthy: 2
    },
    transitionalStatus: false,
    reversed: false
  }
];

const Network = () =>
    <Topology services={services} primaryColor="#BADA55" />


export default Network;

Contribute

We're delighted that you'd like to contribute to the toolkit, as we're always looking for ways to improve it.

If there is anything that you'd like to improve or propose, please submit a pull request. And remember to check the contribution guidelines!.

Start

git clone [email protected]:yldio/react-topology.git
cd react-topology
yarn
yarn start

License

MPL-2.0

Icon: Network by Brennan Novak from the Noun Project