Skip to content

Commit

Permalink
[Data Explorer][Discover 2.0] Replace hide column and add move left/r…
Browse files Browse the repository at this point in the history
…ight (#4838)

* disable full screen mode
* customize hide column to delete column
* add move left and move right

Issue Resolve:
#4822
#4823
#4824

Signed-off-by: ananzh <ananzh@amazon.com>
  • Loading branch information
ananzh authored Aug 30, 2023
1 parent a239fc2 commit 2738131
Show file tree
Hide file tree
Showing 7 changed files with 66 additions and 27 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,5 @@ export const toolbarVisibility = {
allowReorder: true,
},
showStyleSelector: false,
showFullScreenSelector: false,
};
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_
import { DiscoverServices } from '../../../build_services';
import { usePagination } from '../utils/use_pagination';
import { SortOrder } from '../../../saved_searches/types';
import { buildColumns } from '../../utils/columns';

export interface DataGridTableProps {
columns: string[];
Expand All @@ -30,6 +31,7 @@ export interface DataGridTableProps {
displayTimeColumn: boolean;
services: DiscoverServices;
isToolbarVisible?: boolean;
isContextView?: boolean;
}

export const DataGridTable = ({
Expand All @@ -44,19 +46,31 @@ export const DataGridTable = ({
rows,
displayTimeColumn,
isToolbarVisible = true,
isContextView = false,
}: DataGridTableProps) => {
const [inspectedHit, setInspectedHit] = useState<OpenSearchSearchHit | undefined>();
const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]);
const pagination = usePagination(rowCount);

let adjustedColumns = buildColumns(columns);
// handle case where the user removes selected filed and leaves only time column
if (
adjustedColumns.length === 1 &&
indexPattern &&
adjustedColumns[0] === indexPattern.timeFieldName
) {
adjustedColumns = [...adjustedColumns, '_source'];
}

const includeSourceInColumns = adjustedColumns.includes('_source');
const sortingColumns = useMemo(() => sort.map(([id, direction]) => ({ id, direction })), [sort]);
const rowHeightsOptions = useMemo(
() => ({
defaultHeight: {
lineCount: columns.includes('_source') ? 3 : 1,
lineCount: adjustedColumns.includes('_source') ? 3 : 1,
},
}),
[columns]
[adjustedColumns]
);

const onColumnSort = useCallback(
Expand All @@ -72,18 +86,29 @@ export const DataGridTable = ({
]);

const dataGridTableColumns = useMemo(
() => buildDataGridColumns(columns, indexPattern, displayTimeColumn),
[columns, indexPattern, displayTimeColumn]
() =>
buildDataGridColumns(
adjustedColumns,
indexPattern,
displayTimeColumn,
includeSourceInColumns,
isContextView
),
[adjustedColumns, indexPattern, displayTimeColumn, includeSourceInColumns, isContextView]
);

const dataGridTableColumnsVisibility = useMemo(
() => ({
visibleColumns: computeVisibleColumns(columns, indexPattern, displayTimeColumn) as string[],
visibleColumns: computeVisibleColumns(
adjustedColumns,
indexPattern,
displayTimeColumn
) as string[],
setVisibleColumns: (cols: string[]) => {
onSetColumns(cols);
},
}),
[columns, indexPattern, displayTimeColumn, onSetColumns]
[adjustedColumns, indexPattern, displayTimeColumn, onSetColumns]
);

const sorting: EuiDataGridSorting = useMemo(
Expand Down Expand Up @@ -151,7 +176,7 @@ export const DataGridTable = ({
<DataGridFlyout
indexPattern={indexPattern}
hit={inspectedHit}
columns={columns}
columns={adjustedColumns}
onRemoveColumn={onRemoveColumn}
onAddColumn={onAddColumn}
onFilter={onFilter}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,33 +11,52 @@ import { getCellActions } from './data_grid_table_cell_actions';
export function buildDataGridColumns(
columnNames: string[],
idxPattern: IndexPattern,
displayTimeColumn: boolean
displayTimeColumn: boolean,
includeSourceInColumns: boolean,
isContextView: boolean
) {
const timeFieldName = idxPattern.timeFieldName;
let columnsToUse = columnNames;

if (displayTimeColumn && idxPattern.timeFieldName && !columnNames.includes(timeFieldName)) {
columnsToUse = [idxPattern.timeFieldName, ...columnNames];
if (displayTimeColumn && timeFieldName && !columnNames.includes(timeFieldName)) {
columnsToUse = [timeFieldName, ...columnNames];
}

return columnsToUse.map((colName) => generateDataGridTableColumn(colName, idxPattern));
return columnsToUse.map((colName) =>
generateDataGridTableColumn(colName, idxPattern, includeSourceInColumns, isContextView)
);
}

export function generateDataGridTableColumn(colName: string, idxPattern: IndexPattern) {
export function generateDataGridTableColumn(
colName: string,
idxPattern: IndexPattern,
includeSourceInColumns: boolean,
isContextView: boolean
) {
const timeLabel = i18n.translate('discover.timeLabel', {
defaultMessage: 'Time',
});
const idxPatternField = idxPattern.getFieldByName(colName);
const shouldHide = colName === '_source' || colName === idxPattern.timeFieldName;
const dataGridCol: EuiDataGridColumn = {
id: colName,
schema: idxPatternField?.type,
isSortable: idxPatternField?.sortable,
display: idxPatternField?.displayName,
actions: {
showHide: true,
showMoveLeft: false,
showMoveRight: false,
},
actions: isContextView
? false
: {
showHide: shouldHide
? false
: {
label: i18n.translate('discover.removeColumn.label', {
defaultMessage: 'Remove column',
}),
iconType: 'cross',
},
showMoveLeft: !includeSourceInColumns,
showMoveRight: !includeSourceInColumns,
},
cellActions: idxPatternField ? getCellActions(idxPatternField) : [],
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ export function ContextApp({
displayTimeColumn={true}
services={services}
isToolbarVisible={false}
isContextView={true}
/>
</div>
<ActionBar
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,3 @@ export const reorderColumn = (columns: string[], source: number, destination: nu
newColumns.splice(destination, 0, removed);
return newColumns;
};

export const setColumns = (timeField: string | undefined, columns: string[]) => {
const newColumns = timeField && timeField === columns[0] ? columns.slice(1) : columns;
return newColumns;
};
Original file line number Diff line number Diff line change
Expand Up @@ -123,11 +123,10 @@ export const discoverSlice = createSlice({
isDirty: true,
};
},
setColumns(state, action: PayloadAction<{ timeField: string | undefined; columns: string[] }>) {
const columns = utils.setColumns(action.payload.timeField, action.payload.columns);
setColumns(state, action: PayloadAction<{ columns: string[] }>) {
return {
...state,
columns,
columns: action.payload.columns,
};
},
setSort(state, action: PayloadAction<SortOrder[]>) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,7 @@ export const DiscoverTable = ({ history }: Props) => {
const dispatch = useDispatch();
const onAddColumn = (col: string) => dispatch(addColumn({ column: col }));
const onRemoveColumn = (col: string) => dispatch(removeColumn(col));
const onSetColumns = (cols: string[]) =>
dispatch(setColumns({ timefield: indexPattern.timeFieldName, columns: cols }));
const onSetColumns = (cols: string[]) => dispatch(setColumns({ columns: cols }));
const onSetSort = (s: SortOrder[]) => {
dispatch(setSort(s));
refetch$.next();
Expand Down

0 comments on commit 2738131

Please sign in to comment.