Add multi datasource support for the tenant and audit log tabs (opens…

…earch-project#1861) * Add multi datasource support for the tenanct and audit log tabs Signed-off-by: Derek Ho <[email protected]> * Add integraiton tests for audit log with and without multi datasource Signed-off-by: Derek Ho <[email protected]> * Add cypress test support for tenancy and audit log Signed-off-by: Derek Ho <[email protected]> * Add toast support and assert existance of page element to make test unflaky Signed-off-by: Derek Ho <[email protected]> --------- Signed-off-by: Derek Ho <[email protected]>
derek-ho · Apr 2, 2024 · 0a0af00 · 0a0af00
1 parent be3e939
commit 0a0af00
Show file tree

Hide file tree

Showing 13 changed files with 305 additions and 43 deletions.
diff --git a/public/apps/configuration/app-router.tsx b/public/apps/configuration/app-router.tsx
@@ -149,15 +149,13 @@ export interface DataSourceContextType {
   setDataSource: React.Dispatch<React.SetStateAction<DataSourceOption>>;
 }
 
+export const LocalCluster = { label: 'Local cluster', id: '' };
+
 export const DataSourceContext = createContext<DataSourceContextType | null>(null);
 
 export function AppRouter(props: AppDependencies) {
   const setGlobalBreadcrumbs = flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs);
-  const [dataSource, setDataSource] = useState<DataSourceOption>({
-    id: '',
-    label: 'Local cluster',
-    checked: 'on',
-  });
+  const [dataSource, setDataSource] = useState<DataSourceOption>(LocalCluster);
 
   return (
     <DataSourceContext.Provider value={{ dataSource, setDataSource }}>

diff --git a/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx b/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
@@ -13,7 +13,7 @@
  *   permissions and limitations under the License.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import {
   EuiButton,
   EuiFlexGroup,
@@ -35,15 +35,20 @@ import { ResourceType } from '../../../../../common';
 import { getAuditLogging, updateAuditLogging } from '../../utils/audit-logging-utils';
 import { useToastState } from '../../utils/toast-utils';
 import { setCrossPageToast } from '../../utils/storage-utils';
+import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { DataSourceContext } from '../../app-router';
+import { createDataSourceQuery, getClusterInfoIfEnabled } from '../../../../utils/datasource-utils';
 
 interface AuditLoggingEditSettingProps extends AppDependencies {
   setting: 'general' | 'compliance';
 }
 
 export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
+  const dataSourceEnabled = !!props.depsStart.dataSource?.dataSourceEnabled;
   const [editConfig, setEditConfig] = React.useState<AuditLoggingSettings>({});
   const [toasts, addToast, removeToast] = useToastState();
   const [invalidSettings, setInvalidSettings] = React.useState<string[]>([]);
+  const { dataSource, setDataSource } = useContext(DataSourceContext)!;
 
   const handleChange = (path: string, val: boolean | string[] | SettingMapItem) => {
     setEditConfig((previousEditedConfig) => {
@@ -63,15 +68,18 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
   React.useEffect(() => {
     const fetchConfig = async () => {
       try {
-        const fetchedConfig = await getAuditLogging(props.coreStart.http);
+        const fetchedConfig = await getAuditLogging(
+          props.coreStart.http,
+          createDataSourceQuery(dataSource.id)
+        );
         setEditConfig(fetchedConfig);
       } catch (e) {
         console.log(e);
       }
     };
 
     fetchConfig();
-  }, [props.coreStart.http]);
+  }, [props.coreStart.http, dataSource.id]);
 
   const renderSaveAndCancel = () => {
     return (
@@ -106,7 +114,11 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
 
   const saveConfig = async (configToUpdate: AuditLoggingSettings) => {
     try {
-      await updateAuditLogging(props.coreStart.http, configToUpdate);
+      await updateAuditLogging(
+        props.coreStart.http,
+        configToUpdate,
+        createDataSourceQuery(dataSource.id)
+      );
 
       const addSuccessToast = (text: string) => {
         const successToast: Toast = {
@@ -121,9 +133,13 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
       };
 
       if (props.setting === 'general') {
-        addSuccessToast('General settings saved');
+        addSuccessToast(
+          `General settings saved ${getClusterInfoIfEnabled(dataSourceEnabled, dataSource)}`
+        );
       } else {
-        addSuccessToast('Compliance settings saved');
+        addSuccessToast(
+          `Compliance settings saved ${getClusterInfoIfEnabled(dataSourceEnabled, dataSource)}`
+        );
       }
 
       window.location.href = buildHashUrl(ResourceType.auditLogging);
@@ -132,7 +148,11 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
         id: 'update-result',
         color: 'danger',
         iconType: 'alert',
-        title: 'Failed to update audit configuration due to ' + e?.message,
+        title:
+          `Failed to update audit configuration ${getClusterInfoIfEnabled(
+            dataSourceEnabled,
+            dataSource
+          )} due to ` + e?.message,
       };
 
       addToast(failureToast);
@@ -237,5 +257,15 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
     content = renderComplianceSetting();
   }
 
-  return <div className="panel-restrict-width">{content}</div>;
+  return (
+    <div className="panel-restrict-width">
+      <SecurityPluginTopNavMenu
+        {...props}
+        dataSourcePickerReadOnly={true}
+        setDataSource={setDataSource}
+        selectedDataSource={dataSource}
+      />
+      {content}
+    </div>
+  );
 }
diff --git a/public/apps/configuration/panels/audit-logging/audit-logging.tsx b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
@@ -28,7 +28,7 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import React from 'react';
+import React, { useContext } from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
 import { AppDependencies } from '../../../types';
 import { ResourceType } from '../../../../../common';
@@ -43,6 +43,9 @@ import {
 import { AuditLoggingSettings } from './types';
 import { ViewSettingGroup } from './view-setting-group';
 import { DocLinks } from '../../constants';
+import { DataSourceContext } from '../../app-router';
+import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { createDataSourceQuery } from '../../../../utils/datasource-utils';
 
 interface AuditLoggingProps extends AppDependencies {
   fromType: string;
@@ -134,13 +137,18 @@ export function renderComplianceSettings(config: AuditLoggingSettings) {
 
 export function AuditLogging(props: AuditLoggingProps) {
   const [configuration, setConfiguration] = React.useState<AuditLoggingSettings>({});
+  const { dataSource, setDataSource } = useContext(DataSourceContext)!;
 
   const onSwitchChange = async () => {
     try {
       const updatedConfiguration = { ...configuration };
       updatedConfiguration.enabled = !updatedConfiguration.enabled;
 
-      await updateAuditLogging(props.coreStart.http, updatedConfiguration);
+      await updateAuditLogging(
+        props.coreStart.http,
+        updatedConfiguration,
+        createDataSourceQuery(dataSource.id)
+      );
 
       setConfiguration(updatedConfiguration);
     } catch (e) {
@@ -151,7 +159,10 @@ export function AuditLogging(props: AuditLoggingProps) {
   React.useEffect(() => {
     const fetchData = async () => {
       try {
-        const auditLogging = await getAuditLogging(props.coreStart.http);
+        const auditLogging = await getAuditLogging(
+          props.coreStart.http,
+          createDataSourceQuery(dataSource.id)
+        );
         setConfiguration(auditLogging);
       } catch (e) {
         // TODO: switch to better error handling.
@@ -160,7 +171,7 @@ export function AuditLogging(props: AuditLoggingProps) {
     };
 
     fetchData();
-  }, [props.coreStart.http, props.fromType]);
+  }, [props.coreStart.http, props.fromType, dataSource.id]);
 
   const statusPanel = renderStatusPanel(onSwitchChange, configuration.enabled || false);
 
@@ -174,7 +185,7 @@ export function AuditLogging(props: AuditLoggingProps) {
         {statusPanel}
         <EuiSpacer />
 
-        <EuiPanel>
+        <EuiPanel data-test-subj="general-settings">
           <EuiFlexGroup>
             <EuiFlexItem>
               <EuiTitle>
@@ -226,5 +237,15 @@ export function AuditLogging(props: AuditLoggingProps) {
     );
   }
 
-  return <div className="panel-restrict-width">{content}</div>;
+  return (
+    <div className="panel-restrict-width">
+      <SecurityPluginTopNavMenu
+        {...props}
+        dataSourcePickerReadOnly={false}
+        setDataSource={setDataSource}
+        selectedDataSource={dataSource}
+      />
+      {content}
+    </div>
+  );
 }
diff --git a/...ic/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap b/...ic/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
@@ -241,6 +241,21 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
 <div
   className="panel-restrict-width"
 >
+  <SecurityPluginTopNavMenu
+    coreStart={
+      Object {
+        "http": 1,
+      }
+    }
+    dataSourcePickerReadOnly={false}
+    navigation={Object {}}
+    selectedDataSource={
+      Object {
+        "id": "test",
+      }
+    }
+    setDataSource={[MockFunction]}
+  />
   <EuiPanel>
     <EuiTitle>
       <h3>
@@ -321,7 +336,9 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
     </EuiForm>
   </EuiPanel>
   <EuiSpacer />
-  <EuiPanel>
+  <EuiPanel
+    data-test-subj="general-settings"
+  >
     <EuiFlexGroup>
       <EuiFlexItem>
         <EuiTitle>

diff --git a/public/apps/configuration/panels/audit-logging/test/audit-logging-edit-settings.test.tsx b/public/apps/configuration/panels/audit-logging/test/audit-logging-edit-settings.test.tsx
@@ -21,6 +21,10 @@ import { buildHashUrl } from '../../../utils/url-builder';
 import { ResourceType } from '../../../../../../common';
 
 jest.mock('../../../utils/audit-logging-utils');
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: jest.fn().mockReturnValue({ dataSource: { id: 'test' }, setDataSource: jest.fn() }), // Mock the useContext hook to return dummy datasource and setdatasource function
+}));
 
 // eslint-disable-next-line
 const mockAuditLoggingUtils = require('../../../utils/audit-logging-utils');
@@ -53,7 +57,7 @@ describe('Audit logs edit', () => {
     shallow(
       <AuditLoggingEditSettings
         coreStart={mockCoreStart as any}
-        navigation={{} as any}
+        depsStart={{}}
         setting="general"
         params={{} as any}
         config={{} as any}
@@ -89,7 +93,7 @@ describe('Audit logs edit', () => {
     shallow(
       <AuditLoggingEditSettings
         coreStart={mockCoreStart as any}
-        navigation={{} as any}
+        depsStart={{}}
         setting="compliance"
         params={{} as any}
         config={{} as any}
@@ -112,7 +116,7 @@ describe('Audit logs edit', () => {
     shallow(
       <AuditLoggingEditSettings
         coreStart={mockCoreStart as any}
-        navigation={{} as any}
+        depsStart={{}}
         setting="compliance"
         params={{} as any}
         config={{} as any}
@@ -129,7 +133,7 @@ describe('Audit logs edit', () => {
     const component = shallow(
       <AuditLoggingEditSettings
         coreStart={mockCoreStart as any}
-        navigation={{} as any}
+        depsStart={{}}
         setting="compliance"
         params={{} as any}
         config={{} as any}
@@ -143,7 +147,7 @@ describe('Audit logs edit', () => {
     const component = shallow(
       <AuditLoggingEditSettings
         coreStart={mockCoreStart as any}
-        navigation={{} as any}
+        depsStart={{}}
         setting="compliance"
         params={{} as any}
         config={{} as any}
@@ -158,7 +162,7 @@ describe('Audit logs edit', () => {
     const component = shallow(
       <AuditLoggingEditSettings
         coreStart={mockCoreStart as any}
-        navigation={{} as any}
+        depsStart={{}}
         setting="general"
         params={{} as any}
         config={{} as any}

diff --git a/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx b/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx
@@ -25,6 +25,10 @@ import {
 } from '../constants';
 
 jest.mock('../../../utils/audit-logging-utils');
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: jest.fn().mockReturnValue({ dataSource: { id: 'test' }, setDataSource: jest.fn() }), // Mock the useContext hook to return dummy datasource and setdatasource function
+}));
 
 // eslint-disable-next-line
 const mockAuditLoggingUtils = require('../../../utils/audit-logging-utils');

diff --git a/public/apps/configuration/panels/tenant-list/tenant-list.tsx b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
@@ -23,7 +23,7 @@ import {
   EuiButton,
 } from '@elastic/eui';
 import { Route } from 'react-router-dom';
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useContext } from 'react';
 import { ManageTab } from './manage_tab';
 import { ConfigureTab1 } from './configure_tab1';
 import { AppDependencies } from '../../../types';
@@ -32,6 +32,8 @@ import { displayBoolean } from '../../utils/display-utils';
 import { DocLinks } from '../../constants';
 import { getDashboardsInfo } from '../../../../utils/dashboards-info-utils';
 import { TenantInstructionView } from './tenant-instruction-view';
+import { DataSourceContext, LocalCluster } from '../../app-router';
+import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 
 interface TenantListProps extends AppDependencies {
   tabID: string;
@@ -134,6 +136,12 @@ export function TenantList(props: TenantListProps) {
 
   return (
     <>
+      <SecurityPluginTopNavMenu
+        {...props}
+        dataSourcePickerReadOnly={true}
+        setDataSource={() => {}}
+        selectedDataSource={LocalCluster}
+      />
       <EuiPageHeader>
         <EuiTitle size="l">
           <h1>Multi-tenancy</h1>

diff --git a/public/apps/configuration/test/__snapshots__/app-router.test.tsx.snap b/public/apps/configuration/test/__snapshots__/app-router.test.tsx.snap
@@ -5,7 +5,6 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
   value={
     Object {
       "dataSource": Object {
-        "checked": "on",
         "id": "",
         "label": "Local cluster",
       },

diff --git a/public/apps/configuration/utils/audit-logging-utils.tsx b/public/apps/configuration/utils/audit-logging-utils.tsx
@@ -13,16 +13,23 @@
  *   permissions and limitations under the License.
  */
 
-import { HttpStart } from 'opensearch-dashboards/public';
+import { HttpFetchQuery, HttpStart } from 'opensearch-dashboards/public';
 import { AuditLoggingSettings } from '../panels/audit-logging/types';
 import { API_ENDPOINT_AUDITLOGGING, API_ENDPOINT_AUDITLOGGING_UPDATE } from '../constants';
 import { httpGet, httpPost } from './request-utils';
 
-export async function updateAuditLogging(http: HttpStart, updateObject: AuditLoggingSettings) {
-  return await httpPost({ http, url: API_ENDPOINT_AUDITLOGGING_UPDATE, body: updateObject });
+export async function updateAuditLogging(
+  http: HttpStart,
+  updateObject: AuditLoggingSettings,
+  query: HttpFetchQuery
+) {
+  return await httpPost({ http, url: API_ENDPOINT_AUDITLOGGING_UPDATE, body: updateObject, query });
 }
 
-export async function getAuditLogging(http: HttpStart): Promise<AuditLoggingSettings> {
-  const rawConfiguration = await httpGet<any>({ http, url: API_ENDPOINT_AUDITLOGGING });
+export async function getAuditLogging(
+  http: HttpStart,
+  query: HttpFetchQuery
+): Promise<AuditLoggingSettings> {
+  const rawConfiguration = await httpGet<any>({ http, url: API_ENDPOINT_AUDITLOGGING, query });
   return rawConfiguration?.config;
 }