diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTree.tsx b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTree.tsx index f3b07d72a..19c66a2b0 100644 --- a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTree.tsx +++ b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTree.tsx @@ -1,8 +1,10 @@ -import React, {FC, useCallback} from 'react'; +import React, {FC, useCallback, useMemo} from 'react'; import {ErrorPosition, QueryError} from '../../module/api'; import {ErrorTreeNode} from './ErrorTreeNode'; import {useMonaco} from '../../hooks/useMonaco'; import {Position} from 'monaco-editor'; +import ClipboardButton from '../../../../components/ClipboardButton/ClipboardButton'; +import {Text} from '@gravity-ui/uikit'; type Props = { rootError?: QueryError; @@ -21,7 +23,17 @@ export const ErrorTree: FC = ({rootError}) => { [getEditor], ); - if (!rootError) return undefined; + const text = useMemo(() => { + return JSON.stringify(rootError, null, 4); + }, [rootError]); - return ; + if (!rootError) return null; + + return ( +
+ Query error{' '} + + +
+ ); }; diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.scss b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.scss index d7c411c53..d0ca8e112 100644 --- a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.scss +++ b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.scss @@ -4,14 +4,17 @@ } &__errors { - padding-left: 24px; + padding-left: 28px; + } + + &__error-body { + margin: 0 0 10px; + padding: 0 10px 0 0; } &__line { display: flex; align-items: flex-start; - margin: 0 0 10px; - padding: 0 10px 0 0; } &__place-text { diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.tsx b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.tsx index 74f1c79bd..85c8cd0ec 100644 --- a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.tsx +++ b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorTreeNode.tsx @@ -10,6 +10,10 @@ import {CollapsedString} from './CollapsedString'; import errorIcon from '@gravity-ui/icons/svgs/triangle-exclamation-fill.svg'; import './ErrorTreeNode.scss'; import {ExpandButton} from '../../../../components/ExpandButton'; +import ChevronUpIcon from '@gravity-ui/icons/svgs/chevron-up.svg'; +import ChevronDownIcon from '@gravity-ui/icons/svgs/chevron-down.svg'; +import unipika from '../../../../common/thor/unipika'; +import Yson from '../../../../components/Yson/Yson'; const block = cn('yt-error-tree-node'); @@ -32,7 +36,8 @@ export const ErrorTreeNode: FC = ({ onErrorClick, onShowParent, }) => { - const [expandedIssue, toggleExpanded] = useToggle(expanded); + const [expandedError, toggleExpandedError] = useToggle(expanded); + const [expandedAttributes, toggleExpandedAttributes] = useToggle(false); const hasIssues = error.inner_errors && error.inner_errors.length > 0; const position = getIssuePosition(error); @@ -44,43 +49,62 @@ export const ErrorTreeNode: FC = ({ return (
-
- {hasIssues && ( - - )} - {fromCloud && ( - - )} - - - Error - - {position ? ( - - - {position} - -
- -
- - ) : ( - -
- -
+
+
+ {hasIssues && ( + + )} + {fromCloud && ( + + )} + + + Error + + {position ? ( + + + {position} + +
+ +
+ + ) : ( + +
+ +
+
+ )} + {error.code ? Code: {error.code} : null} +
+ {expandedAttributes && ( + )} - {error.code ? Code: {error.code} : null}
- {hasIssues && expandedIssue && ( + {hasIssues && expandedError && (
diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResults/index.tsx b/packages/ui/src/ui/pages/query-tracker/QueryResults/index.tsx index 018bf7e5f..f39918e6a 100644 --- a/packages/ui/src/ui/pages/query-tracker/QueryResults/index.tsx +++ b/packages/ui/src/ui/pages/query-tracker/QueryResults/index.tsx @@ -49,8 +49,10 @@ export const QueryResults = React.memo(function QueryResults({ minimized: boolean; }) { const [tabs, setTab, {activeTabId, category, activeResultParams}] = useQueryResultTabs(query); + if (!query) return null; + const resultIndex = activeResultParams?.resultIndex; - return query ? ( + return (
@@ -100,7 +102,7 @@ export const QueryResults = React.memo(function QueryResults({
- ) : null; + ); }); interface PlanContainerProps {