update

.gitignore

@@ -1,5 +1,5 @@
 # Logs
-logs
+/logs
 *.log
 npm-debug.log*
 yarn-debug.log*
@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+/tsconfig.tsbuildinfo

src/api/logs/hooks.ts

@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  getLogs,
+} from "./logsApi";
+import { GetLogsRequestParams } from "./types";
+
+export const useGetLogs = (params: GetLogsRequestParams) => {
+  return useQuery({
+    queryKey: ["logs", params],
+    queryFn: async () => {
+      const response = await getLogs(params);
+      return response;
+    },
+    enabled: !!params
+  });
+};

src/api/logs/logsApi.ts

@@ -0,0 +1,15 @@
+import { query } from "@/shared/api/query";
+import { GetLogsRequestParams, GetLogsResponseType } from "./types";
+
+export const getLogs = async (params: GetLogsRequestParams): Promise<GetLogsResponseType> => {
+  const response = await query<GetLogsResponseType>({
+    url: "/logs",
+    method: "get",
+    params: params,
+  });
+  if ("error" in response) {
+    throw new Error(`Ошибка: ${response.error.status}`);
+  }
+
+  return response.data;
+};

src/api/logs/types.ts

@@ -0,0 +1,36 @@
+export type LogItemType = {
+  id: number
+  date_created: Date
+  user_request: string;
+  qe_result: string;
+  search_result: string;
+  llm_result: string;
+  llm_settings: string;
+  user_name: string;
+  error: string;
+};
+
+export type GetLogsRequestParams = {
+  page?: number;
+  user_name?: string;
+  date_to?: Date;
+  date_from?: Date;
+  page_size?: number;
+  sort?: { field: string; direction: SortDirections }[];
+};
+
+export type GetLogsResponseType = {
+  data: PaginationType & LogItemType[],
+}
+
+export type PaginationType = {
+  total: number;
+  page: number;
+  page_size: number;
+  total_pages: number;
+};
+
+export enum SortDirections {
+  asc = "asc",
+  desc = "desc",
+}

src/components/pages/logs/LogDetailsModal.scss

@@ -0,0 +1,152 @@
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+}
+
+.fullscreen-modal {
+    top: 0;
+    left: 0;
+    overflow: auto;
+    width: 100vw;
+    height: 100vh;
+
+    .modal-content {
+        max-height: 100vh;
+        overflow-y: auto;
+        overflow-x: auto;
+    }
+
+}
+
+.modal-content {
+    max-height: 80vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .label {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+
+        .name {
+            margin: 0;
+            font-size: 1.5rem;
+            color: #333;
+        }
+
+        .close-button {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 0;
+            color: #666;
+
+            &:hover {
+                color: #333;
+            }
+        }
+    }
+
+    form {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+        gap: 15px;
+        align-items: center;
+        width: 100%;
+        box-sizing: border-box;
+
+        label {
+            display: contents;
+
+            span.title {
+                font-weight: 500;
+                color: #444;
+                text-align: right;
+                padding-right: 10px;
+            }
+
+            input {
+                max-width: 100%;
+            }
+
+            input[type="text"],
+            input[type="number"] {
+                padding: 8px 12px;
+                border: 1px solid #ccc;
+                border-radius: 5px;
+                font-size: 1rem;
+                color: #333;
+                background-color: #f9f9f9;
+                transition: border-color 0.2s;
+
+                &:focus {
+                    border-color: #007bff;
+                    outline: none;
+                    background-color: #fff;
+                }
+
+                &:disabled {
+                    background-color: #e9ecef;
+                    color: #666;
+                }
+            }
+
+            input[type="checkbox"] {
+                width: 20px;
+                height: 20px;
+                margin: 0;
+                cursor: pointer;
+            }
+        }
+
+        .button-group {
+            grid-column: span 2;
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+            margin-top: 20px;
+
+            button {
+                padding: 10px 20px;
+                border: none;
+                border-radius: 5px;
+                font-size: 1rem;
+                cursor: pointer;
+                transition: background-color 0.2s;
+
+                &:first-child {
+                    background-color: #007bff;
+                    color: white;
+
+                    &:hover {
+                        background-color: #0056b3;
+                    }
+                }
+
+                &:nth-child(2) {
+                    background-color: #28a745;
+                    color: white;
+
+                    &:hover {
+                        background-color: #218838;
+                    }
+                }
+
+                &:last-child {
+                    background-color: #6c757d;
+                    color: white;
+
+                    &:hover {
+                        background-color: #5a6268;
+                    }
+                }
+            }
+        }
+    }
+}

