• US HQ
  • 3945 Freedom Cir., Suite 260
  • Santa Clara, CA 95054
  • TEL. +1 (408) 352-5165
  • KR HQ
  • A1201 GangSeo Hangang Xi Tower, 401,
  • Yangcheon-ro, Gangseo-gu, Seoul, South Korea
  • TEL. +82-70-4800-3517
  • FAX. +82-70-8677-2552
Github Download

Introduction

AgensBrowser is

AgensBrowser는 웹브라우저를 통해 AgensGraph를 관리할 수 있는 사용자 인터페이스를 제공하여 AgensGraph DB의 각 구성 요소들의 상태를 모니터링하고 제어할 수 있다.
 
주요특징은 다음과 같다.

  • RESTful-API 지원
  • Meta Information 제공 및 자동 갱신
  • Label 생성 및 삭제
  • Cypher 및 Ansi-SQL 입력, 실행, 저장
  • Project Load/Save/Delete 지원
  • Graph 사용 편의성 강화
  • Image Data Export Option 제공
  • Query History 조회

System Requirements

AgensBrowser를 실행하기 위해서 다음과 같은 환경을 갖추어야 한다.

  • Server

    • OS : Windows 8 or higher, OS X 10 or higher, All kinds of Linux/Unix OSes
          2 core minimum requirement for CPUs (intel i5 series)
    • Mem : 8G or higher
    • Java: 1.8
  • Client

    • Browsers : Javascript ES6 Browsers (Chrome, Firefox, Edge, Safari etc.)
      • Internet Explore 미지원

Installation

Environment Setting

  • Java 1.8 설치
  • AgensGraph 설치 (AgensGraph v1.3 이상)
    • AgensBrowser 관리용 DB 설치
    • AgensBrowser Admin 계정 생성
  • binary 준비

    agens-browser-web-1.0

Installation and Startup

  1. 압축파일 해제 및 파일 확인

    • agens-browser-web-1.0.jar
    • agens-browser.config.yml
  2. Yml 파일 수정
    agens-browser.config.yml 파일을 열어 실제 환경에 맞게 접속 정보를 수정한다. Yml 파일에 지정된 graph_path로 접속되며, 로그인 계정은 graph_path의 owner 여야 한다. 서비스 시작시 지정된 graph_path는 변경할 수 없다.
  • server
    • port : AgensBrowser 웹서버 포트
  • logging
    • config : AgensBrowser의 로그 설정으로 현재 폴더 아래의 logs 디렉토리에 날짜별로 생성
  • agens
    • config :
      • query_timeout : query 타임아웃 설정(Default: 600000, 10Min)
    • inner :
      • url : 쿼리 log와 프로젝트 저장 용도로 사용되며 현재 폴더의 agens-db.db로 파일 생성
        (삭제되면 초기 데이터와 함께 다시 생성됨)
    • outer :
      • url
        • IP : 데이터베이스 서버의 IP
        • Port : 데이터베이스 서버의 Port
        • Database : 접속할 데이터베이스명
      • graph_path : AgensGraph에 생성한 graph name
      • username : 접속할 데이터베이스의 user name
      • password : 접속할 데이터베이스의 user password
      • max_rows : 반환할 최대 row수 (1000 이하 권장, 1000건 이상의 데이터를 사용하는 경우에 대해서는 향후 local version을 통해 지원할 예정)
    • jwt :
      • expiration : client 접속 만료 시간 설정(Default: 43200, 12H)
    ## config context path to "/" by setting an empty string
    server:
       port: 8085 -- AgensBrowser 웹서버 포트
    logging:
       config: classpath:logback-agens.xml
    spring:
       pid:
         file: agensbrowser.pid
       main:
         banner-mode: "off"
    agens:
       product:
         name: AgensBrowser-web
         version: 1.0
         hello_msg: AgensBrowser web v1.0 -- hello massage
    config:
       base_path: /api
       query_timeout: 600000 # 1000 ms = 1 sec -- 타임아웃 10분
    inner:
       datasource:
         -- log, project저장을 위한 H2 embedded DB 
         url: jdbc:h2:file:./agens-h2;DB_CLOSE_DELAY=-1;MODE=MySQL 
         username: sa
         password:
         driverClassName: org.h2.Driver
    outer:
       datasource:
         driverClassName: org.postgresql.Driver
         url: jdbc:postgresql://127.0.0.1:6179/northwind?ApplicationName=AgensBrowser
         graph_path: northwind_graph
         username: agraph
         password: agraph
         max_rows: 1000 -- 최대 반환 rows
    jwt:
       header: Authorization # not used -- Token 값이 저장되는 header 항목
       secret: agensBrowserKey -- 사용안함
       expiration: 43200 # unit: sec (12 Hour = 43200 sec) -- Token 타임아웃
  1. 실행파일 생성

    text 파일에 아래의 내용을 기입 후 확장자 .sh(unix) 또는 .bat(window)로 저장한다. (ex. agensbrowser.sh / agensbrowser.bat)

    java -jar agens-browser-web-1.0.jar --spring.config.name=agens-browser.config
  2. 서비스 실행

    $ sh agensbrowser.sh  -- linux
    $ agensbrowser.bat    -- windows

