Skip to content

Commit 07fec68

Browse files
gmmorrisgmmorris
committed
refactored some code in the health check and empty prompts
1 parent 5ae1583 commit 07fec68

7 files changed

Lines changed: 102 additions & 78 deletions

File tree

‎x-pack/plugins/triggers_actions_ui/public/application/components/health_check.tsx‎

Lines changed: 80 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,15 @@ import { ActionNeededPrompt } from './prompts/action_needed_prompt';
2121
interface Props {
2222
docLinks: Pick<DocLinksStart, 'ELASTIC_WEBSITE_URL' | 'DOC_LINK_VERSION'>;
2323
http: HttpSetup;
24+
alignToTop?: boolean;
2425
}
2526

26-
export const HealthCheck: React.FunctionComponent<Props> = ({ docLinks, http, children }) => {
27-
const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = docLinks;
28-
27+
export const HealthCheck: React.FunctionComponent<Props> = ({
28+
docLinks,
29+
http,
30+
children,
31+
alignToTop = false,
32+
}) => {
2933
const [alertingHealth, setAlertingHealth] = React.useState<Option<AlertingFrameworkHealth>>(none);
3034

3135
React.useEffect(() => {
@@ -42,68 +46,82 @@ export const HealthCheck: React.FunctionComponent<Props> = ({ docLinks, http, ch
4246
return healthCheck?.isSufficientlySecure && healthCheck?.hasPermanentEncryptionKey ? (
4347
<Fragment>{children}</Fragment>
4448
) : (
45-
<ActionNeededPrompt>
46-
{!healthCheck.isSufficientlySecure && !healthCheck.hasPermanentEncryptionKey ? (
47-
<p role="banner">
48-
{i18n.translate(
49-
'xpack.triggersActionsUI.components.healthCheck.tlsAndEncryptionError',
50-
{
51-
defaultMessage:
52-
'Alerting relies on API keys, which require TLS between Elasticsearch and Kibana, and a permanent Encryption Key. Learn how to ',
53-
}
54-
)}
55-
<EuiLink
56-
href={`${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/alerting-getting-started.html#alerting-setup-prerequisites`}
57-
external
58-
target="_blank"
59-
>
60-
{i18n.translate(
61-
'xpack.triggersActionsUI.components.healthCheck.tlsAndEncryptionErrorAction',
62-
{
63-
defaultMessage: 'enable TLS and a permanent Encryption Key',
64-
}
65-
)}
66-
</EuiLink>
67-
</p>
68-
) : !healthCheck.hasPermanentEncryptionKey ? (
69-
<p role="banner">
70-
{i18n.translate('xpack.triggersActionsUI.components.healthCheck.encryptionError', {
71-
defaultMessage:
72-
'Alerting relies on API keys, which requires a permanent Encryption Key. Learn how to ',
73-
})}
74-
<EuiLink
75-
href={`${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/alert-action-settings-kb.html#general-alert-action-settings`}
76-
external
77-
target="_blank"
78-
>
79-
{i18n.translate(
80-
'xpack.triggersActionsUI.components.healthCheck.encryptionErrorAction',
81-
{
82-
defaultMessage: 'set a permanent Encryption Key',
83-
}
84-
)}
85-
</EuiLink>
86-
</p>
87-
) : (
88-
<p role="banner">
89-
{i18n.translate('xpack.triggersActionsUI.components.healthCheck.tlsError', {
90-
defaultMessage:
91-
'Alerting relies on API keys, which require TLS between Elasticsearch and Kibana. Learn how to ',
92-
})}
93-
<EuiLink
94-
href={`${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/configuring-tls.html`}
95-
external
96-
target="_blank"
97-
>
98-
{i18n.translate('xpack.triggersActionsUI.components.healthCheck.tlsErrorAction', {
99-
defaultMessage: 'enable TLS',
100-
})}
101-
</EuiLink>
102-
</p>
103-
)}
49+
<ActionNeededPrompt style={alignToTop ? { marginTop: '1em ' } : {}}>
50+
<p role="banner">
51+
{!healthCheck.isSufficientlySecure && !healthCheck.hasPermanentEncryptionKey ? (
52+
<TlsAndEncryptionError docLinks={docLinks} />
53+
) : !healthCheck.hasPermanentEncryptionKey ? (
54+
<EncryptionError docLinks={docLinks} />
55+
) : (
56+
<TlsError docLinks={docLinks} />
57+
)}
58+
</p>
10459
</ActionNeededPrompt>
10560
);
10661
}
10762
)
10863
);
10964
};
65+
66+
const TlsAndEncryptionError = ({
67+
docLinks: { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION },
68+
}: Pick<Props, 'docLinks'>) => (
69+
<Fragment>
70+
{i18n.translate('xpack.triggersActionsUI.components.healthCheck.tlsAndEncryptionError', {
71+
defaultMessage:
72+
'Alerting relies on API keys, which require TLS between Elasticsearch and Kibana, and a permanent Encryption Key. Learn how to ',
73+
})}
74+
<EuiLink
75+
href={`${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/alerting-getting-started.html#alerting-setup-prerequisites`}
76+
external
77+
target="_blank"
78+
>
79+
{i18n.translate(
80+
'xpack.triggersActionsUI.components.healthCheck.tlsAndEncryptionErrorAction',
81+
{
82+
defaultMessage: 'enable TLS and a permanent Encryption Key',
83+
}
84+
)}
85+
</EuiLink>
86+
</Fragment>
87+
);
88+
89+
const EncryptionError = ({
90+
docLinks: { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION },
91+
}: Pick<Props, 'docLinks'>) => (
92+
<Fragment>
93+
{i18n.translate('xpack.triggersActionsUI.components.healthCheck.encryptionError', {
94+
defaultMessage:
95+
'Alerting relies on API keys, which requires a permanent Encryption Key. Learn how to ',
96+
})}
97+
<EuiLink
98+
href={`${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/alert-action-settings-kb.html#general-alert-action-settings`}
99+
external
100+
target="_blank"
101+
>
102+
{i18n.translate('xpack.triggersActionsUI.components.healthCheck.encryptionErrorAction', {
103+
defaultMessage: 'set a permanent Encryption Key',
104+
})}
105+
</EuiLink>
106+
</Fragment>
107+
);
108+
109+
const TlsError = ({
110+
docLinks: { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION },
111+
}: Pick<Props, 'docLinks'>) => (
112+
<Fragment>
113+
{i18n.translate('xpack.triggersActionsUI.components.healthCheck.tlsError', {
114+
defaultMessage:
115+
'Alerting relies on API keys, which require TLS between Elasticsearch and Kibana. Learn how to ',
116+
})}
117+
<EuiLink
118+
href={`${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/configuring-tls.html`}
119+
external
120+
target="_blank"
121+
>
122+
{i18n.translate('xpack.triggersActionsUI.components.healthCheck.tlsErrorAction', {
123+
defaultMessage: 'enable TLS',
124+
})}
125+
</EuiLink>
126+
</Fragment>
127+
);

‎x-pack/plugins/triggers_actions_ui/public/application/components/prompts/action_needed_prompt.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,20 @@ import { FormattedMessage } from '@kbn/i18n/react';
88
import React, { FunctionComponent } from 'react';
99
import { EuiEmptyPrompt } from '@elastic/eui';
1010

11-
export const ActionNeededPrompt: FunctionComponent = ({ children }) => (
11+
interface Props {
12+
className?: string;
13+
style?: React.CSSProperties;
14+
}
15+
16+
export const ActionNeededPrompt: FunctionComponent<Props> = ({ children, style }) => (
1217
<EuiEmptyPrompt
1318
iconType="watchesApp"
1419
data-test-subj="createFirstAlertEmptyPrompt"
20+
style={style ?? {}}
1521
title={
1622
<h2>
1723
<FormattedMessage
18-
id="xpack.triggersActionsUI.sections.actionNeededPrompt.title"
24+
id="xpack.triggersActionsUI.components.actionNeededPrompt.title"
1925
defaultMessage="Action needed"
2026
/>
2127
</h2>

‎x-pack/plugins/triggers_actions_ui/public/application/components/prompts/empty_connectors_prompt.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.actEmptyConnectorsPrompt__logo + .actEmptyConnectorsPrompt__logo {
2+
margin-left: $euiSize;
3+
}

‎x-pack/plugins/triggers_actions_ui/public/application/components/prompts/empty_connectors_prompt.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,21 @@
77
import { FormattedMessage } from '@kbn/i18n/react';
88
import React, { Fragment } from 'react';
99
import { EuiButton, EuiEmptyPrompt, EuiIcon, EuiSpacer, EuiTitle } from '@elastic/eui';
10+
import './empty_connectors_prompt.scss';
1011

1112
export const EmptyConnectorsPrompt = ({ onCTAClicked }: { onCTAClicked: () => void }) => (
1213
<EuiEmptyPrompt
1314
data-test-subj="createFirstConnectorEmptyPrompt"
1415
title={
1516
<Fragment>
16-
<EuiIcon type="logoSlack" size="xl" className="actConnectorsList__logo" />
17-
<EuiIcon type="logoGmail" size="xl" className="actConnectorsList__logo" />
18-
<EuiIcon type="logoWebhook" size="xl" className="actConnectorsList__logo" />
17+
<EuiIcon type="logoSlack" size="xl" className="actEmptyConnectorsPrompt__logo" />
18+
<EuiIcon type="logoGmail" size="xl" className="actEmptyConnectorsPrompt__logo" />
19+
<EuiIcon type="logoWebhook" size="xl" className="actEmptyConnectorsPrompt__logo" />
1920
<EuiSpacer size="s" />
2021
<EuiTitle size="m">
2122
<h2>
2223
<FormattedMessage
23-
id="xpack.triggersActionsUI.sections.actionsConnectorsList.addActionEmptyTitle"
24+
id="xpack.triggersActionsUI.components.emptyConnectorsPrompt.addActionEmptyTitle"
2425
defaultMessage="Create your first connector"
2526
/>
2627
</h2>
@@ -30,7 +31,7 @@ export const EmptyConnectorsPrompt = ({ onCTAClicked }: { onCTAClicked: () => vo
3031
body={
3132
<p>
3233
<FormattedMessage
33-
id="xpack.triggersActionsUI.sections.actionsConnectorsList.addActionEmptyBody"
34+
id="xpack.triggersActionsUI.components.emptyConnectorsPrompt.addActionEmptyBody"
3435
defaultMessage="Configure email, Slack, Elasticsearch, and third-party services that Kibana can trigger."
3536
/>
3637
</p>
@@ -45,7 +46,7 @@ export const EmptyConnectorsPrompt = ({ onCTAClicked }: { onCTAClicked: () => vo
4546
onClick={onCTAClicked}
4647
>
4748
<FormattedMessage
48-
id="xpack.triggersActionsUI.sections.actionsConnectorsList.addActionButtonLabel"
49+
id="xpack.triggersActionsUI.components.emptyConnectorsPrompt.addActionButtonLabel"
4950
defaultMessage="Create connector"
5051
/>
5152
</EuiButton>

‎x-pack/plugins/triggers_actions_ui/public/application/components/prompts/empty_prompt.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ export const EmptyPrompt = ({ onCTAClicked }: { onCTAClicked: () => void }) => (
1515
title={
1616
<h2>
1717
<FormattedMessage
18-
id="xpack.triggersActionsUI.sections.alertsList.emptyTitle"
18+
id="xpack.triggersActionsUI.components.emptyPrompt.emptyTitle"
1919
defaultMessage="Create your first alert"
2020
/>
2121
</h2>
2222
}
2323
body={
2424
<p>
2525
<FormattedMessage
26-
id="xpack.triggersActionsUI.sections.alertsList.emptyDesc"
26+
id="xpack.triggersActionsUI.components.emptyPrompt.emptyDesc"
2727
defaultMessage="Receive an alert through email, Slack, or another connector when a trigger is hit."
2828
/>
2929
</p>
@@ -38,7 +38,7 @@ export const EmptyPrompt = ({ onCTAClicked }: { onCTAClicked: () => void }) => (
3838
onClick={onCTAClicked}
3939
>
4040
<FormattedMessage
41-
id="xpack.triggersActionsUI.sections.alertsList.emptyButton"
41+
id="xpack.triggersActionsUI.components.emptyPrompt.emptyButton"
4242
defaultMessage="Create alert"
4343
/>
4444
</EuiButton>

‎x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.actConnectorsList__logo + .actConnectorsList__logo {
2-
margin-left: $euiSize;
3-
}
4-
51
.actConnectorsList__tableRowDisabled {
62
background-color: $euiColorLightestShade;
73

‎x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export const AlertAdd = ({
153153
</h3>
154154
</EuiTitle>
155155
</EuiFlyoutHeader>
156-
<HealthCheck docLinks={docLinks} http={http}>
156+
<HealthCheck docLinks={docLinks} http={http} alignToTop={true}>
157157
<EuiFlyoutBody>
158158
<AlertForm
159159
alert={alert}

0 commit comments

Comments
 (0)