refactor: adjust the api about scope

apache · Oct 9, 2023 · 2c83eb9 · 2c83eb9
1 parent d58803b
commit 2c83eb9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 26 deletions.
diff --git a/config-ui/src/pages/connection/detail/index.tsx b/config-ui/src/pages/connection/detail/index.tsx
@@ -80,7 +80,19 @@ const ConnectionDetail = ({ plugin, connectionId }: Props) => {
 
   const pluginConfig = useMemo(() => getPluginConfig(plugin), [plugin]);
 
-  const [dataSource, total] = useMemo(() => [data?.scopes ?? [], data?.count ?? 0], [data]);
+  const [dataSource, total] = useMemo(
+    () => [
+      data?.scopes.map((it: any) => ({
+        id: getPluginScopeId(plugin, it.scope),
+        name: it.scope.name,
+        projects: it.blueprints.map((bp: any) => bp.projectName) ?? [],
+        configId: it.scopeConfig.id,
+        configName: it.scopeConfig.name,
+      })) ?? [],
+      data?.count ?? 0,
+    ],
+    [data],
+  );
 
   useEffect(() => {
     onTest(`${plugin}-${connectionId}`);
@@ -270,19 +282,17 @@ const ConnectionDetail = ({ plugin, connectionId }: Props) => {
             },
             {
               title: 'Project',
-              dataIndex: 'blueprints',
-              key: 'project',
-              render: (blueprints) => (
+              dataIndex: 'projects',
+              key: 'projects',
+              render: (projects) => (
                 <>
-                  {blueprints?.length ? (
+                  {projects.length ? (
                     <ul>
-                      {blueprints.map((bp: any, i: number) =>
-                        bp.projectName ? (
-                          <li key={bp.projectName}>
-                            <Link to={`/projects/${bp.projectName}`}>{bp.projectName}</Link>
-                          </li>
-                        ) : null,
-                      )}
+                      {projects.map((it: string) => (
+                        <li key={it}>
+                          <Link to={`/projects/${it}`}>{it}</Link>
+                        </li>
+                      ))}
                     </ul>
                   ) : (
                     '-'
@@ -292,19 +302,19 @@ const ConnectionDetail = ({ plugin, connectionId }: Props) => {
             },
             {
               title: 'Scope Config',
-              dataIndex: 'scopeConfig',
+              dataIndex: ['id', 'configId', 'configName'],
               key: 'scopeConfig',
               width: 400,
-              render: (_, row) => (
+              render: ({ id, configId, configName }) => (
                 <>
-                  <span>{row.scopeConfigId ? row.scopeConfig?.name : 'N/A'}</span>
+                  <span>{configId ? configName : 'N/A'}</span>
                   {pluginConfig.scopeConfig && (
                     <IconButton
                       icon="link"
                       tooltip="Associate Scope Config"
                       onClick={() => {
-                        handleShowScopeConfigSelectDialog([getPluginScopeId(plugin, row)]);
-                        setScopeConfigId(row.scopeConfigId);
+                        handleShowScopeConfigSelectDialog([id]);
+                        setScopeConfigId(configId);
                       }}
                     />
                   )}
@@ -313,19 +323,20 @@ const ConnectionDetail = ({ plugin, connectionId }: Props) => {
             },
             {
               title: '',
+              dataIndex: 'id',
               key: 'id',
               width: 100,
-              render: (_, row) => (
+              render: (id) => (
                 <>
                   <IconButton
                     image={<img src={ClearImg} alt="clear" />}
                     tooltip="Clear historical data"
-                    onClick={() => handleShowClearDataScopeDialog(getPluginScopeId(plugin, row))}
+                    onClick={() => handleShowClearDataScopeDialog(id)}
                   />
                   <IconButton
                     icon="trash"
                     tooltip="Delete Data Scope"
-                    onClick={() => handleShowDeleteDataScopeDialog(getPluginScopeId(plugin, row))}
+                    onClick={() => handleShowDeleteDataScopeDialog(id)}
                   />
                 </>
               ),

diff --git a/config-ui/src/plugins/components/data-scope-select/api.ts b/config-ui/src/plugins/components/data-scope-select/api.ts
@@ -23,7 +23,7 @@ type ParamsType = {
 } & Pagination;
 
 type ResponseType = {
-  scopes: Array<{ name: string }>;
+  scopes: Array<{ scope: { name: string } }>;
   count: number;
 };
 

diff --git a/config-ui/src/plugins/components/data-scope-select/index.tsx b/config-ui/src/plugins/components/data-scope-select/index.tsx
@@ -69,9 +69,9 @@ export const DataScopeSelect = ({
       ...items,
       ...res.scopes.map((sc) => ({
         parentId: null,
-        id: getPluginScopeId(plugin, sc),
-        title: sc.name,
-        data: sc,
+        id: getPluginScopeId(plugin, sc.scope),
+        title: sc.scope.name,
+        data: sc.scope,
       })),
     ]);
     if (page === 1) {
@@ -138,8 +138,8 @@ export const DataScopeSelect = ({
           <div className="search">
             <MultiSelector
               loading={!ready}
-              items={data?.scopes ?? []}
-              getName={(it: any) => it.name}
+              items={data?.scopes.map((sc) => sc.scope) ?? []}
+              getName={(it) => it.name}
               getKey={(it) => getPluginScopeId(plugin, it)}
               noResult="No Data Scopes Available."
               onQueryChange={(query) => setQuery(query)}