Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some design fixes for alerting create UI #1

Merged
merged 3 commits into from
Jan 31, 2020
Merged

Some design fixes for alerting create UI #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b585af8
Some design fixes
snide Jan 31, 2020
462a0c5
alerts empty prompt
snide Jan 31, 2020
76ff311
Merge branch 'alerts-create-form-ui-flyout' into design/alert-create
YulNaumenko Jan 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 0 additions & 9 deletions ...triggers_actions_ui/np_ready/public/application/components/builtin_action_types/email.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,15 +417,6 @@ const EmailParamsFields: React.FunctionComponent<ActionParamsProps<EmailActionPa
));
return (
<Fragment>
<EuiText>
<EuiTextColor color="subdued">
<FormattedMessage
id="xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.composeMessageTitle"
defaultMessage="Compose Message:"
/>
</EuiTextColor>
</EuiText>
<EuiSpacer size="m" />
<EuiFormRow
fullWidth
error={errors.to}
Expand Down
9 changes: 0 additions & 9 deletions ...ers_actions_ui/np_ready/public/application/components/builtin_action_types/server_log.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,15 +98,6 @@ export const ServerLogParamsFields: React.FunctionComponent<ActionParamsProps<
));
return (
<Fragment>
<EuiText>
<EuiTextColor color="subdued">
<FormattedMessage
id="xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.composeMessageTitle"
defaultMessage="Compose Message:"
/>
</EuiTextColor>
</EuiText>
<EuiSpacer size="m" />
<EuiFormRow
id="loggingLevel"
fullWidth
Expand Down
9 changes: 0 additions & 9 deletions ...triggers_actions_ui/np_ready/public/application/components/builtin_action_types/slack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,15 +169,6 @@ const SlackParamsFields: React.FunctionComponent<ActionParamsProps<SlackActionPa
));
return (
<Fragment>
<EuiText>
<EuiTextColor color="subdued">
<FormattedMessage
id="xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.composeMessageTitle"
defaultMessage="Compose Message:"
/>
</EuiTextColor>
</EuiText>
<EuiSpacer size="m" />
<EuiFormRow
id="slackMessage"
fullWidth
Expand Down
5 changes: 3 additions & 2 deletions ...ui/np_ready/public/application/components/builtin_alert_types/threshold/visualization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,17 +280,18 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({ alert }
</Chart>
) : (
<EuiCallOut
size="s"
title={
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertAdd.thresholdPreviewChart.noDataTitle"
defaultMessage="No data"
defaultMessage="No data matches that query"
/>
}
color="warning"
>
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertAdd.thresholdPreviewChart.dataDoesNotExistTextMessage"
defaultMessage="Your index and condition did not return any data."
defaultMessage="Check your time range and filters to make sure they are correct"
/>
</EuiCallOut>
)}
Expand Down
3 changes: 3 additions & 0 deletions ...riggers_actions_ui/np_ready/public/application/sections/action_connector_form/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.actConnectorModal {
z-index: 9000;
}
2 changes: 1 addition & 1 deletion ...ons_ui/np_ready/public/application/sections/action_connector_form/connector_add_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export const ConnectorAddModal = ({
});

return (
<EuiOverlayMask>
<EuiOverlayMask className="actConnectorModal">
<EuiModal onClose={closeModal}>
<EuiModalHeader>
<EuiModalHeaderTitle>
Expand Down
107 changes: 58 additions & 49 deletions .../plugins/triggers_actions_ui/np_ready/public/application/sections/alert_add/alert_add.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
EuiButtonEmpty,
EuiButton,
EuiFlyoutBody,
EuiPortal,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useAlertsContext } from '../../context/alerts_context';
Expand Down Expand Up @@ -114,56 +115,64 @@ export const AlertAdd = () => {
}

