github-personal/openapi-ui
1
0
Fork 0
mirror of https://github.com/outbackdingo/openapi-ui.git synced 2026-01-27 18:19:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #161 from PRO-Robotech/feature/dev

Browse Source 
Forms: fix arr of str, custom type for multiline | Border-radius fix | Custom namespace api res for nav | Env to hide inside
This commit is contained in:
typescreep
2025-11-05 06:38:03 +03:00
committed by GitHub
parent fe23751834 514e5dae20
commit 0c3629b2ce
12 changed files with 67 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env
View File

@@ -12,7 +12,9 @@ VITE_CUSTOMIZATION_NAVIGATION_RESOURCE=navigation
VITE_USE_NAMESPACE_NAV=true
VITE_NAVIGATE_FROM_CLUSTERLIST=/openapi-ui/clusters/~recordValue~
VITE_HIDE_INSIDE=false
VITE_NAVIGATE_FROM_CLUSTERLIST=/openapi-ui/~recordValue~/builtin-table/namespaces
VITE_PROJECTS_API_GROUP=incloud.io
VITE_PROJECTS_VERSION=v1alpha

2
.env.options.dist
View File

@@ -14,6 +14,8 @@ CUSTOMIZATION_NAVIGATION_RESOURCE=
USE_NAMESPACE_NAV=
HIDE_INSIDE=
NAVIGATE_FROM_CLUSTERLIST=
PROJECTS_API_GROUP=

3
README.md
View File

@@ -15,7 +15,7 @@ This app can be configured through environment variables.
| `KUBE_API_URL` | `string` | URL for the Kubernetes API. `http://api.incloud-web.svc.default.in-cloud.internal:8081` |
| `BFF_URL` | `string` | URL for the BFF |
| `TITLE_TEXT` | `string` | Page title |
| `TITLE_TEXT` | `string` | Page title |
| `LOGO_TEXT` | `string` | Logo text near icon |
| `ICON_SVG` | `string` | Favicon base64 encoded |
| `FOOTER_TEXT` | `string` | Footer text |
| `CUSTOM_LOGO_SVG` | `string` | Base64 encoded svg |
@@ -28,6 +28,7 @@ This app can be configured through environment variables.
| `CUSTOMIZATION_NAVIGATION_RESOURCE_NAME` | `string` | Resource plural name for navigation settings. `navigations` |
| `CUSTOMIZATION_NAVIGATION_RESOURCE` | `string` | Resource name for navigation settings. `navigation` |
| `USE_NAMESPACE_NAV` | `boolean` | Use namespaces instead of project/instances. `true` |
| `HIDE_INSIDE` | `boolean` | Use namespaces instead of project/instances. `true` |
| `NAVIGATE_FROM_CLUSTERLIST` | `string` | Location to be navigated after selecting cluster. `/openapi-ui/clusters/~recordValue~` |
| `PROJECTS_API_GROUP` | `string` | API group for projects resources. If not using namespace nav. |
| `PROJECTS_VERSION` | `string` | API version for projects resources. If not using namespace nav. |

8
package-lock.json generated
View File

