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

Overview page add state for missing data source #2237

Merged
merged 8 commits into from
Nov 12, 2024
Merged

Overview page add state for missing data source #2237

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4b5e972
added callout for no data sources pathway in workspaces
Oct 30, 2024
5190f1d
reset dashboard if datasource is deleted
Oct 30, 2024
9206f59
Merge branch 'main' into overviewDataSource
TackAdam Nov 4, 2024
74ab651
Merge branch 'main' into overviewDataSource
TackAdam Nov 6, 2024
fa9b4e9
Merge branch 'main' into overviewDataSource
TackAdam Nov 7, 2024
3126f99
Merge branch 'main' into overviewDataSource
TackAdam Nov 8, 2024
42b6c6b
handle refresh, adjust naming, unit test
Nov 11, 2024
b06e832
add i18n, finally block, move function
Nov 12, 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
1 change: 1 addition & 0 deletions common/constants/shared.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export const JOBS_ENDPOINT_BASE = '/_plugins/_async_query';
export const JOB_RESULT_ENDPOINT = '/result';

export const tutorialSampleDataPluginId = 'import_sample_data';
export const dataSourcesId = 'dataSources';
TackAdam marked this conversation as resolved.
Show resolved Hide resolved

export const observabilityID = 'observability-logs';
export const observabilityTitle = 'Observability';
Expand Down
179 changes: 179 additions & 0 deletions ...mponents/overview/components/__tests__/__snapshots__/add_datasource_callout.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Add dashboard callout renders add datasource callout 1`] = `
<AddDataSourceCallout>
<EuiPanel
hasShadow={true}
paddingSize="m"
>
<div
className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
>
<EuiFlexGroup
alignItems="center"
direction="column"
gutterSize="m"
justifyContent="center"
>
<div
className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
>
<EuiFlexItem
grow={false}
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<EuiIcon
size="xxl"
type="database"
>
<EuiIconBeaker
aria-hidden={true}
className="euiIcon euiIcon--xxLarge euiIcon-isLoading"
focusable="false"
role="img"
style={null}
>
<svg
aria-hidden={true}
className="euiIcon euiIcon--xxLarge euiIcon-isLoading"
focusable="false"
height={16}
role="img"
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
/>
</svg>
</EuiIconBeaker>
</EuiIcon>
</div>
</EuiFlexItem>
<EuiFlexItem
grow={false}
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<EuiTitle
size="m"
>
<h3
className="euiTitle euiTitle--medium"
>
No connected data sources
</h3>
</EuiTitle>
</div>
</EuiFlexItem>
<EuiFlexItem
grow={false}
style={
Object {
"maxWidth": "40%",
}
}
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
style={
Object {
"maxWidth": "40%",
}
}
>
<EuiText
textAlign="center"
>
<div
className="euiText euiText--medium"
>
<EuiTextAlign
textAlign="center"
>
<div
className="euiTextAlign euiTextAlign--center"
>
<p
style={
Object {
"margin": 0,
}
}
>
There are no data sources associated to the workspace. Associate data sources or request your administrator to associate data sources for you to get started.
</p>
</div>
</EuiTextAlign>
</div>
</EuiText>
</div>
</EuiFlexItem>
<EuiFlexItem
grow={false}
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<EuiButton
color="primary"
fill={true}
onClick={[Function]}
>
<EuiButtonDisplay
baseClassName="euiButton"
color="primary"
disabled={false}
element="button"
fill={true}
isDisabled={false}
onClick={[Function]}
type="button"
>
<button
className="euiButton euiButton--primary euiButton--fill"
disabled={false}
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<EuiButtonContent
className="euiButton__content"
iconGap="m"
iconSide="left"
textProps={
Object {
"className": "euiButton__text",
}
}
>
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButton__text"
>
Manage data sources
</span>
</span>
</EuiButtonContent>
</button>
</EuiButtonDisplay>
</EuiButton>
</div>
</EuiFlexItem>
</div>
</EuiFlexGroup>
</div>
</EuiPanel>
</AddDataSourceCallout>
`;
19 changes: 19 additions & 0 deletions public/components/overview/components/__tests__/add_datasource_callout.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import React from 'react';
import { AddDataSourceCallout } from '../add_datasource_callout';

describe('Add dashboard callout', () => {
configure({ adapter: new Adapter() });

const wrapper = mount(<AddDataSourceCallout />);

it('renders add datasource callout', async () => {
expect(wrapper).toMatchSnapshot();
});
});
5 changes: 5 additions & 0 deletions public/components/overview/components/__tests__/dashboard_controls.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ jest.mock('../../../../framework/core_refs', () => ({
contentManagement: {
updatePageSection: jest.fn(),
},
http: {
basePath: {
getBasePath: jest.fn(() => '/basePath'),
},
},
},
}));

Expand Down
51 changes: 51 additions & 0 deletions public/components/overview/components/add_datasource_callout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import {
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiIcon,
EuiTitle,
EuiText,
EuiButton,
} from '@elastic/eui';
import { coreRefs } from '../../../framework/core_refs';
import { dataSourcesId } from '../../../../common/constants/shared';

export function AddDataSourceCallout() {
return (
<EuiPanel paddingSize="m" hasShadow={true}>
<EuiFlexGroup justifyContent="center" alignItems="center" direction="column" gutterSize="m">
<EuiFlexItem grow={false}>
<EuiIcon size="xxl" type="database" />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiTitle size="m">
<h3>No connected data sources</h3>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ maxWidth: '40%' }}>
<EuiText textAlign="center">
<p style={{ margin: 0 }}>
There are no data sources associated to the workspace. Associate data sources or
Copy link
Collaborator

Choose a reason for hiding this comment

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

minor: add i18n please (can be followups)

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

added

          {i18n.translate('traceAnalytics.noDataSourcesMessage', {
            defaultMessage:
              'There are no data sources associated to the workspace. Associate data sources or request your administrator to associate data sources for you to get started.',
          })}

request your administrator to associate data sources for you to get started.
</p>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
fill
color="primary"
onClick={() => coreRefs.application?.navigateToApp(dataSourcesId, { path: '#/' })}
>
Manage data sources
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
);
}
45 changes: 44 additions & 1 deletion public/components/overview/components/dashboard_controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import React, { useEffect, useState } from 'react';
import {
EuiFlexGroup,
EuiFlexItem,
Expand All @@ -13,19 +14,56 @@ import {
EuiToolTip,
} from '@elastic/eui';
import { OnTimeChangeProps } from '@opensearch-project/oui/src/eui_components/date_picker/super_date_picker/super_date_picker';
import React from 'react';
import { useObservable } from 'react-use';
import { FormattedMessage } from '@osd/i18n/react';
import { coreRefs } from '../../../framework/core_refs';
import { HOME_CONTENT_AREAS } from '../../../plugin_helpers/plugin_overview';
import { redirectToDashboards } from '../../getting_started/components/utils';
import { AddDashboardCallout } from './add_dashboard_callout';
import { AddDataSourceCallout } from './add_datasource_callout';
import { ObsDashboardStateManager } from './obs_dashboard_state_manager';
import { SavedObjectsClientCommonFindArgs } from '../../../../../../src/plugins/data/common';
import { getWorkspaceIdFromUrl } from '../../../../../../src/core/public/utils';
import { setObservabilityDashboardsId } from './utils';

const getDatasourceAttributes = async () => {
const findOptions: SavedObjectsClientCommonFindArgs = {
type: 'data-source',
perPage: 1000,
};

const allDataSources = await coreRefs?.savedObjectsClient?.find(findOptions);
return allDataSources?.savedObjects ?? [];
};

export function DashboardControls() {
const [isDataSourceEmpty, setIsDataSourceEmpty] = useState<boolean | null>(null);
const [isInWorkspace, setIsInWorkspace] = useState<boolean>(false); // Track if user is in a workspace
const isDashboardSelected = useObservable(ObsDashboardStateManager.isDashboardSelected$);
const dashboardState = useObservable(ObsDashboardStateManager.dashboardState$);

useEffect(() => {
const checkDataSource = async () => {
TackAdam marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Collaborator

@mengweieric mengweieric Nov 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

We should move this function definition out of the useEffect to make it cleaner

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Done

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

if (workspaceId) {
setIsInWorkspace(true);
const savedObjectsArray = await getDatasourceAttributes();
setIsDataSourceEmpty(savedObjectsArray.length === 0);

// Set to null if there are no data sources associated [Handle if dashboard was set, then datasource deleted]
if (savedObjectsArray.length === 0) {
await setObservabilityDashboardsId(null);
Copy link
Member

@ps48 ps48 Nov 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

For the refresh problem, I looked into the CMS implementation. It looks like this is an issue from the CMS plugin where the registration is only happening in plugin setup:

dashboards-observability/public/plugin.tsx

Line 192 in 6a43f53

setOverviewPage(page);
May be we can add a call-back for this function. This callback can be called to run setupOverviewPage

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Screenshot 2024-11-11 at 10 46 31 AM Wasn't able to use a callback as the registration exist. Found a work around calling

getOverviewPage().removeSection(SECTIONS.DASHBOARD);

to remove the section getting it to re-render correctly.

}
} else {
setIsInWorkspace(false);
setIsDataSourceEmpty(false); // Not in workspace
}
};
checkDataSource();
}, []);

const onTimeChange = (onTimeChangeProps: OnTimeChangeProps) => {
ObsDashboardStateManager.dashboardState$.next({
...dashboardState!,
Expand All @@ -47,6 +85,11 @@ export function DashboardControls() {
});
};

// Directly show AddDataSourceCallout if in workspace and no data source is associated
if (isInWorkspace && isDataSourceEmpty) {
return <AddDataSourceCallout />;
}

return isDashboardSelected ? (
<EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
Expand Down
Loading