[Enterprise Search] Add crawler stats to total stats on Index Overview (

#136453) * Add domain count for crawler to total stats on Index Overview * Fixing styles * Fix i18n labels
elastic · Jul 15, 2022 · e65ae3b · e65ae3b
1 parent 28ff45a
commit e65ae3b
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 40 deletions.
diff --git a/...ic/applications/enterprise_search_content/components/search_index/crawler_total_stats.tsx b/...ic/applications/enterprise_search_content/components/search_index/crawler_total_stats.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { useValues } from 'kea';
+
+import { i18n } from '@kbn/i18n';
+
+import { CrawlerLogic } from './crawler/crawler_logic';
+import { TotalStats } from './total_stats';
+
+export const CrawlerTotalStats: React.FC = () => {
+  const { domains, dataLoading } = useValues(CrawlerLogic);
+
+  const additionalItems = [
+    {
+      description: i18n.translate(
+        'xpack.enterpriseSearch.content.searchIndex.totalStats.domainCountCardLabel',
+        {
+          defaultMessage: 'Domain count',
+        }
+      ),
+      isLoading: dataLoading,
+      title: domains.length,
+    },
+  ];
+
+  return (
+    <TotalStats
+      ingestionType={i18n.translate(
+        'xpack.enterpriseSearch.content.searchIndex.totalStats.crawlerIngestionMethodLabel',
+        {
+          defaultMessage: 'Crawler',
+        }
+      )}
+      additionalItems={additionalItems}
+    />
+  );
+};
diff --git a/...search/public/applications/enterprise_search_content/components/search_index/overview.tsx b/...search/public/applications/enterprise_search_content/components/search_index/overview.tsx
@@ -11,16 +11,18 @@ import { useValues } from 'kea';
 
 import { EuiSpacer } from '@elastic/eui';
 
-import { Status } from '../../../../../common/types/api';
+import { i18n } from '@kbn/i18n';
+
 import { FetchIndexApiLogic } from '../../api/index/fetch_index_api_logic';
 
 import { CrawlDetailsFlyout } from './crawler/crawl_details_flyout/crawl_details_flyout';
 import { CrawlRequestsPanel } from './crawler/crawl_requests_panel/crawl_requests_panel';
+import { CrawlerTotalStats } from './crawler_total_stats';
 import { GenerateApiKeyPanel } from './generate_api_key_panel';
 import { TotalStats } from './total_stats';
 
 export const SearchIndexOverview: React.FC = () => {
-  const { data, status } = useValues(FetchIndexApiLogic);
+  const { data } = useValues(FetchIndexApiLogic);
 
   const isCrawler = typeof data?.crawler !== 'undefined';
   const isConnector = typeof data?.connector !== 'undefined';
@@ -29,12 +31,25 @@ export const SearchIndexOverview: React.FC = () => {
   return (
     <>
       <EuiSpacer />
-      {status === Status.SUCCESS && data && (
+      {isCrawler ? (
+        <CrawlerTotalStats />
+      ) : (
         <TotalStats
-          lastUpdated={'TODO'}
-          documentCount={data.index.total.docs.count ?? 0}
-          indexHealth={data.index.health ?? ''}
-          ingestionType={data.connector ? 'Connector' : data.crawler ? 'Crawler' : 'API'}
+          ingestionType={
+            isConnector
+              ? i18n.translate(
+                  'xpack.enterpriseSearch.content.searchIndex.totalStats.connectorIngestionMethodLabel',
+                  {
+                    defaultMessage: 'Connector',
+                  }
+                )
+              : i18n.translate(
+                  'xpack.enterpriseSearch.content.searchIndex.totalStats.apiIngestionMethodLabel',
+                  {
+                    defaultMessage: 'API',
+                  }
+                )
+          }
         />
       )}
       <EuiSpacer />

diff --git a/...rch/public/applications/enterprise_search_content/components/search_index/total_stats.tsx b/...rch/public/applications/enterprise_search_content/components/search_index/total_stats.tsx
@@ -7,45 +7,72 @@
 
 import React from 'react';
 
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiStat } from '@elastic/eui';
+import { useValues } from 'kea';
+
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiStat, EuiStatProps } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+import { Status } from '../../../../../common/types/api';
+
+import { CustomFormattedTimestamp } from '../../../shared/custom_formatted_timestamp/custom_formatted_timestamp';
+import { FetchIndexApiLogic } from '../../api/index/fetch_index_api_logic';
 
 interface TotalStatsProps {
-  lastUpdated: string;
-  documentCount: number;
-  indexHealth: string;
+  additionalItems?: EuiStatProps[];
   ingestionType: string;
 }
 
-export const TotalStats: React.FC<TotalStatsProps> = ({
-  lastUpdated,
-  documentCount,
-  indexHealth,
-  ingestionType,
-}) => {
+export const TotalStats: React.FC<TotalStatsProps> = ({ ingestionType, additionalItems = [] }) => {
+  const { data, status } = useValues(FetchIndexApiLogic);
+  const documentCount = data?.index.total.docs.count ?? 0;
+  const lastUpdated = (
+    <CustomFormattedTimestamp timestamp={Date.now() - 1000 * 60 * 12 /* TODO: Implement this */} />
+  );
+  const isLoading = status !== Status.SUCCESS;
+  const stats: EuiStatProps[] = [
+    {
+      description: i18n.translate(
+        'xpack.enterpriseSearch.content.searchIndex.totalStats.ingestionTypeCardLabel',
+        {
+          defaultMessage: 'Ingestion type',
+        }
+      ),
+      isLoading,
+      title: ingestionType,
+    },
+    {
+      description: i18n.translate(
+        'xpack.enterpriseSearch.content.searchIndex.totalStats.documentCountCardLabel',
+        {
+          defaultMessage: 'Document count',
+        }
+      ),
+      isLoading,
+      title: documentCount,
+    },
+    {
+      description: i18n.translate(
+        'xpack.enterpriseSearch.content.searchIndex.totalStats.lastUpdatedCardLabel',
+        {
+          defaultMessage: 'Last updated',
+        }
+      ),
+      isLoading,
+      title: lastUpdated,
+    },
+    ...additionalItems,
+  ];
+
   return (
     <EuiFlexGroup direction="row">
-      <EuiFlexItem>
-        <EuiPanel color="success" hasShadow={false} paddingSize="l">
-          <EuiStat description="Ingestion type" title={ingestionType} />
-        </EuiPanel>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiPanel color="subdued" hasShadow={false} paddingSize="l">
-          <EuiStat description="Document count" title={documentCount} />
-        </EuiPanel>
-      </EuiFlexItem>
-
-      <EuiFlexItem>
-        <EuiPanel color="subdued" hasShadow={false} paddingSize="l">
-          <EuiStat description="Index health" title={indexHealth} />
-        </EuiPanel>
-      </EuiFlexItem>
-
-      <EuiFlexItem>
-        <EuiPanel color="subdued" hasShadow={false} paddingSize="l">
-          <EuiStat description="Last Updated" title={lastUpdated} />
-        </EuiPanel>
-      </EuiFlexItem>
+      {stats.map((item, index) => (
+        <EuiFlexItem key={index}>
+          <EuiPanel color={index === 0 ? 'primary' : 'subdued'} hasShadow={false} paddingSize="l">
+            <EuiStat {...item} />
+          </EuiPanel>
+        </EuiFlexItem>
+      ))}
     </EuiFlexGroup>
   );
 };
diff --git a/...arch/public/applications/shared/custom_formatted_timestamp/custom_formatted_timestamp.tsx b/...arch/public/applications/shared/custom_formatted_timestamp/custom_formatted_timestamp.tsx
@@ -12,7 +12,7 @@ import { FormattedRelative } from '@kbn/i18n-react';
 import { FormattedDateTime } from '../formatted_date_time';
 
 interface CustomFormattedTimestampProps {
-  timestamp: string;
+  timestamp: string | number | Date;
 }
 
 export const CustomFormattedTimestamp: React.FC<CustomFormattedTimestampProps> = ({