add multi data source support

[wanglam]

Description

1. Add multi data source support for admin UI
2. Add missing unit tests for server side

Issues Resolved

List any issues this PR will resolve, e.g. Closes [...].

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
For more information on following Developer Certificate of Origin and signing off your commits, please check here.

[BionIT]

nit: we should be able to tell if the data source plugin is enabled via !!dataSource

[wanglam]

Do you mean we don't need to read the dataSourceEnabled property in dataSource? The multi data source will always be enabled if dataSource is truly.

[BionIT]

This component is only mounted when the dataSourceEnabled flag is true, do we need to double check the flag?

[wanglam]

Do we mean the dataSourceEnabled will always be true, if the top nav menu mounted? Add check here is for dataSourceEnabled changed. The dataSourceEnabled in DataSourceContextProvider will be updated if enabled status changed from outside.

[ruanyl]

Can you elaborate why we need DO_NOT_FETCH? I couldn't capture the idea, maybe leave a comment?

[wanglam]

The fetcher will be automatic execute if Component mounted. Add this DO_NOT_FETCH here is for prevent this default behavior. If this parameter present, the fetcher won't be executed. In the real world, we don't want any API be execute until data source id finalized.

[ruanyl]

I'm still concerning the current implementation as it requires the components to pass data source id explicitly. This is a bit overwhelming if we need to do this in the future for all the components we add that interact with apis.

I think data source is data layer configuration, presentation layer shouldn't be aware of that. How do you like this idea:

1. since we need UI to reload when data source changed without refreshing the page, we can simply call reload in useFetcher when data source changed.

+ export const currentDataSourceId$ = new BehaviorSubject<string>('');
export const useFetcher = (...) => {
+  const dataSourceId = useObservable(currentDataSourceId$);

+  useEffect(() => {
+    if (dataSourceId) {
+      reload();
 +   }
+  }, [currentDataSourceId$, reload]);
}

2. For apis, we could add the data source id by default

export class Connector {
  public getAll() {
    return InnerHttpProvider.getHttp().get<GetAllConnectorResponse>(CONNECTOR_API_ENDPOINT, {
      query: {
+        data_source_id: currentDataSourceId$.value,
      },
    });
  }
}

Then basically, no components need to be changed, and once data source id changed, it reload the data and component get updated.

[wanglam]

I'm still concerning the current implementation as it requires the components to pass data source id explicitly. This is a bit overwhelming if we need to do this in the future for all the components we add that interact with apis.

I think data source is data layer configuration, presentation layer shouldn't be aware of that. How do you like this idea:

1. since we need UI to reload when data source changed without refreshing the page, we can simply call reload in useFetcher when data source changed.

+ export const currentDataSourceId$ = new BehaviorSubject<string>('');
export const useFetcher = (...) => {
+  const dataSourceId = useObservable(currentDataSourceId$);

+  useEffect(() => {
+    if (dataSourceId) {
+      reload();
 +   }
+  }, [currentDataSourceId$, reload]);
}

2. For apis, we could add the data source id by default

export class Connector {
  public getAll() {
    return InnerHttpProvider.getHttp().get<GetAllConnectorResponse>(CONNECTOR_API_ENDPOINT, {
      query: {
+        data_source_id: currentDataSourceId$.value,
      },
    });
  }
}

Then basically, no components need to be changed, and once data source id changed, it reload the data and component get updated.

This is a good idea, especially for model registry. There is still one question need to be figure out after move automatic reload logic to useFetcher. Sometimes the search params need to updated imediality after data source change. That will cause two requests send. One triggered by automatic reload, another triggered by params change. The useFetcher hook should cancel the previous request. The useFetcher doesn't support this now. I've raised a refactor issue to track it. Will refactor this part in model registry.

[opensearch-trigger-bot]

The backport to 2.x failed:

The process '/usr/bin/git' failed with exit code 1

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add .worktrees/backport-2.x 2.x
# Navigate to the new working tree
cd .worktrees/backport-2.x
# Create a new branch
git switch --create backport/backport-315-to-2.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 6bcecf5a970546d4c3f852581d9bf9cb4a93888e
# Push it to GitHub
git push --set-upstream origin backport/backport-315-to-2.x
# Go back to the original working tree
cd ../..
# Delete the working tree
git worktree remove .worktrees/backport-2.x

Then, create a pull request where the base branch is 2.x and the compare/head branch is backport/backport-315-to-2.x.