Skip to content

Commit 5be02a2

Browse files
aslilacaslilac
authored
feat: show tags for psk provisioners (coder#14628)
1 parent de3945c commit 5be02a2

File tree

1 file changed

+139
-65
lines changed

1 file changed

+139
-65
lines changed

‎site/src/modules/provisioners/ProvisionerGroup.tsx

Lines changed: 139 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -134,13 +134,7 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
134134
>
135135
<Tooltip title="Scope">
136136
<Pill size="lg" icon={iconScope}>
137-
<span
138-
css={{
139-
":first-letter": { textTransform: "uppercase" },
140-
}}
141-
>
142-
{daemonScope}
143-
</span>
137+
<span css={{ textTransform: "capitalize" }}>{daemonScope}</span>
144138
</Pill>
145139
</Tooltip>
146140
{type === "key" &&
@@ -166,67 +160,45 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
166160
borderRadius: 8,
167161
border: `1px solid ${theme.palette.divider}`,
168162
fontSize: 14,
169-
padding: "12px 18px",
170-
width: 310,
163+
padding: "14px 18px",
164+
width: 375,
171165
}}
172166
>
173-
<div css={{ lineHeight: 1.6 }}>
174-
<h4 css={styles.groupTitle}>{provisioner.name}</h4>
175-
<span
176-
css={{ color: theme.palette.text.secondary, fontSize: 13 }}
177-
>
178-
{type === "builtin" ? (
179-
<span>Built-in</span>
180-
) : (
181-
<>
182-
<Popover mode="hover">
183-
<PopoverTrigger>
184-
<span>
185-
{buildInfo
186-
? provisioner.version === buildInfo.version
187-
? "Up to date"
188-
: "Out of date"
189-
: provisioner.version}
167+
<Stack
168+
direction="row"
169+
justifyContent="space-between"
170+
alignItems="center"
171+
>
172+
<div css={{ lineHeight: 1.5 }}>
173+
<h4 css={{ fontWeight: 500, margin: 0 }}>
174+
{provisioner.name}
175+
</h4>
176+
<span
177+
css={{ color: theme.palette.text.secondary, fontSize: 12 }}
178+
>
179+
{type === "builtin" ? (
180+
<span>Built-in</span>
181+
) : (
182+
<>
183+
<ProvisionerVersionPopover
184+
buildInfo={buildInfo}
185+
provisioner={provisioner}
186+
/>{" "}
187+
&mdash;{" "}
188+
{provisioner.last_seen_at && (
189+
<span data-chromatic="ignore">
190+
Last seen{" "}
191+
{createDayString(provisioner.last_seen_at)}
190192
</span>
191-
</PopoverTrigger>
192-
<PopoverContent
193-
transformOrigin={{ vertical: -8, horizontal: 0 }}
194-
css={{
195-
"& .MuiPaper-root": {
196-
padding: "20px 20px 8px",
197-
maxWidth: 340,
198-
},
199-
}}
200-
>
201-
<h4 css={styles.versionPopoverTitle}>
202-
Release version
203-
</h4>
204-
<p css={styles.text}>{provisioner.version}</p>
205-
<h4 css={styles.versionPopoverTitle}>
206-
Protocol version
207-
</h4>
208-
<p css={styles.text}>{provisioner.api_version}</p>
209-
{provisioner.version !== buildInfo?.version && (
210-
<p css={[styles.text, { fontSize: 13 }]}>
211-
This provisioner is out of date. You may
212-
experience issues when using a provisioner version
213-
that doesn&apos;t match your Coder deployment.
214-
Please upgrade to a newer version.{" "}
215-
<Link href={docs("/")}>Learn more&hellip;</Link>
216-
</p>
217-
)}
218-
</PopoverContent>
219-
</Popover>{" "}
220-
&mdash;{" "}
221-
{provisioner.last_seen_at && (
222-
<span data-chromatic="ignore">
223-
Last seen {createDayString(provisioner.last_seen_at)}
224-
</span>
225-
)}
226-
</>
227-
)}
228-
</span>
229-
</div>
193+
)}
194+
</>
195+
)}
196+
</span>
197+
</div>
198+
{type === "psk" && (
199+
<PskProvisionerTags tags={provisioner.tags} />
200+
)}
201+
</Stack>
230202
</div>
231203
))}
232204
</div>
@@ -263,6 +235,107 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
263235
);
264236
};
265237

