From 1522499c4a16274ac5f2dacf0a1dcc11b8f960f3 Mon Sep 17 00:00:00 2001 From: Leon Sorokin Date: Tue, 2 Apr 2024 19:32:01 -0500 Subject: [PATCH] VizTooltips: Remove remaining old bits (#85500) Co-authored-by: Adela Almasan --- .../visualizations/heatmap/index.md | 2 +- .../feature-toggles/index.md | 1 - .../src/types/featureToggles.gen.ts | 1 - .../uPlot/plugins/TooltipPlugin2.tsx | 1 - pkg/services/featuremgmt/registry.go | 8 -- pkg/services/featuremgmt/toggles_gen.csv | 1 - pkg/services/featuremgmt/toggles_gen.go | 4 - pkg/services/featuremgmt/toggles_gen.json | 3 +- .../data-hover/DataHoverView.tsx | 3 +- .../data-hover/ExemplarHoverView.tsx | 8 +- .../app/plugins/panel/candlestick/module.tsx | 5 +- public/app/plugins/panel/heatmap/module.tsx | 4 +- .../plugins/panel/state-timeline/module.tsx | 3 +- .../plugins/panel/status-history/module.tsx | 3 +- .../timeseries/plugins/ExemplarMarker.tsx | 73 ++----------------- .../plugins/panel/timeseries/plugins/types.ts | 17 ----- 16 files changed, 16 insertions(+), 121 deletions(-) delete mode 100644 public/app/plugins/panel/timeseries/plugins/types.ts diff --git a/docs/sources/panels-visualizations/visualizations/heatmap/index.md b/docs/sources/panels-visualizations/visualizations/heatmap/index.md index 68e51bdd3cb..73f7f8f5058 100644 --- a/docs/sources/panels-visualizations/visualizations/heatmap/index.md +++ b/docs/sources/panels-visualizations/visualizations/heatmap/index.md @@ -114,7 +114,7 @@ Use these settings to refine your visualization. - **Show tooltip -** Show heatmap tooltip. - **Show Histogram -** Show a Y-axis histogram on the tooltip. A histogram represents the distribution of the bucket values for a specific timestamp. -- **Show color scale -** Show a color scale on the tooltip. The color scale represents the mapping between bucket value and color. This option is configurable when you enable the `newVizTooltips` feature flag. +- **Show color scale -** Show a color scale on the tooltip. The color scale represents the mapping between bucket value and color. ### Legend diff --git a/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md b/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md index 259d89a3be6..284d62e14bb 100644 --- a/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md +++ b/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md @@ -74,7 +74,6 @@ Some features are enabled by default. You can disable these feature by setting t | `autoMigrateStatPanel` | Migrate old stat panel to supported stat panel - broken out from autoMigrateOldPanels to enable granular tracking | | `autoMigrateXYChartPanel` | Migrate old XYChart panel to new XYChart2 model | | `disableAngular` | Dynamic flag to disable angular at runtime. The preferred method is to set `angular_support_enabled` to `false` in the [security] settings, which allows you to change the state at runtime. | -| `newVizTooltips` | New visualizations tooltips UX | | `returnToPrevious` | Enables the return to previous context functionality | | `grpcServer` | Run the GRPC server | | `accessControlOnCall` | Access control primitives for OnCall | diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts index 962f5a15469..200d3bee3b1 100644 --- a/packages/grafana-data/src/types/featureToggles.gen.ts +++ b/packages/grafana-data/src/types/featureToggles.gen.ts @@ -40,7 +40,6 @@ export interface FeatureToggles { autoMigrateXYChartPanel?: boolean; disableAngular?: boolean; canvasPanelNesting?: boolean; - newVizTooltips?: boolean; scenes?: boolean; disableSecretsCompatibility?: boolean; logRequestsInstrumentedAsUnknown?: boolean; diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx index 13c6b797c08..46861900ff0 100644 --- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx +++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx @@ -13,7 +13,6 @@ import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder'; import { CloseButton } from './CloseButton'; export const DEFAULT_TOOLTIP_WIDTH = undefined; -export const DEFAULT_TOOLTIP_HEIGHT = undefined; export const TOOLTIP_OFFSET = 10; // todo: barchart? histogram? diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go index 56a2ed17033..b9ac8ec76e4 100644 --- a/pkg/services/featuremgmt/registry.go +++ b/pkg/services/featuremgmt/registry.go @@ -176,14 +176,6 @@ var ( Owner: grafanaDatavizSquad, HideFromAdminPage: true, }, - { - Name: "newVizTooltips", - Description: "New visualizations tooltips UX", - Stage: FeatureStagePublicPreview, - FrontendOnly: true, - Owner: grafanaDatavizSquad, - AllowSelfServe: false, - }, { Name: "scenes", Description: "Experimental framework to build interactive dashboards", diff --git a/pkg/services/featuremgmt/toggles_gen.csv b/pkg/services/featuremgmt/toggles_gen.csv index 5eb41433bc3..e873af56b20 100644 --- a/pkg/services/featuremgmt/toggles_gen.csv +++ b/pkg/services/featuremgmt/toggles_gen.csv @@ -21,7 +21,6 @@ autoMigrateStatPanel,preview,@grafana/dataviz-squad,false,false,true autoMigrateXYChartPanel,preview,@grafana/dataviz-squad,false,false,true disableAngular,preview,@grafana/dataviz-squad,false,false,true canvasPanelNesting,experimental,@grafana/dataviz-squad,false,false,true -newVizTooltips,preview,@grafana/dataviz-squad,false,false,true scenes,experimental,@grafana/dashboards-squad,false,false,true disableSecretsCompatibility,experimental,@grafana/hosted-grafana-team,false,true,false logRequestsInstrumentedAsUnknown,experimental,@grafana/hosted-grafana-team,false,false,false diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go index 5aad2c0f018..5b04e68f788 100644 --- a/pkg/services/featuremgmt/toggles_gen.go +++ b/pkg/services/featuremgmt/toggles_gen.go @@ -95,10 +95,6 @@ const ( // Allow elements nesting FlagCanvasPanelNesting = "canvasPanelNesting" - // FlagNewVizTooltips - // New visualizations tooltips UX - FlagNewVizTooltips = "newVizTooltips" - // FlagScenes // Experimental framework to build interactive dashboards FlagScenes = "scenes" diff --git a/pkg/services/featuremgmt/toggles_gen.json b/pkg/services/featuremgmt/toggles_gen.json index 71952b35c83..7fa7d4cc01d 100644 --- a/pkg/services/featuremgmt/toggles_gen.json +++ b/pkg/services/featuremgmt/toggles_gen.json @@ -728,7 +728,8 @@ "metadata": { "name": "newVizTooltips", "resourceVersion": "1711130211436", - "creationTimestamp": "2024-03-22T17:56:51Z" + "creationTimestamp": "2024-03-22T17:56:51Z", + "deletionTimestamp": "2024-04-02T22:11:56Z" }, "spec": { "description": "New visualizations tooltips UX", diff --git a/public/app/features/visualization/data-hover/DataHoverView.tsx b/public/app/features/visualization/data-hover/DataHoverView.tsx index b395aedc976..71ebcf5f3ae 100644 --- a/public/app/features/visualization/data-hover/DataHoverView.tsx +++ b/public/app/features/visualization/data-hover/DataHoverView.tsx @@ -10,7 +10,6 @@ import { GrafanaTheme2, LinkModel, } from '@grafana/data'; -import { config } from '@grafana/runtime'; import { SortOrder, TooltipDisplayMode } from '@grafana/schema'; import { TextLink, useStyles2 } from '@grafana/ui'; import { renderValue } from 'app/plugins/panel/geomap/utils/uiUtils'; @@ -109,7 +108,7 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he const { displayValues, links } = dispValuesAndLinks; - if (config.featureToggles.newVizTooltips && header === 'Exemplar') { + if (header === 'Exemplar') { return ; } diff --git a/public/app/features/visualization/data-hover/ExemplarHoverView.tsx b/public/app/features/visualization/data-hover/ExemplarHoverView.tsx index c7f4fcc1a5c..39718bb536a 100644 --- a/public/app/features/visualization/data-hover/ExemplarHoverView.tsx +++ b/public/app/features/visualization/data-hover/ExemplarHoverView.tsx @@ -87,13 +87,9 @@ const getStyles = (theme: GrafanaTheme2, padding = 0) => { exemplarFooter: css({ display: 'flex', flexDirection: 'column', - flex: 1, - borderTop: `1px solid ${theme.colors.border.medium}`, padding: theme.spacing(1), - - overflowX: 'auto', - overflowY: 'hidden', - whiteSpace: 'nowrap', + borderTop: `1px solid ${theme.colors.border.medium}`, + gap: 4, }), linkButton: css({ width: 'fit-content', diff --git a/public/app/plugins/panel/candlestick/module.tsx b/public/app/plugins/panel/candlestick/module.tsx index 2d6c62ab876..793b60fda2e 100644 --- a/public/app/plugins/panel/candlestick/module.tsx +++ b/public/app/plugins/panel/candlestick/module.tsx @@ -137,10 +137,7 @@ export const plugin = new PanelPlugin(CandlestickPane }, }); - if (config.featureToggles.newVizTooltips) { - commonOptionsBuilder.addTooltipOptions(builder, false, true, opts); - } - + commonOptionsBuilder.addTooltipOptions(builder, false, true, opts); commonOptionsBuilder.addLegendOptions(builder); }) .setDataSupport({ annotations: true, alertStates: true }) diff --git a/public/app/plugins/panel/heatmap/module.tsx b/public/app/plugins/panel/heatmap/module.tsx index 8468ee7128c..f767a6c5a92 100644 --- a/public/app/plugins/panel/heatmap/module.tsx +++ b/public/app/plugins/panel/heatmap/module.tsx @@ -411,7 +411,7 @@ export const plugin = new PanelPlugin(HeatmapPanel) name: 'Show color scale', defaultValue: defaultOptions.tooltip.showColorScale, category, - showIf: (opts) => opts.tooltip.mode === TooltipDisplayMode.Single && config.featureToggles.newVizTooltips, + showIf: (opts) => opts.tooltip.mode === TooltipDisplayMode.Single, }); builder.addNumberInput({ @@ -421,7 +421,7 @@ export const plugin = new PanelPlugin(HeatmapPanel) settings: { integer: true, }, - showIf: (options) => false, // config.featureToggles.newVizTooltips && options.tooltip?.mode !== TooltipDisplayMode.None, + showIf: (options) => false, }); builder.addNumberInput({ diff --git a/public/app/plugins/panel/state-timeline/module.tsx b/public/app/plugins/panel/state-timeline/module.tsx index e18f695f7c3..8b77bd5d04c 100644 --- a/public/app/plugins/panel/state-timeline/module.tsx +++ b/public/app/plugins/panel/state-timeline/module.tsx @@ -5,7 +5,6 @@ import { identityOverrideProcessor, PanelPlugin, } from '@grafana/data'; -import { config } from '@grafana/runtime'; import { VisibilityMode } from '@grafana/schema'; import { commonOptionsBuilder } from '@grafana/ui'; @@ -122,7 +121,7 @@ export const plugin = new PanelPlugin(StateTimelinePanel) }); commonOptionsBuilder.addLegendOptions(builder, false); - commonOptionsBuilder.addTooltipOptions(builder, !config.featureToggles.newVizTooltips); + commonOptionsBuilder.addTooltipOptions(builder); }) .setSuggestionsSupplier(new StatTimelineSuggestionsSupplier()) .setDataSupport({ annotations: true }); diff --git a/public/app/plugins/panel/status-history/module.tsx b/public/app/plugins/panel/status-history/module.tsx index 82b06291a11..8d42b1c4d1b 100644 --- a/public/app/plugins/panel/status-history/module.tsx +++ b/public/app/plugins/panel/status-history/module.tsx @@ -1,5 +1,4 @@ import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data'; -import { config } from '@grafana/runtime'; import { VisibilityMode } from '@grafana/schema'; import { commonOptionsBuilder } from '@grafana/ui'; @@ -81,7 +80,7 @@ export const plugin = new PanelPlugin(StatusHistoryPanel) }); commonOptionsBuilder.addLegendOptions(builder, false); - commonOptionsBuilder.addTooltipOptions(builder, !config.featureToggles.newVizTooltips); + commonOptionsBuilder.addTooltipOptions(builder); }) .setSuggestionsSupplier(new StatusHistorySuggestionsSupplier()) .setDataSupport({ annotations: true }); diff --git a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx index e1f77808965..54c42a22830 100644 --- a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx +++ b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx @@ -11,21 +11,10 @@ import { } from '@floating-ui/react'; import React, { CSSProperties, useCallback, useEffect, useState } from 'react'; -import { - DataFrame, - DataFrameFieldIndex, - dateTimeFormat, - Field, - FieldType, - formattedValueToString, - GrafanaTheme2, - LinkModel, - systemDateFormats, - TimeZone, -} from '@grafana/data'; +import { DataFrame, DataFrameFieldIndex, Field, formattedValueToString, GrafanaTheme2, LinkModel } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { config as runtimeConfig } from '@grafana/runtime'; -import { FieldLinkList, Portal, UPlotConfigBuilder, useStyles2 } from '@grafana/ui'; +import { TimeZone } from '@grafana/schema'; +import { Portal, UPlotConfigBuilder, useStyles2 } from '@grafana/ui'; import { DisplayValue } from 'app/features/visualization/data-hover/DataHoverView'; import { ExemplarHoverView } from 'app/features/visualization/data-hover/ExemplarHoverView'; @@ -138,13 +127,6 @@ export const ExemplarMarker = ({ ...dataFrame.fields.filter((field) => !fieldsWithLinks.includes(field)), ]; - const timeFormatter = (value: number) => { - return dateTimeFormat(value, { - format: systemDateFormats.fullDate, - timeZone, - }); - }; - const onClose = () => { setIsLocked(false); setIsOpen(false); @@ -177,61 +159,16 @@ export const ExemplarMarker = ({ marginRight: 0, }; - const getExemplarMarkerContent = () => { - if (runtimeConfig.featureToggles.newVizTooltips) { - return ( - <> - {isLocked && } - - - ); - } else { - return ( -
- {isLocked && } -
-
- Exemplars -
-
- - - {orderedDataFrameFields.map((field: Field, i) => { - const value = field.values[dataFrameFieldIndex.fieldIndex]; - const links = field.config.links?.length - ? field.getLinks?.({ valueRowIndex: dataFrameFieldIndex.fieldIndex }) - : undefined; - return ( - - - - - ); - })} - -
{field.name} -
- {field.type === FieldType.time ? timeFormatter(value) : value} - {links && } -
-
-
-
-
- ); - } - }; - return (
- {getExemplarMarkerContent()} + {isLocked && } +
); }, [ dataFrame.fields, dataFrameFieldIndex, styles, - timeZone, isLocked, setClickedExemplarFieldIndex, floatingStyles, diff --git a/public/app/plugins/panel/timeseries/plugins/types.ts b/public/app/plugins/panel/timeseries/plugins/types.ts deleted file mode 100644 index 33b1b9327c2..00000000000 --- a/public/app/plugins/panel/timeseries/plugins/types.ts +++ /dev/null @@ -1,17 +0,0 @@ -export interface AnnotationsDataFrameViewDTO { - id: string; - /** @deprecate */ - dashboardId: number; - dashboardUID: string; - time: number; - timeEnd: number; - text: string; - tags: string[]; - alertId?: number; - newState?: string; - title?: string; - color: string; - login?: string; - avatarUrl?: string; - isRegion?: boolean; -}