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

Jump to bottom

Added UI for pre-configured connectors. #63074

Merged
merged 8 commits into from
Apr 10, 2020
Merged

Added UI for pre-configured connectors. #63074

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c210194
Added UI for pre-configured connectors.
YulNaumenko Apr 8, 2020
3ca6b61
Merge remote-tracking branch 'upstream/master' into alerting-ui-preco…
YulNaumenko Apr 9, 2020
ba19515
fixed due to comments
YulNaumenko Apr 9, 2020
3f8cd22
Fixed jest tests
YulNaumenko Apr 9, 2020
c3f72d3
Fixed due to comments and added some functional tests
YulNaumenko Apr 9, 2020
43a0122
test fix
YulNaumenko Apr 9, 2020
06cae8f
Fixed failed checks
YulNaumenko Apr 10, 2020
c0c8434
Fixed functional tests failing
YulNaumenko Apr 10, 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
15 changes: 12 additions & 3 deletions ...ins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,15 +141,22 @@ export const ActionForm = ({
});
}
}
const preconfiguredMessage = i18n.translate(
YulNaumenko marked this conversation as resolved.
Show resolved Hide resolved
'xpack.triggersActionsUI.sections.alertForm.preconfiguredTitleMessage',
{
defaultMessage: '(pre-configured)',
}
);
const getSelectedOptions = (actionItemId: string) => {
const val = connectors.find(connector => connector.id === actionItemId);
if (!val) {
return [];
}
const optionTitle = `${val.name}${val.isPreconfigured ? preconfiguredMessage : ''}`;
return [
{
label: val.name,
value: val.name,
label: optionTitle,
value: optionTitle,
id: actionItemId,
},
];
Expand Down Expand Up @@ -264,7 +271,9 @@ export const ActionForm = ({
defaultMessage="{actionConnectorName}"
id="xpack.triggersActionsUI.sections.alertForm.selectAlertActionTypeEditTitle"
values={{
actionConnectorName: actionConnector.name,
actionConnectorName: `${actionConnector.name}${
actionConnector.isPreconfigured ? preconfiguredMessage : ''
}`,
}}
/>
</EuiFlexItem>
Expand Down
131 changes: 131 additions & 0 deletions ...s_ui/public/application/sections/action_connector_form/preconfigured_connector_flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React, { useCallback } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiTitle,
EuiFlyoutHeader,
EuiFlyout,
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiFlyoutBody,
EuiFlyoutFooter,
EuiButtonEmpty,
EuiBetaBadge,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { EuiText } from '@elastic/eui';
import { EuiLink } from '@elastic/eui';
import { ActionConnectorTableItem } from '../../../types';
import { useActionsConnectorsContext } from '../../context/actions_connectors_context';
import { PLUGIN } from '../../constants/plugin';

interface Props {
initialConnector: ActionConnectorTableItem;
flyoutVisible: boolean;
setFlyoutVisibility: React.Dispatch<React.SetStateAction<boolean>>;
}

export const PreconfiguredConnectorFlyout = ({
initialConnector,
flyoutVisible,
setFlyoutVisibility,
}: Props) => {
const { actionTypeRegistry } = useActionsConnectorsContext();
const closeFlyout = useCallback(() => setFlyoutVisibility(false), [setFlyoutVisibility]);
if (!flyoutVisible) {
return null;
}

const actionTypeModel = actionTypeRegistry.get(initialConnector.actionTypeId);

return (
<EuiFlyout onClose={closeFlyout} aria-labelledby="flyoutPreconfiguredtActionTitle" size="m">
<EuiFlyoutHeader hasBorder>
<EuiFlexGroup gutterSize="s" alignItems="center">
{actionTypeModel ? (
<EuiFlexItem grow={false}>
<EuiIcon type={actionTypeModel.iconClass} size="m" />
</EuiFlexItem>
) : null}
<EuiFlexItem>
<EuiTitle size="s">
<h3 id="flyoutTitle">
<FormattedMessage
defaultMessage="{connectorName}"
id="xpack.triggersActionsUI.sections.preconfiguredConnectorForm.flyoutTitle"
values={{ connectorName: initialConnector.name }}
/>
&emsp;
<EuiBetaBadge
label="Pre-configured"
tooltipContent={i18n.translate(
'xpack.triggersActionsUI.sections.preconfiguredConnectorForm.tooltipContent',
{
defaultMessage: 'This connector is preconfigured and cannot be edited',
}
)}
/>
&emsp;
<EuiBetaBadge
label="Beta"
tooltipContent={i18n.translate(
'xpack.triggersActionsUI.sections.preconfiguredConnectorForm.betaBadgeTooltipContent',
{
defaultMessage:
'{pluginName} is in beta and is subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features.',
values: {
pluginName: PLUGIN.getI18nName(i18n),
},
}
)}
/>
</h3>
</EuiTitle>
<EuiText size="s">
<FormattedMessage
defaultMessage="{actionDescription}"
id="xpack.triggersActionsUI.sections.preconfiguredConnectorForm.actionTypeDescription"
values={{ actionDescription: actionTypeModel.selectMessage }}
/>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiText>
{i18n.translate(
'xpack.triggersActionsUI.sections.preconfiguredConnectorForm.descriptionText',
{
defaultMessage: 'This connector is readonly.',
}
)}
</EuiText>
<EuiLink href="https://www.elastic.co/guide" target="_blank">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll need documentation for how to pre-configure connectors. I'm thinking this place seems best: https://github.com/elastic/kibana/blob/master/docs/user/alerting/action-types.asciidoc

Once those are published (ex here: https://www.elastic.co/guide/en/kibana/master/action-types.html), we can use the doc links plugin to generate a URL.

I can setup a meeting if you like on how to write asciidocs, the alerting team could benefit as well.

Copy link
Contributor Author

@YulNaumenko YulNaumenko Apr 9, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Created an issue #63195 to cover this

<FormattedMessage
id="xpack.triggersActionsUI.sections.preconfiguredConnectorForm.preconfiguredHelpLabel"
defaultMessage="Learn more about pre-configured connectors."
/>
</EuiLink>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={closeFlyout}>
{i18n.translate(
'xpack.triggersActionsUI.sections.preconfiguredConnectorForm.cancelButtonLabel',
{
defaultMessage: 'Cancel',
}
)}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
);
};
107 changes: 76 additions & 31 deletions ...ublic/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ import {
EuiIconTip,
EuiFlexGroup,
EuiFlexItem,
EuiBetaBadge,
EuiToolTip,
EuiButtonIcon,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
Expand All @@ -27,6 +30,7 @@ import { ActionsConnectorsContextProvider } from '../../../context/actions_conne
import { checkActionTypeEnabled } from '../../../lib/check_action_type_enabled';
import './actions_connectors_list.scss';
import { ActionConnector, ActionConnectorTableItem, ActionTypeIndex } from '../../../../types';
import { PreconfiguredConnectorFlyout } from '../../action_connector_form/preconfigured_connector_flyout';
import { EmptyConnectorsPrompt } from '../../../components/prompts/empty_connectors_prompt';

export const ActionsConnectorsList: React.FunctionComponent = () => {
Expand All @@ -41,6 +45,7 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {
const [isLoadingActionTypes, setIsLoadingActionTypes] = useState<boolean>(false);
const [isLoadingActions, setIsLoadingActions] = useState<boolean>(false);
const [editFlyoutVisible, setEditFlyoutVisibility] = useState<boolean>(false);
const [preconfiguredFlyoutVisible, setPreconfiguredFlyoutVisibility] = useState<boolean>(false);
const [addFlyoutVisible, setAddFlyoutVisibility] = useState<boolean>(false);
const [actionTypesList, setActionTypesList] = useState<Array<{ value: string; name: string }>>(
[]
Expand Down Expand Up @@ -125,7 +130,13 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {

async function editItem(connectorTableItem: ActionConnectorTableItem) {
setEditedConnectorItem(connectorTableItem);
setEditFlyoutVisibility(true);
if (connectorTableItem.isPreconfigured) {
setPreconfiguredFlyoutVisibility(true);
setEditFlyoutVisibility(false);
} else {
setEditFlyoutVisibility(true);
setPreconfiguredFlyoutVisibility(false);
}
YulNaumenko marked this conversation as resolved.
Show resolved Hide resolved
}

const actionsTableColumns = [
Expand Down Expand Up @@ -200,31 +211,57 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {
},
},
{
field: '',
field: 'isPreconfigured',
name: '',
actions: [
{
enabled: () => canDelete,
'data-test-subj': 'deleteConnector',
name: i18n.translate(
'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionName',
{ defaultMessage: 'Delete' }
),
description: canDelete
? i18n.translate(
'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionDescription',
{ defaultMessage: 'Delete this connector' }
)
: i18n.translate(
'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionDisabledDescription',
{ defaultMessage: 'Unable to delete connectors' }
),
type: 'icon',
icon: 'trash',
color: 'danger',
onClick: (item: ActionConnectorTableItem) => setConnectorsToDelete([item.id]),
},
],
render: (value: number, item: ActionConnectorTableItem) => {
if (item.isPreconfigured) {
return (
<EuiFlexGroup justifyContent="flexEnd" alignItems="flexEnd">
<EuiFlexItem grow={false}>
<EuiBetaBadge
label={i18n.translate(
'xpack.triggersActionsUI.sections.alertForm.preconfiguredTitleMessage',
{
defaultMessage: 'Pre-configured',
}
)}
tooltipContent="This connector is not allowed to delete."
YulNaumenko marked this conversation as resolved.
Show resolved Hide resolved
YulNaumenko marked this conversation as resolved.
Show resolved Hide resolved
/>
</EuiFlexItem>
</EuiFlexGroup>
);
}
return (
<EuiFlexGroup justifyContent="flexEnd" alignItems="flexEnd">
<EuiFlexItem grow={false}>
<EuiToolTip
content={
canDelete
? i18n.translate(
'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionDescription',
{ defaultMessage: 'Delete this connector' }
)
: i18n.translate(
'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionDisabledDescription',
{ defaultMessage: 'Unable to delete connectors' }
)
}
>
<EuiButtonIcon
isDisabled={!canDelete}
data-test-subj="deleteConnector"
aria-label={i18n.translate(
'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionName',
{ defaultMessage: 'Delete' }
)}
onClick={() => setConnectorsToDelete([item.id])}
iconType={'trash'}
/>
</EuiToolTip>
</EuiFlexItem>
</EuiFlexGroup>
);
},
},
];

Expand Down Expand Up @@ -391,12 +428,20 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {
setAddFlyoutVisibility={setAddFlyoutVisibility}
/>
{editedConnectorItem ? (
<ConnectorEditFlyout
key={editedConnectorItem.id}
initialConnector={editedConnectorItem}
editFlyoutVisible={editFlyoutVisible}
setEditFlyoutVisibility={setEditFlyoutVisibility}
/>
<>
YulNaumenko marked this conversation as resolved.
Show resolved Hide resolved
<ConnectorEditFlyout
key={editedConnectorItem.id}
initialConnector={editedConnectorItem}
editFlyoutVisible={editFlyoutVisible}
setEditFlyoutVisibility={setEditFlyoutVisibility}
/>
<PreconfiguredConnectorFlyout
key={`preconfigured${editedConnectorItem.id}`}
initialConnector={editedConnectorItem}
flyoutVisible={preconfiguredFlyoutVisible}
setFlyoutVisibility={setPreconfiguredFlyoutVisibility}
/>
</>
YulNaumenko marked this conversation as resolved.
Show resolved Hide resolved
) : null}
</ActionsConnectorsContextProvider>
</section>
Expand Down