[Workspace] Enable direct query connections to support in workspace

changelogs/fragments/7839.yml

@@ -0,0 +1,2 @@
+fix:
+- Enable direct query connections to support in workspace ([#7839](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7839))

src/plugins/data_source_management/public/index.ts

@@ -11,7 +11,7 @@ export function plugin() {
   return new DataSourceManagementPlugin();
 }
 
-export { DataSourceManagementPluginStart } from './types';
+export { DataSourceManagementPluginStart, DirectQueryDatasourceDetails } from './types';
 export { DataSourceSelector, DataSourceOption } from './components/data_source_selector';
 export { DataSourceMenu } from './components/data_source_menu';
 export { DataSourceManagementPlugin, DataSourceManagementPluginSetup } from './plugin';
@@ -26,3 +26,4 @@ export {
 } from './components/data_source_menu';
 export { DataSourceSelectionService } from './service/data_source_selection_service';
 export { getDefaultDataSourceId, getDefaultDataSourceId$ } from './components/utils';
+export { DATACONNECTIONS_BASE } from './constants';

src/plugins/workspace/common/types.ts

@@ -12,3 +12,18 @@ export type DataSource = Pick<
   // Id defined in SavedObjectAttribute could be single or array, here only should be single string.
   id: string;
 };
+
+export enum DataSourceConnectionType {
+  OpenSearchConnection,
+  DirectQueryConnection,
+}
+
+export interface DataSourceConnection {
+  id: string;
+  type: string | undefined;
+  parentId?: string;
+  connectionType: DataSourceConnectionType;
+  name: string;
+  description?: string;
+  relatedConnections?: DataSourceConnection[];
+}

src/plugins/workspace/opensearch_dashboards.json

@@ -9,5 +9,5 @@
     "navigation"
   ],
   "optionalPlugins": ["savedObjectsManagement","management","dataSourceManagement","contentManagement"],
-  "requiredBundles": ["opensearchDashboardsReact", "home","dataSource"]
+  "requiredBundles": ["opensearchDashboardsReact", "home","dataSource", "dataSourceManagement"]
 }

src/plugins/workspace/public/components/workspace_detail/opensearch_connections_table.tsx

@@ -3,60 +3,114 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   EuiSpacer,
-  EuiButton,
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiFieldSearch,
   EuiInMemoryTable,
   EuiBasicTableColumn,
   EuiTableSelectionType,
   EuiTableActionsColumnType,
   EuiConfirmModal,
+  EuiSearchBarProps,
+  EuiText,
+  EuiListGroup,
+  EuiListGroupItem,
+  EuiIcon,
+  EuiPopover,
+  EuiButtonEmpty,
+  EuiPopoverTitle,
+  EuiSmallButton,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { CoreStart, WorkspaceObject } from '../../../../../core/public';
-import { DataSource } from '../../../common/types';
+import { DataSource, DataSourceConnection, DataSourceConnectionType } from '../../../common/types';
 import { WorkspaceClient } from '../../workspace_client';
 import { convertPermissionSettingsToPermissions, useWorkspaceFormContext } from '../workspace_form';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import PrometheusLogo from '../../assets/prometheus_logo.svg';
