Пользовательское оформление

По умолчанию в "Панелях мониторинга" используется логотип Подсистемы, но если требуется использовать собственные элементы брендинга, такие как значок или основной логотип "Панелей мониторинга", можно сделать это, отредактировав opensearch_dashboards.yml или включив собственный файл opensearch_dashboards.yml при запуске кластера Подсистемы.

При повторном запуске "Панелей мониторинга" будут использоваться пользовательские элементы.

Следующие элементы "Панелей мониторинга" с указателями с описанием в таблице 11 можно настраивать.

Чтобы начать использование пользовательских элементов оформления в "Панелях мониторинга" нужно раскомментировать их в разделе файла opensearch_dashboards.yml:

opensearchDashboards.branding:
logo:
defaultUrl: ""
darkModeUrl: ""
mark:
defaultUrl: ""
darkModeUrl: ""
loadingLogo:
defaultUrl: ""
darkModeUrl: ""
faviconUrl: ""
applicationTitle: ""

Затем следует добавить URL-адреса, которые требуется использовать в качестве элементов оформления, в соответствующий раздел. Допустимые типы изображений: SVG, PNG и GIF.

Также доступна настройка темного режима на панелях мониторинга, но сначала нужно указать действительную ссылку на defaultUrl, а затем ссылку на предпочитаемое изображение с помощью darkModeUrl. Если не указать ссылку на darkModeUrl, то панели мониторинга будут использовать предустановленный элемент defaultUrl для темного режима. Необязательно настраивать все элементы оформления, поэтому можно изменить только логотип или любой другой элемент. Можно оставить элементы без изменений, оставив их закомментированными.

В следующем примере показано, как использовать файлы SVG в качестве логотипов, но оставить остальные элементы по умолчанию:

logo:
defaultUrl: "https://example.com/validUrl.svg"
darkModeUrl: "https://example.com/validDarkModeUrl.svg"
mark:
defaultUrl: ""
darkModeUrl: ""
loadingLogo:
defaultUrl: ""
darkModeUrl: ""
faviconUrl: ""
applicationTitle: "My custom application"

Рекомендуется ссылаться на изображения, размещенные на веб-сервере, но если требуется использовать локальные изображения, нужно сохранить их в директории assets и настроить opensearch_dashboards.yml для использования правильных путей. Получить доступ к локальным изображениям можно через директорию ui/assets.

В следующем примере используется порт 5601 по умолчанию, который используется в "Панелях мониторинга", и показано, как ссылаться на локально сохраненные изображения:

logo:
defaultUrl: "https://localhost:5601/ui/assets/my-own-image.svg"
darkModeUrl: "https://localhost:5601/ui/assets/dark-mode-my-own-image.svg"
mark:
defaultUrl: "https://localhost:5601/ui/assets/my-own-image2.svg"
darkModeUrl: "https://localhost:5601/ui/assets/dark-mode-my-own-image2.svg"
loadingLogo:
defaultUrl: ""
darkModeUrl: ""
faviconUrl: ""
applicationTitle: "My custom application"

Сжатый вид заголовка уменьшает его размер и освобождает место на странице, объединяя элементы навигации в одну строку заголовка.

Чтобы задать сжатый заголовок, нужно добавить свойство конфигурации useExpandedHeader в файл opensearch_dashboards.yml и установить значение false, как показано в следующем примере:

opensearchDashboards.branding:
logo:
defaultUrl: "https://example.com/sample.svg"
darkModeUrl: "https://example.com/dark-mode-sample.svg"
mark:
defaultUrl: ""
darkModeUrl: ""
loadingLogo:
defaultUrl: ""
darkModeUrl: ""
faviconUrl: ""
applicationTitle: "my custom application"
useExpandedHeader: false

Сжатый вид заголовка отображается, как приведено в примере указателями на рисунке 54 и описано в таблице 12.

Рисунок 54 — Сжатый вид заголовка

Вид по умолчанию остается близким к традиционному виду с незначительными изменениями, как приведено в примере указателями на рисунке 55 и описано в таблице 13.

Рисунок 55 — Вид по умолчанию

Можно продолжать использовать верхнюю панель заголовка в режиме по умолчанию для пользовательских ссылок навигации (например, пунктов меню и плагинов). Чтобы сохранить эти элементы в верхней панели заголовка в режиме по умолчанию, нужно выполнить следующие действия:

  1. заменить свойство coreStart.chrome.navControls.registerRight(...) на coreStart.chrome.navControls.registerExpandedRight(...), а затем заменить свойство coreStart.chrome.navControls.registerCenter(...) на coreStart.chrome.navControls.registerExpandedCenter(...);
  2. убедиться, что для свойства конфигурации useExpandedHeader явно задано значение true.

Следующий пример конфигурация включает плагин Security и SSL в "Панелях мониторинга" и использует пользовательские элементы оформления для замены логотипа Подсистемы и названия приложения.

server.host: "0"
opensearch.hosts: ["https://localhost:9200"]
opensearch.ssl.verificationMode: none
opensearch.username: "kibanaserver"
opensearch.password: "kibanaserver"
opensearch.requestHeadersAllowlist: [ authorization,securitytenant ]
#server.ssl.enabled: true
#server.ssl.certificate: /path/to/your/server/certificate
#server.ssl.key: /path/to/your/server/key
opensearch_security.multitenancy.enabled: true
opensearch_security.multitenancy.tenants.preferred: ["Private", "Global"]
opensearch_security.readonly_mode.roles: ["kibana_read_only"]
Use this setting if you are running opensearch-dashboards without https
opensearch_security.cookie.secure: false
opensearchDashboards.branding:
logo:
defaultUrl: "https://example.com/sample.svg"
darkModeUrl: "https://example.com/dark-mode-sample.svg"
mark:
defaultUrl: ""
darkModeUrl: ""
loadingLogo:
defaultUrl: ""
darkModeUrl: ""
faviconUrl: ""
applicationTitle: "Just some testing"