틀린 내용이나 추가할 문장이 있다면 언제든지 메일 주세요.

1. Introduce
Banana for Solr
A Port of Kibana
전수현
suhyunjun@gmail.com

2. What is Banana?
● Banana is the name of the open source port of Kibana 3
available.
● Banana is a tool to create dashboards to visualize data you
have stored in Solr. Commonly used with Logstash for log
data, any content stored in a Solr index is eligible for
visualization in a Banana dashboard.
● Works with all kinds of time series and non-time series data
stored in Apache Solr.

3. What is Banana?
● An AngularJS app(pure javascript, runs in any
browser)
● Make a pretty dashboard with no development
in a couple minutes
● Very user friendly, users can create their own
content

4. Banana Milestone
● Release
– Banana 2.0 : Developing now (based nodejs)
● The goal is to create a rich and flexible UI, enabling users to rapidly develop
end-to-end applications that leverage the power of Apache Solr. Data can be
ingested into Solr through a variety of ways, including LogStash, Flume and
other connectors.
– (Now) Banana 1.5.0: Released on 2 January 2015
– Banana 1.4.0: Released on 15 September 2014
– Banana 1.3.0: Released on 10 June 2014
– Banana 1.2.0: Released on 11 May 2014
– Banana 1.1.0

5. MSSMSS
Banana Structure
IM-MSIM-MSStatsStats
IM-MSIM-MSHistogramHistogram IM-MSIM-MSFilterFilter
IM-MSIM-MSTableTable
HistsHists
selectselect
http://{IP_ADDRESS}:8983/solr/{COLLECTION}/select
REST
MSSMSS
Solr
Solr
Client
ResponseResponse
MSSMSS
REST
Solr
IM-MSIM-MSQueryQuery
IM-MSIM-MSTermTerm
IM-MSIM-MSTimepickerTimepicker
IM-MSIM-MSMapMap
ScatterScatter IM-MSIM-MSTagcloudTagcloud
IM-MSIM-MSFacetFacet
1
2
5
4
3
BananaBanana

6. Code Structure
1. editor.html
UI for panel's settings page
2. module.html
UI for displaying panel on dashboard
3. module.js
Logics of the panel

7. AngularJS 'Data Binding'
Data Binding in Classical Template Systems Data Binding in Angular Templates

8. AngularJS References

9. AngularJS References

10. AngularJS References

11. Code Architecture
main.html
css
require.js
require.config.js
1. ng-controller
'dashLoader'
(dashLoader.js)
2. ng-init
Init()
3. ng-include
'app/partials/dashLoader.html'
call
dashLoader.html
app/partials/solrSettings.html
app/partials/dasheditor.html
call

12. Code Review 0
1. require.config.js -> shim 차이점 (AMD(Asynchronous Module Definition))
AMD(Asynchronous Module Definition)는 비동기식으로 자바스크립트를 로딩하는 방식이다. 쉽게 말해서, 여러 JS 파일들을 하나씩 차례로
읽지 말고, 동시다발적으로 읽자는 얘기고, 그러면 당연히 여러 파일을 전부 다 읽는 데 필요한 시간이 줄어들 수 있다는 얘기다. 특정 모듈을
define 이라는 함수로 선언한 수 있고, 그 모듈은 필요한 모듈1과 필요한 모듈2를 필요로 하는 상황이다. 이 모듈을 쓰고자 한다면, RequireJS
가 그 모듈들을 로드한 뒤에 이 모듈 선언 함수 부분을 실행한다. 즉, 의존성을 쫓아 로드할 수 있다.
비동기로 동시다발적으로 로드하고, 의존성이 있는 경우에는, 그 의존하는 모듈이 로드된 다음에 해당 코드를 실행할 수 있으므로, 로드 순서에
따른 문제도 피할 수 있고, 전체 로딩 시간은 짧아지는 효과를 노리는 것이다.
게다가, 선언만 해놓고, 실제로 쓰지 않는다면, 불필요하게 읽지 않으므로, 웹사이트의 전반적인 속도가 빠르게 느껴질 수도 있다. 예를 들어, 웹
사이트 일부에 D3.js를 쓰는 경우, 의존성 선언을 해놓고, 필요한 부분에서만 dependency를 걸어서 사용하면, 꼭 필요한 경우에만 로딩되게 할
수 있다.
출처 : http://hatemogi.com/holiday-project-day-19/
참고자료
http://helloworld.naver.com/helloworld/textyle/591319
http://requirejs.org/docs/api.html

