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);
}