feat(Queries): info nodes in query error [YTFRONT-4342]

ytsaurus · Nov 7, 2024 · c2f4f3f · c2f4f3f
1 parent 89c79a8
commit c2f4f3f
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 6 deletions.
diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorCloud.tsx b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorCloud.tsx
@@ -14,7 +14,7 @@ const block = cn('yt-error-cloud');
 
 type Props = {
     error: QueryError;
-    expanded: boolean;
+    initialExpanded: boolean;
     disableCloud: boolean;
     level: number;
     onErrorClick: (data: ErrorPosition) => void;
@@ -23,7 +23,7 @@ type Props = {
 };
 export const ErrorCloud: FC<Props> = (props) => {
     const {error, level, disableCloud, onErrorClick, onShowParent, fromCloud} = props;
-    const [expanded, toggleExpanded] = useToggle(props.expanded);
+    const [expanded, toggleExpanded] = useToggle(props.initialExpanded);
     const [extracted, setExtracted] = useState(0);
 
     const handleExtractLevel = useCallback(() => {

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorList.tsx b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/ErrorList.tsx
@@ -1,6 +1,7 @@
 import React, {FC} from 'react';
 import {ErrorPosition, QueryError} from '../../module/api';
 import {ErrorCloud} from './ErrorCloud';
+import {isInfoNode} from './helpers/isInfoNode';
 
 type Props = {
     errors: QueryError[];
@@ -29,7 +30,7 @@ export const ErrorList: FC<Props> = ({
                     level={level}
                     disableCloud={disableCloud && !(errors.length > 1)}
                     error={error}
-                    expanded={expanded}
+                    initialExpanded={isInfoNode(error) ? false : expanded}
                     onErrorClick={onErrorClick}
                     onShowParent={onShowParent}
                     fromCloud={fromCloud}

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
@@ -1,8 +1,16 @@
 .yt-error-tree-node {
+    $self: &;
+
     &_leaf {
         margin-left: 28px;
     }
 
+    &_info {
+        #{$self}__icon {
+            color: var(--g-color-text-info);
+        }
+    }
+
     &__errors {
         padding-left: 28px;
     }

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
@@ -3,6 +3,7 @@ import {ErrorPosition, QueryError} from '../../module/api';
 import {useToggle} from 'react-use';
 import {Button, Icon} from '@gravity-ui/uikit';
 import showParentIcon from '@gravity-ui/icons/svgs/arrow-up.svg';
+import CircleInfoFillIcon from '@gravity-ui/icons/svgs/circle-info-fill.svg';
 import {getIssuePosition} from '../helpers';
 import cn from 'bem-cn-lite';
 import {ErrorList} from './ErrorList';
@@ -15,6 +16,7 @@ import ChevronDownIcon from '@gravity-ui/icons/svgs/chevron-down.svg';
 import unipika from '../../../../common/thor/unipika';
 import Yson from '../../../../components/Yson/Yson';
 import {ClickableText} from '../../../../components/ClickableText/ClickableText';
+import {isInfoNode} from './helpers/isInfoNode';
 
 const block = cn('yt-error-tree-node');
 
@@ -41,6 +43,7 @@ export const ErrorTreeNode: FC<Props> = ({
     const [expandedAttributes, toggleExpandedAttributes] = useToggle(false);
     const hasIssues = error.inner_errors && error.inner_errors.length > 0;
     const position = getIssuePosition(error);
+    const isInfo = isInfoNode(error);
 
     const handleIssueClick = useCallback(() => {
         if (error.attributes?.start_position) {
@@ -49,7 +52,7 @@ export const ErrorTreeNode: FC<Props> = ({
     }, [error.attributes.start_position, onErrorClick]);
 
     return (
-        <div className={block({leaf: !hasIssues})}>
+        <div className={block({leaf: !hasIssues, info: isInfo})}>
             <div className={block('error-body')}>
                 <div className={block('line')}>
                     {hasIssues && (
@@ -64,8 +67,12 @@ export const ErrorTreeNode: FC<Props> = ({
                         </Button>
                     )}
                     <span className={block('header')}>
-                        <Icon className={block('icon')} data={errorIcon} size={16} />
-                        <span className={block('title')}>Error</span>
+                        <Icon
+                            className={block('icon')}
+                            data={isInfo ? CircleInfoFillIcon : errorIcon}
+                            size={16}
+                        />
+                        <span className={block('title')}>{isInfo ? 'Info' : 'Error'}</span>
                         <Button view="flat-secondary" onClick={toggleExpandedAttributes}>
                             Attributes{' '}
                             <Icon

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/helpers/isInfoNode.ts b/packages/ui/src/ui/pages/query-tracker/QueryResults/ErrorTree/helpers/isInfoNode.ts
@@ -0,0 +1,7 @@
+import {QueryError} from '../../../module/api';
+
+const INFO_NODE_SEVERITY = 'Info';
+
+export const isInfoNode = (node: QueryError) => {
+    return node.attributes.severity === INFO_NODE_SEVERITY;
+};