238+
interface ProvisionerVersionPopoverProps {
239+
buildInfo?: BuildInfoResponse;
240+
provisioner: ProvisionerDaemon;
241+
}
242+
243+
const ProvisionerVersionPopover: FC<ProvisionerVersionPopoverProps> = ({
244+
buildInfo,
245+
provisioner,
246+
}) => {
247+
return (
248+
<Popover mode="hover">
249+
<PopoverTrigger>
250+
<span>
251+
{buildInfo
252+
? provisioner.version === buildInfo.version
253+
? "Up to date"
254+
: "Out of date"
255+
: provisioner.version}
256+
</span>
257+
</PopoverTrigger>
258+
<PopoverContent
259+
transformOrigin={{ vertical: -8, horizontal: 0 }}
260+
css={{
261+
"& .MuiPaper-root": {
262+
padding: "20px 20px 8px",
263+
maxWidth: 340,
264+
},
265+
}}
266+
>
267+
<h4 css={styles.versionPopoverTitle}>Release version</h4>
268+
<p css={styles.text}>{provisioner.version}</p>
269+
<h4 css={styles.versionPopoverTitle}>Protocol version</h4>
270+
<p css={styles.text}>{provisioner.api_version}</p>
271+
{provisioner.api_version !== buildInfo?.provisioner_api_version && (
272+
<p css={[styles.text, { fontSize: 13 }]}>
273+
This provisioner is out of date. You may experience issues when
274+
using a provisioner version that doesn’t match your Coder
275+
deployment. Please upgrade to a newer version.{" "}
276+
<Link href={docs("/")}>Learn more…</Link>
277+
</p>
278+
)}
279+
</PopoverContent>
280+
</Popover>
281+
);
282+
};
283+
284+
interface PskProvisionerTagsProps {
285+
tags: Record<string, string>;
286+
}
287+
288+
const PskProvisionerTags: FC<PskProvisionerTagsProps> = ({ tags }) => {
289+
const daemonScope = tags.scope || "organization";
290+
const iconScope = daemonScope === "organization" ? <Business /> : <Person />;
291+
292+
const extraTags = Object.entries(tags).filter(
293+
([tag]) => tag !== "scope" && tag !== "owner",
294+
);
295+
296+
if (extraTags.length === 0) {
297+
return (
298+
<Pill icon={iconScope}>
299+
<span css={{ textTransform: "capitalize" }}>{daemonScope}</span>
300+
</Pill>
301+
);
302+
}
303+
304+
return (
305+
<Popover mode="hover">
306+
<PopoverTrigger>
307+
<Pill icon={iconScope}>
308+
{extraTags.length === 1 ? "+ 1 tag" : `+ ${extraTags.length} tags`}
309+
</Pill>
310+
</PopoverTrigger>
311+
<PopoverContent
312+
transformOrigin={{ vertical: -8, horizontal: 0 }}
313+
css={{
314+
"& .MuiPaper-root": {
315+
padding: 20,
316+
maxWidth: 340,
317+
width: "fit-content",
318+
},
319+
}}
320+
>
321+
<div
322+
css={{
323+
marginLeft: "auto",
324+
display: "flex",
325+
flexWrap: "wrap",
326+
gap: 12,
327+
justifyContent: "right",
328+
}}
329+
>
330+
{extraTags.map(([key, value]) => (
331+
<ProvisionerTag key={key} tagName={key} tagValue={value} />
332+
))}
333+
</div>
334+
</PopoverContent>
335+
</Popover>
336+
);
337+
};
338+
266339
const BuiltinProvisionerTitle: FC = () => {
267340
return (
268341
<h4 css={styles.groupTitle}>
@@ -283,6 +356,7 @@ const BuiltinProvisionerTitle: FC = () => {
283356
</h4>
284357
);
285358
};
359+
286360
const PskProvisionerTitle: FC = () => {
287361
return (
288362
<h4 css={styles.groupTitle}>

0 commit comments

Comments
 (0)