fix(style): hide table cell content if too long

src/components/auto-tooltip/index.tsx

@@ -1,4 +1,4 @@
-import { Tag, Tooltip } from 'antd';
+import { Tag, Tooltip, type TagProps } from 'antd';
 import debounce from 'lodash/debounce';
 import React, {
   useCallback,
@@ -8,12 +8,15 @@ import React, {
   useState
 } from 'react';
 
-interface AutoTooltipProps extends React.ComponentProps<typeof Tag> {
+// type TagProps = React.ComponentProps<typeof Tag>;
+
+interface AutoTooltipProps extends Omit<TagProps, 'title'> {
   children: React.ReactNode;
   maxWidth?: number | string;
   color?: string;
   style?: React.CSSProperties;
   ghost?: boolean;
+  title?: React.ReactNode;
   showTitle?: boolean;
 }
 
@@ -21,6 +24,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   children,
   maxWidth = '100%',
   ghost = false,
+  title,
   showTitle = false,
   ...tagProps
 }) => {
@@ -64,7 +68,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   );
 
   return (
-    <Tooltip title={isOverflowing || showTitle ? children : ''}>
+    <Tooltip title={isOverflowing || showTitle ? title || children : ''}>
       {ghost ? (
         <div ref={contentRef} style={tagStyle}>
           {children}

src/components/label-selector/label-item.tsx

@@ -77,6 +77,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
             title={intl.formatMessage({ id: 'resources.table.key.tips' })}
           >
             <SealInput.Input
+              checkStatus="success"
               label={intl.formatMessage({ id: 'common.input.key' })}
               value={label.key}
               onChange={handleOnKeyChange}
@@ -89,6 +90,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
       <div className="label-value">
         {valueAddon ?? (
           <SealInput.Input
+            checkStatus={label.value ? 'success' : ''}
             label={intl.formatMessage({ id: 'common.input.value' })}
             value={label.value}
             onChange={handleOnValueChange}

src/components/logs-viewer/index.less

@@ -26,11 +26,11 @@
   }
 
   .xterm {
-    height: 100% !important;
+    // height: 100% !important;
 
     .xterm-viewport {
       overflow-y: auto !important;
-      // custom scrollbar
+
       &::-webkit-scrollbar {
         width: var(--scrollbar-size);
         height: var(--scrollbar-size);

src/components/logs-viewer/index.tsx

@@ -26,7 +26,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   const [logs, setLogs] = useState('');
   const size = useSize(scroller);
 
-  const throttleScroll = _.debounce(() => {
+  const throttleScroll = _.throttle(() => {
     termRef.current?.scrollToBottom?.();
   }, 100);
 
@@ -36,6 +36,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
       termRef.current?.clear?.();
       cacheDataRef.current = data;
       termRef.current?.write?.(data);
+      setLogs(data);
     }, 100),
     []
   );
@@ -78,11 +79,11 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     termRef.current.open(termwrapRef.current);
 
     // add event
-    termRef.current.onLineFeed((e: any) => {
-      if (cacheDataRef.current) {
-        throttleScroll();
-      }
-    });
+    // termRef.current.onLineFeed((e: any) => {
+    //   if (cacheDataRef.current) {
+    //     throttleScroll();
+    //   }
+    // });
   };
 
   const handleResize = _.throttle(() => {
@@ -111,6 +112,10 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     }
   }, [size]);
 
+  useEffect(() => {
+    throttleScroll();
+  }, [logs]);
+
   return (
     <div className="logs-viewer-wrap-w2">
       <div className="wrap" style={{ height: height }} ref={scroller}>

src/components/seal-form/seal-input.tsx

@@ -17,6 +17,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
     isInFormItems = true,
     variant,
     addAfter,
+    checkStatus,
     trim = true,
     ...rest
   } = props;
@@ -70,7 +71,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
 
   return (
     <Wrapper
-      status={status}
+      status={checkStatus || status}
       label={label || (placeholder as string)}
       isFocus={isFocus}
       required={required}

src/components/seal-form/types.ts

@@ -9,4 +9,5 @@ export interface SealFormItemProps {
   addAfter?: React.ReactNode;
   loading?: React.ReactNode;
   trim?: boolean;
+  checkStatus?: 'success' | 'error' | 'warning' | '';
 }

src/components/seal-table/styles/cell.less

@@ -5,6 +5,7 @@
   align-items: center;
   justify-content: flex-start;
   height: 68px;
+  word-break: break-word;
 
   .cell-content {
     max-width: 100%;