Skip to content

Commit

Permalink
[Bug] UI changes for overview page, fix re-direction for workspaces (#…
Browse files Browse the repository at this point in the history 
…2152)

* update overview page, redirection bug, change text

Signed-off-by: Adam Tackett <[email protected]>

* change card order, make button small, rename variable

Signed-off-by: Adam Tackett <[email protected]>

* fix bugs, adjust ui

Signed-off-by: Adam Tackett <[email protected]>

* address comments

Signed-off-by: Adam Tackett <[email protected]>

* change text

Signed-off-by: Adam Tackett <[email protected]>

---------

Signed-off-by: Adam Tackett <[email protected]>
Co-authored-by: Adam Tackett <[email protected]>
(cherry picked from commit ce419d8)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@github-actions
github-actions[bot] and Adam Tackett committed Sep 11, 2024
1 parent 785b507 commit d9c75f7
Show file tree
Hide file tree
Showing 13 changed files with 215 additions and 162 deletions.
4 changes: 3 additions & 1 deletion common/constants/shared.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ export const DATACONNECTIONS_ENDPOINT = '/_plugins/_query/_datasources';
export const JOBS_ENDPOINT_BASE = '/_plugins/_async_query';
export const JOB_RESULT_ENDPOINT = '/result';

export const tutorialSampleDataPluginId = 'import_sample_data';

export const observabilityID = 'observability-logs';
export const observabilityTitle = 'Observability';
export const observabilityPluginOrder = 1500;
Expand All @@ -42,7 +44,7 @@ export const observabilityOverviewTitle = 'Observability overview';
export const observabilityOverviewPluginOrder = 5088;

export const observabilityGettingStartedID = 'observability-gettingStarted';
export const observabilityGettingStartedTitle = 'Getting Started';
export const observabilityGettingStartedTitle = 'Get started';
export const observabilityGettingStartedPluginOrder = 5089;

export const observabilityApplicationsID = 'observability-applications';
Expand Down
3 changes: 2 additions & 1 deletion public/components/getting_started/components/getting_started.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import React, { useEffect, useState } from 'react';
import { HomeProps } from 'public/components/getting_started/home';
import { CollectAndShipData } from './getting_started_collectData';
import { QueryAndAnalyze } from './getting_started_queryAndAnalyze';
import { observabilityGettingStartedTitle } from '../../../../common/constants/shared';

