From f23346e4a61fcbce8d0678edb76a7d3055852dde Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 1 Mar 2023 09:38:42 -0500 Subject: [PATCH] [Synthetics] Hide location and enabled toggle on `MonitorDetailsPanel` for test run details (#152373) Co-authored-by: Shahzad --- .../components/monitor_details_panel.tsx | 40 +++++++++++++------ .../error_details/error_details_page.tsx | 4 +- ...sx => monitor_details_panel_container.tsx} | 8 +++- .../monitor_summary/monitor_summary.tsx | 2 +- .../overview/monitor_detail_flyout.tsx | 1 + .../test_run_details/test_run_details.tsx | 4 +- 6 files changed, 40 insertions(+), 19 deletions(-) rename x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/{monitor_details_panel.tsx => monitor_details_panel_container.tsx} (85%) diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_details_panel.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_details_panel.tsx index 2bfd04fa26d57..9aa9d90e29ee9 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_details_panel.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_details_panel.tsx @@ -40,19 +40,25 @@ const DescriptionLabel = euiStyled(EuiDescriptionListDescription)` width: 60%; `; +export interface MonitorDetailsPanelProps { + latestPing?: Ping; + loading: boolean; + configId: string; + monitor: EncryptedSyntheticsSavedMonitor | null; + hideEnabled?: boolean; + hideLocations?: boolean; + hasBorder?: boolean; +} + export const MonitorDetailsPanel = ({ monitor, latestPing, loading, configId, hideEnabled = false, -}: { - latestPing?: Ping; - loading: boolean; - configId: string; - monitor: EncryptedSyntheticsSavedMonitor | null; - hideEnabled?: boolean; -}) => { + hideLocations = false, + hasBorder = true, +}: MonitorDetailsPanelProps) => { const dispatch = useDispatch(); if (!monitor) { @@ -60,7 +66,12 @@ export const MonitorDetailsPanel = ({ } return ( - + @@ -116,10 +127,15 @@ export const MonitorDetailsPanel = ({ {FREQUENCY_LABEL} {frequencyStr(monitor[ConfigKey.SCHEDULE])} - {LOCATIONS_LABEL} - - - + + {!hideLocations && ( + <> + {LOCATIONS_LABEL} + + + + + )} {TAGS_LABEL} diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/error_details_page.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/error_details_page.tsx index 3174d85776733..084dd68934626 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/error_details_page.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/error_details_page.tsx @@ -21,7 +21,7 @@ import { FailedTestsList } from './components/failed_tests_list'; import { ErrorTimeline } from './components/error_timeline'; import { useErrorDetailsBreadcrumbs } from './hooks/use_error_details_breadcrumbs'; import { StepImage } from '../step_details_page/step_screenshot/step_image'; -import { MonitorDetailsPanelContainer } from '../monitor_details/monitor_summary/monitor_details_panel'; +import { MonitorDetailsPanelContainer } from '../monitor_details/monitor_summary/monitor_details_panel_container'; export function ErrorDetailsPage() { const { failedTests, loading } = useErrorFailedTests(); @@ -80,7 +80,7 @@ export function ErrorDetailsPage() { - + diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel_container.tsx similarity index 85% rename from x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel.tsx rename to x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel_container.tsx index c2a26f5242f0f..99885ac30fb87 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel_container.tsx @@ -9,12 +9,15 @@ import React from 'react'; import { EuiLoadingContent } from '@elastic/eui'; import { useParams } from 'react-router-dom'; import { euiStyled } from '@kbn/kibana-react-plugin/common'; -import { MonitorDetailsPanel } from '../../common/components/monitor_details_panel'; +import { + MonitorDetailsPanelProps, + MonitorDetailsPanel, +} from '../../common/components/monitor_details_panel'; import { useSelectedMonitor } from '../hooks/use_selected_monitor'; import { ConfigKey } from '../../../../../../common/runtime_types'; import { useMonitorLatestPing } from '../hooks/use_monitor_latest_ping'; -export const MonitorDetailsPanelContainer = () => { +export const MonitorDetailsPanelContainer = (props: Partial) => { const { latestPing } = useMonitorLatestPing(); const { monitorId: configId } = useParams<{ monitorId: string }>(); @@ -34,6 +37,7 @@ export const MonitorDetailsPanelContainer = () => { monitor={monitor} loading={loading} configId={configId} + {...props} /> ); }; diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_summary.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_summary.tsx index b087da10f767c..ebaaee6e44e50 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_summary.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_summary.tsx @@ -21,7 +21,7 @@ import { MonitorDurationTrend } from './duration_trend'; import { StepDurationPanel } from './step_duration_panel'; import { AvailabilityPanel } from './availability_panel'; import { DurationPanel } from './duration_panel'; -import { MonitorDetailsPanelContainer } from './monitor_details_panel'; +import { MonitorDetailsPanelContainer } from './monitor_details_panel_container'; import { AvailabilitySparklines } from './availability_sparklines'; import { LastTestRun } from './last_test_run'; import { LAST_10_TEST_RUNS, TestRunsTable } from './test_runs_table'; diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.tsx index b34f4f6fe421a..187f590c9b360 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.tsx @@ -325,6 +325,7 @@ export function MonitorDetailFlyout(props: Props) { { - + )}