Merge pull request #484 from GraphScope/update-importor

feat: update dockerfile

Author: pomelo-nwu

.github/workflows/docker-publish.yml

@@ -0,0 +1,95 @@
+name: Publish Docker Container
+
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+
+env:
+  # Use docker.io for Docker Hub if empty
+  REGISTRY: ghcr.io
+  # github.repository as <account>/<repo>
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      # This is used to complete the identity challenge
+      # with sigstore/fulcio when running outside of PRs.
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Install the cosign tool except on PR
+      # https://github.com/sigstore/cosign-installer
+      - name: Install cosign
+        if: github.event_name != 'pull_request'
+        uses: sigstore/cosign-installer@59acb6260d9c0ba8f4a2f9d9b48431a222b68e20 #v3.5.0
+        with:
+          cosign-release: 'v2.2.4'
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      # Set up BuildKit Docker container builder to be able to build
+      # multi-platform images and export cache
+      # https://github.com/docker/setup-buildx-action
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+
+      # Login against a Docker registry except on PR
+      # https://github.com/docker/login-action
+      - name: Log into registry ${{ env.REGISTRY }}
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@343f7c4344506bcbf9b4de18042ae17996df046d # v3.0.0
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      # https://github.com/docker/metadata-action
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@96383f45573cb7f253c731d3b3ab81c87ef81934 # v5.0.0
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      # Build and push Docker image with Buildx (don't push on PR)
+      # https://github.com/docker/build-push-action
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@0565240e2d4ab88bba5387d719585280857ece09 # v5.0.0
+        with:
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          platforms: linux/amd64,linux/arm64
+
+      # Sign the resulting Docker image digest except on PRs.
+      # This will only write to the public Rekor transparency log when the Docker
+      # repository is public to avoid leaking data.  If you would like to publish
+      # transparency data even for private images, pass --force to cosign below.
+      # https://github.com/sigstore/cosign
+      - name: Sign the published Docker image
+        if: ${{ github.event_name != 'pull_request' }}
+        env:
+          # https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions#using-an-intermediate-environment-variable
+          TAGS: ${{ steps.meta.outputs.tags }}
+          DIGEST: ${{ steps.build-and-push.outputs.digest }}
+        # This step uses the identity token to provision an ephemeral certificate
+        # against the sigstore community Fulcio instance.
+        run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}

Dockerfile

@@ -4,13 +4,14 @@ FROM node:18-alpine AS builder
 # 设置工作目录
 WORKDIR /app
 
-# 安装 Git 和 pnpm
-RUN apk add --no-cache git && \
-    npm install -g pnpm
+# 安装 pnpm
+RUN npm install -g pnpm
+
+# 复制当前目录的内容到容器中
+COPY . .
 
 # 从 Git 仓库中克隆项目
-RUN git clone --depth=1 https://github.com/GraphScope/portal.git . && \
-    pnpm install && \
+RUN pnpm install && \
     npm run ci
 
 # 清理不必要的文件
@@ -32,15 +33,15 @@ WORKDIR /app/server
 # 安装proxy的依赖
 RUN npm install
 
-# # # 设置环境变量
-# ENV PORT=8888
-# # ENV COORDINATOR=http://127.0.0.1:8080
-# # ENV CYPHER_ENDPOINT=neo4j://127.0.0.1:7687
-# # ENV GREMLIN_ENDPOINT=ws://127.0.0.1:12312/gremlin
+# 设置环境变量
+ENV PORT=8888
+ENV COORDINATOR=http://host.docker.internal:8080
+ENV CYPHER_ENDPOINT=neo4j://127.0.0.1:7687
+ENV GREMLIN_ENDPOINT=ws://127.0.0.1:12312/gremlin
 
-# # 暴露端口
-# EXPOSE $PORT
+# 暴露端口
+EXPOSE $PORT
 
 # 在容器启动时运行的命令
-# CMD ["sh", "-c", "npm run dev -- --port=${PORT} --coordinator=${COORDINATOR} --cypher_endpoint=${CYPHER_ENDPOINT} --gremlin_endpoint=${GREMLIN_ENDPOINT}"]
+CMD ["sh", "-c", "npm run dev -- --port=${PORT} --coordinator=${COORDINATOR} --cypher_endpoint=${CYPHER_ENDPOINT} --gremlin_endpoint=${GREMLIN_ENDPOINT}"]
 

README.md

@@ -20,17 +20,21 @@ There are two ways to start graphscope portal
 ```bash
 # Pull the image
 docker pull registry.cn-hongkong.aliyuncs.com/graphscope/portal:latest
+```
+
+```bash
 # Run the container
-docker run -it -p 8888:8888 --name my-portal registry.cn-hongkong.aliyuncs.com/graphscope/portal:latest
-# Enter the container and start the service
-npm run dev -- --port=8888 --coordinator=<graphscope_coordinator_endpoint> --cypher_endpoint=<graphscope_cypher_endpoint>
+docker run -it
+--name my-portal
+-p 8888:8888
+-e COORDINATOR=http://host.docker.internal:8080
+registry.cn-hongkong.aliyuncs.com/graphscope/portal:latest
 ```
 
 > Description of Startup Parameters
 
