DataCard.tsx 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. import { FC } from 'react';
  2. import { useTranslation } from 'react-i18next';
  3. import { makeStyles } from '@material-ui/core';
  4. import Progress from './Progress';
  5. import {
  6. formatByteSize,
  7. formatSystemTime,
  8. getByteString,
  9. } from '../../utils/Format';
  10. import { DataProgressProps, DataSectionProps, DataCardProps } from './Types';
  11. const getStyles = makeStyles(() => ({
  12. root: {
  13. backgroundColor: '#F6F6F6',
  14. borderTopRightRadius: '8px',
  15. borderBottomRightRadius: '8px',
  16. height: '100%',
  17. padding: '20px 16px',
  18. boxSizing: 'border-box',
  19. },
  20. title: {
  21. display: 'flex',
  22. justifyContent: 'space-between',
  23. },
  24. content: {
  25. color: '#010E29',
  26. fontSize: '20px',
  27. fontWeight: 600,
  28. lineHeight: '36px',
  29. },
  30. desc: {
  31. color: '#82838E',
  32. fontSize: '14px',
  33. lineHeight: '36px',
  34. marginLeft: '8px',
  35. },
  36. rootName: {
  37. color: '#82838E',
  38. fontSize: '20px',
  39. lineHeight: '24px',
  40. },
  41. childName: {
  42. color: '#06AFF2',
  43. fontSize: '20px',
  44. lineHeight: '24px',
  45. },
  46. ip: {
  47. color: '#010E29',
  48. fontSize: '16px',
  49. lineHeight: '24px',
  50. },
  51. sectionRoot: {
  52. borderSpacing: '0 1px',
  53. display: 'table',
  54. marginTop: '24px',
  55. width: '100%',
  56. },
  57. sectionRow: {
  58. display: 'table-row',
  59. },
  60. sectionHeaderCell: {
  61. display: 'table-cell',
  62. color: '#82838E',
  63. fontSize: '12px',
  64. lineHeight: '24px',
  65. padding: '8px 16px',
  66. textTransform: 'uppercase',
  67. width: '50%',
  68. },
  69. sectionCell: {
  70. backgroundColor: 'white',
  71. color: '#010E29',
  72. display: 'table-cell',
  73. fontSize: '14px',
  74. lineHeight: '24px',
  75. padding: '12px 16px',
  76. textTransform: 'capitalize',
  77. verticalAlign: 'middle',
  78. width: '50%',
  79. },
  80. progressTitle: {
  81. fontSize: '14px',
  82. color: '#010E29',
  83. lineHeight: '24px',
  84. display: 'flex',
  85. justifyContent: 'space-between',
  86. },
  87. }));
  88. const DataSection: FC<DataSectionProps> = props => {
  89. const classes = getStyles();
  90. const { titles, contents } = props;
  91. return (
  92. <div className={classes.sectionRoot}>
  93. <div className={classes.sectionRow}>
  94. {titles.map(titleEntry => (
  95. <div key={titleEntry} className={classes.sectionHeaderCell}>
  96. {titleEntry}
  97. </div>
  98. ))}
  99. </div>
  100. {contents.map(contentEntry => {
  101. return (
  102. <div key={contentEntry.label} className={classes.sectionRow}>
  103. <div className={classes.sectionCell}>{contentEntry.label}</div>
  104. <div className={classes.sectionCell}>{contentEntry.value}</div>
  105. </div>
  106. );
  107. })}
  108. </div>
  109. );
  110. };
  111. const DataProgress: FC<DataProgressProps> = ({ percent = 0, desc = '' }) => {
  112. const classes = getStyles();
  113. return (
  114. <div>
  115. <div className={classes.progressTitle}>
  116. <span>{`${Number(percent * 100).toFixed(2)}%`}</span>
  117. <span>{desc}</span>
  118. </div>
  119. <Progress percent={percent} color="#06AFF2" />
  120. </div>
  121. );
  122. };
  123. const DataCard: FC<DataCardProps & React.HTMLAttributes<HTMLDivElement>> =
  124. props => {
  125. const classes = getStyles();
  126. const { t } = useTranslation('systemView');
  127. const { t: commonTrans } = useTranslation();
  128. const capacityTrans: { [key in string]: string } = commonTrans('capacity');
  129. const { node, extend } = props;
  130. // const hardwareTitle = [t('hardwareTitle'), t('valueTitle')];
  131. const hardwareContent = [];
  132. const configTitle = [t('configTitle'), t('valueTitle')];
  133. const systemConfig: { label: string; value: any }[] = [];
  134. const systemTitle = [t('systemTitle'), t('valueTitle')];
  135. const systemContent = [];
  136. const {
  137. created_time: createTime,
  138. updated_time: updateTime,
  139. system_info = {},
  140. hardware_infos: infos = {},
  141. system_configurations,
  142. } = node?.infos || {};
  143. const {
  144. cpu_core_count: cpu = 0,
  145. cpu_core_usage: cpuUsage = 0,
  146. // memory = 1,
  147. memory_usage: memoryUsage = 0,
  148. disk = 1,
  149. disk_usage: diskUsage = 0,
  150. } = infos;
  151. const memUsage = formatByteSize(memoryUsage, capacityTrans);
  152. if (extend) {
  153. hardwareContent.push({ label: t('thCPUCount'), value: cpu });
  154. hardwareContent.push({
  155. label: t('thCPUUsage'),
  156. value: <DataProgress percent={cpuUsage / 100} />,
  157. });
  158. hardwareContent.push({
  159. label: t('thMemUsage'),
  160. value: `${memUsage.value} ${memUsage.unit}`,
  161. });
  162. hardwareContent.push({
  163. label: t('thDiskUsage'),
  164. value: (
  165. <DataProgress
  166. percent={diskUsage / disk}
  167. desc={getByteString(diskUsage, disk, capacityTrans)}
  168. />
  169. ),
  170. });
  171. }
  172. if (system_configurations) {
  173. Object.keys(system_configurations).forEach(key => {
  174. systemConfig.push({ label: key, value: system_configurations[key] });
  175. });
  176. }
  177. const { deploy_mode: mode = '', build_version: version = '' } = system_info;
  178. systemContent.push({ label: t('thVersion'), value: version });
  179. systemContent.push({ label: t('thDeployMode'), value: mode });
  180. systemContent.push({
  181. label: t('thCreateTime'),
  182. value: createTime ? formatSystemTime(createTime) : '',
  183. });
  184. systemContent.push({
  185. label: t('thUpdateTime'),
  186. value: updateTime ? formatSystemTime(updateTime) : '',
  187. });
  188. return (
  189. <div className={classes.root}>
  190. <div className={classes.title}>
  191. <div>
  192. <span className={classes.rootName}>Milvus / </span>
  193. <span className={classes.childName}>{node?.infos?.name}</span>
  194. </div>
  195. {/* <div className={classes.ip}>{`${t('thIP')}:${infos?.ip || ''}`}</div> */}
  196. </div>
  197. {/* {extend && (
  198. <DataSection titles={hardwareTitle} contents={hardwareContent} />
  199. )} */}
  200. <DataSection titles={systemTitle} contents={systemContent} />
  201. {systemConfig.length ? (
  202. <DataSection titles={configTitle} contents={systemConfig} />
  203. ) : null}
  204. </div>
  205. );
  206. };
  207. export default DataCard;