diff --git a/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap
index 2c789f04da12..e4f4b1f67c67 100644
--- a/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap
@@ -1,7 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataSourceAggregatedView should render normally with data source filter 1`] = `
-<Fragment>
+<DataSourceAggregatedView
+  dataSourceFilter={[Function]}
+  displayAllCompatibleDataSources={true}
+  fullWidth={false}
+  hideLocalCluster={false}
+  notifications={
+    Object {
+      "add": [MockFunction],
+      "addDanger": [MockFunction],
+      "addError": [MockFunction],
+      "addInfo": [MockFunction],
+      "addSuccess": [MockFunction],
+      "addWarning": [MockFunction],
+      "get$": [MockFunction],
+      "remove": [MockFunction],
+    }
+  }
+  savedObjectsClient={
+    Object {
+      "find": [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "fields": Array [
+                "id",
+                "title",
+                "auth.type",
+              ],
+              "perPage": 10000,
+              "type": "data-source",
+            },
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": Promise {},
+          },
+        ],
+      },
+    }
+  }
+>
   <EuiButtonEmpty
     aria-label="dataSourceAggregatedViewMenuButton"
     className="euiHeaderLink"
@@ -11,12 +53,57 @@ exports[`DataSourceAggregatedView should render normally with data source filter
     iconType="database"
     size="s"
   >
-    Data sources
+    <button
+      aria-label="dataSourceAggregatedViewMenuButton"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty-isDisabled euiHeaderLink"
+      data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
+      disabled={true}
+      type="button"
+    >
+      <EuiButtonContent
+        className="euiButtonEmpty__content"
+        iconSide="left"
+        iconSize="m"
+        iconType="database"
+        textProps={
+          Object {
+            "className": "euiButtonEmpty__text",
+          }
+        }
+      >
+        <span
+          className="euiButtonContent euiButtonEmpty__content"
+        >
+          <EuiIcon
+            className="euiButtonContent__icon"
+            color="inherit"
+            size="m"
+            type="database"
+          >
+            <span
+              className="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="database"
+              size="m"
+            />
+          </EuiIcon>
+          <span
+            className="euiButtonEmpty__text"
+          >
+            Data sources
+          </span>
+        </span>
+      </EuiButtonContent>
+    </button>
   </EuiButtonEmpty>
   <EuiNotificationBadge
     color="subdued"
   >
-    All
+    <span
+      className="euiNotificationBadge euiNotificationBadge--subdued"
+    >
+      All
+    </span>
   </EuiNotificationBadge>
   <EuiPopover
     anchorPosition="downLeft"
@@ -37,25 +124,99 @@ exports[`DataSourceAggregatedView should render normally with data source filter
     ownFocus={true}
     panelPaddingSize="none"
   >
-    <EuiContextMenu
-      initialPanelId={0}
-      panels={
-        Array [
-          Object {
-            "id": 0,
-            "items": Array [],
-            "title": "Selected data sources",
-          },
-        ]
-      }
-      size="m"
-    />
+    <div
+      className="euiPopover euiPopover--anchorDownLeft"
+      id="dataSourceSViewContextMenuPopover"
+    >
+      <div
+        className="euiPopover__anchor"
+      >
+        <EuiButtonIcon
+          aria-label="show data sources"
+          data-test-subj="dataSourceAggregatedViewInfoButton"
+          display="empty"
+          iconType="iInCircle"
+          onClick={[Function]}
+        >
+          <button
+            aria-label="show data sources"
+            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+            data-test-subj="dataSourceAggregatedViewInfoButton"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <EuiIcon
+              aria-hidden="true"
+              className="euiButtonIcon__icon"
+              color="inherit"
+              size="m"
+              type="iInCircle"
+            >
+              <span
+                aria-hidden="true"
+                className="euiButtonIcon__icon"
+                color="inherit"
+                data-euiicon-type="iInCircle"
+                size="m"
+              />
+            </EuiIcon>
+          </button>
+        </EuiButtonIcon>
+      </div>
+    </div>
   </EuiPopover>
-</Fragment>
+</DataSourceAggregatedView>
 `;
 
 exports[`DataSourceAggregatedView should render normally with local cluster and actice selections 1`] = `
-<Fragment>
+<DataSourceAggregatedView
+  activeDataSourceIds={
+    Array [
+      "test1",
+    ]
+  }
+  displayAllCompatibleDataSources={false}
+  fullWidth={false}
+  hideLocalCluster={false}
+  notifications={
+    Object {
+      "add": [MockFunction],
+      "addDanger": [MockFunction],
+      "addError": [MockFunction],
+      "addInfo": [MockFunction],
+      "addSuccess": [MockFunction],
+      "addWarning": [MockFunction],
+      "get$": [MockFunction],
+      "remove": [MockFunction],
+    }
+  }
+  savedObjectsClient={
+    Object {
+      "find": [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "fields": Array [
+                "id",
+                "title",
+                "auth.type",
+              ],
+              "perPage": 10000,
+              "type": "data-source",
+            },
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": Promise {},
+          },
+        ],
+      },
+    }
+  }
+>
   <EuiButtonEmpty
     aria-label="dataSourceAggregatedViewMenuButton"
     className="euiHeaderLink"