+import S3Logo from '../../assets/s3_logo.svg';
 
 interface OpenSearchConnectionTableProps {
-  assignedDataSources: DataSource[];
   isDashboardAdmin: boolean;
   currentWorkspace: WorkspaceObject;
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  connectionType: string;
+  dataSourceConnections: DataSourceConnection[];
 }
 
 export const OpenSearchConnectionTable = ({
-  assignedDataSources,
   isDashboardAdmin,
   currentWorkspace,
   setIsLoading,
+  connectionType,
+  dataSourceConnections,
 }: OpenSearchConnectionTableProps) => {
   const {
     services: { notifications, workspaceClient },
   } = useOpenSearchDashboards<{ CoreStart: CoreStart; workspaceClient: WorkspaceClient }>();
   const { formData, setSelectedDataSources } = useWorkspaceFormContext();
-  const [searchTerm, setSearchTerm] = useState('');
-  const [selectedItems, setSelectedItems] = useState<DataSource[]>([]);
+  const [selectedItems, setSelectedItems] = useState<DataSourceConnection[]>([]);
   const [modalVisible, setModalVisible] = useState(false);
+  const [popoversState, setPopoversState] = useState<Record<string, boolean>>({});
 
-  const filteredDataSources = useMemo(
-    () =>
-      assignedDataSources.filter((dataSource) =>
-        dataSource.title.toLowerCase().includes(searchTerm.toLowerCase())
-      ),
-    [searchTerm, assignedDataSources]
-  );
+  const filteredDataSources = useMemo(() => {
+    // Reset the item when switching connectionType.
+    setSelectedItems([]);
+    if (connectionType === 'openSearchConnections') {
+      return dataSourceConnections.filter(
+        (dqc) => dqc.connectionType === DataSourceConnectionType.OpenSearchConnection
+      );
+    } else if (connectionType === 'directQueryConnections') {
+      return dataSourceConnections.filter(
+        (dqc) => dqc.connectionType === DataSourceConnectionType.DirectQueryConnection
+      );
+    }
+    return dataSourceConnections;
+  }, [connectionType, dataSourceConnections]);
 
-  const onSelectionChange = (selectedDataSources: DataSource[]) => {
+  const renderToolsLeft = useCallback(() => {
+    return selectedItems.length > 0 && !modalVisible
+      ? [
+          <EuiSmallButton
+            color="danger"
+            onClick={() => setModalVisible(true)}
+            data-test-subj="workspace-detail-dataSources-table-bulkRemove"
+          >
+            {i18n.translate('workspace.detail.dataSources.table.remove.button', {
+              defaultMessage: 'Remove {numberOfSelect} association(s)',
+              values: { numberOfSelect: selectedItems.length },
+            })}
+          </EuiSmallButton>,
+        ]
+      : [];
+  }, [selectedItems, modalVisible]);
+
+  const onSelectionChange = (selectedDataSources: DataSourceConnection[]) => {
     setSelectedItems(selectedDataSources);
   };
 
-  const handleUnassignDataSources = async (dataSources: DataSource[]) => {
+  const search: EuiSearchBarProps = {
+    toolsLeft: renderToolsLeft(),
+    box: {
+      incremental: true,
+    },
+    filters: [
+      {
+        type: 'field_value_selection',
+        field: 'type',
+        name: 'Type',
+        multiSelect: 'or',
+        options: Array.from(
+          new Set(filteredDataSources.map(({ type }) => type).filter(Boolean))
+        ).map((type) => ({
+          value: type!,
+          name: type!,
+        })),
+      },
+    ],
+  };
+
+  const handleUnassignDataSources = async (dataSources: DataSourceConnection[]) => {
     try {
       setIsLoading(true);
       setModalVisible(false);
@@ -93,16 +147,33 @@
     }
   };
 
-  const columns: Array<EuiBasicTableColumn<DataSource>> = [
+  const directQueryConnectionIcon = (connector: string | undefined) => {
+    switch (connector) {
+      case 'S3GLUE':
+        return <EuiIcon type={S3Logo} />;
+      case 'PROMETHEUS':
+        return <EuiIcon type={PrometheusLogo} />;
+      default:
+        return <></>;
+    }
+  };
+  const togglePopover = (itemId: string) => {
+    setPopoversState((prevState) => ({
+      ...prevState,
+      [itemId]: !prevState[itemId],
+    }));
+  };
+
+  const columns: Array<EuiBasicTableColumn<DataSourceConnection>> = [
     {
-      field: 'title',
+      field: 'name',
       name: i18n.translate('workspace.detail.dataSources.table.title', {
         defaultMessage: 'Title',
       }),
       truncateText: true,
     },
     {
-      field: 'dataSourceEngineType',
+      field: 'type',
       name: i18n.translate('workspace.detail.dataSources.table.type', {
         defaultMessage: 'Type',
       }),
@@ -115,6 +186,54 @@
       }),
       truncateText: true,
     },
+    {
+      field: 'relatedConnections',
+      name: i18n.translate('workspace.detail.dataSources.table.relatedConnections', {
+        defaultMessage: 'Related connections',
+      }),
+      align: 'right',
+      truncateText: true,
+      render: (relatedConnections: DataSourceConnection[], record) =>
+        relatedConnections?.length > 0 ? (
+          <EuiPopover
+            key={record.id}
+            panelPaddingSize="s"
+            anchorPosition="downRight"
+            isOpen={popoversState[record.id] || false}
+            closePopover={() => togglePopover(record.id)}
+            button={
+              <EuiButtonEmpty
+                size="xs"
+                flush="right"
+                color="text"
+                onClick={() => togglePopover(record.id)}
+              >
+                {relatedConnections?.length}
+              </EuiButtonEmpty>
+            }
+          >
+            <EuiPopoverTitle>RELATED CONNECTIONS</EuiPopoverTitle>
+            <EuiListGroup
+              flush
+              maxWidth={200}
+              className="eui-yScrollWithShadows"
+              style={{ maxHeight: '90px' }}
+            >
+              {relatedConnections.map((item) => (
+                <EuiListGroupItem
+                  key={item.id}
+                  size="xs"
+                  label={item.name}
+                  icon={directQueryConnectionIcon(item.type)}
+                  style={{ maxHeight: '30px' }}
+                />
+              ))}
+            </EuiListGroup>
+          </EuiPopover>
+        ) : (
+          <EuiText>—</EuiText>
+        ),
+    },
     ...(isDashboardAdmin
       ? [
           {
@@ -135,7 +254,7 @@
                 ),
                 icon: 'unlink',
                 type: 'icon',
-                onClick: (item: DataSource) => {
+                onClick: (item: DataSourceConnection) => {
                   setSelectedItems([item]);
                   setModalVisible(true);
                 },
@@ -147,48 +266,21 @@
       : []),
   ];
 
-  const selection: EuiTableSelectionType<DataSource> = {
+  const selection: EuiTableSelectionType<DataSourceConnection> = {
     selectable: () => isDashboardAdmin,
     onSelectionChange,
   };
 
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(e.target.value);
-  };
   return (
     <>
-      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-        {selectedItems.length > 0 && !modalVisible && (
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              color="danger"
-              onClick={() => setModalVisible(true)}
-              data-test-subj="workspace-detail-dataSources-table-bulkRemove"
-            >
-              {i18n.translate('workspace.detail.dataSources.table.remove.button', {
-                defaultMessage: 'Remove {numberOfSelect} association(s)',
-                values: { numberOfSelect: selectedItems.length },
-              })}
-            </EuiButton>
-          </EuiFlexItem>
-        )}
-        <EuiFlexItem>
-          <EuiFieldSearch
-            placeholder="Search"
-            value={searchTerm}
-            onChange={handleSearch}
-            isClearable={true}
-            fullWidth
-            aria-label="Search data sources"
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer size="s" />
       <EuiInMemoryTable
         items={filteredDataSources}
         itemId="id"
         columns={columns}
         selection={selection}
+        search={search}
+        key={connectionType}
+        isSelectable={true}
         pagination={{
           initialPageSize: 10,
           pageSizeOptions: [10, 20, 30],
@@ -199,7 +291,7 @@
         <EuiConfirmModal
           data-test-subj="workspaceForm-cancelModal"
           title={i18n.translate('workspace.detail.dataSources.modal.title', {
-            defaultMessage: 'Remove OpenSearch connections',
+            defaultMessage: 'Remove data source(s)',
           })}
           onCancel={() => {
             setModalVisible(false);
@@ -212,7 +304,7 @@
             defaultMessage: 'Cancel',
           })}
           confirmButtonText={i18n.translate('workspace.detail.dataSources.Modal.confirmButton', {
-            defaultMessage: 'Remove connections',
+            defaultMessage: 'Remove data source(s)',
           })}
           buttonColor="danger"
           defaultFocusedButton="confirm"