0.116.5 • Published 4 years ago

service-graph v0.116.5

Weekly downloads
392
License
MIT
Repository
-
Last release
4 years ago

Service Graph

Library, which provides API to draw a Service Graph instance.

Get started

Adding to the project

The package can be installed using npm:

npm install service-graph

Usage

Data format

Nodes
node = {
    id: string;
    label: 'SERVICE' | 'ENGRESS' | 'INGRESS';
    type: string;
    securityLevel: 'SAFE' | 'WARN' | 'DANGER';
    namespace: string;
    labelBadge: number | function;
    icon: string;
    iconBadge: string;
    data: {
       label: LABEL;
       ...
    };
    isSecure: bool;
    badge: number;
}
Links
link = {
    source: string; // source node id
    target: string; // target node id
    label: string;
    securityLevel: 'SAFE' | 'WARN' | 'DANGER';
}

Drawing a graph

To provide a new Service Graph instance:

import createServiceGraph from 'service-graph'

const nodes = [
    {
        id: 'ingress',
        data: {
            label: 'INGRESS',
        },
        type: 'CLOUD',
        securityLevel: 'SAFE',
        badge: 1,
    },
    {
        id: 'front-end',
        data: {
            label: 'FRONT END',
        },
        type: 'SERVICE',
        securityLevel: 'WARN',
        badge: 3,
        icon: './some_icon.jpg',
    },
]

const links = [
    {
        source: 'ingress',
        target: 'front-end',
        securityLevel: 'WARN',
    },
]

const config = {
    Theme: {
        Palette: {
            DEFAULT: '#7bc47d',
            WARN: '#f8a65f',
            DANGER: '#ed5e5e',
            HIGHLIGHT: '#28d4e7',
            ATTACK_ICON: '#ed5e5e',
            COMPLIANCE_ICON: '#f8a65f',
            NODE_LABEL: '#333',
            LINK_LABEL: '#333',
            BADGE: '#f8a65f',
            BADGE_LABEL: '#fff',
            NAMESPACE_RECTANGLE: '#f8f8f8',
            NAMESPACE_LABEL: '#333',
        },
        Icons: {
            ATTACK_ICON: attackIcon,
            COMPLIANCE_ICON: complianceIcon,
            NodeIcons: {
                SERVICE: serviceIcon,
                CLOUD: cloudIcon,
            },
        },
        Sizing: {
            Fonts: {
                NODE_LABEL: '18px',
                LINK_LABEL: '8.8px',
            },
            NODE: 40,
        },
        Spacing: {
            X: 90,
            Y: 50,
            EDGES: 5,
        },
        NODES_PER_ROW: 4 || (namespaceData : NamespaceData, index, allNamespacesData: NamespaceData[]) => { ... },
    },
    Behavior: {
        MODE: 'API',
        HIGHLIGHT_ON_CLICK: false,
        QUERY: '#graph',
        NAMESPACE: '',
        CLUSTER: '',
        TENANT: '',
        PRESERVE_POS_ON_START: true,
        NODE_LABEL_FORMAT: (label) => { ... },
        NAMESPACE_LABEL_FORMAT: (label) => { ... },
    },
}

createServiceGraph(nodes, links, config)
NamespaceData = { namespace: 'NAMESPACE', nodes: [...] }

Adding event listeners

To add new event listener for a graph:

const graph = createServiceGraph(nodes, links, options)

// ...

const data = {
    switchIconOnEvent: true || false, // for 'namespaceiconclick'
}

graph.on('nodeclick', (nodeData, index, nodes, graph) => {
    console.log(`${nodeData.id} clicked!`)
}, data)

Supported events:

  • nodeclick - function(nodeData, index, nodes, graph) {}
  • nodehover - function(nodeData, index, nodes, isMouseOver, graph) {}
  • linkclick - function(linkData, index, nodes, graph) {}
  • linkhover - function(linkData, index, nodes, isMouseOver, graph) {}
  • iconbadgeclick - function(nodeData, index, nodes, graph) {}
  • iconbadgehover - function(nodeData, index, nodes, isMouseOver, graph) {}
  • badgeclick - function(nodeData, index, badges, graph) {}
  • badgehover - function(nodeData, index, badges, isMouseOver, graph) {}
  • outsideclick - function(graph) {}
  • namespaceiconhover - function({ namespaceName, clusterName, tenantName }, index, namespaceLabelIconList, isMouseOver, graph) {}
  • clustericonhover - function({ clusterName, tenantName }, index, clusterLabelIconList, isMouseOver, graph) {}
  • labelbadgehover - function(nodeData, index, badges, isMouseOver, graph) {}

isClicked is an object, which keys are namespaces and values indicates if this icon has been clicked or not

