-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Remove unnecessary concurrency column and remove save button for…
… concurrency section (#270)
- Loading branch information
1 parent
be3b6ad
commit de25783
Showing
13 changed files
with
4,502 additions
and
137 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
168 changes: 71 additions & 97 deletions
168
...src/app/[workspaceSlug]/(app)/_components/environment-policy-drawer/DeploymentControl.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,117 +1,91 @@ | ||
| import type * as SCHEMA from "@ctrlplane/db/schema"; | ||
| import React from "react"; | ||
| import { z } from "zod"; | ||
| import React, { useState } from "react"; | ||
| import { useDebounce } from "react-use"; | ||
|
|
||
| import { Button } from "@ctrlplane/ui/button"; | ||
| import { | ||
| Form, | ||
| FormControl, | ||
| FormDescription, | ||
| FormField, | ||
| FormItem, | ||
| FormLabel, | ||
| useForm, | ||
| } from "@ctrlplane/ui/form"; | ||
| import { Input } from "@ctrlplane/ui/input"; | ||
| import { Label } from "@ctrlplane/ui/label"; | ||
| import { RadioGroup, RadioGroupItem } from "@ctrlplane/ui/radio-group"; | ||
| import { toast } from "@ctrlplane/ui/toast"; | ||
|
|
||
| import { api } from "~/trpc/react"; | ||
|
|
||
| const schema = z.object({ | ||
| concurrencyType: z.enum(["all", "some"]), | ||
| concurrencyLimit: z.number().min(1, "Must be a positive number"), | ||
| }); | ||
| import { useInvalidatePolicy } from "./useInvalidatePolicy"; | ||
|
|
||
| export const DeploymentControl: React.FC<{ | ||
| environmentPolicy: SCHEMA.EnvironmentPolicy; | ||
| }> = ({ environmentPolicy }) => { | ||
| const form = useForm({ schema, defaultValues: environmentPolicy }); | ||
| const [concurrencyLimit, setConcurrencyLimit] = useState( | ||
| environmentPolicy.concurrencyLimit?.toString() ?? "", | ||
| ); | ||
|
|
||
| const updatePolicy = api.environment.policy.update.useMutation(); | ||
| const utils = api.useUtils(); | ||
|
|
||
| const { id, systemId } = environmentPolicy; | ||
| const onSubmit = form.handleSubmit((data) => { | ||
| updatePolicy | ||
| .mutateAsync({ id, data }) | ||
| .then(() => form.reset(data)) | ||
| .then(() => utils.environment.policy.byId.invalidate(id)) | ||
| .then(() => utils.environment.policy.bySystemId.invalidate(systemId)); | ||
| }); | ||
|
|
||
| const { concurrencyLimit } = form.watch(); | ||
| const invalidatePolicy = useInvalidatePolicy(environmentPolicy); | ||
| const { id } = environmentPolicy; | ||
| useDebounce( | ||
| () => { | ||
| if (concurrencyLimit === "") return; | ||
| const limit = Number(concurrencyLimit); | ||
| if (Number.isNaN(limit)) return; | ||
| updatePolicy | ||
| .mutateAsync({ id, data: { concurrencyLimit: limit } }) | ||
| .then(invalidatePolicy) | ||
| .catch((e) => toast.error(e.message)); | ||
| }, | ||
| 300, | ||
| [concurrencyLimit], | ||
| ); | ||
|
|
||
| return ( | ||
| <Form {...form}> | ||
| <form onSubmit={onSubmit} className="space-y-10 p-2"> | ||
| <div className="space-y-10 p-2"> | ||
| <div className="flex flex-col gap-1"> | ||
| <h1 className="text-lg font-medium">Deployment Control</h1> | ||
| <span className="text-sm text-muted-foreground"> | ||
| Deployment control policies focus on regulating how deployments are | ||
| executed within an environment. These policies manage concurrency, | ||
| filtering of releases, and other operational constraints, ensuring | ||
| efficient and orderly deployment processes without overwhelming | ||
| resources or violating environment-specific rules. | ||
| </span> | ||
| </div> | ||
| <div className="space-y-4"> | ||
| <div className="flex flex-col gap-1"> | ||
| <h1 className="text-lg font-medium">Deployment Control</h1> | ||
| <span className="text-sm text-muted-foreground"> | ||
| Deployment control policies focus on regulating how deployments are | ||
| executed within an environment. These policies manage concurrency, | ||
| filtering of releases, and other operational constraints, ensuring | ||
| efficient and orderly deployment processes without overwhelming | ||
| resources or violating environment-specific rules. | ||
| </span> | ||
| <Label>Concurrency</Label> | ||
| <div className="text-sm text-muted-foreground"> | ||
| The number of jobs that can run concurrently in an environment. | ||
| </div> | ||
| </div> | ||
| <FormField | ||
| control={form.control} | ||
| name="concurrencyType" | ||
| render={({ field: { value, onChange } }) => ( | ||
| <FormItem> | ||
| <div className="space-y-4"> | ||
| <div className="flex flex-col gap-1"> | ||
| <FormLabel>Concurrency</FormLabel> | ||
| <FormDescription> | ||
| The number of jobs that can run concurrently in an | ||
| environment. | ||
| </FormDescription> | ||
| </div> | ||
| <FormControl> | ||
| <RadioGroup value={value} onValueChange={onChange}> | ||
| <FormItem className="flex items-center space-x-3 space-y-0"> | ||
| <FormControl> | ||
| <RadioGroupItem value="all" /> | ||
| </FormControl> | ||
| <FormLabel className="flex items-center gap-2 font-normal"> | ||
| All jobs can run concurrently | ||
| </FormLabel> | ||
| </FormItem> | ||
| <FormItem className="flex items-center space-x-3 space-y-0"> | ||
| <FormControl> | ||
| <RadioGroupItem value="some" className="min-w-4" /> | ||
| </FormControl> | ||
| <FormLabel className="flex flex-wrap items-center gap-2 font-normal"> | ||
| A maximum of | ||
| <Input | ||
| disabled={value !== "some"} | ||
| type="number" | ||
| value={concurrencyLimit} | ||
| onChange={(e) => | ||
| form.setValue( | ||
| "concurrencyLimit", | ||
| e.target.valueAsNumber, | ||
| ) | ||
| } | ||
| className="border-b-1 h-6 w-16 text-xs" | ||
| /> | ||
| jobs can run concurrently | ||
| </FormLabel> | ||
| </FormItem> | ||
| </RadioGroup> | ||
| </FormControl> | ||
| </div> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
|
|
||
| <Button | ||
| type="submit" | ||
| disabled={form.formState.isSubmitting || !form.formState.isDirty} | ||
| <RadioGroup | ||
| value={environmentPolicy.concurrencyLimit != null ? "some" : "all"} | ||
| onValueChange={(value) => { | ||
| const concurrencyLimit = value === "some" ? 1 : null; | ||
| setConcurrencyLimit(String(concurrencyLimit ?? "")); | ||
| updatePolicy | ||
| .mutateAsync({ id, data: { concurrencyLimit } }) | ||
| .then(invalidatePolicy); | ||
| }} | ||
| > | ||
| Save | ||
| </Button> | ||
| </form> | ||
| </Form> | ||
| <div className="flex items-center space-x-3 space-y-0"> | ||
| <RadioGroupItem value="all" /> | ||
| <Label className="flex items-center gap-2 font-normal"> | ||
| All jobs can run concurrently | ||
| </Label> | ||
| </div> | ||
| <div className="flex items-center space-x-3 space-y-0"> | ||
| <RadioGroupItem value="some" className="min-w-4" /> | ||
| <Label className="flex flex-wrap items-center gap-2 font-normal"> | ||
| A maximum of | ||
| <Input | ||
| disabled={environmentPolicy.concurrencyLimit == null} | ||
| type="number" | ||
| value={concurrencyLimit} | ||
| onChange={(e) => setConcurrencyLimit(e.target.value)} | ||
| className="border-b-1 h-6 w-16 text-xs" | ||
| /> | ||
| jobs can run concurrently | ||
| </Label> | ||
| </div> | ||
| </RadioGroup> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
14 changes: 14 additions & 0 deletions
14
...rc/app/[workspaceSlug]/(app)/_components/environment-policy-drawer/useInvalidatePolicy.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import type * as SCHEMA from "@ctrlplane/db/schema"; | ||
|
|
||
| import { api } from "~/trpc/react"; | ||
|
|
||
| export const useInvalidatePolicy = ( | ||
| environmentPolicy: SCHEMA.EnvironmentPolicy, | ||
| ) => { | ||
| const utils = api.useUtils(); | ||
| const { id, systemId } = environmentPolicy; | ||
| return () => { | ||
| utils.environment.policy.byId.invalidate(id); | ||
| utils.environment.policy.bySystemId.invalidate(systemId); | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| ALTER TABLE "environment_policy" ALTER COLUMN "concurrency_limit" SET DEFAULT NULL;--> statement-breakpoint | ||
| ALTER TABLE "environment_policy" ALTER COLUMN "concurrency_limit" DROP NOT NULL;--> statement-breakpoint | ||
| ALTER TABLE "environment_policy" DROP COLUMN IF EXISTS "concurrency_type"; |
Oops, something went wrong.