add multi database load control

oceanbase · Sep 26, 2023 · aeadaee · aeadaee
1 parent 963dab0
commit aeadaee
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 56 deletions.
diff --git a/src/page/Workspace/SideBar/ResourceTree/Datasource/index.tsx b/src/page/Workspace/SideBar/ResourceTree/Datasource/index.tsx
@@ -232,63 +232,74 @@ export default forwardRef(function DatasourceTree(props, ref) {
                   titleRender={(node) => {
                     return (
                       <>
-                        <Dropdown
-                          trigger={login.isPrivateSpace() ? ['contextMenu'] : []}
-                          menu={{
-                            items: [
-                              {
-                                label: formatMessage({ id: 'odc.ResourceTree.Datasource.Edit' }), //编辑
-                                key: 'edit',
-                                onClick: (e) => {
-                                  e.domEvent?.stopPropagation();
-                                  setEditDatasourceId(node.key);
-                                },
-                              },
-                              {
-                                label: formatMessage({ id: 'odc.ResourceTree.Datasource.Delete' }), //删除
-                                key: 'delete',
-                                onClick: (e) => {
-                                  e.domEvent?.stopPropagation();
-                                  const name = node.title;
-                                  deleteDataSource(name as string, node.key as string);
-                                },
-                              },
-                            ],
-                          }}
+                        <Popover
+                          showArrow={false}
+                          overlayClassName={styles.connectionPopover}
+                          placement="right"
+                          content={
+                            <ConnectionPopover connection={datasourceMap.get(toNumber(node.key))} />
+                          }
                         >
-                          <Popover
-                            showArrow={false}
-                            overlayClassName={styles.connectionPopover}
-                            placement="right"
-                            content={
-                              <ConnectionPopover
-                                connection={datasourceMap.get(toNumber(node.key))}
-                              />
-                            }
+                          <div
+                            style={{
+                              flex: 1,
+                              overflow: 'hidden',
+                              display: 'flex',
+                              justifyContent: 'space-between',
+                            }}
                           >
-                            {node.title}
-                          </Popover>
-                        </Dropdown>
-                        {login.isPrivateSpace() && (
-                          <div className={styles.actions}>
-                            <Action.Group ellipsisIcon="vertical" size={0}>
-                              <Action.Link
-                                onClick={() => setEditDatasourceId(node.key)}
-                                key={'edit'}
-                              >
-                                {formatMessage({ id: 'odc.ResourceTree.Datasource.Edit' })}
-                              </Action.Link>
-                              <Action.Link
-                                onClick={() =>
-                                  deleteDataSource(node.title as string, node.key as string)
-                                }
-                                key={'delete'}
-                              >
-                                {formatMessage({ id: 'odc.ResourceTree.Datasource.Delete' })}
-                              </Action.Link>
-                            </Action.Group>
+                            <Dropdown
+                              trigger={login.isPrivateSpace() ? ['contextMenu'] : []}
+                              menu={{
+                                items: [
+                                  {
+                                    label: formatMessage({
+                                      id: 'odc.ResourceTree.Datasource.Edit',
+                                    }), //编辑
+                                    key: 'edit',
+                                    onClick: (e) => {
+                                      e.domEvent?.stopPropagation();
+                                      setEditDatasourceId(node.key);
+                                    },
+                                  },
+                                  {
+                                    label: formatMessage({
+                                      id: 'odc.ResourceTree.Datasource.Delete',
+                                    }), //删除
+                                    key: 'delete',
+                                    onClick: (e) => {
+                                      e.domEvent?.stopPropagation();
+                                      const name = node.title;
+                                      deleteDataSource(name as string, node.key as string);
+                                    },
+                                  },
+                                ],
+                              }}
+                            >
+                              <span>{node.title}</span>
+                            </Dropdown>
+                            {login.isPrivateSpace() && (
+                              <div className={styles.actions}>
+                                <Action.Group ellipsisIcon="vertical" size={0}>
+                                  <Action.Link
+                                    onClick={() => setEditDatasourceId(node.key)}
+                                    key={'edit'}
+                                  >
+                                    {formatMessage({ id: 'odc.ResourceTree.Datasource.Edit' })}
+                                  </Action.Link>
+                                  <Action.Link
+                                    onClick={() =>
+                                      deleteDataSource(node.title as string, node.key as string)
+                                    }
+                                    key={'delete'}
+                                  >
+                                    {formatMessage({ id: 'odc.ResourceTree.Datasource.Delete' })}
+                                  </Action.Link>
+                                </Action.Group>
+                              </div>
+                            )}
                           </div>
-                        )}
+                        </Popover>
                       </>
                     );
                   }}

diff --git a/src/page/Workspace/SideBar/ResourceTree/index.tsx b/src/page/Workspace/SideBar/ResourceTree/index.tsx
@@ -29,6 +29,7 @@ import { DataBaseTreeData } from './Nodes/database';
 import TreeNodeMenu from './TreeNodeMenu';
 import { ResourceNodeType, TreeDataNode } from './type';
 import tracert from '@/util/tracert';
+import { useUpdate } from 'ahooks';
 
 interface IProps {
   sessionManagerStore?: SessionManagerStore;
@@ -47,7 +48,13 @@ const ResourceTree: React.FC<IProps> = function ({
   reloadDatabase,
   showTip = false,
 }) {
-  const [databaseSessions, setDatabaseSessions] = useState<Record<string, string>>({});
+  const databaseSessionsRef = useRef<Record<string, string>>({});
+  const update = useUpdate();
+  const databaseSessions = databaseSessionsRef.current;
+  function setDatabaseSessions(map: any) {
+    databaseSessionsRef.current = map;
+    update();
+  }
   const [wrapperHeight, setWrapperHeight] = useState(0);
   const [searchValue, setSearchValue] = useState<string>('');
   const treeWrapperRef = useRef<HTMLDivElement>();
@@ -119,7 +126,7 @@ const ResourceTree: React.FC<IProps> = function ({
           const dbSession = await sessionManagerStore.createSession(null, data?.id, true);
           if (dbSession !== 'NotFound') {
             setDatabaseSessions({
-              ...databaseSessions,
+              ...databaseSessionsRef.current,
               [dbId]: dbSession.sessionId,
             });
           }