feat: query issues displaying

Author: Raubzeug

src/assets/icons/circle-exclamation.svg

@@ -0,0 +1,7 @@
+.kv-shorty-string {
+    &__toggle {
+        margin-left: 2em;
+
+        font-size: 0.85em;
+    }
+}

src/assets/icons/circle-info.svg

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import cn from 'bem-cn-lite';
+
+import {Link} from '@yandex-cloud/uikit';
+
+import './ShortyString.scss';
+
+const block = cn('kv-shorty-string');
+
+type Props = {
+    value?: string;
+    limit?: number;
+    displayLength?: boolean;
+    render?: (value: string) => React.ReactNode;
+    onToggle?: () => void;
+    expandLabel?: string;
+    collapseLabel?: string;
+};
+
+export default function ShortyString({
+    value = '',
+    limit = 200,
+    displayLength = true,
+    render = (v: string) => v,
+    onToggle,
+    expandLabel = 'Show more',
+    collapseLabel = 'Show less',
+}: Props) {
+    const [expanded, setExpanded] = React.useState(false);
+    const hasToggle = value.length > limit;
+    const length =
+        displayLength && !expanded ? `(${value.length} symbols)` : undefined;
+
+    const text = expanded || value.length <= limit ? value : value.slice(0, limit - 4) + '\u00a0...';
+    const label = expanded ? collapseLabel : expandLabel;
+    return (
+        <div className={block()}>
+            {render(text)}
+            {hasToggle ? (
+                <Link
+                    className={block('toggle')}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        setExpanded((v) => !v);
+                        onToggle?.();
+                    }}
+                >
+                    {label} {length}
+                </Link>
+            ) : null}
+        </div>
+    );
+}

src/assets/icons/circle-xmark.svg

@@ -105,7 +105,7 @@ function HotKeys({
 
     const renderContent = () => {
         if (error) {
-            return error.data;
+            return error.data?.error?.message || error.data || error;
         }
         return data !== null ? (
             <div className={b('table-content')}>

src/assets/icons/triangle-exclamation.svg

@@ -8,7 +8,7 @@ import {changeUserInput} from '../../../../store/reducers/executeQuery';
 import {sendQuery, setQueryOptions} from '../../../../store/reducers/executeTopQueries';
 import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {AutoFetcher} from '../../../../utils/autofetcher';
-import { OLAP_STORE_TYPE, OLAP_TABLE_TYPE } from '../../Tenant';
+import {OLAP_STORE_TYPE, OLAP_TABLE_TYPE} from '../../Tenant';
 
 import './TopQueries.scss';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
@@ -151,7 +151,7 @@ class TopQueries extends React.Component {
         if (type === OLAP_STORE_TYPE || type === OLAP_TABLE_TYPE) {
             message = 'No data';
         } else if (error && !error.isCancelled) {
-            message = (error.data || error).slice(0, 300);
+            message = (error.data?.error?.message || error.data || error).slice(0, 300);
         } else if (!loading && !data) {
             message = 'No data';
         }

src/components/ShortyString/ShortyString.scss

@@ -14,7 +14,7 @@ import HistoryContext from '../../../../contexts/HistoryContext';
 import './TopShards.scss';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import {Loader} from '@yandex-cloud/uikit';
-import { OLAP_STORE_TYPE, OLAP_TABLE_TYPE } from '../../Tenant';
+import {OLAP_STORE_TYPE, OLAP_TABLE_TYPE} from '../../Tenant';
 
 const b = cn('top-shards');
 const bLink = cn('yc-link');
@@ -123,7 +123,7 @@ function TopShards({
             return 'No data';
         }
         if (error) {
-            return error.data || error;
+            return error.data?.error?.message || error.data || error;
         }
 
         return data && data.length > 0 ? (

src/components/ShortyString/ShortyString.tsx

@@ -163,7 +163,11 @@ class Preview extends React.Component {
         }
 
         if (error) {
-            message = <div className={b('message-container')}>{error.data || error}</div>;
+            message = (
+                <div className={b('message-container')}>
+                    {error.data?.error?.message || error.data || error}
+                </div>
+            );
         }
 
         if (!loading && data.length === 0) {