Dashing 구조 분석을 통해서 Dashing 용 신규 Widget 을 만드는 방법을 알아 보겠습니다.

1. 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 에 대한 지식이 필요합니다.

2. Dashing 폴더 구조

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

$ dashing new my-dashboard

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

폴더명설명
assets기본적인 Dashing 구성 component 파일.
dashboards
  • dashboard 구성을 위한 ERB (Embeded Ruby) Template 파일들로서 정적 HTML Tag 방식으로 각 Widget의 초기 Layout 이나 위치를 설정하는데 이용한다. 단, Mouse 를 이용해서 Widget 의 배치를 변경한 후에는 변경한 후의 위치를 해당 dashboard 의 ERB 파일에 명시적으로 수정해 줄 필요가 있음.
  • Dashboard 의 전체 크기를 감안해서 개별 Widget 의 크기를 지정.
  • 사용할 Widget Type 과 Data 명을 정의.
  • 주요 변수:
    • Dashing.gridsterLayout: 전체적인 Widget 배치 정의 (Column & Row 의 배결)
    • Dashing.widget_base_dimensions: Widget 하나의 크기 (WxH px 단위)
    • Dashing.numColumns: 한 줄당 열(column)의 개수
    • data-row & data-col: Dashboard 에서의 해당 Widget 의 위치. 단, Dashing.gridsterLayout 을 사용하는 경우, data-row=1, data-col=1 로 지정함.
    • data-sizex & data-sizey: Dashboard에서 Widget 이 차지하는 공간의 크기로 Dashing.widget_base_dimensions 크기가 data-sizex=1, data-sizey 의 크기이다. 예를 들어, 세로로 2칸 차지는 data-sizey=2, 가로로 2칸 차지는 data-sizex=2 으로 지정함.
    • data-id: Data 구별하기 위한 이름. Unique 하지 않아도 되지만 동일한 이름을 가지는 Data 는 동시에 갱신됨.
    • data-view: Widget 형태 지정. Number (숫자형), List (목록형), Text (문자형) 등등
    • 기타: data-title, data-class 등, 사용하는 Widget에서 추가적으로 필요한 data 와의 binding 을 위한 keyword 지정.
jobs
  • ruby rufus-scheduler 기반의 실행 파일들로 실제 Data 를 생성하거나 수집해서 dashboard 에 명시한 Widget 으로 Data 를 전달(Push)하는 역할을 수행. Data 전달은 JSON 형식임.
  • Data 전달 함수인 send_event 의 Data 형태는 사용하는 Widget 종류에 따라 달라짐. 전달할 Data 가 많은 경우,  Array of Hash 형태로 만드는게 유리함.
    (기본 형태)  send_event ( <data-id>, { data1: value1, data2: value2 } )
    (Hash data 형태) send_event ( <data-id>, { data1: value1, data2: array_of_hash } )
widgets
  • Number (숫자형), List (목록형), Text (문자형) 등 각종 Widget 형태를 정의하는 파일.
  • 각 Widget 은 Data 전처리와 ERB 의 data 와 연결(binding) 위한 Coffee script, 출력용 HTML, 그리고, SCSS Stylesheet 파일로 구성됨.
  • 동일한 숫자 Widget 이라고 하더라도 색상이나 숫자 크기, 배경색, 설명 문구 등을 추가로 전달할 수 없는 widget 이라면 기존 Widget을 복사한 후, 별도의 Widget으로 만든 후에 사용해야 함. 예를 들어, Number 을 복사해서 Number2 Widget 을 만들 수 있는데 이 때, coffee, html, scss 파일의 Widget Name 을 원하는 Widget 명으로 수정해야 함.

3. Dashing 구성을 위한 Workflow 의 예

  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 내용을 확인합니다. 아래와 같은 화면이 나오면 성공입니다.

4. 기존 Widget 으로 부터 신규 Widget 만들기

위에서 설명한 대로 기존의 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