[BUG-Fixed] #1466 - create observability dashboard after invalid name

common/constants/data_sources.ts

@@ -90,3 +90,8 @@ export const ACCELERATION_AGGREGRATION_FUNCTIONS = [
 ];
 
 export const SPARK_PARTITION_INFO = `# Partition Information`;
+export const OBS_DEFAULT_CLUSTER = 'observability-default'; // prefix key for generating data source id for default cluster in data selector
+export const OBS_S3_DATA_SOURCE = 'observability-s3'; // prefix key for generating data source id for s3 data sources in data selector
+export const S3_DATA_SOURCE_GROUP_DISPLAY_NAME = 'Amazon S3'; // display group name for Amazon-managed-s3 data sources in data selector
+export const S3_DATA_SOURCE_GROUP_SPARK_DISPLAY_NAME = 'Spark'; // display group name for OpenSearch-spark-s3 data sources in data selector
+export const SECURITY_DASHBOARDS_LOGOUT_URL = '/logout';

common/constants/shared.ts

@@ -93,6 +93,7 @@ export const PPL_INDEX_INSERT_POINT_REGEX = /(search source|source|index)\s*=\s*
 export const PPL_INDEX_REGEX = /(search source|source|index)\s*=\s*([^|\s]+)/i;
 export const PPL_WHERE_CLAUSE_REGEX = /\s*where\s+/i;
 export const PPL_NEWLINE_REGEX = /[\n\r]+/g;
+export const PPL_DESCRIBE_INDEX_REGEX = /(describe)\s+([^|\s]+)/i;
 
 // Observability plugin URI
 const BASE_OBSERVABILITY_URI = '/_plugins/_observability';