src/components/pages/logs/LogDetailsModal.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import ReactJson from '@microlink/react-json-view';
+import Modal from 'react-modal';
+import { GoX } from 'react-icons/go';
+import { useQuery } from '@tanstack/react-query';
+import './LogDetailsModal.scss';
+import { LogItemType } from '@/api/logs/types';
+
+interface LogDetailsModalProps {
+  isOpen: boolean;
+  onRequestClose: () => void;
+  log: LogItemType;
+}
+
+const customStyles = {
+  content: {
+    // top: '0',
+    // left: '0',
+    // overflow: 'auto',
+    // width: '100vw', 
+    // height: '100vh'
+  },
+};
+
+const LogDetailsModal: React.FC<LogDetailsModalProps> = ({
+  isOpen,
+  onRequestClose,
+  log,
+}) => {
+
+  let qeResult = null;
+  try {
+    if (log.qe_result) {
+      qeResult = JSON.parse(log.qe_result);
+    }
+  } catch (error) {
+    console.error('Ошибка парсинга JSON:', error);
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      style={customStyles}
+      overlayClassName="modal-overlay"
+    >
+      <div className="modal-content">
+        <div className="label">
+          <h3 className="name">{log.user_name} {log.date_created ? new Date(log.date_created).toLocaleDateString() : ''} {log.date_created ? new Date(log.date_created).toLocaleTimeString() : ''}</h3>
+          <button className="close-button" onClick={onRequestClose}>
+            <GoX style={{ height: '25px', width: '25px' }} />
+          </button>
+        </div>
+        <form>
+          <label>
+            <span className='title'>ID:</span>
+            <input type="text" value={log.id} disabled />
+          </label>
+          <label>
+            <span className='title'>Пользователь:</span>
+            <input type="text" value={log.user_name} readOnly={true} />
+          </label>
+          <label>
+            <span className='title'>Время:</span>
+            <input type="text" value={(log.date_created ? new Date(log.date_created).toLocaleDateString() : '') + ' ' + (log.date_created ? new Date(log.date_created).toLocaleTimeString() : '')} readOnly={true} />
+          </label>
+          {log.error ? (
+            <label>
+              <span className='title'>Ошибка:</span>
+              <textarea value={log.error} readOnly={true} />
+            </label>) : ('')}
+          <label>
+            <span className='title'>Исходный запрос пользователя:</span>
+            <textarea value={log.user_request} rows={2} />
+          </label>
+          <label>
+            <span className='title'>Результат QE:</span>
+            <div
+              style={{
+                border: '1px solid #ccc',
+                padding: '10px',
+                maxHeight: '300px',
+                overflow: 'auto',
+                background: '#f5f5f5',
+                resize: 'both'
+              }}
+            >
+              {qeResult ? (
+                <ReactJson
+                  src={qeResult}
+                  theme="monokai" // Тема для подсветки синтаксиса
+                  collapsed={1} // Сворачивать узлы на первом уровне вложенности
+                  displayDataTypes={false} // Скрыть типы данных
+                  displayObjectSize={false} // Скрыть размеры объектов
+                  style={{ background: 'transparent', resize: 'both' }}
+                />
+              ) : (
+                <textarea value={log.qe_result} readOnly={true} />
+              )}
+            </div>
+          </label>
+          <label>
+            <span className='title'>Результат поиска:</span>
+            <textarea value={log.search_result} rows={10} readOnly={true} />
+          </label>
+          <label>
+            <span className='title'>Ответ LLM:</span>
+            <textarea value={log.llm_result} rows={10} readOnly={true} />
+          </label>
+        </form>
+      </div>
+    </Modal>
+  );
+};
+
+export default LogDetailsModal;

src/components/pages/logs/Logs.scss

