Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Discover] Monospace font in Document Explorer #131513

Merged
merged 8 commits into from
May 6, 2022
Merged

[Discover] Monospace font in Document Explorer #131513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6f86dfd
[Discover] Monospace font in Document Explorer
jughosta May 4, 2022
4486900
[Discover] Update code style
jughosta May 4, 2022
0799710
[Discover] Update jest snapshot
jughosta May 4, 2022
76999f0
[Discover] Update jest snapshot
jughosta May 4, 2022
d51c923
[Discover] Increase the default width for time column
jughosta May 5, 2022
1121050
[Discover] Reduce font size for cell popover
jughosta May 5, 2022
f561daa
[Discover] Update font size for cell popover and fix tests
jughosta May 5, 2022
89b4ac4
[Discover] Update width to 210
jughosta May 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/plugins/discover/public/components/discover_grid/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const GRID_STYLE = {

export const pageSizeArr = [25, 50, 100, 250];
export const defaultPageSize = 100;
export const defaultTimeColumnWidth = 190;
export const defaultTimeColumnWidth = 210;
export const toolbarVisibility = {
showColumnSelector: {
allowHide: false,
Expand Down
9 changes: 9 additions & 0 deletions src/plugins/discover/public/components/discover_grid/discover_grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,15 @@
}
}

.dscDiscoverGrid__cellValue {
font-family: $euiCodeFontFamily;
}

.dscDiscoverGrid__cellPopoverValue {
font-family: $euiCodeFontFamily;
font-size: $euiFontSizeS;
}

.dscDiscoverGrid__footer {
background-color: $euiColorLightShade;
padding: $euiSize / 2 $euiSize;
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/discover/public/components/discover_grid/discover_grid_columns.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ describe('Discover grid columns', function () {
/>
</React.Fragment>,
"id": "timestamp",
"initialWidth": 190,
"initialWidth": 210,
"isSortable": true,
"schema": "datetime",
},
Expand Down
33 changes: 23 additions & 10 deletions src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,9 @@ describe('Discover grid cell rendering', function () {
setCellProps={jest.fn()}
/>
);
expect(component.html()).toMatchInlineSnapshot(`"<span>100</span>"`);
expect(component.html()).toMatchInlineSnapshot(
`"<span class=\\"dscDiscoverGrid__cellValue\\">100</span>"`
);
});

it('renders bytes column correctly using _source when details is true', () => {
Expand All @@ -115,7 +117,9 @@ describe('Discover grid cell rendering', function () {
setCellProps={jest.fn()}
/>
);
expect(component.html()).toMatchInlineSnapshot(`"<span>100</span>"`);
expect(component.html()).toMatchInlineSnapshot(
`"<span class=\\"dscDiscoverGrid__cellPopoverValue\\">100</span>"`
);
});

it('renders bytes column correctly using fields when details is true', () => {
Expand All @@ -138,7 +142,9 @@ describe('Discover grid cell rendering', function () {
setCellProps={jest.fn()}
/>
);
expect(component.html()).toMatchInlineSnapshot(`"<span>100</span>"`);
expect(component.html()).toMatchInlineSnapshot(
`"<span class=\\"dscDiscoverGrid__cellPopoverValue\\">100</span>"`
);
});

it('renders _source column correctly', () => {
Expand All @@ -163,7 +169,7 @@ describe('Discover grid cell rendering', function () {
);
expect(component).toMatchInlineSnapshot(`
<EuiDescriptionList
className="dscDiscoverGrid__descriptionList"
className="dscDiscoverGrid__descriptionList dscDiscoverGrid__cellValue"
compressed={true}
type="inline"
>
Expand Down Expand Up @@ -280,7 +286,7 @@ describe('Discover grid cell rendering', function () {
);
expect(component).toMatchInlineSnapshot(`
<EuiDescriptionList
className="dscDiscoverGrid__descriptionList"
className="dscDiscoverGrid__descriptionList dscDiscoverGrid__cellValue"
compressed={true}
type="inline"
>
Expand Down Expand Up @@ -359,7 +365,7 @@ describe('Discover grid cell rendering', function () {
);
expect(component).toMatchInlineSnapshot(`
<EuiDescriptionList
className="dscDiscoverGrid__descriptionList"
className="dscDiscoverGrid__descriptionList dscDiscoverGrid__cellValue"
compressed={true}
type="inline"
>
Expand Down Expand Up @@ -485,7 +491,7 @@ describe('Discover grid cell rendering', function () {
);
expect(component).toMatchInlineSnapshot(`
<EuiDescriptionList
className="dscDiscoverGrid__descriptionList"
className="dscDiscoverGrid__descriptionList dscDiscoverGrid__cellValue"
compressed={true}
type="inline"
>
Expand Down Expand Up @@ -527,7 +533,7 @@ describe('Discover grid cell rendering', function () {
);
expect(component).toMatchInlineSnapshot(`
<EuiDescriptionList
className="dscDiscoverGrid__descriptionList"
className="dscDiscoverGrid__descriptionList dscDiscoverGrid__cellValue"
compressed={true}
type="inline"
>
Expand Down Expand Up @@ -603,6 +609,7 @@ describe('Discover grid cell rendering', function () {
);
expect(component).toMatchInlineSnapshot(`
<span
className="dscDiscoverGrid__cellValue"
dangerouslySetInnerHTML={
Object {
"__html": Array [
Expand Down Expand Up @@ -634,7 +641,9 @@ describe('Discover grid cell rendering', function () {
setCellProps={jest.fn()}
/>
);
expect(component.html()).toMatchInlineSnapshot(`"<span>-</span>"`);
expect(component.html()).toMatchInlineSnapshot(
`"<span class=\\"dscDiscoverGrid__cellValue\\">-</span>"`
);
});

it('renders correctly when invalid column is given', () => {
Expand All @@ -657,7 +666,9 @@ describe('Discover grid cell rendering', function () {
setCellProps={jest.fn()}
/>
);
expect(component.html()).toMatchInlineSnapshot(`"<span>-</span>"`);
expect(component.html()).toMatchInlineSnapshot(
`"<span class=\\"dscDiscoverGrid__cellValue\\">-</span>"`
);
});

it('renders unmapped fields correctly', () => {
Expand Down Expand Up @@ -695,6 +706,7 @@ describe('Discover grid cell rendering', function () {
);
expect(component).toMatchInlineSnapshot(`
<span
className="dscDiscoverGrid__cellValue"
dangerouslySetInnerHTML={
Object {
"__html": Array [
Expand All @@ -718,6 +730,7 @@ describe('Discover grid cell rendering', function () {
);
expect(componentWithDetails).toMatchInlineSnapshot(`
<span
className="dscDiscoverGrid__cellPopoverValue"
dangerouslySetInnerHTML={
Object {
"__html": Array [
Expand Down
13 changes: 11 additions & 2 deletions src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
*/

import React, { Fragment, useContext, useEffect, useMemo } from 'react';
import classnames from 'classnames';
import { euiLightVars as themeLight, euiDarkVars as themeDark } from '@kbn/ui-theme';
import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
import {
Expand All @@ -26,6 +27,8 @@ import { ElasticSearchHit } from '../../types';
import { useDiscoverServices } from '../../utils/use_discover_services';
import { MAX_DOC_FIELDS_DISPLAYED } from '../../../common';

const CELL_CLASS = 'dscDiscoverGrid__cellValue';

export const getRenderCellValueFn =
(
dataView: DataView,
Expand Down Expand Up @@ -67,7 +70,7 @@ export const getRenderCellValueFn =
}, [ctx, row, setCellProps]);

if (typeof row === 'undefined' || typeof rowFlattened === 'undefined') {
return <span>-</span>;
return <span className={CELL_CLASS}>-</span>;
}

/**
Expand Down Expand Up @@ -102,7 +105,11 @@ export const getRenderCellValueFn =
: formatHit(row, dataView, fieldsToShow, maxEntries, fieldFormats);

return (
<EuiDescriptionList type="inline" compressed className="dscDiscoverGrid__descriptionList">
<EuiDescriptionList
type="inline"
compressed
className={classnames('dscDiscoverGrid__descriptionList', CELL_CLASS)}
>
{pairs.map(([key, value]) => (
<Fragment key={key}>
<EuiDescriptionListTitle>{key}</EuiDescriptionListTitle>
Expand All @@ -118,6 +125,7 @@ export const getRenderCellValueFn =

return (
<span
className={CELL_CLASS}
// formatFieldValue guarantees sanitized values
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
Expand Down Expand Up @@ -170,6 +178,7 @@ function renderPopoverContent({

return (
<span
className="dscDiscoverGrid__cellPopoverValue"
// formatFieldValue guarantees sanitized values
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
Expand Down