import { useCurrentStateAndParams } from '@uirouter/react'; import { useEffect, useState } from 'react'; import { PlatformType, EnvironmentId, Environment, } from '@/portainer/environments/types'; import { getPlatformType } from '@/portainer/environments/utils'; import { useEnvironment } from '@/portainer/environments/queries/useEnvironment'; import { AzureSidebar } from './AzureSidebar'; import { DockerSidebar } from './DockerSidebar'; import { KubernetesSidebar } from './KubernetesSidebar'; import { SidebarSection } from './SidebarSection'; import styles from './EnvironmentSidebar.module.css'; export function EnvironmentSidebar() { const currentEnvironmentQuery = useCurrentEnvironment(); const environment = currentEnvironmentQuery.data; if (!environment) { return null; } const platform = getPlatformType(environment.Type); const sidebar = getSidebar(environment); return ( {environment.Name} } label={PlatformType[platform]} > {sidebar} ); function getSidebar(environment: Environment) { switch (platform) { case PlatformType.Azure: return ; case PlatformType.Docker: return ( ); case PlatformType.Kubernetes: return ; default: return null; } } } function useCurrentEnvironment() { const { params } = useCurrentStateAndParams(); const [environmentId, setEnvironmentId] = useState(); useEffect(() => { const environmentId = parseInt(params.endpointId, 10); if (params.endpointId && !Number.isNaN(environmentId)) { setEnvironmentId(environmentId); } }, [params.endpointId]); return useEnvironment(environmentId); }