Geomap: make the geomap panel beta and label alpha layers (#36894)

packages/grafana-data/src/transformations/standardTransformersRegistry.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataFrame, DataTransformerInfo, PluginState } from '../types';
+import { DataFrame, DataTransformerInfo } from '../types';
 import { Registry, RegistryItem } from '../utils/Registry';
 
 export interface TransformerUIProps<T> {
@@ -20,11 +20,6 @@ export interface TransformerRegistryItem<TOptions> extends RegistryItem {
    */
   transformation: DataTransformerInfo<TOptions>;
 
-  /**
-   * Optional feature state
-   */
-  state?: PluginState;
-
   /** Markdown with more detailed description and help */
   help?: string;
 

packages/grafana-data/src/utils/Registry.ts

@@ -1,3 +1,4 @@
+import { PluginState } from '../types';
 import { SelectableValue } from '../types/select';
 
 export interface RegistryItem {
@@ -11,6 +12,11 @@ export interface RegistryItem {
    *  like: 'all' and 'any' matchers;
    */
   excludeFromPicker?: boolean;
+
+  /**
+   * Optional feature state
+   */
+  state?: PluginState;
 }
 
 export interface RegistryItemWithOptions<TOptions = any> extends RegistryItem {
@@ -105,6 +111,10 @@ export class Registry<T extends RegistryItem> {
         description: ext.description,
       };
 
+      if (ext.state === PluginState.alpha) {
+        option.label += ' (alpha)';
+      }
+
       select.options.push(option);
       if (currentOptions[ext.id]) {
         currentOptions[ext.id] = option;

public/app/core/config.ts

@@ -1,4 +1,5 @@
 import { config, GrafanaBootConfig } from '@grafana/runtime';
+import { PluginState } from '../../../packages/grafana-data/src';
 // Legacy binding paths
 export { config, GrafanaBootConfig as Settings };
 
@@ -16,3 +17,6 @@ export const updateConfig = (update: Partial<GrafanaBootConfig>) => {
     ...update,
   };
 };
+
+// The `enable_alpha` flag is no exposed directly, this is equivolant
+export const hasAlphaPanels = Boolean(config.panels?.debug?.state === PluginState.alpha);

public/app/plugins/panel/geomap/editor/BaseLayerEditor.tsx

@@ -1,12 +1,23 @@
 import React, { FC } from 'react';
-import { StandardEditorProps, MapLayerOptions } from '@grafana/data';
+import { StandardEditorProps, MapLayerOptions, MapLayerRegistryItem, PluginState } from '@grafana/data';
 import { GeomapPanelOptions } from '../types';
 import { LayerEditor } from './LayerEditor';
+import { hasAlphaPanels } from 'app/core/config';
+
+function baseMapFilter(layer: MapLayerRegistryItem): boolean {
+  if (!layer.isBaseMap) {
+    return false;
+  }
+  if (layer.state === PluginState.alpha) {
+    return hasAlphaPanels;
+  }
+  return true;
+}
 
 export const BaseLayerEditor: FC<StandardEditorProps<MapLayerOptions, any, GeomapPanelOptions>> = ({
   value,
   onChange,
   context,
 }) => {
-  return <LayerEditor options={value} data={context.data} onChange={onChange} filter={(v) => Boolean(v.isBaseMap)} />;
+  return <LayerEditor options={value} data={context.data} onChange={onChange} filter={baseMapFilter} />;
 };

public/app/plugins/panel/geomap/editor/DataLayersEditor.tsx

@@ -1,7 +1,18 @@
 import React, { FC } from 'react';
-import { StandardEditorProps, MapLayerOptions } from '@grafana/data';
+import { StandardEditorProps, MapLayerOptions, PluginState, MapLayerRegistryItem } from '@grafana/data';
 import { GeomapPanelOptions } from '../types';
 import { LayerEditor } from './LayerEditor';
+import { hasAlphaPanels } from 'app/core/config';
+
+function dataLayerFilter(layer: MapLayerRegistryItem): boolean {
+  if (layer.isBaseMap) {
+    return false;
+  }
+  if (layer.state === PluginState.alpha) {
+    return hasAlphaPanels;
+  }
+  return true;
+}
 
 // For now this supports a *single* data layer -- eventually we should support more than one
 export const DataLayersEditor: FC<StandardEditorProps<MapLayerOptions[], any, GeomapPanelOptions>> = ({
@@ -17,7 +28,7 @@ export const DataLayersEditor: FC<StandardEditorProps<MapLayerOptions[], any, Ge
         console.log('Change overlays:', cfg);
         onChange([cfg]);
       }}
-      filter={(v) => !v.isBaseMap}
+      filter={dataLayerFilter}
     />
   );
 };

public/app/plugins/panel/geomap/layers/data/geojsonMapper.ts

@@ -1,4 +1,4 @@
-import { MapLayerRegistryItem, MapLayerOptions, MapLayerHandler, PanelData, GrafanaTheme2 } from '@grafana/data';
+import { MapLayerRegistryItem, MapLayerOptions, MapLayerHandler, PanelData, GrafanaTheme2, PluginState } from '@grafana/data';
 import Map from 'ol/Map';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
@@ -24,6 +24,7 @@ export const geojsonMapper: MapLayerRegistryItem<GeoJSONMapperConfig> = {
   name: 'Map values to GeoJSON file',
   description: 'color features based on query results',
   isBaseMap: false,
+  state: PluginState.alpha,
 
   /**
    * Function that configures transformation and returns a transformer

public/app/plugins/panel/geomap/layers/data/lastPointTracker.ts

@@ -1,4 +1,4 @@
-import { MapLayerRegistryItem, MapLayerOptions, MapLayerHandler, PanelData, GrafanaTheme2 } from '@grafana/data';
+import { MapLayerRegistryItem, MapLayerOptions, MapLayerHandler, PanelData, GrafanaTheme2, PluginState } from '@grafana/data';
 import Map from 'ol/Map';
 import Feature from 'ol/Feature';
 import * as style from 'ol/style';
@@ -20,6 +20,7 @@ export const lastPointTracker: MapLayerRegistryItem<LastPointConfig> = {
   description: 'Show an icon at the last point',
   isBaseMap: false,
   showLocation: true,
+  state: PluginState.alpha,
 
   /**
    * Function that configures transformation and returns a transformer

public/app/plugins/panel/geomap/plugin.json

@@ -2,7 +2,7 @@
   "type": "panel",
   "name": "Geomap",
   "id": "geomap",
-  "state": "alpha",
+  "state": "beta",
 
   "info": {
     "description": "Geomap panel",