[Alerting] "Create alert" graph visualization design improvements (#59399)
This commit is contained in:
Andrea Del Rio
GitHub
parent
b960c6aff7
commit
55fa3d6f42
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.actAlertVisualization__chart {
|
||||
height: $euiSize * 15;
|
||||
}
|
||||
|
|
@ -20,6 +20,8 @@ import {
|
|||
EuiComboBoxOptionOption,
|
||||
EuiFormRow,
|
||||
EuiCallOut,
|
||||
EuiEmptyPrompt,
|
||||
EuiText,
|
||||
} from '@elastic/eui';
|
||||
import { COMPARATORS, builtInComparators } from '../../../../common/constants';
|
||||
import {
|
||||
|
|
@ -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',
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -463,6 +467,7 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<IndexThr
|
|||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<ForLastExpression
|
||||
popupPosition={'upLeft'}
|
||||
timeWindowSize={timeWindowSize || 1}
|
||||
timeWindowUnit={timeWindowUnit || ''}
|
||||
errors={errors}
|
||||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -289,7 +288,6 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
|
|||
/>
|
||||
</EuiCallOut>
|
||||
)}
|
||||
<EuiSpacer size="l" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
.actConnectorModal {
|
||||
z-index: 9000;
|
||||
}
|
||||
|
||||
.euiComboBoxOptionsList {
|
||||
z-index: 10000;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.actConnectorModal {
|
||||
z-index: 9000;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
@import 'actions_connectors_list';
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -217,7 +217,6 @@ export const AlertForm = ({
|
|||
alertsContext={alertsContext}
|
||||
/>
|
||||
) : null}
|
||||
<EuiSpacer size="xl" />
|
||||
{defaultActionGroupId ? (
|
||||
<ActionForm
|
||||
actions={alert.actions}
|
||||
|
|
|
|||
Loading…
Reference in a new issue