@danikokonn/yarik-frontend-lib 2.0.54 → 2.0.55

package/dist/components/SubtaskItem/SubtaskItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubtaskItem.d.ts","sourceRoot":"","sources":["../../../src/components/SubtaskItem/SubtaskItem.tsx"],"names":[],"mappings":"AAgBA,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,uBAAuB,GACxB,EAAE,gBAAgB,2CAuJlB"}
+{"version":3,"file":"SubtaskItem.d.ts","sourceRoot":"","sources":["../../../src/components/SubtaskItem/SubtaskItem.tsx"],"names":[],"mappings":"AAgBA,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAiBlD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,uBAAuB,GACxB,EAAE,gBAAgB,2CAwIlB"}

package/dist/components/SubtaskItem/SubtaskItem.js

@@ -13,24 +13,24 @@ import CircularProgress from "@mui/material/CircularProgress";
 import { taskStateText } from "../../utils";
 import moment from "moment";
 import { useState } from "react";
+const SubtaskState = ({ state }) => {
+    switch (state) {
+        case "success":
+            return _jsx(CheckCircleOutlineRoundedIcon, { color: "success" });
+        case "failed":
+            return _jsx(ErrorOutlineSharpIcon, { color: "error" });
+        case "queued":
+            return _jsx(AccessTimeSharpIcon, {});
+        case "running":
+            return _jsx(CircularProgress, { size: 20 });
+        default:
+            return _jsx(BlockSharpIcon, {});
+    }
+};
 export default function SubtaskItem({ taskInstance, logs, expanded, onShowLogs, expandedLogContainerRef, }) {
     const [copyVisible, setCopyVisible] = useState(false);
     const [copyText, setCopyText] = useState("Копировать");
     const theme = useTheme();
-    const subtaskState = (state) => {
-        switch (state) {
-            case "success":
-                return _jsx(CheckCircleOutlineRoundedIcon, { color: "success" });
-            case "failed":
-                return _jsx(ErrorOutlineSharpIcon, { color: "error" });
-            case "queued":
-                return _jsx(AccessTimeSharpIcon, {});
-            case "running":
-                return _jsx(CircularProgress, { size: 20 });
-            default:
-                return _jsx(BlockSharpIcon, {});
-        }
-    };
     const formatEndDate = new Date(taskInstance.executionDate).toLocaleString("ru", {
         weekday: "short",
         month: "short",
@@ -59,7 +59,7 @@ export default function SubtaskItem({ taskInstance, logs, expanded, onShowLogs,
                     setCopyText("Копировать");
                 },
             },
-        }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), children: _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [subtaskState(taskInstance.state), _jsxs("span", { children: [taskInstance.taskId, " - ", taskStateText(taskInstance.state), taskInstance.state === "success"
+        }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), children: _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [_jsx(SubtaskState, { state: taskInstance.state }), _jsxs("span", { children: [taskInstance.taskId, " - ", taskStateText(taskInstance.state), taskInstance.state === "success"
                                     ? (formatEndDate.startsWith("вт") ? " во " : " в ") +
                                         formatEndDate +
                                         " за " +

package/dist/components/TaskLoader/TaskLoader.d.ts

@@ -1,3 +1,4 @@
 import TaskLoaderProps from "./TaskLoaderProps";
-export default function TaskLoader({ style, subTitle, onUnauthorized, }: TaskLoaderProps): import("react/jsx-runtime").JSX.Element;
+declare const TaskLoader: ({ style, subTitle, onUnauthorized }: TaskLoaderProps) => import("react/jsx-runtime").JSX.Element;
+export default TaskLoader;
 //# sourceMappingURL=TaskLoader.d.ts.map

package/dist/components/TaskLoader/TaskLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskLoader.d.ts","sourceRoot":"","sources":["../../../src/components/TaskLoader/TaskLoader.tsx"],"names":[],"mappings":"AA8BA,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAiBhD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,cAAc,GACf,EAAE,eAAe,2CA4ZjB"}
+{"version":3,"file":"TaskLoader.d.ts","sourceRoot":"","sources":["../../../src/components/TaskLoader/TaskLoader.tsx"],"names":[],"mappings":"AAgCA,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAqBhD,QAAA,MAAM,UAAU,GAAI,qCAAqC,eAAe,4CA2avE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/TaskLoader/TaskLoader.js

@@ -7,16 +7,18 @@ import RestartAltIcon from "@mui/icons-material/RestartAlt";
 import StopRoundedIcon from "@mui/icons-material/StopRounded";
 import SyncIcon from "@mui/icons-material/Sync";
 import CircularProgress from "@mui/material/CircularProgress";
+import FormControlLabel from "@mui/material/FormControlLabel";
 import IconButton from "@mui/material/IconButton";
+import Switch from "@mui/material/Switch";
 import Typography from "@mui/material/Typography";
-import React, { useState } from "react";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
 import { getRequest, postRequest } from "../../http";
 import { useAirflowContext } from "../../providers/AirflowProvider";
 import { useDagRunStateContext } from "../../providers/DagStateProvider";
 import { formatDate, formatDuration, getCSRFToken, taskStateText, useDebounce, } from "../../utils";
 import ProcessingIcon from "../icons/ProcessingIcon";
 import SubtaskItem from "../SubtaskItem/SubtaskItem";
-const taskStateIcon = (taskState) => {
+const TaskStateIcon = ({ taskState, }) => {
     switch (taskState) {
         case "success":
             return _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "large", color: "success" });
@@ -30,24 +32,26 @@ const taskStateIcon = (taskState) => {
             return _jsx(BlockSharpIcon, { fontSize: "large" });
     }
 };
-export default function TaskLoader({ style, subTitle, onUnauthorized, }) {
+const TaskLoader = ({ style, subTitle, onUnauthorized }) => {
     const { airflowAvailable, onLostConnection } = useAirflowContext();
     const { isActive, dagRun, taskInstances, onUpdateState, fetchState } = useDagRunStateContext();
-    const [activeTask, setActiveTask] = React.useState(taskInstances?.taskInstances.find((ti) => {
+    const [activeTask, setActiveTask] = useState(taskInstances?.taskInstances.find((ti) => {
         return ti.state === "running";
     }) || null);
-    const [logs, setLogs] = React.useState([null, null, null]);
+    const [logs, setLogs] = useState([null, null, null]);
     const [blockContols, setBlockControls] = useState(false);
-    const logContainerRef = React.useRef(null);
-    React.useEffect(() => {
-        if (logContainerRef.current != null) {
+    const [followLogs, setFollowLogs] = useState(true);
+    const logContainerRef = useRef(null);
+    const scrollDown = useEffectEvent(() => {
+        if (logContainerRef.current != null && followLogs) {
             logContainerRef.current.scrollTo({
                 left: 0,
                 top: logContainerRef.current.scrollHeight,
                 behavior: "smooth",
             });
         }
-    }, [activeTask, logs]);
+    });
+    useEffect(() => scrollDown(), [activeTask, logs]);
     const updateActiveTask = () => {
         const newActiveTask = taskInstances?.taskInstances.find((ti) => {
             return ti.state === "running";
@@ -60,22 +64,24 @@ export default function TaskLoader({ style, subTitle, onUnauthorized, }) {
             setActiveTask(newActiveTask);
         }
     };
-    React.useEffect(() => {
+    useEffect(() => {
         if (isActive) {
+            setFollowLogs(true);
             setLogs([null, null, null]);
         }
     }, [isActive]);
-    React.useEffect(() => {
+    useEffect(() => {
         const interval = setInterval(() => {
             if (!isActive)
                 return;
-            updateActiveTask();
+            if (followLogs)
+                updateActiveTask();
         }, 100);
         return () => {
             clearInterval(interval);
         };
     }, [isActive, taskInstances]);
-    React.useEffect(() => {
+    useEffect(() => {
         const interval = setInterval(() => {
             if (!airflowAvailable)
                 return;
@@ -130,7 +136,7 @@ export default function TaskLoader({ style, subTitle, onUnauthorized, }) {
             clearInterval(interval);
         };
     }, [isActive, activeTask, dagRun, taskInstances, logs]);
-    function handleShowLogs(taskId, tryNum) {
+    const handleShowLogs = (taskId, tryNum) => {
         if (!airflowAvailable)
             return;
         if (activeTask != null && taskId === activeTask.taskId) {
@@ -167,8 +173,8 @@ export default function TaskLoader({ style, subTitle, onUnauthorized, }) {
                 }
             },
         });
-    }
-    function handleRestartLoad() {
+    };
+    const handleRestartLoad = () => {
         if (!airflowAvailable)
             return;
         postRequest({
@@ -198,7 +204,7 @@ export default function TaskLoader({ style, subTitle, onUnauthorized, }) {
                 }
             },
         });
-    }
+    };
     const handleStopLoad = useDebounce(() => {
         if (!airflowAvailable)
             return;
@@ -233,7 +239,8 @@ export default function TaskLoader({ style, subTitle, onUnauthorized, }) {
         });
     }, 200);
     const formatEndDate = formatDate(dagRun?.logicalDate || "");
-    const formatTaskDuration = formatDuration(taskInstances?.taskInstances.reduce((a, b) => a + (b.duration || 0), 0) || 0);
+    const formatTaskDuration = formatDuration(taskInstances?.taskInstances.reduce((a, b) => a + (b.duration || 0), 0) ||
+        0);
     const activeTaskElem = taskInstances?.taskInstances.find((ti) => {
         return activeTask && ti.taskId === activeTask.taskId;
     });
@@ -268,7 +275,7 @@ export default function TaskLoader({ style, subTitle, onUnauthorized, }) {
                                         width: "auto",
                                         whiteSpace: "nowrap",
                                         overflow: "hidden",
-                                    }, children: _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [taskStateIcon(dagRun?.state), " ", _jsxs("span", { children: [taskStateText(dagRun?.state), dagRun?.state === "success"
+                                    }, children: _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [_jsx(TaskStateIcon, { taskState: dagRun?.state }), _jsxs("span", { children: [taskStateText(dagRun?.state), dagRun?.state === "success"
                                                         ? (formatEndDate.startsWith("вт") ? " во " : " в ") +
                                                             formatEndDate +
                                                             " за " +
@@ -279,7 +286,7 @@ export default function TaskLoader({ style, subTitle, onUnauthorized, }) {
                                             width: "auto",
                                             flex: "0 0 auto",
                                             gap: "0.25rem",
-                                        }, children: [_jsx(IconButton, { id: "updateTaskStateBtn", color: "default", title: "\u041E\u0431\u043D\u043E\u0432\u0438\u0442\u044C \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u0435", size: "small", onClick: (e) => {
+                                        }, children: [_jsx(FormControlLabel, { control: _jsx(Switch, { checked: followLogs, onChange: (_, c) => setFollowLogs(c) }), label: "\u0421\u043B\u0435\u0434\u043E\u0432\u0430\u0442\u044C" }), _jsx(IconButton, { id: "updateTaskStateBtn", color: "default", title: "\u041E\u0431\u043D\u043E\u0432\u0438\u0442\u044C \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u0435", size: "small", onClick: (e) => {
                                                     setBlockControls(true);
                                                     handleClick(e.currentTarget, () => {
                                                         fetchState();
@@ -317,4 +324,5 @@ export default function TaskLoader({ style, subTitle, onUnauthorized, }) {
             }
           }
         ` })] }));
-}
+};
+export default TaskLoader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danikokonn/yarik-frontend-lib",
-  "version": "2.0.54",
+  "version": "2.0.55",
   "license": "Apache-2.0",
   "description": "",
   "author": "",