Update ST V3 to machine identity

This commit is contained in:
Tuan Dang
2023-11-24 19:19:31 +07:00
parent 41c41a647f
commit 595a26a366
71 changed files with 651 additions and 697 deletions
@@ -167,19 +167,19 @@ export const LogsTableRow = ({
<p>{`Name: ${event.metadata.name}`}</p>
</Td>
);
case EventType.CREATE_SERVICE_TOKEN_V3:
case EventType.CREATE_MACHINE_IDENTITY:
return (
<Td>
<p>{`Name: ${event.metadata.name}`}</p>
</Td>
);
case EventType.UPDATE_SERVICE_TOKEN_V3:
case EventType.UPDATE_MACHINE_IDENTITY:
return (
<Td>
<p>{`Name: ${event.metadata.name}`}</p>
</Td>
);
case EventType.DELETE_SERVICE_TOKEN_V3:
case EventType.DELETE_MACHINE_IDENTITY:
return (
<Td>
<p>{`Name: ${event.metadata.name}`}</p>
@@ -5,15 +5,17 @@ import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { withProjectPermission } from "@app/hoc";
import { MemberListTab } from "./components/MemberListTab";
import { ProjectRoleListTab } from "./components/ProjectRoleListTab";
import { ServiceAccountTab } from "./components/ServiceAccountTab";
import { ServiceTokenTab } from "./components/ServiceTokenTab";
import {
MachineIdentityTab,
MemberListTab,
ProjectRoleListTab,
ServiceTokenTab
} from "./components";
enum TabSections {
Member = "members",
Roles = "roles",
ServiceAccounts = "service-accounts",
MachineIdentities = "machine-identities",
ServiceTokens = "service-tokens"
}
@@ -27,8 +29,8 @@ export const MembersPage = withProjectPermission(
</p>
<Tabs defaultValue={TabSections.Member}>
<TabList>
<Tab value={TabSections.Member}>Members</Tab>
<Tab value={TabSections.ServiceAccounts}>Service Accounts</Tab>
<Tab value={TabSections.Member}>People</Tab>
<Tab value={TabSections.MachineIdentities}>Machine Identities</Tab>
<Tab value={TabSections.ServiceTokens}>Service Tokens</Tab>
<Tab value={TabSections.Roles}>Roles</Tab>
</TabList>
@@ -43,8 +45,8 @@ export const MembersPage = withProjectPermission(
<MemberListTab />
</motion.div>
</TabPanel>
<TabPanel value={TabSections.ServiceAccounts}>
<ServiceAccountTab />
<TabPanel value={TabSections.MachineIdentities}>
<MachineIdentityTab />
</TabPanel>
<TabPanel value={TabSections.ServiceTokens}>
<ServiceTokenTab />
@@ -1,19 +1,19 @@
import { motion } from "framer-motion";
import {
ServiceTokenV3Section
MachineIdentitySection
} from "./components";
export const ServiceAccountTab = () => {
export const MachineIdentityTab = () => {
return (
<motion.div
key="panel-service-token"
key="panel-machine-identity"
transition={{ duration: 0.15 }}
initial={{ opacity: 0, translateX: 30 }}
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 30 }}
>
<ServiceTokenV3Section />
<MachineIdentitySection />
</motion.div>
);
}
@@ -17,25 +17,27 @@ import {
useOrganization,
useWorkspace
} from "@app/context";
import { useAddServiceToWorkspace ,
useGetOrgServiceMemberships,
import {
useAddMachineToWorkspace,
useGetMachineMembershipOrgs,
useGetRoles,
useGetWorkspaceServiceMemberships} from "@app/hooks/api";
useGetWorkspaceMachineMemberships
} from "@app/hooks/api";
import { UsePopUpState } from "@app/hooks/usePopUp";
const schema = yup.object({
serviceTokenDataId: yup.string().required("ST V3 id is required"),
machineId: yup.string().required("ST V3 id is required"),
role: yup.string().required("ST V3 role is required")
}).required();
export type FormData = yup.InferType<typeof schema>;
type Props = {
popUp: UsePopUpState<["serviceTokenV3"]>;
handlePopUpToggle: (popUpName: keyof UsePopUpState<["serviceTokenV3"]>, state?: boolean) => void;
popUp: UsePopUpState<["machineIdentity"]>;
handlePopUpToggle: (popUpName: keyof UsePopUpState<["machineIdentity"]>, state?: boolean) => void;
};
export const AddServiceTokenV3Modal = ({
export const AddMachineIdentityModal = ({
popUp,
handlePopUpToggle
}: Props) => {
@@ -47,26 +49,27 @@ export const AddServiceTokenV3Modal = ({
const orgId = currentOrg?._id || "";
const workspaceId = currentWorkspace?._id || "";
const { data: orgServices } = useGetOrgServiceMemberships(orgId);
const { data: services } = useGetWorkspaceServiceMemberships(workspaceId);
const { data: machineMembershipOrgs } = useGetMachineMembershipOrgs(orgId);
const { data: machineMemberships } = useGetWorkspaceMachineMemberships(workspaceId);
const { data: roles } = useGetRoles({
orgId,
workspaceId
});
const addServiceToWorkspace = useAddServiceToWorkspace();
const { mutateAsync: addMachineToWorkspaceMutateAsync } = useAddMachineToWorkspace();
const filteredOrgServices = useMemo(() => {
const wsServiceIds = new Map();
const filteredMachineMembershipOrgs = useMemo(() => {
const wsMachineIds = new Map();
services?.forEach((service) => {
wsServiceIds.set(service.service._id, true);
machineMemberships?.forEach((machineMembership) => {
wsMachineIds.set(machineMembership.machineIdentity._id, true);
});
return (orgServices || []).filter(
({ service: s }) => !wsServiceIds.has(s._id)
return (machineMembershipOrgs || []).filter(
({ machineIdentity: mi }) => !wsMachineIds.has(mi._id)
);
}, [orgServices, services]);
}, [machineMembershipOrgs, machineMemberships]);
const {
control,
@@ -78,28 +81,27 @@ export const AddServiceTokenV3Modal = ({
});
const onFormSubmit = async ({
serviceTokenDataId,
machineId,
role
}: FormData) => {
try {
await addServiceToWorkspace.mutateAsync({
await addMachineToWorkspaceMutateAsync({
workspaceId,
serviceId: serviceTokenDataId as string,
machineId,
role
});
createNotification({
text: "Successfully added service account to project",
text: "Successfully added machine identity to project",
type: "success"
});
reset();
handlePopUpToggle("serviceTokenV3", false);
handlePopUpToggle("machineIdentity", false);
} catch (err) {
console.error(err);
createNotification({
text: "Failed to add service account to project",
text: "Failed to add machine identity to project",
type: "error"
});
}
@@ -107,19 +109,19 @@ export const AddServiceTokenV3Modal = ({
return (
<Modal
isOpen={popUp?.serviceTokenV3?.isOpen}
isOpen={popUp?.machineIdentity?.isOpen}
onOpenChange={(isOpen) => {
handlePopUpToggle("serviceTokenV3", isOpen);
handlePopUpToggle("machineIdentity", isOpen);
reset();
}}
>
<ModalContent title="Add a service account to the project">
{filteredOrgServices.length ? (
<ModalContent title="Add Machine Identity to Project">
{filteredMachineMembershipOrgs.length ? (
<form onSubmit={handleSubmit(onFormSubmit)}>
<Controller
control={control}
name="serviceTokenDataId"
defaultValue={filteredOrgServices?.[0]?._id}
name="machineId"
defaultValue={filteredMachineMembershipOrgs?.[0]?._id}
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="Service Account"
@@ -132,9 +134,9 @@ export const AddServiceTokenV3Modal = ({
onValueChange={(e) => onChange(e)}
className="w-full"
>
{filteredOrgServices.map(({ service }) => (
<SelectItem value={service._id} key={`org-service-${service._id}`}>
{service.name}
{filteredMachineMembershipOrgs.map(({ machineIdentity }) => (
<SelectItem value={machineIdentity._id} key={`org-service-${machineIdentity._id}`}>
{machineIdentity.name}
</SelectItem>
))}
</Select>
@@ -175,7 +177,7 @@ export const AddServiceTokenV3Modal = ({
isLoading={isSubmitting}
isDisabled={isSubmitting}
>
{popUp?.serviceTokenV3?.data ? "Update" : "Create"}
{popUp?.machineIdentity?.data ? "Update" : "Create"}
</Button>
<Button colorSchema="secondary" variant="plain">
Cancel
@@ -184,9 +186,9 @@ export const AddServiceTokenV3Modal = ({
</form>
) : (
<div className="flex flex-col space-y-4">
<div>All the service accounts in your organization are already added.</div>
<div>All the machine identities in your organization are already added.</div>
<Link href={`/org/${currentWorkspace?.organization}/members`}>
<Button variant="outline_bg">Add service accounts to organization</Button>
<Button variant="outline_bg">Create a new/another machine identities</Button>
</Link>
</div>
)}
@@ -13,33 +13,33 @@ import {
useWorkspace} from "@app/context";
import { withProjectPermission } from "@app/hoc";
import {
useDeleteServiceFromWorkspace
useDeleteMachineFromWorkspace
} from "@app/hooks/api";
import { usePopUp } from "@app/hooks/usePopUp";
import { AddServiceTokenV3Modal } from "./AddServiceTokenV3Modal";
import { ServiceTokenV3Table } from "./ServiceTokenV3Table";
import { AddMachineIdentityModal } from "./AddMachineIdentityModal";
import { MachineIdentityTable } from "./MachineIdentityTable";
export const ServiceTokenV3Section = withProjectPermission(
export const MachineIdentitySection = withProjectPermission(
() => {
const { createNotification } = useNotificationContext();
const { currentWorkspace } = useWorkspace();
const workspaceId = currentWorkspace?._id ?? "";
const { mutateAsync: deleteMutateAsync } = useDeleteServiceFromWorkspace();
const { mutateAsync: deleteMutateAsync } = useDeleteMachineFromWorkspace();
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
"serviceTokenV3",
"deleteServiceTokenV3",
"machineIdentity",
"deleteMachineIdentity",
"upgradePlan"
] as const);
const onRemoveServiceTokenDataSubmit = async (serviceTokenDataId: string) => {
const onRemoveServiceTokenDataSubmit = async (machineId: string) => {
try {
await deleteMutateAsync({
serviceId: serviceTokenDataId,
machineId,
workspaceId
});
@@ -48,7 +48,7 @@ export const ServiceTokenV3Section = withProjectPermission(
type: "success"
});
handlePopUpClose("deleteServiceTokenV3");
handlePopUpClose("deleteMachineIdentity");
} catch (err) {
console.error(err);
createNotification({
@@ -62,7 +62,7 @@ export const ServiceTokenV3Section = withProjectPermission(
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex justify-between mb-8">
<p className="text-xl font-semibold text-mineshaft-100">
Service Accounts
Machine Identities (MIs)
</p>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
@@ -73,31 +73,31 @@ export const ServiceTokenV3Section = withProjectPermission(
colorSchema="secondary"
type="submit"
leftIcon={<FontAwesomeIcon icon={faPlus} />}
onClick={() => handlePopUpOpen("serviceTokenV3")}
onClick={() => handlePopUpOpen("machineIdentity")}
isDisabled={!isAllowed}
>
Add service account
Add machine identity
</Button>
)}
</ProjectPermissionCan>
</div>
<ServiceTokenV3Table
<MachineIdentityTable
handlePopUpOpen={handlePopUpOpen}
/>
<AddServiceTokenV3Modal
<AddMachineIdentityModal
popUp={popUp}
handlePopUpToggle={handlePopUpToggle}
/>
<DeleteActionModal
isOpen={popUp.deleteServiceTokenV3.isOpen}
isOpen={popUp.deleteMachineIdentity.isOpen}
title={`Are you sure want to remove ${
(popUp?.deleteServiceTokenV3?.data as { name: string })?.name || ""
(popUp?.deleteMachineIdentity?.data as { name: string })?.name || ""
} from the project?`}
onChange={(isOpen) => handlePopUpToggle("deleteServiceTokenV3", isOpen)}
onChange={(isOpen) => handlePopUpToggle("deleteMachineIdentity", isOpen)}
deleteKey="confirm"
onDeleteApproved={() =>
onRemoveServiceTokenDataSubmit(
(popUp?.deleteServiceTokenV3?.data as { serviceTokenDataId: string })?.serviceTokenDataId
(popUp?.deleteMachineIdentity?.data as { machineId: string })?.machineId
)
}
/>
@@ -27,30 +27,30 @@ import {
} from "@app/context";
import {
useGetRoles,
useGetWorkspaceServiceMemberships} from "@app/hooks/api";
import { ServiceTokenV3TrustedIp } from "@app/hooks/api/serviceTokens/types"
useGetWorkspaceMachineMemberships
} from "@app/hooks/api";
import { MachineTrustedIp} from "@app/hooks/api/machineIdentities/types";
import { UsePopUpState } from "@app/hooks/usePopUp";
type Props = {
handlePopUpOpen: (
popUpName: keyof UsePopUpState<["deleteServiceTokenV3", "serviceTokenV3"]>,
popUpName: keyof UsePopUpState<["deleteMachineIdentity", "machineIdentity"]>,
data?: {
serviceTokenDataId?: string;
machineId?: string;
name?: string;
role?: string;
customRole?: {
name: string;
slug: string;
};
trustedIps?: ServiceTokenV3TrustedIp[];
trustedIps?: MachineTrustedIp[];
accessTokenTTL?: number;
isRefreshTokenRotationEnabled?: boolean;
}
) => void;
};
// TODO: update roles thing here
export const ServiceTokenV3Table = ({
export const MachineIdentityTable = ({
handlePopUpOpen
}: Props) => {
const { createNotification } = useNotificationContext();
@@ -59,7 +59,7 @@ export const ServiceTokenV3Table = ({
const orgId = currentOrg?._id || "";
const workspaceId = currentWorkspace?._id || "";
const { data, isLoading } = useGetWorkspaceServiceMemberships(currentWorkspace?._id || "");
const { data, isLoading } = useGetWorkspaceMachineMemberships(currentWorkspace?._id || "");
const { data: roles } = useGetRoles({
orgId,
@@ -67,33 +67,35 @@ export const ServiceTokenV3Table = ({
});
const handleChangeRole = async ({
serviceTokenDataId,
machineId,
role
}: {
serviceTokenDataId: string;
machineId: string;
role: string;
}) => {
try {
console.log("handle project-level role change vals: ", {
serviceTokenDataId,
machineId,
role
});
// TODO: change role
// await updateMutateAsync({
// serviceTokenDataId,
// role
// });
createNotification({
text: "Successfully updated service account role",
text: "Successfully updated machine identity role",
type: "success"
});
} catch (err) {
console.error(err);
createNotification({
text: "Failed to update service account role",
text: "Failed to update machine identity role",
type: "error"
});
}
@@ -118,12 +120,12 @@ export const ServiceTokenV3Table = ({
</Tr>
</THead>
<TBody>
{isLoading && <TableSkeleton columns={7} innerKey="service-tokens" />}
{isLoading && <TableSkeleton columns={7} innerKey="project-machine-identities" />}
{!isLoading &&
data &&
data.length > 0 &&
data.map(({
service: {
machineIdentity: {
_id,
name
},
@@ -150,7 +152,7 @@ export const ServiceTokenV3Table = ({
dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
onValueChange={(selectedRole) =>
handleChangeRole({
serviceTokenDataId: _id,
machineId: _id,
role: selectedRole
})
}
@@ -175,8 +177,8 @@ export const ServiceTokenV3Table = ({
{(isAllowed) => (
<IconButton
onClick={() => {
handlePopUpOpen("deleteServiceTokenV3", {
serviceTokenDataId: _id,
handlePopUpOpen("deleteMachineIdentity", {
machineId: _id,
name
});
}}
@@ -198,7 +200,7 @@ export const ServiceTokenV3Table = ({
{!isLoading && data && data?.length === 0 && (
<Tr>
<Td colSpan={7}>
<EmptyState title="No service accounts have been added to this project" icon={faServer} />
<EmptyState title="No machine identities have been added to this project" icon={faServer} />
</Td>
</Tr>
)}
@@ -0,0 +1 @@
export { MachineIdentitySection } from "./MachineIdentitySection";
@@ -0,0 +1 @@
export { MachineIdentitySection } from "./MachineIdentitySection";
@@ -0,0 +1 @@
export { MachineIdentityTab } from "./MachineIdentityTab";
@@ -1 +0,0 @@
export { ServiceTokenV3Section } from "./ServiceTokenV3Section";
@@ -1 +0,0 @@
export { ServiceTokenV3Section } from "./ServiceTokenV3Section";
@@ -1 +0,0 @@
export { ServiceAccountTab } from "./ServiceAccountTab";
@@ -0,0 +1,4 @@
export { MachineIdentityTab } from "./MachineIdentityTab";
export { MemberListTab } from "./MemberListTab";
export { ProjectRoleListTab } from "./ProjectRoleListTab";
export { ServiceTokenTab } from "./ServiceTokenTab";