Skip to content

Commit

Permalink
Merge branch 'main' into integrations-mds
Browse files Browse the repository at this point in the history
  • Loading branch information
@ps48
ps48 authored Aug 19, 2024
2 parents a767ffb + 359cdf9 commit 745bcec
Show file tree
Hide file tree
Showing 6 changed files with 208 additions and 45 deletions.
22 changes: 14 additions & 8 deletions public/components/getting_started/components/getting_started.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,17 @@ import { GettingStartedConnectionsHeader } from './getting_started_header';
import { CollectAndShipData } from './getting_started_collectData';
import { QueryAndAnalyze } from './getting_started_queryAndAnalyze';

export const NewGettingStarted = (props: HomeProps) => {
const { chrome } = props;
interface ExtendedHomeProps extends HomeProps {
selectedDataSourceId: string;
selectedDataSourceLabel: string;
}

export const NewGettingStarted = (props: ExtendedHomeProps) => {
const { chrome, selectedDataSourceId, selectedDataSourceLabel } = props;
const [selectedSource, setSelectedSource] = useState('');
const [isPickYourSourceOpen, setIsPickYourSourceOpen] = useState(true);
const [isQueryDataOpen, setIsQueryDataOpen] = useState(false);
const [indexPatterns, setIndexPatterns] = useState<string[]>([]);
const [isSampleDataset, setIsSampleDataset] = useState(false); // New state
const [isSampleDataset, setIsSampleDataset] = useState(false);

useEffect(() => {
chrome.setBreadcrumbs([
Expand All @@ -25,7 +29,7 @@ export const NewGettingStarted = (props: HomeProps) => {
href: '#/',
},
]);
}, []);
}, [chrome]);

