Skip to content

Commit

Permalink
Added connectors loading spinner to show the actions forms only when …
Browse files Browse the repository at this point in the history 
…connectors is loaded (#63211)

* Added connectors loading spinner to show the actions forms only when connectors is loaded

* Added warning message for actions with removed connectors

* Fixed loading connectors spinner
  • Loading branch information
@YulNaumenko
YulNaumenko authored Apr 13, 2020
1 parent 52747c9 commit 0c09a77
Showing 1 changed file with 106 additions and 74 deletions.
180 changes: 106 additions & 74 deletions ...ins/triggers_actions_ui/public/application/sections/action_connector_form/action_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
EuiToolTip,
EuiIconTip,
EuiLink,
EuiCallOut,
} from '@elastic/eui';
import { HttpSetup, ToastsApi } from 'kibana/public';
import { loadActionTypes, loadAllActions } from '../../lib/action_connector_api';
Expand Down Expand Up @@ -85,8 +86,10 @@ export const ActionForm = ({
);
const [isAddActionPanelOpen, setIsAddActionPanelOpen] = useState<boolean>(true);
const [connectors, setConnectors] = useState<ActionConnector[]>([]);
const [isLoadingConnectors, setIsLoadingConnectors] = useState<boolean>(false);
const [isLoadingActionTypes, setIsLoadingActionTypes] = useState<boolean>(false);
const [actionTypesIndex, setActionTypesIndex] = useState<ActionTypeIndex | undefined>(undefined);
const [emptyActionsIds, setEmptyActionsIds] = useState<string[]>([]);

// load action types
useEffect(() => {
Expand Down Expand Up @@ -128,6 +131,7 @@ export const ActionForm = ({

async function loadConnectors() {
try {
setIsLoadingConnectors(true);
const actionsResponse = await loadAllActions({ http });
setConnectors(actionsResponse);
} catch (e) {
Expand All @@ -139,6 +143,8 @@ export const ActionForm = ({
}
),
});
} finally {
setIsLoadingConnectors(false);
}
}
const preconfiguredMessage = i18n.translate(
Expand Down Expand Up @@ -387,13 +393,25 @@ export const ActionForm = ({
>
<EuiEmptyPrompt
title={
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertForm.emptyConnectorsLabel"
defaultMessage="No {actionTypeName} connectors."
values={{
actionTypeName,
}}
/>
emptyActionsIds.find((emptyId: string) => actionItem.id === emptyId) ? (
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertForm.emptyConnectorsLabel"
defaultMessage="No {actionTypeName} connectors."
values={{
actionTypeName,
}}
/>
) : (
<EuiCallOut
title={i18n.translate(
'xpack.triggersActionsUI.sections.alertForm.unableToLoadConnectorTitle',
{
defaultMessage: 'Unable to load connector.',
}
)}
color="warning"
/>
)
}
actions={[
<EuiButton
Expand Down Expand Up @@ -448,6 +466,7 @@ export const ActionForm = ({
params: {},
});
setActionIdByIndex(actions.length.toString(), actions.length - 1);
setEmptyActionsIds([...emptyActionsIds, actions.length.toString()]);
}
}

Expand Down Expand Up @@ -492,81 +511,94 @@ export const ActionForm = ({
});
}

return (
<Fragment>
{actions.map((actionItem: AlertAction, index: number) => {
const actionConnector = connectors.find(field => field.id === actionItem.id);
// connectors doesn't exists
if (!actionConnector) {
return getAddConnectorsForm(actionItem, index);
}
const alertActionsList = actions.map((actionItem: AlertAction, index: number) => {
const actionConnector = connectors.find(field => field.id === actionItem.id);
// connectors doesn't exists
if (!actionConnector) {
return getAddConnectorsForm(actionItem, index);
}

const actionErrors: { errors: IErrorObject } = actionTypeRegistry
.get(actionItem.actionTypeId)
?.validateParams(actionItem.params);

const actionErrors: { errors: IErrorObject } = actionTypeRegistry
.get(actionItem.actionTypeId)
?.validateParams(actionItem.params);
return getActionTypeForm(actionItem, actionConnector, actionErrors, index);
});

return getActionTypeForm(actionItem, actionConnector, actionErrors, index);
})}
<EuiSpacer size="m" />
{isAddActionPanelOpen === false ? (
<EuiButton
iconType="plusInCircle"
data-test-subj="addAlertActionButton"
onClick={() => setIsAddActionPanelOpen(true)}
>
return (
<Fragment>
{isLoadingConnectors ? (
<SectionLoading>
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertForm.addActionButtonLabel"
defaultMessage="Add action"
id="xpack.triggersActionsUI.sections.alertForm.loadingConnectorsDescription"
defaultMessage="Loading connectors…"
/>
</EuiButton>
) : null}
{isAddActionPanelOpen ? (
</SectionLoading>
) : (
<Fragment>
<EuiFlexGroup id="alertActionTypeTitle" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h5>
<FormattedMessage
defaultMessage="Actions: Select an action type"
id="xpack.triggersActionsUI.sections.alertForm.selectAlertActionTypeTitle"
/>
</h5>
</EuiTitle>
</EuiFlexItem>
{hasDisabledByLicenseActionTypes && (
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h5>
<EuiLink
href={VIEW_LICENSE_OPTIONS_LINK}
target="_blank"
className="actActionForm__getMoreActionsLink"
>
{alertActionsList}
<EuiSpacer size="m" />
{isAddActionPanelOpen === false ? (
<EuiButton
iconType="plusInCircle"
data-test-subj="addAlertActionButton"
onClick={() => setIsAddActionPanelOpen(true)}
>
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertForm.addActionButtonLabel"
defaultMessage="Add action"
/>
</EuiButton>
) : null}
{isAddActionPanelOpen ? (
<Fragment>
<EuiFlexGroup id="alertActionTypeTitle" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h5>
<FormattedMessage
defaultMessage="Get more actions"
id="xpack.triggersActionsUI.sections.actionForm.getMoreActionsTitle"
defaultMessage="Actions: Select an action type"
id="xpack.triggersActionsUI.sections.alertForm.selectAlertActionTypeTitle"
/>
</EuiLink>
</h5>
</EuiTitle>
</EuiFlexItem>
)}
</EuiFlexGroup>
<EuiSpacer />
<EuiFlexGroup gutterSize="s" wrap>
{isLoadingActionTypes ? (
<SectionLoading>
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertForm.loadingActionTypesDescription"
defaultMessage="Loading action types…"
/>
</SectionLoading>
) : (
actionTypeNodes
)}
</EuiFlexGroup>
</h5>
</EuiTitle>
</EuiFlexItem>
{hasDisabledByLicenseActionTypes && (
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h5>
<EuiLink
href={VIEW_LICENSE_OPTIONS_LINK}
target="_blank"
className="actActionForm__getMoreActionsLink"
>
<FormattedMessage
defaultMessage="Get more actions"
id="xpack.triggersActionsUI.sections.actionForm.getMoreActionsTitle"
/>
</EuiLink>
</h5>
</EuiTitle>
</EuiFlexItem>
)}
</EuiFlexGroup>
<EuiSpacer />
<EuiFlexGroup gutterSize="s" wrap>
{isLoadingActionTypes ? (
<SectionLoading>
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertForm.loadingActionTypesDescription"
defaultMessage="Loading action types…"
/>
</SectionLoading>
) : (
actionTypeNodes
)}
</EuiFlexGroup>
</Fragment>
) : null}
</Fragment>
) : null}
)}
{actionTypesIndex && activeActionItem ? (
<ConnectorAddModal
key={activeActionItem.index}
Expand Down

0 comments on commit 0c09a77

Please sign in to comment.