[Multiple Datasource] Use data source filter function before rendering (

#6175) * use filter function before rendering Signed-off-by: Lu Yu <nluyu@amazon.com> * add change log Signed-off-by: Lu Yu <nluyu@amazon.com> --------- Signed-off-by: Lu Yu <nluyu@amazon.com> Co-authored-by: ZilongX <99905560+ZilongX@users.noreply.github.com>
opensearch-project · Mar 19, 2024 · 8975381 · 8975381
1 parent d2347ca
commit 8975381
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -52,6 +52,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Workspace] Add workspace id in basePath ([#6060](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6060))
 - Implement new home page ([#6065](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6065))
 - Add sidecar service ([#5920](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5920))
+- [Multiple Datasource] Use data source filter function before rendering ([#6175](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6175))
 - [Chrome] Introduce registerCollapsibleNavHeader to allow plugins to customize the rendering of nav menu header ([#5244](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5244))
 - [Dynamic Configurations] Pass request headers when making application config calls ([#6164](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6164))
 - [Discover] Options button to configure legacy mode and remove the top navigation option ([#6170](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6170))

diff --git a/...ns/data_source_management/public/components/data_source_selector/data_source_selector.tsx b/...ns/data_source_management/public/components/data_source_selector/data_source_selector.tsx
@@ -32,8 +32,8 @@ export interface DataSourceSelectorProps {
 }
 
 interface DataSourceSelectorState {
-  dataSourceOptions: DataSourceOption[];
   selectedOption: DataSourceOption[];
+  allDataSources: Array<SavedObject<DataSourceAttributes>>;
 }
 
 export interface DataSourceOption {
@@ -52,11 +52,7 @@ export class DataSourceSelector extends React.Component<
     super(props);
 
     this.state = {
-      dataSourceOptions: this.props.defaultOption
-        ? this.props.defaultOption
-        : this.props.hideLocalCluster
-        ? []
-        : [LocalCluster],
+      allDataSources: [],
       selectedOption: this.props.defaultOption
         ? this.props.defaultOption
         : this.props.hideLocalCluster
@@ -74,26 +70,10 @@ export class DataSourceSelector extends React.Component<
     getDataSourcesWithFields(this.props.savedObjectsClient, ['id', 'title', 'auth.type'])
       .then((fetchedDataSources) => {
         if (fetchedDataSources?.length) {
-          let filteredDataSources = fetchedDataSources;
-          if (this.props.dataSourceFilter) {
-            filteredDataSources = fetchedDataSources.filter((ds) =>
-              this.props.dataSourceFilter!(ds)
-            );
-          }
-
-          const dataSourceOptions = filteredDataSources.map((dataSource) => ({
-            id: dataSource.id,
-            label: dataSource.attributes?.title || '',
-          }));
-
-          if (!this.props.hideLocalCluster) {
-            dataSourceOptions.unshift(LocalCluster);
-          }
-
           if (!this._isMounted) return;
           this.setState({
             ...this.state,
-            dataSourceOptions,
+            allDataSources: fetchedDataSources,
           });
         }
       })
@@ -119,6 +99,16 @@ export class DataSourceSelector extends React.Component<
       this.props.placeholderText === undefined
         ? 'Select a data source'
         : this.props.placeholderText;
+
+    const dataSources = this.props.dataSourceFilter
+      ? this.state.allDataSources.filter((ds) => this.props.dataSourceFilter!(ds))
+      : this.state.allDataSources;
+
+    const options = dataSources.map((ds) => ({ id: ds.id, label: ds.attributes?.title || '' }));
+    if (!this.props.hideLocalCluster) {
+      options.unshift(LocalCluster);
+    }
+
     return (
       <EuiComboBox
         aria-label={
@@ -136,7 +126,7 @@ export class DataSourceSelector extends React.Component<
             : ''
         }
         singleSelection={{ asPlainText: true }}
-        options={this.state.dataSourceOptions}
+        options={options}
         selectedOptions={this.state.selectedOption}
         onChange={(e) => this.onChange(e)}
         prepend={