Sep 17, 2024 · Sep 5, 2024 · Sep 6, 2024 · Sep 6, 2024 · Sep 17, 2024 · Sep 17, 2024
diff --git a/site/src/modules/provisioners/Provisioner.tsx b/site/src/modules/provisioners/Provisioner.tsx
 display: "flex",
 flexWrap: "wrap",
 gap: 12,
 justifyContent: "right",
 }}
 >
 <Tooltip title="Scope">
diff --git a/site/src/modules/provisioners/ProvisionerGroup.tsx b/site/src/modules/provisioners/ProvisionerGroup.tsx
 import{useTheme}from"@emotion/react";
 importBusinessfrom"@mui/icons-material/Business";
 importPersonfrom"@mui/icons-material/Person";
 importButtonfrom"@mui/material/Button";
 importTooltipfrom"@mui/material/Tooltip";
 importtype{BuildInfoResponse,ProvisionerDaemon}from"api/typesGenerated";
 import{DropdownArrow}from"components/DropdownArrow/DropdownArrow";
 import{Pill}from"components/Pill/Pill";
 import{typeFC,useState}from"react";
 import{createDayString}from"utils/createDayString";
 import{ProvisionerTag}from"./ProvisionerTag";

 typeProvisionerGroupType="builtin"|"psk"|"key";

 interfaceProvisionerGroupProps{
 readonlybuildInfo?:BuildInfoResponse;
 readonlykeyName?:string;
 readonlytype:ProvisionerGroupType;
 readonlyprovisioners:ProvisionerDaemon[];
 }

 exportconstProvisionerGroup:FC<ProvisionerGroupProps>=({
 buildInfo,
 keyName,
 type,
 provisioners,
 })=>{
 const[provisioner]=provisioners;
 consttheme=useTheme();

 const[showDetails,setShowDetails]=useState(false);

 constdaemonScope=provisioner.tags.scope||"organization";
 consticonScope=daemonScope==="organization" ?<Business/> :<Person/>;

 constprovisionerVersion=provisioner.version;
 constallProvisionersAreSameVersion=provisioners.every(
 (provisioner)=>provisioner.version===provisionerVersion,
 );
 constupToDate=
 allProvisionersAreSameVersion&&buildInfo?.version===provisioner.version;
 constprovisionerCount=
 provisioners.length===1
 ?"1 provisioner"
 :`${provisioners.length} provisioners`;

 constextraTags=Object.entries(provisioner.tags).filter(
 ([key])=>key!=="scope"&&key!=="owner",
 );

 return(
 <div
 css={{
 borderRadius:8,
 border:`1px solid${theme.palette.divider}`,
 fontSize:14,
 }}
 >
 <header
 css={{
 padding:24,
 display:"flex",
 alignItems:"center",
 justifyContenxt:"space-between",
 gap:24,
 }}
 >
 <div
 css={{
 display:"flex",
 alignItems:"center",
 gap:24,
 objectFit:"fill",
 }}
 >
 {type==="builtin"&&(
 <divcss={{lineHeight:"160%"}}>
 <h4css={{fontWeight:500,margin:0}}>
 Built-in provisioners
 </h4>
 <spancss={{color:theme.palette.text.secondary}}>
 {provisionerCount} &mdash; Built-in
 </span>
 </div>
 )}
 {type==="psk"&&(
 <divcss={{lineHeight:"160%"}}>
 <h4css={{fontWeight:500,margin:0}}>PSK provisioners</h4>
 <spancss={{color:theme.palette.text.secondary}}>
 {provisionerCount} &mdash;{" "}
 {allProvisionersAreSameVersion ?(
 <code>{provisionerVersion}</code>
 ) :(
 <span>Multiple versions</span>
 )}
 </span>
 </div>
 )}
 {type==="key"&&(
 <divcss={{lineHeight:"160%"}}>
 <h4css={{fontWeight:500,margin:0}}>
 Key group &ndash;{keyName}
 </h4>
 <spancss={{color:theme.palette.text.secondary}}>
 {provisionerCount} &mdash;{" "}
 {allProvisionersAreSameVersion ?(
 <code>{provisionerVersion}</code>
 ) :(
 <span>Multiple versions</span>
 )}
 </span>
 </div>
 )}
 </div>
 <div
 css={{
 marginLeft:"auto",
 display:"flex",
 flexWrap:"wrap",
 gap:12,
 justifyContent:"right",
 }}
 >
 <Tooltiptitle="Scope">
 <Pillsize="lg"icon={iconScope}>
 <span
 css={{
 ":first-letter":{textTransform:"uppercase"},
 }}
 >
 {daemonScope}
 </span>
 </Pill>
 </Tooltip>
 {type==="key"&&
 extraTags.map(([key,value])=>(
 <ProvisionerTagkey={key}tagName={key}tagValue={value}/>
 ))}
 </div>
 </header>

 {showDetails&&(
 <div
 css={{
 padding:"0 24px 24px",
 display:"flex",
 gap:12,
 flexWrap:"wrap",
 }}
 >
 {provisioners.map((provisioner)=>(
 <div
 key={provisioner.id}
 css={{
 borderRadius:8,
 border:`1px solid${theme.palette.divider}`,
 fontSize:14,
 padding:"12px 18px",
 width:310,
 }}
 >
 <divcss={{lineHeight:"160%"}}>
 <h4css={{fontWeight:500,margin:0}}>{provisioner.name}</h4>
 <spancss={{color:theme.palette.text.secondary}}>
 {type==="builtin" ?(
 <span>Built-in</span>
 ) :(
 <>
 {upToDate ?"Up to date" :provisioner.version} &mdash;{" "}
 {provisioner.last_seen_at&&(
 <spandata-chromatic="ignore">
 Last seen{createDayString(provisioner.last_seen_at)}
 </span>
 )}
 </>
 )}
 </span>
 </div>
 </div>
 ))}
 </div>
 )}

 <div
 css={{
 borderTop:`1px solid${theme.palette.divider}`,
 display:"flex",
 alignItems:"center",
 justifyContent:"space-between",
 padding:"8px 8px 8px 24px",
 fontSize:12,
 color:theme.palette.text.secondary,
 }}
 >
 <span>No warnings from{provisionerCount}</span>
 <Button
 variant="text"
 css={{
 display:"flex",
 alignItems:"center",
 gap:4,
 color:theme.roles.info.text,
 fontSize:"inherit",
 }}
 onClick={()=>setShowDetails((it)=>!it)}
 >
 {showDetails ?"Hide" :"Show"} provisioner details{" "}
 <DropdownArrowclose={showDetails}/>
 </Button>
 </div>
 </div>
 );
 };
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPage.tsx
 import { buildInfo } from "api/queries/buildInfo";
 import {
 organizationsPermissions,
 provisionerDaemons,
 } from "api/queries/organizations";
 import type { Organization } from "api/typesGenerated";
 import type { Organization, ProvisionerDaemon } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { Loader } from "components/Loader/Loader";
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import NotFoundPage from "pages/404Page/404Page";
 import type { FC } from "react";
 import { useQuery } from "react-query";
 import { useParams } from "react-router-dom";
 import { useOrganizationSettings } from "./ManagementSettingsLayout";
 import { OrganizationProvisionersPageView } from "./OrganizationProvisionersPageView";
 import {
 OrganizationProvisionersPageView,
 type ProvisionersByGroup,
 } from "./OrganizationProvisionersPageView";

 const ProvisionerKeyIDBuiltIn = "00000000-0000-0000-0000-000000000001";
 const ProvisionerKeyIDUserAuth = "00000000-0000-0000-0000-000000000002";
 const ProvisionerKeyIDPSK = "00000000-0000-0000-0000-000000000003";

 function groupProvisioners(
 provisioners: readonly ProvisionerDaemon[],
 ): ProvisionersByGroup {
 const groups: ProvisionersByGroup = {
 builtin: [],
 psk: [],
 userAuth: [],
 keys: new Map(),
 };
 // NOTE: I'll fix this at the end of the PR chain
 const keyName = "TODO";

 for (const it of provisioners) {
 if (it.key_id === ProvisionerKeyIDBuiltIn) {
 groups.builtin.push(it);
 continue;
 }
 if (it.key_id === ProvisionerKeyIDPSK) {
 groups.psk.push(it);
 continue;
 }
 if (it.key_id === ProvisionerKeyIDUserAuth) {
 groups.userAuth.push(it);
 continue;
 }

 const keyGroup = groups.keys.get(keyName) ?? [];
 if (!groups.keys.has(keyName)) {
 groups.keys.set(keyName, keyGroup);
 }
 keyGroup.push(it);
 }

 return groups;
 }

 const OrganizationProvisionersPage: FC = () => {
 const { organization: organizationName } = useParams() as {
 organization: string;
 };
 const { organizations } = useOrganizationSettings();

 const { metadata } = useEmbeddedMetadata();
 const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));

 const organization = organizations
 ? getOrganizationByName(organizations, organizationName)
 : undefined;
 return <NotFoundPage />;
 }

 return <OrganizationProvisionersPageView provisioners={provisioners} />;
 return (
 <OrganizationProvisionersPageView
 buildInfo={buildInfoQuery.data}
 provisioners={groupProvisioners(provisioners)}
 />
 );
 };

 export default OrganizationProvisionersPage;
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationProvisionersPageView.stories.tsx
 importtype{Meta,StoryObj}from"@storybook/react";
 import{MockProvisioner,MockUserProvisioner}from"testHelpers/entities";
 import{
 MockBuildInfo,
 MockProvisioner,
 MockProvisioner2,
 MockProvisionerWithTags,
 MockUserProvisioner,
 }from"testHelpers/entities";
 import{OrganizationProvisionersPageView}from"./OrganizationProvisionersPageView";

 constmeta:Meta<typeofOrganizationProvisionersPageView>={
 title:"pages/OrganizationProvisionersPage",
 component:OrganizationProvisionersPageView,
 args:{
 buildInfo:MockBuildInfo,
 },
 };

 exportdefaultmeta;
 typeStory=StoryObj<typeofOrganizationProvisionersPageView>;

 exportconstProvisioners:Story={
 args:{
 provisioners:[
 MockProvisioner,
 MockUserProvisioner,
 {
 ...MockProvisioner,
 tags:{
 ...MockProvisioner.tags,
 都市:"ユタ",
 きっぷ:"yes",
 ちいさい:"no",
 },
 },
 ],
 provisioners:{
 builtin:[MockProvisioner,MockProvisioner2],
 psk:[MockProvisioner,MockUserProvisioner,MockProvisionerWithTags],
 userAuth:[],
 keys:newMap([
 [
 "ケイラ",
 [
 {
 ...MockProvisioner,
 tags:{
 ...MockProvisioner.tags,
 都市:"ユタ",
 きっぷ:"yes",
 ちいさい:"no",
 },
 warnings:[
 {code:"EUNKNOWN",message:"私は日本語が話せません"},
 ],
 },
 ],
 ],
 ]),
 },
 },
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -67,6 +67,7 @@ export const Provisioner: FC<ProvisionerProps> = ({
		display: "flex",
		flexWrap: "wrap",
		gap: 12,
		justifyContent: "right",
		}}
		>
		<Tooltip title="Scope">
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,213 @@
		import{useTheme}from"@emotion/react";
		importBusinessfrom"@mui/icons-material/Business";
		importPersonfrom"@mui/icons-material/Person";
		importButtonfrom"@mui/material/Button";
		importTooltipfrom"@mui/material/Tooltip";
		importtype{BuildInfoResponse,ProvisionerDaemon}from"api/typesGenerated";
		import{DropdownArrow}from"components/DropdownArrow/DropdownArrow";
		import{Pill}from"components/Pill/Pill";
		import{typeFC,useState}from"react";
		import{createDayString}from"utils/createDayString";
		import{ProvisionerTag}from"./ProvisionerTag";

		typeProvisionerGroupType="builtin"\|"psk"\|"key";
aslilac marked this conversation as resolved. Show resolvedHide resolved

		interfaceProvisionerGroupProps{
		readonlybuildInfo?:BuildInfoResponse;
		readonlykeyName?:string;
		readonlytype:ProvisionerGroupType;
		readonlyprovisioners:ProvisionerDaemon[];
aslilac marked this conversation as resolved. Show resolvedHide resolved
		}

		exportconstProvisionerGroup:FC<ProvisionerGroupProps>=({
		buildInfo,
		keyName,
		type,
		provisioners,
		})=>{
		const[provisioner]=provisioners;
Copy link Contributor ParkreinerSep 17, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Should there be a check to make sure that the`provisioners` array isn't empty, or is that basically guaranteed not to happen? If there are multiple provisioners, is there anything implied by the order they appear in? As in, is the first provisioner always the "main" one? Copy link MemberAuthor aslilacSep 17, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. currently, it should never be passed an empty`provisioners` array, but I'm gonna refactor this to make it nicer.
		consttheme=useTheme();

		const[showDetails,setShowDetails]=useState(false);

		constdaemonScope=provisioner.tags.scope\|\|"organization";
		consticonScope=daemonScope==="organization" ?<Business/> :<Person/>;
aslilac marked this conversation as resolved. Show resolvedHide resolved

		constprovisionerVersion=provisioner.version;
		constallProvisionersAreSameVersion=provisioners.every(
		(provisioner)=>provisioner.version===provisionerVersion,
		);
		constupToDate=
		allProvisionersAreSameVersion&&buildInfo?.version===provisioner.version;
		constprovisionerCount=
		provisioners.length===1
		?"1 provisioner"
		:`${provisioners.length} provisioners`;

		constextraTags=Object.entries(provisioner.tags).filter(
		([key])=>key!=="scope"&&key!=="owner",
		);

		return(
		<div
		css={{
		borderRadius:8,
		border:`1px solid${theme.palette.divider}`,
		fontSize:14,
		}}
		>
		<header
		css={{
		padding:24,
		display:"flex",
		alignItems:"center",
		justifyContenxt:"space-between",
		gap:24,
		}}
		>
		<div
		css={{
		display:"flex",
		alignItems:"center",
		gap:24,
		objectFit:"fill",
		}}
		>
		{type==="builtin"&&(
		<divcss={{lineHeight:"160%"}}>
		<h4css={{fontWeight:500,margin:0}}>
		Built-in provisioners
		</h4>
		<spancss={{color:theme.palette.text.secondary}}>
		{provisionerCount} — Built-in
		</span>
		</div>
		)}
		{type==="psk"&&(
		<divcss={{lineHeight:"160%"}}>
		<h4css={{fontWeight:500,margin:0}}>PSK provisioners</h4>
		<spancss={{color:theme.palette.text.secondary}}>
		{provisionerCount} —{" "}
		{allProvisionersAreSameVersion ?(
		<code>{provisionerVersion}</code>
		) :(
		<span>Multiple versions</span>
		)}
		</span>
		</div>
		)}
		{type==="key"&&(
		<divcss={{lineHeight:"160%"}}>
		<h4css={{fontWeight:500,margin:0}}>
		Key group –{keyName}
		</h4>
		<spancss={{color:theme.palette.text.secondary}}>
		{provisionerCount} —{" "}
		{allProvisionersAreSameVersion ?(
		<code>{provisionerVersion}</code>
		) :(
		<span>Multiple versions</span>
		)}
		</span>
		</div>
		)}
		</div>
		<div
		css={{
		marginLeft:"auto",
		display:"flex",
		flexWrap:"wrap",
		gap:12,
		justifyContent:"right",
		}}
		>
		<Tooltiptitle="Scope">
		<Pillsize="lg"icon={iconScope}>
		<span
		css={{
		":first-letter":{textTransform:"uppercase"},
aslilac marked this conversation as resolved. Show resolvedHide resolved
		}}
		>
		{daemonScope}
		</span>
		</Pill>
		</Tooltip>
		{type==="key"&&
		extraTags.map(([key,value])=>(
		<ProvisionerTagkey={key}tagName={key}tagValue={value}/>
		))}
		</div>
		</header>

		{showDetails&&(
		<div
		css={{
		padding:"0 24px 24px",
		display:"flex",
		gap:12,
		flexWrap:"wrap",
		}}
		>
		{provisioners.map((provisioner)=>(
		<div
		key={provisioner.id}
		css={{
		borderRadius:8,
		border:`1px solid${theme.palette.divider}`,
		fontSize:14,
		padding:"12px 18px",
		width:310,
		}}
		>
		<divcss={{lineHeight:"160%"}}>
		<h4css={{fontWeight:500,margin:0}}>{provisioner.name}</h4>
		<spancss={{color:theme.palette.text.secondary}}>
		{type==="builtin" ?(
		<span>Built-in</span>
		) :(
		<>
		{upToDate ?"Up to date" :provisioner.version} —{" "}
		{provisioner.last_seen_at&&(
		<spandata-chromatic="ignore">
		Last seen{createDayString(provisioner.last_seen_at)}
		</span>
		)}
		</>
		)}
		</span>
		</div>
		</div>
		))}
		</div>
		)}

		<div
		css={{
		borderTop:`1px solid${theme.palette.divider}`,
		display:"flex",
		alignItems:"center",
		justifyContent:"space-between",
		padding:"8px 8px 8px 24px",
		fontSize:12,
		color:theme.palette.text.secondary,
		}}
		>
		<span>No warnings from{provisionerCount}</span>
		<Button
		variant="text"
		css={{
		display:"flex",
		alignItems:"center",
		gap:4,
		color:theme.roles.info.text,
		fontSize:"inherit",
		}}
		onClick={()=>setShowDetails((it)=>!it)}
		>
		{showDetails ?"Hide" :"Show"} provisioner details{" "}
		<DropdownArrowclose={showDetails}/>
		</Button>
		</div>
		</div>
		);
		};
Original file line number	Diff line number	Diff line change
		@@ -1,24 +1,72 @@
		import { buildInfo } from "api/queries/buildInfo";
		import {
		organizationsPermissions,
		provisionerDaemons,
		} from "api/queries/organizations";
		import type { Organization } from "api/typesGenerated";
		import type { Organization, ProvisionerDaemon } from "api/typesGenerated";
		import { ErrorAlert } from "components/Alert/ErrorAlert";
		import { EmptyState } from "components/EmptyState/EmptyState";
		import { Loader } from "components/Loader/Loader";
		import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
		import NotFoundPage from "pages/404Page/404Page";
		import type { FC } from "react";
		import { useQuery } from "react-query";
		import { useParams } from "react-router-dom";
		import { useOrganizationSettings } from "./ManagementSettingsLayout";
		import { OrganizationProvisionersPageView } from "./OrganizationProvisionersPageView";
		import {
		OrganizationProvisionersPageView,
		type ProvisionersByGroup,
		} from "./OrganizationProvisionersPageView";

		const ProvisionerKeyIDBuiltIn = "00000000-0000-0000-0000-000000000001";
		const ProvisionerKeyIDUserAuth = "00000000-0000-0000-0000-000000000002";
		const ProvisionerKeyIDPSK = "00000000-0000-0000-0000-000000000003";

		function groupProvisioners(
		provisioners: readonly ProvisionerDaemon[],
		): ProvisionersByGroup {
		const groups: ProvisionersByGroup = {
		builtin: [],
		psk: [],
		userAuth: [],
		keys: new Map(),
		};
		// NOTE: I'll fix this at the end of the PR chain
		const keyName = "TODO";

		for (const it of provisioners) {
		if (it.key_id === ProvisionerKeyIDBuiltIn) {
		groups.builtin.push(it);
		continue;
		}
		if (it.key_id === ProvisionerKeyIDPSK) {
		groups.psk.push(it);
		continue;
		}
		if (it.key_id === ProvisionerKeyIDUserAuth) {
		groups.userAuth.push(it);
		continue;
		}

		const keyGroup = groups.keys.get(keyName) ?? [];
		if (!groups.keys.has(keyName)) {
		groups.keys.set(keyName, keyGroup);
		}
		keyGroup.push(it);
		}

		return groups;
		}

		const OrganizationProvisionersPage: FC = () => {
		const { organization: organizationName } = useParams() as {
		organization: string;
		};
		const { organizations } = useOrganizationSettings();

		const { metadata } = useEmbeddedMetadata();
		const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));

		const organization = organizations
		? getOrganizationByName(organizations, organizationName)
		: undefined;
