개요

Zabbix에서 관리하는 호스트 그룹 등이 늘어나면 풀다운에서 선택하는 것이 힘들어집니다.
버전이 올라갈 때마다 검색창이 추가되기도 하지만 2.2, 3.0 등 현재도 이용하고 있는 경우에도 유효한 Chrome 확장 기능으로 풀다운에 검색창을 추가하는 방법을 소개합니다.

Chrome의 확장 기능 내에서 완결되므로 Mac, Windows 공통으로 이용할 수 있습니다.

↓ 이런 것을 추가합니다

다양한 파일 준비

적절한 폴더를 만들고 다음 파일을 준비합니다.

icon16,24,128.png
숫자 픽셀 크기의 적절한 이미지를 준비합니다.

jQuery, Select2
각각 본가에서 다운로드합니다.
jQuery
선택2

manifest.json
최소한의 기재를 합니다.
Zabbix URL만 다시 써 주시면.

{
  "manifest_version": 2,
  "name": "Custom UI for Zabbix",
  "description": "ZabbixのUIをカスタム",
  "version": "1.0",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "content_scripts": [
    {
      "matches": ["https://<ZabbixのURL>/zabbix/*"],
      "js": ["jquery-3.3.1.min.js","select2.min.js","script.js"],
      "css": ["select2.min.css"],
      "run_at": "document_end"
    },

script.js
Select2에서 ZabbixUI 풀다운 이벤트와 연동하려면 한 번 필요합니다.

$('#twb_groupid, #groupid, #hostid').select2({width: '350px'});
var tmpData;
$('#twb_groupid, #groupid, #hostid').on("open", function() {
    tmpData = $(this).val();
});
$('#twb_groupid, #groupid, #hostid').on("focus", function() {
    tmpData = $(this).val();
});
$('#twb_groupid, #groupid, #hostid').on("change", function() {
    var $this = $(this);
    if (!tmpData || tmpData != $this.val()) {
        $($this.get(0).form).submit();
    }
});

Chrome 확장 프로그램에 추가

Chrome 확장 프로그램에서 '개발자 모드'를 선택합니다.


다음을 선택하고 이전에 준비한 파일이 저장된 폴더를 선택합니다.


확장 기능이 성공적으로 로드되면 Zabbix 호스트 그룹과 호스트 목록을 선택할 때 입력하여 검색할 수 있는 창이 추가됩니다.

마지막으로

제대로 움직이는 것 같으면 조금 돈이 들지만 Chrome 웹 스토어에 등록하여 사용하는 것이 좋다고 생각합니다.
개발자 모드에서 평상시 사용하는 것은 기분 나쁘군요.

Zabbix 4.0에서는 오이타 좋아지고 있기 때문에, 낡은 Zabbix는 일찍 4.0으로 하는 것이 좋지만.

끝.