opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: show tags for psk provisioners (#14628)

Browse Source
This commit is contained in:
Kayla Washburn-Love
2024-09-17 15:36:42 -06:00
committed by GitHub
parent de3945c291
commit 5be02a293e
1 changed files with 139 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/modules/provisioners/ProvisionerGroup.tsx
+139 -65
View File
@@ -134,13 +134,7 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
>
<Tooltip title="Scope">
<Pill size="lg" icon={iconScope}>
<span
css={{
":first-letter": { textTransform: "uppercase" },
}}
>
{daemonScope}
</span>
<span css={{ textTransform: "capitalize" }}>{daemonScope}</span>
</Pill>
</Tooltip>
{type === "key" &&
@@ -166,67 +160,45 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
borderRadius: 8,
border: `1px solid ${theme.palette.divider}`,
fontSize: 14,
padding: "12px 18px",
width: 310,
padding: "14px 18px",
width: 375,
}}
>
<div css={{ lineHeight: 1.6 }}>
<h4 css={styles.groupTitle}>{provisioner.name}</h4>
<span
css={{ color: theme.palette.text.secondary, fontSize: 13 }}
>
{type === "builtin" ? (
<span>Built-in</span>
) : (
<>
<Popover mode="hover">
<PopoverTrigger>
<span>
{buildInfo
? provisioner.version === buildInfo.version
? "Up to date"
: "Out of date"
: provisioner.version}
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
>
<div css={{ lineHeight: 1.5 }}>
<h4 css={{ fontWeight: 500, margin: 0 }}>
{provisioner.name}
</h4>
<span
css={{ color: theme.palette.text.secondary, fontSize: 12 }}
>
{type === "builtin" ? (
<span>Built-in</span>
) : (
<>
<ProvisionerVersionPopover
buildInfo={buildInfo}
provisioner={provisioner}
/>{" "}
&mdash;{" "}
{provisioner.last_seen_at && (
<span data-chromatic="ignore">
Last seen{" "}
{createDayString(provisioner.last_seen_at)}
</span>
</PopoverTrigger>
<PopoverContent
transformOrigin={{ vertical: -8, horizontal: 0 }}
css={{
"& .MuiPaper-root": {
padding: "20px 20px 8px",
maxWidth: 340,
},
}}
>
<h4 css={styles.versionPopoverTitle}>
Release version
</h4>
<p css={styles.text}>{provisioner.version}</p>
<h4 css={styles.versionPopoverTitle}>
Protocol version
</h4>
<p css={styles.text}>{provisioner.api_version}</p>
{provisioner.version !== buildInfo?.version && (
<p css={[styles.text, { fontSize: 13 }]}>
This provisioner is out of date. You may
experience issues when using a provisioner version
that doesn&apos;t match your Coder deployment.
Please upgrade to a newer version.{" "}
<Link href={docs("/")}>Learn more&hellip;</Link>
</p>
)}
</PopoverContent>
</Popover>{" "}
&mdash;{" "}
{provisioner.last_seen_at && (
<span data-chromatic="ignore">
Last seen {createDayString(provisioner.last_seen_at)}
</span>
)}
</>
)}
</span>
</div>
)}
</>
)}
</span>
</div>
{type === "psk" && (
<PskProvisionerTags tags={provisioner.tags} />
)}
</Stack>
</div>
))}
</div>
@@ -263,6 +235,107 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
);
};
interface ProvisionerVersionPopoverProps {
buildInfo?: BuildInfoResponse;
provisioner: ProvisionerDaemon;
}
const ProvisionerVersionPopover: FC<ProvisionerVersionPopoverProps> = ({
buildInfo,
provisioner,
}) => {
return (
<Popover mode="hover">
<PopoverTrigger>
<span>
{buildInfo
? provisioner.version === buildInfo.version
? "Up to date"
: "Out of date"
: provisioner.version}
</span>
</PopoverTrigger>
<PopoverContent
transformOrigin={{ vertical: -8, horizontal: 0 }}
css={{
"& .MuiPaper-root": {
padding: "20px 20px 8px",
maxWidth: 340,
},
}}
>
<h4 css={styles.versionPopoverTitle}>Release version</h4>
<p css={styles.text}>{provisioner.version}</p>
<h4 css={styles.versionPopoverTitle}>Protocol version</h4>
<p css={styles.text}>{provisioner.api_version}</p>
{provisioner.api_version !== buildInfo?.provisioner_api_version && (
<p css={[styles.text, { fontSize: 13 }]}>
This provisioner is out of date. You may experience issues when
using a provisioner version that doesn’t match your Coder
deployment. Please upgrade to a newer version.{" "}
<Link href={docs("/")}>Learn more…</Link>
</p>
)}
</PopoverContent>
</Popover>
);
};
interface PskProvisionerTagsProps {
tags: Record<string, string>;
}
const PskProvisionerTags: FC<PskProvisionerTagsProps> = ({ tags }) => {
const daemonScope = tags.scope || "organization";
const iconScope = daemonScope === "organization" ? <Business /> : <Person />;
const extraTags = Object.entries(tags).filter(
([tag]) => tag !== "scope" && tag !== "owner",
);
if (extraTags.length === 0) {
return (
<Pill icon={iconScope}>
<span css={{ textTransform: "capitalize" }}>{daemonScope}</span>
</Pill>
);
}
return (
<Popover mode="hover">
<PopoverTrigger>
<Pill icon={iconScope}>
{extraTags.length === 1 ? "+ 1 tag" : `+ ${extraTags.length} tags`}
</Pill>
</PopoverTrigger>
<PopoverContent
transformOrigin={{ vertical: -8, horizontal: 0 }}
css={{
"& .MuiPaper-root": {
padding: 20,
maxWidth: 340,
width: "fit-content",
},
}}
>
<div
css={{
marginLeft: "auto",
display: "flex",
flexWrap: "wrap",
gap: 12,
justifyContent: "right",
}}
>
{extraTags.map(([key, value]) => (
<ProvisionerTag key={key} tagName={key} tagValue={value} />
))}
</div>
</PopoverContent>
</Popover>
);
};
const BuiltinProvisionerTitle: FC = () => {
return (
<h4 css={styles.groupTitle}>
@@ -283,6 +356,7 @@ const BuiltinProvisionerTitle: FC = () => {
</h4>
);
};
const PskProvisionerTitle: FC = () => {
return (
<h4 css={styles.groupTitle}>