elastic/kibana

Display "null" value better in filter panel

Open

#106,316 opened on Jul 20, 2021

View on GitHub
 (4 comments) (0 reactions) (0 assignees)TypeScript (19,065 stars) (8,021 forks)batch import
Feature:Unified searchTeam:Presentationenhancementgood first issueimpact:lowloe:small

Description

Kibana version: 7.14.0 BC3

Elasticsearch version: 7.14.0 BC3

Server OS version: darwin_x86_64

Browser version: chrome latest

Browser OS version: OS X

Original install method (e.g. download page, yum, from source, etc.): from staging

Describe the bug: If the field value is "null" or empty - we display an empty row in filter panel for values. This blends into the background and I am not sure if the UX is giving the user that message.

Please note I used kibana sample logs for this and the field I am filtering on is extension.keyword

On light theme -

On dark theme -

Contributor guide

Tech stack
typescriptreactcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic understanding of React and CSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
The issue reports that null/empty field values display as blank rows in the filter panel, which is confusing on both light and dark themes. The screenshots show the problem in Kibana's sample logs for 'extension.keyword'. To fix, locate the filter panel component in the Kibana codebase (likely under 'src/plugins/data/public/ui/filter editor' or similar). The fix should display 'null' or empty placeholder text instead of an empty row, ensuring proper styling for both themes. Check the CSS for the filter value list and add a class or condition to show a readable value.