In TENANT zoom level:

  • clustericonhover - function({ clusterName, tenantName }, index, clusterLabelIconList, isMouseOver, graph) {}
  • namespacebadgehover - function(namespaceName, index, clusterLabelIconList, isMouseOver, graph) {}
  • nonmeshnsbadgehover - function(clusterName, index, clusterLabelIconList, isMouseOver, graph) {}
  • nonmeshnshelpiconhover - function(clusterName, index, clusterLabelIconList, isMouseOver, graph) {}
  • namespaceclick - function({ namespaceName, clusterName, tenantName }, index, clusterLabelIconList, isMouseOver, graph) {}

API

API Methods:

  • graph.setHiglight(type: ElementType, data: object, append: bool) - highlights node with the given name (if found), if in non-API mode and append is true, then this will be another one selected

NOTE: This method is not going to trigger click event on a node or link. This is only going to highlight the element.

  • graph.setMode(mode: GraphMode, pending: boolean) - set graph mode to desired one (if pending is set to true - path labels are going to be hidden)

Example:

graph.setHighlight('NODE', { id: 'node-1' })
// or 
graph.setHighlight('LINK', { source: 'node-1', target: 'node-2' })
// or 
graph.setHighlight('CLUSTER', { tenantName: 't1', clusterName: 'c1' })
  • graph.removeHiglight() - removes highlight from the currently selected node(s) / link(s)
  • graph.zoomTo(zoomLevel: ZoomLevel, defaultConfig, data: {}, moveRelativelyOnStart: boolean)

In TENANT zoom level, the additional info about namespaces can be provided in a way:

graph.zoomTo('TENANT', config, { namespaceMetadata: [ { namespace: 'ns-1', excluded: false, badge: 5 } ] })
  • graph.moveToCenter(zoomLevel: ZoomLevel = 'NAMESPACE') - moves the viewport to the center of the graph
  • graph.moveToNamespace(tenantName, clusterName, namespaceName) - moves the viewport to the center of desired namespace
  • graph.moveToCluster(tenantName, clusterName) - moves the viewport to the center of desired cluster
  • graph.moveToNode(nodedata) - moves the viewport to the center of desired node
  • graph.moveToLink(linkData) - moves the viewport to the center of desired link

API Fields:

  • graph.selected - [{ type: ElementType, data: object }, ...]

Consts:

  • GraphMode - API, ATTACKS, COMPLIANCE, EVENT,
  • ElementType - NODE, LINK, TENANT,CLUSTER, NAMESPACE
  • ZoomLevel - SERVICE, SERVICES, NAMESPACE, CLUSTER, TENANT

To be continued.

0.116.4

4 years ago

0.116.5

4 years ago

0.116.3

4 years ago

0.116.2

4 years ago

0.116.1

4 years ago

0.116.0

4 years ago

0.115.1

4 years ago

0.115.0

4 years ago

0.114.8

4 years ago

0.113.8

4 years ago

0.112.8

4 years ago

0.112.7

4 years ago

0.112.6

4 years ago

0.112.5

4 years ago

0.112.4

4 years ago

0.112.3

4 years ago

0.112.2

5 years ago

0.112.1

5 years ago

0.112.0

5 years ago

0.111.0

5 years ago

0.111.1

5 years ago

0.110.0

5 years ago

0.109.0

5 years ago

0.108.0-pre1

5 years ago

0.108.0-pre0

5 years ago

0.107.0

5 years ago

0.106.0

5 years ago

0.105.2

5 years ago

0.105.1

5 years ago

0.104.0

5 years ago

0.105.0

5 years ago

0.104.0-pre1

5 years ago

0.104.0-pre2

5 years ago

0.104.0-pre0

5 years ago

0.103.0

5 years ago

0.102.1

5 years ago

0.102.0

5 years ago

0.101.0

5 years ago

0.100.0

5 years ago

0.100.1

5 years ago

0.100.0-pre7

5 years ago

0.100.0-pre1

5 years ago

0.100.0-pre2

5 years ago

0.100.0-pre5

5 years ago

0.100.0-pre6

5 years ago

0.100.0-pre3

5 years ago

0.100.0-pre4

5 years ago

0.100.0-pre0

5 years ago

0.99.0

5 years ago

0.99.0-pre14

5 years ago

0.99.0-pre14blur

5 years ago

0.99.0-pre13

5 years ago

0.99.0-pre12

5 years ago

0.99.0-pre11

5 years ago

0.99.0-pre9

5 years ago

0.99.0-pre10

5 years ago

0.99.0-pre8

5 years ago

0.99.0-pre7

5 years ago

0.99.0-pre6

5 years ago

0.99.0-pre5

5 years ago

0.99.0-pre4

5 years ago

0.99.0-pre2

5 years ago

0.99.0-pre3

5 years ago

0.99.0-pre0

5 years ago

0.99.0-pre1

5 years ago

0.98.1

5 years ago

0.98.0

5 years ago

0.97.0

5 years ago

0.97.0-preperf0

5 years ago

0.97.0-pre0

5 years ago

0.96.0

5 years ago

0.96.0-pre1

5 years ago

0.96.0-pre0

5 years ago

0.95.0

5 years ago

0.95.0-pre1

5 years ago

0.95.0-pre0

5 years ago

0.95.0-pre5

