github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 01:13:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Visualize] Adds a deprecation warning to the pie app (#130447)

Browse source 
* [Visualize] Adds a deprecation warning to the pie app

* Fix checks
This commit is contained in:
Stratoula Kalafateli 2022-04-19 09:01:53 +03:00 • committed by GitHub
parent fa89c459ac
commit 2d188508d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 114 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

1
docs/management/advanced-options.asciidoc
View file

@ -509,6 +509,7 @@ Enables the legacy time axis for charts in Lens, Discover, Visualize and TSVB
The maximum number of buckets a datasource can return. High numbers can have a negative impact on your browser rendering performance.
[[visualization-visualize-pieChartslibrary]]`visualization:visualize:legacyPieChartsLibrary`::
**The legacy pie charts are deprecated and will not be supported in a future version.**
The visualize editor uses new pie charts with improved performance, color palettes, label positioning, and more. Enable this option if you prefer to use the legacy charts library.
[[visualization-visualize-heatmapChartslibrary]]`visualization:visualize:legacyHeatmapChartsLibrary`::

49
src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.test.tsx
View file

@ -10,7 +10,7 @@ import React from 'react';
import { shallowWithIntl, mountWithIntl } from '@kbn/test-jest-helpers';
import { VisualizeEditorCommon } from './visualize_editor_common';
import { VisualizeEditorVisInstance } from '../types';
import { SplitChartWarning } from './split_chart_warning';
import { VizChartWarning } from './viz_chart_warning';
const mockGetLegacyUrlConflict = jest.fn();
const mockRedirectLegacyUrl = jest.fn(() => Promise.resolve());
@ -42,7 +42,7 @@ jest.mock('@kbn/kibana-react-plugin/public', () => ({
jest.mock('../../services', () => ({
getUISettings: jest.fn(() => ({
get: jest.fn(),
get: jest.fn((token) => Boolean(token === 'visualization:visualize:legacyPieChartsLibrary')),
})),
}));
@ -157,7 +157,7 @@ describe('VisualizeEditorCommon', () => {
}
/>
);
expect(wrapper.find(SplitChartWarning).length).toBe(1);
expect(wrapper.find(VizChartWarning).length).toBe(1);
});
it('should not display a warning callout for XY charts with split aggs', async () => {
@ -198,6 +198,47 @@ describe('VisualizeEditorCommon', () => {
}
/>
);
expect(wrapper.find(SplitChartWarning).length).toBe(0);
expect(wrapper.find(VizChartWarning).length).toBe(0);
});
it('should display a warning callout for old pie implementation', async () => {
const wrapper = shallowWithIntl(
<VisualizeEditorCommon
appState={null}
hasUnsavedChanges={false}
setHasUnsavedChanges={() => {}}
hasUnappliedChanges={false}
isEmbeddableRendered={false}
onAppLeave={() => {}}
visEditorRef={React.createRef()}
visInstance={
{
savedVis: {
id: 'test',
sharingSavedObjectProps: {
outcome: 'conflict',
aliasTargetId: 'alias_id',
},
},
vis: {
type: {
title: 'pie',
name: 'pie',
},
data: {
aggs: {
aggs: [
{
schema: 'buckets',
},
],
},
},
},
} as unknown as VisualizeEditorVisInstance
}
/>
);
expect(wrapper.find(VizChartWarning).length).toBe(1);
});
});

16
src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.tsx
View file

