[Infrastructure UI] Use same no data messaging on hosts view (#142063)

* [WIP] Implement No Data message

* Implement refetch

* Render lens component and hide when there is no data

* Add onLoading hook and conditional rendering

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/infra/public/pages/metrics/hosts/components/hosts_table.tsx

@@ -8,8 +8,10 @@
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { TypedLensByValueInput } from '@kbn/lens-plugin/public';
 import type { Query, TimeRange } from '@kbn/es-query';
-import React from 'react';
+import React, { useState } from 'react';
 import type { DataView } from '@kbn/data-views-plugin/public';
+import { i18n } from '@kbn/i18n';
+import { NoData } from '../../../../components/empty_states';
 import { InfraClientStartDeps } from '../../../../types';
 
 const getLensHostsTable = (
@@ -498,23 +500,54 @@ interface Props {
   timeRange: TimeRange;
   query: Query;
   searchSessionId: string;
+  onRefetch: () => void;
+  onLoading: (isLoading: boolean) => void;
+  isLensLoading: boolean;
 }
 export const HostsTable: React.FunctionComponent<Props> = ({
   dataView,
   timeRange,
   query,
   searchSessionId,
+  onRefetch,
+  onLoading,
+  isLensLoading,
 }) => {
   const {
     services: { lens },
   } = useKibana<InfraClientStartDeps>();
   const LensComponent = lens?.EmbeddableComponent;
+  const [noData, setNoData] = useState(false);
+
+  if (noData && !isLensLoading) {
+    return (
+      <NoData
+        titleText={i18n.translate('xpack.infra.metrics.emptyViewTitle', {
+          defaultMessage: 'There is no data to display.',
+        })}
+        bodyText={i18n.translate('xpack.infra.metrics.emptyViewDescription', {
+          defaultMessage: 'Try adjusting your time or filter.',
+        })}
+        refetchText={i18n.translate('xpack.infra.metrics.refetchButtonLabel', {
+          defaultMessage: 'Check for new data',
+        })}
+        onRefetch={onRefetch}
+        testString="metricsEmptyViewState"
+      />
+    );
+  }
   return (
     <LensComponent
       id="hostsView"
       timeRange={timeRange}
       attributes={getLensHostsTable(dataView, query)}
       searchSessionId={searchSessionId}
+      onLoad={(isLoading, adapters) => {
+        if (!isLoading && adapters?.tables) {
+          setNoData(adapters?.tables.tables.default?.rows.length === 0);
+          onLoading(false);
+        }
+      }}
     />
   );
 };

x-pack/plugins/infra/public/pages/metrics/hosts/hosts_content.tsx

@@ -27,18 +27,34 @@ export const HostsContent: React.FunctionComponent = () => {
     useMetricsDataViewContext();
   // needed to refresh the lens table when filters havent changed
   const [searchSessionId, setSearchSessionId] = useState(data.search.session.start());
+  const [isLensLoading, setIsLensLoading] = useState(false);
 
   const onQuerySubmit = useCallback(
     (payload: { dateRange: TimeRange; query?: Query }) => {
       setDateRange(payload.dateRange);
       if (payload.query) {
         setQuery(payload.query);
       }
+      setIsLensLoading(true);
       setSearchSessionId(data.search.session.start());
     },
     [setDateRange, setQuery, data.search.session]
   );
 
+  const onLoading = useCallback(
+    (isLoading: boolean) => {
+      if (isLensLoading) {
+        setIsLensLoading(isLoading);
+      }
+    },
+    [setIsLensLoading, isLensLoading]
+  );
+
+  const onRefetch = useCallback(() => {
+    setIsLensLoading(true);
+    setSearchSessionId(data.search.session.start());
+  }, [data.search.session]);
+
   return (
     <div>
       {metricsDataView ? (
@@ -61,6 +77,9 @@ export const HostsContent: React.FunctionComponent = () => {
             timeRange={dateRange}
             query={query}
             searchSessionId={searchSessionId}
+            onRefetch={onRefetch}
+            onLoading={onLoading}
+            isLensLoading={isLensLoading}
           />
         </>
       ) : hasFailedCreatingDataView || hasFailedFetchingDataView ? (