@evergis/react 3.1.65 → 3.1.67

package/dist/components/Dashboard/containers/TaskContainer/components/LogDialog/constants.d.ts

@@ -0,0 +1,4 @@
+import { RemoteTaskStatus } from '@evergis/api';
+export declare const STATUS_TRANSLATION_KEYS: Partial<Record<RemoteTaskStatus, string>>;
+export declare const STATUS_DEFAULT_VALUES: Partial<Record<RemoteTaskStatus, string>>;
+export declare const STATUS_COLORS: Partial<Record<RemoteTaskStatus, string>>;

package/dist/components/Dashboard/containers/TaskContainer/components/LogDialog/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { LogDialogProps } from './types';
+export declare const LogDialog: FC<LogDialogProps>;

package/dist/components/Dashboard/containers/TaskContainer/components/LogDialog/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const StatusBadge: import('styled-components').StyledComponent<"div", any, import('@evergis/uilib-gl').FlexProps & {
+    $statusColor: string;
+}, never>;
+export declare const LogContainer: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/components/Dashboard/containers/TaskContainer/components/LogDialog/types.d.ts

@@ -0,0 +1,8 @@
+import { RemoteTaskStatus } from '@evergis/api';
+export interface LogDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    logs: string | null;
+    status: RemoteTaskStatus;
+    statusColors?: Record<RemoteTaskStatus, string>;
+}

package/dist/components/Dashboard/containers/TaskContainer/styled.d.ts

@@ -0,0 +1,5 @@
+import { RemoteTaskStatus } from '@evergis/api';
+export declare const StatusWaitingButton: import('styled-components').StyledComponent<import('react').FC<import('@evergis/uilib-gl').IWaitingButton>, any, {
+    status?: RemoteTaskStatus;
+    statusColors?: Record<RemoteTaskStatus, string>;
+}, never>;

package/dist/components/Dashboard/types.d.ts

@@ -1,11 +1,11 @@
 import { CSSProperties, FC, ReactNode } from 'react';
 import { Projection } from 'mapbox-gl';
-import { AttributeDefinitionDc, AttributeFormatDefinitionDc, AttributeType, EqlRequestDc, FeatureDc, GeometryType, PagedFeaturesListDc, PositionDc, StringSubType } from '@evergis/api';
+import { i18n } from 'i18next';
+import { AttributeDefinitionDc, AttributeFormatDefinitionDc, AttributeType, EqlRequestDc, FeatureDc, GeometryType, PagedFeaturesListDc, PositionDc, RemoteTaskStatus, StringSubType } from '@evergis/api';
 import { PieChartData, BarChartMarker } from '@evergis/charts';
 import { IOption } from '@evergis/uilib-gl';
 import { FeatureAttributeValue, EditGeometryType, LayerInfo, ThemeName } from '../../types';
 import { InnerContainerProps } from './containers/DataSourceInnerContainer/types';
-import { i18n } from 'i18next';
 export interface DashboardsProps {
     zIndex?: CSSProperties["zIndex"];
 }