@@ -0,0 +1,117 @@
+.documents-page {
+  min-width: 700px;
+
+  .btn {
+    line-height: unset;
+  }
+
+  .docs-actions {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    .datasets-name {
+      font-weight: 700;
+    }
+
+    .actions {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  .datasets-actions {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 50px;
+
+    .react-select {
+      &__control {
+        border-radius: 10px;
+        min-width: 200px;
+        max-width: 700px;
+        background-color: var(--secondary-color);
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+
+      &__option {
+        &:hover {
+          cursor: pointer;
+        }
+      }
+
+      &__single-value {
+        color: var(--white-color);
+      }
+
+      &__value-container {
+        text-align: start;
+      }
+
+      &__indicator {
+        color: var(--white-color);
+      }
+    }
+  }
+}
+
+.docs-modal {
+  padding-left: 20px;
+
+  p {
+    margin: 40px 0 40px 0;
+  }
+
+  .docs-modal-actions {
+    display: flex;
+    justify-content: end;
+    gap: 10px;
+  }
+}
+
+td.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 400px;
+}
+
+.date-filter {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.date-picker-container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+}
+
+
+.react-datepicker__input-container input {
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+// .react-datepicker__input-container {
+
+//   input,
+//   input:hover,
+//   input:focus {
+//     border-radius: 5px;
+//     border: 2px solid var(--border-1-color);
+//   }
+
+//   .react-datepicker__close-icon::after {
+//     background-color: var(--purple-color);
+//   }
+// }

src/components/pages/logs/Logs.tsx

@@ -0,0 +1,223 @@
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import Select from "react-select";
+
+import {
+  useActivateDataset,
+  useCreateDatasetsDraft,
+  useDeleteDataset,
+  useDeleteFileFromDataset,
+  useGetDatasets,
+} from "@/api/documents/hooks";
+import Button from "@/components/generics/button/Button";
+import Modal from "@/components/generics/modal/Modal";
+import { DocsList } from "@/components/views/documents/docsList/DocsList";
+import { CreateDatasetForm } from "@/components/views/documents/createDatasetForm/CreateDatasetForm";
+import { AddDocumentForm } from "@/components/views/documents/addDocuimentForm/AddDocumentForm";
+
+import "./Logs.scss";
+import { downloadDocument } from "@/api/documents/documentsApi";
+import Input from "@/components/generics/input/Input";
+import Spinner from "@/components/generics/spinner/Spinner";
+import Tag from "@/components/generics/tag/Tag";
+import Tooltip from "@/components/generics/tooltip/Tooltip";
+import { Pagination } from "@/components/views/pagination/Pagination";
+import { SortDirectionsTooltipMap, StatusMap } from "@/shared/constants";
+import { GoSearch, GoDownload, GoTrash, GoTriangleUp, GoTriangleDown } from "react-icons/go";
+import { useGetLogs } from "@/api/logs/hooks";
+import { GetLogsRequestParams, LogItemType, SortDirections } from "@/api/logs/types";
+import Documents from "../documentsPage/Documents";
+import LogDetailsModal from "./LogDetailsModal";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+const Logs: FC = () => {
+  const [page, setPage] = useState<number>(0);
+  const [pageSize, setPageSize] = useState<number>(50);
+  const [userInput, setUserInput] = useState<string | undefined>(undefined);
+  const [user, setUser] = useState<string | undefined>(undefined);
+  const [sort, setSort] = useState<undefined | { field: string; direction: SortDirections }[]>(undefined);
+  const [dateTo, setDateTo] = useState<Date | undefined>(undefined);
+  const [dateFrom, setDateFrom] = useState<Date | undefined>(undefined);
+  const { data: logsData, isLoading } = useGetLogs({
+    page, page_size: pageSize,
+    user_name: user, sort,
+    date_to: dateTo, date_from: dateFrom
+  });
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedLog, setSelectedLog] = useState<LogItemType | null>(null);
+
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // const handleFilterList = () => {
+  //   const localStartDate = dateFrom ? new Date(dateFrom) : undefined;
+  //   localStartDate?.setHours(0, 0, 0, 0);
+
+  //   const localEndDate = dateTo ? new Date(dateTo) : undefined;
+  //   localEndDate?.setHours(23, 59, 59, 999);
+
+  //   setDateFrom(localStartDate ? new Date(localStartDate) : undefined);
+  //   setDateTo(localEndDate ? new Date(localEndDate) : undefined);
+  //   setPage(0);
+  // };
+
+  const openDetailsModal = (log: LogItemType) => {
+    setSelectedLog(log)
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setSelectedLog(null);
+    setIsModalOpen(false);
+  };
+
+  const toggleSort = (field: string) => {
+    setSort((prevSort) => {
+      if (prevSort?.length && prevSort?.length > 0) {
+        const newSort = [...prevSort];
+        const existingFieldIndex = prevSort?.findIndex((e) => e.field === field);
+        const currentDirection = prevSort[existingFieldIndex]?.direction;
+
+        if (existingFieldIndex != null && existingFieldIndex !== -1) {
+          const newSort = [...prevSort];
+          if (currentDirection === SortDirections.asc) {
+            newSort[existingFieldIndex] = { field, direction: SortDirections.desc };
+            return newSort;
+          } else if (currentDirection === SortDirections.desc) {
+            newSort.splice(existingFieldIndex, 1);
+            return newSort;
+          }
+        } else {
+          newSort.push({ field, direction: SortDirections.asc });
+        }
+        return newSort;
+      } else {
+        return [{ field, direction: SortDirections.asc }];
+      }
+    });
+  };
+
+  const sorting = (field: string) => {
+    const currentDirection = sort?.find((e) => e.field === field)?.direction;
+
+    return (
+      <Tooltip text={SortDirectionsTooltipMap[currentDirection ?? "empty"]}>
+        <Button
+          onClick={() => toggleSort(field)}
+          icon={
+            <div className="sort-btn">
+              <GoTriangleUp viewBox="0 0 20 20" className={currentDirection === SortDirections.asc ? "active" : ""} />
+              <GoTriangleDown
+                viewBox="0 0 20 20"
+                className={currentDirection === SortDirections.desc ? "arrow-down active" : "arrow-down"}
+              />
+            </div>
+          }
+          buttonType="link"
+        />
+      </Tooltip>
+    );
+  };
+
+  // useEffect(() => {
+  //   if (
+  //     (!searchParams.get("datasetId") ||
+  //       !datasetsData?.find((e) => e.id.toString() == searchParams.get("datasetId"))) &&
+  //     datasetsData?.[0]?.id
+  //   ) {
+  //     setSearchParams({ datasetId: String(datasetsData?.[0]?.id) });
+  //   }
+  // }, [datasetsData, searchParams, setSearchParams]);
+
+  return (
+    <div className="documents-page">
+      <div className="date-filter">
+        <div className="date-picker-container">
+          <label htmlFor="startDate">Показать логи с</label>
+          <DatePicker
+            id="startDate"
+            dateFormat="dd/MM/yyyy"
+            selected={dateFrom}
+            onChange={(date) => setDateFrom(date ?? undefined)}
+            selectsStart
+            isClearable={true}
+            showIcon
+          />
+        </div>
+        <div className="date-picker-container">
+          <label htmlFor="endDate">по</label>
+          <DatePicker
+            id="endDate"
+            dateFormat="dd/MM/yyyy"
+            selected={dateTo}
+            onChange={(date) => setDateTo(date ?? undefined)}
+            selectsEnd
+            isClearable={true}
+            showIcon
+          />
+        </div>
+        {/* <Button name={"Показать"} onClick={handleFilterList} loading={isLoading} /> */}
+      </div>
+      <div className="docs-table-container" style={{ position: "relative" }}>
+        {isLoading && (
+          <div className="loading-overlay">
+            <Spinner />
+          </div>
+        )}
+        <table className="docs-table">
+          <thead>
+            <tr>
+              <th style={{ width: "50%" }}>
+                <div className="name-with-sort">
+                  <span>Время</span>
+                  {sorting("date_created")}
+                </div>
+              </th>
+              <th>
+                <div className="name-with-sort">
+                  <span>Пользователь</span>
+                </div>
+              </th>
+              <th>
+                <div className="name-with-sort">
+                  <span>Запрос</span>
+                </div>
+              </th>
+              <th>
+                <div className="name-with-sort">
+                  <span>Ответ</span>
+                </div>
+              </th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {logsData?.data.map((log) => (
+              <tr key={log.id} onClick={() => openDetailsModal(log)}>
+                <td>{log.date_created ? new Date(log.date_created).toLocaleDateString() : ''} {log.date_created ? new Date(log.date_created).toLocaleTimeString() : ''}</td>
+                <td>{log.user_name}</td>
+                <td className="ellipsis">{log.user_request}</td>
+                <td className="ellipsis">{log.llm_result}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <Pagination
+        total={logsData?.data.total ?? 0}
+        pageNumber={logsData?.data.page ? logsData?.data.page : page}
+        pageSize={logsData?.data.page_size ?? 50}
+        setPageSize={setPageSize}
+        setPage={setPage}
+      />
+      {selectedLog !== null ? (<LogDetailsModal
+        isOpen={isModalOpen}
+        onRequestClose={closeModal}
+        log={selectedLog}
+      />) : ''}
+
+    </div>
+  );
+};
+
+export default Logs;