mirror of
https://github.com/shankar0123/certctl.git
synced 2026-06-14 05:58:59 +00:00
feat(gui): add create modals for issuers, policies, profiles, owners, teams, agent groups
Six pages were read-only viewers despite the API client having all create functions wired up. Users deploying certctl had no way to create CAs or other objects from the GUI — reported in GitHub issue. - IssuersPage: 2-step create modal (type selection → config) for Local CA, ACME, step-ca, OpenSSL/Custom issuer types - PoliciesPage: create modal with type, severity, JSON config, enabled - ProfilesPage: create modal with name, description, max TTL, short-lived - OwnersPage: create modal with name, email, team dropdown - TeamsPage: create modal with name, description - AgentGroupsPage: create modal with match criteria fields - Layout.tsx: version v2.0.5 → v2.0.7 - cmd/server/main.go: version 0.1.0 → 2.0.7 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shankar0123
@@ -1,5 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { getAgentGroups, deleteAgentGroup } from '../api/client';
|
||||
import { getAgentGroups, deleteAgentGroup, createAgentGroup } from '../api/client';
|
||||
import PageHeader from '../components/PageHeader';
|
||||
import DataTable from '../components/DataTable';
|
||||
import type { Column } from '../components/DataTable';
|
||||
@@ -8,8 +9,148 @@ import ErrorState from '../components/ErrorState';
|
||||
import { formatDateTime } from '../api/utils';
|
||||
import type { AgentGroup } from '../api/types';
|
||||
|
||||
interface CreateAgentGroupModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess: () => void;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
function CreateAgentGroupModal({ isOpen, onClose, onSuccess, isLoading, error }: CreateAgentGroupModalProps) {
|
||||
const [name, setName] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [matchOs, setMatchOs] = useState('');
|
||||
const [matchArch, setMatchArch] = useState('');
|
||||
const [matchIpCidr, setMatchIpCidr] = useState('');
|
||||
const [matchVersion, setMatchVersion] = useState('');
|
||||
const [enabled, setEnabled] = useState(true);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!name.trim()) return;
|
||||
try {
|
||||
await createAgentGroup({
|
||||
name: name.trim(),
|
||||
description: description.trim(),
|
||||
match_os: matchOs.trim() || undefined,
|
||||
match_architecture: matchArch.trim() || undefined,
|
||||
match_ip_cidr: matchIpCidr.trim() || undefined,
|
||||
match_version: matchVersion.trim() || undefined,
|
||||
enabled,
|
||||
});
|
||||
setName('');
|
||||
setDescription('');
|
||||
setMatchOs('');
|
||||
setMatchArch('');
|
||||
setMatchIpCidr('');
|
||||
setMatchVersion('');
|
||||
setEnabled(true);
|
||||
onSuccess();
|
||||
} catch (err) {
|
||||
console.error('Create agent group error:', err);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={onClose}>
|
||||
<div className="bg-surface border border-surface-border rounded p-5 w-full max-w-md shadow-xl" onClick={e => e.stopPropagation()}>
|
||||
<h2 className="text-lg font-semibold text-ink mb-4">Create Agent Group</h2>
|
||||
{error && <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">{error}</div>}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Name *</label>
|
||||
<input
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400"
|
||||
placeholder="e.g., Production Linux Servers"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Description</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400"
|
||||
placeholder="Optional description"
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Match OS</label>
|
||||
<input
|
||||
value={matchOs}
|
||||
onChange={e => setMatchOs(e.target.value)}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400"
|
||||
placeholder="linux"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Match Architecture</label>
|
||||
<input
|
||||
value={matchArch}
|
||||
onChange={e => setMatchArch(e.target.value)}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400"
|
||||
placeholder="amd64"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Match IP CIDR</label>
|
||||
<input
|
||||
value={matchIpCidr}
|
||||
onChange={e => setMatchIpCidr(e.target.value)}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400"
|
||||
placeholder="10.0.0.0/8"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Match Version</label>
|
||||
<input
|
||||
value={matchVersion}
|
||||
onChange={e => setMatchVersion(e.target.value)}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400"
|
||||
placeholder="2.0.*"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="enabled"
|
||||
checked={enabled}
|
||||
onChange={e => setEnabled(e.target.checked)}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<label htmlFor="enabled" className="text-sm text-ink">Enabled</label>
|
||||
</div>
|
||||
<div className="flex gap-2 pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="flex-1 btn btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isLoading ? 'Creating...' : 'Create Group'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 btn btn-ghost"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AgentGroupsPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
|
||||
const { data, isLoading, error, refetch } = useQuery({
|
||||
queryKey: ['agent-groups'],
|
||||
@@ -21,6 +162,14 @@ export default function AgentGroupsPage() {
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['agent-groups'] }),
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: createAgentGroup,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['agent-groups'] });
|
||||
setShowCreate(false);
|
||||
},
|
||||
});
|
||||
|
||||
const columns: Column<AgentGroup>[] = [
|
||||
{
|
||||
key: 'name',
|
||||
@@ -81,7 +230,15 @@ export default function AgentGroupsPage() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="Agent Groups" subtitle={data ? `${data.total} groups` : undefined} />
|
||||
<PageHeader
|
||||
title="Agent Groups"
|
||||
subtitle={data ? `${data.total} groups` : undefined}
|
||||
action={
|
||||
<button onClick={() => setShowCreate(true)} className="btn btn-primary">
|
||||
+ New Group
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{error ? (
|
||||
<ErrorState error={error as Error} onRetry={() => refetch()} />
|
||||
@@ -89,6 +246,13 @@ export default function AgentGroupsPage() {
|
||||
<DataTable columns={columns} data={data?.data || []} isLoading={isLoading} emptyMessage="No agent groups configured" />
|
||||
)}
|
||||
</div>
|
||||
<CreateAgentGroupModal
|
||||
isOpen={showCreate}
|
||||
onClose={() => setShowCreate(false)}
|
||||
onSuccess={() => {}}
|
||||
isLoading={createMutation.isPending}
|
||||
error={createMutation.error ? (createMutation.error as Error).message : null}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user