attacker
30cc899268
- ansible-helpers.tsx (114): types, mapPlaybook, categories, samplePlaybook, getStatusBadge, formatDate - AnsibleFormDialog.tsx (111): 新建/编辑 Playbook 弹窗 - AnsibleDetailDialog.tsx (47): 查看 Playbook 内容弹窗 - AnsibleLogsDialog.tsx (38): 执行日志弹窗 - AnsibleManager.tsx (740->535): 主组件保留统计卡片+Tab布局+列表+表格+状态管理
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
// Ansible 查看 Playbook 内容弹窗 // Logan.Li
|
|
import { FileCode, Edit } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
|
|
} from '@/components/ui/dialog';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import type { Playbook } from './ansible-helpers';
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
playbook: Playbook | null;
|
|
onEdit: (pb: Playbook) => void;
|
|
}
|
|
|
|
const AnsibleDetailDialog: React.FC<Props> = ({ open, onOpenChange, playbook, onEdit }) => {
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-4xl max-h-[90vh]">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<FileCode className="w-5 h-5 text-blue-500" />
|
|
{playbook?.name}
|
|
</DialogTitle>
|
|
<DialogDescription>{playbook?.description}</DialogDescription>
|
|
</DialogHeader>
|
|
<ScrollArea className="h-[500px] w-full rounded-md border bg-black">
|
|
<pre className="p-4 font-mono text-sm text-green-400 whitespace-pre-wrap">
|
|
{playbook?.content || '（空）'}
|
|
</pre>
|
|
</ScrollArea>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => onOpenChange(false)}>关闭</Button>
|
|
{playbook && (
|
|
<Button onClick={() => onEdit(playbook)}>
|
|
<Edit className="w-4 h-4 mr-2" />
|
|
编辑
|
|
</Button>
|
|
)}
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default AnsibleDetailDialog;
|