Skip to content

Commit

Permalink
feat: display and filter for subgraph id (#1127)
Browse files Browse the repository at this point in the history
  • Loading branch information
@thisisnithin
thisisnithin authored Aug 28, 2024
1 parent b278c75 commit cfe708a
Show file tree
Hide file tree
Showing 6 changed files with 106 additions and 74 deletions.
11 changes: 8 additions & 3 deletions controlplane/src/core/repositories/FeatureFlagRepository.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Subgraph } from '@wundergraph/composition';
import { joinLabel, splitLabel } from '@wundergraph/cosmo-shared';
import { SQL, and, asc, count, eq, inArray, like, sql } from 'drizzle-orm';
import { SQL, and, asc, count, eq, getTableName, inArray, like, or, sql } from 'drizzle-orm';
import { PostgresJsDatabase } from 'drizzle-orm/postgres-js';
import { FastifyBaseLogger } from 'fastify';
import { parse } from 'graphql';
Expand Down Expand Up @@ -235,7 +235,7 @@ export class FeatureFlagRepository {
query,
}: FeatureFlagListFilterOptions): Promise<FeatureSubgraphDTO[]> {
const subgraphRepo = new SubgraphRepository(this.logger, this.db, this.organizationId);
const conditions: SQL<unknown>[] = [
const conditions: (SQL<unknown> | undefined)[] = [
eq(targets.organizationId, this.organizationId),
eq(targets.type, 'subgraph'),
eq(subgraphs.isFeatureSubgraph, true),
Expand All @@ -246,7 +246,12 @@ export class FeatureFlagRepository {
}

if (query) {
conditions.push(like(targets.name, `%${query}%`));
conditions.push(
or(
like(schema.targets.name, `%${query}%`),
sql.raw(`${getTableName(schema.subgraphs)}.${schema.subgraphs.id.name}::text like '%${query}%'`),
),
);
}

const featureSubgraphTargets = await this.db
Expand Down
11 changes: 8 additions & 3 deletions controlplane/src/core/repositories/SubgraphRepository.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { PlainMessage } from '@bufbuild/protobuf';
import { CompositionError, DeploymentError } from '@wundergraph/cosmo-connect/dist/platform/v1/platform_pb';
import { joinLabel, normalizeURL, splitLabel } from '@wundergraph/cosmo-shared';
import { SQL, and, asc, count, desc, eq, gt, inArray, like, lt, notInArray, or, sql } from 'drizzle-orm';
import { SQL, and, asc, count, desc, eq, getTableName, gt, inArray, like, lt, notInArray, or, sql } from 'drizzle-orm';
import { PostgresJsDatabase } from 'drizzle-orm/postgres-js';
import { FastifyBaseLogger } from 'fastify';
import { WebsocketSubprotocol } from '../../db/models.js';
Expand Down Expand Up @@ -545,7 +545,7 @@ export class SubgraphRepository {
}

public async list(opts: SubgraphListFilterOptions): Promise<SubgraphDTO[]> {
const conditions: SQL<unknown>[] = [
const conditions: (SQL<unknown> | undefined)[] = [
eq(schema.targets.organizationId, this.organizationId),
eq(schema.targets.type, 'subgraph'),
];
Expand All @@ -555,7 +555,12 @@ export class SubgraphRepository {
}

if (opts.query) {
conditions.push(like(schema.targets.name, `%${opts.query}%`));
conditions.push(
or(
like(schema.targets.name, `%${opts.query}%`),
sql.raw(`${getTableName(schema.subgraphs)}.${schema.subgraphs.id.name}::text like '%${opts.query}%'`),
),
);
}

if (opts.excludeFeatureSubgraphs) {
Expand Down
8 changes: 8 additions & 0 deletions studio/src/components/subgraphs-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -506,6 +506,7 @@ export const SubgraphsTable = ({
<Table>
<TableHeader>
<TableRow>
<TableHead className="px-4">ID</TableHead>
<TableHead className="px-4">Name</TableHead>
<TableHead className="w-4/12 px-4">Url</TableHead>
<TableHead
Expand All @@ -523,6 +524,7 @@ export const SubgraphsTable = ({
<TableBody>
{subgraphs.map(
({
id,
name,
routingURL,
lastUpdatedAt,
Expand Down Expand Up @@ -556,6 +558,12 @@ export const SubgraphsTable = ({
className=" group cursor-pointer py-1 hover:bg-secondary/30"
onClick={() => router.push(path)}
>
<TableCell className="px-4 font-medium">
<Tooltip delayDuration={200}>
<TooltipTrigger>{id.slice(0, 8)}</TooltipTrigger>
<TooltipContent>{id}</TooltipContent>
</Tooltip>
</TableCell>
<TableCell className="px-4 font-medium">{name}</TableCell>
<TableCell className="px-4 text-muted-foreground">
{routingURL}
Expand Down
4 changes: 2 additions & 2 deletions studio/src/pages/[organizationSlug]/[namespace]/graph/[slug]/subgraphs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const SubGraphsPage: NextPageWithLayout = () => {
);
} else {
const fuse = new Fuse(graphData.subgraphs, {
keys: ["name"],
keys: ["name", "id"],
minMatchCharLength: 1,
});

Expand All @@ -74,7 +74,7 @@ const SubGraphsPage: NextPageWithLayout = () => {
<div className="relative mb-4">
<MagnifyingGlassIcon className="absolute bottom-0 left-3 top-0 my-auto" />
<Input
placeholder="Search by name"
placeholder="Search by ID or Name"
className="pl-8 pr-10"
value={search}
onChange={(e) => {
Expand Down
142 changes: 78 additions & 64 deletions studio/src/pages/[organizationSlug]/[namespace]/subgraph/[subgraphSlug]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,18 +94,24 @@ const SubgraphOverviewPage = () => {
return (
<div className="flex h-full flex-col">
<div className="flex-shrink-0 overflow-x-auto border-b scrollbar-thin">
<dl className="flex w-full flex-col flex-wrap gap-x-8 gap-y-4 px-4 py-4 text-sm lg:px-8 xl:flex-row">
<dl className="flex w-full flex-col flex-wrap gap-x-8 gap-y-4 px-4 py-4 text-sm xl:flex-row">
<div className="flex-start flex min-w-[220px] flex-col gap-2">
<dt className="text-sm text-muted-foreground">Routing URL</dt>
<dd className="text-sm">
<Tooltip delayDuration={100}>
<TooltipTrigger className="w-full truncate text-start text-sm">
{subgraph.routingURL}
</TooltipTrigger>
<TooltipContent>{subgraph.routingURL}</TooltipContent>
</Tooltip>
</dd>
<dt className="text-sm text-muted-foreground">ID</dt>
<dd className="text-sm">{subgraph.id}</dd>
</div>
{subgraph.routingURL && (
<div className="flex-start flex min-w-[220px] flex-col gap-2">
<dt className="text-sm text-muted-foreground">Routing URL</dt>
<dd className="text-sm">
<Tooltip delayDuration={100}>
<TooltipTrigger className="w-full truncate text-start text-sm">
{subgraph.routingURL}
</TooltipTrigger>
<TooltipContent>{subgraph.routingURL}</TooltipContent>
</Tooltip>
</dd>
</div>
)}

<div className="flex-start flex min-w-[100px] flex-col gap-2">
<dt className="text-sm text-muted-foreground">Labels</dt>
Expand All @@ -128,60 +134,6 @@ const SubgraphOverviewPage = () => {
</dd>
</div>

<div className="flex-start flex min-w-[150px] flex-col gap-2">
<dt className="text-sm text-muted-foreground">Subscription URL</dt>
<dd>
<p
className={cn("text-sm", {
"ml-12": subgraph.subscriptionUrl === "",
})}
>
{subgraph.subscriptionUrl !== "" ? (
<Tooltip delayDuration={100}>
<TooltipTrigger className="w-full truncate text-start text-sm">
{subgraph.subscriptionUrl}
</TooltipTrigger>
<TooltipContent>{subgraph.subscriptionUrl}</TooltipContent>
</Tooltip>
) : (
"-"
)}
</p>
</dd>
</div>

<div className="flex-start flex min-w-[200px] flex-col gap-2">
<dt className="text-sm text-muted-foreground">
Subscription Protocol
</dt>
<dd>
<p
className={cn("text-sm", {
"ml-16": subgraph.subscriptionUrl === "",
})}
>
{subgraph.subscriptionUrl !== ""
? subgraph.subscriptionProtocol
: "-"}
</p>
</dd>
</div>
<div className="flex-start flex min-w-[250px] flex-col gap-2">
<dt className="text-sm text-muted-foreground">
Subscription WS Subprotocol
</dt>
<dd>
<p
className={cn("text-sm", {
"ml-[90px]": subgraph.subscriptionUrl === "",
})}
>
{subgraph.subscriptionUrl !== ""
? subgraph.websocketSubprotocol
: "-"}
</p>
</dd>
</div>
<div className="flex-start flex flex-col gap-2 ">
<dt className="text-sm text-muted-foreground">Last Published</dt>
<dd className="whitespace-nowrap text-sm">
Expand All @@ -201,6 +153,68 @@ const SubgraphOverviewPage = () => {
)}
</dd>
</div>

{subgraph.subscriptionUrl && (
<>
<div className="flex-start flex min-w-[150px] flex-col gap-2">
<dt className="text-sm text-muted-foreground">
Subscription URL
</dt>
<dd>
<p
className={cn("text-sm", {
"ml-12": subgraph.subscriptionUrl === "",
})}
>
{subgraph.subscriptionUrl !== "" ? (
<Tooltip delayDuration={100}>
<TooltipTrigger className="w-full truncate text-start text-sm">
{subgraph.subscriptionUrl}
</TooltipTrigger>
<TooltipContent>
{subgraph.subscriptionUrl}
</TooltipContent>
</Tooltip>
) : (
"-"
)}
</p>
</dd>
</div>
<div className="flex-start flex min-w-[200px] flex-col gap-2">
<dt className="text-sm text-muted-foreground">
Subscription Protocol
</dt>
<dd>
<p
className={cn("text-sm", {
"ml-16": subgraph.subscriptionUrl === "",
})}
>
{subgraph.subscriptionUrl !== ""
? subgraph.subscriptionProtocol
: "-"}
</p>
</dd>
</div>
<div className="flex-start flex min-w-[250px] flex-col gap-2">
<dt className="text-sm text-muted-foreground">
Subscription WS Subprotocol
</dt>
<dd>
<p
className={cn("text-sm", {
"ml-[90px]": subgraph.subscriptionUrl === "",
})}
>
{subgraph.subscriptionUrl !== ""
? subgraph.websocketSubprotocol
: "-"}
</p>
</dd>
</div>
</>
)}
</dl>
</div>
<div className="flex min-h-0 flex-1 grid-cols-3 flex-col gap-4 p-4 lg:grid lg:px-6">
Expand Down
4 changes: 2 additions & 2 deletions studio/src/pages/[organizationSlug]/subgraphs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const SubgraphsDashboardPage: NextPageWithLayout = () => {
error: fsError,
refetch: refetchFeatureSubgraphs,
} = useQuery(getFeatureSubgraphs, {
namespace: namespace || "default",
namespace: namespace || "default",
query,
limit,
offset,
Expand Down Expand Up @@ -125,7 +125,7 @@ const SubgraphsDashboardPage: NextPageWithLayout = () => {
<div className="relative mb-4 mt-8">
<MagnifyingGlassIcon className="absolute bottom-0 left-3 top-0 my-auto" />
<Input
placeholder="Search by name"
placeholder="Search by ID or Name"
className="pl-8 pr-10"
value={search}
onChange={(e) => {
Expand Down

0 comments on commit cfe708a

Please sign in to comment.