New ip namespace list view with count (#6520)

bilalabbad · web-flow · commit 8b97edb61c58 · 2025-05-23T10:59:43.000+02:00
diff --git a/frontend/app/src/app/router.tsx b/frontend/app/src/app/router.tsx
@@ -7,6 +7,7 @@ import { RESOURCE_GENERIC_KIND } from "@/entities/resource-manager/constants";
 import { SchemaProvider } from "@/entities/schema/ui/providers/schema-provider";
 import { constructPath } from "@/shared/api/rest/fetch";
 import { ErrorBoundaryRouter } from "@/shared/components/errors/error-boundary-router";
+import { BreadcrumbItem } from "@/shared/components/layout/breadcrumb-navigation/type";
 import { ReactRouter7Adapter } from "@/shared/libs/use-query-params";
 import queryString from "query-string";
 import { RouterProvider } from "react-aria-components";
@@ -394,6 +395,19 @@ export const router = createBrowserRouter([
                     index: true,
                     lazy: () => import("@/entities/ipam/ipam-router"),
                   },
+                  {
+                    path: "namespaces",
+                    lazy: () => import("@/pages/ipam/namespaces/ip-namespace-list-page"),
+                    handle: {
+                      breadcrumb: () => {
+                        return {
+                          type: "link",
+                          label: "namespaces",
+                          to: constructPath("/ipam/namespaces"),
+                        } satisfies BreadcrumbItem;
+                      },
+                    },
+                  },
                   {
                     path: IPAM_ROUTE.ADDRESSES,
                     lazy: () => import("@/entities/ipam/ipam-router"),
diff --git a/frontend/app/src/entities/ipam/ip-namespace-selector.tsx b/frontend/app/src/entities/ipam/ip-namespace-selector.tsx
@@ -1,6 +1,9 @@
 import { GET_IP_NAMESPACES } from "@/entities/ipam/api/ip-namespaces";
 import { IpamNamespace } from "@/shared/api/graphql/generated/graphql";
 import useQuery from "@/shared/api/graphql/useQuery";
+import { constructPath } from "@/shared/api/rest/fetch";
+import { LinkButton } from "@/shared/components/buttons/button-primitive";
+import { Col } from "@/shared/components/container";
 import { Skeleton } from "@/shared/components/skeleton";
 import {
   Combobox,
@@ -100,6 +103,16 @@ const IpNamespaceSelectorContent = ({ namespaces }: IpNamespaceSelectorContentPr
               </ComboboxItem>
             ))}
           </ComboboxList>
+          <Col className="border-t border-neutral-200">
+            <LinkButton
+              to={constructPath("/ipam/namespaces")}
+              variant="ghost"
+              size="sm"
+              className="text-xs justify-start m-2"
+            >
+              View all IP namespaces
+            </LinkButton>
+          </Col>
         </ComboboxContent>
       </Combobox>
     </div>
diff --git a/frontend/app/src/entities/ipam/namespaces/domain/get-ip-namespace-list.query.ts b/frontend/app/src/entities/ipam/namespaces/domain/get-ip-namespace-list.query.ts
@@ -0,0 +1,52 @@
+import { useCurrentBranch } from "@/entities/branches/ui/branches-provider";
+import { NAMESPACE_GENERIC } from "@/entities/ipam/constants";
+import {
+  GetIpNamespaceListParams,
+  getIpNamespaceList,
+} from "@/entities/ipam/namespaces/domain/get-ip-namespace-list";
+import { OBJECTS_PER_PAGE } from "@/entities/nodes/object/domain/get-objects";
+import { ContextParams, PaginationParams } from "@/shared/api/types";
+import { datetimeAtom } from "@/shared/stores/time.atom";
+import { infiniteQueryOptions, useInfiniteQuery } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
+
+export type GetIpNamespaceListInfiniteQueryOptionsParams = Omit<
+  GetIpNamespaceListParams,
+  keyof PaginationParams
+>;
+
+export function getIpNamespaceListInfiniteQueryOptions(
+  params: GetIpNamespaceListInfiniteQueryOptionsParams
+) {
+  return infiniteQueryOptions({
+    queryKey: [params.branchName, params.atDate, NAMESPACE_GENERIC, "objects", params.filters],
+    queryFn: async ({ pageParam }) => {
+      return getIpNamespaceList({
+        ...params,
+        offset: pageParam,
+      });
+    },
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, _, lastPageParam) => {
+      if (lastPage.length < OBJECTS_PER_PAGE) {
+        return undefined;
+      }
+      return lastPageParam + OBJECTS_PER_PAGE;
+    },
+  });
+}
+
+export function useGetIpNamespaceList(
+  params?: Omit<GetIpNamespaceListInfiniteQueryOptionsParams, keyof ContextParams>
+) {
+  const { currentBranch } = useCurrentBranch();
+  const timeMachineDate = useAtomValue(datetimeAtom);
+
+  return useInfiniteQuery(
+    getIpNamespaceListInfiniteQueryOptions({
+      ...params,
+      branchName: currentBranch.name,
+      atDate: timeMachineDate,
+    })
+  );
+}
diff --git a/frontend/app/src/entities/ipam/namespaces/domain/get-ip-namespace-list.ts b/frontend/app/src/entities/ipam/namespaces/domain/get-ip-namespace-list.ts
@@ -0,0 +1,75 @@
+import { OBJECTS_PER_PAGE } from "@/entities/nodes/object/domain/get-objects";
+import { NodeCore } from "@/entities/nodes/types";
+import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
+import { addFiltersToRequest } from "@/shared/api/graphql/utils";
+import { ContextParams, PaginationParams } from "@/shared/api/types";
+import { Filter } from "@/shared/hooks/useFilters";
+import { gql } from "@apollo/client";
+import { jsonToGraphQLQuery } from "json-to-graphql-query";
+import { NAMESPACE_GENERIC } from "../../constants";
+
+export interface GetIpNamespaceListParams extends ContextParams, PaginationParams {
+  filters?: Array<Filter>;
+}
+
+export interface IpNamespace extends NodeCore {
+  description: { value: string };
+  ip_addresses: { count: number };
+  ip_prefixes: { count: number };
+}
+
+export type GetIpNamespaceList = (params: GetIpNamespaceListParams) => Promise<Array<IpNamespace>>;
+
+export const getIpNamespaceList: GetIpNamespaceList = async ({
+  filters,
+  limit = OBJECTS_PER_PAGE,
+  offset,
+  branchName,
+  atDate,
+}) => {
+  const query = gql(
+    jsonToGraphQLQuery({
+      query: {
+        __name: `GetObjects${NAMESPACE_GENERIC}`,
+        [NAMESPACE_GENERIC]: {
+          __args: {
+            limit,
+            offset,
+            ...(filters ? addFiltersToRequest(filters) : {}),
+          },
+          edges: {
+            node: {
+              id: true,
+              display_label: true,
+              hfid: true,
+              description: {
+                value: true,
+              },
+              ip_prefixes: {
+                count: true,
+              },
+              ip_addresses: {
+                count: true,
+              },
+            },
+          },
+        },
+      },
+    })
+  );
+
+  const { data, errors } = await graphqlClient.query({
+    query,
+    context: {
+      branch: branchName,
+      date: atDate,
+      processErrorMessage: () => {},
+    },
+  });
+
+  if (errors?.[0]?.message) {
+    throw new Error(errors[0].message);
+  }
+
+  return data?.[NAMESPACE_GENERIC]?.edges?.map((edge: any) => edge.node) ?? [];
+};
diff --git a/frontend/app/src/entities/ipam/namespaces/ui/ip-namespace-card.tsx b/frontend/app/src/entities/ipam/namespaces/ui/ip-namespace-card.tsx
@@ -0,0 +1,43 @@
+import { IpNamespace } from "@/entities/ipam/namespaces/domain/get-ip-namespace-list";
+import { getNodeLabel } from "@/entities/nodes/object/utils/get-node-label";
+import { getObjectDetailsUrl } from "@/entities/nodes/utils";
+import { Row } from "@/shared/components/container";
+import { Badge } from "@/shared/components/ui/badge";
+import { focusVisibleStyle } from "@/shared/components/ui/style";
+import { classNames } from "@/shared/utils/common";
+import { pluralize } from "@/shared/utils/string";
+import { Link } from "react-router";
+
+export interface IpNamespaceCardProps {
+  ipNamespace: IpNamespace;
+}
+
+const CARD_STYLES = {
+  container: classNames(
+    "bg-white rounded-lg border border-gray-200 p-4 flex flex-col gap-2",
+    "transition-all hover:border-custom-blue-600 hover:shadow-sm",
+    focusVisibleStyle
+  ),
+  title: "text-lg font-semibold truncate",
+  badge: "px-3 py-1.5 bg-blue-50 text-blue-700 font-medium rounded-full",
+  description: "text-sm text-gray-600",
+};
+
+export function IpNamespaceCard({ ipNamespace }: IpNamespaceCardProps) {
+  const { id, __typename, description, ip_prefixes, ip_addresses } = ipNamespace;
+  const detailsUrl = getObjectDetailsUrl(__typename, id);
+  const nodeLabel = getNodeLabel(ipNamespace);
+
+  return (
+    <Link to={detailsUrl} className={CARD_STYLES.container}>
+      <h2 className={CARD_STYLES.title}>{nodeLabel}</h2>
+      <Row>
+        <Badge className={CARD_STYLES.badge}>{pluralize(ip_prefixes.count, "Prefix", "es")}</Badge>
+        <Badge className={CARD_STYLES.badge}>
+          {pluralize(ip_addresses.count, "Address", "es")}
+        </Badge>
+        <p className={CARD_STYLES.description}>{description?.value}</p>
+      </Row>
+    </Link>
+  );
+}
diff --git a/frontend/app/src/entities/nodes/object/domain/get-objects.query.ts b/frontend/app/src/entities/nodes/object/domain/get-objects.query.ts
@@ -1,5 +1,5 @@
 import { useCurrentBranch } from "@/entities/branches/ui/branches-provider";
-import { PaginationParams } from "@/shared/api/types";
+import { ContextParams, PaginationParams } from "@/shared/api/types";
 import { datetimeAtom } from "@/shared/stores/time.atom";
 import { infiniteQueryOptions, useInfiniteQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
@@ -38,7 +38,7 @@ export function getObjectsInfiniteQueryOptions({
   });
 }
 
-export function useObjects(params: Omit<GetObjectsQueryParams, "branchName" | "atDate">) {
+export function useObjects(params: Omit<GetObjectsQueryParams, keyof ContextParams>) {
   const { currentBranch } = useCurrentBranch();
   const timeMachineDate = useAtomValue(datetimeAtom);
 
diff --git a/frontend/app/src/pages/ipam/layout.tsx b/frontend/app/src/pages/ipam/layout.tsx
@@ -26,6 +26,4 @@ function IpamLayout() {
   );
 }
 
-export function Component() {
-  return <IpamLayout />;
-}
+export const Component = IpamLayout;
diff --git a/frontend/app/src/pages/ipam/namespaces/ip-namespace-list-page.tsx b/frontend/app/src/pages/ipam/namespaces/ip-namespace-list-page.tsx
@@ -0,0 +1,86 @@
+import { NAMESPACE_GENERIC } from "@/entities/ipam/constants";
+import { useGetIpNamespaceList } from "@/entities/ipam/namespaces/domain/get-ip-namespace-list.query";
+import { IpNamespaceCard } from "@/entities/ipam/namespaces/ui/ip-namespace-card";
+import { FilterSearchInput } from "@/entities/nodes/object/ui/filters/filter-search-input";
+import { ObjectTableEmpty } from "@/entities/nodes/object/ui/object-table/object-table-empty";
+import { Permission } from "@/entities/permission/types";
+import { RequireObjectPermissions } from "@/entities/permission/ui/require-object-permissions";
+import { ModelSchema } from "@/entities/schema/types";
+import { useSchema } from "@/entities/schema/ui/hooks/useSchema";
+import { queryClient } from "@/shared/api/rest/client";
+import { Col } from "@/shared/components/container";
+import ErrorScreen from "@/shared/components/errors/error-screen";
+import { ObjectCreateFormTrigger } from "@/shared/components/form/object-create-form-trigger";
+import { Spinner } from "@/shared/components/ui/spinner";
+import { InfiniteScroll } from "@/shared/components/utils/infinite-scroll";
+import useFilters from "@/shared/hooks/useFilters";
+import React from "react";
+
+interface IpNamespaceListPageProps {
+  namespaceSchema: ModelSchema;
+  permission: Permission;
+}
+
+function IpNamespaceListPage({ namespaceSchema, permission }: IpNamespaceListPageProps) {
+  const [filters] = useFilters();
+  const { isPending, data, fetchNextPage, isFetchingNextPage, hasNextPage } = useGetIpNamespaceList(
+    {
+      filters,
+    }
+  );
+
+  const flatData = React.useMemo(() => data?.pages?.flat() ?? [], [data]);
+
+  const isLoading = isPending || isFetchingNextPage;
+
+  return (
+    <Col className="overflow-hidden h-full gap-0">
+      <div className="flex items-center h-14 shrink-0 border-b px-2 border-gray-200">
+        <FilterSearchInput schema={namespaceSchema} />
+
+        <ObjectCreateFormTrigger
+          schema={namespaceSchema}
+          onSuccess={() => {
+            queryClient.invalidateQueries({
+              predicate: (query) => query.queryKey.includes("objects"),
+            });
+          }}
+          permission={permission}
+          className="ml-auto"
+        />
+      </div>
+
+      <InfiniteScroll hasNextPage={hasNextPage} onLoadMore={fetchNextPage}>
+        <Col className="p-2">
+          {flatData.map((item) => {
+            return <IpNamespaceCard key={item.id} ipNamespace={item} />;
+          })}
+
+          {isLoading && (
+            <div className="flex justify-center grow">
+              <Spinner />
+            </div>
+          )}
+
+          {!isLoading && flatData.length === 0 && <ObjectTableEmpty schema={namespaceSchema} />}
+        </Col>
+      </InfiniteScroll>
+    </Col>
+  );
+}
+
+export const Component = () => {
+  const { schema } = useSchema(NAMESPACE_GENERIC);
+
+  if (!schema) {
+    return <ErrorScreen message={`Schema ${NAMESPACE_GENERIC} not found.`} />;
+  }
+
+  return (
+    <RequireObjectPermissions objectKind={NAMESPACE_GENERIC}>
+      {({ permission }) => {
+        return <IpNamespaceListPage namespaceSchema={schema} permission={permission} />;
+      }}
+    </RequireObjectPermissions>
+  );
+};
diff --git a/frontend/app/src/shared/components/container.tsx b/frontend/app/src/shared/components/container.tsx
@@ -0,0 +1,14 @@
+import { classNames } from "@/shared/utils/common";
+import React from "react";
+
+export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export function Row({ className, ...props }: RowProps) {
+  return <div className={classNames("flex items-center gap-2", className)} {...props} />;
+}
+
+export function Col({ className, ...props }: RowProps) {
+  return <div className={classNames("flex flex-col items-stretch gap-2", className)} {...props} />;
+}

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,4 @@ function IpamLayout() {`
`26`	`26`	`);`
`27`	`27`	`}`
`28`	`28`
`29`		`-export function Component() {`
`30`		`- return <IpamLayout />;`
`31`		`-}`
	`29`	`+export const Component = IpamLayout;`