Skip to content

Commit

Permalink
Use ouiCodeFont in Discover and reduce text size
Browse files Browse the repository at this point in the history
Also:
* Fix react `key` errors
* vertically align source cells
* Clamp the height of the cells

Signed-off-by: Miki <[email protected]>
  • Loading branch information
AMoo-Miki committed Feb 2, 2024
1 parent 1ba45a7 commit ee69f47
Show file tree
Hide file tree
Showing 8 changed files with 47 additions and 12 deletions.
2 changes: 1 addition & 1 deletion src/core/server/core_app/assets/legacy_dark_theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -802,7 +802,7 @@
width: 100%;
max-width: 100%;
margin-bottom: 20px;
font-size: 14px;
font-size: 12px;
}
.table thead {
font-size: 12px;
Expand Down
2 changes: 1 addition & 1 deletion src/core/server/core_app/assets/legacy_light_theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -802,7 +802,7 @@
width: 100%;
max-width: 100%;
margin-bottom: 20px;
font-size: 14px;
font-size: 12px;
}
.table thead {
font-size: 12px;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__title.osdDescriptionListFieldTitle {
background-color: tintOrShade($euiColorPrimary, 90%, 70%);
margin-left: 0;
}
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function fetchSourceTypeDataCell(
const keys = Object.keys(formattedRow);

return (
<EuiDescriptionList type="inline" compressed>
<EuiDescriptionList type="inline" compressed className="source">
{keys.map((key, index) => (
<Fragment key={key}>
<EuiDescriptionListTitle className="osdDescriptionListFieldTitle">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,13 @@ doc-table {

.osd-table,
.osdDocTable {
@include ouiCodeFont;

// To fight intruding styles that conflict with OUI's
& > tbody > tr > td {
line-height: inherit;
}

/**
* Style OpenSearch document _source in table view <dt>key:<dt><dd>value</dd>
* Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.osdDocTable_expandedRow {
.osdDocTable__detailsParent {
border-top: none !important;
}

Expand Down Expand Up @@ -32,3 +32,16 @@
opacity: 1;
}
}

.osdDocTableCell__source {
.truncate-by-height {
transform: translateY(-1.5px);
margin-bottom: -1.5px;
}

dd,
dl,
dt {
font-size: inherit !important;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export function TableHeader({

return (
<TableHeaderColumn
key={idx}
currentIdx={idx}
colLeftIdx={colLeftIdx}
colRightIdx={colRightIdx}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const TableRow = ({
const flattened = indexPattern.flattenHit(row);
const [isExpanded, setIsExpanded] = useState(false);
const tableRow = (
<tr>
<tr key={row._id}>
<td data-test-subj="docTableExpandToggleColumn" className="osdDocTableCell__toggleDetails">
<EuiButtonIcon
color="text"
Expand All @@ -61,6 +61,7 @@ export const TableRow = ({
if (typeof row === 'undefined') {
return (
<td
key={columnId}
data-test-subj="docTableField"
className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
>
Expand All @@ -71,8 +72,14 @@ export const TableRow = ({

if (fieldInfo?.type === '_source') {
return (
<td className="eui-textBreakAll eui-textBreakWord" data-test-subj="docTableField">
{fetchSourceTypeDataCell(indexPattern, row, columnId, false)}
<td
key={columnId}
className="osdDocTableCell eui-textBreakAll eui-textBreakWord osdDocTableCell__source"
data-test-subj="docTableField"
>
<div className="truncate-by-height">
{fetchSourceTypeDataCell(indexPattern, row, columnId, false)}
</div>
</td>
);
}
Expand All @@ -82,6 +89,7 @@ export const TableRow = ({
if (typeof formattedValue === 'undefined') {
return (
<td
key={columnId}
data-test-subj="docTableField"
className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
>
Expand All @@ -95,18 +103,23 @@ export const TableRow = ({
if (!fieldInfo?.filterable) {
return (
<td
key={columnId}
data-test-subj="docTableField"
className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
>
{/* eslint-disable-next-line react/no-danger */}
<span dangerouslySetInnerHTML={{ __html: sanitizedCellValue }} />
<div className="truncate-by-height">
{/* eslint-disable-next-line react/no-danger */}
<span dangerouslySetInnerHTML={{ __html: sanitizedCellValue }} />
</div>
</td>
);
}

return (
<TableCell
key={columnId}
columnId={columnId}
columnType={fieldInfo?.type}
onFilter={onFilter}
isTimeField={indexPattern.timeFieldName === columnId}
fieldMapping={fieldMapping}
Expand All @@ -118,9 +131,9 @@ export const TableRow = ({
);

const expandedTableRow = (
<tr>
<td className="osdDocTable_expandedRow" colSpan={columnIds.length + 1}>
<EuiFlexGroup justifyContent="center" alignItems="center">
<tr key={'x' + row._id}>
<td className="osdDocTable__detailsParent" colSpan={columnIds.length + 2}>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiIcon type="folderOpen" />
</EuiFlexItem>
Expand Down

0 comments on commit ee69f47

Please sign in to comment.