mirror of https://github.com/grafana/grafana
[release-11.6.1] DashboardScenePage: Correct slug in self referencing data links (#103854)
DashboardScenePage: Correct slug in self referencing data links (#100048)
* switch to useLayoutEffect so queries run after url correction
* add comment
* suparate useEffects to avoid update on slug change
* add url correction for missing slug
* account for slug change during dashboard rename
* simplify fix
* add e2e test for data link without slug
* remove old comment
* remove newly added path from useEffect dependencies
(cherry picked from commit 4648ba396b
)
pull/103875/head
parent
4d278de224
commit
3bb21b8218
@ -0,0 +1,47 @@ |
|||||||
|
import testDashboard from '../dashboards/DataLinkWithoutSlugTest.json'; |
||||||
|
import { e2e } from '../utils'; |
||||||
|
|
||||||
|
describe('Dashboard with data links that have no slug', () => { |
||||||
|
beforeEach(() => { |
||||||
|
e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); |
||||||
|
}); |
||||||
|
|
||||||
|
it('Should not reload if linking to same dashboard', () => { |
||||||
|
cy.intercept({ |
||||||
|
pathname: '/api/ds/query', |
||||||
|
}).as('query'); |
||||||
|
|
||||||
|
e2e.flows.importDashboard(testDashboard, 1000, true); |
||||||
|
cy.wait('@query'); |
||||||
|
|
||||||
|
e2e.components.Panels.Panel.title('Data links without slug').should('exist'); |
||||||
|
|
||||||
|
e2e.components.DataLinksContextMenu.singleLink().contains('9yy21uzzxypg').click(); |
||||||
|
cy.contains('Loading', { timeout: 500 }) |
||||||
|
.should(() => {}) // prevent test from failing if it does not find loading
|
||||||
|
.then(throwIfLoadingFound); |
||||||
|
cy.url().should('include', urlShouldContain); |
||||||
|
|
||||||
|
e2e.components.DataLinksContextMenu.singleLink().contains('dr199bpvpcru').click(); |
||||||
|
cy.contains('Loading', { timeout: 500 }) |
||||||
|
.should(() => {}) // prevent test from failing if it does not find loading
|
||||||
|
.then(throwIfLoadingFound); |
||||||
|
cy.url().should('include', urlShouldContain); |
||||||
|
|
||||||
|
e2e.components.DataLinksContextMenu.singleLink().contains('dre33fzyxcrz').click(); |
||||||
|
cy.contains('Loading', { timeout: 500 }) |
||||||
|
.should(() => {}) // prevent test from failing if it does not find loading
|
||||||
|
.then(throwIfLoadingFound); |
||||||
|
cy.url().should('include', urlShouldContain); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
const urlShouldContain = '/d/data-link-no-slug/data-link-without-slug-test'; |
||||||
|
|
||||||
|
const throwIfLoadingFound = (el: JQuery) => { |
||||||
|
if (el.length) { |
||||||
|
// This means dashboard refreshes when clicking self-referencing data link
|
||||||
|
// that has no slug in it
|
||||||
|
throw new Error('Should not contain Loading'); |
||||||
|
} |
||||||
|
}; |
@ -0,0 +1,256 @@ |
|||||||
|
{ |
||||||
|
"annotations": { |
||||||
|
"list": [ |
||||||
|
{ |
||||||
|
"builtIn": 1, |
||||||
|
"datasource": { |
||||||
|
"type": "grafana", |
||||||
|
"uid": "-- Grafana --" |
||||||
|
}, |
||||||
|
"enable": true, |
||||||
|
"hide": true, |
||||||
|
"iconColor": "rgba(0, 211, 255, 1)", |
||||||
|
"name": "Annotations & Alerts", |
||||||
|
"type": "dashboard" |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
"editable": true, |
||||||
|
"fiscalYearStartMonth": 0, |
||||||
|
"graphTooltip": 0, |
||||||
|
"id": 135, |
||||||
|
"links": [], |
||||||
|
"panels": [ |
||||||
|
{ |
||||||
|
"datasource": { |
||||||
|
"type": "grafana-testdata-datasource", |
||||||
|
"uid": "PD8C576611E62080A" |
||||||
|
}, |
||||||
|
"fieldConfig": { |
||||||
|
"defaults": { |
||||||
|
"color": { |
||||||
|
"mode": "thresholds" |
||||||
|
}, |
||||||
|
"custom": { |
||||||
|
"align": "auto", |
||||||
|
"cellOptions": { |
||||||
|
"type": "auto" |
||||||
|
}, |
||||||
|
"inspect": false |
||||||
|
}, |
||||||
|
"links": [ |
||||||
|
{ |
||||||
|
"title": "", |
||||||
|
"url": "/d/${__dashboard.uid}?var-instance=${__data.fields.test1}&${__url_time_range}" |
||||||
|
} |
||||||
|
], |
||||||
|
"mappings": [], |
||||||
|
"thresholds": { |
||||||
|
"mode": "absolute", |
||||||
|
"steps": [ |
||||||
|
{ |
||||||
|
"color": "green" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"color": "red", |
||||||
|
"value": 80 |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
"overrides": [] |
||||||
|
}, |
||||||
|
"gridPos": { |
||||||
|
"h": 8, |
||||||
|
"w": 12, |
||||||
|
"x": 0, |
||||||
|
"y": 0 |
||||||
|
}, |
||||||
|
"id": 4, |
||||||
|
"options": { |
||||||
|
"cellHeight": "sm", |
||||||
|
"footer": { |
||||||
|
"countRows": false, |
||||||
|
"fields": "", |
||||||
|
"reducer": ["sum"], |
||||||
|
"show": false |
||||||
|
}, |
||||||
|
"showHeader": true |
||||||
|
}, |
||||||
|
"pluginVersion": "11.6.0-pre", |
||||||
|
"targets": [ |
||||||
|
{ |
||||||
|
"alias": "test1", |
||||||
|
"datasource": { |
||||||
|
"type": "grafana-testdata-datasource", |
||||||
|
"uid": "PD8C576611E62080A" |
||||||
|
}, |
||||||
|
"refId": "A", |
||||||
|
"scenarioId": "csv_metric_values", |
||||||
|
"stringInput": "9wvfgzurfzb, 9yy21uzzxypg, dr199bpvpcru, dre33fzyxcrz, gc6j7crvrcpf, u6g9zuxvxypv" |
||||||
|
} |
||||||
|
], |
||||||
|
"title": "Data links without slug", |
||||||
|
"type": "table" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"datasource": { |
||||||
|
"type": "prometheus", |
||||||
|
"uid": "gdev-prometheus" |
||||||
|
}, |
||||||
|
"fieldConfig": { |
||||||
|
"defaults": { |
||||||
|
"color": { |
||||||
|
"mode": "palette-classic" |
||||||
|
}, |
||||||
|
"custom": { |
||||||
|
"axisBorderShow": false, |
||||||
|
"axisCenteredZero": false, |
||||||
|
"axisColorMode": "text", |
||||||
|
"axisLabel": "", |
||||||
|
"axisPlacement": "auto", |
||||||
|
"barAlignment": 0, |
||||||
|
"barWidthFactor": 0.6, |
||||||
|
"drawStyle": "line", |
||||||
|
"fillOpacity": 0, |
||||||
|
"gradientMode": "none", |
||||||
|
"hideFrom": { |
||||||
|
"legend": false, |
||||||
|
"tooltip": false, |
||||||
|
"viz": false |
||||||
|
}, |
||||||
|
"insertNulls": false, |
||||||
|
"lineInterpolation": "linear", |
||||||
|
"lineWidth": 1, |
||||||
|
"pointSize": 5, |
||||||
|
"scaleDistribution": { |
||||||
|
"type": "linear" |
||||||
|
}, |
||||||
|
"showPoints": "auto", |
||||||
|
"spanNulls": false, |
||||||
|
"stacking": { |
||||||
|
"group": "A", |
||||||
|
"mode": "none" |
||||||
|
}, |
||||||
|
"thresholdsStyle": { |
||||||
|
"mode": "off" |
||||||
|
} |
||||||
|
}, |
||||||
|
"mappings": [], |
||||||
|
"thresholds": { |
||||||
|
"mode": "absolute", |
||||||
|
"steps": [ |
||||||
|
{ |
||||||
|
"color": "green" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"color": "red", |
||||||
|
"value": 80 |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
"overrides": [] |
||||||
|
}, |
||||||
|
"gridPos": { |
||||||
|
"h": 8, |
||||||
|
"w": 12, |
||||||
|
"x": 12, |
||||||
|
"y": 0 |
||||||
|
}, |
||||||
|
"id": 3, |
||||||
|
"options": { |
||||||
|
"legend": { |
||||||
|
"calcs": [], |
||||||
|
"displayMode": "list", |
||||||
|
"placement": "bottom", |
||||||
|
"showLegend": true |
||||||
|
}, |
||||||
|
"tooltip": { |
||||||
|
"hideZeros": false, |
||||||
|
"mode": "single", |
||||||
|
"sort": "none" |
||||||
|
} |
||||||
|
}, |
||||||
|
"pluginVersion": "11.6.0-pre", |
||||||
|
"targets": [ |
||||||
|
{ |
||||||
|
"datasource": { |
||||||
|
"type": "prometheus", |
||||||
|
"uid": "gdev-prometheus" |
||||||
|
}, |
||||||
|
"disableTextWrap": false, |
||||||
|
"editorMode": "builder", |
||||||
|
"expr": "counters_logins{geohash=\"$instance\"}", |
||||||
|
"fullMetaSearch": false, |
||||||
|
"includeNullMetadata": true, |
||||||
|
"instant": false, |
||||||
|
"legendFormat": "__auto", |
||||||
|
"range": true, |
||||||
|
"refId": "A", |
||||||
|
"useBackend": false |
||||||
|
} |
||||||
|
], |
||||||
|
"title": "Panel Title", |
||||||
|
"type": "timeseries" |
||||||
|
} |
||||||
|
], |
||||||
|
"preload": false, |
||||||
|
"refresh": "", |
||||||
|
"schemaVersion": 41, |
||||||
|
"tags": [], |
||||||
|
"templating": { |
||||||
|
"list": [ |
||||||
|
{ |
||||||
|
"current": { |
||||||
|
"text": "9wvfgzurfzb", |
||||||
|
"value": "9wvfgzurfzb" |
||||||
|
}, |
||||||
|
"name": "instance", |
||||||
|
"options": [ |
||||||
|
{ |
||||||
|
"selected": true, |
||||||
|
"text": "9wvfgzurfzb", |
||||||
|
"value": "9wvfgzurfzb" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"selected": false, |
||||||
|
"text": "9yy21uzzxypg", |
||||||
|
"value": "9yy21uzzxypg" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"selected": false, |
||||||
|
"text": "dr199bpvpcru", |
||||||
|
"value": "dr199bpvpcru" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"selected": false, |
||||||
|
"text": "dre33fzyxcrz", |
||||||
|
"value": "dre33fzyxcrz" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"selected": false, |
||||||
|
"text": "gc6j7crvrcpf", |
||||||
|
"value": "gc6j7crvrcpf" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"selected": false, |
||||||
|
"text": "u6g9zuxvxypv", |
||||||
|
"value": "u6g9zuxvxypv" |
||||||
|
} |
||||||
|
], |
||||||
|
"query": "9wvfgzurfzb, 9yy21uzzxypg, dr199bpvpcru, dre33fzyxcrz, gc6j7crvrcpf, u6g9zuxvxypv", |
||||||
|
"type": "custom" |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
"time": { |
||||||
|
"from": "now-1h", |
||||||
|
"to": "now" |
||||||
|
}, |
||||||
|
"timepicker": {}, |
||||||
|
"timezone": "utc", |
||||||
|
"title": "Data Link without slug test", |
||||||
|
"uid": "data-link-no-slug", |
||||||
|
"version": 3 |
||||||
|
} |
Loading…
Reference in new issue