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.