Skip to content

Commit 5be02a2

Browse files
aslilacaslilac
authored
feat: show tags for psk provisioners (#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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy