Skip to content

Commit f28d195

Browse files
committed
Merge branch 'main' of github.com:grafana/metrics-drilldown into update-grafana-create-plugin-5.19.1
2 parents e9c9ea8 + 7f3d87c commit f28d195

File tree

192 files changed

+7155
-6665
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

192 files changed

+7155
-6665
lines changed

.config/webpack/webpack.config.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@ const config = async (env): Promise<Configuration> => {
6868
'redux',
6969
'rxjs',
7070
'react-router',
71-
'react-router-dom',
7271
'd3',
7372
'angular',
7473
/^@grafana\/ui/i,

.cprc.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"features": {
33
"bundleGrafanaUI": false,
4-
"useReactRouterV6": false
4+
"useReactRouterV6": true
55
}
66
}
Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
---
2+
description:
3+
globs: *.tsx,*.test.tsx,*.ts,*.test.ts
4+
alwaysApply: false
5+
---
6+
# Prefer using `tsqtsq` to craft PromQL expressions
7+
8+
When building PromQL expressions, we should use `tsqtsq` instead of building expressions via string interpolation.
9+
10+
## `tsqtsq` Overview
11+
12+
`tsqtsq` is a TypeScript library designed to make working with PromQL (Prometheus Query Language) more maintainable and type-safe. It provides a structured way to build PromQL queries programmatically, avoiding string interpolation and making queries more readable and maintainable.
13+
14+
## Core Concepts
15+
16+
### 1. Expression Class
17+
18+
The `Expression` class is the foundation for building metric queries. It allows you to:
19+
20+
- Define metric names
21+
- Add label selectors with specific operators
22+
- Set default operators and selectors
23+
- Compose complex metric expressions
24+
25+
```typescript
26+
new Expression({
27+
metric: 'test_metric',
28+
values: {
29+
arg1: 'foo',
30+
arg2: 'bar',
31+
},
32+
defaultOperator: MatchingOperator.regexMatch,
33+
defaultSelectors: [{ label: 'baz', operator: MatchingOperator.notEqual, value: '' }],
34+
});
35+
```
36+
37+
### 2. Label Selectors
38+
39+
The library supports four types of label matching operators:
40+
41+
- `=` (equal)
42+
- `!=` (not equal)
43+
- `=~` (regex match)
44+
- `!~` (not regex match)
45+
46+
### 3. PromQL Functions
47+
48+
The library provides a comprehensive set of PromQL functions through the `promql` object:
49+
50+
#### Aggregation Functions
51+
52+
- `sum`, `min`, `max`, `avg`, `group`, `count`, `stddev`, `stdvar`
53+
- `count_values`, `bottomk`, `topk`, `quantile`
54+
55+
#### Time-based Functions
56+
57+
- `rate`, `increase`
58+
- `*_over_time` functions (avg, count, last, max, min, present, stddev, stdvar, sum)
59+
60+
#### Label Manipulation
61+
62+
- `label_replace`
63+
- `label_join`
64+
65+
#### Logical Operations
66+
67+
- `and`, `or`, `unless`
68+
69+
#### Time Offsets
70+
71+
- Complex time offset support with units (years, weeks, days, hours, minutes, seconds, milliseconds)
72+
73+
## Usage Examples
74+
75+
### Basic Metric Query
76+
77+
```typescript
78+
import { promql, Expression, MatchingOperator } from 'tsqtsq';
79+
80+
// Create a metric expression
81+
const expr = new Expression({
82+
metric: 'http_requests_total',
83+
values: {
84+
status: '200',
85+
method: 'GET',
86+
},
87+
defaultOperator: MatchingOperator.equal,
88+
}).toString();
89+
90+
// Use with aggregation
91+
const query = promql.sum({
92+
expr,
93+
by: ['method', 'status'],
94+
});
95+
```
96+
97+
### Time-based Queries
98+
99+
```typescript
100+
// Rate calculation
101+
const rateQuery = promql.rate({
102+
expr: 'http_requests_total{status="200"}',
103+
interval: '5m',
104+
});
105+
106+
// Aggregation over time
107+
const sumOverTime = promql.sum_over_time({
108+
expr: 'http_requests_total',
109+
range: '1h',
110+
});
111+
```
112+
113+
### Label Manipulation
114+
115+
```typescript
116+
// Label replacement
117+
const replaced = promql.label_replace({
118+
expr: 'http_requests_total',
119+
newLabel: 'service',
120+
existingLabel: 'instance',
121+
replacement: '$1',
122+
regex: '(.*)',
123+
});
124+
125+
// Label joining
126+
const joined = promql.label_join({
127+
expr: 'http_requests_total',
128+
newLabel: 'full_path',
129+
labels: ['path', 'method'],
130+
separator: '_',
131+
});
132+
```
133+
134+
## Best Practices
135+
136+
1. **Use Expression Class for Metric Selection**
137+
138+
- Prefer using the `Expression` class over string literals for metric selection
139+
- This provides type safety and better IDE support
140+
141+
2. **Leverage Default Operators**
142+
143+
- Set appropriate default operators for your use case
144+
- This reduces repetition and makes queries more consistent
145+
146+
3. **Compose Queries**
147+
148+
- Build complex queries by combining multiple `promql` functions
149+
- Use the result of one operation as input to another
150+
151+
4. **Use Named Parameters**
152+
- Always use named parameters for clarity
153+
- This makes the code more maintainable and self-documenting
154+
155+
## Type Safety
156+
157+
The library provides strong TypeScript support with:
158+
159+
- Enums for operators
160+
- Interfaces for all function parameters
161+
- Type checking for label selectors
162+
- Validation for time units
163+
164+
## Common Use Cases
165+
166+
1. **Building Dashboard Queries**
167+
168+
- Compose complex queries for Grafana dashboards
169+
- Ensure consistency across multiple panels
170+
171+
2. **Alert Rule Creation**
172+
173+
- Build type-safe alert conditions
174+
- Maintain consistent query patterns
175+
176+
3. **Query Refactoring**
177+
- Easily update query patterns across multiple places
178+
- Maintain consistency when changing metric names or labels
179+
180+
## Limitations
181+
182+
1. **Dynamic Query Building**
183+
184+
- While the library supports complex queries, extremely dynamic queries might still require some string manipulation
185+
186+
2. **PromQL Version Support**
187+
188+
- The library supports standard PromQL features
189+
- Some newer or experimental PromQL features might not be directly supported
190+
191+
3. **Performance**
192+
- The library adds a small overhead compared to direct string manipulation
193+
- This is generally negligible for most use cases
194+
195+
## Integration Tips
196+
197+
1. **With Grafana**
198+
199+
- Use the library to generate queries for Grafana dashboards
200+
- Ensure consistent query patterns across panels
201+
202+
2. **With Alerting Systems**
203+
204+
- Generate alert conditions programmatically
205+
- Maintain type safety in alert definitions
206+
207+
3. **With Custom Applications**
208+
- Use the library to build queries for custom monitoring applications
209+
- Ensure consistent query patterns across the application
210+