const handleSelectSource = (source: string) => {
setSelectedSource(source);
Expand All @@ -42,10 +46,9 @@ export const NewGettingStarted = (props: HomeProps) => {
setIsQueryDataOpen(isOpen);
};

const setQueryDataOpen = (patterns: string[]) => {
const setQueryDataOpen = () => {
setIsPickYourSourceOpen(false);
setIsQueryDataOpen(true);
setIndexPatterns(patterns);
};

const handleCardSelectionChange = (isSample: boolean) => {
Expand All @@ -64,14 +67,17 @@ export const NewGettingStarted = (props: HomeProps) => {
onMoveToQueryData={setQueryDataOpen}
onSelectSource={handleSelectSource}
onCardSelectionChange={handleCardSelectionChange}
selectedDataSourceId={selectedDataSourceId}
selectedDataSourceLabel={selectedDataSourceLabel}
/>
<EuiSpacer size="l" />
{!isSampleDataset && (
<QueryAndAnalyze
isOpen={isQueryDataOpen}
onToggle={toggleQueryData}
selectedTechnology={selectedSource}
indexPatterns={indexPatterns}
selectedDataSourceId={selectedDataSourceId}
selectedDataSourceLabel={selectedDataSourceLabel}
/>
)}
</EuiPageBody>
Expand Down
13 changes: 11 additions & 2 deletions public/components/getting_started/components/getting_started_collectData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,13 @@ interface CollectAndShipDataProps {
onMoveToQueryData: (indexPatterns: string[]) => void;
onSelectSource: (source: string) => void;
onCardSelectionChange: (isSampleDataset: boolean) => void;
selectedDataSourceId: string;
selectedDataSourceLabel: string;
}

interface CollectorOption {
label: string;
value: string;
}

export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
Expand All @@ -48,6 +55,8 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
onMoveToQueryData,
onSelectSource,
onCardSelectionChange,
selectedDataSourceId,
selectedDataSourceLabel,
}) => {
const [collectionMethod, setCollectionMethod] = useState('');
const [specificMethod, setSpecificMethod] = useState('');
Expand All @@ -56,7 +65,7 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
const [_selectedWorkflow, setSelectedWorkflow] = useState('');
const [workflows, setWorkflows] = useState<any[]>([]);
const [selectedCard, setSelectedCard] = useState('');
const [collectorOptions, setCollectorOptions] = useState([]);
const [collectorOptions, setCollectorOptions] = useState<CollectorOption[]>([]);

const technologyJsonMap: Record<string, any> = {
otel: otelJson,
Expand Down Expand Up @@ -267,7 +276,7 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
</EuiListGroup>
<EuiButton
onClick={async () => {
await UploadAssets(specificMethod);
await UploadAssets(specificMethod, selectedDataSourceId, selectedDataSourceLabel);
}}
fill
>
Expand Down
48 changes: 34 additions & 14 deletions public/components/getting_started/components/getting_started_queryAndAnalyze.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,32 @@ import {
import { coreRefs } from '../../../../public/framework/core_refs';
import { fetchDashboardIds, fetchIndexPatternIds } from './utils';

interface Pattern {
id: string;
title: string;
}

interface Dashboard {
id: string;
title: string;
}

interface QueryAndAnalyzeProps {
isOpen: boolean;
onToggle: (isOpen: boolean) => void;
selectedTechnology: string;
indexPatterns: string[];
selectedDataSourceId: string;
selectedDataSourceLabel: string;
}

export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
isOpen,
onToggle,
selectedTechnology,
selectedDataSourceId,
}) => {
const [patternsContent, setPatternsContent] = useState([]);
const [dashboardsContent, setDashboardsContent] = useState([]);
const [patternsContent, setPatternsContent] = useState<Pattern[]>([]);
const [dashboardsContent, setDashboardsContent] = useState<Dashboard[]>([]);

const fetchIndexPatternContent = async () => {
try {
Expand All @@ -47,26 +59,34 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
const content = await fetchDashboardIds(selectedTechnology);
setDashboardsContent(content.data.length !== 0 ? content.data : []);
} catch (error) {
console.error('Error fetching index patterns:', error);
console.error('Error fetching dashboards:', error);
setDashboardsContent([]);
}
};

const redirectToDashboards = (path: string) => {
coreRefs?.application!.navigateToApp('dashboards', {
path: `#/${path}`,
});
};

useEffect(() => {
if (selectedTechnology !== '') {
fetchIndexPatternContent();
}
}, [selectedTechnology]);
}, [selectedTechnology, selectedDataSourceId]);

const handleIndexPatternClick = (patternId: string) => {
const finalPatternId = selectedDataSourceId
? `mds-${selectedDataSourceId}-objectId-${patternId}`
: patternId;

coreRefs?.application!.navigateToApp('data-explorer', {
path: `discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(indexPattern:'${patternId}',view:discover))&_q=(filters:!(),query:(language:kuery,query:''))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))`,
path: `discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(indexPattern:'${finalPatternId}',view:discover))&_q=(filters:!(),query:(language:kuery,query:''))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))`,
});
};

const redirectToDashboards = (dashboardId: string) => {
const finalDashboardId = selectedDataSourceId
? `mds-${selectedDataSourceId}-objectId-${dashboardId}`
: dashboardId;

coreRefs?.application!.navigateToApp('dashboards', {
path: `#/view/${finalDashboardId}`,
});
};

Expand Down Expand Up @@ -111,13 +131,13 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
<EuiFlexGroup wrap>
{dashboardsContent.length !== 0 &&
dashboardsContent.map((dashboard) => (
<EuiFlexItem style={{ maxWidth: '300px' }}>
<EuiFlexItem key={dashboard.id} style={{ maxWidth: '300px' }}>
<EuiCard
icon={<div />}
title={dashboard.title}
description={`Explore the ${dashboard.title} dashboard`}
onClick={() => {
redirectToDashboards(`/view/${dashboard.id}`);
redirectToDashboards(dashboard.id);
}}
/>
</EuiFlexItem>
Expand Down
21 changes: 11 additions & 10 deletions public/components/getting_started/components/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
*/

import { coreRefs } from '../../../framework/core_refs';
import { uploadBundle } from '../../integrations/components/upload_flyout';
import { useToast } from '../../../../public/components/common/toast';

const fetchAssets = async (tutorialId: string, assetFilter?: 'dashboards' | 'indexPatterns') => {
Expand All @@ -21,18 +20,20 @@ const fetchAssets = async (tutorialId: string, assetFilter?: 'dashboards' | 'ind
return responeData;
};

export const UploadAssets = async (tutorialId: string) => {
export const UploadAssets = async (tutorialId: string, mdsId: string, mdsLabel: string) => {
const { setToast } = useToast();
try {
const responeData = await fetchAssets(tutorialId);
const http = coreRefs.http;

const blob = new Blob([responeData.data], { type: 'application/x-ndjson' });
const file = new File([blob], 'ndjson-file.ndjson');
try {
const response = await http!.post(`/api/observability/gettingStarted/createAssets`, {
body: JSON.stringify({
mdsId,
mdsLabel,
tutorialId,
}),
});

const error = await uploadBundle(file);
if (error) {
console.error(error.message);
} else {
if (response) {
setToast('Created saved object assets successfully', 'success');
}
} catch (err) {
Expand Down
74 changes: 68 additions & 6 deletions public/components/getting_started/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,45 +3,107 @@
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import React, { useState, useMemo } from 'react';
import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
import { TraceAnalyticsCoreDeps } from '../trace_analytics/home';
import {
ChromeBreadcrumb,
ChromeStart,
HttpStart,
MountPoint,
NotificationsStart,
SavedObjectsStart,
} from '../../../../../src/core/public';
import {
DataSourceManagementPluginSetup,
DataSourceSelectableConfig,
} from '../../../../../src/plugins/data_source_management/public';
import { NewGettingStarted } from './components/getting_started';

export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
import { dataSourceFilterFn } from '../../../common/utils/shared';

export interface HomeProps extends RouteComponentProps {
pplService: any;
parentBreadcrumb: ChromeBreadcrumb;
http: HttpStart;
chrome: ChromeStart;
notifications: NotificationsStart;
dataSourceEnabled: boolean;
dataSourceManagement: DataSourceManagementPluginSetup;
savedObjectsMDSClient: SavedObjectsStart;
setActionMenu: (menuMount: MountPoint | undefined) => void;
}

export const Home = (props: HomeProps) => {
const { http, chrome, pplService, notifications } = props;
const {
http,
chrome,
pplService,
notifications,
dataSourceEnabled,
dataSourceManagement,
savedObjectsMDSClient,
parentBreadcrumb,
setActionMenu,
} = props;

const [selectedDataSourceId, setSelectedDataSourceId] = useState<string>('');
const [selectedDataSourceLabel, setSelectedDataSourceLabel] = useState<string>('');

const onSelectedDataSourceChange = (e: any) => {
const dataSourceId = e[0] ? e[0].id : undefined;
const dataSourceLabel = e[0] ? e[0].label : '';
setSelectedDataSourceId(dataSourceId);
setSelectedDataSourceLabel(dataSourceLabel);
};

const DataSourceMenu = useMemo(() => {
if (dataSourceEnabled && dataSourceManagement?.ui) {
return dataSourceManagement.ui.getDataSourceMenu<DataSourceSelectableConfig>();
}
return null;
}, [dataSourceManagement, dataSourceEnabled]);

const dataSourceMenuComponent = useMemo(() => {
if (DataSourceMenu) {
return (
<DataSourceMenu
setMenuMountPoint={setActionMenu}
componentType={'DataSourceSelectable'}
componentConfig={{
savedObjects: savedObjectsMDSClient.client,
notifications,
fullWidth: true,
onSelectedDataSources: onSelectedDataSourceChange,
dataSourceFilter: dataSourceFilterFn,
}}
/>
);
}
return null;
}, [savedObjectsMDSClient.client, notifications, DataSourceMenu, setActionMenu]);

const commonProps = {
http,
chrome,
pplService,
notifications,
dataSourceEnabled,
dataSourceManagement,
savedObjectsMDSClient,
parentBreadcrumb,
selectedDataSourceId,
selectedDataSourceLabel,
setActionMenu,
};

return (
<div>
{dataSourceMenuComponent}
<HashRouter>
<Switch>
<Route
exact
path={['/']}
render={(_routerProps) => <NewGettingStarted {...commonProps} />}
render={(routerProps) => <NewGettingStarted {...routerProps} {...commonProps} />}
/>
</Switch>
</HashRouter>
Expand Down
Loading

0 comments on commit 745bcec

Please sign in to comment.