@ -17,7 +17,7 @@ import { VisualizeTopNav } from './visualize_top_nav';
import { ExperimentalVisInfo } from './experimental_vis_info';
import { urlFor } from '../..';
import { getUISettings } from '../../services';
import { SplitChartWarning } from './split_chart_warning';
import { VizChartWarning } from './viz_chart_warning';
import {
SavedVisInstance,
VisualizeAppState,
@ -28,6 +28,7 @@ import {
import {
CHARTS_CONFIG_TOKENS,
CHARTS_WITHOUT_SMALL_MULTIPLES,
CHARTS_TO_BE_DEPRECATED,
isSplitChart as isSplitChartFn,
} from '../utils/split_chart_warning_helpers';
@ -121,8 +122,10 @@ export const VisualizeEditorCommon = ({
const chartsWithoutSmallMultiples: string[] = Object.values(CHARTS_WITHOUT_SMALL_MULTIPLES);
const chartNeedsWarning = chartName ? chartsWithoutSmallMultiples.includes(chartName) : false;
const deprecatedCharts: string[] = Object.values(CHARTS_TO_BE_DEPRECATED);
const deprecatedChartsNeedWarning = chartName ? deprecatedCharts.includes(chartName) : false;
const chartToken =
chartName && chartNeedsWarning
chartName && (chartNeedsWarning || deprecatedChartsNeedWarning)
? CHARTS_CONFIG_TOKENS[chartName as CHARTS_WITHOUT_SMALL_MULTIPLES]
: undefined;
@ -150,11 +153,18 @@ export const VisualizeEditorCommon = ({
)}
{visInstance?.vis?.type?.stage === 'experimental' && <ExperimentalVisInfo />}
{!hasLegacyChartsEnabled && isSplitChart && chartNeedsWarning && chartToken && chartName && (
<SplitChartWarning
<VizChartWarning
chartType={chartName as CHARTS_WITHOUT_SMALL_MULTIPLES}
chartConfigToken={chartToken}
/>
)}
{hasLegacyChartsEnabled && deprecatedChartsNeedWarning && chartToken && chartName && (
<VizChartWarning
chartType={chartName as CHARTS_TO_BE_DEPRECATED}
chartConfigToken={chartToken}
mode="new"
/>
)}
{visInstance?.vis?.type?.getInfoMessage?.(visInstance.vis)}
{getLegacyUrlConflictCallout()}
{visInstance && (

49
src/plugins/visualizations/public/visualize_app/components/split_chart_warning.tsx → src/plugins/visualizations/public/visualize_app/components/viz_chart_warning.tsx
View file

@ -8,32 +8,42 @@
import React, { FC } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import { i18n } from '@kbn/i18n';
import { EuiCallOut, EuiLink } from '@elastic/eui';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { VisualizeServices } from '../types';
import { CHARTS_WITHOUT_SMALL_MULTIPLES } from '../utils/split_chart_warning_helpers';
import type { CHARTS_WITHOUT_SMALL_MULTIPLES as CHART_WITHOUT_SMALL_MULTIPLES } from '../utils/split_chart_warning_helpers';
import {
CHARTS_WITHOUT_SMALL_MULTIPLES,
CHARTS_TO_BE_DEPRECATED,
} from '../utils/split_chart_warning_helpers';
import type {
CHARTS_WITHOUT_SMALL_MULTIPLES as CHART_WITHOUT_SMALL_MULTIPLES,
CHARTS_TO_BE_DEPRECATED as CHART_TO_BE_DEPRECATED,
} from '../utils/split_chart_warning_helpers';
interface Props {
chartType: CHART_WITHOUT_SMALL_MULTIPLES;
chartType: CHART_WITHOUT_SMALL_MULTIPLES | CHART_TO_BE_DEPRECATED;
chartConfigToken: string;
mode?: 'old' | 'new';
}
interface WarningMessageProps {
canEditAdvancedSettings: boolean | Readonly<{ [x: string]: boolean }>;
advancedSettingsLink: string;
mode?: 'old' | 'new';
}
const SwitchToOldLibraryMessage: FC<WarningMessageProps> = ({
canEditAdvancedSettings,
advancedSettingsLink,
mode = 'old',
}) => {
return (
<>
{canEditAdvancedSettings && (
<FormattedMessage
id="visualizations.newChart.conditionalMessage.newLibrary"
defaultMessage="Switch to the old library in {link}"
defaultMessage="Switch to the {type} library in {link}"
values={{
link: (
<EuiLink href={advancedSettingsLink}>
@ -43,6 +53,14 @@ const SwitchToOldLibraryMessage: FC<WarningMessageProps> = ({
/>
</EuiLink>
),
type:
mode === 'old'
? i18n.translate('visualizations.newChart.libraryMode.old', {
defaultMessage: 'old',
})
: i18n.translate('visualizations.newChart.libraryMode.new', {
defaultMessage: 'new',
}),
}}
/>
)}
@ -97,12 +115,30 @@ const HeatmapWarningFormatMessage: FC<WarningMessageProps> = (props) => {
);
};
const PieWarningFormatMessage: FC<WarningMessageProps> = (props) => {
return (
<FormattedMessage
id="visualizations.oldPieChart.notificationMessage"
defaultMessage="You are using the legacy charts library, which will be removed in a future version. {conditionalMessage}"
values={{
conditionalMessage: (
<>
<SwitchToOldLibraryMessage {...props} />
<ContactAdminMessage {...props} />
</>
),
}}
/>
);
};
const warningMessages = {
[CHARTS_WITHOUT_SMALL_MULTIPLES.heatmap]: HeatmapWarningFormatMessage,
[CHARTS_WITHOUT_SMALL_MULTIPLES.gauge]: GaugeWarningFormatMessage,
[CHARTS_TO_BE_DEPRECATED.pie]: PieWarningFormatMessage,
};
export const SplitChartWarning: FC<Props> = ({ chartType, chartConfigToken }) => {
export const VizChartWarning: FC<Props> = ({ chartType, chartConfigToken, mode }) => {
const { services } = useKibana<VisualizeServices>();
const canEditAdvancedSettings = services.application.capabilities.advancedSettings.save;
const advancedSettingsLink = services.application.getUrlForApp('management', {
@ -112,11 +148,12 @@ export const SplitChartWarning: FC<Props> = ({ chartType, chartConfigToken }) =>
const WarningMessage = warningMessages[chartType];
return (
<EuiCallOut
data-test-subj="vizSplitChartWarning"
data-test-subj="vizChartWarning"
title={
<WarningMessage
advancedSettingsLink={advancedSettingsLink}
canEditAdvancedSettings={canEditAdvancedSettings}
mode={mode}
/>
}
iconType="alert"

1
src/plugins/visualizations/public/visualize_app/constants.ts
View file

@ -8,3 +8,4 @@
export const NEW_HEATMAP_CHARTS_LIBRARY = 'visualization:visualize:legacyHeatmapChartsLibrary';
export const NEW_GAUGE_CHARTS_LIBRARY = 'visualization:visualize:legacyGaugeChartsLibrary';
export const NEW_PIE_CHARTS_LIBRARY = 'visualization:visualize:legacyPieChartsLibrary';

12
src/plugins/visualizations/public/visualize_app/utils/split_chart_warning_helpers.ts
View file

@ -8,18 +8,28 @@
import { $Values } from '@kbn/utility-types';
import { AggConfigs } from '@kbn/data-plugin/common';
import { NEW_HEATMAP_CHARTS_LIBRARY, NEW_GAUGE_CHARTS_LIBRARY } from '../constants';
import {
NEW_HEATMAP_CHARTS_LIBRARY,
NEW_GAUGE_CHARTS_LIBRARY,
NEW_PIE_CHARTS_LIBRARY,
} from '../constants';
export const CHARTS_WITHOUT_SMALL_MULTIPLES = {
heatmap: 'heatmap',
gauge: 'gauge',
} as const;
export const CHARTS_TO_BE_DEPRECATED = {
pie: 'pie',
} as const;
export type CHARTS_WITHOUT_SMALL_MULTIPLES = $Values<typeof CHARTS_WITHOUT_SMALL_MULTIPLES>;
export type CHARTS_TO_BE_DEPRECATED = $Values<typeof CHARTS_TO_BE_DEPRECATED>;
export const CHARTS_CONFIG_TOKENS = {
[CHARTS_WITHOUT_SMALL_MULTIPLES.heatmap]: NEW_HEATMAP_CHARTS_LIBRARY,
[CHARTS_WITHOUT_SMALL_MULTIPLES.gauge]: NEW_GAUGE_CHARTS_LIBRARY,
[CHARTS_TO_BE_DEPRECATED.pie]: NEW_PIE_CHARTS_LIBRARY,
} as const;
export const isSplitChart = (chartType: string | undefined, aggs?: AggConfigs) => {

1
x-pack/plugins/translations/translations/ja-JP.json
View file

@ -6411,7 +6411,6 @@
"visualizations.listing.table.typeColumnName": "型",
"visualizations.listingPageTitle": "Visualizeライブラリ",
"visualizations.newChart.conditionalMessage.advancedSettingsLink": "高度な設定",
"visualizations.newChart.conditionalMessage.newLibrary": "{link}で古いライブラリに切り替える",
"visualizations.newHeatmapChart.notificationMessage": "新しいヒートマップグラフライブラリはまだ分割グラフアグリゲーションをサポートしていません。{conditionalMessage}",
"visualizations.newVisWizard.aggBasedGroupDescription": "クラシック Visualize ライブラリを使用して、アグリゲーションに基づいてグラフを作成します。",
"visualizations.newVisWizard.aggBasedGroupTitle": "アグリゲーションに基づく",

1
x-pack/plugins/translations/translations/zh-CN.json
View file

@ -6420,7 +6420,6 @@
"visualizations.listing.table.typeColumnName": "类型",
"visualizations.listingPageTitle": "Visualize 库",
"visualizations.newChart.conditionalMessage.advancedSettingsLink": "免费的 API 密钥。",
"visualizations.newChart.conditionalMessage.newLibrary": "切换到{link}中的旧库",
"visualizations.newHeatmapChart.notificationMessage": "新的热图图表库尚不支持拆分图表聚合。{conditionalMessage}",
"visualizations.newVisWizard.aggBasedGroupDescription": "使用我们的经典可视化库，基于聚合创建图表。",
"visualizations.newVisWizard.aggBasedGroupTitle": "基于聚合",