From c704edd8d8b0ea716d7027df13d3a7ff974bed32 Mon Sep 17 00:00:00 2001 From: Guillaume Belanger Date: Wed, 25 Oct 2023 16:50:38 -0400 Subject: [PATCH] feat: Implements swagger API documentation (#161) --- app/(api)/api/page.tsx | 36 + app/(api)/api/react-swagger.tsx | 14 + app/(network)/layout.tsx | 85 + .../network-configuration/page.tsx | 0 app/{ => (network)}/subscribers/page.tsx | 12 +- app/globals.scss | 1 + app/layout.tsx | 80 +- app/page.tsx | 7 - components/Navigation.tsx | 33 +- package-lock.json | 2199 ++++++++++++++++- package.json | 3 + pages/api/getSwaggerDocs.ts | 7 + pages/api/network-slice/[name].ts | 102 +- pages/api/network-slice/index.ts | 14 +- utils/getSubscribers.tsx | 4 +- utils/swagger.ts | 17 + 16 files changed, 2513 insertions(+), 101 deletions(-) create mode 100644 app/(api)/api/page.tsx create mode 100644 app/(api)/api/react-swagger.tsx create mode 100644 app/(network)/layout.tsx rename app/{ => (network)}/network-configuration/page.tsx (100%) rename app/{ => (network)}/subscribers/page.tsx (93%) create mode 100644 pages/api/getSwaggerDocs.ts create mode 100644 utils/swagger.ts diff --git a/app/(api)/api/page.tsx b/app/(api)/api/page.tsx new file mode 100644 index 00000000..9dfd5db9 --- /dev/null +++ b/app/(api)/api/page.tsx @@ -0,0 +1,36 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import dynamic from "next/dynamic"; + +const DynamicReactSwagger = dynamic(() => import("./react-swagger"), { + ssr: false, + loading: () =>
Loading...
, +}); + +export default function IndexPage() { + const [spec, setSpec] = useState(null); + + useEffect(() => { + async function fetchSpecs() { + const response = await fetch("/api/getSwaggerDocs"); + + if (response.ok) { + const fetchedSpec = await response.json(); + setSpec(fetchedSpec); + } else { + console.error("Failed to fetch API docs"); + } + } + + fetchSpecs(); + }, []); + + if (!spec) return
Loading...
; + + return ( +
+ +
+ ); +} diff --git a/app/(api)/api/react-swagger.tsx b/app/(api)/api/react-swagger.tsx new file mode 100644 index 00000000..ede2314e --- /dev/null +++ b/app/(api)/api/react-swagger.tsx @@ -0,0 +1,14 @@ +"use client"; + +import SwaggerUI from "swagger-ui-react"; +import "swagger-ui-react/swagger-ui.css"; + +type Props = { + spec: Record; +}; + +function ReactSwagger({ spec }: Props) { + return ; +} + +export default ReactSwagger; diff --git a/app/(network)/layout.tsx b/app/(network)/layout.tsx new file mode 100644 index 00000000..6098684b --- /dev/null +++ b/app/(network)/layout.tsx @@ -0,0 +1,85 @@ +"use client"; +import "../globals.scss"; +import { Inter } from "next/font/google"; +import React, { useState, useEffect } from "react"; +import { checkBackendAvailable } from "@/utils/checkBackendAvailable"; +import { List, Notification, Row } from "@canonical/react-components"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import Navigation from "@/components/Navigation"; +import PageContent from "@/components/PageContent"; +import Loader from "@/components/Loader"; + +const inter = Inter({ subsets: ["latin"] }); +const queryClient = new QueryClient(); + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; + noLayout?: boolean; +}) { + const [backendAvailable, setBackendAvailable] = useState( + null, + ); + + useEffect(() => { + const fetchData = async () => { + const isBackendAvailable = await checkBackendAvailable(); + setBackendAvailable(isBackendAvailable); + }; + + fetchData(); + }, []); + + return ( + + + SD Core + + + +
+ +
+
+ {backendAvailable === null && } + {backendAvailable === false && ( + + + {"Backend not available"} + + + )} + {backendAvailable === true && ( + + {children} + + )} +
+
+ +

+ © 2023 Canonical Ltd. Ubuntu and{" "} + Canonical are registered trademarks of + Canonical Ltd. +

+ + Legal information + , + ]} + middot + /> + +
+
+
+ + + ); +} diff --git a/app/network-configuration/page.tsx b/app/(network)/network-configuration/page.tsx similarity index 100% rename from app/network-configuration/page.tsx rename to app/(network)/network-configuration/page.tsx diff --git a/app/subscribers/page.tsx b/app/(network)/subscribers/page.tsx similarity index 93% rename from app/subscribers/page.tsx rename to app/(network)/subscribers/page.tsx index bef2c70f..278d407c 100644 --- a/app/subscribers/page.tsx +++ b/app/(network)/subscribers/page.tsx @@ -61,7 +61,9 @@ const Subscribers = () => { onConfirm: () => handleConfirmDelete(rawIMSI), children: (

- This will permanently delete the subscriber {rawIMSI}
+ This will permanently delete the subscriber{" "} + {rawIMSI} +
This action cannot be undone.

), @@ -83,7 +85,12 @@ const Subscribers = () => { return ( <> -