3083e81452
- Updated DeploymentExecution and related types to use targetId instead of virtualMachineId. - Introduced new types for DeploymentRule, DeploymentRuleStep, and related entities. - Added DeploymentRulesPage for managing deployment rules with CRUD operations. - Created TargetDetailsPage and TargetsPage for managing targets with linking and unlinking functionality. - Enhanced UI components with Fluent UI for better user experience. - Implemented data fetching and state management using React Query.
91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import {
|
|
Button,
|
|
Field,
|
|
Input,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHeader,
|
|
TableHeaderCell,
|
|
TableRow,
|
|
Textarea,
|
|
} from "@fluentui/react-components";
|
|
import { useState } from "react";
|
|
import { portalApi } from "../api/portalApi";
|
|
import { DataState } from "../components/DataState";
|
|
import { FormActions, FormGrid, FormSection, FormWide } from "../components/FormSection";
|
|
import { PageHeader } from "../components/PageHeader";
|
|
|
|
export function RunbooksPage() {
|
|
const queryClient = useQueryClient();
|
|
const [name, setName] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const { data, error, isLoading } = useQuery({
|
|
queryKey: ["runbooks"],
|
|
queryFn: ({ signal }) => portalApi.getRunbooks(signal),
|
|
});
|
|
const addRunbook = useMutation({
|
|
mutationFn: portalApi.addRunbook,
|
|
onSuccess: async () => {
|
|
setName("");
|
|
setDescription("");
|
|
await queryClient.invalidateQueries({ queryKey: ["runbooks"] });
|
|
},
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<PageHeader title="Runbooks" description="Automatisierungen fuer Portalereignisse." />
|
|
<FormSection
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
addRunbook.mutate({ description, name });
|
|
}}
|
|
>
|
|
<FormGrid>
|
|
<Field label="Name" required>
|
|
<Input value={name} onChange={(_, data) => setName(data.value)} />
|
|
</Field>
|
|
<FormWide>
|
|
<Field label="Description" required validationMessage={addRunbook.error?.message}>
|
|
<Textarea value={description} onChange={(_, data) => setDescription(data.value)} />
|
|
</Field>
|
|
</FormWide>
|
|
</FormGrid>
|
|
<FormActions>
|
|
<Button
|
|
appearance="primary"
|
|
disabled={!name || !description || addRunbook.isPending}
|
|
type="submit"
|
|
>
|
|
Add runbook
|
|
</Button>
|
|
</FormActions>
|
|
</FormSection>
|
|
<DataState isLoading={isLoading} error={error} />
|
|
{data && (
|
|
<Table aria-label="Runbooks">
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHeaderCell>Name</TableHeaderCell>
|
|
<TableHeaderCell>Description</TableHeaderCell>
|
|
<TableHeaderCell>Id</TableHeaderCell>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{data.map((runbook) => (
|
|
<TableRow key={runbook.id}>
|
|
<TableCell>{runbook.name}</TableCell>
|
|
<TableCell>{runbook.decription ?? "-"}</TableCell>
|
|
<TableCell>{runbook.id}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|