Merge pull request #662 from GraphScope/add-query-server

feat: Add query server

Author: pomelo-nwu

packages/studio-components/src/Utils/index.tsx

@@ -119,6 +119,36 @@ export const setSearchParams = (params: Record<string, string>, HashMode?: boole
   }
 };
 
+export const removeSearchParams = (deleteKeys: string[], HashMode?: boolean) => {
+  const isHashMode = window.location.hash.startsWith('#/') || HashMode;
+
+  if (isHashMode) {
+    // 处理 hash router
+    let hash = window.location.hash.substring(1);
+    const [path, search] = hash.split('?');
+    const searchParams = new URLSearchParams(search);
+
+    // 更新 searchParams
+    deleteKeys.forEach(key => {
+      searchParams.delete(key);
+    });
+
+    window.location.hash = '#' + path + '?' + searchParams.toString();
+  } else {
+    // 处理 browser router
+    //@ts-ignore
+    const url = new URL(window.location);
+    const { searchParams } = url;
+
+    deleteKeys.forEach(key => {
+      searchParams.delete(key);
+    });
+
+    // 更新浏览器的 URL，只改变 search 部分
+    window.history.pushState({}, '', url);
+  }
+};
+
 export const getCurrentNav = () => {
   const hashMode = window.location.hash.startsWith('#/');
   if (hashMode) {

packages/studio-query/src/components/connect-endpoint/index.tsx

@@ -9,6 +9,7 @@ export type FieldType = {
   query_language?: string;
   query_endpoint?: string;
   query_initiation?: 'Browser' | 'Server';
+  query_initiation_service?: string;
   query_username?: string;
   query_password?: string;
 };
@@ -27,6 +28,7 @@ const ConnectEndpoint: React.FunctionComponent<IConnectEndpointProps> = props =>
       query_initiation: props.query_initiation || storage.get('query_initiation') || 'Browser',
       query_username: props.query_username || storage.get('query_username') || 'admin',
       query_password: props.query_password || storage.get('query_password') || 'password',
+      query_initiation_service: props.query_initiation_service || storage.get('query_initiation_service') || '',
     });
   }, []);
   const handleConnect = () => {
@@ -37,6 +39,8 @@ const ConnectEndpoint: React.FunctionComponent<IConnectEndpointProps> = props =>
     onConnect && onConnect(form.getFieldsValue(true));
   };
 
+  const query_initiation = Form.useWatch('query_initiation', form);
+
   return (
     <Flex vertical style={{ padding: '12px 24px' }}>
       <Title level={3} style={{ marginBottom: '12px' }}>
@@ -62,12 +66,20 @@ const ConnectEndpoint: React.FunctionComponent<IConnectEndpointProps> = props =>
             options={[
               { label: 'Browser (client-side)', value: 'Browser' },
               {
-                label: `Server (Ensure that your "${location.origin}/query" endpoint is available)`,
+                label: `Server (server-side)`,
                 value: 'Server',
               },
             ]}
           />
         </Form.Item>
+        {query_initiation === 'Server' && (
+          <Form.Item<FieldType>
+            label={<FormattedMessage id="Query initiation service" />}
+            name="query_initiation_service"
+          >
+            <Input allowClear />
+          </Form.Item>
+        )}
 
         <Form.Item<FieldType> label={<FormattedMessage id="Username" />} name="query_username">
           <Input />

packages/studio-website/src/layouts/index.tsx

@@ -64,14 +64,25 @@ export default function StudioLayout() {
   };
   const setQueryConfig = () => {
     const { GS_ENGINE_TYPE } = window;
-    const query_language = Utils.storage.get('query_language');
-    const query_initiation = Utils.storage.get('query_initiation');
-    if (!query_language) {
+
+    const query_language = Utils.getSearchParams('query_language') || Utils.storage.get('query_language');
+    const query_initiation = Utils.getSearchParams('query_initiation') || Utils.storage.get('query_initiation');
+    const query_initiation_service =
+      Utils.getSearchParams('query_initiation_service') || Utils.storage.get('query_initiation_service');
+
+    if (query_language) {
+      Utils.storage.set('query_language', query_language);
+    } else {
       Utils.storage.set('query_language', GS_ENGINE_TYPE === 'interactive' ? 'cypher' : 'gremlin');
     }
-    if (!query_initiation) {
+    if (query_initiation) {
+      Utils.storage.set('query_initiation', query_initiation);
+    } else {
       Utils.storage.set('query_initiation', GS_ENGINE_TYPE === 'groot' ? 'Server' : 'Browser');
     }
+    if (query_initiation_service) {
+      Utils.storage.set('query_initiation_service', query_initiation_service);
+    }
   };
   useEffect(() => {
     (async () => {
@@ -87,6 +98,8 @@ export default function StudioLayout() {
       window.GS_ENGINE_TYPE = engineType;
 
       setQueryConfig();
+      //这个URL参数不用一直携带着，能够放在localstorage即可
+      Utils.removeSearchParams(['coordinator', 'query_language', 'query_initiation_service', 'query_initiation']);
       /**接着校验可用的graphId */
       const checkedRes = await checkGraphId();
       if (checkedRes) {

packages/studio-website/src/pages/query/services.tsx

@@ -125,6 +125,7 @@ export const queryGraphData = async (params: IStatement) => {
   const query_language = storage.get<'cypher' | 'gremlin'>('query_language') || 'cypher';
   const query_endpoint = storage.get<string>('query_endpoint') || '';
   const query_initiation = storage.get<'Server' | 'Browser'>('query_initiation');
+  const query_initiation_service = storage.get<string>('query_initiation_service');
   const query_username = storage.get<string>('query_username');
   const query_password = storage.get<string>('query_password');
 
@@ -139,8 +140,8 @@ export const queryGraphData = async (params: IStatement) => {
   if (query_initiation === 'Browser') {
     return queryGraph(_params);
   }
-  if (query_initiation === 'Server') {
-    return await fetch('/graph/query', {
+  if (query_initiation === 'Server' && query_initiation_service) {
+    return await fetch(query_initiation_service, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',