Skip to content

Grafana Overview Interactive Tutorial #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Grafana Overview Interactive Tutorial #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
13928ac
Initial try at creating an overview.
simonprickett Sep 26, 2025
0344436
fix 1 for drilldown
Jayclifford345 Sep 29, 2025
32c45da
Add initial rule, targeting docsplugin dev instance only
tomglenn Sep 26, 2025
b857c27
Update match for rca demo
tomglenn Sep 26, 2025
1bf396e
fix 2
Jayclifford345 Sep 29, 2025
b7bfd4a
Limited stacks on intro tutorial for now.
simonprickett Sep 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 35 additions & 11 deletions explore-drilldowns-101/unstyled.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,16 @@ <h2>Section: Drilldown Metrics</h2>
<ul>
<li class="interactive"
data-reftarget="a[data-testid='data-testid Nav menu item'][href='/a/grafana-metricsdrilldown-app/drilldown']"
data-targetaction='highlight'>
data-targetaction='highlight'
data-requirements="navmenu-open,exists-reftarget">
<span class="interactive-comment">Click on the <strong>Metrics</strong> menu item in the navigation sidebar to access the drilldown interface.</span>
Navigate to the <strong>Metrics</strong> section from the left navigation menu. This is the main entry point for the Metrics Drilldown app, where you can explore all available metrics from your connected Prometheus data sources.
</li>

<li class="interactive"
data-reftarget='div[id="ds"]'
data-targetaction='highlight'
data-requirements="exists-reftarget"
data-doit='false'>
<span class="interactive-comment">This dropdown shows your currently selected <strong>Prometheus data source</strong>. Click it to switch between different data sources if you have multiple configured.</span>
Notice the <strong>Data source</strong> dropdown at the top. This shows your currently selected Prometheus data source. Click it to switch between different data sources if you have multiple configured.
Expand All @@ -35,6 +38,7 @@ <h2>Section: Drilldown Metrics</h2>
<li class="interactive"
data-reftarget='input[placeholder="Filter by label values"]'
data-targetaction='highlight'
data-requirements="exists-reftarget"
data-doit='false'>
<span class="interactive-comment">Use the filter field to narrow down metrics by <strong>label values</strong> (e.g., <code>job = "my-service"</code>).</span>
<strong>Optional step:</strong> Explore the filter functionality to narrow down metrics by specific label values. This powerful feature allows you to focus on metrics from particular services, instances, or any other labels in your environment. For example, you might filter by <code>job = "my-service"</code> to see only metrics from a specific application, or <code>instance = "localhost"</code> to focus on local metrics.
Expand All @@ -43,7 +47,8 @@ <h2>Section: Drilldown Metrics</h2>
<li class="interactive"
data-reftarget='div[data-testid="metrics-list"] div[data-testid="with-usage-data-preview-panel"]:first-child'
data-targetaction='highlight'
data-doit='false'
data-requirements="exists-reftarget"
data-doit='false'>
<span class="interactive-comment">Look at the first metric card. It shows a <strong>preview chart</strong> and a <em>Select</em> button.</span>
Examine the structure of the <strong>first metric card</strong> in the grid below. Understanding this layout will help you quickly evaluate and choose metrics across your entire environment. Each metric card is designed to give you immediate insight into the metric's behavior:
<ul>
Expand All @@ -56,19 +61,24 @@ <h2>Section: Drilldown Metrics</h2>

<li class="interactive"
data-reftarget='div[data-testid="metrics-list"] div[data-testid="with-usage-data-preview-panel"]:first-child button[data-testid*="select-action"]'
data-targetaction='highlight'>
data-targetaction='highlight'
data-requirements="exists-reftarget">
<span class="interactive-comment">The <strong>Select</strong> button loads the chosen metric into the detailed drilldown analysis interface.</span>
Click the <strong>Select</strong> button on any metric that interests you to begin the drilldown exploration. This action will load the selected metric into the drilldown interface, where you can analyze its relationships with other metrics and logs. The system will automatically find related signals based on shared labels and contextual connections.
</li>

