Django 와 SB Admin을 이용한 Yara GUI Interface 만들기(12)

1.Dashboard 사용

1). Count사용

sbadmin은 아래 그림처럼 그래프 및 카운터 등을 제공해준다.

그림1. SBAdmin Dashboard

count는 django ORM 로 카운트를 사용하고 그래프는 ajax를 chart.js와 연결하여 사용해야 한다.

위의 26 new messages 한부분을 전체 datatables의 카운트로 바꿀려고 한다. 전체 count를 위해선 views.py에서 dashboard의 함수에 아래 내용을 추가해준다.

count는 django_sb_admin.objects.count()를 사용하여 진행한다.

그림2. count ORM

위의 내용은 django_sb_admin의 전체 카운트를 세어 sbadmincount변수에 저장한다는 내용이다. 그리고 render를 사용하여 sbadmincount를 sb_admin_dashboard.html 템플릿에 전송한다.

그림3. sb_admin_dashboard count 내용 추가

sb_admin_dashboard.html 에 card 부분이 있다. 해당 부분에 New Message 부분 또는 New Ticket 부분이 있는지 확인하여 어떤 카드인지 확인한다. 현재 여기선 new messages 부분을 수정한다. 위의 그림3을 보면은 fa-class 부분이 있다.(맨윗부분) 이부분에 fa-comments가 있는데 이건 해당 new messages의 파랑색 부분이 아이콘을 의미한다.

아래 fa-shopping-cart 및 fa-life-ring 부분의 div 클래스는 삭제한다. 만약 아이콘을 바꾸고 싶다면 fa-comments 을 구글에 검색하여 다른 아이콘 쓸만한게 있는지 검색하고 사용하면 된다.

위의 그림3에서 div 뒤의 sbadmincount 즉 위의 그림2에서 사용한 orm 변수 sbadmincount를 나타내어준다. 그후 a href를 사용하여 YaraE로 href 링크를 걸어둔다. 즉 해당 new messages의 view details를 클릭하면 YaraE(DataTables)로 페이지 이동하게 된다.

그림4. dashboard count 수정완료

해당 내용을 수정하면 위와 같이 datatable의 전체 값을 보고 내용이 반영되는 것을 확인할수 있다.

2).charts.js로 그래프 표현하기

sbadmin은 기본적으로 charts.js를 사용한다. 이 charts.js는 기본적으로 jqeury를 사용한다. 다만 jquery는 html로 변수를 변경은 가능하지만 django에서 쓰여진 파이썬 변수는 받지 못한다. 이를 해결하기 위해서는 json을 사용해야 한다. 일반적으로 rest api를 사용하는데 rest api는json형태이기 때문에 여기서는 json형태로 제작해 볼려고 한다. rest api는 단지 json에서 로그인 형태 및암호화 형태의 api 임으로 큰 의미는 없다.

[charts.js 동작과정] URI 파라미터로 데이터를 json 형태로 전송 ==> ajax로 받음(jquery로는 받지 못함) ==>charts.js로 데이터 받기

위와 같은 형태로 동작하게 된다.

먼저 json형태로 데이터를 전송하는 방법이다.

views.py 에서 다음과 같이 json 모듈을 import 한다.

그림5. sbadmin json import

그후 get_data라는 데이터를 하나 만들고 다음과 같이 코드를 입력한다.

여기에서는 총 세개의 카운트를 센다. Yara에서 탐지된 룰그룹중 malware/trojan/callback이라는 그룹들을 각각 카운트를 따로 세어서 sadata를 이용하여 JsonResponse로 전송한다.

그림6.chart data url전송

get_data를 받기 위해 아래의 그림처럼 get_data데이터를 호출할 url를 편집한다.(urls.py)

해당 get_Data는 요출할때 api-data를 변수를 요청할경우 get_data를 변수를 요청한다.

그림7.urls.py getdata호출

다시 dashboard.html에서 chart 부분을 찾는다. fb-chart-area 부분의 상위 div를 "url-endpoint=" {% url 'api-data' %}" 를 추가한다.

그림8. dashboard.html에서 api-data 불러오기

이부분을 chart 스크립트로 불러오는 형식이 된다.

이제 static의 js파일의 demo부분으로 들어간다. 아래 그림9처럼 chart-area-demo가 있다. 이것은 area 차트가 있는 곳이고 chart-bar-demo는 바 차트가 있는 곳이다. chart-pie-demo는 pie차트가 있는 곳이다. 위의 sb_admin_dashboard.html에서 fa-chart-area로 되어 있는 것을 볼수가 있다. 이것을 보고 area차트인 것을 확인할수 있다.

그림9. chart-area-demo.js 설정

해당 chart-area-demo.js로 들어가서 아래 내용으로 바꾸어 준다.

var endpoint는 api-data의 데이터를 불러오는 것

아래 내용은 ajax로 통신하는 get으로 /api/data를 요청하고 해당 데이터의 sadata를 받아온다. sadata는 아까 get_data에서 labels 및 defaultData(malcount, trojancount, callbackcount)가 저장되어 있다.

그림10. chart.js 확인

해당 sadata.labels에 labesl 변수에 저장하고 sadata.defaultData에 defaultData변수에 저장한다.

이후 data 영역(chart.js의 표시영역)에 data: defaultData와 labels:labels로 그래프를 꾸며주게 된다.

해당 부분을 저장하고 나오고 dashboard 메뉴의 브라우저에 다시 들어가게 되면은 아래 그림처럼 되어 있는 것을 확인할수 있다.

그림11. chart area 수정부분

해당 chart는 여러가지 사용이 가능하며 ajax로 불러와서 사용하면 누구든지 쉽게 이용이 가능하다.

다음시간에는 마지막인 login에 대해서 이야기후 마무리 짓도록 하겠다.

from http://zerosin13.tistory.com/19 by ccl(A) rewrite - 2020-03-23 22:54:11