@@ -65,12 +226,57 @@ exports[`DataSourceAggregatedView should render normally with local cluster and
     iconType="database"
     size="s"
   >
-    Data sources
+    <button
+      aria-label="dataSourceAggregatedViewMenuButton"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty-isDisabled euiHeaderLink"
+      data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
+      disabled={true}
+      type="button"
+    >
+      <EuiButtonContent
+        className="euiButtonEmpty__content"
+        iconSide="left"
+        iconSize="m"
+        iconType="database"
+        textProps={
+          Object {
+            "className": "euiButtonEmpty__text",
+          }
+        }
+      >
+        <span
+          className="euiButtonContent euiButtonEmpty__content"
+        >
+          <EuiIcon
+            className="euiButtonContent__icon"
+            color="inherit"
+            size="m"
+            type="database"
+          >
+            <span
+              className="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="database"
+              size="m"
+            />
+          </EuiIcon>
+          <span
+            className="euiButtonEmpty__text"
+          >
+            Data sources
+          </span>
+        </span>
+      </EuiButtonContent>
+    </button>
   </EuiButtonEmpty>
   <EuiNotificationBadge
     color="subdued"
   >
-    1
+    <span
+      className="euiNotificationBadge euiNotificationBadge--subdued"
+    >
+      1
+    </span>
   </EuiNotificationBadge>
   <EuiPopover
     anchorPosition="downLeft"
@@ -91,30 +297,95 @@ exports[`DataSourceAggregatedView should render normally with local cluster and
     ownFocus={true}
     panelPaddingSize="none"
   >
-    <EuiContextMenu
-      initialPanelId={0}
-      panels={
-        Array [
-          Object {
-            "id": 0,
-            "items": Array [
-              Object {
-                "disabled": true,
-                "name": undefined,
-              },
-            ],
-            "title": "Selected data sources",
-          },
-        ]
-      }
-      size="m"
-    />
+    <div
+      className="euiPopover euiPopover--anchorDownLeft"
+      id="dataSourceSViewContextMenuPopover"
+    >
+      <div
+        className="euiPopover__anchor"
+      >
+        <EuiButtonIcon
+          aria-label="show data sources"
+          data-test-subj="dataSourceAggregatedViewInfoButton"
+          display="empty"
+          iconType="iInCircle"
+          onClick={[Function]}
+        >
+          <button
+            aria-label="show data sources"
+            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+            data-test-subj="dataSourceAggregatedViewInfoButton"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <EuiIcon
+              aria-hidden="true"
+              className="euiButtonIcon__icon"
+              color="inherit"
+              size="m"
+              type="iInCircle"
+            >
+              <span
+                aria-hidden="true"
+                className="euiButtonIcon__icon"
+                color="inherit"
+                data-euiicon-type="iInCircle"
+                size="m"
+              />
+            </EuiIcon>
+          </button>
+        </EuiButtonIcon>
+      </div>
+    </div>
   </EuiPopover>
-</Fragment>
+</DataSourceAggregatedView>
 `;
 
 exports[`DataSourceAggregatedView should render normally with local cluster hidden and all options 1`] = `
-<Fragment>
+<DataSourceAggregatedView
+  activeDataSourceIds={Array []}
+  displayAllCompatibleDataSources={false}
+  fullWidth={false}
+  hideLocalCluster={true}
+  notifications={
+    Object {
+      "add": [MockFunction],
+      "addDanger": [MockFunction],
+      "addError": [MockFunction],
+      "addInfo": [MockFunction],
+      "addSuccess": [MockFunction],
+      "addWarning": [MockFunction],
+      "get$": [MockFunction],
+      "remove": [MockFunction],
+    }
+  }
+  savedObjectsClient={
+    Object {
+      "find": [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "fields": Array [
+                "id",
+                "title",
+                "auth.type",
+              ],
+              "perPage": 10000,
+              "type": "data-source",
+            },
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": Promise {},
+          },
+        ],
+      },
+    }
+  }
+>
   <EuiButtonEmpty
     aria-label="dataSourceAggregatedViewMenuButton"
     className="euiHeaderLink"
