address comment

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx

@@ -22,6 +22,7 @@ import { DataSourceBaseState, DataSourceOption } from '../data_source_menu/types
 import {
   getDataSourceById,
   handleDataSourceFetchError,
+  handleDataSourceViewError,
   handleNoAvailableDataSourceError,
 } from '../utils';
 import { DataSourceDropDownHeader } from '../drop_down_header';
@@ -118,10 +119,12 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
         if (defaultDataSource) {
           this.setState({ defaultDataSource });
         }
-        handleDataSourceFetchError(
+        handleDataSourceViewError(
           this.onError.bind(this),
           this.props.notifications!,
-          this.props.onSelectedDataSources
+          this.state.selectedOption[0].id,
+          this.state.defaultDataSource,
+          () => this.handleSwitchDefaultDatasource()
         );
       }
     } else if (this.props.onSelectedDataSources) {

src/plugins/data_source_management/public/components/data_source_view/data_source_view_error.tsx

@@ -18,6 +18,7 @@ import {
 } from '@elastic/eui';
 import { ErrorIcon } from '../custom_database_icon';
 import { DataSourceDropDownHeader } from '../drop_down_header';
+import { switchDefaultButton } from '../toast_button/switch_default_button';
 
 interface DataSourceViewErrorProps {
   application?: ApplicationStart;

src/plugins/data_source_management/public/components/toast_button/switch_default_button.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButton } from '@elastic/eui';
+import React from 'react';
+import { i18n } from '@osd/i18n';
+
+export const switchDefaultButton = (handleSwitchDefaultDatasource: () => Promise<void>) => {
+  return (
+    <EuiButton
+      data-test-subj="dataSourceViewErrorSwitchButton"
+      fill={false}
+      size="s"
+      onClick={handleSwitchDefaultDatasource}
+    >
+      {i18n.translate('dataSourcesManagement.dataSourceViewError.switchToDefaultDataSource', {
+        defaultMessage: 'Switch to default data source',
+      })}
+    </EuiButton>
+  );
+};

src/plugins/data_source_management/public/components/utils.ts

@@ -25,6 +25,7 @@ import { DataSourceGroupLabelOption } from './data_source_menu/types';
 import { createGetterSetter } from '../../../opensearch_dashboards_utils/public';
 import { toMountPoint } from '../../../opensearch_dashboards_react/public';
 import { getManageDataSourceButton, getReloadButton } from './toast_button';
+import { switchDefaultButton } from './toast_button/switch_default_button';
 
 export async function getDataSources(savedObjectsClient: SavedObjectsClientContract) {
   return savedObjectsClient
@@ -303,6 +304,23 @@ export const handleDataSourceFetchError = (
   });
 };
 
+export const handleDataSourceViewError = (
+  changeState: (state: { showError: boolean }) => void,
+  notifications: ToastsStart,
+  failedDataSourceId: string,
+  defaultDataSource: string | null,
+  callback?: () => Promise<void>
+) => {
+  changeState({ showError: true });
+  notifications.add({
+    title: i18n.translate('dataSource.dataSourceUnavailableError', {
+      defaultMessage: `Data source ${failedDataSourceId} is not available `,
+    }),
+    text: defaultDataSource && callback ? toMountPoint(switchDefaultButton(callback)) : '',
+    color: 'danger',
+  });
+};
+
 interface DataSourceOptionGroupLabel {
   [key: string]: DataSourceGroupLabelOption;
 }