[APM] Errors table for service overview (#83065) (#83291)

Author: dgieselaar

x-pack/plugins/apm/common/runtime_types/to_number_rt/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import * as t from 'io-ts';
+
+export const toNumberRt = new t.Type<number, unknown, unknown>(
+  'ToNumber',
+  t.any.is,
+  (input, context) => {
+    const number = Number(input);
+    return !isNaN(number) ? t.success(number) : t.failure(input, context);
+  },
+  t.identity
+);

x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/ServiceListMetric.tsx

@@ -3,15 +3,9 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
-import { EuiFlexItem } from '@elastic/eui';
-import { EuiFlexGroup } from '@elastic/eui';
-
 import React from 'react';
-import { useTheme } from '../../../../hooks/useTheme';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
-import { getEmptySeries } from '../../../shared/charts/CustomPlot/getEmptySeries';
-import { SparkPlot } from '../../../shared/charts/SparkPlot';
+import { SparkPlotWithValueLabel } from '../../../shared/charts/spark_plot/spark_plot_with_value_label';
 
 export function ServiceListMetric({
   color,
@@ -22,28 +16,17 @@ export function ServiceListMetric({
   series?: Array<{ x: number; y: number | null }>;
   valueLabel: React.ReactNode;
 }) {
-  const theme = useTheme();
-
   const {
     urlParams: { start, end },
   } = useUrlParams();
 
-  const colorValue = theme.eui[color];
-
   return (
-    <EuiFlexGroup gutterSize="m">
-      <EuiFlexItem grow={false}>
-        <SparkPlot
-          series={
-            series ??
-            getEmptySeries(parseFloat(start!), parseFloat(end!))[0].data
-          }
-          color={colorValue}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false} style={{ whiteSpace: 'nowrap' }}>
-        {valueLabel}
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <SparkPlotWithValueLabel
+      start={parseFloat(start!)}
+      end={parseFloat(end!)}
+      valueLabel={valueLabel}
+      series={series}
+      color={color}
+    />
   );
 }

x-pack/plugins/apm/public/components/app/service_overview/index.tsx

@@ -12,9 +12,10 @@ import { useTrackPageview } from '../../../../../observability/public';
 import { isRumAgentName } from '../../../../common/agent_name';
 import { ChartsSyncContextProvider } from '../../../context/charts_sync_context';
 import { TransactionErrorRateChart } from '../../shared/charts/transaction_error_rate_chart';
-import { ErrorOverviewLink } from '../../shared/Links/apm/ErrorOverviewLink';
 import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
 import { TransactionOverviewLink } from '../../shared/Links/apm/TransactionOverviewLink';
+import { ServiceOverviewErrorsTable } from './service_overview_errors_table';
+import { TableLinkFlexItem } from './table_link_flex_item';
 
 const rowHeight = 310;
 const latencyChartRowHeight = 230;
@@ -27,12 +28,6 @@ const LatencyChartRow = styled(EuiFlexItem)`
   height: ${latencyChartRowHeight}px;
 `;
 
-const TableLinkFlexItem = styled(EuiFlexItem)`
-  & > a {
-    text-align: right;
-  }
-`;
-
 interface ServiceOverviewProps {
   agentName?: string;
   serviceName: string;
@@ -130,30 +125,7 @@ export function ServiceOverview({
             )}
             <EuiFlexItem grow={6}>
               <EuiPanel>
-                <EuiFlexGroup>
-                  <EuiFlexItem>
-                    <EuiTitle size="xs">
-                      <h2>
-                        {i18n.translate(
-                          'xpack.apm.serviceOverview.errorsTableTitle',
-                          {
-                            defaultMessage: 'Errors',
-                          }
-                        )}
-                      </h2>
-                    </EuiTitle>
-                  </EuiFlexItem>
-                  <TableLinkFlexItem>
-                    <ErrorOverviewLink serviceName={serviceName}>
-                      {i18n.translate(
-                        'xpack.apm.serviceOverview.errorsTableLinkText',
-                        {
-                          defaultMessage: 'View errors',
-                        }
-                      )}
-                    </ErrorOverviewLink>
-                  </TableLinkFlexItem>
-                </EuiFlexGroup>
+                <ServiceOverviewErrorsTable serviceName={serviceName} />
               </EuiPanel>
             </EuiFlexItem>
           </EuiFlexGroup>

x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/fetch_wrapper.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { FETCH_STATUS } from '../../../../hooks/useFetcher';
+import { ErrorStatePrompt } from '../../../shared/ErrorStatePrompt';
+import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt';
+
+export function FetchWrapper({
+  hasData,
+  status,
+  children,
+}: {
+  hasData: boolean;
+  status: FETCH_STATUS;
+  children: React.ReactNode;
+}) {
+  if (status === FETCH_STATUS.FAILURE) {
+    return <ErrorStatePrompt />;
+  }
+
+  if (!hasData && status !== FETCH_STATUS.SUCCESS) {
+    return <LoadingStatePrompt />;
+  }
+
+  return <>{children}</>;
+}