Add new Servicegraph visualization. #3318
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,44 @@ | ||
| # Istio Servicegraph | ||
|
|
||
| Servicegraph is a small app that generates and visualizes graph | ||
| representations of your Istio service mesh. Servicegraph is dependent | ||
| on the | ||
| [Prometheus](https://istio.io/docs/tasks/telemetry/querying-metrics.html) | ||
| addon and the standard metrics configuration. The documentation for | ||
| deploying and using Servicegraph is | ||
| [here](https://istio.io/docs/tasks/telemetry/servicegraph.html). | ||
|
|
||
| ## Visualizations | ||
|
|
||
| - `/force/forcegraph.html` is an interactive | ||
| [D3.js](https://d3js.org/) visualization. | ||
|
|
||
| - `/dotviz` is a static [Graphviz](https://www.graphviz.org/) | ||
| visualization. | ||
|
|
||
| ## Serializations | ||
|
|
||
| - `/dotgraph` provides a | ||
| [DOT](https://en.wikipedia.org/wiki/DOT_(graph_description_language)) | ||
| serialization. | ||
|
|
||
| - `/d3graph` provides a JSON serialization for D3 visualization. | ||
|
|
||
| - `/graph` provides a JSON serialization. | ||
|
|
||
| ## Query Parameters | ||
|
|
||
| All endpoints take these query parameters: | ||
|
|
||
| - `time_horizon` controls the timespan to consider for graph | ||
| generation. Format is a number plus a time unit. Example `15s` or | ||
| `1m`. Default is `5m`. | ||
|
|
||
| - `filter_empty=true` will restrict the nodes and edges shown to only | ||
| those that reflect non-zero traffic levels during the specified | ||
| `time_horizon`. Deafult is `false`. | ||
|
|
||
| # Demosvc service | ||
| Defined in `servicegraph/cmd/demosvc`, this provides a simple HTTP | ||
| endpoint that generates Prometheus metrics. This can be used to test | ||
| the servicegraph service. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| // Copyright 2017 Istio Authors | ||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
|
|
||
| // Package servicegraph defines the core model for the servicegraph service. | ||
| package servicegraph | ||
|
|
||
| import ( | ||
| "encoding/json" | ||
| "errors" | ||
| "io" | ||
| ) | ||
|
|
||
| type ( | ||
| // d3Graph is a graph representation for JSON serialization to be | ||
| // consumed easily by the D3.js library. | ||
| d3Graph struct { | ||
| Nodes []d3Node `json:"nodes"` | ||
| Links []d3Link `json:"links"` | ||
| } | ||
|
|
||
| d3Node struct { | ||
| Name string `json:"name"` | ||
| } | ||
|
|
||
| d3Link struct { | ||
| Source int `json:"source"` | ||
| Target int `json:"target"` | ||
| Labels Attributes `json:"labels"` | ||
| } | ||
| ) | ||
|
|
||
| func indexOf(nodes []d3Node, name string) (int, error) { | ||
| for i, v := range nodes { | ||
| if v.Name == name { | ||
| return i, nil | ||
| } | ||
| } | ||
| return 0, errors.New("invalid graph") | ||
| } | ||
|
|
||
| // GenerateD3JSON converts the standard Dynamic graph to d3Graph, then | ||
| // serializes to JSON. | ||
| func GenerateD3JSON(w io.Writer, g *Dynamic) error { | ||
| graph := d3Graph{ | ||
| Nodes: make([]d3Node, 0, len(g.Nodes)), | ||
| Links: make([]d3Link, 0, len(g.Edges)), | ||
| } | ||
| for k := range g.Nodes { | ||
| n := d3Node{ | ||
| Name: k, | ||
| } | ||
| graph.Nodes = append(graph.Nodes, n) | ||
| } | ||
| for _, v := range g.Edges { | ||
| s, err := indexOf(graph.Nodes, v.Source) | ||
| if err != nil { | ||
| return err | ||
| } | ||
| t, err := indexOf(graph.Nodes, v.Target) | ||
| if err != nil { | ||
| return err | ||
| } | ||
| l := d3Link{ | ||
| Source: s, | ||
| Target: t, | ||
| Labels: v.Labels, | ||
| } | ||
| graph.Links = append(graph.Links, l) | ||
| } | ||
| return json.NewEncoder(w).Encode(graph) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| .background { | ||
| stroke: white; | ||
| stroke-width: 1px; | ||
| fill: white; | ||
| } | ||
|
|
||
| .node { | ||
| stroke: black; | ||
| stroke-width: 1.5px; | ||
| cursor: move; | ||
| fill: #466BB0; | ||
|
There was a problem hiding this comment. this is way way down in the weeds, but I think we might want to consider a different color (non-red). would using istio blue make sense? There was a problem hiding this comment. It is Istio blue now, I had it as "lightcoral" before. There was a problem hiding this comment. ha. ok. i need to learn hex colors ;). |
||
| } | ||
|
|
||
| .node.darken { | ||
| stroke: grey; | ||
| } | ||
|
|
||
| .link { | ||
| fill: none; | ||
| stroke: #000; | ||
| stroke-width: 3px; | ||
| opacity: 0.7; | ||
| marker-end: url(#end-arrow); | ||
| } | ||
|
|
||
| .link.darken { | ||
| opacity: 0.3; | ||
| } | ||
|
|
||
| .label { | ||
| fill: white; | ||
| font-family: Verdana; | ||
| font-size: 14px; | ||
| text-anchor: middle; | ||
| cursor: move; | ||
| } | ||
|
|
||
| .label.darken { | ||
| fill: lightgrey; | ||
| } | ||
|
|
||
| #graph { | ||
| overflow-y: scroll; | ||
| } | ||
|
|
||
| #info { | ||
| height: 300px; | ||
| display: none; | ||
| overflow-y: scroll; | ||
| } | ||
|
|
||
| html, body, #total{ | ||
| height: 100%; | ||
| width: 100%; | ||
| margin: 0; | ||
| font-family: Verdana; | ||
| font-size: 14px; | ||
| } | ||
|
|
||
| a { | ||
| font-size: 18px; | ||
| color: #3F51B5; | ||
| } | ||
|
|
||
| table { | ||
| border-collapse: collapse; | ||
| width: 80%; | ||
| table-layout: fixed; | ||
| } | ||
|
|
||
| table, th, td { | ||
| border: 1px solid black; | ||
| text-align: left; | ||
| padding: 4px; | ||
| } | ||
|
|
||
| .conn-table { | ||
| margin: 20px; | ||
| } | ||
|
|
||
| div.float { | ||
| position:absolute; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <!DOCTYPE html> | ||
| <head> | ||
| <title>Istio Service Graph</title> | ||
| <meta charset="utf-8"> | ||
| <link rel="stylesheet" href="forcegraph.css"> | ||
| </head> | ||
| <body> | ||
| <div id="title" class="float"> | ||
| <h2>Istio Service Graph</h2> | ||
| Click on a service for traffic information | ||
| </div> | ||
| <div id="total"> | ||
| <div id="graph"></div> | ||
| <div id="info"></div> | ||
| </div> | ||
| <script id="info-template" type="text/x-handlebars-template"> | ||
| <a onclick="hideInfo()">Close</a> | ||
|
|
||
| <h2>{{name}}</h2> | ||
| <div id="incoming" class="conn-table"><table> | ||
| <tr> | ||
| <th>Incoming Connections</th> | ||
| <th>Reqs/sec</th> | ||
| </tr> | ||
| {{#each incoming}} | ||
| <tr> | ||
| <td>{{this.source}}</td> | ||
| <td>{{this.ops}}</td> | ||
| </tr> | ||
| {{/each}} | ||
| </table></div> | ||
|
|
||
| <div id="outgoing" class="conn-table"><table> | ||
| <tr> | ||
| <th>Outgoing Connections</th> | ||
| <th>Reqs/sec</th> | ||
| </tr> | ||
| {{#each outgoing}} | ||
| <tr> | ||
| <td>{{this.destination}}</td> | ||
| <td>{{this.ops}}</td> | ||
| </tr> | ||
| {{/each}} | ||
| </table></div> | ||
| </script> | ||
| <script src="/js/d3/d3.v4.min.js"></script> | ||
| <script src="/js/cola/cola.min.js"></script> | ||
| <script src="/js/handlebars/handlebars.min.js"></script> | ||
| <script src="forcegraph.js"></script> | ||
| </body> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i wonder: do we need two JSON serializations for the same graph?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was more comfortable doing the transformation in Go. I think the core Static/Dynamic graph structure is better for internal representation than the one that D3 wants, so I didn't want to change that. The
/graphendpoint could be removed, as it is not used, but It is trivial to keep it, and someone might find a way to use it.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok. fair enough.