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.

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

[Backport 2.x] Fit and Finish UX Fixes #1093

Merged
merged 1 commit into from
Sep 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
8 changes: 4 additions & 4 deletions cypress/integration/bucket_level_monitor_spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -338,8 +338,8 @@ describe('Bucket-Level Monitors', () => {
// Add a trigger
addTriggerToVisualEditorMonitor(SAMPLE_TRIGGER, 0, SAMPLE_ACTION, true);

// Click update button to save monitor changes
cy.get('button').contains('Update').last().click({ force: true });
// Click save to save monitor changes
cy.get('button').contains('Save').last().click({ force: true });

// Confirm we can see only one row in the trigger list by checking <caption> element
cy.contains('This table contains 1 row');
Expand Down Expand Up @@ -375,8 +375,8 @@ describe('Bucket-Level Monitors', () => {
timeout: 25000,
});

// Click the update button
cy.get('button').contains('Update').last().click({ force: true });
// Click the save button
cy.get('button').contains('Save').last().click({ force: true });

// Confirm we're on the Monitor Details page by searching for the History element
cy.contains('History', { timeout: 20000 });
Expand Down
4 changes: 2 additions & 2 deletions cypress/integration/cluster_metrics_monitor_spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -369,8 +369,8 @@ describe('ClusterMetricsMonitor', () => {
'ctx.results[0].number_of_pending_tasks >= 0'
);

// Click update button to save monitor changes
cy.get('button').contains('Update').last().click({ force: true });
// Click save button to save monitor changes
cy.get('button').contains('Save').last().click({ force: true });

// Confirm we can see only one row in the trigger list by checking <caption> element
cy.contains('This table contains 1 row');
Expand Down
3 changes: 2 additions & 1 deletion cypress/integration/composite_level_monitor_spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ describe('CompositeLevelMonitor', () => {

it('by visual editor', () => {
// Verify edit page
cy.contains('Edit').click({ force: true });
cy.contains('Edit monitor', { timeout: 20000 });
cy.get('input[name="name"]').type('_edited');

Expand All @@ -150,7 +151,7 @@ describe('CompositeLevelMonitor', () => {
.type('{enter}');

cy.intercept('api/alerting/workflows/*').as('updateMonitorRequest');
cy.get('button').contains('Update').click({ force: true });
cy.get('button').contains('Save').click({ force: true });

// Wait for monitor to be created
cy.wait('@updateMonitorRequest').then(() => {
Expand Down
12 changes: 6 additions & 6 deletions cypress/integration/document_level_monitor_spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -380,8 +380,8 @@ describe('DocumentLevelMonitor', () => {

// TODO: Test with Notifications plugin

// Click the update button
cy.get('button').contains('Update').last().click({ force: true });
// Click the save button
cy.get('button').contains('Save').last().click({ force: true });

// Confirm we can see only one row in the trigger list by checking <caption> element
cy.contains('This table contains 2 rows');
Expand Down Expand Up @@ -446,8 +446,8 @@ describe('DocumentLevelMonitor', () => {

// TODO: Test with Notifications plugin

// Click the create button
cy.get('button').contains('Update').last().click({ force: true });
// Click the save button
cy.get('button').contains('Save').last().click({ force: true });

// Confirm we can see only one row in the trigger list by checking <caption> element
cy.contains('This table contains 1 row');
Expand Down Expand Up @@ -489,8 +489,8 @@ describe('DocumentLevelMonitor', () => {
cy.get('[data-test-subj="indicesComboBox"]').should('not.have.text', TESTING_INDEX_A);
cy.get('[data-test-subj="indicesComboBox"]').contains(TESTING_INDEX_B, { timeout: 20000 });

// Click the update button
cy.get('button').contains('Update').last().click({ force: true });
// Click the save button
cy.get('button').contains('Save').last().click({ force: true });

// Confirm we're on the Monitor Details page by searching for the History element
cy.contains('History', { timeout: 20000 });
Expand Down
12 changes: 6 additions & 6 deletions cypress/integration/query_level_monitor_spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -178,8 +178,8 @@ describe('Query-Level Monitors', () => {
.clear()
.type(UPDATED_MONITOR, { force: true });

// Click Update button
cy.get('button').contains('Update').last().click({ force: true });
// Click save button
cy.get('button').contains('Save').last().click({ force: true });

// Confirm the update process is done and the page loaded
cy.contains('Edit monitor');
Expand Down Expand Up @@ -222,8 +222,8 @@ describe('Query-Level Monitors', () => {
timeout: 25000,
});

// Click the update button
cy.get('button').contains('Update').last().click();
// Click the save button
cy.get('button').contains('Save').last().click();

// Confirm we're on the Monitor Details page by searching for the History element
cy.contains('History', { timeout: 25000 });
Expand Down Expand Up @@ -339,8 +339,8 @@ describe('Query-Level Monitors', () => {
addVisualQueryLevelTrigger(trigger.name, i, true, `IS ${trigger.enum}`, `${i}`);
}

// Click Update button
cy.get('button').contains('Update').last().click({ force: true });
// Click save button
cy.get('button').contains('Save').last().click({ force: true });

// Confirm we can see the correct number of rows in the trigger list by checking <caption> element
cy.contains(`This table contains ${triggers.length} rows`, { timeout: 25000 });
Expand Down
4 changes: 2 additions & 2 deletions public/components/Breadcrumbs/Breadcrumbs.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,8 @@ export async function getBreadcrumb(route, routeState, httpClient) {
console.error(err);
}
const breadcrumbs = [{ text: monitorName, href: `/monitors/${base}` }];
if (action === MONITOR_ACTIONS.UPDATE_MONITOR)
breadcrumbs.push({ text: 'Update monitor', href: '/' });
if (action === MONITOR_ACTIONS.EDIT_MONITOR)
breadcrumbs.push({ text: 'Edit monitor', href: '/' });
if (action === TRIGGER_ACTIONS.CREATE_TRIGGER)
breadcrumbs.push({ text: 'Create trigger', href: '/' });
if (action === TRIGGER_ACTIONS.UPDATE_TRIGGER)
Expand Down
2 changes: 1 addition & 1 deletion public/components/Breadcrumbs/Breadcrumbs.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ describe('getBreadcrumb', () => {
httpClientMock.get.mockResolvedValue({ ok: true, resp: { name: 'random_name' } });
expect(
await getBreadcrumb(
`${monitorId}?action=${MONITOR_ACTIONS.UPDATE_MONITOR}`,
`${monitorId}?action=${MONITOR_ACTIONS.EDIT_MONITOR}`,
{},
httpClientMock
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ Array [
},
Object {
"href": "/",
"text": "Update monitor",
"text": "Edit monitor",
},
]
`;
Expand Down
2 changes: 1 addition & 1 deletion public/components/ContentPanel/ContentPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const ContentPanel = ({
children,
panelOptions = {},
}) => (
<EuiPanel style={{ paddingLeft: '0px', paddingRight: '0px', ...panelStyles }}>
<EuiPanel style={{ padding: '16px', ...panelStyles }}>
<EuiFlexGroup style={{ padding: '0px 10px' }} justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem>
<EuiText size={titleSize}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`ContentPanel renders 1`] = `
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
style="padding-left:0px;padding-right:0px"
style="padding:16px"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
Expand Down
10 changes: 5 additions & 5 deletions public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,13 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> = ({ get

useEffect(() => {
setLoading(true);
getClient().get('../api/alerting/alerts', {
getClient().get('../api/alerting/alerts', {
query: {
size: 25,
sortField: 'start_time',
dataSourceId: dataSource?.id || '',
sortDirection: 'desc'
}
}
}).then(res => {
if (res.ok) {
setAlerts(res.alerts);
Expand All @@ -53,7 +53,7 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> = ({ get
const createAlertDetailsHeader = useCallback((alert) => {
const severityColor = getSeverityColor(alert.severity);
const triggerName = alert.trigger_name ?? DEFAULT_EMPTY_DATA;

return (
<EuiFlexGroup gutterSize="s" justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
Expand Down Expand Up @@ -147,9 +147,9 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> = ({ get
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiLink href={getApplication().getUrlForApp(ALERTS_NAV_ID, { path: '#/dashboard' })} target="_blank"><EuiText size="s" className="eui-displayInline">View all</EuiText></EuiLink>
<EuiLink href={getApplication().getUrlForApp(ALERTS_NAV_ID, { path: '#/dashboard' })}><EuiText size="s" className="eui-displayInline">View all</EuiText></EuiLink>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
)
};
};
Original file line number Diff line number Diff line change
Expand Up @@ -455,8 +455,8 @@ export default class AlertsDashboardFlyoutComponent extends Component {
onPageChange={this.onPageClick}
isAlertsFlyout={true}
monitorType={monitorType}
panelStyles={{ padding: '8px 0px 16px' }}
/>
<EuiHorizontalRule margin="xs" />
<EuiBasicTable
items={loading ? [] : trimmedAlerts}
/*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -202,13 +202,15 @@ exports[`AlertsDashboardFlyoutComponent renders 1`] = `
onSearchChange={[Function]}
onStateChange={[Function]}
pageCount={1}
panelStyles={
Object {
"padding": "8px 0px 16px",
}
}
search=""
severity="ALL"
state="ALL"
/>
<EuiHorizontalRule
margin="xs"
/>
<EuiBasicTable
columns={
Array [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`QueryPerformance renders 1`] = `
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
style="padding-left:10px;padding-right:10px"
style="padding:16px;padding-left:10px;padding-right:10px"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`VisualGraph renders 1`] = `
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
style="padding-left:10px;padding-right:0px"
style="padding:16px;padding-left:10px"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
Expand Down Expand Up @@ -544,7 +544,7 @@ exports[`VisualGraph renders 1`] = `
exports[`VisualGraph renders with bucket level monitor 1`] = `
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
style="padding-left:10px;padding-right:0px"
style="padding:16px;padding-left:10px"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ export default class CreateMonitor extends Component {
} = this.props;
const { createModalOpen, initialValues, plugins } = this.state;
return (
<div style={{ padding: '25px 50px' }}>
<div style={{ padding: '16px' }}>
<Formik
initialValues={initialValues}
onSubmit={this.evaluateSubmission}
Expand Down Expand Up @@ -268,7 +268,7 @@ export default class CreateMonitor extends Component {
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSmallButton fill onClick={handleSubmit} isLoading={isSubmitting}>
{edit ? 'Update' : 'Create'}
{edit ? 'Save' : 'Create'}
</EuiSmallButton>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`CreateMonitor renders 1`] = `
<div
style={
Object {
"padding": "25px 50px",
"padding": "16px",
}
}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ class DataSource extends Component {
<ContentPanel
title="Select data"
titleSize="s"
panelStyles={{ paddingLeft: '10px', paddingRight: '10px' }}
bodyStyles={{ padding: 'initial' }}
>
{monitorIndexDisplay}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,6 @@ exports[`DataSource renders 1`] = `
"padding": "initial",
}
}
panelStyles={
Object {
"paddingLeft": "10px",
"paddingRight": "10px",
}
}
title="Select data"
titleSize="s"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -702,10 +702,6 @@ class DefineMonitor extends Component {
<PanelComponent
title="Query"
titleSize="s"
panelStyles={{
paddingLeft: '10px',
paddingRight: '10px',
}}
bodyStyles={{ padding: 'initial' }}
actions={monitorContent.actions}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -91,12 +91,6 @@ exports[`DefineMonitor renders 1`] = `
"padding": "initial",
}
}
panelStyles={
Object {
"paddingLeft": "10px",
"paddingRight": "10px",
}
}
title="Query"
titleSize="s"
>
Expand Down Expand Up @@ -144,12 +138,6 @@ exports[`DefineMonitor should show warning in case of Ad monitor and plugin is n
"padding": "initial",
}
}
panelStyles={
Object {
"paddingLeft": "10px",
"paddingRight": "10px",
}
}
title="Query"
titleSize="s"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,7 @@ const MonitorDetails = ({
<Container
title="Monitor details"
titleSize="s"
panelStyles={{
paddingBottom: '20px',
paddingLeft: '10px',
paddingRight: '10px',
paddingTop: '20px',
}}
panelStyles={{ padding: '16px' }}
actions={anomalyDetectorContent.actions}
>
{!flyoutMode && <EuiSpacer size="s" />}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`WorkflowDetails renders 1`] = `
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
style="padding-left:10px;padding-right:10px;padding-bottom:20px;padding-top:20px"
style="padding:16px;padding-bottom:20px;padding-left:10px;padding-right:10px;padding-top:20px"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -453,7 +453,7 @@ class ConfigureTriggers extends React.Component {
? 'Triggers define the conditions that determine when a composite monitor should generate its own alert.'
: undefined
}
panelStyles={{ paddingBottom: '0px', paddingLeft: '20px', paddingRight: '20px' }}
panelStyles={{ padding: '16px' }}
bodyStyles={{ paddingLeft: '0px', padding: '10px' }}
horizontalRuleClassName={'accordion-horizontal-rule'}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ export default class AcknowledgeAlertsModal extends Component {
onCreateTrigger = () => {
const { history, monitorId, onClose } = this.props;
onClose();
history.push(`/monitors/${monitorId}?action=${MONITOR_ACTIONS.UPDATE_MONITOR}`);
history.push(`/monitors/${monitorId}?action=${MONITOR_ACTIONS.EDIT_MONITOR}`);
};

render() {
Expand Down
Loading
Loading