8000 feat: resources card by presleyp · Pull Request #1627 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

feat: resources card #1627

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 17 commits into from
May 20, 2022
Merged

feat: resources card #1627

Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
448070b
Set up table
presleyp May 18, 2022
99e63e5
Format
presleyp May 18, 2022
7b318ee
Hook up api and test - bug assigning resources
presleyp May 18, 2022
8cfb56a
Remove debugging code
presleyp May 18, 2022
2a3897c
Merge branch 'main' into resources/presleyp/1031
presleyp May 18, 2022
c5b60dd
Format
presleyp May 18, 2022
c4257a2
Remove unnecessary cards
presleyp May 18, 2022
be67df8
Fix test
presleyp May 20, 2022
85a869d
Fix assignment
presleyp May 20, 2022
1289ad2
Fix tests
presleyp May 20, 2022
abc7703
Lint
presleyp May 20, 2022
416be20
Merge branch 'main' into resources/presleyp/1031
presleyp May 20, 2022
c300c07
Merge branch 'main' into resources/presleyp/1031
presleyp May 20, 2022
13ba13c
Merge branch 'main' of github.com:coder/coder into resources/presleyp…
BrunoQuaresma May 20, 2022
85c2ac8
Refactor design
BrunoQuaresma May 20, 2022
e7b1110
Refactor resources table
BrunoQuaresma May 20, 2022
f645de3
Fix tests
BrunoQuaresma May 20, 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
Refactor resources table
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed May 20, 2022
commit e7b11103f049f37d46107d853ed6feb33e4fe399
96 changes: 49 additions & 47 deletions site/src/components/Resources/Resources.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,49 +37,59 @@ export const Resources: React.FC<ResourcesProps> = ({ resources, getResourcesErr
<TableHead>
<TableHeaderRow>
<TableCell>{Language.resourceLabel}</TableCell>
<TableCell />
<TableCell className={styles.agentColumn}>{Language.agentLabel}</TableCell>
<TableCell>{Language.statusLabel}</TableCell>
</TableHeaderRow>
</TableHead>
<TableBody>
{resources?.map((resource) => (
<TableRow key={resource.id}>
<TableCell>{resource.name}</TableCell>
<TableCell className={styles.cellWithTable}>
{resource.agents && (
<Table>
<TableHead>
<TableHeaderRow>
<TableCell width="50%">{Language.agentLabel}</TableCell>
<TableCell width="50%">{Language.statusLabel}</TableCell>
</TableHeaderRow>
</TableHead>
<TableBody>
{resource.agents.map((agent) => (
<TableRow key={`${resource.id}-${agent.id}`}>
<TableCell>
<span style={{ color: theme.palette.text.secondary }}>{agent.name}</span>
</TableCell>
<TableCell>
<span style={{ color: getDisplayAgentStatus(theme, agent).color }}>
{getDisplayAgentStatus(theme, agent).status}
</span>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
</TableCell>
</TableRow>
))}
{resources?.map((resource) => {
{
/* We need to initialize the agents to display the resource */
}
const agents = resource.agents ?? [null]
return agents.map((agent, agentIndex) => {
{
/* If there is no agent, just display the resource name */
}
if (!agent) {
return (
<TableRow>
<TableCell className={styles.resourceNameCell}>{resource.name}</TableCell>
<TableCell colSpan={2}></TableCell>
</TableRow>
)
}

return (
<TableRow key={resource.id}>
{/* We only want to display the name in the first row because we are using rowSpan */}
{/* The rowspan should be the same than the number of agents */}
{agentIndex === 0 && (
<TableCell className={styles.resourceNameCell} rowSpan={agents.length}>
{resource.name}
</TableCell>
)}

<TableCell className={styles.agentColumn}>
<span style={{ color: theme.palette.text.secondary }}>{agent.name}</span>
</TableCell>
<TableCell>
<span style={{ color: getDisplayAgentStatus(theme, agent).color }}>
{getDisplayAgentStatus(theme, agent).status}
</span>
</TableCell>
</TableRow>
)
})
})}
</TableBody>
</Table>
)}
</WorkspaceSection>
)
}

const useStyles = makeStyles(() => ({
const useStyles = makeStyles((theme) => ({
sectionContents: {
margin: 0,
},
Expand All @@ -88,20 +98,12 @@ const useStyles = makeStyles(() => ({
border: 0,
},

cellWithTable: {
padding: 0,

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

"& table": {
borderTop: 0,
borderBottom: 0,
resourceNameCell: {
borderRight: `1px solid ${theme.palette.divider}`,
},

"& tr:last-child td": {
borderBottom: 0,
},
},
// Adds some left spacing
agentColumn: {
paddingLeft: `${theme.spacing(2)}px !important`,
},
}))
0