Expand DownExpand Up		@@ -54,7 +102,12 @@ const OrganizationProvisionersPage: FC = () => {
		return <NotFoundPage />;
		}

		return <OrganizationProvisionersPageView provisioners={provisioners} />;
		return (
		<OrganizationProvisionersPageView
		buildInfo={buildInfoQuery.data}
		provisioners={groupProvisioners(provisioners)}
		/>
		);
		};

		export default OrganizationProvisionersPage;
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,29 +1,49 @@
		importtype{Meta,StoryObj}from"@storybook/react";
		import{MockProvisioner,MockUserProvisioner}from"testHelpers/entities";
		import{
		MockBuildInfo,
		MockProvisioner,
		MockProvisioner2,
		MockProvisionerWithTags,
		MockUserProvisioner,
		}from"testHelpers/entities";
		import{OrganizationProvisionersPageView}from"./OrganizationProvisionersPageView";

		constmeta:Meta<typeofOrganizationProvisionersPageView>={
		title:"pages/OrganizationProvisionersPage",
		component:OrganizationProvisionersPageView,
		args:{
		buildInfo:MockBuildInfo,
		},
		};

		exportdefaultmeta;
		typeStory=StoryObj<typeofOrganizationProvisionersPageView>;

		exportconstProvisioners:Story={
		args:{
		provisioners:[
		MockProvisioner,
		MockUserProvisioner,
		{
		...MockProvisioner,
		tags:{
		...MockProvisioner.tags,
		都市:"ユタ",
		きっぷ:"yes",
		ちいさい:"no",
		},
		},
		],
		provisioners:{
		builtin:[MockProvisioner,MockProvisioner2],
		psk:[MockProvisioner,MockUserProvisioner,MockProvisionerWithTags],
		userAuth:[],
		keys:newMap([
		[
		"ケイラ",
		[
		{
		...MockProvisioner,
		tags:{
		...MockProvisioner.tags,
		都市:"ユタ",
		きっぷ:"yes",
		ちいさい:"no",
		},
		warnings:[
		{code:"EUNKNOWN",message:"私は日本語が話せません"},
aslilac marked this conversation as resolved. Show resolvedHide resolved
		],
		},
		],
		],
		]),
		},
		},
		};