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

[Integrations] Added link in old Add Data description and fixed alignment in cards (#116213)

Browse source
This commit is contained in:
Caroline Horn 2021-10-26 19:46:51 -04:00 committed by GitHub
parent fac628623e
commit 5666bd79fd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 55 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/plugins/home/public/application/components/tutorial_directory.js
View file

@ -9,7 +9,7 @@
import _ from 'lodash'; import _ from 'lodash';
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { EuiFlexItem, EuiFlexGrid, EuiFlexGroup } from '@elastic/eui'; import { EuiFlexItem, EuiFlexGrid, EuiFlexGroup, EuiLink } from '@elastic/eui';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n'; import { i18n } from '@kbn/i18n';
import { Synopsis } from './synopsis'; import { Synopsis } from './synopsis';
@ -224,7 +224,17 @@ class TutorialDirectoryUi extends React.Component {
description: ( description: (
<FormattedMessage <FormattedMessage
id="home.tutorial.addDataToKibanaDescription" id="home.tutorial.addDataToKibanaDescription"
defaultMessage="In addition to adding integrations, you can try our sample data, or upload your own data." defaultMessage="In addition to adding {integrationsLink}, you can try our sample data or upload your own data."
values={{
integrationsLink: (
<EuiLink href={this.props.addBasePath(`/app/integrations/browse`)}>
<FormattedMessage
id="home.tutorial.addDataToKibanaDescription.integrations"
defaultMessage="integrations"
/>
</EuiLink>
),
}}
/> />
), ),
tabs, tabs,

58
src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap generated
View file

@ -15,16 +15,11 @@ exports[`ElasticAgentCard props button 1`] = `
<EuiCard <EuiCard
description="Use Elastic Agent for a simple, unified way to collect data from your machines." description="Use Elastic Agent for a simple, unified way to collect data from your machines."
footer={ footer={
<div <EuiButton
className="eui-textCenter" fill={true}
> >
Button Button
<EuiButton </EuiButton>
fill={true}
>
Button
</EuiButton>
</div>
} }
href="/app/integrations/browse" href="/app/integrations/browse"
image="/plugins/kibanaReact/assets/elastic_agent_card.svg" image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
@ -55,15 +50,11 @@ exports[`ElasticAgentCard props category 1`] = `
<EuiCard <EuiCard
description="Use Elastic Agent for a simple, unified way to collect data from your machines." description="Use Elastic Agent for a simple, unified way to collect data from your machines."
footer={ footer={
<div <EuiButton
className="eui-textCenter" fill={true}
> >
<EuiButton Add Elastic Agent
fill={true} </EuiButton>
>
Add Elastic Agent
</EuiButton>
</div>
} }
href="/app/integrations/browse/custom" href="/app/integrations/browse/custom"
image="/plugins/kibanaReact/assets/elastic_agent_card.svg" image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
@ -94,16 +85,11 @@ exports[`ElasticAgentCard props href 1`] = `
<EuiCard <EuiCard
description="Use Elastic Agent for a simple, unified way to collect data from your machines." description="Use Elastic Agent for a simple, unified way to collect data from your machines."
footer={ footer={
<div <EuiButton
className="eui-textCenter" fill={true}
> >
Button Button
<EuiButton </EuiButton>
fill={true}
>
Button
</EuiButton>
</div>
} }
href="#" href="#"
image="/plugins/kibanaReact/assets/elastic_agent_card.svg" image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
@ -135,15 +121,11 @@ exports[`ElasticAgentCard props recommended 1`] = `
betaBadgeLabel="Recommended" betaBadgeLabel="Recommended"
description="Use Elastic Agent for a simple, unified way to collect data from your machines." description="Use Elastic Agent for a simple, unified way to collect data from your machines."
footer={ footer={
<div <EuiButton
className="eui-textCenter" fill={true}
> >
<EuiButton Add Elastic Agent
fill={true} </EuiButton>
>
Add Elastic Agent
</EuiButton>
</div>
} }
href="/app/integrations/browse" href="/app/integrations/browse"
image="/plugins/kibanaReact/assets/elastic_agent_card.svg" image="/plugins/kibanaReact/assets/elastic_agent_card.svg"
@ -174,15 +156,11 @@ exports[`ElasticAgentCard renders 1`] = `
<EuiCard <EuiCard
description="Use Elastic Agent for a simple, unified way to collect data from your machines." description="Use Elastic Agent for a simple, unified way to collect data from your machines."
footer={ footer={
<div <EuiButton
className="eui-textCenter" fill={true}
> >
<EuiButton Add Elastic Agent
fill={true} </EuiButton>
>
Add Elastic Agent
</EuiButton>
</div>
} }
href="/app/integrations/browse" href="/app/integrations/browse"
image="/plugins/kibanaReact/assets/elastic_agent_card.svg" image="/plugins/kibanaReact/assets/elastic_agent_card.svg"

66
src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/no_data_card.test.tsx.snap generated
View file

@ -2,7 +2,7 @@
exports[`NoDataCard props button 1`] = ` exports[`NoDataCard props button 1`] = `
<div <div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned" class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
> >
<div <div
class="euiCard__content" class="euiCard__content"
@ -25,31 +25,27 @@ exports[`NoDataCard props button 1`] = `
<div <div
class="euiCard__footer" class="euiCard__footer"
> >
<div <button
class="eui-textCenter" class="euiButton euiButton--primary euiButton--fill"
type="button"
> >
<button <span
class="euiButton euiButton--primary euiButton--fill" class="euiButtonContent euiButton__content"
type="button"
> >
<span <span
class="euiButtonContent euiButton__content" class="euiButton__text"
> >
<span Button
class="euiButton__text"
>
Button
</span>
</span> </span>
</button> </span>
</div> </button>
</div> </div>
</div> </div>
`; `;
exports[`NoDataCard props href 1`] = ` exports[`NoDataCard props href 1`] = `
<div <div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable" class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--isClickable"
> >
<div <div
class="euiCard__content" class="euiCard__content"
@ -79,31 +75,27 @@ exports[`NoDataCard props href 1`] = `
<div <div
class="euiCard__footer" class="euiCard__footer"
> >
<div <button
class="eui-textCenter" class="euiButton euiButton--primary euiButton--fill"
type="button"
> >
<button <span
class="euiButton euiButton--primary euiButton--fill" class="euiButtonContent euiButton__content"
type="button"
> >
<span <span
class="euiButtonContent euiButton__content" class="euiButton__text"
> >
<span Button
class="euiButton__text"
>
Button
</span>
</span> </span>
</button> </span>
</div> </button>
</div> </div>
</div> </div>
`; `;
exports[`NoDataCard props recommended 1`] = ` exports[`NoDataCard props recommended 1`] = `
<div <div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned euiCard--hasBetaBadge" class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned euiCard--hasBetaBadge"
> >
<div <div
class="euiCard__content" class="euiCard__content"
@ -134,19 +126,12 @@ exports[`NoDataCard props recommended 1`] = `
Recommended Recommended
</span> </span>
</span> </span>
<div
class="euiCard__footer"
>
<div
class="eui-textCenter"
/>
</div>
</div> </div>
`; `;
exports[`NoDataCard renders 1`] = ` exports[`NoDataCard renders 1`] = `
<div <div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned" class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned"
> >
<div <div
class="euiCard__content" class="euiCard__content"
@ -166,12 +151,5 @@ exports[`NoDataCard renders 1`] = `
</p> </p>
</div> </div>
</div> </div>
<div
class="euiCard__footer"
>
<div
class="eui-textCenter"
/>
</div>
</div> </div>
`; `;

8
src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx
View file

@ -44,7 +44,6 @@ export const ElasticAgentCard: FunctionComponent<ElasticAgentCardProps> = ({
<EuiCard <EuiCard
paddingSize="l" paddingSize="l"
image={image} image={image}
textAlign="left"
title={ title={
<EuiTextColor color="default"> <EuiTextColor color="default">
{i18n.translate('kibana-react.noDataPage.elasticAgentCard.noPermission.title', { {i18n.translate('kibana-react.noDataPage.elasticAgentCard.noPermission.title', {
@ -93,12 +92,7 @@ export const ElasticAgentCard: FunctionComponent<ElasticAgentCardProps> = ({
defaultMessage: `Use Elastic Agent for a simple, unified way to collect data from your machines.`, defaultMessage: `Use Elastic Agent for a simple, unified way to collect data from your machines.`,
})} })}
betaBadgeLabel={recommended ? NO_DATA_RECOMMENDED : undefined} betaBadgeLabel={recommended ? NO_DATA_RECOMMENDED : undefined}
footer={ footer={footer}
<div className="eui-textCenter">
{button}
{footer}
</div>
}
layout={layout as 'vertical' | undefined} layout={layout as 'vertical' | undefined}
{...cardRest} {...cardRest}
/> />

3
src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/no_data_card.tsx
View file

@ -27,7 +27,6 @@ export const NoDataCard: FunctionComponent<NoDataPageActions> = ({
return ( return (
<EuiCard <EuiCard
paddingSize="l" paddingSize="l"
textAlign="left"
// TODO: we should require both title and description to be passed in by consumers since defaults are not adequate. // TODO: we should require both title and description to be passed in by consumers since defaults are not adequate.
// see comment: https://github.com/elastic/kibana/pull/111261/files#r708399140 // see comment: https://github.com/elastic/kibana/pull/111261/files#r708399140
title={title!} title={title!}
@ -35,7 +34,7 @@ export const NoDataCard: FunctionComponent<NoDataPageActions> = ({
defaultMessage: `Proceed without collecting data`, defaultMessage: `Proceed without collecting data`,
})} })}
betaBadgeLabel={recommended ? NO_DATA_RECOMMENDED : undefined} betaBadgeLabel={recommended ? NO_DATA_RECOMMENDED : undefined}
footer={<div className="eui-textCenter">{footer}</div>} footer={footer}
layout={layout as 'vertical' | undefined} layout={layout as 'vertical' | undefined}
{...cardRest} {...cardRest}
/> />

2
src/plugins/kibana_react/public/page_template/no_data_page/no_data_page.scss
View file

@ -1,5 +1,5 @@
.kbnNoDataPageContents__item:only-child { .kbnNoDataPageContents__item:only-child {
min-width: 400px; min-width: ($euiSize * 22.5);
@include euiBreakpoint('xs', 's') { @include euiBreakpoint('xs', 's') {
min-width: auto; min-width: auto;