.github/workflows/bundle-stats-create.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ name: create bundle stats
22

33
on:
44
workflow_dispatch:
5+
schedule:
6+
- cron: '0 0 * * *' # Run once per day at midnight UTC
57
push:
68
branches:
79
- main

.github/workflows/ci.yml

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ on:
44
workflow_dispatch:
55
inputs:
66
skip-grafana-dev-image:
7+
description: Skip the grafana dev image e2e test
78
required: false
89
type: boolean
910
default: false
@@ -19,5 +20,11 @@ jobs:
1920
CI:
2021
uses: grafana/plugin-ci-workflows/.github/workflows/ci.yml@main
2122
with:
22-
upload-playwright-artifacts: true # IMPORTANT: we must ensure there are no unmasked secrets in the E2E tests
23+
run-playwright: false
24+
run-playwright-docker: true
2325
run-playwright-with-skip-grafana-dev-image: ${{ inputs.skip-grafana-dev-image || false }}
26+
upload-playwright-artifacts: true
27+
playwright-report-path: e2e/test-reports/
28+
playwright-docker-compose-file: e2e/docker/docker-compose.e2e.yaml
29+
playwright-e2e-docker-compose-file: e2e/docker/docker-compose.playwright.yaml
30+
playwright-grafana-url: http://localhost:3001

.github/workflows/playwright-published.yml

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,12 @@ jobs:
6363

6464
playwright:
6565
needs: build
66-
uses: grafana/plugin-ci-workflows/.github/workflows/playwright.yml@main
66+
uses: grafana/plugin-ci-workflows/.github/workflows/playwright-docker.yml@main
6767
with:
6868
id: ${{ github.event.repository.name }}
6969
version: ${{ needs.build.outputs.plugin-version }}
7070
upload-artifacts: true
71+
report-path: e2e/test-reports/
72+
grafana-compose-file: e2e/docker/docker-compose.e2e.yaml
73+
playwright-compose-file: e2e/docker/docker-compose.playwright.yaml
74+
grafana-url: http://localhost:3001

