@evergis/react 3.1.68 → 3.1.70

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { RemoteTaskStatus } from '@evergis/api';
+import { IconTypesKeys } from '@evergis/uilib-gl';
+export declare const StatusWaitingButton: FC<{
+    title: string;
+    icon: IconTypesKeys;
+    status: RemoteTaskStatus;
+    statusColors: Record<RemoteTaskStatus, string>;
+    isWaiting: boolean;
+    isDisabled: boolean;
+    onClick: VoidFunction;
+}>;

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

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

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

@@ -3,7 +3,7 @@ import { Projection } from 'mapbox-gl';
 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 { IconTypesKeys, IOption } from '@evergis/uilib-gl';
 import { FeatureAttributeValue, EditGeometryType, LayerInfo, ThemeName } from '../../types';
 import { InnerContainerProps } from './containers/DataSourceInnerContainer/types';
 export interface DashboardsProps {
@@ -115,7 +115,7 @@ export interface ConfigOptions {
     expanded?: boolean;
     expandLength?: number;
     wrap?: boolean;
-    icon?: string;
+    icon?: IconTypesKeys;
     iconUrl?: string;
     big?: boolean;
     bigIcon?: boolean;

package/dist/index.js

@@ -4888,13 +4888,14 @@ const usePythonTask = () => {
         const onNotification = ({ data }) => {
             if (data?.taskId === newTaskId) {
                 setStatus(data.status);
-                setLog([logRef.current, data.log].filter(Boolean).join("\n\n"));
+                setLog([logRef.current, data.log].filter(Boolean).join("\n"));
                 setExecutionTime(Date.now() - start);
+                setLoading(false);
                 setTaskId([api.RemoteTaskStatus.Completed, api.RemoteTaskStatus.Error].includes(data.status)
-                    ? undefined
+                    ? null
                     : newTaskId);
                 setSubscriptionId([api.RemoteTaskStatus.Completed, api.RemoteTaskStatus.Error].includes(data.status)
-                    ? undefined
+                    ? null
                     : newSubscriptionId);
                 if ([api.RemoteTaskStatus.Completed, api.RemoteTaskStatus.Error].includes(data.status)) {
                     unsubscribeById(newSubscriptionId);
@@ -6762,38 +6763,26 @@ 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};
+const StatusBadge = styled(uilibGl.Chip) `
+  background-color: ${({ bgColor }) => bgColor};
   color: ${({ theme }) => theme.palette.iconContrast};
-  border-radius: 0.25rem;
-`;
-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 TerminalWrapper = styled.div `
   flex: 1;
   overflow: hidden;
   padding: 0;
-  margin: 1rem;
+  margin: 0;
   box-sizing: border-box;
   min-height: 0;
 
-  & && .xterm-viewport {
+  .xterm-viewport {
     overflow-y: auto;
   }
+
+  .xterm-screen .xterm-rows span {
+    letter-spacing: 0 !important;
+  }
 `;
 
 const LogTerminal = ({ log }) => {
@@ -6810,15 +6799,16 @@ const LogTerminal = ({ log }) => {
         const terminal = new xterm.Terminal({
             cursorBlink: false,
             fontSize: 12,
-            fontFamily: '"Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace',
+            fontFamily: '"Nunito Sans", sans-serif',
+            scrollback: 10000,
+            convertEol: true,
+            lineHeight: 1.5,
+            letterSpacing: 0,
             theme: {
-                background: theme.palette.devBackgroundDark,
+                background: theme.palette.background,
                 foreground: theme.palette.textPrimary,
                 cursor: theme.palette.primary,
             },
-            scrollback: 10000,
-            convertEol: true,
-            lineHeight: 1.5,
         });
         // Create fit addon
         const fitAddon = new addonFit.FitAddon();
@@ -6902,9 +6892,9 @@ const STATUS_TRANSLATION_KEYS = {
     [api.RemoteTaskStatus.Error]: "taskError",
     [api.RemoteTaskStatus.Unknown]: "taskUnknown",
 };
-const STATUS_DEFAULT_VALUES = {
-    [api.RemoteTaskStatus.Process]: "Остановить",
-    [api.RemoteTaskStatus.Completed]: "Завершено",
+const STATUS_TITLES = {
+    [api.RemoteTaskStatus.Process]: "В процессе",
+    [api.RemoteTaskStatus.Completed]: "Выполнено",
     [api.RemoteTaskStatus.Error]: "Ошибка",
     [api.RemoteTaskStatus.Unknown]: "Неизвестно",
 };
@@ -6914,21 +6904,30 @@ const STATUS_COLORS = {
     [api.RemoteTaskStatus.Error]: "#f44336",
     [api.RemoteTaskStatus.Unknown]: "#757575",
 };
+const STATUS_ICONS = {
+    [api.RemoteTaskStatus.Process]: "loading_circle",
+    [api.RemoteTaskStatus.Completed]: "success",
+    [api.RemoteTaskStatus.Error]: "error",
+    [api.RemoteTaskStatus.Unknown]: "play",
+};
 
 const LogDialog = ({ isOpen, onClose, logs, status, statusColors }) => {
     const { t } = useGlobalContext();
-    const getStatusText = React.useCallback((status) => {
+    const getStatusTitle = 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];
+        const defaultValue = STATUS_TITLES[status] || STATUS_TITLES[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("taskLogs", { 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("taskStatus", { ns: "dashboard", defaultValue: "Статус" }), ": ", getStatusText(status)] }), jsxRuntime.jsx(LogTerminal, { log: logs || t("taskLogsEmpty", { ns: "dashboard", defaultValue: "Логи отсутствуют" }) })] }) })] }));
+    return (jsxRuntime.jsxs(uilibGl.Dialog, { isOpen: isOpen, onCloseRequest: onClose, modal: true, maxWidth: "800px", minWidth: "600px", minHeight: "600px", children: [jsxRuntime.jsx(uilibGl.DialogTitle, { children: jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(uilibGl.Flex, { alignItems: "center", children: [jsxRuntime.jsx(uilibGl.FlexSpan, { marginRight: "1rem", children: t("taskLogs", { ns: "dashboard", defaultValue: "Логи выполнения задачи" }) }), jsxRuntime.jsx(StatusBadge, { text: getStatusTitle(status), bgColor: getStatusColor(status) })] }), jsxRuntime.jsx(uilibGl.IconButton, { kind: "close", onClick: onClose })] }) }), jsxRuntime.jsx(uilibGl.DialogContent, { children: jsxRuntime.jsx(uilibGl.Flex, { flexDirection: "column", height: "100%", marginBottom: "2rem", children: jsxRuntime.jsx(LogTerminal, { log: logs || t("taskLogsEmpty", { ns: "dashboard", defaultValue: "Логи отсутствуют" }) }) }) })] }));
 };
 
