portainer/app/react/edge/components/EdgeScriptForm/ScriptTabs.tsx

69 lines
1.6 KiB
TypeScript
Raw Normal View History

import { useEffect } from 'react';
import { Code } from '@/portainer/components/Code';
import { CopyButton } from '@/portainer/components/Button/CopyButton';
import { NavTabs } from '@/portainer/components/NavTabs/NavTabs';
import { useAgentDetails } from '@/portainer/environments/queries/useAgentDetails';
import { ScriptFormValues, Platform } from './types';
import { CommandTab } from './scripts';
interface Props {
values: ScriptFormValues;
edgeKey: string;
edgeId?: string;
commands: CommandTab[];
platform?: Platform;
onPlatformChange?(platform: Platform): void;
}
export function ScriptTabs({
values,
edgeKey,
edgeId,
commands,
platform,
onPlatformChange = () => {},
}: Props) {
const agentDetails = useAgentDetails();
useEffect(() => {
if (commands.length > 0 && commands.every((p) => p.id !== platform)) {
onPlatformChange(commands[0].id);
}
}, [platform, onPlatformChange, commands]);
if (!agentDetails) {
return null;
}
const { agentSecret, agentVersion } = agentDetails;
const options = commands.map((c) => {
const cmd = c.command(agentVersion, edgeKey, values, edgeId, agentSecret);
return {
id: c.id,
label: c.label,
children: (
<>
<Code>{cmd}</Code>
<CopyButton copyText={cmd}>Copy</CopyButton>
</>
),
};
});
return (
<div className="row">
<div className="col-sm-12">
<NavTabs
selectedId={platform}
options={options}
onSelect={(id: Platform) => onPlatformChange(id)}
/>
</div>
</div>
);
}