portainer/app/react/sidebar/KubernetesSidebar/KubectlShell/KubectlShellButton.tsx

51 lines
1.3 KiB
TypeScript

import clsx from 'clsx';
import { useState } from 'react';
import { createPortal } from 'react-dom';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { useAnalytics } from '@/angulartics.matomo/analytics-services';
import { Button } from '@@/buttons';
import { Icon } from '@@/Icon';
import { KubeCtlShell } from './KubectlShell';
import styles from './KubectlShellButton.module.css';
interface Props {
environmentId: EnvironmentId;
}
export function KubectlShellButton({ environmentId }: Props) {
const [open, setOpen] = useState(false);
const { trackEvent } = useAnalytics();
return (
<>
<Button
color="primary"
size="small"
disabled={open}
data-cy="k8sSidebar-shellButton"
onClick={() => handleOpen()}
className={clsx(styles.root, '!flex')}
>
<Icon icon="terminal" feather className="vertical-center" size="md" />{' '}
kubectl shell
</Button>
{open &&
createPortal(
<KubeCtlShell
environmentId={environmentId}
onClose={() => setOpen(false)}
/>,
document.body
)}
</>
);
function handleOpen() {
setOpen(true);
trackEvent('kubernetes-kubectl-shell', { category: 'kubernetes' });
}
}