최근에 올린 도베르만(데이터레이크 모니터링 시스템)을 만들 때 Superset을 통해서 UI를 구성하였는데요.
이 과정에 여러가지 기능 중에 Superset의 표 형태 또는 Text Box등에서 hyperlink를 넣는 방법에 대해서 소개하고자 합니다.
대단한 기술은 아니고 HTML의 기능을 통해서 하는 방법을 소개 하고자 합니다.
사용자가 표를 볼때 해당 로그를 바로 볼 수 있도록 hyperlink를 걸어주면 굉장히 만족도가 올라갑니다.
적용 방법
저의 경우 MySQL 데이터베이스에서 데이터를 불러서 표에 보여주는데요.
SELECT 'https://www.naver.com' AS url
UNION ALL
SELECT 'https://www.google.com'
UNION ALL
SELECT 'https://www.daum.net'
위와 같이 각각의 검색엔진 사이트를 UNION 하여 테이블 형태로 만들어줬습니다.
여기서 CONCAT을 이용하여 hyperlink를 만들어줍니다.
SELECT url
,CONCAT('<a href="',url,'" target="_blank">','Click','</a>')AS hyperlink
FROM
(
SELECT 'https://www.naver.com' AS url
UNION ALL
SELECT 'https://www.google.com'
UNION ALL
SELECT 'https://www.daum.net'
)AS A
데이터를 불러 올때 미리 hyperlink를 만들어서 불러오면 Query의 결괏값은 조금 이상하게 나오지만 실제 표에서는 정상적으로 출력됩니다. 결과를 보면 다음과 같습니다.
위와 같이 Query에서는 HTML의 모든 문자가 표시되지만 Superset에서는 Click이라고 표시 됩니다.
물론 위의 Query에서 Click을 다른 이름으로 변경 할 수도 있습니다.
주의 사항
주의 사항으로 Superset에서 Filters를 만들때 hyperlink가 걸려있는 칼럼을 검색에 넣을 경우 Query의 결괏값이 그대로 노출될 수 있습니다. 물론 큰 문제가 아니겠지만, 사용자가 보기에 매우 불편하기 때문에 필터는 다른 칼럼에 걸어 주시는 것을 추천드립니다.
사용자가 보기에 불편하므로, 차라리 위의 표처럼 이름과 hyperlink는 분리하여 컬럼을 만들어 주시는 것을 추천드립니다.