feat: big major update
This commit is contained in:
132
src/widgets/DevicesTable/DeviceLogsModal.tsx
Normal file
132
src/widgets/DevicesTable/DeviceLogsModal.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import { API_URL, authInstance, Modal } from "@shared";
|
||||
import { CircularProgress } from "@mui/material";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
interface DeviceLogChunk {
|
||||
date?: string;
|
||||
lines?: string[];
|
||||
}
|
||||
|
||||
interface DeviceLogsModalProps {
|
||||
open: boolean;
|
||||
deviceUuid: string | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
return new Intl.DateTimeFormat("ru-RU", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
const formatLogTimestamp = (timestampStr: string) => {
|
||||
return timestampStr.replace(/^\[|\]$/g, "").trim();
|
||||
};
|
||||
|
||||
const parseLogLine = (line: string, index: number) => {
|
||||
const match = line.match(/^(\[[^\]]+\])\s*(.*)$/);
|
||||
if (match) {
|
||||
return { id: index, time: match[1], text: match[2].trim() || line };
|
||||
}
|
||||
return { id: index, time: "", text: line };
|
||||
};
|
||||
|
||||
const toYYYYMMDD = (d: Date) => d.toISOString().slice(0, 10);
|
||||
|
||||
export const DeviceLogsModal = ({
|
||||
open,
|
||||
deviceUuid,
|
||||
onClose,
|
||||
}: DeviceLogsModalProps) => {
|
||||
const [chunks, setChunks] = useState<DeviceLogChunk[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const today = new Date();
|
||||
const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
|
||||
const dateStr = toYYYYMMDD(today);
|
||||
const dateStrYesterday = toYYYYMMDD(yesterday);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !deviceUuid) return;
|
||||
|
||||
const fetchLogs = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const { data } = await authInstance.get<DeviceLogChunk[]>(
|
||||
`${API_URL}/devices/${deviceUuid}/logs`,
|
||||
{ params: { from: dateStrYesterday, to: dateStr } }
|
||||
);
|
||||
setChunks(Array.isArray(data) ? data : []);
|
||||
} catch (err: unknown) {
|
||||
const msg =
|
||||
err && typeof err === "object" && "message" in err
|
||||
? String((err as { message?: string }).message)
|
||||
: "Ошибка загрузки логов";
|
||||
setError(msg);
|
||||
toast.error(msg);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchLogs();
|
||||
}, [open, deviceUuid, dateStr]);
|
||||
|
||||
const logs = chunks.flatMap((chunk, chunkIdx) =>
|
||||
(chunk.lines ?? []).map((line, i) =>
|
||||
parseLogLine(line, chunkIdx * 10000 + i)
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose} sx={{ width: "80vw", p: 1.5 }}>
|
||||
<div className="flex flex-col gap-6 h-[85vh]">
|
||||
<div className="flex gap-3 items-center justify-between w-full">
|
||||
<h2 className="text-2xl font-semibold text-[#000000BF]">Логи</h2>
|
||||
<span className="text-lg text-[#00000040]">{formatDate(today)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col min-h-0 w-full">
|
||||
{isLoading && (
|
||||
<div className="w-full h-full flex items-center justify-center bg-white rounded-xl shadow-inner">
|
||||
<CircularProgress />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && error && (
|
||||
<div className="w-full h-full flex items-center justify-center text-red-500">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && !error && (
|
||||
<div className="w-full bg-white p-4 h-full overflow-y-auto rounded-xl shadow-inner">
|
||||
<div className="flex flex-col gap-2 font-mono">
|
||||
{logs.length > 0 ? (
|
||||
logs.map((log) => (
|
||||
<div key={log.id} className="flex gap-3 items-start p-2">
|
||||
<div className="text-sm text-[#00000050] shrink-0 whitespace-nowrap pt-px">
|
||||
{log.time ? `[${formatLogTimestamp(log.time)}]` : null}
|
||||
</div>
|
||||
<div className="text-sm text-[#000000BF] break-words w-full">
|
||||
{log.text}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="h-full flex items-center justify-center text-gray-500">
|
||||
Логи отсутствуют.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -8,7 +8,7 @@ import { AppBar } from "./ui/AppBar";
|
||||
import { Drawer } from "./ui/Drawer";
|
||||
import { DrawerHeader } from "./ui/DrawerHeader";
|
||||
import { NavigationList } from "@features";
|
||||
import { authStore, userStore, menuStore } from "@shared";
|
||||
import { authStore, userStore, menuStore, isMediaIdEmpty } from "@shared";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useEffect } from "react";
|
||||
import { Typography } from "@mui/material";
|
||||
@@ -67,18 +67,18 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="flex flex-col gap-1">
|
||||
{(() => {
|
||||
return (
|
||||
<>
|
||||
<p className=" text-white">
|
||||
{
|
||||
users?.data?.find(
|
||||
// @ts-ignore
|
||||
(user) => user.id === authStore.payload?.user_id
|
||||
)?.name
|
||||
}
|
||||
</p>
|
||||
{(() => {
|
||||
const currentUser = users?.data?.find(
|
||||
(user) => user.id === (authStore.payload as { user_id?: number })?.user_id,
|
||||
);
|
||||
const hasAvatar =
|
||||
currentUser?.icon && !isMediaIdEmpty(currentUser.icon);
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-white">{currentUser?.name}</p>
|
||||
<div
|
||||
className="text-center text-xs"
|
||||
style={{
|
||||
@@ -88,18 +88,27 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
|
||||
padding: "2px 10px",
|
||||
}}
|
||||
>
|
||||
{/* @ts-ignore */}
|
||||
{authStore.payload?.is_admin
|
||||
{(authStore.payload as { is_admin?: boolean })?.is_admin
|
||||
? "Администратор"
|
||||
: "Режим пользователя"}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
<div className="w-10 h-10 bg-gray-600 rounded-full flex items-center justify-center">
|
||||
<User />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-full flex items-center justify-center overflow-hidden bg-gray-600 shrink-0">
|
||||
{hasAvatar ? (
|
||||
<img
|
||||
src={`${
|
||||
import.meta.env.VITE_KRBL_MEDIA
|
||||
}${currentUser!.icon}/download?token=${token}`}
|
||||
alt="Аватар"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<User className="text-white" size={20} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
@@ -138,6 +147,9 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
|
||||
)}
|
||||
</DrawerHeader>
|
||||
<NavigationList open={open} onDrawerOpen={handleDrawerOpen} />
|
||||
<div className="mt-auto flex justify-center items-center pb-5 text-sm text-gray-300">
|
||||
v.{__APP_VERSION__}
|
||||
</div>
|
||||
</Drawer>
|
||||
<Box
|
||||
component="main"
|
||||
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
languageStore,
|
||||
Language,
|
||||
cityStore,
|
||||
isMediaIdEmpty,
|
||||
SelectMediaDialog,
|
||||
PreviewMediaDialog,
|
||||
SightLanguageInfo,
|
||||
@@ -308,7 +309,7 @@ export const CreateInformationTab = observer(
|
||||
<ImageUploadCard
|
||||
title="Водяной знак (левый верхний)"
|
||||
imageKey="watermark_lu"
|
||||
imageUrl={sight.watermark_lu}
|
||||
imageUrl={isMediaIdEmpty(sight.watermark_lu) ? null : sight.watermark_lu}
|
||||
onImageClick={() => {
|
||||
setIsPreviewMediaOpen(true);
|
||||
setMediaId(sight.watermark_lu ?? "");
|
||||
@@ -363,7 +364,7 @@ export const CreateInformationTab = observer(
|
||||
|
||||
<VideoPreviewCard
|
||||
title="Видеозаставка"
|
||||
videoId={sight.video_preview}
|
||||
videoId={isMediaIdEmpty(sight.video_preview) ? null : sight.video_preview}
|
||||
onVideoClick={handleVideoPreviewClick}
|
||||
onDeleteVideoClick={() => {
|
||||
handleChange({
|
||||
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
Language,
|
||||
cityStore,
|
||||
editSightStore,
|
||||
isMediaIdEmpty,
|
||||
SelectMediaDialog,
|
||||
PreviewMediaDialog,
|
||||
SightLanguageInfo,
|
||||
@@ -334,7 +335,7 @@ export const InformationTab = observer(
|
||||
<ImageUploadCard
|
||||
title="Водяной знак (левый верхний)"
|
||||
imageKey="watermark_lu"
|
||||
imageUrl={sight.common.watermark_lu}
|
||||
imageUrl={isMediaIdEmpty(sight.common.watermark_lu) ? null : sight.common.watermark_lu}
|
||||
onImageClick={() => {
|
||||
setIsPreviewMediaOpen(true);
|
||||
setMediaId(sight.common.watermark_lu ?? "");
|
||||
@@ -396,7 +397,7 @@ export const InformationTab = observer(
|
||||
|
||||
<VideoPreviewCard
|
||||
title="Видеозаставка"
|
||||
videoId={sight.common.video_preview}
|
||||
videoId={isMediaIdEmpty(sight.common.video_preview) ? null : sight.common.video_preview}
|
||||
onVideoClick={handleVideoPreviewClick}
|
||||
onDeleteVideoClick={() => {
|
||||
handleChange(
|
||||
|
||||
@@ -19,7 +19,7 @@ export const SnapshotRestore = ({
|
||||
>
|
||||
<div className="bg-white p-4 w-140 rounded-lg flex flex-col gap-4 items-center">
|
||||
<p className="text-black w-110 text-center">
|
||||
Вы уверены, что хотите восстановить этот снапшот?
|
||||
Вы уверены, что хотите восстановить этот экспорт медиа?
|
||||
</p>
|
||||
<p className="text-black w-100 text-center">
|
||||
Это действие нельзя будет отменить.
|
||||
|
||||
Reference in New Issue
Block a user