Login

Token 기반 인증방식으로 config 파일에 명시된 AgensGraph 계정(ID/PW)으로 자동 로그인 된다.
Database 접속계정은 admin 계정이어야 한다.  
AgensBrowser에 연결하기 위해 웹 브라우저의 주소창에 아래의 URL을 입력한다.

http://DB_SERVER_IP_ADDRESS:WEB_SERVER_PORT/index.html

로컬 데이터베이스를 사용하고 웹 서버 포트 8085를 사용하는 경우의 예이다.

http://localhost:8085/index.html   

Logout

접속한 브라우저 창을 종료하면 로그아웃되며, config 파일의 expiration 설정으로 client 접속 만료시간 설정이 가능하다.

Screen Layout

로그인에 성공하면 아래의 그림과 같은 메인화면으로 이동한다. 메인화면은 Database 접속 정보 및 메타 정보를 보여주며, AgensBrowser에서 제공하는 기능을 선택하여 사용할 수 있는 메뉴들로 구성되어 있다.

메인 화면은 다음 2가지 영역으로 나누어진다.

  • 메뉴 영역 (①)
    AgensBrowser에서 사용되는 기능을 세부적으로 구분하여 주요 메뉴를 제공한다.
  • 메인 영역 (②)
    실제 작업영역으로 메뉴를 통해 수행한 업무에 대한 제어, 모니터링을 제공한다.

Functions Detail

Main Area

Meta-graph of Graph DB

사용자의 접속 정보 및 AgensGraph의 Graph Meta Data를 보여준다.

Meta Graph는 다음의 항목으로 구성된다.

  • Database
  • Meta Graph
  • Label List
  • Properties of Label

Database

Database 항목은 connection 정보를 보여준다. Total Nodetypes과 Edgetypes는 총 label의 개수이며, 괄호 안의 숫자는 vertex와 edge label에 존재하는 데이터 개수이다.

Meta Graph

Meta 데이터의 vertex label과 edge label의 관계를 그래프로 보여준다. Meta Data의 변경사항은 서비스가 시작된 5분 후부터 3분 마다 자동 갱신된다.

각각의 vertex 및 edge를 선택하여 상세 내역을 확인할 수 있다.

다음은 person이라는 vertex label을 선택했을 때의 결과이다.

  • Label 생성

    Create label 버튼을 누르면 아래의 팝업이 생성되며 새로운 라벨을 생성할 수 있다.

    1. Label Type*
      • vertex/edge를 선택한다.
    2. Name*
      • label의 이름을 기입한다.
        (*필수 기입 항목이며, 최소 3/최대 30자 이내의 a-zA-Z로 시작하는 문자여야 한다.)
    3. DESC (description)
      • label에 대한 설명을 기입한다.

Label List

