import { useCurrentStateAndParams, useRouter } from '@uirouter/react'; import { useEffect } from 'react'; import { X, Slash } from 'react-feather'; import clsx from 'clsx'; import { PlatformType, EnvironmentId, Environment, } from '@/portainer/environments/types'; import { getPlatformType } from '@/portainer/environments/utils'; import { useEnvironment } from '@/portainer/environments/queries/useEnvironment'; import { useLocalStorage } from '@/portainer/hooks/useLocalStorage'; import { getPlatformIcon } from '../portainer/environments/utils/get-platform-icon'; import { AzureSidebar } from './AzureSidebar'; import { DockerSidebar } from './DockerSidebar'; import { KubernetesSidebar } from './KubernetesSidebar'; import { SidebarSection, SidebarSectionTitle } from './SidebarSection'; import { useSidebarState } from './useSidebarState'; export function EnvironmentSidebar() { const { query: currentEnvironmentQuery, clearEnvironment } = useCurrentEnvironment(); const environment = currentEnvironmentQuery.data; const { isOpen } = useSidebarState(); if (!isOpen && !environment) { return null; } return (
{environment ? ( ) : (
Environment: None selected
)}
); } interface ContentProps { environment: Environment; onClear: () => void; } function Content({ environment, onClear }: ContentProps) { const platform = getPlatformType(environment.Type); const Sidebar = getSidebar(platform); return ( } aria-label={environment.Name} showTitleWhenOpen >
); function getSidebar(platform: PlatformType) { const sidebar: { [key in PlatformType]: React.ComponentType<{ environmentId: EnvironmentId; environment: Environment; }>; } = { [PlatformType.Azure]: AzureSidebar, [PlatformType.Docker]: DockerSidebar, [PlatformType.Kubernetes]: KubernetesSidebar, }; return sidebar[platform]; } } function useCurrentEnvironment() { const { params } = useCurrentStateAndParams(); const router = useRouter(); const [environmentId, setEnvironmentId] = useLocalStorage< EnvironmentId | undefined >('environmentId', undefined, sessionStorage); useEffect(() => { const environmentId = parseInt(params.endpointId, 10); if (params.endpointId && !Number.isNaN(environmentId)) { setEnvironmentId(environmentId); } }, [params.endpointId, setEnvironmentId]); return { query: useEnvironment(environmentId), clearEnvironment }; function clearEnvironment() { if (params.endpointId) { router.stateService.go('portainer.home'); } setEnvironmentId(undefined); } } interface TitleProps { environment: Environment; onClear(): void; } function Title({ environment, onClear }: TitleProps) { const { isOpen } = useSidebarState(); const EnvironmentIcon = getPlatformIcon(environment.Type); if (!isOpen) { return (
); } return (
{environment.Name}
); }