13. Code Reveiw 0
2. require(['app'], function () {}) 구조 파악
관련 라이브러리들은 require.config.js 에서 paths 에 모듈 이름을 정의하여 해당 모듈의 경로와 매핑을 하는데,
여기에 정의하여 실행시키는 방법도 있지만, 해당 파일에서 직접 <script>require(['merong'], function () {})</script> 를 사용하여
호출하면 require.config.js 에 정의되어 있는 모듈보다 가장 빨리 실행된다.
물론 이 곳에 정의되어 있는 모듈들을 <script>require(['merong'], function () {})</script> 를 통하여 실행시킬 수도 있다.
main.html
<script src="vendor/require/require.js"></script>
<script src="app/components/require.config.js"></script>
<script>require(['app'], function () {})</script>
<script>require(['suhyun'], function () {})</script>
<script>require(['merong'], function () {})</script>
app.js : not defined anywhere, it is in path(app/app.js)
suhyun.js : not defined anywhere, it is in path(app/suhyun.js)
merong.js : defined paths in a require.config.js
Run
require.js:552 handler require mod require : undefined
2015-03-11 10:17:27.109require.js:553 handler require mod map : [object Object]
2015-03-11 10:17:27.117merong.js:8 3. call merong.js.....................................................
2015-03-11 10:17:27.118suhyun.js:9 2. call suhyun.js.....................................................
2015-03-11 10:17:27.355app.js:23 1. call app.js.....................................................

14. Code Reveiw 0
3. <body ng-cloak> 사용, 미사용 차이점
ngCloak은 어플리케이션이 로딩되고 있는 동안 컴파일되지 않은 것들을 웹 브라우저에서 짧은시간에 보여지는
것으로 부터 angular html 템플릿을 예방하는데 사용한다.
html 템플릿에서 로딩하기 위하여 깜박거리는 효과를 피하기 위해 사용한다.
ng-cloak 삽입
ng-cloak 제거
정지

15. Code Review 1
● app/components
– extend-jquery.js
– kbn.js
– require.config.js
– settings.js
– underscore.extended.js

16. Code Review 2
● app/controllers
컨트롤러는 특정 HTML 요소와 연결되어 있다. 컨트롤러에는 데이터와 함수가 있는데 함수를 통해 컨트롤러는 HTML과 상호작용할 수도 있으며 다른 서비스 객
체와 상호작용할 수도 있으며 서버와의 통신을 할 수도 있다.
ng-controller 지시자를 사용해 div와 컨트롤러 함수를 연결시킬 수 있다. 컨트롤러는 기본적으로 $scope라는 인자 한 개를 받는다. $scope는 html
과 상호작용하는 데 필요한 모든 데이터를 갖고 있다. $scope 는 DOM의 현재 요소/영역을 참조하며(this 와는 다르다), 요소안의 데이터와 로직을 주시하는
아주 멋진 관찰 기능을 가지고 있다. 이 기능으로 DOM에 자바스크립트 public/private 스코프를 멋지게 만들 수 있다.
$scope 개념이 처음에는 조금 이상해 보일지 몰라도 서버로부터 DOM을 만드는 아주 좋은 방법이다(정적 데이터인 경우도 역시)! $scope에 함수를 넣을
수도 있고 HTML에서 함수를 호출하게 할 수도 있다.

17. Code Review 3
● app/dashboards
– logstash.js

18. Code Review 4-1
● app/directives
Angular의 디렉티브는 자신만의 태그와 속성을 만들어 HTML을 확장할 수 있게 해준다. 디렉티브의 가장 간단한 형
태는 애플리케이션이 필요한 곳에 여러 번 사용할 수 있는 작은 HTML 조각 형태다. 디렉티브를 사용하면 애플리케
이션에 별다른 노력없이도 쉽게 DOM을 주입하거나 사용자 정의 DOM의 상호작용을 적용할 수 있다. 디렉티브는
DOM 컴포넌트를 포함해서 많은 부분에 유용하다. ng-show 나 ng-hide 를 생각해본적이 있다면 그게 바로 디렉티
브다(DOM을 주입하지는 않지만).
또한 디렉티브는 AngluarJS의 Shadow DOM 이라고 할 수 있다. Shadow DOM은 DOM의 구조를 가지고 있으나
외부에는 노출되지 않은 DOM을 말하며 DOM의 구조를 캡슐화할 때 사용한다. 일반적인 외부의 style은 적용되지
않고 Shadow DOM을 추가하거나 접근하기 위해서는 별도의 방법이 필요하다.
참고 : http://toddmotto.com/creating-an-angularjs-directive-from-one-of-your-existing-plugins-scripts/

