[2021.06.02~10] 인턴 +93~99 kibana(7.13.0)에서 모든 로고를 커스터마이징

[2021.06.02~10] 인턴 +93~99  kibana(7.13.0)에서 모든 로고를 커스터마이징 

 

 

우선, 나의 블로그를 보면 6월 2일부터 활동을 안 하는 것처럼 볼 수가 있는데, 활동을 안 하려고 한 것은 아니다.

 

이유는 바로 kibana의 로고를 회사로고로 커스터마이징 하기 위해 수많은 Google search , stackoverflow 질문, elastic에서도 질문을 해봤지만, 성공하지 못했기 때문에 게시글을 작성하지 않았다...

 

 

하지만 이제는, 내가 한 것을 적고 나서, 지속적으로 업데이트할 예정이다. (누가 이기나 해보자. 꼭 로고를 내 입맛대로 바꾸고 말 것이다.)

 

 

진행 상황

* 2021.06.02 : 제목 부분 이미지 로고 변경

* 2021.06.02 : 제목 부분 text 변경

* 2021.06.05 : Loading text 변경

* 2021.06.10 : Loading Logo 변경 (개발자 F12로 직접바꿔본 후, 경로들을 모조리 찾아, 해당 코드를 수정했음)

 

 

 

https://discuss.elastic.co/t/how-to-login-screen-change-in-kibana-7-13-0/274950

How to login screen change in kibana 7.13.0?

 

https://stackoverflow.com/questions/67880383/id-like-to-change-the-loading-logo-in-kibana

I'd like to change the loading logo in Kibana

-> 위의 2개의 링크는 오늘 다시 새로 올린 질문들 이다.

 

 

 

https://stackoverflow.com/questions/67831737/how-can-i-change-all-the-kibana-logos-to-other-logos

How can I change all the Kibana logos to other logos?

 

-> 해당 게시글엔 답글이 달려있지만, 버전차이가 나서, 되지 않는다...

-----------------------------------------------------------------------------------------------------------------------------------

 

 

 

* Linux(Ubuntu(21.04))

* elastic version: 7.13.0

 

 

1. kibana에서 브라우저의 나오는 title & image 변경 방법

1. 우선 변경하고자 할 이미지를 구한다.

2. 아래의 링크에서 png 파일을 svg로 변환
https://cdkm.com/kr/png-to-svg

PNG SVG 변환 - PNG 를 SVG 로 온라인에서 무료로 변환하십시오

 

3. 파일 열기 및 수정 (둘중 편한 편집기로 열음)

sudo vi /usr/share/kibana/src/core/server/core_app/assets/favicons/ 
sudo nano /usr/share/kibana/src/core/server/core_app/assets/favicons/

 

* nano 로 열면, 검색 기능까지 편하게 쓸 수 있음

 

기본 (빨간색 부분만 수정 할 것)
/*#__PURE__*/_react.default.createElement("title", null, "Elastic"),

변경 후
/*#__PURE__*/_react.default.createElement("title", null, "Custom_Text"),

 

 

<결과 화면>

 

-----------------------------------------------------------------------------------------------------------------------

로딩 중의 로고와 text 변경방법(로고는 변경 X)

 

파일 열기

 sudo nano /usr/share/kibana/src/core/server/rendering/views/template.js

 

2. 로딩중의 text 변경(빨간색 부분만 변경할 것)

기본

