67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import { Box, ClipboardButton, Stack, Text, Tooltip } from '@grafana/ui';
|
|
import { t } from 'app/core/internationalization';
|
|
|
|
import ConditionalWrap from '../ConditionalWrap';
|
|
|
|
type DetailTextProps = {
|
|
id: string;
|
|
label: string;
|
|
value: string | JSX.Element | null;
|
|
/** Should the value be displayed using monospace font family? */
|
|
monospace?: boolean;
|
|
/** Optional string to display in a tooltip on hover of the value */
|
|
tooltipValue?: string;
|
|
} & ConditionalProps;
|
|
|
|
type ConditionalProps =
|
|
// Require either both copy props or neither
|
|
| {
|
|
/** Should we show a button for copying the value to clipboard? */
|
|
showCopyButton: boolean;
|
|
/**
|
|
* Value to use for copying to clipboard, when enabled.
|
|
* Needed as the value could be an element
|
|
*/
|
|
copyValue: string;
|
|
}
|
|
| { showCopyButton?: never; copyValue?: never };
|
|
|
|
export const DetailText = ({
|
|
id,
|
|
label,
|
|
value,
|
|
monospace,
|
|
showCopyButton,
|
|
copyValue,
|
|
tooltipValue,
|
|
}: DetailTextProps) => {
|
|
const copyToClipboardLabel = t('alerting.copy-to-clipboard', 'Copy "{{label}}" to clipboard', { label });
|
|
return (
|
|
<Box>
|
|
<Stack direction="column" gap={0}>
|
|
<Text color="secondary" id={id}>
|
|
{label}
|
|
</Text>
|
|
<Text aria-labelledby={id} color="primary" variant={monospace ? 'code' : 'body'}>
|
|
<ConditionalWrap
|
|
shouldWrap={Boolean(tooltipValue)}
|
|
wrap={(children) => <Tooltip content={tooltipValue!}>{children}</Tooltip>}
|
|
>
|
|
<span>{value}</span>
|
|
</ConditionalWrap>
|
|
{showCopyButton && (
|
|
<ClipboardButton
|
|
aria-label={copyToClipboardLabel}
|
|
fill="text"
|
|
variant="secondary"
|
|
icon="copy"
|
|
size="sm"
|
|
getText={() => copyValue}
|
|
/>
|
|
)}
|
|
</Text>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
};
|