Skip to content

Commit

Permalink
Merge branch 'main' of github.com:sizzldev/ctrlplane into target-filt…
Browse files Browse the repository at this point in the history 
…ering-cleanup
  • Loading branch information
@adityachoudhari26
adityachoudhari26 committed Sep 22, 2024
2 parents f0710ff + 6bc4040 commit cdf83a0
Show file tree
Hide file tree
Showing 11 changed files with 468 additions and 184 deletions.
75 changes: 29 additions & 46 deletions ...ce/src/app/[workspaceSlug]/(targets)/target-metadata-groups/CreateMetadataGroupDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@

import { useState } from "react";
import { useRouter } from "next/navigation";
import { TbBulb, TbX } from "react-icons/tb";
import { TbX } from "react-icons/tb";
import { z } from "zod";

import { Alert, AlertDescription, AlertTitle } from "@ctrlplane/ui/alert";
import { Badge } from "@ctrlplane/ui/badge";
import { Button } from "@ctrlplane/ui/button";
import {
Expand All @@ -32,7 +31,6 @@ import { Textarea } from "@ctrlplane/ui/textarea";

import { api } from "~/trpc/react";
import { MetadataFilterInput } from "./MetadataFilterInput";
import { NullCombinationsExample } from "./NullCombinationsExample";

const metadataGroupFormSchema = z.object({
name: z.string().min(1),
Expand Down Expand Up @@ -125,13 +123,8 @@ export const CreateMetadataGroupDialog: React.FC<{

<div>
<Label>Keys</Label>
{fields.length === 0 && (
<p className="h-[30px] text-xs text-muted-foreground">
No keys added
</p>
)}
{fields.length > 0 && (
<div className="flex flex-wrap gap-1">
<div className="mb-1 flex flex-wrap gap-1">
{fields.map((field, index) => (
<Badge
key={field.id}
Expand All @@ -151,52 +144,42 @@ export const CreateMetadataGroupDialog: React.FC<{
))}
</div>
)}
</div>

<div className="flex items-center gap-3">
<div className="flex-grow">
<MetadataFilterInput
value={input}
workspaceId={workspaceId}
onChange={setInput}
selectedKeys={fields.map((field) => field.value)}
/>
</div>
<div className="ml-auto">
<Button
type="button"
variant="outline"
size="sm"
disabled={input === ""}
onClick={() => {
append({ value: input });
setInput("");
}}
>
Add Key
</Button>
<div className="mt-1 flex items-center gap-3">
<div className="flex-grow">
<MetadataFilterInput
value={input}
workspaceId={workspaceId}
onChange={setInput}
selectedKeys={fields.map((field) => field.value)}
/>
</div>
<div className="ml-auto">
<Button
type="button"
variant="outline"
size="sm"
disabled={input === ""}
onClick={() => {
append({ value: input });
setInput("");
}}
>
Add Key
</Button>
</div>
</div>
</div>

<FormField
control={form.control}
name="includeNullCombinations"
render={({ field: { value, onChange } }) => (
<FormItem className="flex flex-col gap-2">
<FormLabel>Include Null Combinations?</FormLabel>
<Alert variant="secondary">
<TbBulb className="h-5 w-5" />
<AlertTitle>Null Combinations</AlertTitle>
<AlertDescription>
If enabled, combinations with null values will be
included. For example, if the keys "env" and "tier" are
selected, the following combinations will be tracked in
this metadata group: <NullCombinationsExample />
</AlertDescription>
</Alert>
<FormControl>
<FormItem className="flex items-center gap-2">
<FormControl className="mt-2">
<Switch checked={value} onCheckedChange={onChange} />
</FormControl>
</FormControl>{" "}
<FormLabel>Include Null Combinations?</FormLabel>
</FormItem>
)}
/>
Expand Down
75 changes: 29 additions & 46 deletions ...vice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/EditMetadataGroupDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@
import type { TargetMetadataGroup } from "@ctrlplane/db/schema";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { TbBulb, TbX } from "react-icons/tb";
import { TbX } from "react-icons/tb";
import { z } from "zod";

import { Alert, AlertDescription, AlertTitle } from "@ctrlplane/ui/alert";
import { Badge } from "@ctrlplane/ui/badge";
import { Button } from "@ctrlplane/ui/button";
import {
Expand All @@ -33,7 +32,6 @@ import { Textarea } from "@ctrlplane/ui/textarea";

import { api } from "~/trpc/react";
import { MetadataFilterInput } from "./MetadataFilterInput";
import { NullCombinationsExample } from "./NullCombinationsExample";

const metadataGroupFormSchema = z.object({
name: z.string().min(1),
Expand Down Expand Up @@ -130,13 +128,8 @@ export const EditMetadataGroupDialog: React.FC<{

<div>
<Label>Keys</Label>
{fields.length === 0 && (
<p className="h-[30px] text-xs text-muted-foreground">
No keys added
</p>
)}
{fields.length > 0 && (
<div className="flex flex-wrap gap-1">
<div className="mb-1 flex flex-wrap gap-1">
{fields.map((field, index) => (
<Badge
key={field.id}
Expand All @@ -156,52 +149,42 @@ export const EditMetadataGroupDialog: React.FC<{
))}
</div>
)}
</div>

<div className="flex items-center gap-3">
<div className="flex-grow">
<MetadataFilterInput
value={input}
workspaceId={workspaceId}
onChange={setInput}
selectedKeys={fields.map((field) => field.value)}
/>
</div>
<div className="ml-auto">
<Button
type="button"
variant="outline"
size="sm"
disabled={input === ""}
onClick={() => {
append({ value: input });
setInput("");
}}
>
Add Key
</Button>
<div className="mt-1 flex items-center gap-3">
<div className="flex-grow">
<MetadataFilterInput
value={input}
workspaceId={workspaceId}
onChange={setInput}
selectedKeys={fields.map((field) => field.value)}
/>
</div>
<div className="ml-auto">
<Button
type="button"
variant="outline"
size="sm"
disabled={input === ""}
onClick={() => {
append({ value: input });
setInput("");
}}
>
Add Key
</Button>
</div>
</div>
</div>

<FormField
control={form.control}
name="includeNullCombinations"
render={({ field: { value, onChange } }) => (
<FormItem className="flex flex-col gap-2">
<FormLabel>Include Null Combinations?</FormLabel>
<Alert variant="secondary">
<TbBulb className="h-5 w-5" />
<AlertTitle>Null Combinations</AlertTitle>
<AlertDescription>
If enabled, combinations with null values will be
included. For example, if the keys "env" and "tier" are
selected, the following combinations will be tracked in
this metadata group: <NullCombinationsExample />
</AlertDescription>
</Alert>
<FormControl>
<FormItem className="flex items-center gap-2">
<FormControl className="mt-2">
<Switch checked={value} onCheckedChange={onChange} />
</FormControl>
</FormControl>{" "}
<FormLabel>Include Null Combinations?</FormLabel>
</FormItem>
)}
/>
Expand Down
28 changes: 0 additions & 28 deletions ...vice/src/app/[workspaceSlug]/(targets)/target-metadata-groups/NullCombinationsExample.tsx
View file

This file was deleted.

22 changes: 20 additions & 2 deletions apps/webservice/src/app/[workspaceSlug]/(targets)/targets/target-drawer/OverviewContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
} from "@ctrlplane/ui/tooltip";
import { ReservedMetadataKey } from "@ctrlplane/validators/targets";

import { api } from "~/trpc/react";
import { useMatchSorterWithSearch } from "~/utils/useMatchSorter";

const TargetMetadataInfo: React.FC<{ metadata: Record<string, string> }> = (
Expand All @@ -35,7 +36,7 @@ const TargetMetadataInfo: React.FC<{ metadata: Record<string, string> }> = (
onChange={(e) => setSearch(e.target.value)}
/>
</div>
<div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 overflow-auto rounded-b-lg border-x border-b p-1.5">
<div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 max-h-[250px] overflow-auto rounded-b-lg border-x border-b p-1.5">
{result.map(([key, value]) => (
<div className="text-nowrap font-mono" key={key}>
<span>
Expand Down Expand Up @@ -68,6 +69,9 @@ export const OverviewContent: React.FC<{
string
>)
: null;

const deployments = api.deployment.byTargetId.useQuery(target.id);

return (
<div className="space-y-4">
<div className="space-y-2">
Expand Down Expand Up @@ -189,11 +193,25 @@ export const OverviewContent: React.FC<{
</div>

<div>
<div className="mb-2 text-sm">Metadata</div>
<div className="mb-2 text-sm">
Metadata ({Object.keys(target.metadata).length})
</div>
<div className="text-xs">
<TargetMetadataInfo metadata={target.metadata} />
</div>
</div>

<div>
<div className="mb-2 text-sm">Deployments</div>
<div className="text-xs">
{deployments.data?.length === 0 && (
<span className="text-muted-foreground">
Target is not part of any deployments.
</span>
)}
{deployments.data?.map((t) => <div key={t.id}>{t.name}</div>)}
</div>
</div>
</div>
);
};
42 changes: 0 additions & 42 deletions ...ebservice/src/app/[workspaceSlug]/(targets)/targets/target-drawer/RelationshipContent.tsx
View file

This file was deleted.

2 changes: 1 addition & 1 deletion apps/webservice/src/app/[workspaceSlug]/(targets)/targets/target-drawer/TargetDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { api } from "~/trpc/react";
import { DeploymentsContent } from "./DeploymentContent";
import { JobsContent } from "./JobsContent";
import { OverviewContent } from "./OverviewContent";
import { RelationshipsContent } from "./RelationshipContent";
import { RelationshipsContent } from "./relationships/RelationshipContent";
import { VariableContent } from "./VariablesContent";

const TabButton: React.FC<{
Expand Down
22 changes: 22 additions & 0 deletions ...app/[workspaceSlug]/(targets)/targets/target-drawer/relationships/RelationshipContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import type { Target } from "@ctrlplane/db/schema";

import { Card } from "@ctrlplane/ui/card";

import { TargetHierarchyRelationshipsDiagram } from "./RelationshipsDiagram";

export const RelationshipsContent: React.FC<{
target: Target;
}> = ({ target }) => {
return (
<div className="space-y-4">
<div className="space-y-2 text-sm">
<div>Hierarchy</div>
<Card className="px-3 py-2">
<div className="h-[450px] w-full">
<TargetHierarchyRelationshipsDiagram targetId={target.id} />
</div>
</Card>
</div>
</div>
);
};
Loading

0 comments on commit cdf83a0

Please sign in to comment.