@@ -11,7 +11,7 @@
"@ant-design/icons": "5.6.0",
"@monaco-editor/react": "4.6.0",
"@originjs/vite-plugin-federation": "1.3.6",
"@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.156",
"@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.158",
"@readme/openapi-parser": "4.0.0",
"@reduxjs/toolkit": "2.2.5",
"@tanstack/react-query": "5.62.2",
@@ -2804,9 +2804,9 @@
}
},
"node_modules/@prorobotech/openapi-k8s-toolkit": {
"version": "0.0.1-alpha.156",
"resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.156.tgz",
"integrity": "sha512-uMKzfdcEAbzKAFPWNIjcQMUtjhLmuUETs+1p+4K752HLB+31t9W1Fl5GOiySbpIWhoM7R9Y1mw5efe7/f04aRQ==",
"version": "0.0.1-alpha.158",
"resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.158.tgz",
"integrity": "sha512-pz+FHYv5PAzdfmyVxASG+Hvh8EM1cXvTXces6uUVjZG1koPHa3Hq4RmyUZyTCuXEKJyHW94V2sAasets9Ju5OA==",
"license": "MIT",
"dependencies": {
"@monaco-editor/react": "4.6.0",

2
package.json
View File

@@ -20,7 +20,7 @@
"@ant-design/icons": "5.6.0",
"@monaco-editor/react": "4.6.0",
"@originjs/vite-plugin-federation": "1.3.6",
"@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.156",
"@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.158",
"@readme/openapi-parser": "4.0.0",
"@reduxjs/toolkit": "2.2.5",
"@tanstack/react-query": "5.62.2",

2
server/index.ts
View File

@@ -39,6 +39,7 @@ const CUSTOMIZATION_NAVIGATION_RESOURCE =
: process.env.CUSTOMIZATION_NAVIGATION_RESOURCE
const USE_NAMESPACE_NAV = process.env.LOCAL === 'true' ? options?.USE_NAMESPACE_NAV : process.env.USE_NAMESPACE_NAV
const HIDE_INSIDE = process.env.LOCAL === 'true' ? options?.HIDE_INSIDE : process.env.HIDE_INSIDE
const NAVIGATE_FROM_CLUSTERLIST =
process.env.LOCAL === 'true' ? options?.NAVIGATE_FROM_CLUSTERLIST : process.env.NAVIGATE_FROM_CLUSTERLIST
@@ -239,6 +240,7 @@ app.get(`${basePrefix ? basePrefix : ''}/env.js`, (_, res) => {
}
CUSTOMIZATION_NAVIGATION_RESOURCE: ${JSON.stringify(CUSTOMIZATION_NAVIGATION_RESOURCE) || '"check envs"'},
USE_NAMESPACE_NAV: ${USE_NAMESPACE_NAV ? JSON.stringify(USE_NAMESPACE_NAV).toLowerCase() : '"false"'},
HIDE_INSIDE: ${HIDE_INSIDE ? JSON.stringify(HIDE_INSIDE).toLowerCase() : '"false"'},
NAVIGATE_FROM_CLUSTERLIST: ${JSON.stringify(NAVIGATE_FROM_CLUSTERLIST) || '"check envs"'},
PROJECTS_API_GROUP: ${JSON.stringify(PROJECTS_API_GROUP) || '"check envs"'},
PROJECTS_VERSION: ${JSON.stringify(PROJECTS_VERSION) || '"check envs"'},

8
src/components/molecules/ManageableSidebar/styled.ts
View File

@@ -18,7 +18,7 @@ const Container = styled.div<TContainerProps>`
direction: rtl;
max-height: ${({ $maxHeight }) => $maxHeight || 'initial'};
user-select: none;
border-top-right-radius: 12px;
border-top-right-radius: 7px;
& ul {
direction: ltr;
@@ -51,9 +51,9 @@ const Container = styled.div<TContainerProps>`
/* corner radius */
&& .ant-menu li:first-child div:first-child {
border-top-right-radius: 8px;
}
/* && .ant-menu li:first-child div:first-child {
border-top-right-radius: 4px;
} */
/* selected header bgcolor */

13
src/components/organisms/Header/organisms/User/User.tsx
View File

@@ -6,6 +6,7 @@ import { useSelector } from 'react-redux'
import type { RootState } from 'store/store'
import { useAuth } from 'hooks/useAuth'
import { logout } from 'api/auth'
import { BASE_HIDE_INSIDE } from 'constants/customizationApiGroupAndVersion'
import { Styled } from './styled'
export const User: FC = () => {
@@ -23,10 +24,14 @@ export const User: FC = () => {
// key: '1',
// label: <ThemeSelector />,
// },
{
key: '2',
label: <div onClick={() => navigate(`${baseprefix}/inside/clusters`)}>Inside</div>,
},
...(BASE_HIDE_INSIDE === 'true'
? []
: [
{
key: '2',
label: <div onClick={() => navigate(`${baseprefix}/inside/clusters`)}>Inside</div>,
},
]),
{
key: '3',
label: (

4
src/components/organisms/ListInsideClusterAndNs/ListInsideClusterAndNs.tsx
View File

@@ -37,7 +37,7 @@ export const ListInsideClusterAndNs: FC = () => {
clusterName: selectedCluster || '',
typeName: 'namespaces',
limit: null,
isEnabled: selectedCluster !== undefined && !isCustomNamespaceResource,
isEnabled: Boolean(selectedCluster !== undefined && !isCustomNamespaceResource),
})
const namespacesDataCustom = useApiResources({
@@ -46,7 +46,7 @@ export const ListInsideClusterAndNs: FC = () => {
apiVersion: CUSTOM_NAMESPACE_API_RESOURCE_API_VERSION,
typeName: CUSTOM_NAMESPACE_API_RESOURCE_RESOURCE_NAME,
limit: null,
isEnabled: selectedCluster !== undefined && isCustomNamespaceResource,
isEnabled: Boolean(selectedCluster !== undefined && isCustomNamespaceResource),
})
return (

1
src/components/organisms/Sidebar/styled.ts
View File

@@ -11,6 +11,7 @@ const BackgroundContainer = styled.div<TBackgroundContainerProps>`
border-top-right-radius: ${({ $borderRadius }) => $borderRadius}px;
border: 1px ${({ $borderColor }) => $borderColor} solid;
border-left: 0;
box-sizing: border-box;
width: 250px;
height: calc(100vh - ${HEAD_FIRST_ROW}px);
`

4
src/constants/customizationApiGroupAndVersion.ts
View File

@@ -38,6 +38,10 @@ export const BASE_USE_NAMESPACE_NAV = import.meta.env.DEV
? window._env_.USE_NAMESPACE_NAV || import.meta.env.VITE_USE_NAMESPACE_NAV
: window._env_.USE_NAMESPACE_NAV
export const BASE_HIDE_INSIDE = import.meta.env.DEV
? window._env_.HIDE_INSIDE || import.meta.env.VITE_HIDE_INSIDE
: window._env_.HIDE_INSIDE
export const BASE_NAVIGATE_FROM_CLUSTERLIST = import.meta.env.DEV
? window._env_.NAVIGATE_FROM_CLUSTERLIST || import.meta.env.VITE_NAVIGATE_FROM_CLUSTERLIST
: window._env_.NAVIGATE_FROM_CLUSTERLIST

36
src/hooks/useNavSelectorInside.ts
View File

@@ -1,6 +1,11 @@
import { TClusterList, TSingleResource, useBuiltinResources } from '@prorobotech/openapi-k8s-toolkit'
import { TClusterList, TSingleResource, useBuiltinResources, useApiResources } from '@prorobotech/openapi-k8s-toolkit'
import { useSelector } from 'react-redux'
import { RootState } from 'store/store'
import {
CUSTOM_NAMESPACE_API_RESOURCE_API_GROUP,
CUSTOM_NAMESPACE_API_RESOURCE_API_VERSION,
CUSTOM_NAMESPACE_API_RESOURCE_RESOURCE_NAME,
} from 'constants/customizationApiGroupAndVersion'
const mappedClusterToOptionInSidebar = ({ name }: TClusterList[number]): { value: string; label: string } => ({
value: name,
@@ -15,15 +20,40 @@ const mappedNamespaceToOptionInSidebar = ({ metadata }: TSingleResource): { valu
export const useNavSelectorInside = (clusterName?: string) => {
const clusterList = useSelector((state: RootState) => state.clusterList.clusterList)
const isCustomNamespaceResource =
CUSTOM_NAMESPACE_API_RESOURCE_API_GROUP &&
typeof CUSTOM_NAMESPACE_API_RESOURCE_API_GROUP === 'string' &&
CUSTOM_NAMESPACE_API_RESOURCE_API_GROUP.length > 0 &&
CUSTOM_NAMESPACE_API_RESOURCE_API_VERSION &&
typeof CUSTOM_NAMESPACE_API_RESOURCE_API_VERSION === 'string' &&
CUSTOM_NAMESPACE_API_RESOURCE_API_VERSION.length > 0 &&
CUSTOM_NAMESPACE_API_RESOURCE_RESOURCE_NAME &&
typeof CUSTOM_NAMESPACE_API_RESOURCE_RESOURCE_NAME === 'string' &&
CUSTOM_NAMESPACE_API_RESOURCE_RESOURCE_NAME.length > 0
const { data: namespaces } = useBuiltinResources({
clusterName: clusterName || '',
typeName: 'namespaces',
limit: null,
isEnabled: Boolean(clusterName),
isEnabled: Boolean(clusterName !== undefined && !isCustomNamespaceResource),
})
const { data: namespacesCustom } = useApiResources({
clusterName: clusterName || '',
apiGroup: CUSTOM_NAMESPACE_API_RESOURCE_API_GROUP,
apiVersion: CUSTOM_NAMESPACE_API_RESOURCE_API_VERSION,
typeName: CUSTOM_NAMESPACE_API_RESOURCE_RESOURCE_NAME,
limit: null,
isEnabled: Boolean(clusterName !== undefined && isCustomNamespaceResource),
})
const clustersInSidebar = clusterList ? clusterList.map(mappedClusterToOptionInSidebar) : []
const namespacesInSidebar = clusterName && namespaces ? namespaces.items.map(mappedNamespaceToOptionInSidebar) : []
const namespacesInSidebarCustom =
clusterName && namespacesCustom ? namespacesCustom.items.map(mappedNamespaceToOptionInSidebar) : []
return { clustersInSidebar, namespacesInSidebar }
return {
clustersInSidebar,
namespacesInSidebar: isCustomNamespaceResource ? namespacesInSidebarCustom : namespacesInSidebar,
}
}