Как применить цвета фона к таблицам Kibana на той же панели инструментов (или нет)

У меня есть задача внедрить раскрашенные таблицы в панель инструментов Kibana, и я пытался найти лучший подход в Интернете, но до сих пор не склеил. Итак, поскольку я не хотел бы изобретать велосипеды и создавать с нуля, я хотел бы услышать от вас обновленный статус для этой реализации. Кстати, я знаю, что мы можем определить цвет ячейки на основе ее значения, но это не может быть только цвет ячейки, это должны быть все строки таблицы или хотя бы одна полная строка.

Задача состоит в том, чтобы нарисовать две простые таблицы на одной и той же информационной панели, одну полностью КРАСНУЮ, а вторую полностью ЗЕЛЕНУЮ. Вот пример одной таблицы: Пример отчета

Вы нашли какой-то способ определить цвет фона для таблиц на панели инструментов кибаны, в компоненте визуализации кибаны или даже с помощью настройки на уровне развертывания с помощью настройки файлов HTML или CSS?


background-color dashboard kibana visualization elasticsearch-query
person Lavor    schedule 25.09.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот один из способов решения этой задачи. Чтобы выяснить какое-либо дополнительное форматирование, я предлагаю использовать F12 в Chrome и отлаживать некоторые операторы CSS.

  1. CSS-файл, который нужно изменить:
  • /usr/share/kibana/оптимизировать/связки/light-theme.style.css
  1. Рассмотрим следующие названия таблиц
  • Заголовок таблицы 1: TOP_RED_TABLE
  • Название таблицы 2: BOTTON_GREEN_TABLE

  1. В конце файла CSS добавьте следующие строки (замените заголовки таблиц ниже в соответствии с вашими определениями на панели инструментов)

    [data-title=TOP_RED_TABLE],[data-test-subj=embeddablePanelHeading-TOP_RED_TABLE] {цвет фона:красный;
    цвет:белый; }

    [data-title=BOTTON_GREEN_TABLE], [data-test-subj=embeddablePanelHeading-BOTTON_GREEN_TABLE] {цвет фона:зеленый;
    цвет:белый; } .table thead { размер шрифта: 14px; цвет фона: черный; белый цвет; }

    .embPanel__title: не (: пусто) { размер шрифта: 16 пикселей; }

Удачи в настройке кибаны и, пожалуйста, размещайте здесь любые дополнительные предложения.

спасибо

Марсело

person Lavor    schedule 30.09.2020
comment
Привет, Марсело, я сделал именно так, как ты рекомендовал. Но однако Kibana не учитывает эти модификации. Я изменил /usr/share/kibana/optimize/bundles/light-theme.style.css, но когда Kibana загружается в Chrome, эта точная таблица стилей не меняется. Поэтому моих изменений нет в файле light.theme.style.css, который отображается в Elements при проверке. Что я делаю не так? Я на Кибане 7. - person RuntimeError; 06.10.2020
comment
Здравствуйте, я бы посоветовал вам очистить кеш браузера в соответствии с шагами ниже: 1 – нажмите F12 2 – выберите пункт меню "Сеть" 3 – нажмите F5 4 – нажмите правую кнопку мыши на имена файлов, которые появятся в открывшемся окне меню. Кроме того, я бы посоветовал проверить, правильно ли вы назвали свой - person Lavor; 07.10.2020
comment
Я также предлагаю проверить, правильно ли вы переименовали название своей панели (например, на имя TOP_RED_TABLE). Наконец, дайте мне знать, если вы пытаетесь создать компонент из визуализации или добавляете простой поиск по запросу (Панель управления › Добавить › Введите = Поисковый запрос) на панели инструментов. Они по-разному называются в CSS, и эти заданные теги CSS применяются к использованию поискового запроса (простая таблица). Дайте мне знать, если вы хотите использовать таблицы данных, и я постараюсь предоставить вам другие теги. - person Lavor; 07.10.2020