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.

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>

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} />;
 };

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;
   }