.github/workflows/publish.yml

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ description: Upload new plugin artifact to GCS & publish to plugin catalog
66
# 2. Get your feature PR approved
77
# 3. Create a separate version bump PR:
88
# - git switch -c bump-version-vX.Y.Z
9+
# - update CHANGELOG.md with a link to the forthcoming tag's release notes
910
# - npm version <type> # this creates the commit and tag (see https://docs.npmjs.com/cli/commands/npm-version for <type> options, e.g. patch, minor, major, prerelease, etc.)
10-
# - git push origin bump-version-vX.Y.Z --tags
11-
# - update CHANGELOG.md with a link to the tag's release notes
11+
# - git push origin bump-version-vX.Y.Z --follow-tags
1212
# 4. Get version bump PR approved
1313
# 5. Merge feature PR first
1414
# 6. Merge version bump PR
@@ -29,8 +29,8 @@ on:
2929
type: boolean
3030
default: false
3131
push:
32-
tags:
33-
- 'v*' # Run workflow on version tags, e.g. v1.0.0.
32+
branches:
33+
- main
3434

3535
permissions:
3636
contents: 'write'
@@ -44,12 +44,18 @@ jobs:
4444
if: |
4545
github.repository == 'grafana/metrics-drilldown' &&
4646
(
47-
(github.event_name == 'push' && contains(github.ref, 'refs/tags/v')) ||
48-
(github.event_name == 'workflow_dispatch' && (github.ref == 'refs/heads/main' || contains(github.ref, 'refs/tags/v')))
47+
(github.event_name == 'push' && github.ref == 'refs/heads/main' && contains(github.event.head_commit.message, 'npm version')) ||
48+
(github.event_name == 'workflow_dispatch' && (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')))
4949
)
5050
uses: grafana/plugin-ci-workflows/.github/workflows/cd.yml@main
5151
with:
5252
environment: ${{ inputs.environment || 'prod' }}
53-
upload-playwright-artifacts: true # IMPORTANT: we must ensure there are no unmasked secrets in the E2E tests
5453
attestation: true # this guarantees that the plugin was built from the source code provided in the release
54+
run-playwright: false
55+
run-playwright-docker: true
56+
upload-playwright-artifacts: true # IMPORTANT: we must ensure there are no unmasked secrets in the E2E tests
5557
run-playwright-with-skip-grafana-dev-image: ${{ inputs.skip-grafana-dev-image || false }}
58+
playwright-report-path: e2e/test-reports/
59+
playwright-docker-compose-file: e2e/docker/docker-compose.e2e.yaml
60+
playwright-e2e-docker-compose-file: e2e/docker/docker-compose.playwright.yaml
61+
playwright-grafana-url: http://localhost:3001

.gitignore

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,7 @@ artifacts/
4747
work/
4848
ci/
4949

50-
# e2e test directories
51-
/test-results/
52-
/playwright-report/
53-
/blob-report/
54-
/playwright/.cache/
55-
/playwright/.auth/
50+
5651

5752
# Editor
5853
.cursor
@@ -63,3 +58,12 @@ ci/
6358

6459
# MacOS
6560
.DS_Store
61+
62+
# e2e test directories
63+
e2e/test-results/
64+
e2e/test-reports/
65+
playwright
66+
67+
e2e/tests/**/*darwin.png
68+
e2e/provisioning/prometheus/data*
69+
!e2e/provisioning/prometheus/data.zip

CHANGELOG.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
# Changelog
22

3+
## 1.0.0-8
4+
5+
See <https://github.com/grafana/metrics-drilldown/releases/tag/v1.0.0-8>
6+
7+
## 1.0.0-7
8+
9+
See <https://github.com/grafana/metrics-drilldown/releases/tag/v1.0.0-7>
10+
11+
## 1.0.0-6
12+
13+
See <https://github.com/grafana/metrics-drilldown/releases/tag/v1.0.0-6>
14+
315
## 1.0.0-5
416

517
See <https://github.com/grafana/metrics-drilldown/releases/tag/v1.0.0-5>

README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,15 @@ Begin by starting the Grafana server in a separate terminal:
3535
npm run server
3636
```
3737

38-
This will start the Grafana server on port 3000. If you'd like to use a different port, follow the instructions in the [Configuration](#configuration) section below.
38+
This will start the Grafana server on port 3001. If you'd like to use a different port, follow the instructions in the [Configuration](#configuration) section below.
3939

4040
Then, run the plugin in watch mode:
4141

4242
```bash
4343
npm run dev
4444
```
4545

46-
You can now visit `http://localhost:3000/a/grafana-metricsdrilldown-app` to use the local version of the Grafana Metrics Drilldown app.
46+
You can now visit `http://localhost:3001/a/grafana-metricsdrilldown-app` to use the local version of the Grafana Metrics Drilldown app.
4747

4848
#### Running tests
4949

0 commit comments

Comments
 (0)