2026-02-02 12:22:08: merge [main:db69e8e86b6668b0bf201a7bc38edff13dc3b35a];

Author: txix

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 1.7.0
+- Добавлено
+  - Страница Swagger для модулей
 ## 1.6.5
 - Обновлено
   - библиотека isp-ui-kit до версии 1.0.0

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "isp-admin-ui-kit",
-  "version": "1.6.5",
+  "version": "1.7.0",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {
@@ -55,6 +55,7 @@
     "@types/react-dom": "^18.2.24",
     "@types/react-resizable": "^3.0.7",
     "@types/react-router-dom": "^5.3.3",
+    "@types/swagger-ui-react": "^5.18.0",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
     "eslint": "^8.57.0",
@@ -90,7 +91,8 @@
     "react-dom": ">=18.2.0",
     "react-hook-form": "^7.54.0",
     "react-redux": "^9.1.0",
-    "react-router-dom": "^6.22.3"
+    "react-router-dom": "^6.22.3",
+    "swagger-ui-react": "^5.31.0"
   },
   "eslintConfig": {
     "extends": [

package.json

@@ -1,18 +1,18 @@
 import { Tabs } from 'antd'
-import { memo } from 'react'
+import { memo, useEffect, useMemo } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 
+import { MODULES_TAB_KEYS } from '@constants/modules.ts'
+
 import ModuleTabContent from '@widgets/ModuleTabContent'
 
 import { ModuleTabsPropsType } from '@components/ModuleTabs/module-tabs.type.ts'
 
 const secondColumnItems = [
-  {
-    key: 'configurations',
-    name: 'Конфигурации'
-  },
-  { key: 'connections', name: 'Подключения' }
-]
+  { key: 'configurations', name: 'Конфигурации' },
+  { key: 'connections', name: 'Подключения' },
+  { key: 'swagger', name: 'Swagger' }
+] as const
 
 const ModuleTabs = ({
   activeTab,
@@ -22,37 +22,66 @@ const ModuleTabs = ({
 }: ModuleTabsPropsType) => {
   const navigate = useNavigate()
   const { id: selectedItemId = '' } = useParams()
+
+  const hasSwagger = useMemo(
+    () =>
+      currentModule?.status?.some((status) =>
+        status.endpoints?.some((e) => e.path.includes('swagger'))
+      ),
+    [currentModule]
+  )
+
+  const resolvedActiveTab = useMemo(() => {
+    return activeTab === MODULES_TAB_KEYS.swagger && !hasSwagger
+      ? 'configurations'
+      : activeTab
+  }, [activeTab, hasSwagger])
+
+  const navigateToTab = (tabKey: string) => {
+    const params = new URLSearchParams(searchParams)
+    navigate(
+      {
+        pathname: `${selectedItemId}/${tabKey}`,
+        search: params.toString()
+      },
+      { replace: true }
+    )
+  }
+
+  useEffect(() => {
+    if (resolvedActiveTab !== activeTab) {
+      setActiveTab(resolvedActiveTab)
+      navigateToTab(resolvedActiveTab)
+    }
+  }, [resolvedActiveTab])
+
+  const items = useMemo(
+    () =>
+      secondColumnItems.filter(({ key }) => key !== 'swagger' || hasSwagger),
+    [hasSwagger]
+  )
+
   return (
     <Tabs
-      activeKey={activeTab}
-      onChange={(activeKey) => {
-        setActiveTab(activeKey)
-        const params = new URLSearchParams(searchParams)
-        const path = `${selectedItemId}/${activeKey}`
-        navigate(
-          {
-            pathname: path,
-            search: params.toString()
-          },
-          { replace: true }
-        )
-      }}
+      activeKey={resolvedActiveTab}
       className="modules-page__tabs"
-      items={secondColumnItems.map((item) => {
-        return {
-          disabled: selectedItemId === '',
-          label: item.name,
-          key: item.key,
-          children: (
-            <div className="modules-page__content">
-              <ModuleTabContent
-                selectedItemId={selectedItemId}
-                currentModule={currentModule}
-              />
-            </div>
-          )
-        }
-      })}
+      onChange={(key) => {
+        setActiveTab(key)
+        navigateToTab(key)
+      }}
+      items={items.map(({ key, name }) => ({
+        key,
+        label: name,
+        disabled: !selectedItemId,
+        children: (
+          <div className="modules-page__content">
+            <ModuleTabContent
+              selectedItemId={selectedItemId}
+              currentModule={currentModule}
+            />
+          </div>
+        )
+      }))}
     />
   )
 }

src/components/ModuleTabs/index.tsx

@@ -72,7 +72,7 @@ type PathKeys =
   | 'updateApplicationGroup'
 
 const BASE_URL = import.meta.env.BASE_URL?.replace(/\/$/, '') || ''
-const API_BASE_URL = `${BASE_URL}/api`
+export const API_BASE_URL = `${BASE_URL}/api`
 const apiWithBaseURL = (path: `/${string}`) => `${API_BASE_URL}${path}`
 
 export const apiPaths: Record<PathKeys, string> = {

src/constants/api/apiPaths.ts

@@ -0,0 +1,7 @@
+export type ModulesTabKeysType = 'configurations' | 'connections' | 'swagger'
+
+export const MODULES_TAB_KEYS: Record<ModulesTabKeysType, string> = {
+  configurations: 'configurations',
+  connections: 'connections',
+  swagger: 'swagger'
+}

src/constants/modules.ts

@@ -10,6 +10,8 @@ import {
   useSearchParams
 } from 'react-router-dom'
 
+import { MODULES_TAB_KEYS, ModulesTabKeysType } from '@constants/modules.ts'
+
 import ModuleTabs from '@components/ModuleTabs'
 
 import { ModuleType } from '@pages/ModulesPage/module.type.ts'
@@ -28,7 +30,7 @@ import { PermissionKeysType } from '@type/roles.type.ts'
 import './modules-page.scss'
 
 const ModulesPage = () => {
-  const [activeTab, setActiveTab] = useState('configurations')
+  const [activeTab, setActiveTab] = useState(MODULES_TAB_KEYS.configurations)
   const { id: selectedItemId = '' } = useParams()
   const navigate = useNavigate()
   const { role, hasPermission } = useRole()
@@ -64,12 +66,14 @@ const ModulesPage = () => {
   useEffect(() => {
     const url = location.pathname.substring(
       location.pathname.lastIndexOf('/') + 1
-    )
+    ) as ModulesTabKeysType
     switch (url) {
-      case 'configurations':
-        return setActiveTab('configurations')
-      case 'connections':
-        return setActiveTab('connections')
+      case MODULES_TAB_KEYS.configurations:
+        return setActiveTab(MODULES_TAB_KEYS.configurations)
+      case MODULES_TAB_KEYS.connections:
+        return setActiveTab(MODULES_TAB_KEYS.connections)
+      case MODULES_TAB_KEYS.swagger:
+        return setActiveTab(MODULES_TAB_KEYS.swagger)
     }
   }, [location])
 
@@ -179,7 +183,6 @@ const ModulesPage = () => {
       </List.Item>
     )
   }
-
   return (
     <section className="modules-page">
       <Column

src/pages/ModulesPage/index.tsx

@@ -0,0 +1,98 @@
+import { Button, Spin } from 'antd'
+import { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import SwaggerUI from 'swagger-ui-react'
+
+import { base64ToUtf8 } from '@utils/base64ToJson.ts'
+import { downloadFile } from '@utils/downloadFile.ts'
+import { toSafeFileName } from '@utils/toSafeFileName.ts'
+
+import modulesServiceApi from '@services/modulesService.ts'
+import swaggerServiceApi from '@services/swaggerService.ts'
+
+import './swagger-page.scss'
+
+import 'swagger-ui-react/swagger-ui.css'
+
+const SwaggerPage = () => {
+  const { id } = useParams<{ id: string }>()
+
+  const { data: modules = [] } = modulesServiceApi.useGetModulesQuery('modules')
+
+  const [swaggerPath, setSwaggerPath] = useState<string>('')
+  const [moduleName, setModuleName] = useState<string>('module')
+
+  useEffect(() => {
+    if (!modules.length || !id) {
+      return
+    }
+
+    const module = modules.find((m) => m.id === id)
+
+    if (!module) {
+      return
+    }
+    setModuleName(module.name ?? 'module')
+
+    const swaggerEndpoint = module.status
+      ?.flatMap((s) => s.endpoints)
+      ?.find((e) => e?.path?.includes('swagger'))
+
+    if (swaggerEndpoint) {
+      setSwaggerPath(`/${swaggerEndpoint.path}`)
+    }
+  }, [modules, id])
+
+  const { data: swaggerSpec, isLoading } = swaggerServiceApi.useGetSwaggerQuery(
+    swaggerPath,
+    {
+      skip: !swaggerPath
+    }
+  )
+
+  const swaggerSpecText = swaggerSpec ? base64ToUtf8(swaggerSpec) : ''
+
+  const handleDownload = () => {
+    if (!swaggerSpecText) {
+      return
+    }
+
+    const safeName = toSafeFileName(moduleName)
+
+    downloadFile({
+      fileName: `swagger-${safeName}.yml`,
+      content: swaggerSpecText,
+      mimeType: 'application/yaml;charset=utf-8'
+    })
+  }
+
+  if (isLoading) {
+    return (
+      <div className="swagger-page__loader">
+        <Spin size="large" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="swagger-page">
+      {swaggerSpec ? (
+        <>
+          <div className="swagger-page__toolbar">
+            <Button type="primary" onClick={handleDownload}>
+              Скачать Swagger
+            </Button>
+          </div>
+
+          <div className="swagger-page__content">
+            <SwaggerUI spec={swaggerSpecText} />
+          </div>
+        </>
+      ) : (
+        <div className="swagger-page__no-data">Нет данных Swagger</div>
+      )}
+    </div>
+  )
+}
+
+export default SwaggerPage

src/pages/SwaggerPage/index.tsx

@@ -0,0 +1,25 @@
+.swagger-page {
+  height: calc(100vh - 100px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &__toolbar {
+    padding: 12px 16px;
+    background: #f7f7f7;
+    border-bottom: 1px solid #e5e5e5;
+  }
+
+  &__content {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+  }
+
+  &__content .swagger-ui {
+    flex: 1;
+    overflow-y: auto;
+    background: #fff;
+  }
+}

src/pages/SwaggerPage/swagger-page.scss

@@ -8,6 +8,7 @@ import LayoutComponent from '@components/Layout'
 import Configurations from '@pages/ConfigurationsPage'
 import Connections from '@pages/ConnectionsPage'
 import ErrorWrapperPage from '@pages/ErrorWrapperPage'
+import SwaggerPage from '@pages/SwaggerPage'
 
 import PrivateRoute from '@routes/PrivateRoute'
 import { generateCustomRoutes } from '@routes/customRoutes.tsx'
@@ -140,6 +141,10 @@ export const getRoutesConfig = (
                     {
                       path: routePaths.connections,
                       element: lazyElement(Connections)
+                    },
+                    {
+                      path: routePaths.swagger,
+                      element: lazyElement(SwaggerPage)
                     }
                   ]
                 }