Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] Auto trigger schema setup in assets creation flow of get started page #2200

Merged
merged 9 commits into from
Oct 14, 2024
Merged

[Feature] Auto trigger schema setup in assets creation flow of get started page #2200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
dd6ec85
updated release notes (#1997)
sumukhswamy Jul 25, 2024
494e324
updated release notes (#1997)
sumukhswamy Jul 25, 2024
1fe9efe
add template creation to assests creation flow
mengweieric Oct 11, 2024
dc1bc56
adopt recent UI changes for the same flow
mengweieric Oct 14, 2024
c084206
fix lint issue
mengweieric Oct 14, 2024
d898b17
add types
mengweieric Oct 14, 2024
cd9f806
update snapshots
mengweieric Oct 14, 2024
2b91663
fix default selection between metrics / traces
Oct 14, 2024
5cd18d2
update snapshots
mengweieric Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ exports[`Log Config component renders empty log config 1`] = `
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down Expand Up @@ -687,6 +690,9 @@ exports[`Log Config component renders with query 1`] = `
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down
6 changes: 6 additions & 0 deletions public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ exports[`Service Config component renders empty service config 1`] = `
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down Expand Up @@ -1230,6 +1233,9 @@ exports[`Service Config component renders with one service selected 1`] = `
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down
6 changes: 6 additions & 0 deletions public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ exports[`Trace Config component renders empty trace config 1`] = `
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down Expand Up @@ -942,6 +945,9 @@ exports[`Trace Config component renders with one trace selected 1`] = `
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down
12 changes: 12 additions & 0 deletions public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1167,6 +1167,9 @@ exports[`Panels View Component renders panel view container with visualizations
],
},
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down Expand Up @@ -3069,6 +3072,9 @@ exports[`Panels View Component renders panel view container with visualizations
],
},
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down Expand Up @@ -3527,6 +3533,9 @@ exports[`Panels View Component renders panel view container without visualizatio
],
},
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down Expand Up @@ -5313,6 +5322,9 @@ exports[`Panels View Component renders panel view container without visualizatio
],
},
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down
3 changes: 3 additions & 0 deletions ...s/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,9 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat
],
},
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down
46 changes: 38 additions & 8 deletions public/components/getting_started/components/getting_started_collectData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
EuiButton,
EuiIcon,
EuiCard,
EuiSelectableOption,
} from '@elastic/eui';
import React, { useEffect, useState } from 'react';

Expand Down Expand Up @@ -52,7 +53,7 @@
selectedDataSourceLabel: string;
}

