[Synthetics] Hide location and enabled toggle on `MonitorDetailsPanel…

…` for test run details (#152373) Co-authored-by: Shahzad <[email protected]>
elastic · Mar 1, 2023 · f23346e · f23346e
1 parent f6a0b88
commit f23346e
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 19 deletions.
diff --git a/.../synthetics/public/apps/synthetics/components/common/components/monitor_details_panel.tsx b/.../synthetics/public/apps/synthetics/components/common/components/monitor_details_panel.tsx
@@ -40,27 +40,38 @@ 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) {
     return <EuiLoadingContent lines={8} />;
   }
 
   return (
-    <PanelWithTitle paddingSize="m" title={MONITOR_DETAILS_LABEL} titleLeftAlign>
+    <PanelWithTitle
+      paddingSize="m"
+      title={MONITOR_DETAILS_LABEL}
+      titleLeftAlign
+      hasBorder={hasBorder}
+    >
       <WrapperStyle>
         <EuiSpacer size="s" />
         <EuiDescriptionList type="column" compressed align="left">
@@ -116,10 +127,15 @@ export const MonitorDetailsPanel = ({
           </DescriptionLabel>
           <TitleLabel>{FREQUENCY_LABEL}</TitleLabel>
           <DescriptionLabel>{frequencyStr(monitor[ConfigKey.SCHEDULE])}</DescriptionLabel>
-          <TitleLabel>{LOCATIONS_LABEL}</TitleLabel>
-          <DescriptionLabel>
-            <LocationsStatus configId={configId} monitorLocations={monitor.locations} />
-          </DescriptionLabel>
+
+          {!hideLocations && (
+            <>
+              <TitleLabel>{LOCATIONS_LABEL}</TitleLabel>
+              <DescriptionLabel>
+                <LocationsStatus configId={configId} monitorLocations={monitor.locations} />
+              </DescriptionLabel>
+            </>
+          )}
 
           <TitleLabel>{TAGS_LABEL}</TitleLabel>
           <DescriptionLabel>

diff --git a/...plugins/synthetics/public/apps/synthetics/components/error_details/error_details_page.tsx b/...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() {
           <EuiSpacer size="m" />
           <StepDurationPanel doBreakdown={false} />
           <EuiSpacer size="m" />
-          <MonitorDetailsPanelContainer />
+          <MonitorDetailsPanelContainer hideLocations />
         </EuiFlexItem>
       </EuiFlexGroup>
     </div>

diff --git a/...monitor_summary/monitor_details_panel.tsx → ...mmary/monitor_details_panel_container.tsx b/...monitor_summary/monitor_details_panel.tsx → ...mmary/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<MonitorDetailsPanelProps>) => {
   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/...ics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_summary.tsx b/...ics/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/...blic/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.tsx b/...blic/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.tsx
@@ -325,6 +325,7 @@ export function MonitorDetailFlyout(props: Props) {
           <EuiFlyoutBody>
             <DetailFlyoutDurationChart {...props} location={props.location} />
             <MonitorDetailsPanel
+              hasBorder={false}
               hideEnabled
               latestPing={monitorDetail.data}
               configId={configId}

diff --git a/...lugins/synthetics/public/apps/synthetics/components/test_run_details/test_run_details.tsx b/...lugins/synthetics/public/apps/synthetics/components/test_run_details/test_run_details.tsx
@@ -11,7 +11,7 @@ import moment from 'moment';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useParams } from 'react-router-dom';
 import { TestRunErrorInfo } from './components/test_run_error_info';
-import { MonitorDetailsPanelContainer } from '../monitor_details/monitor_summary/monitor_details_panel';
+import { MonitorDetailsPanelContainer } from '../monitor_details/monitor_summary/monitor_details_panel_container';
 import { useSelectedLocation } from '../monitor_details/hooks/use_selected_location';
 import { MonitorDetailsLinkPortal } from '../monitor_add_edit/monitor_details_portal';
 import { StepNumberNav } from './components/step_number_nav';
@@ -89,7 +89,7 @@ export const TestRunDetails = () => {
           <EuiFlexItem grow={1}>
             <StepDurationPanel legendPosition="bottom" />
             <EuiSpacer size="m" />
-            <MonitorDetailsPanelContainer />
+            <MonitorDetailsPanelContainer hideEnabled hideLocations />
           </EuiFlexItem>
         </EuiFlexGroup>
       )}