5 years ago

0.95.0-pre4

5 years ago

0.95.0-pre3

5 years ago

0.95.0-pre2

5 years ago

0.95.0-pre9

5 years ago

0.95.0-pre8

5 years ago

0.95.0-pre7

5 years ago

0.95.0-pre6

5 years ago

0.94.0

5 years ago

0.93.0

5 years ago

0.92.3

5 years ago

0.92.2

5 years ago

0.92.1

5 years ago

0.92.0

5 years ago

0.91.0

5 years ago

0.90.0

5 years ago

0.90.1

5 years ago

0.89.0

5 years ago

0.88.0

5 years ago

0.87.0

5 years ago

0.86.2

5 years ago

0.86.0

5 years ago

0.86.1

5 years ago

0.85.1

5 years ago

0.85.0

5 years ago

0.84.1

5 years ago

0.84.0

5 years ago

0.83.2

5 years ago

0.83.1

5 years ago

0.83.0

5 years ago

0.82.1

5 years ago

0.82.0

5 years ago

0.81.0

5 years ago

0.80.0

5 years ago

0.79.0

5 years ago

0.78.0

5 years ago

0.77.0

5 years ago

0.76.3

5 years ago

0.76.2

5 years ago

0.76.1

5 years ago

0.76.0

5 years ago

0.75.0

5 years ago

0.74.0

5 years ago

0.73.0

5 years ago

0.72.0

5 years ago

0.71.1

5 years ago

0.71.0

5 years ago

0.70.1

5 years ago

0.70.0

5 years ago

0.69.1

5 years ago

0.69.0

5 years ago

0.68.1

5 years ago

0.68.0

5 years ago

0.67.0

5 years ago

0.66.2

5 years ago

0.66.1

5 years ago

0.66.0

5 years ago

0.65.0

5 years ago

0.64.0

5 years ago

0.63.2

5 years ago

0.63.1

5 years ago

0.63.0

5 years ago

0.62.0

5 years ago

0.61.0

6 years ago

0.60.1

6 years ago

0.60.0

6 years ago

0.59.1

6 years ago

0.59.0

6 years ago

0.58.0

6 years ago

0.57.0

6 years ago

0.56.0

6 years ago

0.55.1

6 years ago

0.55.0

6 years ago

0.54.3

6 years ago

0.54.2

6 years ago

0.54.1

6 years ago

0.54.0

6 years ago

0.53.0-pre1

6 years ago

0.53.0-pre0

6 years ago

0.52.0

6 years ago

0.51.0

6 years ago

0.50.3

6 years ago

0.50.2

6 years ago

0.50.1

6 years ago

0.50.0

6 years ago

0.49.0

6 years ago

0.48.4

6 years ago

0.48.3

6 years ago

0.48.2

6 years ago

0.48.1

6 years ago

0.48.0

6 years ago

0.47.1

6 years ago

0.47.0

6 years ago

0.46.1

6 years ago

0.46.0

6 years ago

0.45.0

6 years ago

0.44.2

6 years ago

0.44.1

6 years ago

0.44.0

6 years ago

0.43.1

6 years ago

0.43.0

6 years ago

0.42.0

6 years ago

0.41.0

6 years ago

0.40.0

6 years ago

0.39.4

6 years ago

0.39.3

6 years ago

0.39.2

6 years ago

0.39.1

6 years ago

0.39.0

6 years ago

0.38.0

6 years ago

0.37.0

6 years ago

0.36.0

6 years ago

0.35.0

6 years ago

0.34.0

6 years ago

0.33.0

6 years ago

0.32.0

6 years ago

0.31.0

6 years ago

0.30.0

6 years ago

0.29.0

6 years ago

0.28.0

6 years ago

0.27.2

6 years ago

0.27.1

6 years ago

0.27.0

6 years ago

0.26.2

6 years ago

0.26.1

6 years ago

0.26.0

6 years ago

0.25.0

6 years ago

0.24.0

6 years ago

0.23.0

6 years ago

0.22.0

6 years ago

0.21.0

6 years ago

0.20.0

6 years ago

0.19.0

6 years ago

0.18.1

6 years ago

0.18.0

6 years ago

0.17.2

6 years ago

0.17.1

6 years ago

0.17.0

6 years ago

0.16.2

6 years ago

0.16.0

6 years ago

0.15.0

6 years ago

0.14.3

6 years ago

0.14.1

6 years ago

0.14.0

6 years ago

0.13.0

6 years ago

0.12.0

6 years ago

0.11.0

6 years ago

0.10.1

6 years ago

0.10.0

6 years ago

0.9.0

6 years ago

0.7.0

6 years ago

0.6.0

6 years ago

0.5.1

6 years ago

0.5.0

6 years ago

0.4.1

6 years ago

0.4.0

6 years ago

0.4.0-pre0

6 years ago

0.3.0

6 years ago

0.3.0-pre1

6 years ago

0.3.0-pre0

6 years ago

0.2.0

6 years ago

0.1.0

6 years ago