Skip to content

feat: Redesign resources table #4600

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 12 commits into from
Oct 18, 2022
Merged

feat: Redesign resources table #4600

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e721eec
wip: Update resources table
BrunoQuaresma Oct 14, 2022
446b7bd
Merge branch 'main' of github.com:coder/coder into bq/update-resource…
BrunoQuaresma Oct 17, 2022
d71f37b
Add collapsable metadata
BrunoQuaresma Oct 17, 2022
4496ec2
Update resource status
BrunoQuaresma Oct 17, 2022
c78e419
Refactor clickable experience
BrunoQuaresma Oct 17, 2022
a1b1f7f
Improve agent status
BrunoQuaresma Oct 17, 2022
ad60b38
Replace table
BrunoQuaresma Oct 17, 2022
4731d52
Sort by number of agents
BrunoQuaresma Oct 17, 2022
803b554
Fix lint
BrunoQuaresma Oct 17, 2022
9a3793e
Fix tests
BrunoQuaresma Oct 17, 2022
25a4696
Fix all tests
BrunoQuaresma Oct 17, 2022
d437ea0
Move status string to i18n
BrunoQuaresma Oct 18, 2022
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
Prev Previous commit
Next Next commit
Sort by number of agents
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Oct 17, 2022
commit 4731d5299982cbf3a631c79e8f4cefd70cf9015a
159 changes: 84 additions & 75 deletions site/src/components/Resources/ResourceCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,86 +112,91 @@ export const ResourceCard: FC<ResourceCardProps> = ({
</Stack>
</Stack>

<div>
{resource.agents?.map((agent) => {
return (
<Stack
key={agent.id}
direction="row"
alignItems="center"
justifyContent="space-between"
className={styles.agentRow}
>
<Stack direction="row" alignItems="baseline">
<AgentStatus agent={agent} />
<div>
<div className={styles.agentName}>{agent.name}</div>
<Stack
direction="row"
alignItems="baseline"
className={styles.agentData}
spacing={1}
>
<span className={styles.agentOS}>
{agent.operating_system}
</span>
<AgentVersion agent={agent} serverVersion={serverVersion} />
<AgentLatency agent={agent} />
</Stack>
</div>
</Stack>

<Stack direction="row" alignItems="center" spacing={0.5}>
{showApps && agent.status === "connected" && (
<>
{applicationsHost !== undefined && (
<PortForwardButton
host={applicationsHost}
workspaceName={workspace.name}
agentId={agent.id}
agentName={agent.name}
username={workspace.owner_name}
/>
)}
{!hideSSHButton && (
<SSHButton
workspaceName={workspace.name}
agentName={agent.name}
{resource.agents && resource.agents.length > 0 && (
<div>
{resource.agents?.map((agent) => {
return (
<Stack
key={agent.id}
direction="row"
alignItems="center"
justifyContent="space-between"
className={styles.agentRow}
>
<Stack direction="row" alignItems="baseline">
<AgentStatus agent={agent} />
<div>
<div className={styles.agentName}>{agent.name}</div>
<Stack
direction="row"
alignItems="baseline"
className={styles.agentData}
spacing={1}
>
<span className={styles.agentOS}>
{agent.operating_system}
</span>
<AgentVersion
agent={agent}
serverVersion={serverVersion}
/>
)}
<TerminalLink
workspaceName={workspace.name}
agentName={agent.name}
userName={workspace.owner_name}
/>
{agent.apps.map((app) => (
<AppLink
key={app.name}
appsHost={applicationsHost}
appIcon={app.icon}
appName={app.name}
appCommand={app.command}
appSubdomain={app.subdomain}
username={workspace.owner_name}
<AgentLatency agent={agent} />
</Stack>
</div>
</Stack>

<Stack direction="row" alignItems="center" spacing={0.5}>
{showApps && agent.status === "connected" && (
<>
{applicationsHost !== undefined && (
<PortForwardButton
host={applicationsHost}
workspaceName={workspace.name}
agentId={agent.id}
agentName={agent.name}
username={workspace.owner_name}
/>
)}
{!hideSSHButton && (
<SSHButton
workspaceName={workspace.name}
agentName={agent.name}
/>
)}
<TerminalLink
workspaceName={workspace.name}
agentName={agent.name}
health={app.health}
appSharingLevel={app.sharing_level}
userName={workspace.owner_name}
/>
))}
</>
)}
{showApps && agent.status === "connecting" && (
<>
<Skeleton width={80} height={36} variant="rect" />
<Skeleton width={120} height={36} variant="rect" />
</>
)}
{agent.apps.map((app) => (
<AppLink
key={app.name}
appsHost={applicationsHost}
appIcon={app.icon}
appName={app.name}
appCommand={app.command}
appSubdomain={app.subdomain}
username={workspace.owner_name}
workspaceName={workspace.name}
agentName={agent.name}
health={app.health}
appSharingLevel={app.sharing_level}
/>
))}
</>
)}
{showApps && agent.status === "connecting" && (
<>
<Skeleton width={80} height={36} variant="rect" />
<Skeleton width={120} height={36} variant="rect" />
</>
)}
</Stack>
</Stack>
</Stack>
)
})}
</div>
)
})}
</div>
)}
</div>
)
}
Expand All @@ -211,6 +216,10 @@ const useStyles = makeStyles((theme) => ({
resourceCardHeader: {
padding: theme.spacing(3, 4),
borderBottom: `1px solid ${theme.palette.divider}`,

"&:last-child": {
borderBottom: 0,
},
},

metadataHeader: {
Expand Down
Loading