diff --git a/km-console/packages/layout-clusters-fe/src/components/CardBar/ZookeeperCard.tsx b/km-console/packages/layout-clusters-fe/src/components/CardBar/ZookeeperCard.tsx index 8f6c65ed3..cc8373499 100644 --- a/km-console/packages/layout-clusters-fe/src/components/CardBar/ZookeeperCard.tsx +++ b/km-console/packages/layout-clusters-fe/src/components/CardBar/ZookeeperCard.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import CardBar, { healthDataProps } from './index'; -import { Utils } from 'knowdesign'; +import { Tooltip, Utils } from 'knowdesign'; import api from '@src/api'; import { HealthStateEnum } from '../HealthState'; @@ -81,7 +81,22 @@ const ZookeeperCard = () => { { title: 'Leader', value() { - return {leaderNode || '-'}; + return ( + + + {leaderNode || '-'} + + + ); }, }, { diff --git a/km-console/packages/layout-clusters-fe/src/components/CardBar/index.less b/km-console/packages/layout-clusters-fe/src/components/CardBar/index.less index 472cafa6b..e53023383 100644 --- a/km-console/packages/layout-clusters-fe/src/components/CardBar/index.less +++ b/km-console/packages/layout-clusters-fe/src/components/CardBar/index.less @@ -64,21 +64,21 @@ margin-left: 12px; padding: 12px 20px; .card-bar-colunms-header { + font-size: 14px; + color: #74788d; + letter-spacing: 0; + text-align: justify; + line-height: 20px; + .anticon-question-circle { + padding: 3px 3px 2px 3px; + margin-left: -3px; font-size: 14px; - color: #74788d; - letter-spacing: 0; - text-align: justify; - line-height: 20px; - .anticon-question-circle { - padding: 3px 3px 2px 3px; - margin-left: -3px; - font-size: 14px; - border-radius: 50%; - &:hover { - background: rgba(33, 37, 41, 0.04); - } + border-radius: 50%; + &:hover { + background: rgba(33, 37, 41, 0.04); } } + } .card-bar-colunms-body { font-size: 40px; color: #212529; @@ -89,6 +89,7 @@ margin-top: 5px; .num { font-family: DIDIFD-Medium; + overflow: hidden; } .sub-title { font-family: @font-family; diff --git a/km-console/packages/layout-clusters-fe/src/components/CardBar/index.tsx b/km-console/packages/layout-clusters-fe/src/components/CardBar/index.tsx index ea683e07c..4fb4121ea 100644 --- a/km-console/packages/layout-clusters-fe/src/components/CardBar/index.tsx +++ b/km-console/packages/layout-clusters-fe/src/components/CardBar/index.tsx @@ -165,17 +165,21 @@ const CardBar = (props: CardBarProps) => { dataIndex: 'passed', width: '30%', render(value: boolean, record: any) { - const icon = value ? : ; - const txt = value ? '已通过' : '未通过'; - const notPassedResNameList = record.notPassedResNameList || []; - return ( -
-
- {icon} {txt} + if (record?.updateTime) { + const icon = value ? : ; + const txt = value ? '已通过' : '未通过'; + const notPassedResNameList = record.notPassedResNameList || []; + return ( +
+
+ {icon} {txt} +
+ {}
- {} -
- ); + ); + } else { + return '-'; + } }, }, ]; diff --git a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/config.tsx b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/config.tsx index e7d4f2ba9..e72bae1df 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/config.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/config.tsx @@ -215,7 +215,7 @@ export const getDetailColumn = (clusterId: number) => [ width: 190, dataIndex: 'updateTime', render: (text: string) => { - return moment(text).format(timeFormat); + return text ? moment(text).format(timeFormat) : '-'; }, }, { @@ -224,21 +224,25 @@ export const getDetailColumn = (clusterId: number) => [ width: 280, // eslint-disable-next-line react/display-name render: (passed: boolean, record: any) => { - if (passed) { + if (record?.updateTime) { + if (passed) { + return ( + <> + + 通过 + + ); + } return ( - <> - - 通过 - +
+ +
未通过
+ +
); + } else { + return '-'; } - return ( -
- -
未通过
- -
- ); }, }, ];