<li class="interactive"
data-reftarget='button[data-testid="data-testid Tab Related metrics"]'
data-targetaction='highlight'>
data-targetaction='highlight'
data-requirements="exists-reftarget">
<span class="interactive-comment">The <strong>Related metrics</strong> tab shows correlated metrics that share common labels or patterns with your selected metric.</span>
Explore the <strong>Related metrics</strong> tab to discover metrics that share common labels or patterns with your selected metric. This powerful feature helps you understand the broader context of your chosen metric by showing correlated measurements from the same services, hosts, or applications. It's an essential tool for troubleshooting and performance analysis.
</li>

<li class="interactive"
data-reftarget='button[data-testid="data-testid Tab Related logs"]'
data-targetaction='highlight'>
data-targetaction='highlight'
data-requirements="exists-reftarget">
<span class="interactive-comment"><strong>Note:</strong> To use this feature, you must select a label to filter by that is present in both metrics and logs.</span>
Navigate to the <strong>Related logs</strong> tab to bridge the gap between metrics and logs. This integration allows you to correlate metric anomalies with log events from the same time period and source. By examining logs that share labels with your selected metric, you can quickly identify root causes, error patterns, and contextual information that metrics alone might not reveal.
</li>
Expand All @@ -85,13 +95,16 @@ <h2>Section: Drilldown Logs</h2>
<ul>
<li class="interactive"
data-reftarget="a[data-testid='data-testid Nav menu item'][href='/a/grafana-lokiexplore-app/explore']"
data-targetaction='highlight'>
data-targetaction='highlight'
data-requirements="navmenu-open">
<span class="interactive-comment">Click on the <strong>Logs</strong> menu item in the navigation sidebar to access the log drilldown interface.</span>
Navigate to the <strong>Logs</strong> section from the left navigation menu. This is the main entry point for the Logs Drilldown app, where you can explore and analyze log data from your connected Loki data sources with powerful correlation capabilities.
</li>

<li class="interactive"
data-reftarget='label[data-testid*="Data source"]'
data-targetaction='highlight'
data-requirements="exists-reftarget"
data-doit='false'>
<span class="interactive-comment">This dropdown shows your currently selected <strong>Loki data source</strong>. Switch between different log sources if you have multiple configured.</span>
Notice the <strong>Data source</strong> dropdown at the top. This shows your currently selected Loki data source. Click it to switch between different data sources if you have multiple log sources configured in your environment.
Expand All @@ -100,6 +113,7 @@ <h2>Section: Drilldown Logs</h2>
<li class="interactive"
data-reftarget='input[placeholder="Filter by label values"]'
data-targetaction='highlight'
data-requirements="exists-reftarget"
data-doit='false'>
<span class="interactive-comment">Use this field to filter logs by <strong>label values</strong> (e.g., <code>service_name="my-app"</code>).</span>
<strong>Optional step:</strong> Explore the filter functionality to narrow down logs by specific label values. This powerful feature allows you to focus on logs from particular services, instances, or any other labels in your log data. For example, you might filter by <code>service_name="webapp"</code> to see only logs from a specific service.
Expand All @@ -108,20 +122,24 @@ <h2>Section: Drilldown Logs</h2>
<li class="interactive"
data-reftarget='div[data-testid="uplot-main-div"]:first-of-type'
data-targetaction='highlight'
data-requirements="exists-reftarget"
data-doit='false'>
<span class="interactive-comment">This <strong>metrics panel</strong> shows log volume over time with different log levels (debug, info, etc.).</span>
Examine the <strong>metrics visualization panel</strong> above the logs. This chart shows the volume and distribution of your log data over time, broken down by log levels (debug, info, warn, error). The legend on the right displays the total count for each level, helping you quickly understand the overall health and activity patterns of your services.
</li>