19. Code Review 4-2
● app/directives
restrict: 필수로 입력해야하는 값이며 4가지 값이 있다. ‘A’라고 지정하면 속성 으로만 사용할 수 있다는 의미이고 ‘E’는 요소, ‘C’는 클래스, ‘M’은 주
석 으로만 사용할 수 있다는 것을 의미한다. 기본 값은 ‘EA’이고 이 처럼 여러 개의 제한을 동시에 걸수도 있다.
(바나나는 'A'를 많이 사용. 가끔 'E'도 사용)
E: 요소. 사용 예: <my-directive></my-directive>
A: 속성. 사용 예: <div my-directive></div>
C: 클래스. 사용 예: <div class="my-directive"></div>
M: 주석. 사용 예: <!-- directive:my-directive -->
link: link 함수는 이벤트 리스너를 추가하고 dom을 갱신하는 역할이다.
replace: 디렉티브에 정의한 DOM의 마크업을 변경할 수 있음을 의미한다. 예제를 보면 처음의 DOM이 디렉티브의 템플릿으로 어떻게 변경됐는지
알 수 있을 것이다.
transclude: 간단하게 말해서 집어넣는 것이다. transclude를 이용하면 기존의 DOM 내용을 디렉티브안에 복사할 수 있다. ‘Click me’라는 문자열이 렌
더링될 때 디렉티브로 옮겨진 것을 봤을 것이다.
template: 템플릿은 주입할 마크업을 의미한다. HTML의 아주 작은 일부분을 정의할 때 특히 좋다. 주입된 템플릿은 Angular로 컴파일되며 이로 인해
handlebar 템플릿 태그도 사용할 수 있다.
templateUrl: template 속성과 비슷하지만 <script> 태그 혹은 파일을 지정할 때 사용한다. HTML의 일부분을 다른 파일로 관리할 필요가 있을 때 템플
릿 파일의 URL로 파일 이름과 경로(보통 templates 디렉토리)를 표시해주면 된다. 출처 :https://docs.angularjs.org/guide/directive

20. Code Review 5
● app/filters
필터는 배열의 데이터와 함께 사용하며 루프 밖에서도 사용 할 수 있다. 데이터를 순회하면서 특정 조건에 만족하는 데이터만 추리고 싶을 때 필터를 사용하면 된다. 예를 들
어 <input>에 입력된 값으로 사용자를 추리고 싶을 때처럼 말이다. 필터를 사용하는 방법은 컨트롤러 안에 선언하거나 메서드로 정의해서 사용해도 된다.

21. Code Review 6
● app/services
서비스는 비지니스 로직이 있거나 데이터를 처리하는 클래스이다.
컨트롤러는 단순히 함수였다면 서비스는 객체를 반환하는 함수이다. 이 말은 원한다면 서비스에 private 메서드를 추가할 수도 있다는 의미다.

22. Code Review 6
● app/services

23. Code Review 6
● app/services
– module.service() : 싱글톤으로 사용
– modeul.factory() : 객체 리터럴이나 복잡한 기능 적용 시 사용
서비스는 비지니스 로직이 있거나 데이터를 처리하는 클래스이다.
컨트롤러는 단순히 함수였다면 서비스는 객체를 반환하는 함수이다. 이 말은 원한다면 서비스에 private 메서드를 추가할 수도 있다는 의미다.

24. Code Reveiw 7
● app/panels/hits
– editor.html
– module.html
– module.js

25. References
● http://www.slideshare.net/lucidworks/visualize-solr-data-with-banana-prese
nted-by-andrew-thanalertvisuti?next_slideshow=1
● http://www.slideshare.net/CasertaConcepts/bdwmeetupjuly-solr
● http://soomong.net/blog/2014/01/20/translation-ultimate-guide-to-learning-an
gularjs-in-one-day/

26. EOF

27. EOF