diff --git a/lib/static/icons/word-wrap-icon.svg b/lib/static/icons/word-wrap-icon.svg new file mode 100644 index 000000000..d1ba474f9 --- /dev/null +++ b/lib/static/icons/word-wrap-icon.svg @@ -0,0 +1,6 @@ + + + diff --git a/lib/static/new-ui/components/ErrorInfo/index.module.css b/lib/static/new-ui/components/ErrorInfo/index.module.css index 64b7a44d8..08f68996a 100644 --- a/lib/static/new-ui/components/ErrorInfo/index.module.css +++ b/lib/static/new-ui/components/ErrorInfo/index.module.css @@ -6,6 +6,36 @@ overflow-x: scroll; overflow-y: hidden; background: #101827; +} + +.break-lines { + white-space: break-spaces; + word-wrap: break-word; +} + +.container { + position: relative; + background: #101827; border-radius: 10px; padding: 12px; + + &:hover { + .buttons { + opacity: 1; + } + } +} + +.buttons { + opacity: 0; + transition: opacity 0.1s ease-in-out; + position: absolute; + top: 12px; + right: 12px; + display: flex; + gap: 8px; +} + +.button { + background: #fff; } diff --git a/lib/static/new-ui/components/ErrorInfo/index.tsx b/lib/static/new-ui/components/ErrorInfo/index.tsx index 589ba991b..464e403d1 100644 --- a/lib/static/new-ui/components/ErrorInfo/index.tsx +++ b/lib/static/new-ui/components/ErrorInfo/index.tsx @@ -1,10 +1,12 @@ import ansiHtml from 'ansi-html-community'; import classNames from 'classnames'; import escapeHtml from 'escape-html'; -import React, {ReactNode} from 'react'; +import React, {ReactNode, useMemo, useState} from 'react'; +import {ClipboardButton, Button} from '@gravity-ui/uikit'; import styles from './index.module.css'; import stringify from 'json-stringify-safe'; +import WordWrapIcon from '@/static/icons/word-wrap-icon.svg'; interface ErrorInfoProps { name: unknown; @@ -14,6 +16,8 @@ interface ErrorInfoProps { } export function ErrorInfo(props: ErrorInfoProps): ReactNode { + const [breakLines, setBreakLines] = useState(false); + ansiHtml.setColors({ reset: ['eee', '00000000'] }); @@ -27,6 +31,26 @@ export function ErrorInfo(props: ErrorInfoProps): ReactNode { errorName = String(errorName); } } + const errorText = useMemo(() => ( + escapeHtml(errorName + '\n' + props.stack) + ), [errorName, props.stack]); - return
; + return ( +
+
+ + +
+
+
+ ); }