<commit_before>Kubernetes Topology Graph
=========================

Provides a simple force directed topology graph for kubernetes items.

#### Disclaimer
This is an early implementation and is subject to change.

![Screenshot](https://raw.github.com/kubernetes-ui/topology-graph/master/scratch/screenshot.png)

Getting Started
---------------

The kubernetes describer is provided in the kubernetes-object-describer bower package.

To get the kubernetes-topology-graph bower component in another project, run:

```
bower install kubernetes-topology-graph --save
```

To see a simple running example git clone this repo and run

```
npm install
grunt depends
firefox index.html
```

This will install any required dependencies necessary to run the ```index.html``` demo.

Usage
-----

Include the JS and CSS files, after angularjs and d3:

```xml
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/kubernetes-topology-graph/dist/topology-graph.js"></script
<link rel="stylesheet" href="bower_components/kubernetes-topology-graph/dist/topology-graph.css" />
```

Make sure your angular app / module includes ```kubernetesUI``` as a module dependency.

```
angular.module('exampleApp', ['kubernetesUI'])
```

Define how the svg vertices (nodes) will display:

```xml
    <svg>
      <defs>
        <g id="vertex-Node">
          <circle r="15" stroke="black" fill="white"></circle>
          <text y="6">N</text>
        </g>
        <g id="vertex-Pod">
          <circle r="15" stroke="black" fill="white"></circle>
          <text y="6">P</text>
        </g>
      </defs>
    </svg>
```

Define the following in your controller scope:

```javascript
$scope.my_items = {
    item1: { kind: "Node" },
    item2: { kind: "Pod" }
};

$scope.my_relations = [
    { source: "item2", "target": "item1"
];

$scope.my_kinds = {
    "Pod": "#vertex-Pod",
    "Node": "#vertex-Node"
};
```

Now include the graph:

```xml
<kubernetes-topology-graph items="my_items" relations="my_relations" kinds="my_kinds">
</kubernetes-topology-graph>
```

Documentation
-------------

#### items

A javascript plain object containing kubernetes items as property values. The keys
of this object are used in the ```relations``` attribute. The items should have a
```item.kind``` attribute, as well as the usual ```item.metadata``` and so on.

#### kinds

A javascript plain object with kubernetes kinds as keys (ie: *Pod*, *Service* ...). Only
items with an ```item.kind``` that is a key in this object will be displayed. The
values should be xlink hrefs (eg: html ids prefixed with '#'). These will be used to draw
the vertices.

#### relations

An array of javascript objects describing relations between ```items```. Each object should
have the following properties:

 * ```relation.source```: string key of an item in the ```items``` map.
 * ```relation.target```: string key of an item in the ```items``` map.

#### 'selected'

This is a scope event that will be emitted when the selection changes. The argument will
be the item (from the ```items``` map) that was selected, or ```null``` if nothing is
selected.

Styling
-------

Using the ```<defs>``` and CSS you should be able to acheive the look you want. The
directive applies the item *kind* as a class to each vertex. Each edge also gets a class
with the concatenated item *kind* of the *source* and *target*, in that order.

See ```topology-graph.css``` for an example default look and feel, that uses the classes
described above.

Contributing<commit_msg>misc fixes to readme<commit_after>Kubernetes Topology Graph
=========================

Provides a simple force directed topology graph for kubernetes items.

#### Disclaimer
This is an early implementation and is subject to change.

![Screenshot](https://raw.github.com/kubernetes-ui/topology-graph/master/scratch/screenshot.png)

Getting Started
---------------

The kubernetes describer is provided in the kubernetes-object-describer bower package.

To get the kubernetes-topology-graph bower component in another project, run:

```
bower install kubernetes-topology-graph --save
```

To see a simple running example git clone this repo and run

```
npm install
grunt depends
firefox index.html
```

This will install any required dependencies necessary to run the ```index.html``` demo.

Usage
-----

Include the JS and CSS files, after angularjs and d3:

```xml
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/kubernetes-topology-graph/dist/topology-graph.js"></script>
<link rel="stylesheet" href="bower_components/kubernetes-topology-graph/dist/topology-graph.css" />
```

Make sure your angular app / module includes ```kubernetesUI``` as a module dependency.

```
angular.module('exampleApp', ['kubernetesUI'])
```

Define how the svg vertices (nodes) will display:

```xml
    <svg>
      <defs>
        <g id="vertex-Node">
          <circle r="15" stroke="black" fill="white"></circle>
          <text y="6">N</text>
        </g>
        <g id="vertex-Pod">
          <circle r="15" stroke="black" fill="white"></circle>
          <text y="6">P</text>
        </g>
      </defs>
    </svg>
```

Define the following in your controller scope:

```javascript
$scope.my_items = {
    item1: { kind: "Node" },
    item2: { kind: "Pod" }
};

$scope.my_relations = [
    { source: "item2", "target": "item1"}
];

$scope.my_kinds = {
    "Pod": "#vertex-Pod",
    "Node": "#vertex-Node"
};
```

Now include the graph:

```xml
<kubernetes-topology-graph items="my_items" relations="my_relations" kinds="my_kinds">
</kubernetes-topology-graph>
```

Documentation
-------------

#### items

A javascript plain object containing kubernetes items as property values. The keys
of this object are used in the ```relations``` attribute. The items should have a
```item.kind``` attribute, as well as the usual ```item.metadata``` and so on.

#### kinds

A javascript plain object with kubernetes kinds as keys (ie: *Pod*, *Service* ...). Only
items with an ```item.kind``` that is a key in this object will be displayed. The
values should be xlink hrefs (eg: html ids prefixed with '#'). These will be used to draw
the vertices.

#### relations

An array of javascript objects describing relations between ```items```. Each object should
have the following properties:

 * ```relation.source```: string key of an item in the ```items``` map.
 * ```relation.target```: string key of an item in the ```items``` map.

#### 'selected'

This is a scope event that will be emitted when the selection changes. The argument will
be the item (from the ```items``` map) that was selected, or ```null``` if nothing is
selected.

Styling
-------

Using the ```<defs>``` and CSS you should be able to achieve the look you want. The
directive applies the item *kind* as a class to each vertex. Each edge also gets a class
with the concatenated item *kind* of the *source* and *target*, in that order.

See ```topology-graph.css``` for an example default look and feel, that uses the classes
described above.

Contributing
{'fraction_non_alphanumeric': 0.14904582810976458, 'fraction_numerical': 0.003621674327900822, 'mean_word_length': 3.9043715846994536, 'pattern_counts': {'":': 6, '<': 55, '<?xml version=': 0, '>': 54, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 6}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1000047', 'n_tokens_mistral': 2174, 'n_tokens_neox': 2074, 'n_words': 804}