github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[SLO] Usage of Flyout in SLO Embeddables (#186598)

Browse source 
Fixes https://github.com/elastic/kibana/issues/180854

This PR replaces the usage of `Modal` with the usage of a `Flyout` for
the configuration of `Alerts` and `Error budget burn down` embeddables.

It also adds labels to the flyout form elements according to this
[comment](https://github.com/elastic/kibana/pull/179620#pullrequestreview-2002093254).

## Alerts Embeddable



3d7ecc98-059f-402d-97eb-9f52e8ff2407



## Error budget burn down Embeddable



90b12c11-1917-4d51-b552-f08d98c4b7e1
This commit is contained in:
Panagiota Mitsopoulou 2024-06-21 23:04:34 +02:00 • committed by GitHub
parent 561c562724
commit 4a9bf3f953
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 114 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

6
x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_alerts_open_configuration.tsx
View file

@ -21,7 +21,7 @@ export async function openSloConfiguration(
const queryClient = new QueryClient();
return new Promise(async (resolve, reject) => {
try {
const modalSession = overlays.openModal(
const flyoutSession = overlays.openFlyout(
toMountPoint(
<KibanaContextProvider
services={{
@ -33,11 +33,11 @@ export async function openSloConfiguration(
<SloConfiguration
initialInput={initialState}
onCreate={(update: EmbeddableSloProps) => {
modalSession.close();
flyoutSession.close();
resolve(update);
}}
onCancel={() => {
modalSession.close();
flyoutSession.close();
reject();
}}
/>

74
x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_configuration.tsx
View file

@ -7,11 +7,11 @@
import React, { useState } from 'react';
import {
EuiModal,
EuiModalHeader,
EuiModalHeaderTitle,
EuiModalBody,
EuiModalFooter,
EuiFlyout,
EuiFlyoutHeader,
EuiFlyoutBody,
EuiFlyoutFooter,
EuiTitle,
EuiButton,
EuiButtonEmpty,
EuiFlexGroup,
@ -45,20 +45,22 @@ export function SloConfiguration({ initialInput, onCreate, onCancel }: SloConfig
const hasGroupBy = selectedSlos?.some((slo) => slo.instanceId !== ALL_VALUE);
return (
<EuiModal
<EuiFlyout
onClose={onCancel}
css={`
min-width: 550px;
`}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
{i18n.translate('xpack.slo.sloEmbeddable.config.sloSelector.headerTitle', {
defaultMessage: 'SLO configuration',
})}{' '}
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiFlyoutHeader>
<EuiTitle>
<h2>
{i18n.translate('xpack.slo.sloEmbeddable.config.sloSelector.headerTitle', {
defaultMessage: 'Alerts configuration',
})}
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiFlexGroup>
<EuiFlexItem grow>
<SloSelector
@ -95,27 +97,29 @@ export function SloConfiguration({ initialInput, onCreate, onCancel }: SloConfig
/>
</>
)}
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={onCancel} data-test-subj="sloCancelButton">
<FormattedMessage
id="xpack.slo.Embeddable.config.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiButtonEmpty onClick={onCancel} data-test-subj="sloCancelButton">
<FormattedMessage
id="xpack.slo.Embeddable.config.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
<EuiButton
data-test-subj="sloConfirmButton"
isDisabled={!selectedSlos || selectedSlos.length === 0 || hasError}
onClick={onConfirmClick}
fill
>
<FormattedMessage
id="xpack.slo.embeddableSlo.config.confirmButtonLabel"
defaultMessage="Confirm configurations"
/>
</EuiButton>
</EuiModalFooter>
</EuiModal>
<EuiButton
data-test-subj="sloConfirmButton"
isDisabled={!selectedSlos || selectedSlos.length === 0 || hasError}
onClick={onConfirmClick}
fill
>
<FormattedMessage
id="xpack.slo.embeddableSlo.config.confirmButtonLabel"
defaultMessage="Confirm configurations"
/>
</EuiButton>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
);
}

9
x-pack/plugins/observability_solution/slo/public/embeddable/slo/alerts/slo_selector.tsx
View file

@ -68,7 +68,14 @@ export function SloSelector({ initialSlos, onSelected, hasError, singleSelection
);
return (
<EuiFormRow fullWidth isInvalid={hasError} error={hasError ? SLO_REQUIRED : undefined}>
<EuiFormRow
fullWidth
isInvalid={hasError}
error={hasError ? SLO_REQUIRED : undefined}
label={i18n.translate('xpack.slo.embeddable.sloSelectorLabel', {
defaultMessage: 'SLO',
})}
>
<EuiComboBox
aria-label={i18n.translate('xpack.slo.sloEmbeddable.config.sloSelector.ariaLabel', {
defaultMessage: 'SLO',

6
x-pack/plugins/observability_solution/slo/public/embeddable/slo/error_budget/error_budget_open_configuration.tsx
View file

@ -21,7 +21,7 @@ export async function openSloConfiguration(
const queryClient = new QueryClient();
return new Promise(async (resolve, reject) => {
try {
const modalSession = overlays.openModal(
const flyoutSession = overlays.openFlyout(
toMountPoint(
<KibanaContextProvider
services={{
@ -32,11 +32,11 @@ export async function openSloConfiguration(
<QueryClientProvider client={queryClient}>
<SloConfiguration
onCreate={(update: EmbeddableSloProps) => {
modalSession.close();
flyoutSession.close();
resolve(update);
}}
onCancel={() => {
modalSession.close();
flyoutSession.close();
reject();
}}
/>

74
x-pack/plugins/observability_solution/slo/public/embeddable/slo/error_budget/slo_configuration.tsx
View file

@ -7,11 +7,11 @@
import React, { useState } from 'react';
import {
EuiModal,
EuiModalHeader,
EuiModalHeaderTitle,
EuiModalBody,
EuiModalFooter,
EuiFlyout,
EuiFlyoutHeader,
EuiFlyoutBody,
EuiFlyoutFooter,
EuiTitle,
EuiButton,
EuiButtonEmpty,
EuiFlexGroup,
@ -37,15 +37,17 @@ export function SloConfiguration({ onCreate, onCancel }: SloConfigurationProps)
sloInstanceId: selectedSlo?.sloInstanceId,
});
return (
<EuiModal onClose={onCancel} style={{ minWidth: 550 }}>
<EuiModalHeader>
<EuiModalHeaderTitle>
{i18n.translate('xpack.slo.sloEmbeddable.config.sloSelector.headerTitle', {
defaultMessage: 'SLO configuration',
})}
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiFlyout onClose={onCancel} style={{ minWidth: 550 }}>
<EuiFlyoutHeader>
<EuiTitle>
<h2>
{i18n.translate('xpack.slo.errorBudgetEmbeddable.config.sloSelector.headerTitle', {
defaultMessage: 'Error budget burn down configuration',
})}
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiFlexGroup>
<EuiFlexItem grow>
<SloSelector
@ -60,27 +62,29 @@ export function SloConfiguration({ onCreate, onCancel }: SloConfigurationProps)
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty onClick={onCancel} data-test-subj="sloCancelButton">
<FormattedMessage
id="xpack.slo.sloEmbeddable.config.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiButtonEmpty onClick={onCancel} data-test-subj="sloCancelButton">
<FormattedMessage
id="xpack.slo.sloEmbeddable.config.cancelButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
<EuiButton
data-test-subj="sloConfirmButton"
isDisabled={!selectedSlo || hasError}
onClick={onConfirmClick}
fill
>
<FormattedMessage
id="xpack.slo.embeddableSlo.config.confirmButtonLabel"
defaultMessage="Confirm configurations"
/>
</EuiButton>
</EuiModalFooter>
</EuiModal>
<EuiButton
data-test-subj="sloConfirmButton"
isDisabled={!selectedSlo || hasError}
onClick={onConfirmClick}
fill
>
<FormattedMessage
id="xpack.slo.embeddableSlo.config.confirmButtonLabel"
defaultMessage="Confirm configurations"
/>
</EuiButton>
</EuiFlexGroup>
</EuiFlyoutFooter>
</EuiFlyout>
);
}

26
x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/overview_mode_selector.tsx
View file

@ -6,8 +6,9 @@
*/
import React from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiButtonGroup, type EuiButtonGroupOptionProps } from '@elastic/eui';
import { EuiButtonGroup, EuiFormRow, type EuiButtonGroupOptionProps } from '@elastic/eui';
import { OverviewMode } from './types';
const overviewModeOptions: EuiButtonGroupOptionProps[] = [
@ -38,13 +39,20 @@ export interface OverviewModeSelectorProps {
export function OverviewModeSelector({ value, onChange }: OverviewModeSelectorProps) {
return (
<EuiButtonGroup
data-test-subj="sloOverviewModeSelector"
isFullWidth
legend="This is a basic group"
options={overviewModeOptions}
idSelected={value}
onChange={onChange as (id: string) => void}
/>
<EuiFormRow
fullWidth
label={i18n.translate('xpack.slo.overviewEmbeddable.viewTypeLabel', {
defaultMessage: 'View type',
})}
>
<EuiButtonGroup
data-test-subj="sloOverviewModeSelector"
isFullWidth
legend="This is a basic group"
options={overviewModeOptions}
idSelected={value}
onChange={onChange as (id: string) => void}
/>
</EuiFormRow>
);
}

4
x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_configuration.tsx
View file

@ -206,8 +206,8 @@ export function SloConfiguration({ initialInput, onCreate, onCancel }: SloConfig
<EuiFlexItem>
<EuiTitle>
<h2>
{i18n.translate('xpack.slo.sloEmbeddable.config.sloSelector.headerTitle', {
defaultMessage: 'SLO configuration',
{i18n.translate('xpack.slo.overviewEmbeddable.config.sloSelector.headerTitle', {
defaultMessage: 'Overview configuration',
})}
</h2>
</EuiTitle>

6
x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_overview_open_configuration.tsx
View file

@ -22,7 +22,7 @@ export async function openSloConfiguration(
const queryClient = new QueryClient();
return new Promise(async (resolve, reject) => {
try {
const modalSession = overlays.openFlyout(
const flyoutSession = overlays.openFlyout(
toMountPoint(
<KibanaContextProvider
services={{
@ -34,11 +34,11 @@ export async function openSloConfiguration(
<SloConfiguration
initialInput={initialState}
onCreate={(update: GroupSloCustomInput | SingleSloCustomInput) => {
modalSession.close();
flyoutSession.close();
resolve(update);
}}
onCancel={() => {
modalSession.close();
flyoutSession.close();
reject();
}}
/>