그래도 Kibana에서 grep 검색을 구현하고 싶은 것 (7.3.2까지)
12451 단어 자바스크립트Elasticsearch키바나
소개
Kibana의 검색 박스(Filters)는 KQL이나 Lucene을 사용할 수 있습니다만, 비엔지니어가 취급하기에는 약간 문턱이 높습니다.
엔지니어라도 상시 이용하지 않으면 검색식의 규칙을 기억하지 않으므로 입력에 시간이 걸립니다.
또, 검색 결과는 Elasticsearch의 디폴트 analyzer에서의 해석 후에 OR 검색(일반적인 스코어 검색)이 되고 있습니다만, 「검색 대상내의 데이터는 파악하고 있어, 히트시키고 싶은 것만」이라고 하는 장면에 있어서는, 간단한 AND에서 grep 검색을 원하는 사람도 일정 수 있는지 생각합니다.
KQL이나 Lucene에서 grep과 같은 단어의 완전 일치에 의한 AND 검색을 하려면 정규 표현식을 사용하면 좋지만 정규 표현식은 일반적이지 않으며 엔지니어를 위한 기술이며 엔지니어에서도 번거로운 입력 입니다.
Kibana는 이러한 "단지 엔지니어용 도구"로 끝나지 않기 때문에 좀 더 비 엔지니어 측의 감정에 달라 붙어 간단한 UI를 제공해야합니다. 라고 생각했습니다.
요컨대, Kibana의 Filters가 감각적으로 사용할 수 없고, 입력한 단어로 무엇 검색하고 있는지 모르기 때문에 로직이 명확한 검색을 제공하고 싶습니다.
전제 환경
RSS (뉴스 기사)를 Node-RED + Elasticsearch + Kibana로 시각화) 구축
HTML+CSS 만들기
사용하는 기술은 그리 어렵지 않습니다. HTML과 CSS를 만드는 것입니다.
원래, Kibana는 Angular를 이용하고 있어, URL의 「_g(global)」에 기간 지정, 「_a(application)」에 검색식을 포함할 수 있게 되어 있습니다.
그 외에도 「embed=true」로 메뉴 등이 숨겨진 매입 모드가 됩니다.
이것만 이해하고 있으면, 나머지는 iframe으로 화면을 나누어 Javascript로 URL을 변화시키면 좋을 뿐입니다.
그래서 작성한 코드는 여기입니다. (돈!)
※가능한 한 짧게 하고 싶습니다.
rss_style.csshtml {
height: 100%;
overflow-y: hidden;
}
body {
font-size: 20px;
background-color: #fff;
height: 100%;
}
form {
height: 100%;
}
iframe {
overflow: auto;
width: 100%;
height: 100%;
border: none;
}
rssnews.html<!doctype html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="./rss_style.css">
<title>RSS News</title>
<script language="javascript">
var url = "http://192.168.1.5:5601/app/kibana#/dashboard/4d7bf080-c68c-11e9-9d3a-035ebedb7e06?embed=true&";
url += "_g=(refreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-";
function search(){
var word_array = document.fullsearch.query.value.split(/ | /);
var openurl = url + document.fullsearch.span.value + "%2Cto%3Anow))";
var query_string = "";
if(document.fullsearch.query.value != ""){
for(var i=0;i<word_array.length;i++){
word = word_array[i].replace('/[-¥/¥¥^$.*+()[¥]{}|＋＊？]/g','¥¥$&');
query_string += (i === 0)? "":" AND ";
query_string += "/.*" + word + ".*/";
}
}
openurl += "&_a=(filters%3A!()%2Cquery%3A'" + encodeURI(query_string) + "')";
window.open(openurl,"kibana");
}
</script>
</head>
<body onload="search()">
<form name="fullsearch" autocomplete="off" onsubmit="search(); return false;">
RSS News
<select name="span" onchange="search(); return false;">
<option value="12M">１年</option>
<option value="6M">６ヶ月</option>
<option value="3M">３ヶ月</option>
<option value="1M">１ヶ月</option>
<option value="1w" selected>１週間</option>
</select>
検索語
<input type="text" name="query" placeholder="単語AND検索">
<input type="submit" name="submit">
<iframe id="kibana" name="kibana" src=""></iframe>
</form>
</body>
</html>
자바스크립트의 변수 'url'을 자신이 사용하는 Kibana 대시보드 URL로 변경합니다.
URL을 확인하는 방법은 Kibana의 대시보드에서 "공유"-"임베디드 코드"로 "저장된 객체"로 체크한 후 "iFrame 코드 복사"하십시오.
방금 만든 rssnews.html을 열면 상단에 검색창이있는 Kibana 화면이 표시됩니다.
검색어 옆의 텍스트 상자에 단어를 입력하고 'return'을 누르거나 '제출' 버튼을 누르면 Kibana의 'Filters'에 정규 표현식으로 AND 검색하는 URL을 생성하여 하단의 Kibana 프레임 표시합니다.
확실히, 검색이 되어 있는 것 같습니다.
그대로 URL로 건네주면 문제가 일어나는 문자는 이스케이프 하고 있습니다만, 일부의 문자는 아직 문제가 일어나는 것 같습니다. 기호이므로 방치하고 있습니다만, 구체적으로는 ※「'&#!+」당입니다.
덧붙여서, URL에서의 Kibana 화면 조작은 기능으로서 보증되고 있는 것이 아닌 것 같고, 버전 업으로 사용할 수 없게 될 가능성도 있는 것 같습니다.
그래도, 이러한 사용법도 되어 버린다고는, Kibana의 가시화 화면은 잘 되어 있다고 감심합니다.
Reference
이 문제에 관하여(그래도 Kibana에서 grep 검색을 구현하고 싶은 것 (7.3.2까지)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Y-Shikase/items/4d9a062cb72cce376a59
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
html {
height: 100%;
overflow-y: hidden;
}
body {
font-size: 20px;
background-color: #fff;
height: 100%;
}
form {
height: 100%;
}
iframe {
overflow: auto;
width: 100%;
height: 100%;
border: none;
}
<!doctype html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="./rss_style.css">
<title>RSS News</title>
<script language="javascript">
var url = "http://192.168.1.5:5601/app/kibana#/dashboard/4d7bf080-c68c-11e9-9d3a-035ebedb7e06?embed=true&";
url += "_g=(refreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-";
function search(){
var word_array = document.fullsearch.query.value.split(/ | /);
var openurl = url + document.fullsearch.span.value + "%2Cto%3Anow))";
var query_string = "";
if(document.fullsearch.query.value != ""){
for(var i=0;i<word_array.length;i++){
word = word_array[i].replace('/[-¥/¥¥^$.*+()[¥]{}|＋＊？]/g','¥¥$&');
query_string += (i === 0)? "":" AND ";
query_string += "/.*" + word + ".*/";
}
}
openurl += "&_a=(filters%3A!()%2Cquery%3A'" + encodeURI(query_string) + "')";
window.open(openurl,"kibana");
}
</script>
</head>
<body onload="search()">
<form name="fullsearch" autocomplete="off" onsubmit="search(); return false;">
RSS News
<select name="span" onchange="search(); return false;">
<option value="12M">１年</option>
<option value="6M">６ヶ月</option>
<option value="3M">３ヶ月</option>
<option value="1M">１ヶ月</option>
<option value="1w" selected>１週間</option>
</select>
検索語
<input type="text" name="query" placeholder="単語AND検索">
<input type="submit" name="submit">
<iframe id="kibana" name="kibana" src=""></iframe>
</form>
</body>
</html>
Reference
이 문제에 관하여(그래도 Kibana에서 grep 검색을 구현하고 싶은 것 (7.3.2까지)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Y-Shikase/items/4d9a062cb72cce376a59텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
