diff --git a/devenv/dev-dashboards/panel-common/linked-viz.json b/devenv/dev-dashboards/panel-common/linked-viz.json
new file mode 100644
index 00000000000..3f81d08e09b
--- /dev/null
+++ b/devenv/dev-dashboards/panel-common/linked-viz.json
@@ -0,0 +1,1194 @@
+{
+ "annotations": {
+ "list": [
+ {
+ "builtIn": 1,
+ "datasource": "-- Grafana --",
+ "enable": true,
+ "hide": true,
+ "iconColor": "rgba(0, 211, 255, 1)",
+ "name": "Annotations & Alerts",
+ "type": "dashboard"
+ }
+ ]
+ },
+ "editable": true,
+ "gnetId": null,
+ "graphTooltip": 0,
+ "id": 321,
+ "links": [],
+ "panels": [
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 0,
+ "y": 0
+ },
+ "id": 3,
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Go to grafana.com",
+ "url": "http://grafana.com"
+ }
+ ],
+ "options": {
+ "colorMode": "value",
+ "graphMode": "area",
+ "justifyMode": "auto",
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "values": false
+ },
+ "text": {},
+ "textMode": "auto"
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "No data link",
+ "type": "stat"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Data link",
+ "url": "http://www.wp.pl"
+ }
+ ],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 8,
+ "y": 0
+ },
+ "id": 2,
+ "links": [
+ {
+ "title": "asdasd",
+ "url": "www.wp.pl"
+ }
+ ],
+ "options": {
+ "colorMode": "value",
+ "graphMode": "area",
+ "justifyMode": "auto",
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "values": false
+ },
+ "text": {},
+ "textMode": "auto"
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "Single data link",
+ "type": "stat"
+ },
+ {
+ "datasource": null,
+ "description": "",
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Wp",
+ "url": "http://www.wp.pl"
+ },
+ {
+ "targetBlank": true,
+ "title": "Onet",
+ "url": "http://www.onet.pl"
+ }
+ ],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 16,
+ "y": 0
+ },
+ "id": 4,
+ "links": [
+ {
+ "title": "asdasd",
+ "url": "www.wp.pl"
+ }
+ ],
+ "options": {
+ "colorMode": "value",
+ "graphMode": "area",
+ "justifyMode": "auto",
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "values": false
+ },
+ "text": {},
+ "textMode": "auto"
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "Multiple data links",
+ "type": "stat"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 0,
+ "y": 6
+ },
+ "id": 12,
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Go to grafana.com",
+ "url": "http://grafana.com"
+ }
+ ],
+ "options": {
+ "colorMode": "value",
+ "graphMode": "area",
+ "justifyMode": "auto",
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "first"
+ ],
+ "fields": "",
+ "limit": 2,
+ "values": true
+ },
+ "text": {},
+ "textMode": "auto"
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "No data link",
+ "type": "stat"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Data link",
+ "url": "http://www.wp.pl"
+ }
+ ],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 8,
+ "y": 6
+ },
+ "id": 13,
+ "links": [
+ {
+ "title": "asdasd",
+ "url": "www.wp.pl"
+ }
+ ],
+ "options": {
+ "colorMode": "value",
+ "graphMode": "area",
+ "justifyMode": "auto",
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "limit": 2,
+ "values": true
+ },
+ "text": {},
+ "textMode": "auto"
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "Single data link",
+ "type": "stat"
+ },
+ {
+ "datasource": null,
+ "description": "",
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Wp",
+ "url": "http://www.wp.pl"
+ },
+ {
+ "targetBlank": true,
+ "title": "Onet",
+ "url": "http://www.onet.pl"
+ }
+ ],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 16,
+ "y": 6
+ },
+ "id": 14,
+ "links": [
+ {
+ "title": "asdasd",
+ "url": "www.wp.pl"
+ }
+ ],
+ "options": {
+ "colorMode": "value",
+ "graphMode": "area",
+ "justifyMode": "auto",
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "limit": 2,
+ "values": true
+ },
+ "text": {},
+ "textMode": "auto"
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "Multiple data links",
+ "type": "stat"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 0,
+ "y": 12
+ },
+ "id": 8,
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Go to grafana.com",
+ "url": "http://grafana.com"
+ }
+ ],
+ "options": {
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "values": false
+ },
+ "showThresholdLabels": false,
+ "showThresholdMarkers": true,
+ "text": {}
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "No data link",
+ "type": "gauge"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Data link",
+ "url": "http://www.wp.pl"
+ }
+ ],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 8,
+ "y": 12
+ },
+ "id": 6,
+ "links": [
+ {
+ "title": "asdasd",
+ "url": "www.wp.pl"
+ }
+ ],
+ "options": {
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "values": false
+ },
+ "showThresholdLabels": false,
+ "showThresholdMarkers": true,
+ "text": {}
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "Single data link",
+ "type": "gauge"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Wp",
+ "url": "http://www.wp.pl"
+ },
+ {
+ "targetBlank": true,
+ "title": "Onet",
+ "url": "http://www.onet.pl"
+ }
+ ],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 16,
+ "y": 12
+ },
+ "id": 7,
+ "links": [
+ {
+ "title": "asdasd",
+ "url": "www.wp.pl"
+ }
+ ],
+ "options": {
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "values": false
+ },
+ "showThresholdLabels": false,
+ "showThresholdMarkers": true,
+ "text": {}
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "Multiple data links",
+ "type": "gauge"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 0,
+ "y": 18
+ },
+ "id": 15,
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Go to grafana.com",
+ "url": "http://grafana.com"
+ }
+ ],
+ "options": {
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "limit": 2,
+ "values": true
+ },
+ "showThresholdLabels": false,
+ "showThresholdMarkers": true,
+ "text": {}
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "No data link",
+ "type": "gauge"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Data link",
+ "url": "http://www.wp.pl"
+ }
+ ],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 8,
+ "y": 18
+ },
+ "id": 16,
+ "links": [
+ {
+ "title": "asdasd",
+ "url": "www.wp.pl"
+ }
+ ],
+ "options": {
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "limit": 2,
+ "values": true
+ },
+ "showThresholdLabels": false,
+ "showThresholdMarkers": true,
+ "text": {}
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "Single data link",
+ "type": "gauge"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Wp",
+ "url": "http://www.wp.pl"
+ },
+ {
+ "targetBlank": true,
+ "title": "Onet",
+ "url": "http://www.onet.pl"
+ }
+ ],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 16,
+ "y": 18
+ },
+ "id": 17,
+ "links": [
+ {
+ "title": "asdasd",
+ "url": "www.wp.pl"
+ }
+ ],
+ "options": {
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "limit": 2,
+ "values": true
+ },
+ "showThresholdLabels": false,
+ "showThresholdMarkers": true,
+ "text": {}
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "Multiple data links",
+ "type": "gauge"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 0,
+ "y": 24
+ },
+ "id": 18,
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Go to grafana.com",
+ "url": "http://grafana.com"
+ }
+ ],
+ "options": {
+ "displayMode": "gradient",
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "values": false
+ },
+ "showUnfilled": true,
+ "text": {}
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "No data link",
+ "type": "bargauge"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Data link",
+ "url": "http://www.wp.pl"
+ }
+ ],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 8,
+ "y": 24
+ },
+ "id": 10,
+ "links": [
+ {
+ "title": "asdasd",
+ "url": "www.wp.pl"
+ }
+ ],
+ "options": {
+ "displayMode": "gradient",
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "values": false
+ },
+ "showUnfilled": true,
+ "text": {}
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "Single data link",
+ "type": "bargauge"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Wp",
+ "url": "http://www.wp.pl"
+ },
+ {
+ "targetBlank": true,
+ "title": "Onet",
+ "url": "http://www.onet.pl"
+ }
+ ],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 16,
+ "y": 24
+ },
+ "id": 11,
+ "links": [
+ {
+ "title": "asdasd",
+ "url": "www.wp.pl"
+ }
+ ],
+ "options": {
+ "displayMode": "gradient",
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "values": false
+ },
+ "showUnfilled": true,
+ "text": {}
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "Multiple data links",
+ "type": "bargauge"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 0,
+ "y": 30
+ },
+ "id": 9,
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Go to grafana.com",
+ "url": "http://grafana.com"
+ }
+ ],
+ "options": {
+ "displayMode": "gradient",
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "limit": 2,
+ "values": true
+ },
+ "showUnfilled": true,
+ "text": {}
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "No data link",
+ "type": "bargauge"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Data link",
+ "url": "http://www.wp.pl"
+ }
+ ],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 8,
+ "y": 30
+ },
+ "id": 19,
+ "links": [
+ {
+ "title": "asdasd",
+ "url": "www.wp.pl"
+ }
+ ],
+ "options": {
+ "displayMode": "gradient",
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "limit": 2,
+ "values": true
+ },
+ "showUnfilled": true,
+ "text": {}
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "Single data link",
+ "type": "bargauge"
+ },
+ {
+ "datasource": null,
+ "fieldConfig": {
+ "defaults": {
+ "color": {
+ "mode": "thresholds"
+ },
+ "links": [
+ {
+ "targetBlank": true,
+ "title": "Wp",
+ "url": "http://www.wp.pl"
+ },
+ {
+ "targetBlank": true,
+ "title": "Onet",
+ "url": "http://www.onet.pl"
+ }
+ ],
+ "mappings": [],
+ "thresholds": {
+ "mode": "absolute",
+ "steps": [
+ {
+ "color": "green",
+ "value": null
+ },
+ {
+ "color": "red",
+ "value": 80
+ }
+ ]
+ }
+ },
+ "overrides": []
+ },
+ "gridPos": {
+ "h": 6,
+ "w": 8,
+ "x": 16,
+ "y": 30
+ },
+ "id": 20,
+ "links": [
+ {
+ "title": "asdasd",
+ "url": "www.wp.pl"
+ }
+ ],
+ "options": {
+ "displayMode": "gradient",
+ "orientation": "auto",
+ "reduceOptions": {
+ "calcs": [
+ "lastNotNull"
+ ],
+ "fields": "",
+ "limit": 2,
+ "values": true
+ },
+ "showUnfilled": true,
+ "text": {}
+ },
+ "pluginVersion": "7.5.0-pre",
+ "timeFrom": null,
+ "timeShift": null,
+ "title": "Multiple data links",
+ "type": "bargauge"
+ }
+ ],
+ "schemaVersion": 27,
+ "style": "dark",
+ "tags": ["gdev"],
+ "templating": {
+ "list": []
+ },
+ "time": {
+ "from": "now-6h",
+ "to": "now"
+ },
+ "timepicker": {},
+ "timezone": "",
+ "title": "Panel & data links in stat, gauge and bargauge",
+ "uid": "O1Mi-z8Gz",
+ "version": 19
+}
diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index 55f3641a015..53da452c2fb 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -181,4 +181,7 @@ export const Components = {
CallToActionCard: {
button: (name: string) => `Call to action button ${name}`,
},
+ DataLinksContextMenu: {
+ singleLink: 'Data link',
+ },
};
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.test.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.test.tsx
new file mode 100644
index 00000000000..9ac75b37da0
--- /dev/null
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.test.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataLinksContextMenu } from './DataLinksContextMenu';
+import { selectors } from '@grafana/e2e-selectors';
+
+const fakeAriaLabel = 'fake aria label';
+describe('DataLinksContextMenu', () => {
+ it('renders context menu when there are more than one data links', () => {
+ render(
+ [
+ {
+ href: '/link1',
+ title: 'Link1',
+ target: '_blank',
+ origin: {},
+ },
+ {
+ href: '/link2',
+ title: 'Link2',
+ target: '_blank',
+ origin: {},
+ },
+ ]}
+ config={{
+ links: [
+ {
+ title: 'Link1',
+ url: '/link1',
+ },
+ {
+ title: 'Link2',
+ url: '/link2',
+ },
+ ],
+ }}
+ >
+ {() => {
+ return ;
+ }}
+
+ );
+
+ expect(screen.getByLabelText(fakeAriaLabel)).toBeInTheDocument();
+ expect(screen.queryAllByLabelText(selectors.components.DataLinksContextMenu.singleLink)).toHaveLength(0);
+ });
+
+ it('renders link when there is a single data link', () => {
+ render(
+ [
+ {
+ href: '/link1',
+ title: 'Link1',
+ target: '_blank',
+ origin: {},
+ },
+ ]}
+ config={{
+ links: [
+ {
+ title: 'Link1',
+ url: '/link1',
+ },
+ ],
+ }}
+ >
+ {() => {
+ return ;
+ }}
+
+ );
+
+ expect(screen.getByLabelText(fakeAriaLabel)).toBeInTheDocument();
+ expect(screen.getByLabelText(selectors.components.DataLinksContextMenu.singleLink)).toBeInTheDocument();
+ });
+});
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx
index 0cce3e8e9d8..7252dc94e85 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx
@@ -1,12 +1,14 @@
import React from 'react';
+import { FieldConfig, LinkModel } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { css } from 'emotion';
import { WithContextMenu } from '../ContextMenu/WithContextMenu';
-import { LinkModel } from '@grafana/data';
import { linkModelToContextMenuItems } from '../../utils/dataLinks';
-import { css } from 'emotion';
interface DataLinksContextMenuProps {
children: (props: DataLinksContextMenuApi) => JSX.Element;
links: () => LinkModel[];
+ config: FieldConfig;
}
export interface DataLinksContextMenuApi {
@@ -14,7 +16,8 @@ export interface DataLinksContextMenuApi {
targetClassName?: string;
}
-export const DataLinksContextMenu: React.FC = ({ children, links }) => {
+export const DataLinksContextMenu: React.FC = ({ children, links, config }) => {
+ const linksCounter = config.links!.length;
const getDataLinksContextMenuItems = () => {
return [{ items: linkModelToContextMenuItems(links), label: 'Data links' }];
};
@@ -24,11 +27,27 @@ export const DataLinksContextMenu: React.FC = ({ chil
cursor: context-menu;
`;
- return (
-
- {({ openMenu }) => {
- return children({ openMenu, targetClassName });
- }}
-
- );
+ if (linksCounter > 1) {
+ return (
+
+ {({ openMenu }) => {
+ return children({ openMenu, targetClassName });
+ }}
+
+ );
+ } else {
+ const linkModel = links()[0];
+ return (
+
+ {children({})}
+
+ );
+ }
};
diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
index f8d0333c154..2c02b7dcbc9 100644
--- a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
+++ b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx
@@ -57,14 +57,13 @@ export class BarGaugePanel extends PureComponent> {
if (hasLinks && getLinks) {
return (
-
+
{(api) => {
return this.renderComponent(valueProps, api);
}}
);
}
-
return this.renderComponent(valueProps, {});
};
diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index eb77e3dcb79..fa2224bbd74 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -39,7 +39,7 @@ export class GaugePanel extends PureComponent> {
if (hasLinks && getLinks) {
return (
-
+
{(api) => {
return this.renderComponent(valueProps, api);
}}
diff --git a/public/app/plugins/panel/stat/StatPanel.tsx b/public/app/plugins/panel/stat/StatPanel.tsx
index 9d9de07d620..d886d4f660d 100644
--- a/public/app/plugins/panel/stat/StatPanel.tsx
+++ b/public/app/plugins/panel/stat/StatPanel.tsx
@@ -69,7 +69,7 @@ export class StatPanel extends PureComponent> {
if (hasLinks && getLinks) {
return (
-
+
{(api) => {
return this.renderComponent(valueProps, api);
}}