[SUPERSET] 대시보드 REACT 임베딩 하는법(동적 쿼리)

 SUPERSET 관련해서, 임베딩 하는 법을 많이 찾아봤는데  자료가 그렇게 많진 않습니다. 그래서 삽질의 삽질을 거듭한 결과, 찾아낸 방법에 대해서 소개드립니다! 제 상황을 말씀드리면, SUPERSET에 있는 대시보드를 외부에 공개해야했고, SUPERSET 서버를 따로 써서 프론트에 임베딩해야하는 상황이였습니다. 이 과정에서 프론트 단에서 동적 쿼리를 전달할 방법이 필요한 상황이였습니다. 그래서 따로 superset 서버를 만들었고, 이 superset 대시보드를 프론트에 임베딩해서 보여줄 계획이였습니다.

 

서버 설정

• OS : Ubuntu 22.04
• Python : 3.10
• Superset : 2.10

 

1. 설치 및 superset_config.py 파일 설정

---

설치 과정은 아래 링크에 적어놓았습니다.

https://dataengineerstudy.tistory.com/189

아파치 슈퍼셋(superset) 소개 및 설치

 

다음으론 대시보드에 대한 추가적인 설정과 Public 사용자에 대한 옵션 설정입니다.

(1) Superset 설치 디렉토리에, superset_config.py라는 파일을 생성합니다. 있는 분도 있고, 없는 분도 계신 것 같습니다. 그럼 그 파일에 이렇게 적어준 뒤에 저장합니다. JINJA 템플릿 언어 관련, 대시보드 관련 설정입니다.

FEATURE_FLAGS = {
	"ENABLE_TEMPLATE_REMOVE_FILTERS" : True	,
	"ENABLE_TEMPLATE_PROCESSING": True,	
	"DASHBOARD_NATIVE_FILTERS" : True,
	"DASHBOARD_NATIVE_FILTERS_SET": True,
	"DASHBOARD_LEVEL_ACCESS" : True,
	"EMBEDDED_SUPERSET": True # 슈퍼셋 대시보드 임베드 가능하게
}
PUBLIC_ROLE_LIKE = "Gamma" # 퍼블릭 권한을 "Gamma" 롤이랑 비슷하게

(2) 이후에 해당 경로를 SUPERSET_CONFIG PATH로 잡아주기 위해서, 다음 명령어를 입력합니다.

export SUPERSET_CONFIG_PATH=/파일경로/superset_config.py

(3) 해당 명령어를 입력한 뒤에 superset을 재실행해줍니다. 아래 run 명령어는 로컬이냐, 클라우드 환경이냐에 따라 다릅니다. 일단 저는 클라우드 환경에서 진행했습니다.

superset init
superset run -h 0.0.0.0 -p 8088 --with-threads --reload --debugger

 

 

2. Public 권한 제한

---

위처럼 하시면, PUBLIC 권한, 즉 로그인 하지 않은 사용자에 대해서 GAMMA 권한을 주게 됩니다. 하지만, GAMMA 권한을 줬을 때, 이미 만들어진 대시보드 목록에도 접근할 수 있어, 불필요한 옵션들이 몇몇 있습니다. 저의 경우엔 해당 대시보드만 볼 수 있게 하고 싶었고, 다른 권한은 주지 않고 싶었습니다.

여기서 허용여부 X인 옵션은 전부 제외 해주면, 후에 대시보드 링크에 접근한 PUBLIC 권한 유저는 그 대시보드만 볼 수 있고, 더 내부엔 접근하기 어렵습니다. 해당 편집은 List Roles 들어가서 하시면 됩니다.

우측 상단 Settings - List Roles

Public 권한 수정

 

3. Jinja 템플릿 활용 동적 쿼리 작성(feat. url_param)

---

일단 차트를 만들 때, 사용되는 쿼리를 동적으로 만들어두는 것이 좋습니다. 하나의 예를 들자면, SQL LAB에서 이런 식으로 작성합니다.

SQL LAB

SELECT *
FROM population
WHERE 1=1
  {% if url_param('placeid') != None %}
  and place_id = {{ url_param('placeid') }}
  {%- endif -%}

기본적으로는 WHERE 1 = 1, 전부 가져오지만, url_parm에 placeid라는 값이 있다면 그 placeid 값을 가져와서 조건을 하나 더 붙여라. 라는 쿼리가 됩니다.

여기서 url_param은 뭐냐면,

대시보드 탭에 들어가면 위쪽 링크에 이렇게 있습니다.

 

여기에 standalone이라던지, 이런 옵션(맨 뒤에 해당 참조 링크는 붙여놓겠습니다)들을 붙여주고 동적으로 쿼리에 넣어줄 변수값을 넣어서 만들어주면,

http://localhost:8088/superset/dashboard/1/?placeid=3&standalone=2&show_filters=0&expand_filters=0

후에 대시보드 임베딩에 사용하게될 url이 됩니다. 이 url에 placeid를 3으로 전달해주면, 저 쿼리에서 place_id = 3이라는 조건이 하나 더 붙게 됩니다. 이렇게 하면 url로 쿼리의 조건을 추가해서 확인할 수 있습니다. 

placeid가 3인 시간별 최대인구

placeid가 5인 시간별 최대인구

 

4. Superset 대시보드 & 리액트 임베딩

---

그럼 이제 저희는 이 대시보드의 링크만 react에서 iframe으로 가져오면 됩니다.

import React from "react"

const Dashboard = () => {

  const placeId = 4 // 백엔드에서 받아온 placeId 삽입
  const dashboardUrl = `http://localhost:8088/superset/dashboard/1/?placeid=${placeId}&standalone=2&show_filters=0&expand_filters=0`;

  return (
    <iframe
      title="Dashboard"
      src={dashboardUrl}
      width="100%"
      height="800px"
      sandbox="allow-same-origin allow-scripts"
    ></iframe>
  )
}

export default Dashboard

이런 식으로 프론트 페이지에 보여질 대시보드를 동적쿼리로 전달해서, 원하는 대시보드를 볼 수 있습니다. 위의 권한 설정으로 인해서, 이 대시보드에 들어온 유저는 다른 작업은 하지 못하고, 대시보드만 볼 수 있습니다. 이 외에 권한을 추가하시려면, 위에서 권한 추가를 하시면 됩니다.

 

5. 대시보드 Published 관련(필수)

---

반드시 임베딩하고자하는 대시보드는 Published가 되어있어야합니다. 기본 값은 Draft 입니다.

 

6. 참고링크

---

• url 전달 옵션 관련

https://superset.apache.org/docs/creating-charts-dashboards/creating-your-first-dashboard/#customizing-dashboard

Creating Your First Dashboard | Superset

 

감사합니다:)