[Feature] Match discover look and feel (opensearch-project#1135) (ope…

…nsearch-project#1180) * remove unused files * missing snapshots * remove unused files * move sidebar out of explorer for match look and feel * sidebar panel always with full height * adjust padding * make search components wrappable * adjust noresult/novisualize page * add padding to datagrid * restructured sidebar fields to use exact same spacing/paneling as discover, so that field type icons look the same and field action buttons disappear if not hovered over * address datasource persistency issue * code changes preparing for integration with app analytics * resolve page crash and hide datasource for app analytics * saved object supports datasources, query language, and direct query * change saved object icon * bulk delete for saved query * change data grid to separate sort/page query to not interfere with other components * basic drag and drop added * viz config changes * add margin to resizable * wrap countdistribution with panel * pr requested changes * remove panel wrapper for inner countdistribution * change datasource selector to only showopensearch/ default cluste * remove unused files * missing snapshots * remove unused files * url datasource data prsing and clean up * minor format * query bar issue when loading direct query saved object * minor cleanup * update snapshots * fix minor query bar issue and add types to searchMeta slice * stop polling when load from saved object and few related minor changes * fix polling cleanup issue * save will not trigger reload * add language enum * direct query status indicator * turn default timestamp/pattern mark to badge and on hover * flyout resize button margin fix * direct query data grid fixes * pr changes and added test * removed console logs * searchMetaData type change * use datasource variable * fixed types and reduced redundancy * fixed when data grix shows * simplify condition checking for datagrid * update snapshot --------- (cherry picked from commit ea2fb2c) Signed-off-by: Eric Wei <[email protected]> Signed-off-by: Eric <[email protected]> Signed-off-by: Paul Sebastian <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Paul Sebastian <[email protected]> (cherry picked from commit b2ff898)
amsiglan · Jan 8, 2024 · 0283f2b · 0283f2b
1 parent a29721c
commit 0283f2b
Show file tree

Hide file tree

Showing 57 changed files with 10,689 additions and 12,032 deletions.
diff --git a/auto_sync_commit_metadata.json b/auto_sync_commit_metadata.json
@@ -1,4 +1,4 @@
 {
-    "last_github_commit": "e81cc9cad789acddcddef3ec4898bdbf1ecc19d1",
-    "last_gitfarm_commit": "132ea75d7567e1871e822132bb81ac2c04a14769"
+    "last_github_commit": "b2ff898ed38b453a4c037dfe95ba811474cc7010",
+    "last_gitfarm_commit": "d7df9bfb37dec77de9fee47c214b4bb9e23dc0a7"
 }
diff --git a/common/constants/data_sources.ts b/common/constants/data_sources.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const DATA_SOURCE_NAME_URL_PARAM_KEY = 'datasourceName';
+export const DATA_SOURCE_TYPE_URL_PARAM_KEY = 'datasourceType';
+export const DEFAULT_DATA_SOURCE_TYPE = 'DEFAULT_INDEX_PATTERNS';
+export const DEFAULT_DATA_SOURCE_NAME = 'Default cluster';
+export const DEFAULT_DATA_SOURCE_OBSERVABILITY_DISPLAY_NAME = 'OpenSearch';
+export const DEFAULT_DATA_SOURCE_TYPE_NAME = 'Default Group';
+export const enum QUERY_LANGUAGE {
+  PPL = 'PPL',
+  SQL = 'SQL',
+  DQL = 'DQL',
+}
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
@@ -242,6 +242,7 @@ export const WAITING_TIME_ON_USER_ACTIONS = 300;
 export const VISUALIZATION_ERROR = {
   NO_DATA: 'No data found.',
   INVALID_DATA: 'Invalid visualization data',
+  NO_SERIES: 'Add a field to start',
 };
 
 export const S3_DATASOURCE_TYPE = 'S3_DATASOURCE';
diff --git a/common/types/explorer.ts b/common/types/explorer.ts
@@ -38,6 +38,7 @@ import {
   SavedObjectsStart,
 } from '../../../../src/core/public/saved_objects';
 import { ChromeBreadcrumb } from '../../../../src/core/public/chrome';
+import { DataSourceType } from '../../../../src/plugins/data/public';
 
 export interface IQueryTab {
   id: string;
@@ -145,13 +146,23 @@ export interface IExplorerProps {
   queryManager?: QueryManager;
 }
 
-export interface SavedQuery {
+export interface SelectedDataSource {
+  label: string;
+  name: string;
+  value: string;
+  type: string;
+  ds?: DataSourceType;
+}
+
+export interface SavedQuery extends SavedObjectAttributes {
   description: string;
   name: string;
   query: string;
   selected_date_range: { start: string; end: string; text: string };
   selected_fields: { text: string; tokens: IField[] };
   selected_timestamp: IField;
+  dataSources: string; // list of type SelectedDataSources that is stringified
+  queryLang: string;
 }
 
 export interface SavedVisualization extends SavedObjectAttributes {
@@ -166,6 +177,8 @@ export interface SavedVisualization extends SavedObjectAttributes {
   user_configs?: string;
   units_of_measure?: string;
   application_id?: string;
+  dataSources: string; // list of type SelectedDataSources that is stringified
+  queryLang: string;
 }
 
 export interface ExplorerDataType {
@@ -406,3 +419,11 @@ export interface GridSortingColumn {
   id: string;
   direction: 'asc' | 'desc';
 }
+
+export enum DirectQueryLoadingStatus {
+  SUCCESS = 'SUCCESS',
+  FAILED = 'FAILED',
+  RUNNING = 'RUNNING',
+  SCHEDULED = 'SCHEDULED',
+  CANCELED = 'CANCELED',
+}
diff --git a/common/types/observability_saved_object_attributes.ts b/common/types/observability_saved_object_attributes.ts
@@ -4,10 +4,14 @@
  */
 
 import { SavedObjectAttributes } from '../../../../src/core/types';
-import { SavedVisualization } from './explorer';
+import { SavedQuery, SavedVisualization } from './explorer';
 
 export const VISUALIZATION_SAVED_OBJECT = 'observability-visualization';
-export const OBSERVABILTY_SAVED_OBJECTS = [VISUALIZATION_SAVED_OBJECT] as const;
+export const SEARCH_SAVED_OBJECT = 'observability-search';
+export const OBSERVABILTY_SAVED_OBJECTS = [
+  VISUALIZATION_SAVED_OBJECT,
+  SEARCH_SAVED_OBJECT,
+] as const;
 export const SAVED_OBJECT_VERSION = 1;
 
 export interface VisualizationSavedObjectAttributes extends SavedObjectAttributes {
@@ -17,3 +21,11 @@ export interface VisualizationSavedObjectAttributes extends SavedObjectAttribute
   createdTimeMs: number;
   savedVisualization: SavedVisualization;
 }
+
+export interface SearchSavedObjectAttributes extends SavedObjectAttributes {
+  title: string;
+  description: string;
+  version: number;
+  createdTimeMs: number;
+  savedQuery: SavedQuery;
+}
diff --git a/common/utils/index.ts b/common/utils/index.ts
@@ -10,6 +10,7 @@ export {
   buildRawQuery,
   composeFinalQuery,
   removeBacktick,
+  getSavingCommonParams,
 } from '../../public/components/common/query_utils';
 
 export * from './core_services';
diff --git a/public/components/application_analytics/components/application.tsx b/public/components/application_analytics/components/application.tsx
@@ -116,6 +116,7 @@ export function Application(props: AppDetailProps) {
     callback,
     queryManager,
     mode,
+    dataSourcePluggables,
   } = props;
   const [application, setApplication] = useState<ApplicationType>({
     id: '',
@@ -371,6 +372,7 @@ export function Application(props: AppDetailProps) {
         callbackInApp={callbackInApp}
         queryManager={queryManager}
         curSelectedTabId={selectedTabId}
+        dataSourcePluggables={dataSourcePluggables}
       />
     );
   };

diff --git a/public/components/application_analytics/home.tsx b/public/components/application_analytics/home.tsx
@@ -73,6 +73,7 @@ export const Home = (props: HomeProps) => {
     chrome,
     notifications,
     queryManager,
+    dataSourcePluggables,
   } = props;
   const [triggerSwitchToEvent, setTriggerSwitchToEvent] = useState(0);
   const dispatch = useDispatch();
@@ -140,6 +141,7 @@ export const Home = (props: HomeProps) => {
     setEndTime,
     mode: 'data_prepper',
     dataPrepperIndicesExist: indicesExist,
+    dataSourcePluggables,
   };
 
   const setToast = (title: string, color = 'success', text?: ReactChild) => {

diff --git a/public/components/common/field_icon/field_icon.tsx b/public/components/common/field_icon/field_icon.tsx
@@ -50,7 +50,7 @@ export const typeToEuiIconMap: Partial<Record<string, EuiTokenProps>> = {
 export function FieldIcon({
   type,
   label,
-  size = 'l',
+  size = 's',
   scripted,
   className,
   ...rest

diff --git a/public/components/common/query_utils/index.ts b/public/components/common/query_utils/index.ts
@@ -6,17 +6,20 @@
 import dateMath from '@elastic/datemath';
 import { Moment } from 'moment-timezone';
 import { isEmpty } from 'lodash';
-import moment from 'moment';
+import { SearchMetaData } from 'public/components/event_analytics/redux/slices/search_meta_data_slice';
 import {
-  DATE_PICKER_FORMAT,
   PPL_DEFAULT_PATTERN_REGEX_FILETER,
+  SELECTED_DATE_RANGE,
+  SELECTED_FIELDS,
+  SELECTED_TIMESTAMP,
 } from '../../../../common/constants/explorer';
 import {
   PPL_DATE_FORMAT,
   PPL_INDEX_INSERT_POINT_REGEX,
   PPL_INDEX_REGEX,
   PPL_NEWLINE_REGEX,
 } from '../../../../common/constants/shared';
+import { IExplorerFields, IQuery } from '../../../../common/types/explorer';
 
 /*
  * "Query Utils" This file contains different reused functions in operational panels
@@ -186,9 +189,6 @@ export const preprocessQuery = ({
 
   if (!start || !end) return finalQuery;
 
-  const formattedStart = moment(start).utc().format(DATE_PICKER_FORMAT);
-  const formattedEnd = moment(end).utc().format(DATE_PICKER_FORMAT);
-
   const promQLTokens = parsePromQLIntoKeywords(rawQuery);
 
   if (promQLTokens?.connection) {
@@ -245,24 +245,12 @@ export const buildPatternsQuery = (
   return finalQuery;
 };
 
-export const buildQuery = (baseQuery: string, currQuery: string) => {
-  let fullQuery: string;
-  if (baseQuery) {
-    fullQuery = baseQuery;
-    if (currQuery) {
-      fullQuery += '| ' + currQuery;
-    }
-  } else {
-    fullQuery = currQuery;
-  }
-  return fullQuery;
-};
+export const buildQuery = (baseQuery: string, currQuery: string) => baseQuery + '| ' + currQuery;
 
-export const buildRawQuery = (query: any, appBaseQuery: string) => {
-  const rawQueryStr = (query.rawQuery as string).includes(appBaseQuery)
-    ? query.rawQuery
-    : buildQuery(appBaseQuery, query.rawQuery);
-  return rawQueryStr;
+export const buildRawQuery = (query: IQuery, appBaseQuery: string) => {
+  if (appBaseQuery && !query.rawQuery.includes(appBaseQuery))
+    return buildQuery(appBaseQuery, query.rawQuery);
+  return query.rawQuery;
 };
 
 export const composeFinalQuery = (
@@ -294,3 +282,28 @@ export const removeBacktick = (stringContainsBacktick: string) => {
   if (!stringContainsBacktick) return '';
   return stringContainsBacktick.replace(/`/g, '');
 };
+
+export const getSavingCommonParams = (
+  queryState: IQuery,
+  appBaseQuery: string,
+  fields: IExplorerFields,
+  savingTitle: string,
+  explorerSearchMeta: SearchMetaData
+) => {
+  return {
+    dataSources: JSON.stringify([
+      {
+        name: explorerSearchMeta.datasources?.[0]?.name || '',
+        type: explorerSearchMeta.datasources?.[0]?.type || '',
+        label: explorerSearchMeta.datasources?.[0]?.label || '',
+        value: explorerSearchMeta.datasources?.[0]?.value || '',
+      },
+    ]),
+    queryLang: explorerSearchMeta.lang,
+    query: buildRawQuery(queryState, appBaseQuery),
+    fields: fields[SELECTED_FIELDS],
+    dateRange: queryState[SELECTED_DATE_RANGE],
+    name: savingTitle,
+    timestamp: queryState[SELECTED_TIMESTAMP],
+  };
+};