Graph Panel: use FieldConfig for displayName and DataLinks (#25917)

* graph with new controls

* graph with new controls

* Fix categories

* fix test imports

* Chore: Fix spelling (#25905)

* grafana-ui: Make output chunks correct (#25922)

* Explore/Loki: Show results of instant queries only in table and time series only in graph (#25845)

* Show results of instant queries only in table and rest in graph

* Add type to QueryResultMeta

* Update log row hover background only if context is not open

* Revert "Update log row hover background only if context is not open"

This reverts commit 144197c9540565273515a6d7dd38d3e12a436f05.

* Explore/Loki: Fix field type in table for instant queries (#25907)

* Update field type for instant queries to number

* Remove fieldtype as in prometheus

* Revert "Remove fieldtype as in prometheus"

This reverts commit f887ad1125deb1053e33f7ef385d5f518ac27892.

* Chore: Disable scopelint for tests (#25923)

Signed-off-by: Arve Knudsen <arve.knudsen@gmail.com>

* grafana/ui: Fix storybook dev (#25928)

* Minimize css and js only for storybook build

* Update CodeEditor story, make it internal

* Update storybook webpack config

* TimeZonePicker: added possibility to toggle if internal time zones should be included or not. (#25934)

* made some small adjustments after feedback.

* made the flag optional.

* Docker: Upgrade to base on Alpine 3.12 (#25936)

Signed-off-by: Arve Knudsen <arve.knudsen@gmail.com>

* DataLinks: Add internal links in table and allow custom query (#25613)

* Add internal links in table and with custom query

* Add specific types for internal and external link

* Change the datalink types to be more backward compatible

* Refactor the link utils for explore

* Add internal linking to table panels

* Fix derived field condition

* Prettify

* Add and fix tests

* Prettify

* Fix imports and tests

* Remove unused type

* Update packages/grafana-data/src/types/explore.ts

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* Update packages/grafana-data/src/types/explore.ts

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* CircleCI: Upgrade grabpl (#25939)

Signed-off-by: Arve Knudsen <arve.knudsen@gmail.com>

* Provisioning: Use folders structure from the file system to create desired folders in dashboard provisioning. (#23117)

Fixes #12016

* Added options to customize chart data listening (#25918)

* Explore: Remove legend formatting when switching from panel to Explore (#25848)

* Remove legend formatting when switching from panel to explore

* Add test coverage

* Query history: Add search for query history and starred queries (#25747)

* Add searching functionality to Queries tab

* Implement search for starred queries

* Update tests and add test coverage for searching

* Changes based on provided feedback

* Remove redundant storing of results

* Update naming of onSearchFilterChange function in tests

* Update filterQueriesBySearchFilter function

* Update filterQueriesBySearchFilter function

* Debounce search

* Remove console.log()

* Use useDebouncedCallback

* Update tests, remove redundant props

* When in starred, search only in starred

* Add timefilter as dependency

* Remove redundant dependency, refactor

* Grafana-UI: Add FileUpload (#25835)

* Grafana UI: Setup component

* Grafana UI: DashboardFileUpload => FileUpload

* Grafana UI: Expand docs

* Grafana UI: Add className

* Grafana UI: Update import

* Grafana UI: Clarify props

* Update packages/grafana-ui/src/components/FileUpload/FileUpload.tsx

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

* Grafana UI: Style icon

* Grafana UI: Show uploaded file name

* Grafana UI: Add tests

* Grafana UI: Add useStyles + useCallback

* Grafana UI: Remove stylesFactory

* Grafana UI: Revert to useTheme

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

* Fix: Value mappings match against string values (#25929)

* Use standard input for value mappings value

* add test and case for matching string values

* re add number on rangemap

* remove FieldTypeNumber required

* Docs: Changelog update 7.05 & latest.json update (#25941)

* Docs: Changelog update for 7.0.5

* Update latest.json

* Fixed alignment

* Stackdriver: Rename Stackdriver to Google Cloud Monitoring (#25807)

* Update backend

* Update frontend

* Keep old plugin id

* Update docs

* Place doc images to a new directory

* Legacy support for stackdriver-auto alignment

* Consistent plugin name

* Apply suggestions from code review

Co-authored-by: Marcus Efraimsson <marcus.efraimsson@gmail.com>
Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

* Update docs

* Update public/app/plugins/datasource/cloud-monitoring/README.md

Co-authored-by: Marcus Efraimsson <marcus.efraimsson@gmail.com>

* Add reference to the data source formerly being named Stackdriver

* Update pkg/models/datasource.go

Co-authored-by: Carl Bergquist <carl@grafana.com>

* Fix gofmt

Co-authored-by: Marcus Efraimsson <marcus.efraimsson@gmail.com>
Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Co-authored-by: Carl Bergquist <carl@grafana.com>

* Fix strict null errors that resulted from search (#25950)

* Arrow: when exporting arrow use the calculated names (#25871)

* PanelHeader: Fixed loading icon position (#25949)

* PanelHeader: Fixed loading icon position

* revert back to text weak color

* Azure/Log Analytics: return more error information (#25937)

When there is an error message in the HTTP response, this copies that error so it is relayed to the user by being shown in the frontend.

This also makes it so when there is an error the interpolated query string (ExecutedQueryString) is returned so users can see it in the query inspector.

* Azure: Multiple dimension support for Azure Monitor Service (#25947)

Azure Monitor (metrics) support multiple dimensions instead of just one.

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

* Docs: Update alert-list-panel.md (#25779)

Fixed minor typo and format updates

* Docs: Update add-a-panel.md (#25780)

* Linting fixes for the provisioning package (#25690)

* Chore: whatwg-fetch version bump (#25952)

* Use latest fetch polyfill/shim

* Updated lockfile

* Monaco: option to hide line numbers (#25920)

* Docs: Reorganize reference topics (#25915)

* moved annotations.md

* Update annotations.md

* moved dashboard_folders.md

* moved dashboard_history.md

* moved playlist.md

* moved search.md

* migrations test

* docs: spelling (#24383)

* Docs: spelling

* Docs: spelling (contribute/ directory)

* Drop whats-new-in changes

* migrations test

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
Co-authored-by: Richard Hartmann <RichiH@users.noreply.github.com>
Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Co-authored-by: Arve Knudsen <arve.knudsen@gmail.com>
Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>
Co-authored-by: Andrej Ocenas <mr.ocenas@gmail.com>
Co-authored-by: Maksim Nabokikh <32434187+nabokihms@users.noreply.github.com>
Co-authored-by: Steven Vachon <contact@svachon.com>
Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Co-authored-by: Peter Holmberg <peterholmberg@users.noreply.github.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
Co-authored-by: Sofia Papagiannaki <papagian@users.noreply.github.com>
Co-authored-by: Marcus Efraimsson <marcus.efraimsson@gmail.com>
Co-authored-by: Carl Bergquist <carl@grafana.com>
Co-authored-by: Kyle Brandt <kyle@grafana.com>
Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>
Co-authored-by: Josh Soref <jsoref@users.noreply.github.com>

packages/grafana-data/src/types/fieldOverrides.ts

@@ -126,7 +126,7 @@ export enum FieldConfigProperty {
   Min = 'min',
   Max = 'max',
   Decimals = 'decimals',
-  Title = 'title',
+  DisplayName = 'displayName',
   NoValue = 'noValue',
   Thresholds = 'thresholds',
   Mappings = 'mappings',

public/app/features/dashboard/state/PanelModel.ts

@@ -335,7 +335,7 @@ export class PanelModel implements DataConfigSource {
   pluginLoaded(plugin: PanelPlugin) {
     this.plugin = plugin;
 
-    if (plugin.panel && plugin.onPanelMigration) {
+    if (plugin.onPanelMigration) {
       const version = getPluginVersion(plugin);
 
       if (version !== this.pluginVersion) {

public/app/plugins/panel/graph/GraphMigrations.test.ts

+import { PanelModel, FieldConfigSource } from '@grafana/data';
+import { graphPanelMigrationHandler } from './GraphMigrations';
+
+describe('Graph Panel Migrations', () => {
+  it('from 7.0', () => {
+    const panel = {
+      aliasColors: {},
+      bars: false,
+      dashLength: 10,
+      dashes: false,
+      fill: 1,
+      fillGradient: 0,
+      gridPos: {
+        h: 8,
+        w: 9,
+        x: 6,
+        y: 0,
+      },
+      hiddenSeries: false,
+      id: 23763571993,
+      legend: {
+        avg: false,
+        current: false,
+        max: false,
+        min: false,
+        show: true,
+        total: false,
+        values: false,
+      },
+      lines: true,
+      linewidth: 1,
+      nullPointMode: 'null',
+      options: {
+        dataLinks: [
+          {
+            targetBlank: false,
+            title: 'Drill it down',
+            url: 'THE DRILLDOWN URL',
+          },
+        ],
+      },
+      percentage: false,
+      pointradius: 2,
+      points: false,
+      renderer: 'flot',
+      seriesOverrides: [
+        {
+          alias: 'Bar datacenter {datacenter="baz", region="us-east-2"}',
+          yaxis: 2,
+        },
+      ],
+      spaceLength: 10,
+      stack: false,
+      steppedLine: false,
+      targets: [
+        {
+          alias: 'Foo datacenter',
+          labels: 'datacenter=foo,region=us-east-1',
+          refId: 'A',
+          scenarioId: 'random_walk',
+        },
+        {
+          alias: 'Bar datacenter',
+          labels: 'datacenter=bar,region=us-east-2',
+          refId: 'B',
+          scenarioId: 'random_walk',
+        },
+        {
+          alias: 'Bar datacenter',
+          labels: 'datacenter=baz,region=us-east-2',
+          refId: 'C',
+          scenarioId: 'random_walk',
+        },
+      ],
+      thresholds: [],
+      timeFrom: null,
+      timeRegions: [],
+      timeShift: null,
+      title: 'Multiple series',
+      tooltip: {
+        shared: true,
+        sort: 0,
+        value_type: 'individual',
+      },
+      type: 'graph',
+      xaxis: {
+        buckets: null,
+        mode: 'time',
+        name: null,
+        show: true,
+        values: [],
+      },
+      yaxes: [
+        {
+          format: 'percent',
+          label: null,
+          logBase: 1,
+          max: null,
+          min: null,
+          show: true,
+          $$hashKey: 'object:122',
+        },
+        {
+          format: 'gflops',
+          label: null,
+          logBase: 1,
+          max: null,
+          min: null,
+          show: true,
+          $$hashKey: 'object:123',
+        },
+      ],
+      yaxis: {
+        align: false,
+        alignLevel: null,
+      },
+      datasource: null,
+    } as Omit<PanelModel, 'fieldConfig'>;
+
+    const result = graphPanelMigrationHandler(panel as PanelModel);
+    const fieldSource = (panel as any).fieldConfig as FieldConfigSource;
+
+    expect(result.dataLinks).toBeUndefined();
+    expect(fieldSource.defaults.links).toHaveLength(1);
+
+    const link = fieldSource.defaults.links[0];
+    expect(link.url).toEqual('THE DRILLDOWN URL');
+  });
+});

public/app/plugins/panel/graph/GraphMigrations.ts

+import { PanelModel, FieldConfigSource, DataLink } from '@grafana/data';
+
+/**
+ * Called when upgrading from a previously saved versoin
+ */
+export const graphPanelMigrationHandler = (panel: PanelModel<any>): Partial<any> => {
+  const fieldOptions: FieldConfigSource = {
+    defaults: {},
+    overrides: [],
+  };
+
+  const options = panel.options || {};
+
+  // Move <7.1 dataLinks to the field section
+  if (options.dataLinks) {
+    fieldOptions.defaults.links = options.dataLinks as DataLink[];
+    delete options.dataLinks;
+  }
+
+  // Mutate the original panel state (only necessary because it is angular)
+  panel.options = options;
+  panel.fieldConfig = fieldOptions;
+  return options;
+};

public/app/plugins/panel/graph/module.ts

@@ -12,21 +12,21 @@ import { axesEditorComponent } from './axes_editor';
 import config from 'app/core/config';
 import TimeSeries from 'app/core/time_series2';
 import { getProcessedDataFrames } from 'app/features/dashboard/state/runRequest';
-import { getColorFromHexRgbOrName, PanelEvents, DataFrame, DataLink, VariableSuggestion } from '@grafana/data';
+import { getColorFromHexRgbOrName, PanelEvents, PanelPlugin, DataFrame, FieldConfigProperty } from '@grafana/data';
 
 import { GraphContextMenuCtrl } from './GraphContextMenuCtrl';
-import { getDataLinksVariableSuggestions } from 'app/features/panel/panellinks/link_srv';
+import { graphPanelMigrationHandler } from './GraphMigrations';
+import { DataWarning, GraphPanelOptions, GraphFieldConfig } from './types';
 
 import { auto } from 'angular';
 import { AnnotationsSrv } from 'app/features/annotations/all';
 import { CoreEvents } from 'app/types';
-import { DataWarning } from './types';
 import { getLocationSrv } from '@grafana/runtime';
 import { getDataTimeRange } from './utils';
 import { changePanelPlugin } from 'app/features/dashboard/state/actions';
 import { dispatch } from 'app/store/store';
 
-class GraphCtrl extends MetricsPanelCtrl {
+export class GraphCtrl extends MetricsPanelCtrl {
   static template = template;
 
   renderError: boolean;
@@ -43,7 +43,6 @@ class GraphCtrl extends MetricsPanelCtrl {
   subTabIndex: number;
   processor: DataProcessor;
   contextMenuCtrl: GraphContextMenuCtrl;
-  linkVariableSuggestions: VariableSuggestion[] = [];
 
   panelDefaults: any = {
     // datasource name, null = default datasource
@@ -136,9 +135,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     seriesOverrides: [],
     thresholds: [],
     timeRegions: [],
-    options: {
-      dataLinks: [],
-    },
+    options: {},
   };
 
   /** @ngInject */
@@ -161,7 +158,6 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.events.on(PanelEvents.editModeInitialized, this.onInitEditMode.bind(this));
     this.events.on(PanelEvents.initPanelActions, this.onInitPanelActions.bind(this));
 
-    this.onDataLinksChange = this.onDataLinksChange.bind(this);
     this.annotationsPromise = Promise.resolve({ annotations: [] });
   }
 
@@ -172,7 +168,6 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html');
     this.addEditorTab('Thresholds', 'public/app/plugins/panel/graph/tab_thresholds.html');
     this.addEditorTab('Time regions', 'public/app/plugins/panel/graph/tab_time_regions.html');
-    this.addEditorTab('Data links', 'public/app/plugins/panel/graph/tab_drilldown_links.html');
     this.subTabIndex = 0;
     this.hiddenSeriesTainted = false;
   }
@@ -221,8 +216,6 @@ class GraphCtrl extends MetricsPanelCtrl {
       range: this.range,
     });
 
-    this.linkVariableSuggestions = getDataLinksVariableSuggestions(data);
-
     this.dataWarning = this.getDataWarning();
 
     this.annotationsPromise.then(
@@ -350,13 +343,6 @@ class GraphCtrl extends MetricsPanelCtrl {
     this.render();
   };
 
-  onDataLinksChange(dataLinks: DataLink[]) {
-    this.panel.updateOptions({
-      ...this.panel.options,
-      dataLinks,
-    });
-  }
-
   addSeriesOverride(override: any) {
     this.panel.seriesOverrides.push(override || {});
   }
@@ -388,4 +374,15 @@ class GraphCtrl extends MetricsPanelCtrl {
   };
 }
 
-export { GraphCtrl, GraphCtrl as PanelCtrl };
+// Use new react style configuration
+export const plugin = new PanelPlugin<GraphPanelOptions, GraphFieldConfig>(null)
+  .useFieldConfig({
+    standardOptions: [
+      FieldConfigProperty.DisplayName,
+      FieldConfigProperty.Links, // previously saved as dataLinks on options
+    ],
+  })
+  .setMigrationHandler(graphPanelMigrationHandler);
+
+// Use the angular ctrt rather than a react one
+plugin.angularPanelCtrl = GraphCtrl;

public/app/plugins/panel/graph/tab_drilldown_links.html

-<drilldown-links-editor
-  links="ctrl.panel.options.dataLinks"
-  suggestions="ctrl.linkVariableSuggestions"
-  on-change="ctrl.onDataLinksChange"
-></drilldown-links-editor>

public/app/plugins/panel/graph/types.ts

+export interface GraphPanelOptions {
+  // Panel level options
+}
+
+export interface GraphFieldConfig {
+  // Custom field properties
+}
+
 export interface DataWarning {
   title: string;
   tip: string;