maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Vislib XY axis] Adds a deprecation notice in the UI and a docs section (#105055)

Browse source 
* [Vislib XY axis] Adds a deprecation notice in the UI and a docs section

* Remove cyclic dependency

* Fix link

* Add functional test

* fix functional tests

* Apply PR comments

* Update docs/user/dashboard/aggregation-based.asciidoc

Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>

* Apply PR changes

* minor

* Change the implementation

* Use title calse in Advanced Settings

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>
This commit is contained in:
Stratoula Kalafateli 2021-07-20 13:33:10 +03:00 committed by GitHub
parent 1f5be1e1e1
commit 8b2ceaed44
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 99 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -480,10 +480,11 @@ of buckets to try to represent.
[horizontal]
[[visualization-visualize-chartslibrary]]`visualization:visualize:legacyChartsLibrary`::
Enables the legacy charts library for aggregation-based area, line, and bar charts in *Visualize*.
**The legacy XY charts are deprecated and will not be supported as of 7.16.**
The visualize editor uses a new XY charts library with improved performance, color palettes, fill capacity, and more. Enable this option if you prefer to use the legacy charts library.
[[visualization-visualize-pieChartslibrary]]`visualization:visualize:legacyPieChartsLibrary`::
Enables the legacy charts library for aggregation-based pie charts in *Visualize*.
The visualize editor uses new pie charts with improved performance, color palettes, label positioning, and more. Enable this option if you prefer to use to the legacy charts library.
[[visualization-colormapping]]`visualization:colorMapping`::
**This setting is deprecated and will not be supported as of 8.0.**

1
docs/user/dashboard/aggregation-based.asciidoc
View file

@ -178,4 +178,3 @@ image:images/bar-chart-tutorial-2.png[Bar chart with sample logs data]

66
src/plugins/visualize/public/application/components/deprecation_vis_warning.tsx Normal file
View file

@ -0,0 +1,66 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiCallOut, EuiLink } from '@elastic/eui';
import { useKibana } from '../../../../kibana_react/public';
import { VisualizeServices } from '../types';
export const LEGACY_CHARTS_LIBRARY = 'visualization:visualize:legacyChartsLibrary';
export const DeprecationWarning = () => {
const { services } = useKibana<VisualizeServices>();
const canEditAdvancedSettings = services.application.capabilities.advancedSettings.save;
const advancedSettingsLink = services.application.getUrlForApp('management', {
path: `/kibana/settings?query=${LEGACY_CHARTS_LIBRARY}`,
});
return (
<EuiCallOut
data-test-subj="vizDeprecationWarning"
title={
<FormattedMessage
id="visualize.legacyCharts.notificationMessage"
defaultMessage="You are using the legacy charts library, which will be removed in 7.16. {conditionalMessage}"
values={{
conditionalMessage: (
<>
{canEditAdvancedSettings && (
<FormattedMessage
id="visualize.legacyCharts.conditionalMessage.newLibrary"
defaultMessage="Switch to the new library in {link}"
values={{
link: (
<EuiLink href={advancedSettingsLink}>
<FormattedMessage
id="visualize.legacyCharts.conditionalMessage.advanced settings link"
defaultMessage="Advanced Settings."
/>
</EuiLink>
),
}}
/>
)}
{!canEditAdvancedSettings && (
<FormattedMessage
id="visualize.legacyCharts.conditionalMessage.noPermissions"
defaultMessage="Contact your system administrator to switch to the new library."
/>
)}
</>
),
}}
/>
}
iconType="alert"
color="warning"
size="s"
/>
);
};

13
src/plugins/visualize/public/application/components/visualize_editor_common.tsx
View file

