diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap
index 5edfd5620769..8f8ea1a0f55d 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap
@@ -1,5 +1,66 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DataSourceMenu can render data source view when only pass id in the activeOption 1`] = `
+<DataSourceView
+  fullWidth={true}
+  notifications={
+    Object {
+      "add": [MockFunction],
+      "addDanger": [MockFunction],
+      "addError": [MockFunction],
+      "addInfo": [MockFunction],
+      "addSuccess": [MockFunction],
+      "addWarning": [MockFunction],
+      "get$": [MockFunction],
+      "remove": [MockFunction],
+    }
+  }
+  savedObjectsClient={
+    Object {
+      "find": [MockFunction],
+    }
+  }
+  selectedOption={
+    Array [
+      Object {
+        "id": "test",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`DataSourceMenu can render data source view when provide activeOption 1`] = `
+<DataSourceView
+  fullWidth={true}
+  notifications={
+    Object {
+      "add": [MockFunction],
+      "addDanger": [MockFunction],
+      "addError": [MockFunction],
+      "addInfo": [MockFunction],
+      "addSuccess": [MockFunction],
+      "addWarning": [MockFunction],
+      "get$": [MockFunction],
+      "remove": [MockFunction],
+    }
+  }
+  savedObjectsClient={
+    Object {
+      "find": [MockFunction],
+    }
+  }
+  selectedOption={
+    Array [
+      Object {
+        "id": "test",
+        "label": "test-label",
+      },
+    ]
+  }
+/>
+`;
+
 exports[`DataSourceMenu should render data source aggregated view 1`] = `
 Object {
   "asFragment": [Function],
@@ -344,9 +405,44 @@ exports[`DataSourceMenu should render data source selectable only with local clu
 />
 `;
 
+exports[`DataSourceMenu should render data source view if not pass saved object or notification 1`] = `
+<DataSourceView
+  fullWidth={true}
+  notifications={
+    Object {
+      "add": [MockFunction],
+      "addDanger": [MockFunction],
+      "addError": [MockFunction],
+      "addInfo": [MockFunction],
+      "addSuccess": [MockFunction],
+      "addWarning": [MockFunction],
+      "get$": [MockFunction],
+      "remove": [MockFunction],
+    }
+  }
+/>
+`;
+
 exports[`DataSourceMenu should render data source view only 1`] = `
 <DataSourceView
   fullWidth={true}
+  notifications={
+    Object {
+      "add": [MockFunction],
+      "addDanger": [MockFunction],
+      "addError": [MockFunction],
+      "addInfo": [MockFunction],
+      "addSuccess": [MockFunction],
+      "addWarning": [MockFunction],
+      "get$": [MockFunction],
+      "remove": [MockFunction],
+    }
+  }
+  savedObjectsClient={
+    Object {
+      "find": [MockFunction],
+    }
+  }
 />
 `;
 
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx
index 538d579c4b6b..e7df411a9e8a 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx
@@ -59,7 +59,58 @@ describe('DataSourceMenu', () => {
     component = shallow(
       <DataSourceMenu
         componentType={DataSourceComponentType.DataSourceView}
-        componentConfig={{ fullWidth: true, hideLocalCluster: true }}
+        componentConfig={{
+          fullWidth: true,
+          hideLocalCluster: true,
+          savedObjects: client,
+          notifications,
+        }}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render data source view if not pass saved object or notification', () => {
+    component = shallow(
+      <DataSourceMenu
+        componentType={DataSourceComponentType.DataSourceView}
+        componentConfig={{
+          fullWidth: true,
+          hideLocalCluster: true,
+          notifications,
+        }}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('can render data source view when provide activeOption', () => {
+    component = shallow(
+      <DataSourceMenu
+        componentType={DataSourceComponentType.DataSourceView}
+        componentConfig={{
+          fullWidth: true,
+          hideLocalCluster: true,
+          savedObjects: client,
+          notifications,
+          activeOption: [{ id: 'test', label: 'test-label' }],
+        }}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('can render data source view when only pass id in the activeOption', () => {
+    component = shallow(
+      <DataSourceMenu
+        componentType={DataSourceComponentType.DataSourceView}
+        componentConfig={{
+          fullWidth: true,
+          hideLocalCluster: true,
+          savedObjects: client,
+          notifications,
+          activeOption: [{ id: 'test' }],
+        }}
       />
     );
     expect(component).toMatchSnapshot();
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
index 70ca70fd5ce3..b56063e5d25f 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
@@ -22,11 +22,13 @@ export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement |
   const { componentType, componentConfig } = props;
 
   function renderDataSourceView(config: DataSourceViewConfig): ReactElement | null {
-    const { activeOption, fullWidth } = config;
+    const { activeOption, fullWidth, savedObjects, notifications } = config;
     return (
       <DataSourceView
-        selectedOption={activeOption && activeOption.length > 0 ? activeOption : undefined}
         fullWidth={fullWidth}
+        selectedOption={activeOption}
+        savedObjectsClient={savedObjects}
+        notifications={notifications?.toasts}
       />
     );
   }
diff --git a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
index 29f64c4293e6..183ebc563501 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
@@ -1,5 +1,107 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DataSourceView should call getDataSourceById when only pass id no label 1`] = `
+<Fragment>
+  <EuiButtonEmpty
+    aria-label="dataSourceViewMenuButton"
+    className="euiHeaderLink"
+    data-test-subj="dataSourceViewContextMenuHeaderLink"
+    disabled={true}
+    iconSide="left"
+    iconType="database"
+    size="s"
+  />
+  <EuiPopover
+    anchorPosition="downLeft"
+    button={
+      <EuiButtonIcon
+        aria-label="Next"
+        display="empty"
+        iconType="iInCircle"
+        onClick={[Function]}
+      />
+    }
+    closePopover={[Function]}
+    display="inlineBlock"
+    hasArrow={true}
+    id="dataSourceViewContextMenuPopover"
+    isOpen={false}
+    ownFocus={true}
+    panelPaddingSize="none"
+  >
+    <EuiContextMenu
+      initialPanelId={0}
+      panels={
+        Array [
+          Object {
+            "id": 0,
+            "items": Array [
+              Object {
+                "disabled": true,
+                "name": undefined,
+              },
+            ],
+            "title": "Selected data source",
+          },
+        ]
+      }
+      size="m"
+    />
+  </EuiPopover>
+</Fragment>
+`;
+
+exports[`DataSourceView should call notification warning when there is data source fetch error 1`] = `
+<Fragment>
+  <EuiButtonEmpty
+    aria-label="dataSourceViewMenuButton"
+    className="euiHeaderLink"
+    data-test-subj="dataSourceViewContextMenuHeaderLink"
+    disabled={true}
+    iconSide="left"
+    iconType="database"
+    size="s"
+  />
+  <EuiPopover
+    anchorPosition="downLeft"
+    button={
+      <EuiButtonIcon
+        aria-label="Next"
+        display="empty"
+        iconType="iInCircle"
+        onClick={[Function]}
+      />
+    }
+    closePopover={[Function]}
+    display="inlineBlock"
+    hasArrow={true}
+    id="dataSourceViewContextMenuPopover"
+    isOpen={false}
+    ownFocus={true}
+    panelPaddingSize="none"
+  >
+    <EuiContextMenu
+      initialPanelId={0}
+      panels={
+        Array [
+          Object {
+            "id": 0,
+            "items": Array [
+              Object {
+                "disabled": true,
+                "name": undefined,
+              },
+            ],
+            "title": "Selected data source",
+          },
+        ]
+      }
+      size="m"
+    />
+  </EuiPopover>
+</Fragment>
+`;
+
 exports[`DataSourceView should render normally with local cluster not hidden 1`] = `
 <Fragment>
   <EuiButtonEmpty
@@ -52,3 +154,152 @@ exports[`DataSourceView should render normally with local cluster not hidden 1`]
   </EuiPopover>
 </Fragment>
 `;
+
+exports[`DataSourceView should show popover when click on button 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        aria-label="dataSourceViewMenuButton"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty-isDisabled euiHeaderLink"
+        data-test-subj="dataSourceViewContextMenuHeaderLink"
+        disabled=""
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButtonEmpty__content"
+        >
+          <span
+            class="euiButtonContent__icon"
+            color="inherit"
+            data-euiicon-type="database"
+          />
+          <span
+            class="euiButtonEmpty__text"
+          >
+            test1
+          </span>
+        </span>
+      </button>
+      <div
+        class="euiPopover euiPopover--anchorDownLeft"
+        id="dataSourceViewContextMenuPopover"
+      >
+        <div
+          class="euiPopover__anchor"
+        >
+          <button
+            aria-label="Next"
+            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="iInCircle"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      aria-label="dataSourceViewMenuButton"
+      class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty-isDisabled euiHeaderLink"
+      data-test-subj="dataSourceViewContextMenuHeaderLink"
+      disabled=""
+      type="button"
+    >
+      <span
+        class="euiButtonContent euiButtonEmpty__content"
+      >
+        <span
+          class="euiButtonContent__icon"
+          color="inherit"
+          data-euiicon-type="database"
+        />
+        <span
+          class="euiButtonEmpty__text"
+        >
+          test1
+        </span>
+      </span>
+    </button>
+    <div
+      class="euiPopover euiPopover--anchorDownLeft"
+      id="dataSourceViewContextMenuPopover"
+    >
+      <div
+        class="euiPopover__anchor"
+      >
+        <button
+          aria-label="Next"
+          class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="iInCircle"
+          />
+        </button>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.test.tsx b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.test.tsx
index f7022a308a0a..a3cfd5223f66 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.test.tsx
@@ -6,14 +6,70 @@
 import { ShallowWrapper, shallow } from 'enzyme';
 import React from 'react';
 import { DataSourceView } from './data_source_view';
+import { SavedObjectsClientContract } from 'opensearch-dashboards/public';
+import { notificationServiceMock } from '../../../../../core/public/mocks';
+import {
+  getSingleDataSourceResponse,
+  mockErrorResponseForSavedObjectsCalls,
+  mockResponseForSavedObjectsCalls,
+} from '../../mocks';
+import { render } from '@testing-library/react';
 
 describe('DataSourceView', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+  let client: SavedObjectsClientContract;
+  const { toasts } = notificationServiceMock.createStartContract();
+
+  beforeEach(() => {
+    client = {
+      get: jest.fn().mockResolvedValue([]),
+    } as any;
+    mockResponseForSavedObjectsCalls(client, 'get', getSingleDataSourceResponse);
+  });
 
   it('should render normally with local cluster not hidden', () => {
     component = shallow(
       <DataSourceView fullWidth={false} selectedOption={[{ id: 'test1', label: 'test1' }]} />
     );
     expect(component).toMatchSnapshot();
+    expect(toasts.addWarning).toBeCalledTimes(0);
+  });
+  it('should show popover when click on button', async () => {
+    const container = render(
+      <DataSourceView fullWidth={false} selectedOption={[{ id: 'test1', label: 'test1' }]} />
+    );
+    const button = await container.findByTestId('dataSourceViewContextMenuHeaderLink');
+    button.click();
+    expect(container).toMatchSnapshot();
+  });
+  it('should call getDataSourceById when only pass id no label', async () => {
+    component = shallow(
+      <DataSourceView
+        fullWidth={false}
+        selectedOption={[{ id: 'test1' }]}
+        savedObjectsClient={client}
+        notifications={toasts}
+      />
+    );
+    expect(component).toMatchSnapshot();
+    expect(client.get).toBeCalledWith('data-source', 'test1');
+    expect(toasts.addWarning).toBeCalledTimes(0);
+  });
+  it('should call notification warning when there is data source fetch error', async () => {
+    jest.mock('../utils', () => ({
+      getDataSourceById: jest.fn(),
+    }));
+    component = shallow(
+      <DataSourceView
+        fullWidth={false}
+        selectedOption={[{ id: 'test1' }]}
+        savedObjectsClient={client}
+        notifications={toasts}
+      />
+    );
+    expect(component).toMatchSnapshot();
+    mockErrorResponseForSavedObjectsCalls(client, 'get');
+    expect(toasts.addWarning).toBeCalledTimes(1);
+    expect(toasts.addWarning).toBeCalledWith(`Data source with id test1 is not available`);
   });
 });
diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
index 23bb2e34feab..005d54e216c6 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
@@ -6,11 +6,16 @@
 import React from 'react';
 import { i18n } from '@osd/i18n';
 import { EuiPopover, EuiButtonEmpty, EuiButtonIcon, EuiContextMenu } from '@elastic/eui';
+import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
 import { DataSourceOption } from '../data_source_menu/types';
+import { getDataSourceById } from '../utils';
+import { MenuPanelItem } from '../../types';
 
 interface DataSourceViewProps {
   fullWidth: boolean;
-  selectedOption?: DataSourceOption[];
+  selectedOption: DataSourceOption[];
+  savedObjectsClient?: SavedObjectsClientContract;
+  notifications?: ToastsStart;
 }
 
 interface DataSourceViewState {
@@ -19,6 +24,8 @@ interface DataSourceViewState {
 }
 
 export class DataSourceView extends React.Component<DataSourceViewProps, DataSourceViewState> {
+  private _isMounted: boolean = false;
+
   constructor(props: DataSourceViewProps) {
     super(props);
 
@@ -28,6 +35,41 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
     };
   }
 
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+  async componentDidMount() {
+    this._isMounted = true;
+    const selectedOption = this.props.selectedOption;
+    // early return if not possible to fetch data source
+
+    const option = selectedOption[0];
+    const optionId = option.id;
+    if (!option.label) {
+      try {
+        const title = (await getDataSourceById(optionId, this.props.savedObjectsClient)).title;
+        if (!title) {
+          this.props.notifications.addWarning(
+            i18n.translate('dataSource.fetchDataSourceError', {
+              defaultMessage: `Data source with id ${optionId} is not available`,
+            })
+          );
+        } else {
+          if (!this._isMounted) return;
+          this.setState({
+            selectedOption: [{ id: optionId, label: title }],
+          });
+        }
+      } catch (error) {
+        this.props.notifications.addWarning(
+          i18n.translate('dataSource.fetchDataSourceError', {
+            defaultMessage: `Failed to fetch data source due to ${error}`,
+          })
+        );
+      }
+    }
+  }
+
   onClick() {
     this.setState({ ...this.state, isPopoverOpen: !this.state.isPopoverOpen });
   }
@@ -36,20 +78,10 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
     this.setState({ ...this.state, isPopoverOpen: false });
   }
 
-  render() {
-    const button = (
-      <EuiButtonIcon
-        iconType="iInCircle"
-        display="empty"
-        aria-label="Next"
-        onClick={this.onClick.bind(this)}
-      />
-    );
-
-    let items = [];
-
-    if (this.props.selectedOption) {
-      items = this.props.selectedOption.map((option) => {
+  getPanels() {
+    let items: MenuPanelItem[] = [];
+    if (this.state.selectedOption) {
+      items = this.state.selectedOption.map((option) => {
         return {
           name: option.label,
           disabled: true,
@@ -65,6 +97,20 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
       },
     ];
 
+    return { panels };
+  }
+
+  render() {
+    const { panels } = this.getPanels();
+
+    const button = (
+      <EuiButtonIcon
+        iconType="iInCircle"
+        display="empty"
+        aria-label="Next"
+        onClick={this.onClick.bind(this)}
+      />
+    );
     return (
       <>
         <EuiButtonEmpty
@@ -78,8 +124,8 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
           size="s"
           disabled={true}
         >
-          {this.props.selectedOption && this.props.selectedOption.length > 0
-            ? this.props.selectedOption[0].label
+          {this.state.selectedOption && this.state.selectedOption.length > 0
+            ? this.state.selectedOption[0].label
             : ''}
         </EuiButtonEmpty>
         <EuiPopover
diff --git a/src/plugins/data_source_management/public/types.ts b/src/plugins/data_source_management/public/types.ts
index e76b7b4d08a8..cdbc6aa50fb6 100644
--- a/src/plugins/data_source_management/public/types.ts
+++ b/src/plugins/data_source_management/public/types.ts
@@ -162,3 +162,8 @@ export interface SigV4Content extends SavedObjectAttributes {
   region: string;
   service?: SigV4ServiceName;
 }
+
+export interface MenuPanelItem {
+  name?: string;
+  disabled: boolean;
+}