Refactor Saved objects and add visualization embeddable (opensearch-project#341)

Signed-off-by: Eric Wei <menwe@amazon.com>
Signed-off-by: Joshua Li <joshuali925@gmail.com>
Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>
Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
Signed-off-by: Derek Ho <dxho@amazon.com>
Co-authored-by: Joshua Li <joshuali925@gmail.com>
Co-authored-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
Co-authored-by: Peter Fitzgibbons <pjfitz@amazon.com>
Co-authored-by: Shenoy Pratik <sgguruda@amazon.com>
Co-authored-by: Derek Ho <dxho@amazon.com>
(cherry picked from commit 583010d)

Author: mengweieric

common/constants/explorer.ts

@@ -4,8 +4,8 @@
  */
 
 import { htmlIdGenerator } from '@elastic/eui';
-import { VIS_CHART_TYPES } from './shared';
 import { ThresholdUnitType } from '../../public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
+import { VIS_CHART_TYPES } from './shared';
 
 export const EVENT_ANALYTICS_DOCUMENTATION_URL =
   'https://opensearch.org/docs/latest/observability-plugin/event-analytics/';
@@ -31,6 +31,11 @@ export const TAB_EVENT_ID_TXT_PFX = 'main-content-events-';
 export const TAB_CHART_ID_TXT_PFX = 'main-content-vis-';
 export const TAB_EVENT_ID = 'main-content-events';
 export const TAB_CHART_ID = 'main-content-vis';
+export const CREATE_TAB_PARAM_KEY = 'create';
+export const CREATE_TAB_PARAM = {
+  [TAB_EVENT_ID]: 'events',
+  [TAB_CHART_ID]: 'visualizations',
+} as const;
 export const HAS_SAVED_TIMESTAMP = 'hasSavedTimestamp';
 export const FILTER_OPTIONS = ['Visualization', 'Query', 'Metric'];
 export const SAVED_QUERY = 'savedQuery';
@@ -309,3 +314,8 @@ export const sampleLogPatternData = {
            "Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1"',
   anomalyCount: 0,
 };
+
+export const TYPE_TAB_MAPPING = {
+  [SAVED_QUERY]: TAB_EVENT_ID,
+  [SAVED_VISUALIZATION]: TAB_CHART_ID,
+};

common/types/explorer.ts

@@ -33,14 +33,18 @@ import SavedObjects from '../../public/services/saved_objects/event_analytics/sa
 import TimestampUtils from '../../public/services/timestamp/timestamp';
 import PPLService from '../../public/services/requests/ppl';
 import DSLService from '../../public/services/requests/dsl';
-import { SavedObjectsStart } from '../../../../src/core/public/saved_objects';
+import {
+  SavedObjectAttributes,
+  SavedObjectsStart,
+} from '../../../../src/core/public/saved_objects';
+
 export interface IQueryTab {
   id: string;
   name: React.ReactNode | string;
   content: React.ReactNode;
 }
 
-export interface IField {
+export interface IField extends SavedObjectAttributes {
   name: string;
   type: string;
   label?: string;
@@ -151,33 +155,20 @@ export interface SavedQuery {
   selected_timestamp: IField;
 }
 
-export interface SavedVisualization {
+export interface SavedVisualization extends SavedObjectAttributes {
   description: string;
   name: string;
   query: string;
   selected_date_range: { start: string; end: string; text: string };
   selected_fields: { text: string; tokens: [] };
   selected_timestamp: IField;
   type: string;
+  sub_type?: 'metric' | 'visualization'; // exists if sub type is metric
+  user_configs?: string;
+  units_of_measure?: string;
   application_id?: string;
 }
 
-export interface SavedQueryRes {
-  createdTimeMs: number;
-  lastUpdatedTimeMs: number;
-  objectId: string;
-  savedQuery: SavedQuery;
-  tenant: string;
-}
-
-export interface SavedVizRes {
-  createdTimeMs: number;
-  lastUpdatedTimeMs: number;
-  objectId: string;
-  savedVisualization: SavedVisualization;
-  tenant: string;
-}
-
 export interface ExplorerDataType {
   jsonData: object[];
   jsonDataAll: object[];

common/types/observability_saved_object_attributes.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SavedObjectAttributes } from '../../../../src/core/types';
+import { SavedVisualization } from './explorer';
+
+export const VISUALIZATION_SAVED_OBJECT = 'observability-visualization';
+export const OBSERVABILTY_SAVED_OBJECTS = [VISUALIZATION_SAVED_OBJECT] as const;
+export const SAVED_OBJECT_VERSION = 1;
+
+export interface VisualizationSavedObjectAttributes extends SavedObjectAttributes {
+  title: string;
+  description: string;
+  version: number;
+  createdTimeMs: number;
+  savedVisualization: SavedVisualization;
+}

common/utils/core_services.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  HttpStart,
+  IUiSettingsClient,
+  NotificationsStart,
+  SavedObjectsClientContract,
+  ToastInput,
+} from '../../../../src/core/public';
+import { createGetterSetter } from '../../../../src/plugins/opensearch_dashboards_utils/common';
+import PPLService from '../../public/services/requests/ppl';
+import { QueryManager } from '../query_manager';
+
+let uiSettings: IUiSettingsClient;
+let notifications: NotificationsStart;
+
+export const uiSettingsService = {
+  init: (client: IUiSettingsClient, notificationsStart: NotificationsStart) => {
+    uiSettings = client;
+    notifications = notificationsStart;
+  },
+  get: (key: string, defaultOverride?: any) => {
+    return uiSettings?.get(key, defaultOverride) || '';
+  },
+  set: (key: string, value: any) => {
+    return uiSettings?.set(key, value) || Promise.reject('uiSettings client not initialized.');
+  },
+  addToast: (toast: ToastInput) => {
+    return notifications.toasts.add(toast);
+  },
+};
+
+export const [getPPLService, setPPLService] = createGetterSetter<PPLService>('PPLService');
+export const [getOSDHttp, setOSDHttp] = createGetterSetter<HttpStart>('http');
+export const [getOSDSavedObjectsClient, setOSDSavedObjectsClient] = createGetterSetter<
+  SavedObjectsClientContract
+>('SavedObjectsClient');
+export const [getQueryManager, setQueryManager] = createGetterSetter<QueryManager>('QueryManager');

common/utils/index.ts

@@ -10,4 +10,5 @@ export {
   composeFinalQuery,
   removeBacktick,
 } from './query_utils';
-export { uiSettingsService } from './settings_service';
+
+export * from './core_services';

common/utils/query_utils.ts

@@ -13,7 +13,6 @@ import {
   PPL_INDEX_INSERT_POINT_REGEX,
   PPL_INDEX_REGEX,
   PPL_NEWLINE_REGEX,
-  PPL_STATS_REGEX,
 } from '../../common/constants/shared';
 
 /**
@@ -42,6 +41,7 @@ export const preprocessQuery = ({
   selectedPatternField,
   patternRegex,
   filteredPattern,
+  whereClause,
 }: {
   rawQuery: string;
   startTime: string;
@@ -51,6 +51,7 @@ export const preprocessQuery = ({
   selectedPatternField?: string;
   patternRegex?: string;
   filteredPattern?: string;
+  whereClause?: string;
 }) => {
   let finalQuery = '';
 
@@ -65,7 +66,13 @@ export const preprocessQuery = ({
 
   finalQuery = `${tokens![1]}=${
     tokens![2]
-  } | where ${timeField} >= '${start}' and ${timeField} <= '${end}'${tokens![3]}`;
+  } | where ${timeField} >= '${start}' and ${timeField} <= '${end}'`;
+
+  if (whereClause) {
+    finalQuery += ` AND ${whereClause}`;
+  }
+
+  finalQuery += tokens![3];
 
   if (isLiveQuery) {
     finalQuery = finalQuery + ` | sort - ${timeField}`;

common/utils/settings_service.ts

@@ -6,14 +6,16 @@
   "ui": true,
   "requiredPlugins": [
     "charts",
+    "dashboard",
     "data",
     "embeddable",
     "inspector",
-    "urlForwarding",
     "navigation",
+    "opensearchDashboardsReact",
+    "opensearchDashboardsUtils",
+    "savedObjects",
     "uiActions",
-    "dashboard",
-    "visualizations",
-    "opensearchDashboardsReact"
+    "urlForwarding",
+    "visualizations"
   ]
 }

opensearch_dashboards.json

@@ -21,13 +21,13 @@
     "ag-grid-react": "^27.3.0",
     "antlr4": "4.8.0",
     "antlr4ts": "^0.5.0-alpha.4",
+    "performance-now": "^2.1.0",
     "plotly.js-dist": "^2.2.0",
     "postinstall": "^0.7.4",
     "react-graph-vis": "^1.0.5",
     "react-paginate": "^8.1.3",
     "react-plotly.js": "^2.5.1",
-    "redux-persist": "^6.0.0",
-    "performance-now": "^2.1.0"
+    "redux-persist": "^6.0.0"
   },
   "devDependencies": {
     "@cypress/skip-test": "^2.6.1",
@@ -37,7 +37,8 @@
     "antlr4ts-cli": "^0.5.0-alpha.4",
     "cypress": "^6.0.0",
     "eslint": "^6.8.0",
-    "jest-dom": "^4.0.0"
+    "jest-dom": "^4.0.0",
+    "ts-jest": "^29.1.0"
   },
   "resolutions": {
     "react-syntax-highlighter": "^15.4.3",