Dashing 구조 분석

시스템/서비스 운영을 하는데 있어서 기본적으로 Dashboard 를 구성해서 사용합니다.  다양한 측정 Metric 을 적절한 Widget/Chart 를 이용해서 하나의 화면에서 모니터링이 가능하도록 하는 것입니다. Dashboard 는 가능하면 직관적인 데이타와 배치, 사용자별 구성이 가능한 것이면 좋습니다. 요즘에는 Dashboard 만을 독립적인 SaaS 서비스로 제공하는 업체도 늘어나고 있습니다. 그만큼 Dashboard 가 중요한 비중을 차지하고 있는 것이라 할 수 있겠습니다.

Dashing 에 대해…

Dashing 은 Dashboard 를 쉽게(?) 관리자 입맛대로 구성이 가능한 일종의 Dashboard Platform 이라고 할 수 있습니다. 2016년 처음으로 Dashing 을 알고서 직접 서비스에 적용을 해 보았는데 초기에 동작을 이해하지 못해서 고생을 했었습니다. 게다가 아쉽게도 작년 5월달로 개발이 완전 종료하였기에 다음 버전은 기대하지도 못합니다. 그나마 다행인 것은 Ruby 기반이라서 OS 버전 의존성이 낮기에 그나마 오랜 동안 사용할 수 있지 않을까 기대하고 있습니다.

간략하게 Dashing 의 특징을 정리해 보면 다음과 같습니다.

• Ruby 기반의 Dashboard Framework
• Sinatra (Ruby로 만든 web application library 로 Rack-compliant), Batman.js (MVC framework for client-site app) 적용
• 다양한 Widget 을 이용해서 쉽게 Dashboard 구성 가능.
• 기존 Widget 을 수정한 추가 Widget 작성이 쉬움.

Batmat.js 역시 개발이 중지되었으나 사용하는데는 문제가 없다.

※ Ruby 를 기반으로 만들어진 Framework 이므로 Ruby 에 대한 지식이 필요합니다.

Dashing 을 설치한 후, ‘dashing’ 명령을 이용해서 새로운 dashboard 를 만들 수 있습니다.

$ dashing new my-dashboard

Dashing dashboard를 새로 설치했을 때의 주요 폴더는 다음과 같습니다.

1. 숫자(Number) 형 Widget 인 d1 (data-id=d1), 문자열 표시(Text)형 Widget 인 d2 (data-id=d2) 를 표시하기 위한 새로운 dashboard template 인 “test.erb” 를 만듭니다. 사용하고자 하는 Widget 이 없거나, 기존 Widget 의 내용을 수정하여 사용하고자 한다면 Widget 을 먼저 작성해야 합니다.

   $ dashing generate dashboard test

   아래는 test.erb 의 내용입니다.

   <div class="gridster">
     <ul>
       <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
         <div data-id="d1" data-view="Number"></div>
       </li>
       <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
         <div data-id="d2" data-view="Text"></div>
       </li>
     </ul>
   </div>

2. 숫자형 Data d1 을 위한 Job 파일인 job4d1.rb, Text형 Data d2 를 위한 Job 파일인 job4d2.rb 를 작성합니다. 각 Job 파일을 만든 후, Job 파일 내용을 아래와 같이 각각 수정하도록 합니다.

   $ dashing generate job job4d1.rb
   $ dashing generate job job4d2.rb
   

   job4d1.rb 내용

   # :first_in sets how long it takes before the job is first run. 
   # In this case, it is run immediately
   SCHEDULER.every '5s', :first_in => 0 do |job|
       send_event('d1', { title: "Test", current: rand(100), last: rand(100) })
   end

   job4d2.rb 내용

   # :first_in sets how long it takes before the job is first run. 
   # In this case, it is run immediately
   SCHEDULER.every '1h', :first_in => 0 do |job|
       send_event('d2', { text: "Hello world!"} )
   end

3. Dashing daemon 을 실행하면 Scheduler 에 따라서 job4d1.rb, job4d2.rb 가 실행되면서, 결과 Data를 test.erb 로 전달합니다.

   $ dashing start
   

4. http://<dashing server>:3030/test 로 접속해서 dashboard 내용을 확인합니다. 아래와 같은 화면이 나오면 성공입니다.

위에서 설명한 대로 기존의 Widget 과 다른 색상이나 글씨 크기, 표시 방식 등을 가지는 Widget 이 필요한 경우, 기존 Widget 을 수정하지 말고, 별도의 Widget 을 만들어 사용해야 하는데 이 때, 기존 Widget 을 기반으로 수정하여 사용할 수 있습니다. 예를 들어, ‘Number‘ widget 을 이용해서 ‘Number2′ 라는 Widget 을 만는다고 가정해 보겠습니다.

• 기존 Number Widget 폴더를 복사.

  $ cd widgets
  $ cp -r numbers number2

• 수정할 widget 의 파일명을 새로운 widget 이름과 동일하게 변경. number → number2 로 수정하는 예.

  $ cd number2
  $ mv number.coffee number2.coffee
  $ mv number.html number2.html
  $ mv number.scss number2.scss

• number2.coffee script 의 class 명칭을 신규 Widget 이름과 동일하게 변경. 아래는 원본과 수정한 두 파일을 비교해 본 내용입니다.

  $ diff  ../number/number.coffee number2.coffee
  1c1
  < class Dashing.Number extends Dashing.Widget
  ---
  > class Dashing.Number2 extends Dashing.Widget

• number2.scss 의 class 명칭을 신규 Widget 이름과 동일하게 변경.

  < .widget-number {
  ---
  > .widget-number2 {

• number2 파일 내용 중에서 원하는 설정을 변경. 예를 들어,  number2.scss 의 수치(Value) 표시 글씨 크기(font-weight & font-size)를 변경하면 다음과 같은 결과 화면을 보실 수 있습니다.

  * number.scss:

  .value {
    color: $value-color;
  }

  * number2.scss:

  .value {
    font-weight: 500;
    font-size: 50px;
    color: $value-color;
  }

• 결과 화면. 

  Number	Number2