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

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
Update resource status
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Oct 17, 2022
commit 4496ec2bf822e77c3c1b1fae497ca12cebebffb6
39 changes: 35 additions & 4 deletions site/src/components/Resources/ResourceCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
import { makeStyles } from "@material-ui/core/styles"
import { makeStyles, Theme, useTheme } from "@material-ui/core/styles"
import { Skeleton } from "@material-ui/lab"
import { PortForwardButton } from "components/PortForwardButton/PortForwardButton"
import { FC, useState } from "react"
import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
import {
Workspace,
WorkspaceAgent,
WorkspaceAgentStatus,
WorkspaceResource,
} from "../../api/typesGenerated"
import { AppLink } from "../AppLink/AppLink"
import { SSHButton } from "../SSHButton/SSHButton"
import { Stack } from "../Stack/Stack"
Expand All @@ -19,6 +24,23 @@ import IconButton from "@material-ui/core/IconButton"
import Tooltip from "@material-ui/core/Tooltip"
import { Maybe } from "components/Conditionals/Maybe"

const getAgentStatusColor = (theme: Theme, agent: WorkspaceAgent) => {
switch (agent.status) {
case "connected":
return theme.palette.success.light
case "connecting":
return theme.palette.info.light
case "disconnected":
return theme.palette.text.secondary
}
}

const agentStatusLabels: Record<WorkspaceAgentStatus, string> = {
connected: "Connected",
connecting: "Connecting...",
disconnected: "Disconnected",
}

export interface ResourceCardProps {
resource: WorkspaceResource
workspace: Workspace
Expand All @@ -36,6 +58,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({
hideSSHButton,
serverVersion,
}) => {
const theme = useTheme<Theme>()
const [shouldDisplayAllMetadata, setShouldDisplayAllMetadata] =
useState(false)
const styles = useStyles()
Expand Down Expand Up @@ -110,6 +133,9 @@ export const ResourceCard: FC<ResourceCardProps> = ({

<div>
{resource.agents?.map((agent) => {
const statusColor = getAgentStatusColor(theme, agent)
const statusLabel = agentStatusLabels[agent.status]

return (
<Stack
key={agent.id}
Expand All @@ -119,7 +145,13 @@ export const ResourceCard: FC<ResourceCardProps> = ({
className={styles.agentRow}
>
<Stack direction="row" alignItems="baseline">
<div role="status" className={styles.agentStatus} />
<Tooltip title={statusLabel}>
<div
role="status"
className={styles.agentStatus}
style={{ backgroundColor: statusColor }}
/>
</Tooltip>
<div>
<div className={styles.agentName}>{agent.name}</div>
<Stack
Expand Down Expand Up @@ -248,7 +280,6 @@ const useStyles = makeStyles((theme) => ({
agentStatus: {
width: theme.spacing(1),
height: theme.spacing(1),
backgroundColor: theme.palette.success.light,
borderRadius: "100%",
},

Expand Down