IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Table: Add default cell link style and tooltip to data links in table (#23818)

Browse Source
This commit is contained in:
Dominik Prokop 2020-04-23 13:57:08 +02:00 committed by GitHub
parent f4d40224f2
commit c9e7796b33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/grafana-ui/src/components/Table/DefaultCell.tsx
View File

@ -1,6 +1,7 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { TableCellProps } from './types'; import { TableCellProps } from './types';
import { formattedValueToString, LinkModel } from '@grafana/data'; import { formattedValueToString, LinkModel } from '@grafana/data';
import { Tooltip } from '../Tooltip/Tooltip';
export const DefaultCell: FC<TableCellProps> = props => { export const DefaultCell: FC<TableCellProps> = props => {
const { field, cell, tableStyles, row } = props; const { field, cell, tableStyles, row } = props;
@ -22,9 +23,11 @@ export const DefaultCell: FC<TableCellProps> = props => {
return ( return (
<div className={tableStyles.tableCell}> <div className={tableStyles.tableCell}>
{link ? ( {link ? (
<a href={link.href} target={link.target} title={link.title}> <Tooltip content={link.title}>
{value} <a href={link.href} target={link.target} title={link.title} className={tableStyles.tableCellLink}>
</a> {value}
</a>
</Tooltip>
) : ( ) : (
value value
)} )}

4
packages/grafana-ui/src/components/Table/styles.ts
View File

@ -12,6 +12,7 @@ export interface TableStyles {
headerCell: string; headerCell: string;
tableCell: string; tableCell: string;
tableCellWrapper: string; tableCellWrapper: string;
tableCellLink: string;
row: string; row: string;
theme: GrafanaTheme; theme: GrafanaTheme;
resizeHandle: string; resizeHandle: string;
@ -75,6 +76,9 @@ export const getTableStyles = stylesFactory(
border-right: none; border-right: none;
} }
`, `,
tableCellLink: css`
text-decoration: underline;
`,
tableCell: css` tableCell: css`
padding: ${padding}px 10px; padding: ${padding}px 10px;
text-overflow: ellipsis; text-overflow: ellipsis;

1
packages/grafana-ui/src/components/index.ts
View File

@ -44,6 +44,7 @@ export { ModalsProvider, ModalRoot, ModalsController } from './Modal/ModalsConte
export { SetInterval } from './SetInterval/SetInterval'; export { SetInterval } from './SetInterval/SetInterval';
export { Table } from './Table/Table'; export { Table } from './Table/Table';
export { TableCellDisplayMode } from './Table/types';
export { TableInputCSV } from './TableInputCSV/TableInputCSV'; export { TableInputCSV } from './TableInputCSV/TableInputCSV';
export { TabsBar } from './Tabs/TabsBar'; export { TabsBar } from './Tabs/TabsBar';
export { Tab } from './Tabs/Tab'; export { Tab } from './Tabs/Tab';

2
public/app/plugins/panel/table/module.tsx
View File

@ -2,7 +2,7 @@ import { PanelPlugin } from '@grafana/data';
import { TablePanel } from './TablePanel'; import { TablePanel } from './TablePanel';
import { CustomFieldConfig, Options } from './types'; import { CustomFieldConfig, Options } from './types';
import { tablePanelChangedHandler, tableMigrationHandler } from './migrations'; import { tablePanelChangedHandler, tableMigrationHandler } from './migrations';
import { TableCellDisplayMode } from '@grafana/ui/src/components/Table/types'; import { TableCellDisplayMode } from '@grafana/ui';
export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel) export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
.setPanelChangeHandler(tablePanelChangedHandler) .setPanelChangeHandler(tablePanelChangedHandler)