IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Docs: Update node graph docs (#35196)

Browse Source 
* Update node graph docs

* Apply suggestions from code review

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>
Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update image links

* Update wording

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>
Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>
This commit is contained in:
Andrej Ocenas 2021-06-04 10:00:02 +02:00 committed by GitHub
parent 87c10e9504
commit 1f16fac8d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
docs/sources/explore/trace-integration.md
View File

@ -18,7 +18,7 @@ Supported data sources are:
For information on how to configure queries for the data sources listed above, refer to the documentation for specific data source.
{{< figure src="/static/img/docs/v70/explore-trace-view-full.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the trace view" >}}
{{< figure src="/static/img/docs/explore/explore-trace-view-full-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the trace view" >}}
##### Header
@ -57,11 +57,17 @@ Clicking anywhere on the span row shows span details.
- Process metadata: Metadata about the process that logged this span.
- Logs: List of logs logged by this span and associated key values. In case of Zipkin logs section shows Zipkin annotations.
##### Node graph
You can optionally expand the node graph for the displayed trace. Depending on the data source, this can show spans of the trace as nodes in the graph, or as some additional context like service map based on the current trace.
![Node graph](/static/img/docs/explore/explore-trace-view-node-graph-8-0.png "Node graph")
##### Trace to logs
> **Note:** Available in Grafana 7.4 and later versions.
You can navigate from a span in a trace view directly to logs relevant for that span. This is available for Tempo, Jaeger and Zipkin data source at this moment. their relevant documentation for instruction how to configure this feature.
You can navigate from a span in a trace view directly to logs relevant for that span. This is available for Tempo, Jaeger, and Zipkin data sources at this moment. Refer to their relevant documentation for instructions on how to configure this feature.
{{< figure src="/static/img/docs/explore/trace-to-log-7-4.png" class="docs-image--no-shadow" max-width= "600px" caption="Screenshot of the trace view in Explore with icon next to the spans" >}}
@ -77,24 +83,24 @@ Data source needs to return data frame and set `frame.meta.preferredVisualisatio
Required fields:
| Field name | Type | Description |
|------------|---------|-------------|
| traceID | string | Identifier for the entire trace. There should be only one trace in the data frame. |
| spanID | string | Identifier for the current span. SpanIDs should be unique per trace. |
| parentSpanID | string | SpanID of the parent span to create child parent relationship in the trace view. Can be `undefined` for root span without parent. |
| serviceName | string | Name of the service this span is part of. |
| serviceTags | TraceKeyValuePair[] | List of tags relevant for the service. |
| startTime | number | Start time of the span in millisecond epoch time. |
| duration | number | Duration of the span in milliseconds. |
| Field name | Type | Description |
| ------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| traceID | string | Identifier for the entire trace. There should be only one trace in the data frame. |
| spanID | string | Identifier for the current span. SpanIDs should be unique per trace. |
| parentSpanID | string | SpanID of the parent span to create child parent relationship in the trace view. Can be `undefined` for root span without a parent. |
| serviceName | string | Name of the service this span is part of. |
| serviceTags | TraceKeyValuePair[] | List of tags relevant for the service. |
| startTime | number | Start time of the span in millisecond epoch time. |
| duration | number | Duration of the span in milliseconds. |
Optional fields:
| Field name | Type | Description |
|------------|---------|-------------|
| logs | TraceLog[] | List of logs associated with the current span. |
| tags | TraceKeyValuePair[] | List of tags associated with the current span. |
| warnings | string[] | List of warnings associated with the current span. |
| stackTraces | string[] | List of stack traces associated with the current span. |
| errorIconColor | string | Color of the error icon in case span is tagged with `error: true`. |
| Field name | Type | Description |
| -------------- | ------------------- | ------------------------------------------------------------------ |
| logs | TraceLog[] | List of logs associated with the current span. |
| tags | TraceKeyValuePair[] | List of tags associated with the current span. |
| warnings | string[] | List of warnings associated with the current span. |
| stackTraces | string[] | List of stack traces associated with the current span. |
| errorIconColor | string | Color of the error icon in case span is tagged with `error: true`. |
For details about the types see [TraceSpanRow](https://grafana.com/docs/grafana/latest/packages_api/data/tracespanrow/), [TraceKeyValuePair](https://grafana.com/docs/grafana/latest/packages_api/data/tracekeyvaluepair/) and [TraceLog](https://grafana.com/docs/grafana/latest/packages_api/data/tracelog/)

36
docs/sources/panels/visualizations/node-graph.md
View File

@ -8,13 +8,13 @@ weight = 850
> **Note:** This panel is currently in beta. Expect changes in future releases.
The _Node graph_ can visualize directed graphs or networks. It uses directed force layout to effectively position the nodes so it can help with displaying complex infrastructure maps, hierarchies or execution diagrams.
The _Node graph_ can visualize directed graphs or networks. It uses a directed force layout to effectively position the nodes, so it can display complex infrastructure maps, hierarchies, or execution diagrams.
![Node graph panel](/static/img/docs/node-graph/node-graph-7-4.png "Node graph")
![Node graph panel](/static/img/docs/node-graph/node-graph-8-0.png "Node graph")
## Data requirements
The Node graph panel requires specific shape of the data to be able to display it's nodes and edges. This means not every data source or query can be visualized in this panel. If you want to use this as a data source developer see the section about data API.
The Node graph panel requires specific shape of the data to be able to display its nodes and edges. This means not every data source or query can be visualized in this panel. If you want to use this as a data source developer see the section about data API.
The Node graph visualization consists of _nodes_ and _edges_.
@ -25,11 +25,11 @@ Both nodes and edges can have associated metadata or statistics. The data source
### Nodes
> **Note:** At this moment node graph can show only 1,500 nodes. If this limit is crossed a warning will be visible in upper right corner.
> **Note:** Node graph can show only 1,500 nodes. If this limit is crossed a warning will be visible in upper right corner, and some nodes will be hidden. You can expand hidden parts of the graph by clicking on the "Hidden nodes" markers in the graph.
Usually, nodes show two statistical values inside the node and two identifiers just below the node, usually name and type. Nodes can also show another set of values as a color circle around the node, with sections of different color represents different values that should add up to 1.
For example you can have percentage of errors represented by red portion of the circle. Additional details can be displayed in a context menu when which is displayed when you click on the node. There also can be additional links in the context menu that can target either other parts of Grafana or any external link.
For example, you can have the percentage of errors represented by a red portion of the circle. Additional details can be displayed in a context menu which is displayed when you click on the node. There also can be additional links in the context menu that can target either other parts of Grafana or any external link.
![Node graph navigation](/static/img/docs/node-graph/node-graph-navigation-7-4.gif "Node graph navigation")
@ -45,17 +45,37 @@ You can pan and zoom in or out the node graph.
### Pan
You can pan the view by clicking outside of any node or edge and dragging your mouse.
You can pan the view by clicking outside any node or edge and dragging your mouse.
### Zoom in or out
Use the buttons on the upper left corner or use the mouse wheel, touch pad scroll, together with either Ctrl or Cmd key to zoom in or out.
Use the buttons in the upper left corner or use the mouse wheel, touchpad scroll, together with either Ctrl or Cmd key to zoom in or out.
### Explore hidden nodes
The number of nodes shown at a given time is limited to maintain a reasonable visualization performance. Nodes that are not currently visible are hidden behind clickable markers that show an approximate number of hidden nodes that are connected by a particular edge. You can click on the marker to expand the graph around that node.
![Node graph exploration](/static/img/docs/node-graph/node-graph-exploration-8-0.png "Node graph exploration")
### Grid view
You can switch to the grid view to have a better overview of the most interesting nodes in the graph. Grid view shows nodes in a grid without edges and can be sorted by stats shown inside the node or by stats represented by the a colored border of the nodes.
![Node graph grid](/static/img/docs/node-graph/node-graph-grid-8-0.png "Node graph grid")
To sort the nodes, click on the stats inside the legend. The marker next to the stat name shows which stat is currently used for sorting and sorting direction.
![Node graph legend](/static/img/docs/node-graph/node-graph-legend-8-0.png "Node graph legend")
Click on the node and select "Show in Graph layout" option to switch back to graph layout and focus on the selected node, to show it in context of the full graph.
![Node graph grid to default](/static/img/docs/node-graph/node-graph-grid-to-default-8-0.png "Node graph grid to default")
## Data API
This visualization needs a specific shape of the data to be returned from the data source in order to correctly display it.
Data source needs to return two data frames, one for nodes and one for edges and you also have to set `frame.meta.preferredVisualisationType = 'nodeGraph'` on both data frames.
Data source needs to return two data frames, one for nodes and one for edges, and you also have to set `frame.meta.preferredVisualisationType = 'nodeGraph'` on both data frames if you want them to be automatically shown in node graph in Explore.
### Node parameters