Skip to content

Update properties table #2723

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Mar 3, 2025
+103 −149
Merged

Update properties table #2723

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3642fca
Update properties table treatment
benjaminleonard Mar 3, 2025
3ba8c07
Tweak copy button so it is not cut off
benjaminleonard Mar 3, 2025
eae0c8a
Spacing tweak
benjaminleonard Mar 3, 2025
a50eb3c
Satisfy husky error
benjaminleonard Mar 3, 2025
2eb17fd
Remove css file
benjaminleonard Mar 3, 2025
d0af5a4
Remove other group uses
benjaminleonard Mar 3, 2025
1faeaee
share col styling that's the same
david-crespo Mar 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 35 additions & 39 deletions app/pages/project/instances/InstancePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,45 +218,41 @@ export default function InstancePage() {
<MoreActionsMenu label="Instance actions" actions={allMenuActions} />
</div>
</PageHeader>
<PropertiesTable.Group className="-mt-8 mb-16">
<PropertiesTable>
<PropertiesTable.Row label="cpu">
<span className="text-default">{instance.ncpus}</span>
<span className="ml-1 text-tertiary">{pluralize(' vCPU', instance.ncpus)}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="ram">
<span className="text-default">{memory.value}</span>
<span className="ml-1 text-tertiary"> {memory.unit}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="state">
<div className="flex items-center gap-2">
<InstanceStateBadge state={instance.runState} />
{instanceTransitioning(instance) && <PollingSpinner />}
<InstanceAutoRestartPopover instance={instance} />
</div>
</PropertiesTable.Row>
<PropertiesTable.Row label="vpc">
{vpc ? (
<Link
className="link-with-underline group text-sans-md"
to={pb.vpc({ project: instanceSelector.project, vpc: vpc.name })}
>
{vpc.name}
</Link>
) : (
<EmptyCell />
)}
</PropertiesTable.Row>
</PropertiesTable>
<PropertiesTable>
<PropertiesTable.DescriptionRow description={instance.description} />
<PropertiesTable.DateRow date={instance.timeCreated} label="Created" />
<PropertiesTable.IdRow id={instance.id} />
<PropertiesTable.Row label="external IPs">
{<ExternalIps {...instanceSelector} />}
</PropertiesTable.Row>
</PropertiesTable>
</PropertiesTable.Group>
<PropertiesTable columns={2} className="-mt-8 mb-16">
<PropertiesTable.Row label="cpu">
<span className="text-default">{instance.ncpus}</span>
<span className="ml-1 text-tertiary">{pluralize(' vCPU', instance.ncpus)}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="ram">
<span className="text-default">{memory.value}</span>
<span className="ml-1 text-tertiary"> {memory.unit}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="state">
<div className="flex items-center gap-2">
<InstanceStateBadge state={instance.runState} />
{instanceTransitioning(instance) && <PollingSpinner />}
<InstanceAutoRestartPopover instance={instance} />
</div>
</PropertiesTable.Row>
<PropertiesTable.Row label="vpc">
{vpc ? (
<Link
className="link-with-underline group text-sans-md"
to={pb.vpc({ project: instanceSelector.project, vpc: vpc.name })}
>
{vpc.name}
</Link>
) : (
<EmptyCell />
)}
</PropertiesTable.Row>
<PropertiesTable.DescriptionRow description={instance.description} />
<PropertiesTable.DateRow date={instance.timeCreated} label="Created" />
<PropertiesTable.IdRow id={instance.id} />
<PropertiesTable.Row label="external IPs">
{<ExternalIps {...instanceSelector} />}
</PropertiesTable.Row>
</PropertiesTable>
<RouteTabs fullWidth>
<Tab to={pb.instanceStorage(instanceSelector)}>Storage</Tab>
<Tab to={pb.instanceNetworking(instanceSelector)}>Networking</Tab>
Expand Down
20 changes: 8 additions & 12 deletions app/pages/project/vpcs/RouterPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,18 +200,14 @@ export default function RouterPage() {
<MoreActionsMenu label="Router actions" actions={actions} />
</div>
</PageHeader>
<PropertiesTable.Group className="-mt-8 mb-16">
<PropertiesTable>
<PropertiesTable.DescriptionRow description={routerData.description} />
<PropertiesTable.Row label="Kind">
<Badge color="neutral">{routerData.kind}</Badge>
</PropertiesTable.Row>
</PropertiesTable>
<PropertiesTable>
<PropertiesTable.DateRow date={routerData.timeCreated} label="Created" />
<PropertiesTable.DateRow date={routerData.timeModified} label="Last Modified" />
</PropertiesTable>
</PropertiesTable.Group>
<PropertiesTable columns={2} className="-mt-8 mb-16">
<PropertiesTable.DescriptionRow description={routerData.description} />
<PropertiesTable.Row label="Kind">
<Badge color="neutral">{routerData.kind}</Badge>
</PropertiesTable.Row>
<PropertiesTable.DateRow date={routerData.timeCreated} label="Created" />
<PropertiesTable.DateRow date={routerData.timeModified} label="Last Modified" />
</PropertiesTable>
<TableControls className="mb-3">
<TableTitle>Routes</TableTitle>
{canCreateNewRoute ? (
Expand Down
16 changes: 6 additions & 10 deletions app/pages/project/vpcs/VpcPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,16 +75,12 @@ export default function VpcPage() {
<MoreActionsMenu label="VPC actions" actions={actions} />
</div>
</PageHeader>
<PropertiesTable.Group className="mb-16">
<PropertiesTable>
<PropertiesTable.DescriptionRow description={vpc.description} />
<PropertiesTable.Row label="DNS Name">{vpc.dnsName}</PropertiesTable.Row>
</PropertiesTable>
<PropertiesTable>
<PropertiesTable.DateRow date={vpc.timeCreated} label="Created" />
<PropertiesTable.DateRow date={vpc.timeModified} label="Last Modified" />
</PropertiesTable>
</PropertiesTable.Group>
<PropertiesTable columns={2} className="-mt-8 mb-16">
<PropertiesTable.DescriptionRow description={vpc.description} />
<PropertiesTable.Row label="DNS Name">{vpc.dnsName}</PropertiesTable.Row>
<PropertiesTable.DateRow date={vpc.timeCreated} label="Created" />
<PropertiesTable.DateRow date={vpc.timeModified} label="Last Modified" />
</PropertiesTable>

<RouteTabs fullWidth>
<Tab to={pb.vpcFirewallRules(vpcSelector)}>Firewall Rules</Tab>
Expand Down
58 changes: 27 additions & 31 deletions app/pages/system/inventory/sled/SledPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,37 +43,33 @@ export default function SledPage() {
<PageTitle icon={<Servers24Icon />}>Sled</PageTitle>
</PageHeader>

<PropertiesTable.Group className="-mt-8 mb-16">
<PropertiesTable>
<PropertiesTable.Row label="sled id">
<span className="text-default">{sled.id}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="part">
<span className="text-default">{sled.baseboard.part}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="serial">
<span className="text-default">{sled.baseboard.serial}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="revision">
<span className="text-default">{sled.baseboard.revision}</span>
</PropertiesTable.Row>
</PropertiesTable>
<PropertiesTable>
<PropertiesTable.Row label="rack id">
<span className="text-default">{sled.rackId}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="location">
<span className="text-disabled">Coming soon</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="usable hardware threads">
<span className="text-default">{sled.usableHardwareThreads}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="usable physical ram">
<span className="pr-0.5 text-default">{ram.value}</span>
<span className="text-tertiary">{ram.unit}</span>
</PropertiesTable.Row>
</PropertiesTable>
</PropertiesTable.Group>
<PropertiesTable columns={2} className="-mt-8 mb-16">
<PropertiesTable.Row label="sled id">
<span className="text-default">{sled.id}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="part">
<span className="text-default">{sled.baseboard.part}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="serial">
<span className="text-default">{sled.baseboard.serial}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="revision">
<span className="text-default">{sled.baseboard.revision}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="rack id">
<span className="text-default">{sled.rackId}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="location">
<span className="text-disabled">Coming soon</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="usable hardware threads">
<span className="text-default">{sled.usableHardwareThreads}</span>
</PropertiesTable.Row>
<PropertiesTable.Row label="usable physical ram">
<span className="pr-0.5 text-default">{ram.value}</span>
<span className="text-tertiary">{ram.unit}</span>
</PropertiesTable.Row>
</PropertiesTable>

<RouteTabs fullWidth>
<Tab to={pb.sledInstances({ sledId })}>Instances</Tab>
Expand Down
16 changes: 6 additions & 10 deletions app/pages/system/silos/SiloPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,16 +66,12 @@ export default function SiloPage() {
/>
</PageHeader>

<PropertiesTable.Group className="mb-16">
<PropertiesTable>
<PropertiesTable.IdRow id={silo.id} />
<PropertiesTable.DescriptionRow description={silo.description} />
</PropertiesTable>
<PropertiesTable>
<PropertiesTable.DateRow date={silo.timeCreated} label="Created" />
<PropertiesTable.DateRow date={silo.timeModified} label="Last Modified" />
</PropertiesTable>
</PropertiesTable.Group>
<PropertiesTable columns={2} className="-mt-8 mb-16">
<PropertiesTable.IdRow id={silo.id} />
<PropertiesTable.DescriptionRow description={silo.description} />
<PropertiesTable.DateRow date={silo.timeCreated} label="Created" />
<PropertiesTable.DateRow date={silo.timeModified} label="Last Modified" />
</PropertiesTable>

<QueryParamTabs className="full-width" defaultValue="idps">
<Tabs.List>
Expand Down
2 changes: 1 addition & 1 deletion app/ui/lib/DateTime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import { toLocaleDateString, toLocaleTimeString } from '~/util/date'

export const DateTime = ({ date, locale }: { date: Date; locale?: string }) => (
<time dateTime={date.toISOString()} className="flex flex-wrap gap-x-2">
<time dateTime={date.toISOString()} className="flex flex-wrap gap-x-1">
<span>{toLocaleDateString(date, locale)}</span>
<span className="text-tertiary">{toLocaleTimeString(date, locale)}</span>
</time>
Expand Down
44 changes: 16 additions & 28 deletions app/ui/lib/PropertiesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import cn from 'classnames'
import type { ReactNode } from 'react'

import { DescriptionCell } from '~/table/cells/DescriptionCell'
import { Badge } from '~/ui/lib/Badge'
import { isOneOf } from '~/util/children'
import { invariant } from '~/util/invariant'

Expand All @@ -19,9 +18,14 @@ import { Truncate } from './Truncate'
export interface PropertiesTableProps {
className?: string
children: ReactNode
columns?: 1 | 2
}

export function PropertiesTable({ className, children }: PropertiesTableProps) {
export function PropertiesTable({
className,
children,
columns = 1,
}: PropertiesTableProps) {
invariant(
isOneOf(children, [
PropertiesTable.Row,
Expand All @@ -35,7 +39,13 @@ export function PropertiesTable({ className, children }: PropertiesTableProps) {
<div
className={cn(
className,
'properties-table grid min-w-min basis-6/12 divide-y rounded-lg border border-default children:pl-3 children:pr-6 children:border-secondary'
'properties-table min-w-min basis-6/12 rounded-lg border border-default',
'children:border-t children:pl-3 children:pr-6 children:border-secondary [&>*:nth-child(-n+2)]:!border-t-0',
'grid grid-cols-[minmax(min-content,1fr)_3fr]',
{
'lg+:grid-cols-[minmax(min-content,1fr)_3fr_minmax(min-content,1fr)_3fr] lg+:[&>*:nth-child(-n+4)]:!border-t-0 lg+:[&>*:nth-child(4n-2)]:border-r':
columns === 2,
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll take your word for it

)}
>
{children}
Expand All @@ -49,10 +59,10 @@ interface PropertiesTableRowProps {
}
PropertiesTable.Row = ({ label, children }: PropertiesTableRowProps) => (
<>
<span className="flex items-center">
<Badge>{label}</Badge>
<span className="flex items-center whitespace-nowrap text-mono-sm text-secondary">
{label}
</span>
<div className="flex h-11 items-center overflow-hidden whitespace-nowrap pr-4 text-sans-md text-default">
<div className="flex h-10 items-center overflow-hidden whitespace-nowrap pr-4 text-sans-md text-default">
{children}
</div>
</>
Expand Down Expand Up @@ -81,25 +91,3 @@ PropertiesTable.DateRow = ({
<DateTime date={date} />
</PropertiesTable.Row>
)

interface PropertiesTableGroupProps {
children: ReactNode
className?: string
}

PropertiesTable.Group = ({ children, className }: PropertiesTableGroupProps) => {
invariant(
isOneOf(children, [PropertiesTable]),
'PropertiesTable can only have PropertiesTable as a child'
)
return (
<div
className={cn(
className,
'flex min-w-min md-:flex-col md-:first:children:rounded-b-none md-:first:children:border-b-secondary md-:last:children:rounded-t-none md-:last:children:border-t-0 lg+:gap-x-4'
)}
>
{children}
</div>
)
}
4 changes: 3 additions & 1 deletion app/ui/lib/Truncate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ export const Truncate = ({
{truncate(text, maxLength, position)}
</div>
</Tooltip>
{hasCopyButton && <CopyToClipboard text={text} />}
<div className="flex items-center p-0.5">
{hasCopyButton && <CopyToClipboard text={text} />}
</div>
</div>
)
}
Expand Down
15 changes: 0 additions & 15 deletions app/ui/styles/components/properties-table.css
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion app/ui/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
@import './components/form.css';
@import './components/login-page.css';
@import './components/mini-table.css';
@import './components/properties-table.css';
@import './components/side-modal.css';
@import './components/spinner.css';
@import './components/table.css';
Expand Down
2 changes: 1 addition & 1 deletion tools/deno/deploy-dogfood.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ if (!consoleCommit) {
const fullCommit = await $`git rev-parse ${consoleCommit}`.text()

if (consoleCommit !== fullCommit) {
console.log(`Resolved ${consoleCommit} to ${fullCommit}`)
console.info(`Resolved ${consoleCommit} to ${fullCommit}`)
}

console.info('Finding nexus zones...')
Expand Down
Loading