opensearch-project / ml-commons-dashboards

User interface for the ml-commons plugin which can be integrated with OpenSearch Dashboards and a health dashboard for machine learning models.
Apache License 2.0
6 stars 20 forks source link

add multi data source support #315

Closed wanglam closed 2 months ago

wanglam commented 2 months ago

Description

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

image

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.

ruanyl commented 2 months ago

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$);
  1. 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 commented 2 months ago

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]);
}
  1. 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[bot] commented 2 months ago

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.