Top-align all targets page table cell contents, other styling

Signed-off-by: Julius Volz <julius.volz@gmail.com>
pull/14872/head
Julius Volz 2024-09-03 16:09:50 +02:00
parent eb175c88f6
commit d0ccbd2eb5
2 changed files with 14 additions and 7 deletions

View File

@ -325,7 +325,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
: undefined, : undefined,
}} }}
> >
<Table.Td> <Table.Td valign="top">
{/* TODO: Process target URL like in old UI */} {/* TODO: Process target URL like in old UI */}
<EndpointLink <EndpointLink
endpoint={target.scrapeUrl} endpoint={target.scrapeUrl}
@ -333,19 +333,24 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
/> />
</Table.Td> </Table.Td>
<Table.Td> <Table.Td valign="top">
<TargetLabels <TargetLabels
labels={target.labels} labels={target.labels}
discoveredLabels={target.discoveredLabels} discoveredLabels={target.discoveredLabels}
/> />
</Table.Td> </Table.Td>
<Table.Td> <Table.Td valign="top">
<Group gap="xs" wrap="wrap"> <Group
gap="xs"
wrap="wrap"
justify="space-between"
>
<Tooltip <Tooltip
label="Last target scrape" label="Last target scrape"
withArrow withArrow
> >
<Badge <Badge
w="max-content"
variant="light" variant="light"
className={badgeClasses.statsBadge} className={badgeClasses.statsBadge}
styles={{ styles={{
@ -365,6 +370,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
withArrow withArrow
> >
<Badge <Badge
w="max-content"
variant="light" variant="light"
className={badgeClasses.statsBadge} className={badgeClasses.statsBadge}
styles={{ styles={{
@ -381,8 +387,9 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
</Tooltip> </Tooltip>
</Group> </Group>
</Table.Td> </Table.Td>
<Table.Td> <Table.Td valign="top">
<Badge <Badge
w="max-content"
className={healthBadgeClass(target.health)} className={healthBadgeClass(target.health)}
> >
{target.health} {target.health}
@ -391,7 +398,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = ({
</Table.Tr> </Table.Tr>
{target.lastError && ( {target.lastError && (
<Table.Tr> <Table.Tr>
<Table.Td colSpan={5}> <Table.Td colSpan={5} valign="top">
<Alert <Alert
color="red" color="red"
mb="sm" mb="sm"

View File

@ -14,7 +14,7 @@ const TargetLabels: FC<TargetLabelsProps> = ({ discoveredLabels, labels }) => {
const [showDiscovered, { toggle: toggleDiscovered }] = useDisclosure(false); const [showDiscovered, { toggle: toggleDiscovered }] = useDisclosure(false);
return ( return (
<Stack my={showDiscovered ? "sm" : undefined}> <Stack>
<Group wrap="nowrap" align="flex-start"> <Group wrap="nowrap" align="flex-start">
<LabelBadges labels={labels} /> <LabelBadges labels={labels} />