[Data Explorer]Fix display for index pattern without a default time f…

…ield (#4821) Issue Resolve #4820 Signed-off-by: ananzh <ananzh@amazon.com>
opensearch-project · Aug 31, 2023 · 83cd7f6 · 83cd7f6
1 parent 9d7f576
commit 83cd7f6
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 34 deletions.
diff --git a/src/plugins/discover/public/application/components/chart/chart.tsx b/src/plugins/discover/public/application/components/chart/chart.tsx
@@ -28,7 +28,7 @@ interface DiscoverChartProps {
   hits: number;
   resetQuery: () => void;
   showResetButton?: boolean;
-  timeField?: string;
+  isTimeBased?: boolean;
   services: DiscoverServices;
 }
 
@@ -39,7 +39,7 @@ export const DiscoverChart = ({
   data,
   hits,
   resetQuery,
-  timeField,
+  isTimeBased,
   services,
   showResetButton = false,
 }: DiscoverChartProps) => {
@@ -75,7 +75,7 @@ export const DiscoverChart = ({
           onResetQuery={resetQuery}
         />
       </EuiFlexItem>
-      {timeField && (
+      {isTimeBased && (
         <EuiFlexItem className="dscChart__TimechartHeader">
           <TimechartHeader
             bucketInterval={bucketInterval}
@@ -87,7 +87,7 @@ export const DiscoverChart = ({
           />
         </EuiFlexItem>
       )}
-      {timeField && chartData && (
+      {isTimeBased && chartData && (
         <EuiFlexItem grow={false}>
           <section
             aria-label={i18n.translate('discover.histogramOfFoundDocumentsAriaLabel', {

diff --git a/src/plugins/discover/public/application/components/doc_views/context_app.tsx b/src/plugins/discover/public/application/components/doc_views/context_app.tsx
@@ -7,7 +7,7 @@ import React, { useMemo, Fragment } from 'react';
 import { useCallback } from 'react';
 import { SurrDocType } from './context/api/context';
 import { ActionBar } from './context/components/action_bar/action_bar';
-import { CONTEXT_STEP_SETTING } from '../../../../common';
+import { CONTEXT_STEP_SETTING, DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../common';
 import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { LOADING_STATUS } from './context/utils/context_query_state';
@@ -77,6 +77,11 @@ export function ContextApp({
     return [[indexPattern.timeFieldName!, SortDirection.desc]];
   }, [indexPattern]);
 
+  const displayTimeColumn = useMemo(
+    () => !uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false) && indexPattern?.isTimeBased(),
+    [indexPattern, uiSettings]
+  );
+
   return (
     <Fragment>
       <ActionBar
@@ -100,7 +105,7 @@ export function ContextApp({
           onSort={() => {}}
           sort={sort}
           rows={rows}
-          displayTimeColumn={true}
+          displayTimeColumn={displayTimeColumn}
           services={services}
           isToolbarVisible={false}
           isContextView={true}

diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_chart_container.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_chart_container.tsx
@@ -4,7 +4,7 @@
  */
 
 import './discover_chart_container.scss';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { useDiscoverContext } from '../context';
@@ -16,27 +16,26 @@ export const DiscoverChartContainer = ({ hits, bucketInterval, chartData }: Sear
   const { uiSettings, data } = services;
   const { indexPattern, savedSearch } = useDiscoverContext();
 
-  const timeField = indexPattern?.timeFieldName;
-
-  if (!hits || !bucketInterval || !chartData) {
-    // TODO: handle better
-    return null;
-  }
+  const isTimeBased = useMemo(() => (indexPattern ? indexPattern.isTimeBased() : false), [
+    indexPattern,
+  ]);
 
   return (
-    <DiscoverChart
-      bucketInterval={bucketInterval}
-      chartData={chartData}
-      config={uiSettings}
-      data={data}
-      hits={hits}
-      timeField={timeField}
-      resetQuery={() => {
-        window.location.href = `#/view/${savedSearch?.id}`;
-        window.location.reload();
-      }}
-      services={services}
-      showResetButton={!!savedSearch && !!savedSearch.id}
-    />
+    hits && (
+      <DiscoverChart
+        bucketInterval={bucketInterval}
+        chartData={chartData}
+        config={uiSettings}
+        data={data}
+        hits={hits}
+        resetQuery={() => {
+          window.location.href = `#/view/${savedSearch?.id}`;
+          window.location.reload();
+        }}
+        services={services}
+        showResetButton={!!savedSearch && !!savedSearch.id}
+        isTimeBased={isTimeBased}
+      />
+    )
   );
 };
diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { History } from 'history';
 import { DiscoverViewServices } from '../../../build_services';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
@@ -21,14 +21,20 @@ import { ResultStatus, SearchData } from '../utils/use_search';
 import { IndexPatternField, opensearchFilters } from '../../../../../data/public';
 import { DocViewFilterFn } from '../../doc_views/doc_views_types';
 import { SortOrder } from '../../../saved_searches/types';
+import { DOC_HIDE_TIME_COLUMN_SETTING } from '../../../../common';
 
 interface Props {
   history: History;
 }
 
 export const DiscoverTable = ({ history }: Props) => {
   const { services } = useOpenSearchDashboards<DiscoverViewServices>();
-  const { filterManager } = services.data.query;
+  const {
+    uiSettings,
+    data: {
+      query: { filterManager },
+    },
+  } = services;
   const { data$, refetch$, indexPattern } = useDiscoverContext();
   const [fetchState, setFetchState] = useState<SearchData>({
     status: data$.getValue().status,
@@ -57,6 +63,10 @@ export const DiscoverTable = ({ history }: Props) => {
     },
     [filterManager, indexPattern]
   );
+  const displayTimeColumn = useMemo(
+    () => !!(!uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING, false) && indexPattern?.isTimeBased()),
+    [indexPattern, uiSettings]
+  );
 
   const { rows } = fetchState || {};
 
@@ -93,7 +103,7 @@ export const DiscoverTable = ({ history }: Props) => {
       onSort={onSetSort}
       sort={sort}
       rows={rows}
-      displayTimeColumn={true}
+      displayTimeColumn={displayTimeColumn}
       services={services}
     />
   );

diff --git a/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx b/src/plugins/discover/public/application/view_components/canvas/top_nav.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { AppMountParameters } from '../../../../../../core/public';
 import { NEW_DISCOVER_APP, PLUGIN_ID } from '../../../../common';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
@@ -21,7 +21,7 @@ export interface TopNavProps {
 
 export const TopNav = ({ opts }: TopNavProps) => {
   const { services } = useOpenSearchDashboards<DiscoverViewServices>();
-  const { inspectorAdapters, savedSearch } = useDiscoverContext();
+  const { inspectorAdapters, savedSearch, indexPattern } = useDiscoverContext();
   const [indexPatterns, setIndexPatterns] = useState<IndexPattern[] | undefined>(undefined);
 
   const {
@@ -54,11 +54,11 @@ export const TopNav = ({ opts }: TopNavProps) => {
     let isMounted = true;
     const getDefaultIndexPattern = async () => {
       await data.indexPatterns.ensureDefaultIndexPattern();
-      const indexPattern = await data.indexPatterns.getDefault();
+      const defaultIndexPattern = await data.indexPatterns.getDefault();
 
       if (!isMounted) return;
 
-      setIndexPatterns(indexPattern ? [indexPattern] : undefined);
+      setIndexPatterns(defaultIndexPattern ? [defaultIndexPattern] : undefined);
     };
 
     getDefaultIndexPattern();
@@ -82,11 +82,16 @@ export const TopNav = ({ opts }: TopNavProps) => {
     }
   }, [chrome, getUrlForApp, savedSearch?.id, savedSearch?.title]);
 
+  const showDatePicker = useMemo(() => (indexPattern ? indexPattern.isTimeBased() : false), [
+    indexPattern,
+  ]);
+
   return (
     <TopNavMenu
       appName={PLUGIN_ID}
       config={topNavLinks}
       showSearchBar
+      showDatePicker={showDatePicker}
       showSaveQuery
       useDefaultBehaviors
       setMenuMountPoint={opts.setHeaderActionMenu}