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

[Alerting] "Create alert" graph visualization design improvements #59399

Merged
merged 10 commits into from
Mar 7, 2020
Merged

[Alerting] "Create alert" graph visualization design improvements #59399

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
42e5be4
improve graph visualization in create alert flyout
andreadelrio Mar 5, 2020
a274ba8
improve graph visualization in create alert flyout
andreadelrio Mar 5, 2020
3213299
expression.tsx imports its own scss
andreadelrio Mar 6, 2020
cb08e75
removed z-index from comboboxlist
andreadelrio Mar 6, 2020
90d3f68
connector_add_modal.tsx imports its own scss
andreadelrio Mar 6, 2020
45774be
actions_connectors_list.tsx imports its own scss
andreadelrio Mar 6, 2020
7b32287
remove unused files
andreadelrio Mar 6, 2020
58240fb
remove alert_add/alert_form.tsx
andreadelrio Mar 6, 2020
5fd4a54
fix conflict
andreadelrio Mar 6, 2020
f5f5147
Merge branch 'master' into create-alert-graph
thompsongl Mar 6, 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
3 changes: 2 additions & 1 deletion 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 @@ -4,5 +4,6 @@
// 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';
@import '../../../../plugins/triggers_actions_ui/public/application/sections/alert_add/index';
andreadelrio marked this conversation as resolved.
Show resolved Hide resolved

@import '../../../../plugins/triggers_actions_ui/public/application/sections/action_connector_form/index';
42 changes: 32 additions & 10 deletions ...ers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import {
EuiComboBoxOptionProps,
EuiFormRow,
EuiCallOut,
EuiEmptyPrompt,
EuiText,
} from '@elastic/eui';
import { COMPARATORS, builtInComparators } from '../../../../common/constants';
import {
Expand Down Expand Up @@ -435,6 +437,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 @@ -445,6 +448,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ForLastExpression
popupPosition={'upLeft'}
timeWindowSize={timeWindowSize || 1}
timeWindowUnit={timeWindowUnit || ''}
errors={errors}
Expand All @@ -457,16 +461,34 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
/>
</EuiFlexItem>
</EuiFlexGroup>
{canShowVizualization ? null : (
<Fragment>
<ThresholdVisualization
alertParams={alertParams}
aggregationTypes={builtInAggregationTypes}
comparators={builtInComparators}
alertsContext={alertsContext}
/>
</Fragment>
)}
<EuiSpacer size="l" />
<div className="alertVisualizationChart">
{canShowVizualization ? (
<div>
Copy link
Contributor

Choose a reason for hiding this comment

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

Likely this can be a <Fragment>

<EuiSpacer size="xl" />
<EuiEmptyPrompt
iconType="visBarVertical"
body={
<EuiText color="subdued">
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertAdd.loadingAlertVisualizationDescription"
defaultMessage="Preview alert visualization here"
andreadelrio marked this conversation as resolved.
Show resolved Hide resolved
/>
</EuiText>
}
/>
</div>
) : (
<Fragment>
<ThresholdVisualization
alertParams={alertParams}
aggregationTypes={builtInAggregationTypes}
comparators={builtInComparators}
alertsContext={alertsContext}
/>
</Fragment>
)}
</div>
</Fragment>
);
};
2 changes: 0 additions & 2 deletions ..._actions_ui/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 @@ -245,7 +245,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 @@ -309,7 +308,6 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
/>
</EuiCallOut>
)}
<EuiSpacer size="l" />
</div>
);
}
Expand Down
1 change: 1 addition & 0 deletions x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import 'alert_add';
3 changes: 3 additions & 0 deletions x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_add.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.alertVisualizationChart {
andreadelrio marked this conversation as resolved.
Show resolved Hide resolved
height: $euiSize * 15;
}
1 change: 0 additions & 1 deletion x-pack/plugins/triggers_actions_ui/public/application/sections/alert_add/alert_form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -636,7 +636,6 @@ export const AlertForm = ({
alertsContext={alertsContext}
/>
) : null}
<EuiSpacer size="xl" />
{selectedGroupActions}
{isAddActionPanelOpen ? (
<Fragment>
Expand Down