Vertex와 edge들의 내역을 확인할 수 있으며, remove을 선택하여 vertex 및 edge 레이블을 삭제할 수 있다.

  • label 삭제
    remove의 아이콘을 누르면 아래의 그림과 같이 Label을 삭제하기 전 삭제될 label에 대한 정보를 보여주고 삭제를 진행할 것인지 여부를 묻는다. Label을 삭제하면 관련 데이터 또한 삭제되므로 사용 시 주의가 필요하다. 아래의 OK/CANCEL 버튼으로 삭제를 수행/취소할 수 있다.

Properties of Label

Label의 property 확인이 가능하다.

Query to Graph DB

AgensGraph 데이터베이스에 대한 SQL 및 Cypher 쿼리할 수 있는 기능을 제공한다. 쿼리의 결과는 table 뿐만 아니라 graph 방식으로 데이터를 시각화 할 수 있으며 조회한 그래프에 대한 layout 변경 및 label style 적용, 이미지 export가 가능하다.

Notice: Query to Graph DB 수행중 페이지를 전환하면 작업중인 이전 내용은 저장되지 않는다.

Query to Graph DB는 다음의 항목으로 구성된다.

  • Query
  • Graph Result
  • Table Result
  • Cell Value

Query

AgensGraph 데이터베이스에 대한 SQL 및 Cypher 쿼리를 수행 할 수 있는 기능을 제공한다. 주석은 ’–’으로 작성할 수 있으며, 질의 결과는 그래프창과 테이블을 통해 확인할 수 있다.

Notice: Agensbrowser 접속시 yml에 지정된 graph_path로 로그인되며, graph_path 변경(set graph_path) 명령어는 동작하지 않는다.

다음은 상단의 아이콘에 대한 설명이다.

  • Run ( )

    작성한 쿼리를 실행한다.
    해당 버튼을 누르면 쿼리가 수행되며 result에 수행 결과 또는 에러 메세지를 보여준다.

    • run 수행시

    • 수행완료 시

    • 구문 등의 에러 발생 시

  • Stop ( )

    실행중인 쿼리를 중지한다.

  • New ( )

    New 버튼을 이용하여 새로운 graph file을 생성한다.
    해당 버튼을 누르면 editor 및 result 영역이 초기화 된다.

  • Open ( )

    저장된 sample을 load한다.
    즉시 확인 가능한 샘플을 불러오며, 샘플 데이터는 그래프 사용에 대한 이해를 돕는다.

    를 누르면 프로젝트의 설명을 볼 수 있으며, remvove의 삭제버튼()을 누르면 해당 프로젝트를 삭제할 수 있다. 검색바를 이용하여 프로젝트 검색이 가능하며, 새로고침()도 수행할 수 있다. 프로젝트 선택을 중단하려면 close를 누른다.

  • Save ( )

    작성한 graph file을 저장한다.
    Project의 title, description을 작성하고 submit 버튼으로 저장한다. 단, query, graph만 저장된다.
    현재 작업을 취소하려면 cancel 버튼을 누른다. 저장한 프로젝트는 User Projects에서 확인할 수 있다.

    *Title은 최대 400자, Description은 최대 900자 까지 입력이 가능하다.

    저장했던 project를 수정한 뒤 다시 저장할 때 기존의 쿼리를 덮어쓸지 여부를 확인한다. 기존의 쿼리 수정을 원하지 않는다면 cancel 버튼을 누른다.

Graph Result

수행한 쿼리에 대한 결과를 그래프 형태로 시각화하여 보여준다.

그래프 편집기에서 지원되는 작업은 다음과 같다.

  • Mouse Wheel의 Zoom 기능
  • Neighbor vertex의 Highlight
  • 전체 또는 Select된 부분만 Layout 적용 가능
  • Label 단위의 Style 적용
  • 그래프의 Image Export(PNG) 및 Watermark 기능
  • 테이블 결과중 JSON 객체에 대한 Pretty Format 출력