@@ -124,12 +395,57 @@ exports[`DataSourceAggregatedView should render normally with local cluster hidd
     iconType="database"
     size="s"
   >
-    Data sources
+    <button
+      aria-label="dataSourceAggregatedViewMenuButton"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty-isDisabled euiHeaderLink"
+      data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
+      disabled={true}
+      type="button"
+    >
+      <EuiButtonContent
+        className="euiButtonEmpty__content"
+        iconSide="left"
+        iconSize="m"
+        iconType="database"
+        textProps={
+          Object {
+            "className": "euiButtonEmpty__text",
+          }
+        }
+      >
+        <span
+          className="euiButtonContent euiButtonEmpty__content"
+        >
+          <EuiIcon
+            className="euiButtonContent__icon"
+            color="inherit"
+            size="m"
+            type="database"
+          >
+            <span
+              className="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="database"
+              size="m"
+            />
+          </EuiIcon>
+          <span
+            className="euiButtonEmpty__text"
+          >
+            Data sources
+          </span>
+        </span>
+      </EuiButtonContent>
+    </button>
   </EuiButtonEmpty>
   <EuiNotificationBadge
     color="subdued"
   >
-    All
+    <span
+      className="euiNotificationBadge euiNotificationBadge--subdued"
+    >
+      0
+    </span>
   </EuiNotificationBadge>
   <EuiPopover
     anchorPosition="downLeft"
@@ -150,21 +466,49 @@ exports[`DataSourceAggregatedView should render normally with local cluster hidd
     ownFocus={true}
     panelPaddingSize="none"
   >
-    <EuiContextMenu
-      initialPanelId={0}
-      panels={
-        Array [
-          Object {
-            "id": 0,
-            "items": Array [],
-            "title": "Data sources (0)",
-          },
-        ]
-      }
-      size="m"
-    />
+    <div
+      className="euiPopover euiPopover--anchorDownLeft"
+      id="dataSourceSViewContextMenuPopover"
+    >
+      <div
+        className="euiPopover__anchor"
+      >
+        <EuiButtonIcon
+          aria-label="show data sources"
+          data-test-subj="dataSourceAggregatedViewInfoButton"
+          display="empty"
+          iconType="iInCircle"
+          onClick={[Function]}
+        >
+          <button
+            aria-label="show data sources"
+            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+            data-test-subj="dataSourceAggregatedViewInfoButton"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <EuiIcon
+              aria-hidden="true"
+              className="euiButtonIcon__icon"
+              color="inherit"
+              size="m"
+              type="iInCircle"
+            >
+              <span
+                aria-hidden="true"
+                className="euiButtonIcon__icon"
+                color="inherit"
+                data-euiicon-type="iInCircle"
+                size="m"
+              />
+            </EuiIcon>
+          </button>
+        </EuiButtonIcon>
+      </div>
+    </div>
   </EuiPopover>
-</Fragment>
+</DataSourceAggregatedView>
 `;
 
 exports[`DataSourceAggregatedView should render normally with local cluster not hidden and all options 1`] = `
diff --git a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.test.tsx b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.test.tsx
index 3f44bac61e5b..5bb518af2d06 100644
--- a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.test.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ShallowWrapper, shallow } from 'enzyme';
+import { ShallowWrapper, mount, shallow } from 'enzyme';
 import React from 'react';
 import { DataSourceAggregatedView } from './data_source_aggregated_view';
 import { SavedObjectsClientContract } from '../../../../../core/public';
