diff --git a/public/app/features/search/page/table/Table.tsx b/public/app/features/search/page/table/Table.tsx index b91e96f67d2..e28e17fa222 100644 --- a/public/app/features/search/page/table/Table.tsx +++ b/public/app/features/search/page/table/Table.tsx @@ -1,11 +1,11 @@ import React, { useMemo } from 'react'; -import { useTable, useBlockLayout, Column, TableOptions, Cell } from 'react-table'; +import { useTable, Column, TableOptions, Cell, useAbsoluteLayout } from 'react-table'; import { DataFrame, DataFrameType, DataFrameView, DataSourceRef, Field, GrafanaTheme2 } from '@grafana/data'; import { css } from '@emotion/css'; -import { useStyles2 } from '@grafana/ui'; import { FixedSizeList } from 'react-window'; import { TableCell } from '@grafana/ui/src/components/Table/TableCell'; import { getTableStyles } from '@grafana/ui/src/components/Table/styles'; +import { useStyles2 } from '@grafana/ui'; import { LocationInfo } from '../../service'; import { generateColumns } from './columns'; @@ -66,7 +66,7 @@ export const Table = ({ data, width, tags, onTagFilterChange, onDatasourceChange [memoizedColumns, memoizedData] ); - const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(options, useBlockLayout); + const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(options, useAbsoluteLayout); const RenderRow = React.useCallback( ({ index: rowIndex, style }) => { @@ -78,35 +78,15 @@ export const Table = ({ data, width, tags, onTagFilterChange, onDatasourceChange return (
{row.cells.map((cell: Cell, index: number) => { - if ( - cell.column.id === 'column-checkbox' || - cell.column.id === 'column-tags' || - cell.column.id === 'column-datasource' - ) { - return ( -
- -
- ); - } - return ( - -
- -
+
+ ); })} @@ -178,7 +158,12 @@ const getStyles = (theme: GrafanaTheme2) => { align-items: center; `, cellWrapper: css` - display: flex; + div { + border-right: none; + &:hover { + box-shadow: none; + } + } `, headerCell: css` padding-top: 2px; @@ -190,17 +175,30 @@ const getStyles = (theme: GrafanaTheme2) => { align-items: center; `, rowContainer: css` + label: row; &:hover { background-color: ${rowHoverBg}; } `, typeIcon: css` + margin-left: 5px; margin-right: 9.5px; vertical-align: middle; display: inline-block; margin-bottom: ${theme.v1.spacing.xxs}; fill: ${theme.colors.text.secondary}; `, + datasourceItem: css` + span { + &:hover { + color: ${theme.colors.text.link}; + } + } + `, + invalidDatasourceItem: css` + color: ${theme.colors.error.main}; + text-decoration: line-through; + `, typeText: css` color: ${theme.colors.text.secondary}; `, @@ -218,13 +216,14 @@ const getStyles = (theme: GrafanaTheme2) => { margin-top: 5px; `, infoWrap: css` + color: ${theme.colors.text.secondary}; span { margin-right: 10px; } `, tagList: css` justify-content: flex-start; - pointer-events: auto; + flex-wrap: nowrap; `, }; }; diff --git a/public/app/features/search/page/table/columns.tsx b/public/app/features/search/page/table/columns.tsx index a88634fdf91..5edab606248 100644 --- a/public/app/features/search/page/table/columns.tsx +++ b/public/app/features/search/page/table/columns.tsx @@ -65,6 +65,7 @@ export const generateColumns = ( const DATASOURCE_COLUMN_WIDTH = 200; const INFO_COLUMN_WIDTH = 100; const LOCATION_COLUMN_WIDTH = 200; + const TAGS_COLUMN_WIDTH = 200; width = TYPE_COLUMN_WIDTH; if (isDashboardList) { @@ -92,12 +93,28 @@ export const generateColumns = ( // Show datasources if we have any if (access.datasource && hasFieldValue(access.datasource)) { width = DATASOURCE_COLUMN_WIDTH; - columns.push(makeDataSourceColumn(access.datasource, width, styles.typeIcon, onDatasourceChange)); + columns.push( + makeDataSourceColumn( + access.datasource, + width, + styles.typeIcon, + styles.datasourceItem, + styles.invalidDatasourceItem, + onDatasourceChange + ) + ); + availableWidth -= width; + } + + // Show tags if we have any + if (access.tags && hasFieldValue(access.tags)) { + width = TAGS_COLUMN_WIDTH; + columns.push(makeTagsColumn(access.tags, width, styles.tagList, tags, onTagFilterChange)); availableWidth -= width; } if (isDashboardList) { - width = INFO_COLUMN_WIDTH; + width = Math.max(availableWidth, INFO_COLUMN_WIDTH); columns.push({ Cell: DefaultCell, id: `column-info`, @@ -109,8 +126,8 @@ export const generateColumns = ( }, width: width, }); - availableWidth -= width; } else { + width = Math.max(availableWidth, LOCATION_COLUMN_WIDTH); columns.push({ Cell: DefaultCell, id: `column-location`, @@ -138,15 +155,8 @@ export const generateColumns = ( } return null; }, - width: LOCATION_COLUMN_WIDTH, + width: width, }); - availableWidth -= width; - } - - // Show tags if we have any - if (access.tags && hasFieldValue(access.tags)) { - width = Math.max(availableWidth, 250); - columns.push(makeTagsColumn(access.tags, width, styles.tagList, tags, onTagFilterChange)); } return columns; @@ -176,6 +186,8 @@ function makeDataSourceColumn( field: Field, width: number, iconClass: string, + datasourceItemClass: string, + invalidDatasourceItemClass: string, onDatasourceChange: (datasource?: string) => void ): TableColumn { return { @@ -188,27 +200,30 @@ function makeDataSourceColumn( if (dslist?.length) { const srv = getDataSourceSrv(); return ( -
+
{dslist.map((v, i) => { const settings = srv.getInstanceSettings(v); const icon = settings?.meta?.info?.logos?.small; if (icon) { return ( - { e.stopPropagation(); e.preventDefault(); onDatasourceChange(settings.uid); }} > - + {settings.name} - + ); } - return {v.type}; + return ( + + {v.type} + + ); })}
);