@@ -46,6 +46,7 @@ export interface ConfigOptions {
     relatedDataSources?: ConfigRelatedDataSource[];
     relatedAttributes?: ConfigRelatedAttribute[];
     relatedResources?: ConfigRelatedResource[];
+    statusColors?: Record<RemoteTaskStatus, string>;
     chartType?: "bar" | "line" | "pie" | "stack";
     layerNames?: string[];
     layerName?: string;

package/dist/hooks/task/usePythonTask.d.ts

@@ -1,4 +1,6 @@
+import { RemoteTaskStatus } from '@evergis/api';
 export declare const usePythonTask: () => {
+    taskId: string;
     runTask: ({ resourceId, parameters, script, fileName, methodName, }: {
         resourceId: string;
         parameters: Record<string, unknown>;
@@ -7,8 +9,12 @@ export declare const usePythonTask: () => {
         methodName?: string;
     }) => Promise<void>;
     stopTask: () => Promise<void>;
+    openLog: () => void;
     result: string;
     error: Error;
+    status: RemoteTaskStatus;
     loading: boolean;
     executionTime: number;
+    isLogDialogOpen: boolean;
+    closeLog: () => void;
 };

package/dist/index.js

@@ -4827,22 +4827,28 @@ const SERVER_NOTIFICATION_EVENT = {
 const usePythonTask = () => {
     const { api: api$1, t } = useGlobalContext();
     const { addSubscription, connection, unsubscribeById } = useServerNotificationsContext();
+    const [status, setStatus] = React.useState(api.RemoteTaskStatus.Unknown);
     const [result, setResult] = React.useState(null);
     const [error, setError] = React.useState(null);
     const [loading, setLoading] = React.useState(false);
     const [executionTime, setExecutionTime] = React.useState(null);
     const [taskId, setTaskId] = React.useState(null);
     const [subscriptionId, setSubscriptionId] = React.useState(null);
+    const [isLogDialogOpen, setIsLogDialogOpen] = React.useState(false);
+    const resultRef = React.useRef(null);
     const reset = React.useCallback(() => {
-        setResult(null);
+        setStatus(api.RemoteTaskStatus.Unknown);
         setError(null);
-        setLoading(true);
+        setLoading(false);
         setExecutionTime(null);
         setTaskId(null);
         setSubscriptionId(null);
     }, []);
     const runTask = React.useCallback(async ({ resourceId, parameters, script, fileName, methodName, }) => {
         reset();
+        setStatus(api.RemoteTaskStatus.Process);
+        setResult(null);
+        setLoading(true);
         const start = Date.now();
         let prototypeId = await api$1.remoteTaskManager.createTaskPrototype({
             enabled: true,
@@ -4865,6 +4871,7 @@ const usePythonTask = () => {
         prototypeId = prototypeId.replace(/["']+/g, "");
         const { id: newTaskId, success } = await api$1.remoteTaskManager.startTask1(prototypeId);
         if (!success) {
+            setStatus(api.RemoteTaskStatus.Error);
             setResult(t("taskRunFail", { ns: "devMode", defaultValue: "Не удалось запустить задачу" }));
             setExecutionTime(Date.now() - start);
             setLoading(false);
@@ -4877,7 +4884,8 @@ const usePythonTask = () => {
         setSubscriptionId(newSubscriptionId);
         const onNotification = ({ data }) => {
             if (data?.taskId === newTaskId) {
-                setResult(`${data ? `${data}\n` : ""}${data.log || ""}`);
+                setStatus(data.status);
+                setResult([data.log, resultRef.current].filter(Boolean).join("\n\n"));
                 setError(null);
                 setExecutionTime(Date.now() - start);
                 setLoading(false);
@@ -4900,7 +4908,28 @@ const usePythonTask = () => {
         reset();
         unsubscribeById(subscriptionId);
     }, [api$1, reset, unsubscribeById, taskId, subscriptionId]);
-    return { runTask, stopTask, result, error, loading, executionTime };
+    const openLog = React.useCallback(() => {
+        setIsLogDialogOpen(true);
+    }, []);
+    const closeLog = React.useCallback(() => {
+        setIsLogDialogOpen(false);
+    }, []);
+    React.useEffect(() => {
+        resultRef.current = result;
+    }, [result]);
+    return {
+        taskId,
+        runTask,
+        stopTask,
+        openLog,
+        result,
+        error,
+        status,
+        loading,
+        executionTime,
+        isLogDialogOpen,
+        closeLog,
+    };
 };
 
 const useAppHeight = () => {
@@ -6732,13 +6761,83 @@ const UploadContainer = React.memo(({ type, elementConfig, renderElement }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && renderElement({ id: "uploader", wrap: false })] }));
 });
 
+const StatusBadge = styled(uilibGl.Flex) `
+  margin-bottom: 1rem;
+  padding: 0.5rem 1rem;
+  background-color: ${({ $statusColor }) => $statusColor};
+  color: ${({ theme }) => theme.palette.iconContrast};
+  border-radius: 0.25rem;
+`;
+const LogContainer = styled.div `
+  flex: 1;
+  padding: 1rem;
+  background-color: ${({ theme }) => theme.palette.element};
+  color: ${({ theme }) => theme.palette.textPrimary};
+  font-family: monospace;
+  font-size: 0.875rem;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  border-radius: 0.25rem;
+  max-height: 31.25rem;
+`;
+
+const STATUS_TRANSLATION_KEYS = {
+    [api.RemoteTaskStatus.Process]: "task.status.process",
+    [api.RemoteTaskStatus.Completed]: "task.status.completed",
+    [api.RemoteTaskStatus.Error]: "task.status.error",
+    [api.RemoteTaskStatus.Unknown]: "task.status.unknown",
+};
+const STATUS_DEFAULT_VALUES = {
+    [api.RemoteTaskStatus.Process]: "Выполняется...",
+    [api.RemoteTaskStatus.Completed]: "Завершено",
+    [api.RemoteTaskStatus.Error]: "Ошибка",
+    [api.RemoteTaskStatus.Unknown]: "Неизвестно",
+};
+const STATUS_COLORS = {
+    [api.RemoteTaskStatus.Process]: "#2196f3",
+    [api.RemoteTaskStatus.Completed]: "#4caf50",
+    [api.RemoteTaskStatus.Error]: "#f44336",
+    [api.RemoteTaskStatus.Unknown]: "#757575",
+};
+
+const LogDialog = ({ isOpen, onClose, logs, status, statusColors }) => {
+    const { t } = useGlobalContext();
+    const contentRef = React.useRef(null);
+    React.useEffect(() => {
+        if (contentRef.current) {
+            contentRef.current.scrollTop = 0;
+        }
+    }, [logs]);
+    const getStatusText = React.useCallback((status) => {
+        const translationKey = STATUS_TRANSLATION_KEYS[status] || STATUS_TRANSLATION_KEYS[api.RemoteTaskStatus.Unknown];
+        const defaultValue = STATUS_DEFAULT_VALUES[status] || STATUS_DEFAULT_VALUES[api.RemoteTaskStatus.Unknown];
+        return t(translationKey, { ns: "dashboard", defaultValue });
+    }, [t]);
+    const getStatusColor = React.useCallback((status) => {
+        return statusColors?.[status] || STATUS_COLORS[status] || STATUS_COLORS[api.RemoteTaskStatus.Unknown];
+    }, [statusColors]);
+    return (jsxRuntime.jsxs(uilibGl.Dialog, { isOpen: isOpen, onCloseRequest: onClose, modal: true, maxWidth: "800px", minWidth: "600px", minHeight: "400px", children: [jsxRuntime.jsx(uilibGl.DialogTitle, { children: jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsx("span", { children: t("task.logs.title", { ns: "dashboard", defaultValue: "Логи выполнения задачи" }) }), jsxRuntime.jsx(uilibGl.IconButton, { kind: "close", onClick: onClose })] }) }), jsxRuntime.jsx(uilibGl.DialogContent, { children: jsxRuntime.jsxs(uilibGl.Flex, { flexDirection: "column", height: "100%", marginBottom: "2rem", children: [jsxRuntime.jsxs(StatusBadge, { "$statusColor": getStatusColor(status), children: [t("task.status.label", { ns: "dashboard", defaultValue: "Статус" }), ": ", getStatusText(status)] }), jsxRuntime.jsx(LogContainer, { ref: contentRef, children: logs || t("task.logs.empty", { ns: "dashboard", defaultValue: "Логи отсутствуют" }) })] }) })] }));
+};
+
+const StatusWaitingButton = styled(uilibGl.WaitingButton) `
+  ${({ status = api.RemoteTaskStatus.Unknown, statusColors }) => !!statusColors?.[status] && styled.css `
+    transition: background-color ${uilibGl.transition.toggle};
+    background-color: ${statusColors[status]};
+    
+    :hover {
+      background-color: ${statusColors[status]};
+    }
+  `}
+`;
+
 const TaskContainer = React.memo(({ type, elementConfig }) => {
     const { t, ewktGeometry } = useGlobalContext();
     const { dataSources, filters: selectedFilters } = useWidgetContext(type);
     const { currentPage } = useWidgetPage(type);
-    const { runTask, loading } = usePythonTask();
+    const { taskId, runTask, stopTask, status, openLog, loading, isLogDialogOpen, closeLog, result } = usePythonTask();
     const { options } = elementConfig || {};
-    const { title, relatedResources, center, icon } = options || {};
+    const { title, relatedResources, center, icon, statusColors } = options || {};
     const onClick = React.useCallback(async () => {
         await Promise.all(relatedResources.map(({ resourceId, parameters, script, fileName, methodName }) => {
             const newParams = applyQueryFilters({
@@ -6751,7 +6850,7 @@ const TaskContainer = React.memo(({ type, elementConfig }) => {
             return runTask({ resourceId, parameters: newParams, script, fileName, methodName });
         }));
     }, [currentPage.filters, dataSources, ewktGeometry, relatedResources, runTask, selectedFilters]);
-    return (jsxRuntime.jsx(uilibGl.Flex, { justifyContent: center ? "center" : "flex-start", children: jsxRuntime.jsxs(uilibGl.WaitingButton, { primary: true, isWaiting: loading, disabled: !relatedResources?.length, onClick: onClick, children: [icon && jsxRuntime.jsx(uilibGl.FlexSpan, { marginRight: "0.5rem", children: jsxRuntime.jsx(uilibGl.Icon, { kind: icon }) }), title || t("run", { ns: "dashboard", defaultValue: "Запуск" })] }) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: center ? "center" : "flex-start", children: [jsxRuntime.jsxs(StatusWaitingButton, { primary: true, status: status, statusColors: statusColors, isWaiting: loading, disabled: !relatedResources?.length, onClick: onClick, children: [icon && jsxRuntime.jsx(uilibGl.FlexSpan, { marginRight: "0.5rem", children: jsxRuntime.jsx(uilibGl.Icon, { kind: icon }) }), title || t("run", { ns: "dashboard", defaultValue: "Запуск" })] }), !!taskId && (jsxRuntime.jsx(uilibGl.IconButton, { kind: "stop", onClick: stopTask })), !!result && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.IconButton, { kind: "info", onClick: openLog }), jsxRuntime.jsx(LogDialog, { isOpen: isLogDialogOpen, onClose: closeLog, logs: result, status: status, statusColors: statusColors })] }))] }) }));
 });
 
 const containerComponents = {