From 10153b7799fe24d922b74d76f5391497dfe8c90d Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 7 Sep 2021 05:58:53 -0400
Subject: [PATCH] [APM] Fix loading message missing or inconsistent in various
 list views (#110772) (#111322)

* [APM] Fix loading message missing or inconsistent in various list views

* fix types and i18n

* fix comment

* PR review comments

* fix JVM loading message

Co-authored-by: Miriam <31922082+MiriamAparicio@users.noreply.github.com>
---
 .../app/service_node_overview/index.tsx       |  5 +-
 .../service_overview_errors_table/index.tsx   |  4 +-
 ...ice_overview_instances_chart_and_table.tsx |  1 +
 .../index.tsx                                 |  6 +-
 .../app/trace_overview/trace_list.tsx         |  5 +-
 .../shared/dependencies_table/index.tsx       | 55 +++++++++----------
 .../components/shared/managed_table/index.tsx | 16 +++---
 .../shared/overview_table_container/index.tsx | 14 ++---
 .../shared/transactions_table/index.tsx       |  5 +-
 9 files changed, 58 insertions(+), 53 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx
index 1158a671bfe0a..4bc33d440eeaf 100644
--- a/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx
@@ -19,7 +19,7 @@ import {
 } from '../../../../common/utils/formatters';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { useApmParams } from '../../../hooks/use_apm_params';
-import { useFetcher } from '../../../hooks/use_fetcher';
+import { useFetcher, FETCH_STATUS } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { truncate, unit } from '../../../utils/style';
 import { ServiceNodeMetricOverviewLink } from '../../shared/Links/apm/ServiceNodeMetricOverviewLink';
@@ -42,7 +42,7 @@ function ServiceNodeOverview() {
 
   const { serviceName } = useApmServiceContext();
 
-  const { data } = useFetcher(
+  const { data, status } = useFetcher(
     (callApmApi) => {
       if (!start || !end) {
         return undefined;
@@ -164,6 +164,7 @@ function ServiceNodeOverview() {
 
   return (
     <ManagedTable
+      isLoading={status === FETCH_STATUS.LOADING}
       noItemsMessage={i18n.translate('xpack.apm.jvmsTable.noJvmsLabel', {
         defaultMessage: 'No JVMs were found',
       })}
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
index 0c874bb02abea..cae9cbae69794 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
@@ -207,8 +207,8 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
         <TableFetchWrapper status={status}>
           <OverviewTableContainer
             fixedHeight={true}
-            isEmptyAndLoading={
-              totalItems === 0 && status === FETCH_STATUS.LOADING
+            isEmptyAndNotInitiated={
+              totalItems === 0 && status === FETCH_STATUS.NOT_INITIATED
             }
           >
             <EuiBasicTable
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx
index ed148d1403442..e1258a7850d5e 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx
@@ -228,6 +228,7 @@ export function ServiceOverviewInstancesChartAndTable({
             serviceName={serviceName}
             tableOptions={tableOptions}
             isLoading={mainStatsStatus === FETCH_STATUS.LOADING}
+            isNotInitiated={mainStatsStatus === FETCH_STATUS.NOT_INITIATED}
             onChangeTableOptions={(newTableOptions) => {
               setTableOptions({
                 pageIndex: newTableOptions.page?.index ?? 0,
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx
index ee971bf82f86e..1c3fe76b997ff 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/index.tsx
@@ -52,6 +52,7 @@ interface Props {
   }) => void;
   detailedStatsData?: ServiceInstanceDetailedStatistics;
   isLoading: boolean;
+  isNotInitiated: boolean;
 }
 export function ServiceOverviewInstancesTable({
   mainStatsItems = [],
@@ -62,6 +63,7 @@ export function ServiceOverviewInstancesTable({
   onChangeTableOptions,
   detailedStatsData: detailedStatsData,
   isLoading,
+  isNotInitiated,
 }: Props) {
   const { agentName } = useApmServiceContext();
 
@@ -151,13 +153,13 @@ export function ServiceOverviewInstancesTable({
         <TableFetchWrapper status={status}>
           <OverviewTableContainer
             fixedHeight={true}
-            isEmptyAndLoading={mainStatsItemCount === 0 && isLoading}
+            isEmptyAndNotInitiated={mainStatsItemCount === 0 && isNotInitiated}
           >
             <EuiBasicTable
               noItemsMessage={
                 isLoading
                   ? i18n.translate('xpack.apm.serviceOverview.loadingText', {
-                      defaultMessage: 'No instances found',
+                      defaultMessage: 'Loading…',
                     })
                   : i18n.translate('xpack.apm.serviceOverview.noResultsText', {
                       defaultMessage: 'No instances found',
diff --git a/x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx b/x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx
index 1da7a56a096c7..341661a108565 100644
--- a/x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx
+++ b/x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx
@@ -18,7 +18,6 @@ import { truncate, unit } from '../../../utils/style';
 import { EmptyMessage } from '../../shared/EmptyMessage';
 import { ImpactBar } from '../../shared/ImpactBar';
 import { TransactionDetailLink } from '../../shared/Links/apm/transaction_detail_link';
-import { LoadingStatePrompt } from '../../shared/LoadingStatePrompt';
 import { ITableColumn, ManagedTable } from '../../shared/managed_table';
 
 type TraceGroup = APIReturnType<'GET /api/apm/traces'>['items'][0];
@@ -127,14 +126,14 @@ const noItemsMessage = (
 );
 
 export function TraceList({ items = [], isLoading }: Props) {
-  const noItems = isLoading ? <LoadingStatePrompt /> : noItemsMessage;
   return (
     <ManagedTable
+      isLoading={isLoading}
       columns={traceListColumns}
       items={items}
       initialSortField="impact"
       initialSortDirection="desc"
-      noItemsMessage={noItems}
+      noItemsMessage={noItemsMessage}
       initialPageSize={25}
     />
   );
diff --git a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
index a3dabeeca5b4b..63d78ab4d4e40 100644
--- a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
@@ -5,13 +5,7 @@
  * 2.0.
  */
 
-import {
-  EuiBasicTableColumn,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiInMemoryTable,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { ConnectionStatsItemWithComparisonData } from '../../../../common/connections';
@@ -24,8 +18,10 @@ import { FETCH_STATUS } from '../../../hooks/use_fetcher';
 import { unit } from '../../../utils/style';
 import { SparkPlot } from '../charts/spark_plot';
 import { ImpactBar } from '../ImpactBar';
-import { TableFetchWrapper } from '../table_fetch_wrapper';
 import { TruncateWithTooltip } from '../truncate_with_tooltip';
+import { ITableColumn, ManagedTable } from '../managed_table';
+import { EmptyMessage } from '../EmptyMessage';
+import { TableFetchWrapper } from '../table_fetch_wrapper';
 import { OverviewTableContainer } from '../overview_table_container';
 
 export type DependenciesItem = Omit<
@@ -57,15 +53,7 @@ export function DependenciesTable(props: Props) {
     compact = true,
   } = props;
 
-  const pagination = compact
-    ? {
-        initialPageSize: 5,
-        pageSizeOptions: [5],
-        hidePerPageOptions: true,
-      }
-    : {};
-
-  const columns: Array<EuiBasicTableColumn<DependenciesItem>> = [
+  const columns: Array<ITableColumn<DependenciesItem>> = [
     {
       field: 'name',
       name: nameColumnTitle,
@@ -170,6 +158,18 @@ export function DependenciesTable(props: Props) {
       impactValue: item.currentStats.impact,
     })) ?? [];
 
+  const noItemsMessage = !compact ? (
+    <EmptyMessage
+      heading={i18n.translate('xpack.apm.dependenciesTable.notFoundLabel', {
+        defaultMessage: 'No dependencies found',
+      })}
+    />
+  ) : (
+    i18n.translate('xpack.apm.dependenciesTable.notFoundLabel', {
+      defaultMessage: 'No dependencies found',
+    })
+  );
+
   return (
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem>
@@ -186,22 +186,19 @@ export function DependenciesTable(props: Props) {
         <TableFetchWrapper status={status}>
           <OverviewTableContainer
             fixedHeight={fixedHeight}
-            isEmptyAndLoading={
-              items.length === 0 && status === FETCH_STATUS.LOADING
+            isEmptyAndNotInitiated={
+              items.length === 0 && status === FETCH_STATUS.NOT_INITIATED
             }
           >
-            <EuiInMemoryTable
+            <ManagedTable
+              isLoading={status === FETCH_STATUS.LOADING}
               columns={columns}
               items={items}
-              allowNeutralSort={false}
-              loading={status === FETCH_STATUS.LOADING}
-              pagination={pagination}
-              sorting={{
-                sort: {
-                  direction: 'desc',
-                  field: 'impactValue',
-                },
-              }}
+              noItemsMessage={noItemsMessage}
+              initialSortField="impactValue"
+              initialSortDirection="desc"
+              initialPageSize={5}
+              pagination={true}
             />
           </OverviewTableContainer>
         </TableFetchWrapper>
diff --git a/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx b/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx
index 541ed63a080a2..f7009956bcf84 100644
--- a/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx
@@ -127,16 +127,18 @@ function UnoptimizedManagedTable<T>(props: Props<T>) {
     };
   }, [hidePerPageOptions, items, page, pageSize, pagination]);
 
+  const showNoItemsMessage = useMemo(() => {
+    return isLoading
+      ? i18n.translate('xpack.apm.managedTable.loadingDescription', {
+          defaultMessage: 'Loading…',
+        })
+      : noItemsMessage;
+  }, [isLoading, noItemsMessage]);
+
   return (
     <EuiBasicTable
       loading={isLoading}
-      noItemsMessage={
-        isLoading
-          ? i18n.translate('xpack.apm.managedTable.loading', {
-              defaultMessage: 'Loading...',
-            })
-          : noItemsMessage
-      }
+      noItemsMessage={showNoItemsMessage}
       items={renderedItems}
       columns={(columns as unknown) as Array<EuiBasicTableColumn<T>>} // EuiBasicTableColumn is stricter than ITableColumn
       sorting={sort}
diff --git a/x-pack/plugins/apm/public/components/shared/overview_table_container/index.tsx b/x-pack/plugins/apm/public/components/shared/overview_table_container/index.tsx
index 207fa8e1fea76..6caf6aca02733 100644
--- a/x-pack/plugins/apm/public/components/shared/overview_table_container/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/overview_table_container/index.tsx
@@ -22,11 +22,11 @@ const tableHeight = 282;
  *
  * Only do this when we're at a non-mobile breakpoint.
  *
- * Hide the empty message when we don't yet have any items and are still loading.
+ * Hide the empty message when we don't yet have any items and are still not initiated.
  */
 const OverviewTableContainerDiv = euiStyled.div<{
   fixedHeight?: boolean;
-  isEmptyAndLoading: boolean;
+  isEmptyAndNotInitiated: boolean;
   shouldUseMobileLayout: boolean;
 }>`
   ${({ fixedHeight, shouldUseMobileLayout }) =>
@@ -48,26 +48,26 @@ const OverviewTableContainerDiv = euiStyled.div<{
   `}
 
   .euiTableRowCell {
-    visibility: ${({ isEmptyAndLoading }) =>
-      isEmptyAndLoading ? 'hidden' : 'visible'};
+    visibility: ${({ isEmptyAndNotInitiated }) =>
+      isEmptyAndNotInitiated ? 'hidden' : 'visible'};
   }
 `;
 
 export function OverviewTableContainer({
   children,
   fixedHeight,
-  isEmptyAndLoading,
+  isEmptyAndNotInitiated,
 }: {
   children?: ReactNode;
   fixedHeight?: boolean;
-  isEmptyAndLoading: boolean;
+  isEmptyAndNotInitiated: boolean;
 }) {
   const { isMedium } = useBreakPoints();
 
   return (
     <OverviewTableContainerDiv
       fixedHeight={fixedHeight}
-      isEmptyAndLoading={isEmptyAndLoading}
+      isEmptyAndNotInitiated={isEmptyAndNotInitiated}
       shouldUseMobileLayout={isMedium}
     >
       {children}
diff --git a/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx b/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
index 593ce4c10609c..5d9f96500f101 100644
--- a/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
@@ -217,6 +217,7 @@ export function TransactionsTable({
   });
 
   const isLoading = status === FETCH_STATUS.LOADING;
+  const isNotInitiated = status === FETCH_STATUS.NOT_INITIATED;
 
   const pagination = {
     pageIndex,
@@ -296,7 +297,9 @@ export function TransactionsTable({
           <TableFetchWrapper status={status}>
             <OverviewTableContainer
               fixedHeight={fixedHeight}
-              isEmptyAndLoading={transactionGroupsTotalItems === 0 && isLoading}
+              isEmptyAndNotInitiated={
+                transactionGroupsTotalItems === 0 && isNotInitiated
+              }
             >
               <EuiBasicTable
                 noItemsMessage={