ui: Fix some known issues (#497)

Signed-off-by: Breezewish <me@breeswish.org>
pingcap · May 14, 2020 · 48d8a33 · 48d8a33
1 parent e0ecb32
commit 48d8a33
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 43 deletions.
diff --git a/ui/lib/apps/ClusterInfo/components/HostTable.tsx b/ui/lib/apps/ClusterInfo/components/HostTable.tsx
@@ -121,7 +121,7 @@ System: ${getValueFormat('percentunit')(system)}`
           pd: 0,
           tiflash: 0,
         }
-        return filterUniquePartitions(partitions).map((partition) => {
+        return filterUniquePartitions(partitions).map((partition, i) => {
           const currentMountPoint = partition.partition.path
           partitions.forEach((item) => {
             if (item.partition.path !== currentMountPoint) {
@@ -146,8 +146,8 @@ System: ${getValueFormat('percentunit')(system)}`
             ','
           )}: ${partition.partition.fstype.toUpperCase()} ${currentMountPoint}`
           return (
-            <Tooltip title={content}>
-              <span>{content}</span>
+            <Tooltip title={content} key={i}>
+              <div>{content}</div>
             </Tooltip>
           )
         })

diff --git a/ui/lib/apps/SearchLogs/components/Log.tsx b/ui/lib/apps/SearchLogs/components/Log.tsx
@@ -1,23 +1,22 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { TextWrap, Pre } from '@lib/components'
-import { useToggle } from '@umijs/hooks'
+
+import styles from './Styles.module.css'
 
 interface LogProps {
+  expanded: boolean
   log: string
 }
 
-export default function Log({ log }: LogProps) {
-  const { state: expanded, toggle: toggleExpanded } = useToggle(false)
-
-  const handleClick = () => {
-    toggleExpanded()
-  }
-
+export default function Log({ log, expanded }: LogProps) {
+  const handleClick = useCallback((ev: React.MouseEvent<HTMLDivElement>) => {
+    ev.stopPropagation()
+  }, [])
   return (
     <TextWrap
       multiline={expanded}
       onClick={handleClick}
-      style={{ cursor: 'pointer' }}
+      className={styles.logText}
     >
       <Pre>{log}</Pre>
     </TextWrap>

diff --git a/ui/lib/apps/SearchLogs/components/SearchResult.tsx b/ui/lib/apps/SearchLogs/components/SearchResult.tsx
@@ -3,11 +3,13 @@ import { ModelRequestTargetNode, LogsearchTaskModel } from '@lib/client'
 import { CardTableV2 } from '@lib/components'
 import { Alert } from 'antd'
 import moment from 'moment'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DATE_TIME_FORMAT, LogLevelMap, namingMap } from './utils'
 import Log from './Log'
 
+import styles from './Styles.module.css'
+
 type LogPreview = {
   key: number
   time?: string
@@ -27,6 +29,18 @@ function componentRender({ component: target }) {
   )
 }
 
+function Row({ renderer, props }) {
+  const [expanded, setExpanded] = useState(false)
+  const handleClick = useCallback(() => {
+    setExpanded((v) => !v)
+  }, [])
+  return (
+    <div onClick={handleClick} className={styles.logRow}>
+      {renderer({ ...props, item: { ...props.item, expanded } })}
+    </div>
+  )
+}
+
 interface Props {
   taskGroupID: number
   tasks: LogsearchTaskModel[]
@@ -73,33 +87,41 @@ export default function SearchResult({ taskGroupID, tasks }: Props) {
     getLogPreview()
   }, [taskGroupID, tasks])
 
+  const renderRow = useCallback((props, defaultRender) => {
+    if (!props) {
+      return null
+    }
+    return <Row renderer={defaultRender!} props={props} />
+  }, [])
+
   const columns = [
     {
       name: t('search_logs.preview.time'),
       key: 'time',
       fieldName: 'time',
-      minWidth: 160,
-      maxWidth: 300,
+      minWidth: 150,
+      maxWidth: 200,
     },
     {
       name: t('search_logs.preview.level'),
       key: 'level',
       fieldName: 'level',
       minWidth: 60,
-      maxWidth: 120,
+      maxWidth: 60,
     },
     {
       name: t('search_logs.preview.component'),
       key: 'component',
-      minWidth: 120,
-      maxWidth: 200,
+      minWidth: 100,
+      maxWidth: 100,
       onRender: componentRender,
     },
     {
       name: t('search_logs.preview.log'),
       key: 'log',
-      minWidth: 500,
-      onRender: ({ log }) => <Log log={log} />,
+      minWidth: 200,
+      maxWidth: 400,
+      onRender: ({ log, expanded }) => <Log log={log} expanded={expanded} />,
     },
   ]
   return (
@@ -117,6 +139,8 @@ export default function SearchResult({ taskGroupID, tasks }: Props) {
         columns={columns}
         items={logPreviews || []}
         style={{ marginTop: 0 }}
+        onRenderRow={renderRow}
+        extendLastColumn
       />
     </>
   )

diff --git a/ui/lib/apps/SearchLogs/components/Styles.module.css b/ui/lib/apps/SearchLogs/components/Styles.module.css
@@ -10,3 +10,11 @@
 .components > :global(div) {
   width: 100%;
 }
+
+.logText {
+  cursor: text;
+}
+
+.logRow {
+  cursor: pointer;
+}
diff --git a/ui/lib/components/CardTableV2/index.module.less b/ui/lib/components/CardTableV2/index.module.less
@@ -6,7 +6,15 @@
         > :first-child {
           padding-left: @padding-page;
         }
+      }
+    }
+  }
+}
 
+.cardTable.contentExtended {
+  :global {
+    .ms-DetailsRow {
+      > :first-child.ms-DetailsRow-fields {
         > :last-child {
           padding-right: @padding-page;
         }
@@ -24,14 +32,17 @@
         padding-left: @padding-page;
       }
 
-      > :nth-last-child(2) .ms-DetailsHeader-cellTitle {
-        padding-right: @padding-page;
-      }
+      // FIXME: For sticky headers, when there is `.contentExtended`, we
+      // need to add padding right.
 
-      &.is-resizingColumn > :nth-last-child(3) .ms-DetailsHeader-cellTitle {
-        // FIXME: This is highly magical
-        padding-right: @padding-page;
-      }
+      // > :nth-last-child(2) .ms-DetailsHeader-cellTitle {
+      //   padding-right: @padding-page;
+      // }
+
+      // &.is-resizingColumn > :nth-last-child(3) .ms-DetailsHeader-cellTitle {
+      //   // FIXME: This is highly magical
+      //   padding-right: @padding-page;
+      // }
     }
   }
 }

diff --git a/ui/lib/components/CardTableV2/index.tsx b/ui/lib/components/CardTableV2/index.tsx
@@ -13,8 +13,6 @@ import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky'
 import React, { useCallback, useMemo } from 'react'
 import { usePersistFn } from '@umijs/hooks'
 
-import { dummyColumn } from '@lib/utils/tableColumns'
-
 import AnimatedSkeleton from '../AnimatedSkeleton'
 import Card from '../Card'
 import styles from './index.module.less'
@@ -47,6 +45,7 @@ export interface ICardTableV2Props extends IDetailsListProps {
   cardExtra?: React.ReactNode
   cardNoMargin?: boolean
   cardNoMarginTop?: boolean
+  extendLastColumn?: boolean
 
   // The keys of visible columns. If null, all columns will be shown.
   visibleColumnKeys?: { [key: string]: boolean }
@@ -95,6 +94,16 @@ function useRenderClickableRow(onRowClicked) {
   )
 }
 
+function dummyColumn(): IColumn {
+  return {
+    name: '',
+    key: 'dummy',
+    minWidth: 28,
+    maxWidth: 28,
+    onRender: (_rec) => null,
+  }
+}
+
 function CardTableV2(props: ICardTableV2Props) {
   const {
     title,
@@ -105,6 +114,7 @@ function CardTableV2(props: ICardTableV2Props) {
     cardExtra,
     cardNoMargin,
     cardNoMarginTop,
+    extendLastColumn,
     visibleColumnKeys,
     visibleItemsCount,
     orderBy,
@@ -143,9 +153,18 @@ function CardTableV2(props: ICardTableV2Props) {
       onColumnClick,
       columnActionsMode: c.columnActionsMode || ColumnActionsMode.disabled,
     }))
-    newColumns.push(dummyColumn())
+    if (!extendLastColumn) {
+      newColumns.push(dummyColumn())
+    }
     return newColumns
-  }, [onColumnClick, columns, visibleColumnKeys, orderBy, desc])
+  }, [
+    onColumnClick,
+    columns,
+    visibleColumnKeys,
+    orderBy,
+    desc,
+    extendLastColumn,
+  ])
 
   const finalItems = useMemo(() => {
     let newItems = items || []
@@ -172,7 +191,9 @@ function CardTableV2(props: ICardTableV2Props) {
       title={title}
       subTitle={subTitle}
       style={style}
-      className={cx(styles.cardTable, className)}
+      className={cx(styles.cardTable, className, {
+        [styles.contentExtended]: extendLastColumn,
+      })}
       noMargin={cardNoMargin}
       noMarginTop={cardNoMarginTop}
       extra={cardExtra}

diff --git a/ui/lib/utils/tableColumns.tsx b/ui/lib/utils/tableColumns.tsx
@@ -49,16 +49,6 @@ function commonColumnName(fieldName: string): any {
   )
 }
 
-export function dummyColumn(): IColumn {
-  return {
-    name: '',
-    key: 'dummy',
-    minWidth: 28,
-    maxWidth: 28,
-    onRender: (_rec) => null,
-  }
-}
-
 function fieldsKeyColumn(transKeyPrefix: string): IColumn {
   return {
     name: commonColumnName('name'),