From 82742ea70721418aeeb869a73f52a91f62aad87d Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Mon, 16 Sep 2024 11:37:22 -0400 Subject: [PATCH 1/3] [WIP] RHOAI.next IA Study --- frontend/src/app/App.tsx | 50 +-- frontend/src/app/AppRoutes.tsx | 10 +- frontend/src/app/NavSidebar.tsx | 79 +++- .../src/concepts/projects/ProjectsContext.tsx | 21 +- .../projects/useSyncPreferredProject.tsx | 2 +- frontend/src/pages/ApplicationsPage.tsx | 2 +- frontend/src/pages/ComingSoonPage.tsx | 40 ++ .../GlobalDistributedWorkloadsRoutes.tsx | 13 +- .../global/GlobalDistributedWorkloads.tsx | 48 +-- .../global/GlobalDistributedWorkloadsTabs.tsx | 3 +- .../screens/projects/ModelServingPlatform.tsx | 12 +- .../src/pages/projects/ProjectViewRoutes.tsx | 44 +++ .../screens/detail/DetailsSection.tsx | 84 ++-- .../screens/detail/ProjectDetails.tsx | 104 +---- .../detail/connections/ConnectionsList.tsx | 1 + .../data-connections/DataConnectionsList.tsx | 1 + .../screens/detail/notebooks/NotebookList.tsx | 1 + .../detail/pipelines/PipelinesSection.tsx | 1 + .../screens/detail/storage/StorageList.tsx | 1 + frontend/src/utilities/NavData.tsx | 361 ++++++++++++++---- 20 files changed, 559 insertions(+), 319 deletions(-) create mode 100644 frontend/src/pages/ComingSoonPage.tsx diff --git a/frontend/src/app/App.tsx b/frontend/src/app/App.tsx index 9bb6dcc9af..d13dc0cc1f 100644 --- a/frontend/src/app/App.tsx +++ b/frontend/src/app/App.tsx @@ -107,36 +107,36 @@ const App: React.FC = () => { ) : ( - setNotificationsOpen(!notificationsOpen)} /> - } - sidebar={isAllowed ? : undefined} - notificationDrawer={ - setNotificationsOpen(false)} /> - } - isNotificationDrawerExpanded={notificationsOpen} - mainContainerId={DASHBOARD_MAIN_CONTAINER_ID} - data-testid={DASHBOARD_MAIN_CONTAINER_ID} - > - - - + + setNotificationsOpen(!notificationsOpen)} /> + } + sidebar={isAllowed ? : undefined} + notificationDrawer={ + setNotificationsOpen(false)} /> + } + isNotificationDrawerExpanded={notificationsOpen} + mainContainerId={DASHBOARD_MAIN_CONTAINER_ID} + data-testid={DASHBOARD_MAIN_CONTAINER_ID} + > + + - - - - - + + + + + )} diff --git a/frontend/src/app/AppRoutes.tsx b/frontend/src/app/AppRoutes.tsx index 037431c5a3..fff372e391 100644 --- a/frontend/src/app/AppRoutes.tsx +++ b/frontend/src/app/AppRoutes.tsx @@ -15,6 +15,7 @@ import { SupportedArea } from '~/concepts/areas'; import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable'; import ModelRegistrySettingsRoutes from '~/pages/modelRegistrySettings/ModelRegistrySettingsRoutes'; import ConnectionTypeRoutes from '~/pages/connectionTypes/ConnectionTypeRoutes'; +import ComingSoonPage from '~/pages/ComingSoonPage'; const HomePage = React.lazy(() => import('../pages/home/Home')); @@ -43,10 +44,6 @@ const GlobalPipelineExecutionsRoutes = React.lazy( const GlobalArtifactsRoutes = React.lazy(() => import('../pages/pipelines/GlobalArtifactsRoutes')); -const GlobalDistributedWorkloadsRoutes = React.lazy( - () => import('../pages/distributedWorkloads/GlobalDistributedWorkloadsRoutes'), -); - const ClusterSettingsPage = React.lazy(() => import('../pages/clusterSettings/ClusterSettings')); const CustomServingRuntimeRoutes = React.lazy( () => import('../pages/modelServing/customServingRuntimes/CustomServingRuntimeRoutes'), @@ -94,7 +91,10 @@ const AppRoutes: React.FC = () => { ) : ( } /> )} + } /> + } /> } /> + } /> } /> } /> @@ -117,8 +117,6 @@ const AppRoutes: React.FC = () => { } /> } /> - } /> - } /> {isAdmin && ( diff --git a/frontend/src/app/NavSidebar.tsx b/frontend/src/app/NavSidebar.tsx index 7c33a84cc2..2147984edb 100644 --- a/frontend/src/app/NavSidebar.tsx +++ b/frontend/src/app/NavSidebar.tsx @@ -4,29 +4,58 @@ import { Nav, NavExpandable, NavItem, + NavGroup as PfNavGroup, NavList, PageSidebar, PageSidebarBody, } from '@patternfly/react-core'; -import { isNavDataGroup, NavDataGroup, NavDataHref, useBuildNavData } from '~/utilities/NavData'; +import { + isNavDataGroup, + isNavDataSection, + NavDataGroup, + NavDataHref, + NavDataSection, + useBuildNavData, +} from '~/utilities/NavData'; +import { ProjectsContext } from '~/concepts/projects/ProjectsContext'; -const checkLinkActiveStatus = (pathname: string, href: string) => - href.split('/')[1] === pathname.split('/')[1]; +const checkLinkActiveStatus = (pathname: string, href: string, namespace?: string) => { + if (!namespace) { + return href.split('/')[1] === pathname.split('/')[1]; + } -const NavHref: React.FC<{ item: NavDataHref; pathname: string }> = ({ item, pathname }) => ( - - {item.label} - -); + const splits = href.split('/'); + const itemIdentifier = splits[splits.length - 1]; + + let pathSplits = pathname.split('/'); + if (pathSplits[pathSplits.length - 2] === 'projects') { + pathSplits = pathSplits.slice(0, -1); + } + const pathIdentifier = pathSplits[pathSplits.length - 1]; + + return itemIdentifier ? (pathIdentifier || '/').includes(itemIdentifier) : !pathIdentifier; +}; + +const NavHref: React.FC<{ item: NavDataHref; pathname: string }> = ({ item, pathname }) => { + const { preferredProject } = React.useContext(ProjectsContext); + return ( + + {item.label} + + ); +}; const NavGroup: React.FC<{ item: NavDataGroup; pathname: string }> = ({ item, pathname }) => { const { group, children } = item; - const isActive = !!children.find((c) => checkLinkActiveStatus(pathname, c.href)); + const { preferredProject } = React.useContext(ProjectsContext); + const isActive = !!children.find((c) => + checkLinkActiveStatus(pathname, c.href, preferredProject?.metadata.name), + ); const [expanded, setExpanded] = React.useState(isActive); // Whenever the group becomes active, it should also be expanded @@ -55,6 +84,24 @@ const NavGroup: React.FC<{ item: NavDataGroup; pathname: string }> = ({ item, pa ); }; +const NavSection: React.FC<{ item: NavDataSection; pathname: string }> = ({ item, pathname }) => ( + + {item.children.map((childItem) => + isNavDataGroup(childItem) ? ( + + ) : ( + + ), + )} + +); + const NavSidebar: React.FC = () => { const routerLocation = useLocation(); const userNavData = useBuildNavData(); @@ -65,7 +112,9 @@ const NavSidebar: React.FC = () => {