, i18n('core.ui.welcomeMessage', { defaultMessage: 'Loading Elastic'}

 

변경 후

, i18n('core.ui.welcomeMessage', { defaultMessage: 'Loading custom_text'}

 

 

3. 로딩중의 logo 변경(계속 실패)

 

`const logo = _react.default.createElement("svg", {… `

-> 해당 코드를 찾아야 하지만, 파일을 열어보면 없음. 그래서 로고를 변경하지 못함

 

 

 

* 3. 로딩중의 logo 변경(성공)

2021.06.10 해결 함

-> 파일의 경로가 다름.

 

 

* /usr/share/kibana/src/core/server/rendering/views 로 이동 후,  파일명 : logo.js

 

<기존 코드>

const Logo = () => /*#__PURE__*/_react.default.createElement("svg", {
  xmlns: "http://www.w3.org/2000/svg",
  width: "32",
  height: "32",
  viewBox: "0 0 32 32"
}, /*#__PURE__*/_react.default.createElement("g", {
  fill: "none"
}, /*#__PURE__*/_react.default.createElement("path", {
  fill: "#FDD009",
  d: "M11.9338171,13.1522761 L19.2872353,16.5080972 L26.7065664,10.0005147 C26.8139592,9.46384495 26.866377,8.92859725 26.866377,8.36846422 C26.866377,3.78984954 23.1459864,0.0647302752 18.5719941,0.0647302752 C15.8357526,0.0647302752 13.2836129,1.41337248 11.7323847,3.67480826 L10.4983628,10.0839872 L11.9338171,13.1522761 Z"
}), /*#__PURE__*/_react.default.createElement("path", {
  fill: "#23BAB1",
  d: "M4.32214501,20.9473399 C4.21475229,21.4841518 4.1596354,22.0410142 4.1596354,22.6044179 C4.1596354,27.1948353 7.89096419,30.9300509 12.4774572,30.9300509 C15.2361432,30.9300509 17.8007837,29.5687528 19.3495969,27.2841381 L20.5743853,20.8965739 L18.9399136,17.7698399 L11.5573744,14.401505 L4.32214501,20.9473399 Z"
}), /*#__PURE__*/_react.default.createElement("path", {
  fill: "#EE5097",
  d: "M4.27553714,8.20847294 L9.31503995,9.3995555 L10.4190826,3.6639867 C9.73040545,3.1371289 8.88035513,2.84874358 8.00601361,2.84874358 C5.81596922,2.84874358 4.0348979,4.63252339 4.0348979,6.82484908 C4.0348979,7.30904633 4.11572655,7.77333532 4.27553714,8.20847294"
}), /*#__PURE__*/_react.default.createElement("path", {
  fill: "#17A7E0",
  d: "M3.83806807,9.40996468 C1.58651435,10.1568087 0.0210807931,12.3172812 0.0210807931,14.6937583 C0.0210807931,17.0078087 1.45071086,19.0741436 3.5965765,19.8918041 L10.6668813,13.494428 L9.36879313,10.717795 L3.83806807,9.40996468 Z"
}), /*#__PURE__*/_react.default.createElement("path", {
  fill: "#92C73D",
  d: "M20.6421734,27.2838537 C21.3334075,27.8156885 22.1793383,28.1057803 23.0428837,28.1057803 C25.232786,28.1057803 27.0138574,26.3228537 27.0138574,24.130528 C27.0138574,23.6470417 26.9331708,23.1827528 26.7732181,22.7477573 L21.7379769,21.5681931 L20.6421734,27.2838537 Z"
}), /*#__PURE__*/_react.default.createElement("path", {
  fill: "#0678A0",
  d: "M21.6667227,20.2469532 L27.2099485,21.5446872 C29.4623545,20.7995495 31.0277881,18.6382239 31.0277881,16.2608936 C31.0277881,13.9511092 29.5947487,11.8871917 27.4447635,11.0719486 L20.1946185,17.4303615 L21.6667227,20.2469532 Z"
})));

 

<변경한 코드>

* const Logo = () => /*#__PURE__*/_react.default.createElement("img", {
        src:'http://www.mono-rama.com/mono/top_logo.png',width:'150px'});

 

=> 위에서 적은 기존코드를 다 지우고, 변경할 코드를 붙여주면 됨 (사진 첨부)

 

 

<결과 화면>

----------------------------------------------------------------------------------------------------------------------------------