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

new naviation

Browse Source
This commit is contained in:
typescreep
2025-08-29 18:12:52 +03:00
parent 33c9d6dcb8
commit d25b55d1b7
17 changed files with 86 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/molecules/ManageableSidebar/ManageableSidebar.tsx
View File

@@ -4,7 +4,8 @@ import { useLocation, useParams } from 'react-router-dom'
import { ManageableSidebarWithDataProvider } from '@prorobotech/openapi-k8s-toolkit'
import { useSelector } from 'react-redux'
import type { RootState } from 'store/store'
import { HEAD_FIRST_ROW, SIDEBAR_CLUSTER_HEIGHT } from 'constants/blocksSizes'
// import { HEAD_FIRST_ROW, SIDEBAR_CLUSTER_HEIGHT } from 'constants/blocksSizes'
import { HEAD_FIRST_ROW } from 'constants/blocksSizes'
import { BASE_API_GROUP, BASE_API_VERSION } from 'constants/customizationApiGroupAndVersion'
import { Styled } from './styled'
@@ -33,7 +34,8 @@ export const ManageableSidebar: FC<TManageableSidebarProps> = ({
const [height, setHeight] = useState(0)
useEffect(() => {
const height = window.innerHeight - HEAD_FIRST_ROW - SIDEBAR_CLUSTER_HEIGHT - 2
// const height = window.innerHeight - HEAD_FIRST_ROW - SIDEBAR_CLUSTER_HEIGHT - 2
const height = window.innerHeight - HEAD_FIRST_ROW - 2
setHeight(height)
const handleResize = () => {

29
src/components/organisms/HeaderSecond/HeaderSecond.tsx
View File

@@ -1,9 +1,9 @@
import React, { FC } from 'react'
import { theme } from 'antd'
import { Flex, theme } from 'antd'
import { useParams } from 'react-router-dom'
import { HEAD_SECOND_ROW } from 'constants/blocksSizes'
import { BASE_USE_NAMESPACE_NAV } from 'constants/customizationApiGroupAndVersion'
import { Selector, SelectorInside, SelectorNamespace } from './organisms'
import { SelectorCluster, SelectorClusterInside, Selector, SelectorInside, SelectorNamespace } from './organisms'
import { Styled } from './styled'
type THeaderProps = {
@@ -21,17 +21,20 @@ export const HeaderSecond: FC<THeaderProps> = ({ inside }) => {
return (
<Styled.BackgroundContainer $bgColor={token.colorFillSecondary} $borderRadius={token.borderRadius}>
<Styled.PaddingContainer $height={HEAD_SECOND_ROW}>
{inside && <SelectorInside clusterName={clusterName} namespace={namespace} />}
{!inside && BASE_USE_NAMESPACE_NAV !== 'true' && (
<Selector
clusterName={clusterName}
projectName={projectName || possibleProject}
instanceName={instanceName || possibleInstance}
/>
)}
{!inside && BASE_USE_NAMESPACE_NAV === 'true' && (
<SelectorNamespace clusterName={clusterName} namespace={namespace} />
)}
<Flex gap={18}>
{inside ? <SelectorClusterInside clusterName={clusterName} /> : <SelectorCluster clusterName={clusterName} />}
{inside && <SelectorInside clusterName={clusterName} namespace={namespace} />}
{!inside && BASE_USE_NAMESPACE_NAV !== 'true' && (
<Selector
clusterName={clusterName}
projectName={projectName || possibleProject}
instanceName={instanceName || possibleInstance}
/>
)}
{!inside && BASE_USE_NAMESPACE_NAV === 'true' && (
<SelectorNamespace clusterName={clusterName} namespace={namespace} />
)}
</Flex>
</Styled.PaddingContainer>
</Styled.BackgroundContainer>
)

18
src/components/organisms/HeaderSecond/organisms/Selector/Selector.tsx
View File

@@ -1,5 +1,5 @@
import React, { FC, useState } from 'react'
import { Flex } from 'antd'
import { Flex, Typography } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useDirectUnknownResource } from '@prorobotech/openapi-k8s-toolkit'
import { useNavSelector } from 'hooks/useNavSelector'
@@ -46,7 +46,7 @@ export const Selector: FC<TSelectorProps> = ({ clusterName, projectName, instanc
// }
const handleProjectChange = (value?: string) => {
if (value) {
if (value && value !== 'all') {
setSelectedProjectName(value)
const changeUrl =
navigationData?.spec.projects.change
@@ -62,7 +62,7 @@ export const Selector: FC<TSelectorProps> = ({ clusterName, projectName, instanc
}
const handleInstanceChange = (value?: string) => {
if (value) {
if (value && value !== 'all') {
setSelectedInstanceName(value)
const changeUrl =
navigationData?.spec.instances.change
@@ -86,24 +86,26 @@ export const Selector: FC<TSelectorProps> = ({ clusterName, projectName, instanc
}, [projectName, instanceName, clusterName])
return (
<Flex gap={18} justify="start">
<Flex gap={18} justify="start" align="center">
{/* <EntrySelect
placeholder="Cluster"
options={clustersInSidebar}
value={selectedClusterName}
onChange={handleClusterChange}
/> */}
<Typography.Text>Project: </Typography.Text>
<EntrySelect
placeholder="Project"
options={projectsInSidebar}
value={selectedProjectName}
options={[{ value: 'all', label: 'All Namespaces' }, ...projectsInSidebar]}
value={selectedProjectName || 'all'}
onChange={handleProjectChange}
disabled={selectedClusterName === undefined || projectsInSidebar.length === 0}
/>
<Typography.Text>Instance: </Typography.Text>
<EntrySelect
placeholder="Instance"
options={instancesInSidebar}
value={selectedInstanceName}
options={[{ value: 'all', label: 'All Namespaces' }, ...instancesInSidebar]}
value={selectedInstanceName || 'all'}
onChange={handleInstanceChange}
disabled={
selectedClusterName === undefined ||

22
src/components/organisms/Sidebar/organisms/Selector/Selector.tsx → src/components/organisms/HeaderSecond/organisms/SelectorCluster/SelectorCluster.tsx
View File

@@ -1,4 +1,5 @@
import React, { FC, useState } from 'react'
import { Flex, Typography } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { RootState } from 'store/store'
@@ -6,11 +7,11 @@ import { useNavSelectorClusters } from 'hooks/useNavSelectorClusters'
import { useMountEffect } from 'hooks/useMountEffect'
import { EntrySelect } from 'components/atoms'
type TSelectorProps = {
type TSelectorClusterProps = {
clusterName?: string
}
export const Selector: FC<TSelectorProps> = ({ clusterName }) => {
export const SelectorCluster: FC<TSelectorClusterProps> = ({ clusterName }) => {
const navigate = useNavigate()
const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
@@ -32,12 +33,15 @@ export const Selector: FC<TSelectorProps> = ({ clusterName }) => {
}, [clusterName])
return (
<EntrySelect
placeholder="Cluster"
options={clustersInSidebar}
value={selectedClusterName}
onChange={handleClusterChange}
fullwidth
/>
<Flex gap={18} justify="start" align="center">
<Typography.Text>Cluster: </Typography.Text>
<EntrySelect
placeholder="Cluster"
options={clustersInSidebar}
value={selectedClusterName}
onChange={handleClusterChange}
// fullwidth
/>
</Flex>
)
}

1
src/components/organisms/HeaderSecond/organisms/SelectorCluster/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './SelectorCluster'

22
src/components/organisms/Sidebar/organisms/SelectorInside/SelectorInside.tsx → src/components/organisms/HeaderSecond/organisms/SelectorClusterInside/SelectorClusterInside.tsx
View File

@@ -1,4 +1,5 @@
import React, { FC, useState } from 'react'
import { Flex, Typography } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { RootState } from 'store/store'
@@ -6,11 +7,11 @@ import { useNavSelectorInside } from 'hooks/useNavSelectorInside'
import { useMountEffect } from 'hooks/useMountEffect'
import { EntrySelect } from 'components/atoms'
type TSelectorInsideProps = {
type TSelectorClusterInsideProps = {
clusterName?: string
}
export const SelectorInside: FC<TSelectorInsideProps> = ({ clusterName }) => {
export const SelectorClusterInside: FC<TSelectorClusterInsideProps> = ({ clusterName }) => {
const navigate = useNavigate()
const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix)
@@ -32,12 +33,15 @@ export const SelectorInside: FC<TSelectorInsideProps> = ({ clusterName }) => {
}, [clusterName])
return (
<EntrySelect
placeholder="Cluster"
options={clustersInSidebar}
value={selectedClusterName}
onChange={handleClusterChange}
fullwidth
/>
<Flex gap={18} justify="start" align="center">
<Typography.Text>Cluster: </Typography.Text>
<EntrySelect
placeholder="Cluster"
options={clustersInSidebar}
value={selectedClusterName}
onChange={handleClusterChange}
// fullwidth
/>
</Flex>
)
}

1
src/components/organisms/HeaderSecond/organisms/SelectorClusterInside/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './SelectorClusterInside'

13
src/components/organisms/HeaderSecond/organisms/SelectorInside/SelectorInside.tsx
View File

@@ -1,5 +1,5 @@
import React, { FC, useState } from 'react'
import { Flex } from 'antd'
import { Flex, Typography } from 'antd'
import { useNavigate, useParams } from 'react-router-dom'
import { useNavSelectorInside } from 'hooks/useNavSelectorInside'
import { useMountEffect } from 'hooks/useMountEffect'
@@ -26,12 +26,12 @@ export const SelectorInside: FC<TSelectorInsideProps> = ({ clusterName, namespac
// }
const handleNamepsaceChange = (value?: string) => {
if (value && params.namespace) {
if (value && value !== 'all' && params.namespace) {
setSelectedNamespace(value)
const pathnames = window.location.pathname.split('/')
const newPathNames = [...pathnames.slice(0, 4), value, ...pathnames.slice(5)]
navigate(newPathNames.join('/'))
} else if (value && !params.namespace) {
} else if (value && value !== 'all' && !params.namespace) {
setSelectedNamespace(value)
const pathnames = window.location.pathname.split('/')
const newPathNames = [...pathnames.slice(0, 4), value, ...pathnames.slice(4)]
@@ -49,17 +49,18 @@ export const SelectorInside: FC<TSelectorInsideProps> = ({ clusterName, namespac
}, [namespace, clusterName])
return (
<Flex gap={18} justify="start">
<Flex gap={18} justify="start" align="center">
{/* <EntrySelect
placeholder="Cluster"
options={clustersInSidebar}
value={selectedClusterName}
onChange={handleClusterChange}
/> */}
<Typography.Text>Namespace: </Typography.Text>
<EntrySelect
placeholder="Namespace"
options={namespacesInSidebar}
value={selectedNamespace}
options={[{ value: 'all', label: 'All Namespaces' }, ...namespacesInSidebar]}
value={selectedNamespace || 'all'}
onChange={handleNamepsaceChange}
disabled={selectedClusterName === undefined || namespacesInSidebar.length === 0}
/>

11
src/components/organisms/HeaderSecond/organisms/SelectorNamespace/SelectorNamespace.tsx
View File

@@ -1,5 +1,5 @@
import React, { FC, useState } from 'react'
import { Flex } from 'antd'
import { Flex, Typography } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useDirectUnknownResource } from '@prorobotech/openapi-k8s-toolkit'
import { useNavSelectorInside } from 'hooks/useNavSelectorInside'
@@ -35,7 +35,7 @@ export const SelectorNamespace: FC<TSelectorNamespaceProps> = ({ clusterName, na
})
const handleNamepsaceChange = (value?: string) => {
if (value) {
if (value && value !== 'all') {
setSelectedNamespace(value)
const changeUrl =
navigationData?.spec.namespaces.change
@@ -56,11 +56,12 @@ export const SelectorNamespace: FC<TSelectorNamespaceProps> = ({ clusterName, na
}, [namespace, clusterName])
return (
<Flex gap={18} justify="start">
<Flex gap={18} justify="start" align="center">
<Typography.Text>Namespace: </Typography.Text>
<EntrySelect
placeholder="Namespace"
options={namespacesInSidebar}
value={selectedNamespace}
options={[{ value: 'all', label: 'All Namespaces' }, ...namespacesInSidebar]}
value={selectedNamespace || 'all'}
onChange={handleNamepsaceChange}
disabled={selectedClusterName === undefined || namespacesInSidebar.length === 0}
/>

2
src/components/organisms/HeaderSecond/organisms/index.ts
View File

@@ -1,3 +1,5 @@
export * from './Selector'
export * from './SelectorInside'
export * from './SelectorNamespace'
export * from './SelectorCluster'
export * from './SelectorClusterInside'

9
src/components/organisms/Sidebar/Sidebar.tsx
View File

@@ -1,23 +1,16 @@
import React, { FC, ReactNode } from 'react'
import { theme } from 'antd'
import { useParams } from 'react-router-dom'
import { Selector, SelectorInside } from './organisms'
import { Styled } from './styled'
type TSidebarProps = {
inside?: boolean
sidebar?: ReactNode
}
export const Sidebar: FC<TSidebarProps> = ({ inside, sidebar }) => {
const { clusterName } = useParams()
export const Sidebar: FC<TSidebarProps> = ({ sidebar }) => {
const { token } = theme.useToken()
return (
<Styled.BackgroundContainer $borderRadius={token.borderRadius} $borderColor={token.colorBorder}>
<Styled.ClusterSelectorContainer>
{inside ? <SelectorInside clusterName={clusterName} /> : <Selector clusterName={clusterName} />}
</Styled.ClusterSelectorContainer>
{sidebar}
</Styled.BackgroundContainer>
)

1
src/components/organisms/Sidebar/organisms/Selector/index.ts
View File

@@ -1 +0,0 @@
export * from './Selector'

1
src/components/organisms/Sidebar/organisms/SelectorInside/index.ts
View File

@@ -1 +0,0 @@
export * from './SelectorInside'

2
src/components/organisms/Sidebar/organisms/index.ts
View File

@@ -1,2 +0,0 @@
export * from './Selector'
export * from './SelectorInside'

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

@@ -1,5 +1,6 @@
import styled from 'styled-components'
import { HEAD_FIRST_ROW, SIDEBAR_CLUSTER_HEIGHT } from 'constants/blocksSizes'
// import { HEAD_FIRST_ROW, SIDEBAR_CLUSTER_HEIGHT } from 'constants/blocksSizes'
import { HEAD_FIRST_ROW } from 'constants/blocksSizes'
type TBackgroundContainerProps = {
$borderRadius: number
@@ -14,15 +15,15 @@ const BackgroundContainer = styled.div<TBackgroundContainerProps>`
height: calc(100vh - ${HEAD_FIRST_ROW}px);
`
const ClusterSelectorContainer = styled.div`
height: ${SIDEBAR_CLUSTER_HEIGHT}px;
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
`
// const ClusterSelectorContainer = styled.div`
// height: ${SIDEBAR_CLUSTER_HEIGHT}px;
// display: flex;
// justify-content: center;
// align-items: center;
// padding: 12px;
// `
export const Styled = {
BackgroundContainer,
ClusterSelectorContainer,
// ClusterSelectorContainer,
}

2
src/constants/blocksSizes.ts
View File

@@ -5,7 +5,7 @@ export const FOOTER_HEIGHT = 38
export const MAIN_CONTENT_HORIZONTAL_PADDING = 24
export const BACKLINK_HEIGHT = 26
/* sidebar */
export const SIDEBAR_CLUSTER_HEIGHT = 56
// export const SIDEBAR_CLUSTER_HEIGHT = 56
/* computed only */
export const BREADCRUMBS_HEIGHT = 26
export const CONTENT_CARD_PADDING = 25

2
src/templates/BaseTemplate/BaseTemplate.tsx
View File

@@ -98,7 +98,7 @@ export const BaseTemplate: FC<TBaseTemplateProps> = ({ children, withNoCluster,
<Header />
<RowFlexGrow wrap={false}>
<Col span="250px">
<Sidebar inside={inside} sidebar={sidebar} />
<Sidebar sidebar={sidebar} />
</Col>
<FlexCol flex="auto">
<DefaultLayout.ContentPadding $isFederation={isFederation}>