root
1071 lines
37 KiB
React
1071 lines
37 KiB
React
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||
import axios from "axios";
|
||
import {
|
||
Card,
|
||
CardHeader,
|
||
CardBody,
|
||
Typography,
|
||
Avatar,
|
||
Chip,
|
||
Tooltip,
|
||
Progress,
|
||
Collapse,
|
||
Button,
|
||
ButtonGroup,
|
||
Select,
|
||
Option,
|
||
Input,
|
||
useSelect
|
||
} from "@material-tailwind/react";
|
||
|
||
const StickyOption = React.forwardRef(({ value, onValueSelect, onClick, onKeyDown, ...props }, ref) => {
|
||
const { setOpen } = useSelect();
|
||
|
||
const reopen = useCallback(() => {
|
||
const schedule = (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function")
|
||
? window.requestAnimationFrame
|
||
: (callback) => setTimeout(callback, 0);
|
||
|
||
schedule(() => {
|
||
setOpen(true);
|
||
});
|
||
}, [setOpen]);
|
||
|
||
const commitSelection = useCallback(() => {
|
||
if (typeof onValueSelect === "function") {
|
||
onValueSelect(value);
|
||
}
|
||
}, [onValueSelect, value]);
|
||
|
||
const handleClick = useCallback((event) => {
|
||
if (typeof onClick === "function") {
|
||
onClick(event);
|
||
}
|
||
|
||
commitSelection();
|
||
reopen();
|
||
}, [onClick, commitSelection, reopen]);
|
||
|
||
const handleKeyDown = useCallback((event) => {
|
||
if (typeof onKeyDown === "function") {
|
||
onKeyDown(event);
|
||
}
|
||
|
||
if (event.key === "Enter" || event.key === " ") {
|
||
commitSelection();
|
||
reopen();
|
||
}
|
||
}, [onKeyDown, commitSelection, reopen]);
|
||
|
||
return (
|
||
<Option
|
||
{...props}
|
||
value={value}
|
||
ref={ref}
|
||
onClick={handleClick}
|
||
onKeyDown={handleKeyDown}
|
||
/>
|
||
);
|
||
});
|
||
|
||
StickyOption.displayName = "StickyOption";
|
||
|
||
const STATUS_COLORS = {
|
||
success: "text-green-400",
|
||
warning: "text-yellow-400",
|
||
error: "text-red-400",
|
||
started: "text-blue-300"
|
||
};
|
||
|
||
const formatTimestamp = (value) => {
|
||
if (!value) return "-";
|
||
const date = new Date(value);
|
||
if (Number.isNaN(date.getTime())) return value;
|
||
return date.toLocaleString("de-DE", {
|
||
year: "numeric",
|
||
month: "2-digit",
|
||
day: "2-digit",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
second: "2-digit"
|
||
});
|
||
};
|
||
|
||
const normalizeDateParam = (value) => {
|
||
if (!value) return undefined;
|
||
return value.replace("T", " ");
|
||
};
|
||
|
||
const FILTER_STORAGE_KEY = "redeployLogFilters";
|
||
const ALL_OPTION_VALUE = "__all__";
|
||
const ALL_OPTION_LABEL = "- Alle -";
|
||
const PER_PAGE_DEFAULT = "50";
|
||
const PER_PAGE_OPTIONS = [
|
||
{ value: "10", label: "10" },
|
||
{ value: "25", label: "25" },
|
||
{ value: "50", label: "50" },
|
||
{ value: "100", label: "100" },
|
||
{ value: "all", label: "Alle" }
|
||
];
|
||
const VALID_PER_PAGE_VALUES = new Set(PER_PAGE_OPTIONS.map((option) => option.value));
|
||
|
||
const REDEPLOY_TYPE_LABELS = {
|
||
Einzeln: "Einzeln",
|
||
Alle: "Alle",
|
||
Auswahl: "Auswahl",
|
||
single: "Einzeln",
|
||
all: "Alle",
|
||
selection: "Auswahl"
|
||
};
|
||
|
||
const hasActiveFilters = (filters) => Boolean(
|
||
(filters.stacks && filters.stacks.length) ||
|
||
(filters.statuses && filters.statuses.length) ||
|
||
(filters.endpoints && filters.endpoints.length) ||
|
||
(filters.redeployTypes && filters.redeployTypes.length) ||
|
||
(filters.message && filters.message.trim()) ||
|
||
(filters.from && filters.from.trim()) ||
|
||
(filters.to && filters.to.trim())
|
||
);
|
||
|
||
|
||
export function Logs() {
|
||
|
||
const [logs, setLogs] = useState([]);
|
||
const [totalLogs, setTotalLogs] = useState(0);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState("");
|
||
const [actionLoading, setActionLoading] = useState(false);
|
||
|
||
const [stackOptions, setStackOptions] = useState([]);
|
||
const [statusOptions, setStatusOptions] = useState([]);
|
||
const [endpointOptions, setEndpointOptions] = useState([]);
|
||
const [redeployTypeOptions, setRedeployTypeOptions] = useState([]);
|
||
|
||
const [selectedStacks, setSelectedStacks] = useState([]);
|
||
const [selectedStatuses, setSelectedStatuses] = useState([]);
|
||
const [selectedEndpoints, setSelectedEndpoints] = useState([]);
|
||
const [selectedRedeployTypes, setSelectedRedeployTypes] = useState([]);
|
||
const [messageQuery, setMessageQuery] = useState("");
|
||
const [fromDate, setFromDate] = useState("");
|
||
const [toDate, setToDate] = useState("");
|
||
|
||
const [filtersOpen, setFiltersOpen] = useState(false);
|
||
const [filtersReady, setFiltersReady] = useState(false);
|
||
const [optionsInitialized, setOptionsInitialized] = useState(false);
|
||
const [refreshSignal, setRefreshSignal] = useState(0);
|
||
|
||
const [perPage, setPerPage] = useState(PER_PAGE_DEFAULT);
|
||
const [page, setPage] = useState(1);
|
||
|
||
const noop = useCallback(() => { }, []);
|
||
|
||
const updateFilterOptions = useCallback((payload) => {
|
||
const logsPayload = Array.isArray(payload) ? payload : payload?.items ?? [];
|
||
|
||
const stackMap = new Map();
|
||
const statusSet = new Set();
|
||
const endpointSet = new Set();
|
||
const redeployTypeSet = new Set();
|
||
|
||
logsPayload.forEach((log) => {
|
||
if (log.stackId) {
|
||
const value = String(log.stackId);
|
||
const label = log.stackName || `Stack ${value}`;
|
||
stackMap.set(value, label);
|
||
}
|
||
|
||
if (log.status) {
|
||
statusSet.add(log.status);
|
||
}
|
||
|
||
if (log.endpoint !== null && log.endpoint !== undefined && log.endpoint !== "") {
|
||
endpointSet.add(String(log.endpoint));
|
||
}
|
||
|
||
if (log.redeployType) {
|
||
redeployTypeSet.add(log.redeployType);
|
||
}
|
||
});
|
||
|
||
setStackOptions(Array.from(stackMap.entries())
|
||
.map(([value, label]) => ({ value, label }))
|
||
.sort((a, b) => a.label.localeCompare(b.label)));
|
||
|
||
setStatusOptions(Array.from(statusSet).sort());
|
||
|
||
setEndpointOptions(Array.from(endpointSet)
|
||
.sort((a, b) => a.localeCompare(b, undefined, { numeric: true })));
|
||
|
||
setRedeployTypeOptions(Array.from(redeployTypeSet).sort());
|
||
setOptionsInitialized(true);
|
||
}, []);
|
||
|
||
const stackLabelMap = useMemo(() => {
|
||
const map = new Map();
|
||
stackOptions.forEach((option) => {
|
||
map.set(option.value, option.label);
|
||
});
|
||
return map;
|
||
}, [stackOptions]);
|
||
|
||
useEffect(() => {
|
||
if (!optionsInitialized) return;
|
||
setSelectedStacks((prev) => {
|
||
const valid = prev.filter((value) => stackOptions.some((option) => option.value === value));
|
||
return valid.length === prev.length ? prev : valid;
|
||
});
|
||
}, [optionsInitialized, stackOptions]);
|
||
|
||
useEffect(() => {
|
||
if (!optionsInitialized) return;
|
||
setSelectedStatuses((prev) => {
|
||
const valid = prev.filter((value) => statusOptions.includes(value));
|
||
return valid.length === prev.length ? prev : valid;
|
||
});
|
||
}, [optionsInitialized, statusOptions]);
|
||
|
||
useEffect(() => {
|
||
if (!optionsInitialized) return;
|
||
setSelectedEndpoints((prev) => {
|
||
const valid = prev.filter((value) => endpointOptions.includes(value));
|
||
return valid.length === prev.length ? prev : valid;
|
||
});
|
||
}, [optionsInitialized, endpointOptions]);
|
||
|
||
useEffect(() => {
|
||
if (!optionsInitialized) return;
|
||
setSelectedRedeployTypes((prev) => {
|
||
const valid = prev.filter((value) => redeployTypeOptions.includes(value));
|
||
return valid.length === prev.length ? prev : valid;
|
||
});
|
||
}, [optionsInitialized, redeployTypeOptions]);
|
||
|
||
useEffect(() => {
|
||
if (typeof window === "undefined") {
|
||
setFiltersReady(true);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const storedValue = window.localStorage.getItem(FILTER_STORAGE_KEY);
|
||
if (storedValue) {
|
||
const parsed = JSON.parse(storedValue);
|
||
const storedFilters = parsed?.filters ?? parsed ?? {};
|
||
const storedPagination = parsed?.pagination ?? {};
|
||
|
||
setSelectedStacks(storedFilters.stacks || []);
|
||
setSelectedStatuses(storedFilters.statuses || []);
|
||
setSelectedEndpoints(storedFilters.endpoints || []);
|
||
setSelectedRedeployTypes(storedFilters.redeployTypes || []);
|
||
setMessageQuery(storedFilters.message || "");
|
||
setFromDate(storedFilters.from || "");
|
||
setToDate(storedFilters.to || "");
|
||
setFiltersOpen(hasActiveFilters(storedFilters));
|
||
|
||
const rawPerPage = storedPagination.perPage;
|
||
if (rawPerPage !== undefined) {
|
||
const parsedPerPage = String(rawPerPage);
|
||
if (VALID_PER_PAGE_VALUES.has(parsedPerPage)) {
|
||
setPerPage(parsedPerPage);
|
||
}
|
||
}
|
||
|
||
const rawPage = storedPagination.page;
|
||
if (typeof rawPage === 'number' && rawPage > 0) {
|
||
setPage(rawPage);
|
||
}
|
||
}
|
||
} catch (storageError) {
|
||
console.error("❌ Fehler beim Laden der gespeicherten Log-Filter:", storageError);
|
||
} finally {
|
||
setFiltersReady(true);
|
||
}
|
||
}, []);
|
||
|
||
const buildFilterParams = useCallback(() => {
|
||
const params = {};
|
||
|
||
if (selectedStacks.length) {
|
||
params.stackIds = selectedStacks.join(",");
|
||
}
|
||
|
||
if (selectedStatuses.length) {
|
||
params.statuses = selectedStatuses.join(",");
|
||
}
|
||
|
||
if (selectedEndpoints.length) {
|
||
params.endpoints = selectedEndpoints.join(",");
|
||
}
|
||
|
||
if (selectedRedeployTypes.length) {
|
||
params.redeployTypes = selectedRedeployTypes.join(",");
|
||
}
|
||
|
||
if (messageQuery.trim()) {
|
||
params.message = messageQuery.trim();
|
||
}
|
||
|
||
const fromParam = normalizeDateParam(fromDate);
|
||
if (fromParam) {
|
||
params.from = fromParam;
|
||
}
|
||
|
||
const toParam = normalizeDateParam(toDate);
|
||
if (toParam) {
|
||
params.to = toParam;
|
||
}
|
||
|
||
return params;
|
||
}, [selectedStacks, selectedStatuses, selectedEndpoints, selectedRedeployTypes, messageQuery, fromDate, toDate]);
|
||
|
||
useEffect(() => {
|
||
if (!filtersReady) return;
|
||
|
||
let cancelled = false;
|
||
axios.get("/api/logs", { params: { perPage: 'all', page: 1 } })
|
||
.then((response) => {
|
||
if (cancelled) return;
|
||
updateFilterOptions(response.data);
|
||
})
|
||
.catch((err) => {
|
||
if (cancelled) return;
|
||
console.error("⚠️ Konnte Filteroptionen nicht aktualisieren:", err);
|
||
});
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [filtersReady, updateFilterOptions, refreshSignal]);
|
||
|
||
const currentFilters = useMemo(() => ({
|
||
stacks: selectedStacks,
|
||
statuses: selectedStatuses,
|
||
endpoints: selectedEndpoints,
|
||
redeployTypes: selectedRedeployTypes,
|
||
message: messageQuery,
|
||
from: fromDate,
|
||
to: toDate
|
||
}), [selectedStacks, selectedStatuses, selectedEndpoints, selectedRedeployTypes, messageQuery, fromDate, toDate]);
|
||
|
||
useEffect(() => {
|
||
if (!filtersReady) return;
|
||
|
||
const params = { ...buildFilterParams() };
|
||
if (perPage === 'all') {
|
||
params.perPage = 'all';
|
||
params.page = 1;
|
||
} else {
|
||
params.perPage = perPage;
|
||
params.page = page;
|
||
}
|
||
|
||
let cancelled = false;
|
||
setLoading(true);
|
||
setError("");
|
||
|
||
axios.get("/api/logs", { params })
|
||
.then((response) => {
|
||
if (cancelled) return;
|
||
const data = response.data || {};
|
||
const items = Array.isArray(data) ? data : data.items ?? [];
|
||
const total = Array.isArray(data) ? items.length : data.total ?? items.length;
|
||
|
||
setLogs(items);
|
||
setTotalLogs(total);
|
||
|
||
if (perPage === 'all') {
|
||
if (page !== 1) setPage(1);
|
||
} else {
|
||
const totalPages = Math.max(1, Math.ceil((total || 0) / Number(perPage)));
|
||
const nextPage = Math.min(Math.max(page, 1), totalPages);
|
||
if (nextPage !== page) {
|
||
setPage(nextPage);
|
||
}
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
if (cancelled) return;
|
||
console.error("❌ Fehler beim Laden der Logs:", err);
|
||
setError("Fehler beim Laden der Redeploy-Logs");
|
||
})
|
||
.finally(() => {
|
||
if (cancelled) return;
|
||
setLoading(false);
|
||
});
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [filtersReady, buildFilterParams, updateFilterOptions, refreshSignal, perPage, page]);
|
||
|
||
useEffect(() => {
|
||
if (!filtersReady) return;
|
||
if (typeof window === "undefined") return;
|
||
|
||
try {
|
||
window.localStorage.setItem(
|
||
FILTER_STORAGE_KEY,
|
||
JSON.stringify({
|
||
filters: currentFilters,
|
||
pagination: {
|
||
perPage,
|
||
page
|
||
}
|
||
})
|
||
);
|
||
} catch (storageError) {
|
||
console.error("⚠️ Konnte Filter nicht speichern:", storageError);
|
||
}
|
||
}, [filtersReady, currentFilters, perPage, page]);
|
||
|
||
const handleMultiSelectChange = (setter) => (valueOrEvent) => {
|
||
if (typeof valueOrEvent === "string") {
|
||
const value = valueOrEvent;
|
||
if (value === "") {
|
||
return;
|
||
}
|
||
|
||
setter((prev) => {
|
||
if (value === ALL_OPTION_VALUE) {
|
||
return [];
|
||
}
|
||
|
||
if (prev.includes(value)) {
|
||
return prev.filter((entry) => entry !== value);
|
||
}
|
||
|
||
return [...prev, value];
|
||
});
|
||
setPage(1);
|
||
return;
|
||
}
|
||
|
||
const selectedOptions = valueOrEvent?.target?.selectedOptions;
|
||
if (!selectedOptions) {
|
||
return;
|
||
}
|
||
|
||
const values = Array.from(selectedOptions).map((option) => option.value);
|
||
if (values.includes(ALL_OPTION_VALUE)) {
|
||
setter([]);
|
||
} else {
|
||
setter(values);
|
||
}
|
||
setPage(1);
|
||
};
|
||
|
||
const removeFilterValue = (setter, value) => {
|
||
setter((prev) => prev.filter((entry) => entry !== value));
|
||
setPage(1);
|
||
};
|
||
|
||
const handleResetFilters = () => {
|
||
setSelectedStacks([]);
|
||
setSelectedStatuses([]);
|
||
setSelectedEndpoints([]);
|
||
setSelectedRedeployTypes([]);
|
||
setMessageQuery("");
|
||
setFromDate("");
|
||
setToDate("");
|
||
setFiltersOpen(false);
|
||
setPage(1);
|
||
};
|
||
|
||
const handleToggleFilters = () => {
|
||
setFiltersOpen((prev) => !prev);
|
||
};
|
||
|
||
const handlePerPageChange = (event) => {
|
||
const value = event.target.value;
|
||
if (!VALID_PER_PAGE_VALUES.has(value)) return;
|
||
setPerPage(value);
|
||
setPage(1);
|
||
};
|
||
|
||
const handlePageChange = (nextPage) => {
|
||
if (perPage === 'all') return;
|
||
if (nextPage < 1) return;
|
||
const totalPages = Math.max(1, Math.ceil((totalLogs || 0) / Number(perPage)));
|
||
if (nextPage > totalPages) return;
|
||
setPage(nextPage);
|
||
};
|
||
|
||
const stackSelectOptions = useMemo(() => {
|
||
const entries = stackOptions.filter((option) => option.value !== ALL_OPTION_VALUE);
|
||
return [
|
||
{ value: ALL_OPTION_VALUE, label: ALL_OPTION_LABEL },
|
||
...entries
|
||
];
|
||
}, [stackOptions]);
|
||
|
||
const statusSelectOptions = useMemo(() => {
|
||
const entries = statusOptions
|
||
.filter((status) => status !== ALL_OPTION_VALUE)
|
||
.map((status) => ({ value: status, label: status }));
|
||
return [
|
||
{ value: ALL_OPTION_VALUE, label: ALL_OPTION_LABEL },
|
||
...entries
|
||
];
|
||
}, [statusOptions]);
|
||
|
||
const endpointSelectOptions = useMemo(() => {
|
||
const entries = endpointOptions
|
||
.filter((endpoint) => endpoint !== ALL_OPTION_VALUE)
|
||
.map((endpoint) => ({ value: endpoint, label: endpoint }));
|
||
return [
|
||
{ value: ALL_OPTION_VALUE, label: ALL_OPTION_LABEL },
|
||
...entries
|
||
];
|
||
}, [endpointOptions]);
|
||
|
||
const redeployTypeSelectOptions = useMemo(() => {
|
||
const entries = redeployTypeOptions
|
||
.filter((type) => type !== ALL_OPTION_VALUE)
|
||
.map((type) => ({ value: type, label: REDEPLOY_TYPE_LABELS[type] ?? type }));
|
||
return [
|
||
{ value: ALL_OPTION_VALUE, label: ALL_OPTION_LABEL },
|
||
...entries
|
||
];
|
||
}, [redeployTypeOptions]);
|
||
|
||
const activeFilterCount = useMemo(() => {
|
||
let count = 0;
|
||
if (selectedStacks.length) count += selectedStacks.length;
|
||
if (selectedStatuses.length) count += selectedStatuses.length;
|
||
if (selectedEndpoints.length) count += selectedEndpoints.length;
|
||
if (selectedRedeployTypes.length) count += selectedRedeployTypes.length;
|
||
if (messageQuery.trim()) count += 1;
|
||
if (fromDate) count += 1;
|
||
if (toDate) count += 1;
|
||
return count;
|
||
}, [selectedStacks, selectedStatuses, selectedEndpoints, messageQuery, fromDate, toDate]);
|
||
|
||
const totalPages = useMemo(() => {
|
||
if (perPage === 'all') return 1;
|
||
const numeric = Number(perPage) || Number(PER_PAGE_DEFAULT);
|
||
return Math.max(1, Math.ceil((totalLogs || 0) / numeric));
|
||
}, [perPage, totalLogs]);
|
||
|
||
const rangeStart = useMemo(() => {
|
||
if (totalLogs === 0) return 0;
|
||
if (perPage === 'all') return 1;
|
||
return (page - 1) * Number(perPage) + 1;
|
||
}, [totalLogs, perPage, page]);
|
||
|
||
const rangeEnd = useMemo(() => {
|
||
if (totalLogs === 0) return 0;
|
||
if (perPage === 'all') return totalLogs;
|
||
return Math.min(totalLogs, (page - 1) * Number(perPage) + logs.length);
|
||
}, [totalLogs, perPage, page, logs.length]);
|
||
|
||
const handleDeleteLog = async (id) => {
|
||
if (!window.confirm("Diesen Log-Eintrag dauerhaft löschen?")) return;
|
||
setActionLoading(true);
|
||
setError("");
|
||
try {
|
||
await axios.delete(`/api/logs/${id}`);
|
||
setRefreshSignal((prev) => prev + 1);
|
||
} catch (err) {
|
||
console.error("❌ Fehler beim Löschen des Logs:", err);
|
||
setError("Fehler beim Löschen des Redeploy-Logs");
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleDeleteFiltered = async () => {
|
||
if (!logs.length) return;
|
||
if (!window.confirm("Alle angezeigten Logs (entsprechend Filter) löschen?")) return;
|
||
setActionLoading(true);
|
||
setError("");
|
||
try {
|
||
const params = {
|
||
...buildFilterParams(),
|
||
ids: logs.map((log) => log.id).join(',')
|
||
};
|
||
await axios.delete("/api/logs", { params });
|
||
setRefreshSignal((prev) => prev + 1);
|
||
} catch (err) {
|
||
console.error("❌ Fehler beim Löschen der gefilterten Logs:", err);
|
||
setError("Fehler beim Löschen der gefilterten Logs");
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleExport = async (format) => {
|
||
setActionLoading(true);
|
||
setError("");
|
||
try {
|
||
const response = await axios.get("/api/logs/export", {
|
||
params: { ...buildFilterParams(), format },
|
||
responseType: "blob"
|
||
});
|
||
|
||
const contentType = response.headers["content-type"] || (format === "sql" ? "application/sql" : "text/plain");
|
||
const disposition = response.headers["content-disposition"] || "";
|
||
const match = disposition.match(/filename="?([^";]+)"?/i);
|
||
const filename = match?.[1] || `redeploy-logs.${format}`;
|
||
|
||
const blob = new Blob([response.data], { type: contentType });
|
||
const url = window.URL.createObjectURL(blob);
|
||
const link = document.createElement("a");
|
||
link.href = url;
|
||
link.download = filename;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
link.remove();
|
||
window.URL.revokeObjectURL(url);
|
||
} catch (err) {
|
||
console.error("❌ Fehler beim Export der Logs:", err);
|
||
setError("Fehler beim Export der Redeploy-Logs");
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
|
||
|
||
};
|
||
const [open, setOpen] = React.useState(false);
|
||
const toggleOpen = () => setOpen((cur) => !cur);
|
||
return (
|
||
<div className="mt-12 mb-8 flex flex-col gap-12">
|
||
<Card>
|
||
<CardHeader variant="gradient" color="gray" className="p-6 pt-2 pb-2">
|
||
<Typography variant="h6" color="white">
|
||
<button
|
||
onClick={handleToggleFilters}
|
||
className="flex w-full items-center justify-between"
|
||
>
|
||
<span className="flex items-center gap-2">
|
||
<span>Filter und Optionen</span>
|
||
{activeFilterCount > 0 && (
|
||
|
||
<span className="rounded-full bg-blue-gray-500/80 px-2 py-0.5 text-xs text-white">
|
||
{activeFilterCount} aktiv
|
||
</span>
|
||
)}
|
||
</span>
|
||
<span className="text-xs uppercase tracking-wide text-gray-400">
|
||
{filtersOpen ? "Ausblenden" : "Anzeigen"}
|
||
</span>
|
||
</button>
|
||
</Typography>
|
||
</CardHeader>
|
||
<CardBody>
|
||
{filtersOpen && (
|
||
<div>
|
||
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button
|
||
onClick={() => handleExport('txt')}
|
||
disabled={actionLoading || loading}
|
||
className="w-full md:flex-1">
|
||
Export TXT</Button>
|
||
<Button
|
||
onClick={() => handleExport('sql')}
|
||
disabled={actionLoading || loading}
|
||
className="w-full md:flex-1">
|
||
Export SQL</Button>
|
||
<Button
|
||
onClick={handleDeleteFiltered}
|
||
disabled={actionLoading || loading || logs.length === 0}
|
||
className="w-full md:flex-1 bg-sunsetCoral-500 hover:bg-sunsetCoral-600">
|
||
Angezeigte löschen</Button>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap gap-2 mt-10">
|
||
<div className="grid gap-4 flex-1">
|
||
<Select
|
||
multiple
|
||
onChange={noop}
|
||
className="text-gray-500"
|
||
variant="static"
|
||
dismiss={{ itemPress: false }}
|
||
label="Stacks"
|
||
>
|
||
{stackSelectOptions.map(({ value, label }) => (
|
||
<StickyOption
|
||
key={value}
|
||
value={value}
|
||
onValueSelect={handleMultiSelectChange(setSelectedStacks)}
|
||
className={`text-black-600 ${value === ALL_OPTION_VALUE ? 'font-semibold text-black-800' : ''}`}
|
||
>
|
||
{label}
|
||
</StickyOption>
|
||
))}
|
||
</Select>
|
||
<div className="mt-2 mb-2 min-h-[1.5rem] text-xs text-gray-400">
|
||
{selectedStacks.length === 0 ? (
|
||
<span className="rounded-full bg-gray-700/60 px-2 py-0.5 text-gray-300 ">
|
||
Alle Stacks
|
||
</span>
|
||
) : (
|
||
<span>
|
||
{selectedStacks.map((stackId) => (
|
||
<button
|
||
key={stackId}
|
||
type="button"
|
||
onClick={() => removeFilterValue(setSelectedStacks, stackId)}
|
||
className="rounded-full bg-purple-500/80 px-2 py-0.5 text-white transition hover:bg-purple-500/90 focus:outline-none focus:ring-2 focus:ring-purple-300 cursor-pointer"
|
||
title="Filter entfernen"
|
||
>
|
||
{stackLabelMap.get(stackId) ?? `Stack ${stackId}`}
|
||
</button>
|
||
))}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="grid gap-4 flex-1">
|
||
<Select
|
||
multiple
|
||
onChange={noop}
|
||
className="text-gray-500"
|
||
variant="static"
|
||
dismiss={{ itemPress: false }}
|
||
label="Status"
|
||
>
|
||
{statusSelectOptions.map(({ value, label }) => (
|
||
<StickyOption
|
||
key={value}
|
||
value={value}
|
||
onValueSelect={handleMultiSelectChange(setSelectedStatuses)}
|
||
className={`text-black-600 ${value === ALL_OPTION_VALUE ? 'font-semibold text-black-800' : ''}`}
|
||
>
|
||
{label}
|
||
</StickyOption>
|
||
))}
|
||
</Select>
|
||
<div className="mt-2 mb-2 min-h-[1.5rem] text-xs text-gray-400">
|
||
{selectedStatuses.length === 0 ? (
|
||
<span className="rounded-full bg-gray-700/60 px-2 py-0.5 text-gray-300">
|
||
Alle Status
|
||
</span>
|
||
) : (
|
||
<span>
|
||
{selectedStatuses.map((status) => (
|
||
<button
|
||
key={status}
|
||
type="button"
|
||
onClick={() => removeFilterValue(setSelectedStatuses, status)}
|
||
className="rounded-full bg-brown-500/80 px-2 py-0.5 text-white transition hover:bg-brown-500/90 focus:outline-none focus:ring-2 focus:ring-brown-300 cursor-pointer"
|
||
title="Filter entfernen"
|
||
>
|
||
{status}
|
||
</button>
|
||
))}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="grid gap-4 flex-1">
|
||
<Select
|
||
multiple
|
||
onChange={noop}
|
||
className="text-gray-500"
|
||
variant="static"
|
||
dismiss={{ itemPress: false }}
|
||
label="Redeploy-Typ"
|
||
>
|
||
{redeployTypeSelectOptions.map(({ value, label }) => (
|
||
<StickyOption
|
||
key={value}
|
||
value={value}
|
||
onValueSelect={handleMultiSelectChange(setSelectedRedeployTypes)}
|
||
className={`text-black-600 ${value === ALL_OPTION_VALUE ? 'font-semibold text-black-800' : ''}`}
|
||
>
|
||
{label}
|
||
</StickyOption>
|
||
|
||
))}
|
||
</Select>
|
||
<div className="mt-2 mb-2 min-h-[1.5rem] text-xs text-gray-400">
|
||
{selectedRedeployTypes.length === 0 ? (
|
||
<span className="rounded-full bg-gray-700/60 px-2 py-0.5 text-gray-300">
|
||
Alle Typen
|
||
</span>
|
||
) : (
|
||
<span>
|
||
{selectedRedeployTypes.map((type) => (
|
||
<button
|
||
key={type}
|
||
type="button"
|
||
onClick={() => removeFilterValue(setSelectedRedeployTypes, type)}
|
||
className="rounded-full bg-brown-500/80 px-2 py-0.5 text-white transition hover:bg-brown-500/90 focus:outline-none focus:ring-2 focus:ring-brown-300 cursor-pointer"
|
||
title="Filter entfernen"
|
||
>
|
||
{REDEPLOY_TYPE_LABELS[type] ?? type}
|
||
</button>
|
||
))}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="grid gap-4 flex-1">
|
||
<Select
|
||
multiple
|
||
onChange={noop}
|
||
className="text-gray-500"
|
||
variant="static"
|
||
dismiss={{ itemPress: false }}
|
||
label="Endpoints"
|
||
>
|
||
{endpointSelectOptions.map(({ value, label }) => (
|
||
<StickyOption
|
||
key={value}
|
||
value={value}
|
||
onValueSelect={handleMultiSelectChange(setSelectedEndpoints)}
|
||
className={`text-black-600 ${value === ALL_OPTION_VALUE ? 'font-semibold text-black-800' : ''}`}
|
||
>
|
||
{label}
|
||
</StickyOption>
|
||
))}
|
||
</Select>
|
||
<div className="mt-2 mb-2 min-h-[1.5rem] text-xs text-gray-400">
|
||
{selectedEndpoints.length === 0 ? (
|
||
<span className="rounded-full bg-gray-700/60 px-2 py-0.5 text-gray-300">
|
||
Alle Endpoints
|
||
</span>
|
||
) : (
|
||
<span>
|
||
{selectedEndpoints.map((endpoint) => (
|
||
<button
|
||
key={endpoint}
|
||
type="button"
|
||
onClick={() => removeFilterValue(setSelectedEndpoints, endpoint)}
|
||
className="rounded-full bg-teal-500/80 px-2 py-0.5 text-white transition hover:bg-teal-500/90 focus:outline-none focus:ring-2 focus:ring-brown-300 cursor-pointer"
|
||
title="Filter entfernen"
|
||
>
|
||
Endpoint {endpoint}
|
||
</button>
|
||
))}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2 mt-5">
|
||
<div className="grid gap-4 flex-1">
|
||
<Input
|
||
value={messageQuery}
|
||
onChange={(event) => {
|
||
setMessageQuery(event.target.value);
|
||
setPage(1);
|
||
}}
|
||
variant="static"
|
||
label="Nachricht (Freitext)"
|
||
placeholder="Suche" />
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col md:flex-row flex-wrap gap-4 mt-8">
|
||
<div className="flex-1">
|
||
<Input
|
||
type="datetime-local"
|
||
variant="static"
|
||
label="Von"
|
||
value={fromDate}
|
||
onChange={(event) => {
|
||
setFromDate(event.target.value);
|
||
setPage(1);
|
||
}}
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
<div className="flex-1">
|
||
<Input
|
||
type="datetime-local"
|
||
variant="static"
|
||
label="Bis"
|
||
value={toDate}
|
||
onChange={(event) => {
|
||
setToDate(event.target.value);
|
||
setPage(1);
|
||
}}
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
<div className="flex-1">
|
||
<Button
|
||
onClick={handleResetFilters}
|
||
disabled={actionLoading || loading}
|
||
className="w-full"
|
||
>
|
||
Zurücksetzen
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
)}
|
||
|
||
</CardBody>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader variant="gradient" color="gray" className="mb-8 p-6">
|
||
<Typography
|
||
variant="h6"
|
||
color="white"
|
||
className="flex items-center justify-between"
|
||
>
|
||
<span>Logs</span>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs uppercase tracking-wide text-gray-400">
|
||
Einträge pro Seite:
|
||
</span>
|
||
<select
|
||
value={perPage}
|
||
onChange={handlePerPageChange}
|
||
className="rounded-md border border-gray-700 bg-gray-900 px-2 py-1 text-sm text-gray-100 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500"
|
||
>
|
||
{PER_PAGE_OPTIONS.map(({ value, label }) => (
|
||
<option key={value} value={value}>
|
||
{label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</Typography>
|
||
</CardHeader>
|
||
<CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
|
||
<table className="w-full min-w-[640px] table-auto">
|
||
<thead>
|
||
<tr>
|
||
{["Zeitpunkt", "Stack", "Art", "Status", "Nachricht", "Endpoint", "Aktionen"].map((el) => (
|
||
<th
|
||
key={el}
|
||
className="border-b border-blue-gray-50 py-3 px-5 text-left"
|
||
>
|
||
<Typography
|
||
variant="small"
|
||
className="text-[11px] font-bold uppercase text-blue-gray-400"
|
||
>
|
||
{el}
|
||
</Typography>
|
||
</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{logs.map((log) => {
|
||
const statusClass = STATUS_COLORS[log.status] || "text-blue-300";
|
||
const className = "py-3 px-5";
|
||
const stackDisplayName = log.stackName || "Unbekannt";
|
||
const showStackId = stackDisplayName !== '---' && log.stackId !== undefined && log.stackId !== null;
|
||
const redeployTypeLabel = log.redeployType
|
||
? (REDEPLOY_TYPE_LABELS[log.redeployType] ?? log.redeployType)
|
||
: '---';
|
||
return (
|
||
<tr key={log.id}>
|
||
<td className={className}>
|
||
<Typography
|
||
variant="small"
|
||
className="mb-1 block text-xs font-medium text-blue-gray-600">
|
||
{formatTimestamp(log.timestamp)}
|
||
</Typography>
|
||
</td>
|
||
<td className={className}>
|
||
<div className="flex flex-col">
|
||
<span className="font-medium">{stackDisplayName}</span>
|
||
<Typography
|
||
variant="small"
|
||
>
|
||
{showStackId && (
|
||
<span className="text-xs text-gray-400">ID: {log.stackId}</span>
|
||
)}
|
||
</Typography>
|
||
</div>
|
||
</td>
|
||
<td className={className}>
|
||
<Typography
|
||
variant="small"
|
||
>
|
||
{redeployTypeLabel}
|
||
</Typography>
|
||
</td>
|
||
<td className={className}>
|
||
<Typography
|
||
variant="small"
|
||
className={`font-semibold ${statusClass}`}
|
||
>
|
||
{log.status}
|
||
</Typography>
|
||
</td>
|
||
<td className={className}>
|
||
<Typography
|
||
variant="small"
|
||
>
|
||
{log.message || "-"}
|
||
</Typography>
|
||
</td>
|
||
<td className={className}>
|
||
<Typography
|
||
variant="small"
|
||
>
|
||
{log.endpoint ?? "-"}
|
||
</Typography>
|
||
</td>
|
||
<td className={className}>
|
||
<Typography
|
||
variant="small"
|
||
>
|
||
<button
|
||
onClick={() => handleDeleteLog(log.id)}
|
||
disabled={actionLoading}
|
||
className="rounded-md border border-sunsetCoral-600 px-3 py-1 text-xs text-sunsetCoral-800 transition hover:bg-sunsetCoral-600/20 disabled:opacity-60">
|
||
Löschen
|
||
</button>
|
||
</Typography>
|
||
</td>
|
||
</tr>
|
||
);
|
||
}
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</CardBody>
|
||
</Card>
|
||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||
<span>
|
||
{totalLogs === 0
|
||
? "Keine Einträge"
|
||
: perPage === 'all'
|
||
? `Zeige alle ${totalLogs} Einträge`
|
||
: `Zeige ${rangeStart.toLocaleString()} – ${rangeEnd.toLocaleString()} von ${totalLogs.toLocaleString()} Einträgen`}
|
||
</span>
|
||
{perPage !== 'all' && (
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={() => handlePageChange(page - 1)}
|
||
disabled={page <= 1 || actionLoading}
|
||
className="rounded-md border border-slate-300 p-2.5 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="w-4 h-4">
|
||
<path d="M11.03 3.97a.75.75 0 0 1 0 1.06l-6.22 6.22H21a.75.75 0 0 1 0 1.5H4.81l6.22 6.22a.75.75 0 1 1-1.06 1.06l-7.5-7.5a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 0 1 1.06 0Z" />
|
||
</svg>
|
||
</button>
|
||
|
||
<p className="text-slate-600">
|
||
Seite <strong className="text-slate-800">{page}</strong> / <strong className="text-slate-800">{totalPages}</strong>
|
||
</p>
|
||
<button
|
||
onClick={() => handlePageChange(page + 1)}
|
||
disabled={page >= totalPages || actionLoading}
|
||
className="rounded-md border border-slate-300 p-2.5 text-center text-sm transition-all shadow-sm hover:shadow-lg text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="w-4 h-4">
|
||
<path d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
|
||
);
|
||
}
|
||
|
||
export default Logs;
|