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

[SLOs] Hide view in app in slo alerts table in slo details page #175441

Merged
merged 5 commits into from
Jan 25, 2024
Merged

[SLOs] Hide view in app in slo alerts table in slo details page #175441

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
88f35cd
hide view in app in slo
shahzad31 Jan 24, 2024
62b95dd
update
shahzad31 Jan 24, 2024
ff8619e
Merge branch 'main' into view-in-app
shahzad31 Jan 24, 2024
2d640a9
Merge branch 'main' into view-in-app
shahzad31 Jan 24, 2024
085c055
Merge branch 'main' into view-in-app
shahzad31 Jan 25, 2024
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
9 changes: 7 additions & 2 deletions ...plugins/observability/public/components/alerts_flyout/use_get_alert_flyout_components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@
import React, { useCallback, useMemo } from 'react';
import { AlertsTableFlyoutBaseProps } from '@kbn/triggers-actions-ui-plugin/public';

import { useRouteMatch } from 'react-router-dom';
import { SLO_ALERTS_TABLE_ID } from '../../pages/slo_details/components/slo_detail_alerts';
import { SLO_DETAIL_PATH } from '../../../common/locators/paths';
import type { ObservabilityRuleTypeRegistry } from '../../rules/create_observability_rule_type_registry';
import { AlertsFlyoutHeader } from './alerts_flyout_header';
import { AlertsFlyoutBody } from './alerts_flyout_body';
Expand All @@ -19,6 +22,7 @@ export { AlertsFlyout } from './alerts_flyout';
export const useGetAlertFlyoutComponents = (
observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry
) => {
const isSLODetailsPage = useRouteMatch(SLO_DETAIL_PATH);
Copy link
Contributor

Choose a reason for hiding this comment

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

This component alerts_flyout is not specific to SLO, yet we add a very specific SLO condition here. It does not seem to be the right place.
But in the other hand, I don't have a better approach because of the way AlertTable / AlertTableRegistry and all this works together...

const body = useCallback(
(props: AlertsTableFlyoutBaseProps) => {
const alert = parseAlert(observabilityRuleTypeRegistry)(props.alert);
Expand All @@ -37,10 +41,11 @@ export const useGetAlertFlyoutComponents = (

const footer = useCallback(
(props: AlertsTableFlyoutBaseProps) => {
const isInApp = Boolean(SLO_ALERTS_TABLE_ID === props.id && isSLODetailsPage);
const alert = parseAlert(observabilityRuleTypeRegistry)(props.alert);
return <AlertsFlyoutFooter isInApp={false} alert={alert} />;
return <AlertsFlyoutFooter isInApp={isInApp} alert={alert} />;
},
[observabilityRuleTypeRegistry]
[isSLODetailsPage, observabilityRuleTypeRegistry]
);

return useMemo(
Expand Down
21 changes: 14 additions & 7 deletions x-pack/plugins/observability/public/pages/alerts/components/alert_actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@ import { AttachmentType } from '@kbn/cases-plugin/common';
import { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
import { TimelineNonEcsData } from '@kbn/timelines-plugin/common';
import type { AlertActionsProps } from '@kbn/triggers-actions-ui-plugin/public/types';
import { useRouteMatch } from 'react-router-dom';
import { SLO_ALERTS_TABLE_ID } from '../../slo_details/components/slo_detail_alerts';
import { RULE_DETAILS_PAGE_ID } from '../../rule_details/constants';
import { paths } from '../../../../common/locators/paths';
import { paths, SLO_DETAIL_PATH } from '../../../../common/locators/paths';
import { isAlertDetailsEnabledPerApp } from '../../../utils/is_alert_details_enabled';
import { useKibana } from '../../../utils/kibana_react';
import { parseAlert } from '../helpers/parse_alert';
Expand All @@ -40,7 +42,10 @@ export function AlertActions({
observabilityRuleTypeRegistry,
...customActionsProps
}: ObservabilityAlertActionsProps) {
const { alert, refresh } = customActionsProps;
const { alert, refresh, id } = customActionsProps;
const isSLODetailsPage = useRouteMatch(SLO_DETAIL_PATH);

const isInApp = Boolean(id === SLO_ALERTS_TABLE_ID && isSLODetailsPage);
const {
cases: {
helpers: { getRuleIdFromEvent, canUseCases },
Expand Down Expand Up @@ -183,7 +188,7 @@ export function AlertActions({

return (
<>
{viewInAppUrl ? (
{viewInAppUrl && !isInApp ? (
<EuiFlexItem>
<EuiToolTip
content={i18n.translate('xpack.observability.alertsTable.viewInAppTextLabel', {
Expand All @@ -202,11 +207,13 @@ export function AlertActions({
/>
</EuiToolTip>
</EuiFlexItem>
) : (
<EuiFlexItem style={{ width: 32 }} />
)}
) : null}

<EuiFlexItem>
<EuiFlexItem
css={{
textAlign: 'center',
}}
>
<EuiPopover
anchorPosition="downLeft"
button={
Expand Down
4 changes: 2 additions & 2 deletions x-pack/plugins/observability/public/pages/slo_details/components/slo_detail_alerts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { AlertConsumers } from '@kbn/rule-data-utils';
import { ALL_VALUE, SLOWithSummaryResponse } from '@kbn/slo-schema';
import { useKibana } from '../../../utils/kibana_react';

const ALERTS_TABLE_ID = 'xpack.observability.slo.sloDetails.alertTable';
export const SLO_ALERTS_TABLE_ID = 'xpack.observability.slo.sloDetails.alertTable';

export interface Props {
slo: SLOWithSummaryResponse;
Expand All @@ -30,7 +30,7 @@ export function SloDetailsAlerts({ slo }: Props) {
<AlertsStateTable
alertsTableConfigurationRegistry={alertsTableConfigurationRegistry}
configurationId={AlertConsumers.OBSERVABILITY}
id={ALERTS_TABLE_ID}
id={SLO_ALERTS_TABLE_ID}
data-test-subj="alertTable"
featureIds={[AlertConsumers.SLO, AlertConsumers.OBSERVABILITY]}
query={{
Expand Down