[Manual backport 2.x] [Discover]Sample Queries and Saved Queries in N…

…o Results Page #8616 (#8663) * Update Discover appearance (#8651) * Update Discover appearance Signed-off-by: Miki <miki@amazon.com> * Changeset file for PR #8651 created/updated --------- Signed-off-by: Miki <miki@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit 17103ba) Signed-off-by: Miki <miki@amazon.com> * Improve Empty State Handling: Add No Index Patterns Panel with Data Selection in Discover View (#8613) * Improve Empty State Handling: Add No Index Patterns Panel with Data Selection in Discover View This PR primarily addresses the scenario when no index patterns (general) is available in the Discover view. Instead of redirecting users to the index management page, it introduces a new "No Index Patterns" panel. This panel provides users with the option to open a data selector and add index patterns directly from the Discover view, improving the user experience for new or empty deployments. To achieve, we move the selectedDataset state from ConnectedDatasetSelector to the app container's state management. This allows the AdvancedSelector, opened from the AppContainer, to update the dataset state effectively. Key changes include: * Implementing NoIndexPatternsPanel and AdvancedSelector components. * Refactoring dataset state management in AppContainer and Sidebar. * Modifying DiscoverCanvas to conditionally render NoIndexPatternsPanel. * Updating ConnectedDatasetSelector to use shared state and dataset change handling. Signed-off-by: Anan Zhuang <ananzh@amazon.com> Signed-off-by: Miki <miki@amazon.com> * Update design of no data selected Signed-off-by: Miki <miki@amazon.com> * use i18n Signed-off-by: Anan Zhuang <ananzh@amazon.com> Signed-off-by: Miki <miki@amazon.com> * fix comments Signed-off-by: Anan Zhuang <ananzh@amazon.com> * Update design of no data selected Signed-off-by: Miki <miki@amazon.com> * fix lint error Signed-off-by: Anan Zhuang <ananzh@amazon.com> --------- Signed-off-by: Anan Zhuang <ananzh@amazon.com> Signed-off-by: Miki <miki@amazon.com> Co-authored-by: Miki <miki@amazon.com> (cherry picked from commit 6659139) Signed-off-by: Miki <miki@amazon.com> * [Discover]Sample Queries and Saved Queries in No Results Page (#8616) * Sample Queries and Saved Queries in No Results Page Signed-off-by: Sean Li <lnse@amazon.com> Signed-off-by: Miki <miki@amazon.com> * Changeset file for PR #8616 created/updated * Update styling Signed-off-by: Miki <miki@amazon.com> --------- Signed-off-by: Sean Li <lnse@amazon.com> Signed-off-by: Miki <miki@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Co-authored-by: Miki <miki@amazon.com> (cherry picked from commit 9da1b77) --------- Signed-off-by: Miki <miki@amazon.com> Signed-off-by: Anan Zhuang <ananzh@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> Co-authored-by: Anan Zhuang <ananzh@amazon.com> Co-authored-by: Sean Li <lnse@amazon.com>
opensearch-project · Oct 19, 2024 · 74a69d6 · 74a69d6
1 parent 1995d7d
commit 74a69d6
Show file tree

Hide file tree

