chore(3418): fix displaying subnets for namespaces in emerald

app/app/api/private-cloud/products/[licencePlate]/namespace-subnet/route.ts

@@ -0,0 +1,30 @@
+import { Cluster } from '@prisma/client';
+import { z, string } from 'zod';
+import { GlobalRole } from '@/constants';
+import createApiHandler from '@/core/api-handler';
+import { OkResponse, UnauthorizedResponse } from '@/core/responses';
+import { models } from '@/services/db';
+import { getSubnet } from '@/services/k8s';
+import { getPathParamSchema } from '../schema';
+
+const queryParamSchema = z.object({
+  environment: string(),
+});
+
+const apiHandler = createApiHandler({
+  roles: [GlobalRole.User],
+  validations: { queryParams: queryParamSchema, pathParams: getPathParamSchema },
+});
+
+export const GET = apiHandler(async ({ queryParams, pathParams, session }) => {
+  const { environment } = queryParams;
+  const { licencePlate } = pathParams;
+  const { data: product } = await models.privateCloudProduct.get({ where: { licencePlate } }, session);
+
+  if (!product?._permissions.view) {
+    return UnauthorizedResponse();
+  }
+
+  const subnetInfo = await getSubnet(licencePlate, environment, product.cluster);
+  return OkResponse(subnetInfo);
+});

app/app/private-cloud/products/(product)/[licencePlate]/layout.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { Alert } from '@mantine/core';
-import { IconInfoCircle } from '@tabler/icons-react';
+import { Alert, Loader } from '@mantine/core';
+import { Cluster } from '@prisma/client';
+import { IconInfoCircle, IconLicense } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
@@ -35,7 +36,6 @@ export default privateCloudProductLayout(({ getPathParams, session, children })
 
   const [privateState, privateSnap] = usePrivateProductState();
   const { licencePlate = '' } = pathParams ?? {};
-
   const { data: currentProduct } = useQuery({
     queryKey: ['currentProduct', licencePlate],
     queryFn: () => getPrivateCloudProject(licencePlate),
@@ -109,7 +109,6 @@ export default privateCloudProductLayout(({ getPathParams, session, children })
         <ProductBadge data={privateSnap.currentProduct} />
       </h1>
       <h3 className="mt-0 italic">Private Cloud OpenShift platform</h3>
-
       {privateSnap.currentProduct.requests.length > 0 && (
         <Alert variant="light" color="blue" title="" icon={<IconInfoCircle />}>
           There is already an{' '}

app/components/form/Quotas.tsx

@@ -1,9 +1,13 @@
-import { PrivateCloudProject, Quota } from '@prisma/client';
+import { Loader } from '@mantine/core';
+import { Cluster, PrivateCloudProject, Quota } from '@prisma/client';
+import { useQueries } from '@tanstack/react-query';
+import _replace from 'lodash-es/replace';
 import _startCase from 'lodash-es/startCase';
 import { useFormContext } from 'react-hook-form';
 import QuotasChangeInfo from '@/components/form/QuotasChangeInfo';
 import ExternalLink from '@/components/generic/button/ExternalLink';
 import { resourceOptions } from '@/constants';
+import { getSubnetForEmerald } from '@/services/backend/private-cloud/products';
 import { cn } from '@/utils';
 import QuotaInput from './QuotaInput';
 
@@ -18,6 +22,8 @@ type namespaceKeyType = keyof typeof namespaceSuffixes;
 
 const namespaceKeys = Object.keys(namespaceSuffixes) as namespaceKeyType[];
 
+const environments = Object.values(namespaceSuffixes).map((value) => _replace(value, '-', ''));
+
 export default function Quotas({
   licencePlate,
   disabled,
@@ -38,6 +44,16 @@ export default function Quotas({
     'productionQuota',
   ]);
 
+  const subnetInformation = useQueries({
+    queries: environments.map((environment) => {
+      return {
+        queryKey: [licencePlate, environment],
+        queryFn: () => getSubnetForEmerald(licencePlate, environment),
+        enabled: currentProject?.cluster === Cluster.EMERALD && !!licencePlate,
+      };
+    }),
+  });
+
   if (!currentProject) return null;
 
   const newValues = {
@@ -76,14 +92,15 @@ export default function Quotas({
       </p>
 
       <div className="mt-10 mb-5 grid grid-cols-1 gap-x-4 xl:gap-x-4 gap-y-8 sm:grid-cols-8 ">
-        {namespaceKeys.map((namespace) => {
+        {namespaceKeys.map((namespace, index) => {
           const quotaField = (namespace + 'Quota') as keyof typeof newValues;
           const originalEnvQuota = currentProject[quotaField] as Quota;
           const newEnvQuota = newValues[quotaField];
           const hasResourceChange =
             newEnvQuota?.cpu !== originalEnvQuota?.cpu ||
             newEnvQuota?.memory !== originalEnvQuota?.memory ||
             newEnvQuota?.storage !== originalEnvQuota?.storage;
+
           return (
             <div
               key={namespace}
@@ -101,6 +118,14 @@ export default function Quotas({
                 {licencePlate}
                 {namespaceSuffixes[namespace] || ''}
               </ExternalLink>
+              {subnetInformation[index].isLoading ? (
+                <Loader color="blue" type="dots" />
+              ) : subnetInformation[index].data ? (
+                <p className="text-base font-semibold mb-3">{subnetInformation[index].data}</p>
+              ) : (
+                <p className="text-base font-semibold mb-3 text-gray-500">No subnet information available</p>
+              )}
+
               {(['cpu', 'memory', 'storage'] as const).map((quotaName) => (
                 <QuotaInput
                   key={quotaName}

app/services/backend/private-cloud/products.ts

@@ -147,6 +147,11 @@ export async function getPodUsageMetrics(licencePlate: string, environment: stri
   return response.data;
 }
 
+export async function getSubnetForEmerald(licencePlate: string, environment: string) {
+  const response = await instance.get<string>(`/${licencePlate}/namespace-subnet?environment=${environment}`);
+  return response.data;
+}
+
 export interface QuotaChangeStatus {
   hasChange: boolean;
   hasIncrease: boolean;

app/services/k8s/index.ts

@@ -1,2 +1,3 @@
 export * from './usage-metrics';
 export * from './resource-details';
+export * from './namespace';

app/services/k8s/namespace.ts

@@ -0,0 +1,13 @@
+import { Cluster } from '@prisma/client';
+import _get from 'lodash-es/get';
+import { getK8sClients } from './core';
+
+export async function getNamespace(namespace: string, cluster: Cluster) {
+  const { apiClient } = getK8sClients(cluster);
+  return apiClient.readNamespace(namespace);
+}
+
+export async function getSubnet(licencePlate: string, environment: string, cluster: Cluster) {
+  const namespaceInfo = await getNamespace(`${licencePlate}-${environment}`, cluster);
+  return _get(namespaceInfo.body, 'metadata.annotations.ncp/subnet-0');
+}