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