-const StatusWaitingButton = styled(uilibGl.WaitingButton) `
+const StyledButton = styled(uilibGl.FlatButton) `
+  display: flex;
+  align-items: center;
+  
   ${({ status = api.RemoteTaskStatus.Unknown, statusColors }) => !!statusColors?.[status] && styled.css `
     transition: background-color ${uilibGl.transition.toggle};
     background-color: ${statusColors[status]};
@@ -6939,6 +6938,21 @@ const StatusWaitingButton = styled(uilibGl.WaitingButton) `
   `}
 `;
 
+const StatusWaitingButton = ({ title, icon = "play", status, statusColors, isWaiting, isDisabled, onClick }) => {
+    const { t } = useGlobalContext();
+    const renderTitle = React.useMemo(() => status === api.RemoteTaskStatus.Process
+        ? t("", { ns: "dashboard", defaultValue: "Остановить" })
+        : status === api.RemoteTaskStatus.Unknown ? title : STATUS_TITLES[status], [status, t, title]);
+    const renderIcon = React.useMemo(() => {
+        const iconComponent = isWaiting ? (jsxRuntime.jsx(uilibGl.CircularProgress, { diameter: 1, theme: uilibGl.darkTheme }))
+            : status !== api.RemoteTaskStatus.Unknown
+                ? jsxRuntime.jsx(uilibGl.Icon, { kind: STATUS_ICONS[status] })
+                : jsxRuntime.jsx(uilibGl.Icon, { kind: icon });
+        return (jsxRuntime.jsx(uilibGl.FlexSpan, { marginRight: renderTitle ? "0.5rem" : 0, children: iconComponent }));
+    }, [icon, isWaiting, renderTitle, status]);
+    return (jsxRuntime.jsxs(StyledButton, { status: status, statusColors: statusColors, disabled: isDisabled, onClick: onClick, children: [renderIcon, renderTitle] }));
+};
+
 const TaskContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { t, ewktGeometry } = useGlobalContext();
     const { dataSources, filters: selectedFilters } = useWidgetContext(type);
@@ -6962,7 +6976,7 @@ const TaskContainer = React.memo(({ type, elementConfig, renderElement }) => {
             return runTask({ resourceId, parameters: newParams, script, fileName, methodName });
         }));
     }, [currentPage.filters, dataSources, ewktGeometry, relatedResources, runTask, selectedFilters, stopTask, taskId]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: center ? "center" : "flex-start", children: [jsxRuntime.jsxs(StatusWaitingButton, { primary: true, status: status, statusColors: statusColors, isWaiting: loading || !!taskId, 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.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.IconButton, { kind: "info", onClick: openLog }), jsxRuntime.jsx(LogDialog, { logs: log, status: status, statusColors: statusColors, isOpen: isLogDialogOpen, onClose: closeLog })] }))] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: center ? "center" : "flex-start", children: [jsxRuntime.jsx(StatusWaitingButton, { title: title || t("run", { ns: "dashboard", defaultValue: "Запуск" }), icon: icon, status: status, statusColors: statusColors, isWaiting: loading || !!taskId, isDisabled: !relatedResources?.length, onClick: onClick }), !!(log || taskId) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.IconButton, { kind: "info", onClick: openLog }), jsxRuntime.jsx(LogDialog, { logs: log, status: status, statusColors: statusColors, isOpen: isLogDialogOpen, onClose: closeLog })] }))] })] }));
 });
 
 const containerComponents = {