@@ -215,11 +216,11 @@ export interface DefaultChartStylesProps {
 }
 
 export const DEFAULT_CHART_STYLES: DefaultChartStylesProps = {
-  DefaultModeLine: 'lines',
+  DefaultModeLine: 'lines+markers',
   Interpolation: 'spline',
   LineWidth: 0,
   FillOpacity: 100,
-  MarkerSize: 5,
+  MarkerSize: 25,
   ShowLegend: 'show',
   LegendPosition: 'v',
   LabelAngle: 0,
@@ -257,7 +258,7 @@ export const VISUALIZATION_ERROR = {
   NO_METRIC: 'Invalid Metric MetaData',
 };
 
-export const S3_DATASOURCE_TYPE = 'S3_DATASOURCE';
+export const S3_DATA_SOURCE_TYPE = 's3glue';
 
 export const ASYNC_QUERY_SESSION_ID = 'async-query-session-id';
 export const ASYNC_QUERY_DATASOURCE_CACHE = 'async-query-catalog-cache';

common/types/data_connections.ts

@@ -121,6 +121,7 @@ export interface CachedDataSource {
   lastUpdated: string; // date string in UTC format
   status: CachedDataSourceStatus;
   databases: CachedDatabase[];
+  dataSourceMDSId?: string;
 }
 
 export interface DataSourceCacheData {
@@ -143,6 +144,7 @@ export interface CachedAccelerationByDataSource {
   accelerations: CachedAcceleration[];
   lastUpdated: string; // date string in UTC format
   status: CachedDataSourceStatus;
+  dataSourceMDSId?: string;
 }
 
 export interface AccelerationsCacheData {
@@ -240,6 +242,13 @@ export interface CreateAccelerationForm {
 
 export interface LoadCachehookOutput {
   loadStatus: DirectQueryLoadingStatus;
-  startLoading: (dataSourceName: string, databaseName?: string, tableName?: string) => void;
+  startLoading: (params: StartLoadingParams) => void;
   stopLoading: () => void;
 }
+
+export interface StartLoadingParams {
+  dataSourceName: string;
+  dataSourceMDSId?: string;
+  databaseName?: string;
+  tableName?: string;
+}

common/utils/shared.ts

@@ -18,6 +18,9 @@ export function get<T = unknown>(obj: Record<string, any>, path: string, default
 }
 
 export function addBackticksIfNeeded(input: string): string {
+  if (input === undefined) {
+    return '';
+  }
   // Check if the string already has backticks
   if (input.startsWith('`') && input.endsWith('`')) {
     return input; // Return the string as it is

opensearch_dashboards.json

@@ -18,6 +18,6 @@
     "urlForwarding",
     "visualizations"
   ],
-  "optionalPlugins": ["managementOverview", "assistantDashboards", "securityDashboards"],
+  "optionalPlugins": ["managementOverview", "assistantDashboards", "securityDashboards", "dataSource", "dataSourceManagement"],
   "configPath": ["observability"]
 }

package.json

@@ -33,6 +33,7 @@
     "antlr4ts": "^0.5.0-alpha.4",
     "cypress-multi-reporters": "^1.6.3",
     "cypress-parallel": "^0.13.0",
+    "json5": "^2.2.3",
     "mime": "^3.0.0",
     "mocha": "10.1.0",
     "performance-now": "^2.1.0",

public/components/app.tsx

@@ -7,19 +7,20 @@ import { I18nProvider } from '@osd/i18n/react';
 import { QueryManager } from 'common/query_manager';
 import React from 'react';
 import { Provider } from 'react-redux';
-import { CoreStart } from '../../../../src/core/public';
+import { CoreStart, MountPoint } from '../../../../src/core/public';
+import { DataSourceManagementPluginSetup } from '../../../../src/plugins/data_source_management/public';
 import { observabilityID, observabilityTitle } from '../../common/constants/shared';
 import { store } from '../framework/redux/store';
 import { AppPluginStartDependencies } from '../types';
 import { Home as ApplicationAnalyticsHome } from './application_analytics/home';
-import { Home as IntegrationsHome } from './integrations/home';
 import { MetricsListener } from './common/metrics_listener';
 import { Home as CustomPanelsHome } from './custom_panels/home';
+import { Home as DataConnectionsHome } from './datasources/home';
 import { EventAnalytics } from './event_analytics';
+import { Home as IntegrationsHome } from './integrations/home';
 import { Home as MetricsHome } from './metrics/index';
 import { Main as NotebooksHome } from './notebooks/components/main';
 import { Home as TraceAnalyticsHome } from './trace_analytics/home';
-import { Home as DataConnectionsHome } from './datasources/home';
 
 interface ObservabilityAppDeps {
   CoreStartProp: CoreStart;
@@ -30,6 +31,10 @@ interface ObservabilityAppDeps {
   timestampUtils: any;
   queryManager: QueryManager;
   startPage: string;
+  dataSourceEnabled: boolean;
+  dataSourceManagement: DataSourceManagementPluginSetup;
+  setActionMenu: (menuMount: MountPoint | undefined) => void;
+  savedObjectsMDSClient: CoreStart['savedObjects'];
 }
 
 // for cypress to test redux store
@@ -58,6 +63,10 @@ export const App = ({
   queryManager,
   startPage,
   dataSourcePluggables,
+  dataSourceManagement,
+  setActionMenu,
+  dataSourceEnabled,
+  savedObjectsMDSClient,
 }: ObservabilityAppDeps) => {
   const { chrome, http, notifications, savedObjects: coreSavedObjects } = CoreStartProp;
   const parentBreadcrumb = {
@@ -89,6 +98,10 @@ export const App = ({
             parentBreadcrumbs={[parentBreadcrumb]}
             setBreadcrumbs={chrome.setBreadcrumbs}
             dataSourcePluggables={dataSourcePluggables}
+            dataSourceManagement={dataSourceManagement}
+            dataSourceEnabled={dataSourceEnabled}
+            setActionMenu={setActionMenu}
+            savedObjectsMDSClient={savedObjectsMDSClient}
           />
         </MetricsListener>
       </I18nProvider>

public/components/application_analytics/__tests__/__snapshots__/flyout.test.tsx.snap

@@ -1059,6 +1059,14 @@ exports[`Trace Detail Render Flyout component render trace detail 1`] = `
                   "barmode": "stack",
                   "height": 60,
                   "hovermode": "closest",
+                  "layout": Object {
+                    "annotations": Array [
+                      Object {
+                        "showarrow": true,
+                        "xanchor": "right",
+                      },
+                    ],
+                  },
                   "legend": Object {
                     "orientation": "h",
                     "traceorder": "normal",

public/components/application_analytics/components/config_components/service_config.tsx

@@ -15,15 +15,14 @@ import {
   EuiText,
 } from '@elastic/eui';
 import DSLService from 'public/services/requests/dsl';
-import React, { useState } from 'react';
-import { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { OptionType } from '../../../../../common/types/application_analytics';
 import { FilterType } from '../../../trace_analytics/components/common/filters/filters';
 import { ServiceObject } from '../../../trace_analytics/components/common/plots/service_map';
 import { ServiceMap } from '../../../trace_analytics/components/services';
 import { handleServiceMapRequest } from '../../../trace_analytics/requests/services_request_handler';
-import { AppAnalyticsComponentDeps } from '../../home';
-import { OptionType } from '../../../../../common/types/application_analytics';
 import { getClearModal } from '../../helpers/modal_containers';
+import { AppAnalyticsComponentDeps } from '../../home';
 
 interface ServiceConfigProps extends AppAnalyticsComponentDeps {
   dslService: DSLService;
@@ -50,7 +49,7 @@ export const ServiceConfig = (props: ServiceConfigProps) => {
   const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
 
   useEffect(() => {
-    handleServiceMapRequest(http, dslService, mode, setServiceMap);
+    handleServiceMapRequest(http, dslService, mode, '', setServiceMap);
   }, []);
 
   useEffect(() => {

public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx

@@ -4,7 +4,6 @@
  */
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import _ from 'lodash';
 import {
   EuiFlyout,
   EuiFlyoutBody,
@@ -14,19 +13,20 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
+import _ from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
-import {
-  handleServiceMapRequest,
-  handleServiceViewRequest,
-} from '../../../../../public/components/trace_analytics/requests/services_request_handler';
 import {
   filtersToDsl,
   processTimeStamp,
 } from '../../../../../public/components/trace_analytics/components/common/helper_functions';
-import { ServiceMap } from '../../../../../public/components/trace_analytics/components/services';
 import { ServiceObject } from '../../../../../public/components/trace_analytics/components/common/plots/service_map';
+import { ServiceMap } from '../../../../../public/components/trace_analytics/components/services';
 import { SpanDetailTable } from '../../../../../public/components/trace_analytics/components/traces/span_detail_table';
 import { TraceAnalyticsComponentDeps } from '../../../../../public/components/trace_analytics/home';
+import {
+  handleServiceMapRequest,
+  handleServiceViewRequest,
+} from '../../../../../public/components/trace_analytics/requests/services_request_handler';
 import { getListItem } from '../../helpers/utils';
 
 interface ServiceFlyoutProps extends TraceAnalyticsComponentDeps {
@@ -131,7 +131,7 @@ export function ServiceDetailFlyout(props: ServiceFlyoutProps) {
       appConfigs
     );
     handleServiceViewRequest(serviceName, http, serviceDSL, setFields, mode);
-    handleServiceMapRequest(http, serviceDSL, mode, setServiceMap, serviceName);
+    handleServiceMapRequest(http, serviceDSL, mode, '', setServiceMap, serviceName);
     const spanDSL = filtersToDsl(mode, filters, query, startTime, endTime, 'app', appConfigs);
     spanDSL.query.bool.must.push({
       term: {

public/components/common/query_utils/index.ts

@@ -21,6 +21,7 @@ import {
   OTEL_DATE_FORMAT,
   OTEL_METRIC_SUBTYPE,
   PROMQL_METRIC_SUBTYPE,
+  PPL_DESCRIBE_INDEX_REGEX,
 } from '../../../../common/constants/shared';
 import { IExplorerFields, IQuery } from '../../../../common/types/explorer';
 import { SPAN_RESOLUTION_REGEX } from '../../../../common/constants/metrics';
@@ -219,6 +220,14 @@ export const getIndexPatternFromRawQuery = (query: string): string => {
   return getPromQLIndex(query) || getPPLIndex(query);
 };
 
+export const getDescribeQueryIndexFromRawQuery = (query: string): string | undefined => {
+  const matches = query.match(PPL_DESCRIBE_INDEX_REGEX);
+  if (matches) {
+    return matches[2];
+  }
+  return undefined;
+};
+
 function extractSpanAndResolution(query: string) {
   if (!query) return;