From c38804216c737b81ae5337a863c15106a1cf85c6 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 7 Aug 2019 14:13:19 +0200
Subject: [PATCH] DataLinks: Enable multiple data links per panel (#18434)

In response to #18282

DataLinksEditor does not limit amount of links by default now (it was 1 link before, unless maxLinks prop was specified). Also, links that do not have label specified, are not rendered anymore.
---
 .../src/components/DataLinks/DataLinksEditor.tsx     |  2 +-
 public/app/plugins/panel/graph/GraphContextMenu.tsx  | 12 ++++++++++--
 public/app/plugins/panel/graph/module.ts             |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksEditor.tsx
index 11cef2a8438..881fad58d4e 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksEditor.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksEditor.tsx
@@ -66,7 +66,7 @@ export const DataLinksEditor: FC<DataLinksEditorProps> = React.memo(({ value, on
         </div>
       )}
 
-      {(!value || (value && value.length < (maxLinks || 1))) && (
+      {(!value || (value && value.length < (maxLinks || Infinity))) && (
         <Button variant="inverse" icon="fa fa-plus" onClick={() => onAdd()}>
           Create link
         </Button>
diff --git a/public/app/plugins/panel/graph/GraphContextMenu.tsx b/public/app/plugins/panel/graph/GraphContextMenu.tsx
index b9758e61950..0d80986d617 100644
--- a/public/app/plugins/panel/graph/GraphContextMenu.tsx
+++ b/public/app/plugins/panel/graph/GraphContextMenu.tsx
@@ -8,10 +8,18 @@ type GraphContextMenuProps = ContextMenuProps & {
   getContextMenuSource: () => FlotDataPoint | null;
 };
 
-export const GraphContextMenu: React.FC<GraphContextMenuProps> = ({ getContextMenuSource, ...otherProps }) => {
+export const GraphContextMenu: React.FC<GraphContextMenuProps> = ({ getContextMenuSource, items, ...otherProps }) => {
   const theme = useContext(ThemeContext);
   const source = getContextMenuSource();
 
+  //  Do not render items that do not have label specified
+  const itemsToRender = items
+    ? items.map(group => ({
+        ...group,
+        items: group.items.filter(item => item.label),
+      }))
+    : [];
+
   const renderHeader = source
     ? () => {
         if (!source) {
@@ -44,5 +52,5 @@ export const GraphContextMenu: React.FC<GraphContextMenuProps> = ({ getContextMe
       }
     : null;
 
-  return <ContextMenu {...otherProps} renderHeader={renderHeader} />;
+  return <ContextMenu {...otherProps} items={itemsToRender} renderHeader={renderHeader} />;
 };
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts
index 09aec5b04c8..56c059d3c4c 100644
--- a/public/app/plugins/panel/graph/module.ts
+++ b/public/app/plugins/panel/graph/module.ts
@@ -162,7 +162,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.addEditorTab('Axes', axesEditorComponent);
     this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html');
     this.addEditorTab('Thresholds & Time Regions', 'public/app/plugins/panel/graph/tab_thresholds_time_regions.html');
-    this.addEditorTab('Data link', 'public/app/plugins/panel/graph/tab_drilldown_links.html');
+    this.addEditorTab('Data links', 'public/app/plugins/panel/graph/tab_drilldown_links.html');
     this.subTabIndex = 0;
   }