그래프창의 왼쪽 상단에 위치해 있는 컨트롤러(①)를 이용해 화면을 pan(위치이동) 시키거나 zoom(확대축소) 시킬수 있다. 버튼으로 화면맞춤이 가능하다.

  
다음은 Graph Result 메뉴(②)에 대한 상세 설명이다.

  • Mouse Wheel Zoom ( )

    마우스를 이용한 zoom 기능 사용을 활성/비활성화할 수 있다.

  • Highlight Neighbors ( )

    Neighbor vertex를 구분할 수 있는 highlight 기능을 활성/비활성화할 수 있다. 이 기능으로 인접 vertex(하위 3단계까지) 중 edge의 label이 중복되지 않는 vertex를 neighbors로 선택할 수 있다.

  • Layout ( )

    Graph result를 layout을 선택하여 변경할 수 있다. vertex label(③)를 선택하여 label 단위로도 레이아웃 설정이 가능하다. shift+마우스 드래그로 일부 vertex/edge 선택도 가능하다.

    products는 CIRCLE, category는 BREADTHFIRST를 적용한 예이다.

    다음은 Layout에 대한 상세 설명이다.

  1. GRID: 격자 구조의 그리드 영역에 노드를 배치

  1. RANDOM: 의외의 형태를 발견할 수 있도록 임의로 노드를 배치

  2. BREADTHFIRST: 간선이 많은 노드를 상단에 배치하고 아래쪽에 딸린 노드를 배치하는 너비우선 방식

  3. CIRCLE: 모든 노드들을 원형을 그리도록 배치

  1. CONCENTRIC: 간선이 많은 노드를 중심에 두고 연결된 노드를 바깥쪽에 배치

  2. COSE: 연결된 노드 군집간의 거리를 두어 군집 분포를 알아보기 쉽게 배치

  3. COSE-BILKENT(COSE2): Cose 배치를 수정한 방식

  1. DAGRE: 연결된 노드 군집을 수평으로 배치하여 종류를 구분하기 쉽도록 도움
  • Styling Label ( )

    선택한 label의 title, color, size와 같은 스타일 변경이 가능하다.

    1. Title
      Label의 title을 선택한다. Title을 지정하지 않으면 BLANK로 표시된다.

    2. Color
      Label의 색을 지정한다.

    3. Size
      Label의 크기, 두께를 선택한다.

  • Export ( )

    수행한 결과를 이미지(PNG)로 저장할 수 있다. water-mark 설정이 가능하며, 저장된 이미지의 바탕색이 투명하여 프레젠테이션 자료로 활용하기에 유용하다.

    *Watermark는 최대 30자, File name은 최소 3/최대 30자 이내의 a-zA-Z로 시작하는 문자여야 한다.
  • Refresh ( )

    선택영역을 초기화 할 수 있다.

  • Location Lock
    Vertex를 선택 후 location lock을 설정하면 lock상태의 vertex는 진한 주황색으로 표시된다. Lock을 해제하려면 vertex를 선택하여 lock slide로 해제한다.

다음은 하단의 label(③) 대한 상세 설명이다. vertex/edge의 label 명과 vertex/edge label 개수를 보여준다.

  • vertex label 선택

  • edge label 선택

Graph Result에서는 화면의 빈영역에서 오른쪽 마우스를 누르면 상세 메뉴가 활성화되고, lock,expand, remove, hide 등의 기능을 수행 할 수 있다.

  1. Reverse select : 선택한 vertex/edge 이외의 요소들을 보여준다.
  2. Remove expands : expand 된 vertex/edge 결과를 제거한다.

    반대로 vertex label을 선택하여 확장된 vertex/edge를 확인할 수 있다(수행한 쿼리의 limit를 기준으로 사용할 것을 권장한다).

  3. Unlock all : Lock 상태의 vertex를 모두 해제한다.

  4. Hide unselected : 선택한 vertex/edge 이외의 요소들을 숨긴다. Edge는 vertex와의 관계를 나타내는 것으로 edge를 선택한 후 hide unselected를 선택하면 선택된 edge는 vertex와 함께 hide 된다.
  5. show all : 숨겨진 요소들을 모두 보여준다.

Table Result

수행한 쿼리에 대한 테이블 결과를 보여준다.

Cell Value

테이블 결과 중 property, path를 선택하면 JSON 객체에 대한 값을 조회할 수 있다. 화면 상단의 을 이용하여 Cell Value의 내용을 복사할 수 있다.

History

수행한 Query의 내역과 결과를 조회할 수 있다. User IP로 쿼리를 찾을 수 있다.