@@ -43,26 +43,29 @@ describe('DataSourceAggregatedView', () => {
   });
 
   it('should render normally with local cluster hidden and all options', () => {
-    component = shallow(
+    const container = mount(
       <DataSourceAggregatedView
         fullWidth={false}
         hideLocalCluster={true}
         savedObjectsClient={client}
         notifications={toasts}
-        displayAllCompatibleDataSources={true}
+        displayAllCompatibleDataSources={false}
+        activeDataSourceIds={[]}
       />
     );
-    expect(component).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
     expect(client.find).toBeCalledWith({
       fields: ['id', 'title', 'auth.type'],
       perPage: 10000,
       type: 'data-source',
     });
     expect(toasts.addWarning).toBeCalledTimes(0);
+    const badge = container.find('EuiNotificationBadge').text();
+    expect(badge).toEqual('0');
   });
 
   it('should render normally with local cluster and actice selections', () => {
-    component = shallow(
+    const container = mount(
       <DataSourceAggregatedView
         fullWidth={false}
         hideLocalCluster={false}
@@ -72,33 +75,37 @@ describe('DataSourceAggregatedView', () => {
         activeDataSourceIds={['test1']}
       />
     );
-    expect(component).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
     expect(client.find).toBeCalledWith({
       fields: ['id', 'title', 'auth.type'],
       perPage: 10000,
       type: 'data-source',
     });
     expect(toasts.addWarning).toBeCalledTimes(0);
+    const badge = container.find('EuiNotificationBadge').text();
+    expect(badge).toEqual('1');
   });
 
   it('should render normally with data source filter', () => {
-    component = shallow(
+    const container = mount(
       <DataSourceAggregatedView
         fullWidth={false}
         hideLocalCluster={false}
         savedObjectsClient={client}
         notifications={toasts}
-        displayAllCompatibleDataSources={false}
+        displayAllCompatibleDataSources={true}
         dataSourceFilter={(ds) => ds.attributes.auth.type !== 'no_auth'}
       />
     );
-    expect(component).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
     expect(client.find).toBeCalledWith({
       fields: ['id', 'title', 'auth.type'],
       perPage: 10000,
       type: 'data-source',
     });
     expect(toasts.addWarning).toBeCalledTimes(0);
+    const badge = container.find('EuiNotificationBadge').text();
+    expect(badge).toEqual('All');
   });
 
   it('should render popup when clicking on info icon', async () => {
diff --git a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
index 015441773600..7c039c2f64f3 100644
--- a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
@@ -111,17 +111,17 @@ export class DataSourceAggregatedView extends React.Component<
     let items = [];
 
     // only display active data sources
-    if (this.props.activeDataSourceIds && this.props.activeDataSourceIds.length > 0) {
-      items = this.props.activeDataSourceIds.map((id) => {
+    if (this.props.displayAllCompatibleDataSources) {
+      items = [...this.state.allDataSourcesIdToTitleMap.values()].map((title) => {
         return {
-          name: this.state.allDataSourcesIdToTitleMap.get(id),
+          name: title,
           disabled: true,
         };
       });
     } else {
-      items = [...this.state.allDataSourcesIdToTitleMap.values()].map((title) => {
+      items = this.props.activeDataSourceIds!.map((id) => {
         return {
-          name: title,
+          name: this.state.allDataSourcesIdToTitleMap.get(id),
           disabled: true,
         };
       });
@@ -155,7 +155,8 @@ export class DataSourceAggregatedView extends React.Component<
           {'Data sources'}
         </EuiButtonEmpty>
         <EuiNotificationBadge color={'subdued'}>
-          {this.props.activeDataSourceIds?.length || 'All'}
+          {(this.props.displayAllCompatibleDataSources && 'All') ||
+            this.props.activeDataSourceIds!.length}
         </EuiNotificationBadge>
         <EuiPopover
           id={'dataSourceSViewContextMenuPopover'}
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 9db092a1b61c..5edfd5620769 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
@@ -165,9 +165,79 @@ exports[`DataSourceMenu should render data source multi select component 1`] = `
 Object {
   "asFragment": [Function],
   "baseElement": <body>
-    <div />
+    <div>
+      <div
+        class="euiPopover euiPopover--anchorDownCenter"
+        id="popoverExampleMultiSelect"
+      >
+        <div
+          class="euiPopover__anchor"
+        >
+          <button
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+            data-test-subj="dataSourceFilterGroupButton"
+            type="button"
+          >
+            <span
+              class="euiButtonContent euiButtonEmpty__content"
+            >
+              <span
+                class="euiButtonContent__icon"
+                color="inherit"
+                data-euiicon-type="database"
+              />
+              <span
+                class="euiButtonEmpty__text"
+              >
+                Data sources
+              </span>
+            </span>
+          </button>
+          <span
+            class="euiNotificationBadge euiNotificationBadge--subdued"
+          >
+            0
+          </span>
+        </div>
+      </div>
+    </div>
   </body>,
-  "container": <div />,
+  "container": <div>
+    <div
+      class="euiPopover euiPopover--anchorDownCenter"
+      id="popoverExampleMultiSelect"
+    >
+      <div
+        class="euiPopover__anchor"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+          data-test-subj="dataSourceFilterGroupButton"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonContent__icon"
+              color="inherit"
+              data-euiicon-type="database"
+            />
+            <span
+              class="euiButtonEmpty__text"
+            >
+              Data sources
+            </span>
+          </span>
+        </button>
+        <span
+          class="euiNotificationBadge euiNotificationBadge--subdued"
+        >
+          0
+        </span>
+      </div>
+    </div>
+  </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
   "findAllByDisplayValue": [Function],
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 4f7914148ca8..538d579c4b6b 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
@@ -74,6 +74,7 @@ describe('DataSourceMenu', () => {
           hideLocalCluster: true,
           savedObjects: client,
           notifications,
+          displayAllCompatibleDataSources: true,
         }}
       />
     );
@@ -98,12 +99,12 @@ describe('DataSourceMenu', () => {
   it('should render data source multi select component', () => {
     const container = render(
       <DataSourceMenu
-        showDataSourceMultiSelectable={true}
-        appName={'myapp'}
-        fullWidth={true}
-        className={'myclass'}
-        savedObjects={client}
-        notifications={notifications}
+        componentType={DataSourceComponentType.DataSourceMultiSelectable}
+        componentConfig={{
+          fullWidth: true,
+          savedObjects: client,
+          notifications,
+        }}
       />
     );
     expect(container).toMatchSnapshot();