Merge branch 'feature/table-revert' into pagination-style

Signed-off-by: Anan Zhuang <[email protected]>

src/core/server/core_app/assets/legacy_dark_theme.css

@@ -802,7 +802,7 @@
   width: 100%;
   max-width: 100%;
   margin-bottom: 20px;
-  font-size: 14px;
+  font-size: 12px;
 }
 .table thead {
   font-size: 12px;

src/core/server/core_app/assets/legacy_light_theme.css

@@ -802,7 +802,7 @@
   width: 100%;
   max-width: 100%;
   margin-bottom: 20px;
-  font-size: 14px;
+  font-size: 12px;
 }
 .table thead {
   font-size: 12px;

src/plugins/data/public/ui/query_string_input/_query_bar.scss

@@ -33,9 +33,8 @@
 
   // Unlike most inputs within layout control groups, the text area still needs a border.
   // These adjusts help it sit above the control groups shadow to line up correctly.
-  padding: $euiSizeS;
-  padding-top: $euiSizeS + 3px;
-  transform: translateY(-1px) translateX(-1px);
+  padding: ($euiSizeS + 2px) $euiSizeS $euiSizeS;
+  transform: translateY(-2px) translateX(-1px);
 
   &:not(:focus):not(:invalid) {
     @include euiYScrollWithShadows;

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -5,31 +5,35 @@
 
 import React, { useState, useMemo, useCallback } from 'react';
 import { EuiDataGrid, EuiDataGridSorting, EuiPanel } from '@elastic/eui';
-import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { IndexPattern, getServices } from '../../../opensearch_dashboards_services';
 import { fetchTableDataCell } from './data_grid_table_cell_value';
 import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns';
 import { DocViewInspectButton } from './data_grid_table_docview_inspect_button';
 import { DataGridFlyout } from './data_grid_table_flyout';
 import { DiscoverGridContextProvider } from './data_grid_table_context';
 import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 import { usePagination } from '../utils/use_pagination';
-import { SortOrder } from '../../../saved_searches/types';
 import { buildColumns } from '../../utils/columns';
-import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
-import { DiscoverServices } from '../../../build_services';
-import { SAMPLE_SIZE_SETTING } from '../../../../common';
+import {
+  DOC_HIDE_TIME_COLUMN_SETTING,
+  SAMPLE_SIZE_SETTING,
+  SORT_DEFAULT_ORDER_SETTING,
+} from '../../../../common';
+import { UI_SETTINGS } from '../../../../../data/common';
 import { LegacyDiscoverTable } from '../default_discover_table/default_discover_table';
 import { toolbarVisibility } from './constants';
 import { getDataGridTableSetting } from '../utils/local_storage';
+import { SortOrder } from '../default_discover_table/helper';
+
 export interface DataGridTableProps {
   columns: string[];
   indexPattern: IndexPattern;
   onAddColumn: (column: string) => void;
   onFilter: DocViewFilterFn;
+  onMoveColumn: (colName: string, destination: number) => void;
   onRemoveColumn: (column: string) => void;
-  onReorderColumn: (col: string, source: number, destination: number) => void;
-  onSort: (sort: SortOrder[]) => void;
   hits?: number;
+  onSort: (s: SortOrder[]) => void;
   rows: OpenSearchSearchHit[];
   onSetColumns: (columns: string[]) => void;
   sort: SortOrder[];
@@ -47,8 +51,8 @@ export const DataGridTable = ({
   indexPattern,
   onAddColumn,
   onFilter,
+  onMoveColumn,
   onRemoveColumn,
-  onReorderColumn,
   onSetColumns,
   onSort,
   sort,
@@ -62,11 +66,17 @@ export const DataGridTable = ({
   isLoading = false,
   showPagination,
 }: DataGridTableProps) => {
-  const { services } = useOpenSearchDashboards<DiscoverServices>();
-
+  const services = getServices();
   const [inspectedHit, setInspectedHit] = useState<OpenSearchSearchHit | undefined>();
   const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]);
-  const pageSizeLimit = services.uiSettings?.get(SAMPLE_SIZE_SETTING);
+  const [pageSizeLimit, isShortDots, hideTimeColumn, defaultSortOrder] = useMemo(() => {
+    return [
+      services.uiSettings.get(SAMPLE_SIZE_SETTING),
+      services.uiSettings.get(UI_SETTINGS.SHORT_DOTS_ENABLE),
+      services.uiSettings.get(DOC_HIDE_TIME_COLUMN_SETTING),
+      services.uiSettings.get(SORT_DEFAULT_ORDER_SETTING, 'desc'),
+    ];
+  }, [services.uiSettings]);
   const pagination = usePagination({ rowCount, pageSizeLimit });
 
   let adjustedColumns = buildColumns(columns);
@@ -149,36 +159,40 @@ export const DataGridTable = ({
   const legacyDiscoverTable = useMemo(
     () => (
       <LegacyDiscoverTable
-        displayedTableColumns={displayedTableColumns}
         columns={adjustedColumns}
         hits={hits}
         rows={rows}
         indexPattern={indexPattern}
-        sortOrder={sortingColumns}
-        onChangeSortOrder={onColumnSort}
+        sort={sort}
+        onSort={onSort}
         onRemoveColumn={onRemoveColumn}
-        onReorderColumn={onReorderColumn}
+        onReorderColumn={onMoveColumn}
         onAddColumn={onAddColumn}
         onFilter={onFilter}
         onClose={() => setInspectedHit(undefined)}
         sampleSize={pageSizeLimit}
         showPagination={showPagination}
+        isShortDots={isShortDots}
+        hideTimeColumn={hideTimeColumn}
+        defaultSortOrder={defaultSortOrder}
       />
     ),
     [
-      displayedTableColumns,
       adjustedColumns,
       hits,
       rows,
       indexPattern,
-      sortingColumns,
-      onColumnSort,
+      sort,
+      onSort,
       onRemoveColumn,
-      onReorderColumn,
+      onMoveColumn,
       onAddColumn,
       onFilter,
       pageSizeLimit,
       showPagination,
+      defaultSortOrder,
+      hideTimeColumn,
+      isShortDots,
     ]
   );
 

src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx

@@ -16,21 +16,24 @@ import {
 import { stringify } from '@osd/std';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
 import { OpenSearchSearchHit } from '../../doc_views/doc_views_types';
+import { shortenDottedString } from '../../helpers';
 
 export function fetchSourceTypeDataCell(
   idxPattern: IndexPattern,
   row: Record<string, unknown>,
   columnId: string,
-  isDetails: boolean
+  isDetails: boolean,
+  isShortDots: boolean
 ) {
   if (isDetails) {
     return <span>{stringify(row[columnId], null, 2)}</span>;
   }
   const formattedRow = idxPattern.formatHit(row);
-  const keys = Object.keys(formattedRow);
+  const rawKeys = Object.keys(formattedRow);
+  const keys = isShortDots ? rawKeys.map((k) => shortenDottedString(k)) : rawKeys;
 
   return (
-    <EuiDescriptionList type="inline" compressed>
+    <EuiDescriptionList type="inline" compressed className="source">
       {keys.map((key, index) => (
         <Fragment key={key}>
           <EuiDescriptionListTitle className="osdDescriptionListFieldTitle">

src/plugins/discover/public/application/components/default_discover_table/_doc_table.scss

@@ -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

src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss

@@ -1,12 +1,14 @@
-.osdDocTable_expandedRow {
+.osdDocTable__detailsParent {
   border-top: none !important;
 }
 
-.osdDocTableCell__toggleDetails {
-  padding: 4px 0 0 !important;
+// stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+.euiFlexItem.osdDocTable__detailsIconContainer {
+  margin-right: 0;
 }
 
-.osdDocTableCell__filter { // TODO: make them appear at top right corner
+.osd-table td.osdDocTableCell__toggleDetails {
+  padding: 5px 0 0 4px;
 }
 
 /**
@@ -16,9 +18,45 @@
    */
 
 .osdDocTableCell {
-  white-space: pre-wrap;
+  position: relative;
 
-  &__filterButton {
+  &__filter {
+    position: absolute;
+    display: flex;
+    flex-grow: 0;
+
+    // Vertically align the button group with the first line of text
+    // 8px is set by .table and 2em is the line-height
+    top: calc(2em / 2 + 8px);
+    transform: translateY(-50%);
+
+    // Stick it to the right but use the padding of the container to distance it from the edge (below)
+    right: 0;
+
+    // Just to have some distance from the content behind it; larger for left so we can show a gradiant
+    // 8px is set by .table
+    padding: 8px 8px 8px 16px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      display: block;
+      right: 0;
+      top: 0;
+      height: 100%;
+      width: 100%;
+      background-image: linear-gradient(to right, transparent 0, $ouiColorEmptyShade 16px);
+      z-index: 1;
+    }
+
+    & > * {
+      // So they will appear over the background in ::before
+      z-index: 2;
+    }
+  }
+
+  &__filterButton,
+  &__filter {
     opacity: 0;
     transition: opacity $euiAnimSpeedFast;
 
@@ -28,7 +66,32 @@
   }
 
   &:hover &__filterButton,
-  &:focus &__filterButton {
+  &:focus &__filterButton,
+  &:hover &__filter,
+  &:focus &__filter {
     opacity: 1;
   }
+
+  .osdDescriptionListFieldTitle {
+    margin: 0 4px 0 0 !important;
+  }
+
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  &.eui-textNoWrap {
+    // To make sure the time-series column never stretches
+    width: 1%;
+  }
+}
+
+.osdDocTableCell__source {
+  .truncate-by-height {
+    transform: translateY(-1.5px);
+    margin-bottom: -1.5px;
+  }
+
+  dd,
+  dl,
+  dt {
+    font-size: inherit !important;
+  }
 }