Skip to content

Commit

Permalink
[Alerting] "Create alert" graph visualization design improvements (el…
Browse files Browse the repository at this point in the history
  • Loading branch information
andreadelrio authored Mar 7, 2020
1 parent b960c6a commit 55fa3d6
Show file tree
Hide file tree
Showing 10 changed files with 42 additions and 28 deletions.
6 changes: 0 additions & 6 deletions x-pack/legacy/plugins/triggers_actions_ui/public/index.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,2 @@
// Imported EUI
@import 'src/legacy/ui/public/styles/_styling_constants';

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

@import '../../../../plugins/triggers_actions_ui/public/application/sections/action_connector_form/index';

Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.actAlertVisualization__chart {
height: $euiSize * 15;
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import {
EuiComboBoxOptionOption,
EuiFormRow,
EuiCallOut,
EuiEmptyPrompt,
EuiText,
} from '@elastic/eui';
import { COMPARATORS, builtInComparators } from '../../../../common/constants';
import {
Expand All @@ -39,6 +41,7 @@ import {
import { builtInAggregationTypes } from '../../../../common/constants';
import { IndexThresholdAlertParams } from './types';
import { AlertsContextValue } from '../../../context/alerts_context';
import './expression.scss';

const DEFAULT_VALUES = {
AGGREGATION_TYPE: 'count',
Expand Down Expand Up @@ -453,6 +456,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
thresholdComparator={thresholdComparator ?? DEFAULT_VALUES.THRESHOLD_COMPARATOR}
threshold={threshold}
errors={errors}
popupPosition={'upLeft'}
onChangeSelectedThreshold={selectedThresholds =>
setAlertParams('threshold', selectedThresholds)
}
Expand All @@ -463,6 +467,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ForLastExpression
popupPosition={'upLeft'}
timeWindowSize={timeWindowSize || 1}
timeWindowUnit={timeWindowUnit || ''}
errors={errors}
Expand All @@ -475,17 +480,35 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
/>
</EuiFlexItem>
</EuiFlexGroup>
{canShowVizualization ? null : (
<Fragment>
<ThresholdVisualization
alertParams={alertParams}
alertInterval={alertInterval}
aggregationTypes={builtInAggregationTypes}
comparators={builtInComparators}
alertsContext={alertsContext}
/>
</Fragment>
)}
<EuiSpacer size="l" />
<div className="actAlertVisualization__chart">
{canShowVizualization ? (
<Fragment>
<EuiSpacer size="xl" />
<EuiEmptyPrompt
iconType="visBarVertical"
body={
<EuiText color="subdued">
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertAdd.previewAlertVisualizationDescription"
defaultMessage="Complete the expression above to generate a preview"
/>
</EuiText>
}
/>
</Fragment>
) : (
<Fragment>
<ThresholdVisualization
alertParams={alertParams}
alertInterval={alertInterval}
aggregationTypes={builtInAggregationTypes}
comparators={builtInComparators}
alertsContext={alertsContext}
/>
</Fragment>
)}
</div>
</Fragment>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,6 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
const aggLabel = aggregationTypes[aggType].text;
return (
<div data-test-subj="alertVisualizationChart">
<EuiSpacer size="l" />
{alertVisualizationDataKeys.length ? (
<Chart size={['100%', 200]} renderer="canvas">
<Settings
Expand Down Expand Up @@ -289,7 +288,6 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
/>
</EuiCallOut>
)}
<EuiSpacer size="l" />
</div>
);
}
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.actConnectorModal {
z-index: 9000;
}
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { ActionType, ActionConnector, IErrorObject, ActionTypeModel } from '../.
import { connectorReducer } from './connector_reducer';
import { createActionConnector } from '../../lib/action_connector_api';
import { TypeRegistry } from '../../type_registry';
import './connector_add_modal.scss';

interface ConnectorAddModalProps {
actionType: ActionType;
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { ConnectorAddFlyout, ConnectorEditFlyout } from '../../action_connector_
import { hasDeleteActionsCapability, hasSaveActionsCapability } from '../../../lib/capabilities';
import { DeleteConnectorsModal } from '../../../components/delete_connectors_modal';
import { ActionsConnectorsContextProvider } from '../../../context/actions_connectors_context';
import './actions_connectors_list.scss';

export const ActionsConnectorsList: React.FunctionComponent = () => {
const { http, toastNotifications, capabilities, actionTypeRegistry } = useAppDependencies();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,6 @@ export const AlertForm = ({
alertsContext={alertsContext}
/>
) : null}
<EuiSpacer size="xl" />
{defaultActionGroupId ? (
<ActionForm
actions={alert.actions}
Expand Down

0 comments on commit 55fa3d6

Please sign in to comment.