return (
<EuiFlyout onClose={closeFlyout} aria-labelledby="flyoutAlertAddTitle" size="m" maxWidth={620}>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s" data-test-subj="addAlertFlyoutTitle">
<h3 id="flyoutTitle">
<FormattedMessage
defaultMessage="Create Alert"
id="xpack.triggersActionsUI.sections.alertAdd.flyoutTitle"
/>
</h3>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<AlertForm alert={alert} dispatch={dispatch} errors={errors} serverError={serverError} />
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty data-test-subj="cancelSaveAlertButton" onClick={closeFlyout}>
{i18n.translate('xpack.triggersActionsUI.sections.alertAdd.cancelButtonLabel', {
defaultMessage: 'Cancel',
})}
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
fill
color="secondary"
data-test-subj="saveAlertButton"
type="submit"
iconType="check"
isDisabled={hasErrors || hasActionErrors}
isLoading={isSaving}
onClick={async () => {
setIsSaving(true);
const savedAlert = await onSaveAlert();
setIsSaving(false);
if (savedAlert) {
closeFlyout();
reloadAlerts();
}
}}
>
<EuiPortal>
<EuiFlyout
onClose={closeFlyout}
aria-labelledby="flyoutAlertAddTitle"
size="m"
maxWidth={620}
ownFocus
>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s" data-test-subj="addAlertFlyoutTitle">
<h3 id="flyoutTitle">
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertAdd.saveButtonLabel"
defaultMessage="Save"
defaultMessage="Create Alert"
id="xpack.triggersActionsUI.sections.alertAdd.flyoutTitle"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
</h3>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<AlertForm alert={alert} dispatch={dispatch} errors={errors} serverError={serverError} />
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty data-test-subj="cancelSaveAlertButton" onClick={closeFlyout}>
{i18n.translate('xpack.triggersActionsUI.sections.alertAdd.cancelButtonLabel', {
defaultMessage: 'Cancel',
})}
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
fill
color="secondary"
data-test-subj="saveAlertButton"
type="submit"
iconType="check"
isDisabled={hasErrors || hasActionErrors}
isLoading={isSaving}
onClick={async () => {
setIsSaving(true);
const savedAlert = await onSaveAlert();
setIsSaving(false);
if (savedAlert) {
closeFlyout();
reloadAlerts();
}
}}
>
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertAdd.saveButtonLabel"
defaultMessage="Save"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
</EuiPortal>
);
};
62 changes: 55 additions & 7 deletions ...rs_actions_ui/np_ready/public/application/sections/alerts_list/components/alerts_list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, Fragment } from 'react';
import {
EuiBasicTable,
EuiButton,
Expand All @@ -15,6 +15,8 @@ import {
EuiFlexItem,
EuiIcon,
EuiSpacer,
EuiEmptyPrompt,
EuiTitle,
} from '@elastic/eui';

import { AlertsContextProvider } from '../../../context/alerts_context';
Expand Down Expand Up @@ -228,10 +230,47 @@ export const AlertsList: React.FunctionComponent = () => {
);
}

return (
<section data-test-subj="alertsList">
<EuiSpacer size="m" />
<EuiFlexGroup>
const emptyPrompt = (
<EuiEmptyPrompt
iconType="watchesApp"
data-test-subj="createFirstConnectorEmptyPrompt"
title={
<h2>
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertsList.emptyTitle"
defaultMessage="Create your first alert"
/>
</h2>
}
body={
<p>
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertsList.emptyDesc"
defaultMessage="Recieve an alert through email, slack or other connectors when a certain trigger is hit"
/>
</p>
}
actions={
<EuiButton
data-test-subj="createFirstActionButton"
key="create-action"
fill
iconType="plusInCircle"
iconSide="left"
onClick={() => setAlertFlyoutVisibility(true)}
>
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertsList.emptyButton"
defaultMessage="Create alert"
/>
</EuiButton>
}
/>
);

const table = (
<Fragment>
<EuiFlexGroup gutterSize="s">
{selectedIds.length > 0 && canDelete && (
<EuiFlexItem grow={false}>
<BulkActionPopover
Expand Down Expand Up @@ -260,12 +299,12 @@ export const AlertsList: React.FunctionComponent = () => {
}}
placeholder={i18n.translate(
'xpack.triggersActionsUI.sections.alertsList.searchPlaceholderTitle',
{ defaultMessage: 'Search...' }
{ defaultMessage: 'Search' }
)}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup>
<EuiFlexGroup gutterSize="s">
{toolsRight.map((tool, index: number) => (
<EuiFlexItem key={index} grow={false}>
{tool}
Expand Down Expand Up @@ -314,6 +353,15 @@ export const AlertsList: React.FunctionComponent = () => {
setPage(changedPage);
}}
/>
</Fragment>
);

return (
<section data-test-subj="alertsList">
<EuiSpacer size="m" />
{convertAlertsToTableItems(alertsState.data, alertTypesState.data).length !== 0 && table}
{convertAlertsToTableItems(alertsState.data, alertTypesState.data).length === 0 &&
emptyPrompt}
<AlertsContextProvider
value={{
addFlyoutVisible: alertFlyoutVisible,
Expand Down
3 changes: 3 additions & 0 deletions x-pack/legacy/plugins/triggers_actions_ui/public/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,6 @@

// Styling within the app
@import '../np_ready/public/application/sections/actions_connectors_list/components/index';

@import '../np_ready/public/application/sections/action_connector_form/index';