mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
[Dashboard] Add visualization from dasbhoard empty screen (#52670)
* [Dashboard] Add visualization from dasbhoard empty screen * Fixing linting errors * Fixing i18n error * Fixing unit test that was causing typecheck failure
This commit is contained in:
Maja Grubic
GitHub
parent
1489c32a1d
commit
c5bf708c55
12 changed files with 773 additions and 67 deletions
|
|
@ -306,40 +306,56 @@ exports[`DashboardEmptyScreen renders correctly with visualize paragraph 1`] = `
|
|||
className="euiSpacer euiSpacer--m"
|
||||
/>
|
||||
</EuiSpacer>
|
||||
<EuiText
|
||||
<p
|
||||
data-test-subj="linkToVisualizeParagraph"
|
||||
>
|
||||
<div
|
||||
className="euiText euiText--medium"
|
||||
data-test-subj="linkToVisualizeParagraph"
|
||||
<EuiButton
|
||||
data-test-subj="addVisualizationButton"
|
||||
fill={true}
|
||||
iconSide="right"
|
||||
iconType="arrowDown"
|
||||
>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
defaultMessage="If you haven't set up any visualizations yet, {visualizeAppLink} to create your first visualization"
|
||||
id="kbn.dashboard.addVisualizationDescription3"
|
||||
values={
|
||||
Object {
|
||||
"visualizeAppLink": <a
|
||||
className="euiLink"
|
||||
href="#/visualize"
|
||||
>
|
||||
visit the Visualize app
|
||||
</a>,
|
||||
}
|
||||
}
|
||||
<button
|
||||
className="euiButton euiButton--primary euiButton--iconRight euiButton--fill"
|
||||
data-test-subj="addVisualizationButton"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="euiButton__content"
|
||||
>
|
||||
If you haven't set up any visualizations yet,
|
||||
<a
|
||||
className="euiLink"
|
||||
href="#/visualize"
|
||||
<EuiIcon
|
||||
aria-hidden="true"
|
||||
className="euiButton__icon"
|
||||
size="m"
|
||||
type="arrowDown"
|
||||
>
|
||||
visit the Visualize app
|
||||
</a>
|
||||
to create your first visualization
|
||||
</FormattedMessage>
|
||||
</p>
|
||||
</div>
|
||||
</EuiText>
|
||||
<EuiIconEmpty
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
|
||||
focusable="false"
|
||||
style={null}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiIcon-isLoading euiButton__icon"
|
||||
focusable="false"
|
||||
height={16}
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width={16}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</EuiIconEmpty>
|
||||
</EuiIcon>
|
||||
<span
|
||||
className="euiButton__text"
|
||||
>
|
||||
Create new
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</EuiButton>
|
||||
</p>
|
||||
</div>
|
||||
</EuiPanel>
|
||||
</EuiPageContent>
|
||||
|
|
|
|||
|
|
@ -47,4 +47,15 @@ describe('DashboardEmptyScreen', () => {
|
|||
const paragraph = findTestSubject(component, 'linkToVisualizeParagraph');
|
||||
expect(paragraph.length).toBe(0);
|
||||
});
|
||||
|
||||
test('when specified, prop onVisualizeClick is called correctly', () => {
|
||||
const onVisualizeClick = jest.fn();
|
||||
const component = mountComponent({
|
||||
...defaultProps,
|
||||
...{ showLinkToVisualize: true, onVisualizeClick },
|
||||
});
|
||||
const button = findTestSubject(component, 'addVisualizationButton');
|
||||
button.simulate('click');
|
||||
expect(onVisualizeClick).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import _ from 'lodash';
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import React from 'react';
|
||||
import angular from 'angular';
|
||||
import { uniq, noop } from 'lodash';
|
||||
import { uniq } from 'lodash';
|
||||
|
||||
import { Subscription } from 'rxjs';
|
||||
import { DashboardEmptyScreen, DashboardEmptyScreenProps } from './dashboard_empty_screen';
|
||||
|
|
@ -53,6 +53,7 @@ import {
|
|||
ErrorEmbeddable,
|
||||
ViewMode,
|
||||
openAddPanelFlyout,
|
||||
EmbeddableFactoryNotFoundError,
|
||||
} from '../../../embeddable_api/public/np_ready/public';
|
||||
import { DashboardAppState, NavAction, ConfirmModalFn, SavedDashboardPanel } from './types';
|
||||
|
||||
|
|
@ -145,16 +146,20 @@ export class DashboardAppController {
|
|||
}
|
||||
$scope.showSaveQuery = dashboardCapabilities.saveQuery as boolean;
|
||||
|
||||
$scope.getShouldShowEditHelp = () =>
|
||||
const getShouldShowEditHelp = () =>
|
||||
!dashboardStateManager.getPanels().length &&
|
||||
dashboardStateManager.getIsEditMode() &&
|
||||
!dashboardConfig.getHideWriteControls();
|
||||
|
||||
$scope.getShouldShowViewHelp = () =>
|
||||
const getShouldShowViewHelp = () =>
|
||||
!dashboardStateManager.getPanels().length &&
|
||||
dashboardStateManager.getIsViewMode() &&
|
||||
!dashboardConfig.getHideWriteControls();
|
||||
|
||||
const addVisualization = () => {
|
||||
navActions[TopNavIds.VISUALIZE]();
|
||||
};
|
||||
|
||||
const updateIndexPatterns = (container?: DashboardContainer) => {
|
||||
if (!container || isErrorEmbeddable(container)) {
|
||||
return;
|
||||
|
|
@ -189,7 +194,7 @@ export class DashboardAppController {
|
|||
showLinkToVisualize: shouldShowEditHelp,
|
||||
};
|
||||
if (shouldShowEditHelp) {
|
||||
emptyScreenProps.onVisualizeClick = noop;
|
||||
emptyScreenProps.onVisualizeClick = addVisualization;
|
||||
}
|
||||
return emptyScreenProps;
|
||||
};
|
||||
|
|
@ -205,8 +210,8 @@ export class DashboardAppController {
|
|||
if (dashboardContainer && !isErrorEmbeddable(dashboardContainer)) {
|
||||
expandedPanelId = dashboardContainer.getInput().expandedPanelId;
|
||||
}
|
||||
const shouldShowEditHelp = $scope.getShouldShowEditHelp();
|
||||
const shouldShowViewHelp = $scope.getShouldShowViewHelp();
|
||||
const shouldShowEditHelp = getShouldShowEditHelp();
|
||||
const shouldShowViewHelp = getShouldShowViewHelp();
|
||||
return {
|
||||
id: dashboardStateManager.savedDashboard.id || '',
|
||||
filters: queryFilter.getFilters(),
|
||||
|
|
@ -261,8 +266,8 @@ export class DashboardAppController {
|
|||
dashboardContainer = container;
|
||||
|
||||
dashboardContainer.renderEmpty = () => {
|
||||
const shouldShowEditHelp = $scope.getShouldShowEditHelp();
|
||||
const shouldShowViewHelp = $scope.getShouldShowViewHelp();
|
||||
const shouldShowEditHelp = getShouldShowEditHelp();
|
||||
const shouldShowViewHelp = getShouldShowViewHelp();
|
||||
const isEmptyState = shouldShowEditHelp || shouldShowViewHelp;
|
||||
return isEmptyState ? (
|
||||
<DashboardEmptyScreen {...getEmptyScreenProps(shouldShowEditHelp)} />
|
||||
|
|
@ -759,7 +764,17 @@ export class DashboardAppController {
|
|||
}
|
||||
};
|
||||
|
||||
navActions[TopNavIds.VISUALIZE] = async () => {};
|
||||
navActions[TopNavIds.VISUALIZE] = async () => {
|
||||
const type = 'visualization';
|
||||
const factory = embeddables.getEmbeddableFactory(type);
|
||||
if (!factory) {
|
||||
throw new EmbeddableFactoryNotFoundError(type);
|
||||
}
|
||||
const explicitInput = await factory.getExplicitInput();
|
||||
if (dashboardContainer) {
|
||||
await dashboardContainer.addNewEmbeddable(type, explicitInput);
|
||||
}
|
||||
};
|
||||
|
||||
navActions[TopNavIds.OPTIONS] = anchorElement => {
|
||||
showOptionsPopover({
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
|
||||
import { I18nProvider } from '@kbn/i18n/react';
|
||||
import {
|
||||
EuiIcon,
|
||||
EuiLink,
|
||||
|
|
@ -26,6 +26,7 @@ import {
|
|||
EuiPageBody,
|
||||
EuiPage,
|
||||
EuiText,
|
||||
EuiButton,
|
||||
} from '@elastic/eui';
|
||||
import * as constants from './dashboard_empty_screen_constants';
|
||||
|
||||
|
|
@ -38,23 +39,20 @@ export interface DashboardEmptyScreenProps {
|
|||
export function DashboardEmptyScreen({
|
||||
showLinkToVisualize,
|
||||
onLinkClick,
|
||||
onVisualizeClick,
|
||||
}: DashboardEmptyScreenProps) {
|
||||
const linkToVisualizeParagraph = (
|
||||
<EuiText data-test-subj="linkToVisualizeParagraph">
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="kbn.dashboard.addVisualizationDescription3"
|
||||
defaultMessage="If you haven't set up any visualizations yet, {visualizeAppLink} to create your first visualization"
|
||||
values={{
|
||||
visualizeAppLink: (
|
||||
<a className="euiLink" href="#/visualize">
|
||||
{constants.visualizeAppLinkTest}
|
||||
</a>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
<p data-test-subj="linkToVisualizeParagraph">
|
||||
<EuiButton
|
||||
iconSide="right"
|
||||
fill
|
||||
iconType="arrowDown"
|
||||
onClick={onVisualizeClick}
|
||||
data-test-subj="addVisualizationButton"
|
||||
>
|
||||
{constants.createNewVisualizationButton}
|
||||
</EuiButton>
|
||||
</p>
|
||||
);
|
||||
const paragraph = (
|
||||
description1: string,
|
||||
|
|
@ -96,7 +94,7 @@ export function DashboardEmptyScreen({
|
|||
);
|
||||
return (
|
||||
<I18nProvider>
|
||||
<EuiPage className="dshStartScreen" restrictWidth={'36em'}>
|
||||
<EuiPage className="dshStartScreen" restrictWidth="36em">
|
||||
<EuiPageBody>
|
||||
<EuiPageContent verticalPosition="center" horizontalPosition="center">
|
||||
<EuiIcon type="dashboardApp" size="xxl" color="subdued" />
|
||||
|
|
|
|||
|
|
@ -76,3 +76,9 @@ export const visualizeAppLinkTest: string = i18n.translate(
|
|||
defaultMessage: 'visit the Visualize app',
|
||||
}
|
||||
);
|
||||
export const createNewVisualizationButton: string = i18n.translate(
|
||||
'kbn.dashboard.createNewVisualizationButton',
|
||||
{
|
||||
defaultMessage: 'Create new',
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -242,13 +242,70 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
|
|||
aria-live="polite"
|
||||
class="euiScreenReaderOnly"
|
||||
>
|
||||
1 type found
|
||||
2 types found
|
||||
</span>
|
||||
<div
|
||||
class="euiKeyPadMenu visNewVisDialog__types"
|
||||
data-test-subj="visNewDialogTypes"
|
||||
role="menu"
|
||||
>
|
||||
<button
|
||||
aria-describedby="visTypeDescription-visWithAliasUrl"
|
||||
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
|
||||
data-test-subj="visType-visWithAliasUrl"
|
||||
data-vis-stage="alias"
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="euiKeyPadMenuItem__inner"
|
||||
>
|
||||
<span
|
||||
class="euiKeyPadMenuItem__betaBadgeWrapper"
|
||||
>
|
||||
<span
|
||||
class="euiToolTipAnchor"
|
||||
>
|
||||
<span
|
||||
class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="euiIcon euiIcon--medium euiIcon-isLoading euiBetaBadge__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="euiKeyPadMenuItem__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="euiIcon euiIcon--large euiIcon--secondary euiIcon-isLoading"
|
||||
focusable="false"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
class="euiKeyPadMenuItem__label"
|
||||
>
|
||||
<span
|
||||
data-test-subj="visTypeTitle"
|
||||
>
|
||||
Vis with alias Url
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
aria-describedby="visTypeDescription-visWithSearch"
|
||||
class="euiKeyPadMenuItem visNewVisDialog__type"
|
||||
|
|
@ -510,13 +567,70 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
|
|||
aria-live="polite"
|
||||
class="euiScreenReaderOnly"
|
||||
>
|
||||
1 type found
|
||||
2 types found
|
||||
</span>
|
||||
<div
|
||||
class="euiKeyPadMenu visNewVisDialog__types"
|
||||
data-test-subj="visNewDialogTypes"
|
||||
role="menu"
|
||||
>
|
||||
<button
|
||||
aria-describedby="visTypeDescription-visWithAliasUrl"
|
||||
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
|
||||
data-test-subj="visType-visWithAliasUrl"
|
||||
data-vis-stage="alias"
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="euiKeyPadMenuItem__inner"
|
||||
>
|
||||
<span
|
||||
class="euiKeyPadMenuItem__betaBadgeWrapper"
|
||||
>
|
||||
<span
|
||||
class="euiToolTipAnchor"
|
||||
>
|
||||
<span
|
||||
class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="euiIcon euiIcon--medium euiIcon-isLoading euiBetaBadge__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="euiKeyPadMenuItem__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="euiIcon euiIcon--large euiIcon--secondary euiIcon-isLoading"
|
||||
focusable="false"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
class="euiKeyPadMenuItem__label"
|
||||
>
|
||||
<span
|
||||
data-test-subj="visTypeTitle"
|
||||
>
|
||||
Vis with alias Url
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
aria-describedby="visTypeDescription-visWithSearch"
|
||||
class="euiKeyPadMenuItem visNewVisDialog__type"
|
||||
|
|
@ -717,13 +831,70 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
|
|||
aria-live="polite"
|
||||
class="euiScreenReaderOnly"
|
||||
>
|
||||
1 type found
|
||||
2 types found
|
||||
</span>
|
||||
<div
|
||||
class="euiKeyPadMenu visNewVisDialog__types"
|
||||
data-test-subj="visNewDialogTypes"
|
||||
role="menu"
|
||||
>
|
||||
<button
|
||||
aria-describedby="visTypeDescription-visWithAliasUrl"
|
||||
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
|
||||
data-test-subj="visType-visWithAliasUrl"
|
||||
data-vis-stage="alias"
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="euiKeyPadMenuItem__inner"
|
||||
>
|
||||
<span
|
||||
class="euiKeyPadMenuItem__betaBadgeWrapper"
|
||||
>
|
||||
<span
|
||||
class="euiToolTipAnchor"
|
||||
>
|
||||
<span
|
||||
class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="euiIcon euiIcon--medium euiIcon-isLoading euiBetaBadge__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="euiKeyPadMenuItem__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="euiIcon euiIcon--large euiIcon--secondary euiIcon-isLoading"
|
||||
focusable="false"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
class="euiKeyPadMenuItem__label"
|
||||
>
|
||||
<span
|
||||
data-test-subj="visTypeTitle"
|
||||
>
|
||||
Vis with alias Url
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
aria-describedby="visTypeDescription-visWithSearch"
|
||||
class="euiKeyPadMenuItem visNewVisDialog__type"
|
||||
|
|
@ -1040,11 +1211,11 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
|
|||
id="kbn.visualize.newVisWizard.resultsFound"
|
||||
values={
|
||||
Object {
|
||||
"resultCount": 1,
|
||||
"resultCount": 2,
|
||||
}
|
||||
}
|
||||
>
|
||||
1 type found
|
||||
2 types found
|
||||
</FormattedMessage>
|
||||
</span>
|
||||
</EuiScreenReaderOnly>
|
||||
|
|
@ -1057,6 +1228,144 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
|
|||
data-test-subj="visNewDialogTypes"
|
||||
role="menu"
|
||||
>
|
||||
<EuiKeyPadMenuItemButton
|
||||
aria-describedby="visTypeDescription-visWithAliasUrl"
|
||||
betaBadgeIconType="popout"
|
||||
betaBadgeLabel="Kibana application"
|
||||
betaBadgeTooltipContent="Opens a Kibana application that is outside of Visualize."
|
||||
className="visNewVisDialog__type"
|
||||
data-test-subj="visType-visWithAliasUrl"
|
||||
data-vis-stage="alias"
|
||||
disabled={false}
|
||||
key="visWithAliasUrl"
|
||||
label={
|
||||
<span
|
||||
data-test-subj="visTypeTitle"
|
||||
>
|
||||
Vis with alias Url
|
||||
</span>
|
||||
}
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
role="menuitem"
|
||||
>
|
||||
<button
|
||||
aria-describedby="visTypeDescription-visWithAliasUrl"
|
||||
className="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
|
||||
data-test-subj="visType-visWithAliasUrl"
|
||||
data-vis-stage="alias"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="euiKeyPadMenuItem__inner"
|
||||
>
|
||||
<span
|
||||
className="euiKeyPadMenuItem__betaBadgeWrapper"
|
||||
>
|
||||
<EuiBetaBadge
|
||||
className="euiKeyPadMenuItem__betaBadge"
|
||||
iconType="popout"
|
||||
label="Kibana application"
|
||||
tooltipContent="Opens a Kibana application that is outside of Visualize."
|
||||
>
|
||||
<EuiToolTip
|
||||
content="Opens a Kibana application that is outside of Visualize."
|
||||
delay="regular"
|
||||
position="top"
|
||||
title="Kibana application"
|
||||
>
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<span
|
||||
className="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
tabIndex={0}
|
||||
>
|
||||
<EuiIcon
|
||||
aria-hidden="true"
|
||||
className="euiBetaBadge__icon"
|
||||
size="m"
|
||||
type="popout"
|
||||
>
|
||||
<EuiIconEmpty
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiIcon-isLoading euiBetaBadge__icon"
|
||||
focusable="false"
|
||||
style={null}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiIcon-isLoading euiBetaBadge__icon"
|
||||
focusable="false"
|
||||
height={16}
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width={16}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</EuiIconEmpty>
|
||||
</EuiIcon>
|
||||
</span>
|
||||
</span>
|
||||
</EuiToolTip>
|
||||
</EuiBetaBadge>
|
||||
</span>
|
||||
<div
|
||||
className="euiKeyPadMenuItem__icon"
|
||||
>
|
||||
<VisTypeIcon>
|
||||
<EuiIcon
|
||||
aria-hidden="true"
|
||||
color="secondary"
|
||||
size="l"
|
||||
type="empty"
|
||||
>
|
||||
<EuiIconEmpty
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--large euiIcon--secondary euiIcon-isLoading"
|
||||
focusable="false"
|
||||
style={null}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--large euiIcon--secondary euiIcon-isLoading"
|
||||
focusable="false"
|
||||
height={16}
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width={16}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</EuiIconEmpty>
|
||||
</EuiIcon>
|
||||
</VisTypeIcon>
|
||||
</div>
|
||||
<p
|
||||
className="euiKeyPadMenuItem__label"
|
||||
>
|
||||
<span
|
||||
data-test-subj="visTypeTitle"
|
||||
>
|
||||
Vis with alias Url
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</EuiKeyPadMenuItemButton>
|
||||
<EuiKeyPadMenuItemButton
|
||||
aria-describedby="visTypeDescription-visWithSearch"
|
||||
className="visNewVisDialog__type"
|
||||
|
|
@ -1588,6 +1897,63 @@ exports[`NewVisModal should render as expected 1`] = `
|
|||
</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
aria-describedby="visTypeDescription-visWithAliasUrl"
|
||||
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
|
||||
data-test-subj="visType-visWithAliasUrl"
|
||||
data-vis-stage="alias"
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="euiKeyPadMenuItem__inner"
|
||||
>
|
||||
<span
|
||||
class="euiKeyPadMenuItem__betaBadgeWrapper"
|
||||
>
|
||||
<span
|
||||
class="euiToolTipAnchor"
|
||||
>
|
||||
<span
|
||||
class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="euiIcon euiIcon--medium euiIcon-isLoading euiBetaBadge__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="euiKeyPadMenuItem__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="euiIcon euiIcon--large euiIcon--secondary euiIcon-isLoading"
|
||||
focusable="false"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
class="euiKeyPadMenuItem__label"
|
||||
>
|
||||
<span
|
||||
data-test-subj="visTypeTitle"
|
||||
>
|
||||
Vis with alias Url
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
aria-describedby="visTypeDescription-visWithSearch"
|
||||
class="euiKeyPadMenuItem visNewVisDialog__type"
|
||||
|
|
@ -1853,6 +2219,63 @@ exports[`NewVisModal should render as expected 1`] = `
|
|||
</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
aria-describedby="visTypeDescription-visWithAliasUrl"
|
||||
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
|
||||
data-test-subj="visType-visWithAliasUrl"
|
||||
data-vis-stage="alias"
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="euiKeyPadMenuItem__inner"
|
||||
>
|
||||
<span
|
||||
class="euiKeyPadMenuItem__betaBadgeWrapper"
|
||||
>
|
||||
<span
|
||||
class="euiToolTipAnchor"
|
||||
>
|
||||
<span
|
||||
class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="euiIcon euiIcon--medium euiIcon-isLoading euiBetaBadge__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="euiKeyPadMenuItem__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="euiIcon euiIcon--large euiIcon--secondary euiIcon-isLoading"
|
||||
focusable="false"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
class="euiKeyPadMenuItem__label"
|
||||
>
|
||||
<span
|
||||
data-test-subj="visTypeTitle"
|
||||
>
|
||||
Vis with alias Url
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
aria-describedby="visTypeDescription-visWithSearch"
|
||||
class="euiKeyPadMenuItem visNewVisDialog__type"
|
||||
|
|
@ -2057,6 +2480,63 @@ exports[`NewVisModal should render as expected 1`] = `
|
|||
</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
aria-describedby="visTypeDescription-visWithAliasUrl"
|
||||
class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
|
||||
data-test-subj="visType-visWithAliasUrl"
|
||||
data-vis-stage="alias"
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="euiKeyPadMenuItem__inner"
|
||||
>
|
||||
<span
|
||||
class="euiKeyPadMenuItem__betaBadgeWrapper"
|
||||
>
|
||||
<span
|
||||
class="euiToolTipAnchor"
|
||||
>
|
||||
<span
|
||||
class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="euiIcon euiIcon--medium euiIcon-isLoading euiBetaBadge__icon"
|
||||
focusable="false"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
class="euiKeyPadMenuItem__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="euiIcon euiIcon--large euiIcon--secondary euiIcon-isLoading"
|
||||
focusable="false"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
class="euiKeyPadMenuItem__label"
|
||||
>
|
||||
<span
|
||||
data-test-subj="visTypeTitle"
|
||||
>
|
||||
Vis with alias Url
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
aria-describedby="visTypeDescription-visWithSearch"
|
||||
class="euiKeyPadMenuItem visNewVisDialog__type"
|
||||
|
|
@ -2422,6 +2902,144 @@ exports[`NewVisModal should render as expected 1`] = `
|
|||
</div>
|
||||
</button>
|
||||
</EuiKeyPadMenuItemButton>
|
||||
<EuiKeyPadMenuItemButton
|
||||
aria-describedby="visTypeDescription-visWithAliasUrl"
|
||||
betaBadgeIconType="popout"
|
||||
betaBadgeLabel="Kibana application"
|
||||
betaBadgeTooltipContent="Opens a Kibana application that is outside of Visualize."
|
||||
className="visNewVisDialog__type"
|
||||
data-test-subj="visType-visWithAliasUrl"
|
||||
data-vis-stage="alias"
|
||||
disabled={false}
|
||||
key="visWithAliasUrl"
|
||||
label={
|
||||
<span
|
||||
data-test-subj="visTypeTitle"
|
||||
>
|
||||
Vis with alias Url
|
||||
</span>
|
||||
}
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
role="menuitem"
|
||||
>
|
||||
<button
|
||||
aria-describedby="visTypeDescription-visWithAliasUrl"
|
||||
className="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
|
||||
data-test-subj="visType-visWithAliasUrl"
|
||||
data-vis-stage="alias"
|
||||
disabled={false}
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
role="menuitem"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
className="euiKeyPadMenuItem__inner"
|
||||
>
|
||||
<span
|
||||
className="euiKeyPadMenuItem__betaBadgeWrapper"
|
||||
>
|
||||
<EuiBetaBadge
|
||||
className="euiKeyPadMenuItem__betaBadge"
|
||||
iconType="popout"
|
||||
label="Kibana application"
|
||||
tooltipContent="Opens a Kibana application that is outside of Visualize."
|
||||
>
|
||||
<EuiToolTip
|
||||
content="Opens a Kibana application that is outside of Visualize."
|
||||
delay="regular"
|
||||
position="top"
|
||||
title="Kibana application"
|
||||
>
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<span
|
||||
className="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
tabIndex={0}
|
||||
>
|
||||
<EuiIcon
|
||||
aria-hidden="true"
|
||||
className="euiBetaBadge__icon"
|
||||
size="m"
|
||||
type="popout"
|
||||
>
|
||||
<EuiIconEmpty
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiIcon-isLoading euiBetaBadge__icon"
|
||||
focusable="false"
|
||||
style={null}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--medium euiIcon-isLoading euiBetaBadge__icon"
|
||||
focusable="false"
|
||||
height={16}
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width={16}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</EuiIconEmpty>
|
||||
</EuiIcon>
|
||||
</span>
|
||||
</span>
|
||||
</EuiToolTip>
|
||||
</EuiBetaBadge>
|
||||
</span>
|
||||
<div
|
||||
className="euiKeyPadMenuItem__icon"
|
||||
>
|
||||
<VisTypeIcon>
|
||||
<EuiIcon
|
||||
aria-hidden="true"
|
||||
color="secondary"
|
||||
size="l"
|
||||
type="empty"
|
||||
>
|
||||
<EuiIconEmpty
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--large euiIcon--secondary euiIcon-isLoading"
|
||||
focusable="false"
|
||||
style={null}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="euiIcon euiIcon--large euiIcon--secondary euiIcon-isLoading"
|
||||
focusable="false"
|
||||
height={16}
|
||||
style={null}
|
||||
viewBox="0 0 16 16"
|
||||
width={16}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
/>
|
||||
</EuiIconEmpty>
|
||||
</EuiIcon>
|
||||
</VisTypeIcon>
|
||||
</div>
|
||||
<p
|
||||
className="euiKeyPadMenuItem__label"
|
||||
>
|
||||
<span
|
||||
data-test-subj="visTypeTitle"
|
||||
>
|
||||
Vis with alias Url
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</EuiKeyPadMenuItemButton>
|
||||
<EuiKeyPadMenuItemButton
|
||||
aria-describedby="visTypeDescription-visWithSearch"
|
||||
className="visNewVisDialog__type"
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ import { NewVisModal } from './new_vis_modal';
|
|||
import { SavedObjectsStart } from 'kibana/public';
|
||||
|
||||
describe('NewVisModal', () => {
|
||||
const { location } = window;
|
||||
const defaultVisTypeParams = {
|
||||
hidden: false,
|
||||
visualization: class Controller {
|
||||
|
|
@ -51,6 +52,12 @@ describe('NewVisModal', () => {
|
|||
stage: 'production',
|
||||
...defaultVisTypeParams,
|
||||
},
|
||||
{
|
||||
name: 'visWithAliasUrl',
|
||||
title: 'Vis with alias Url',
|
||||
stage: 'production',
|
||||
aliasUrl: '/aliasUrl',
|
||||
},
|
||||
];
|
||||
const visTypes: TypesStart = {
|
||||
get: (id: string) => {
|
||||
|
|
@ -69,6 +76,10 @@ describe('NewVisModal', () => {
|
|||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
window.location = location;
|
||||
});
|
||||
|
||||
it('should render as expected', () => {
|
||||
const wrapper = mountWithIntl(
|
||||
<NewVisModal
|
||||
|
|
@ -132,6 +143,26 @@ describe('NewVisModal', () => {
|
|||
visButton.simulate('click');
|
||||
expect(window.location.assign).toBeCalledWith('#/visualize/create?type=vis&foo=true&bar=42');
|
||||
});
|
||||
|
||||
it('closes if visualization with aliasUrl and addToDashboard in editorParams', () => {
|
||||
const onClose = jest.fn();
|
||||
window.location.assign = jest.fn();
|
||||
const wrapper = mountWithIntl(
|
||||
<NewVisModal
|
||||
isOpen={true}
|
||||
onClose={onClose}
|
||||
visTypesRegistry={visTypes}
|
||||
editorParams={['foo=true', 'bar=42', 'addToDashboard']}
|
||||
addBasePath={addBasePath}
|
||||
uiSettings={uiSettings}
|
||||
savedObjects={{} as SavedObjectsStart}
|
||||
/>
|
||||
);
|
||||
const visButton = wrapper.find('button[data-test-subj="visType-visWithAliasUrl"]');
|
||||
visButton.simulate('click');
|
||||
expect(window.location.assign).toBeCalledWith('testbasepath/aliasUrl');
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('filter for visualization types', () => {
|
||||
|
|
|
|||
|
|
@ -132,8 +132,10 @@ class NewVisModal extends React.Component<TypeSelectionProps, TypeSelectionState
|
|||
this.trackUiMetric(METRIC_TYPE.CLICK, visType.name);
|
||||
|
||||
if ('aliasUrl' in visType) {
|
||||
window.location.href = this.props.addBasePath(visType.aliasUrl);
|
||||
|
||||
window.location.assign(this.props.addBasePath(visType.aliasUrl));
|
||||
if (this.props.editorParams && this.props.editorParams.includes('addToDashboard')) {
|
||||
this.props.onClose();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
.dshLayout-isMaximizedPanel {
|
||||
height: 100% !important; /* 1. */
|
||||
width: 100%;
|
||||
position: absolute !important;
|
||||
position: absolute !important; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
.dshDashboardViewport {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: $euiColorEmptyShade;
|
||||
}
|
||||
|
||||
.dshDashboardViewport-withMargins {
|
||||
|
|
|
|||
|
|
@ -24,6 +24,8 @@ export default function ({ getService, getPageObjects }) {
|
|||
const esArchiver = getService('esArchiver');
|
||||
const kibanaServer = getService('kibanaServer');
|
||||
const dashboardAddPanel = getService('dashboardAddPanel');
|
||||
const dashboardVisualizations = getService('dashboardVisualizations');
|
||||
const dashboardExpect = getService('dashboardExpect');
|
||||
const PageObjects = getPageObjects(['common', 'dashboard']);
|
||||
|
||||
describe('empty dashboard', () => {
|
||||
|
|
@ -54,6 +56,12 @@ export default function ({ getService, getPageObjects }) {
|
|||
expect(isAddPanelOpen).to.be(true);
|
||||
});
|
||||
|
||||
it('should add new visualization from dashboard', async () => {
|
||||
await testSubjects.click('addVisualizationButton');
|
||||
await dashboardVisualizations.createAndAddMarkdown({ name: 'Dashboard Test Markdown', markdown: 'Markdown text' }, false);
|
||||
await PageObjects.dashboard.waitForRenderComplete();
|
||||
await dashboardExpect.markdownWithValuesExists(['Markdown text']);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -73,14 +73,16 @@ export function DashboardVisualizationProvider({ getService, getPageObjects }) {
|
|||
await dashboardAddPanel.addSavedSearch(name);
|
||||
}
|
||||
|
||||
async createAndAddMarkdown({ name, markdown }) {
|
||||
async createAndAddMarkdown({ name, markdown }, checkForAddPanel = true) {
|
||||
log.debug(`createAndAddMarkdown(${markdown})`);
|
||||
const inViewMode = await PageObjects.dashboard.getIsInViewMode();
|
||||
if (inViewMode) {
|
||||
await PageObjects.dashboard.switchToEditMode();
|
||||
}
|
||||
await dashboardAddPanel.ensureAddPanelIsShowing();
|
||||
await dashboardAddPanel.clickAddNewEmbeddableLink('visualization');
|
||||
if (checkForAddPanel) {
|
||||
await dashboardAddPanel.ensureAddPanelIsShowing();
|
||||
await dashboardAddPanel.clickAddNewEmbeddableLink('visualization');
|
||||
}
|
||||
await PageObjects.visualize.clickMarkdownWidget();
|
||||
await PageObjects.visualize.setMarkdownTxt(markdown);
|
||||
await PageObjects.visualize.clickGo();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue