feat: add Edge Cloud Zones feature with UI components and routing (7e2c32a1) · Commits · OOP / code / portal

portal-gui/src/app/config/navigation.ts

+8 −1

Changes for portal-gui/src/app/config/navigation.ts: 8 added lines, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -9,6 +9,7 @@ import {
		UserIcon,
		Handshake,
		KeyRoundIcon,
		MapPin,
		} from 'lucide-react';

		import { ROUTES } from './route';
		@@ -35,6 +36,12 @@ export const applicationNavItems: NavItem[] = [
		description: 'View application deployments across edge cloud zones.',
		icon: Rocket,
		},
		{
		title: 'Zones',
		to: ROUTES.APPLICATION_ZONES,
		description: 'Discover the edge cloud zones available for deployment.',
		icon: MapPin,
		},
		];

		export const mainNavItems: NavItem[] = [
		@@ -77,7 +84,7 @@ export const mainNavItems: NavItem[] = [
		title: 'Explore',
		to: ROUTES.APPLICATIONS,
		description:
		'Work with application profiles, instances, and deployments.',
		'Work with application profiles, instances, deployments, and zones.',
		icon: Rocket,
		children: applicationNavItems,
		},

+1 −0

Changes for portal-gui/src/app/config/route.ts: 1 added line, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -12,6 +12,7 @@ export const ROUTES = {
		APPLICATION_INSTANCES: '/apis/edge-application-management/explore/instances',
		APPLICATION_DEPLOYMENTS:
		'/apis/edge-application-management/explore/deployments',
		APPLICATION_ZONES: '/apis/edge-application-management/explore/zones',
		APPLICATION: '/applications/profiles/:appId',
		FEDERATION: '/federation',
		FORBIDDEN: '/403',

+2 −0

Changes for portal-gui/src/app/router.tsx: 2 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -20,6 +20,7 @@ import ApplicationsPage from '@/pages/applications/index';
		import ApplicationProfilesPage from '@/pages/applications/app-profiles';
		import ApplicationInstancesPage from '@/pages/applications/app-instances';
		import DeploymentsPage from '@/pages/applications/app-deployments';
		import EdgeCloudZonesPage from '@/pages/applications/edge-cloud-zones';
		import FederationPage from '@/pages/federation/index';

		import ForbiddenPage from '@/pages/errors/forbidden';
		@@ -84,6 +85,7 @@ export const router = createBrowserRouter([
		{ path: 'profiles', element: <ApplicationProfilesPage /> },
		{ path: 'instances', element: <ApplicationInstancesPage /> },
		{ path: 'deployments', element: <DeploymentsPage /> },
		{ path: 'zones', element: <EdgeCloudZonesPage /> },
		],
		},
		],

0 → 100644

+49 −0

Changes for portal-gui/src/components/applications/edge-cloud-zone-columns.tsx: 49 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		import type { ColumnDef } from '@tanstack/react-table';

		import { Badge } from '@/components/ui/badge';
		import type { EdgeCloudZone } from '@/types/application';

		export const edgeCloudZoneColumns: ColumnDef<EdgeCloudZone>[] = [
		{
		id: 'drag',
		header: () => null,
		enableHiding: false,
		size: 40,
		},
		{
		id: 'name',
		accessorKey: 'edgeCloudZoneName',
		header: 'Name',
		cell: ({ row }) => (
		<div>
		<p className="font-medium">{row.original.edgeCloudZoneName}</p>
		<p className="mt-1 font-mono text-xs text-muted-foreground">
		{row.original.edgeCloudZoneId}
		</p>
		</div>
		),
		size: 280,
		},
		{
		accessorKey: 'edgeCloudProvider',
		header: 'Provider',
		size: 180,
		},
		{
		accessorKey: 'edgeCloudRegion',
		header: 'Region',
		cell: ({ row }) => row.original.edgeCloudRegion \|\| '—',
		size: 180,
		},
		{
		accessorKey: 'edgeCloudZoneStatus',
		header: 'Status',
		cell: ({ row }) =>
		row.original.edgeCloudZoneStatus ? (
		<Badge variant="outline">{row.original.edgeCloudZoneStatus}</Badge>
		) : (
		'—'
		),
		size: 120,
		},
		];

+8 −0

Changes for portal-gui/src/components/common/empty-state.tsx: 8 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		import { Inbox } from 'lucide-react';
		import { RefreshButton } from '@/components/common/refresh-button';

		export function EmptyState({
		title = 'Nothing here yet',
		description = 'There is currently no data to display.',
		onRefresh,
		refreshing,
		}: {
		title?: string;
		description?: string;
		onRefresh?: () => void;
		refreshing?: boolean;
		}) {
		return (
		<div className="flex flex-col items-center gap-4 py-16 text-center">
		@@ -16,6 +21,9 @@ export function EmptyState({

		<p className="text-sm text-muted-foreground">{description}</p>
		</div>
		{onRefresh && (
		<RefreshButton onRefresh={onRefresh} refreshing={refreshing} />
		)}
		</div>
		);
		}