diff --git a/public/app/features/search/page/components/SearchResultsTable.tsx b/public/app/features/search/page/components/SearchResultsTable.tsx index ee1ab1dbf74..b1a19cbec3b 100644 --- a/public/app/features/search/page/components/SearchResultsTable.tsx +++ b/public/app/features/search/page/components/SearchResultsTable.tsx @@ -159,13 +159,17 @@ const getStyles = (theme: GrafanaTheme2) => { `, cellWrapper: css` border-right: none; + padding: ${theme.spacing(1)}; + overflow: hidden; + text-overflow: ellipsis; + user-select: text; + white-space: nowrap; &:hover { box-shadow: none; } `, headerCell: css` - padding-top: 2px; - padding-left: 10px; + padding: ${theme.spacing(1)}; `, headerRow: css` background-color: ${theme.colors.background.secondary}; @@ -199,20 +203,28 @@ const getStyles = (theme: GrafanaTheme2) => { } } `, + missingTitleText: css` + color: ${theme.colors.text.disabled}; + font-style: italic; + `, invalidDatasourceItem: css` color: ${theme.colors.error.main}; text-decoration: line-through; `, typeText: css` color: ${theme.colors.text.secondary}; + padding-top: ${theme.spacing(1)}; `, locationItem: css` color: ${theme.colors.text.secondary}; margin-right: 12px; `, + locationCellStyle: css` + padding-top: ${theme.spacing(1)}; + padding-right: ${theme.spacing(1)}; + `, checkboxHeader: css` - // display: flex; - // justify-content: flex-start; + margin-left: 2px; `, checkbox: css` margin-left: 10px; @@ -226,6 +238,7 @@ const getStyles = (theme: GrafanaTheme2) => { } `, tagList: css` + padding-top: ${theme.spacing(0.5)}; justify-content: flex-start; flex-wrap: nowrap; `, diff --git a/public/app/features/search/page/components/columns.tsx b/public/app/features/search/page/components/columns.tsx index 5df00f6cc75..d3eb227dd6a 100644 --- a/public/app/features/search/page/components/columns.tsx +++ b/public/app/features/search/page/components/columns.tsx @@ -1,4 +1,4 @@ -import { css, cx } from '@emotion/css'; +import { cx } from '@emotion/css'; import React from 'react'; import SVG from 'react-inlinesvg'; @@ -13,8 +13,6 @@ import { TableColumn } from './SearchResultsTable'; const TYPE_COLUMN_WIDTH = 250; const DATASOURCE_COLUMN_WIDTH = 200; -const LOCATION_COLUMN_WIDTH = 200; -const TAGS_COLUMN_WIDTH = 300; export const generateColumns = ( response: QueryResponse, @@ -76,9 +74,14 @@ export const generateColumns = ( width = Math.max(availableWidth * 0.2, 300); columns.push({ Cell: (p) => { - const name = access.name.values.get(p.row.index); + let classNames = cx(p.cellStyle, styles.cellWrapper); + let name = access.name.values.get(p.row.index); + if (!name?.length) { + name = 'Missing title'; // normal for panels + classNames += ' ' + styles.missingTitleText; + } return ( - + {name} ); @@ -110,22 +113,17 @@ export const generateColumns = ( availableWidth -= width; } - width = Math.max(availableWidth - TAGS_COLUMN_WIDTH, LOCATION_COLUMN_WIDTH); + width = Math.max(availableWidth / 2.5, 200); + columns.push(makeTagsColumn(access.tags, width, styles.tagList, onTagSelected)); + availableWidth -= width; + const meta = response.view.dataFrame.meta?.custom as SearchResultMeta; - if (meta?.locationInfo) { + if (meta?.locationInfo && availableWidth > 0) { columns.push({ Cell: (p) => { const parts = (access.location?.values.get(p.row.index) ?? '').split('/'); return ( -