feat: support for api defined routes

Makefile

@@ -1,7 +1,7 @@
 CI_BUILD_TAG ?= lagoon-ui
 CORE_REPO=https://github.com/uselagoon/lagoon.git
 # CORE_REPO = ../lagoon
-CORE_TREEISH=main
+CORE_TREEISH=api-defined-routes
 
 # for the `stable` targets, images with these tags will be used
 LAGOON_CORE_IMAGE_REPO=testlagoon
@@ -30,7 +30,15 @@ start-ui:
 	&& export CALLBACK_URL=$(CALLBACK_URL) \
 	&& export AUTH_KEYCLOAK_ISSUER=$(AUTH_KEYCLOAK_ISSUER) \
 	&& export AUTH_KEYCLOAK_SECRET=$(AUTH_KEYCLOAK_SECRET) \
-	&& docker compose -p $(CI_BUILD_TAG) --compatibility up -d ui
+	&& docker compose -p $(CI_BUILD_TAG) --compatibility up -d ui --build
+
+.PHONY: start-ui-k3d
+start-ui-k3d:
+	$(MAKE) start-ui \
+		GRAPHQL_API=https://lagoon-api.$$(kubectl -n ingress-nginx get services ingress-nginx-controller -o jsonpath='{.status.loadBalancer.ingress[0].ip}').nip.io/graphql \
+		KEYCLOAK_FRONTEND_URL=https://lagoon-keycloak.$$(kubectl -n ingress-nginx get services ingress-nginx-controller -o jsonpath='{.status.loadBalancer.ingress[0].ip}').nip.io/auth \
+		AUTH_KEYCLOAK_SECRET=$$(kubectl -n lagoon-core get secrets lagoon-core-keycloak -o json | jq -r '.data["KEYCLOAK_LAGOON_UI_OIDC_CLIENT_SECRET"] | @base64d')
+	docker network connect k3d lagoon-ui_ui_1
 
 .PHONY: checkout-core
 checkout-core:

docker-compose.yml

@@ -16,6 +16,7 @@ x-environment: &default-environment
   AUTH_KEYCLOAK_ISSUER: "${AUTH_KEYCLOAK_ISSUER:-http://0.0.0.0:8088/auth/realms/lagoon}"
   LAGOON_UI_TOURS_ENABLED: enabled
   NODE_TLS_REJECT_UNAUTHORIZED: 0
+  DISABLE_SUBSCRIPTIONS: 'true'
 
 services:
   ui:

src/app/(routegroups)/(projectroutes)/projects/[projectSlug]/(project-overview)/page.tsx