@ -13,12 +13,14 @@ import { EuiScreenReaderOnly } from '@elastic/eui';
import { AppMountParameters } from 'kibana/public';
import { VisualizeTopNav } from './visualize_top_nav';
import { ExperimentalVisInfo } from './experimental_vis_info';
import { DeprecationWarning, LEGACY_CHARTS_LIBRARY } from './deprecation_vis_warning';
import {
SavedVisInstance,
VisualizeAppState,
VisualizeAppStateContainer,
VisualizeEditorVisInstance,
} from '../types';
import { getUISettings } from '../../services';
interface VisualizeEditorCommonProps {
visInstance?: VisualizeEditorVisInstance;
@ -37,6 +39,13 @@ interface VisualizeEditorCommonProps {
embeddableId?: string;
}
const isXYAxis = (visType: string | undefined): boolean => {
if (!visType) {
return false;
}
return ['area', 'line', 'histogram', 'horizontal_bar', 'point_series'].includes(visType);
};
export const VisualizeEditorCommon = ({
visInstance,
appState,
@ -53,6 +62,7 @@ export const VisualizeEditorCommon = ({
embeddableId,
visEditorRef,
}: VisualizeEditorCommonProps) => {
const hasXYLegacyChartsEnabled = getUISettings().get(LEGACY_CHARTS_LIBRARY);
return (
<div className={`app-container visEditor visEditor--${visInstance?.vis.type.name}`}>
{visInstance && appState && currentAppState && (
@ -73,6 +83,9 @@ export const VisualizeEditorCommon = ({
/>
)}
{visInstance?.vis?.type?.stage === 'experimental' && <ExperimentalVisInfo />}
{/* Adds a deprecation warning for vislib xy axis charts */}
{/* Should be removed when this issue is closed https://github.com/elastic/kibana/issues/103209 */}
{isXYAxis(visInstance?.vis.type.name) && hasXYLegacyChartsEnabled && <DeprecationWarning />}
{visInstance?.vis?.type?.getInfoMessage?.(visInstance.vis)}
{visInstance && (
<EuiScreenReaderOnly>

1
src/plugins/visualize/public/services.ts
View file

@ -5,7 +5,6 @@
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import { createGetterSetter } from '../../../plugins/kibana_utils/public';
import type { IUiSettingsClient } from '../../../core/public';

5
test/functional/apps/visualize/_area_chart.ts
View file

@ -94,6 +94,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visChart.waitForVisualization();
});
// Should be removed when this issue is closed https://github.com/elastic/kibana/issues/103209
it('should show/hide a deprecation warning depending on the library selected', async () => {
await PageObjects.visualize.getDeprecationWarningStatus();
});
it('should have inspector enabled', async function () {
await inspector.expectIsEnabled();
});

32
test/functional/apps/visualize/_line_chart_split_series.ts
View file

@ -207,19 +207,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.clickGo();
const labels = await PageObjects.visChart.getYAxisLabels();
const expectedLabels = await PageObjects.visChart.getExpectedValue(
[
'0',
'1,000',
'2,000',
'3,000',
'4,000',
'5,000',
'6,000',
'7,000',
'8,000',
'9,000',
'10,000',
],
['0', '2,000', '4,000', '6,000', '8,000', '10,000'],
['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
);
expect(labels).to.eql(expectedLabels);
@ -230,7 +218,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.clickGo();
const labels = await PageObjects.visChart.getYAxisLabels();
const expectedLabels = await PageObjects.visChart.getExpectedValue(
['1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000'],
['2,000', '4,000', '6,000', '8,000'],
['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
);
expect(labels).to.eql(expectedLabels);
@ -243,19 +231,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
const labels = await PageObjects.visChart.getYAxisLabels();
log.debug(labels);
const expectedLabels = await PageObjects.visChart.getExpectedValue(
[
'0',
'1,000',
'2,000',
'3,000',
'4,000',
'5,000',
'6,000',
'7,000',
'8,000',
'9,000',
'10,000',
],
['0', '2,000', '4,000', '6,000', '8,000', '10,000'],
['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
);
expect(labels).to.eql(expectedLabels);
@ -266,7 +242,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.clickGo();
const labels = await PageObjects.visChart.getYAxisLabels();
const expectedLabels = await PageObjects.visChart.getExpectedValue(
['1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000'],
['2,000', '4,000', '6,000', '8,000'],
['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000']
);
expect(labels).to.eql(expectedLabels);

8
test/functional/page_objects/visualize_page.ts
View file

@ -451,6 +451,14 @@ export class VisualizePageObject extends FtrService {
await this.testSubjects.click('visualizesaveAndReturnButton');
}
public async getDeprecationWarningStatus() {
if (await this.visChart.isNewChartsLibraryEnabled()) {
await this.testSubjects.missingOrFail('vizDeprecationWarning');
} else {
await this.testSubjects.existOrFail('vizDeprecationWarning');
}
}
public async linkedToOriginatingApp() {
await this.header.waitUntilLoadingHasFinished();
await this.testSubjects.existOrFail('visualizesaveAndReturnButton');