Showing 54 changed files with 1,133 additions and 176 deletions.
diff --git a/changelogs/fragments/8616.yml b/changelogs/fragments/8616.yml
@@ -0,0 +1,2 @@
+feat:
+- Adds sample queries and saved queries to Discover no results page ([#8616](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8616))
diff --git a/changelogs/fragments/8651.yml b/changelogs/fragments/8651.yml
@@ -0,0 +1,2 @@
+feat:
+- Update the appearance of Discover ([#8651](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8651))
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -1,9 +1,9 @@
 .context-nav-wrapper {
   border: none !important;
   border-top-right-radius: $euiSizeL;
-  border-bottom-right-radius: $euiSizeL;
   background-color: $euiSideNavBackgroundColor;
   overflow: hidden;
+  box-shadow: 1px 0 0 $euiBorderColor !important;
 
   .nav-link-item {
     padding: $euiSizeS;

diff --git a/src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts b/src/plugins/data/common/index_patterns/index_patterns/ensure_default_index_pattern.ts
@@ -32,7 +32,9 @@ import { includes } from 'lodash';
 import { IndexPatternsContract } from './index_patterns';
 import { UiSettingsCommon } from '../types';
 
-export type EnsureDefaultIndexPattern = () => Promise<unknown> | undefined;
+export type EnsureDefaultIndexPattern = (
+  shouldRedirect?: boolean
+) => Promise<unknown | void> | undefined;
 
 export const createEnsureDefaultIndexPattern = (
   uiSettings: UiSettingsCommon,
@@ -42,7 +44,10 @@ export const createEnsureDefaultIndexPattern = (
    * Checks whether a default index pattern is set and exists and defines
    * one otherwise.
    */
-  return async function ensureDefaultIndexPattern(this: IndexPatternsContract) {
+  return async function ensureDefaultIndexPattern(
+    this: IndexPatternsContract,
+    shouldRedirect: boolean = true
+  ) {
     const patterns = await this.getIds();
     let defaultId = await uiSettings.get('defaultIndex');
     let defined = !!defaultId;
@@ -62,7 +67,8 @@ export const createEnsureDefaultIndexPattern = (
       defaultId = patterns[0];
       await uiSettings.set('defaultIndex', defaultId);
     } else {
-      return onRedirectNoIndexPattern();
+      if (shouldRedirect) return onRedirectNoIndexPattern();
+      else return;
     }
   };
 };
diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts
@@ -62,7 +62,16 @@ import {
 } from '../common';
 
 import { FilterLabel } from './ui';
-export { createEditor, DefaultInput, DQLBody, SingleLineInput } from './ui';
+export {
+  createEditor,
+  DefaultInput,
+  DQLBody,
+  SingleLineInput,
+  DatasetSelector,
+  AdvancedSelector,
+  NoIndexPatternsPanel,
+  DatasetSelectorAppearance,
+} from './ui';
 
 import {
   generateFilters,

diff --git a/src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts b/src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts
@@ -207,6 +207,11 @@ export class DatasetService {
     return Number(this.sessionStorage.get('lastCacheTime')) || undefined;
   }
 
+  public removeFromRecentDatasets(datasetId: string): void {
+    this.recentDatasets.del(datasetId);
+    this.serializeRecentDatasets();
+  }
+
   private setLastCacheTime(time: number): void {
     this.sessionStorage.set('lastCacheTime', time);
   }

diff --git a/src/plugins/data/public/query/query_string/dataset_service/lib/index_pattern_type.ts b/src/plugins/data/public/query/query_string/dataset_service/lib/index_pattern_type.ts
@@ -4,6 +4,7 @@
  */
 
 import { SavedObjectsClientContract } from 'opensearch-dashboards/public';
+import { i18n } from '@osd/i18n';
 import { DataSourceAttributes } from '../../../../../../data_source/common/data_sources';
 import {
   DEFAULT_DATA,
@@ -70,6 +71,29 @@ export const indexPatternTypeConfig: DatasetTypeConfig = {
     }
     return ['kuery', 'lucene', 'PPL', 'SQL'];
   },
+
+  getSampleQueries: (dataset: Dataset, language: string) => {
+    switch (language) {
+      case 'PPL':
+        return [
+          {
+            title: i18n.translate('data.indexPatternType.sampleQuery.basicPPLQuery', {
+              defaultMessage: 'Sample query for PPL',
+            }),
+            query: `source = ${dataset.title}`,
+          },
+        ];
+      case 'SQL':
+        return [
+          {
+            title: i18n.translate('data.indexPatternType.sampleQuery.basicSQLQuery', {
+              defaultMessage: 'Sample query for SQL',
+            }),
+            query: `SELECT * FROM ${dataset.title} LIMIT 10`,
+          },
+        ];
+    }
+  },
 };
 
 const fetchIndexPatterns = async (client: SavedObjectsClientContract): Promise<DataStructure[]> => {

diff --git a/src/plugins/data/public/query/query_string/dataset_service/lib/index_type.ts b/src/plugins/data/public/query/query_string/dataset_service/lib/index_type.ts
@@ -5,6 +5,7 @@
 
 import { SavedObjectsClientContract } from 'opensearch-dashboards/public';
 import { map } from 'rxjs/operators';
+import { i18n } from '@osd/i18n';
 import {
   DEFAULT_DATA,
   DataStructure,
@@ -88,6 +89,29 @@ export const indexTypeConfig: DatasetTypeConfig = {
   supportedLanguages: (dataset: Dataset): string[] => {
     return ['SQL', 'PPL'];
   },
+
+  getSampleQueries: (dataset: Dataset, language: string) => {
+    switch (language) {
+      case 'PPL':
+        return [
+          {
+            title: i18n.translate('data.indexType.sampleQuery.basicPPLQuery', {
+              defaultMessage: 'Sample query for PPL',
+            }),
+            query: `source = ${dataset.title}`,
+          },
+        ];
+      case 'SQL':
+        return [
+          {
+            title: i18n.translate('data.indexType.sampleQuery.basicSQLQuery', {
+              defaultMessage: 'Sample query for SQL',
+            }),
+            query: `SELECT * FROM ${dataset.title} LIMIT 10`,
+          },
+        ];
+    }
+  },
 };
 
 const fetchDataSources = async (client: SavedObjectsClientContract) => {

diff --git a/src/plugins/data/public/query/query_string/dataset_service/types.ts b/src/plugins/data/public/query/query_string/dataset_service/types.ts
@@ -71,4 +71,8 @@ export interface DatasetTypeConfig {
    * @see https://github.com/opensearch-project/OpenSearch-Dashboards/issues/8362.
    */
   combineDataStructures?: (dataStructures: DataStructure[]) => DataStructure | undefined;
+  /**
+   * Returns a list of sample queries for this dataset type
+   */
+  getSampleQueries?: (dataset: Dataset, language: string) => any;
 }
diff --git a/src/plugins/data/public/query/query_string/language_service/lib/dql_language.ts b/src/plugins/data/public/query/query_string/language_service/lib/dql_language.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
 import { LanguageConfig } from '../types';
 import { ISearchInterceptor } from '../../../../search';
 
@@ -25,5 +26,51 @@ export const getDQLLanguageConfig = (
     showDocLinks: true,
     editorSupportedAppNames: ['discover'],
     supportedAppNames: ['discover', 'dashboards', 'visualize', 'data-explorer', 'vis-builder', '*'],
+    sampleQueries: [
+      {
+        title: i18n.translate('data.dqlLanguage.sampleQuery.titleContainsWind', {
+          defaultMessage: 'The title field contains the word wind.',
+        }),
+        query: 'title: wind',
+      },
+      {
+        title: i18n.translate('data.dqlLanguage.sampleQuery.titleContainsWindOrWindy', {
+          defaultMessage: 'The title field contains the word wind or the word windy.',
+        }),
+        query: 'title: (wind OR windy)',
+      },
+      {
+        title: i18n.translate('data.dqlLanguage.sampleQuery.titleContainsPhraseWindRises', {
+          defaultMessage: 'The title field contains the phrase wind rises.',
+        }),
+        query: 'title: "wind rises"',
+      },
+      {
+        title: i18n.translate('data.dqlLanguage.sampleQuery.titleKeywordExactMatch', {
+          defaultMessage: 'The title.keyword field exactly matches The wind rises.',
+        }),
+        query: 'title.keyword: The wind rises',
+      },
+      {
+        title: i18n.translate('data.dqlLanguage.sampleQuery.titleFieldsContainWind', {
+          defaultMessage:
+            'Any field that starts with title (for example, title and title.keyword) contains the word wind',
+        }),
+        query: 'title*: wind',
+      },
+      {
+        title: i18n.translate('data.dqlLanguage.sampleQuery.articleTitleContainsWind', {
+          defaultMessage:
+            'The field that starts with article and ends with title contains the word wind. Matches the field article title.',
+        }),
+        query: 'article*title: wind',
+      },
+      {
+        title: i18n.translate('data.dqlLanguage.sampleQuery.descriptionFieldExists', {
+          defaultMessage: 'Documents in which the field description exists.',
+        }),
+        query: 'description:*',
+      },
+    ],
   };
 };
diff --git a/src/plugins/data/public/query/query_string/language_service/lib/lucene_language.ts b/src/plugins/data/public/query/query_string/language_service/lib/lucene_language.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
 import { LanguageConfig } from '../types';
 import { ISearchInterceptor } from '../../../../search';
 
@@ -25,5 +26,51 @@ export const getLuceneLanguageConfig = (
     showDocLinks: true,
     editorSupportedAppNames: ['discover'],
     supportedAppNames: ['discover', 'dashboards', 'visualize', 'data-explorer', 'vis-builder', '*'],
+    sampleQueries: [
+      {
+        title: i18n.translate('data.luceneLanguage.sampleQuery.titleContainsWind', {
+          defaultMessage: 'The title field contains the word wind.',
+        }),
+        query: 'title: wind',
+      },
+      {
+        title: i18n.translate('data.luceneLanguage.sampleQuery.titleContainsWindOrWindy', {
+          defaultMessage: 'The title field contains the word wind or the word windy.',
+        }),
+        query: 'title: (wind OR windy)',
+      },
+      {
+        title: i18n.translate('data.luceneLanguage.sampleQuery.titleContainsPhraseWindRises', {
+          defaultMessage: 'The title field contains the phrase wind rises.',
+        }),
+        query: 'title: "wind rises"',
+      },
+      {
+        title: i18n.translate('data.luceneLanguage.sampleQuery.titleKeywordExactMatch', {
+          defaultMessage: 'The title.keyword field exactly matches The wind rises.',
+        }),
+        query: 'title.keyword: The wind rises',
+      },
+      {
+        title: i18n.translate('data.luceneLanguage.sampleQuery.titleFieldsContainWind', {
+          defaultMessage:
+            'Any field that starts with title (for example, title and title.keyword) contains the word wind',
+        }),
+        query: 'title*: wind',
+      },
+      {
+        title: i18n.translate('data.luceneLanguage.sampleQuery.articleTitleContainsWind', {
+          defaultMessage:
+            'The field that starts with article and ends with title contains the word wind. Matches the field article title.',
+        }),
+        query: 'article*title: wind',
+      },
+      {
+        title: i18n.translate('data.luceneLanguage.sampleQuery.descriptionFieldExists', {
+          defaultMessage: 'Documents in which the field description exists.',
+        }),
+        query: 'description:*',
+      },
+    ],
   };
 };
diff --git a/src/plugins/data/public/query/query_string/language_service/types.ts b/src/plugins/data/public/query/query_string/language_service/types.ts
@@ -35,6 +35,11 @@ export interface EditorEnhancements {
   queryEditorExtension?: QueryEditorExtensionConfig;
 }
 
+export interface SampleQuery {
+  title: string;
+  query: string;
+}
+
 export interface LanguageConfig {
   id: string;
   title: string;
@@ -53,4 +58,5 @@ export interface LanguageConfig {
   editorSupportedAppNames?: string[];
   supportedAppNames?: string[];
   hideDatePicker?: boolean;
+  sampleQueries?: SampleQuery[];
 }
diff --git a/src/plugins/data/public/ui/_common.scss b/src/plugins/data/public/ui/_common.scss
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.dataUI-centerPanel {
+  height: 100%;
+  width: 100%;
+
+  // Push the centralized child up, just like ouiOverlayMask
+  padding-bottom: 10vh;
+
+  & > * {
+    @include euiLegibilityMaxWidth(100%);
+  }
+}
diff --git a/src/plugins/data/public/ui/_index.scss b/src/plugins/data/public/ui/_index.scss
@@ -1,3 +1,4 @@
+@import "./common";
 @import "./filter_bar/index";
 @import "./typeahead/index";
 @import "./saved_query_management/index";

diff --git a/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss b/src/plugins/data/public/ui/dataset_selector/_dataset_selector.scss
@@ -19,7 +19,9 @@
   &__advancedModal {
     width: 1200px;
     height: 800px;
-    max-height: calc(100vh - $euiSizeS);
+
+    // euiOverlayMask pushes the modal up due to having padding-bottom: 10vh
+    max-height: calc(90vh - $euiSizeL);
 
     .euiModal__flex {
       max-height: none;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		feat:
		- Adds sample queries and saved queries to Discover no results page ([#8616](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8616))
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		feat:
		- Update the appearance of Discover ([#8651](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8651))