-- `coordinator` is the address of the GraphScope engine
-- `port` is the frontend service port number 8888.
-- `cypher_endpoint` is the query address for the GraphScope Interactive engine, default is neo4j://<graphscope_cypher_endpoint>:7687
+- `COORDINATOR` refers to the GraphScope engine address. If you have also started the GraphScope engine locally using Docker, you can directly use `host.docker.internal:8080` as the `COORDINATOR` parameter.
+- `PORT` is the port number for the frontend service, defaulting to 8888.
 
 ### Building from the source code
 

README.zh-CN.md

@@ -31,18 +31,22 @@ GraphScope Portal 是一款专为 GraphScope 设计的，基于 Web 的用户交
 ```bash
 # 拉取镜像
 docker pull  registry.cn-hongkong.aliyuncs.com/graphscope/portal:latest
+```
+
 # 运行容器
-docker run -it -p 8888:8888 --name my-portal registry.cn-hongkong.aliyuncs.com/graphscope/portal:latest
-# 进入容器，启动服务
-npm run dev -- --port=8888 --coordinator=<graphscope_coordinator_endpoint> --cypher_endpoint=<graphscope_cypher_endpoint>
 
+```bash
+docker run -it
+--name my-portal
+-p 8888:8888
+-e COORDINATOR=http://host.docker.internal:8080
+registry.cn-hongkong.aliyuncs.com/graphscope/portal:latest
 ```
 
 > 启动参数说明
 
-- `coordinator` 是 GraphScope 引擎地址（Interactice 和 Groot）
-- `port` 是前端服务端口号 `8888`.
-- `cypher_endpoint` 是 GraphScope Interactive 引擎的查询地址
+- `COORDINATOR` 是 GraphScope 引擎地址,如果你也在本地用 docker 启动了 GraphScope 引擎，可以直接使用 `host.docker.internal:8080` 作为 `COORDINATOR` 参数。
+- `PORT` 是前端服务端口号,默认为 `8888`.
 
 ### 方式二：使用源码编译（本机或者云主机都可）
 

packages/studio-components/src/Utils/schema.js

@@ -27,7 +27,7 @@
     "react-intl": "^6.6.1",
     "reactflow": "latest",
     "uuid": "^9.0.1",
-    "valtio": "1.12.0",
+    "valtio": "^1.13.2",
     "zustand": "^4.5.5",
     "react": "18.2.0",
     "react-dom": "18.2.0"

packages/studio-graph-editor/package.json

@@ -38,7 +38,7 @@
     "react-dom": "18.2.0",
     "react-intl": "^6.6.1",
     "uuidv4": "latest",
-    "valtio": "latest"
+    "valtio": "^1.13.2"
   },
   "publishConfig": {
     "access": "public"

packages/studio-graph/package.json

@@ -41,17 +41,29 @@ const CommonNeighbor: React.FunctionComponent<INeighborQueryProps> = props => {
     };
   });
 
+  const extraItems =
+    relatedEdges.length > 1
+      ? [
+          {
+            key: `(a)-[b]-(c)`,
+            label: `All Neighbors`,
+          },
+        ]
+      : [];
   const items = [
     {
       key: 'NeighborQuery',
       // icon: <ShareAltOutlined />,
       label: 'NeighborQuery',
-      children: itemChildren,
+      children: [...extraItems, ...itemChildren],
     },
   ];
 
   const onClick = async ({ key }) => {
     emitter?.emit('canvas:click');
+    updateStore(draft => {
+      draft.isLoading = true;
+    });
     const { name, title } = selectNode.properties;
     let script = '';
     if (name) {
@@ -84,9 +96,13 @@ const CommonNeighbor: React.FunctionComponent<INeighborQueryProps> = props => {
         draft.dataMap = getDataMap(newData);
         draft.nodeStatus = nodeStatus;
         draft.edgeStatus = edgeStatus;
+        draft.isLoading = false;
       });
     }
   };
+  if (itemChildren.length === 0) {
+    return null;
+  }
   return (
     <div ref={MenuRef}>
       <Menu

packages/studio-graph/src/components/ContextMenu/NeighborQuery/index.tsx

@@ -32,7 +32,7 @@
     "reactflow": "latest",
     "sql-ddl-to-json-schema": "latest",
     "uuidv4": "^6.2.13",
-    "valtio": "^1.12.1"
+    "valtio": "^1.13.2"
   },
   "devDependencies": {
     "@types/d3-force": "latest",

packages/studio-importor/package.json

@@ -36,7 +36,7 @@
     "@antv/g2": "5.1.13",
     "uuid": "^9.0.1",
     "dayjs": "^1.11.10",
-    "valtio": "^1.12.1",
+    "valtio": "^1.13.2",
     "@graphscope/_test_gremlin_": "^0.1.2",
     "neo4j-driver": "^5.12.0",
     "monaco-editor": "^0.50.0"