From e580f23b13c3a6b1f0f3d47289afdfcdf7227f99 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Mon, 14 Nov 2022 15:00:20 +0100
Subject: [PATCH] [Synthetics] Added total step duration (#144993)

---
 .../synthetics/single_metric_config.ts        |  1 +
 .../shared/exploratory_view/types.ts          |  2 +-
 .../components/step_metrics.tsx               | 27 +++++++++++++------
 .../hooks/use_step_metrics.ts                 |  9 +++++--
 .../hooks/use_step_prev_metrics.ts            |  5 ++++
 5 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/synthetics/single_metric_config.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/synthetics/single_metric_config.ts
index 1ad3410ca344..a8f1e56b49c4 100644
--- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/synthetics/single_metric_config.ts
+++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/synthetics/single_metric_config.ts
@@ -91,6 +91,7 @@ export function getSyntheticsSingleMetricConfig({ dataView }: ConfigProps): Seri
         }),
         metricStateOptions: {
           titlePosition: 'bottom',
+          textAlign: 'center',
         },
       },
       {
diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/types.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/types.ts
index 5094088b436f..a193862b2523 100644
--- a/x-pack/plugins/observability/public/components/shared/exploratory_view/types.ts
+++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/types.ts
@@ -69,7 +69,7 @@ export interface MetricOption {
   timeScale?: string;
   showPercentileAnnotations?: boolean;
   formula?: string;
-  metricStateOptions?: Pick<MetricState, 'colorMode' | 'palette' | 'titlePosition'>;
+  metricStateOptions?: Pick<MetricState, 'colorMode' | 'palette' | 'titlePosition' | 'textAlign'>;
   palette?: PaletteOutput;
   format?: 'percent' | 'number';
 }
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/components/step_metrics.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/components/step_metrics.tsx
index cacf96ecb54f..3845fdf2def5 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/components/step_metrics.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/components/step_metrics.tsx
@@ -14,6 +14,7 @@ import {
   EuiTitle,
   EuiIcon,
   EuiIconTip,
+  EuiFlexGrid,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { CLS_HELP_LABEL, DCL_TOOLTIP, FCP_TOOLTIP, LCP_HELP_LABEL } from './labels';
@@ -31,7 +32,7 @@ export const formatMillisecond = (ms: number) => {
 export const StepMetrics = () => {
   const stepMetrics = useStepMetrics();
 
-  const { fcpThreshold, lcpThreshold, clsThreshold, dclThreshold } =
+  const { fcpThreshold, lcpThreshold, clsThreshold, dclThreshold, totalThreshold } =
     useStepPrevMetrics(stepMetrics);
 
   return (
@@ -48,7 +49,14 @@ export const StepMetrics = () => {
       </EuiFlexGroup>
 
       <EuiSpacer size="s" />
-      <EuiFlexGroup gutterSize="l">
+      <EuiFlexGrid gutterSize="l" columns={3}>
+        <EuiFlexItem>
+          <StatThreshold
+            description={TOTAL_DURATION_LABEL}
+            title={formatMillisecond((stepMetrics.totalDuration?.value ?? 0) / 1000)}
+            threshold={totalThreshold}
+          />
+        </EuiFlexItem>
         <EuiFlexItem>
           <StatThreshold
             description={'FCP'}
@@ -73,9 +81,6 @@ export const StepMetrics = () => {
             helpText={CLS_HELP_LABEL}
           />
         </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer size="m" />
-      <EuiFlexGroup wrap>
         <EuiFlexItem>
           <StatThreshold
             description={'DCL'}
@@ -86,13 +91,14 @@ export const StepMetrics = () => {
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiStat
+            titleSize="s"
             description={'Transfer size'}
             title={stepMetrics.transferData + ' MB'}
             reverse={true}
           />
         </EuiFlexItem>
         <EuiFlexItem />
-      </EuiFlexGroup>
+      </EuiFlexGrid>
     </>
   );
 };
@@ -106,7 +112,7 @@ const StatThreshold = ({
   threshold: number;
   title: number | string;
   description: string;
-  helpText: string;
+  helpText?: string;
 }) => {
   const isUp = threshold >= 5;
   const isDown = threshold < 5;
@@ -116,10 +122,11 @@ const StatThreshold = ({
     <EuiFlexGroup>
       <EuiFlexItem grow={false}>
         <EuiStat
+          titleSize="s"
           {...(isSame ? {} : { titleColor: isUp ? 'danger' : 'success' })}
           description={
             <span>
-              {description} <EuiIconTip content={helpText} position="right" />
+              {description} {helpText && <EuiIconTip content={helpText} position="right" />}
             </span>
           }
           title={
@@ -144,3 +151,7 @@ const StatThreshold = ({
 const METRICS_LABEL = i18n.translate('xpack.synthetics.stepDetailsRoute.metrics', {
   defaultMessage: 'Metrics',
 });
+
+const TOTAL_DURATION_LABEL = i18n.translate('xpack.synthetics.totalDuration.metrics', {
+  defaultMessage: 'Step duration',
+});
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/hooks/use_step_metrics.ts b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/hooks/use_step_metrics.ts
index ab82850723ab..3db64c511330 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/hooks/use_step_metrics.ts
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/hooks/use_step_metrics.ts
@@ -32,8 +32,8 @@ export const useStepMetrics = (loadData = true, prevCheckGroupId?: string) => {
           bool: {
             filter: [
               {
-                term: {
-                  'synthetics.type': 'step/metrics',
+                terms: {
+                  'synthetics.type': ['step/metrics', 'step/end'],
                 },
               },
               ...useStepFilters(prevCheckGroupId),
@@ -61,6 +61,11 @@ export const useStepMetrics = (loadData = true, prevCheckGroupId?: string) => {
               field: SYNTHETICS_DCL,
             },
           },
+          totalDuration: {
+            sum: {
+              field: SYNTHETICS_STEP_DURATION,
+            },
+          },
         },
       },
     },
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/hooks/use_step_prev_metrics.ts b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/hooks/use_step_prev_metrics.ts
index 28ea74c22ae4..bf8f1e14259d 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/hooks/use_step_prev_metrics.ts
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/hooks/use_step_prev_metrics.ts
@@ -31,12 +31,17 @@ export const useStepPrevMetrics = (stepMetrics: StepMetrics) => {
   const lcpThreshold = findThreshold(stepMetrics?.lcp?.value, prevMetrics?.lcp?.value);
   const clsThreshold = findThreshold(stepMetrics?.cls?.value, prevMetrics?.cls?.value);
   const dclThreshold = findThreshold(stepMetrics?.dcl?.value, prevMetrics?.dcl?.value);
+  const totalThreshold = findThreshold(
+    stepMetrics?.totalDuration?.value,
+    prevMetrics?.totalDuration?.value
+  );
 
   return {
     fcpThreshold,
     lcpThreshold,
     clsThreshold,
     dclThreshold,
+    totalThreshold,
   };
 };