<li class="interactive"
data-reftarget='a[data-testid="data-testid button-select-service"]:first-of-type'
data-targetaction='highlight'>
data-targetaction='highlight'
data-requirements="exists-reftarget">
<span class="interactive-comment">The <strong>Show logs</strong> button opens a detailed log exploration view for the selected service.</span>
Click the <strong>Show logs</strong> button on any service to drill down into detailed log exploration for that specific service. This action will navigate you to a focused view where you can analyze individual log entries, search through messages, and correlate with metrics data.
</li>

<li class="interactive"
data-reftarget='section[data-testid*="data-testid Panel header"]:first-of-type'
data-targetaction='highlight'
data-requirements="exists-reftarget"
data-doit='false'>
<span class="interactive-comment">This <strong>log volume visualization</strong> shows log volume over time with different log levels (debug, info, etc.).</span>
Examine the <strong>log volume visualization panel</strong> that displays metrics about your log data. This chart shows the volume and distribution of your log data over time, broken down by log levels (debug, info, warn, error). The legend on the right displays the total count for each level, helping you quickly understand the overall activity patterns and health of your services.
Expand All @@ -130,6 +148,7 @@ <h2>Section: Drilldown Logs</h2>
<li class="interactive"
data-reftarget='section[data-testid*="Panel header Logs"]'
data-targetaction='highlight'
data-requirements="exists-reftarget"
data-doit='false'>
<span class="interactive-comment">This <strong>logs content area</strong> contains the actual log entries with timestamps, levels, and formatted messages.</span>
Examine the structure of the <strong>actual log entries area</strong> below the volume chart. This section displays individual log entries in chronological order, each showing:
Expand All @@ -143,27 +162,32 @@ <h2>Section: Drilldown Logs</h2>

<li class="interactive"
data-reftarget='button[aria-label="Log menu"]:first-of-type'
data-targetaction='highlight'>
data-targetaction='highlight'
data-requirements="exists-reftarget">
<span class="interactive-comment">The <strong>log menu button</strong> (three dots) provides quick access to log-specific actions like copying, filtering, and context viewing.</span>
Click the <strong>menu button</strong> (three dots) next to any log entry to access additional actions like copying the log line, viewing context, or adding filters based on that specific log entry. This provides quick access to common log analysis operations.
</li>

<li class="interactive"
data-reftarget='a[data-testid="data-testid tab-labels"]'
data-targetaction='highlight'>
data-targetaction='highlight'
data-requirements="exists-reftarget">
<span class="interactive-comment">The <strong>Labels</strong> tab shows all labels stored in Loki for this service with their counts.</span>
Navigate to the <strong>Labels</strong> tab to explore the labels (key-value pairs) associated with your log data stored in Loki. This view shows you all the available labels for the current service, helping you understand the dimensional data structure and discover additional filtering possibilities for your log queries.
</li>

<li class="interactive"
data-reftarget='a[data-testid="data-testid tab-fields"]'
data-targetaction='highlight'>
data-targetaction='highlight'
data-requirements="exists-reftarget">
<span class="interactive-comment">The <strong>Fields</strong> tab displays structured metadata and extracted attributes from log lines.</span>
Explore the <strong>Fields</strong> tab to analyze structured metadata and other extracted attributes from your log lines. This powerful feature automatically parses structured logs (JSON, logfmt, etc.) and presents field statistics, top values, and data distributions, making it easy to understand patterns in your application data and identify trends or outliers.
</li>

<li class="interactive"
data-reftarget='a[data-testid="data-testid tab-patterns"]'
data-targetaction='highlight'>
data-targetaction='highlight'
data-requirements="exists-reftarget">
<span class="interactive-comment">The <strong>Patterns</strong> tab automatically detects common structural patterns in your log messages.</span>
Check out the <strong>Patterns</strong> tab to discover common structural patterns in your log lines. This intelligent analysis groups similar log message formats together, making it easier to identify recurring templates, spot anomalies, and understand the typical log output patterns from your applications without manual parsing or regex creation.
</li>
Expand Down
Loading