@@ -17,6 +17,7 @@ export type ProjectEnvironment = {
   updated: string | null;
   routes: null | string;
   openshiftProjectName: string;
+  kubernetesNamespaceName: string;
   openshift: { friendlyName: null | string; cloudRegion: null | string };
   project: {
     name: string;

src/app/(routegroups)/(projectroutes)/projects/[projectSlug]/[environmentSlug]/routes/loading.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import SectionWrapper from '@/components/SectionWrapper/SectionWrapper';
+import { FactsTableColumns, InsightsTableColumns } from '@/components/pages/insights/DataTableColumns';
+import { DataTable } from '@uselagoon/ui-library';
+
+export default function Loading() {
+	return (
+		<SectionWrapper>
+			<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">Facts</h3>
+			<DataTable loading columns={[]} data={[]} />
+
+			<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight my-4">Facts</h3>
+
+			<DataTable loading columns={InsightsTableColumns(0)} data={[]} />
+		</SectionWrapper>
+	);
+}

src/app/(routegroups)/(projectroutes)/projects/[projectSlug]/[environmentSlug]/routes/page.tsx

@@ -0,0 +1,73 @@
+import { PreloadQuery } from '@/lib/apolloClient';
+import { QueryRef } from '@apollo/client';
+import { ProjectEnvironment } from '../../(project-overview)/page';
+import environmentWithRoutes from '@/lib/query/environmentWithRoutes';
+import EnvironmentRoutesPage from '@/components/pages/environmentRoutes/EnvironmentRoutesPage';
+
+type Props = {
+	params: Promise<{ environmentSlug: string }>;
+};
+
+type Environment = {
+	id: number;
+	name: string;
+	kubernetesNamespaceName: string;
+	environmentType: string;
+	apiRoutes: EnvironmentRoute[];
+	project: Project;
+};
+
+export type EnvironmentRoute = {
+	id: number;
+	domain: string;
+	type: string;
+	primary: boolean;
+	environment: Environment;
+	service: string;
+	created: string;
+	updated: string;
+	source: string;
+};
+
+type Project = {
+	id: number;
+	name: string;
+	environments: ProjectEnvironment[];
+	productionEnvironment?: string;
+	standbyProductionEnvironment?: string;
+};
+
+export interface EnvironmentRoutesData {
+	environmentRoutes: Environment;
+}
+
+export async function generateMetadata(props: Props) {
+	const params = await props.params;
+	return {
+		title: `${params.environmentSlug} | Environment Routes`,
+	};
+}
+
+export default async function Routes(props: {
+	params: Promise<{ environmentSlug: string; projectSlug: string }>;
+}) {
+	const params = await props.params;
+
+	const { projectSlug, environmentSlug} = params;
+
+	return (
+		<PreloadQuery
+			query={environmentWithRoutes}
+			variables={{
+				openshiftProjectName: environmentSlug
+			}}
+		>
+			{queryRef => (
+				<EnvironmentRoutesPage
+					projectName={projectSlug}
+					queryRef={queryRef as QueryRef<EnvironmentRoutesData>}
+				/>
+			)}
+		</PreloadQuery>
+	);
+}

src/app/(routegroups)/(projectroutes)/projects/[projectSlug]/deploy-targets/page.tsx

@@ -22,6 +22,7 @@ type ProjectWithDeployTargets = {
   productionRoutes: null | string;
   standbyRoutes: null | string;
   developmentEnvironmentsLimit: number;
+  featureApiRoutes: boolean;
   deployTargetConfigs: {
     id: number;
     branches: string;

src/app/(routegroups)/(projectroutes)/projects/[projectSlug]/project-details/page.tsx

@@ -25,8 +25,26 @@ type ProjectWithDetails = {
   environments: {
     environmentType: 'production' | 'development';
   }[];
+  autogeneratedRouteConfig?: AutogeneratedRouteConfig;
 };
 
+type AutogeneratedRouteConfig = {
+  updated: string;
+  enabled: boolean;
+  allowPullRequests: boolean;
+  prefixes: string[];
+  tlsAcme: boolean;
+  insecure: string;
+  pathRoutes: AutogeneratedPathRoute[];
+  disableRequestVerification: boolean;
+}
+
+type AutogeneratedPathRoute = {
+  toService: string;
+  fromService: string;
+  path: string;
+}
+
 export type ProjectDetailsData = {
   project: ProjectWithDetails;
 };

src/app/(routegroups)/(projectroutes)/projects/[projectSlug]/routes/loading.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import SectionWrapper from '@/components/SectionWrapper/SectionWrapper';
+import { FactsTableColumns, InsightsTableColumns } from '@/components/pages/insights/DataTableColumns';
+import { DataTable } from '@uselagoon/ui-library';
+
+export default function Loading() {
+	return (
+		<SectionWrapper>
+			<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">Facts</h3>
+			<DataTable loading columns={[]} data={[]} />
+
+			<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight my-4">Facts</h3>
+
+			<DataTable loading columns={InsightsTableColumns(0)} data={[]} />
+		</SectionWrapper>
+	);
+}

src/app/(routegroups)/(projectroutes)/projects/[projectSlug]/routes/page.tsx

@@ -0,0 +1,72 @@
+import { PreloadQuery } from '@/lib/apolloClient';
+import { QueryRef } from '@apollo/client';
+import RoutesPage from "@/components/pages/routes/RoutesPage";
+import projectWithRoutes from "@/lib/query/projectWithRoutes";
+import { ProjectEnvironment } from '../(project-overview)/page';
+
+type Props = {
+	params: Promise<{ projectSlug: string }>;
+};
+
+type Environment = {
+	id: number;
+	name: string;
+	kubernetesNamespaceName: string;
+	environmentType: string;
+};
+
+export type Route = {
+	id: number;
+	domain: string;
+	type: string;
+	primary: boolean;
+	environment: Environment;
+	service: string;
+	created: string;
+	updated: string;
+	source: string;
+};
+
+type Project = {
+	id: number;
+	name: string;
+	environments: ProjectEnvironment[];
+	productionEnvironment?: string;
+	standbyProductionEnvironment?: string;
+	apiRoutes: Route[];
+};
+
+export interface RoutesData {
+	projectRoutes: Project;
+}
+
+export async function generateMetadata(props: Props) {
+	const params = await props.params;
+	return {
+		title: `${params.projectSlug} | Project Routes`,
+	};
+}
+
+export default async function Routes(props: {
+	params: Promise<{ projectSlug: string }>;
+}) {
+	const params = await props.params;
+
+	const { projectSlug } = params;
+
+	return (
+		<PreloadQuery
+			query={projectWithRoutes}
+			variables={{
+				name: projectSlug,
+			}}
+		>
+			{queryRef => (
+				<RoutesPage
+					projectName={projectSlug}
+					queryRef={queryRef as QueryRef<RoutesData>}
+				/>
+			)}
+		</PreloadQuery>
+	);
+}

src/components/addRouteToEnvironment/AttachRoute.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+
+import AttachRouteSheet from './AttachRouteSheet';
+import { ProjectEnvironment } from '@/app/(routegroups)/(projectroutes)/projects/[projectSlug]/(project-overview)/page';
+
+type Props = {
+  variant?: 'default' | 'small';
+  projectName?: string;
+  domainName?: string;
+  environments: ProjectEnvironment[];
+  refetch?: () => void;
+  iconOnly?: boolean;
+  prodEnvironment?: string;
+  standbyEnvironment?: string;
+};
+
+export const AttachRoute: FC<Props> = props => {
+
+  return (
+    <>
+      <div className="flex gap-2 items-center">
+        <AttachRouteSheet
+          projectName={props.projectName}
+          domainName={props.domainName}
+          environments={props.environments}
+          iconOnly={props.iconOnly}
+          prodEnvironment={props.prodEnvironment}
+          standbyEnvironment={props.standbyEnvironment}
+        />
+      </div>
+    </>
+  );
+};