interface ExtendedHomeProps extends HomeProps {
selectedDataSourceId: string;
Expand All @@ -24,7 +25,7 @@ export const NewGettingStarted = (props: ExtendedHomeProps) => {
useEffect(() => {
chrome.setBreadcrumbs([
{
text: 'Getting Started',
text: observabilityGettingStartedTitle,
href: '#/',
},
]);
Expand Down
70 changes: 35 additions & 35 deletions public/components/getting_started/components/getting_started_collectData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ import javaJson from '../getting_started_artifacts/java_client/java_client-1.0.0
import { IntegrationCards } from './getting_started_integrationCards';
import { UploadAssets } from './utils';

const cardOne = 'Collector';
const cardTwo = 'File Upload';
const cardThree = 'Configure use-case based content';

interface CollectAndShipDataProps {
isOpen: boolean;
onToggle: (isOpen: boolean) => void;
Expand Down Expand Up @@ -103,17 +107,17 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
setSelectedWorkflow('');
setGettingStarted(null);
setWorkflows([]);
onCardSelectionChange(value === 'Use a sample dataset');
onCardSelectionChange(value === cardThree);

if (value === 'Configure collectors') {
if (value === cardOne) {
setCollectorOptions([
{ label: 'Open Telemetry (structured)', value: 'otel' },
{ label: 'Nginx (structured)', value: 'nginx' },
{ label: 'Java (unstructured)', value: 'java' },
{ label: 'Python (unstructured)', value: 'python' },
{ label: 'Golang (unstructured)', value: 'golang' },
]);
} else if (value === 'Upload a file CSV or JSON') {
} else if (value === cardTwo) {
setCollectorOptions([{ label: 'Fluent Bit', value: 'csv' }]);
}
};
Expand Down Expand Up @@ -148,7 +152,7 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
return (
<>
<EuiText>
<strong>Select a collector</strong>
<h3>Select a collector</h3>
</EuiText>
<EuiSpacer size="s" />
<EuiSelectable
Expand Down Expand Up @@ -301,68 +305,64 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
}));

return (
<EuiAccordion
id="collect-and-ship-data"
buttonContent="Collect and ship data"
paddingSize="m"
forceState={isOpen ? 'open' : 'closed'}
onToggle={onToggle}
>
<EuiPanel>
<EuiText>
<h3>Collect your data</h3>
</EuiText>
<EuiSpacer size="m" />
<EuiPanel paddingSize="m">
<EuiAccordion
id="collect-and-ingest-data"
buttonContent="Collect and ingest data"
paddingSize="m"
forceState={isOpen ? 'open' : 'closed'}
onToggle={onToggle}
>
<EuiText>
<strong>Select a collection method</strong>
<h2>Collection method</h2>
</EuiText>
<EuiSpacer size="s" />
<EuiFlexGroup>
<EuiFlexItem>
<EuiCheckableCard
id="configure_collectors"
label="Configure collectors"
label={cardOne}
checkableType="radio"
checked={selectedCard === 'Configure collectors'}
checked={selectedCard === cardOne}
onChange={() => {
handleCollectionMethodChange('Configure collectors');
setSelectedCard('Configure collectors');
handleCollectionMethodChange(cardOne);
setSelectedCard(cardOne);
}}
>
Configure agents and ingestion pipeline
<EuiText size="s">Configure agents and ingestion pipeline</EuiText>
</EuiCheckableCard>
</EuiFlexItem>
<EuiFlexItem>
<EuiCheckableCard
id="upload_file"
label="Upload a file CSV"
label={cardTwo}
checkableType="radio"
checked={selectedCard === 'Upload a file CSV or JSON'}
checked={selectedCard === cardTwo}
onChange={() => {
handleCollectionMethodChange('Upload a file CSV or JSON');
setSelectedCard('Upload a file CSV or JSON');
handleCollectionMethodChange(cardTwo);
setSelectedCard(cardTwo);
}}
>
Upload your data
<EuiText size="s">Upload your data</EuiText>
</EuiCheckableCard>
</EuiFlexItem>
<EuiFlexItem>
<EuiCheckableCard
id="use_sample_dataset"
label="Use a sample dataset"
label={cardThree}
checkableType="radio"
checked={selectedCard === 'Use a sample dataset'}
checked={selectedCard === cardThree}
onChange={() => {
handleCollectionMethodChange('Use a sample dataset');
setSelectedCard('Use a sample dataset');
handleCollectionMethodChange(cardThree);
setSelectedCard(cardThree);
}}
>
Explore with a log dataset
<EuiText size="s">Explore with a log dataset</EuiText>
</EuiCheckableCard>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
{collectionMethod === 'Use a sample dataset' ? (
{collectionMethod === cardThree ? (
<IntegrationCards />
) : (
<>
Expand All @@ -382,7 +382,7 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
)}
</>
)}
</EuiPanel>
</EuiAccordion>
</EuiAccordion>
</EuiPanel>
);
};
51 changes: 30 additions & 21 deletions public/components/getting_started/components/getting_started_queryAndAnalyze.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ import {
EuiPanel,
EuiSpacer,
EuiText,
EuiTitle,
} from '@elastic/eui';
import { coreRefs } from '../../../../public/framework/core_refs';
import { fetchDashboardIds, fetchIndexPatternIds, redirectToDashboards } from './utils';
import { getWorkspaceIdFromUrl } from '../../../../../../src/core/public/utils';

interface Pattern {
id: string;
Expand Down Expand Up @@ -75,8 +75,15 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
? `mds-${selectedDataSourceId}-objectId-${patternId}`
: patternId;

const currentUrl = window.location.href;
const workspaceId = getWorkspaceIdFromUrl(currentUrl, coreRefs?.http!.basePath.getBasePath());

const workspacePatternId = workspaceId
? `workspaceId-${workspaceId}-${finalPatternId}`
: finalPatternId;

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

Expand All @@ -85,26 +92,31 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
? `mds-${selectedDataSourceId}-objectId-${dashboardId}`
: dashboardId;

const currentUrl = window.location.href;
const workspaceId = getWorkspaceIdFromUrl(currentUrl, coreRefs?.http!.basePath.getBasePath());

const workspaceDashboardId = workspaceId
? `workspaceId-${workspaceId}-${finalDashboardId}`
: finalDashboardId;
const dashboardUrl = `#/view/${workspaceDashboardId}`;

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

return (
<EuiAccordion
id="query-and-analyze"
buttonContent={`Query and analyze data: ${selectedTechnology}`}
paddingSize="m"
forceState={isOpen ? 'open' : 'closed'}
onToggle={onToggle}
>
<EuiPanel>
<EuiTitle size="m">
<h3>Query data</h3>
</EuiTitle>
<EuiPanel paddingSize="m">
<EuiAccordion
id="query-and-analyze"
buttonContent={`Query and analyze data: ${selectedTechnology}`}
paddingSize="m"
forceState={isOpen ? 'open' : 'closed'}
onToggle={onToggle}
>
<EuiText>
<p>
<strong>Explore your data</strong>
<h2>Explore your data</h2>
</p>
</EuiText>
<EuiSpacer size="m" />
Expand All @@ -119,12 +131,9 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
))}
</EuiFlexGroup>
<EuiHorizontalRule />
<EuiTitle size="m">
<h3>Analyze data</h3>
</EuiTitle>
<EuiText>
<p>
<strong>Visualize your data</strong>
<h2>Visualize your data</h2>
</p>
</EuiText>
<EuiSpacer size="m" />
Expand Down Expand Up @@ -154,7 +163,7 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</EuiAccordion>
</EuiAccordion>
</EuiPanel>
);
};
2 changes: 1 addition & 1 deletion public/components/integrations/components/integration_overview_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function IntegrationOverview(props: any) {
data-test-subj="try-it-button"
data-click-metric-element="integrations.create_from_try_it"
>
Try It
Try with sample data
</EuiSmallButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
63 changes: 34 additions & 29 deletions ...omponents/overview/components/__tests__/__snapshots__/add_dashboard_callout.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,47 +95,52 @@ exports[`Add dashboard callout renders add dashboard callout 1`] = `
className="euiSpacer euiSpacer--l"
/>
</EuiSpacer>
<EuiButton>
<EuiButtonDisplay
baseClassName="euiButton"
disabled={false}
element="button"
isDisabled={false}
type="button"
<EuiSmallButton>
<EuiButton
size="s"
>
<button
className="euiButton euiButton--primary"
<EuiButtonDisplay
baseClassName="euiButton"
disabled={false}
style={
Object {
"minWidth": undefined,
}
}
element="button"
isDisabled={false}
size="s"
type="button"
>
<EuiButtonContent
className="euiButton__content"
iconGap="m"
iconSide="left"
textProps={
<button
className="euiButton euiButton--primary euiButton--small"
disabled={false}
style={
Object {
"className": "euiButton__text",
"minWidth": undefined,
}
}
type="button"
>
<span
className="euiButtonContent euiButton__content"
<EuiButtonContent
className="euiButton__content"
iconGap="m"
iconSide="left"
textProps={
Object {
"className": "euiButton__text",
}
}
>
<span
className="euiButton__text"
className="euiButtonContent euiButton__content"
>
Select
<span
className="euiButton__text"
>
Select
</span>
</span>
</span>
</EuiButtonContent>
</button>
</EuiButtonDisplay>
</EuiButton>
</EuiButtonContent>
</button>
</EuiButtonDisplay>
</EuiButton>
</EuiSmallButton>
</div>
</EuiTextColor>
</div>
Expand Down
Loading

0 comments on commit d9c75f7

Please sign in to comment.