interface CollectorOption {
export interface CollectorOption {
label: string;
value: string;
}
Expand All @@ -63,14 +64,29 @@
}) => {
const [collectionMethod, setCollectionMethod] = useState('');
const [specificMethod, setSpecificMethod] = useState('');
const [_gettingStarted, setGettingStarted] = useState<any>(null);

Check warning on line 67 in public/components/getting_started/components/getting_started_collectData.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
const [selectedTabId, setSelectedTabId] = useState('workflow_0');
const [_selectedWorkflow, setSelectedWorkflow] = useState('');
const [workflows, setWorkflows] = useState<any[]>([]);

Check warning on line 70 in public/components/getting_started/components/getting_started_collectData.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
const [collectorOptions, setCollectorOptions] = useState<CollectorOption[]>([]);
const [patternsContent, setPatternsContent] = useState<any[]>([]);

Check warning on line 72 in public/components/getting_started/components/getting_started_collectData.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type

const getTelemetryOption = (collectionMethodOtel: string) => {
switch (collectionMethodOtel) {
case cardTwo:
return { label: 'Open Telemetry', value: 'otelMetrics' };
case cardThree:
return { label: 'Open Telemetry', value: 'otelTraces' };
default:
return { label: 'Open Telemetry', value: 'otelLogs' };
}
};

const [selectedIntegration, setSelectedIntegration] = useState<
Array<EuiSelectableOption<CollectorOption>>
>([getTelemetryOption(cardOne)]);

const technologyJsonMap: Record<string, any> = {

Check warning on line 89 in public/components/getting_started/components/getting_started_collectData.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
otelLogs: otelJsonLogs,
otelMetrics: otelJsonMetrics,
otelTraces: otelJsonTraces,
Expand All @@ -82,7 +98,7 @@

useEffect(() => {
handleCollectionMethodChange(cardOne);
}, []);

Check warning on line 101 in public/components/getting_started/components/getting_started_collectData.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'handleCollectionMethodChange'. Either include it or remove the dependency array

useEffect(() => {
let isMounted = true;
Expand Down Expand Up @@ -120,15 +136,16 @@
return () => {
isMounted = false;
};
}, [specificMethod]);

Check warning on line 139 in public/components/getting_started/components/getting_started_collectData.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'technologyJsonMap'. Either include it or remove the dependency array

const handleSpecificMethodChange = (newOption: any) => {
const handleSpecificMethodChange = (newOption: Array<EuiSelectableOption<CollectorOption>>) => {
const selectedOptionValue = newOption[0]?.value;

if (selectedOptionValue === specificMethod) {
return;
}

setSelectedIntegration(newOption);
setSpecificMethod(selectedOptionValue);
setSelectedWorkflow('');
setGettingStarted(null);
Expand All @@ -138,9 +155,10 @@
// Auto-select first collector if nothing is selected and a collection method is set
useEffect(() => {
if (collectorOptions.length > 0 && !specificMethod && collectionMethod) {
handleSpecificMethodChange([{ value: collectorOptions[0].value }]);
const telemetryOption = getTelemetryOption(collectionMethod);
handleSpecificMethodChange([{ ...telemetryOption }]);
}
}, [collectorOptions, specificMethod, collectionMethod]);

Check warning on line 161 in public/components/getting_started/components/getting_started_collectData.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'handleSpecificMethodChange'. Either include it or remove the dependency array

const handleCollectionMethodChange = (value: string) => {
setCollectionMethod(value);
Expand All @@ -151,17 +169,19 @@

if (value === cardOne) {
setCollectorOptions([
{ label: 'Open Telemetry', value: 'otelLogs' },
getTelemetryOption(cardOne),
{ label: 'Nginx', value: 'nginx' },
{ label: 'Java', value: 'java' },
{ label: 'Python', value: 'python' },
{ label: 'Golang', value: 'golang' },
]);
} else if (value === cardTwo) {
setCollectorOptions([{ label: 'Open Telemetry', value: 'otelMetrics' }]);
setCollectorOptions([getTelemetryOption(cardTwo)]);
} else if (value === cardThree) {
setCollectorOptions([{ label: 'Open Telemetry', value: 'otelTraces' }]);
setCollectorOptions([getTelemetryOption(cardThree)]);
}

setSelectedIntegration([getTelemetryOption(value)]);
};

const renderSpecificMethodDropdown = () => {
Expand Down Expand Up @@ -200,7 +220,9 @@
singleSelection={{ asPlainText: true }}
options={optionsWithIcons}
selectedOptions={selectedOption ? [selectedOption] : []}
onChange={(newOptions) => handleSpecificMethodChange(newOptions)}
onChange={(newOptions) =>
handleSpecificMethodChange(newOptions as Array<EuiSelectableOption<CollectorOption>>)
}
renderOption={(option) => (
<div style={{ display: 'flex', alignItems: 'center' }}>
{option.prepend}
Expand All @@ -214,7 +236,7 @@
};

const renderIndexPatternStep = (
patternsContentRender: any[],

Check warning on line 239 in public/components/getting_started/components/getting_started_collectData.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
selectedDataSourceIdRender: string
) => {
if (!patternsContentRender || patternsContentRender.length === 0) return null;
Expand Down Expand Up @@ -262,7 +284,7 @@
);
};

const renderSchema = (schemas: any[]) =>

Check warning on line 287 in public/components/getting_started/components/getting_started_collectData.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
schemas.map((schema, idx) => {
const indexPatternName = schema['index-pattern-name'] || '';

Expand All @@ -287,7 +309,7 @@
</>
)}
{Array.isArray(schema.info) &&
schema.info.map((link: any, linkIdx: number) =>

Check warning on line 312 in public/components/getting_started/components/getting_started_collectData.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
link && typeof link.url === 'string' ? (
<EuiLink key={linkIdx} href={link.url} target="_blank">
{typeof link.title === 'string' && link.title.trim() !== ''
Expand Down Expand Up @@ -347,7 +369,15 @@
</EuiListGroup>
<EuiButton
onClick={async () => {
await UploadAssets(specificMethod, selectedDataSourceId, selectedDataSourceLabel);
await UploadAssets(
specificMethod,
selectedDataSourceId,
selectedDataSourceLabel,
technologyJsonMap[specificMethod]?.['getting-started']?.schema ||
technologyJsonMap[specificMethod]?.schema ||
[],
selectedIntegration
);
}}
fill
>
Expand Down
56 changes: 55 additions & 1 deletion public/components/getting_started/components/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,27 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { MappingTypeMapping } from '@opensearch-project/opensearch/api/types';
import { EuiSelectableOption } from '@elastic/eui';
import { coreRefs } from '../../../framework/core_refs';
import { useToast } from '../../../../public/components/common/toast';
import { CollectorOption } from './getting_started_collectData';

export interface ICollectorIndexTemplate {
name: string;
templatePath: string;
template: MappingTypeMapping;
}

export interface ICollectorSchema {
alias: string;
content: string;
description: string;
'index-pattern-name': string;
type: string;
'index-template': string;
info: string[];
}

const fetchAssets = async (tutorialId: string, assetFilter?: 'dashboards' | 'indexPatterns') => {
const assetFilterParam = assetFilter ? `${assetFilter}/` : '';
Expand All @@ -20,16 +39,51 @@ const fetchAssets = async (tutorialId: string, assetFilter?: 'dashboards' | 'ind
return responeData;
};

export const UploadAssets = async (tutorialId: string, mdsId: string, mdsLabel: string) => {
export const UploadAssets = async (
tutorialId: string,
mdsId: string,
mdsLabel: string,
schema: ICollectorSchema[],
selectedIntegration: Array<EuiSelectableOption<CollectorOption>>
) => {
const { setToast } = useToast();
const http = coreRefs.http;

let curIntegration: string | undefined;
if (selectedIntegration !== undefined) {
if (/^otel[A-Za-z]+$/i.test(selectedIntegration[0].value)) {
curIntegration = 'otel-services';
} else if (selectedIntegration[0].value === 'nginx') {
curIntegration = selectedIntegration[0].value;
}
}

try {
// Auto-generate index templates based on the selected integration
let templates: ICollectorIndexTemplate[] = [];
if (curIntegration !== undefined) {
const indexTemplateMappings = await http!.get(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we making this call on every selection or only once? we can cache this right.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes this is actually what I was considering also for an improvement later, but this is only triggered per 'create assets' button clicked, simply clicking on different cards won't trigger this call

`/api/integrations/repository/${curIntegration}/schema`
);
templates = schema.reduce((acc: ICollectorIndexTemplate[], sh) => {
const templateMapping = indexTemplateMappings?.data?.mappings?.[sh.type.toLowerCase()];
if (!!templateMapping) {
acc.push({
name: sh.content.match(/[^/]+$/)?.[0] || '',
templatePath: sh.content.match(/PUT\s+(.+)/)?.[1] || '',
template: templateMapping,
});
}
return acc;
}, []);
}

const response = await http!.post(`/api/observability/gettingStarted/createAssets`, {
body: JSON.stringify({
mdsId,
mdsLabel,
tutorialId,
indexTemplates: templates,
}),
});

Expand Down
6 changes: 6 additions & 0 deletions public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down Expand Up @@ -204,6 +207,9 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down
18 changes: 18 additions & 0 deletions ...ents/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ exports[`Dashboard component renders dashboard 1`] = `
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down Expand Up @@ -423,6 +426,9 @@ exports[`Dashboard component renders dashboard 1`] = `
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down Expand Up @@ -1285,6 +1291,9 @@ exports[`Dashboard component renders empty dashboard 1`] = `
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down Expand Up @@ -1674,6 +1683,9 @@ exports[`Dashboard component renders empty dashboard 1`] = `
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down Expand Up @@ -2536,6 +2548,9 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down Expand Up @@ -2927,6 +2942,9 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
"getHelpExtension$": [MockFunction],
"getIsNavDrawerLocked$": [MockFunction],
"getIsVisible$": [MockFunction],
"globalSearch": Object {
"getAllSearchCommands": [MockFunction],
},
"logos": Object {
"AnimatedMark": Object {
"dark": Object {
Expand Down
Loading
Loading