[forwardport main] Fix minor issues for Direct Query Datasource (#7419)…

… (#7461) (#7490) * [2.16] Fix minor issues for Direct Query Datasource (#7419) * Switch the tab orders * Add delete with MDS support * Add acc creation action in data connection table * Fix snapshots * mute the table row for integration action when feature flag is disabled and no obs installed * add integration flyout in dataconnection table * Add discover forwarding action in connections table * Disable query in observability logs in data connections table action menu * Update the test of connection table * Update the test of home panel * Fix the then for checking observability dashboards * Fix delete * fix check plugin * fix check plugin 2 * fix check plugin 3 test --------- * Fix integration version * Fix access control tab fetching for remote cluster (#7456) * Fix snapshots --------- (cherry picked from commit 6db84ea) Signed-off-by: Ryan Liang <jiallian@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Lu Yu <nluyu@amazon.com> Co-authored-by: Ashwin P Chandran <ashwinpc@amazon.com>
opensearch-project · Jul 25, 2024 · 60c512f · 60c512f
1 parent 0515fb2
commit 60c512f
Show file tree

Hide file tree

Showing 11 changed files with 726 additions and 1,052 deletions.
diff --git a/...blic/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap b/...blic/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap
diff --git a/...ource_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx b/...ource_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx
@@ -67,23 +67,23 @@ describe('DataSourceHomePanel', () => {
 
  test('renders DataSourceTableWithRouter when manageOpensearchDataSources tab is selected', () => {
  const wrapper = mountComponent();
- wrapper.find(EuiTab).at(1).simulate('click');
+ wrapper.find(EuiTab).at(0).simulate('click');
  expect(wrapper.find(DataSourceTableWithRouter)).toHaveLength(1);
  expect(wrapper.find(ManageDirectQueryDataConnectionsTable)).toHaveLength(0);
  });
 
  test('renders ManageDirectQueryDataConnectionsTable when manageDirectQueryDataSources tab is selected', () => {
  const wrapper = mountComponent();
- wrapper.find(EuiTab).at(0).simulate('click');
+ wrapper.find(EuiTab).at(1).simulate('click');
  expect(wrapper.find(ManageDirectQueryDataConnectionsTable)).toHaveLength(1);
  expect(wrapper.find(DataSourceTableWithRouter)).toHaveLength(0);
  });
 
  test('handles tab changes', () => {
  const wrapper = mountComponent();
- expect(wrapper.find(ManageDirectQueryDataConnectionsTable)).toHaveLength(1);
- wrapper.find(EuiTab).at(1).simulate('click');
  expect(wrapper.find(DataSourceTableWithRouter)).toHaveLength(1);
+ wrapper.find(EuiTab).at(1).simulate('click');
+ expect(wrapper.find(ManageDirectQueryDataConnectionsTable)).toHaveLength(1);
  });
 
  test('does not render OpenSearch connections tab when featureFlagStatus is false', () => {

diff --git a/...ata_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx b/...ata_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx
@@ -39,7 +39,10 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
  application,
  } = useOpenSearchDashboards<DataSourceManagementContext>().services;
 
- const [selectedTabId, setSelectedTabId] = useState('manageDirectQueryDataSources');
+ const defaultTabId = featureFlagStatus
+ ? 'manageOpensearchDataSources'
+ : 'manageDirectQueryDataSources';
+ const [selectedTabId, setSelectedTabId] = useState(defaultTabId);
  const canManageDataSource = !!application.capabilities?.dataSource?.canManage;
 
  useEffect(() => {
@@ -51,10 +54,6 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
  };
 
  const tabs = [
- {
- id: 'manageDirectQueryDataSources',
- name: 'Direct query connections',
- },
  ...(featureFlagStatus
  ? [
  {
@@ -63,6 +62,10 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
  },
  ]
  : []),
+ {
+ id: 'manageDirectQueryDataSources',
+ name: 'Direct query connections',
+ },
  ];
 
  const renderTabs = () => {
@@ -110,6 +113,7 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
  savedObjects={savedObjects}
  uiSettings={uiSettings}
  featureFlagStatus={featureFlagStatus}
+ application={application}
  />
  )}
  </EuiFlexItem>

diff --git a/.../components/direct_query_data_sources_components/connection_detail/access_control_tab.tsx b/.../components/direct_query_data_sources_components/connection_detail/access_control_tab.tsx
@@ -25,6 +25,7 @@ interface AccessControlTabProps {
  connector: string;
  properties: unknown;
  allowedRoles: string[];
+ dataSourceMDSId: string;
 }
 
 export const AccessControlTab = (props: AccessControlTabProps) => {
@@ -34,17 +35,17 @@ export const AccessControlTab = (props: AccessControlTabProps) => {
  const { http } = useOpenSearchDashboards<DataSourceManagementContext>().services;
 
  useEffect(() => {
- http!
- .get(SECURITY_ROLES)
- .then((data) =>
+ http
+ .get(SECURITY_ROLES, { query: { dataSourceId: props.dataSourceMDSId } })
+ .then((data) => {
  setRoles(
  Object.keys(data.data).map((key) => {
  return { label: key };
  })
- )
- )
+ );
+ })
  .catch((err) => setHasSecurityAccess(false));
- }, [http]);
+ }, [http, props.dataSourceMDSId]);
 
  const [selectedQueryPermissionRoles, setSelectedQueryPermissionRoles] = useState<Role[]>(
  props.allowedRoles.map((role) => {

diff --git a/...t_query_data_sources_components/connection_detail/direct_query_connection_detail.test.tsx b/...t_query_data_sources_components/connection_detail/direct_query_connection_detail.test.tsx
@@ -9,6 +9,7 @@ import '@testing-library/jest-dom';
 import { MemoryRouter, Route } from 'react-router-dom';
 import { DirectQueryDataConnectionDetail } from './direct_query_connection_detail';
 import { ApplicationStart, HttpStart, NotificationsStart } from 'opensearch-dashboards/public';
+import { isPluginInstalled } from '../../utils';
 
 jest.mock('../../../constants', () => ({
  DATACONNECTIONS_BASE: '/api/dataconnections',
@@ -61,19 +62,9 @@ jest.mock('../associated_object_management/utils/associated_objects_tab_utils',
  redirectToExplorerS3: jest.fn(),
 }));
 
-beforeAll(() => {
- global.fetch = jest.fn(() =>
- Promise.resolve({
- json: () =>
- Promise.resolve({ status: { statuses: [{ id: 'plugin:observabilityDashboards' }] } }),
- })
- ) as jest.Mock;
-});
-
-afterAll(() => {
- global.fetch.mockClear();
- delete global.fetch;
-});
+jest.mock('../../utils', () => ({
+ isPluginInstalled: jest.fn(),
+}));
 
 const renderComponent = ({
  featureFlagStatus = false,
@@ -98,6 +89,11 @@ const renderComponent = ({
 };
 
 describe('DirectQueryDataConnectionDetail', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ (isPluginInstalled as jest.Mock).mockResolvedValue(true);
+ });
+
  test('renders without crashing', async () => {
  const mockHttp = {
  get: jest.fn().mockResolvedValue({

diff --git a/...direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx b/...direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx
@@ -53,6 +53,7 @@ import {
  IntegrationInstancesSearchResult,
 } from '../../../../framework/types';
 import { INTEGRATIONS_BASE } from '../../../../framework/utils/shared';
+import { isPluginInstalled } from '../../utils';
 
 interface DirectQueryDataConnectionDetailProps {
  featureFlagStatus: boolean;
@@ -70,41 +71,6 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
  setBreadcrumbs,
 }) => {
  const [observabilityDashboardsExists, setObservabilityDashboardsExists] = useState(false);
- const checkIfSQLWorkbenchPluginIsInstalled = () => {
- fetch('/api/status', {
- headers: {
- 'Content-Type': 'application/json',
- 'osd-xsrf': 'true',
- 'accept-language': 'en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7,zh-TW;q=0.6',
- pragma: 'no-cache',
- 'sec-fetch-dest': 'empty',
- 'sec-fetch-mode': 'cors',
- 'sec-fetch-site': 'same-origin',
- },
- method: 'GET',
- referrerPolicy: 'strict-origin-when-cross-origin',
- mode: 'cors',
- credentials: 'include',
- })
- .then(function (response) {
- return response.json();
- })
- .then((data) => {
- for (let i = 0; i < data.status.statuses.length; ++i) {
- if (data.status.statuses[i].id.includes('plugin:observabilityDashboards')) {
- setObservabilityDashboardsExists(true);
- }
- }
- })
- .catch((error) => {
- notifications.toasts.addDanger(
- 'Error checking Dashboards Observability Plugin Installation status.'
- );
- // eslint-disable-next-line no-console
- console.error(error);
- });
- };
-
  const { dataSourceName } = useParams<{ dataSourceName: string }>();
  const { search } = useLocation();
  const queryParams = new URLSearchParams(search);
@@ -211,7 +177,9 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
  };
 
  useEffect(() => {
- checkIfSQLWorkbenchPluginIsInstalled();
+ isPluginInstalled('plugin:observabilityDashboards', notifications, http).then(
+ setObservabilityDashboardsExists
+ );
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
@@ -397,6 +365,7 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
  properties={datasourceDetails.properties}
  allowedRoles={datasourceDetails.allowedRoles}
  key={JSON.stringify(datasourceDetails.allowedRoles)}
+ dataSourceMDSId={featureFlagStatus ? dataSourceMDSId ?? '' : ''}
  />
  ),
  },